Les 6: Keuzestructuren

If

Programma's worden niet regel voor regel uitgevoerd. Afhankelijk van de invoer van de gebruiker kan het programma verschillende kanten op gaan. Bij de programmastructuurdiagramman zijn we dit al tegengekomen. Bij Javascript werkt dit met zogenaamde if-statements. 

Neem onderstaande tekst over in HTML-kit

<html>
<head>
<title>Keuze maken</title>
</head>
<body>

<SCRIPT language = JavaScript>
var antw;
antw = confirm("Zal ik de harde schijf wissen?");

if (antw == true)
     {
     document.write("Bezig met wissen... ");
     }
</SCRIPT>

</body>
</html>

Na de regel met de confirm moet je als programmeur beslissen wat er gedaan moet worden. Als er op Ok is geklikt dan moet er gewist worden, als er op annuleren is geklikt moet dat niet gebeuren.
Dat gebeurt in de volgende regels:

if (antw == true)
{
document.write("Bezig met wissen... ")
}

De algemene formulering voor een if-statement is als volgt":

if (voorwaarde)
{

actie
}

Je begint met if (kleine letters)
dan de voorwaarde tussen gewone haken
daarna de actie, die staat tussen accoladen.
De actie kan bestaan uit verschillende programmaregels, uiteraard met elk een ; aan het eind.

De voorwaarde is altijd een vaststelling of iets waar is of onwaar. Meestal worden twee dingen met elkaar vergeleken.
Bij het vergelijken van twee waarden heb je bij Javascript de volgende mogelijkheden:

==    is gelijk aan
!=     is niet gelijk aan
>      is groter dan
<      is kleiner dan
>=    is groter dan of gelijk aan
<=    is kleiner dan of gelijk aan

LET OP: Hier is dus een belangrijk verschil tussen struktograaf en javascript!!

 
structograaf
javascript
toekenning
:=
=
vergelijking: is gelijk aan
=
==
vergelijking: is ongelijk aan
<>
!=

 

else

Ook als de gebruiker 'annuleren' heeft aangeklikt, kan er actie plaatsvinden.
Verander je tekst in HTML-kit, zodat er het volgende komt te staan:

<html>
<head>
<title>Keuze maken</title>
</head>
<body>

<SCRIPT language = JavaScript>
var antw;
antw = confirm("Zal ik de harde schijf wissen?");

if (antw == true)
     {
     document.write("Bezig met wissen... ");
     }
else
     {
     document.write("Het wissen gaat niet door");
     {
</SCRIPT>

</body>
</html>

Ga na wat het resultaat is.

Als de voorwaarde klopt (antw==true is WAAR) dan wordt de code onder if uitgevoerd (en die onder else overgeslagen),
als de voorwaarde niet klopte (antw==true is ONWAAR) dan wordt de code onder else uitgevoerd (en die onder if overgeslagen).

De algemene code voor een if-else statement is nu dus:

if (voorwaarde)
    {
    actie
    }

else
    {
    actie
    }

 

Nesten

Je kunt meer if-else statements combineren (nesten)
Probeer eerst de mogelijke uitkomsten van onderstaande code te voorspellen, en test het vervolgens met HTML-kit.

<html>
<head>
<title>Keuze maken</title>
</head>
<body>
<SCRIPT language = JavaScript>
var antw;
leeftijd = window.prompt("Hoeveel jaar ben je?", "");

if (leeftijd < 16)
     {
     alert("Hoe gaat het op school?");
     }
else if(leeftijd > 16)
          {
          alert("Het valt niet mee om volwassen te zijn");
          }
      else
          {
          alert("Geen grapjes alsjeblieft");
          }

</SCRIPT>
</body>
</html>

Na het invoeren van de leeftijd wordt een verschillende boodschap gegeven aan jongeren en ouderen.
Maar je hebt misschien al ontdekt dat er iets niet klopt! Want wat wordt het resultaat bij iemand die precies 16 jaar is?

Verander het script zodanig dat ook daar een goed resultaat wordt gegeven.

Einde les 6