Loopar
Ibland vill man göra samma sak flera gånger. Då kan man loopa och upprepa det man vill göra om och om igen. Till exempel när du ska diska, för varje sak som ska diskas så ska du antingen stoppa den i diskmaskinen eller diska den för hand. Har du tio saker som ska diskas så gör du totalt tio saker.
På hemsidor kan det hända att vi vill loopa igenom alla element av en viss typ eller liknande, det är exempelvis så jag löser färgningen av länkarna i menyerna.
Det finns två sorters loopar:
- while-loopar
- En while loop är uppbyggd som en if-sats och fortsätter så länge det som står i villkoret är uppfyllt.
- for-loopar
- En for-loop använder man när man vet exakt hur många gånger man ska göra något.
While-loopar
While-loopar kan ses som if-satser på steroider. Så länge som villkoret i if-satsen är uppfyllt så kommer det som står i blocket att köras. Detta medför en risk, om man inuti blocket inte förändrar sakerna i villkoret så kommer man att fastna i en oändlig loop. Det kommer att sakta ner din sida och kanske till och med göra så att annan kod inte körs. Därför är det viktigt att var noga med sitt villkor så att det inte blir en evig loop.
<script>
let i = 0;
while (i < 10){
console.log(i);
i++; // Ökar i med ett
}
</script>While-loopar är särskilt bra när villkoret inte innehåller siffror.
For-loopar
En for-loop är användbar när man vet hur många gånger något kommer att hända. Man kan se for-loopar som speciallicerade while-loopar som bara räknar och kollar om ett tal är stort eller litet.
<script>
for (let i = 0; i < 10; i++){
console.log(i);
}
</script>Kollar vi på det inom paranteserna så ser vi att det faktiskt innehåller samma saker som while-loopen och till och med i samma ordning.
Ex
//Fråga alla i rummet vad de heter.
<script>
let antal = prompt("Hur många är det i rummet?");
let frågade = 0;
let namn;
// Lösning 1 med while
while (frågade < antal){
namn = prompt("Vad heter du?");
alert("Hej "+namn);
frågade = frågade +1;
}
//Lösning 2 med for
for (let i = 0; i < antal; i++){
namn = prompt("Vad heter du?");
alert("Hej "+namn);
}
</script>