Programmeren in JavaScript/Conditionele statements

Conditionele of voorwaardelijke statements zijn essentieel in een programma. Ze stellen je in staat om te bepalen of je een stukje code uitvoert of niet. Of je kunt in het ene geval dat stukje code uitvoeren en in het andere geval een ander stukje code uitvoeren. Bijvoorbeeld wanneer een gebruiker een man is kun je op het scherm laten tonen "Hallo meneer!" en wanneer het een vrouw is kun je "Hallo mevrouw!" tonen.

Het if-statement

De gewone if

De gewone if betekent dat er wordt gezien of iets waar is en als het waar is wordt er iets uitgevoerd. Zoals in het volgende voorbeeld.

JavaScript-code: De gewone if

var x = 5;
var y = 5;
if(x == y){
	document.write("De twee getallen zijn gelijk.");
}

In dit stukje code vergelijken we twee getallen, x en y. Als de twee getallen gelijk zijn wordt wat er in de if-blok (tussen de accolades) staat uitgevoerd. Was de waarde van y nu 10, dan werd het niet uitgevoerd. Een if-statement begint altijd met het woordje if en na de if komen twee haakjes. In die twee haakjes moet een voorwaarde komen. Die voorwaarde kan een vergelijking zijn of een boolean. In dit geval is het een vergelijking. Als de vergelijking klopt dan geeft die true terug. Wanneer je te maken hebt met een boolean, moet de boolean de waarde true hebben als je wilt dat het wordt uitgevoerd.

JavaScript-code: De gewone if

var waar = true;
if(waar){
	//Voer de code uit bij 'true'.
}

if ... else

if ... else maakt het mogelijk om code uit te voeren als er niet wordt voldaan aan de voorwaarde van de if.

JavaScript-code: De gewone if

var a = 5;
var b = 10;
if(a == b){
	document.write("De twee getallen zijn gelijk.");
} else {
	document.write("De twee getallen zijn niet gelijk.");
}

Met als uitvoer:

De twee getallen zijn niet gelijk.

if ... else if ... else

Deze structuur maakt het mogelijk om te bepalen welke van 3 of meer blokjes code er wordt uitgevoerd.

JavaScript-code: if ... else if ... else

if(geslacht == "Man"){
	document.write("Hallo meneer!");
} else if(geslacht == "Vrouw"){
	document.write("Hallo mevrouw!");
} else {
	document.write("Hallo!");
}

else if moet net zoals if een voorwaarde bevatten. Zoals er al werd gezegd, kan met deze structuur ook uit meer dan 3 blokjes code worden bepaald welke er wordt uitgevoerd. Dit kan worden gedaan door de else if meerdere malen te gebruiken.

JavaScript-code: if ... else if ... else

if(x == 1){
	document.write("X is één waard.");
} else if(x == 2){
	document.write("X is twee waard.");
} else if(x == 3){
	document.write("X is drie waard.");
} else if(x == 4){
	document.write("X is vier waard.");
} else if(x == 5){
	document.write("X is vijf waard.");
} else if(x == 6){
	document.write("X is zes waard.");
} else if(x == 7){
	document.write("X is zeven waard.");
} else if(x == 8){
	document.write("X is acht waard.");
} else if(x == 9){
	document.write("X is negen waard.");
} else if(x == 10){
	document.write("X is tien waard.");
} else {
	document.write("X is meer dan tien of minder dan 1 waard.");
}

Je kunt oneindig veel keer else if gebruiken. Ook belangrijk om te weten is dat de if geen gelijkaardige voorwaardes moeten bevatten zoals in de voorbije voorbeelden. Wat we daarmee bedoelen is dat if bijvoorbeeld een voorwaarde in de stijl van "geslacht == "Man"" mag hebben, de else if mag dan bijvoorbeeld een voorwaarde hebben zoals "x == 10" en een andere else if mag dan weer een boolean hebben als voorwaarde.

De switch

De switch is een goed alternatief voor het if ... else if ... else structuur. Voornamelijk omdat het veel overzichtelijker overkomt. De switch kijkt één keer naar een variabele en vervolgens gaat het een hele lijst van mogelijke waarden af. We nemen het voorbeeld van het vorige stukje en veranderen het in een switch:

JavaScript-code: switch

switch(x){
	case 1: document.write("X is één waard."); break;
	case 2: document.write("X is twee waard."); break;
	case 3: document.write("X is drie waard."); break;
	case 4: document.write("X is vier waard."); break;
	case 5: document.write("X is vijf waard."); break;
	case 6: document.write("X is zes waard."); break;
	case 7: document.write("X is zeven waard."); break;
	case 8: document.write("X is acht waard."); break;
	case 9: document.write("X is negen waard."); break;
	case 10: document.write("X is tien waard."); break;
	default: document.write("X is meer dan tien of minder dan één waard.");
}

Een switch begint natuurlijk altijd met het woord switch. Tussen de haakjes komt de variabele of een ander soort waarde waarmee je de lijst van mogelijkheden wilt afgaan. Iedere case staat voor zo'n mogelijkheid en daarachter komt de mogelijke waarde te staan. Daarachter komt de code staan die wordt uitgevoerd als het overeenkomt. Je moet wel heel goed opletten voor de break. Die moet altijd komen na de code die zou moeten worden uitgevoerd. De break zorgt ervoor dat je meteen uit de switch stapt. Dit is vooral belangrijk voor de 'default. Wanneer je geen break plaatst wordt wat er achter de default staat ook uitgevoerd. De default is de else van de switch, komt er geen mogelijkheid overeen met de waarde van de variabele dan wordt de code achter de default uitgevoerd.