Webbteknik 2

Laboration 2A

Math-objektet och slumptal

Objektet Math är ett fördefinierat objekt i JavaScript som innehåller några konstanter och en hel del funktioner för matematiska operationer, t.ex. kvadratrot, sinus, cosinus, logaritmer, etc. Det finns också en funktion för att få ett slumpmässigt tal och det är främst den vi kommer använda.

0 - Skapa en arbetsmapp

Innan du börjar, skapa en ny labb-mapp som du kan kalla lab-2a där du sparar filerna för just den här laborationen. Ladda även ner materialet till denna labb från länken till höger på sidan och packa upp det i din labb-mapp. Om du har gjort rätt skall du ha en img-mapp med bilder i lab-2a.

1 - Skapa HTML-sidan

Skapa en fil index.html med innehållet nedan och en tom script.js och öppna sedan sidan med Live Server och ta fram webbläsarens utvecklarkonsol.

<!DOCTYPE html>
<html>
<head>
  <title>Math-objektet och slumptal</title>
  <script type="module" src="script.js"></script>
</head>
<body>
  <h1>Slumptal</h1>
  <p>Öppna webbläsarens konsol (F12 → Console)</p>
</body>
</html>

2 - Användbara Math-funktioner

I Math-objektet finns som sagt flera användbara funktioner för matematiska beräkningar. Och eftersom datorer i grund och botten bara hanterar tal, så är det ofta nödvändigt göra olika typer av enklare beräkningar i våra program. Här är några exempel på vanliga Math-funktioner som kan vara bra att känna till:

console.log("Absolutvärde av 5: ", Math.abs(5)); // Absolutvärde
console.log("Absolutvärde av -5: ", Math.abs(-5)); // Absolutvärde

console.log("Avrunda 4.7: ", Math.round(4.7)); // Avrundning
console.log("Golv av 4.7: ", Math.floor(4.7)); // Golv (trunkerar)

Testa: Testa själv att ändra värdena i exemplen ovan och se vad som händer i konsolen för att få en känsla vad de olika funktionerna har för effekt.

3 - Slumpmässiga tal

Med Math.random() kan vi få ett slumpmässigt tal mellan 0 (inklusive) och 1 (exklusive). Testa att lägga till följande i script.js:

console.log("slumptal ", Math.random());

Öppna webbläsarens konsol och ladda om sidan några gånger för att se olika tal.

I kombination med andra Math-funktioner kan vi skapa heltal i olika intervall. Testa att lägga till följande kod i script.js:

// Slumpa ett heltal mellan 0 och 9
const num0to9 = Math.floor(Math.random() * 10);
console.log("Heltal 0-9:", num0to9);

// Slumpa ett heltal mellan 1 och 6
const num1to6 = Math.floor(Math.random() * 6) + 1;
console.log("Heltal 1-6:", num1to6);

Talet vi multiplicerar med bestämmer alltså storleken av intervallet, och genom att addera ett tal förskjuter vi intervallet så att det börjar på rätt ställe.

Testa:

  • Prova med och utan Math.floor() för att se skillnaden i resultatet.
  • Försök att ändra koden ovan för att slumpa fram tal i andra intervall, t.ex. mellan -1 och 1, eller mellan 5 och 15.

4 - Kasta tärning

Nu skall vi prova att tillämpa det vi lärt oss genom att göra så att det går att kasta tärning. Tanken är att när användaren klicka på en knapp så skall en tärning “kastas” (vi slumpar ett tal mellan 1 och 6) och en bild på tärningen med rätt antal prickar visas.

Följande är sjäva användargränssnittet för att kasta tärning, lägg till det i slutet av body i index.html:

  <hr>
  <button>Kasta tärningen</button>
  <div>
    <img src="img/1.png">
  </div>

I script.js, genomför följande steg:

  1. Hämta knappelementet med document.querySelector, på följande sätt: 
    const button = document.querySelector("button");
  2. Hämta på motsvarande sätt bildelementent. Observera att vi använder en annan selektor samt att vi anger ett unikt namn för variabeln: 
    const image = document.querySelector("img");

Nu har vi tillgång i javascript till båda de elementen från html-dokumentet som vi behöver för att kunna kasta tärningen. Det som återstår är att lägga till funktionaliteten slumpa ett tal och byta bild när knappen klickas.

  1. Lägg till en “click”-händelsehanterare på knappen: 
    button.addEventListener("click", function () {
  // TODO 1: Slumpa tal
  // TODO 2: byt sökväg på bilden
});
  2. Inuti händelsehanteraren, på platsen för TODO 1, skapa en variabel roll och tilldela ett slumptal mellan 1 och 6 (inklusive) med hjälp av Math.random(), Math.floor() som ovan.
  3. På platsen för TODO 2, sätt src-attributet på bildelementet till den bildfil som motsvarar värdet som finns i variabeln roll.
    • Tips: Sätt ihop en giltig sökväg utifrån det slumpade talet. ex: image.src = "img/" + roll + ".png";
  4. Testa att klicka på knappen flera gånger för att se att tärningen “kastas”.

Sammanfattning

  • Med Math.random() får man ett slumpmässigt tal mellan 0 och 0.999…
  • För att få ett större tal multiplicerar man med ett tal, t.ex. Math.random() * 10 ger ett tal mellan 0 och 9.999…
  • För att får ett heltal använder man Math.floor(), t.ex. Math.floor(Math.random() * 10) ger ett heltal mellan 0 och 9.
  • Slutligen, genom att addera ett tal förskjuter man intervallet, t.ex. Math.floor(Math.random() * 10) + 1 ger ett heltal mellan 1 och 10.