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:
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 :
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.
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 |
|
|||||||||||||||||||||||||||
| 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.
<!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()
*/
let leeftijd = Number(document.getElementById('leeftijd').value);
// Pak het uitvoerveld object.
let uitvoerobject = document.getElementById('uitvoer');
let 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.
*/
}
}
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()
*/
let leeftijd = Number(document.getElementById('leeftijd2').value);
// Pak het uitvoerveld object.
let uitvoerobject = document.getElementById('uitvoer2');
let prijs = 10; // Initieel wordt de prijs op 10 euro gezet.
/* In variabiale melding gaan we tekst stoppen die we teruggeven
aan de gebruiker */
let 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
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:
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 |
|
|||||||||||||||||||||||||||