diff --git a/slides/223015c/03-interaktivitaet-javascript.md b/slides/223015c/03-interaktivitaet-javascript.md
index 1469e33..9727612 100644
--- a/slides/223015c/03-interaktivitaet-javascript.md
+++ b/slides/223015c/03-interaktivitaet-javascript.md
@@ -14,220 +14,210 @@ title: "Kapitel 3: Interaktivität & JavaScript"
--color-highlight: #d63384;
--color-dimmed: #4a4a6a;
}
-section.invert {
- --color-foreground: #fff;
-}
-section {
- font-size: 1.7rem;
-}
-h1 {
- color: #a02060; /* darker raspberry */
-}
-section.invert h1 {
- color: #fff;
-}
-h2 {
- color: #1f2937; /* dark gray, almost black */
-}
+section.invert { --color-foreground: #fff; }
+section { font-size: 1.7rem; }
+h1 { color: #a02060; }
+section.invert h1 { color: #fff; }
+h2 { color: #1f2937; }
pre {
background: #0f0f23;
color: #d63384;
border-radius: 8px;
border-left: 3px solid #d63384;
}
-pre code {
- background: transparent;
- color: inherit;
-}
+pre code { background: transparent; color: inherit; }
code {
- background: #1a1a2e;
- color: #d63384;
+ background: #0f0f23;
padding: 0.15em 0.4em;
border-radius: 4px;
+ font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
-a {
- color: var(--color-highlight);
-}
-section.klausur {
- background: repeating-linear-gradient(
- 135deg,
- #fce4ec,
- #fce4ec 40px,
- #fff 40px,
- #fff 80px
- ) !important;
-}
-@media print {
- section.klausur {
- background: #fce4ec !important;
- }
-}
-section.aufgabe {
- background: #fce4ec !important;
-}
-section.aufgabe footer {
- display: none;
-}
+section code:not(.hljs) { color: #d63384 !important; }
+section code.hljs { color: #f8f8f8 !important; }
+a { color: var(--color-highlight); }
+section.aufgabe { background: #fce4ec !important; }
+section.aufgabe footer { display: none; }
+section.erklaerung { font-size: 1.1rem; }
+section.erklaerung h1 { font-size: 1.5rem; color: #a02060; margin-bottom: 0.3rem; }
-
-
-
-
-
-
-
-# Grundlagen IT- und Internettechnik
-
-**223015c** · Modul "Technik 1" · 1. Semester
-Digital- und Medienwirtschaft
-Hochschule der Medien Stuttgart
-
-**Sommersemester 2026**
-
-[https://librete.ch/hdm/223015c/](https://librete.ch/hdm/223015c/)
-
----
-
-
-
-
-
-
----
-
-# Kapitel 3 – 24.01.2026
+# Kapitel 3
## Interaktivität & JavaScript
----
+
---
-# Teil 1: JavaScript-Grundlagen
-## Die Sprache des Webs
+# „Statisch ist langweilig"
+
+
---
-# Was ist JavaScript?
+# Was kann JavaScript?
-**Die einzige Programmiersprache, die im Browser läuft!**
+| Kann | Beispiel |
+|------|----------|
+| DOM ändern | Element-Text, -Klasse, -Inhalt manipulieren |
+| Events behandeln | Klick, Tastendruck, Scroll, Submit |
+| Daten holen | `fetch()` API-Anfragen |
+| Daten lokal speichern | `localStorage`, `sessionStorage` |
+| Animationen | `requestAnimationFrame`, CSS-Animationen triggern |
+| Web-APIs nutzen | Geolocation, Camera, Audio, Notification |
-- **1995:** In 10 Tagen entwickelt (Brendan Eich, Netscape)
-- **Heute:** Überall – Browser, Server, Apps, IoT
-
-**Nicht verwechseln:**
-- Java ≠ JavaScript (komplett unterschiedlich!)
-- "JavaScript ist zu Java wie Carpet zu Car"
+**Aus Sicherheitsgründen NICHT:** willkürlich Dateien auf der Platte lesen/schreiben.
---
# JavaScript-Timeline
-| Jahr | Meilenstein |
-|------|-------------|
-| **1995** | JavaScript erfunden (Netscape) |
-| **1997** | ECMAScript-Standard (ECMA-262) |
-| **2005** | AJAX revolutioniert Web (Gmail, Google Maps) |
-| **2008** | V8 Engine (Chrome) – JS wird schnell |
-| **2009** | Node.js – JS auf dem Server |
-| **2015** | ES6 – Modernes JavaScript |
+| Jahr | Was |
+|------|-----|
+| **1995** | Brendan Eich entwickelt JS in 10 Tagen für Netscape |
+| 1997 | ECMAScript-1 standardisiert (offizieller Name) |
+| 2009 | **Node.js** — JS auch außerhalb des Browsers |
+| **2015** | ES6 (große Erneuerung: `let`, `const`, arrow functions, classes, modules) |
+| 2017+ | jährliche Updates (ES2017, ES2018, …) |
+| heute | TypeScript als statisch-getypter Aufsatz |
+
+JS ist die **am weitesten verbreitete** Programmiersprache der Welt.
---
# JavaScript einbinden
-**Option 1: Externe Datei (empfohlen!)**
```html
-
-
-
-
-```
+
+
-**Option 2: Inline**
-```html
+
+
+
+
```
-⚠️ Script am **Ende** des `` – damit HTML zuerst lädt!
+**Modern:** als ES-Modul mit `type="module"`. Erlaubt `import` / `export`.
---
-# Die Konsole: Euer bester Freund
+
+
-**Browser DevTools → Console**
-- Windows/Linux: `F12` oder `Strg+Shift+I`
-- Mac: `Cmd+Option+I`
-
-```javascript
-console.log("Hallo Welt!");
-console.log(42);
-console.log("Die Antwort ist:", 42);
-```
-
-**Direkt in der Konsole tippen und Enter!**
+
---
-# Variablen: Daten speichern
-
-
+# Variablen — Daten speichern
```javascript
-// Modern (empfohlen)
-let age = 25; // Kann geändert werden
-const name = "Max"; // Konstante (nicht änderbar)
+let name = "Ada"; // veränderlich
+const PI = 3.14159; // konstant
+var alt = "vermeiden"; // pre-ES6, hat skopen-bugs
-// Alt (vermeiden!)
-var city = "Stuttgart"; // Problematisches Scoping
+// Verändern:
+name = "Grace"; // OK
+PI = 3.0; // FEHLER: const kann nicht überschrieben werden
```
-**Regeln:**
-- Beginnt mit Buchstabe, `_` oder `$`
-- Keine Leerzeichen, keine Sonderzeichen
-- Case-sensitive: `name` ≠ `Name`
+**Faustregel:** `const` als Default. Nur `let`, wenn man umzuweisen plant. Niemals `var`.
---
@@ -235,276 +225,226 @@ var = alte Syntax, hat Scoping-Probleme
# Datentypen
```javascript
-// String (Text)
-const text = "Hello";
-const text2 = 'World';
-const text3 = `Hello ${text2}`; // Template Literal
+let text = "Hallo"; // string
+let zahl = 42; // number
+let ist_an = true; // boolean
+let nichts = null; // null
+let nicht_gesetzt; // undefined
+let liste = [1, 2, 3]; // array
+let objekt = { x: 1 }; // object
-// Number (Zahl)
-const integer = 42;
-const decimal = 3.14;
-
-// Boolean (Wahrheitswert)
-const isTrue = true;
-const isFalse = false;
-
-// Undefined & Null
-let unknown; // undefined
-const nothing = null; // null (bewusst leer)
+typeof text // "string"
+typeof liste // "object" (auch arrays sind objects)
```
+**6 Grund-Typen** + objects/arrays.
+
---
-# Arrays: Listen
+
+
-
-
-```javascript
-const colors = ["red", "green", "blue"];
-
-// Zugriff (0-basiert!)
-console.log(colors[0]); // "red"
-console.log(colors[2]); // "blue"
-
-// Länge
-console.log(colors.length); // 3
-
-// Hinzufügen/Entfernen
-colors.push("yellow"); // Am Ende hinzufügen
-colors.pop(); // Letztes entfernen
-```
+
---
-# Objects: Strukturierte Daten
+
+
-
+
+
+
---
-# Operatoren
+# Funktionen
```javascript
-// Arithmetik
-5 + 3 // 8 (Addition)
-5 - 3 // 2 (Subtraktion)
-5 * 3 // 15 (Multiplikation)
-5 / 3 // 1.666... (Division)
-5 % 3 // 2 (Modulo/Rest)
-5 ** 3 // 125 (Potenz)
-
-// Vergleich
-5 === 3 // false (strikt gleich)
-5 !== 3 // true (strikt ungleich)
-5 > 3 // true
-5 >= 3 // true
-
-// Logisch
-true && false // false (UND)
-true || false // true (ODER)
-!true // false (NICHT)
-```
-
-
-
----
-
-# Hands-On: Variablen & Konsole (20 Min)
-
-**In der Browser-Konsole:**
-
-1. Erstellen Sie Variablen für sich:
- ```javascript
- const name = "Your Name";
- let age = 20;
- const hobbies = ["Hobby1", "Hobby2"];
- ```
-
-2. Gib sie aus:
- ```javascript
- console.log(`I am ${name}, ${age} years old.`);
- console.log("My hobbies:", hobbies);
- ```
-
-3. Erstelle ein `person`-Objekt und greife auf Properties zu
-
----
-
-# Funktionen: Code wiederverwenden
-
-```javascript
-// Funktion definieren
-function greet(name) {
- return `Hello ${name}!`;
+// Function declaration
+function gruessen(name) {
+ return "Hallo " + name;
}
-// Funktion aufrufen
-const message = greet("Max");
-console.log(message); // "Hello Max!"
+// Arrow function (modern, kompakt)
+const gruessen = (name) => "Hallo " + name;
-// Arrow Function (modern)
-const add = (a, b) => {
- return a + b;
+// Mit mehreren Zeilen
+const summe = (a, b) => {
+ const result = a + b;
+ return result;
};
-// Kurzform (bei einem Ausdruck)
-const double = x => x * 2;
+gruessen("Ada") // "Hallo Ada"
+summe(3, 4) // 7
```
---
-# Kontrollstrukturen: if/else
+
+
-```javascript
-const age = 18;
-
-if (age >= 18) {
- console.log("Adult");
-} else if (age >= 16) {
- console.log("Almost adult");
-} else {
- console.log("Minor");
-}
-
-// Ternärer Operator (Kurzform)
-const status = age >= 18 ? "Adult" : "Child";
-```
+
-
----
-
-# Schleifen: Wiederholen
-
-
+Schleifen — Wiederholungen.
```javascript
-// for-Schleife
+// for-Schleife (klassisch)
for (let i = 0; i < 5; i++) {
- console.log(i); // 0, 1, 2, 3, 4
+ console.log(i); // 0, 1, 2, 3, 4
}
-// for...of (Arrays)
-const colors = ["red", "green", "blue"];
-for (const color of colors) {
- console.log(color);
+// for...of (über Array)
+for (const frucht of ["A", "B", "C"]) {
+ console.log(frucht);
}
// forEach (Array-Methode)
-colors.forEach(color => console.log(color));
+[1, 2, 3].forEach(n => console.log(n));
+
+// map (transformieren)
+[1, 2, 3].map(n => n * 2); // [2, 4, 6]
+
+// filter (auswählen)
+[1, 2, 3, 4].filter(n => n > 2); // [3, 4]
```
-
---
-# Nützliche Array-Methoden
+# Kontrollstrukturen
```javascript
-const numbers = [1, 2, 3, 4, 5];
+// if / else
+if (age >= 18) {
+ console.log("erwachsen");
+} else if (age >= 14) {
+ console.log("jugendlich");
+} else {
+ console.log("kind");
+}
-// map: Transformieren
-const doubled = numbers.map(x => x * 2); // [2, 4, 6, 8, 10]
+// Ternärer Operator (Kurzform)
+const status = age >= 18 ? "erwachsen" : "kind";
-// filter: Filtern
-const large = numbers.filter(x => x > 2); // [3, 4, 5]
-
-// find: Erstes Element finden
-const found = numbers.find(x => x > 3); // 4
-
-// reduce: Aggregieren
-const sum = numbers.reduce((acc, x) => acc + x, 0); // 15
+// switch (mehrere Werte)
+switch (browser) {
+ case "Chrome": return "Blink";
+ case "Safari": return "WebKit";
+ case "Firefox": return "Gecko";
+ default: return "unknown";
+}
```
---
-# Hands-On: Funktionen & Schleifen (30 Min)
-
-**Erstellt `script.js`:**
-
-1. Funktion die prüft ob Zahl gerade ist:
- ```javascript
- function isEven(num) { /* your code */ }
- ```
-
-2. Funktion die Array-Summe berechnet
-
-3. FizzBuzz: 1-10 ausgeben, "Fizz" bei /3, "Buzz" bei /5
-
-**Tipp:** `num % 2 === 0` prüft ob gerade
-
----
-
-# Teil 2: Das DOM
-## HTML mit JavaScript manipulieren
+# Das DOM
+## HTML im Speicher des Browsers
+
+
---
-# Was ist das DOM?
+
+
-**D**ocument **O**bject **M**odel
-
-- Browser parst HTML → Baumstruktur
-- JavaScript kann diesen Baum **lesen und ändern**
-- Jedes HTML-Element = ein "Node"
-
-
+
---
@@ -512,539 +452,450 @@ Jedes Element ist ein Objekt
# Elemente finden
```javascript
-// Einzelnes Element (erstes gefundene)
-document.getElementById("meinId");
-document.querySelector(".meineKlasse");
-document.querySelector("nav > a");
+// EIN Element (erstes match)
+const heading = document.querySelector('h1');
+const btn = document.querySelector('#submit-button');
+const card = document.querySelector('.card');
-// Mehrere Elemente (NodeList)
-document.getElementsByClassName("meineKlasse");
-document.querySelectorAll("p");
+// MEHRERE Elemente (NodeList)
+const allButtons = document.querySelectorAll('button');
+const allCards = document.querySelectorAll('.card');
-// Beispiel
-const titel = document.querySelector("h1");
-console.log(titel.textContent); // Text auslesen
+// Iterieren
+allButtons.forEach(btn => console.log(btn.textContent));
```
+`querySelector(...)` nimmt **denselben Selektor wie CSS.**
+
---
-# Elemente manipulieren
+
+
-
+
+
+
---
-# Klassen manipulieren
+
+
-
+
+
+
---
-# Elemente erstellen
-
-
-
-```javascript
-// Neues Element erstellen
-const neuerAbsatz = document.createElement("p");
-neuerAbsatz.textContent = "Ich bin neu!";
-neuerAbsatz.classList.add("highlight");
-
-// In DOM einfügen
-const container = document.querySelector("#container");
-container.appendChild(neuerAbsatz); // Am Ende
-container.prepend(neuerAbsatz); // Am Anfang
-container.insertBefore(neuerAbsatz, anderesElement);
-
-// Element entfernen
-neuerAbsatz.remove();
-```
-
-
-
----
-
-# Hands-On: DOM manipulieren (30 Min)
-
-**HTML:**
-```html
-
-
-```
-
-**Aufgaben (in script.js):**
-
-1. Ändere den Text von `#output`
-2. Füge 5 ``-Elemente zur Liste hinzu (mit Schleife!)
-3. Gib jedem geraden Element eine Klasse `highlight`
-4. Style `.highlight` in CSS (z.B. andere Farbe)
-
----
-
-# Teil 3: Events
-## Auf NutzerInnen reagieren
-
----
-
-# Was sind Events?
-
-**NutzerInnen interagieren mit der Seite:**
-- Klicken
-- Tippen
-- Scrollen
-- Formulare absenden
-
-**JavaScript kann darauf reagieren!**
+# Events
+## Auf User-Aktionen reagieren
---
-# Event Listener
+
+
-
+
+
+
---
-# Wichtige Events
+# Häufige Events
-| Event | Auslöser |
-|-------|----------|
-| `click` | Mausklick |
-| `dblclick` | Doppelklick |
-| `mouseover` / `mouseout` | Maus drüber/weg |
-| `keydown` / `keyup` | Taste gedrückt/losgelassen |
-| `input` | Eingabe in Formularfeld |
-| `change` | Wert geändert (nach Blur) |
-| `submit` | Formular abgesendet |
-| `load` | Seite fertig geladen |
-| `scroll` | Scrollen |
+| Event | Wo | Wann |
+|-------|----|----|
+| `click` | jedes Element | Maus-Klick |
+| `input` | input, textarea, select | bei jedem Tastendruck |
+| `change` | input, select | wenn Wert verändert (bei blur) |
+| `submit` | form | wenn Form abgeschickt wird |
+| `keydown` | document, input | beim Tastendruck |
+| `scroll` | window, scrollbare Elemente | beim Scrollen |
+| `load` | window | wenn Seite + Resources geladen |
+| `DOMContentLoaded` | document | wenn DOM bereit (vor Bildern) |
---
-# Das Event-Objekt
+
+
+
+
+
+
---
-# Event.preventDefault()
+
+
-
-
-```javascript
-// Link ohne Navigation
-const link = document.querySelector("a");
-link.addEventListener("click", function(event) {
- event.preventDefault(); // Verhindert Standardaktion
- console.log("Link geklickt, aber keine Navigation!");
-});
-
-// Formular ohne Absenden
-const form = document.querySelector("form");
-form.addEventListener("submit", function(event) {
- event.preventDefault(); // Seite lädt nicht neu
- console.log("Formular verarbeiten...");
-});
-```
+
-
----
-
-# Beispiel: Toggle Dark Mode
-
-
+Dark-Mode-Toggle — Klassiker.
```javascript
-const toggleButton = document.querySelector("#darkModeToggle");
+const toggle = document.querySelector('#darkmode-toggle');
const body = document.body;
-toggleButton.addEventListener("click", () => {
- body.classList.toggle("dark-mode");
-
- // Button-Text ändern
- if (body.classList.contains("dark-mode")) {
- toggleButton.textContent = "☀️ Light Mode";
- } else {
- toggleButton.textContent = "🌙 Dark Mode";
- }
+toggle.addEventListener('click', () => {
+ body.classList.toggle('dark-mode');
});
```
+CSS:
```css
-.dark-mode {
- background: #1a1a1a;
- color: #eee;
+body.dark-mode {
+ background: #1a1a2e;
+ color: #fff;
}
```
-
---
-# Hands-On: Interaktive Features (45 Min)
+
+
-**Baut in eure Seite ein:**
-
-1. **Dark Mode Toggle** – Button toggelt Klasse auf `body`
-2. **Accordion/FAQ** – Klick zeigt/versteckt Antwort
-
-**Tipp:** `classList.toggle()` + CSS `display: none/block`
-
-**Hilfe:** https://codescripsi.es/
+
-
----
-
-
-
-# Teil 4: Alles zusammen
-## Projekt & Ausblick
-
----
-
-# Übung: Interaktive Portfolio-Seite
-
-**Kombiniert eure Bausteine:**
-HTML (Struktur) + CSS (Design) + JavaScript (Interaktivität)
-
----
-
-# Übung: Anforderungen
-
-**Must-Have:**
-- [ ] Semantisches HTML
-- [ ] Responsive CSS
-- [ ] 2 interaktive JS-Features
-
-**Nice-to-Have:** Dark Mode, Animationen, Formular-Validierung
-
-**Zeit:** 60 Minuten
-
----
-
-# Beispiel: Todo-Liste
-
-
+To-Do-Liste — der „Hello World" der Web-Apps.
```javascript
-const form = document.querySelector("#todoForm");
-const input = document.querySelector("#todoInput");
-const list = document.querySelector("#todoList");
+const form = document.querySelector('#todo-form');
+const input = document.querySelector('#todo-input');
+const list = document.querySelector('#todo-list');
-form.addEventListener("submit", function(event) {
- event.preventDefault();
- if (input.value.trim() === "") return;
-
- const li = document.createElement("li");
- li.textContent = input.value;
- li.addEventListener("click", () => li.remove());
-
- list.appendChild(li);
- input.value = "";
+form.addEventListener('submit', (e) => {
+ e.preventDefault();
+ const text = input.value.trim();
+ if (!text) return;
+
+ const li = document.createElement('li');
+ li.textContent = text;
+ list.appendChild(li);
+
+ input.value = '';
});
```
----
-
-# Modernes JavaScript: Kurzer Ausblick
-
-**Was ihr als nächstes lernen könnt:**
-
-| Thema | Beschreibung |
-|-------|--------------|
-| **Fetch API** | Daten von Servern laden |
-| **Async/Await** | Asynchrone Programmierung |
-| **LocalStorage** | Daten im Browser speichern |
-| **Frameworks** | React, Vue, Svelte |
-| **Node.js** | JavaScript auf dem Server |
-
-
---
-# Fetch: Daten laden
+
+
-
+
+
+
---
-# LocalStorage: Daten speichern
+
+
-
+
+
+
---
-# Frontend-Frameworks
-
-**React** (Meta/Facebook)
-```jsx
-function Button() {
- const [count, setCount] = useState(0);
- return ;
-}
-```
-
-**Weitere:** Vue.js, Svelte, Angular
-
-
-
----
-
-
-
-# Ressourcen zum Weiterlernen
-
-- **MDN Web Docs:** https://developer.mozilla.org/de/
-- **freeCodeCamp:** https://freecodecamp.org
-- **The Odin Project:** https://theodinproject.com
-
-**Interaktiv:**
-- https://codescripsi.es/
-
----
-
-
-
-# Tools für die Praxis
-
-**Editoren:** VS Code (empfohlen), WebStorm, Neovim
-
-**Online:** CodePen, StackBlitz
-
-**Versionskontrolle:** Git + GitHub/GitLab
-
----
-
-# Fragen & Abschluss
+# Frameworks
+## Wann braucht man die?
+
+
---
-# Ihr könnt jetzt...
+# React · Vue · Angular · Svelte
-- Den historischen Kontext von IT verstehen
-- Erklären wie das Internet funktioniert
-- HTML-Seiten strukturieren
-- CSS für Layout und Design nutzen
-- JavaScript für Interaktivität einsetzen
-- **Mit EntwicklerInnen auf Augenhöhe sprechen!**
+| Framework | Typ | Stärke |
+|-----------|-----|--------|
+| **React** | Library (mit Ökosystem) | dominierend, große Community |
+| **Vue** | Framework | sanfter Einstieg, gute Doku |
+| **Angular** | Framework | „Enterprise"-Setup, Google |
+| **Svelte** | Compiler | kein Virtual DOM, kleine Bundle |
+| **Astro** | Hybrid | Static-First, Multi-Framework |
+
+Alle: **Komponenten** als Konzept. **State** verändert sich → UI re-rendert.
+
+
---
-# Feedback – Eure Meinung zählt!
+# Library vs. Framework
-Euer ehrliches Feedback hilft mir, den Kurs zu verbessern.
-**Es gibt keine falschen Antworten!**
+| | Library | Framework |
+|--|---------|-----------|
+| Wer ruft | **du** rufst die Library | das Framework ruft **dich** |
+| Beispiel | jQuery, React (offiziell), Lodash | Angular, Vue, Next.js, Astro |
+| Vorteil | mehr Freiheit | mehr Struktur |
+| Nachteil | mehr Setup-Arbeit | weniger Flexibilität |
-- Was hat gut funktioniert?
-- Was könnte besser sein?
-- Welche Themen interessieren euch noch?
+**„Inversion of Control":** Library = du kontrollierst, Framework = es kontrolliert dich.
-*Feedback gerne auch anonym per E-Mail an lb-czechowski@hdm-stuttgart.de*
+
---
-
+
-# Danke!
+# Selbstlernen — eigenes Mini-Projekt
-**Kontakt:** lb-czechowski@hdm-stuttgart.de
+Wähle eines:
-**Ressourcen:**
-- https://nextlevelshit.github.io/html-over-js/
-- https://codescripsi.es/
-- https://nextlevelshit.github.io/web-engineering-mandala/
+**A. Dark-Mode-Toggle** — Button auf einer Seite, der `dark`-Klasse am body togglet. localStorage merkt den Zustand.
+
+**B. To-Do-App** — Form, das neue Items zur Liste hinzufügt. localStorage für Persistenz.
+
+**C. API-Visualisierung** — fetch zu `jsonplaceholder.typicode.com/users` und Daten als Liste rendern.
+
+**Bonus:** mit GitHub Pages deployen → öffentlich zugängliche URL.
+
+
---
-# Lizenz
+# Zusammenfassung
-Diese Präsentation ist lizenziert unter **Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)**
+**Was JS macht:** DOM manipulieren · Events behandeln · Daten holen + speichern.
-Basiert auf Material von:
-- Markus Thamm / Wolfgang Gruel (HdM Stuttgart)
-- Michael Czechowski
+**Was JS NICHT macht (ohne User-Aktion):** willkürliche Datei-/Hardware-Zugriffe.
-Vollständige Lizenz: https://creativecommons.org/licenses/by-sa/4.0/
+**Patterns:** querySelector → manipulate → addEventListener.
+
+**Frameworks (React, Vue, …):** Abstraktion + State + Komponenten — für Projekte ab ~500 Zeilen.
+
+→ **Du hast jetzt:** verstanden wie Daten reisen (Kap 2), wie sie dargestellt werden (HTML+CSS, Kap 1+2), und wie sie *interaktiv* werden (JS, Kap 3). Das ganze moderne Web in drei Kapiteln.
+
+
diff --git a/slides/223015c/klausurfolien.md b/slides/223015c/klausurfolien.md
index 687945c..1858ef4 100644
--- a/slides/223015c/klausurfolien.md
+++ b/slides/223015c/klausurfolien.md
@@ -5,7 +5,7 @@ paginate: true
backgroundColor: #fff
header: "Grundlagen IT- und Internettechnik (223015c)"
footer: "Michael Czechowski – HdM Stuttgart – SoSe 2026"
-title: "Kapitel 1: Geschichte, Grundlagen & HTML"
+title: Grundlagen IT- und Internettechnik
---