Medieteknik Övningar i JavaScript – på egen hand – del 2 Här ges ett antal övningar som du kan genomföra för att testa dina kunskaper efter introduktionen av JavaScript. Stöter du på problem, så kan du gå tillbaks till motsvarande avsnitt i steg-för-stegövningarna. Utgå från filerna i mappen som du kan ladda ner på laborationens webbsida. Börja med att orientera dig i koden i dessa filer. Du ska sedan genom övningarna skapa ett enkelt spel, där ett slumptal genereras och användaren ska gissa talet. 1. Globala variabler för några taggar • • Inför variablerna inText, resultTag och pictureTag som globala variabler. I funktionen init tilldelar du dessa variabler, så att de refererar till taggarna med id-attributen inText, result respektive picture. 2. Funktion för slumptal • • • • Skapa en funktion kallad newRandom. Den ska ha en parameter kallad high. Generera ett slumptal mellan 1 och high och spara det i en lokal variabel. Returnera sedan variabelns innehåll. Du kan inte se något resultat ännu, så du testar funktionen i nästa steg. Men öppna ändå sidan i webbläsaren, för att kontrollera att du inte får några fel i Firebug. (Kontrollera samtidigt att Firebug också är aktiverat.) 3. Funktion för nytt spel Denna funktion skapar du i två steg. Först ska du endast generera slumptal och skriva ut dem, för att kontrollera att slumptalsgenereringen fungerar. Sedan ändrar du funktionen, så att ett par globala variabler tilldelas. Test av slumptalsgenerering • • • • • Skapa en funktion kallad newGame. Den ska inte ha någon parameter. I funktionen anropar du newRandom med parametervärdet 10 och sparar det returnerade värdet i en lokal variabel. Skriv ut variabelns värde i resultTag. I HTML-koden lägger du till ett onclick-attribut i knappen "Nytt spel" och anropar funktionen newGame. Klicka några gånger på knappen och kontrollera att det skrivs ut slumptal mellan 1 och 10. Förändra funktionen till spelet Slumptalet ska sedan kontrolleras mot användarens gissning i en annan funktion. För att du där ska kunna använda värdet, måste slumptalet sparas i en global variabel. Du ska också räkna antalet felgissningar i en global variabel. • • • • • • Inför randomNumber och guessCounter som två globala variabler. Du kan initialt sätta deras värden till 0. I funktionen newGame ändrar du så att det returnerade värdet från newRandom sparas i den globala variabeln randomNumber. Lägg också till en rad där du sätter guessCounter till 0, så att räknaren börjar om från 0 varje gång ett nytt spel inleds. Lägg också till en alert-sats med ett meddelande om att ett nytt slumptal nu genererats. Ta bort raden för utskriften i resultTag. Testa i webbläsaren, för att kontrollera att du inte får några fel i Firebug. 2012-10-22 – Rune Körnefors ([email protected]) 1 Medieteknik 4. Funktion för att kontrollera användarens gissning Nu ska du i ett antal steg skapa funktionen för kontroll av gissningar. Läs in gissning och kontrollera att det är ett tal • • • • • • Skapa en ny funktion kallad checkGuess, utan någon parameter. Lägg in ett onclick-attribut i knappen "Kontrollera gissning", så att funktionen anropas. Spara innehållet i inText i en lokal variabel kallad guess. Kontrollera i en if-sats att guess är ett tal. Om det inte är det lägger du in ett felmeddelande i variabeln resStr. Sist i funktionen skriver du ut resStr i resultTag. Testa i webbläsaren. Jämför gissningen med det genererade slumptalet • • • Kontrollera i en if-sats om guess är lika med randomNumber. Om de är lika sätter du resStr till "Rätt" annars till "Fel". Testa i webbläsaren. Räknare för antal felaktiga gissningar • • • • I else-delen om gissningen är fel, inför du ytterligare en rad för att räkna upp den globala variabeln guessCounter med 1. Ta med guessCounter i meddelandet i resStr, så att det skrivs "1 fel", "2 fel", etc. beroende på hur många fel det är. Lägg också till en if-sats där gussCounter kontrolleras. Om variabeln är lika med 5 ska meddelandet i resStr ändras, så att det säger att man gissat fem gånger och rätt svar skrivs ut med variabeln randomNumber. Testa i webbläsaren. 5. Visa en bild Om svaret är rätt ska användaren belönas med en bild på en blomma. Funktion för att visa en slumpmässigt vald bild • • • Skapa en funktion kallad showFlower, utan någon parameter. I funktionen anropas newRandom med parametern 3 (det finns tre olika bilder). Värdet sparas i en lokal variabel. Referera till pictureTag och byt ut bilden. Sätt samman filnamnet med hjälp av värdet i variabeln med slumptalet. Använd funktionen • • Anropa funktionen showFlower då svaret är rätt i funktionen checkGuess. Testa i webbläsaren. Ta bort bilden då ett nytt spel startas • • I funktionen newGame lägger du till en rad som refererar till pictureTag och lägger in bilden "transparent.gif". Testa i webbläsaren. 2012-10-22 – Rune Körnefors ([email protected]) 2