Michael Czechowski
e561d669dc
3 termine covering internet history, html, css, javascript, networking
1065 lines
20 KiB
Markdown
1065 lines
20 KiB
Markdown
---
|
||
marp: true
|
||
theme: gaia
|
||
paginate: true
|
||
backgroundColor: #fff
|
||
header: "Grundlagen IT- und Internettechnik"
|
||
footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26"
|
||
title: "Termin 3: Interaktivität & JavaScript"
|
||
---
|
||
|
||
<style>
|
||
:root {
|
||
--color-foreground: #1a1a2e;
|
||
--color-highlight: #d63384;
|
||
--color-dimmed: #4a4a6a;
|
||
}
|
||
section.invert {
|
||
--color-foreground: #fff;
|
||
}
|
||
section {
|
||
font-size: 1.7rem;
|
||
}
|
||
h2 {
|
||
color: var(--color-highlight);
|
||
}
|
||
pre {
|
||
background: #0f0f23;
|
||
color: #d63384;
|
||
border-radius: 8px;
|
||
border-left: 3px solid #d63384;
|
||
}
|
||
pre code {
|
||
background: transparent;
|
||
color: inherit;
|
||
}
|
||
code {
|
||
background: #1a1a2e;
|
||
color: #d63384;
|
||
padding: 0.15em 0.4em;
|
||
border-radius: 4px;
|
||
}
|
||
a {
|
||
color: var(--color-highlight);
|
||
}
|
||
</style>
|
||
|
||
<!-- _class: invert -->
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
<!-- _backgroundColor: black -->
|
||
|
||
|
||
|
||
# Grundlagen IT- und Internettechnik
|
||
|
||
**223015c** · Modul "Technik 1" · 1. Semester
|
||
Digital- und Medienwirtschaft
|
||
Hochschule der Medien Stuttgart
|
||
|
||
**Wintersemester 2025/26**
|
||
|
||
---
|
||
|
||
<!-- _class: lead -->
|
||
|
||
# Termin 3 – 24.01.2026
|
||
## Interaktivität & JavaScript
|
||
|
||
---
|
||
|
||
# Rückblick
|
||
|
||
**Termin 1:** Geschichte, Von-Neumann, HTML
|
||
**Termin 2:** Netzwerke, DNS, HTTP, CSS
|
||
|
||
**Eure Portfolio-Seiten?**
|
||
- Wer hat mehrere Seiten?
|
||
- Wer hat ein Kontaktformular?
|
||
- Wer hat responsive Design?
|
||
|
||
<!--
|
||
Portfolio-Seiten zeigen lassen (freiwillig)
|
||
Probleme besprechen
|
||
-->
|
||
|
||
---
|
||
|
||
# Heute
|
||
|
||
**Vormittag:**
|
||
- Was ist JavaScript?
|
||
- Variablen, Datentypen, Operatoren
|
||
- Funktionen & Kontrollstrukturen
|
||
|
||
**Nachmittag:**
|
||
- Das DOM: HTML mit JS manipulieren
|
||
- Events: Auf NutzerInnen reagieren
|
||
- Projekt: Interaktive Webseite
|
||
|
||
---
|
||
|
||
<!-- _class: lead -->
|
||
|
||
# Teil 1: JavaScript-Grundlagen
|
||
## Die Sprache des Webs
|
||
|
||
---
|
||
|
||
# Was ist JavaScript?
|
||
|
||
**Die einzige Programmiersprache, die 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"
|
||
|
||
<!--
|
||
Ursprünglich "Mocha", dann "LiveScript", dann "JavaScript" (Marketing!)
|
||
ECMAScript = offizieller Standard
|
||
Aktuelle Version: ES2024
|
||
-->
|
||
|
||
---
|
||
|
||
# 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 |
|
||
|
||
<!--
|
||
V8 = Googles JS-Engine, macht JS schnell
|
||
Node.js = JavaScript außerhalb des Browsers
|
||
ES6 = großes Update mit vielen Features
|
||
-->
|
||
|
||
---
|
||
|
||
# JavaScript einbinden
|
||
|
||
**Option 1: Externe Datei (empfohlen!)**
|
||
```html
|
||
<body>
|
||
<!-- Inhalt -->
|
||
<script src="script.js"></script>
|
||
</body>
|
||
```
|
||
|
||
**Option 2: Inline**
|
||
```html
|
||
<script>
|
||
console.log("Hallo Welt!");
|
||
</script>
|
||
```
|
||
|
||
⚠️ Script am **Ende** des `<body>` – damit HTML zuerst lädt!
|
||
|
||
<!--
|
||
Externe Datei = wiederverwendbar, cachebar
|
||
Script am Ende = DOM ist fertig geladen
|
||
Oder: defer-Attribut
|
||
-->
|
||
|
||
---
|
||
|
||
# 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!**
|
||
|
||
<!--
|
||
Console = REPL (Read-Eval-Print-Loop)
|
||
Perfekt zum Experimentieren
|
||
Fehler werden hier auch angezeigt
|
||
-->
|
||
|
||
---
|
||
|
||
# Variablen: Daten speichern
|
||
|
||
```javascript
|
||
// Modern (empfohlen)
|
||
let age = 25; // Kann geändert werden
|
||
const name = "Max"; // Konstante (nicht änderbar)
|
||
|
||
// Alt (vermeiden!)
|
||
var city = "Stuttgart"; // Problematisches Scoping
|
||
```
|
||
|
||
**Regeln:**
|
||
- Beginnt mit Buchstabe, `_` oder `$`
|
||
- Keine Leerzeichen, keine Sonderzeichen
|
||
- Case-sensitive: `name` ≠ `Name`
|
||
|
||
<!--
|
||
let = für Werte die sich ändern
|
||
const = für Konstanten (Standardwahl!)
|
||
var = alte Syntax, hat Scoping-Probleme
|
||
-->
|
||
|
||
---
|
||
|
||
# Datentypen
|
||
|
||
```javascript
|
||
// String (Text)
|
||
const text = "Hello";
|
||
const text2 = 'World';
|
||
const text3 = `Hello ${text2}`; // Template Literal
|
||
|
||
// 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 prüft den Typ
|
||
Template Literals mit Backticks!
|
||
-->
|
||
|
||
---
|
||
|
||
# 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
|
||
```
|
||
|
||
<!--
|
||
Index startet bei 0!
|
||
Arrays sind veränderbar auch bei const
|
||
-->
|
||
|
||
---
|
||
|
||
# Objects: Strukturierte Daten
|
||
|
||
```javascript
|
||
const person = {
|
||
firstName: "Max",
|
||
lastName: "Smith",
|
||
age: 25,
|
||
hobbies: ["Reading", "Sports"]
|
||
};
|
||
|
||
// Zugriff
|
||
console.log(person.firstName); // "Max"
|
||
console.log(person["lastName"]); // "Smith"
|
||
|
||
// Ändern/Hinzufügen
|
||
person.age = 26;
|
||
person.job = "Student";
|
||
```
|
||
|
||
<!--
|
||
Key-Value-Paare, Punkt- oder Bracket-Notation
|
||
-->
|
||
|
||
---
|
||
|
||
# Operatoren
|
||
|
||
```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)
|
||
```
|
||
|
||
<!--
|
||
=== strikt (Typ + Wert)
|
||
== loose (nur Wert) – VERMEIDEN!
|
||
"5" == 5 ist true, "5" === 5 ist false
|
||
-->
|
||
|
||
---
|
||
|
||
# Hands-On: Variablen & Konsole (20 Min)
|
||
|
||
**In der Browser-Konsole:**
|
||
|
||
1. Erstelle Variablen für dich:
|
||
```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}!`;
|
||
}
|
||
|
||
// Funktion aufrufen
|
||
const message = greet("Max");
|
||
console.log(message); // "Hello Max!"
|
||
|
||
// Arrow Function (modern)
|
||
const add = (a, b) => {
|
||
return a + b;
|
||
};
|
||
|
||
// Kurzform (bei einem Ausdruck)
|
||
const double = x => x * 2;
|
||
```
|
||
|
||
<!--
|
||
function = klassische Syntax
|
||
Arrow Functions = modern, kürzer
|
||
-->
|
||
|
||
---
|
||
|
||
# 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";
|
||
```
|
||
|
||
<!--
|
||
Bedingung in Klammern
|
||
Code-Block in geschweiften Klammern
|
||
-->
|
||
|
||
---
|
||
|
||
# Schleifen: Wiederholen
|
||
|
||
```javascript
|
||
// for-Schleife
|
||
for (let i = 0; i < 5; i++) {
|
||
console.log(i); // 0, 1, 2, 3, 4
|
||
}
|
||
|
||
// for...of (Arrays)
|
||
const colors = ["red", "green", "blue"];
|
||
for (const color of colors) {
|
||
console.log(color);
|
||
}
|
||
|
||
// forEach (Array-Methode)
|
||
colors.forEach(color => console.log(color));
|
||
```
|
||
|
||
<!--
|
||
for = Anzahl bekannt, for...of = Arrays, forEach = Array-Methode
|
||
-->
|
||
|
||
---
|
||
|
||
# Nützliche Array-Methoden
|
||
|
||
```javascript
|
||
const numbers = [1, 2, 3, 4, 5];
|
||
|
||
// map: Transformieren
|
||
const doubled = numbers.map(x => x * 2); // [2, 4, 6, 8, 10]
|
||
|
||
// 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
|
||
```
|
||
|
||
<!--
|
||
Funktionale Programmierung, Original-Array bleibt unverändert
|
||
-->
|
||
|
||
---
|
||
|
||
# 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
|
||
|
||
---
|
||
|
||
<!-- _class: lead -->
|
||
|
||
# Pause
|
||
## 15 Minuten
|
||
|
||
---
|
||
|
||
<!-- _class: lead -->
|
||
|
||
# Teil 2: Das DOM
|
||
## HTML mit JavaScript manipulieren
|
||
|
||
---
|
||
|
||
# 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"
|
||
|
||
```
|
||
document
|
||
└── html
|
||
├── head
|
||
│ └── title
|
||
└── body
|
||
├── h1
|
||
└── p
|
||
```
|
||
|
||
<!--
|
||
DOM = Programmierschnittstelle für HTML
|
||
document = Wurzel des Baums
|
||
Jedes Element ist ein Objekt
|
||
-->
|
||
|
||
---
|
||
|
||
# Elemente finden
|
||
|
||
```javascript
|
||
// Einzelnes Element (erstes gefundene)
|
||
document.getElementById("meinId");
|
||
document.querySelector(".meineKlasse");
|
||
document.querySelector("nav > a");
|
||
|
||
// Mehrere Elemente (NodeList)
|
||
document.getElementsByClassName("meineKlasse");
|
||
document.querySelectorAll("p");
|
||
|
||
// Beispiel
|
||
const titel = document.querySelector("h1");
|
||
console.log(titel.textContent); // Text auslesen
|
||
```
|
||
|
||
<!--
|
||
getElementById = schnellste Methode
|
||
querySelector = CSS-Selektor (flexibel!)
|
||
querySelectorAll = alle Treffer
|
||
-->
|
||
|
||
---
|
||
|
||
# Elemente manipulieren
|
||
|
||
```javascript
|
||
const element = document.querySelector("#meinElement");
|
||
|
||
// Text ändern
|
||
element.textContent = "Neuer Text";
|
||
element.innerHTML = "<strong>HTML</strong> möglich";
|
||
|
||
// Attribute ändern
|
||
element.setAttribute("class", "neu");
|
||
element.id = "neueId";
|
||
element.href = "https://example.com";
|
||
|
||
// Styles ändern
|
||
element.style.color = "red";
|
||
element.style.backgroundColor = "blue";
|
||
element.style.display = "none"; // Verstecken
|
||
```
|
||
|
||
<!--
|
||
textContent = nur Text
|
||
innerHTML = HTML interpretieren
|
||
style = Inline-Styles (camelCase!)
|
||
-->
|
||
|
||
---
|
||
|
||
# Klassen manipulieren
|
||
|
||
```javascript
|
||
const element = document.querySelector(".box");
|
||
|
||
// Klasse hinzufügen
|
||
element.classList.add("aktiv");
|
||
|
||
// Klasse entfernen
|
||
element.classList.remove("inaktiv");
|
||
|
||
// Klasse umschalten
|
||
element.classList.toggle("sichtbar");
|
||
|
||
// Klasse prüfen
|
||
if (element.classList.contains("aktiv")) {
|
||
console.log("Element ist aktiv");
|
||
}
|
||
```
|
||
|
||
<!--
|
||
classList = moderne API
|
||
Besser als className direkt ändern
|
||
toggle schaltet hin und her
|
||
-->
|
||
|
||
---
|
||
|
||
# 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();
|
||
```
|
||
|
||
<!--
|
||
createElement = Element im Speicher
|
||
appendChild = in DOM einfügen
|
||
remove = aus DOM entfernen
|
||
-->
|
||
|
||
---
|
||
|
||
# Hands-On: DOM manipulieren (30 Min)
|
||
|
||
**HTML:**
|
||
```html
|
||
<div id="output"></div>
|
||
<ul id="liste"></ul>
|
||
```
|
||
|
||
**Aufgaben (in script.js):**
|
||
|
||
1. Ändere den Text von `#output`
|
||
2. Füge 5 `<li>`-Elemente zur Liste hinzu (mit Schleife!)
|
||
3. Gib jedem geraden Element eine Klasse `highlight`
|
||
4. Style `.highlight` in CSS (z.B. andere Farbe)
|
||
|
||
---
|
||
|
||
<!-- _class: lead -->
|
||
|
||
# Mittagspause
|
||
## 60 Minuten
|
||
|
||
---
|
||
|
||
<!-- _class: lead -->
|
||
|
||
# Teil 3: Events
|
||
## Auf NutzerInnen reagieren
|
||
|
||
---
|
||
|
||
# Was sind Events?
|
||
|
||
**NutzerInnen interagieren mit der Seite:**
|
||
- Klicken
|
||
- Tippen
|
||
- Scrollen
|
||
- Formulare absenden
|
||
|
||
**JavaScript kann darauf reagieren!**
|
||
|
||
<!--
|
||
Event = Ereignis
|
||
Event Handler = Reaktion darauf
|
||
Interaktive Webseiten durch Events
|
||
-->
|
||
|
||
---
|
||
|
||
# Event Listener
|
||
|
||
```javascript
|
||
const button = document.querySelector("#meinButton");
|
||
|
||
// Event Listener hinzufügen
|
||
button.addEventListener("click", function() {
|
||
console.log("Button wurde geklickt!");
|
||
});
|
||
|
||
// Mit Arrow Function
|
||
button.addEventListener("click", () => {
|
||
console.log("Klick!");
|
||
});
|
||
|
||
// Mit benannter Funktion
|
||
function handleClick() {
|
||
console.log("Klick!");
|
||
}
|
||
button.addEventListener("click", handleClick);
|
||
```
|
||
|
||
<!--
|
||
addEventListener = moderne Methode
|
||
Mehrere Listener pro Element möglich
|
||
Erstes Argument = Event-Typ
|
||
Zweites Argument = Callback-Funktion
|
||
-->
|
||
|
||
---
|
||
|
||
# Wichtige 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 |
|
||
|
||
<!--
|
||
Viele weitere Events verfügbar
|
||
MDN für vollständige Liste
|
||
-->
|
||
|
||
---
|
||
|
||
# Das Event-Objekt
|
||
|
||
```javascript
|
||
button.addEventListener("click", function(event) {
|
||
console.log(event.type); // "click"
|
||
console.log(event.target); // Das geklickte Element
|
||
console.log(event.clientX); // Maus-X-Position
|
||
console.log(event.clientY); // Maus-Y-Position
|
||
});
|
||
|
||
// Tastatur-Events
|
||
document.addEventListener("keydown", function(event) {
|
||
console.log(event.key); // "a", "Enter", "Escape"
|
||
console.log(event.code); // "KeyA", "Enter", "Escape"
|
||
});
|
||
```
|
||
|
||
<!--
|
||
event = automatisch übergeben
|
||
Enthält Infos über das Event
|
||
target = auslösendes Element
|
||
-->
|
||
|
||
---
|
||
|
||
# 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...");
|
||
});
|
||
```
|
||
|
||
<!--
|
||
preventDefault = Standardverhalten stoppen
|
||
Wichtig für SPAs und AJAX
|
||
Formular-Validierung ohne Reload
|
||
-->
|
||
|
||
---
|
||
|
||
# Beispiel: Toggle Dark Mode
|
||
|
||
```javascript
|
||
const toggleButton = document.querySelector("#darkModeToggle");
|
||
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";
|
||
}
|
||
});
|
||
```
|
||
|
||
```css
|
||
.dark-mode {
|
||
background: #1a1a1a;
|
||
color: #eee;
|
||
}
|
||
```
|
||
|
||
<!--
|
||
Klassisches UI-Pattern
|
||
Kein Neuladen der Seite
|
||
State in Klasse gespeichert
|
||
-->
|
||
|
||
---
|
||
|
||
# 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/
|
||
|
||
<!--
|
||
Ausführlicher:
|
||
1. Dark Mode Toggle
|
||
- Button der Klasse auf `body` toggelt
|
||
- CSS für `.dark-mode`
|
||
|
||
2. Accordion/FAQ
|
||
- Klick auf Frage → Antwort erscheint/verschwindet
|
||
- Tipp: classList.toggle() + CSS display: none/block
|
||
|
||
3. Formular-Validierung (entfernt - passt nicht zum Kurskontext)
|
||
- Prüft ob Felder ausgefüllt
|
||
- Zeigt Fehlermeldung
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _class: lead -->
|
||
|
||
# Pause
|
||
## 15 Minuten
|
||
|
||
---
|
||
|
||
<!-- _class: lead -->
|
||
|
||
# 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
|
||
|
||
```javascript
|
||
const form = document.querySelector("#todoForm");
|
||
const input = document.querySelector("#todoInput");
|
||
const list = document.querySelector("#todoList");
|
||
|
||
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 = "";
|
||
});
|
||
```
|
||
|
||
---
|
||
|
||
# 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 = HTTP-Requests aus JS
|
||
Frameworks für größere Apps
|
||
Node.js für Backend
|
||
-->
|
||
|
||
---
|
||
|
||
# Fetch: Daten laden
|
||
|
||
```javascript
|
||
// Mit async/await (modern)
|
||
async function loadData() {
|
||
try {
|
||
const response = await fetch("https://api.example.com/data");
|
||
const data = await response.json();
|
||
console.log(data);
|
||
} catch (error) {
|
||
console.error("Error:", error);
|
||
}
|
||
}
|
||
```
|
||
|
||
<!--
|
||
APIs = Schnittstellen zu Daten, JSON = JavaScript Object Notation
|
||
-->
|
||
|
||
---
|
||
|
||
# LocalStorage: Daten speichern
|
||
|
||
```javascript
|
||
// Speichern
|
||
localStorage.setItem("name", "Max");
|
||
localStorage.setItem("settings", JSON.stringify({ darkMode: true }));
|
||
|
||
// Laden
|
||
const name = localStorage.getItem("name");
|
||
const settings = JSON.parse(localStorage.getItem("settings"));
|
||
|
||
// Löschen
|
||
localStorage.removeItem("name");
|
||
```
|
||
|
||
<!--
|
||
Daten bleiben nach Browser-Neustart, nur Strings → JSON.stringify/parse
|
||
-->
|
||
|
||
---
|
||
|
||
# Frontend-Frameworks
|
||
|
||
**React** (Meta/Facebook)
|
||
```jsx
|
||
function Button() {
|
||
const [count, setCount] = useState(0);
|
||
return <button onClick={() => setCount(count + 1)}>
|
||
Clicks: {count}
|
||
</button>;
|
||
}
|
||
```
|
||
|
||
**Weitere:** Vue.js, Svelte, Angular
|
||
|
||
<!--
|
||
Frameworks für größere Apps, Komponenten-basiert
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _class: "" -->
|
||
|
||
# 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/
|
||
|
||
---
|
||
|
||
<!-- _class: "" -->
|
||
|
||
# Tools für die Praxis
|
||
|
||
**Editoren:** VS Code (empfohlen), WebStorm, Neovim
|
||
|
||
**Online:** CodePen, StackBlitz
|
||
|
||
**Versionskontrolle:** Git + GitHub/GitLab
|
||
|
||
---
|
||
|
||
<!-- _class: lead -->
|
||
|
||
# Fragen & Abschluss
|
||
|
||
---
|
||
|
||
# Was ihr gelernt habt
|
||
|
||
**Termin 1:** Geschichte, Von-Neumann, HTML
|
||
**Termin 2:** Netzwerke, DNS, HTTP, CSS
|
||
**Termin 3:** JavaScript, DOM, Events
|
||
|
||
<!--
|
||
Termin 1:
|
||
- Geschichte der Informatik (Hollerith → Internet)
|
||
- Von-Neumann-Architektur
|
||
- HTML-Grundlagen
|
||
|
||
Termin 2:
|
||
- Netzwerke, DNS, HTTP
|
||
- CSS: Selektoren, Box-Modell, Flexbox
|
||
|
||
Termin 3:
|
||
- JavaScript: Variablen, Funktionen, Schleifen
|
||
- DOM-Manipulation
|
||
- Events & Interaktivität
|
||
-->
|
||
|
||
---
|
||
|
||
# Ihr könnt 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!**
|
||
|
||
---
|
||
|
||
# Feedback – Eure Meinung zählt!
|
||
|
||
Euer ehrliches Feedback hilft mir, den Kurs zu verbessern.
|
||
**Es gibt keine falschen Antworten!**
|
||
|
||
- Was hat gut funktioniert?
|
||
- Was könnte besser sein?
|
||
- Welche Themen interessieren euch noch?
|
||
|
||
*Feedback gerne auch anonym per E-Mail an mail@librete.ch*
|
||
|
||
---
|
||
|
||
<!-- _class: lead -->
|
||
|
||
# Danke!
|
||
|
||
**Kontakt:** mail@librete.ch
|
||
|
||
**Ressourcen:**
|
||
- https://nextlevelshit.github.io/html-over-js/
|
||
- https://codescripsi.es/
|
||
- https://nextlevelshit.github.io/web-engineering-mandala/
|
||
|
||
---
|
||
|
||
# Lizenz
|
||
|
||
Diese Präsentation ist lizenziert unter **Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)**
|
||
|
||
Basiert auf Material von:
|
||
- Markus Thamm / Wolfgang Gruel (HdM Stuttgart)
|
||
- Michael Czechowski
|
||
|
||
Vollständige Lizenz: https://creativecommons.org/licenses/by-sa/4.0/
|