while-Schleife – wiederhole Schleifeninhalt solange Bedingung wahr ist

Schauen wir uns die while-Schleife genauer an. Dazu als Erstes eine Begriffseinführung.

Das Wiederholen einer Tätigkeit wird auch iterieren genannt. Die Bedeutung ist simpel – „to iterate“ bedeutet „wiederholen“ im Englischen. Da dieser Begriff bei Schleifen oft vorkommt, sollte man diesen gehört haben.

Die while-Schleife ist die einfachste Form einer Schleife.

Der Aufbau der Schleife:

while (Bedingung) {
    // Code innerhalb der Schleife
}

Solange unsere Bedingung als Ergebnis „wahr“ liefert, wird die Schleife durchlaufen. Sobald die Bedingung „falsch“ ergibt, wird der Code innerhalb der Schleife komplett übersprungen.

let durchgang = 1;
while (durchgang < 4) {
    console.log('Durchgang Nr. ' + durchgang);
    durchgang++;
}

Als Ergebnis liefert das obere Programm in der Konsole folgende Ausgabe:

Einen Durchgang 4 wird es nicht geben, da die Bedingung (< 4> es nicht zulässt.

Ist unsere Anfangsbedingung schon „falsch“, wird die Schleife niemals durchlaufen!

Wäre unsere erste Zeile let durchgang = 5 würde die Schleife also niemals durchlaufen.

Links auf einer Webseite auswerten und ausgeben

Wir wollen nun mit der while-Schleife ein reales Beispiel programmieren. Soll eine Website ausgedruckt werden, gehen die eigentlichen URLs der Links verloren. Diese wollen wir „retten“.

Auf unserer Beispielwebseite haben wir verschiedene Links im HTML-Code wie im folgenden Beispiel zu sehen ist:

<p>Zum HTML lernen einfach unter 
<a href="https://www.html-seminar.de/">HTML Seminar</a> 
oder <a href="https://www.javascript-kurs.de/">JavaScript Kurs</a> 
und zum Lernen von PHP gibt es den 
<a href="https://www.php-kurs.com/">PHP Kurs</a></p>

Am Ende der Website soll eine Liste aller Links durch JavaScript automatisch erstellt werden.

Die Anzahl der Links auf der Seite erhalten wir über das Objekt document:

document.links.length

Und somit haben wir schon unsere Bedingung für die while-Schleife:

let durchgang = 0;
while (durchgang < document.links.length) {
    document.write('<li>' + document.links[durchgang]);
    durchgang++;
}

Der JavaScript-Code muss am Ende der Website kommen (sonst werden die Links noch nicht im DOM-Baum „gezeichnet“ sein).

Als Ergebnis erhalten wir nun folgende Ausgabe:

Einsatz continue – Schleifendurchgänge überspringen

Wollen wir in diesem Beispiel eine bestimmte URL nicht ausgeben wie z.B. www.javascript-kurs.de, können wir die Anweisung continue einsetzen.

Das innere der Schleife wird mit einer Abfrage ergänzt:

while (durchgang < document.links.length) {
    if (document.links[durchgang] == 'https://www.javascript-kurs.de/') {
        durchgang++;
        continue;	
    }
    document.write('<li>' + document.links[durchgang]);
    durchgang++;
}

Unsere Ausgabe überspringt die JavaScript-URL und macht mit der dritten URL weiter:

Schleifen und Arrays

Schleifen bieten sich bei Arrays an. Sehr oft soll mit den Inhalten eines Arrays etwas passieren wie beispielsweise Berechnungen oder Ausgaben. Im folgenden Beispiel lassen wir uns den Inhalt einfach ausgeben.

Dazu benötigen wir ein Array mit dem Inhalt der 4 besten Kinderfilme (einfach selber kreativ werden).

let kinderfilme = ["Bambi", "Heidi", "Biene Maja", "Pinocchio"];

Wir können über die Array-Funktion nun die Anzahl der Elemente ermitteln:

kinderfilme.length

Es erfolgt nun eine Ausgabe in der Konsole. Wir benötigen eine Variable, die unsere Anzahl der Durchgänge zählt und die wir pro Durchlauf erhöhen können. Dazu nutzen wir die Variable „durchgang“, die gleich am Anfang auf 0 gesetzt wird. Diese Variable wird mit der Anzahl der Elemente im Array verglichen und solange diese noch kleiner ist, wird die Schleife durchlaufen. Innerhalb der Schleife wird diese Variable erhöht.

let kinderfilme = ["Bambi", "Heidi", "Biene Maja", "Pinocchio"];
durchgang = 0;
while ( durchgang < kinderfilme.length ) {
	console.log( durchgang );
	console.log( kinderfilme[durchgang]);
	durchgang++;
}

Und im nächsten Kapitel geht es um den Schleifentyp do … while