Övningar i JavaScript del 7 I denna labratin återanvänder vi bilderna på frukter, sm vi haft i ett par tidigare labratiner. Denna gång ska vi lägga till visuella effekter då en frukt väljs. Klickar man på en knapp ska den glida ut till höger ifrån övriga knappar. Samtidigt ska en str bild av vald frukt tna in. Rutan med den stra bilden har ckså en stängningsknapp ch klickar man på den ska bilden tna brt. Alla dessa effekter skapas med en timer. Vi ska ckså titta på användning av ckies. Då man lämnar webbsidan, ska de frukter sm är valda (dvs de sm flyttats åt höger) sparas i en ckie. Då man sedan kmmer tillbaks till sidan, läses ckien in ch de valda frukterna placeras åt höger. 1. Mappen med övningsmaterial På labratinens webbsida kan du ladda ner en zip-fil med övningsmaterial. Då du packat upp den, får du en mapp med följande innehåll: index.htm Denna fil innehåller ett antal img-taggar för fruktknapparna. Img-taggarna mges av en div-tagg med id="fruitbuttns". Det finns ckså en div-tagg med id="largepictbx" ch i den finns det en h4-tagg ch en img-tagg sm ska uppdateras, då vi byter frukt. style.css CSS-kden skapar layuten för sidan ch psitinerar fruktknapparna till vänster m rutan med den stra bilden. Rutan med den stra bilden (dvs #largepictbx) är från början dld med display:nne. script.js Här finns glbala variabler för de taggar sm vi behöver kmma åt i prgrammet. Dessa variabler initieras i init-funktinen. Fruktknapparna får ckså en händelsehanterare för nclick. Funktinen chsefruit är dck ännu så länge tm. buttns ch fruits I dessa mappar finns de bilder sm används. I övningarna kmmer du att göra ett litet tillägg i style.css. I övrigt är det i script.js, sm du kmmer att lägga till kd. 2. Markera knappen för vald frukt I det första steget ska du skriva funktinen chsefruit, så att den knapp man klickar på skjuts åt höger. Klickar man sedan på den igen, så ska den skjutas tillbaks åt vänster. För att göra detta ska värdet i knappens style.left förändras. Abslut psitinering Bilderna för fruktknapparna har nu en relativ psitinering (eftersm psitin inte är valt i CSSkden) ch deras placering på webbsidan avgörs endast av var de finns i HTML-kden. För att kunna ändra left-krdinaten, måste de få en abslut psitinering i CSS-kden. Ändra CSS-kden genm att lägga till följande (i fetstil): #fruitbuttns { psitin:relative; #fruitbuttns img { psitin:abslute; Den mgivande div-taggen får psitin:relative, så att krdinaterna för de inre imgtaggarna blir inm div-taggen ch inte i hela fönstret. 2012-12-09 Rune Körnefrs (rune.krnefrs@lnu.se) 1
img-taggarna får psitin:abslute, så att vi sedan kan ändra left-krdinaten i JavaScriptkden. Vi tar inte med några värden på tp ch left i CSS-kden, så de blir 0. Dessa värden ska istället sättas i JavaScript-kden. left måste sättas i JavaScript-kden, för att vi där sedan ska kunna avläsa den. tp ska vara lika för bilderna ch det kan de inte bli här, eftersm vi här ger samma CSS-kd för alla img-taggar. Därför får vi ge dem lika värden på tp i JavaScript-kden. Studera resultatet i webbläsaren. Alla bilder ligger nu i på varandra i samma psitin, så därför syns endast den sista bilden. Psitinera knapparna Lägg till left ch tp i lpen i init-funktinen: functin init() { fr (i=0; i<fruitbtntags.length; i++) { fruitbtntags[i].nclick = chsefruit; fruitbtntags[i].style.left = "0px"; fruitbtntags[i].style.tp = (i*64) + "px"; Värdet för left sätt till 0, eftersm alla knappar från början ska ligga längst till vänster. Värdet för tp bestäms med lp-variabeln, så för den första knappen blir det 0, för den andra 64, för nästa 128, etc. Bilderna för knapparna är 60x60 pixlar, så med dessa värden blir det ett mellanrum på några pixlar mellan knapparna. Funktinen chsefruit I funktinen sm anrpas, då man klickar på en knapp, ska vi avläsa left-krdinaten ch avgöra vad sm ska göras. Är värdet mindre än 70, ska den skjutas åt höger, annars tillbaks åt vänster till värdet 0. Lägg till följande kd i funktinen chsefruit: functin chsefruit() { var x; x = parseint(this.style.left); if (x < 70) this.style.left = "70px"; else this.style.left = "0px"; Värdet i left-krdinaten är "0px" eller "70px". För att få brt enheten px, används funktinen parseint. Med den anger vi att innehållet ska tlkas sm ett heltal. Här ändrar vi värdet direkt till 70px eller 0px, så knappen hppar direkt till dessa psitiner. Vi ska sedan ändra kden, så att den glider till psitinerna. 2012-12-09 Rune Körnefrs (rune.krnefrs@lnu.se) 2
3. Glidfunktiner för knapparna Medieteknik Nu ska vi lägga till kd, så att knapparna glider till sina nya psitiner. Detta ska göras med en timer sm anrpar en funktin, sm gradvis flyttar knappen. Funktiner för att flytta knappen Ändra funktinen chsefruit, så att vi anrpar två funktiner, istället för att ändra left direkt. Lägg ckså till en glbal variabel sm ska vara referens till den knapp sm ska flyttas: functin chsefruit() { var x; slidetag = this; x = parseint(this.style.left); if (x < 70) slideright(); else slideleft(); I funktinerna slideright ch slideleft, behöver vi veta vilken tagg sm ska förändras, så därför sparar vi det i en glbal variabel, slidetag. Eftersm funktinerna sedan ska anrpas av en timer, kan vi inte ha parametrar, utan får därför spara referensen i en glbal variabel. Inför ckså den glbala variabeln högst upp i js-filen: var slidetag; Längst ner i js-filen lägger du in funktinerna slideright ch slideleft: functin slideright() { slidetag.style.left = "70px"; functin slideleft() { slidetag.style.left = "0px"; Till att börja med ändrar vi left-krdinaten direkt, så sm tidigare, så att vi kan testa att funktinerna anrpas krrekt. Det ska nu fungera på samma sätt sm tidigare. Funktinen slideright Nu ska funktinen ändras, så att vi får en animerad förflyttning. Ändra funktinen till följande: functin slideright() { var x; x = parseint(slidetag.style.left); if (x < 70) { slidetag.style.left = (x+2) + "px"; slidetimerref = settimeut(slideright,5); Vi avläser left-krdinaten ch kntrllerar m den är mindre än 70. I så fall ska vi flytta knappen en liten bit (i denna funktin 2 pixlar) ch sedan starta en timer, för att aktivera funktinen på nytt efter en viss tid. I detta fall väljer vi att anrpa funktinen igen efter 5 millisekunder. 2012-12-09 Rune Körnefrs (rune.krnefrs@lnu.se) 3
Lämpliga värden för att förändra left ch lämplig tid, får man prva sig fram till. Ju mindre värden på förändringen eller ju längre tid i timern, dest långsammare blir animeringen. Har man för stra värden i förändringen eller för lång tid i timern, så kan rörelsen se hackig ut. Inför ckså variabeln slidetimerref sm en glbal variabel högst upp i js-filen: var slidetimerref; Prva t.ex. att ändra tiden till 20 ms ch förändringen av left till 4. Prva ckså att ha tiden 5 ms ch ändra förändringen av left till 1 pixel. Jämför resultatet i rörelsen. Funktinen slideleft Funktinen för att skjuta knappen åt andra hållet blir nästan likadan. Skriv in följande kd i funktinen: functin slideleft() { var x; x = parseint(slidetag.style.left); if (x > 0) { slidetag.style.left = (x-2) + "px"; slidetimerref = settimeut(slideleft,5); I denna funktin minskar vi istället left, tills vi kmmer ner till 0. I övrigt är kden likadan sm den förra funktinen. 5. Rutan med den stra bilden När man klickar på en knapp för en frukt, ska rutan med den stra bilden visas. Visa rutan Lägg till följande funktin i js-filen: functin shwlargepict(imgtag) { var urlarr; fruittitletag.innerhtml = imgtag.alt; urlarr = imgtag.src.split("/"); urlarr[urlarr.length-2] = "fruits"; fruitpicttag.src = urlarr.jin("/"); largepictbxtag.style.display = "blck"; Sm parameter har vi imgtag, sm ska vara en referens till img-taggen för knappen. Ur den hämtar vi alt-attributet ch lägger in sm text i h4-taggen. Vi hämtar ckså srcattributet ch byter ut "buttns" i url:en mt "fruits", dvs den näst sista delen i url:en. Taggen för rutan visas sedan genm att vi ändrar display till blck. 2012-12-09 Rune Körnefrs (rune.krnefrs@lnu.se) 4
Lägg ckså till ett anrp av funktinen i chsefruit: functin chsefruit() { if (x < 70) { slideright(); shwlargepict(this); else slideleft(); Det är bara då knappen skjuts åt höger, sm vi ska visa den stra bilden. Så vi lägger in anrpet av shwlargepict i if-satsen, efter det att vi startat slideright. Sm parameter skickar vi med this, sm är en referens till img-taggen för knappen. Bildrutan ska tna in Rutan ska nu tna in, genm att den först sätts till att vara helt genmskinlig. Sedan ändrar vi det gradvis. Detta görs med stilen pacity. Men eftersm det ännu inte är standardiserat, görs det på lika sätt i lika webbläsare. För att strukturera upp kden lägger vi därför förändringen av pacity i en egen funktin. Lägg till följande funktin i js-filen: functin setopacity(pvalue) { largepictbxtag.style.pacity = (pvalue / 100); largepictbxtag.style.mzopacity = (pvalue / 100); largepictbxtag.style.khtmlopacity = (pvalue / 100); largepictbxtag.style.filter = "alpha(pacity=" + pvalue + ")"; imgopacity = pvalue; Parametern är ett värde mellan 0 ch 100, sm är det nya värdet för paciteten. Den första raden gäller för Firefx, Safari ch Opera Den andra raden för gamla Mzilla-webbläsare Den tredje för Knquerer i Linux ch Safari i MacOS X Den fjärde för Internet Explrer På den sista raden sparar vi aktuellt värde för paciteten i en glbal variabel, imgopacity. Lägg ckså till följande funktin i js-filen: functin fadein() { setopacity(imgopacity+2); if (imgopacity < 100) fadetimerref = settimeut(fadein,50); Denna funktin används för intningen. Den förändrar paciteten ch m vi inte kmmit upp till 100, så startas en timer sm gör att funktinen anrpas igen efter en krt tid. 2012-12-09 Rune Körnefrs (rune.krnefrs@lnu.se) 5
Starta intningen i funktinen shwlargepict, genm att där lägga till följande kd: functin shwlargepict(imgtag) { var urlarr; cleartimeut(fadetimerref); setopacity(0); fruittitletag.innerhtml = imgtag.alt; urlarr = imgtag.src.split("/"); urlarr[urlarr.length-2] = "fruits"; fruitpicttag.src = urlarr.jin("/"); largepictbxtag.style.display = "blck"; fadein(); I början av funktinen stppas först timern för intningen, ifall den var igång. Man kan ju klicka på en ny fruktknapp, innan intningen av föregående bild är klar. Vi sätter ckså pacity till 0, så att bilden blir helt genmskinlig ch därmed synlig. I slutet av funktinen startas intningen, genm att fadein anrpas. Vi har i vanstående kder infört två nya glbala variabler, sm du får lägga till högst upp i jsfilen: var imgopacity, fadetimerref; Den sista måste dessutm initieras till null i init-funktinen: functin init() { fadetimerref = null; Stängningsknappen ch tna ut Du ska nu lägga till kd för att få bilden att tna ut, då man klickar på rutans stängningsknapp (cirkeln med ett kryss). Lägg till följande funktin i js-filen: functin fadeout() { setopacity(imgopacity-2); if (imgopacity > 0) fadetimerref = settimeut(fadeout,50); else largepictbxtag.style.display = "nne"; Denna funktin är mtsatsen till fadein. Här minskar vi paciteten ch startar en timer för ett nytt anrp så länge paciteten är större än 0. När vi sedan kmmer ner till 0, döljer vi rutan helt, genm att sätta display till nne. Lägg ckså till följande funktin: functin clselargefruit() { cleartimeut(fadetimerref); fadeout(); Denna funktin ska anrpas då man klickar på stängningsknappen. Funktinen stppar först pågående in- eller uttning ch startar sedan uttning av bildrutan, genm att anrpa fadeout. 2012-12-09 Rune Körnefrs (rune.krnefrs@lnu.se) 6
Lägg till följande kd sist i init-funktinen: functin init() { dcument.getelementbyid("clsebtn").nclick = clselargefruit; Detta lägger på en händelsehanterare för nclick på knappen ch kpplar funktinen clselargefruit till den. 6. Ckie för att spara markerade frukter Du ska nu ckså spara de frukter sm markerats, dvs de sm skjutits åt höger, i en ckie. Denna ckie ska sedan läsas in, då man kmmer tillbaks till sidan, så att frukterna kan markeras igen. Grundfunktinerna för hantering av ckies På föreläsningen tgs det upp tre grundfunktiner för att spara ch läsa en ckie. Dessa är likadana avsett innehåll i ckien, så börja med att lägga in dem. Lägg till följande funktiner sist i js-filen: functin saveckie(ckiename,ckievalue) { dcument.ckie = ckiename+"="+escape(ckievalue)+";expires="+expiredate(100); functin expiredate(d) { var thedate = new Date(); thedate.settime(thedate.gettime()+(1000*86400*d)); return thedate.tgmtstring(); functin getckie(ckiename) { var start, end, valuestr; start = dcument.ckie.indexof(ckiename); if (start > -1) { start += ckiename.length + 1; end = dcument.ckie.indexof(";",start); if (end < start) end = dcument.ckie.length; valuestr = dcument.ckie.substring(start,end); return unescape(valuestr); else return null; Dessa funktiner beskrevs på föreläsningen, så vi går inte igenm dem mer här, utan kmmer nu bara att använda dem. 2012-12-09 Rune Körnefrs (rune.krnefrs@lnu.se) 7
Spara markerade frukter i ckien Lägg till följande funktin i js-filen: functin savechsenfruits() { var ckievalue, i; ckievalue = ""; fr (i=0; i<fruitbtntags.length; i++) { if (parseint(fruitbtntags[i].style.left) > 0 ) ckievalue += "#" + i; if (ckievalue!= "") ckievalue = ckievalue.substring(1); saveckie("chsenfruits",ckievalue); I denna funktin ska ckiens värde sättas samman sm en textsträng i variabeln ckievalue. Sedan anrpas funktinen saveckie, för att spara ckien. Värdet ska vara en sträng med index för valda knappar. För att sedan kunna dela upp det igen, när ckien läses in, lägger vi in ett skiljetecken mellan indexen. I detta fall använder vi #. Så m t.ex. knapp 2, 5 ch 7 är markerade, så ska strängen bli 2#5#7. Vi går igenm alla knappar i en lp. I den kntrllerar vi left-krdinaten ch m den är större än 0, så har knappen skjutits åt höger. Då lägger vi till # ch aktuellt värde från lpvariabeln i ckievalue. Med denna lp kmmer vi att få in ett skiljetecknet även i början, så strängen blir #2#5#7. För att få brt det första #-tecknet använder vi substring(1), sm tar alla tecken från psitin 1 ch framåt, dvs alla utm det första i psitin 0. Lägg ckså till följande kd under init-funktinen, under den rad där windw.nlad tilldelas: windw.nunlad = savechsenfruits; Detta lägger in en händelsehanterare för nunlad, sm inträffar då man lämnar webbsidan, dvs antingen går till en annan sida eller stänger fönstret. Det är då vi ska spara ckien, så funktinen savechsenfruits kpplas till denna händelse. Kntrllera ckien i webbläsaren Om du testar i webbläsaren, så ser du inget resultat på webbsidan ännu, eftersm vi ännu inte lagt in funktinen för att läsa in ckien ch uppdatera webbsidan. Men du kan ändå kntrllera att ckien sparas. Ladda först m sidan i webbläsaren, så att den nya kden kmmer in. Klicka sedan på några knappar, så att de skjuts åt höger. Ladda därefter m sidan igen. Då lämnar man den först ch händelsen nunlad inträffar, så att ckien sparas. På webbsidan återställs knapparna, eftersm vi ännu inte har kden för att ta in ckien. Ta nu fram inf i webbläsaren m dina ckies. I Firefx väljer du kmmandt Sidinf i Verktyg-menyn. I fönstret du då får klickar du på Säkerhet. Klicka sedan på knappen Visa kakr. Du får då ett nytt fönster med två klumner för Webbplats ch Kakans namn. Om du kör filen lkalt på din datr, finns ingen webbplats, så det är raden där webbplats är tm, sm du ska välja. Klicka på pilen till vänster på raden, så kmmer kakans namn fram. Där bör du nu se en kaka med namnet chsenfruits. Klicka på den, så får du fram inf m kakan. På raden för innehåll bör du ha en textsträng sm liknar 2%235%237. Eftersm vi använder escape i funktinen saveckie, så har # ersatts med %23, så denna sträng betyder 2#5#7. Har du valt andra knappar, så är det naturligtvis andra siffrr. Om du får fram ckien ch kan se att värdet är OK, så vet du att funktinen för att spara ckien fungerar. I annat fall får du gå tillbaks ch kntrllera din kd. 2012-12-09 Rune Körnefrs (rune.krnefrs@lnu.se) 8
Läs in ckien ch uppdatera webbsidan Ckien ska läsas in då man kmmer till webbsidan, dvs i init-funktinen. Men vi lägger hanteringen av ckien i en separat funktin ch anrpar den från init-funktinen. Lägg in följande funktin i js-filen: functin getfruitsfrmckie() { var ckievalue, ckiecntent, i; ckievalue = getckie("chsenfruits"); if (ckievalue!= null) { ckiecntent = ckievalue.split("#"); fr (i=0; i<ckiecntent.length; i++) { fruitbtntags[ckiecntent[i]].style.left = "70px"; Ckien läses in med getckie. Om resultatet är skilt från null, fanns ckien ch vi har fått in ckiens värde, dvs en sträng på frmen 2#5#7. Strängen delas upp med split till en array. Denna array går vi sedan igenm i en lp. Varje värde från ckien är ett index till den fruktknapp sm ska skjutas åt höger, så vi indexerar fruitbtntags ch sätter left-krdinaten till 70px. Lägg in följande anrp av funktinen sist i init-funktinen: functin init() { getfruitsfrmckie(); Klicka på några knappar. Ladda sedan m sidan, så bör knapparna frtfarande vara markerade. Prva ckså att stänga fönstret ch sedan öppna sidan igen. Då ska knapparna frtfarande vara markerade. Slut I dessa övningar tg vi upp två saker: Timer En timer startas med settimeut ch man anger en funktin sm ska anrpas då tiden går ut. Den funktin sm anrpas kan vara samma funktin sm startar timer. På så sätt kan man få en funktin att anrpas flera gånger med jämna mellanrum. En timer kan avbrytas med cleartimeut. Animerade effekter kan erhållas genm att förändra CSS-kden i en funktin sm anrpas av en timer ett antal gånger. Ckie En ckie sparar data i en textsträng på användarens datr. Ckien kan sedan läsas in, då man kmmer till webbsidan, för att t.ex. återställa tidigare val. Ckien sparas på händelsen nunlad ch läses in på händelsen nlad. 2012-12-09 Rune Körnefrs (rune.krnefrs@lnu.se) 9