223015c 03: datum/emoji raus, frage-headings entschärft, du-konsistenz

This commit is contained in:
2026-06-17 10:36:16 +02:00
parent 3d6059c070
commit 2658251bcb
+18 -19
View File
@@ -98,7 +98,7 @@ Hochschule der Medien Stuttgart
<!-- _class: lead -->
# Kapitel 3 – 24.01.2026
# Kapitel 3
## Interaktivität & JavaScript
---
@@ -119,16 +119,15 @@ Hochschule der Medien Stuttgart
---
# Was ist JavaScript?
# JavaScript im Überblick
**Die einzige Programmiersprache, die im Browser läuft!**
JavaScript ist die einzige Programmiersprache, die nativ im Browser läuft.
- **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"
- Java und JavaScript sind zwei völlig verschiedene Sprachen.
<!--
Ursprünglich "Mocha", dann "LiveScript", dann "JavaScript" (Marketing!)
@@ -159,7 +158,7 @@ ES6 = großes Update mit vielen Features
# JavaScript einbinden
**Option 1: Externe Datei (empfohlen!)**
**Option 1: Externe Datei (empfohlen)**
```html
<body>
<!-- Inhalt -->
@@ -174,7 +173,7 @@ ES6 = großes Update mit vielen Features
</script>
```
⚠️ Script am **Ende** des `<body>` – damit HTML zuerst lädt!
**Wichtig:** Das Script gehört ans **Ende** des `<body>`, damit das HTML zuerst lädt.
<!--
Externe Datei = wiederverwendbar, cachebar
@@ -184,7 +183,7 @@ Oder: defer-Attribut
---
# Die Konsole: Euer bester Freund
# Die JavaScript-Konsole
**Browser DevTools → Console**
- Windows/Linux: `F12` oder `Strg+Shift+I`
@@ -196,7 +195,7 @@ console.log(42);
console.log("Die Antwort ist:", 42);
```
**Direkt in der Konsole tippen und Enter!**
Befehle lassen sich direkt in der Konsole eingeben und mit Enter ausführen.
<!--
Console = REPL (Read-Eval-Print-Loop)
@@ -348,7 +347,7 @@ true || false // true (ODER)
**In der Browser-Konsole:**
1. Erstellen Sie Variablen für sich:
1. Erstellt Variablen für euch:
```javascript
const name = "Your Name";
let age = 20;
@@ -491,7 +490,7 @@ Funktionale Programmierung, Original-Array bleibt unverändert
---
# Was ist das DOM?
# Das DOM im Überblick
**D**ocument **O**bject **M**odel
@@ -646,7 +645,7 @@ remove = aus DOM entfernen
---
# Was sind Events?
# Events im Überblick
**NutzerInnen interagieren mit der Seite:**
- Klicken
@@ -654,7 +653,7 @@ remove = aus DOM entfernen
- Scrollen
- Formulare absenden
**JavaScript kann darauf reagieren!**
JavaScript kann auf diese Ereignisse reagieren.
<!--
Event = Ereignis
@@ -784,9 +783,9 @@ toggleButton.addEventListener("click", () => {
// Button-Text ändern
if (body.classList.contains("dark-mode")) {
toggleButton.textContent = "☀️ Light Mode";
toggleButton.textContent = "Light Mode";
} else {
toggleButton.textContent = "🌙 Dark Mode";
toggleButton.textContent = "Dark Mode";
}
});
```
@@ -1002,21 +1001,21 @@ Frameworks für größere Apps, Komponenten-basiert
---
# Ihr könnt jetzt...
# Das könnt ihr jetzt
- 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!**
- **Mit EntwicklerInnen auf Augenhöhe sprechen**
---
# Feedback – Eure Meinung zählt!
# Feedback
Euer ehrliches Feedback hilft mir, den Kurs zu verbessern.
**Es gibt keine falschen Antworten!**
Es gibt keine falschen Antworten.
- Was hat gut funktioniert?
- Was könnte besser sein?