Vaak wil je een stuk code verschillende keren na elkaar uitvoeren. In plaats van die gelijkaardige opdrachtregels telkens te herhalen, plaatsen we die in een lus.

JavaScript kent verschillende lussen:

  • for: herhaalt een vast aantal keer een codeblok.
  • while: herhaalt een codeblok tot aan een bepaalde voorwaarde is voldaan.

De for lus wordt gebruikt als je op voorhand weet hoeveel keer je een stuk code wilt uitvoeren.

Syntax:

for (variabele = startwaarde; variabele <= eindwaarde; variabele = variabele + toename) {
// Uit te voeren code
}

Voorbeeld:

<body>
<div id="koppen"> </div>
<script>
var koppen = "";
for (kop = 1; kop <= 6; kop++){
koppen += "<h" + kop + "> Dit is een Kop " + kop + "</h" + kop + ">";
}
document.getElementById('koppen').innerHTML = koppen;
</script>
</body>

De while lus voert het codeblok uit tot aan de voorwaarde wordt voldaan.

Syntaxis:

while (variabele <= eindwaarde){
Uit te voeren code
}

Voorbeeld:

<body>
<div id="koppen"> </div>
<script>
var koppen = "";
var kop = 1;
while (kop <= 6){
koppen += "<h" + kop + "> Dit is een Kop " + kop + "</h" + kop + ">";
kop++;
}
document.getElementById('koppen').innerHTML = koppen;
</script>
</body>

De break opdracht

De break opdracht onderbreekt de lus en de aanwezige opdrachten na de lus worden uitgevoerd.

Voorbeeld:

<script>
var koppen = "";
for (kop = 1; kop <= 6; kop++){
if(kop == 3){
break;
}
koppen += "<h" + kop + ">Dit is een Kop " + kop + "</h" + kop + ">";
}
document.getElementById('koppen').innerHTML = koppen;
</script>

Het voorbeeld toont dus enkel voorbeelden van Kop 1 en 2.

De continue opdracht

De continue opdracht onderbreekt de lus maar gaat verder met de volgende lusdoorloop.

Voorbeeld:

<body>
<div id="koppen"> </div>
<script>
var koppen = "";
for (kop = 1; kop <= 6; kop++){
if(kop == 3){
continue;
}
koppen += "<h" + kop + "> Dit is een Kop " + kop + "</h" + kop + ">";
}
document.getElementById('koppen').innerHTML = koppen;
</script>
</body>

Het voorbeeld toont alle Kop voorbeelden, uitgenomen het voorbeeld voor Kop 3 toont hij niet.

Om complexere structuren zoals tabellen met rijen en kolommen op de bouwen, gebruik je een lus binnen een lus. In elke rij plaatsen we een aantal cellen die de kolommen vormen. De buitenste lus doorloopt dan de rijen, de binnenste lus de kolommen. Het gebruik van een lus binnen een lus noemen we lussen nesten.

Een eenvoudige tabel met twee rijen en twee kolommen bestaat uit de volgende HTML code:

Voorbeeld:

<body>
<div id="tabel"> </div>
<script>
var tabel = "<table>";
for(rij = 1; rij <= 7; rij++){
tabel += "<tr>";
for(kolom = 1; kolom <= 10; kolom++){
tabel += "<td>" + String.fromCharCode(64 + kolom) + rij + "</td>";
}
tabel += "</tr>";
}
document.getElementById("tabel").innerHTML = tabel + "</table>";
</script>
</body>

De opdracht String.fromCharCode(ASCII code) zet een getal (ASCII code) om naar een letter (de ASCII code 65 komt overeen met een hoofdletter A).

Tafels van vermenigvuldiging

Maak een HTML pagina met een tekstveld met het id tafelvan en de tag Tafel van.

Plaats achter het tekstveld een knop met de tekst Weergeven. Bij het klikken op de knop Weergeven moet de de functie tafel('tafelvan') uitgevoerd worden.

Plaats daaronder een aanpasbare div tag.

Schrijf een functie waarmee je de tafels van vermenigvuldiging van een getal in een tekstveld met het opgegeven id in de aanpasbare div kunt weergeven. M.a.w.:

Plaats met de opdracht parseInt(document.getElementById(getalid).value) het getal waarvan je de tafel van vermenigvuldiging moet weergeven in een variabele. Daarbij bevat getalid het id tafelvan die je bij het onclick event doorgaf.

Plaats de volledige tafel van vermenigvuldiging in een variabele (de tag om een nieuwe regel te beginnen is
).

Plaats de tafel van vermenigvuldiging in de aanpasbare div tag.

De functie universeler maken

Pas de functie aan zodat je ook het id van de tag waarin de tafel van vermenigvuldiging wordt weergegeven kunt meegeven.

Nu de functie universeler inzetbaar is, plaats je de functie in een afzonderlijk JavaScript bestand.

Voorbeeld: