Zum Inhalt springen
aviral gupta
Kontakt aufnehmen

// LERNEN · SPRACHEN & FRAMEWORKS

JavaScript

Ein praxisnaher JavaScript-Kurs vom ersten Programm in der Konsole bis zu asynchronem Code, Web Workern, Sicherheit und dem Veröffentlichen eines Pakets. Jedes Beispiel wird ausgeführt und an ECMAScript 2026 geprüft.

Niveau: Einstieg bis Vertiefung · Für: Alle, die das Web mit JavaScript programmieren möchten, vom ersten Skript bis zum ausgelieferten Code. Keine Vorkenntnisse nötig.

Kurs beginnen

Lehrplan

Einstieg

Vollständig

Nach dieser Stufe können Sie

  • JavaScript in der Browser-Konsole und mit Node.js ausführen und einen SyntaxError, ReferenceError oder TypeError lesen, um den Fehler zu finden
  • Programme mit let und const, Zahlen, Strings, Template-Literalen, Bedingungen und Schleifen schreiben und === und == unterscheiden
  • Funktionen mit Standard- und Rest-Parametern, Pfeilfunktionen und Closures schreiben und aufrufen
  • Daten mit Arrays und Objekten, map, filter, reduce, Destrukturierung und Spread speichern und umformen und in JSON und zurück umwandeln
  • Eine interaktive Seite bauen, die das DOM als Reaktion auf Ereignisse liest und ändert, mit Ereignisdelegation
  1. B1Erste Schritte5 von 5 geschrieben · 5 LektionenLäuft im Browser

    Ein erstes Programm ausführen, lesen und von Fehlern befreien

    Sie bauen: Ein Zahlenratespiel

    1. B1.1JavaScript ausführen: in der Konsole und mit Node.js
    2. B1.2Variablen mit let und const
    3. B1.3Fehlermeldungen lesen
    4. B1.4Die Konsole und der Debugger
    5. B1.5Projekt: ein Zahlenratespiel
  2. B2Grammatik, Typen und Operatoren5 von 5 geschrieben · 5 LektionenLäuft im Browser

    Jeden primitiven Typ und jeden Operator richtig einsetzen, auch Gleichheit und Gleichwertigkeit

    Sie bauen: Ein Einheitenumrechner

    1. B2.1Primitive Typen und typeof
    2. B2.2Zahlen, Math und Runden
    3. B2.3Strings und Template-Literale
    4. B2.4Gleichheit und Selbigkeit
    5. B2.5Projekt: ein Einheitenumrechner
  3. B3Kontrollfluss und Schleifen5 von 5 geschrieben · 5 LektionenLäuft im Browser

    Für eine Aufgabe die passende Verzweigung und Schleife wählen

    Sie bauen: Ein Notenbericht

    1. B3.1if, else und Truthiness
    2. B3.2switch und der Bedingungsoperator
    3. B3.3for, while und for...of
    4. B3.4break und continue
    5. B3.5Projekt: ein Notenbericht
  4. B4Funktionen5 von 5 geschrieben · 5 LektionenLäuft im Browser

    Kleine wiederverwendbare Funktionen schreiben und Closures verstehen

    Sie bauen: Eine Bibliothek aus Zähler und Formatierer mit Closures

    1. B4.1Funktionen deklarieren und aufrufen
    2. B4.2Standardwerte und Rest-Parameter
    3. B4.3Rückgabewerte
    4. B4.4Pfeilfunktionen und Gültigkeitsbereiche
    5. B4.5Projekt: eine Bibliothek mit Zählern und Formatierern aus Closures
  5. B5Arrays, Objekte und JSON5 von 5 geschrieben · 5 LektionenLäuft im Browser

    Sammlungen von Datensätzen mit Array-Methoden, Destrukturierung, Spread und JSON umformen

    Sie bauen: Summen für einen Warenkorb

    1. B5.1Arrays und ihre Methoden
    2. B5.2map, filter und reduce
    3. B5.3Objekte, Destrukturierung und Spread
    4. B5.4JSON: parse und stringify
    5. B5.5Projekt: Summen für einen Warenkorb
  6. B6Das DOM und Ereignisse5 von 5 geschrieben · 5 LektionenLäuft im Browser

    Eine Seite mit Listenern, Bubbling und Delegation auf den Nutzer reagieren lassen

    Sie bauen: Eine Bildergalerie

    1. B6.1Elemente auswählen und ändern
    2. B6.2Elemente erzeugen und entfernen
    3. B6.3Listener und das Event-Objekt
    4. B6.4Bubbling und Event-Delegation
    5. B6.5Projekt: eine Bildergalerie

Projekt der Stufe Einstieg

Haushaltsbuch

Eine einzelne Seite, die Ausgaben hinzufügt, auflistet und löscht, die Summe zeigt, nach Kategorie filtert und ihre Daten in localStorage behält.

Läuft im BrowserSelbst geprüft anhand einer Checkliste

Zur Projektanleitung

Aufbau

Vollständig

Nach dieser Stufe können Sie

  • Daten mit Klassen, privaten Feldern, Vererbung und der Prototypkette modellieren und erklären, was class im Hintergrund tut
  • Ein Programm auf ES-Module aufteilen, mit Node.js ausführen und Abhängigkeiten und Skripte mit npm verwalten
  • Fehler mit try, catch, finally, eigenen Error-Unterklassen und cause behandeln und Tests mit node:test schreiben
  • Die Reihenfolge von synchronem Code, Microtasks und Timern vorhersagen und korrekten asynchronen Code mit Promise.all, allSettled, any und race schreiben
  • JSON über HTTP laden, HTTP-Fehler und Abbruch mit AbortController behandeln und Daten im Client speichern
  1. I1Asynchrones JavaScript6 von 6 geschrieben · 6 LektionenLäuft im Browser

    Die Ausführungsreihenfolge von asynchronem Code vorhersagen und steuern

    Sie bauen: Ein Quiz mit Countdown

    1. I1.1Die Event Loop und Promises: asynchrones JavaScript vorhersagen
    2. I1.2Von Callbacks zu Promises
    3. I1.3async, await und try/catch
    4. I1.4Promise.all, allSettled, any und race
    5. I1.5Eigene Funktionen schreiben, die ein Promise zurückgeben
    6. I1.6Projekt: ein Quiz mit Countdown
  2. I2Objekte, Prototypen und Klassen5 von 5 geschrieben · 5 LektionenLäuft im Browser

    Daten mit Klassen modellieren und Prototypen erklären

    Sie bauen: Ein Lagerbestandsmodell

    1. I2.1Die Prototypenkette
    2. I2.2Klassen und Konstruktoren
    3. I2.3Unterklassen mit extends und super
    4. I2.4Private Felder, Getter und statische Member
    5. I2.5Projekt: ein Lagermodell
  3. I3Module, Node.js und npm5 von 5 geschrieben · 5 LektionenLäuft auf Ihrem Rechner

    Ein Programm aus mehreren Dateien mit ES-Modulen strukturieren und lokal mit Node.js und npm ausführen

    Sie bauen: Ein To-do-Werkzeug für die Kommandozeile

    1. I3.1import und export: ein Programm in Module aufteilen
    2. I3.2Benannte und Default-Exporte, as und import *
    3. I3.3ES-Module in Node.js: "type", .mjs und .cjs
    4. I3.4npm: Abhängigkeiten, Lock-Datei und Skripte
    5. I3.5Projekt: ein To-do-Werkzeug für die Kommandozeile
  4. I4Fehler, Debugging und Tests5 von 5 geschrieben · 5 LektionenLäuft auf Ihrem Rechner

    Laut scheitern, Fehler schnell finden und Verhalten mit node:test belegen

    Sie bauen: Eine getestete Validierungsbibliothek

    1. I4.1throw, try, catch und finally
    2. I4.2Eigene Fehler und error.cause
    3. I4.3Stack Traces und Breakpoints
    4. I4.4Testen mit node:test und assert
    5. I4.5Projekt: eine getestete Validierungsbibliothek
  5. I5Mit Daten arbeiten5 von 5 geschrieben · 5 LektionenLäuft im Browser

    Text, Datumsangaben und Schlüsseldaten mit Map, Set, regulären Ausdrücken und Intl verarbeiten

    Sie bauen: Eine Logdatei-Analyse

    1. I5.1Map und Set: Daten nach Schlüssel, Werte einmal
    2. I5.2Reguläre Ausdrücke: Text finden, prüfen und ersetzen
    3. I5.3Datum und Uhrzeit mit Date
    4. I5.4Formatieren für Menschen mit Intl
    5. I5.5Projekt: ein Logdatei-Analysator
  6. I6Netzwerkanfragen und Speicher im Client5 von 5 geschrieben · 5 LektionenLäuft auf Ihrem Rechner

    Daten in einer Web-App mit fetch, AbortController, localStorage und IndexedDB laden, senden und behalten

    Sie bauen: Ein Leselisten-Client für einen lokalen JSON-Server

    1. I6.1fetch und JSON: Daten laden und senden
    2. I6.2HTTP-Fehler, Wiederholungen und Timeouts
    3. I6.3Anfragen mit AbortController abbrechen
    4. I6.4localStorage, sessionStorage und IndexedDB
    5. I6.5Projekt: ein Leselisten-Client

Projekt der Stufe Aufbau

Leseliste

Ein Node.js-Kommandozeilenwerkzeug und ein Browser-Client mit ES-Modulen, Klassen, einem JSON-Dateispeicher und einem fetch-Client, der Fehler und Abbruch behandelt.

Läuft auf Ihrem RechnerSelbst geprüft anhand einer Checkliste

Zur Projektanleitung

Vertiefung

Demnächst verfügbar

Nach dieser Stufe können Sie

  • Iterables, Generatoren und asynchrone Iteratoren schreiben und verzögert ausgewertete Pipelines mit Iterator-Helfern bauen
  • Property-Deskriptoren, Symbole, Proxy und Reflect nutzen und die Bindung von this und den Strict Mode erklären
  • Rechenintensive Arbeit in einen Web Worker verlagern, mit typisierten Arrays arbeiten und ein Speicherleck finden und beheben
  • XSS, Prototype Pollution und Risiken durch Abhängigkeiten erkennen und verhindern und eine Content Security Policy setzen
  • Ein getestetes, gelintetes Paket veröffentlichen, eine statische Web-App ausliefern und ECMA-262 lesen, um eine Verhaltensfrage zu klären
  1. A1Iteratoren und GeneratorenDemnächst verfügbar · 5 LektionenLäuft im Browser

    Verzögert ausgewertete, kombinierbare Datenpipelines bauen

    Sie bauen: Eine verzögert ausgewertete CSV-Pipeline

    1. A1.1Demnächst verfügbar
    2. A1.2Demnächst verfügbar
    3. A1.3Demnächst verfügbar
    4. A1.4Demnächst verfügbar
    5. A1.5Demnächst verfügbar
  2. A2Metaprogrammierung und Objekt-InternaDemnächst verfügbar · 5 LektionenLäuft im Browser

    Mit Deskriptoren, Symbolen, Proxy und Reflect steuern, wie sich Objekte verhalten

    Sie bauen: Ein validierter, beobachtbarer Speicher

    1. A2.1Demnächst verfügbar
    2. A2.2Demnächst verfügbar
    3. A2.3Demnächst verfügbar
    4. A2.4Demnächst verfügbar
    5. A2.5Demnächst verfügbar
  3. A3this, Strict Mode und ZahlenDemnächst verfügbar · 5 LektionenLäuft im Browser

    Knifflige Verhaltensfragen zu this, Strict Mode und Zahlen anhand der Spezifikation klären

    Sie bauen: Ein Modul für Geldbeträge

    1. A3.1Demnächst verfügbar
    2. A3.2Demnächst verfügbar
    3. A3.3Demnächst verfügbar
    4. A3.4Demnächst verfügbar
    5. A3.5Demnächst verfügbar
  4. A4Nebenläufigkeit und LeistungDemnächst verfügbar · 5 LektionenLäuft im Browser

    Den Haupt-Thread frei und den Speicher unter Kontrolle halten

    Sie bauen: Ein Bildfilter in einem Web Worker

    1. A4.1Demnächst verfügbar
    2. A4.2Demnächst verfügbar
    3. A4.3Demnächst verfügbar
    4. A4.4Demnächst verfügbar
    5. A4.5Demnächst verfügbar
  5. A5SicherheitDemnächst verfügbar · 5 LektionenBrowser und Ihr Rechner

    Die häufigen Angriffe im Client verhindern: XSS, Prototype Pollution und riskante Abhängigkeiten

    Sie bauen: Abhängigkeiten prüfen

    1. A5.1Demnächst verfügbar
    2. A5.2Demnächst verfügbar
    3. A5.3Demnächst verfügbar
    4. A5.4Demnächst verfügbar
    5. A5.5Demnächst verfügbar
  6. A6Werkzeuge, Pakete und AuslieferungDemnächst verfügbar · 5 LektionenLäuft auf Ihrem Rechner

    Code ausliefern, den andere nutzen können: linten, bündeln, veröffentlichen und bereitstellen

    Sie bauen: Eine statische App bereitstellen

    1. A6.1Demnächst verfügbar
    2. A6.2Demnächst verfügbar
    3. A6.3Demnächst verfügbar
    4. A6.4Demnächst verfügbar
    5. A6.5Demnächst verfügbar

Projekt der Stufe Vertiefung

CSV-Explorer

Liest eine große CSV-Datei in einem Web Worker mit einer Generator-Pipeline ein und zeigt Kennzahlen, ohne die Eingabe zu blockieren, unter einer strengen CSP.

Läuft im BrowserSelbst geprüft anhand einer Checkliste

Abschlussprojekt

Abschlussprojekt

Offline-fähiger Gewohnheits-Tracker

Eine statische Web-App mit Modulen, IndexedDB-Speicher, JSON-Import und -Export, einer per Tastatur bedienbaren Oberfläche, node:test-Tests und einer README zur Auslieferung.

Läuft auf Ihrem RechnerSelbst geprüft anhand einer Checkliste

Quellen