uni/slides/223015c/03-interaktivitaet-javascript.md

marp, theme, paginate, backgroundColor, header, footer, title

marp	theme	paginate	backgroundColor	header	footer	title
true	gaia	true		Grundlagen IT- und Internettechnik (223015c)	Michael Czechowski – HdM Stuttgart – SoSe 2026	Kapitel 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; } 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; } code { background: #0f0f23; padding: 0.15em 0.4em; border-radius: 4px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; } 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; } </style>

Kapitel 3

Interaktivität & JavaScript

---

„Statisch ist langweilig"

---

Was kann JavaScript?

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

Aus Sicherheitsgründen NICHT: willkürlich Dateien auf der Platte lesen/schreiben.

---

JavaScript-Timeline

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

<!-- External (best practice) -->
<script src="./app.js"></script>

<!-- Inline (für kleine Snippets) -->
<script>
  console.log('Hallo Welt');
</script>

<!-- Modern: als Modul -->
<script type="module" src="./main.js"></script>

Modern: als ES-Modul mit type="module". Erlaubt import / export.

---

---

Variablen — Daten speichern

let name = "Ada";       // veränderlich
const PI = 3.14159;     // konstant
var alt = "vermeiden";  // pre-ES6, hat skopen-bugs

// Verändern:
name = "Grace";  // OK
PI = 3.0;        // FEHLER: const kann nicht überschrieben werden

Faustregel: const als Default. Nur let, wenn man umzuweisen plant. Niemals var.

---

Datentypen

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

typeof text   // "string"
typeof liste  // "object"  (auch arrays sind objects)

6 Grund-Typen + objects/arrays.

---

---

---

Funktionen

// Function declaration
function gruessen(name) {
  return "Hallo " + name;
}

// Arrow function (modern, kompakt)
const gruessen = (name) => "Hallo " + name;

// Mit mehreren Zeilen
const summe = (a, b) => {
  const result = a + b;
  return result;
};

gruessen("Ada")  // "Hallo Ada"
summe(3, 4)      // 7

---

---

Kontrollstrukturen

// if / else
if (age >= 18) {
  console.log("erwachsen");
} else if (age >= 14) {
  console.log("jugendlich");
} else {
  console.log("kind");
}

// Ternärer Operator (Kurzform)
const status = age >= 18 ? "erwachsen" : "kind";

// switch (mehrere Werte)
switch (browser) {
  case "Chrome":  return "Blink";
  case "Safari":  return "WebKit";
  case "Firefox": return "Gecko";
  default:        return "unknown";
}

---

Das DOM

HTML im Speicher des Browsers

---

---

Elemente finden

// EIN Element (erstes match)
const heading = document.querySelector('h1');
const btn = document.querySelector('#submit-button');
const card = document.querySelector('.card');

// MEHRERE Elemente (NodeList)
const allButtons = document.querySelectorAll('button');
const allCards = document.querySelectorAll('.card');

// Iterieren
allButtons.forEach(btn => console.log(btn.textContent));

querySelector(...) nimmt denselben Selektor wie CSS.

---

---

---

Events

Auf User-Aktionen reagieren

---

---

Häufige Events

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)

---

---

---

---

---

---

Frameworks

Wann braucht man die?

---

React · Vue · Angular · Svelte

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.

---

Library vs. Framework

	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

„Inversion of Control": Library = du kontrollierst, Framework = es kontrolliert dich.

---

Selbstlernen — eigenes Mini-Projekt

Wähle eines:

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.

---

Zusammenfassung

Was JS macht: DOM manipulieren · Events behandeln · Daten holen + speichern.

Was JS NICHT macht (ohne User-Aktion): willkürliche Datei-/Hardware-Zugriffe.

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.