Modul 06 · Doppelstunde 3

JavaScript & DOM

Webseiten zum Leben erwecken — mit Variablen, Funktionen, Events und der direkten Manipulation des HTML-Dokuments.

Modul 01

JavaScript Grundlagen

HTML ist das Skelett, CSS das Aussehen — und JavaScript? Das ist das Gehirn. Es macht Webseiten interaktiv: Buttons reagieren, Inhalte ändern sich, Daten werden verarbeitet.

HTML-Datei
→
<script> ... </script>
→
Browser führt aus
<!-- Am Ende des <body>, vor </body>: -->
<script>
  // Dein JavaScript-Code hier
  console.log("Hallo Welt!");
</script>

Die Bausteine

Variablen

Speichern Werte — Zahlen, Texte, Listen, true/false.

↓ Klick für Details

let name = "Max"; — veränderbar.

const pi = 3.14; — nicht veränderbar (Konstante).

var alter = 15; — alte Variante, besser let oder const nutzen.

Faustregel: Immer const, es sei denn der Wert ändert sich — dann let.

Datentypen

String, Number, Boolean, Array, Object — und mehr.

↓ Klick für Details

"Hallo" → String (Text)

42 → Number (Zahl)

true / false → Boolean (Wahrheitswert)

[1, 2, 3] → Array (Liste)

{name: "Max", alter: 15} → Object (Schlüssel-Wert-Paare)

JS ist dynamisch typisiert — Variablen haben keinen festen Typ.

Funktionen

Wiederverwendbare Code-Blöcke, die eine Aufgabe erledigen.

↓ Klick für Details

function gruss(name) { return "Hallo " + name; }

Aufruf: gruss("Max") → "Hallo Max"

Arrow-Function (modern):

const gruss = (name) => "Hallo " + name;

Funktionen sind DAS Kernkonzept — fast alles in JS passiert in Funktionen.

if / else

Entscheidungen treffen: Wenn-Dann-Sonst.

↓ Klick für Details

if (alter >= 18) { ... } else { ... }

Vergleichsoperatoren: === (strikt gleich), !== (strikt ungleich), >, <, >=, <=

Logisch: && (und), || (oder), ! (nicht)

Achtung: == statt === macht Typ-Konvertierung — das führt zu Bugs!

🧪 JavaScript-Konsole

Schreibe JavaScript und drücke Ausführen — wie die echte Browser-Konsole (F12). Probiere die Beispiele aus den Karten!

Konsole
>

Zum Ausprobieren:

let & const (modern)

  • Block-Scope — nur im { }-Block sichtbar
  • const kann nicht neu zugewiesen werden
  • let für Werte, die sich ändern
  • Kein „Hoisting"-Problem
  • Standard seit ES6 (2015)

var (veraltet)

  • Function-Scope — ignoriert { }-Blöcke
  • Kann überall neu zugewiesen werden
  • Wird „gehoisted" (nach oben gezogen)
  • Führt zu schwer findbaren Bugs
  • In neuem Code vermeiden!
Modul 02

Das DOM verstehen

Das Document Object Model ist die Baumstruktur, die der Browser aus eurem HTML erstellt. JavaScript kann diesen Baum lesen, verändern und erweitern — das macht Webseiten dynamisch.

/* So sieht der Browser euren HTML-Code: */

document
└── <html>
    ├── <head>
    │   └── <title> Meine Seite
    └── <body>
        ├── <h1 id="titel"> Hallo Welt
        ├── <p class="intro"> Text...
        └── <button> Klick mich

Elemente finden

querySelector

Findet das erste Element, das zum CSS-Selektor passt.

↓ Klick für Details

document.querySelector("#titel") → findet <h1 id="titel">

document.querySelector(".intro") → findet erstes Element mit Klasse intro

document.querySelector("button") → findet den ersten Button

Nutzt CSS-Selektoren — alles, was ihr in A3 gelernt habt, funktioniert hier!

querySelectorAll

Findet alle passenden Elemente als NodeList.

↓ Klick für Details

document.querySelectorAll("p") → alle Absätze

Ergebnis ist eine NodeList — ähnlich wie ein Array:

const items = document.querySelectorAll("li");

items.forEach(item => { ... });

Eigenschaften ändern

Text, Klassen, Styles, Attribute — alles manipulierbar.

↓ Klick für Details

el.textContent = "Neuer Text";

el.innerHTML = "<strong>Fett</strong>";

el.style.color = "red";

el.classList.add("aktiv");

el.classList.toggle("sichtbar");

classList.toggle() ist perfekt für Ein/Aus-Effekte!

🔬 DOM-Manipulation live

Klicke auf die Buttons und beobachte, was mit dem Element passiert:

Überschrift

Das ist ein Absatz. JavaScript kann mich verändern!

// Klicke einen Button — der Code erscheint hier
Modul 03

Events & Interaktion

Events sind das Herzstück interaktiver Webseiten: Ein Klick, eine Tastatureingabe, ein Scroll — all das sind Events, auf die JavaScript reagieren kann.

Nutzer klickt
→
Browser feuert Event
→
Listener reagiert
→
Funktion wird ausgeführt
// Event-Listener registrieren:
const btn = document.querySelector("#meinButton");

btn.addEventListener("click", function() {
  console.log("Button wurde geklickt!");
});

// Oder als Arrow-Function:
btn.addEventListener("click", () => {
  alert("Klick!");
});

click

Wird ausgelöst, wenn der Nutzer auf ein Element klickt.

↓ Klick für Details

Das häufigste Event. Funktioniert auf allen sichtbaren Elementen.

element.addEventListener("click", handler)

Auch Touch auf Mobilgeräten löst ein click-Event aus.

input / change

Reagiert auf Texteingaben und Formularänderungen.

↓ Klick für Details

"input" → feuert bei jedem Tastendruck (live).

"change" → feuert erst, wenn das Feld den Fokus verliert.

Zugriff auf den Wert: event.target.value

keydown / keyup

Reagiert auf Tastatureingaben.

↓ Klick für Details

document.addEventListener("keydown", (e) => { console.log(e.key); })

e.key gibt den Tastennamen zurück: "Enter", "Escape", "a", etc.

Nützlich für Shortcuts, Spiele, Formular-Navigation.

mouseover / mouseout

Maus betritt / verlässt ein Element.

↓ Klick für Details

Ideal für Hover-Effekte, die per CSS allein nicht reichen.

Alternative: mouseenter / mouseleave — ohne Event-Bubbling.

Tipp: Für reine visuelle Hover-Effekte ist CSS :hover effizienter!

🎯 Event-Playground

Drei Buttons, drei Events — beobachte den Counter und das Event-Log.

0
// Events erscheinen hier...

Elemente dynamisch erstellen

JavaScript kann neue HTML-Elemente erzeugen und ins Dokument einfügen:

// Neues Element erstellen
const card = document.createElement("div");
card.className = "karte";
card.textContent = "Ich bin neu!";

// Ins Dokument einfügen
document.querySelector("#container").appendChild(card);

// Oder mit innerHTML (schneller, aber weniger sicher):
container.innerHTML += '<div class="karte">Noch eine!</div>';
Interaktive Aufgabe

Sortieraufgabe: Was passiert zuerst?

Wenn der Browser eine HTML-Datei mit JavaScript lädt — in welcher Reihenfolge passieren diese Schritte?

☰ CSSOM (CSS-Modell) wird erstellt
☰ Event-Listener warten auf Nutzer-Aktionen
☰ HTML wird heruntergeladen
☰ <script>-Code wird ausgeführt
☰ DOM-Baum wird aus HTML gebaut
Modul 04

Quiz: JavaScript & DOM

7 Fragen — von Grundlagen bis Anwendung.

Nachschlagen

Glossar Flip-Karten

Klicke auf eine Karte, um die Definition aufzudecken.

DOM klicken Document Object Model — die Baumstruktur, die der Browser aus HTML erzeugt. JavaScript greift darüber auf Elemente zu.
Event-Listener klicken Eine Funktion, die auf ein bestimmtes Event (z.B. click) wartet und dann Code ausführt. Registriert mit addEventListener().
querySelector klicken DOM-Methode, die das erste Element findet, das zu einem CSS-Selektor passt. Gibt null zurück, wenn nichts gefunden wird.
const / let klicken Moderne Variablen-Deklarationen. const = Konstante (nicht neu zuweisbar), let = veränderbar. Beide haben Block-Scope.
Arrow Function klicken Kurzschreibweise für Funktionen: (x) => x * 2. Hat kein eigenes this — ideal für Callbacks und Event-Handler.
classList klicken Eigenschaft eines DOM-Elements zum Verwalten von CSS-Klassen. Methoden: add(), remove(), toggle(), contains().
Reflexion

Diskussion

„Öffnet diese Lerneinheit im Browser, drückt F12 und geht in die Konsole. Findet heraus: Wie viele Event-Listener sind auf dieser Seite aktiv? Welche Elemente werden per querySelector angesprochen? Versucht, per Konsole den Seitentitel oder eine Farbe zu ändern."