L04.1 Marodören Inledning Genom att öva sig på de grundläggande koncepten i JavaScript öppnas vägen allteftersom till de mer avancerade funktionerna. Man måste lära sig krypa innan man kan gå, även i JavaScript! Mål Efter du genomfört och blivit godkänd på laborationen har du kunskaper i att förstå grundläggande begrepp inom JavaScript. Vidare har du även tillräcklig kunskap att skriva JavaScript som låter en användare interagera med ett JavaScript genom frågerutor, något som egentligen inte används i skarpt läge, men som är nyttigt att kunna nu i ett inledande skede. Du kommer även ha kunskaper om objekten String, Math, Array och Date. Vidare han du också kombinera funktionaliteten hos objekten för att skapa dynamiska JavaScript. Genomförande Utför laborationens uppgifter och moment samt dokumentera vad du kommer fram till på de olika delarna. Vid redovisning av laborationen ska du kunna besvara frågor om hur du har löst de olika delarna och varför de är lösta på det sätt du löst dem på. När du anser dig vara klar med laborationen, kontrollera att din källkod uppfyller laborationens samtliga krav. Du väljer själv om du vill göra alla uppgifter i en och samma externa JS-fil eller om du vill dela upp dem. Du får också själv fritt välja om du vill skriva skripten blandat med HTMLkoden eller i externa skriptfiler (rekommenderas) om det inte står något annat. Uppgift 1 Hello World Första uppgiften går, föga förvånande, ut på att skriva ett JavaScript som skriver ut texten Hello World i webbläsarens fönster. Skriv ut texten Hello World i webbläsarens konsol (console.log).
I Skriv ut texten Rad 1 Rad 2 i en meddelanderuta (alert) genom att använda dig av ett JavaScript. Rad 1 och Rad 2 ska stå på två olika rader. JavaScriptet skriver ut Hello World i webbläsarens fönster. JavaScriptet skriver ut Rad 1 Rad 2 på olika rader i en meddelanderuta. Uppgift 2 Funktioner För att på ett enkelt sätt kunna återanvända kod ska du nu testa att lägga din kod i funktioner. (Om du inte gjorde detta redan i uppgift 1) I denna uppgift ska du skriva ett antal olika funktioner med olika funktionalitet. I denna och kommande uppgifter ska du skriva många funktioner. Ett tips kan vara att skriva funktionerna i en scriptfil (.js) och skriva kommentarer till varje funktion. Detta för att du ska veta vilken funktion som hör till vilken uppgift respektive moment. Lös uppgiftens samtliga moment (anrop till funktioner) i ett och samma HTML-dokument. Du ska skriva funktionerna i en separat scriptfil. Skriv funktionen medeltal som tar in fyra heltal som argument. (Obs! Funktionen ska ta inparametrar/argument, du ska inte läsa in talen från användaren) Räkna sedan ut medeltalet av dessa fyra tal och returnera det. Testa att funktionen fungerar genom att skriva ut resultatet till konsolen. Utskriften ska ske utanför funktionen. I Skriv en funktion som tar ett antal (du väljer hur många, dock minst två) argument. Argumenten ska sedan skrivas ut i konsolen separerade med ett,. Testa att funktionen fungerar genom att skriva ut resultatet. Medeltalsfunktionen fungerar enligt beskrivningen i. Utskriftsfunktionen fungerar enligt beskrivningen i I. Uppgift 3 Gissa talet I uppgift 3 ska du skriva det klassiska spelet Gissa talet (Märkligt nog återkommande i utbildningen). Denna uppgift kommer att träna upp dina kunskaper i villkorssatser och loopar.
Lös denna uppgift i ett och samma HTML-dokument med en inlänkad.js-fil. Skriv spelet Gissa talet i JavaScript. Spelet går ut på att datorn slumpar ett hemligt tal mellan 1 och 100 och låter sedan användaren gissa sig till talet. Om talet användaren gissade på är lägre än det hemliga talet ska en meddelanderuta visas som talar om för användaren att det hemliga numret är högre än gissningen, likadant ska en meddelanderuta visas om gissningen var för hög. Användaren ska få gissa på det hemliga numret till det att rätt nummer gissas. När spelet är slut ska en meddelanderuta visas som innehåller det hemliga numret och det antal gissningar användaren behövde för att hitta det hemliga numret. Förslag på hur frågerutan och meddelanderutorna kan se ut: När HTML-sidan laddas visas ovanstående. Första gissningen, datorn har slumpat ett lägre tal. Efter fem gissningar hittades det hemliga numret. Observera För att visa en frågeruta kan du använda dig av den inbyggda funktionen: 1 prompt();
Om du är osäker på hur prompt() fungerar så hittar du information om funktionen i kurslitteraturen. Observera I nyare versioner av Internet Explorer och FireFox kommer inte prompt att vara aktiverat av säkerhetsskäl. Enklaste lösningen, använd Chrome för denna inledande laboration. Prompt kommer inte att användas i kommande laborationer utan där kommer ni att låta användaren mata in information via formulär istället. Prompt ska du inte använda i en produktionsmiljö, men nu när vi tar våra första stapplande steg kan den vara bra att ta hjälp av. För att slumpa ett tal mellan 1 och 100 kan du använda dig av följande kodstycke. 1 2 Math.floor( Math.random() * (length + 1) )+min; Math.floor( Math.random() * 101)+1; Om du är osäker på hur Math.floor() och Math.random() fungerar så hittar du information om funktionerna i kurslitteraturen eller i föreläsningsmaterialet. Gissa talet -spelet fungerar enligt beskrivningen i. Uppgift 4 Meny I denna uppgift ska du skriva en meny i JavaScript. Du ska skriva menyn med hjälp av funktioner så att menyn blir enkel att utöka i framtiden samt att den blir återanvändbar. Lös denna uppgifts moment i ett och samma HTML-dokument. Skriv funktionerna i en extern scriptfil. Nu ska du skriva grunden till vad som kommer att bli din meny. Skriv funktionen meny som visar upp en meny genom att visa en frågeruta med menyalternativ. Funktionen ska, beroende på vad användaren skriver in i frågerutan, anropa den funktion som är kopplad till det menyalternativ som finns beskrivet i frågerutan. Ett exempel på hur det kan se ut:
Scriptet är precis inladdat, en meny visas. I detta moment ingår även att du ska skriva menyalternativet 0. Exit och få detta att fungera. Scriptet ska avslutas när användaren skriver in 0 och trycker på OK. Om användaren skriver in en bokstav eller en siffra som inte finns med i menyn som ett alternativ ska menyn visas på nytt. Vidare gäller att när användaren valt ett alternativ och detta alternativ körts färdigt ska ovanstående huvudmeny återigen visas. I Nu ska du skriva funktioner till menyalternativ 1 och 2. Funktionerna som är kopplade till alternativ 1 och 2 ska visa en ny frågeruta som uppmanar användaren att skriva in antalet grader Fahrenheit respektive Celsius för att sedan omvandla dessa gradantal. Svaret på omvandlingen ska visas i en meddelanderuta. Exempel på hur dessa frågerutor och svarsmeddelanderutorna kan se ut: Alternativ 1 är valt, Fahrenheit till Celsius. Svaret visas i en meddelanderuta.
På nätet kan du hitta de omvandlingsfunktioner som behövs för att lösa denna uppgift. Observera Att använda promptrutan för att skapa menyer på sättet enligt ovan är ingenting man gör på riktigt. Det vi fokuserar på under denna laboration är logiken i koden. II Lägg till funktionen som är kopplad till menyalternativ 3. I detta moment kan du använda koden du skrev i Uppgift 3. Förslagsvis länkar du in samma.js-fil som du använde i Uppgift 3. Menyn fungerar enligt beskrivningen i Uppgiften. Jag anropar funktioner när alternativ 1-3 väljs av användaren. Uppgift 5 String I denna uppgift ska du titta lite närmare på objektet String som finns att tillgå i JavaScript. I String-objektet finns många metoder och egenskaper. I denna uppgift ska du bekanta dig med några stycken av dessa. String-objektet är värdefullt när textsträngar ska behandlas. Lös uppgiftens moment (anrop till funktioner) i ett och samma HTML-dokument. Du ska skriva funktionen i en separat scriptfil. Skriv funktionen konvertera i JavaScript. Denna funktion ska ta en textsträng som argument. Vidare ska funktionen ändra alla versaler i argumentet till gemener och alla gemener i argumentet till versaler. Slutligen ska alla a och A ändras till #. Exempel på indata: Jag tycker JAVASCRIPT är KUL! skall alltså bli utdata: j#g TYCKER j#v#script ÄR kul!. När allt är ändrat ska resultatet returneras som en ny textsträng och sedan skrivas ut i konsolen. I Testa funktionen så att den fungerar. Användbara funktioner, i String-objektet, för denna uppgift är bland annat: tolowercase() touppercase() Fler användbara funktioner i String-objetet hittar du på t.ex. Mozilla Developer eller i föreläsningsmaterialet.
Konvertera-funktionen som beskrivs i är färdig och uppfyller alla beskrivna krav. Uppgift 6 Math Denna uppgift syftar till att ge dig en insikt i Math-objektet. Rätt använd kan Math-objektet användas till många matematiska beräkningar. Lös uppgiftens moment (anrop till funktioner) i ett och samma HTML-dokument. Du bör skriva funktionen i en separat scriptfil. Skriv funktionen triangel som ber användaren mata in kateterns två sidor a, b och sedan beräkna hypotenusan c i triangeln, där c2 = a2 + b2. Presentera svaret c i konsolen. Användaren uppmanas ange kateter 1. Användaren uppmanas ange kateter 2. Användbara funktioner, i Math-objektet, för denna uppgift är bland annat: pow() sqrt() Fler användbara funktioner i Math-objetet hittar du på t.ex. Mozilla Developer eller i föreläsningsmaterialet.
Triangel-funktionen som beskrivs i är färdig och uppfyller alla beskrivna krav. Uppgift 7 Tentamarodören I denna uppgift ska du skriva en funktion som bland annat räknar ut medelresultatet från en tentamen. Funktionen kommer att använda sig av en Array för att beräkna medelresultatet. Lös uppgiftens moment (anrop till funktioner) i ett och samma HTML-dokument. Du bör skriva funktionen i en separat scriptfil. Skriv funktionen tentamen. Denna funktion ska ta en Array, innehållandes heltal, som inparameter. Låt funktionen beräkna medelvärdet av talen som finns i den medsända Arrayen. Returnera medelvärdet. Testa funktionen och verifiera att den fungerar. I Nu ska du öka funktionaliteten i funktionen tentamen. Lägg till den kod som krävs för att avgöra det högsta samt det lägsta resultatet i den medsända Arrayen. Funktionen ska nu returnera tre resultat, medelvärde, max och min. Resultaten ska returneras i en ny Array. Denna nya Array ska således innehålla tre element. Medelvärdet ska heltalsavrundas nedåt. II Presentera resultatet i konsolen. För att kontrollera att allt är som det ska kan du testa att skicka in följande array: 1 [10,2,89,9,65,13,3] Resultatet här bör bli en array enligt: 1 [27,89,2] Uppgift 8 Födelsedag Nu ska du skriva ett JavaScript som tar reda på hur många dagar det är kvar till din födelsedag! Lös denna uppgifts moment i ett och samma HTML-dokument. Nu ska du skriva grunden till JavaScriptet. Skriv den kod som krävs för att:
Läsa in vilken månad användarens födelsedag inträffar på. När scriptet läst in vilken månad födelsedagen inträffar på ska du omvandla svaret till ett heltal. Läsa in vilken dag användarens födelsedag inträffar på. När scriptet läst in vilken dag födelsedagen inträffar på ska du omvandla svaret till ett heltal. När du omvandlat den månad användarens födelsedag inträffar på till ett heltal bör du subtrahera 1 från detta talet. I JavaScript är månad 0 lika med januari månad. I Med hjälp av de inlästa värdena ska du nu skapa ett datumobjekt. Detta objekt kommer med andra ord innehålla datumet för den dag du fyller år nästa gång. Skapa sedan ytterligare ett datumobjekt med dagens datum. Genom att subtrahera antalet millisekunder till dags dato från antalet millisekunder då du fyller år får du skillnaden mellan datumen. Omvandla sedan dessa millisekunder till dagar och du är klar. För att ta reda på hur många millisekunder som förflutit sedan 1 januari, 1970 till ett visst datum går det bra att använda följande funktion på en Date-variabel: 1 gettime() II Presentera på lämpligt sätt hur många dagar det är kvar till användarens födelsedag.
Tänk på att programmet ska fungera oavsett om du fyller år i januari eller december och även hantera skottår. JavaScriptet rapporterar rätt antal dagar kvar till användarens födelsedag. JavaScriptet presenterar resultatet på överskådligt sätt i konsolen. Uppgift 9 Tabellgenerering Du ska i denna uppgift skapa en funktion (generatetable) som ska skriva ut en tabell liknande den till höger. För att populera tabellen ska en tvådimensionell matris skapas och skickas in till funktionen som bygger upp tabellen. Oavsett hur många rader som matrisen innehåller så ska tabellen visas korrekt. Den först inmatade raden i matrisen ska bli tabell-rubrik och således presenteras med thtaggar. Funktionen genereatetable är den funktion som ska skapa och skriva ut tabellen och denna ska vara placerad i en egen.js-fil. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 // Först skapas matrisen cell som sedan // populeras enligt nedan cell[0][0] = Förnamn: ; cell[0][1] = Efternamn: ; cell[0][2] = Telefon: ; cell[1][0] = Haris ; cell[1][1] = Kljajic ; cell[1][2] = 7716 ; cell[2][0] = Mats ; cell[2][1] = Loock ; cell[2][2] = 7714 ;... generatetable(cell); document.write För att lösa denna uppgift behöver du använda document.write. Låt detta vara första (?) och sista gången du använder document.write. I fortsättningen kommer vi att hantera utskrifter genom webbläsarens API DOM.
Oavsett hur många rader jag lägger till i min matis cell så visas tabellen korrekt. Varannan rad i tabellen har en annorlunda bakgrundsfärg. Tabellrubriken genereras med <th-taggen. Redovisning Innan du får redovisa ska du skapa en sida med länkar till samtliga uppgifter. Sidan ska se ut liknande följande: