while- und do while-Schleife (while loop)

Schleifen

Wie fast alle Programmiersprachen hat auch Javascript mehr als ein halbes Dutzend Variationen von Schleifen – Loops – an Bord. Sie haben alle dieselbe Aufgabe: Sie wiederholen eine Aktion.

Die while-Schleife wird eingesetzt, wenn die Zahl der Durchläufe nicht im Vornherein bekannt ist. Die Aktion wird so lange durchgeführt, bis eine Bedingung nicht mehr zutrifft.

while (Bedingung) {
   Anweisungen;
}

Im einfachsten Fall ist die Bedingung an einen Zähler geknüpft, der bei jedem Durchlauf neu gesetzt wird.

Wenn die Bedingung false liefert, endet die Ausführung der while-Schleife und die Kontrolle wird an die Anweisungen nach der while-Schleife übergeben.

while

Auf jeden Fall muss sichergestellt werden, dass die Bedingung irgendwann false wird, ansonsten entsteht eine unendliche Schleife.

Diese Schleife wird vier Mal durchlaufen:

let x = 1; 
while (x < 5) {
    console.log (`Lauf ${x}`);
    x = x + 1; // oder kurz x++
}

Das Skript initialisiert die Variable x auf den Wert 1, bevor die while-Anweisung ausgeführt wird. Die while-Anweisung prüft die Bedingung (x < 5). Da 1 kleiner als 5 ist, durchläuft das Skript die while-Schleife ein erstes Mal.

Die letzte Anweisung im Block der while-Schleife zählt das x um eins herauf, so dass die Schleifenbedingung nach dem vierten Durchlauf nicht mehr zutrifft. In jeder while-Schleife muss die Schleifenbedingung geändert werden – ansonsten würde die Schleife endlos laufen oder der Browser abstürzen.

Das ist nur die einfachste Variante einer while-Schleife, denn die Bedingungen sind meist deutlich komplexer. Wenn obendrein mehr Anweisungen in der while-Schleife ausgeführt werden, verlagert man der Lesbarkeit zuliebe möglichst viele Anweisungen in eine Funktion, damit die whille-Schleife besser nachvollziehbar ist.

Beispiel: while-Schleife bei Benutzereingabe

Das Beispiel nutzt eine zweite zusätzliche Bedingung: die Anzahl der Versuche.

let versuche = 3; // Maximale Versuche

while (password !== "geheim" && versuche > 1) {
	versuche--; // Versuch runterzählen
	document.querySelector("#finaly").innerHTML = `Passwort nicht korrekt. Noch ${versuche} Versuche.`;
	
	// Warte auf eine neue Eingabe vom Nutzer
	return; // Funktion beenden, sodass der User erneut klicken muss
}

Javascript do … while

do {
   Anweisungen;
} while (Bedingung)

Die Anweisungen werden einmal durchgeführt, bevor die Bedingung geprüft wird. Wenn die Bedingung true liefert, werden die Anweisungen erneut ausgeführt. Am Ende jedes Laufs durch die Schleife wird die Bedingung abgefragt. Wenn die Bedingung false liefert, endet die Ausführung und die Kontrolle wird an die Anweisungen hinter der do ... while-Anweisungen übergeben.

Beispiel: do-while zur Berechnung des Binärwerts

Ein Beispiel für die do-while-Schleife ist der Algorithmus zur Berechnung des Binärwerts einer Dezimalzahl. Die dezimale Zahl wird durch 2 geteilt, der dabei verbleibende Rest (0 oder 1) gespeichert, und zwar bis der Dezimalwert 0 wird. Die Schleife muss auf jeden Fall einmal durchlaufen werden, wenn der Binärwert der Zahl 0 ausgerechnet werden soll.

document.querySelector ("input#tobinary").addEventListener ("change", function () {
document.querySelector (".res").innerHTML = "";
document.querySelector (".binary").innerHTML = "";
let y = Math.abs(Number(this.value));
let x = 2;
let binary = "";

do {
	quotient = Math.floor(y/x);
	remainder = y % x;
	document.querySelector(".res").innerHTML += `<tr><td>${y}/2</td>
	                                                 <td>${quotient}</td>
	                                                 <td>Rest${remainder}</td>
	                                             </tr>`;
	binary += remainder;
	y = quotient;
} while (y != 0);

document.querySelector(".binary").innerHTML = 
    `<p>Result ${binary.split("").reverse().join("")}</p>`;

Wäre natürlich viel einfacher, gleich zahl.toString(2) anzusetzen, um den Binärwert auszurechnen. toString() gibt ein Objekt – in diesem Fall die Zahl – als Sting / Zeichenkette zurück. Der optionale Parameter ist die Basis der Operation, also 2 in diesem Beispiel.

break und continue in while-Schleifen

Es gibt immer wieder Ausnahmesituationen, in denen es effizienter ist, die while-Schleife vor ihrem Ende zu verlassen:

• Entweder um den Rest des Code-Blocks auszulassen und sofort den nächsten Schleifendurchlauf zu beginnen,
• oder um die Schleife vorzeit abzubrechen.

Dafür stellt Javascript die Anweisungen break (Schleife sofort abbrechen) und continue (sofort wieder an den Anfang der Schleife) zur Verfügung.

while vs for-loop

Ein großer Teil der Aufgaben des Scriptings auf Webseiten dreht sich um Arrays bzw. Sammlungen (NodeLists) und Strings, deren Länge bekannt ist. for ist oft besser, wenn eine Schleife eine feste Anzahl von Durchläufen hat.

for (let i=0; i < 5; i++) {
   console.log ("i " + i);
}

In einer for-Schleife wird die Variable i in der for-Anweisung deklariert – eine inline-Deklaration. Solche Variablen sind nur innerhalb des for-Loops sichtbar.

for- und while-Schleifen im Vergleich