JavaScript Übungen
JavaScript Übungen
Counter, Todo-Liste, FAQ Accordion, Dark Mode Toggle, Formularvalidierung, API-Daten und Mini-Projekt. Diese Seite ist als Lernunterlage, Nachschlagewerk und Prüfungsvorbereitung für die CAP-Ausbildung gedacht.
Lernziele
- kleine interaktive Komponenten bauen
- DOM, Events, Arrays und Funktionen kombinieren
- eine Mini-App strukturiert umsetzen
Erklärung
JavaScript-Übungen sollten klein starten und dann kombiniert werden. Ein Counter übt Zustand und Events. Eine Todo-Liste übt Arrays und DOM. Formularvalidierung verbindet HTML, Events und Bedingungen. API-Aufgaben üben asynchrones Denken.
Für Prüfungsvorbereitung ist wichtig, den Code erklären zu können: Wo liegt der Zustand? Welches Event startet die Logik? Wie wird die Oberfläche aktualisiert?
Beispiele
let count = 0;
button.addEventListener("click", () => {
count += 1;
output.textContent = count;
});
Der Counter zeigt Zustand, Event und DOM-Aktualisierung in wenigen Zeilen.
themeToggle.addEventListener("click", () => {
document.documentElement.classList.toggle("dark");
});
Ein Dark-Mode-Toggle sollte mit CSS-Variablen kombiniert werden.
Typische Fehler
- Zu viele Features auf einmal beginnen.
- HTML-Struktur nicht vorbereiten.
- Fehlerzustände bei API-Übungen ignorieren.
Best Practices
- Baue zuerst eine funktionierende Minimalversion.
- Trenne Datenänderung und DOM-Ausgabe gedanklich.
- Teste Tastaturbedienung und leere Zustände.
Kleine Übung
Mini-Projekt: Baue eine Notizen-App mit Eingabeformular, Liste, Löschen-Funktion, leerem Zustand und Speicherung im Speicher während der Sitzung.
Zusammenfassung
JavaScript ergänzt Webseiten um Verhalten. Robuster Code arbeitet mit klaren Daten, kleinen Funktionen, sicheren DOM-Operationen, guter Fehlerbehandlung und nachvollziehbarer Struktur.
Weiterführende Seiten
Zuletzt aktualisiert: 7. Juni 2026