<?php
// Includes:
require_once 'php/bookpage.php';
// Page:
// H6
$page = new bookpage(6);
$page->addContent('<p>Vaak moet er iets gebeuren <b>als</b> iets anders waar is. Of iets moet een aantal keer achter elkaar herhaald worden. JavaScript kan dit allemaal waarmaken met loops en voorwaardelijke code.</p>');
// H6.1
$page->nextSubChapter();
$page->addContent('<p>Met voorwaardelijke code wordt code bedoeld die alleen uitgevoerd wordt als er aan een bepaalde voorwaarde voldaan wordt. Zo kun je bijvoorbeeld zeggen: <i><b>als</b> iemand als leeftijd 16 invult, <b>dan</b> moet de tekst "Hey, zo jong ben ik ook!" verschijnen</i>. Dus op voorwaarde dat 16 wordt ingevuld moet iets gebeuren, en anders niet. Dit zal heel veel nodig zijn, want je kan bijvoorbeeld al bij een simpel Mario-spelletje de volgende dingen aanwijzen (zonder dat je de code kent):</p>');
$page->addContent('<ul>
<li><b>Als</b> Mario dood gaat, <b>dan</b> haal je er een leven af</li>
<li><b>Als</b> de eindscore hoger is dan de hoogste score, <b>dan</b> verander je de highscore</li>
<li><b>Als</b> Mario een ster heeft gepakt, <b>dan</b> kan hij niet dood</li>
<li>En nog veel meer!</li>
</ul>');
$page->addContent('<p>Vaak moet code ook een aantal keer achter elkaar worden uitgevoerd. Dat zou kunnen zien als: <b>zolang</b> aan een bepaalde voorwaarde wordt voldaan, voer je het volgende stukje code uit. Zoiets heet een <i>loop</i>, omdat het een soort looping is (de code start telkens weer opnieuw). Ook dat zul je heel veel tegen komen.</p>');
// H6.2
$page->nextSubChapter();
$page->addContent('<p>Om een stukje voorwaardelijke code te maken heb je het '.$page->inlineJS('if-else').'-statement nodig. Hiermee controleer je eerst of iets waar is, en als dat waar is wordt de code die daarna tussen { } staat uitgevoerd.</p>');
$page->addJS('var age = prompt("Hoe oud ben je?", "");
if(age == 16)
{
alert("Hey, zo jong ben ik ook!");
}');
$page->addContent('<p>Merk op dat hier een dubbele == wordt gebruikt, en geen =. Dat komt omdat = de waarde van de variabele verandert, en dus eigenlijk betekent <i>\'wordt\'</i> ('.$page->inlineJS('a = 5; // a wordt 5').'). Terwijl == twee waardes met elkaar vergelijkt. Meer over vergelijkingsoperatoren in '.$page->generateLinkToH(6, 3).'.</p>');
$page->addContent('<p>Het bovenstaande stukje code zou je in mensentaal als volgt kunnen schrijven:<br />
Maak variabele <i>age</i>, en vraag de gebruiker een waarde in te vullen (die waarde wordt in <i>age</i> opgeslagen).<br />
Als <i>age</i> gelijk is aan 16, dan laat je een alert-box zien met de tekst <i>Hey, zo jong ben ik ook!</i></p>');
$page->addContent('<p>Nou kan je ook code opgeven voor het geval er <b>niet</b> aan de voorwaarde voldaan wordt. Je wil dus zeggen: <i><b>als</b> iets waar is, <b>dan</b> doe je dit, <b>anders</b> doe je dat</i>. Dat kan in JavaScript ook, en wel als volgt:</p>');
$page->addJS('var age = prompt("Hoe oud ben je?", "");
if(age == 16) // Als age gelijk aan 16 is
{ // Dan voer je de volgende code uit
alert("Hey, zo jong ben ik ook!");
}
else // Anders voer je de volgende code uit
{
alert("Hmm, dat is niet hetzelfde als ik");
}');
$page->addContent('<p>Er kunnen zelfs meerdere voorwaardes achter elkaar worden gezet:</p>');
$page->addJS('var age = prompt("Hoe oud ben je?", "");
if(age == 16) // Als age gelijk aan 16 is
{ // Dan voer je de volgende code uit
alert("Hey, zo jong ben ik ook!");
}
else if(age == 15) // Anders, als age gelijk aan 15 is
{ // Dan voer je de volgende code uit
alert("Nog een jaartje, en dan zijn we even jong ;-)");
}
else if(age == 17) // Anders, als age gelijk aan 17 is
{ // Dan voer je de volgende code uit
alert("Je bent een jaartje ouder!");
}
else // Als geen van het bovenstaande voorwaardes waar is voer je de volgende code uit
{
alert("Hmm, dat is niet hetzelfde als ik");
}');
$page->addContent('<p>Merk op dat zodra er een keer aan een voorwaarde voldaan wordt en er dus een stukje code uitgevoerd wordt, de rest daarna overgeslagen wordt. Er is immers al een stukje code gevonden dat aan de voorwaarde voldoet.</p>');
$page->addContent('<p>In '.$page->generateLinkToH(5, 3).' werd wat uitgelegd over de scope van een variabele. Namelijk dat die alleen binnen zijn eigen functie zichtbaar was. Bij voorwaardelijke code en loops bestaat ook een scope. De variabelen die in de voorwaardelijke code (dus tussen de { } na een '.$page->inlineJS('if').', '.$page->inlineJS('else').' of '.$page->inlineJS('else if').') worden gemaakt zijn ook alleen binnen die { } zichtbaar.</p>');
$page->addJS('var a = 12;
// a is zichtbaar (b bestaat nog niet)
if(a == 12)
{
var b = 13;
// a en b zijn zichtbaar
alert(a + b);
}
// a is zichtbaar (b is weg)');
// H6.3
$page->nextSubChapter();
$page->addContent('<p>Zo\'n voorwaarde of vergelijking kan twee waardes hebben: waar of onwaar. Ook wel '.$page->inlineJS('true').' of '.$page->inlineJS('false').'. De woorden '.$page->inlineJS('true').' en '.$page->inlineJS('false').' zijn ingebouwde woorden in JavaScript en betekenen dus waar of onwaar. Dit worden <i>booleaans expressies</i> genoemd. Je kan ze dan ook in een variabele opslaan.</p>');
$page->addJS('var mijnVariabele = true;
var mijnAndereVariabele = false;');
$page->addContent('<p>Uit zo\'n vergelijking (of voorwaarde) komt dus altijd een '.$page->inlineJS('true').' of '.$page->inlineJS('false').'. Aangezien de voorwaardelijke code alleen uitgevoerd wordt als aan die voorwaarde voldaan werd, wordt die code dus alleen uitgevoerd als er uit die voorwaarde '.$page->inlineJS('true').' (=waar) komt. Gezien de waardes '.$page->inlineJS('true').' en '.$page->inlineJS('false').' in een variabele opgeslagen kunnen worden kan dus ook de uitkomst van een vergelijking opgeslagen worden in een variabele.</p>');
$page->addJS('var a = 11;
var b = (a == 11); // Sla de uitkomst van de vergelijking op in variabele b
if(b) // Als hier true uit komt (dus als b true is)
{ // Dan voer je de volgende code uit
alert("Variabele a is 11");
}');
$page->addContent('<p>De haakjes om '.$page->inlineJS('a == 11').' zijn enkel voor de duidelijkheid. Ze zijn niet per se nodig omdat de operator == voorrang heeft boven de operator = (net zoals * bijvoorbeeld voorrang heeft boven +).</p>');
$page->addContent('<p>De gebruiker zal dus nu een alert-box met de tekst <i>Variabele a is 11</i> te zien krijgen. Omdat '.$page->inlineJS('a == 11').' '.$page->inlineJS('true').' geeft (want <i>a</i> is gelijk aan 11). Dus <i>b</i> is dan ook '.$page->inlineJS('true').'. Dus wordt er aan de voorwaarde voldaan (want er staat '.$page->inlineJS('true').' achter de if), en dus wordt de code tussen { } uitgevoerd.</p>');
$page->addContent('<p>Nu kun je alleen nog twee waardes met elkaar vergelijken (met ==), maar er zijn natuurlijk veel meer mogelijkheden. Die staan hieronder in een tabel weergegeven. In het voorbeeld is <i>a</i> gelijk aan 6, en <i>b</i> is gelijk aan 5.</p>');
$page->addContent($page->createWhiteBlock('<table>'.
'<thead><tr><td>Operator</td><td>Omschrijving</td><td>Voorbeelden</td><td style="padding-right:20px;">Uitkomst</td></tr></thead>'.
'<tbody>'.
'<tr><td>==</td><td>Vergelijk 2 waardes, true als ze gelijk zijn, ongeacht het type (getal, string, boolean)</td><td>a == 6<br />a == b</td><td>true<br />false</td></tr>'.
'<tr><td>===</td><td>Vergelijk 2 waardes, true als ze gelijk zijn en als het type hetzelfde is. Dus als de een een string is en de ander een getal is dit false</td><td>a === 6<br />a === "6"</td><td>true<br />false</td></tr>'.
'<tr><td>!=</td><td>Vergelijk 2 waardes, true als ze niet gelijk zijn</td><td>a != b<br />a != 6</td><td>true<br />false</td></tr>'.
'<tr><td>></td><td>Vergelijk 2 waardes, true als de linker groter is dan de rechter</td><td>a > b<br />a > 6</td><td>true<br />false</td></tr>'.
'<tr><td><</td><td>Vergelijk 2 waardes, true als de linker kleiner is dan de rechter</td><td>b < a<br />b < 5</td><td>true<br />false</td></tr>'.
'<tr><td>>=</td><td>Vergelijk 2 waardes, true als de linker groter is dan de rechter of gelijk is aan de rechter</td><td>a >= b<br />a >= 6<br />a >= 10</td><td>true<br />true<br />false</td></tr>'.
'<tr><td><=</td><td>Vergelijk 2 waardes, true als de linker groter is dan de rechter of gelijk is aan de rechter</td><td>b <= a<br />b <= 5<br />b <= 3</td><td>true<br />true<br />false</td></tr>'.
'</tbody>'.
'</table>', null, false));
$page->addContent('<p>Soms wil je ook als voorwaarde kunnen stellen: <i><b>als</b> iets waar is <b>en</b> iets anders ook waar is</i>. Daarvoor zijn de zogenaamde logische operatoren bedacht. Hiervan zijn er 3.</p>');
$page->addContent($page->createWhiteBlock('<table>'.
'<thead><tr><td>Operator</td><td>Naam</td><td>Omschrijving</td><td>Voorbeelden</td><td style="padding-right:10px;">Uitkomst</td></tr></thead>'.
'<tbody>'.
'<tr><td>&&</td><td>AND-operator</td><td>Als aan allebei de kanten true staat<br>levert deze ook true</td><td>false && false<br />false && true<br />true && false<br />true && true</td><td>false<br />false<br />false<br />true</td></tr>'.
'<tr><td>||</td><td>OR-operator</td><td>Als aan een van de kanten true staat<br> levert deze ook true</td><td>false || false<br />false || true<br />true || false<br />true || true</td><td>false<br />true<br />true<br />true</td></tr>'.
'<tr><td>!</td><td>NOT-operator</td><td>De waarde die volgt wordt omgedraaid<br> (true wordt false en false wordt true)</td><td>!true<br />!false</td><td>false<br />true</td></tr>'.
'</table>', null, false));
$page->addContent('<p>Een voorbeeld:</p>');
$page->addJS('var myAge = 16; // Vul hier natuurlijk je eigen leeftijd in
var age = prompt("Wat is je leeftijd?", "");
if(age < 0) // Als de ingevulde leeftijd kleiner dan 0 is
{
alert("Dat lijkt me sterk!");
}
else if(age == myAge) // Anders, als de ingevulde leeftijd gelijk is aan myAge
{
alert("Dat is precies mijn leeftijd!");
}
else if(age < myAge) // Anders, als de ingevulde leeftijd kleiner is dan myAge
{
alert("Je bent nog " + (myAge-age) + " jaartjes jonger");
}
else if(age > myAge) // Anders, als de ingevulde leeftijd groter is dan myAge
{
alert("Je bent " + (age-myAge) + " jaar ouder dan mij");
}
var myName = "Mark";
var name = prompt("Wat is uw naam?", "");
if(name == myName && age == myAge) // Als de ingevulde naam hetzelfde is als myName EN de ingevulde leeftijd is hetzelfde als myAge
alert("Ik heb je wel door, je bent mijn dubbelganger!");');
$page->addContent('<p>Merk op dat in het bovenstaande stuk bij de laatste <i>if</i> de { } ontbreken. Die zijn niet nodig als er maar 1 statement (zie '.$page->generateLinkToH(3, 1).') uitgevoerd moet worden als voorwaardelijke code. Als het er meer zijn zijn de { } verplicht. Bij twijfel mag je altijd de { } plaatsen, want het weglaten ervan is uiteraard ook niet verplicht. Op de rest van deze website zul je wel telkens alles met { } vinden, zodat duidelijk is wat waarbij hoort. Ook in je opdrachten en bij de prakticumtoets wordt je geacht altijd de accolades te gebruken. Het is echter belangrijk dat je code zonder { } ook begrijpt en kan lezen, omdat veel programmeurs de { } weglaten.</p>');
// H6.4
$page->nextSubChapter();
$page->addContent('<p>Als je de gebruiker iets wil vragen wat hij of zij moet bevestigen (of juist niet bevestigen) dan kun je de functie '.$page->inlineJS('confirm').' gebruiken. Dit is een soort van combinatie tussen '.$page->inlineJS('alert').' en '.$page->inlineJS('prompt').'. Want hij heeft net zoals '.$page->inlineJS('alert').' maar één argument nodig. Maar hij geeft, net zoals '.$page->inlineJS('prompt').', een waarde terug. Namelijk een booleaanse expressie: '.$page->inlineJS('true').' of '.$page->inlineJS('false').'. Zodra deze functie wordt aangeroepen zal er namelijk een zelfde soort popup verschijnen als bij '.$page->inlineJS('alert').', maar dan met twee knoppen. Meestal staat er op die knoppen <i>Ok</i> en <i>Annuleren</i>, maar dat hangt van de browser af en kun je zelf niet bepalen. Als er dan op <i>Ok</i> wordt geklikt, geeft de functie '.$page->inlineJS('true').' terug, anders '.$page->inlineJS('false').'.</p>');
$page->addJS('if(confirm("Wil je je naam invoeren?")) // Als de gebruiker op OK klikt
{ // Dan voer je de code tussen de { } uit
var name = prompt("Wat is je naam?", "");
alert("Hallo " + name);
}
else // Anders
{
alert("Je hebt geen naam ingevoerd!"); // Laat je dit berichtje zien
}');
// H6.5
$page->nextSubChapter();
$page->addContent('<p>Soms heb je een heel lang if-else-statement, zoals bijvoorbeeld.</p>');
$page->addJS('var n = prompt("Geef een getal van 0 t/m 9", "0");
if(n==0)
{
alert("nul");
}
else if(n==1)
{
alert("een");
}
else if(n==2)
{
alert("twee");
}
else if(n==3)
{
alert("drie");
}
else if(n==4)
{
alert("vier");
}
else if(n==5)
{
alert("vijf");
}
else if(n==6)
{
alert("zes");
}
else if(n==7)
{
alert("zeven");
}
else if(n==8)
{
alert("acht");
}
else if(n==9)
{
alert("negen");
}
else
{
alert("Geen geldig getal ingevoerd!");
}');
$page->addContent('<p>Dit kan overzichtelijker, namelijk met het switch statement:</p>');
$page->addJS('var n = parseInt(prompt("Geef een getal van 0 t/m 9", "0"));
switch(n)
{
case 0:
alert("nul");
break;
case 1:
alert("een");
break;
case 2:
alert("twee");
break;
case 3:
alert("drie");
break;
case 4:
alert("vier");
break;
case 5:
alert("vijf");
break;
case 6:
alert("zes");
break;
case 7:
alert("zeven");
break;
case 8:
alert("acht");
break;
case 9:
alert("negen");
break;
default:
alert("Geen geldig getal ingevoerd!");
break;
}');
$page->addContent('<p>Hierbij wordt dus de waarde van <i>n</i> (of wat je daar ook tussen haakjes zet) vergeleken met alle waardes die daaronder volgen achter het woordje '.$page->inlineJS('case').' (en daarna moet weer een dubbele punt). Als er een waarde gevonden wordt die gelijk is aan wat er tussen de () achter '.$page->inlineJS('switch').' stond, wordt de code die dan volgt uitgevoerd totdat het woordje '.$page->inlineJS('break').' gevonden wordt (of als het switch-statement is afgelopen). Als geen van de waardes gelijk is aan de waarde die bovenaan tussen () staat, dan wordt de code achter '.$page->inlineJS('default:').' uitgevoerd (tot aan een '.$page->inlineJS('break').' of het einde van het switch-statement). Als er dan geen '.$page->inlineJS('default:').' tussen staat zal er niks uitgevoerd worden. Meer over '.$page->inlineJS('break').' volgt in '.$page->generateLinkToH(6, 8).'</p>');
$page->addContent('<p>Hier wordt de functie <i>parseInt()</i>gebruikt. Dit is hier nodig omdat <i>switch</i> een verschil maakt tussen een string en een echt getal (en <i>prompt()</i> geeft altijd een string terug).</p>');
$page->addContent('<p>Het is mogelijk voor meerdere waardes dezelfde code uit te laten voeren. Dit kan simpelweg door een aantal <samp>case</samp>'s achter elkaar te plaatsen. Hieronder zie je dit in een voorbeeld waarbij (op een onhandige manier) wordt aangegeven of <i>n</i> een even of oneven getal is.</p>');
$page->addJS('var n = parseInt(prompt("Geef een getal van 1 t/m 10", "0"));
switch(n)
{
// In het geval n gelijk aan 1, 3, 5, 7 of 9 is
case 1:
case 3:
case 5:
case 7:
case 9:
alert("Het getal is oneven!");
break;
// In het geval n gelijk aan 2, 4, 6, 8 of 10 is
case 2: case 4: case 6: // Zoals je ziet hoeven case-statements niet per se onder elkaar,
case 8: case 10: // ze kunnen ook naast elkaar. Dit is vaak overzichtelijker.
alert("Het getal is even!");
break;
default:
alert("Dit getal is te groot of te klein voor mij!");
break;
}');
// H6.6
$page->nextSubChapter();
$page->addContent('<p>Als code een aantal keer achter elkaar uitgevoerd moet worden gebruik je daarvoor een <i>loop</i>. Er bestaan eigenlijk twee soorten loops: een <i>while</i>-loop en een <i>for-loop</i>. Bij een while-loop wordt de code die tussen de { } staat uitgevoerd zolang er aan een bepaalde voorwaarde voldaan wordt. Het lijkt de veel op het if-statement, alleen dan wordt de code herhaald.</p>');
$page->addJS('alert("Kijk, ik kan tellen!");
var x = 1;
while(x <= 10) // Zolang x kleiner is dan 10 of gelijk aan 10 is
{
alert(x);
x++; // Verhoog x met 1
}');
$page->addContent('<p>Hier wordt de code tussen de { } dus uitgevoerd totdat x groter dan 10 is.</p>');
/*$page->addContent('<p>Er bestaat ook een variant van de while-loop, namelijk de do-while-loop. Normaliter wordt eerst gecontroleerd of er aan de voorwaarde voldaan wordt, zo ja dan wordt de code uitgevoerd en wordt er daarna weer gecontroleerd en eventueel weer code uitgevoerd. Net zo lang totdat er niet meer aan de voorwaarde voldaan wordt. Maar bij een do-while-loop werkt het anders, daar wordt de code eerst uitgevoerd. Dan wordt de voorwaarde gecontroleerd en als die waar is wordt de code weer uitgevoerd en wordt er weer gecontroleerd, etc. Hierbij wordt de code dus altijd minstens 1x uitgevoerd.</p>');
$page->addJS('alert("Kijk, ik kan tellen!");
var x = 1;
do // Voer het volgende stuk code uit
{
alert(x);
x++;
}while(x <= 10);// Zolang x kleiner is dan 10 of gelijk aan 10 is');
$page->addContent('<p>In dit geval is de uitvoer van het eerste en het tweede stukje gelijk.</p>');*/
// H6.7
$page->nextSubChapter();
$page->addContent('<p>De for-loop is de tweede soort loop. Eigenlijk is het alleen maar een verkorte manier om de while-loop op een bepaalde manier te schrijven. Je zal namelijk heel vaak code moeten schrijven die een aantal keer achter elkaar herhaald moet worden. Daarvoor is een for-loop geschikt (hoewel het ook met een while-loop kan zoals in '.$page->generateLinkToH(6, 6).' beschreven is).</p>');
$page->addJS('for(var i = 0; i < 10; ++i)
{
alert("Er volgen nu nog " + (10-i) + " berichtjes");
}');
$page->addContent('<p>Dit levert hetzelfde op als:</p>');
$page->addJS('var i = 0;
while(i < 10)
{
alert("Er volgen nu nog " + (10-i) + " berichtjes");
++i;
}');
$page->addContent('<p>Een for-loop ziet er dus als volgt uit</p>');
$page->addJS('for(statement1; voorwaarde; statement2)
{
code
}');
$page->addContent('<p>Eerst wordt <i>statement1</i> uitgevoerd, daarna wordt gecontroleerd of aan de voorwaarde voldaan wordt. Als dat niet zo is houdt de loop op. Als er wel aan voldaan wordt wordt de code uitgevoerd. Daarna wordt <i>statement2</i> uitgevoerd en wordt de voorwaarde weer gecontroleerd. En zo gaat het door. Merk op dat <i>statement1</i> dus altijd 1x (niet meer en niet minder) uitgevoerd wordt.</p><p>Ter vergelijking weer even de while-loop:</p>');
$page->addJS('statement1
while(voorwaarde)
{
code
statement2
}');
// H6.8
$page->nextSubChapter();
$page->addContent('<p>Soms wil je, terwijl de code midden in de loop is, de loop stoppen. Je wil er dan \'uit breken\'. Dit kan met het woordje '.$page->inlineJS('break').', daarmee houdt de huidige loop per direct op.</p>');
$page->addJS('var n = 0;
while(true) // Oneindige loop, blijft altijd doorgaan (tenzij je break gebruikt)
{
n = prompt("Geef een getal van 0 t/m 10 in", n);
if(n >= 0 && n <= 10){ // Als n op zijn minst 0 is, en op zijn hoogst 10 is
break; // Breek uit de huidige loop (de while-loop dus)
}
alert("Geef een geldig getal op!");
}');
$page->addContent('<p>De tekst <i>Geef een geldig getal op!</i> zal dus alleen verschijnen als er geen geldig getal ingevuld is (dus kleiner dan 0 of groter dan 10). Want als er wel een geldig getal ingevoerd werd stopt de loop per direct door de '.$page->inlineJS('break').'</p>');
$page->addContent('<p>Er wordt alleen uit de huidige loop gebroken. Dus als je twee loops in elkaar hebt, zal er maar uit een gebroken worden.</p>');
$page->addJS('while(true) // Oneindige loop, blijft altijd doorgaan (tenzij je break gebruikt)
{
// Doe iets...
for(;true;) // Ook een oneindige loop, want de voorwaarde is altijd true
{
// Doe iets...
break; // Breek uit de for-loop
}
break; // Breek uit de while-loop
}');
$page->addContent('<p></p>');
$page->addContent('<p></p>');
$page->addContent('<p></p>');
$page->addContent('<p></p>');
$page->addContent('<p></p>');
$page->addContent('<p></p>');
$page->addContent('<p></p>');
$page->addContent('<p></p>');
$page->addContent('<p></p>');
// H6.9 (opdrachten)
$page->nextSubChapter();
$page->addAssignments(6);
$page->printAll();
?>