public/uni

Files

Michael Czechowski 7626852ac1 add js demos for chapter 3: manipulate, classlist, create, events, preventdefault, todo, fetch, localstorage

2026-04-20 13:14:56 +02:00

20 KiB

Raw Blame History

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

Grundlagen IT- und Internettechnik

223015c · Modul "Technik 1" · 1. Semester Digital- und Medienwirtschaft Hochschule der Medien Stuttgart

Sommersemester 2026

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!)

<body>
    <!-- Inhalt -->
    <script src="script.js"></script>
</body>

Option 2: Inline

<script>
    console.log("Hallo Welt!");
</script>

⚠️ Script am Ende des <body> – damit HTML zuerst lädt!

Die Konsole: Euer bester Freund

Browser DevTools → Console

Windows/Linux: F12 oder Strg+Shift+I
Mac: Cmd+Option+I

console.log("Hallo Welt!");
console.log(42);
console.log("Die Antwort ist:", 42);

Direkt in der Konsole tippen und Enter!

Variablen: Daten speichern

// 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

// 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

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

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

// 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:

Erstellen Sie Variablen für sich:

const name = "Your Name";
let age = 20;
const hobbies = ["Hobby1", "Hobby2"];

Gib sie aus:

console.log(`I am ${name}, ${age} years old.`);
console.log("My hobbies:", hobbies);

Erstelle ein person-Objekt und greife auf Properties zu

Funktionen: Code wiederverwenden

// 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

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

// 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

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:

Funktion die prüft ob Zahl gerade ist:

function isEven(num) { /* your code */ }

Funktion die Array-Summe berechnet
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?

Document Object Model

Browser parst HTML → Baumstruktur
JavaScript kann diesen Baum lesen und ändern
Jedes HTML-Element = ein "Node"

Elemente finden

// 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

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

Klassen manipulieren

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

// 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:

<div id="output"></div>
<ul id="liste"></ul>

Aufgaben (in script.js):

Ändere den Text von #output
Füge 5 <li>-Elemente zur Liste hinzu (mit Schleife!)
Gib jedem geraden Element eine Klasse highlight
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

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

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()

// 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

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";
    }
});

.dark-mode {
    background: #1a1a1a;
    color: #eee;
}

Hands-On: Interaktive Features (45 Min)

Baut in eure Seite ein:

Dark Mode Toggle – Button toggelt Klasse auf body
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

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

// 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

// 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)

function Button() {
    const [count, setCount] = useState(0);
    return <button onClick={() => setCount(count + 1)}>
        Clicks: {count}
    </button>;
}

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:

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/

20 KiB Raw Blame History Unescape Escape