Lussen

For

// for-lus
for (van; tot; teller verhogen){
    // herhaalt n-maal dezelfde instructie.
}

★ Open jsIntro/for.html. ★ Vul een getal in en klik vervolgens op de tabtoets (= blur-event). ★ Bekijk de broncode.

// Tellen met For-lus
$('#getal').blur(function(){ 
    var getal = $(this).val(); 
    var txt = '';
    for(var i = 0; i<= getal ; i++) { 
        txt += i + '<br>';
    }
    $('#resultaat').html(txt);
});

Het getal wordt in de variabele getal geplaatst. De tweede variabele txt is een lege string. Binnen de for lus wordt een variabele i aangemaakt en krijgt i de waarde 0. Vervolgens wordt de lus uitgevoerd (i<=getal). Op de linkse afbeelding is de stapgrootte 1 (i wordt telkens met 1 verhoogd via i++).

★ Pas de code als volgt aan. for(var i = 0; i <= getal ; i++) wordt for(var i = 0; i <= getal ; i += 5) ★ Test het resultaat opnieuw in een browser.

De teller wordt nu met een stapgrootte van 5 verhoogd (afbeelding rechts).

In een lus wordt de declaratie van de teller vaak weggelaten. Beide oplossingen zijn mogelijk: for( i = 0; i <= tot ; i++) en for(var i = 0; i <= tot ; i++)

While

Deze lus wordt vaak gebruikt in situaties waarbij het aantal stappen op voorhand onbekend is. De lus stopt op het moment dat de voorwaarde false (onwaar) is.

while (voorwaarde) {
    // voer instructie uit en verhoog de teller
}

★ Open jsIntro/while.html. ★ Vul een getal in en klik vervolgens op de tabtoets. ★ Bekijk de broncode.

$('#getal').blur(function(){ 
    var van = 0;
    var tot = $(this).val(); 
    var txt= '';
    var i = van; 
    while(i <= tot) {
        txt += i + ', ';
        i++;    // teller verhogen!
    }
    $('#resultaatWhile').html(txt);
});

Het resultaat van dit voorbeeld is een teller van van tot tot. De while-lus loopt zolang i kleiner dan of gelijk is aan de waarde van tot.

Vergeet binnen een while-lus vooral niet de waarde van de teller met één te verhogen (i++), anders blijft de lus oneindig lopen!

In bovenstaand voorbeeld is de telcyclus wel op voorhand gekend en kan u eventueel een for-lus gebruiken. U hoeft de teller dan ook niet binnen de lus te verhogen.

// zelfde bewerking met for-lus 
var txt= '';
var i = van;
for(i=0; i<= tot ; i++) { 
    txt += i + ', ';
}
$('#resultaatFor').html(txt);

Do-while

Deze lus is bijna identiek aan de while-lus. Een while-lus wordt enkel uitgevoerd indien de voorwaarde true is. Indien de startvoorwaarde al false is, wordt de lus helemaal niet uitgevoerd.

do {
   // voer instructie uit en verhoog de teller
} while (voorwaarde);

In tegenstelling tot een while-lus, wordt een do-while-lus altijd minstens één maal uitgevoerd, ook al is de beginvoorwaarde false. De test gebeurt immers helemaal op het einde, nadat de bewerking reeds is uitgevoerd.

// zelfde bewerking als while, maar nu met een do-while lus
var txt= '';
var i = van; 
do {
    txt += i + ', ';
    i++;    // teller verhogen
} while (i <= tot);
$('#resultaatDoWhile').html(txt);