Introduk+on +ll JavaScript if- sats, funk+oner, bilder

Transkript

1 Föreläsning i webbdesign Introduk+on +ll JavaScript if- sats, funk+oner, bilder Rune Körnefors Medieteknik Rune Körnefors rune.kornefors@lnu.se

2 if- sats I en if- sats kan man kontrollera ee villkor och sedan göra olika saker beroende på om villkoret är sant eller falskt If- satsens villkor Kan t.ex. vara en jämförelse (lika, större än, mindre än, ) av två variabler eller av en variabel och ee konstant värde Resultatet av testet är all+d an+ngen sant eller falskt, så det finns två möjliga vägar ae gå vidare Ibland utnyejar man bara vägen då villkoret är sant. Är villkoret falskt går man då direkt vidare +ll nästa sats erer if- satsen. 2

3 Jämförelse Olika former av if- satsen if (villkor) programsats; if (villkor) programsats; else programsats; if (villkor) { programsats; } else { programsats; } if (villkor 1 ) programsats; else if (villkor 2 ) programsats; else if else if (vilkor n ) programsats; else programsats; McGrath, M. (2009) JavaScript in easy steps, fourth edi>on, In Easy Steps, s ex1"

4 Villkor AND, OR, NOT Exempel ((a>5) && (a<10)) Sant om a ligger mellan 5 och 10, men ej lika med 5 eller 10 ((a<0) && (b<0)) Sant om både a och b är mindre än 0 ((a<0) (b<0)) Sant om a är mindre än 0 eller b är mindre än 0 Inklusivt eller, dvs sant även om både a och b är mindre än 0 (!(a<0)) Sant om inte a<0, kan också skrivas som (a>=0), sant om a är större än eller lika med 0 McGrath, M. (2009) JavaScript in easy steps, fourth edi>on, In Easy Steps, s ex2"

5 Lokala och globala variabler Lokala variabler Variabler som deklareras med var inu+ en funk+on. Variablerna existerar endast inu+ funk+onen. Globala variabler Deklareras med var utanför funk+onerna. Inu+ funk+onerna kan nya värden ges, men nyckelordet var används då ej. Variablerna existerar i hela programmet, så länge webbsidan finns i webbläsaren, i alla funk+oner och mellan olika funk+onsanrop. ex3" 5

6 Funk>on med parametrar och returvärde Parametrar och returvärde En funk+on kan få indata genom ae man skickar en eller flera parametrar +ll den Parametrarna fungerar som variabler i funk+onen Funk+onen kan lämna ifrån sig utdata genom ae e( returvärde returneras +ll anropet Sats" Anrop" Sats" parametrar" Ditt" Datt" Dutt" returvärde" ex4" 6

7 Bilder Byte av bild Referera +ll img- taggen Byt url i src- aeributet <img id="mypict" src="image1.jpg" alt="bilden"> document.getelementbyid("mypict").src = "image2.jpg"; ex5" 7

8 Hur säder man ihop ed program? Webbsidan (dvs det som skapas av html- koden) utgör gränssnieet mellan användaren och programmet. Programmet består av funk+oner som ak+veras av olika delar av webbsidan. Programkonstruk+on: 1. Bestäm vilken funk+onalitet som ska finnas, dvs vad användaren ska kunna göra. 2. Bestäm in- och utdata 3. Bestäm hur gränssnieet ska vara (bilder, knappar, texsält, etc.) och skapa gränssnieet i html. 4. Strukturera programmet i funk+oner och avgör vilken data som behövs (variabler, parametrar, etc.). 5. Skriv funk+onerna i JavaScript och anropa dem från händelsehanterare i html- taggarna. 8

9 Metod Egentligen använder man samma metoder som för design av webbplatser (t.ex. metoden i GarreEs bok), erersom programmet är en del av webbplatsen. Programkonstruk+onen bör föregås av en mål- och behovsanalys och följas upp med användartest. Punkterna på föregående sida är egentligen endast själva programkonstruk+onen, då man redan iden+fierat ee behov och mål för användaren. Även metod på föregående sida är egentligen en itera+v process och skulle kunna illustreras som en spiral eller cirkel. 2" 3" 1" testning" 4" 5" 9

10 Exempel: SoJu>ken Steg 1: Funk+onalitet Användaren ska kunna välja färg och storlek på en soffa och som resultat se hur soffan ser ut. Steg 2: In- och utdata Indata Färger: blå, grön och röd Storlek: 2- eller 3- sitssoffa Utdata En bild för varje soffa. Totalt sex bilder. Steg 3: GränssniEet Färger väljs genom ae man klickar på färgrutor Storlek väljs genom klick på texten 2- sitssoffa eller 3- sitssoffa Bilden på vald soffa uppdateras direkt erer något av valen av färg eller storlek Enkel skiss 10

11 Exempel: SoJu>ken Steg 4: Strukturera i funk+oner och bestäm globala variabler Använd namn som beskriver vad funk+onerna gör och vad variablerna representerar Ini+era variablerna med lämpliga värden Steg 5: Skriv programkoden Skriv kod för en funk+on i taget Testa så ora som möjligt ex6" 11