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).