JavaScript Intensiv-Schulung: Sprache, DOM, asynchroner Code

JavaScript – Einstieg und Arbeitsumgebung

• JavaScript heute: Browser, Server, Build-Werkzeuge – ein Überblick
• JavaScript ausführen: Browser-Konsole, <script>-Element und Node.js im Terminal
• ECMAScript-Versionen: von ES5 über ES2015 zur jährlichen Spezifikation
• Inline-Skripte in HTML und warum sie Wartung und Content Security Policy erschweren
• Externe Skripte einbinden: src, defer, async und type="module"
• Node.js und npm installieren, package.json anlegen, Skripte starten
• Visual Studio Code einrichten: Erweiterungen, Terminal, Debugger

Variablen, Datentypen und Operatoren

• Variablen mit let deklarieren, Block-Geltungsbereich
• const: unveränderliche Bindung, aber veränderbare Objekte
• var in Bestandscode erkennen und gefahrlos ersetzen
• Sonderwerte null, undefined und NaN unterscheiden und prüfen
• Objekte als Werte: Literale, Punkt- und Klammernotation
• Strikter Modus mit "use strict" und warum Module ihn automatisch aktivieren
• Dynamische Typisierung, typeof und implizite Typumwandlung
• Hoisting von var und Funktionen, Temporal Dead Zone bei let/const
• Primitive Werte und Referenztypen: kopieren, vergleichen, übergeben
• Globaler, Funktions- und Block-Geltungsbereich; globalThis
• Addition und die Falle der String-Verkettung mit +
• Subtraktion, Inkrement, Dekrement, zusammengesetzte Zuweisung
• Multiplikation und Fließkomma-Probleme: 0.1 + 0.2, Rundung
• Division, Modulo und Potenz mit **
• Werte vergleichen: ==, === und Object.is
• Vergleichsregeln: Truthy und Falsy, Vergleiche mit null und NaN
• Logische Operatoren und Kurzschlussauswertung
• Ternärer Operator
• Operatorvorrang und Klammern
• Optional Chaining ?. und Nullish Coalescing ??
• Logische Zuweisungen ||=, &&=, ??=
• Template-Literale: Interpolation, mehrzeilige Texte, Tagged Templates
• Große Ganzzahlen mit BigInt

Kontrollstrukturen und Funktionen

• Bedingungen mit if, else if, else
• Mehrfachauswahl mit switch
• switch und break: Durchfallen gezielt nutzen
• Die for-Schleife
• Verschachtelte Schleifen und Sprungmarken
• Schleifen steuern mit break und continue
• Varianten: for…in für Schlüssel, for…of für iterierbare Werte
• Arrays durchlaufen: Index, for…of und entries()
• while und do…while
• Funktionen deklarieren, als Ausdruck zuweisen, aufrufen
• Parameter, Argumente und Rückgabewerte
• Standardparameter
• Rest-Parameter statt arguments
• Pfeilfunktionen: Kurzschreibweise und implizite Rückgabe
• Pfeilfunktionen und this in Callbacks
• Closures: private Zustände, Fabrikfunktionen, Schleifenfalle
• IIFE in älterem Code und ihre Ablösung durch Module
• Funktionen als Werte: name, length, Funktionen höherer Ordnung

Arrays, Strings und Standardobjekte

• Arrays anlegen, lesen, ändern; length und Array.from
• forEach() und wann eine Schleife besser passt
• Elemente hinzufügen und entfernen: push, pop, unshift, shift
• Suchen und Ausschneiden: indexOf, includes, find, splice, slice
• Filtern, Abbilden, Umkehren: filter, map, reverse
• concat und join im Vergleich
• Aggregieren mit reduce
• Spread-Operator: kopieren, zusammenführen, Argumente übergeben
• Array-Destrukturierung: Standardwerte, Lücken, Werte tauschen
• Objekt-Destrukturierung: Umbenennen, Verschachtelung, Restwerte
• Nicht verändernde Methoden: toSorted, toReversed, with
• Sortieren mit Vergleichsfunktion, at(), flat und flatMap
• Gruppieren mit Object.groupBy und Map.groupBy
• Standardobjekte im Überblick: Wrapper-Objekte, Math, JSON
• Zeitgeber: setTimeout, setInterval und Abbrechen
• Werte umwandeln und formatieren: Number(), parseInt, toFixed
• Zahlen, Datum und Währung landesspezifisch mit Intl formatieren
• String-Methoden: split, replaceAll, padStart, trim
• Das Math-Objekt: Runden, Zufallszahlen, Minimum und Maximum
• Das Date-Objekt: Zeitstempel, Zeitzonen, Fallstricke
• Temporal als Nachfolger von Date: Stand der Unterstützung
• Reguläre Ausdrücke: Muster, benannte Gruppen, Flags, matchAll

Objekte, Prototypen und this

• Objekt-Grundlagen und Literal-Notation
• Eigenschaften und Methoden, this in Methoden
• Objekte mit Konstruktoren erzeugen
• Object.create() und Objekte ohne Prototyp
• Prototypen und die Prototypenkette
• Konstruktorfunktionen mit new
• Konstruktorfunktionen mit Argumenten
• Methoden über den Prototyp teilen
• this: Aufrufkontext, Callbacks, strikter Modus
• this festlegen mit bind(), call(), apply()
• Object.defineProperty(): Deskriptoren, schreibgeschützte Eigenschaften
• Eingebaute Methoden: Object.keys, entries, assign, freeze, hasOwn
• Erweiterte Objekt-Literale: Kurzschreibweise, berechnete Schlüssel
• Tiefe Kopien mit structuredClone
• JSON lesen und schreiben, JSON.parse mit Reviver

Klassen und ES-Module

• Modularen Code schreiben: Zuständigkeiten trennen
• ES-Module: Grundlagen und Laden im Browser
• import und export: benannt, Standard, Re-Export
• Module: strikter Modus, eigener Geltungsbereich, import.meta
• Dynamisches import() und Top-Level-await
• CommonJS mit require in Bestandsprojekten, Umstieg auf ESM
• Klassen: Konstruktor, Methoden, Felder
• Vererbung mit extends und super; Klassen und Prototypen
• Statische Methoden, Felder und Initialisierungsblöcke
• Klassen über Module bereitstellen
• Getter und Setter
• Private Felder und Methoden mit #
• Eingebaute Klassen erweitern, z. B. eigene Error-Klassen
• Welche eingebauten Objekte sich ableiten lassen, Symbol.species

Iteratoren, Generatoren, Maps und Sets

• Iterator-Protokoll: next(), done, value
• Eigenes iterierbares Objekt mit Symbol.iterator
• Generatoren mit function* und yield
• Iteratoren steuern mit return() und throw()
• Iterator-Helfer: map, filter, take direkt auf Iteratoren
• Asynchrone Iteration mit for await…of
• Maps anlegen und Einträge hinzufügen
• Maps mit Objekten als Schlüssel
• Maps durchlaufen
• Sets anlegen und Werte hinzufügen
• Sets mit Objekten: Identität statt Gleichheit
• Sets durchlaufen und in Arrays umwandeln
• Mengenoperationen: union, intersection, difference
• WeakMap und WeakSet gegen Speicherlecks

Asynchrones JavaScript und HTTP

• Event Loop, Call Stack, Task- und Microtask-Warteschlange
• Promises erstellen und auflösen
• Promises verwerfen
• Promises verketten
• Fehler abfangen mit catch und finally
• Promise.all, race, allSettled und any
• async/await mit try/catch
• Promise.withResolvers für extern aufgelöste Promises
• XMLHttpRequest in Bestandscode lesen und auf fetch umstellen
• Fetch-API: Request, Response, Header, Statuscodes
• GET-Anfragen senden und JSON auswerten
• POST, PUT und DELETE: Daten senden, Fehlerstatus behandeln
• Abbrechen und Zeitlimits mit AbortController und AbortSignal.timeout
• CORS: warum der Browser Anfragen blockiert

DOM, BOM und Ereignisse

• Browser Object Model und Document Object Model
• Das window-Objekt
• location und History-API
• Das document-Objekt
• Den DOM traversieren: Eltern, Kinder, Geschwister
• Elemente auswählen mit getElementById und Co.
• querySelector und querySelectorAll
• Elemente erzeugen, einfügen, ersetzen, entfernen
• Elemente und Knoten: Textknoten, NodeList, HTMLCollection
• Dialoge: alert, confirm, prompt und das <dialog>-Element
• DOM-Eigenschaften: textContent, classList, dataset, Attribute
• innerHTML und Cross-Site-Scripting vermeiden
• Browser-Ereignisse: Maus, Tastatur, Formulare, Laden
• Das Event-Objekt
• Event-Handler wie onclick und ihre Grenzen
• addEventListener mit once, passive und signal
• Standardverhalten unterdrücken mit preventDefault
• Event-Eigenschaften: target, currentTarget, key
• Bubbling, Capturing und Ereignisdelegation
• Formulare mit FormData und Constraint Validation
• Daten speichern mit localStorage und sessionStorage

Metaprogrammierung: Symbole, Reflect und Proxy

• Symbole: Grundlagen
• Gemeinsame Symbole mit Symbol.for
• Eindeutige Schlüssel: Namenskollisionen mit Symbolen vermeiden
• Bekannte Symbole: Symbol.iterator, Symbol.toPrimitive
• Objekte erzeugen mit Reflect.construct()
• Funktionen aufrufen mit Reflect.apply()
• Reflect und Prototypen: getPrototypeOf, setPrototypeOf
• construct(), apply() und Prototypen im Zusammenspiel
• Eigenschaften lesen und schreiben mit Reflect.get und set
• Objekte analysieren mit Reflect.ownKeys()
• Eigenschaften anlegen und löschen mit Reflect
• Erweiterungen verhindern: preventExtensions, seal, freeze
• Proxy-Grundlagen: Ziel, Handler, Traps
• Traps in Aktion: Validierung und Protokollierung
• Proxies und Reflect kombinieren
• Proxies als Prototypen für Standardwerte
• Proxies verschachteln
• Funktionen kapseln mit der apply-Trap
• Widerrufbare Proxies mit Proxy.revocable
• Proxies in Frameworks: Reaktivität in Vue.js, Immer

Fehlersuche, Code-Qualität und Tests

• Debugging in den Browser-Entwicklertools: Haltepunkte, Call Stack
• Konsole: console.log, table, group, time
• Fehler behandeln mit try/catch und eigenen Fehlerklassen
• Fehlerursachen weitergeben mit cause
• Referenzen: MDN Web Docs, Spezifikation, Kompatibilitätstabellen
• Style Guides und Formatierung mit Prettier
• Linting mit ESLint und Flat Config
• Dokumentieren mit JSDoc, Typprüfung per // @ts-check
• Transpiler einordnen: Babel, TypeScript, Code ohne Transpilierung
• Bundler: Vite für neue Projekte, Webpack im Bestand
• Unit-Tests mit Vitest oder node:test
• End-to-End-Tests mit Playwright
• Abhängigkeiten prüfen: npm audit, Lockfile, Versionsbereiche

Muster, Bibliotheken und Zustandsverwaltung

• Wiederverwendung: Funktionen, Module, npm-Pakete
• Bibliotheken: Lodash, D3.js; jQuery im Bestand und native Alternativen
• Frameworks einordnen: Angular, React, Vue.js, Svelte
• Constructor Pattern
• Module und Revealing Module Pattern – heute durch ES-Module ersetzt
• Singleton per Modul-Export
• Observer Pattern mit EventTarget und CustomEvent
• Mediator Pattern
• Prototype Pattern
• Command Pattern für Rückgängig-Funktionen
• Facade Pattern
• Factory Pattern
• Mixins mit Object.assign und Klassenfabriken
• Decorator Pattern mit Funktionen höherer Ordnung
• Reaktive Programmierung: Datenströme
• Reaktiv und imperativ im Vergleich
• RxJS: Reactive Extensions für JavaScript
• RxJS-Bausteine: Observable, Operatoren, Subject, Scheduler
• Einstieg in Redux und Redux Toolkit
• Redux-Bausteine: State, Action, Reducer, createSlice

JavaScript-Code mit Coding-Agenten absichern

• JSDoc-Typen und // @ts-check als Typprüfung, die der Agent ohne Build-Schritt nach jeder Änderung ausführt
• npm run lint und npm test als Abnahme: der Agent korrigiert, bis ESLint und Vitest keine Befunde melden
• Altes JavaScript modernisieren lassen: var, Callback-Ketten und XMLHttpRequest erst mit Tests absichern
• Im Diff gezielt suchen: innerHTML mit Nutzereingaben, fehlende await, == statt ===
• Vom Agenten vorgeschlagene npm-Pakete prüfen: wirklich nötig, gepflegt, richtig geschrieben?

Praxisprojekt: Haushaltsbuch im Browser

• Buchungen erfassen und listen mit DOM-API, FormData und Ereignisdelegation; Speicherung in localStorage
• Monats- und Kategorieauswertung mit Object.groupBy, Beträge mit Intl.NumberFormat
• Import einer CSV-Datei und Export als JSON über ein ES-Modul mit klarer Schnittstelle
• Build mit Vite, Unit-Tests mit Vitest, Ende-zu-Ende-Test des Erfassungsformulars mit Playwright