Leren en oefenen voor een theorietoets

Het if-statement

Het if-statement in JavaScript is een manier om je code te laten beslissen wat te doen op basis van bepaalde voorwaarden.
Het helpt je dus om verschillende acties uit te laten voeren afhankelijk van wat er gebeurt. 
In het voorbeeld dat we hier gaan bouwen gebruiken we de volgende situatie;

De context

Je hebt erg je best gedaan om goed te leren voor een proefwerk.
Alle leerstof is nog een keer goed doorgenomen en je hebt avonden zitten ploeteren op het maken van extra oefenopdrachten.
Thuis hebben je ouders je geholpen met overhoringen en en op school heeft de leraar je nog een keer extra uitleg gegeven.
Als het proefwerk gemaakt is en je het punt terugkrijgt zijn er 5 mogelijkheden.

  • Als het cijfer lager is dat 3, ben je very sad.
  • Anders als het cijfer hoger is dan 2 en lager dan 5, ben je a little sad.
  • Anders als het cijfer hoger is dan 4 en lager dan 7, ben just normal.
  • Anders als het cijfer hoger is dan 6 en lager dan 9, ben happy.
  • Anders ben je very happy.
 

Uitleg van de code

In JavaScript gebruiken we een if – else if – else statement om verschillende situaties te controleren en daar een passende actie op uit te voeren. In het voorbeeld hierboven wordt een afbeelding weergegeven op basis van het behaalde cijfer.

Hoe werkt het script?

  • De variabele punt bevat het cijfer dat je hebt gehaald voor een toets.
  • De eerste if-voorwaarde controleert met punt<3 of het cijfer
    lager is dan 3.
    • Is dit waar (true)?
      Dan wordt de afbeelding very_sad.jpg toegewezen en stopt het script met verder controleren.
    • Is dit niet waar (false)?
      Dan gaat het script door naar de volgende else if.
  • Elke else if bevat een nieuwe voorwaarde. Bijvoorbeeld:
    • punt>2 && punt<5
      Hier worden twee voorwaarden gecontroleerd.
      • De eerste controleert of punt groter is dan 2.
      • De tweede controleert of punt kleiner is dan 5.
      • Omdat beide voorwaarden met && (EN-operator) verbonden zijn, moeten beide waar zijn om deze code uit te voeren.
  • Dit proces herhaalt zich totdat een van de voorwaarden waar is. Zodra dat gebeurt, wordt de bijbehorende afbeelding toegekend en stopt het script.
  • Als geen van de if- of else if -voorwaarden waar is, wordt de else uitgevoerd. Dit is de “vangnet”-optie en wordt alleen uitgevoerd als alle andere voorwaarden onwaar zijn.

Uiteindelijk wordt de gekozen afbeelding met $(“#resultaat”).html(face); in de webpagina geplaatst.

If in werking?

Je kunt experimenteren door punt verschillende waarden te geven en te bekijken welke afbeelding wordt weergegeven. Klik op een knop om een nieuwe waarde aan de variabele punt toe te kennen en probeer te begrijpen waarom een bepaalde afbeelding wordt gekozen door de code stap voor stap te volgen!

				
					if(punt <3){
    face = $("<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-src='images/very_sad.jpg'>");
}else if(punt>2 && punt <5){
    face = $("<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-src='images/a_little_sad.jpg'>");
}else if(punt>4 && punt <7){
    face = $("<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-src='images/just_normal.jpg'>");
}else if(punt>6 && punt<9){
    face = $("<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-src='images/happy.jpg'>");
}else{
    face = $("<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-src='images/very_happy.jpg'>");
}
$("#resultaat").html(face);