Herhaling

Herhalen in javascript

De tafel van ...

In het voorbeeld hierboven is onmogelijk te programmeren met de technieken die we tot nu toe geleerd hebben. Je weet van te voren niet welk getal er wordt gekozen waar op je de tafel moet baseren en welke begin en eind waarden worden gekozen. Je ziet wel dat er iedere regel ongeveer gelijke uitvoer is waarin alleen een teller die begint bij de beginwaarde en eindigt bij de eind waarde verander en de uitkomst natuurlijk. De techniek die hier is toegepast is herhaling.

In dit hoofdstuk ga je leren wat er onder herhaling wordt verstaan en hoe je dit gaat gebruiken in javascript. Je gaat kennis maken met de for-lus, een mogelijke structuur waarmee je herhalingen bewerkstelligt. Het programmeren van herhalingen is een tweede basisconcept van programmeren. Zorg weer dat je het volledig begrijpt. Zo niet laat het je uitleggen door medeleerling of docent.

Aan het einde van dit hoofdstuk weet je :

wat een herhaling betekent;
hoe de structuur eruit ziet van een herhaling;
hoe je een herhaling kunt programmeren met een for-lus in javascript in combinatie met html en formulieren;

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

voorbeeld

Je hele leven staat bol van herhalingen en het is niet verwonderlijk dat de ICT wereld niet zelfde lot is beschoren. Herhaling zegt het al. Je doet meerdere keren hetzelfde. Als je een stapel brieven van een postzegel moet voorzien. Dan pak je iedere keer een brief en plak je daar een postzegel op. Je doet niet precies hetzelfde. Je gebruikt een andere brief en een andere postzegel en je gaat daarmee door tot de brieven ( of postzegels ) op zijn. Je herhaalt dus het recept postzegel plakken op een brief. Een belangrijk voorbeeld van herhaling binnen de ICT is het verzenden van een automatisch persoonlijk e-mail bericht aan alle klanten van een winkelbedrijf waarin openstaande rekeningen worden vermeld. Hierin moet een softwareprogramma de lijst van alle klanten benaderen en per klant de naamgegevens, e-mail adres en bovendien deze lijst koppelen aan de lijst van openstaande rekeningen.

In de taal van de informatica kom je in plaats van herhaling ook de term iteratie tegen. De belangrijkste herhalingsstructuur die in bijna alle programmeertalen wordt gebruikt is de for-lus. We zullen het concept duidelijk maken aan de hand van de tafel van het geluksgetal.

voorbeeld

Flowchart

Het maken van een tafel van 7 heeft een herhalend element in zich (gebruik het voorbeeld aan het begin van dit hoofdstuk). Een voorbeeld in de vorm van een flowchart is hier links en een PSD rechts gegeven. Van belang is dat het programma weet met welke herhaling het bezig, daartoe wordt gebruik gemaakt van een teller variabele. Voor het gemak noemen we die nu ook "teller". (In code kom je heel vaak de eenletterige namen "i","j","k" tegen.)
De teller zetten we op 1 (initialisatie).
Dan beginnen we met de lus. Er wordt eerst een controle gedaan of de teller kleiner of gelijk aan 10 is.
Is dat waar dan zal een regel worden afgedrukt.
1×7 = 7
De teller wordt dan 1 opgehoogd en wordt dan 2.
Er wordt weer een controle gedaan of de teller kleiner of gelijk aan 10 is.
Is dat nog steeds waar dan zal weer een regel worden afgedrukt.
De teller wordt weer 1 opgehoogd en wordt dan 3.
etc,..
Als de teller tot 11 is opghoogd dan zorgt de controle of de teller kleiner of gelijk aan 10 voor een onwaarheid en stopt de lus en is het programma klaar.

PSD

Tafel = 7
Teller = 1
Zolang teller <= 10
	Print Teller×Tafel=...
	Teller=Teller+1
Klaar

Elementen van een lus

Samenvattend bestaat een lus dus uit

Initialisatie van een teller
Controle op uitvoer stuk code op basis van een controle op die teller
Het veranderen van de waarde van die teller
Het herhalen van die geheel tot stap 2 niet meer geldt

De for lus in javascript

De tafel van 7 wordt als volgt geprogrammeerd in javascript (Nog even zonder interactiviteit):

  <!DOCTYPE html>
  <html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
  <script language="JavaScript" type="text/javascript">
  <!--
  let tafel = 7;
  let teller; // aanmaak variabele zonder waarde.
  for( teller = 1; teller <= 10; teller++)
  { // begin code per iteratie
   document.write( teller + " is nog niet boven 10. Ik mag door: ");
   document.write( teller + "&times;" + tafel + " = " + (teller*tafel) + "<br/>");
  }
  document.write( teller + " is groter dan 10. Ik ben klaar");
  // einde lus
  //-->
  </script>
  </head>
  <body>
  </body>
  </html>

Van belang in dit voorbeeld is de for(.. ; .. ; ..) {} constructie. Deze for-lus is een van de belangrijkste manieren om een herhalings-lus te programmeren. Niet alleen in javascript maar ook in vele andere programmeertalen. De talen die je in de rest van dit jaar tegenkomt hebben precies dezelfde structuur. Hieronder is de for-lus meer abstract weergegeven:

  for( initialisatie teller; conditie op teller; verandering teller)
  { 
   Uit te voeren code als conditie waar is bevindt zich in dit accolade blok
  }

De code teller++ in het voorbeeld is een verkorte schrijfwijze van teller = teller + 1. Er zijn nog andere verkorte schrijfwijzen (Zie assignement operators) b.v. teller+=10 is een verkorte schrijfwijze van teller = teller + 10.

Opdrachten

Pas het voorbeeld aan zodanig dat de tafel van 7 start met 12×7 en eindigt bij 34×7
Pas het voorbeeld aan zodanig dat de tafel van 7 start met 12×7 en eindigt bij 34×7 waarin de teller in stappen van twee toeneemt.
Maak zelf een een formulier dat precies (zonder foutcontrole (mag natuurlijk wel)) hetzelfde doet als het "tafel van ..." voorbeeld in het begin van dit hoofdstuk. (Je kan natuurlijk de bron van dit document bekijken maar het is verstandig het eerst zelf te proberen.)
De getallen 1 t/m 100 moeten bij elkaar worden opgeteld gebruikmakend van een lus. Gebruik daartoe een variabele "totaal" die je buiten je lus initialiseerd.
1. Wat moet de beginwaarde zijn van "totaal"?
2. Maak een Flowchart en een PSD voor deze herhaling
3. Maak een html document dat per regel aangeeft wat het totaal tot dan toe is.
Zorg voor een formulier met twee invoervelden waarin getallen moeten worden getypt (met foutcontrole). Het programma moet de som uitrekenen van alle getallen startende met het eerste getal tot en met het tweede getal.
Voorzie het document van een foto van een flowchart.
Grafisch deel: Zorg dat er over de diagonalen van je tekenveld vierkantjes van 20 bij 20 pixels worden getekend. Sla de volgende opdracht over.
Zorg voor een formulier met een invoerveld waarin een woord moet worden getypt. Zorg ook voor een uitvoerveld waarin iedere letter van het woord op een nieuwe regel wordt geprint. Klik hier voor een tip.
Voorzie het document van een foto van een flowchart.
Uitdaging: Pál Erdõs (Spreek uit Paul 'Erdeusj' met de klemtoon op de eerste lettergreep) is een Hongaarse wiskundige die de vorige eeuw veel heeft bij gedragen aan de wiskunde. Hij heeft ook prijsvragen uit geschreven. Je moet voor nog niet opgeloste problemen een bewijs leveren. Voor een zijns inziens makkelijk probleem kon je €50 verdienen. Bewijzen voor in zijn ogen moeilijke problemen leverden €1000 op.
Een nog niet opgelost probleem is het volgende. Start met een willekeurig geheel positief getal. Als dit een oneven getal is dan vermenigvuldig je het getal met 3 en tel je er 1 bij op. Is het even dan deel je het door 2. Met de verkregen getallen doe je het zelfde. Het vermoeden is dat je altijd op 1 uitkomt. Probeer eens een programma te schrijven waarin je een willekeurig geheel getal kan invullen. Zorg voor een maximum aantal herhalingen of stop wanneer het getal 1 is bereikt.
Voorzie het document van een foto van een flowchart.