JavaScript

Hinweis: Diese Inhalte wurden mit Unterstützung von Künstlicher Intelligenz erstellt und redaktionell überprüft (Transparenzhinweis gemäß Art. 50 EU AI Act).

---

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.

---

Hinweis: Diese Inhalte wurden mit Unterstützung von Künstlicher Intelligenz erstellt und redaktionell überprüft (Transparenzhinweis gemäß Art. 50 EU AI Act).