Skip to main content

Les 2: For-lussen (For-loops)

Wanneer een bepaalde herhaling meerdere malen moet gebeuren, is het een goed idee om een lus [B1] te gebruiken. Zo een loop wordt uitgevoerd zodra er aan een bepaalde voorwaarde [B2] wordt voldaan. De for-lus is de meest compacte manier van het schrijven van een lus. De for-loop gaan we dan ook in deze les behandelen.

Vanaf nu gaan we te werk met de engelse termen. "Lus" noemen we voortaan een "loop". Dit betekend dat we de "for-lus" voortaan "for-loop" gaan noemen.

For-loop

De for-loop bestaat uit drie belangrijke onderdelen, namelijk:

  • De initialization [B3]. Dit is de eerste stap wordt voor de iteratie [B4] uitgevoerd en geeft de beginwaarde aan.
  • De voorwaarde. De voorwaarde bepaald hoe lang een for-loop moet loopen [B5]. De for-loop wordt uitgevoerd zolang de voorwaarde/conditie waar (true) is.
  • De toenamefactor. Deze bepaald hoeveel er bij de ge-initialiseerde variabele opgeteld/afgetrokken moet worden.

Let op! De toenamefactor mag ook negatief zijn, dan is er namelijk sprake van een "afnamefactor".

De bovenstaande onderdelen worden in een for-loop op dezelfde regel geplaatst, waarbij ze gescheiden worden met een punt-komma.

Een put-komma wordt in het Engels een semicolon genoemd en bestaat uit een punt en een komma -> ;

Syntax

De syntax voor de for-loop is als volgt:

 for(var variabelenaam = beginwaarde; variabele vergelijkende operator eindwaarde; variabele met toenamefactor){
 	// hier komt het script dat we willen herhalen    
 }

Laten we deze syntax uitwerken met een voorbeeld. Stel dat we achter elkaar tot en met 10 willen tellen, en dat we starten met het tellen bij 0. Dus: 0 1 2 3 4 5 6 7 8 9 10. Zoals je ziet, kunnen we dit achter elkaar schrijven. We kunnen dit echter ook laten doen door een for-loop.

Er zijn dus 3 stappen die we moeten uitwerken:

  • We willen beginnen met tellen bij 0. Dus de beginwaarde (initialisatie) is 0: var i = 0.
  • We willen tot en met 10 tellen, dus de 10 is inbegrepen en de loop moet dus stoppen voor we bij 11 komen: i <= 10.
  • We beginnen met het tellen bij 0, dus na elke iteratie moeten we een optellen bij de variabele i: i++.

Let op! i++ betekend dat we een variabele i hebben en dat we hier elke keer 1 bij optellen. We doen dus als het ware:
i = i + 1.

Nu we de drie stappen hebben uitgewerkt, kunnen we verder met het schrijven van de for-loop:

for(var i = 0; i <= 10; i++){
	document.write(i);
}

Daar staat ie dan, onze eerste for-loop in JavaScript! 

Lesopdrachten/huiswerk

Nu we weten hoe we een for-loop schrijven in JavaScript, kunnen we zelf aan het werk. Maak de volgende les-/huiswerk opdrachten en lever deze in via Microsoft Teams.

De volgende opdrachten kun je uitwerken in JSFiddle: https://jsfiddle.net/ . Schrijf je script in de JavaScript-sectie en click linksboven op Run om je script te executen.

LET OP! JSFiddle hanteert een donker thema, waardoor de output in de result-sectie niet goed toont. Door deze regel onderaan je JS-editor toe te voegen, kun je de achtergrond kleur van je editor wit maken: document.body.style.backgroundColor = "white"; 

Les - / huiswerk opdracht 1: Schrijf een for-loop die tien keer loopt. Deze for-loop moet een halve kerstboom maken. De output moet er dus zo uit zien:
*
**
***
****
*****

Bij elke iteratie komt er dus 1 ster bij. 

Tip: gebruik string concatenation.
Let op!  Het gebruik van nested for-loops en repeat() is niet toegestaan.

Les - / huiswerk opdracht 2: Schrijf een for-loop die tien keer loopt. Deze loop moet aftellen van 10 tot en met 0.

Les - / huiswerk opdracht 3: Schrijf een for-loop die twintig keer loopt. Deze loop moet voor ieder getal aangeven of dit een even - of oneven getal is. 

Voor even getallen print je ${getal} is een even getal. Waarbij ${getal} je variabele is.
Voor oneven getallen print je ${getal} is een oneven getal. 

${getal} is het getal van je variabele tijdens de iteratie.

Lesopdrachten zijn bedoelt voor de les. Alles wat je in de les niet afkrijgt, wordt automatisch je huiswerk.

Begrippen

[B1] Een lus wordt in het Engels een loop genoemd.

[B2] Een ander woord voor voorwaarde is een conditie. In het Engels wordt dit de condition genoemd.

[B3] Initialization is de Engelse term voor het zetten van een beginwaarde (initialiseren).

[B4] Iteratie is een ander woord voor herhaling. Een for-loop bestaan uit meerdere iteraties. De Engelse term hiervoor is to iterate.

[B5] In een for-loop wordt meerdere keren ge-looped. Het loopen wordt ook wel itereren genoemd. Zie ook begrip 4.

Bronnen

[1] JSFiddle: https://jsfiddle.net/

 

Back to top