Labora&on 3 Objekt i JavaScript övningar/uppgi:er 1M322 Webbteknik 2, 7,5hp Medieteknik 2015 Rune Körnefors rune.kornefors@lnu.se
1. Ladda ner arbetsdokument Till övningarna i denna labora&on finns det ep antal filer som du kan ladda ner i en zip- fil. Länk &ll zip- filen finns på labora&onens webbsida. Då du packat upp zip- filen, får du en mapp med tre filer och yperligare en mapp med ep antal bildfiler.
2a. Planering och struktur för programmet I denna labora&on ska du skapa ep program för spelet Hänga gubbe. Det går ut på ap ep ord väljs slumpmässigt och du kan sedan gissa på bokstäver. Varje gång du gissar på en bokstav som inte ingår i ordet, utökas en bild, så ap det &ll slut blir en hängd gubbe. Du kan totalt gissa fel sex gånger, innan gubben hängs. Men lyckas du få alla bokstäver räp innan dess, klarar sig gubben. Programmet består av ep antal steg och det blir då också några funk&oner för dessa. Innan man börjar skriva koden, är det bra ap planera vad som ska göras och skapa en struktur för programmet. Det beskrivs här, innan vi kommer in på övningarna med kodskrivandet. Studera gränssni.et Öppna filen index.htm både i webbläsaren och i editorn. Det finns ep antal delar i gränssnipet: Startknapp, för ap starta spelet. Div- element "gameboard" som omger de delar som används under spelet: Bokstavsknappar, för ap gissa på bokstäver. Div- element "leperboxes", där det kommer finnas en ruta per bokstav i det ord som ska gissas. Då spelet startas läggs dessa in som span- element. I CSS- koden ubormas de som vita rutor. Då man sedan gissat räp på en bokstav, skrivs den in i rutan. Se filen style.css. Img- element för ap visa bilden med galgen och gubben. Div- element "message" med meddelande &ll användaren, då spelet är över. Bildfiler För ap bygga upp bilden med den hängda gubben, ska bilden i img- elementet bytas ut. Följande bilder finns i mappen pics.
2b. Planering och struktur för programmet På nästa sida beskrivs ep förslag på struktur. Men, &Pa inte på det ännu. Stanna upp ep tag och fundera själv på hur programmet skulle kunna struktureras i olika funk&oner. Diskutera gärna denna del med en kurskamrat.
2c. Planering och struktur för programmet Innan man skriver kod, är det o:a bra ap tänka igenom vilka funk&oner som behövs och skriva korta beskrivningar. Dessa beskrivningar kan man sedan ha som kommentarer i koden, för ap förklara funk&onerna. När man sedan börjar skriva koden, kanske det &llkommer en del funk&oner (man kanske delar upp en funk&on i flera), men det underläpar ap först ha en genomtänkt planering och struktur. Först skapades listan i den vänstra kolumnen. Det är init- funk&onen och funk&oner som ska anropas, då man klickar på knapparna. Sedan kompleperades det med funk&onerna i den högra kolumnen. Funk4onen init Ini&ering av globala variabler. Koppling av funk&oner &ll knappar. Funk4onen startgame Anropas då man klickar på knappen "Starta spelet". Välj ord slumpmässigt. Visa bokstavsrutor. Visa första bilden, h0.png. Denna finns redan inlagd i img- taggen i HTML- koden, men om man kör spelet flera gånger, måste man byta &ll denna bild igen. Funk4onen guessle.er Anropas då man klickar på en bokstavsknapp. Avläs vald bokstav ur bupon- elementets value- apribut. Gå igenom alla bokstäver i ordet och kontrollera om vald bokstav finns (kan finnas flera gånger i ordet): I så fall skrivs den in i motsvarande ruta. Om bokstaven ej finns, byts bilden &ll nästa bild. Om man då visar den sista bilden (h6.png), avslutas spelet med hängd gubbe. Annars kontrolleras om alla bokstäver är klara. I så fall avslutas spelet. Funk4onen randomword Ta fram ep slumptal mellan 0 och antal ord i en lista av ord. Indexera listan med slumptalet och spara valt ord i en global variabel. Funk4onen showle.erboxes Gå igenom valt ord och skapa en kod med ep span- element för varje bokstav. Lägg in koden i elementet med id "leperboxes". Funk4onen endgame Parameter för ap veta hur spelet slutade. Om gubben blev hängd, skrivs ep meddelande med det räpa ordet. Annars skrivs ep meddelande med en gratula&on.
2d. Planering och struktur för programmet U&från planeringen med uppdelning i funk&oner på föregående sida, tar man fram en lista på vilka globala variabler som behövs. Även här kan det sedan &llkomma flera, men en första planering är all&d bra ap göra, innan man börjar skriva koden. Globala variabler wordlist Array med ep antal ord, där man sedan väljer ep slumpmässigt. selectedword Det ord som valts slumpmässigt och som användaren ska gissa på. leperboxes Array med referenser &ll de span- taggar som utgör rutor för bokstäverna i ordet. hangmanimg Referens &ll img- elementet med bilden för galgen och gubben. hangmanimgnr Nummer för aktuell bil (0-6), för den bildfil som visas (så man sedan kan veta vilket som blir nästa bild). msgelem Referens &ll div- elementet för meddelanden. Variabeln selectedword &lldelas ep nyp värde i funk&onen randomword. Variabeln le-erboxes &lldelas i funk&onen showle-erboxes, då span- elementen lagts in i HTML- koden. Variabeln hangmanimgnr &lldelas värdet 0, då bilden byts &ll h0.png i funk&onen startgame. Övriga variabler ini&eras i init- funk&onen. När vi nu har en struktur med en uppdelning i funk&oner och en lista på globala variabler, kan koden börja skrivas.
3. Globala variabler och init- funk&onen Börja med ap lägga in listan med globala variabler och gör ini&eringar i init- funk&onen. Globala variabler I filen script.js lägger du in de globala variabler som finns i listan i övning 2d. Glöm inte ap också lägga in kommentarerna. All programkod skriver du i filen script.js. Funk4onen init Lägg in följande lokala variabler: i loopvariabel startgamebtn referens &ll startknappen le-erbu-ons array med referenser &ll bokstavsknapparna Startknappen: Ta fram en referens &ll knappen "startgamebtn" och spara i variabeln startgamebtn. Egentligen behövs ingen variabel endast för ap göra nedanstående, men du ska i en senare övning lägga &ll mer kod för startknappen, så spara referensen i en variabel redan nu. Lägg in kod, så ap funk&onen startgame anropas, då man klickar på knappen. Bokstavsknapparna: Ta fram en array med referenser &ll &ll alla knappar i div- elementet "le-erbu-ons". Gå igenom allihop i en loop och se &ll ap funk&onen guessle-er anropas då man klickar på dem. Samma funk&on ska alltså anropas oavsep vilken av knapparna man klickar på. Bilden och elementet för meddelanden Lägg in en referens &ll img- elemenet "hangman" i hangmanimg. Lägg in en referens &ll div- elementet "message" i msgelem. Ordlistan Variabeln wordlist finns redan med i den fil som du laddat ner &ll labora&onen, så du slipper skriva in alla ord själv.
4. Skal &ll alla funk&oner Nu lägger du in deklara&on av de övriga funk&onerna. Börja här med ap lägga in "skalet" med funcaon, namnet och en kommentar. Övriga funk4oner Lägg in skalet för funk&onen startgame. Lägg på samma säp in skal för funk&onerna: randomword showle-erboxes guessle-er endgame Denna funk&on ska också ha en parameter, som du kan kalla manhanged. Då man sedan anropar funk&onen skickar man med true eller false, så ap man i funk&onen kan avgöra vilket meddelande som ska skrivas ut. Öppna nu filen index.htm i webbläsaren. Ak&vera Firebug och ladda om sidan. Kontrollera ap du inte får några felmeddelanden. I övrigt ska inget hända, e:ersom funk&onerna ännu så länge är tomma.
5. Funk&onerna startgame, randomword och showleperboxes I övning 2c och 2d beskrevs funk&onerna enligt rutorna &ll höger. DePa ska nu översäpas &ll kod. Kod i funk4onen startgame Anrop av funk&onen randomword. Anrop av funk&onen showle-erboxes. Lägg in bilden "pics/h0.png" i img- elementet som refereras av hangmanimg. Lägg in 0 i variabeln hangmanimgnr. Kod i funk4onen randomword Lägg in en lokal variabel som du kallar wordindex. Generera ep slumptal mellan 0 och antal ord i wordlist. Spara slumptalet i wordindex. I selectedword sparar du det ord som indexeras med wordindex. Välj ord slumpmässigt. Visa bokstavsrutor. Visa första bilden, h0.png. Variabeln hangmanimgnr &lldelas värdet 0 Ta fram ep slumptal mellan 0 och antal ord i en lista av ord. Indexera listan med slumptalet och spara valt ord i en global variabel. Variabeln selectedword &lldelas ep nyp värde. Kod i funk4onen showle1erboxes Inför två lokala variabler, som du kallar newcode och i. newcode ska bli en textsträng med HTML- koden för bokstavsrutorna och i är en loop- variabel. Ini&era newcode med en tom sträng (två citapecken, utan något mellan dem). Lägg in en for- loop, där du går igenom alla tecken i selectedword. För varje varv i loopen lägger du &ll (+=) strängen "<span> </span>" &ll newcode. Man måste ha med ep nonbreakable space ( ), för ap CSS- koden ska funka och en "tom" ruta visas. E:er loopen lägger du in newcode i elementet med id "le-erboxes". I variabeln le-erboxes tar du fram en array med referenser &ll alla span- taggar. Börja med getelementbyid och fortsäp sedan med getelementsbytagname. programmet i webbläsaren. Klicka på knappen "Starta spelet". Du ska då få ep antal rutor under bokstavsknapparna. Gå igenom valt ord och skapa en kod med ep span- element för varje bokstav. Lägg in koden i elementet med id "leperboxes". Variabeln leperboxes &lldelas, då span- elementen lagts in i HTML- koden.
6a. Funk&onen guessleper I övning 2c beskrevs funk&onen enligt rutorna &ll höger. DePa ska nu översäpas &ll kod. Kod i funk4onen guessle1er Inför lokala variabler som du kallar le-er, i, le-erfound och correctle-erscount le-er ska vara bokstaven för knappen, i är en loopvariabel, le-erfond ska användas som en flagga (true/false), för ap avgöra om man hipar bokstaven i ordet och correctle-erscount ska var en räknare, för ap se hur många korrekta bokstäver som hipats. Lägg in en rad för ap avläsa knappens bokstav ur bu-on- elementet. En referens &ll den knapp som användaren klickat på finns i this. Bokstaven finns i value- apributet, se filen index.htm. Loop för ap kontrollera bokstäverna Lägg in en for- loop där du går igenom alla tecken i selectedword. I loopen ska du ha en if- sats där du jämför le-er med det tecken i selectedword som bestäms av loopvariabeln i. Använd charat för ap ta ut tecknet ur textsträngen. Om de är lika lägger du in le-er i motsvarande textruta, dvs det span- element som bestäms av le-erboxes som indexeras med i. Glöm inte innerhtml. Avläs vald bokstav ur bupon- elementets value- apribut. Gå igenom alla bokstäver i ordet och kontrollera om vald bokstav finns (kan finnas flera gånger i ordet): I så fall skrivs den in i motsvarande ruta. Om bokstaven ej finns, byts bilden &ll nästa bild. Om man då visar den sista bilden (h6.png), avslutas spelet med hängd gubbe. Annars kontrolleras om alla bokstäver är klara. I så fall avslutas spelet. Även om du nu endast gjort de första punkterna i funk&onen, är det &llräckligt för ap kunna testa. Klicka på "Starta spelet". Klicka sedan på bokstavsknappar. Då bokstaven finns i ordet, ska den skrivas ut i rutorna.
6b. Funk&onen guessleper Du fortsäper här med kod i funk&onen guessle-er. Kod i funk4onen guessle1er För ap avgöra om bokstaven fanns i ordet, behövs en "flagga": Före loopen lägger du in false i variabeln le-erfound. Inu& if- satsen i loopen lägger du in true i le-erfound. E:er loopen lägger du in en ny if- sats där du kontrollerar om le-erfound är false. I så fall fanns inte bokstaven och nästa bild ska visas. Nästa bild bestäms av hangmanimgnr, så räkna först upp den variabeln med 1. Lägg sedan in "pics/h" + hangmanimgnr + ".png" i img- taggen som refereras av hangmanimg. Sedan ska du ha yperligare en if- sats, för ap kontrollera om man nu kommit fram &ll den sista bilden (dvs om hangmanimgnr är 6). Denna if- sats ska alltså ligga inu& den första. Strukturen blir enligt vidstående bild. I så fall ska spelet avslutas. Anropa då funk&onen endgame, med parametern true. Avläs vald bokstav ur bupon- elementets value- apribut. Gå igenom alla bokstäver i ordet och kontrollera om vald bokstav finns (kan finnas flera gånger i ordet): I så fall skrivs den in i motsvarande ruta. Om bokstaven ej finns, byts bilden &ll nästa bild. Om man då visar den sista bilden (h6.png), avslutas spelet med hängd gubbe. Annars kontrolleras om alla bokstäver är klara. I så fall avslutas spelet. Nu kan du testa om bilderna byts ut. Klicka på knappen "Starta spelet". Klicka sedan på bokstavsknappar Varje gång du trycker på en bokstav som inte finns i ordet, ska bilden bytas ut.
6c. Funk&onen guessleper Nu återstår den sista punkten i funk&onen. Kod i funk4onen guessle1er För ap avgöra om alla bokstäver är korrekta, ska du kontrollera om alla bokstavsrutor är ifyllda. Du behöver då en räknare, som du sedan kan jämföra med antalet bokstäver i ordet. Före loopen lägger du in 0 i variabeln correctle-erscount. Inu& loopen lägger du in yperligare en if- sats under den första. I denna if- sats kontrollerar du om rutan ej är tom, dvs om le-erboxes[i].innerhtml är skilt ifrån " ". I så fall innehåller den en bokstav och du räknar upp correctle-erscount med 1. Avläs vald bokstav ur bupon- elementets value- apribut. Gå igenom alla bokstäver i ordet och kontrollera om vald bokstav finns (kan finnas flera gånger i ordet): I så fall skrivs den in i motsvarande ruta. Om bokstaven ej finns, byts bilden &ll nästa bild. Om man då visar den sista bilden (h6.png), avslutas spelet med hängd gubbe. Annars kontrolleras om alla bokstäver är klara. I så fall avslutas spelet. Nu kommer vi in på den inringade punkten i rutan ovan. Lägg in en else- if- del &ll den ypre av if- satserna som ligger under loopen. Strukturen blir alltså nu enligt vidstående bild. I if- satsen jämför du correctle-erscount med antal tecken i selectedword. Är de lika, anropar du funk&onen endgame, med parametern false. Nu testar du i webbläsaren igen. Du får inget meddelande, då spelet är slut, e:ersom endgame ännu så länge är tom. Men testa programmet ändå, för ap se ap du inte får några felmeddelanden i Firebug.
7. Funk&onen endgame I övning 2c beskrevs funk&onen endgame enligt vidstående lista. Då du skapade skalet &ll funk&onen i övning, la du också in en parameter kallad manhanged. Då du anropat funk&onen i övning 6b och 6c, har du skickat med true eller false &ll denna parameter. Du ska nu skriva koden i funk&onen. Parameter för ap veta hur spelet slutade. Om gubben blev hängd, skrivs ep meddelande med det räpa ordet. Annars skrivs ep meddelande med en gratula&on. Kod i funk4onen endgame I en if- sats kontrollerar du om manhanged är true. I så fall skriver du i elementet för meddelanden (som du refererar &ll med msgelem) ap gubben hängdes. Skriv också ut vad räp ord är (dvs variabeln selectedword). Annars har du en else- del. I den skriver du ut ep meddelande som gratulerar användaren &ll ap ha klarat av hela ordet. nu i webbläsaren igen. Kontrollera ap du får ut ovanstående meddelanden, då gubben blir hängd eller då du lyckas gissa alla bokstäver i ordet.
Klart? Är nu programmet klart? Nja, du har nu grundstommen klar, så ap all funk&onalitet är klar. Men det återstår en del &llägg, för ap fixa &ll gränssnipet. Nu kan man ju klicka på samma bokstav flera gånger. Då man klickat på en bokstav, ska knappen markeras, så ap man inte kan klicka på den igen. Det kan göras genom ap inak&vera knappen med egenskapen disabled. Man kan också börja klicka på bokstäverna innan man startat spelet och något ord valts. Eller man kan klicka på knappen för ap starta spelet, innan man är klar med det spel som pågår. Så alla dessa knappar behöver också ak&veras och avak&veras vid en del ställen i programmet. EP annat &llägg som ska göras är ap i funk&onen randomword, se &ll ap inte samma ord väljs två gånger i rad. EP tredje &llägg är ap mäta &den, för ap se hur lång &d spelet tar. Dessa Allägg ska du nu göra i de kommande övningarna.
8a. Ak&vera och avak&vera knappar Förändringar ska ske på följande ställen: Då sidan laddats in, alltså i funk&onen init. Startknappen ak&veras och bokstavsknapparna inak&veras. Då man startar spelet, alltså i funk&onen startgame. Startknappen inak&veras och bokstavsknapparna ak&veras. Då spelet avslutas, alltså i funk&onen endgame. Startknappen ak&veras och bokstavsknapparna inak&veras. Då man klickar på en bokstavsknapp, alltså i funk&onen guessle-er. Den knapp man klickat på ska inak&veras. Man ändrar ak&vering genom ap lägga in true eller false i egenskapen disabled: knappreferens.disabled = true; // Knappen inak&veras knappreferens.disabled = false; // Knappen ak&veras Globala variabler För ap kunna komma åt referenser &ll knapparna i de olika funk&onerna, måste variablerna startgamebtn och le-erbu-ons vara globala variabler. De finns nu som lokala variabler i init- funk&onen. FlyPa deklara&onen av dessa två variabler från init &ll början av filen, där du har dina globala variabler. Funk4on för a. ändra ak4vering Ak&vering och inak&vering av knapparna läggs i en separat funk&on. Skapa en funk&on som du kallar changebu-onacavaaon. Den ska ha en parameter som du kan kalla status. I funk&onen kontrollerar du status i en if- sats. Om status är true, ska du säpa disabled för startgamebtn &ll false och disabled för alla le-erbu-ons &ll true. Det sistnämnda får du göra i en loop. Annars, ska du göra tvärtom, dvs disabled för startgamebtn säps &ll true och disabled för alla le-erbu-ons säps &ll false.
8b. Ak&vera och avak&vera knappar Här fortsäper du med koden från föregående sida. Anrop av funk4onen changebu1onac8va8on Sist i init lägger du in changebu-onacavaaon(true); Sist i startgame lägger du in changebu-onacavaaon(false); Sist i endgame lägger du in changebu-onacavaaon(true); Ändra bokstavsknapp som man klickar på I funk&onen guessle-er har du en referens &ll knappen i this. I början av funk&onen lägger du in this.disabled = true; Ladda om sidan index.htm i webbläsaren. Startknappen ska då vara ak&v, men bokstavsknapparna inak&va. De är "grå" och det händer inget om du klickar på dem. Klicka på knappen "Starta spelet". Då inak&veras startknappen, men alla bokstavsknappar blir ak&va. Klicka på knappar för bokstäver. Den knapp du klickar på blir inak&v. Gå igenom spelet &lls gubben blir hängd eller du fåp fram räp ord. Startknappen blir då ak&v och bokstavsknapparna blir inak&va.
9. Ta bort gammalt meddelande Då man startar spelet igen, ska det gamla meddelandet från föregående spel tas bort. Funk4onen startgame Sist i funk&onen lägger du &ll en programsats, där du lägger in en tom sträng i elementet för meddelanden. Kör igenom spelet och klicka på startknappen igen. Då tas meddelandet längst ner på sidan bort.
10. Välj ej samma ord två gånger i rad Då man startar spelet igen, ska inte samma ord som förra gången kunna väljas igen. DePa sker i funk&onen randomword, som nu ska modifieras lite. Förändringar i koden i funk4onen randomword Inför yperligare en variabel som du kallar oldword. E:er variabeldeklara&onerna lägger du in en rad, där du sparar selectedword i oldword. De två programsatser som du redan har i funk&onen, lägger du i en while- loop. Villkoret i loopen ska vara ap oldword är lika med selectedword Man går alltså runt i loopen och genererar ep nyp slumptal och ord, så länge det är likadant som det gamla ordet. Men då man får ep annat ord, lämnas loopen. i webbläsaren och kontrollera ap du inte får något felmeddelande i Firebug.
11. Mäta &den för spelet Det sista &llägget du ska göra är ap mäta hur lång &d det tar för användaren ap gissa ordet eller få gubben hängd. DePa görs genom ap vi först tar fram &den då spelet startas och sedan &den då spelet avslutas. Skillnaden blir då spel&den. Tiden räknas ut i funk&onen endgame, men starvden måste vi spara i funk&onen startgame. Det måste då läggas i en global variabel. För &dsmätningen kommer funk&onen gettime i Date- objektet användas. Den ger &den i millisekunder från den 1 januari 1970. DePa har dock ingen betydelse här, utan vi kommer ta fram gettime vid två olika &llfällen och sedan räkna ut skillnaden mellan dem. Globala variabler Inför en global variabel som du kallar starttime. Funk4onen startgame Deklarera en variabel som du kallar now. I slutet av funk&onen lägger du &ll kod för ap skapa ep nyp Date- objekt och sedan avläsa gettime och spara i starttime. Funk4onen endgame Deklarera två variabler som du kallar now och runtime. I början av funk&onen lägger du in kod för ap skapa ep nyp Date- objekt och sedan beräkna skillnaden mellan gettime i objektet och starttime. Tiden blir i millisekunder, så dividera med 1000, för ap få det i sekunder. I slutet av funk&onen lägger du &ll en rad där du skriver ut runtime i elementet för meddelanden. Använd tofixed(1), för ap avrunda &ll en decimal. i webbläsaren och kontrollera ap du får ut &den.
12. Publicera och testa Då du är klar med dip program publicerar du det i Web publishing i FirstClass, på samma säp som du publicerade i föregående labora&oner. Kommentarer Gå först igenom dip program och kontrollera ap du skrivit en förklarande kommentar för varje variabel och varje funk&on. Publicera di. program Lägg upp dip program i en mapp kallad lab3 i mappen dold i Web Publishing i FirstClass. Skapa en länk från ingångssidan i din porbolio (index.htm i Web Publishing) &ll den första sidan i dip program (index.htm i lab3). Ta fram din porbolio i webbläsaren och kontrollera ap länken fungerar samt ap allt i dip program fungerar.