JavaScript Bedingte Anweisungen: Kontrollfluss meistern

Einführung

In diesem Lab lernen Sie, wie Sie bedingte Anweisungen (conditional statements) in JavaScript verwenden. Bedingte Anweisungen sind ein grundlegender Bestandteil der Programmierung, der es Ihnen ermöglicht, unterschiedliche Codeblöcke auszuführen, je nachdem, ob eine bestimmte Bedingung wahr oder falsch ist. Dies ermöglicht es Ihnen, dynamische und reaktionsfähige Anwendungen zu erstellen, die Entscheidungen treffen und ihr Verhalten entsprechend ändern können.

Wir werden die folgenden Schlüsselkonzepte behandeln:

Die if-Anweisung, um Code auszuführen, wenn eine Bedingung wahr ist.
Die else-Klausel, um einen alternativen Pfad bereitzustellen.
Die else if-Anweisung, um mehrere Bedingungen zu prüfen.
Den Unterschied zwischen dem losen Gleichheitsoperator (==) und dem strikten Gleichheitsoperator (===).

Am Ende dieses Labs werden Sie ein einfaches Skript erstellt haben, das zeigt, wie Sie den Fluss Ihres Programms mit diesen wesentlichen Werkzeugen steuern können.

if-Anweisung mit Vergleich schreiben

In diesem Schritt lernen Sie die Verwendung der if-Anweisung, der grundlegendsten bedingten Anweisung in JavaScript. Sie führt einen Codeblock nur aus, wenn eine angegebene Bedingung als true ausgewertet wird.

Die grundlegende Syntax lautet:

if (condition) {
  // Code, der ausgeführt wird, wenn die Bedingung wahr ist
}

Wir erstellen ein Skript, das eine Begrüßung basierend auf der Tageszeit anzeigt. Zuerst prüfen wir, ob es Morgen ist.

Suchen und öffnen Sie im Dateiexplorer auf der linken Seite der WebIDE die Datei script.js.
Fügen Sie den folgenden Code zu script.js hinzu. Dieser Code ermittelt die aktuelle Stunde vom System und ändert den Text des <h1>-Elements auf unserer HTML-Seite, wenn die Stunde kleiner als 12 ist.

const greetingElement = document.getElementById("greeting");
const currentHour = new Date().getHours();

if (currentHour < 12) {
  greetingElement.textContent = "Good Morning!";
}

Speichern Sie die Datei nach dem Hinzufügen des Codes (Sie können Strg+S oder Cmd+S verwenden).
Um das Ergebnis zu sehen, klicken Sie auf den Tab Web 8080 oben in der Benutzeroberfläche. Wenn die aktuelle Zeit vor Mittag ist, sehen Sie die Nachricht "Good Morning!". Andernfalls bleibt die Nachricht "Hello!".

Beispiel für eine JavaScript if-Anweisung

else-Klausel für alternativen Pfad hinzufügen

In diesem Schritt fügen Sie Ihrer if-Anweisung eine else-Klausel hinzu. Die else-Klausel ermöglicht es Ihnen, einen Codeblock anzugeben, der ausgeführt wird, wenn die Bedingung in der if-Anweisung false ist. Dies bietet einen alternativen Pfad für die Logik Ihres Programms.

Die Syntax lautet:

if (condition) {
  // Code, der ausgeführt wird, wenn die Bedingung wahr ist
} else {
  // Code, der ausgeführt wird, wenn die Bedingung falsch ist
}

Wir ändern unser Skript, um eine andere Begrüßung anzuzeigen, wenn es nicht Morgen ist.

Öffnen Sie die Datei script.js erneut im Editor.
Ändern Sie Ihren vorhandenen Code, um einen else-Block einzufügen. Dies setzt die Begrüßung auf "Good Afternoon!", wenn die Bedingung currentHour < 12 falsch ist.

const greetingElement = document.getElementById("greeting");
const currentHour = new Date().getHours();

if (currentHour < 12) {
  greetingElement.textContent = "Good Morning!";
} else {
  greetingElement.textContent = "Good Afternoon!";
}

Speichern Sie die Datei script.js.
Wechseln Sie zum Tab Web 8080, um die Änderungen anzuzeigen. Wenn die Zeit nun nach Mittag ist, ändert sich die Nachricht von "Hello!" zu "Good Afternoon!".

else if für mehrere Bedingungen verwenden

In diesem Schritt lernen Sie die Verwendung der else if-Anweisung zur Behandlung mehrerer Bedingungen. Wenn Sie mehr als zwei mögliche Ergebnisse haben, können Sie mit else if eine Reihe von Bedingungen nacheinander testen.

Die Syntax lautet:

if (condition1) {
  // Code für condition1
} else if (condition2) {
  // Code für condition2
} else {
  // Code, wenn keine Bedingungen erfüllt sind
}

Wir erweitern unser Begrüßungsskript um eine Nachricht für den Abend. Wir definieren "Nachmittag" als vor 18:00 Uhr und "Abend" als jede Zeit danach.

Aktualisieren Sie in der Datei script.js Ihren Code, um eine else if-Bedingung einzufügen. Die Logik lautet nun:
- Wenn die Stunde vor 12 ist, ist es "Morgen".
- Andernfalls, wenn die Stunde vor 18 ist, ist es "Nachmittag".
- Andernfalls ist es "Abend".

const greetingElement = document.getElementById("greeting");
const currentHour = new Date().getHours();

if (currentHour < 12) {
  greetingElement.textContent = "Good Morning!";
} else if (currentHour < 18) {
  greetingElement.textContent = "Good Afternoon!";
} else {
  greetingElement.textContent = "Good Evening!";
}

Speichern Sie die Datei und aktualisieren Sie den Tab Web 8080. Die Begrüßung spiegelt nun korrekt wider, ob es Morgen, Nachmittag oder Abend ist, basierend auf der aktuellen Uhrzeit.

Gleichheitsoperator == in Bedingung anwenden

In diesem Schritt werden wir den Gleichheitsoperator == untersuchen. Dieser Operator, auch bekannt als "loser" oder "abstrakter" Gleichheitsoperator, vergleicht zwei Werte auf Gleichheit, nachdem versucht wurde, sie in einen gemeinsamen Typ zu konvertieren.

Zum Beispiel werden die Zahl 10 und der String '10' als gleich betrachtet, wenn == verwendet wird.

Um dies in Aktion zu sehen, fügen wir unserem Skript einen neuen Code hinzu. Dieser Code hat keinen Einfluss auf die Begrüßung, sondern gibt eine Nachricht in der Entwicklerkonsole des Browsers aus.

Fügen Sie den folgenden Code am Ende Ihrer script.js-Datei hinzu.

let numberValue = 10;
let stringValue = "10";

if (numberValue == stringValue) {
  console.log("The == operator says they are equal!");
}

Speichern Sie die Datei. Um die Ausgabe zu sehen, müssen Sie die Entwicklerkonsole öffnen.
Klicken Sie im Tab Web 8080 mit der rechten Maustaste auf eine beliebige Stelle auf der Seite und wählen Sie "Untersuchen" oder "Element untersuchen". Dadurch werden die Entwicklertools geöffnet.
Klicken Sie in den Entwicklertools auf den Tab "Konsole" (Console). Sie sollten die Nachricht sehen: The == operator says they are equal!. Dies bestätigt, dass JavaScript die Typen vor dem Vergleich konvertiert hat.

Strikte Gleichheit mit === Operator testen

In diesem letzten Schritt lernen Sie den strikten Gleichheitsoperator === kennen. Im Gegensatz zum lockeren Gleichheitsoperator (==) vergleicht der strikte Gleichheitsoperator sowohl den Wert als auch den Typ der Operanden. Er führt keine Typkonvertierung durch.

Dies ist im Allgemeinen der empfohlene Operator für Gleichheitsprüfungen in JavaScript, da er sich vorhersagbarer verhält und hilft, subtile Fehler zu vermeiden.

Wir werden das Beispiel aus dem vorherigen Schritt ändern, um === zu verwenden und den Unterschied zu beobachten.

Fügen Sie den folgenden neuen Codeblock am Ende Ihrer script.js-Datei hinzu.

let numberValueStrict = 10;
let stringValueStrict = "10";

if (numberValueStrict === stringValueStrict) {
  console.log("The === operator says they are equal!");
} else {
  console.log(
    "The === operator says they are NOT equal, because their types are different."
  );
}

Speichern Sie die Datei und schauen Sie erneut in die Entwicklerkonsole im Tab Web 8080. Möglicherweise müssen Sie die Seite aktualisieren.
Dieses Mal sehen Sie die Nachricht: The === operator says they are NOT equal, because their types are different.. Das liegt daran, dass numberValueStrict ein number und stringValueStrict ein string ist, und der ===-Operator erkennt sie korrekt als unterschiedlich.

Developer console showing strict equality comparison result

Zusammenfassung

Herzlichen Glückwunsch zum Abschluss dieses Labs! Sie haben die Grundlagen der bedingten Logik in JavaScript gelernt, eine entscheidende Fähigkeit für jeden Entwickler.

In diesem Lab haben Sie:

Die if-Anweisung verwendet, um Code basierend auf einer einzelnen Bedingung auszuführen.
Eine else-Klausel hinzugefügt, um den alternativen Fall zu behandeln.
else if implementiert, um mehrere, sequentielle Bedingungen zu verwalten.
Den lockeren Gleichheitsoperator (==) verstanden und angewendet, der eine Typkonvertierung durchführt.
Den strikten Gleichheitsoperator (===) verstanden und angewendet, der sowohl Wert als auch Typ prüft und die empfohlene Wahl für die meisten Vergleiche ist.

Die Beherrschung von bedingten Anweisungen ermöglicht es Ihnen, Code zu schreiben, der intelligent, reaktionsschnell und in der Lage ist, eine Vielzahl von Szenarien zu bewältigen.