ht16 - da156a - javascript forts
TRANSCRIPT
![Page 1: HT16 - DA156A - JavaScript forts](https://reader036.vdocuments.mx/reader036/viewer/2022062523/5872916c1a28ab36118b644d/html5/thumbnails/1.jpg)
JavaScriptLoopar, if-satser, funktioner & interaktiva webbsidor
![Page 2: HT16 - DA156A - JavaScript forts](https://reader036.vdocuments.mx/reader036/viewer/2022062523/5872916c1a28ab36118b644d/html5/thumbnails/2.jpg)
Frågor kring JavaScript?
![Page 3: HT16 - DA156A - JavaScript forts](https://reader036.vdocuments.mx/reader036/viewer/2022062523/5872916c1a28ab36118b644d/html5/thumbnails/3.jpg)
Dagens föreläsning
1. Repetition
2. If-satser
3. Loopar
4. Funktioner
5. Interaktiva webbsidor
![Page 4: HT16 - DA156A - JavaScript forts](https://reader036.vdocuments.mx/reader036/viewer/2022062523/5872916c1a28ab36118b644d/html5/thumbnails/4.jpg)
1. RepetitionFrån förra veckan
![Page 5: HT16 - DA156A - JavaScript forts](https://reader036.vdocuments.mx/reader036/viewer/2022062523/5872916c1a28ab36118b644d/html5/thumbnails/5.jpg)
Programmering handlar om att instruera en maskin eller del av en maskin […] att utföra ett
visst arbete.
![Page 6: HT16 - DA156A - JavaScript forts](https://reader036.vdocuments.mx/reader036/viewer/2022062523/5872916c1a28ab36118b644d/html5/thumbnails/6.jpg)
Variabler
• Ett viktigt koncept är att kunna spara undan värden
• Värden kan lagras i variabler
• Variabler skapasmed nyckelordet var, följt av ett namn
var name = ”Anton”;
var age = 25;
![Page 7: HT16 - DA156A - JavaScript forts](https://reader036.vdocuments.mx/reader036/viewer/2022062523/5872916c1a28ab36118b644d/html5/thumbnails/7.jpg)
Värden i JavaScript
• Det finns sex typer av värden i JavaScript
1. Number (siffror)
2. String (textsträngar)
3. Boolean (booleskt värde; sant/falskt)
4. Array
5. Object
6. Undefined & null
![Page 8: HT16 - DA156A - JavaScript forts](https://reader036.vdocuments.mx/reader036/viewer/2022062523/5872916c1a28ab36118b644d/html5/thumbnails/8.jpg)
Exempel från senast
![Page 9: HT16 - DA156A - JavaScript forts](https://reader036.vdocuments.mx/reader036/viewer/2022062523/5872916c1a28ab36118b644d/html5/thumbnails/9.jpg)
If-satserSelektion
![Page 10: HT16 - DA156A - JavaScript forts](https://reader036.vdocuments.mx/reader036/viewer/2022062523/5872916c1a28ab36118b644d/html5/thumbnails/10.jpg)
Val / selektion
• Ofta ska program göra olika saker beroende på användarinmatning eller resultat av en beräkning
• I JavaScript kan vi välja att utföra en uppsättning instruktion, endast om ett uttryck är sant
• Detta görs med en if-sats
![Page 11: HT16 - DA156A - JavaScript forts](https://reader036.vdocuments.mx/reader036/viewer/2022062523/5872916c1a28ab36118b644d/html5/thumbnails/11.jpg)
If…
![Page 12: HT16 - DA156A - JavaScript forts](https://reader036.vdocuments.mx/reader036/viewer/2022062523/5872916c1a28ab36118b644d/html5/thumbnails/12.jpg)
If… Else…
![Page 13: HT16 - DA156A - JavaScript forts](https://reader036.vdocuments.mx/reader036/viewer/2022062523/5872916c1a28ab36118b644d/html5/thumbnails/13.jpg)
Exempel, if-sats
![Page 14: HT16 - DA156A - JavaScript forts](https://reader036.vdocuments.mx/reader036/viewer/2022062523/5872916c1a28ab36118b644d/html5/thumbnails/14.jpg)
Exempel, if-sats
![Page 15: HT16 - DA156A - JavaScript forts](https://reader036.vdocuments.mx/reader036/viewer/2022062523/5872916c1a28ab36118b644d/html5/thumbnails/15.jpg)
ExempelIf-satser
![Page 16: HT16 - DA156A - JavaScript forts](https://reader036.vdocuments.mx/reader036/viewer/2022062523/5872916c1a28ab36118b644d/html5/thumbnails/16.jpg)
Loopar (iterationer)Göra saker flera gånger!
![Page 17: HT16 - DA156A - JavaScript forts](https://reader036.vdocuments.mx/reader036/viewer/2022062523/5872916c1a28ab36118b644d/html5/thumbnails/17.jpg)
Iterationer / loopar
• Det är vanligt att behöva upprepa en uppsättning instruktioner flera gånger.
• Detta är att iterera och göra med en loop.
• while-loop
• for-loop
![Page 18: HT16 - DA156A - JavaScript forts](https://reader036.vdocuments.mx/reader036/viewer/2022062523/5872916c1a28ab36118b644d/html5/thumbnails/18.jpg)
Exempel, loopar
![Page 19: HT16 - DA156A - JavaScript forts](https://reader036.vdocuments.mx/reader036/viewer/2022062523/5872916c1a28ab36118b644d/html5/thumbnails/19.jpg)
ExempelLoopar
![Page 20: HT16 - DA156A - JavaScript forts](https://reader036.vdocuments.mx/reader036/viewer/2022062523/5872916c1a28ab36118b644d/html5/thumbnails/20.jpg)
FunktionerÅteranvända samma kod!
![Page 21: HT16 - DA156A - JavaScript forts](https://reader036.vdocuments.mx/reader036/viewer/2022062523/5872916c1a28ab36118b644d/html5/thumbnails/21.jpg)
Några inbyggda funktioner
• prompt() – Hämta data från användaren
• alert() – Skapa en popupruta
• document.write() – Utskrift på sidan
![Page 22: HT16 - DA156A - JavaScript forts](https://reader036.vdocuments.mx/reader036/viewer/2022062523/5872916c1a28ab36118b644d/html5/thumbnails/22.jpg)
Vad är en funktion?
• Exempel på funktioner:- prompt()- alert()- document.write()
• Vi vet vad de gör, men inte hur.
• Vi påverkar körningen genom att skicka indata (t.ex. vad som ska skrivas ut, vilket meddelande som ska synas).
• I vissa fall (prompt()) får vi tillbaka ett värde.
![Page 23: HT16 - DA156A - JavaScript forts](https://reader036.vdocuments.mx/reader036/viewer/2022062523/5872916c1a28ab36118b644d/html5/thumbnails/23.jpg)
Exempel 2
![Page 24: HT16 - DA156A - JavaScript forts](https://reader036.vdocuments.mx/reader036/viewer/2022062523/5872916c1a28ab36118b644d/html5/thumbnails/24.jpg)
Hur använde vi funktionerna?
• Vi kallade på dem för att använda deras funktionalitet
• Vi skickade med värde för att funktionen skulle generera det resultat vi önskade.
• Vi kallade på dem genom att ange deras funktionsnamn – och skicka med värdet inom ()
![Page 25: HT16 - DA156A - JavaScript forts](https://reader036.vdocuments.mx/reader036/viewer/2022062523/5872916c1a28ab36118b644d/html5/thumbnails/25.jpg)
Definiera funktion
• Inom programmering är en funktion, även subrutin, procedur, metod, underprogram eller subprogram,
en del av ett datorprogram som kan anropas för att utföra en viss uppgift oberoende av resten av koden.
• http://sv.wikipedia.org/wiki/Funktion_%28programmering%29
![Page 26: HT16 - DA156A - JavaScript forts](https://reader036.vdocuments.mx/reader036/viewer/2022062523/5872916c1a28ab36118b644d/html5/thumbnails/26.jpg)
Funktion (function)
• Namngiven uppsättning instruktioner- Kan ha en eller fler parametrar- Kan producera ett returvärde
• Används som byggstenar för program.
• En funktion kan anropas (köras) – allt man behöver veta är namnet på funktionen och om det finns parametrar
![Page 27: HT16 - DA156A - JavaScript forts](https://reader036.vdocuments.mx/reader036/viewer/2022062523/5872916c1a28ab36118b644d/html5/thumbnails/27.jpg)
Ett första exempel på en funktion
![Page 28: HT16 - DA156A - JavaScript forts](https://reader036.vdocuments.mx/reader036/viewer/2022062523/5872916c1a28ab36118b644d/html5/thumbnails/28.jpg)
Parametrar
• En funktion kan ha 0 till flera parametrar
• En parameter är som en variabel, vars värde definieras vid anropet av funktionen
• Det värde som skickas till funktionsanrop kallas argument.
![Page 29: HT16 - DA156A - JavaScript forts](https://reader036.vdocuments.mx/reader036/viewer/2022062523/5872916c1a28ab36118b644d/html5/thumbnails/29.jpg)
Exempel på parameter/argument
![Page 30: HT16 - DA156A - JavaScript forts](https://reader036.vdocuments.mx/reader036/viewer/2022062523/5872916c1a28ab36118b644d/html5/thumbnails/30.jpg)
Exempel på flera parametrar/argument
![Page 31: HT16 - DA156A - JavaScript forts](https://reader036.vdocuments.mx/reader036/viewer/2022062523/5872916c1a28ab36118b644d/html5/thumbnails/31.jpg)
ExempelAtt bygga funktionen ”showMessage”
![Page 32: HT16 - DA156A - JavaScript forts](https://reader036.vdocuments.mx/reader036/viewer/2022062523/5872916c1a28ab36118b644d/html5/thumbnails/32.jpg)
Returvärde
• När en funktion kört klart kan den returnera ett värde
• Det värdet blir tillgängligt där funktionen anropas
• En funktion som inte anger ett returvärde själv, returneras undefined
![Page 33: HT16 - DA156A - JavaScript forts](https://reader036.vdocuments.mx/reader036/viewer/2022062523/5872916c1a28ab36118b644d/html5/thumbnails/33.jpg)
![Page 34: HT16 - DA156A - JavaScript forts](https://reader036.vdocuments.mx/reader036/viewer/2022062523/5872916c1a28ab36118b644d/html5/thumbnails/34.jpg)
Exempel 5
![Page 35: HT16 - DA156A - JavaScript forts](https://reader036.vdocuments.mx/reader036/viewer/2022062523/5872916c1a28ab36118b644d/html5/thumbnails/35.jpg)
3. Från funktioner till interaktiva webbsidor
![Page 36: HT16 - DA156A - JavaScript forts](https://reader036.vdocuments.mx/reader036/viewer/2022062523/5872916c1a28ab36118b644d/html5/thumbnails/36.jpg)
Strukturera program med funktioner
• Instruktioner anger hur saker ska utföras
• Ofta är det lättare att tänka vad som ska utföras
• Funktioner låter oss separera ”vad” från ”hur”• Definiera uppgiften, lista ut vilka indata som krävs, bestämma vad resultatet
ska vara.
![Page 37: HT16 - DA156A - JavaScript forts](https://reader036.vdocuments.mx/reader036/viewer/2022062523/5872916c1a28ab36118b644d/html5/thumbnails/37.jpg)
Trevlig ”sidoeffekt” av att ha funktioner:Enkelt att anropa en funktion vid musklick
![Page 38: HT16 - DA156A - JavaScript forts](https://reader036.vdocuments.mx/reader036/viewer/2022062523/5872916c1a28ab36118b644d/html5/thumbnails/38.jpg)
Anropa en funktion vid musklick
• För varje element på en webbsida så kan man ange JavaScript som ska köras vid ett musklick
• Typiskt anges en funktion som ska anropas
• Detta görs med HTML-attributet ”onclick”
![Page 39: HT16 - DA156A - JavaScript forts](https://reader036.vdocuments.mx/reader036/viewer/2022062523/5872916c1a28ab36118b644d/html5/thumbnails/39.jpg)
Anropa en funktion vid musklick
• Detta är en form av händelsedriven programmering (event handling)
• Webbläsaren ”lyssnar” efter händelser (musklick) och reagerar genom att anropa den funktion vi angivit
![Page 40: HT16 - DA156A - JavaScript forts](https://reader036.vdocuments.mx/reader036/viewer/2022062523/5872916c1a28ab36118b644d/html5/thumbnails/40.jpg)
Event (händelser)
• Event (händelser): genereras av användaren
• Event handler (händelsehanterare): en funktion som anropas vid ett event
• ”Vid händelsen musklick ska funktionen alert anropas”
<button onclick="alert('Hej');">
Testa
</button>
![Page 41: HT16 - DA156A - JavaScript forts](https://reader036.vdocuments.mx/reader036/viewer/2022062523/5872916c1a28ab36118b644d/html5/thumbnails/41.jpg)
Exempel 1
![Page 42: HT16 - DA156A - JavaScript forts](https://reader036.vdocuments.mx/reader036/viewer/2022062523/5872916c1a28ab36118b644d/html5/thumbnails/42.jpg)
”onclick” överallt är inte så snyggt
Kan vi hantera händelser utan att behöva ändra vår HTML?
![Page 43: HT16 - DA156A - JavaScript forts](https://reader036.vdocuments.mx/reader036/viewer/2022062523/5872916c1a28ab36118b644d/html5/thumbnails/43.jpg)
Behov: hänvisa till delar av HTML-dokument från JavaScript
![Page 44: HT16 - DA156A - JavaScript forts](https://reader036.vdocuments.mx/reader036/viewer/2022062523/5872916c1a28ab36118b644d/html5/thumbnails/44.jpg)
Lösning DOM
• Document Object Model (DOM) är en representation av HTML-dokumentet i JavaScript
• Via DOM är det möjligt att manipulera alla egenskaper, för alla element
• Med DOM kan vi (äntligen?) separera JavaScript från HTML
![Page 45: HT16 - DA156A - JavaScript forts](https://reader036.vdocuments.mx/reader036/viewer/2022062523/5872916c1a28ab36118b644d/html5/thumbnails/45.jpg)
DOM
• Trädstruktur som motsvarar taggarnas ordning/nästling
• Varje element är en ”nod” i trädet
• Relationer mellan noderna beskrivs med förälder/barn och syskon
![Page 46: HT16 - DA156A - JavaScript forts](https://reader036.vdocuments.mx/reader036/viewer/2022062523/5872916c1a28ab36118b644d/html5/thumbnails/46.jpg)
Använda DOM
• I JavaScript kan man alltid komma åt DOM via objektet ”document”
• Därifrån kan vi ”navigera” genom trädet
// referens till body-elementet:document.body
// lista över alla element i bodydocument.body.childNodes
![Page 47: HT16 - DA156A - JavaScript forts](https://reader036.vdocuments.mx/reader036/viewer/2022062523/5872916c1a28ab36118b644d/html5/thumbnails/47.jpg)
Att navigera i DOM
• Vi antar att ”node” är en nod/element i DOM-trädet
// Navigera mellan noder på samma nivånode.nextSiblingnode.previousSibling
// Nedåt, barnnoder
node.firstChild
node.lastChildnode.childNodes // alla barn
// Uppåt, förälder (bara en)node.parentNode
![Page 48: HT16 - DA156A - JavaScript forts](https://reader036.vdocuments.mx/reader036/viewer/2022062523/5872916c1a28ab36118b644d/html5/thumbnails/48.jpg)
![Page 49: HT16 - DA156A - JavaScript forts](https://reader036.vdocuments.mx/reader036/viewer/2022062523/5872916c1a28ab36118b644d/html5/thumbnails/49.jpg)
Vi kommer fokusera på två ”genvägar”
• document.querySelector – leta upp det första elementet som matchar vår ”sökning”
• document.querySelectorAll – leta upp alla elementet som matchar vår ”sökning”
![Page 50: HT16 - DA156A - JavaScript forts](https://reader036.vdocuments.mx/reader036/viewer/2022062523/5872916c1a28ab36118b644d/html5/thumbnails/50.jpg)
ExempelJavaScript och DOM
![Page 51: HT16 - DA156A - JavaScript forts](https://reader036.vdocuments.mx/reader036/viewer/2022062523/5872916c1a28ab36118b644d/html5/thumbnails/51.jpg)
DOM och händelser
• Med hjälp av DOM kan vi hämta referenser till element
• Har man en elementreferens kan man ändra attributet ”onclick”
• … och många andra händelseattribut:http://www.w3schools.com/tags/ref_eventattributes.asp
![Page 52: HT16 - DA156A - JavaScript forts](https://reader036.vdocuments.mx/reader036/viewer/2022062523/5872916c1a28ab36118b644d/html5/thumbnails/52.jpg)
ExempelDOM och händelser
![Page 53: HT16 - DA156A - JavaScript forts](https://reader036.vdocuments.mx/reader036/viewer/2022062523/5872916c1a28ab36118b644d/html5/thumbnails/53.jpg)
Möjligheterna är oändliga med DOM
Några saker kan vara speciellt bra att ha sett:
• Ersätta innehåll i element
• Läsa och skriva till formulärselement
• Ändra CSS dynamiskt
![Page 54: HT16 - DA156A - JavaScript forts](https://reader036.vdocuments.mx/reader036/viewer/2022062523/5872916c1a28ab36118b644d/html5/thumbnails/54.jpg)
Extra exempel