Files

T

libretech 94277a5a85 add lecture slides termin 1-3

- termin 1: geschichte, grundlagen, html
- termin 2: netzwerke, protokolle, css
- termin 3: interaktivitaet, javascript

2025-12-17 21:40:54 +01:00

21 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	Michael Czechowski – HdM Stuttgart – WS 2025/26	Tag 3: Interaktivität & JavaScript

Grundlagen IT- und Internettechnik

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

Wintersemester 2025/26

Tag 3 – 24.01.2026

Interaktivität & JavaScript

Rückblick

Tag 1: Geschichte, Von-Neumann, HTML Tag 2: Netzwerke, DNS, HTTP, CSS

Eure Portfolio-Seiten?

Wer hat mehrere Seiten?
Wer hat ein Kontaktformular?
Wer hat responsive Design?

Heute

Vormittag:

Was ist JavaScript?
Variablen, Datentypen, Operatoren
Funktionen & Kontrollstrukturen

Nachmittag:

Das DOM: HTML mit JS manipulieren
Events: Auf NutzerInnen reagieren
Projekt: Interaktive Webseite

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 alter = 25;            // Kann geändert werden
const name = "Max";        // Konstante (nicht änderbar)

// Alt (vermeiden!)
var stadt = "Stuttgart";   // Problematisches Scoping

Regeln:

Beginnt mit Buchstabe, _ oder $
Keine Leerzeichen, keine Sonderzeichen
Case-sensitive: name ≠ Name

Datentypen

// String (Text)
const text = "Hallo";
const text2 = 'Welt';
const text3 = `Hallo ${text2}`;  // Template Literal

// Number (Zahl)
const ganzzahl = 42;
const kommazahl = 3.14;

// Boolean (Wahrheitswert)
const istWahr = true;
const istFalsch = false;

// Undefined & Null
let unbekannt;           // undefined
const nichts = null;     // null (bewusst leer)

Arrays: Listen

const farben = ["rot", "grün", "blau"];

// Zugriff (0-basiert!)
console.log(farben[0]);    // "rot"
console.log(farben[2]);    // "blau"

// Länge
console.log(farben.length); // 3

// Hinzufügen
farben.push("gelb");       // Am Ende
farben.unshift("weiß");    // Am Anfang

// Entfernen
farben.pop();              // Letztes Element
farben.shift();            // Erstes Element

Objects: Strukturierte Daten

const person = {
    vorname: "Max",
    nachname: "Mustermann",
    alter: 25,
    hobbies: ["Lesen", "Sport"]
};

// Zugriff
console.log(person.vorname);      // "Max"
console.log(person["nachname"]);  // "Mustermann"

// Ändern
person.alter = 26;

// Hinzufügen
person.beruf = "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:

Erstelle Variablen für dich:

const name = "Dein Name";
let alter = 20;
const hobbies = ["Hobby1", "Hobby2"];

Gib sie aus:

console.log(`Ich bin ${name}, ${alter} Jahre alt.`);
console.log("Meine Hobbies:", hobbies);

Erstelle ein person-Objekt und greife auf Properties zu

Funktionen: Code wiederverwenden

// Funktion definieren
function grüßen(name) {
    return `Hallo ${name}!`;
}

// Funktion aufrufen
const nachricht = grüßen("Max");
console.log(nachricht);  // "Hallo Max!"

// Arrow Function (modern)
const addieren = (a, b) => {
    return a + b;
};

// Kurzform (bei einem Ausdruck)
const verdoppeln = x => x * 2;

Kontrollstrukturen: if/else

const alter = 18;

if (alter >= 18) {
    console.log("Volljährig");
} else if (alter >= 16) {
    console.log("Fast volljährig");
} else {
    console.log("Minderjährig");
}

// Ternärer Operator (Kurzform)
const status = alter >= 18 ? "Erwachsen" : "Kind";

Schleifen: Wiederholen

// for-Schleife
for (let i = 0; i < 5; i++) {
    console.log(i);  // 0, 1, 2, 3, 4
}

// for...of (Arrays)
const farben = ["rot", "grün", "blau"];
for (const farbe of farben) {
    console.log(farbe);
}

// forEach (Array-Methode)
farben.forEach(farbe => {
    console.log(farbe);
});

// while
let count = 0;
while (count < 3) {
    console.log(count);
    count++;
}

Nützliche Array-Methoden

const zahlen = [1, 2, 3, 4, 5];

// map: Transformieren
const verdoppelt = zahlen.map(x => x * 2);
// [2, 4, 6, 8, 10]

// filter: Filtern
const groß = zahlen.filter(x => x > 2);
// [3, 4, 5]

// find: Erstes Element finden
const gefunden = zahlen.find(x => x > 3);
// 4

// reduce: Aggregieren
const summe = zahlen.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 istGerade(zahl) {
    // Dein Code
}

Funktion die Array-Summe berechnet
Schleife die 1-10 ausgibt und "Fizz" für durch 3 teilbare, "Buzz" für durch 5 teilbare Zahlen

Tipp: zahl % 2 === 0 prüft ob gerade

Pause

15 Minuten

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"

document
└── html
    ├── head
    │   └── title
    └── body
        ├── h1
        └── p

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)

Mittagspause

60 Minuten

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

Beispiel: Formular-Validierung

const form = document.querySelector("#kontaktForm");
const emailInput = document.querySelector("#email");
const errorMessage = document.querySelector("#error");

form.addEventListener("submit", function(event) {
    const email = emailInput.value;
    
    if (!email.includes("@")) {
        event.preventDefault();
        errorMessage.textContent = "Bitte gültige E-Mail eingeben!";
        errorMessage.style.display = "block";
    }
});

// Live-Feedback
emailInput.addEventListener("input", function() {
    if (emailInput.value.includes("@")) {
        errorMessage.style.display = "none";
    }
});

Hands-On: Interaktive Features (45 Min)

Baut in eure Seite ein:

Dark Mode Toggle
- Button der Klasse auf body toggelt
- CSS für .dark-mode
Accordion/FAQ
- Klick auf Frage → Antwort erscheint/verschwindet
- Tipp: classList.toggle() + CSS display: none/block
Formular-Validierung
- Prüft ob Felder ausgefüllt
- Zeigt Fehlermeldung

Hilfe: https://nextlevelshit.github.io/web-engineering-mandala/

Pause

15 Minuten

Teil 4: Alles zusammen

Projekt & Ausblick

Projekt: Interaktive Portfolio-Seite

Ihr habt jetzt alle Bausteine:

HTML: Struktur
CSS: Design
JavaScript: Interaktivität

Kombiniert sie!

Projekt-Anforderungen

Must-Have:

Semantisches HTML
Responsive CSS (Mobile + Desktop)
Mindestens 2 interaktive Features mit JS

Nice-to-Have:

Dark Mode
Animationen/Transitions
Formular mit Validierung
Dynamisch generierte Inhalte

Zeit: 60 Minuten

Beispiel: Todo-Liste

const form = document.querySelector("#todoForm");
const input = document.querySelector("#todoInput");
const liste = document.querySelector("#todoListe");

form.addEventListener("submit", function(event) {
    event.preventDefault();
    
    if (input.value.trim() === "") return;
    
    const li = document.createElement("li");
    li.textContent = input.value;
    
    // Löschen per Klick
    li.addEventListener("click", () => li.remove());
    
    liste.appendChild(li);
    input.value = "";  // Input leeren
});

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

// Daten von API laden
fetch("https://api.example.com/data")
    .then(response => response.json())
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error("Fehler:", error);
    });

// Mit async/await (moderner)
async function ladeDaten() {
    try {
        const response = await fetch("https://api.example.com/data");
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error("Fehler:", error);
    }
}

LocalStorage: Daten speichern

// Speichern
localStorage.setItem("name", "Max");
localStorage.setItem("settings", JSON.stringify({
    darkMode: true,
    language: "de"
}));

// Laden
const name = localStorage.getItem("name");
const settings = JSON.parse(localStorage.getItem("settings"));

// Löschen
localStorage.removeItem("name");
localStorage.clear();  // Alles löschen

Frontend-Frameworks

React (Meta/Facebook)

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

Vue.js (Evan You)

<template>
    <button @click="count++">Klicks: {{ count }}</button>
</template>
<script setup>
import { ref } from 'vue';
const count = ref(0);
</script>

Ressourcen zum Weiterlernen

Dokumentation:

MDN Web Docs: https://developer.mozilla.org/de/

Interaktiv lernen:

HTML: https://nextlevelshit.github.io/html-over-js/
CSS: https://codecrispi.es/
JS Visualisierung: https://nextlevelshit.github.io/web-engineering-mandala/

Kurse:

freeCodeCamp: https://freecodecamp.org
The Odin Project: https://theodinproject.com

Tools für die Praxis

Editoren:

VS Code (empfohlen)
WebStorm (JetBrains)
Neovim (für Terminal-Fans)

Online-Editoren:

CodePen: https://codepen.io
StackBlitz: https://stackblitz.com

Versionskontrolle:

Git + GitHub/GitLab

Fragen & Abschluss

Was ihr gelernt habt

Tag 1:

Geschichte der Informatik (Hollerith → Internet)
Von-Neumann-Architektur
HTML-Grundlagen

Tag 2:

Netzwerke, DNS, HTTP
CSS: Selektoren, Box-Modell, Flexbox

Tag 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

Was hat gut funktioniert? Was könnte besser sein? Welche Themen wünscht ihr euch für die Zukunft?

Danke!

Kontakt: michael.czechowski@lehre.dhbw-stuttgart.de Repository: git.librete.ch/hdm/223015b

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/

21 KiB Raw Blame History Unescape Escape

Grundlagen IT- und Internettechnik

Tag 3 – 24.01.2026

Interaktivität & JavaScript

Rückblick

Heute

Teil 1: JavaScript-Grundlagen

Die Sprache des Webs

Was ist JavaScript?

JavaScript-Timeline

JavaScript einbinden

Die Konsole: Euer bester Freund

Variablen: Daten speichern

Datentypen

Arrays: Listen

Objects: Strukturierte Daten

Operatoren

Hands-On: Variablen & Konsole (20 Min)

Funktionen: Code wiederverwenden

Kontrollstrukturen: if/else

Schleifen: Wiederholen

Nützliche Array-Methoden

Hands-On: Funktionen & Schleifen (30 Min)

Pause

15 Minuten

Teil 2: Das DOM

HTML mit JavaScript manipulieren

Was ist das DOM?

Elemente finden

Elemente manipulieren

Klassen manipulieren

Elemente erstellen

Hands-On: DOM manipulieren (30 Min)

Mittagspause

60 Minuten

Teil 3: Events

Auf NutzerInnen reagieren

Was sind Events?

Event Listener

Wichtige Events

Das Event-Objekt

Event.preventDefault()

Beispiel: Toggle Dark Mode

Beispiel: Formular-Validierung

Hands-On: Interaktive Features (45 Min)

Pause

15 Minuten

Teil 4: Alles zusammen

Projekt & Ausblick

Projekt: Interaktive Portfolio-Seite

Projekt-Anforderungen

Beispiel: Todo-Liste

Modernes JavaScript: Kurzer Ausblick

Fetch: Daten laden

LocalStorage: Daten speichern

Frontend-Frameworks

Ressourcen zum Weiterlernen

Tools für die Praxis

Fragen & Abschluss

Was ihr gelernt habt

Ihr könnt jetzt...

Feedback

Danke!

Lizenz

21 KiB

Raw Blame History