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).
76 lines
3.7 KiB
Markdown
76 lines
3.7 KiB
Markdown
# 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.
|