Start to program – Control flow

Inhoud

• Wat vooraf ging
• Beslissingen nemen
• Conditional Statements (if-statement)
• Iteratieve statements (herhalingen)

---

Wat vooraf ging

In een vorige post heb ik het een eerste keer gehad over de anatomie van een programma.

De bouwsteentjes waarmee een programma gebouwd worden. We hebben kennis gemaakt met statement, commentaar, bits en bytes, variabelen, berekeningen, functies,…

Maar deze bouwsteentjes dienen ook in een logische volgorde geplaatst om uw programma correct te laten werken. Deze logische volgorde wordt ook de control flow genoemd.

Control flow slaat op de (niet-lineaire) volgorde van uitvoering van de instructies in een computerprogramma. Control flow wordt meestal bepaald door het gebruik van besturingsstructuren zoals lussen (while, for), beslissingsstructuren (if, case) en het aanroepen van functies.

De basis voor de control flow is ons algoritme. U weet wel, het algoritme dat het resultaat was van computationeel denken.

We gaan opnieuw werken met App lab van code.org.

Log u in op App lab (eventueel Game lab) en we kunnen verder gaan met te leren programmeren.

---

Beslissingen nemen

In het dagelijks leven doen we het constant, beslissingen nemen. Als een bepaalde conditie vervult is dan… anders…. Als het regent dan nemen we de auto anders gaan we per fiets.

In een computerprogramma is het niet anders. Ook hier zullen heel vaak beslissingen genomen dienen te worden. De beslissingen worden genomen naargelang de uitkomst van een vergelijking (een conditie) waar is of onwaar is. Is deze vergelijking waar, dan gaat het programma de Waar-kant uit, anders, de vergelijking is onwaar, dan gaat het de Onwaar-kant uit.

Beslissingen worden genomen door middel van programmeercode gebruikmakend van Conditional Statements.

Merk de symboliek op:

• Een ovaal voor Starten en Stoppen van het programma/script.
• Een parallellogram voor invoer en uitvoer.
• Een rechthoek voor een proces, verwerking/bewerking.
• Een ruit start een beslissing.
• Een beslissing heeft een Ja-kant (waar) en een Nee-kant (onwaar).

Boolean expressie

Een boolean expressie is een expressie (een stelling) die enkel de uitkomst waar (true) of onwaar (false) kan hebben.

Bijvoorbeeld:

3 < 2

Dit is een boolean expressie want het antwoord is onwaar.

De conditie/vergelijking

De beslissing bestaat uit een conditie/vergelijking en is ene booleaanse expressie. De uitkomst van de vergelijking is dus ofwel Waar (true) ofwel Onwaar (false).

Een conditie kan ook uit meerdere vergelijkingen bestaan. Meerdere vergelijkingen worden aan mekaar verbonden door logische operatoren.

Vergelijkingsoperatoren

Omdat Javascript een aantal operatoren kent die C# (de andere programmeertaal waar ik me op focus) niet heeft heb ik hier (uitzonderlijk) een afzonderlijke kolom voorzien voor beiden.

Betekenis	C#	Javascript
Is gelijk aan	"=="	"=="
Is niet gelijk aan	!=	!=
Is kleiner dan	<	<
Is groter dan	>	>
Is kleiner dan of gelijk aan	<=	<=
Is groter dan of gelijk aan	>=	>=
Is gelijk aan en van hetzelfde type		"==="
Is niet gelijk aan of niet van hetzelfde type		!==

Opmerking: de “” rond “==” en “===” staan er enkel om een foutmelding van WordPress te omzeilen, zij moeten in uw programmeercode worden weggelaten!

Getallen met tekst vergelijken

• Indien een getal met een tekst vergeleken wordt, wordt de tekst eerst geconverteerd naar een getal.
• Als de conversie lukt dan worden de twee getallen vergeleken.
• Als de conversie niet lukt dan levert dit een NaN-waarde op en is de vergelijking altijd false.
• De conversie van een lege string (“”) levert de waarde 0 op.
• Strings worden alfabetisch vergeleken.

Voorbeelden

Vergelijking	Javascript	C#
2<12	true	true
7<=12	true	true
5==8	false	false
5=="5"	true	Niet mogelijk in C#
5===5	true	Niet mogelijk in C#
5==="5"	false	Niet mogelijk in C#
5!=5	false	false
5!=8	true	true
2<"12"	true	Niet mogelijk in C#
2<"A12"	false	Niet mogelijk in C#
2<"Jan"	false	Niet mogelijk in C#
0==""	true	Niet mogelijk in C#
0 == " " (spatie)	true	Niet mogelijk in C#
1 == " " (spatie)	false	Niet mogelijk in C#
"A" < "B"	true	Niet mogelijk in C#
"Aa" < "B"	true	Niet mogelijk in C#
"BA" < "B"	false	Niet mogelijk in C#

---

Conditional Statements (if-statement)

Conditional statements worden gebruikt om acties uit te voeren op basis van het al dan niet waar zijn van een bepaalde conditie.

JavaScript kent de volgende conditional statements:

• Gebruik if om een Block statement uit te voeren indien een bepaalde conditie waar is.
• Gebruik else om een Block statement uit te voeren indien een bepaalde conditie onwaar is.
• Gebruik else if om een nieuwe conditie te testen indien de vorige conditie onwaar was.
• Gebruik switch om verschillende alternatieve blokken aan te bieden naargelang de waarde van een conditie (variabele). Dit is een speciale schrijfwijze van het if-statement dat nogal programmeertaal gebonden is en dat ik hier niet ga behandelen.

if-statement

Gebruik if() om een Block statement uit te voeren indien een bepaalde conditie waar is.

if(conditie){
Statements indien waar;
}

else-statement

Gebruik else om een Block statement uit te voeren indien een bepaalde conditie onwaar is. Het else-statement kan niet zonder het if-statement!

if(conditie){
Statements indien waar;
}
else{
Statements indien onwaar;
}


else if-statement

Gebruik else if() om een nieuwe conditie te testen indien de vorige conditie onwaar was.

Of anders gezegd, soms hebt u geen 2 opties (bv. positief of negatief) maar hebt u meer dan 2 opties (bv. positief, negatief of nul). Dit betekent dat er meerdere condities (en dus ook if’en) zullen zijn (bv. eerst nagaan of het getal positief is, indien het niet positief is nagaan of het nul is en indien het niet positief of nul is zal het negatief zijn).

Strikt genomen kan je stellen dat er steeds 1 conditie (if) minder is dan het aantal opties.

if(conditie 1){
Statements indien conditie 1 waar;
} else if(conditie 2){
Statements indien conditie 1 onwaar is maar conditie 2 wel waar is;
}
else{
Statements indien conditie 1 onwaar is en conditie 2 ook onwaar is;
}


Voorbeeld: positief, negatief of nul?

Versie 1 – if-statement

Wat hebben we nodig:

• Een invoervak/tekstvak om het getal in te voeren met de id “invoer”.
• Een knop/button. Omdat er maar 1 knop is kunt u de id “button1” behouden.
• Een label voor de uitvoer met de id “uitvoer”.
• Voeg bovenaan een label met voor een titel toe (font size 20).

Het scherm kan er als volgt uitzien.

Voeg nu een Click-event toe aan de button (hierboven staat hoe u dit kunt doen). De programmeercode wordt toegevoegd binnen deze event.

De programmeercode ziet er als volgt uit.

onEvent("button1", "click", function(event) {
  //invoer
  var getal = getNumber("invoer");

  //bewerking en uitvoer
  if (getal >= 0) {
    setText("uitvoer", "Het getal is positief.");
  }
});

Het te bewerken getal wordt opgevraagd. Merk op dat u een getal kunt opvragen met de functie getnumber(id).

var getal = getNumber("invoer");

Controleer of het getal groter dan of gelijk is aan 0.

if(getal >= 0)

Als dit waar is (het getal is groter) “set” dan een gepaste uitvoer.

setText("uitvoer", "Het getal is positief.");

Versie 2 – else statement

De code wordt nu:

onEvent("button1", "click", function(event) {
  //invoer
  var getal = getNumber("invoer");

  //bewerking en uitvoer
  if (getal >= 0) {
    setText("uitvoer", "Het getal is positief.");
  } else {
    setText("uitvoer", "Het getal is negatief.");
  }

});

Versie 3 – else if-statement

Hiervoor dient een bijkomende if toegevoegd. 3 opties betekent immers 2 keer if. Dit gebeurt via een else if-statement.

De code wordt nu:

onEvent("button1", "click", function(event) {
  //invoer
  var getal = getNumber("invoer");

  //bewerking en uitvoer
  if (getal > 0) {
    setText("uitvoer", "Het getal is positief.");
  } else if(getal < 0){
    setText("uitvoer", "Het getal is negatief.");
  }
  else{
    setText("uitvoer", "Het getal is nul.");
  }

});

Merk op dat er ook andere benaderingen mogelijk zijn die even goed zijn (bv. eerst testen op het 0 zijn).

Logische operatoren

Logische operatoren combineren meerdere condities via de And-operand, de Or-operand of de XOR-operant of voeren bewerkingen uit op een conditie via de NOT-operand. Het resultaat is opnieuw een Boolean (waar of onwaar).

Betekenis	Operator
NOT	!
AND (en)	&&
OR (of)	||
XOR	^

De uitkomst van vergelijkingen met logische operatoren

Vergelijking 1	Vergelijking 2	1 AND 2 (1 && 2)	1 OR 2 (1 || 2)	NOT 1 (!1)	1 XOR 2 (1 ^ 2)
true	true	true	true	false	false
true	false	false	true	false	true
false	true	false	true	true	true
false	false	false	false	true	false

Of anders gezegd:

• Vergelijkingen combineren met AND-operator is enkel true als alle vergelijkingen true zijn.
• Vergelijkingen combineren met OR-operator is true van zodra er één vergelijking true is.

Je zou dus kunnen stellen dat de AND-operator strikter/strenger is dan de OR-operator, je krijgt minder snel een true.

Weet ook dat alles wat u combineert met de AND-operator ook kan gecombineerd worden met de OR-operator. U moet dan wel de condities omkeren!

Bijvoorbeeld, een Getal moet liggen tussen 0 en 20. U kunt nu de conditie opbouwen met de AND-operator:

Getal >= 0 && Getal <= 20;

Dezelfde conditie met de OR-operator wordt nu:

Getal < 0 || Getal > 20

De true-kant en de false-kant worden nadien ook omgedraaid!

Merk ook op dat u de condities moet volledig typen. Het onderstaande is dus FOUT:

getal < 0 || > 20

Voorbeelden

Vergelijking	Resultaat
5 < 10 && 3 > 1	true
5 < 10 && 1 > 3	false
5 < 10 || 1 > 3	true
true && (3 == 4)	false
false || (3 == 4)	false
Een variabele Getal moet groter zijn dan 0	Getal > 0
Een variabele Getal moet groter dan of gelijk zijn aan 0	Getal >= 0
Een variabele Tekst mag niet leeg zijn	Tekst != “”
Een variabele Getal moet liggen tussen 0 en 20	(Getal >= 0) && (Getal <= 20)
Een variabele Teken moet gelijk zijn aan “a” of “c”	(Teken == “a”) || (Teken == “c”)

Bitwise operatoren

Naast de Logische operatoren bestaan er ook nog zogenaamde Bitwise operatoren. Aangezien we deze niet meteen in praktijk gaan gebruiken verwijs ik u graag voor meer informatie door naar:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators.

Voorbeeld: geslaagd of niet geslaagd?

Versie 1 – meerdere condities

Het scherm in App lab kan er ongeveer als volgt uitzien.

Deze oefening bevat 2 problemen die wat extra aandacht verdienen.

De berekening van het willekeurige getal.
In een vorige post hebt u reeds gezien hoe u een willekeurig getal kunt genereren. Ik verwijs naar deze post voor de uitleg en beperk me hier tot de uiteindelijke formule.
Math.floor(Math.random() * (100 + 1))

of, in App Lab:

randomNumber(0,100)

De drievoudige conditie.
De cursist is pas geslaagd als hij:

• minimaal 50 % haalt,
• niet meer dan 1 tekort heeft,
• niet meer dan 2 keer onwettig afwezig was.

Dit vertaalt zich in onderstaande samengestelde condite:

(Percentage >= 50) && (AantalTekorten <= 1) && (AantalAfwezigheden <= 2)

De rest van de programmeercode zou moeten duidelijk zijn.

Voeg nu een Click-event toe aan de button en voeg binnen dit Click-event onderstaande code toe.

onEvent("button1", "click", function(event) {
    //invoer
    var Percentage = Math.floor(Math.random() * (100 + 1));
    var AantalTekorten = getNumber("invoerTekorten");
    var AantalAfwezigheden = getNumber("invoerAfwezigheden");
    var Resultaat;

    //Bewerkingen
    if((Percentage >= 50) && (AantalTekorten <= 1) && (AantalAfwezigheden <= 2)){
      Resultaat = "De cursist is geslaagd";
    }
    else{
      Resultaat = "De cursist is niet geslaagd.";
    }

    //Uitvoer
    setText("uitvoerPercentage", "Het behaalde percentage is: " + Percentage + "%");
    setText("uitvoerResultaat", Resultaat);
});

Versie 2 – meerdere opties

De code wordt nu:

onEvent("button1", "click", function(event) {
  //invoer
  var Percentage = randomNumber(0,100);
  var aantalTekorten = getNumber("invoerTekorten");
  var aantalAfwezigheden = getNumber("invoerAfwezigheden");
  var Resultaat;

  //Bewerkingen
  if((Percentage >= 50) && (aantalTekorten <= 1) && (aantalAfwezigheden <= 2)){ 
     if(Percentage >= 90){
         Resultaat = "De cursist is geslaagd met grote onderscheiding.";
       } else if(Percentage >= 70){
         Resultaat = "De cursist is geslaagd met onderscheiding.";
       } else{
         Resultaat = "De cursist is geslaagd met voldoening.";
       }
    setProperty("uitvoerResultaat","background-color",rgb(0,255,0));
  }
  else{
    Resultaat = "De cursist is niet geslaagd.";
    setProperty("uitvoerResultaat","background-color",rgb(255,0,0));
  }

  //Uitvoer
  setText("uitvoerPercentage", "Het behaalde percentage is: " + Percentage + "%.");
  setText("uitvoerResultaat", Resultaat);
});

Merk op hoe de kleuren worden toegekend via SetProperty():

setProperty("uitvoerResultaat","background-color",rgb(0,255,0));

De eerste parameter is het object “uitvoerResultaat”, dan volgt de eigenlijke property “background-color” en tenslotte wordt de kleur gezet via rgb(0,255,0) wat staat voor rood, groen en blauw met een minimale waarde van 0 en een maximale waarde van 255. rgb(0,255,0) is dus zuiver groen en rgb(255,0,0) is zuiver rood.

Een alternatief

Of een alternatieve benadering via de OF:

onEvent("button1", "click", function(event) {
    //invoer
    var Percentage = Math.floor(Math.random() * (100 + 1));
    var AantalTekorten = getNumber("invoerTekorten");
    var AantalAfwezigheden = getNumber("invoerAfwezigheden");
    var Resultaat;

    //Bewerkingen
    setProperty("uitvoerResultaat","background-color",rgb(0,255,0));
    if((Percentage < 50) || (AantalTekorten > 1) || (AantalAfwezigheden > 2)){
      Resultaat = "De cursist is niet geslaagd.";
      setProperty("uitvoerResultaat","background-color",rgb(255,0,0));
    }
    else if(Percentage < 70){
      Resultaat = "De cursist is geslaagd met voldoening.";
    }
    else if(Percentage < 90){
      Resultaat = "De cursist is geslaagd met onderscheiding.";
    }
    else {
      Resultaat = "De cursist is geslaagd met grote onderscheiding.";
    }

    //Uitvoer
    setText("uitvoerPercentage", "Het behaalde percentage is: " + Percentage + "%");
    setText("uitvoerResultaat", Resultaat);
});

Wellicht moet u de hoogte van het label “uitvoerResultaat” aanpassen naar een hoogte van ongeveer 35 om de tekst volledig weer te geven.

---

Iteratieve statements (herhalingen)

Een iteratie is een herhaling. Ook wel eens een lus of in het Engels een loop genoemd.

Een keuze (if) wordt telkens maar éénmaal gecontroleerd. Indien de conditie waar is worden statements aan de waar-kant uitgevoerd, indien de conditie onwaar is worden de statements aan de onwaar-kant uitgevoerd.

Een herhaling herhaalt een blok met statements zolang een conditie waar is.

De meeste programmeertalen, en ook JavaScript, kennen 3 vormen van herhalingen.

• while()
• do … while()
• for()

while()

De while()-lus herhaalt een blok met statements zolang een conditie waar is.

while(conditie){
Statements zolang waar;
}


De schematische, algoritmische voorstelling voor de while() is:

Voorbeeld while()

De code is:

//Invoer
var Getal = 1;
var Tekst = "";

//Verwerken
while (Getal <= 10) {
	Tekst += Getal + " - ";
	Getal++;
}

//Uitvoer
write(Tekst)

do… while()

De do…while() is een variant op de while()-lus. Het verschil is dat bij een do…while() de statements, binnen de herhaling eerst éénmaal worden uitgevoerd voor de conditie getest wordt. Nadien worden de statements herhaald zolang de condite waar is.

do {
Statements zolang waar;
} while(conditie)


De schematische, algoritmische voorstelling voor de do … while() is:

Voorbeeld do…while()

De code is:

// invoer
var Getal = 1;
var Tekst = "";

//Verwerken
do{
	Tekst += Getal + " - ";
	Getal++;
} while (Getal <= 10)

//Uitvoer
write(Tekst)

Belangrijk!

Binnen de while()-lus (en de do…while-lus) moet de waarde die in uw conditie vergeleken wordt gewijzigd worden. Wijzigt deze waarde niet tijdens de herhaling, dan blijft ze hetzelfde en zal de lus zich blijven herhalen. Wanneer de waarde die de conditie de status waar bezorgde, tijdens de herhaling niet wijzigt dan blijft de conditie de status waar behouden en… de lus herhaalt zich zolang de conditie waar is.

Dit zorgt ervoor dat uw programma “hangt”.

In bovenstaand voorbeeld wordt de geteste waarde Getal gewijzigd door deze binnen de herhaling te verhogen met 1 met Getal++.

Opdracht

Kunt u dat vervelende ” – ” achteraan wegwerken?

For()

De for()-lus herhaalt een blok met statements zolang een conditie waar is. De for()-lus is eigenlijk een andere schrijfwijze voor de while()-lus en wordt hoofdzakelijk gebruikt indien het aantal maal dat de lus moet herhaalt worden vast ligt.

for(beginwaarde; conditie; verhoging){
Statements zolang waar;
}


Beginwaarde is een “teller” die de startwaarde toekent voor de lus start.

Conditie definieert de conditie voor de lus, namelijk zolang de condite waar is. De teller wordt gebruikt om de conditie te testen.

Verhoging wordt iedere keer op het einde van de lus uitgevoerd en verhoogt teller met een waarde.

De syntax meer in de praktijk ziet er als volgt bijvoorbeeld als volgt uit:

for(var Teller = 1; Teller <= 10; Teller++){
Statements zolang waar;
}

De schematische, algoritmische voorstelling voor de for() is identiek aan de while():

Voorbeeld for()

De code is:

// verwerking
var Tekst = "";

for (var Getal = 1; Getal <= 10; Getal++) {
	Tekst += Getal + " - ";
} 

//Uitvoer
write(Tekst)

---

Behandelde Basiscompetenties uit de module ICT Programmeren – Start to program

• IC BC228 – kent de verschillende principes en onderdelen op basis waarvan een programma kan opgebouwd worden
• IC BC237 – kan een eenvoudig programma wijzigen
• IC BC239 – kan bij het programmeren een juiste logica volgen
• IC BC240 – kan een eenvoudig programma maken
• IC BC242 – kan een programma uittesten
• IC BC243 – kan een programma documenteren
• IC BC352 – begrijpt het systeem en de functies die achter een programma zitten

//life motto
if(sad() == true){
sad.stop();
beHappy();
}