If else

See the Pen if else by Frank Los (@franklosdus) on CodePen.

In de vorige les verdween de cirkel uit beeld als je op de knop bleef drukken. En hij kwam nooit meer terug.

 

Dus je moet iets hebben waarmee je in de gaten kan houden of de cirkel nog wel in beeld is.

 

En je raadt het al. Daarvoor gebruiken we een if else statement:

 

if(circ.x < stageW){

circ.x+=50;

}else{

circ.x = 0;

}

 

Je bekijkt of de situatie aan jouw voorwaarde voldoet. Die voorwaarde zet je tussen haakjes. In dit geval wil je niet dat de x-positie van de cirkel groter is dan de breedte van de stage. Dus check je dat met een kleiner-dan-teken

 

Als de cirkel nog niet zover is (if) mag hij 50 pixels naar rechts. (eerste codeblok)

ANDERS (else) moet hij terug naar 0 (tweede codeblok)

 

Boolean

In de volgende opdracht gaan we aan de slag met een nieuw begrip: een boolean. Een boolean is een soort lampje. Hij kan aan of uit. En dat is het.

 

Als het lampje aan is heet dat true
Als het lampje uit is heet dat false

 

In het if-else-statement hierboven kijken we al of een voorwaarde true is. We vragen aan de computer of de x-positie van de cirkel kleiner is dan de breedte van de stage. Als dat zo is komt de voorwaarde uit op true. Het is waar. En anders is het false. Dan is het niet waar.

 

Opdracht

We laten de richting van de beweging van de cirkel omdraaien als de cirkel de rand bereikt. Bovenaan worden al lets gedeclareerd. We zetten een nieuwe onder let stageH = frame.height; Dat is een mooie plek daarvoor. Zo hoog mogelijk in de scope. Dan vind je ze later gemakkelijk terug.

 

let naarRechts = true;

 

Als het programma begint willen we dat de cirkel naar rechts beweegt. Vandaar!

 

Vervang nu alle code binnen de functie moveCircle door deze code:

 

if(circ.x > stageW){

naarRechts = false;

}else if(circ.x<0){

naarRechts = true;

}

if(naarRechts){

circ.x += 50;

}else{

circ.x -= 50;

}

stage.update();

 

Else if

Je ziet dat ik in bovenstaande code else if gebruik. Op deze manier kun je net zoveel voorwaarden onder elkaar zetten als je wilt.

 

if(a){

opdracht1();

}else if(b){

opdracht2();

}else if(c){

opdracht3();

}

==

In bovenstaande code staat

 

if(naarRechts)

 

Dat kan hier omdat naarRechts true of false is.

Maar wat nou of je weten wilt of let aantal 3 is?

Dan gebruik je 2 is-tekens:

 

if(aantal == 2)

 

Pas op dat je inderdaad 2 is-tekens gebruikt!

Als je 1-is teken gebruikt verander je de waarde van de let.

 

===

Veel programmeurs gebruiken 3 is-tekens.

Dan controleer je niet alleen of de waarde hetzelfde is, maar ook het type van de waarde.

 

Met twee == is dit true: 3 == "3"

 

Met 3 === is dit false: 3 === "3" 

 

Je vergelijkt hier type Number (een nummer) met String (stukje tekst)

Javascript is slim genoeg om te weten dat "3" als getal hetzelfde is als 3.

Meer bekijken

Weer een blog van Frank Los

Ik deel graag mijn visie en projecten.
Dit soort berichten maandelijks in je mail?
Meld je dan hier aan.

illustratie kadootje

Ik geef gelijk ook een e-book cadeau met tips over goede uitleg!

Delen is fijn!

Wil je zelf uitblinken met visuele communicatie?

Bekijk dan mijn aanpak.

Wellicht wil je meer weten over mij.

illustratie van Frank Los
Frank Los
frank@weereenlos.nl06 430 466 58

TUSSEN DE OREN

uitleg die aankomt

Goede uitleg
is ontzettend lastig.

Deze tips helpen jou
keer op keer.
Download mijn gratis e-book
met poster!
illustratie van Frank Los
CookiesDisclaimerPrivacystatement