Laboration 2 c - Webbteknik 2

I föregående laboration lärde du dig hur logiska uttryck fungerar och hur de kan ge värdena true eller false. Nu ska vi använda sådana värden för att styra programflödet med hjälp av villkorssatser. Nu tycker jag också att det är dags att vi börjar använda HTML lite mer, så vi kan visa resultatet av våra program direkt på webbsidan istället för i konsolen. Därför börjar vi javascript-koden med att hämta ett element från HTML-sidan där vi kan skriva ut meddelanden.

0 - Skapa en arbetsmapp

Innan du börjar, skapa en ny labb-mapp som du kan kalla lab-2c där du sparar filerna för just den här laborationen.

1 - Förbered filerna

Skapa en fil index.html med innehållet nedan och en tom script.js och öppna sedan sidan med Live Server:

<!DOCTYPE html>
<html>
  <head>
    <title>Villkorssatser</title>
    <script type="module" src="script.js"></script>
  </head>
  <body>
    <h1>Villkorssatser</h1>
    <p id="output">Detta är en text som kan bli ersatt från javascript</p>
  </body>
</html>

2 - Ett första beslut

Börja med att lägga in följande i script.js för att hämta en referens till <p id="output"> där vi kan skriva ut meddelanden:

const output = document.getElementById("output");

Nu när vi har en variabel genom vilken vi kan påverka paragraf-elementet på sida kan vi börja experimentera med vilkorssatser.

Lägg till följade i script.js:

let isSunny = true;

if (isSunny) {
  output.textContent = "Great day for a walk! ☀️";
}

Testa: Ändra isSunny till false och se vad som händer. Fundera på varför inget händer i det fallet.

3 - If och else

Genom att använda else i samband med if kan vi lägga till ett alternativ. Vi kan alltså uttrycka att vi vill göra antingen det ena eller det andra, beroende på villkoret.

Lägg in följande sist i script.js:

let hasCoffee = false;

if (hasCoffee) {
  output.textContent = "Ready to start the day! ☕️";
} else {
  output.textContent = "Better make some coffee first...";
}

Testa: Vad händer när du växlar värdet på hasCoffee mellan true och false?

4 - Flera alternativ med else if

Du kan lägga till fler möjliga vägar med else if. Lägg till följande i slutet av script.js:

let mood = "tired";

if (mood === "happy") {
  output.textContent = "Spread the joy! 😄";
} else if (mood === "tired") {
  output.textContent = "Maybe take a quick nap. 😴";
} else {
  output.textContent = "Hang in there, things will get better!";
}

Testa: Prova olika värden på mood (t.ex. "happy", "tired", "bored"), se om du kan förutsäga vad som kommer att skrivas ut.

5 - Interaktiv övning: Gissa talet!

Nu ska vi använda villkor för att skapa en interaktiv gissningslek.

Börja med att lägga till följande HTML i index.html inom <body>-taggen, under <p id="output">:

    <hr />
    <h2>🎯 Gissa talet</h2>
    <p>Jag tänker på ett tal mellan 1 och 10...</p>
    <input id="gissning" type="number" min="1" max="10" placeholder="Din gissning" />
    <button id="gissaKnapp">Gissa!</button>
    <p id="svar"></p>

Bygg vidare i script.js med koden nedan:

// Skapar ett slumpat tal mellan 1 och 10
const secret = Math.floor(Math.random() * 10) + 1;

// Hämtar element från HTML, så att vi kan använda dem i koden
const input = document.querySelector('#gissning');
const knapp = document.querySelector('#gissaKnapp');
const svar = document.querySelector('#svar');

// Lägger till en "click"-händelsehanterare på knappen, så att vi kan köra kod när användaren klickar
knapp.addEventListener('click', function () {
  // Hämtar användarens gissning från input-elementet och konverterar den till ett nummer
  const gissning = Number(input.value);

  // Jämför gissningen med det hemliga talet och ge feedback
  if (gissning === secret) {
    svar.textContent = "🎉 Rätt! Du gissade talet!";
  } else if (gissning > secret) {
    svar.textContent = "För högt! Försök igen.";
  } else if (gissning < secret) {
    svar.textContent = "För lågt! Försök igen.";
  } else {
    svar.textContent = "Ogiltig gissning.";
  }
});

Prova koden genom att öppna sidan i webbläsaren och gissa olika tal! Försök förstår vad som händer i koden när olika villkor uppfylls.

Fundera: Vad är egentligen villkoret för else-delen i slutet? Den kommer ju bara att köras om ingen av de andra if-satserna var sanna. När kan det hända?

Utmaningar

Lägg till en räknare som visar hur många försök spelaren gjort.
- Tips: Skapa en variabel attempts som du ökar med 1 varje gång knappen klickas. Sedan kan du logga värdet till konsolen eller visa det på sidan i ett extra <p>-element.
Kan du lägga till en knapp för att börja om spelet?
- Tips: Du behöver skapa ett nytt slumpat tal och nollställa räknaren när knappen klickas. Nollställ även texten i svar-elementet.
Låt programmet berätta om gissningen var “väldigt nära” (skillnaden högst 1).
- Tips: skillnaden mellan två tal fås genom att subtrahera det ena från det andra. Men observera att resultatet kan vara både positivt och negativt, så använd Math.abs() för att få det absoluta värdet, eller jämför skillnaden med både +1 och -1.

Reflektion

Vad händer om flera if-satser i rad kan vara sanna? körs alla?
I steg 5:
- Vad händer om du glömmer Number() runt input.value?
- Vad betyder egentligen === jämfört med == i det här fallet?
- Varför måste vi välja slumptalet utanför click-funktionen?