Events (Auf Klicks und Tastendrücke reagieren)

💡 Die Kernidee im Alltag:

"Webseiten sind interaktiv, weil sie zuhören. Wie eine Türklingel: Sobald jemand den Knopf drückt, ertönt der Gong."

Wie es wirklich funktioniert (Erklärt für 12-Jährige)

Auf einen Klick reagieren in 3 Schritten:

// 1. Button auf der Seite finden
const meinButton = document.querySelector("#klick-mich");

// 2. Einen Wachposten aufstellen (Event Listener)
meinButton.addEventListener("click", () => {
  // 3. Was soll passieren?
  alert("Du hast den Button geklickt!");
});

KI-Power-Tipp für Entwickler

Empfohlener Assistent: Claude 3.5 Sonnet

Golden Prompt für deinen Editor:

Zeige mir, wie man mit JavaScript einen Dark-Mode-Toggle baut, der bei Klick auf einen Button dem <body> die Klasse 'dark' hinzufügt oder entfernt.

Qualitäts-Prüfung: Achte darauf, dass `document.body.classList.toggle('dark')` verwendet wird.

Vorherige Lektion: Funktionen (Kleine Küchenmaschinen: Zutat rein, Ergebnis raus)

Nächste Lektion: Fetch & APIs (Daten aus dem Internet abholen)

Interaktive Übung & lokaler Testlauf

Ergänze den Event-Listener mit `btn.addEventListener('click', () => { alert('Klick!'); });`.