223015c 03: datum/emoji raus, frage-headings entschärft, du-konsistenz
This commit is contained in:
@@ -98,7 +98,7 @@ Hochschule der Medien Stuttgart
|
|||||||
|
|
||||||
<!-- _class: lead -->
|
<!-- _class: lead -->
|
||||||
|
|
||||||
# Kapitel 3 – 24.01.2026
|
# Kapitel 3
|
||||||
## Interaktivität & JavaScript
|
## 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)
|
- **1995:** In 10 Tagen entwickelt (Brendan Eich, Netscape)
|
||||||
- **Heute:** Überall – Browser, Server, Apps, IoT
|
- **Heute:** Überall – Browser, Server, Apps, IoT
|
||||||
|
|
||||||
**Nicht verwechseln:**
|
**Nicht verwechseln:**
|
||||||
- Java ≠ JavaScript (komplett unterschiedlich!)
|
- Java und JavaScript sind zwei völlig verschiedene Sprachen.
|
||||||
- "JavaScript ist zu Java wie Carpet zu Car"
|
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
Ursprünglich "Mocha", dann "LiveScript", dann "JavaScript" (Marketing!)
|
Ursprünglich "Mocha", dann "LiveScript", dann "JavaScript" (Marketing!)
|
||||||
@@ -159,7 +158,7 @@ ES6 = großes Update mit vielen Features
|
|||||||
|
|
||||||
# JavaScript einbinden
|
# JavaScript einbinden
|
||||||
|
|
||||||
**Option 1: Externe Datei (empfohlen!)**
|
**Option 1: Externe Datei (empfohlen)**
|
||||||
```html
|
```html
|
||||||
<body>
|
<body>
|
||||||
<!-- Inhalt -->
|
<!-- Inhalt -->
|
||||||
@@ -174,7 +173,7 @@ ES6 = großes Update mit vielen Features
|
|||||||
</script>
|
</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
|
Externe Datei = wiederverwendbar, cachebar
|
||||||
@@ -184,7 +183,7 @@ Oder: defer-Attribut
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
# Die Konsole: Euer bester Freund
|
# Die JavaScript-Konsole
|
||||||
|
|
||||||
**Browser DevTools → Console**
|
**Browser DevTools → Console**
|
||||||
- Windows/Linux: `F12` oder `Strg+Shift+I`
|
- Windows/Linux: `F12` oder `Strg+Shift+I`
|
||||||
@@ -196,7 +195,7 @@ console.log(42);
|
|||||||
console.log("Die Antwort ist:", 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)
|
Console = REPL (Read-Eval-Print-Loop)
|
||||||
@@ -348,7 +347,7 @@ true || false // true (ODER)
|
|||||||
|
|
||||||
**In der Browser-Konsole:**
|
**In der Browser-Konsole:**
|
||||||
|
|
||||||
1. Erstellen Sie Variablen für sich:
|
1. Erstellt Variablen für euch:
|
||||||
```javascript
|
```javascript
|
||||||
const name = "Your Name";
|
const name = "Your Name";
|
||||||
let age = 20;
|
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
|
**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:**
|
**NutzerInnen interagieren mit der Seite:**
|
||||||
- Klicken
|
- Klicken
|
||||||
@@ -654,7 +653,7 @@ remove = aus DOM entfernen
|
|||||||
- Scrollen
|
- Scrollen
|
||||||
- Formulare absenden
|
- Formulare absenden
|
||||||
|
|
||||||
**JavaScript kann darauf reagieren!**
|
JavaScript kann auf diese Ereignisse reagieren.
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
Event = Ereignis
|
Event = Ereignis
|
||||||
@@ -784,9 +783,9 @@ toggleButton.addEventListener("click", () => {
|
|||||||
|
|
||||||
// Button-Text ändern
|
// Button-Text ändern
|
||||||
if (body.classList.contains("dark-mode")) {
|
if (body.classList.contains("dark-mode")) {
|
||||||
toggleButton.textContent = "☀️ Light Mode";
|
toggleButton.textContent = "Light Mode";
|
||||||
} else {
|
} 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
|
- Den historischen Kontext von IT verstehen
|
||||||
- Erklären wie das Internet funktioniert
|
- Erklären wie das Internet funktioniert
|
||||||
- HTML-Seiten strukturieren
|
- HTML-Seiten strukturieren
|
||||||
- CSS für Layout und Design nutzen
|
- CSS für Layout und Design nutzen
|
||||||
- JavaScript für Interaktivität einsetzen
|
- 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.
|
Euer ehrliches Feedback hilft mir, den Kurs zu verbessern.
|
||||||
**Es gibt keine falschen Antworten!**
|
Es gibt keine falschen Antworten.
|
||||||
|
|
||||||
- Was hat gut funktioniert?
|
- Was hat gut funktioniert?
|
||||||
- Was könnte besser sein?
|
- Was könnte besser sein?
|
||||||
|
|||||||
Reference in New Issue
Block a user