libretech
753afd6aba
kap1 (~32 slides, vs ist 100): bogen 'wie sind wir vom lochkarten-rechenwerk zum HTML-tag im browser gekommen'. struktur: pioniere-galerie reduziert auf 6 personen (lovelace/hollerith/turing/von-neumann/hopper/hamilton), 4 internet-milestones (1969/1971/1983/1989), HTML-anatomie + semantik. streichungen: pro-person-galerie, IBM/NS-vertiefung, framework-logos (gehört kap3), A11y (verschoben nach kap2). 4 NEU demos: kap-c-01-bogen, internet-timeline, dce-cix-karte, html-tags-cheatsheet. kap2 (~50 slides, vs ist 91): bogen 'wie reisen bytes von frankfurt nach stuttgart und wie wird HTML hübsch'. sub-A netzwerk 25 slides (IP/MAC/port-tripel, 4 TCP/IP-schichten + encapsulation, DNS-hierarchie, HTTP-request/response, statuscodes 200/301/404/500, HTTP/1.1/2/3, TCP-handshake, 7-schritte-synthese), sub-B CSS+A11y 25 slides (anatomie/selektoren/spezifizität/box-model/flexbox/grid/responsive/farbe + BFSG-EAA-zeitleiste/POUR/semantik+ARIA/kontrast/keyboard/error-states). streichungen: encapsulation-doppelt, bittorrent/P2P, glossar-folien, IPv6-tiefen. 12 NEU demos (HTTP-anatomien, statuscodes, http-versionen, 7-schritte-master, flexbox/grid-axes, flexbox-vs-grid, bfsg-zeitleiste, pour-diagramm, summary). kap3 (~30 slides, vs ist 49): bogen 'was passiert wenn HTML+CSS da sind und nichts reagiert? JS macht es interaktiv'. variablen/funktionen/schleifen/DOM/events/dark-mode-toggle/to-do/fetch/localStorage. frameworks-vorschau (react/vue/angular) als ÜBERSICHTS-folie statt logo-galerie. JS auf verstehen-niveau (nicht klausurrelevant per vorschlag). streichungen: framework-logo-galerie, doppelte 'was kann JS'-folien, lange hands-on-codes (code in assets/code/). 2 NEU demos: js-was-kann-es, library-vs-framework. reuse-budget: ~150 von 164 vorhandenen demos werden genutzt (a11y/css-selektoren/network-chain/dns/tcp/encap/js-*). NEU-budget: 18 demos total (4+12+2).
3.7 KiB
3.7 KiB
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?"
- Eröffner: Eine statische Website (HTML+CSS) reagiert auf nichts. Klick auf Button → nichts. JS macht es interaktiv.
- Was ist JS? Browser-Skriptsprache seit 1995. Heute in jedem Webserver, jeder Mobile-App, vielen Desktop-Apps (Electron).
- Variablen, Funktionen, Schleifen: das Mindeste. Code-Lesen-Niveau.
- DOM: HTML ist im Browser ein Baum. JS kann ihn anfassen.
- Events: User-Aktionen lösen JS-Callbacks aus.
- Hands-on: Dark-Mode-Toggle, To-Do-Liste — kleine Beispiele für ein „Aha".
- 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.