- Dynamic Sidebar mit window.COURSES_MANIFEST für 13 Kurse (216 Kapitel) - Kurswechsler Dropdown mit Direktnavigation - Fortschrittsanzeige mit Solved-Checkmarks (✓) aus localStorage - Responsive Off-Canvas Drawer mit Floating Action Button (☰ Kapitel) & Backdrop auf Mobile/Tablets - Web-IDE Topbar Drawer-Button (☰ Kapitel) für unterbrechungsfreien Vollbild-Editor - Saubere Bereinigung redundanter statischer Legacy-Sidebars |
||
|---|---|---|
| .. | ||
| aufgabe.js | ||
| index.html | ||
| musterloesung.js | ||
| README.md | ||
| test_aufgabe.js | ||
🌐 JS 08: Fehlerbehandlung & Debugging
Willkommen zu Modul 08 des JavaScript-Kurses! In diesem Modul lernst du defensive Programmiertechniken, strukturierte Ausnahmebehandlung mit try...catch...finally und den Aufbau professioneller Fehlerklassen-Hierarchien.
🎯 Lernziele
Nach diesem Modul kannst du:
- Das
try...catch...finallyKontrollmuster verstehen und für fehlertolerante Anwendungen einsetzen. - Gezielte Fehler mit
throw new Error(...)auslösen. - Eigene Fehlerklassen von
Errorableiten (class ValidierungsFehler extends Error). - Fehlerklassen hierarchisch strukturieren und mit Zusatzattributen (wie betroffenes Formularfeld oder Saldo) ausstatten.
- Im
catch-Block unterschiedliche Fehlerursachen mittelsinstanceofunterscheiden und behandeln.
💡 Theoretische Grundlagen
1. Das try...catch...finally Muster
try {
// Kritischer Code:
const daten = JSON.parse(roheEingabe);
verarbeite(daten);
} catch (error) {
// Behandlung:
console.error("Fehler abgefangen:", error.message);
} finally {
// Läuft garantiert IMMER:
cleanup();
}
2. Eigene Fehlerklassen definieren
Standard-Fehler (new Error(...)) enthalten oft nicht genügend Kontext für granulare UI-Reaktionen. Durch das Ableiten eigener Klassen schaffen wir Klarheit:
// Basis für alle Fehler dieser Domäne:
class AnwendungsFehler extends Error {
constructor(message) {
super(message);
this.name = "AnwendungsFehler";
}
}
// Spezifischer Validierungsfehler mit Feldbezug:
class ValidierungsFehler extends AnwendungsFehler {
constructor(message, feld = null) {
super(message);
this.name = "ValidierungsFehler";
this.feld = feld;
}
}
3. Fehler differenzieren mit instanceof
try {
fuehreOperationAus();
} catch (err) {
if (err instanceof ValidierungsFehler) {
console.warn(`Ungültige Eingabe im Feld ${err.feld}: ${err.message}`);
} else if (err instanceof GuthabenFehler) {
console.warn(`Guthaben (${err.saldo} €) reicht nicht für ${err.betrag} € aus.`);
} else {
// Unbekannter Fehler -> Neu werfen
throw err;
}
}
🪂 Didaktische Analogie: Die Notbremse & der Auffang-Fallschirm
throw: Das Ziehen der Notbremse im Zug – der normale Ablauf wird sofort unterbrochen.catch: Der Fallschirm, der die Passagiere vor dem Absturz bewahrt und einen sicheren Ausstieg ermöglicht.finally: Der Flughafen-Boden, der am Ende des Flugs immer erreicht wird, egal wie turbulent die Reise war.
🎯 Aufgabenübersicht in aufgabe.js
- TODO 1: Error-Klassenhierarchie:
AnwendungsFehler extends ErrorValidierungsFehler extends AnwendungsFehler(mitfeld)GuthabenFehler extends AnwendungsFehler(mitsaldo,betrag)
- TODO 2:
sichereDivision(a, b):- Prüft Zahlen und fängt Division durch 0 mit
AnwendungsFehlerab.
- Prüft Zahlen und fängt Division durch 0 mit
- TODO 3:
parseBenutzerJson(jsonString):- Fängt JSON-Syntaxfehler ab und validiert das Feld
name.
- Fängt JSON-Syntaxfehler ab und validiert das Feld
- TODO 4:
pruefeTransaktion(kontoSaldo, abhebeBetrag):- Prüft positive Beträge und ausreichendes Guthaben mit
GuthabenFehler.
- Prüft positive Beträge und ausreichendes Guthaben mit
🧪 Tests ausführen
Führe die Testsuite in der Web-IDE oder lokal aus:
# In der Web-IDE: Klicke auf 'Code ausführen & testen'