For, While en Do While LOOP in JavaScript (met voorbeeld)

Hoe gebruik je Loop?

Loops zijn handig wanneer u dezelfde coderegels herhaaldelijk moet uitvoeren, gedurende een bepaald aantal keren of zolang een specifieke voorwaarde waar is. Stel dat u 100 keer een 'Hallo'-bericht op uw webpagina wilt typen. Natuurlijk moet je dezelfde regel 100 keer kopiëren en plakken. Als u lussen gebruikt, kunt u deze taak in slechts 3 of 4 regels voltooien.

Gebruik lussen in Javascript

Verschillende soorten lussen

Er zijn hoofdzakelijk vier soorten lussen in JavaScript.

  1. for loop
  2. voor/in een lus (uitleg later)
  3. herhalingslus
  4. do… while loop

for loop

Syntax:

for(statement1; statement2; statment3)
{
lines of code to be executed
}
  1. De instructie1 wordt eerst uitgevoerd, zelfs voordat de luscode wordt uitgevoerd. Deze instructie wordt dus normaal gesproken gebruikt om waarden toe te wijzen aan variabelen die binnen de lus worden gebruikt.
  2. De instructie2 is de voorwaarde om de lus uit te voeren.
  3. De instructie3 wordt elke keer uitgevoerd nadat de luscode is uitgevoerd.

Probeer dit zelf:

<html>
<head>
	<script type="text/javascript">
		var students = new Array("John", "Ann", "Aaron", "Edwin", "Elizabeth");
		document.write("<b>Using for loops </b><br />");
		for (i=0;i<students.length;i++)
		{
		document.write(students[i] + "<br />");
		}
	</script>
</head>
<body>
</body>
</html>

herhalingslus

Syntax:

while(condition)
{
lines of code to be executed
}

De “while-lus” wordt uitgevoerd zolang de opgegeven voorwaarde waar is. Binnen de while-lus moet u de instructie opnemen die de lus op een bepaald moment zal beëindigen. Anderwise, zal uw lus nooit eindigen en kan uw browser crashen.

Probeer dit zelf:

<html>
<head>
	<script type="text/javascript">
		document.write("<b>Using while loops </b><br />");
		var i = 0, j = 1, k;
		document.write("Fibonacci series less than 40<br />");
		while(i<40)
		{
			document.write(i + "<br />");
			k = i+j;
			i = j;
			j = k;
		}
	</script>
</head>
<body>
</body>
</html>

do… while loop

Syntax:

do
{
block of code to be executed
} while (condition)

De do…while-lus lijkt sterk op de while-lus. Het enige verschil is dat in de do…while-lus het codeblok één keer wordt uitgevoerd, zelfs voordat de voorwaarde wordt gecontroleerd.

Probeer dit zelf:

<html>
<head>
	<script type="text/javascript">
		document.write("<b>Using do...while loops </b><br />");
		var i = 2;
		document.write("Even numbers less than 20<br />");
		do
		{
			document.write(i + "<br />");
			i = i + 2;
		}while(i<20)
	</script>
</head>
<body>
</body>
</html>