Zusammenfassung

In dieser Lektion hast du gelernt:

• Ein Handler bekommt das Ereignisobjekt als Argument: function (event) { ... }. event.target ist das Element, an dem das Ereignis passiert ist, sodass eine Funktion mehrere Elemente behandeln kann.
• Attribute, die mit data- beginnen, speichern deine eigenen Daten in Elementen: data-farbe="teal" ist element.dataset.farbe, immer als Text.
• Ereignisse steigen durch die Elemente auf, in denen das Ziel steht, sodass ein Handler an einer Liste Klicks auf alle ihre Einträge behandelt, auch auf später hinzugefügte. event.target.closest("li") findet den angeklickten Eintrag oder gibt null zurück.
• Das Ereignis input kommt nach jeder Änderung des Textes eines Feldes, sodass die Seite reagieren kann, während der Nutzer tippt. change kommt, wenn sich eine Auswahl ändert: der value eines select oder das checked einer Checkbox (true oder false).
• Text hat die Methoden includes(), toLowerCase() und trim(), das die Leerzeichen am Anfang und Ende entfernt.
• keydown kommt bei jeder gedrückten Taste, und event.key sagt, welche es war: "a", "Enter", "Escape", mit Großbuchstaben genau wie geschrieben.
• Ein form wird mit seinem Button zum Abschicken oder mit Enter abgeschickt, und dann bekommt es submit. Rufe im Handler event.preventDefault() auf, sonst lädt der Browser die Seite neu, und alles Getippte ist weg.
• Prüfe, bevor du verwendest, was getippt wurde: leer, zu kurz, keine Zahl (Number.isNaN(), niemals === NaN). Zeige jeden Fehler neben seinem Feld, leere ihn, sobald das Feld richtig ist, und erfülle die Aufgabe des Formulars nur, wenn jedes Feld richtig ist.

In der nächsten Lektion, Checkpoint: Registrierungsformular, wendest du all das in einem Registrierungsformular an, das sich selbst prüft: Es sagt Feld für Feld, was nicht stimmt, und begrüßt den neuen Nutzer, wenn alles richtig ist.

Aber zuerst noch etwas Übung: eine Haftnotiz, die du beschriften und einfärben kannst. script.js ist wieder leer, und du schreibst das ganze Programm selbst.