Skip to main content
JavaScript: Werte, Funktionen und DOM
Alle Lehrpfade5. Web-Grundlagen
beginner+30 XP

JavaScript: Werte, Funktionen und DOM

💡 Die Kernidee im Alltag:

"Interaktion im Browser mit Funktionen und Ereignissen ergänzen."

Konzepte verständlich erklärt (für Einsteiger jeden Alters)

Lernziele

Interaktion im Browser mit Funktionen und Ereignissen ergänzen. Nach dieser Lektion kannst du das Konzept erklären, ein kleines Beispiel umsetzen und typische Grenzen benennen.

Erklärung

JavaScript verarbeitet Werte, Funktionen und Ereignisse. const bindet eine Referenz, let erlaubt Neuzuweisung. DOM-Methoden lesen und ändern Dokumentelemente. Ein Event-Handler reagiert auf Eingaben.

Schrittweises Beispiel

button.addEventListener("click", () => { count += 1; output.textContent = String(count); }) registriert eine Aktion. Bei HTML-Ausgabe ist textContent für Nutztext sicherer als innerHTML.

const button = document.querySelector("button");
const output = document.querySelector("#output");
button.addEventListener("click", () => { output.textContent = "Geklickt"; });

Zusammenfassung

Trenne Zustand, Ereignisbehandlung und Darstellung. Behandle Nutztext als Text.

Lerncheck & Übung

Etwa 30 Minuten · beginner

Das lernst du

  • Erkläre die Kernidee von „JavaScript: Werte, Funktionen und DOM“ in eigenen Worten.
  • Wähle eine passende Technik für einen konkreten Anwendungsfall.
  • Erkenne mindestens eine typische Fehlerquelle.

Voraussetzungen

  • Keine Zugriffsvoraussetzungen. Vorwissen wird in der Erklärung eingeführt.

Häufige Fehler

  • Direktes `innerHTML` mit untrusted Text kann Cross-Site-Scripting verursachen. Der DOM-Code muss erst nach Verfügbarkeit der Elemente laufen.

Wissenscheck

Warum ist `textContent` für Nutztexte oft die bessere Wahl?

Praktische Aufgabe

Schreibe einen Klick-Handler, der „Geklickt“ in ein Element schreibt.

KI-Power-Tipp für Entwickler
Empfohlener Assistent: Optionaler Lernpartner (ohne Verbindung aus dieser Plattform)
Golden Prompt für deinen Editor:
Prüfe meine Erklärung zu „JavaScript: Werte, Funktionen und DOM“: Nenne eine fehlende Annahme und stelle mir eine Gegenfrage.
Qualitäts-Prüfung: Vergleiche die Antwort mit dem Beispiel und prüfe Randfälle eigenständig.

Interaktive Übung & lokaler Testlauf

Schreibe einen Klick-Handler, der „Geklickt“ in ein Element schreibt.

Hinweise auf Wunsch anzeigen
  • Zerlege die Aufgabe in Eingabe, Verarbeitung und erwartete Ausgabe.
  • Prüfe auch einen leeren oder ungültigen Fall.