JavaScript

Weblink

• Jonas Schmedtmann The Complete JavaScript Course 2025
• Ruben Winkler Der ultimative JavaScript Komplettkurs

Lernpfad

Phase 1: Grundlagen (Woche 1-2)

• Einführung in JavaScript: Was ist JavaScript? Geschichte und Einsatzgebiete (Frontend, Backend).
• Entwicklungsumgebung einrichten: Browser-Entwicklertools, Code-Editor (z. B. VS Code), Node.js installieren.
• Variablen und Datentypen: `let`, `const`, `var`. Primitiven (String, Number, Boolean, Null, Undefined) vs. Objekte.
• Operatoren: Arithmetische, Zuweisungs-, Vergleichs- und logische Operatoren.
• Kontrollstrukturen: `if/else`, `switch`, Schleifen (`for`, `while`, `do...while`).
• Funktionen: Funktionsdeklarationen, Funktionsausdrücke, Arrow Functions, Scope (Gültigkeitsbereich).

Phase 2: Fortgeschrittene Grundlagen (Woche 3-4)

• Arrays: Erstellung, Methoden (`push`, `pop`, `shift`, `unshift`, `map`, `filter`, `reduce`).
• Objekte: Eigenschaften, Methoden, Iteration (`for...in`), Destrukturierung, Spread/Rest-Operatoren.
• DOM-Manipulation: Elemente auswählen (`getElementById`, `querySelector`), Elemente erstellen/ändern/löschen, Event Listener.
• Fehlerbehandlung: `try...catch...finally`.

Phase 3: Asynchrone Programmierung und APIs (Woche 5-6)

• Konzepte: Callbacks, Callback Hell, Event Loop.
• Promises: Erstellung, `.then()`, `.catch()`, `.finally()`.
• Async/Await: Syntax, Fehlerbehandlung mit `try...catch`.
• Fetch API: Daten von REST APIs abrufen, HTTP-Methoden (GET, POST, PUT, DELETE), JSON Parsing.

Phase 4: Objektorientierte und Funktionale Programmierung (Woche 7-8)

• OOP in JavaScript: Prototypen, Klassen (`class`), Vererbung (`extends`), Kapselung.
• Module: ES6 Module (`import`, `export`), CommonJS (Node.js).
• Funktionale Konzepte: Pure Functions, Higher-Order Functions, Closures.

Phase 5: Werkzeuge und Frameworks (Woche 9-12)

• Paketmanager: npm oder yarn.
• Build-Tools / Bundler: Webpack, Vite oder Parcel (Grundlagen).
• Git & GitHub: Versionskontrolle für JavaScript-Projekte.
• Frontend-Framework/Bibliothek (optional aber empfohlen): React, Vue.js oder Angular (Auswahl für den Einstieg in moderne SPA-Entwicklung).

Lernplan (12 Wochen)

| Woche | Thema | Lernziele | Praktische Übung | |----------|-----------------------------|-----------------------------------|----------------------------------------------------------------------| | Woche 1 | Grundlagen 1 | Variablen, Datentypen, Operatoren | Einfacher Taschenrechner im Browser (Konsole) | | Woche 2 | Grundlagen 2 | Kontrollstrukturen, Funktionen | Zahlen-Rate-Spiel | | Woche 3 | Datenstrukturen | Arrays, Objekte | To-Do Listen App (nur Logik/Konsole) | | Woche 4 | DOM Manipulation | Events und DOM | To-Do Listen App mit UI im Browser | | Woche 5 | Asynchronität | Promises, Event Loop | Verzögerter Zähler, Simulation von Ladezeiten | | Woche 6 | APIs & Fetch | Daten vom Server asynchron laden | Wetter-App (Daten von einer Public API anzeigen) | | Woche 7 | OOP & Klassen | Prototypen und Klassen | Einfaches Text-Adventure-Spiel | | Woche 8 | Fortgeschrittene Konzepte | Closures, Module | Refactoring alter Projekte in Modul-Struktur | | Woche 9 | Tooling | npm, Git, Vite/Webpack | Aufsetzen eines Projekts mit npm und Vite | | Woche 10 | Frameworks / React (Teil 1) | Komponenten, State, Props | Komponenten-basierte To-Do Liste | | Woche 11 | Frameworks / React (Teil 2) | Hooks, Routing (Grundlagen) | Kleine Single Page Application (SPA) | | Woche 12 | Abschlussprojekt | Alles zusammenführen | Eine vollständige Web-App (z.B. Expense Tracker oder Film-Datenbank) |

Tipps für den Erfolg

• Regelmäßigkeit: Jeden Tag etwas Code schreiben ist besser als einmal pro Woche stundenlang.
• Projekte statt Tutorials: Versuche so früh wie möglich, eigene kleine Projekte zu bauen ("Tutorial Hell" vermeiden).
• Dokumentation lesen: Mache MDN (Mozilla Developer Network) zu deinem besten Freund.
• Code lesen: Schau dir Open-Source-Projekte oder Code-Snippets von anderen an.