Jetzt anmelden...

Login
Passwort
Registrieren

JavaScript Tutorial #6

Schleifen verständlich erklärt

Schleifenstrukturen gehören neben den Verzweigungen zu den zentralen Kontrollstrukturen in der Programmierung. Lernen Sie heute ganz einfach, wie Sie Schleifen in JavaScript einsetzen.

Kommentare [0]

Stefan 30.04.2020

Infos zum Artikel

Kategorie JavaScript
Autor Stefan
Datum 30.04.2020

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
}

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:

JavaScript for-Schleife Bestandteile Grafik

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:

JavaScript for-Schleife Nassi-Shneiderman-Diagramm-

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 Bedinung ab, die zu Beginn festgesetzt wird und in runden Klammern nach dem Schlüssekwort while folgt.

Ein wichtiger Unsterschied zur for-Schleife: Die Schleifenvariable wird außerhalb der Schleifenkonstruktion definiert.

  • Die while-Schleife ist bestens geeignet, wenn wir nicht wissen, wieviele 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:

JavaScript while-Schleife Nassi-Shneiderman-Diagramm-

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 ist die do-while-Schleife eine fußgesteuerte Schleifenkonstruktion.

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 Schluß noch das Nassi-Shneidermann-Diagramm für die do-while-Schleife:

JavaScript do-while-Schleife  Nassi-Shneiderman-Diagramm-

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 einmmal 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

einfach

Lassen Sie 7 Mal den Text "Hallo JS" auf dem Bildschirm anzeigen, indem Sie eine for-Schleife verwenden.

Lösung ein-/ausblenden

mittel

Wie häufig wird das "X" am Bildschirm angezeigt?

var wahrheit = true;
var number = 0;

while(wahrheit == true){
    document.write("X ");
    number += 2;
    if(number > 4){
        wahrheit = false;
    }
}
Lösung ein-/ausblenden

schwer

Was wird am Ende des folgenden Codes am Bildschirm angezeigt?

var i = 0;
var y = 10;

while(i <= y){
    i++;
    y--;
  }
  document.write(i + " " + y);
Lösung ein-/ausblenden

Kommentar schreiben

Nur angemeldete und aktivierte Benutzer können kommentieren.

Alle Kommentare

Es gibt bislang noch keine Kommentare zu diesem Thema.

Eigene Funktionen

Hier zeigen wir Ihnen, wie Sie eigene Funktionen schreiben.

Funktionen für Variablen

In PHP stehen verschiedene Funktionen speziell fürs Variablen-Handling bereit.

Schleifen in PHP

Schleifenstrukturen gehören zu den wichtigsten Grundlagen in der Programmierung überhaupt.

FALCONBYTE.NET

Handmade with 🖤️

© 2018-2020 Stefan E. Heller

Impressum | Datenschutz

facebook programmieren lernen twitter programmieren lernen youtube programmieren lernen