Loopar och objekt i JavaScript

Transkript

1 Föreläsning i webbdesign Loopar och objekt i JavaScript Rune Körnefors Medieteknik Rune Körnefors rune.kornefors@lnu.se

2 Programflöde Vanligt sekvendellt flöde InstrukDonerna ugörs en eher en i den ordning de står i programmet Jämförelse (if- sats) En eller flera instrukdoner ugörs endast beroende på resultatet av ep test Loop En eller flera instrukdoner ugörs flera gånger 2

3 Loop EP antal programsatser ugörs om och om igen, så länge ep villkor är uppfyllt. while- satsen while (villkor) {programsatser} for- satsen for (inidering;villkor;uppräkning) { programsatser } ex1" 3

4 Objekt Gruppering av egenskaper (variabler) och metoder (funkdoner) JavaScript är objektbaserat HTML- taggar Webbläsarens fönster HTML- dokumentet Inbyggda objekt Date Math Datatyper Number String Array egenskap" egenskap" " metod" metod" " Referenser med punktnota=on: Objekt document.getelementbyid("aaa").value document.getelementbyid("bbb").innerhtml Math.random() Math.floor() Skapa nya objekt: var x = 123; var y = "en text"; var z = new Date(); 4

5 Date- objektet Inbyggt objekt med info om datum och Dd Skapas med new var today = new Date(); var xmaseve = new Date(2012,12,24); FunkDoner för ap ta fram delar av datum eller Dd var y = today.getfullyear(); var h = today.gethours(); ex2" McGrath, M. (2009) JavaScript in easy steps, fourth edi=on, In Easy Steps, s.74f 5

6 index" värde 1 värde 2 värde 3 Array (vektor/lista) En Array är en lista av element. Elementen indexeras från 0 och uppåt. En variabel skapas som en Array: längd = antal element" a = new Array(); // En Array med dynamiskt antal element a = []; // En Array med dynamiskt antal element b = ["red","blue","green"]; // En Array med tre element med värdena inom parenteserna Referera Dll ep element i en Array: a[3] = 27; // Det qärde elementet i a får värdet 27 x = b[1]; // x Dlldelas värdet av det andra elementet i b Exempel på egenskaper och metoder: a.length // Antal element (värden) i a b.join(":") // Ger textsträngen "red:blue:green" ex3" McGrath, M. (2009) JavaScript in easy steps, fourth edi=on, In Easy Steps, s.60f 6

7 Referens =ll element i HTML- koden <img id="pict" src=" " alt=" "> picttag = document.getelementbyid("pict"); picttag.src = " "; <div id="pics"> <img src=" " alt=" "> <img src=" " alt=" "> <img src=" " alt=" "> <img src=" " alt=" "> </div> picstag = document.getelementbyid("pics"); imgarray = picstag.getelementsbytagname("img"); imgarray[0].src = " "; imgarray[1].src = " "; for (i=0; i<imgarray.length; i++) { imgarray[i].src = " "; } 7

8 Exempel: Sortera och visa bilder Man ska kunna sortera ep antal bilder i valfri ordning och sedan visa dessa i ep bildspel. a. Det finns två rader; en rad med ep antal små bilder som ska sorteras, en rad där de sorterade bilderna placeras. b. Klickar man på en bild i den övre raden, flypas den Dll den undre raden. c. Klickar man på en bild i den undre raden, flypas den Dllbaks Dll den övre raden. d. Då man sorterat alla bilderna, klickar man på en länk för ap starta ep bildspel där större versioner av bilderna visas i den sorterade ordningen. e. I bildspelet kan man stega framåt och bakåt eller i en meny välja vilken bild man vill se. DeQa program skapas stegvis i eq antal exempel i denna och kommande föreläsningar 8

9 Exempel: FlyQa bilder I depa steg implementeras så mycket av programmet, så ap man kan flypa bilder från den övre Dll den undre raden, dvs punkt a och b i föregående beskrivning. KonstrukDon: Raderna skapas med två div- element. I den övre raden placeras img- taggar med bilderna. I den undre raden placeras img- taggar med en vit bild. Dessa ger posidoner för de sorterade bilderna. I programmet tar man fram referenser Dll bilderna genom ap först ta fram en referns Dll den div- tagg som omger dem med getelementbyid. DäreHer använder man getelementsbytagname för ap få fram referenser Dll alla img- taggar inom div- taggen. Dessa referenser sparas i variablerna upict för den övre raden och spict för den undre raden (unsorted och sorted). Då kan man i JavaScript referera Dll dem med namnen upict[0], upict[1], etc. (index är alldd 0 för det första elementet) samt spict[0], spict[1], etc. GränssniQet samt ini=ering av globala variabler ex4-1" 9

10 Exempel forts. FlyPa bild delas upp i två steg: 1. Visa bild i den undre raden 2. Ta bort bilden i den övre raden JavaScript- kod samt onclick- aqribut i img- taggarna ex4-2" 1" url = src-attributet för upict[pictnr]" src-attributet i spict[posnr] = url" posnr = posnr + 1" upict[0] upict[1] upict[2] upict[3] upict[4]" funktion" steg 1" steg 2" Klick på bild" Parameter: pictnr" posnr" Global variabel" spict[0] spict[1] spict[2] spict[3] spict[4]" +1" 2" src-attributet i upict[pictnr] = vit bild" 0" initiering" Initiering utförs då sidan laddas in" 10

11 Exempel forts. Är funkdonen för ap flypa bilder komplep eller saknas något? Vad händer om man klickar på en tom (vit) bildruta i den övre raden? 11

12 Exempel forts. De tomma bildrutornas img- taggar finns ju kvar (visar en vit bild), så klickar man på en sådan, flypas den vita bilden Dll den undre raden. Förhindra ap den vita bilden kan flypas: Undersök om url:en för den bild man klickar på innehåller white.jpg Använd indexof FlyPa endast bilden om url:en ej innehåller white.jpg if- sats för kontroll av url ex4-3" 12

13 Exemplet hittills: Sortera och visa bilder! Vad som är löst hi{lls: a. Det finns två rader; en rad med ep antal små bilder som ska sorteras, en rad där de sorterade bilderna placeras. b. Klickar man på en bild i den övre raden, flypas den Dll den undre raden. Nästa steg: c. Klickar man på en bild i den undre raden, flypas den Dllbaks Dll den övre raden. Återstår Dll kommande föreläsningar: d. Då man sorterat alla bilderna, klickar man på en länk för ap starta ep bildspel där större versioner av bilderna visas i den sorterade ordningen. e. I bildspelet kan man stega framåt och bakåt eller i en meny välja vilken bild man vill se. 13

14 Exempel: FlyQa =llbaks bild FlyPa upp bild Användaren klickar på en bild i den undre raden. Bilden placeras i första lediga posidon i den övre raden. I den undre raden flypas de bilder, som finns eher den bild som flypas, ep steg åt vänster. KonstrukDon: Kopiera bild Dll den övre raden SkiHa bilder i den undre raden åt vänster ex4-4" 14