Tastaturevents in der Webanwendung behandeln

Einführung

In diesem Lab lernen die Teilnehmer, wie sie Tastaturevents in einer Webanwendung behandeln, indem sie eine interaktive HTML-Schnittstelle erstellen, die auf die Tastatureingaben des Benutzers reagiert. Das Lab konzentriert sich auf die Implementierung von Event-Handlers wie onkeydown und onkeyup, um die Textfarbe dynamisch zu ändern und die Echtzeit-Tastaturinteraktion zu demonstrieren. Die Teilnehmer beginnen mit der Einrichtung eines strukturierten HTML-Dokuments mit einem Eingabeelement und der Gestaltung, und fügen dann schrittweise JavaScript-Funktionalität hinzu, um Tastaturevents zu erfassen und darauf zu reagieren.

Das Lab bietet einen praxisorientierten Ansatz zum Verständnis der Tastatureventverwaltung und deckt Schlüsseltechniken wie das Erfassen von Tastendrücken, das Ändern von Seitelementen und die Implementierung von Event-Listener ab. Indem sie den schrittweisen Prozess befolgen, gewinnen die Lernenden praktische Erfahrungen bei der Erstellung von reaktiven Webanwendungen, die Tastatureingaben des Benutzers erkennen und darauf reagieren können, und vertiefen ihr Verständnis der Client-seitigen Event-Handling in der Webentwicklung.

HTML-Struktur mit Eingabeelement einrichten

In diesem Schritt erstellen wir die grundlegende HTML-Struktur für unser Tastaturevent-Handling-Lab. Wir legen eine HTML-Datei mit einem Eingabeelement an, das als Ziel für unsere Tastaturevents dienen wird.

Öffnen Sie die WebIDE und erstellen Sie in das Verzeichnis ~/project eine neue Datei namens index.html. Wir beginnen mit der Erstellung eines einfachen HTML5-Dokuments mit einer grundlegenden Struktur und einem Eingabeelement.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Tastaturevents Lab</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        background-color: #f0f0f0;
      }
      .container {
        text-align: center;
        background-color: weiß;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      }
      input {
        padding: 10px;
        font-size: 16px;
        width: 300px;
        margin-bottom: 10px;
      }
      #output {
        margin-top: 10px;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>Tastaturevents Lab</h1>
      <input type="text" id="keyboardInput" placeholder="Type something here" />
      <div id="output"></div>
    </div>
  </body>
</html>

Zergliedern wir die wichtigsten Komponenten dieser HTML-Struktur:

Wir haben eine einfache, zentrierte Layout mit einem Container-Div erstellt.
Ein <input>-Element mit der ID keyboardInput wird als Hauptinteraktionspunkt hinzugefügt.
Ein <div> mit der ID output wird eingefügt, um eventbezogene Informationen anzuzeigen.
Grundlegende CSS-Styles werden hinzugefügt, um das visuelle Erscheinungsbild und das Layout zu verbessern.

Diese initiale Einrichtung bietet eine saubere, benutzerfreundliche Schnittstelle für unsere Tastaturevent-Demonstration. In den folgenden Schritten werden wir JavaScript hinzufügen, um Tastaturevents auf diesem Eingabeelement zu behandeln.

Implementiere das onkeydown-Event, um die Textfarbe zu ändern

In diesem Schritt fügen wir JavaScript hinzu, um den onkeydown-Event-Handler für unser Eingabeelement zu implementieren. Dieses Event wird die Textfarbe ändern, wenn eine Taste gedrückt wird.

Öffnen Sie die Datei index.html in der WebIDE und fügen Sie ein <script>-Tag direkt vor dem schließenden </body>-Tag hinzu, um unseren JavaScript-Code einzubinden:

<script>
  // Holen Sie sich Referenzen auf das Eingabeelement und die Ausgabe-Div
  const inputElement = document.getElementById("keyboardInput");
  const outputElement = document.getElementById("output");

  // Fügen Sie einen onkeydown-Event-Listener hinzu, um die Textfarbe zu ändern
  inputElement.onkeydown = function (event) {
    // Ändern Sie die Textfarbe des Eingabefelds in rot, wenn eine Taste gedrückt wird
    this.style.color = "rot";

    // Zeigen Sie Informationen über die gedrückte Taste an
    outputElement.textContent = `Gedrückte Taste: ${event.key} (Taste-Code: ${event.keyCode})`;
  };
</script>

Zergliedern wir die wichtigsten Teile dieses Codes:

document.getElementById() wird verwendet, um Referenzen auf die Eingabe- und Ausgabeelemente zu erhalten.
inputElement.onkeydown fügt einen Event-Listener für das onkeydown-Event hinzu.
Innerhalb des Event-Handlers:
- this.style.color ='red' ändert die Textfarbe in rot, wenn eine Taste gedrückt wird.
- outputElement.textContent zeigt Informationen über die gedrückte Taste an.

Beispielausgabe, wenn Sie in das Eingabefeld eingeben:

Der Text wird rot, wenn Sie tippen
Die Ausgabe-Div zeigt die zuletzt gedrückte Taste und ihren Taste-Code an

Dies demonstriert, wie das onkeydown-Event funktioniert:

Es wird jedes Mal ausgelöst, wenn eine Taste gedrückt wird
Es ermöglicht den Zugang zu Event-Details wie der gedrückten Taste
Es erlaubt die dynamische Manipulation von Elementstilen

Implementiere das onkeyup-Event, um die ursprüngliche Textfarbe wiederherzustellen

In diesem Schritt fügen wir den onkeyup-Event-Handler hinzu, um die Textfarbe des Eingabefelds in seinen ursprünglichen Zustand zurückzusetzen, wenn die Taste losgelassen wird. Wir werden das vorhandene Skript in der index.html-Datei ändern, um diese Funktionalität hinzuzufügen.

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

<script>
  // Holen Sie sich Referenzen auf das Eingabeelement und die Ausgabe-Div
  const inputElement = document.getElementById("keyboardInput");
  const outputElement = document.getElementById("output");

  // Fügen Sie einen onkeydown-Event-Listener hinzu, um die Textfarbe zu ändern
  inputElement.onkeydown = function (event) {
    // Ändern Sie die Textfarbe des Eingabefelds in rot, wenn eine Taste gedrückt wird
    this.style.color = "rot";

    // Zeigen Sie Informationen über die gedrückte Taste an
    outputElement.textContent = `Gedrückte Taste: ${event.key} (Taste-Code: ${event.keyCode})`;
  };

  // Fügen Sie einen onkeyup-Event-Listener hinzu, um die ursprüngliche Textfarbe wiederherzustellen
  inputElement.onkeyup = function (event) {
    // Setzen Sie die Textfarbe des Eingabefelds auf schwarz, wenn die Taste losgelassen wird
    this.style.color = "schwarz";

    // Aktualisieren Sie die Ausgabe mit Informationen über das Loslassen der Taste
    outputElement.textContent = `Taste losgelassen: ${event.key} (Taste-Code: ${event.keyCode})`;
  };
</script>

Zergliedern wir den neuen onkeyup-Event-Handler:

inputElement.onkeyup fügt einen Event-Listener für das keyup-Event hinzu.
Innerhalb des Event-Handlers:
- this.style.color ='schwarz' setzt die Textfarbe auf schwarz, wenn die Taste losgelassen wird.
- outputElement.textContent zeigt Informationen über das Loslassen der Taste an.

Beispielinteraktion:

Wenn Sie eine Taste drücken, wird der Text rot
Wenn Sie die Taste loslassen, kehrt der Text zurück auf schwarz
Die Ausgabe-Div zeigt Details über sowohl das Drücken als auch das Loslassen der Taste an

Dies demonstriert den Unterschied zwischen den onkeydown- und onkeyup-Events:

onkeydown wird ausgelöst, wenn eine Taste gedrückt wird
onkeyup wird ausgelöst, wenn eine Taste losgelassen wird
Beide Events bieten Zugang zu Tasteinformationen

Fügen Sie einen Window-Onload-Event-Handler hinzu

In diesem Schritt stellen wir den window.onload-Event-Handler vor, um zu demonstrieren, wie JavaScript-Code nach dem vollständigen Laden der gesamten Webanwendung ausgeführt wird. Wir fügen eine Initialisierungsfunktion hinzu, die eine Anfangsmeldung bereitstellt und einige Standardstile einrichtet.

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

<script>
  // Window onload event handler
  window.onload = function () {
    // Holen Sie sich Referenzen auf das Eingabeelement und die Ausgabe-Div
    const inputElement = document.getElementById("keyboardInput");
    const outputElement = document.getElementById("output");

    // Setzen Sie die Anfangsmeldung, wenn die Seite geladen wird
    outputElement.textContent =
      "Seite geladen! Beginnen Sie, im Eingabefeld einzugeben.";
    outputElement.style.color = "grün";

    // Fügen Sie einen onkeydown-Event-Listener hinzu, um die Textfarbe zu ändern
    inputElement.onkeydown = function (event) {
      // Ändern Sie die Textfarbe des Eingabefelds in rot, wenn eine Taste gedrückt wird
      this.style.color = "rot";

      // Zeigen Sie Informationen über die gedrückte Taste an
      outputElement.textContent = `Gedrückte Taste: ${event.key} (Taste-Code: ${event.keyCode})`;
      outputElement.style.color = "blau";
    };

    // Fügen Sie einen onkeyup-Event-Listener hinzu, um die ursprüngliche Textfarbe wiederherzustellen
    inputElement.onkeyup = function (event) {
      // Setzen Sie die Textfarbe des Eingabefelds auf schwarz, wenn die Taste losgelassen wird
      this.style.color = "schwarz";

      // Aktualisieren Sie die Ausgabe mit Informationen über das Loslassen der Taste
      outputElement.textContent = `Taste losgelassen: ${event.key} (Taste-Code: ${event.keyCode})`;
      outputElement.style.color = "grün";
    };
  };
</script>

Wichtige Änderungen in diesem Schritt:

Umgebende vorhandene Event-Handler in die window.onload-Funktion
Hinzufügen einer Anfangsmeldung, wenn die Seite geladen wird
Einführung von Farbänderungen am Ausgabeelement für eine bessere visuelle Rückmeldung

Das window.onload-Event gewährleistet, dass:

Alle Seitelemente vollständig geladen sind, bevor das JavaScript ausgeführt wird
Verhindert Fehler, die auftreten könnten, wenn Skripte vor der Fertigstellung des DOMs ausgeführt werden
Liefert einen zuverlässigen Weg, um die Seitenfunktionalität zu initialisieren

Beispielinteraktion:

Wenn die Seite geladen wird, sehen Sie eine grüne "Seite geladen!"-Nachricht
Tippen ändert die Textfarben und die Ausgabemeldungen
Taste gedrückt zeigt blaue Nachrichten an
Taste losgelassen zeigt grüne Nachrichten an

Testen und Verifizieren von Tastaturevent-Interaktionen

In diesem letzten Schritt testen und verifizieren wir die Tastaturevent-Interaktionen, die wir im gesamten Lab implementiert haben. Wir werden verschiedene Szenarien untersuchen, um zu demonstrieren, wie unsere Event-Handler funktionieren und um ihr Verhalten zu verstehen.

Öffnen Sie die Datei index.html in der WebIDE und stellen Sie sicher, dass Sie das vollständige Skript aus den vorherigen Schritten haben. Jetzt testen wir verschiedene Tastatureingaben:

Interaktion beim Seitenladen
- Wenn die Seite geladen wird, sollten Sie eine grüne Nachricht sehen: "Seite geladen! Beginnen Sie, im Eingabefeld einzugeben."
Interaktionen beim Drücken einer Taste
- Geben Sie eine beliebige Taste im Eingabefeld ein
- Beobachten Sie die folgenden Änderungen:
  - Die Textfarbe ändert sich in rot
  - Die Ausgabemeldung zeigt die gedrückte Taste und ihren Taste-Code an
  - Die Farbe der Ausgabemeldung ändert sich in blau
Interaktionen beim Loslassen einer Taste
- Lassen Sie die Taste los, die Sie gedrückt haben
- Beobachten Sie die folgenden Änderungen:
  - Die Textfarbe kehrt zurück auf schwarz
  - Die Ausgabemeldung zeigt die losgelassene Taste und ihren Taste-Code an
  - Die Farbe der Ausgabemeldung kehrt zurück auf grün

Beispielinteraktionsszenarien:

Szenario 1: Tippen von "Hello"
- Erster 'H' gedrückt: Text wird rot, blaue Ausgabemeldung
- 'H' losgelassen: Text wird schwarz, grüne Ausgabemeldung
- Fortsetzung für jeden Buchstaben...

Szenario 2: Sonderzeichen
- Versuchen Sie Pfeiltasten, Shift, Strg, etc.
- Beobachten Sie, wie verschiedene Tasten Events auslösen

Wichtige Lernpunkte:

onkeydown: Wird ausgelöst, wenn eine Taste gedrückt wird
onkeyup: Wird ausgelöst, wenn eine Taste losgelassen wird
window.onload: Gewährleistet, dass die Seite vollständig geladen ist, bevor die Skripte ausgeführt werden

Um das Lab abzuschließen:

Öffnen Sie die HTML-Datei in einem Webbrowser
Interagieren Sie mit dem Eingabefeld
Beobachten Sie die Farb- und Nachrichtenänderungen
Verifizieren Sie, dass alle Event-Handler wie erwartet funktionieren

Zusammenfassung

In diesem Lab lernen die Teilnehmer, Tastaturevents in einer Webanwendung zu behandeln, indem sie eine interaktive HTML-Schnittstelle mit JavaScript-Event-Listenern erstellen. Das Lab beginnt mit der Einrichtung eines strukturierten HTML-Dokuments, das ein Eingabeelement und eine Ausgabe-Div aufweist, die mit responsivem CSS gestaltet sind, um eine saubere, zentrierte Benutzeroberfläche bereitzustellen. Die Teilnehmer werden Schlüssel-Events behandlungstechniken wie onkeydown und onkeyup erkunden, die die dynamische Manipulation der Textfarbe und das Echtzeit-Events-Tracking ermöglichen.

Die Lernziele konzentrieren sich auf das Verständnis der Browser-Event-Mechanismen, die Implementierung von Event-Listenern und das Erstellen von responsivem Web-Interaktionen. Indem sie die Lab-Schritte durcharbeiten, werden die Entwickler praktische Erfahrungen bei der Erfassung von Tastatureingaben, der dynamischen Modifikation von Seitelementen und der Implementierung von Fenster-Ebene-Event-Handlern sammeln, was grundlegende Fertigkeiten für das Erstellen interaktiver und ansprechender Webanwendungen ist.