Download to read offline
![Programmering handlar om att instruera en
maskin eller del av en maskin […] att utföra ett
visst arbete.](https://image.slidesharecdn.com/js2-2-160919122128/85/HT16-DA156A-JavaScript-forts-5-320.jpg)
Uploaded byAnton Tibblin
HT16 - DA156A - JavaScript forts.
Om loopar, if-satser, funktioner, DOM, m.m.
More Related Content
Similar to HT16 - DA156A - JavaScript forts.
HT16 - DA156A - JavaScript forts.
- 1. JavaScript Loopar, if-satser, funktioner& interaktiva webbsidor
- 2.
- 3. Dagens föreläsning 1. Repetition 2.If-satser 3. Loopar 4. Funktioner 5. Interaktiva webbsidor
- 4. 1. Repetition Från förraveckan
- 5. Programmering handlar omatt instruera en maskin eller del av en maskin […] att utföra ett visst arbete.
- 6. Variabler • Ett viktigtkoncept ä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;
- 7. 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
- 8.
- 9.
- 10. 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
- 11.
- 12.
- 13.
- 14.
- 15.
- 16. Loopar (iterationer) Göra sakerflera gånger!
- 17. 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
- 18.
- 19.
- 20.
- 21. Några inbyggda funktioner •prompt() – Hämta data från användaren • alert() – Skapa en popupruta • document.write() – Utskrift på sidan
- 22. Vad är enfunktion? • 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.
- 23.
- 24. Hur använde vifunktionerna? • 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 ()
- 25. Definiera funktion • Inomprogrammering ä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
- 26. Funktion (function) • Namngivenuppsä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
- 27. Ett första exempelpå en funktion
- 28. Parametrar • En funktionkan 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.
- 29.
- 30. Exempel på fleraparametrar/argument
- 31. Exempel Att bygga funktionen”showMessage”
- 32. Returvärde • När enfunktion 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
- 34.
- 35. 3. Från funktionertill interaktiva webbsidor
- 36. Strukturera program medfunktioner • 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.
- 37. Trevlig ”sidoeffekt” avatt ha funktioner: Enkelt att anropa en funktion vid musklick
- 38. Anropa en funktionvid 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”
- 39. Anropa en funktionvid 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
- 40. 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>
- 41.
- 42. ”onclick” överallt ärinte så snyggt Kan vi hantera händelser utan att behöva ändra vår HTML?
- 43. Behov: hänvisa tilldelar av HTML-dokument från JavaScript
- 44. Lösning DOM • DocumentObject 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
- 45. DOM • Trädstruktur sommotsvarar taggarnas ordning/nästling • Varje element är en ”nod” i trädet • Relationer mellan noderna beskrivs med förälder/barn och syskon
- 46. Använda DOM • IJavaScript 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 body document.body.childNodes
- 47. Att navigera iDOM • Vi antar att ”node” är en nod/element i DOM-trädet // Navigera mellan noder på samma nivå node.nextSibling node.previousSibling // Nedåt, barnnoder node.firstChild node.lastChild node.childNodes // alla barn // Uppåt, förälder (bara en) node.parentNode
- 49. Vi kommer fokuserapå 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”
- 50.
- 51. 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
- 52.
- 53. Möjligheterna är oändligamed 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
- 54.