Övningar i JavaScript del 2 Genm dessa övningar frtsätter intrduktinen av JavaScript. Vi tar nu upp if-satser ch lite mer m funktiner. Vi kmmer ckså in på tillämpningar sm att byta en bild på webbsidan ch generering av slumptal. 1. Dkument i övningsmappen På labratinens webbsida kan du ladda ner en zip-fil, sm ger en mapp med ett antal övningsdkument. index.htm innehåller ett textfält ch en knapp, så sm i föregående labratin. Det finns ckså ett antal img-taggar för att visa några bilder på lika sätt. style.css innehåller grundläggande stilinställningar för webbsidan. script.js är filen för JavaScript. Från början innehåller den endast en init-funktin sm är tm. pics är en mapp med ett antal bilder sm tas in på webbsidan ch sm du ckså ska referera till ifrån JavaScript-kden. 2. Villkr ch if-satsen I denna övning ska du skriva en funktin för att kntrllera det svar sm ges i textfältet. Du kmmer då att använda dig av if-satser, för att kntrllera svaret. Händelsehanterare i HTML- filen I HTML-kden lägger du till följande nclick-attribut i buttn-taggen: <buttn type="buttn" nclick="checkanswer()"> Funktinen checkanswer ska anrpas då användaren klickar på knappen. Funktinen i JavaScript- filen Börja med att lägga till en enkel funktin, för att testa att du har alla referenser rätt. Funktinen ska endast läsa in svaret från textfältet ch skriva ut det i span-taggen för resultatet. Lägg till följande funktin sist i js-filen: functin checkanswer() { var answer, resstr; answer = Number(dcument.getElementById("inText").value); resstr = answer; dcument.getelementbyid("result").innerhtml = resstr; } // End checkanswer Om det tal du skriver i textfältet skrivs i span-taggen, är alla referenser till taggarna krrekta. 2012-10-22 Rune Körnefrs (rune.krnefrs@lnu.se) 1
Kntrllera m svaret är ett tal För att kntrllera en variabels värde används en if-sats. För att kntrllera m variabeln är ett tal används funktinen isnan. Skriv in följande kd i funktinen: functin checkanswer() { var answer, resstr; answer = Number(dcument.getElementById("inText").value); resstr = answer; dcument.getelementbyid("result").innerhtml = resstr; } // End checkanswer Funktinen isnan (is-nt-a-number) kntrllerar variabeln inm parentesen (answer). Resultatet är ett värde i datatypen blean, sm är antingen true eller false. Om variabeln inte är ett tal, är resultatet true. Detta kntrlleras i if-satsen. Om villkret i if-satsen är true (dvs answer inte är ett tal), ändras resstr till texten med felmeddelandet. Prva både att skriva in ett tal ch att skriva in någt annat. If- sats för att kntrllera svaret Lägg till en if-sats under den första, enligt följande kd: if (answer == 5 ) resstr = "Rätt"; else resstr = "Fel"; I if-satsen kntrlleras det m variabeln answer har värdet 5. Observera att man här har två likhetstecken. Man kan även ha tre likhetstecken, m man ckså vill kntrllera att det är samma datatyp, men det vill vi inte här, så därför används två likhetstecken i denna kd. Om villkret (dvs answer är 5) är true, sätts resstr till "Rätt". Annars utförs else-satsen ch resstr sätts till "Fel". Skriver du tal i textfältet blir det Rätt eller Fel, berende på vilket tal du skriver. Om du skriver någt annat än ett tal, blir ckså resultatet "Fel" ch inte den text sm skrivs i den första if-satsen. Den andra if-satsen ska endast utföras m resultatet i den första är false. Så lägg till ett else framför den andra if-satsen: else if (answer == 5 ) resstr = "Rätt"; else resstr = "Fel"; Nu är det endast m answer är ett tal sm den andra if-satsen (ch tillhörande else) utförs. 2012-10-22 Rune Körnefrs (rune.krnefrs@lnu.se) 2
3. Glbala ch lkala variabler Medieteknik Nu ska du lägga till lite kd för att räkna hur många gånger sm användaren svarar fel på frågan. Då behövs en variabel sm kan räknas upp med 1, varje gång svaret är fel. Variabeln måste behålla sitt värde mellan lika anrp av funktinen checkanswer ch vi behöver då en glbal variabel. De variabler sm vi hittills använt är lkala i funktinen. De skapas då funktinen anrpas ch försvinner sedan igen, då funktinen är klar. Skapa den glbala variabeln Glbala variabler brukar man skapa antingen utanför alla funktiner eller inuti init-funktinen. Vi gör här på det förstnämnda sättet. Skriv in följande kd överst i js-filen, vanför funktinerna: // Glbal variables var wrnganswercunter = 0; // Cunts nr f wrng answers in the questin f nr f images Variabeln införs med nyckelrdet var ch initieras ckså till värdet 0. Namnet bör väljas så att det förklarar vad variabeln är till för. Ibland blir det lång namn, men det är bättre än att bara kalla variabeln för t.ex. x. Även m namnet förklarar variabeln, så brukar det ändå vara bra att lägga till en kmmentar sm förklarar vad variabeln används till. Lägg till kd för användning av variabeln Ändra if-satserna i checkanswer till: else if (answer == 5 ) resstr = "Rätt"; else { wrnganswercunter += 1; resstr = "Fel. Du har nu svarat fel " + wrnganswercunter + " gånger."; } Nu ska det utföras två prgramsatser i else-delen, så då mger vi dem med klamrar. Variabeln wrnganswercunter räknas upp med 1 med tilldelningsperatrn +=. Variabeln används sedan i meddelandet sm ska skrivas ut. Glbala variabler för HTML- taggar Vi refererar till en input-tagg ch span-tagg med hjälp av dcument.getelementbyid. Du ska sedan ckså referera till img-taggen med den stra bilden ch en del andra taggar. För att förenkla kden ch göra den lite effektivare, ska vi lägga in dessa referenser i glbala variabler. Lägg in följande kd överst i js-filen under den glbala variabeln: var intext, resulttag, largeimg, imgtext, imglist; // References t tags Detta deklarerar fem nya glbala varibler, men de får ännu inga värden. Vi kan inte här referera till de lika taggarna ch tilldela variablerna. Denna kd ligger utanför funktinerna ch utförs då filen läses in i webbläsaren. Då finns ännu inte HTMLtaggarna, eftersm de kmmer efter script-taggen i HTML-filen. 2012-10-22 Rune Körnefrs (rune.krnefrs@lnu.se) 3
Lägg in följande kd i funktinen init: functin init() { intext = dcument.getelementbyid("intext"); resulttag = dcument.getelementbyid("result"); largeimg = dcument.getelementbyid("largeimg"); imgtext = dcument.getelementbyid("imgtext"); imglist = dcument.getelementbyid("imglist"); } // End init Variablerna tilldelas här referenser till de lika HTML-taggarna. Denna funktin utförs på händelsen nlad, då hela webbsidan är inladdad ch då finns HTML-taggarna. Ändra nu funktinen checkanswer till: functin checkanswer() { var answer, resstr; answer = Number(inText.value);... resulttag.innerhtml = resstr; } // End checkanswer Med... avses de övriga raderna i funktinen, men de ska inte ändras, så de upprepas inte här. 4. Byt bild i en img-tagg ch funktin med parameter Nu ska vi lägga till en funktin sm visar en str bild, då man klickar på en liten bild. Vi skapar funktinen i ett antal steg. Tillägg i HTML- kden Lägg till ett nclick-attribut i varje img-tagg för de små bilderna: <img id="smallimg1"... nclick="shwpict()"> <img id="smallimg2"... nclick="shwpict()"> <img id="smallimg3"... nclick="shwpict()"> <img id="smallimg4"... nclick="shwpict()"> <img id="smallimg5"... nclick="shwpict()"> Funktinen shwpict ska anrpas då man klickar på en bild. Tillägg i CSS- kden Lägg till en stil för muspekaren i CSS-filen: #smallpics img {brder:4px slid #6CF; cursr:pinter;} Med denna stil blir markören en hand med pekande finger över bilderna, så att man ser att man kan klicka på dem. 2012-10-22 Rune Körnefrs (rune.krnefrs@lnu.se) 4
Tillägg i JavaScript- kden Lägg till följande funktin sist i js-filen: functin shwpict() { largeimg.src = "pics/large/pic1.jpg"; } // End shwpict Med largeimg (sm initierades i init-funktinen) refererar vi till img-taggen. Sedan frtsätter vi att referera till dess src-attribut. Detta får ett nytt innehåll med en adress till en av de stra bilderna. Det blir då alltid samma bild sm visas, så funktinen är inte klar. Men detta är första steget, sm kan testas, för att se att funktinen anrpas krrekt ch att vi refererar till en bild på rätt sätt. Klicka på en av de små bilderna, så visas den stra bilden. Visa lika bilder parameter i funktinen För att kunna visa den bild man klickar på så måste vi kunna avgöra vilken bild sm användaren klickade på. Vi kan då skicka med en parameter med lika värden i de lika anrpen i img-taggarnas nclick-attribut. I id-attributen ch filnamnen ingår ett nummer, sm skiljer taggarna ch bilderna åt. Vi skickar med det numret sm en parameter. Lägg till parametrar i anrpen i img-taggarna: <img id="smallimg1"... nclick="shwpict(1)"> <img id="smallimg2"... nclick="shwpict(2)"> <img id="smallimg3"... nclick="shwpict(3)"> <img id="smallimg4"... nclick="shwpict(4)"> <img id="smallimg5"... nclick="shwpict(5)"> Vi anger här vilket värde sm ska skickas till funktinen. Detta måste vi i nästa steg se till att ta emt i funktinen. Ändra funktinen shwpict till: functin shwpict(nr) { largeimg.src = "pics/large/pic" + nr + ".jpg"; } // End shwpict Parametern namnges inm parentesen i funktinens deklaratin. Vi kallar den här för nr. Denna kan sedan användas sm en variabel i funktinen. I adressen till bilden använder vi nr, för att få rätt filnamn. Klicka på de små bilderna ch kntrllera att det är den bild sm du klickar på sm visas. 2012-10-22 Rune Körnefrs (rune.krnefrs@lnu.se) 5
Visa bildtexten I img-taggarna för de små bilderna finns en text i alt-attributen. Texten för den bild sm användaren klickade på ska vi nu ta ut ch lägga in i rubriken vanför den stra bilden. Lägg till följande kd i funktinen shwpict: functin shwpict(nr) { largeimg.src = "pics/large/pic" + nr + ".jpg"; var alttext = dcument.getelementbyid("smallimg"+nr).alt; imgtext.innerhtml = alttext; } // End shwpict Först refererar vi till img-taggen med hjälp av getelementbyid. Parametern nr innehåller ett tal mellan 1 ch 5, så rätt id får vi fram genm att lägga ihp "smallimg" ch nr. Sedan lägger vi till alt, för att kmma åt alt-attributet. Denna text sparas i den lkala variabeln alttext. Sedan refererar vi till rubriken med den glbala variabeln imgtext (sm initierades i funktinen init). Där refererar vi till innerhtml ch lägger in texten ifrån variabeln alttext. 5. Slumptal Nu ska vi sätta ihp en funktin sm visar en slumpmässigt vald bild, då man klickar på det blå frågetecknet. Vi har ju redan funktinen shwpict för att visa en bild, så vi ska använda den. Funktinen har en parameter sm är numret på bilden. Det vi behöver göra är alltså att generera ett slumptal mellan 1 ch 5 ch sedan skicka med det sm parameter till shwpict. Funktinen för slumpmässigt vald bild Lägg in följande funktin sist i js-filen: functin shwrandmpict() { var randmnumber = Math.flr(5*Math.randm())+1; shwpict(randmnumber); } // End shwrandmpict På den första raden genereras slumptalet. Med Math.randm() får man ett slumptal mellan 0 ch 1, där 0 är inkluderad men ej 1. Det är alltså ett tal mellan 0 ch 0.999... Detta slumptal multipliceras med 5 ch vi får då ett tal mellan 0 ch 4.999... Med Math.flr avrundas detta nedåt (flr=glv) till ett heltal mellan 0 ch 4, dvs utan decimaler. Lägger vi till 1, blir det ett tal mellan 1 ch 5. Vi använder sedan detta tal sm parameter till shwpict. Anrpa funktinen i img- taggen med bilden på frågetecknet Lägg till ett nclick-attribut i img-taggen i HTML-kden: <img id="imgbtn"... nclick="shwrandmpict()"> Denna funktin har ingen parameter, så här är parentesen tm. 2012-10-22 Rune Körnefrs (rune.krnefrs@lnu.se) 6
6. Funktin med returvärde Medieteknik Bildtexten för varje slumpmässigt vald text ska skrivas ut i div-taggen med id="imglist", så att vi där får en lista av bildtexter för de slumpmässigt valda bilderna. Det är alltså texten i alt-attributet i de små bilderna sm ska skrivas ut, Texten tar vi fram i funktinen shwpict, men vi kan inte skriva ut den där. Då skulle den skrivas ut även då vi klickar på en liten bild ch shwpict anrpas, men det är bara då bilden väljs slumpmässigt sm vi vill skriva ut den. Vi kan då istället returnera texten från shwpict ch ta emt den i shwrandm ch göra utskriften där. Return i shwpict Lägg till en return-sats längst ner i funktinen shwpict: functin shwpict(nr) { largeimg.src = "pics/large/pic" + nr + ".jpg"; var alttext = dcument.getelementbyid("smallimg"+nr).alt; imgtext.innerhtml = alttext; return alttext; } // End shwpict Ta emt returvärdet Innehållet i variabeln alttext returneras till den funktin sm anrpade shwpict. Lägg till en variabel för returvärdet ch gör en utskrift av det i shwrandmpict: functin shwrandmpict() { var randmnumber = Math.flr(5*Math.randm())+1; var picttext = shwpict(randmnumber); imglist.innerhtml += picttext + ", "; } // End shwrandmpict Värdet sm returneras från shwpict sparas i variabeln picttext. På raden under refererar vi till div-taggen med hjälp av imglist (sm initierades i funktinen init) ch dess innerhtml. Vi använder += för att inte ersätta texten i divtaggen, utan lägga till ny text. Den text vi lägger till är innehållet i picttext följt av ett kmmatecken ch blanktecken. Klicka några gånger på frågetecknet. Slut I dessa övningar har vi tagit upp följande: if-sats utan else if-sats med else kntrll av m innehållet i en variabel är ett tal eller ej glbala ch lkala variabler byte av bild i en img-tagg generering av slumptal parametrar ch returvärde i funktiner 2012-10-22 Rune Körnefrs (rune.krnefrs@lnu.se) 7