---
marp: true
theme: gaia
paginate: true
backgroundColor: #fff
header: "Grundlagen IT- und Internettechnik (223015c)"
footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26"
title: "Kapitel 3: Interaktivität & JavaScript"
---
# Grundlagen IT- und Internettechnik
**223015c** · Modul "Technik 1" · 1. Semester
Digital- und Medienwirtschaft
Hochschule der Medien Stuttgart
**Wintersemester 2025/26**
[https://librete.ch/hdm/223015c/](https://librete.ch/hdm/223015c/)
---
---
# Kapitel 3 – 24.01.2026
## Interaktivität & JavaScript
---
# Agenda
**Teil 1:** JavaScript-Grundlagen
**Teil 2:** Das DOM
**Teil 3:** Events
**Teil 4:** Projekt & Ausblick
---
# 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"
---
# 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 |
---
# JavaScript einbinden
**Option 1: Externe Datei (empfohlen!)**
```html
```
**Option 2: Inline**
```html
```
⚠️ Script am **Ende** des `` – damit HTML zuerst lädt!
---
# 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
```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`
---
# 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)
```
---
# 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
```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";
```
---
# 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)
```
---
# 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;
```
---
# 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
```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));
```
---
# 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
```
---
# 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
---
# 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
```
---
# 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
```
---
# Elemente manipulieren
```javascript
const element = document.querySelector("#meinElement");
// Text ändern
element.textContent = "Neuer Text";
element.innerHTML = "HTML 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
```
---
# 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");
}
```
---
# 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!**
---
# 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);
```
---
# 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 |
---
# 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.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
```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;
}
```
---
# 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
```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: 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);
}
}
```
---
# 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");
```
---
# 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
---
# 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 lb-czechowski@hdm-stuttgart.de*
---
# Danke!
**Kontakt:** lb-czechowski@hdm-stuttgart.de
**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/