JavaScript-Schleifen

Einführung

In diesem Lab lernen Sie, wie Sie Schleifen in JavaScript verwenden. Schleifen sind ein grundlegendes Konzept in der Programmierung, das es Ihnen ermöglicht, einen Codeblock wiederholt auszuführen. Dies ist nützlich für Aufgaben wie das Durchlaufen von Datenlisten oder das Ausführen einer Aktion eine bestimmte Anzahl von Malen.

Sie werden die drei Haupttypen von Schleifen in JavaScript untersuchen:

• for-Schleife: Wiederholt einen Codeblock eine bekannte Anzahl von Malen.
• while-Schleife: Wiederholt einen Codeblock, solange eine bestimmte Bedingung wahr ist.
• do-while-Schleife: Ähnlich wie eine while-Schleife, aber sie führt den Codeblock mindestens einmal aus, bevor sie die Bedingung prüft.

Sie lernen auch, wie Sie die break-Anweisung verwenden, um eine Schleife vorzeitig zu beenden.

Alle Ihre Arbeiten werden in der WebIDE durchgeführt. Sie schreiben JavaScript-Code in der Datei script.js, die bereits in index.html verlinkt ist. Sie können die Ausgabe Ihres Codes sehen, indem Sie im Laborumgebung zum Tab Web 8080 wechseln.

For-Schleife mit Initialisierer und Bedingung erstellen

In diesem Schritt erstellen Sie Ihre erste for-Schleife. Die for-Schleife ist ideal, wenn Sie im Voraus wissen, wie oft Sie eine Aktion wiederholen möchten.

Die grundlegende Syntax einer for-Schleife lautet:
for (Initialisierer; Bedingung; Endausdruck) { // auszuführender Code }

• Initialisierer: let i = 0 ist ein Beispiel. Er wird einmal ganz am Anfang ausgeführt, um eine Zählervariable zu deklarieren und zu initialisieren.
• Bedingung: i < 5 ist ein Beispiel. Dieser Ausdruck wird vor jeder Schleifeniteration geprüft. Wenn er wahr ist, wird die Schleife fortgesetzt; wenn er falsch ist, stoppt die Schleife.

Erstellen wir eine einfache Schleife, die eine Liste von Elementen generiert. Öffnen Sie die Datei script.js im Dateiexplorer auf der linken Seite und fügen Sie den folgenden Code hinzu.

const output = document.getElementById("output");
let htmlContent = "<ul>";

// Diese for-Schleife hat einen Initialisierer (let i = 0) und eine Bedingung (i < 3)
for (let i = 0; i < 3; i++) {
  htmlContent += `<li>Item ${i}</li>`;
}

htmlContent += "</ul>";
output.innerHTML = htmlContent;

In diesem Code:

• let i = 0 initialisiert den Schleifenzähler i mit 0.
• i < 3 ist die Bedingung, die die Schleife am Laufen hält, solange i kleiner als 3 ist.
• i++ ist der Endausdruck, der den Zähler nach jeder Iteration inkrementiert (darauf konzentrieren wir uns im nächsten Schritt).

Nachdem Sie den Code hinzugefügt haben, speichern Sie die Datei. Klicken Sie dann auf den Tab Web 8080, um die Ausgabe anzuzeigen. Sie sollten eine unsortierte Liste mit drei Elementen sehen.

Inkrement in For-Schleife zum Zählen verwenden

In diesem Schritt konzentrieren Sie sich auf den dritten Teil der for-Schleife: den Endausdruck, der typischerweise zur Inkrementierung des Zählers verwendet wird.

Der final-expression (z. B. i++) wird am Ende jeder Schleifeniteration ausgeführt. Er aktualisiert den Schleifenzähler und bringt ihn näher an den Punkt, an dem die Bedingung falsch wird. i++ ist eine gebräuchliche Kurzform für i = i + 1.

Lassen Sie uns die Schleife ändern, um von 1 bis 5 zu zählen. Ersetzen Sie den vorhandenen Code in script.js durch Folgendes:

const output = document.getElementById("output");
let htmlContent = "<h2>Counting from 1 to 5:</h2>";

// Der Endausdruck i++ inkrementiert den Zähler nach jeder Schleife
for (let i = 1; i <= 5; i++) {
  htmlContent += `Count: ${i}<br>`;
}

output.innerHTML = htmlContent;

Beachten Sie die Änderungen:

• Der Initialisierer ist jetzt let i = 1, sodass wir bei 1 zu zählen beginnen.
• Die Bedingung ist i <= 5, sodass die Schleife läuft, solange i kleiner oder gleich 5 ist.
• Der Ausdruck i++ stellt sicher, dass der Zähler bei jeder Iteration erhöht wird.

Speichern Sie die Datei und aktualisieren Sie den Tab Web 8080. Sie sehen, wie sich die Ausgabe zu einer Liste von Zählungen von 1 bis 5 ändert.

While-Schleife für Wiederholungen implementieren

In diesem Schritt lernen Sie die while-Schleife kennen. Eine while-Schleife führt einen Codeblock so lange aus, wie eine bestimmte Bedingung wahr ist.

Die Syntax ist einfacher als bei einer for-Schleife:
while (Bedingung) { // auszuführender Code }

Bei einer while-Schleife müssen Sie die Initialisierung der Zählervariable vor der Schleife und deren Inkrementierung innerhalb der Schleife selbst handhaben. Wenn Sie vergessen, den Zähler zu inkrementieren, führt dies zu einer Endlosschleife, die Ihren Browser zum Absturz bringen kann.

Schreiben wir das vorherige Zählbeispiel mit einer while-Schleife neu. Ersetzen Sie den Code in script.js durch diesen:

const output = document.getElementById("output");
let htmlContent = "<h2>Counting with a while loop:</h2>";

let i = 1; // 1. Initializer
while (i <= 5) {
  // 2. Condition
  htmlContent += `Count: ${i}<br>`;
  i++; // 3. Increment
}

output.innerHTML = htmlContent;

Dieser Code erzielt dasselbe Ergebnis wie die for-Schleife im vorherigen Schritt, jedoch mit einer anderen Struktur. Der Initialisierer, die Bedingung und die Inkrementierung sind nun separate Anweisungen.

Speichern Sie die Datei und überprüfen Sie den Tab Web 8080. Die Ausgabe sollte identisch mit der des vorherigen Schritts sein und zeigt eine andere Methode, um dieselbe Wiederholung zu erreichen.

Do-While-Schleife für mindestens eine Ausführung hinzufügen

In diesem Schritt werden Sie die do-while-Schleife untersuchen. Diese Schleife ist eine Variante der while-Schleife mit einem wesentlichen Unterschied: Die do-while-Schleife führt ihren Codeblock immer mindestens einmal aus, bevor sie die Bedingung prüft.

Die Syntax lautet:
do { // auszuführender Code } while (Bedingung);

Dies ist nützlich, wenn Sie zuerst eine Aktion ausführen und dann entscheiden müssen, ob Sie diese wiederholen sollen. Sehen wir uns dies anhand eines Beispiels an, bei dem die Bedingung anfangs falsch ist.

Ersetzen Sie den Code in script.js durch Folgendes:

const output = document.getElementById("output");
let htmlContent = "<h2>Testing a do-while loop:</h2>";

let i = 10; // Starten Sie mit einem Wert, der die while-Bedingung falsch macht

// Diese Schleife wird einmal ausgeführt, obwohl i nicht kleiner als 5 ist
do {
  htmlContent += `The value of i is: ${i}<br>`;
  i++;
} while (i < 5);

output.innerHTML = htmlContent;

In diesem Beispiel ist die Bedingung i < 5 von Anfang an falsch, da i den Wert 10 hat. Da es sich jedoch um eine do-while-Schleife handelt, wird der Code innerhalb des do-Blocks einmal ausgeführt, bevor die Bedingung geprüft wird.

Speichern Sie die Datei und schauen Sie sich den Tab Web 8080 an. Sie sehen die Meldung "The value of i is: 10", was beweist, dass die Schleife genau einmal ausgeführt wurde.

Schleife mit break-Anweisung verlassen

In diesem Schritt lernen Sie, wie Sie eine Schleife vorzeitig mit der break-Anweisung beenden können. Die break-Anweisung beendet die aktuelle Schleife sofort und überträgt die Kontrolle an die Anweisung, die auf die Schleife folgt.

Dies ist nützlich, wenn Sie in einer Schleife nach etwas suchen und stoppen möchten, sobald Sie es gefunden haben, ohne die restlichen Iterationen abzuschließen.

Verwenden wir eine for-Schleife, die eigentlich 10 Mal laufen soll, aber frühzeitig stoppt, wenn eine bestimmte Bedingung erfüllt ist. Ersetzen Sie den Code in script.js durch diesen:

const output = document.getElementById("output");
let htmlContent = "<h2>Using the break statement:</h2>";

for (let i = 1; i <= 10; i++) {
  if (i === 6) {
    htmlContent += "Found 6! Breaking the loop.<br>";
    break; // Exit the loop immediately
  }
  htmlContent += `Current number is ${i}<br>`;
}

htmlContent += "Loop finished.";
output.innerHTML = htmlContent;

In diesem Code ist die for-Schleife so eingestellt, dass sie von 1 bis 10 zählt. Die if-Anweisung prüft jedoch, ob i gleich 6 ist. Wenn dies der Fall ist, wird die break-Anweisung ausgeführt und die Schleife beendet. Der Code wird die Zahlen 7 bis 10 nicht ausgeben.

Speichern Sie die Datei und betrachten Sie den Tab Web 8080. Sie sehen, dass die Zählung bei 5 stoppt, gefolgt von der Meldung "Breaking the loop".

Zusammenfassung

Herzlichen Glückwunsch zum Abschluss dieses Labs zu JavaScript-Schleifen! Sie haben gelernt, wie Sie den Fluss Ihrer Programme steuern, indem Sie Codeblöcke wiederholen.

In diesem Lab haben Sie Folgendes behandelt:

• Die for-Schleife, die sich perfekt eignet, wenn Sie die Anzahl der Iterationen im Voraus kennen und einen Initialisierer, eine Bedingung und einen abschließenden Ausdruck verwenden.
• Die while-Schleife, die wiederholt wird, solange eine Bedingung wahr ist, und eine manuelle Verwaltung des Zählers erfordert.
• Die do-while-Schleife, die mindestens eine Ausführung des Codeblocks garantiert, bevor die Bedingung geprüft wird.
• Die break-Anweisung, die eine Möglichkeit bietet, jede Schleife vorzeitig basierend auf einer Bedingung zu verlassen.

Das Beherrschen von Schleifen ist ein entscheidender Schritt, um ein versierter JavaScript-Entwickler zu werden. Experimentieren Sie gerne weiter mit dem Code in diesem Lab, um Ihr Verständnis zu festigen.