Verwenden Sie den bedingten Operator in JavaScript

Einführung

In diesem Lab werden die Schüler die Verwendung des bedingten Operators in JavaScript anhand eines praktischen Beispiels erkunden. Das Lab führt die Lernenden durch das Erstellen einer HTML-Datei, das Definieren von Vergleichsvariablen, das Implementieren der Logik des bedingten Operators und das Anzeigen der Ergebnisse mithilfe von document.write.

Die Teilnehmer beginnen mit dem Aufbau einer grundlegenden HTML-Struktur mit einem eingebetteten Skript-Tag und definieren dann Variablen wie Alter, Studentenstatus und Land. Sie werden lernen, wie der bedingte Operator verwendet wird, um präzise bedingte Auswertungen durchzuführen, und verstehen seine Syntax und praktische Anwendung bei der schnellen Entscheidungsfindung für Zuweisungen innerhalb von JavaScript-Code.

HTML-Datei für das Beispiel mit dem bedingten Operator erstellen

In diesem Schritt erstellen Sie eine HTML-Datei, um die Verwendung des bedingten Operators in JavaScript zu demonstrieren. HTML-Dateien bieten eine ausgezeichnete Umgebung zum Schreiben und Testen von JavaScript-Code.

Öffnen Sie die WebIDE und navigieren Sie zum Verzeichnis ~/project. Erstellen Sie eine neue Datei mit dem Namen conditional-operator.html, indem Sie im Dateiexplorer mit der rechten Maustaste klicken und "Neue Datei" auswählen.

Hier ist die grundlegende HTML-Struktur, die Sie verwenden werden, um den bedingten Operator zu erkunden:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Beispiel mit bedingtem Operator</title>
  </head>
  <body>
    <h1>JavaScript-Bedingter Operator-Demo</h1>

    <script>
      // JavaScript-Code wird in späteren Schritten hier hinzugefügt
    </script>
  </body>
</html>

Diese HTML-Datei bietet eine einfache Struktur mit einem Skript-Tag, in dem Sie JavaScript-Code schreiben, um den bedingten Operator zu demonstrieren. Das <script>-Tag ermöglicht es Ihnen, JavaScript direkt in das HTML-Dokument einzubetten.

Beispielausgabe, wenn Sie diese Datei in einem Webbrowser öffnen:

JavaScript-Bedingter Operator-Demo

Sichern Sie die Datei im Verzeichnis ~/project sicher. In den nächsten Schritten fügen Sie JavaScript-Code hinzu, um die Funktionalität des bedingten Operators zu erkunden.

Vergleichsvariablen definieren

In diesem Schritt lernen Sie, wie Sie Variablen für den Vergleich mit dem bedingten Operator definieren. Öffnen Sie die Datei conditional-operator.html, die Sie im vorherigen Schritt erstellt haben, und fügen Sie den folgenden JavaScript-Code innerhalb des <script>-Tags hinzu:

<script>
  // Definieren Sie Variablen für den Vergleich
  let age = 20;
  let isStudent = true;
  let country = "USA";
</script>

Zergliedern wir die Variablen:

age ist eine Zahl, die das Alter einer Person repräsentiert
isStudent ist ein boolescher Wert, der den Studentenstatus angibt
country ist ein String, der das Land der Person repräsentiert

Diese Variablen werden verwendet, um zu demonstrieren, wie der bedingte Operator zum Vergleichen und Entscheiden funktioniert. In den nächsten Schritten verwenden Sie diese Variablen, um bedingte Logik zu erstellen.

Beispielausgabe der Variablenwerte:

age: 20
isStudent: true
country: "USA"

Sichern Sie die Datei nach dem Hinzufügen dieser Variablen sicher. Die Variablen sind nun bereit, um im nächsten Schritt mit dem bedingten Operator verwendet zu werden.

Implementieren Sie die Logik des bedingten Operators

In diesem Schritt lernen Sie, wie Sie den bedingten (ternären) Operator verwenden, um einfache Logik basierend auf den zuvor definierten Variablen zu implementieren. Der bedingte Operator bietet eine präzise Möglichkeit, if-else-Anweisungen in einer einzigen Zeile zu schreiben.

Aktualisieren Sie den <script>-Abschnitt in Ihrer conditional-operator.html-Datei mit dem folgenden Code:

<script>
  // Früher definierte Variablen
  let age = 20;
  let isStudent = true;
  let country = "USA";

  // Beispiele für den bedingten Operator
  let canVote = age >= 18 ? "Stimmberechtigt" : "Nicht stimmberechtigt";

  let studentStatus = isStudent
    ? "Studentenrabatt gilt"
    : "Kein Studentenrabatt";

  let travelMessage = country === "USA" ? "Inlandreise" : "Auslandsreise";
</script>

Zergliedern wir die Syntax des bedingten Operators:

bedingung? wert_wenn_wahr : wert_wenn_falsch
Das erste Beispiel überprüft, ob die Person 18 Jahre oder älter ist
Das zweite Beispiel überprüft den Studentenstatus
Das dritte Beispiel überprüft das Land auf den Reise Typ

Beispielausgabe der Ergebnisse des bedingten Operators:

canVote: "Stimmberechtigt"
studentStatus: "Studentenrabatt gilt"
travelMessage: "Inlandreise"

Der bedingte Operator bietet eine kompakte Möglichkeit, Entscheidungen zu treffen und Werte basierend auf Bedingungen zuzuweisen. Es ist eine präzisere Alternative zu traditionellen if-else-Anweisungen.

Ergebnisse mit `document.write` anzeigen

In diesem Schritt lernen Sie, wie Sie die Ergebnisse Ihrer Logik mit dem bedingten Operator mithilfe von document.write() anzeigen. Mit dieser Methode können Sie Text direkt in das HTML-Dokument ausgeben.

Aktualisieren Sie den <script>-Abschnitt in Ihrer conditional-operator.html-Datei mit dem folgenden Code:

<script>
  // Früher definierte Variablen und bedingte Operatoren
  let age = 20;
  let isStudent = true;
  let country = "USA";

  let canVote = age >= 18 ? "Stimmberechtigt" : "Nicht stimmberechtigt";
  let studentStatus = isStudent
    ? "Studentenrabatt gilt"
    : "Kein Studentenrabatt";
  let travelMessage = country === "USA" ? "Inlandreise" : "Auslandsreise";

  // Ergebnisse mit document.write() anzeigen
  document.write("<h2>Ergebnisse des bedingten Operators</h2>");
  document.write("<p>Stimmrecht: " + canVote + "</p>");
  document.write("<p>Studentenrabatt: " + studentStatus + "</p>");
  document.write("<p>Reisetyp: " + travelMessage + "</p>");
</script>

Wenn Sie diese HTML-Datei in einem Webbrowser öffnen, sehen Sie die Ergebnisse auf der Seite angezeigt. Die document.write()-Methode ermöglicht es Ihnen, HTML-Inhalte direkt auszugeben.

Beispielausgabe im Browser:

Ergebnisse des bedingten Operators
Stimmrecht: Stimmberechtigt
Studentenrabatt: Studentenrabatt gilt
Reisetyp: Inlandreise

Hinweis: Obwohl document.write() einfach zu verwenden ist, wird empfohlen, in Echtanwendungen modernere Methoden wie innerHTML oder textContent zu verwenden.

Die Syntax des bedingten Operators verstehen

In diesem Schritt befassen wir uns eingehender mit der Syntax und Verwendung des bedingten (ternären) Operators in JavaScript. Aktualisieren Sie den <script>-Abschnitt in Ihrer conditional-operator.html-Datei mit dem folgenden umfassenden Beispiel:

<script>
  // Grundlegende Syntax des bedingten Operators
  // bedingung? ausdruck_wenn_wahr : ausdruck_wenn_falsch

  // Beispiel 1: Einfacher Vergleich
  let age = 20;
  let canDrive = age >= 16 ? "Kann fahren" : "Kann nicht fahren";

  // Beispiel 2: Geschachtelter bedingter Operator
  let score = 75;
  let grade =
    score >= 90
      ? "A"
      : score >= 80
        ? "B"
        : score >= 70
          ? "C"
          : score >= 60
            ? "D"
            : "F";

  // Beispiel 3: Bedingter Operator mit Funktionsaufrufen
  function isEven(num) {
    return num % 2 === 0;
  }
  let number = 10;
  let evenOddMessage = isEven(number) ? "Gerade Zahl" : "Ungerade Zahl";

  // Ergebnisse anzeigen
  document.write("<h2>Beispiele für die Syntax des bedingten Operators</h2>");
  document.write("<p>Fahrberechtigung: " + canDrive + "</p>");
  document.write("<p>Note: " + grade + "</p>");
  document.write("<p>Zahlentyp: " + evenOddMessage + "</p>");
</script>

Wichtige Punkte zur Syntax des bedingten Operators:

Grundformat: bedingung? wert_wenn_wahr : wert_wenn_falsch
Kann für mehrere Bedingungen geschachtelt werden
Kann Funktionsaufrufe oder komplexe Ausdrücke enthalten
Liefert eine kompakte Alternative zu if-else-Anweisungen

Beispielausgabe im Browser:

Beispiele für die Syntax des bedingten Operators
Fahrberechtigung: Kann fahren
Note: C
Zahlentyp: Gerade Zahl

Zusammenfassung

In diesem Lab lernen die Teilnehmer, wie sie den bedingten Operator in JavaScript verwenden, indem sie eine HTML-Datei erstellen und praktische Vergleichslogik implementieren. Das Lab führt die Lernenden durch die Einrichtung einer grundlegenden HTML-Struktur mit einem eingebetteten Skript-Tag, die Definition von Variablen für den Vergleich und die Erkundung der Syntax des bedingten Operators.

Der schrittweise Ansatz ermöglicht es den Schülern, zu verstehen, wie dynamische Vergleiche mit Variablen wie Alter, Studentenstatus und Land erstellt werden. Indem das Lab die Funktionalität des bedingten Operators im Kontext der Webanwendung demonstriert, bietet es eine praxisorientierte Methode, um diese essentielle JavaScript-Programmiertechnik zu verstehen, was es den Lernenden ermöglicht, kürzere und effizientere bedingte Anweisungen zu schreiben.