# Kap 3 — Interaktivität & JavaScript

**Bedient Klausur-Block:** J (nicht-klausurrelevant, Verstehen-Niveau)
**Slide-Budget:** ~30 (90-min, ggf. weniger)
**Aktueller Stand:** 49 Slides → leicht reduzieren + neu sortieren.

## Bogen

Eine Stunde, eine Frage: **„Was passiert, wenn der HTML-Code da ist und nichts mehr funktioniert? Wo kommt das Interaktive her?"**

1. **Eröffner:** Eine statische Website (HTML+CSS) reagiert auf nichts. Klick auf Button → nichts. **JS macht es interaktiv.**
2. **Was ist JS?** Browser-Skriptsprache seit 1995. Heute in jedem Webserver, jeder Mobile-App, vielen Desktop-Apps (Electron).
3. **Variablen, Funktionen, Schleifen:** das Mindeste. Code-Lesen-Niveau.
4. **DOM:** HTML ist im Browser ein Baum. JS kann ihn anfassen.
5. **Events:** User-Aktionen lösen JS-Callbacks aus.
6. **Hands-on:** Dark-Mode-Toggle, To-Do-Liste — kleine Beispiele für ein „Aha".
7. **Frameworks-Vorschau:** React, Vue, Angular — was sind die, wann nimmt man sie?

## Advance Organizer

„Statisch → Dynamisch". HTML+CSS rendert. JS reagiert.

## Folien-Skelett (Vorschlag)

| # | Typ | Titel/Kern | Lernziel | Visualisierung |
|---|-----|-----------|---------|----------------|
| 1 | Cover | Kapitel 3 | — | reuse |
| 2 | Lead | „Statisch ist langweilig" | — | — |
| 3 | Inhalt | Was kann JS, was kann es nicht | J.1 | NEU js-was-kann-es |
| 4 | Inhalt | JS-Timeline (1995, 2009 Node, 2015 ES6) | J.1 | reuse |
| 5 | Inhalt | Wie binde ich JS ein | J.1 | reuse |
| 6 | Inhalt | Die Browser-Konsole (DevTools) | J.1 | reuse js-console |
| 7 | Inhalt | Variablen: let, const, var | J.1 | — |
| 8 | Inhalt | Datentypen (string, number, boolean, ...) | J.1 | — |
| 9 | Inhalt | Arrays | J.1 | reuse js-arrays |
| 10 | Inhalt | Objects | J.1 | reuse js-objects |
| 11 | Inhalt | Funktionen | J.1 | — |
| 12 | Inhalt | Schleifen (for, forEach, map, filter) | J.1 | reuse js-loops |
| 13 | Inhalt | Kontrollstrukturen (if/else) | J.1 | — |
| 14 | Lead | Das DOM | — | — |
| 15 | Inhalt | DOM als Baum | J.2 | reuse dom-tree |
| 16 | Inhalt | Elemente finden (querySelector) | J.2 | reuse js-manipulate |
| 17 | Inhalt | Elemente erzeugen (createElement) | J.2 | reuse js-create |
| 18 | Inhalt | Klassen manipulieren (classList) | J.2 | reuse js-classlist |
| 19 | Lead | Events | — | — |
| 20 | Inhalt | Event-Listener | J.3 | reuse js-event-listener |
| 21 | Inhalt | preventDefault | J.3 | reuse js-preventdefault |
| 22 | Inhalt | Häufige Events (click, input, submit) | J.3 | — |
| 23 | Demo | Dark-Mode-Toggle | J.3 | reuse js-darkmode |
| 24 | Demo | To-Do-Liste | J.3 | reuse js-todo |
| 25 | Inhalt | fetch + JSON | J.1 | reuse js-fetch |
| 26 | Inhalt | localStorage | J.1 | reuse js-localstorage |
| 27 | Lead | Frameworks | — | — |
| 28 | Inhalt | React + Vue + Angular — was sind sie | J.4 | reuse |
| 29 | Inhalt | Library vs Framework | J.4 | NEU library-vs-framework |
| 30 | Selbstlernen | Eigenes Mini-Projekt | alle J | — |

~30 statt 49 Slides. Reduktion durch Wegnehmen der Galerie-Folien für jedes Framework-Logo.

## Streichungs-Liste

Aus aktuellem 03-interaktivitaet-javascript.md (49 Slides):
- Framework-Logo-Galerie-Folien (React-Logo + Vue-Logo + Svelte-Logo + Astro-Logo + Webpack/Vite/Parcel separat) — eine Übersichts-Folie reicht
- Doppelte „Was kann JS"-Folien — eine reicht
- Hands-On-Folien mit langem Code — Code in `assets/code/` als separate Datei, in Folie nur kurzer Auszug

## Visualisierungs-TODO

| Demo | Neu/Reuse |
|------|-----------|
| js-was-kann-es | NEU |
| library-vs-framework | NEU |
| Alle anderen | reuse |

→ 2 neue Demos für Kap 3. Geringes Demo-Investment, dafür gut bestückt aus den 164 vorhandenen Demos.