Start to program – Control flow

print

Inhoud


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.


Event-drive ontwerpen

Vele moderne programma’s, zoals vele mobile apps, werken event-driven. Bij event-dreven programmeren wordt de control flow in eerste instantie bepaald door de events/gebeurtenissen veroorzaakt (getriggerd) door het programma zelf of door de gebruiker.

Ik herneem hier even het stukje rond event-driven dat ik al eens eerder geschreven heb.

Events/gebeurtenissen zijn acties die kunnen gebeuren of uitgevoerd worden tijdens het werken met het programma. Voorbeelden van events zijn:

  • de pagina wordt geladen
  • de pagina is geladen
  • de gebruiker klikt op een knop
  • de gebruiker beweegt de muis over een object
  • de gebruiker typt een toets in

Bij event-driven programmeren wordt de control flow, de opeenvolging van de uit te voeren instructies, van het programma bepaald door de volgorde waarin de events/gebeurtenissen plaatsvinden. De instructies die horen bij het klikken op een specifieke knop worden pas uitgevoerd indien er daadwerkelijk op die specifieke knop gedrukt wordt.

Programma’s die veel interactie vragen van de gebruiker zoals interactieve websites, mobiele apps, eenvoudige spelletjes zijn vaak event-driven. Deze programma’s beschikken dan ook vaak over een geschikte gebruikersvriendelijke GUI (Grafische User Interface).

Bij event-driven ontwerpen bouwt u (vaak) eerst de GUI en bedenkt u welke events er kunnen plaatsvinden of nodig zijn (let op, de GUI wordt gebouwd met de nodige events in gedachte, zo zal u een knop toevoegen aan de GUI juist me de bedoeling om er op te kunnen klikken en niet andersom. U gaat geen knop plaatsen omdat die er mooi staat en u vervolgens de vraag stellen wat er zou kunnen gebeuren als u op deze knop zou drukken). Vervolgens programmeert u elk van deze events.

Een event toevoegen in App lab

Voeg een Button (knop) toe aan het ontwerpscherm. Geef de Button de tekst “OK”. Merk op dat u nog andere eigenschappen (properties) kunt wijzigen. Een belangrijke is de id, die u voorlopig op button1 mag laten staan. De id wordt gebruikt om het object te identificeren, een naam te geven. Deze id wordt in de programmeercode gebruikt telkens u verwijst naar het specifieke object. Omdat er maar 1 Button is, is de id “Button1” aanvaardbaar.

Met de knop geselecteerd klikt u op het tabblad Events. U kunt maar één event toevoegen, namelijk een Click-event, deze wordt uitgevoerd (getriggerd) als de gebruiker op de knop klikt.

De aangemaakte code ziet er als volgt uit (in blokjes).


De aangemaakte programmeercode is de volgende:

onEvent("button1", "click", function(event) {
  console.log("button1 clicked!");
});
  • Er wordt een functie aangeroepen onEvent() (dit is een functie van App lac).
  • Deze functie heeft 3 parameters:
  1. De naam van het object die de event triggert: hier “button1”.
  2. De event die wordt getriggerd: hier click.
  3. De derde parameter is opnieuw een functie, de eigenlijke event: function(event){}. Deze functie wordt een callback function genoemd, een functie die aangeroepen wordt door de vorige functie en waarbij het resultaat van de vorige functie als parameter wordt meegegeven aan de callback function (meer hierover als we het hebben over functies).
  • De voorlopige uitvoer van de event is het schrijven van de tekst “button1 clicked!” op de console.

Zo, nu u weet hoe een event toe te voegen kunnen we code toevoegen binnen deze event.


Invoeren, verwerken en uitvoeren

De control flow is in essentie vaak te herleiden tot volgende 3 stappen:

  1. Gegevens invoeren.
  2. De ingevoerde gegevens verwerken tot informatie.
  3. Informatie uitvoeren.

Als flow chart (zie algoritmes) zie dit er als volgt uit.

Wat is informatie?

Informatie kan gezien worden als het resultaat van verwerkte gegevens.

Bijvoorbeeld:

45 is een gegeven (of data). Maar waar staat die 45 nu eigenlijk voor?

Na verwerking van het gegeven 45 kan bv. blijken dat de 45 staat voor behaalde punten en dat dit onvoldoende is om geslaagd te zijn.

Onvoldoende om geslaagd te zijn is dan de informatie die gehaald is uit het gegeven 45.

Invoer

Invoer is afhankelijk van de ontwikkelomgeving maar veel voorkomende invoerobjecten zijn:

  • Tekstvakken
  • Keuzelijsten
  • Keuzerondjes
  • Keuzevakjes
  • Datepickers
  • Sliders

Naargelang de ontwikkelomgeving kunnen deze ook anders genoemd worden.

In App lab kunt u ingevoerde tekst opvragen met de functie:

getText(id)

Hierbij is id de waarde van de eigenschap id van het object (tussen “”) dat de tekst bevat .

Uitvoer

Uitvoer is afhankelijk van de ontwikkelomgeving maar veel voorkomende invoerobjecten zijn:

  • Labels
  • Canvas

Naargelang de ontwikkelomgeving kunnen deze ook anders genoemd worden.

In App lab kunt u tekst uitvoeren met de functie:

setText(id, text)

Hierbij is id de id de waarde van de eigenschap id van het object (tussen “”) waar u de tekst wilt plaatsen, de parameter text bevat dan de eigenlijke tekst, of de variabele die de tekst bevat.

Uw eerste app: BTW berekenen

  • De gebruiker moet een getal invoeren.
  • Uit een keuzelijst het gewenste BTW-percentage selecteren.
  • Na het klikken op een knop/button moet de berekende BTW getoond worden.

Ik herneem een voorbeeld uit een vorige post waarin we reeds de BTW berekend hebben via aan functie.

De functie BTW():

function BTW(bedrag, perc) 
{ 
     var resultaat = bedrag * perc / 100; 
     return resultaat ; 
}

Dit was de code voor het aanroepen van de functie BTW() zonder specifieke invoer (maar via variabelen) hier uitgebreid met commentaar die duidt wat de invoer, berekening en uitvoer is:

var bedrag;
var percentage;
var BTWbedrag;

//Invoer
bedrag = 100;
percentage = 21;

//Berekening
BTWbedrag = BTW(bedrag, percentage);

//Uitvoer
write(BTWbedrag);

Laten we dit nu omzetten naar een bruikbare app.

Maak eerst het onderstaande scherm aan. Gebruik hiervoor het ontwerpscherm van App lab. Het hoeft niet perfect te kloppen maar een paar tips.

  • De titel, een label, heeft een font size van 20 px.
  • Het tekstvak (Text input) naast het label “Bedrag zonder BTW” heeft de id “invoerBedrag”.
  • De keuzelijst (Dropdown) naast het label “Percentage” heeft de id “invoerPercentage”. De keuzelijst heeft 4 opties: 0, 6, 12, 21.
  • De eigenschappen van de label waar de uitvoer moet komen heeft de id “uitvoer”. De andere eigenschappen van dit object ziet u in het afdrukvoorbeeld.

  • Voeg vervolgens een Click-event toe aan de Button (zoals hierboven beschreven).
  • Kopieer de functie BTW() (zie hierboven) onder de code van het Click-event.
  • Voeg de code met de aanroep van de BTW() (zie ook hierboven) toe binnen het Click-event ter vervanging van de code console.log("button1 clicked!");.

De programmeercode moet er nu als volgt uitzien.

onEvent("button1", "click", function(event) {
    var bedrag;
    var percentage;
    var BTWbedrag;
    
    //Invoer
    bedrag = 100;
    percentage = 21;
    
    //Berekening
    BTWbedrag = BTW(bedrag, percentage);
    
    //Uitvoer
    write(BTWbedrag);
});

function BTW(bedrag, perc) 
{ 
     var resultaat = bedrag * perc / 100; 
     return resultaat ; 
}

Nu moet de specifieke invoer nog worden toegevoegd.

Voor de invoer.

In plaats van vaste waarden aan variabelen toe te kennen zoals:

bedrag = 100;

vraagt u het specifieke bedrag op dat staat in het tekstvak “invoerBedrag”. U doet dit met de functie getText(id):

bedrag = getText("invoerBedrag");

In plaats van:

percentage = 21;

vraagt u het specifieke percentage op dat u selecteert in de keuzelijst “invoerPercentage”. U doet dit eveneens met de functie getText(id):

percentage = getText("invoerPercentage");

Voor de uitvoer.

In plaats van het BTWbedrag gewoon op het scherm te schrijven met:

write(BTWbedrag);

wordt het BTWbedrag nu weggeschreven in het label met de id “uitvoer”. U doet dit met de functie setText(id, Text):

setText("uitvoer", BTWbedrag);

De code wordt nu:

onEvent("button1", "click", function(event) {
    var bedrag;
    var percentage;
    var BTWbedrag;
    
    //Invoer
    bedrag = getText("invoerBedrag");
    percentage = getText("invoerPercentage");
    
    //Berekening
    BTWbedrag = BTW(bedrag, percentage);
    
    //Uitvoer
    setText("uitvoer", BTWbedrag);
});

function BTW(bedrag, perc) 
{ 
     var resultaat = bedrag * perc / 100; 
     return resultaat ; 
}


Zo, u hebt uw eerste, heel eenvoudig, maar toch, programmaatje geschreven.

Opdracht

Pas het programmaatje nu nog verder zelf aan zodat u ook het Bedrag met BTW kunt weergeven.

Maar let op, u zou wel eens een rare uitkomst kunnen krijgen. Probeer te achterhalen wat de oorzaak is en probeer er een oplossing voor te vinden. Een oplossing die in alle mogelijke situaties werkt mag u nu nog niet verlangen, maar u dient wel de juiste oplossing te krijgen.

Als u wilt kunt u de uiteindelijke oplossing delen via uw favoriete sociale media.


Beslissingen nemen

 

In het dagelijks leven doen we het constant, beslissingen nemen. Als een bepaalde conditie vervult is dananders…. 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.

BetekenisC#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

VergelijkingResultaat
2<12true
7<=12true
5==8false
5=="5"true
5===5true
5==="5"false
5!=5false
5!=8true
2<"12"true
2<"A12"false
2<"Jan"false
0==""true
0 == " " (spatie)true
1 == " " (spatie)false
"A" < "B"true
"Aa" < "B"true
"BA" < "B"false

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;
}

Voor ik over ga naar een paar voorbeelden eerst even stil staan bij logische operatoren!

Logische operatoren

BetekenisOperator
Logische NOT!
Logische EN&&
Logische OF||

De uitkomst van vergelijkingen met logische operatoren

Vergelijking 1Vergelijking 21 AND 2 (1 && 2)1 OR 2 (1 || 2)NOT 1 (!1)
truetruetruetruefalse
truefalsefalsetruefalse
falsetruefalsetruetrue
falsefalsefalsefalsetrue

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

VergelijkingResultaat
5 < 10 && 3 > 1true
5 < 10 && 1 > 3false
5 < 10 || 1 > 3true
true && (3 == 4)false
false || (3 == 4)false
Een variabele Getal moet groter zijn dan 0Getal > 0
Een variabele Getal moet groter dan of gelijk zijn aan 0Getal >= 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 1: positief, negatief of nul?

Versie 1 – if-statement

De gebruiker moet een getal invoeren.

Na het klikken op een knop/button moet worden weergegeven of het getal positief was. Is het niet positief dan wordt niets getoond.

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

Indien het getal niet positief is moet gemeld worden dat het negatief is.

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

Eigenlijk is nul strikt genomen niet echt positief. Er moet dus een derde melding komen als het getal gelijk is aan nul.

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).

Voorbeeld 2: geslaagd of niet geslaagd?

Versie 1 – meerdere condities

Om geslaagd te zijn moeten aan 3 condities voldaan zijn:

  • De cursist moet minimaal 50 % halen,
  • de cursist mag niet meer dan 1 tekort hebben,
  • de cursist mag niet meer dan 2 keer onwettig afwezig zijn.

Invoer

Het aantal tekorten en het aantal keer onwettig afwezig worden ingevoerd. Gebruik hiervoor 2 tekstvakken met de respectievelijke id’s invoerTekorten en invoerAfwezigheden.

Het percentage wordt willekeurig door de computer berekend.

Verwerking en uitvoer

Bij een klik op een Button wordt het, door de computer berekend, percentage in een label met de id uitvoerPercentage weergegeven. In een tweede label met de id uitvoerResultaat komt of de cursist “Geslaagd” is of “Niet geslaagd”. Plaats ook een gepaste titel bovenaan de app.

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

Voeg aan bovenstaande voorbeeld onderstaande opties toe:

  • Indien de cursist geslaagd is met een % tussen de 50% (inbegrepen) en de 70% dan is hij “Geslaagd met voldoening”.
  • Indien de cursist geslaagd is met een % tussen de 70% (inbegrepen) en de 90% dan is hij “Geslaagd met onderscheiding”.
  • Indien hij geslaagd is met een % van 90% of meer dan is hij “Geslaagd met grote onderscheiding”.

voeg ook een gepaste achtergrondkleur toe bij het uitvoeren, groen bij geslaagd, rood bij niet geslaagd.

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()

Toon de getallen van 1 tot 10.

Ken een variabele Getal de waarde 1 toe en maak een variabel Tekst aan dat leeg is.

Zolang de waarde van de variabele Getal kleiner dan of gelijk is aan 10.

  • Voeg het getal toe aan de variabele Tekst en voeg een scheidingsteken toe met + ” – “.
  • Verhoog de waarde van de variabele Getal met 1 via Getal++.

Toon de waarde van de variabele Tekst als uitvoer.

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()

Toon de getallen van 1 tot 10. Dit is hetzelfde voorbeeld als hierboven voor de while()-lus maar nu opgelost met de do…while()-variant.

Ken een variabele Getal de waarde 1 toe en maak een variabel Tekst aan dat leeg is.

Zolang de waarde van de variabele Getal kleiner dan of gelijk is aan 10.

  • Voeg het getal toe aan de variabele Tekst en voeg een scheidingsteken toe met + ” – “.
  • Verhoog de waarde van de variabele Getal met 1 via Getal++.

Toon de waarde van de variabele Tekst als uitvoer.

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()

Genereer en toon de getallen van 1 tot 10. Dit is hetzelfde voorbeeld als hierboven voor de while()-lus maar nu opgelost met de for()-variant.

Ken een variabele Getal de waarde 1 toe en maak een variabel Tekst aan dat leeg is.

Zolang de waarde van de variabele Getal kleiner dan of gelijk is aan 10.

  • Voeg het getal toe aan de variabele Tekst en voeg een scheidingsteken toe met + ” – “.
  • Verhoog de waarde van de variabele Getal met 1 via Getal++.

Toon de waarde van de variabele Tekst als uitvoer.

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();
}

Geef een reactie

  • Abonneer je op deze website d.m.v. e-mail

    Voer je e-mailadres in om je in te schrijven op deze website en e-mailmeldingen te ontvangen van nieuwe berichten.