Einheit 05

JavaScript-Grundlagen I

In dieser Einheit lernen Sie die Grundlagen von JavaScript kennen — die dritte Säule der Webentwicklung neben HTML und CSS. Sie erfahren, wie Sie Variablen, Datentypen und Kontrollstrukturen nutzen, das DOM manipulieren und TEI-XML im Browser verarbeiten. Der Agentic-Coding-Fokus liegt auf Code Literacy und Code Review.

Lernziele

Nach Abschluss dieser Einheit können Sie:

JavaScript als Programmiersprache verstehen: Sie wissen, welche Rolle JavaScript im Web spielt und wie es mit HTML und CSS zusammenarbeitet.
Variablen, Datentypen und Operatoren: Sie können mit let und const Variablen deklarieren, kennen die grundlegenden Datentypen (String, Number, Boolean, Array, Object) und nutzen arithmetische, Vergleichs- und logische Operatoren.
Die Browser-Konsole nutzen: Sie verwenden console.log() und die DevTools (F12) zum Testen und Debuggen von JavaScript-Code.
DOM-Manipulation — Elemente auswählen und verändern: Sie können mit document.querySelector() Elemente im DOM finden und deren Inhalt, Klassen und Styles verändern.
TEI-XML in HTML umwandeln: Sie können TEI-XML mit dem DOMParser im Browser parsen und die extrahierten Daten als HTML-Elemente darstellen.
Agentic-Coding-Fokus — CL + RV: Sie können generierten JavaScript-Code lesen und verstehen (Code Literacy) und systematisch auf Fehler und Verbesserungspotenzial prüfen (Code Review).

Überblick: Was erwartet Sie?

JavaScript — die dritte Säule

Nachdem Sie HTML für Struktur und CSS für Darstellung gelernt haben, kommt nun JavaScript als dritte Säule hinzu: die Sprache für Verhalten und Interaktivität. Webseiten werden dadurch lebendig — auf Klicks reagieren, Inhalte dynamisch ändern, Daten verarbeiten.

Variablen, Datentypen & Operatoren

Sie lernen die Grundbausteine der Programmierung kennen: Wie man Werte in Variablen speichert, welche Datentypen es gibt (Strings, Numbers, Booleans, Arrays, Objects) und wie man mit Operatoren rechnet, vergleicht und verknüpft.

Das DOM manipulieren

Das Document Object Model (DOM) ist die Brücke zwischen JavaScript und der HTML-Seite. Sie lernen, wie Sie Elemente auswählen, deren Inhalt ändern, CSS-Klassen umschalten und auf Benutzer-Events wie Klicks reagieren.

TEI-XML im Browser verarbeiten

Ein praxisnaher Anwendungsfall für die Digital Humanities: Sie lernen, wie man TEI-XML-Daten direkt im Browser parsen und als formatierte HTML-Seite darstellen kann — z.B. einen Brief von Hugo Schuchardt.

Agentic Coding: Code Literacy & Review

Der Agentic-Coding-Fokus dieser Einheit liegt auf Code Literacy (CL) und Code Review (RV). Sie lernen, generierten JavaScript-Code zu lesen, zu verstehen und systematisch auf Korrektheit und Qualität zu prüfen.