Codae

JavaScript

Von den Programmiergrundlagen über DOM-Interaktion bis hin zum vollständigen Frontend-Projekt mit JavaScript.

16 Kapitel · 128 LektionenFür EinsteigerKostenlosLäuft im Browser

Kurs startenAlle Kurse

Das lernst du

Kursinhalt

  1. Kapitel 1 Erste Schritte und Ausdrücke

    Grundlegende Programmausgaben und Werte verstehen.

    1. Willkommen bei JavaScript
    2. Rechnen mit Zahlen
    3. Zeichenketten verknüpfen
    4. Syntaxfehler beheben
    5. Logische Ausdrücke und Vergleiche
    6. Kommentare und Dokumentation
    7. Fehlersuche bei Ausdrücken
    8. Mini-Projekt: Ausgaberechner

  2. Kapitel 2 Variablen und Datentypen

    Daten mit const und let speichern und Text, Zahlen sowie Booleans nutzen.

    1. Variablen mit let deklarieren
    2. Konstanten mit const
    3. Datentypen im Überblick
    4. Typkonflikte beheben
    5. Booleans und Bedingungen
    6. Template Strings mit Variablen
    7. Fehlersuche bei Variablennamen
    8. Mini-Projekt: Profil-Generator

  3. Kapitel 3 Bedingungen und Regeln

    Entscheidungen mit if/else und logischen Operatoren abbilden.

    1. Die if-Bedingung
    2. Entscheidungen mit else
    3. Mehrere Fälle mit else if
    4. Logische Operatoren (UND / ODER)
    5. Negation mit dem Ausrufezeichen
    6. Verschachtelte Bedingungen
    7. Fehlersuche bei Verzweigungen
    8. Mini-Projekt: Alters- und Ticketrechner

  4. Kapitel 4 Funktionen und Logik

    Wiederverwendbare Logik mit Parametern und Rückgabewerten schreiben.

    1. Funktionen deklarieren und aufrufen
    2. Parameter und Argumente
    3. Ergebnisse mit return zurückgeben
    4. Fehlerhafte Funktionsaufrufe korrigieren
    5. Pfeilfunktionen (Arrow Functions)
    6. Funktionen mit Bedingungen kombinieren
    7. Fehlersuche bei Scope und Variablen
    8. Mini-Projekt: Modularer Taschenrechner

  5. Kapitel 5 Fehlerbehebung und Code-Qualität

    Syntax- und Logikfehler in einfachen Programmen systematisch finden.

    1. Arten von Fehlern verstehen
    2. Konsolenausgaben zur Fehlersuche nutzen
    3. Den Call Stack und Fehlermeldungen lesen
    4. Code-Formatierung und Lesbarkeit
    5. Eingaben validieren und absichern
    6. Testen mit Beispieldaten
    7. Fehlersuche bei komplexer Logik
    8. Mini-Projekt: Der Code-Detektiv

  6. Kapitel 6 Arrays und Listen

    Sammlungen von Daten anlegen, verändern und auswerten.

    1. Einführung in Arrays
    2. Array-Länge und Eigenschaften
    3. Elemente hinzufügen und entfernen
    4. Fehlerhafte Array-Zugriffe beheben
    5. Suchen und Prüfen in Arrays
    6. Arrays mit Funktionen kombinieren
    7. Fehlersuche bei verschachtelten Arrays
    8. Mini-Projekt: Dynamische Aufgabenliste

  7. Kapitel 7 Schleifen und Transformationen

    Listen mit Schleifen, map und filter verarbeiten.

    1. Die for-Schleife
    2. Schleifen über Arrays
    3. Die while-Schleife
    4. Endlosschleifen vermeiden
    5. Array-Transformation mit map
    6. Arrays filtern mit filter
    7. Fehlersuche bei Schleifen und Filtern
    8. Mini-Projekt: Daten-Pipeline

  8. Kapitel 8 Objekte und Datenmodelle

    Zusammengehörige Werte in Objekten strukturieren und modellieren.

    1. Einführung in Objekte
    2. Auf Eigenschaften zugreifen
    3. Objekte verändern und erweitern
    4. Fehlerhaften Objektzugriff korrigieren
    5. Methoden in Objekten
    6. Objekte in Arrays speichern
    7. Fehlersuche bei Datenmodellen
    8. Mini-Projekt: Produktkatalog

  9. Kapitel 9 Das DOM und Elemente

    HTML-Strukturen mit JavaScript auswählen und verändern.

    1. Einführung in das DOM
    2. Elemente mit querySelector auswählen
    3. Textinhalte mit textContent verändern
    4. Fehlerhafte Selektoren korrigieren
    5. HTML-Attribute lesen und schreiben
    6. CSS-Klassen mit classList steuern
    7. Fehlersuche bei DOM-Manipulationen
    8. Mini-Projekt: DOM-Begrüßungsbox

  10. Kapitel 10 Dynamisches Rendering

    Katalogdaten sicher in die Benutzeroberfläche rendern.

    1. HTML-Strukturen aus Daten erzeugen
    2. Vorhandene Container leeren und füllen
    3. Listen mit Schleifen in das DOM rendern
    4. Fehlerhafte DOM-Einfügungen korrigieren
    5. Sicherheitsaspekte bei innerHTML
    6. Erstellen von Elementen mit createElement
    7. Fehlersuche beim dynamischen Rendering
    8. Mini-Projekt: Dynamischer Produktkatalog

  11. Kapitel 11 Events und Interaktion

    Auf Klicks, Eingaben und Formulare reagieren.

    1. Einführung in Event-Listener
    2. Das Event-Objekt nutzen
    3. Eingabefelder und input-Events
    4. Formulare und preventDefault
    5. Tastatur-Events verarbeiten
    6. Mehrere Elemente mit Events versehen
    7. Fehlersuche bei Event-Bindungen
    8. Mini-Projekt: Interaktives Formular

  12. Kapitel 12 Zustand und Anwendung

    Anwendungszustand trennen und einen Warenkorb aufbauen.

    1. Was ist Anwendungszustand?
    2. Zustand und UI synchron halten
    3. Zustand mit Aktionen verändern
    4. Fehlerhafte Zustandsaktualisierungen korrigieren
    5. Mehrere Zustände kombinieren
    6. Warenkorb-Logik implementieren
    7. Fehlersuche bei Status-Inkonsistenzen
    8. Mini-Projekt: Interaktiver Warenkorb

  13. Kapitel 13 Persistenz mit LocalStorage

    Daten im Browser speichern und ungültige Zustände abfangen.

    1. Einführung in LocalStorage
    2. Objekte mit JSON serialisieren
    3. Zustand beim Start laden
    4. Fehlerhafte JSON-Daten abfangen
    5. Fallback-Werte bei leerem Speicher
    6. Automatisches Speichern bei Änderungen
    7. Fehlersuche bei Persistenzkonflikten
    8. Mini-Projekt: Dauerhafter Warenkorb

  14. Kapitel 14 Asynchroner Code und Fetch

    Daten asynchron laden und Lade- sowie Fehlerzustände verwalten.

    1. Einführung in asynchrone Abläufe
    2. Mit Promises arbeiten
    3. Daten abrufen mit der Fetch-API
    4. Async und Await einsetzen
    5. Fehlerbehandlung bei Netzwerkaufrufen
    6. Lade- und Statusanzeigen steuern
    7. Fehlersuche bei asynchronen Abläufen
    8. Mini-Projekt: API-Daten-Lader

  15. Kapitel 15 Projekt-Architektur und Module

    Größere Skripte in Module gliedern und aufeinander abstimmen.

    1. Einführung in ES-Module
    2. Funktionen exportieren mit export
    3. Funktionen importieren mit import
    4. Default-Exporte und Aliasing
    5. Architektur und Dateitrennung
    6. Zirkuläre Abhängigkeiten vermeiden
    7. Fehlersuche bei Modulpfaden
    8. Mini-Projekt: Modulare Anwendung

  16. Kapitel 16 Abschluss und Projektreife

    Den fertigen Katalog testen, dokumentieren und ausliefern.

    1. Qualitätssicherung im Frontend
    2. Unit-Tests für Logik-Module
    3. Edge Cases und Robustheit
    4. Leistungsoptimierung und Code-Hygiene
    5. Dokumentation und JSDoc
    6. Deployment-Vorbereitung
    7. Fehlersuche im Gesamtsystem
    8. Abschluss-Projekt: Die fertige Web-App

So funktioniert jede Lektion

Keine stundenlangen Videos. Jede Lektion ist eine kurze Runde, die du selbst machst, bis die Idee sitzt.

  1. Lesen

    Eine kurze Erklärung und eine klare Aufgabe. Gerade genug, um loszulegen.

  2. Schreiben

    Du tippst den Code selbst, in einem echten Editor direkt im Browser.

  3. Ausführen

    Führ ihn aus und sieh sofort, was dein Programm wirklich tut.

  4. Prüfen

    Prüfen sagt dir, ob die Aufgabe gelöst ist, und was noch fehlt, falls nicht.

Gut zu wissen

Weitere Kurse