Grundlagen IT- und Internettechnik

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

Sommersemester 2026

https://librete.ch/hdm/223015c/

Grundlagen IT- und Internettechnik (223015c)

Kapitel 3 – 24.01.2026

Interaktivität & JavaScript

Michael Czechowski – HdM Stuttgart – SoSe 2026
Grundlagen IT- und Internettechnik (223015c)

Agenda

Teil 1: JavaScript-Grundlagen
Teil 2: Das DOM
Teil 3: Events
Teil 4: Projekt & Ausblick

Michael Czechowski – HdM Stuttgart – SoSe 2026
Grundlagen IT- und Internettechnik (223015c)

Teil 1: JavaScript-Grundlagen

Die Sprache des Webs

Michael Czechowski – HdM Stuttgart – SoSe 2026
Grundlagen IT- und Internettechnik (223015c)

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"
Michael Czechowski – HdM Stuttgart – SoSe 2026
Grundlagen IT- und Internettechnik (223015c)

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
Michael Czechowski – HdM Stuttgart – SoSe 2026
Grundlagen IT- und Internettechnik (223015c)

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!

Michael Czechowski – HdM Stuttgart – SoSe 2026
Grundlagen IT- und Internettechnik (223015c)

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!

Michael Czechowski – HdM Stuttgart – SoSe 2026
Grundlagen IT- und Internettechnik (223015c)

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
Michael Czechowski – HdM Stuttgart – SoSe 2026
Grundlagen IT- und Internettechnik (223015c)

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)
Michael Czechowski – HdM Stuttgart – SoSe 2026
Grundlagen IT- und Internettechnik (223015c)

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
Michael Czechowski – HdM Stuttgart – SoSe 2026
Grundlagen IT- und Internettechnik (223015c)

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";
Michael Czechowski – HdM Stuttgart – SoSe 2026
Grundlagen IT- und Internettechnik (223015c)

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)
Michael Czechowski – HdM Stuttgart – SoSe 2026
Grundlagen IT- und Internettechnik (223015c)

Hands-On: Variablen & Konsole (20 Min)

In der Browser-Konsole:

  1. Erstellen Sie Variablen für sich:

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

  2. Gib sie aus:

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

  3. Erstelle ein person-Objekt und greife auf Properties zu

Michael Czechowski – HdM Stuttgart – SoSe 2026
Grundlagen IT- und Internettechnik (223015c)

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;
Michael Czechowski – HdM Stuttgart – SoSe 2026
Grundlagen IT- und Internettechnik (223015c)

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";
Michael Czechowski – HdM Stuttgart – SoSe 2026
Grundlagen IT- und Internettechnik (223015c)

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));
Michael Czechowski – HdM Stuttgart – SoSe 2026
Grundlagen IT- und Internettechnik (223015c)

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
Michael Czechowski – HdM Stuttgart – SoSe 2026
Grundlagen IT- und Internettechnik (223015c)

Hands-On: Funktionen & Schleifen (30 Min)

Erstellt script.js:

  1. Funktion die prüft ob Zahl gerade ist:

    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

Michael Czechowski – HdM Stuttgart – SoSe 2026
Grundlagen IT- und Internettechnik (223015c)

Teil 2: Das DOM

HTML mit JavaScript manipulieren

Michael Czechowski – HdM Stuttgart – SoSe 2026
Grundlagen IT- und Internettechnik (223015c)

Was ist das DOM?

Document Object Model

  • Browser parst HTML → Baumstruktur
  • JavaScript kann diesen Baum lesen und ändern
  • Jedes HTML-Element = ein "Node"
Michael Czechowski – HdM Stuttgart – SoSe 2026
Grundlagen IT- und Internettechnik (223015c)

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
Michael Czechowski – HdM Stuttgart – SoSe 2026
Grundlagen IT- und Internettechnik (223015c)

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
Michael Czechowski – HdM Stuttgart – SoSe 2026
Grundlagen IT- und Internettechnik (223015c)

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");
}
Michael Czechowski – HdM Stuttgart – SoSe 2026
Grundlagen IT- und Internettechnik (223015c)

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();
Michael Czechowski – HdM Stuttgart – SoSe 2026
Grundlagen IT- und Internettechnik (223015c)

Hands-On: DOM manipulieren (30 Min)

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)
Michael Czechowski – HdM Stuttgart – SoSe 2026
Grundlagen IT- und Internettechnik (223015c)

Teil 3: Events

Auf NutzerInnen reagieren

Michael Czechowski – HdM Stuttgart – SoSe 2026
Grundlagen IT- und Internettechnik (223015c)

Was sind Events?

NutzerInnen interagieren mit der Seite:

  • Klicken
  • Tippen
  • Scrollen
  • Formulare absenden

JavaScript kann darauf reagieren!

Michael Czechowski – HdM Stuttgart – SoSe 2026
Grundlagen IT- und Internettechnik (223015c)

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);
Michael Czechowski – HdM Stuttgart – SoSe 2026
Grundlagen IT- und Internettechnik (223015c)

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
Michael Czechowski – HdM Stuttgart – SoSe 2026
Grundlagen IT- und Internettechnik (223015c)

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"
});
Michael Czechowski – HdM Stuttgart – SoSe 2026
Grundlagen IT- und Internettechnik (223015c)

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...");
});
Michael Czechowski – HdM Stuttgart – SoSe 2026
Grundlagen IT- und Internettechnik (223015c)

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;
}
Michael Czechowski – HdM Stuttgart – SoSe 2026
Grundlagen IT- und Internettechnik (223015c)

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/

Michael Czechowski – HdM Stuttgart – SoSe 2026
Grundlagen IT- und Internettechnik (223015c)

Teil 4: Alles zusammen

Projekt & Ausblick

Michael Czechowski – HdM Stuttgart – SoSe 2026
Grundlagen IT- und Internettechnik (223015c)

Übung: Interaktive Portfolio-Seite

Kombiniert eure Bausteine:
HTML (Struktur) + CSS (Design) + JavaScript (Interaktivität)

Michael Czechowski – HdM Stuttgart – SoSe 2026
Grundlagen IT- und Internettechnik (223015c)

Übung: Anforderungen

Must-Have:

  • [ ] Semantisches HTML
  • [ ] Responsive CSS
  • [ ] 2 interaktive JS-Features

Nice-to-Have: Dark Mode, Animationen, Formular-Validierung

Zeit: 60 Minuten

Michael Czechowski – HdM Stuttgart – SoSe 2026
Grundlagen IT- und Internettechnik (223015c)

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 = "";
});
Michael Czechowski – HdM Stuttgart – SoSe 2026
Grundlagen IT- und Internettechnik (223015c)

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
Michael Czechowski – HdM Stuttgart – SoSe 2026
Grundlagen IT- und Internettechnik (223015c)

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);
    }
}
Michael Czechowski – HdM Stuttgart – SoSe 2026
Grundlagen IT- und Internettechnik (223015c)

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");
Michael Czechowski – HdM Stuttgart – SoSe 2026
Grundlagen IT- und Internettechnik (223015c)

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

Michael Czechowski – HdM Stuttgart – SoSe 2026
Grundlagen IT- und Internettechnik (223015c)

Ressourcen zum Weiterlernen

Interaktiv:

Michael Czechowski – HdM Stuttgart – SoSe 2026
Grundlagen IT- und Internettechnik (223015c)

Tools für die Praxis

Editoren: VS Code (empfohlen), WebStorm, Neovim

Online: CodePen, StackBlitz

Versionskontrolle: Git + GitHub/GitLab

Michael Czechowski – HdM Stuttgart – SoSe 2026
Grundlagen IT- und Internettechnik (223015c)

Fragen & Abschluss

Michael Czechowski – HdM Stuttgart – SoSe 2026
Grundlagen IT- und Internettechnik (223015c)

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!
Michael Czechowski – HdM Stuttgart – SoSe 2026
Grundlagen IT- und Internettechnik (223015c)

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

Michael Czechowski – HdM Stuttgart – SoSe 2026
Grundlagen IT- und Internettechnik (223015c)

Danke!

Kontakt: lb-czechowski@hdm-stuttgart.de

Ressourcen:

Michael Czechowski – HdM Stuttgart – SoSe 2026
Grundlagen IT- und Internettechnik (223015c)

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/

Michael Czechowski – HdM Stuttgart – SoSe 2026

Ursprünglich "Mocha", dann "LiveScript", dann "JavaScript" (Marketing!) ECMAScript = offizieller Standard Aktuelle Version: ES2024

V8 = Googles JS-Engine, macht JS schnell Node.js = JavaScript außerhalb des Browsers ES6 = großes Update mit vielen Features

Externe Datei = wiederverwendbar, cachebar Script am Ende = DOM ist fertig geladen Oder: defer-Attribut

Console = REPL (Read-Eval-Print-Loop) Perfekt zum Experimentieren Fehler werden hier auch angezeigt

let = für Werte die sich ändern const = für Konstanten (Standardwahl!) var = alte Syntax, hat Scoping-Probleme

typeof prüft den Typ Template Literals mit Backticks!

Index startet bei 0! Arrays sind veränderbar auch bei const

Key-Value-Paare, Punkt- oder Bracket-Notation

=== strikt (Typ + Wert) == loose (nur Wert) – VERMEIDEN! "5" == 5 ist true, "5" === 5 ist false

function = klassische Syntax Arrow Functions = modern, kürzer

Bedingung in Klammern Code-Block in geschweiften Klammern

for = Anzahl bekannt, for...of = Arrays, forEach = Array-Methode

Funktionale Programmierung, Original-Array bleibt unverändert

DOM = Programmierschnittstelle für HTML document = Wurzel des Baums Jedes Element ist ein Objekt

getElementById = schnellste Methode querySelector = CSS-Selektor (flexibel!) querySelectorAll = alle Treffer

textContent = nur Text innerHTML = HTML interpretieren style = Inline-Styles (camelCase!)

classList = moderne API Besser als className direkt ändern toggle schaltet hin und her

createElement = Element im Speicher appendChild = in DOM einfügen remove = aus DOM entfernen

Event = Ereignis Event Handler = Reaktion darauf Interaktive Webseiten durch Events

addEventListener = moderne Methode Mehrere Listener pro Element möglich Erstes Argument = Event-Typ Zweites Argument = Callback-Funktion

Viele weitere Events verfügbar MDN für vollständige Liste

event = automatisch übergeben Enthält Infos über das Event target = auslösendes Element

preventDefault = Standardverhalten stoppen Wichtig für SPAs und AJAX Formular-Validierung ohne Reload

Klassisches UI-Pattern Kein Neuladen der Seite State in Klasse gespeichert

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

Fetch = HTTP-Requests aus JS Frameworks für größere Apps Node.js für Backend

APIs = Schnittstellen zu Daten, JSON = JavaScript Object Notation

Daten bleiben nach Browser-Neustart, nur Strings → JSON.stringify/parse

Frameworks für größere Apps, Komponenten-basiert