Entdecken Sie logische Operatoren in JavaScript

Einführung

In diesem Lab werden die Teilnehmer die grundlegenden logischen Operatoren in JavaScript durch eine praxisorientierte Webanwendungsexercise erkunden. Das Lab führt die Lernenden durch die Erstellung einer HTML-Datei und die Implementierung praktischer Demonstrationen der logischen Operatoren UND (&&), ODER (||) und NICHT (!), um ein umfassendes Verständnis davon zu vermitteln, wie diese Operatoren in der JavaScript-Programmierung funktionieren.

Durch einen schrittweisen Ansatz werden die Schüler eine interaktive Webseite einrichten, die die Ergebnisse verschiedener logischer Operationen anzeigt, was es ihnen ermöglicht, zu verstehen, wie diese Operatoren Bedingungen auswerten und boolesche Werte zurückgeben. Das Lab betont das praktische Lernen, indem reale Szenarien wie Fahrerlaubnis und Benutzerauthentifizierung verwendet werden, um die Anwendung von logischen Operatoren in JavaScript zu veranschaulichen.

HTML-Datei für die Demonstration logischer Operatoren einrichten

In diesem Schritt erstellen Sie eine einfache HTML-Datei, die als Grundlage für die Demonstration von JavaScript-Logikoperatoren dienen wird. Wir werden eine einfache Webseite-Struktur mit einem Skriptabschnitt einrichten, in dem wir logische Operationen untersuchen werden.

Öffnen Sie die WebIDE und navigieren Sie zum Verzeichnis ~/project. Erstellen Sie eine neue Datei namens logical-operators.html über die WebIDE-Schnittstelle.

Hier ist die anfängliche HTML-Struktur, die Sie verwenden werden:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>JavaScript Logical Operators Demo</title>
  </head>
  <body>
    <h1>Exploring Logical Operators in JavaScript</h1>

    <div id="output"></div>

    <script>
      // We'll add our JavaScript logical operator examples here
    </script>
  </body>
</html>

Lassen Sie uns die wichtigsten Komponenten dieser HTML-Datei analysieren:

Die Deklaration <!DOCTYPE html> gibt an, dass dies eine HTML5-Dokument ist
Wir haben einen Titel und einen Überschrift hinzugefügt, um die Seite zu beschreiben
Die <div id="output"> wird verwendet, um die Ergebnisse unserer logischen Operatoren anzuzeigen
Der <script>-Tag ist der Ort, an dem wir unseren JavaScript-Code schreiben werden

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

Exploring Logical Operators in JavaScript

UND (&&) logische Operation implementieren

In diesem Schritt lernen Sie über den UND (&&)-logischen Operator in JavaScript. Der UND-Operator gibt nur dann true zurück, wenn beide Operanden true sind, andernfalls gibt er false zurück.

Öffnen Sie die Datei logical-operators.html, die Sie im vorherigen Schritt erstellt haben. Fügen Sie innerhalb des <script>-Tags folgenden JavaScript-Code hinzu, um den UND-Operator zu demonstrieren:

// UND (&&) logischer Operator Demonstration
function demonstrateAndOperator() {
  let output = document.getElementById("output");

  // Beispiel 1: Einfache boolesche UND
  let isAdult = true;
  let hasLicense = true;
  let canDrive = isAdult && hasLicense;
  output.innerHTML += `Kann fahren? ${canDrive}<br>`;

  // Beispiel 2: Vergleich mit UND
  let age = 25;
  let hasValidLicense = age >= 18 && age <= 65;
  output.innerHTML += `Gültiges Fahralter? ${hasValidLicense}<br>`;

  // Beispiel 3: Mehrere Bedingungen
  let isMember = true;
  let hasDiscount = true;
  let canGetSpecialOffer = isMember && hasDiscount;
  output.innerHTML += `Sonderangebot erhältlich? ${canGetSpecialOffer}<br>`;
}

// Rufen Sie die Funktion auf, wenn die Seite geladen wird
demonstrateAndOperator();

Lassen Sie uns den UND (&&)-Operator analysieren:

Er gibt nur dann true zurück, wenn beide Bedingungen true sind
Im ersten Beispiel ist canDrive nur dann true, wenn sowohl isAdult als auch hasLicense true sind
Das zweite Beispiel verwendet Vergleichsoperatoren mit UND
Das dritte Beispiel zeigt, wie UND mehrere boolesche Bedingungen kombinieren kann

Beispielausgabe im Browser:

Kann fahren? true
Gültiges Fahralter? true
Sonderangebot erhältlich? true

ODER (||) logische Operation implementieren

In diesem Schritt lernen Sie über den ODER (||)-logischen Operator in JavaScript. Der ODER-Operator gibt true zurück, wenn mindestens ein Operand true ist, andernfalls gibt er false zurück.

Öffnen Sie die Datei logical-operators.html und fügen Sie eine neue Funktion hinzu, um den ODER-Operator innerhalb des <script>-Tags zu demonstrieren:

// ODER (||) logischer Operator Demonstration
function demonstrateOrOperator() {
  let output = document.getElementById("output");

  // Beispiel 1: Einfacher boolescher ODER
  let isWeekend = false;
  let isHoliday = true;
  let canRelax = isWeekend || isHoliday;
  output.innerHTML += `Kann entspannen? ${canRelax}<br>`;

  // Beispiel 2: Vergleich mit ODER
  let age = 16;
  let hasParentalConsent = true;
  let canAttendEvent = age >= 18 || hasParentalConsent;
  output.innerHTML += `Kann Veranstaltung besuchen? ${canAttendEvent}<br>`;

  // Beispiel 3: Mehrere Bedingungen
  let hasCoupon = false;
  let isNewCustomer = true;
  let canGetDiscount = hasCoupon || isNewCustomer;
  output.innerHTML += `Rabatt-eligible? ${canGetDiscount}<br>`;
}

// Rufen Sie die Funktion auf, wenn die Seite geladen wird
demonstrateOrOperator();

Lassen Sie uns den ODER (||)-Operator analysieren:

Er gibt true zurück, wenn mindestens eine Bedingung true ist
Im ersten Beispiel ist canRelax true, weil isHoliday true ist
Das zweite Beispiel zeigt, wie ODER mit Vergleichs- und booleschen Bedingungen verwendet werden kann
Das dritte Beispiel demonstriert die Kombination mehrerer Bedingungen

Beispielausgabe im Browser:

Kann entspannen? true
Kann Veranstaltung besuchen? true
Rabatt-eligible? true

NICHT (!) logische Operation implementieren

In diesem Schritt lernen Sie über den NICHT (!)-logischen Operator in JavaScript. Der NICHT-Operator kehrt den booleschen Wert eines Ausdrucks um, wandelt true in false und false in true um.

Öffnen Sie die Datei logical-operators.html und fügen Sie eine neue Funktion hinzu, um den NICHT-Operator innerhalb des <script>-Tags zu demonstrieren:

// NICHT (!) logischer Operator Demonstration
function demonstrateNotOperator() {
  let output = document.getElementById("output");

  // Beispiel 1: Grundlegende NICHT-Operation
  let isRaining = false;
  let isSunny = !isRaining;
  output.innerHTML += `Ist die Sonne scheint? ${isSunny}<br>`;

  // Beispiel 2: NICHT mit Vergleich
  let age = 16;
  let isAdult = !(age < 18);
  output.innerHTML += `Ist er volljährig? ${isAdult}<br>`;

  // Beispiel 3: Negieren einer komplexen Bedingung
  let hasTicket = true;
  let isCrowded = true;
  let canEnter = !(hasTicket && isCrowded);
  output.innerHTML += `Kann man eintreten? ${canEnter}<br>`;
}

// Rufen Sie die Funktion auf, wenn die Seite geladen wird
demonstrateNotOperator();

Lassen Sie uns den NICHT (!)-Operator analysieren:

Er kehrt den booleschen Wert eines Ausdrucks um
Im ersten Beispiel wird isSunny zu true, weil isRaining false ist
Das zweite Beispiel zeigt, wie NICHT mit einem Vergleich verwendet wird
Das dritte Beispiel demonstriert NICHT mit einer komplexeren Bedingung

Beispielausgabe im Browser:

Ist die Sonne scheint? true
Ist er volljährig? false
Kann man eintreten? false

Logische Operationsergebnisse auf der Webseite anzeigen

In diesem Schritt kombinieren Sie alle logischen Operatoren, die Sie gelernt haben, und erstellen eine umfassende Demonstration, die die Ergebnisse auf der Webseite anzeigt. Wir werden die HTML-Datei ändern, um einen strukturierteren Ansatz zur Darstellung von Ergebnissen logischer Operatoren zu verwenden.

Aktualisieren Sie die Datei logical-operators.html mit dem folgenden vollständigen Code:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>JavaScript Logical Operators Demo</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        max-width: 600px;
        margin: 0 auto;
        padding: 20px;
      }
      .result {
        margin: 10px 0;
        padding: 10px;
        background-color: #f0f0f0;
      }
    </style>
  </head>
  <body>
    <h1>JavaScript Logical Operators Exploration</h1>

    <div id="andResults" class="result">
      <h2>AND (&&) Operator Results</h2>
    </div>

    <div id="orResults" class="result">
      <h2>OR (||) Operator Results</h2>
    </div>

    <div id="notResults" class="result">
      <h2>NOT (!) Operator Results</h2>
    </div>

    <script>
      // Funktion zum Anzeigen von Ergebnissen
      function displayResult(elementId, message) {
        const element = document.getElementById(elementId);
        const resultLine = document.createElement("p");
        resultLine.textContent = message;
        element.appendChild(resultLine);
      }

      // AND (&&) Operator Demonstration
      function demonstrateAndOperator() {
        let isAdult = true;
        let hasLicense = true;
        let canDrive = isAdult && hasLicense;
        displayResult("andResults", `Kann fahren? ${canDrive}`);

        let age = 25;
        let hasValidLicense = age >= 18 && age <= 65;
        displayResult("andResults", `Gültiges Fahralter? ${hasValidLicense}`);
      }

      // OR (||) Operator Demonstration
      function demonstrateOrOperator() {
        let isWeekend = false;
        let isHoliday = true;
        let canRelax = isWeekend || isHoliday;
        displayResult("orResults", `Kann entspannen? ${canRelax}`);

        let age = 16;
        let hasParentalConsent = true;
        let canAttendEvent = age >= 18 || hasParentalConsent;
        displayResult(
          "orResults",
          `Kann Veranstaltung besuchen? ${canAttendEvent}`
        );
      }

      // NOT (!) Operator Demonstration
      function demonstrateNotOperator() {
        let isRaining = false;
        let isSunny = !isRaining;
        displayResult("notResults", `Ist die Sonne scheint? ${isSunny}`);

        let age = 16;
        let isAdult = !(age < 18);
        displayResult("notResults", `Ist er volljährig? ${isAdult}`);
      }

      // Führen Sie alle Demonstrationen aus, wenn die Seite geladen wird
      function runAllDemonstrations() {
        demonstrateAndOperator();
        demonstrateOrOperator();
        demonstrateNotOperator();
      }

      // Rufen Sie die Hauptfunktion auf, wenn die Seite geladen wird
      window.onload = runAllDemonstrations;
    </script>
  </body>
</html>

Wichtige Verbesserungen in dieser Version:

Hinzugefügte stilierte Ergebnisabschnitte für jeden logischen Operator
Erstellung einer displayResult()-Funktion, um die Ergebnisse anzuzeigen
Implementierung einer runAllDemonstrations()-Funktion, um alle Operator-Demonstrationen auszuführen
Hinzufügen von grundlegender CSS, um die Lesbarkeit zu verbessern
Verwendung von window.onload, um sicherzustellen, dass alle Skripte nach dem Laden der Seite ausgeführt werden

Das Beispielausgabe im Browser wird die Ergebnisse für die AND-, OR- und NOT-Operatoren in separaten, stilisierten Abschnitten anzeigen.

Zusammenfassung

In diesem Lab haben die Teilnehmer die logischen Operatoren in JavaScript durch eine praxisorientierte Webanwendungsentwicklung untersucht. Das Lab begann mit der Erstellung einer HTML-Datei mit einem speziellen Ausgabe-Div, um eine strukturierte Umgebung für die Demonstration logischer Operationen einzurichten. Die Teilnehmer lernten über die AND (&&), OR (||) und NOT (!)-Operatoren und implementierten praktische Beispiele, die zeigen, wie diese logischen Operatoren boolesche Ausdrücke auswerten und den Programmfluss steuern.

Der interaktive Ansatz ermöglichte es den Lernenden, das Verhalten jedes logischen Operators zu verstehen, indem sie JavaScript-Code direkt in der HTML-Datei schrieben. Indem sie boolesche Werte manipulierten und Vergleichstechniken verwendeten, erzielten die Teilnehmer Einblicke in die Verwendung von logischen Operatoren zur Entscheidungsfindung unter Bedingungen und zur Erstellung komplexerer logischer Auswertungen in der JavaScript-Programmierung.