Programmeren in JavaScript/Lussen

In dit hoofdstuk gaan we leren hoe je lussen moet aanmaken in JavaScript. Lussen zijn in staat om stukjes code te herhalen voor x aantal keren of tot wanneer er wordt voldaan aan een bepaalde voorwaarde. Als je de lussen kent van de programmeertaal Java of de Scripttaal php dan zul je hiermee geen problemen hebben. Er zijn 3 lussen in JavaScript:

• for
• while
• do ... while

Naast deze lussen zullen we het ook hebben over de statements break en continue.

for

De for lus wordt voornamelijk gebruikt wanneer je op voorhand weet hoeveel keer een lus moet worden uitgevoerd. Je moet natuurlijk die regel niet strikt opvolgen.

JavaScript-code: for lus

for (variabele=startwaarde;variabele<eindwaarde;variabele=variabele+verhoging){
	//Hier komt de code die x aantal keer wordt uitgevoerd.
}

Dit is de algemene notatie van de for lus. De for lus heeft een startwaarde nodig vanwaar hij zal beginnen te tellen, meestal is dit 0 maar het kan om het even welk getal zijn. Dit gebeurt hier bij variabele=startwaarde. De for lus moet ook weten tot waar hij moet tellen, dit gebeurt bij variabele<=eindwaarde, wanneer de variabele een bepaalde waarde bereikt heeft, stopt de lus. In dit geval zodra het groter is dan de eindwaarde. Iedere keer wanneer de code in de lus werd uitgevoerd, wordt variabele=variabele+verhoging uitgevoerd. Hieronder volgt een praktisch voorbeeld.

JavaScript-code: for lus

var i;
for (i=0;i<10;i++){
        document.write("Variabele i: " + i + "<br />");
}

Met als uitvoer:

Variabele i: 0
Variabele i: 1
Variabele i: 2
Variabele i: 3
Variabele i: 4
Variabele i: 5
Variabele i: 6
Variabele i: 7
Variabele i: 8
Variabele i: 9

De variabele i kan natuurlijk iedere startwaarde hebben, positief, negatief of nul. Ook kun je dat stukje leeg laten en de startwaarde buiten de for lus bepalen. Het stukje waar je de verhoging bepaalt kan ook allerlei vormen aannemen. Het belangrijkste is dat de variabele i van waarde verandert. Of dat nu een verhoging met 1 is, een verlaging met 5, vermenigvuldigd wordt door 2, het maakt niet uit. Ook kun je dit stukje leeg laten en bij de code in de for lus schrijven als volgt:

JavaScript-code: for lus

var i=0;
for ( ;i<10; ){
        document.write("Variabele i: " + i + "<br />");
        i++;
}

while

While wordt in tegenstelling met for eerder gebruikt wanneer je niet precies kunt zeggen wanneer de lus moet stoppen. De algemene notatie is als volgt:

JavaScript-code: while lus

while (voorwaarde){
	//Hier komt de code die wordt uitgevoerd zolang er wordt voldaan aan de voorwaarde.
}

De lus blijft draaien zolang er aan een bepaalde voorwaarde wordt voldaan. Hieronder volgt een concreet voorbeeld:

JavaScript-code: while lus

var i=1;
while (i<=10){
	document.write("Variabele i: " + i + "<br />");
	i++;
}

Met als uitvoer:

Variabele i: 1
Variabele i: 2
Variabele i: 3
Variabele i: 4
Variabele i: 5
Variabele i: 6
Variabele i: 7
Variabele i: 8
Variabele i: 9
Variabele i: 10

Dit voorbeeld doet exact hetzelfde als wat we gezien hebben bij de for lus. Zolang variabele i kleiner of gelijk aan 10 is zal de lus blijven draaien. De voorwaarde kan eigenlijk van alles zijn.

do ... while

Het enige verschil dat deze soort lus heeft met de gewone while is dat de code in de lus minstens één keer wordt uitgevoerd ongeacht of er wel of niet wordt voldaan aan een bepaalde voorwaarde. De do ... while lus ziet er als volgt uit:

JavaScript-code: do ... while lus

var i=1;
do {
	document.write("Variabele i: " + i + "<br />");
	i++;
} while (i<=10);

Deze lus doet exact hetzelfde als het voorbeeld bij de while lus. Hieronder volgt een voorbeeld dat aantoont dat de code in de lus sowieso minstens één keer wordt uitgevoerd.

JavaScript-code: do ... while lus

var i=11;
do {
	document.write("Variabele i: " + i + "<br />");
	i++;
} while (i<=10);

Met als uitvoer:

Variabele i: 11

Hoewel het getal 11 niet meer voldoet aan de voorwaarde wordt de code in de lus nog steeds één keer uitgevoerd.

break en continue

Met break en continue kun je makkelijk de lus beïnvloeden. De break statement laat de lus abrupt stoppen en wordt er verder gegaan met de code na de de lus.

JavaScript-code: break

var i=0;
for (i=1;i<=10;i++){
	if (i==3){break} 
	document.write("Variabele i: " + i + "<br />");
}
document.write("Nu wordt dit uitgevoerd. <br />");

Met als uitvoer:

Variabele i: 1
Variabele i: 2
Nu wordt dit uitgevoerd.

Zoals je kunt zien wordt zelfs de code die nog in de lus na de break komt niet uitgevoerd en stopt de lus met draaien wanneer het getal 3 wordt bereikt.

Continue laat in tegenstelling tot break niet de lus stoppen maar slaat een beurt over. Wanneer continue voor komt in een lus dan wordt de code die nog zou moeten worden uitgevoerd niet meer uitgevoerd. De lus blijft echter wel draaien, zolang er nog steeds wordt voldaan aan de voorwaarde.

JavaScript-code: continue

var i=0;
for (i=1;i<=10;i++)
{
	if (i==3){continue} 
	document.write("Variabele i: " + i + "<br />");
}
document.write("Nu wordt dit uitgevoerd. <br />");

Met als uitvoer:

Variabele i: 1
Variabele i: 2
Variabele i: 4
Variabele i: 5
Variabele i: 6
Variabele i: 7
Variabele i: 8
Variabele i: 9
Variabele i: 10
Nu wordt dit uitgevoerd. 

Zoals je kunt zien wordt continue opgeroepen wanneer de variabele i het getal 3 als waarde heeft. De lus slaat dan de code over, maar blijft nog steeds draaien.