värden • Värden kan lagras i variabler • Variabler skapasmed nyckelordet var, följt av ett namn var name; // skapa variabel name = "Bob"; // tilldela värde var age = 40; // skapa och tilldela samtidigt
saker beroende på t.ex. en variabels värde. - Exempel ”miniräknare” & ”frågespel” • Består av ett (eller flera) test, samt vad som ska göras om ett test är sant respektive falskt. var inmatning = prompt(”Ange en siffra”); If(inmatning > 10){ alert(”Du angav ett tal större än 10!”); } else{ alert(”Du angav ett litet tal.”); }
iterera över ett antal instruktioner. • Vi tittade på två olika sorters loopar. 1. While 2. For while(tal < 5){ alert(”Ännu ett varv i loopen”); tal = tal + 1; } for(var tal = 0; tal < 5; tal++){ alert(”Ännu ett varv i loopen”); }
- 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.
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 ()
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
eller fler inparametrar - 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 inparametrar
function showSum(a, b) { var sum = a + b; alert("Summan är " + sum); } // Argumentens ordning avgör vilket värde som blir a resp. b showSum(5, 8); showSum(8, 5);
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.
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”
av händelsedriven programmering (event handling) • Webbläsaren ”lyssnar” efter händelser (musklick) och reagerar genom att anropa den funktion vi angivit
handler (händelsehanterare): en funktion som anropas vid ett event • ”Vid händelsen musklick ska funktionen alert anropas” <button onclick="alert('Hej');"> Testa </button>
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
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
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
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