Erstellen eines Ampelsystems mit JavaScript

Einführung

In diesem Projekt lernst du, wie du ein Ampelsystem erstellst, das die Farbe der Lampe nach einem bestimmten Zeitintervall von rot auf grün ändert. Dieses Projekt hilft dir, die Grundlagen von JavaScript zu verstehen und wie du das DOM manipulieren kannst, um verschiedene Elemente basierend auf zeitbasierten Ereignissen anzuzeigen.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

• Wie du eine grundlegende HTML- und JavaScript-Projektstruktur einrichtest
• Wie du eine Funktion implementierst, um die Anzeige der Ampel nach 3 Sekunden auf rot zu ändern
• Wie du eine Funktion implementierst, um die Anzeige der Ampel nach 6 Sekunden auf grün zu ändern
• Wie du die Ausführung der Funktionen für das rote und grüne Licht mithilfe von async/await koordinierst
• Wie du das Ampelsystem testest und sicherstellst, dass es wie erwartet funktioniert

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

• Das DOM mit JavaScript manipulieren, um die Anzeige von HTML-Elementen zu ändern
• setTimeout() verwenden, um zeitbasierte Ereignisse zu planen
• Asynchrone Operationen mit async/await zu verwalten
• Deinen JavaScript-Code zu testen und zu debuggen

Projektstruktur einrichten

In diesem Schritt wirst du die Projektstruktur einrichten und die erforderlichen Dateien und Ordner vorbereiten.

1. Öffne den Editor. Du solltest in dem Verzeichnis /home/labex/project index.html, trafficlights.js und einige Bilddateien sehen.
2. Klicke auf die Schaltfläche Go Live in der unteren rechten Ecke von WebIDE, um das Projekt auszuführen.
3. Öffne "Web 8080" oben in der VM und aktualisiere es manuell, und du wirst die Seite sehen.

Rote-Licht-Funktion implementieren

In diesem Schritt wirst du die Funktion implementieren, um die Lampe auf rot zu ändern.

1. Öffne in der Datei trafficlights.js die Funktion red().
2. Definiere eine Variable oberhalb der Funktion red und gebe ihr einen Anfangswert:

let trafficlightsTimer = 3000;
// function red() {...}

3. Die Funktion red() sollte nach 3 Sekunden die Anzeige der Standardlampe auf none und die Anzeige der roten Lampe auf inline-block ändern.

function red() {
  return new Promise(function (resolve, reject) {
    setTimeout(() => {
      defaultlight.style.display = "none";
      redlight.style.display = "inline-block";
      resolve();
    }, trafficlightsTimer);
  });
}

Grün-Licht-Funktion implementieren

In diesem Schritt wirst du die Funktion implementieren, um die Lampe auf grün zu ändern.

1. Öffne in der Datei trafficlights.js die Funktion green().
2. Die Funktion green() sollte nach 3 Sekunden (6 Sekunden nach dem Seitenladevorgang) die Anzeige der roten Lampe auf none und die Anzeige der grünen Lampe auf inline-block ändern.

function green() {
  return new Promise(function (resolve, reject) {
    setTimeout(() => {
      redlight.style.display = "none";
      greenlight.style.display = "inline-block";
      resolve();
    }, trafficlightsTimer);
  });
}

Ampelfunktionen aufrufen

In diesem Schritt wirst du die Funktion trafficlights() aufrufen, um die Ampelschaltfolge zu starten.

1. Öffne in der Datei trafficlights.js die Funktion trafficlights().
2. Die Funktion trafficlights() sollte die Funktionen red() und green() nacheinander mithilfe der async/await-Syntax aufrufen.

async function trafficlights() {
  await red();
  await green();
}

trafficlights();
module.exports = { trafficlights };

Ampeln testen

1. Speichere die Änderungen in der Datei trafficlights.js.
2. Aktualisiere die Seite in deinem Browser. Du solltest sehen, dass die Ampeln von der Standardlampe auf rot wechseln und dann nach 6 Sekunden auf grün. Das fertige Ergebnis ist wie folgt:

Herzlichen Glückwunsch! Du hast das Projekt "Farbwechselnde Lampe" abgeschlossen. Wenn du Fragen hast oder weitere Hilfe benötigst, kannst du gerne fragen.

Zusammenfassung

Herzlichen Glückwunsch! Du hast dieses Projekt abgeschlossen. Du kannst in LabEx weitere Labore absolvieren, um deine Fähigkeiten zu verbessern.