Inhoud

6. Loops en voorwaarden

Vaak moet er iets gebeuren als iets anders waar is. Of iets moet een aantal keer achter elkaar herhaald worden. JavaScript kan dit allemaal waarmaken met loops en voorwaardelijke code.

Naar boven

6.1. Wat zijn loops en voorwaarden?

Met voorwaardelijke code wordt code bedoeld die alleen uitgevoerd wordt als er aan een bepaalde voorwaarde voldaan wordt. Zo kun je bijvoorbeeld zeggen: als iemand als leeftijd 16 invult, dan moet de tekst "Hey, zo jong ben ik ook!" verschijnen. Dus op voorwaarde dat 16 wordt ingevuld moet iets gebeuren, en anders niet. Dit zal heel veel nodig zijn, want je kan bijvoorbeeld al bij een simpel Mario-spelletje de volgende dingen aanwijzen (zonder dat je de code kent):

Als Mario dood gaat, dan haal je er een leven af
Als de eindscore hoger is dan de hoogste score, dan verander je de highscore
Als Mario een ster heeft gepakt, dan kan hij niet dood
En nog veel meer!

Vaak moet code ook een aantal keer achter elkaar worden uitgevoerd. Dat zou kunnen zien als: zolang aan een bepaalde voorwaarde wordt voldaan, voer je het volgende stukje code uit. Zoiets heet een loop, omdat het een soort looping is (de code start telkens weer overnieuw). Ook dit zul je heel veel tegen komen.

Naar boven

6.2. Het if-else statement

Om een stukje voorwaardelijke code te maken heb je het if-else-statement nodig. Hiermee controleer je dus eerst of iets waar is, en als dat waar is wordt de code die daarna tussen { } staat uitgevoerd.

JavaScript:

var age = prompt("Hoe oud ben je?", "");
if(age == 16)
{
    alert("Hey, zo jong ben ik ook!");
}

Merk op dat hier een dubbele == wordt gebruikt, en geen =. Dat komt omdat een = de waarde van de variabele verandert, en dus eigenlijk betekent 'wordt' (a = 5; // a wordt 5). Terwijl == twee waardes met elkaar vergelijkt, meer over vergelijkingsoperatoren in H6.3.

Het bovenstaande stukje code zou je dus in mensentaal als volgt kunnen schrijven:
Maak variabele age, en vraag de gebruiker een waarde in te vullen (die waarde wordt in age opgeslagen).
Als age gelijk is aan 16, dan laat je een alert-box zien met de tekst Hey, zo jong ben ik ook!

Nou kan je ook code opgeven voor het geval er niet aan de voorwaarde voldaan wordt. Je wil dus zeggen: als iets waar is, dan doe je dit, anders doe je dat. Dat kan in JavaScript ook, en wel als volgt:

JavaScript:

var age = prompt("Hoe oud ben je?", "");
if(age == 16)   // Als age gelijk aan 16 is 
{               // Dan voer je de volgende code uit
    alert("Hey, zo jong ben ik ook!");
}
else            // Anders voer je de volgende code uit
{
    alert("Hmm, dat is niet hetzelfde als mij");
}

Er kunnen zelfs meerdere voorwaarden achter elkaar worden gezet:

JavaScript:

var age = prompt("Hoe oud ben je?", "");
if(age == 16)       // Als age gelijk aan 16 is 
{                   // Dan voer je de volgende code uit
    alert("Hey, zo jong ben ik ook!");
}
else if(age == 15)  // Anders, als age gelijk aan 15 is
{                   // Dan voer je de volgende code uit
    alert("Nog een jaartje, en dan zijn we even jong ;-)");
}
else if(age == 17)  // Anders, als age gelijk aan 17 is
{                   // Dan voer je de volgende code uit
    alert("Je bent een jaartje ouder!");
}
else                // Als niks van het bovenstaande waar is voer je de volgende code uit
{
    alert("Hmm, dat is niet hetzelfde als mij");
}

Merk op dat zodra er een keer aan een voorwaarde voldaan wordt en er dus een stukje code uitgevoerd wordt, de rest daarna overgeslagen wordt. Er is immers al een stukje code gevonden dat aan de voorwaarde voldoet.

In H5.3 werd wat uitgelegd over de scope van een variabele. Namelijk dat die alleen binnen zijn eigen functie zichtbaar was. Bij voorwaardelijke code en loops bestaat ook een scope. De variabelen die in de voorwaardelijke code (dus tussen de { } na een if, else of else if) worden gemaakt zijn ook alleen binnen die { } zichtbaar.

JavaScript:

var a = 12;
// a is zichtbaar (b bestaat nog niet)
if(a == 12)
{
    var b = 13;
    // a en b zijn zichtbaar
    alert(a + b);
}
// a is zichtbaar (b is weg)

Naar boven

6.3. Vergelijkingen en hun operatoren

Zo'n voorwaarde of vergelijking kan 2 waardes hebben: waar of onwaar. Ook wel true of false of 1 of 0. De woorden true en false zijn ook ingebouwde woorden in JavaScript en betekenen dus waar of onwaar. Je kan ze dan ook in een variabele opslaan.

JavaScript:

var mijnVariabele = true;
var mijnAndereVariabele = false;

Uit zo'n vergelijking (of voorwaarde) komt dus altijd een true of false. Gezien de voorwaardelijke code alleen wordt uitgevoerd als aan die voorwaarde voldaan werd, wordt die code dus alleen uitgevoerd als er uit die voorwaarde true (=waar) komt. Gezien de waardes true en false in een variabele opgeslagen kunnen worden kan dus ook de uitkomst van een vergelijking opgeslagen worden in een variabele.

JavaScript:

var a = 11;
var b = (a == 11);              // Sla de uitkomst van de vergelijking op in variabele b
if(b)                           // Als hier true uit komt (dus als b true is)
{                               // Dan voer je de volgende code uit
    alert("Variabele a is 11");
}

De haakjes om a == 11 zijn enkel voor de duidelijkheid. Ze zijn niet per se nodig omdat de operator == voorrang heeft boven de operator = (net zoals * bijvoorbeeld voorrang heeft boven +).

De gebruiker zal dus nu een alert-box met de tekst Variabele a is 11 te zien krijgen. Omdat a == 11 true geeft (want a is gelijk aan 11). Dus b is dan ook true. Dus wordt er aan de voorwaarde voldaan (want er staat true achter de if), en dus wordt de code tussen { } uitgevoerd.

Nu kun je alleen nog twee waardes met elkaar vergelijken (met ==), maar er zijn natuurlijk veel meer mogelijkheden. Die staan hieronder in een tabel weergegeven. In het voorbeeld is a gelijk aan 6, en b is gelijk aan 5.

Operator	Omschrijving	Voorbeelden	Uitkomst
==	Vergelijk 2 waardes, true als ze gelijk zijn	a == 6 a == b	true false
===	Vergelijk 2 waardes, true als ze gelijk zijn en als het type hetzelfde is. Dus als de een een string is en de ander een getal is dit false	a === 6 a === "6"	true false
!=	Vergelijk 2 waardes, true als ze niet gelijk zijn	a != b a != 6	true false
>	Vergelijk 2 waardes, true als de linker groter is dan de rechter	a > b a > 6	true false
<	Vergelijk 2 waardes, true als de linker kleiner is dan de rechter	b < a b < 5	true false
>=	Vergelijk 2 waardes, true als de linker groter is dan de rechter of gelijk is aan de rechter	a >= b a >= 6 a >= 10	true true false
<=	Vergelijk 2 waardes, true als de linker groter is dan de rechter of gelijk is aan de rechter	b <= a b <= 5 b <= 3	true true false

Soms wil je ook als voorwaarde kunnen stellen: als iets waar is en iets anders ook waar is. Daarvoor zijn de zogenaamde logische operatoren bedacht. Hiervan zijn er 3.

Operator	Naam	Omschrijving	Voorbeelden	Uitkomst
&&	AND-operator	Als aan allebei de kanten true staat levert deze ook true	false && false false && true true && false true && true	false false false true
\|\|	OR-operator	Als aan een van de kanten true staat levert deze ook true	false \|\| false false \|\| true true \|\| false true \|\| true	false true true true
!	NOT-operator	De waarde die volgt wordt omgedraaid (true wordt false en false wordt true)	!true !false	false true

Door dat allemaal te combineren krijg je al een script dat ook wat werk verricht.

JavaScript:

var myAge = 16;         // Vul hier natuurlijk je eigen leeftijd in
var age = prompt("Wat is je leeftijd?", "");
if(age < 0)             // Als de ingevulde leeftijd kleiner dan 0 is
{
    alert("Dat lijkt me sterk!");
}
else if(age == myAge)   // Anders, als de ingevulde leeftijd gelijk is aan myAge
{
    alert("Dat is precies mijn leeftijd!");
}
else if(age < myAge)    // Anders, als de ingevulde leeftijd kleiner is dan myAge
{
    alert("Je bent nog " + (myAge-age) + " jaartjes jonger");
}
else if(age > myAge)    // Anders, als de ingevulde leeftijd groter is dan myAge
{
    alert("Je bent " + (age-myAge) + " jaar ouder dan mij");
}
 
var myName = "Mark";
var name = prompt("Wat is uw naam?", "");
if(name == myName && age == myAge)  // Als de ingevulde naam hetzelfde is als myName EN de ingevulde leeftijd is hetzelfde als myAge
    alert("Ik heb je wel door, je bent mijn dubbelganger!");

Merk op dat in het bovenstaande stuk bij de laatste if de { } ontbreken. Die zijn niet nodig als er maar 1 statement (zie H3.1) uitgevoerd moet worden als voorwaardelijke code. Als het er meer zijn zijn de { } verplicht. Bij twijfel mag je altijd de { } plaatsen, want het weglaten ervan is uiteraard ook niet verplicht. Op de rest van deze website zul je wel telkens alles met { } vinden, zodat duidelijk is wat waarbij hoort. Het is echter belangrijk dat je code zonder { } ook begrijpt en kan lezen, omdat veel programmeurs de { } weglaten.

Naar boven

6.4. Functie confirm

Als je de gebruiker iets wil vragen wat hij of zij moet bevestigen (of juist niet bevestigen) dan kun je de functie confirm gebruiken. Dit is een soort van combinatie tussen alert en prompt. Want hij heeft net zoals alert maar één argument nodig. Maar hij geeft, net zoals prompt, een waarde terug. Namelijk true of false. Zodra deze functie wordt aangeroepen zal er namelijk een zelfde soort popup verschijnen als bij alert, maar dan met twee knoppen. Meestal staat er op die knoppen Ok en Annuleren, maar dat hangt van de browser af en kun je zelf niet bepalen. Als er dan op Ok wordt geklikt, geeft de functie true terug, anders false.

JavaScript:

if(confirm("Wil je je naam invoeren?"))         // Als de gebruiker op OK klikt
{                                               // Dan voer je de code tussen de { } uit
    var name = prompt("Wat is je naam?", "");
    alert("Hallo " + name);
}
else                                            // Anders
{
    alert("Je hebt geen naam ingevoerd!");      // Laat je dit berichtje zien
}

Naar boven

6.5. Het switch-statement

Soms heb je een heel lang if-else-statement, zoals bijvoorbeeld.

JavaScript:

var n = prompt("Geef een getal van 0 t/m 9", "0");
if(n==0)
{
    alert("nul");
}
else if(n==1)
{
    alert("een");
}
else if(n==2)
{
    alert("twee");
}
else if(n==3)
{
    alert("drie");
}
else if(n==4)
{
    alert("vier");
}
else if(n==5)
{
    alert("vijf");
}
else if(n==6)
{
    alert("zes");
}
else if(n==7)
{
    alert("zeven");
}
else if(n==8)
{
    alert("acht");
}
else if(n==9)
{
    alert("negen");
}
else
{
    alert("Geen geldig getal ingevoerd!");
}

Dit kan overzichtelijker, namelijk met het switch statement:

JavaScript:

var n = parseInt(prompt("Geef een getal van 0 t/m 9", "0"));
switch(n)
{
    case 0:
        alert("nul");
    break;
 
    case 1:
        alert("een");
    break;
 
    case 2:
        alert("twee");
    break;
 
    case 3:
        alert("drie");
    break;
 
    case 4:
        alert("vier");
    break;
 
    case 5:
        alert("vijf");
    break;
 
    case 6:
        alert("zes");
    break;
 
    case 7:
        alert("zeven");
    break;
 
    case 8:
        alert("acht");
    break;
 
    case 9:
        alert("negen");
    break;
 
    default:
        alert("Geen geldig getal ingevoerd!");
    break;
}

Hierbij wordt dus de waarde van n (of wat je daar ook tussen haakjes zet) vergeleken met alle waardes die daaronder volgen achter het woordje case (en daarna moet weer een dubbele punt). Als er een waarde gevonden wordt die gelijk is aan wat er tussen de () achter switch stond, wordt de code die dan volgt uitgevoerd totdat het woordje break gevonden wordt (of als het switch-statement is afgelopen). Als geen van de waardes gelijk is aan de waarde die bovenaan tussen () staat, dan wordt de code achter default: uitgevoerd (tot aan een break of het einde van het switch-statement). Als er dan geen default: tussen staat zal er niks uitgevoerd worden. Meer over break volgt in H6.8

Hier wordt ook een nieuwe functie geïntroduceerd: parseInt(). Daarmee zet je een getal dat in een string staat (dus bijvoorbeeld "123") om in een echt getal (dus 123). Dit is hier nodig omdat switch een verschil maakt tussen een string en een echt getal (en prompt() geeft altijd een string terug).

Het is dus mogelijk voor meerdere waardes dezelfde code uit te laten voeren. Dit kan simpelweg door een aantal case's achter elkaar te plaatsen. Hieronder zie je dit in een voorbeeld waarbij (op een onhandige manier) wordt aangegeven of n een even of oneven getal is.

JavaScript:

var n = parseInt(prompt("Geef een getal van 1 t/m 10", "0"));
switch(n)
{
    // In het geval n gelijk aan 1, 3, 5, 7 of 9 is
    case 1:
    case 3:
    case 5:
    case 7:
    case 9:
        alert("Het getal is oneven!");
    break;
 
    // In het geval n gelijk aan 2, 4, 6, 8 of 10 is
    case 2: case 4: case 6:     // Zoals je ziet hoeven case-statements niet per se onder elkaar,
    case 8: case 10:            // ze kunnen ook naast elkaar. Dit is vaak overzichtelijker.
        alert("Het getal is even!");
    break;
 
    default:
        alert("Dit getal is te groot of te klein voor mij!");
    break;
}

Naar boven

6.6. De while-loop

Als code een aantal keer achter elkaar uitgevoerd moet worden gebruik je daarvoor een loop. Er bestaan eigenlijk twee soorten loops: een while-loop en een for-loop. Bij een while-loop wordt de code die tussen de { } staat uitgevoerd zolang er aan een bepaalde voorwaarde voldaan wordt. Het lijkt de veel op het if-statement, alleen dan wordt de code herhaald.

JavaScript:

alert("Kijk, ik kan tellen!");
var x = 1;
while(x <= 10)  // Zolang x kleiner is dan 10 of gelijk aan 10 is
{
    alert(x);
    ++x;        // Verhoog x met 1
}

Hier wordt de code tussen de { } dus uitgevoerd totdat x groter dan 10 is.

Er bestaat ook een variant van de while-loop, namelijk de do-while-loop. Normaliter wordt eerst gecontroleerd of er aan de voorwaarde voldaan wordt, zo ja dan wordt de code uitgevoerd en wordt er daarna weer gecontroleerd en eventueel weer code uitgevoerd. Net zo lang totdat er niet meer aan de voorwaarde voldaan wordt. Maar bij een do-while-loop werkt het anders, daar wordt de code eerst uitgevoerd. Dan wordt de voorwaarde gecontroleerd en als die waar is wordt de code weer uitgevoerd en wordt er weer gecontroleerd, etc. Hierbij wordt de code dus altijd minstens 1x uitgevoerd.

JavaScript:

alert("Kijk, ik kan tellen!");
var x = 1;
do              // Voer het volgende stuk code uit
{
    alert(x);
    x++;
}while(x <= 10);// Zolang x kleiner is dan 10 of gelijk aan 10 is

In dit geval is de uitvoer van het eerste en het tweede stukje gelijk.

Naar boven

6.7. De for-loop

De for-loop is de tweede soort loop. Eigenlijk is het alleen maar een verkorte manier om de while-loop op een bepaalde manier te schrijven. Je zal namelijk heel vaak code moeten schrijven die een aantal keer achter elkaar herhaald moet worden. Daarvoor is een for-loop geschikt (hoewel het ook met een while-loop kan zoals in H6.6 beschreven is).

JavaScript:

for(var i = 0; i < 10; ++i)
{
    alert("Er volgen nu nog " + (10-i) + " berichtjes");
}

Dit zou je kunnen zien als:

JavaScript:

var i = 0;
while(i < 10)
{
    alert("Er volgen nu nog " + (10-i) + " berichtjes");
    ++i;
}

Een for-loop ziet er dus als volgt uit

JavaScript:

for(statement1; voorwaarde; statement2)
{
    code
}

Eerst wordt statement1 uitgevoerd, daarna wordt gecontroleerd of aan de voorwaarde voldaan wordt. Als dat niet zo is houdt de loop op. Als er wel aan voldaan wordt wordt de code uitgevoerd. Daarna wordt statement2 uitgevoerd en wordt de voorwaarde weer gecontroleerd. En zo gaat het door. Merk op dat statement1 dus maar 1x uitgevoerd wordt, en dus altijd uitgevoerd wordt.
Ter vergelijking weer even de while-loop:

JavaScript:

statement1
while(voorwaarde)
{
    code
    statement2
}

Naar boven

6.8. Stoppen door break

Soms wil je, terwijl de code midden in de loop is, de loop stoppen. Je wil er dan 'uit breken'. Dit kan met het woordje break, daarmee houdt de huidige loop per direct op.

JavaScript:

var n = 0;
while(true)                 // Oneindige loop, blijft altijd doorgaan (tenzij je break gebruikt)
{
    n = prompt("Geef een getal van 0 t/m 10 in", n);
    if(n >= 0 && n <= 10)   // Als n op zijn minst 0 is, en op zijn hoogst 10 is
        break;              // Breek uit de huidige loop (de while-loop dus)
    alert("Geef een geldig getal op!");
}

De tekst Geef een geldig getal op! zal dus alleen verschijnen als er geen geldig getal ingevuld is (dus kleiner dan 0 of groter dan 10). Want als er wel een geldig getal ingevoerd werd stopt de loop per direct door de break

Er wordt dus alleen uit de huidige loop gebroken. Dus als je twee loops in elkaar hebt, zal er maar uit een gebroken worden.

JavaScript:

while(true)         // Oneindige loop, blijft altijd doorgaan (tenzij je break gebruikt)
{
    // Doe iets...
    for(;true;)     // Ook een oneindige loop, want de voorwaarde is altijd true
    {
        // Doe iets...
        break;      // Breek uit de for-loop
    }
    break;          // Breek uit de while-loop
}

Naar boven

6.9. Opdrachten

Maak een simpele rekenmachine die eerst een getal vraagt, dan vraagt of de gebruiken plus, min of keer wil doen of wil delen. Dan vraag je het tweede getal, en laat je het resultaat van de berekening zien.
Je mag er vanuit gaan dat elke keer een geldige invoer wordt gegeven. (H6.2)
Hetzelfde als opdracht 1, alleen mag je er nu niet vanuit gaan dat er telkens een geldige invoer wordt gedaan. Met de functie isNaN() kun je controleren of een string een getal is. Deze functie geeft namelijk true als de string geen getal is (isNaN staat voor is not a number), en false als de string wel een getal is (of als er gewoon een getal wordt opgegeven).
Als er een foute invoer wordt gedaan wordt er daarvan een melding gegeven en worden er verder geen meldingen meer gegeven. (H6.2)
Geef van de volgende vergelijkingen aan of ze true of false zijn:
1. 3 == 4
2. 5 != 8
3. 5 != "hoi"
4. 23 === "23"
5. 8 > 4 || 4 > 8
6. 4 != 3 && "H" == 'H'
7. !(true) == false
8. 5 < 3 && (4 >= 3 || 10 == "10")
9. 12 >= 12
10. 421 > 421
11. (! 18 < 12 && 13 > -21) && (8 != 8 || 11 == '11')
(H6.3)

Maak twee functies, a() en b(). De functie a() zet een A op het scherm (met document.write()) en returnt true. Functie b() zet een B op het scherm en returnt false.
Vervolgens kopieer je de volgende code:

if(a() && b())
{
    document.write("<br />A && B");
}
document.write("<br />");
 
if(a() || b())
{
    document.write("<br />A || B");
}
document.write("<br />");
 
if(b() && a())
{
    document.write("<br />B && A");
}
document.write("<br />");
 
if(b() || a())
{
    document.write("<br />B || A");
}
document.write("<br />");

Voorspel de uitkomst van deze code (dus de tekst die op het scherm komt te staan). Daarna test je de code en verklaar je de uitkomst. (H6.3)

Maak een script waarin je vraagt om een getal van 1 t/m 10 (ga er maar weer van uit dat de invoer geldig is). Vervolgens moet vanaf dat getal afgeteld worden tot en met 0. Dus stel er wordt 4 ingevuld, dan is de uitvoer van het script:
4
3
2
1
0

Het hele script moet bestaan uit 1 switch-statement (en niet meer). (H6.5)
Neem weer de rekenmachine uit opdracht 2, alleen pas dit keer (minstens een keer, maar mag vaker als je dat handig lijkt) een switch statement toe in het script. (H6.5)
Doe hetzelfde als opdracht 5, alleen nu gebruik je een while-statement. Je code mag dit keer meer statements bevatten dan alleen het while-statement.
Ook mag je er nu niet meer van uit gaan dat er een geldig getal wordt ingevuld, blijf dus net zo lang om een getal van 1 t/m 10 vragen totdat je een geldige invoer hebt gekregen. (H6.6)

Maak een script met een while-loop dat de volgende uitvoer heeft:

1 knikker opgegooid, nog 9 in mijn zak.
2 knikkers opgegooid, nog 8 in mijn zak.
3 knikkers opgegooid, nog 7 in mijn zak.
4 knikkers opgegooid, nog 6 in mijn zak.
5 knikkers opgegooid, nog 5 in mijn zak.
6 knikkers opgegooid, nog 4 in mijn zak.
7 knikkers opgegooid, nog 3 in mijn zak.
8 knikkers opgegooid, nog 2 in mijn zak.
9 knikkers opgegooid, nog 1 in mijn zak.
10 knikkers opgegooid, nog 0 in mijn zak.

(H6.6)

Hetzelfde als opdracht 7, alleen gebruik je nu in plaats van een while-loop een do-while-loop. (H6.6)

Zet de volgende for-loop om in een while-loop die exact hetzelfde doet.

for(var i = 0; i > -42; --i)
{
    alert("Het kwadraat van "+i+" is: "+i*i);
}

(H6.7)

Zet de volgende while-loop om in een for-loop.

function f(x)
{
    return x*x - 2*x + 15;
}
�
var x = -5;
while(x < 6)
{
    alert("Op x = "+x+" is y: "+f(x));
    ++x;
}

(H6.7)

Gegeven zijn twee stukken code:

var telTot = prompt("Geef een getal van 1 t/m 100, en dan tel ik tot en met dat getal", '');
for(var i = 1; i <= telTot; ++i)
{
    alert(i);
}

En:

for(var i = 1; i <= prompt("Geef een getal van 1 t/m 100, en dan tel ik tot en met dat getal", ''); ++i)
{
    alert(i);
}

Waarom is de uitvoer van deze twee stukken niet helemaal hetzelfde?
En welk stuk code is fout? (H6.7)

Geef de waarde van de variabele i na de uitvoer van het volgende script:

var i;
for(i = 0; i <= 100; ++i)
{
    if(i*i < 25)
    {
        alert("Berichtje #"+i);
    }
    else
    {
        break;
    }
}

(H6.8)

Maak een script waar wordt gevraagd hoe vaak een berichtje met de tekst "Hallo wereld, voor de xe keer!" in een alert-box weergegeven moet worden. Waarbij x uiteraard wordt vervangen door het hoeveelste berichtje dit is.
Als de berichtjes allemaal weergegeven zijn wordt opnieuw gevraagd hoeveel berichtjes er moeten verschijnen. Dit gaat net zo lang door totdat de gebruiker stop invoert. Je mag er in deze opdracht vanuit gaan dat de gebruiker alleen maar geldige getallen van 0 of groter invoert (of natuurlijk de tekst stop).
Je mag maar 1 loop in deze opdracht gebruiken. (H6.8)