Les 6: Herhalingen d.m.v. FOR en WHILE

Bij een van de eerste opdrachten hebben we een tabel gemaakt met 8 cellen voorzien van de waardes 1 t/m 8.
Daarna moest je het kwadraat ervan in de individuele cellen zetten. Dat was alleen mogelijk door elke cel apart aan te passen.
D.m.v. een zogenaamde for lus kun je makkelijker de individuele cellen van de tabel wijzigen.

§ 6.1: Herhalingen

Computers zijn goed in 3 taken:

Taken na elkaar uitvoeren - opeenvolgen
Keuzes maken -beslissen (zie hoofdstuk 3 van deze cursus)
Opdrachten eindeloos uitvoeren - herhalen

Deze les gaat over herhalen. We kunnen de computer twee soorten herhalingsopdrachten geven:

Opdrachten met een vast aantal herhalingen (§ 6.2)
Opdrachten die zolang herhalen totdat er aan een bepaalde voorwaarde voldaan is (§ 6.3)

§ 6.2: For

Een for lus is een herhaling die je gebruikt wanneer je weet dat je herhaling een vast aantal keer moet wordt uitgevoerd.
Je gebruikt de for lus dus als je weet dat je een bepaalde code bijvoorbeeld 5x wilt laten herhalen.

Als je de werking zou weergeven via een diagram dan zou dat er als volgt uit zien:

De herhalingslus bestaat uit 3 elementen.

De startwaarde die aangeeft bij welke waarde er begonnen moet worden
De eindwaarde die bepaalt op welk moment de herhaling moet stoppen.
De stapwaarde die aangeeft met hoeveel de teller opgehoogd moet worden na elke herhaling (meestal met 1)

Hieronder zie je een verduidelijking m.b.v. screenshots met uitleg:

Met betrekking tot de syntaxis (schrijfwijze) van de for-lus het volgende:

Je begint met het keyword for
Daarna tussen ronde haken de (start-, eind, en stapwaarden)
De 3 waarden worden gescheiden door een puntkomma ;
De uit te voeren code staat in zijn geheel tussen accolades { }

§ 6.2: While

Een while statement is een herhaling waarbij het niet zeker is wanneer deze eindigt.
Daarom zal de while de code tussen de accolades blijven uitvoeren zolang de voorwaarde/vergelijking, die tussen twee ronde haken () staat waar (true) zal zijn.

Als je de werking zou weergeven via een diagram dan zou dat er als volgt uit zien:

De algemene schrijfwijze is als volgt:

Een while-lus zou bijvoorbeeld goed van pas komen als je de computer de opdracht zou geven om te dobbelen en steeds te blijven gooien totdat er 6 gegooid wordt.
Om bovenstaande te kunnen laten zien is het belangrijk dat je weet hoe je de computer een willekeurig getal in een bepaald bereik kunt laten gooien. Hiervoor gebruiken we de volgende functie:

Bekijk onderstaande code en probeer te begrijpen hoe de while-lus werkt:

Het grote verschil tussen de for en de while ligt dus in het feit dat je bij de for weet hoe lang de lus zal gaan duren voordat de herhaling begonnen is. Terwijl een while uitgevoerd zal blijven totdat er wordt gezegd dat dit niet meer nodig is.

Let op: Als je een voorwaarde hebt die altijd waar zal zijn creëer je een eindeloze lus. Stel dat je bij de while-voorwaarde in bovenstaand voorbeeld het volgende had opgenomen:
while(aantalOgen <= 6)
Dan had je een eindeloze lus gecreëerd. Het het aantalOgen blijft namelijk altijd kleiner of gelijk aan 6 !!!
Als je een eindeloze lus geprogrammeerd hebt dan kan de Browser crashen.

Maak bij het maken van onderstaande opdrachten geen gebruik van kopieren en plakken maar zorg dat je alle code zelf typt!!!!

Opdracht 18:

Maak een nieuwe pagina met de naam les6.html.
Zet de volgende tekst op je pagina: "Geef getal tussen 1 en 25".
Zet daarachter een input van het type text.
Zet een paragraaf onder je input.
Zet een knop met de tekst 'genereer' op je pagina.
Bij een klik op de knop wordt de paragraaf gevuld met de getallen 0 t/m het ingevoerde getal in de tekstbox met spaties tussen de getallen.

Hint: Textbox waarde haal je op d.m.v. de .value code.

Opdracht 19:

Open les6.html
Bij deze opdracht ga je de rij van Fibonacci maken. De rij van Fibonacci begint met de getallen 0 en 1 en vervolgens is elk volgende element van de rij steeds de som van de twee voorgaande elementen. De rij van Fibonacci ziet er dus als volgt uit: 0-1-1-2-3-5-8-13-21-34-etc.
D.m.v. een prompt kun je aan de gebruiker vragen om invoer. Zoek de werking van de prompt op en gebruik vervolgens een prompt om een variable te laten vullen met het aantal keer dat de lus moet worden uitgevoerd.
De uiteindelijke uitvoer is een Fibonacci-rij die uitgevoerd wordt totdat het opgegeven getal in de prompt bereikt of overschreden wordt.

Opdracht 20:

Open les6.html
Zet twee textboxen en een knop op je pagina.
Als je op de knop klikt zal er een willekeurig getal worden gegenereerd worden tussen de twee getallen die zijn ingevoerd in de twee textboxen.
Vervolgens zal de gebruiker via de standaard methode window.prompt een getal kunnen invoeren.
Als het getal het juiste getal is zal de de functie stoppen, als het hoger of lager is zal het programma dat weergeven.

Hint 1: Door middel van Math.floor(Math.random() * (hoogste getal - laagste getal) + laagste getal); kun je een willekeurig getal laten genereren tussen laagste getal en hoogste getal.

Hint 2: Math.floor zorgt er voor dat het getal naar beneden wordt afgerond en Math.random zorgt er voor dat er een willekeurig getal wordt verkregen.