Condities ofwel voorwaardelijke structuren

Voorwaardelijke uitvoering met if en else

In dit hoofdstuk wordt het nemen van beslissingen in programmacode behandeld. Dit onderwerp is een van de basiselementen van programmeren. Zorg dat je dit onderwerp heel goed begrijpt. Je zult het begrip dit jaar nog vele malen nodig hebben.

Als je een programma ontwikkelt op basis van de invoer van de gebruiker zul je vaak een test moeten uitvoeren om de invoer te controleren. Is er wel een wachtwoord van minstens 8 teken ingevoerd? Is de invoer om te zetten naar een getal? Is het salaris ingevoerd door de gebruiker voldoende om een hypotheek te krijgen? ...

Voor een gebruikersvriendelijk programma moet een gebruiker moet altijd een reactie op invoer krijgen. Zowel op goede als op slechte invoer. Bekijk weer het voorbeeld, nu enigszins aangepast:

Voorbeeld: Geef getal

In programmeertalen is het mogelijk om gegevens te vergelijken en op basis van de uitslag van die vergelijking verschillende code uit te voeren.

voorbeeld Bij een evenement kost een toegangskaart 10 euro. In een aantal gevallen wordt er korting gegeven. Als je met kinderen gaat van onder de 10 jaar krijg je 2,05 euro korting. Als 65+ krijg je 1,55 euro korting. In dit geval kan je er niet zomaar vanuit gaan dat het toegangskaartje 10 euro is. Het systeem moet op basis van de leeftijd bepalen wat de korting is. In dit geval is er sprake van een voorwaardelijke uit voering. Als … dit anders … dat.

Aan het einde van deze les weet je :

  • hoe je een vergelijkingsstructuur kunt opzetten;
  • hoe je een vergelijking in javascript programmeert;
  • hoe je een vergelijking programmeert in combinatie met formulieren;

Bekijk de video. Deze video biedt een basis voor de rest van dit hoofdstuk.


voorbeeld
vervolg
We kunnen het voorbeeld in een schema gaan neerzetten. Hierbij maken we gebruik van variabelen in programmeertalen zoals je in de voorgaande opdrachten hebt geleerd. In de onderstaande figuren is het geheel schematisch weergegeven. Je ziet dat er twee voorwaarden zijn gesteld. Een leeftijd kleiner dan 10 en groter dan 65 geven korting. In andere gevallen krijg je geen korting.
Vergelijking jeugd en bejaard verwerkt in PSD Vergelijking jeugd en bejaard verwerkt in flowchart
Lees leeftijd leeftijd < 10 Nee Ja korting 2.05 Leeftijd > 65 Nee Ja korting 1.55 korting 0 prijs is 10 - korting Start Leeftijd < 10 Lees leeftijd Korting 2,05 Leeftijd > 65 Korting 1.55 Korting 0 Prijs is 10 - korting Eind ja nee ja nee

Wat zal er gebeuren als je een negatieve leeftijd invoert?

De bovenstaande figuren zijn voorbeelden van respectievelijk een Programma Structuur Diagram (PSD) en een flowchart. Dit zijn grafische en schematische weergaven van een programma(onderdeel) zonder dat er echte code wordt gebruikt. In deze tekst zal de flowchart techniek worden gebruikt. Bij sommige opdrachten wordt verlangd flowcharts te tekenen. Beide technieken zijn handig in overleg tussen programmeurs en opdrachtgevers en zijn ook erg handig als je het moeilijk vindt direct in programmacode te denken.

Alvorens we code voor het voorbeeld introduceren eerst een paar oefeningen voor het tekenen van flowcharts en PSD's.

Opdrachten
  1. Een stoplicht heeft drie verkeerslichten. Afhankelijk van welk verkeerslicht er wordt getoond, moet een automobilist een beslissing nemen: stoppen of doorrijden. Beantwoord de volgende deelvragen:
    1. Maak een Flowchart en een PSD voor een beslissingsboom voor de drie verkeerslichten.
    2. Denk je dat deze voorwaardelijke constructie zodanig is dat er geen enkele fout kan optreden?
  2. Het Dalton College heeft voor haar werkstukken de volgende beoordelingscriteria opgesteld. Het aantal punten bepaalt welk cijfer er wordt toegekend. Onderstaand vind je het puntenoverzicht en cijfer.
    n-scorecijfer
    0-404
    41-485
    49-546
    55-607
    61-638
    64-679
    68-7010
    1. Maak een flowchart van dit schema.
    2. Denk je dat deze voorwaardelijke constructie voldoende alle situaties afdekt? Zo nee wat missen we?
voorbeeld
vervolg

Het coderen van een voorwaardelijke constructie is een nauwkeurig karwei waarin je alle mogelijkheden moet afhandelen. We keren terug naar het voorbeeld en ontwikkelen een formulier met bij behorende code.

Je hebt in het vorige hoofdstuk geleerd hoe je via een formulier gegevens kunt manipuleren. Het is een mooie manier om dit ook met leeftijd te doen. Je kunt bijvoorbeeld een invoerveld maken met de naam leeftijd. We beperken ons eerst to de situatie korting bij bejaarde.
Geef een leeftijd

  <!DOCTYPE html>
  <html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
    <script type="text/javascript">
      /**
         functie bepaalPrijs reageert op het invullen 
         van een leeftijd in het formulier in dit 
         HTML document. Op basis van de invoer wordt bepaald
         en getoond wat de prijs is.
      */
      function bepaalPrijs()  // Begin functie declaratie
      {                   // functie blok begint met accolade openen
         /*
          Lees de invoer in het veld leeftijd en converteer 
          die naar een getal met de functie Number()
         */ 
         var leeftijd = Number(document.getElementById('leeftijd').value);
         // Pak het uitvoerveld object.
         var uitvoerobject = document.getElementById('uitvoer');
         var prijs = 10; // Initieel wordt de prijs op 10 euro gezet.
         //We starten hier een voorwaardelijke code
         if( leeftijd > 65 )  // als de leeftijd groter is dan 65
         {   // dan verlagen we de prijs
             prijs = prijs - 1.55;
         }
         else
         {   /* anders blijft de prijs 10 euro en hoeft 
                er niets te worden uitgerekend.
             */
         }
         //einde voorwaardelijke code
         
         uitvoerobject.innerHTML="De prijs voor uw kaartje is: " + prijs ;
             // tussen de accolades is de code die wordt uitgevoerd
      }      // functie blok eindigt met accolade sluiten
    </script>
  </head>
  <body>
  <form onsubmit="javascript:bepaalPrijs(); return false;">
    <table summary="">
      <tr>
        <td>
           Geef een leeftijd
        </td>
        <td>
          <input type="text" id="leeftijd" value="" />
        </td>
        <td>
           <input type="submit" value="Voer uit" >
        </td>
        <td id="uitvoer">
        </td>
      </tr>
    </table>
  </form>
  </body>
  

Vul in het formulier maar eens wat andere tekenreeksen. Niet noodzakelijkerwijs getallen.

In de code hierboven wordt is voorwaardelijke structuur een if..else structuur. Een if .. else structuur heeft de volgende syntax

     if ( logische vergelijking ) // Volg de verwijzing en bestudeer alle logische vergelijkingen. 
     {
      // code als de vergelijking true (waar) is
     }
     else
     {
      // code als de vergelijking false (niet waar) is
     }

We willen ook de situatie toevoegen dat een persoon jonger is dan 10 jaar. Dit lossen we op door de conditie structuur voor de jeugd te nesten binnen de conditie structuur van de bejaarde. Een algemene opzet is:

     if ( logische vergelijking )
     {
      // code als de vergelijking true (waar) is
     }
     else
     {
       if ( logische vergelijking2 )
       {
        // code als de vergelijking2 true (waar) is
       }
       else
       {
        // code als de vergelijking2 false (niet waar) is
       }
     }

In het voorbeeld wordt de structuur dan

         if( leeftijd > 65 )  // als de leeftijd groter is dan 65
         {   // dan verlagen we de prijs
             prijs = prijs - 1.55;
         }
         else
         {   
           if( leeftijd < 10 )  // als de leeftijd kleiner is dan 10
           {   // dan verlagen we de prijs
               prijs = prijs - 2.05;
           }
           else
           {   
               /* anders blijft de prijs 10 euro en hoeft 
                  er niets te worden uitgerekend.
               */
           }
         }
Geef een leeftijd

Je zult merken dat je nog steeds geen zinvolle melding krijgt als er een negatief getal wordt in gevoerd of als het in het geheel geen getal is. Wij voegen deze situaties nu nog toe.

      /**
         functie bepaalPrijs reageert op het invullen 
         van een leeftijd in het formulier in dit 
         HTML document. Op basis van de invoer wordt bepaald
         en getoond wat de prijs is.
      */
      function bepaalPrijs()  // Begin functie declaratie
      {                   // functie blok begint met accolade openen
         /*
          Lees de invoer in het veld leeftijd en converteer 
          die naar een getal met de functie Number()
         */ 
         var leeftijd = Number(document.getElementById('leeftijd2').value);
         // Pak het uitvoerveld object.
         var uitvoerobject = document.getElementById('uitvoer2');
         var prijs = 10; // Initieel wordt de prijs op 10 euro gezet.
         /* In variabiale melding gaan we tekst stoppen die we teruggeven
            aan de gebruiker */
         var melding=""; 
         //We starten hier een voorwaardelijke code
         if(isNaN(leeftijd)) // isNaN test of leeftijd niet een getal is
         {
           // leeftijd is geen getal
           melding="Er is geen goede leeftijd ingevoerd!";
         }
         else
         {
           if( leeftijd >= 0 )  // als de leeftijd groter of gelijk is aan 0
           {   
               // dan kunnen we gaan testen op korting voor ouderdom
               if( leeftijd > 65 )  // als de leeftijd groter is dan 65
               {   // dan verlagen we de prijs
                   prijs = prijs - 1.55;
               }
               else
               {   
                 // anders kunnen we gaan testen op korting voor jeugd
                 if( leeftijd < 10 )  // als de leeftijd kleiner is dan 10
                 {   // dan verlagen we de prijs
                     prijs = prijs - 2.05;
                 }
                 else
                 {   
                     /* anders is de leeftijd tussen 10 t/m 65 
                        en blijft de prijs 10 euro en hoeft 
                        er niets te worden uitgerekend.
                     */
                 }
               }
               melding="De prijs voor uw kaartje is: " + prijs ;
           }
           else
           {   
             melding="U heeft een negatieve leeftijd in gevoerd!";
           }
         }
       //einde voorwaardelijke code

       uitvoerobject.innerHTML=melding;
      }                   // functie blok eindigt met accolade sluiten
Geef een leeftijd

Je ziet het wordt al snel gecompliceerd als er aan veel voorwaarden moet worden voldaan.

Twee condities die na elkaar vergeleken moeten worden kunnen ook opgeschreven worden door er een 'en'-operator tussen te zetten. Je zegt dan: 'voorwaarde1 EN voorwaarde2' moeten voldoen. Bijvoorbeeld 'lengte >= 120 EN lengte<180' (dus de lengte is vanaf 120 tot 180). Het teken voor de EN is '&&'. Dit kan dus op twee manieren:

...code...
if(lengte>=120 )
{
  if(lengte<180)
  {
    toegangAttractie = "Je mag in deze attractie";
  }
}
else
{
  //...
}
...code...
of
...code...
if(lengte>=120 && lengte<180)
{
  toegangAttractie = "Je mag in deze attractie";
}
else
{
  //...
}
...code...

Naast de EN operator bestaan er nog twee veel gebruikte operatoren: een OF operator en een NIET operator. De tekens voor deze twee operatoren zijn respectievelijk '||' en '!'. De operatoren in code:

OF-operator:
...code...
if(lengte<120 || lengte>=180)
{
  toegangAttractie = "Je mag niet in deze attractie";
}
else
{
  //...
}
...code...

NIET-operator:
...code...
if( ! ( lengte<120 || lengte>=180) )
{
  toegangAttractie = "Je mag wel in deze attractie";
}
else
{
  //...
}
...code...

Het voorbeeld hierboven betekent dus: als de lengte kleiner is dan 120 OF de lengte groter of gelijk is aan 180 dan krijg je geen toegang anders... Het voorbeeld met de NIET-operator betekent: als de lengte NIET kleiner is dan 120 OF de lengte groter of gelijk is aan 180 dan krijg je wel toegang anders...

Opdrachten
  1. Gegeven is a=true, b=false, c=true, d=4 en e=5.
    Kies voor ieder regel in de tabel of de expressie waar (true) of false (onwaar) is.:
    expressie uitkomst goed
    a || b
    a && b
    !a || b
    (a || c) && (b || c)
    (a || c) && !(b && c)
    d > e
    d <= e || (a == b)
  2. Maak voor de situatie in opgave 18 een formulier waarin het aantal punten kan worden ingevoerd en waar het cijfer uitrolt. Zorg eerst dat je een overzicht hebt van alle voorwaarden. Voorzie het document van een foto van een flowchart.