Schleifen verständlich erklärt

Thema in Kurzform

• Mit Schleifen können wir Programm-Anweisungen beliebig oft wiederholen, ohne doppelten Code zu schreiben.
• Es gibt verschiedene Schleifentypen für unterschiedliche EInsatzbereiche.
• Ein häufiger Schleifentyp ist die for-Schleife:

for(var i = 0; i < 4; i++){
        document.write(i); // 0 1 2 3
}

Inhaltsverzeichnis

1. Die for-Schleife
2. while-Schleife
3. do-while-Schleife
4. continue und break
5. Übungen

Die for-Schleife

Wenn wir wissen, wie oft ein bestimmter Programmteil wiederholt werden soll, setzen wir die for-Schleife (auch zählergesteuerte Schleife) ein. Die for-Schleife wird mittels einer Schleifenvariablen gesteuert und lässt sich in drei Teile gliedern.

• Schleifenvariable: Wir deklarieren die Schleifenvariable und setzen einen Startwert für diese fest.
• Schleifenbedingung: Die Schleife wird nur solange wiederholt, wie die festgelegte Schleifenbedingung erfüllt (true) ist.
• Schleifenvariablen-Wert ändern: Nach jedem einzelnen Durchlauf muss die Schleifenvariable geändert werden.

Diese drei Teile bilden zusammen den Schleifenkopf. Zu jeder Schleife gehört außerdem ein Schleifenkörper, der aus Anweisungen besteht, die bei jedem Schleifendurchlauf wiederholt ausgeführt werden.

Eine denkbar einfache for-Schleife sieht beispielsweise so aus:

Die Variable i ist unsere Schleifenvariable, die mit dem Startwert 0 initialisiert wird. Die Bedingung der Schleife lautet i < 10, das heißt, die Schleife läuft solange, wie i kleiner als 10 ist. Nach jedem Schleifendurchlauf wird i um den Wert 1 erhöht (i++). Die einzelnen Teile des Schleifenkopfs werden mit einem Semikolon ; getrennt.

Der Schleifenkörper besteht in unserem Beispiel aus nur einer Anweisung, nämlich den aktuellen Wert der Schleifenvariable durch document.write() am Bildschirm anzuzeigen. Das Resultat sieht damit so aus:

0 1 2 3 4 5 6 7 8 9                    

Die for-Schleife wird auch als kopfgesteuerte Schleife bezeichnet, da wir die gesamte Steuerung in einer einzigen Zeile, dem Schleifenkopf, vornehmen können. Das macht diese Schleife besonders übersichtlich.

In einem Nassi-Shneiderman-Diagramm lässt sich eine for-Schleife schließlich so darstellen:

Endlosschleifen und Niemals-Schleifen

Die drei Teile zur Steuerung einer for-Schleife müssen aufeinander abgestimmt sein. Solche Konstruktionen sollten vermieden werden:

for(i = 0; i < 1; i--){
        document.write("Never ending story");
}

Was bewirkt diese Schleife? Da die Bedingung i < 1 immer true ist, wird die Schleife ewig laufen! Wir haben also eine Endlosschleife erzeugt, die unser Programm zum Absturz bringen wird.

Und wie verhält es sich mit Folgendem?

for(var i = 0; i > 5; i++){
        document.write("Never told story");
}

Genau: Diese Schleife läuft nie ("Niemals-Schleife").

while-Schleife

Auch die while-Schleife hängt von einer Bedingung ab, die zu Beginn festgesetzt wird und in runden Klammern nach dem Schlüsselwort while folgt.

• Die while-Schleife ist bestens geeignet, wenn wir nicht wissen, wie viele Schleifendurchläufe erforderlich sind.

Ein Beispiel:

var i = 0;
while(i < 4){
    i += Math.random(); // Liefere Pseudozufallszahl
    document.write(i + "<br>");
}                

Die Schleife wird wiederholt, solange i kleiner ist als 4. Innerhalb des Schleifenkörpers wird i um einen zufälligen Wert erhöht und ausgegeben:

0.42721342857335065
0.8381096486935742
1.662188871513573
2.390322846511496
2.730925159633697
3.178429594926483
4.005715009341761                    

Das Diagramm sieht ähnlich aus wie bei der for-Schleife:

do-while-Schleife

Bei der do-while-Schleife erfolgt die Prüfung zur Wiederholung erst am Ende der Konstruktion. Das bedeutet:

• Die do-while-Schleife wird auf jeden Fall mindestens einmal durchlaufen.

Für den Einsatz einer do-while-Schleife benötigen wir außerdem das Schlüsselwort do, auf das unmittelbar der Schleifenkörper folgt. Erst zum Schluss folgt while und der Prüfausdruck in den runden Klammern. Darum wird die do-while-Schleife auch als fußgesteuerte Schleifenkonstruktion bezeichnet.

Wir denken uns für dieses Beispiel ein kleines Würfelspiel aus:

var meinezahl = 4;
var zufallszahl;

do{
    zufallszahl = Math.random() * 6 + 1;    // Zufallszahl zwischen 1-6
    zufallszahl = Math.floor(zufallszahl);  // Auf Ganzzahl runden
    document.write(zufallszahl + " ");
}
while(meinezahl != zufallszahl);

Was geht hier ab?

Wir wählen zunächst eine Ganzzahl zwischen 1 - 6 und speichern sie in der Variablen meinezahl ab. Die Variable zufallszahl bleibt zunächst noch ohne Wert, da dieser in der Schleife ja erst noch zufällig "gewürfelt" werden soll.

Unsere Schleife muss mindestens einmal durchlaufen. Dies spiegelt das reale Würfelspiel wider, wo ja auch mindestens einmal gewürfelt wird.

Die Schleife wiederholt sich solange, wie die Werte der Variablen meinezahl und zufallszahl nicht übereinstimmen. Anders formuliert: Die Schleife endet, wenn meinezahl und zufallszahl übereinstimmen.

Zum Schluss noch das Nassi-Shneidermann-Diagramm für die do-while-Schleife:

continue und break

Mit den beiden Anweisungen continue und break können wir auf der Stelle zum nächsten Schleifendurchlauf springen bzw. die Schleife sofort ganz beenden.

continue

Wenn wir innerhalb einer Schleife continue einsetzen, wird der aktuelle Durchlauf abgebrochen und zum nächsten gesprungen.

for(var i = 0; i < 5; i ++){
    if(i == 3){
        continue;
    }
    document.write(i + " ");
}

Ausgabe:

0 1 2 4                   

Merken Sie etwas? Die Zahl 3 fehlt! Das liegt daran, dass der aktuelle Schleifendurchlauf durch continue beendet wird, wenn die Schleifenvariable den Wert 3 annimmt. Dadurch wird die document.write(i) Anweisung einmal nicht ausgeführt.

break

Im Gegensatz zu continue beendet break erbarmungslos sofort die ganze Schleife. Ersetzen wir in unserem Schleifenbeispiel einmal continue mit break und sehen, was passiert:

for(var i = 0; i < 5; i ++){
    if(i == 3){
        break;
    }
    document.write(i + " ");
}

Die Schleife wird beim vierten Durchlauf (i==3) beendet und das Ergebnis sieht so aus:

0 1 2               

Übungen

for(var i = 0; i < 7; i++){
    document.write("Hallo JS 
");
}

var wahrheit = true;
var number = 0;

while(wahrheit == true){
    document.write("X ");
    number += 2;
    if(number > 4){
        wahrheit = false;
    }
}

var i = 0;
var y = 10;

while(i <= y){
    i++;
    y--;
  }
  document.write(i + " " + y);