Övningar i JavaScript del 3 I dessa övningar tar vi upp datumbjektet Date, arrayer ch lpar. Du utgår från ett prgram där man kan klicka på små bilder ch mtsvarande stra bild visas. Detta är i princip samma prgram sm gjrdes för bildval i förra labratinen, men här är det en annan layut ch tillämpning (nu är det val av frukter). Detta prgram ska utökas, så att man ckså kan bläddra mellan de valda bilderna i ett bildspel ch det ska ckså vara möjligt att visa bilderna i en lista. 1. Dkument i övningsmappen På kursens webbplats kan du ladda ner en zip-fil sm ger en mapp med övningsmaterial. Börja med att gå igenm filerna. index.htm innehåller HTML-kd med: en div-tagg med id="header". I den finns en p-tagg med id="date", där dagens datum ska skrivas av en JavaScript-funktin. en div-tagg med id=" fruitbuttns". I den finns ett antal img-taggar för små bilder sm ska användas sm knappar. I dessa img-taggar finns det ett nclick-attribut där funktinen chsefruit anrpas. Sm parameter skickas fruktens namn med. Detta namn används ckså sm namn på bilderna. en div-tagg med id="main". I den finns in img-tagg med id="fruitpict", där en str bild av vald frukt ska visas. Under img-taggen finns ckså två knappar, sm i nclickattribut anrpar funktinerna prevpict ch nextpict. en div-tagg med id="inf". I denna finns två knappar ch p-taggar. Knapparna anrpar funktiner i js-filen sm ska visa en lista av valda bilder, dels sm text ch dels med bilder. Detta ska då läggas in i p-taggarna. script.js innehåller JavaScript-kd med: fyra glbala variabler sm tilldelas i funktinen init. De används sm referenser till de taggar i HTML-kden sm ska förändras. Funktinen init anrpas, då hela webbsidan är inladdad i webbläsaren. funktinen chsefruit, sm anrpas då man klickar på de små bilderna med frukter. Parametern med fruktens namn används för att sätta samman en url ch byta ut bilden i img-taggen för den stra bilden. Detta är på samma sätt sm i föregående labratin, fast där användes ett nummer i filnamnet istället för ett fruktnamn. skal till de fyra funktiner sm anrpas från buttn-taggarna i HTML-kden. I övningarna ska du skriva kd i dessa funktiner. style.css innehåller CSS-kd för att skapa sidans layut. Det är inte nödvändigt att du går igenm den nu, eftersm den inte har någn betydelse för prgrammets funktinalitet. pics är en mapp med de bilder sm används. Den innehåller två undermappar: buttns innehåller bilder för knapparna med frukter. fruits innehåller större bilder med frukter. Bildfilerna är namngivna med frukternas namn, sm skickas sm parameter till funktinen chsefruit i js-filen. Prva prgrammet Öppna filen index.htm i webbläsaren. Klicka på de små bilderna med frukter. En str bild av frukten visas då. I övrigt händer inget, då du klickar på knapparna, eftersm kden i deras funktiner ännu inte är skriven. 2013-11-14 Rune Körnefrs (rune.krnefrs@lnu.se) 1
2. Dagens datum Vi börjar med att använda Date-bjektet för att skriva in dagens datum på webbsidan. Detta ska skrivas i taggen med id="date", sm det finns en referens till i den glbala variabeln datetag. Medieteknik Första varianten av datumet Skriv in följande kd i filen script.js: functin shwdate() { var tday = new Date(); var y = tday.getfullyear(); var m = tday.getmnth(); var d = tday.getdate(); datetag.innerhtml = d + "/" + (m+1) + ", " + y; Med new Date() skapas en ny "instans" av Date-bjektet med infrmatin m aktuell tid ch datum. Det går sedan att hämta ut den infrmatinen med lika funktiner, utifrån den variabel där bjektet sparas, dvs tday. Funktinen getfullyear ger året med fyra siffrr. Funktinen getmnth ger ett värde mellan 0 ch 11 för månaden. Värdet 0 är alltså januari, 1 är februari, etc. Varför det börjar på 0 kmmer du se i nästa steg i denna funktin. Funktinen getdate ger dagens nummer ch är ett värde mellan 1 ch 31. En sträng för datumet sätts samman med variablerna d, m ch y ch skrivs i "date-taggen". Lägg till ett anrp av shwdate sist i funktinen init: functin init() {... shwdate(); Funktinen init anrpas när webbsidan är inladdad ch då ska datumet skrivas ut på sidan. Datumet skrivs högst upp till höger på webbsidan. Skriv månad i klartext Månadens nummer ska översättas till en text. För att göra det inför vi en array med månadernas namn. Lägg till en variabel sm är en array med månadernas namn i början av funktinen ch ändra strängen för utskriften: functin shwdate() { var mnth = ["januari","februari","mars","april","maj","juni", "juli","augusti","september","ktber","nvember","december"];... datetag.innerhtml = d + " " + mnth[m] + " " + y; Variabeln mnth blir en array sm fungerar sm en lista med alla månaders namn. Dessa kan tas ut genm att "indexera" mnth. Indexet för det första värdet i arrayen är 0, så mnth[0] är "januari", mnth[1] är "februri", etc. Det är för att indexen i en array börjar med 0, sm värdet från getmnth är mellan 0 ch 11. 2013-11-14 Rune Körnefrs (rune.krnefrs@lnu.se) 2
Skriv ckså ut dag Lägg till följande i funktinen: functin shwdate() { var day = ["Söndag","Måndag","Tisdag","Onsdag","Trsdag", "Fredag","Lördag"];... var daynr = tday.getday(); datetag.innerhtml = day[daynr] + " den " + d + " " + mnth[m] + " " + y; Funktinen getday ger ett nummer mellan 0 ch 6 för dagens namn. 0 är söndag, 1 är måndag, etc. Både day ch mnth är arrayer med värden sm bestäms då de skapas. 3. Array för valda bilder Nu ska vi spara de bilder sm väljs, så att man sedan kan bläddra runt bland dem i bildspelet. Vi behöver spara flera värden ch använder då en array. Men till skillnad från arrayerna i föregående övning, har vi inga värden från början, så arrayen är tm då den skapas. Den måste ckså behålla sina värden i hela prgrammet, så att vi sedan kan använda den i funktinerna för att gå till föregående eller nästa bild, så det måste vara en glbal variabel. Skapa arrayen ch lägg in bilder Lägg till följande kd högst upp i js-filen bland de glbala variablerna: var selectedfruits = []; Till höger m likhetstecknet är det två hakparenteser utan någt mellan dem. Detta skapar en tm array, sm sedan kan utökas genm att man lägger till värden. Lägg in en instruktin för att spara den valda bilden i arrayen i funktinen chsefruit: functin chsefruit(fruitname) { imgtag.src = "pics/fruits/" + fruitname + ".jpg"; selectedfruits.push(fruitname); Denna funktin anrpas varje gång man klickar på en fruktknapp ch väljer en ny bild, så det är här vi kan lägga in nya bilder i arrayen. Med funktinen push läggs det in ett nytt värde sist i arrayen selectedfruits. Det värde sm läggs in är det sm står inm parentesen. Där används fruitname, sm innehåller namnet på vald bild, t.ex. "apple" eller "range", sm angavs i anrpet av chsefruit i HTML-kden.. Det finns ännu inget synligt resultat av detta, så det kan inte testas i webbläsaren. 2013-11-14 Rune Körnefrs (rune.krnefrs@lnu.se) 3
Skriv ut innehållet i arrayen Skriv in följande i funktinen listfruits: functin listfruits() { namelisttag.innerhtml = selectedfruits.jin(", "); Denna funktin anrpas då man klickar på knappen "Lista valda fruktnamn". Då ska innehållet i variabeln selectedfruits skrivas ut. Värdena i de lika elementen i selectedfruits sätts samman med funktinen jin. Det sm står inm parentesen är de tecken sm ska läggas in mellan värdena i detta fall ett kmmatecken ch ett blanktecken. Texten läggs in i taggen sm representeras av imglisttag. Välj några frukter. Klicka sedan på knappen "Lista valda fruktnamn". Deras namn ska då skrivas ut under knappen. Namnen skrivs på engelska, eftersm det är dessa namn sm valts i prgrammet ch på filerna. Helst bör man undvika åäö i filnamn, eftersm det annars kan bli fel då de publiceras. Det kanske används lika teckenkdningar i prgramfilen ch serverns perativsystem för filnamnen ch då fungerar inte referenserna, så därför är filnamnen på engelska utan åäö. Man skulle kunna ha en funktin, där man med några if-satser eller ytterligare en array översätter rden till svenska, men det bryr vi ss inte m här. Kmmer nu namnen ut på webbsidan, vet vi att det fungerar att lägga in dem i arrayen. I annat fall får du gå tillbaks ch kntrllera din kd. 4. Bildspel för valda frukter Nu ska vi lägga till kd i funktinerna prevpict ch nextpict, för att kunna bläddra mellan bilderna. Vi använder då en kd sm liknar exempel 5 i föreläsning F10. Där används en glbal variabel kallad currentpict, för att hålla reda på vilken bild sm för tillfället visas. I detta prgram ska currentpict vara ett index till selectedpics, så att vi vet vilken bild i arrayen sm visas. I exemplet i föreläsningen används ckså en funktin kallad changepict, sm gör bildbytet ch uppdaterar variabeln currentpict. I funktinerna prevpict ch nextpict kntrlleras currentpict, för att kntrllera att man inte redan är på första respektive sista bilden innan bildbytet sker genm att anrpa changepict. Vi ska här använda en kd, sm är nästan likadan. Kd för bildbyte Skriv in följande kd i filen (tillägg i prevpict ch nextpict samt ny funktin changepict): functin prevpict() { if (currentpict > 0) changepict(currentpict - 1); functin nextpict() { if (currentpict < selectedfruits.length - 1) changepict(currentpict + 1); functin changepict(pictnr) { imgtag.src = "pics/fruits/" + selectedfruits[pictnr] + ".jpg"; currentpict = pictnr; 2013-11-14 Rune Körnefrs (rune.krnefrs@lnu.se) 4
Index för den första bilden är 0, så i prevpict kntrlleras det att currentpict är större än 0. I så fall kan den minskas med 1, så currentpict-1 skickas sm parameter till changepict, för att byta till föregående bild. Mtsvarande sker i nextpict, fast där ökar vi currentpict med 1. Antal värden i arrayen kan avläsas med egenskapen length. Om vi t.ex. har fyra bilder i selectedfruits, så är selectedfruits.length lika med 4. Men eftersm det första indexet är 0, så är då det sista indexet 3. Index för den sista bilden är alltså alltid antal värden minus 1, dvs selectedfruits.length - 1. I funktinen changepict tar vi in parametern pictnr, sm är index för den bild sm ska visas. Namnet får vi då fram genm att använda pictnr sm index till selectedfruits. Om vi t.ex. fått index 3 ch det i elementet med index 3 (dvs det fjärde värdet i arrayen) finns "banana", så är det filen "banana.jpg" sm ska visas. Vi sätter alltså samman selectedfruits[pictindex] med två textsträngar, så att vi får en krrekt url till bildfilen. I changepict uppdateras ckså currentpict, så att den sedan innehåller index till den bild sm nu visas. Inför ch initiera den glbala variabeln currentpict Variabeln currentpict måste ckså definieras ch få ett initialt värde. Lägg till följande rad högst upp i js-filen bland de glbala variablerna: var currentpict; Den glbala variabeln definieras. Lägg in en instruktin för att initiera variabeln i funktinen init: functin init() {... currentpict = -1; Då sidan laddas in är ännu ingen bild vald, så vi sätter värdet till ett värde sm är mindre än index för den första bilden (sm är 0). Vi sätter det här till -1. Då finns det ingen risk att changepict anrpas ch vi försöker visa en bild sm inte finns, m användaren klickar på knapparna för föregående eller nästa bild, innan någn bild är vald. -1 är inte större än 0, när currentpict kntrlleras i prevpict. Då inga bilder är valda ch arrayen selectedfruits är tm, så är length lika med 0. Alltså är selectedfruits.length - 1 lika med -1. Variabeln currentpict, sm då ckså är -1, är alltså inte mindre än selectedfruits.length - 1, så changepict anrpas inte. Lägg ckså till en uppdatering av currentpict i funktinen chsefruit: functin chsefruit(fruitname) { imgtag.src = "pics/fruits/" + fruitname + ".jpg"; selectedfruits.push(fruitname); currentpict = selectedfruits.length - 1; Då man klickat på en bildknapp, läggs bilden till sist i arrayen selectedfruits med funktinen push ch det är den sista bilden sm visas. Vi måste då uppdatera currentpict, så att den innehåller index för den sista bilden. Välj några frukter. Prva sedan att bläddra runt bland valen med knapparna "Föregående" ch "Nästa" under bilden. 2013-11-14 Rune Körnefrs (rune.krnefrs@lnu.se) 5
5. Lp för att visa bilder på alla valda frukter Nu ska vi ckså titta på användning av en lp, för att gå igenm alla värden i arrayen. Utöka funktinen listfruits till följande: functin listfruits() { var i, imglist; namelisttag.innerhtml = selectedfruits.jin(", "); imglist = ""; fr (i=0; i<selectedfruits.length; i++) { imglist += "<img src='pics/fruits/" + selectedfruits[i] + ".jpg' alt='frukt'>"; pictlisttag.innerhtml = imglist; Medieteknik Variabeln i, sm ska användas sm index i lpen, införs sm en lkal variabel i funktinen. Även imglist, sm ska används för att sätta samman den textsträng sm ska skrivas i taggen för listan, införs sm en lkal variabel. I lpen ska vi med += lägga till innehåll i variabeln imglist. Därför ser vi först till att den är tm, genm att lägga in en tm sträng i den, innan vi går in i lpen. Lpen skapas med en fr-sats. Inm parentesen anges först i=0, vilket betyder att variabeln i ska börja på 0. Sedan anges i<selectedfruits.length, sm är ett villkr för m lpen ska upprepas eller ej. Vi går alltså runt i lpen så länge variabeln i är mindre än antalet element i arrayen. Sedan anges i++, vilket betyder att variabeln i ska räknas upp med 1 för varje gång vi går runt i lpen. Om antalet element i arrayen t.ex. är 4, så genmlöps lpen 4 gånger med värdena 0, 1, 2 respektive 3 i variabeln i. Det sm ska utföras i lpen anges inm klamrarna. I detta fall är det endast en prgramsats, så det hade ckså gått bra att utesluta klamrarna. I lpen lägger vi till kd för img-taggar i variabeln imglist (uppdelad på två rader, för att få plats i rutan, men den kan skrivas på en rad). Strängen innehåller HTML-kd för en img-tagg ch i url:en används innehållet i selectedindex[i], dvs fruktens namn. Eftersm variabeln i går från 0 till antal element i arrayen, så blir det lika index för varje varv i lpen ch därmed lika filnamn. Efter lpen lägger vi in imglist i taggen sm representeras av pictlisttag. De img-taggar sm skapats här kmmer alltså in i HTML-kden ch visas på webbsidan. Välj några frukter. Klicka sedan på knappen "Lista valda fruktnamn". Förutm namnen, så ska nu även bilderna kmma fram. 2013-11-14 Rune Körnefrs (rune.krnefrs@lnu.se) 6
6. Byt ut frukter Medieteknik Nu ska vi först använda en lp, för att undersöka m en viss frukt finns med i arrayen. I så fall använder vi ytterligare en lp, för att byta ut en frukt mt en annan. Vi kntrllerar m äpple finns med ch i så fall byter vi alla citrner mt apelsiner. Detta görs med knappen "Om äpplen finns, byt citrner mt apelsiner" sm anrpar funktinen ifapplechangelemnstoranges. Det är ett långt namn, men samtidigt talar det ju m vad funktinen gör. Kntrllera m äpple är valt ch finns med i listan Skriv följande kd i funktinen: functin ifapplechangelemnstoranges() { var i, applefund; applefund = false; fr (i=0; i<selectedfruits.length; i++) { if (selectedfruits[i] == "apple") { applefund = true; break; alert(applefund); Variabeln applefund är en variabel sm används sm en s.k. flagga. Den sätts först till false ch m vi sedan hittar ett äpple, sätter vi den till true. Då kan vi efter lpen kntrllera m det fanns någt äpple eller ej. I lpen går vi igenm alla element i selectedfruits. Vi har en if-sats där värdet sm indexeras av i är lika med "apple". I så fall har vi hittat ett äpple ch sätter applefund till true. Vi vill bara veta m det finns någt äpple över huvudtaget eller ej, så när vi väl hittat ett, behöver vi inte gå vidare ch undersöka resten. Så då avbryter vi lpen med break. Efter lpen visar vi värdet i applefund med alert (en ppup-ruta). Denna rad har vi nu endast med för att kunna testa denna del av funktinen. Den ska sedan tas brt ch ersättas av annan kd, för resten av det sm ska göras i funktinen. Välj några frukter ch inkludera en eller flera äpplen. Klicka sedan på knappen. Du bör då få en ruta med texten true. Ladda sedan m sidan (för att tömma listan) ch välj några frukter igen. Men ta inte med äpple denna gång. Klicka sedan på knappen, så ska du då få en ruta med texten false. 2013-11-14 Rune Körnefrs (rune.krnefrs@lnu.se) 7
Byt citrner mt apelsiner Ta brt alert-satsen ch lägg nu istället till en if-sats för att kntrllera applefund samt en lp för att byta citrner mt apelsiner: functin ifapplechangelemnstoranges() { var i, applefund; applefund = false; fr (i=0; i<selectedfruits.length; i++) { if (selectedfruits[i] == "apple") { applefund = true; break; if (applefund) { fr (i=0; i<selectedfruits.length; i++) { if (selectedfruits[i] == "lemn") selectedfruits[i] = "range"; listfruits(); Med if-satsen kntrlleras m applefund är lika med true. Variabeln innehåller värdet true eller false, så vi behöver inte skriva (applefund == true), utan det räcker det att ange variabelns namn inm parentesen. Om variabeln är true, fanns det ett äpple ch vi utför då en lp för att byta frukterna. I lpen går vi igenm alla värden i selectedfruits. Vi har en if-sats för att kntrllera m värdet är "lemn". I så fall lägger vi istället in "range". Vi avslutar med att anrpa funktinen listfruits, sm listar alla frukter med namn ch bilder, så att vi kan se m bytet skett eller ej. Välj några frukter ch inkludera både äpplen ch citrner. Klicka på knappen "Lista valda fruktnamn", så att du ser vilka frukter du valt. Klicka sedan på knappen "Om äpplen finns, byt citrner mt apelsiner" ch kntrllera att citrnerna byts ut mt apelsiner. Ladda sedan m sidan ch välj några frukter igen. Inkludera citrner, men inga äpplen. Klicka sedan på knapparna igen ch kntrllera att citrnerna inte byts ut. Slut Därmed är övningarna slut för den här gången. I dessa övningar har vi tagit upp: Användning av Date-bjektet, för att ta ut dag ch datum. Array med värden sm anges då variabeln definieras. Array med dynamiskt innehåll ch strlek. Variabeln definieras sm en tm array ch värdena läggs till senare. Användning av push, för att lägga till värden sist i en array. Funktinen jin, för att göra m en array till en textsträng sm kan skrivas ut på sidan. Egenskapen length, för att avgöra hur många element (värden) sm finns i en array. Lp för att utföra någt ett upprepat antal gånger. Vi tg upp fr-lpen med en variabel sm räknas upp för varje varv i lpen. Satsen break för att avbryta en lp. 2013-11-14 Rune Körnefrs (rune.krnefrs@lnu.se) 8