Laboration 3 a - Webbteknik 2

I denna laboration introduceras tre typer av loopar i JavaScript: for, while och do…while. Målet är att förstå hur och när man använder loopar samt att kunna skriva enkla loopar som upprepar kod.

0 - Skapa en arbetsmapp

Innan du börjar, skapa en ny labb-mapp som du kan kalla lab-3a 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>Loopar</title>
    <script type="module" src="script.js"></script>
  </head>
  <body>
    <h1>Loopar</h1>
    <p>Öppna webbläsarens konsol (F12 → Console)</p>
  </body>
</html>

2 - En första loop, en första loop, en första loop

Om du vill upprepa något flera gånger, eller tills ett visst villkor är uppfyllt kan du använda en loop istället för att skriva samma kod flera gånger.

Lägg i följande kod i script.js:

console.log("Hej!");
console.log("Hej!");
console.log("Hej!");

Motsvarande med en loop (lägg till detta i script.js efter den tidigare koden):

for (let i = 0; i < 3; i+=1) {
  console.log("Hej från loop!");
}

Det du precis provat är en for-loop. Den består av tre delar inom parentesen, vart och en separerad med semikolon:

Initialisering: let i = 0 skapar en variabel i som börjar på 0.
Villkor: i < 3 är villkoret som kontrolleras före varje iteration. Så länge det är sant fortsätter loopen.
Uppdatering: i+=1 ökar räknaren i med 1 efter varje iteration.

Koden inuti loopen (mellan {}) är koden som upprepas och som i det här fallet alltså körs tre gånger, med i värdena 0, 1 och 2.

3 - Test av for-loop

Nu skall vi undersöka for-loopen lite närmare. Vi lämnar också konsolen för att visa resultatet på sidan istället.

Lägg in följande element i slutet av body i html-filen:

<hr>
<button id="button-for">Test av for-loop</button>
<div id="result-for"></div>

Skapa sedan en click-händelsehanterare för knappen i script.js:

document.getElementById("button-for").addEventListener("click", function() {
  const resultElement = document.getElementById("result-for");

  // TODO
});

Uppräkning

På platsen för // TODO, gör följande:

Skapa en variabel result med let och initiera den till en tom sträng:
```
let result = "";
```
På raden under, skriv en for-loop som räknar upp i från 0 till 10, ett steg i taget. Gå tillbaka och titta på syntaxen för for-loopen i steg 2 ovan om du behöver.
Inuti loopen, lägg till värdet av i följt av ett mellanslag till result:
```
result += i + " ";
```
Slutligen, efter loopen, sätt resultElement.innerHTML till värdet av result.

Testa:

Experimentera med att ändra startvärdet och slutvärdet. Testa även att ändra villkoret från < till <= och se vad som händer.

Testa att ändra uppdateringen från i+=1 till i+=2 för att se hur det påverkar resultatet. Experimentera med andra värden till du känner dig bekväm med hur for-loopen fungerar.

Nedräkning

Bara genom att ändra initialiseringen, villkoret och uppdateringen i for-loopen kan du enkelt göra en nedräkning istället för en uppräkning. Gör följande ändringar i for-loopen:

Ändra initialiseringen till let i = 10
Ändra villkoret till i > 0
Ändra uppdateringen till i -= 1

Kör koden igen och se att du nu får en nedräkning från 10 till 1.

Testa: Prova återigen att experimentera med olika start- och slutvärden samt olika uppdateringar för att se hur loopen beter sig.

Summering

Nu skall vi prova på att använda loopen till något mer användbart än att bara skriva ut serier av tal. Ett vanligt användningsområde för loopar är att summera värden.

Gör följande ändringar i händelsehanteraren:

Ändra for-loopen till en uppräkning från 1 till och med 10.
Skapa en variabel sum någonstans innan for-loopen och initiera den till 0.
Inuti loopen, istället för att lägga till i till result, lägg till i till sum:
```
sum += i;
```
Eftersom sum är ett numeriskt värde så kommer detta att summera alla värden av i.
Uppdatera raden som sätter resultElement.innerHTML till att sätta det till "Summan är: " + sum;.

Om du kör koden nu och klickar på knappen så bör du se att summan av talen från 1 till 10 är 55. Om du får en annan summa så kontrollera “inställningarna” i for-loopen så att den verkligen räknar alla tal från 1 till och med 10. Kontrollera startvärdet, villkoret och uppdateringen.

Testa: Prova att uppdatera for-loopen för att summera andra intervall:

Summera alla tal från 1 till och med 100. Summan bör bli 5050.

Summera alla tal från 20 till och med 40. Summan bör bli 630.

Summera alla jämna tal från 2 till och med 50. Summan bör bli 650.

tips: För att få bara jämna tal kan du ändra uppdateringen i for-loopen till i += 2 och startvärdet till 2.

4 - Test av while-loop

While-loopar fungerar lite annorlunda. De körs så länge ett visst villkor är sant, men du behöver själv se till att villkoret så småningom blir falskt, annars körs loopen för evigt.

I det här exempelet skall vi skapa en while-loop som summerar tal med ett angiven startvärde och ökning. Vi summerar så länge summan är mindre än 100.

Lägg in följande element i slutet av body i html-filen:

<hr>
Start: <input type="number" id="start" value="5" /><br>
Ökning: <input type="number" id="inc" value="5" /><br>
<button id="button-while">Test av while-loop</button>
<div id="result-while"></div>

I slutet av script.js gör du på en click-händelsehanterare för den nya knappen på samma sätt som i steg 3 ovan. Skapa även en variabel resultElement för elementet med id result-while i händelsehanteraren, precis som ovan.

I click-händelsehanteraren, gör följande:

Skapa variabler för input-elementen start och inc med document.getElementById(...).

const startInput = document.getElementById("start");
const incInput = document.getElementById("inc");

Läs ut värdena från input-fälten och konvertera dem till nummer med Number(...):

const start = Number(startInput.value);
const inc = Number(incInput.value);

Rensa innehållet i resultElement genom att sätta resultElement.innerHTML till en tom sträng. Genom att göra detta säkerställer du att resultatet från tidigare klick inte ligger kvar när du klicka på knappen för att köra koden igen.
Skapa en variabel sum och initiera den till värdet av start
```
let sum = start;
```
Observera att vi måste använda let här eftersom värdet av sum kommer att ändras i loopen.
Skapa en while-loop med villkoret sum < 100:
```
while (sum < 100) {
  // TODO
}
```
Om du kör koden nu så kommer loopen att köras för evigt eftersom sum aldrig ändras inuti loopen. Detta kommer att göra att sidan “hänger sig”. Testa gärna om du vill, det enda som händer är att du kommer att behöva stäng den aktuella fliken i webbläsaren.
Ersätt // TODO i loopen med kod som ökar sum med värdet av inc varje gång loopen körs.
I loopen, lägg även till en rad som lägger till det aktuella värdet av sum följt av ett radbrytning (<br>) till resultElement.innerHTML:
```
resultElement.innerHTML += sum + "<br>";
```
Avsluta med att lägga en rad efter loopen som lägger lägger till den slutliga summan till resultElement.innerHTML:
```
resultElement.innerHTML += "Slutlig summa: " + sum;
```

När du kör koden och klickar på knappen så bör du nu se en lista med summerade värden som ökar med den angivna ökningen, tills summan är 100 eller mer.

Testa:

Prova att sätta olika startvärden och ökningar.

Vad händer om du sätter ett startvärde som är 100 eller mer från början?

do…while

Det finns en annan variant av while-loopen som kallas do…while. Den fungerar på samma sätt som en vanlig while-loop, men garanterar att koden inuti loopen körs minst en gång, eftersom villkoret kontrolleras efter att koden i loopen har körts.

Prova att ändra while-loopen i föregående exempel till en do...while-loop genom att ersätta while-loopen med följande:

do {
  sum += inc;
  resultElement.innerHTML += sum + "<br>";
} while (sum < 100);

Testa: Hur beter sig koden nu när du sätter startvärdet till 100 eller mer från början?

5 - Avbryt en loop med `break`

Alla loopar kan avbrytas i förtid med hjälp av break-satsen. Detta kan vara användbart om du vill sluta loopen när något speciellt händer.

Lägg in ett vilkor i loopen ovan som avbryter loopen med break om summan blir exakt 75:
```
if (sum === 75) {
  break;
}
```
Testa koden med olika startvärden och ökningar för att se när loopen avbryts.

Reflektion

Vad är de största fördelarna med att använda en loop istället för att upprepa kod manuellt?
Finns det situationer när man måste använda en loop istället för att upprepa kod?
Vilken av looparna (for, while eller do…while) kändes mest intuitiv för dig? Varför?