Skip to content
Ausbildung

JavaScript

Entwicklungsumgebung & Grundlagen

Ziele

  • Verstehen, wie man JavaScript-Dateien im Browser und mit Node.js ausführt.
  • Erste kleine JavaScript-Programme schreiben.

Themen & Aufgaben

  • Umgebung einrichten
  • Editor (VS Code, Sublime, WebStorm)
  • Node.js für das Ausführen außerhalb des Browsers
  • JavaScript im Browser einbinden
  • script-Tag, inline vs. externe Skripte
  • Erste Ausgabe
  • console.log(“Hello, World!”)
  • Unterschiede: alert(), document.write(), console.log()

⸻

Grundlegende Sprachelemente

Ziele

  • Variablendeklaration und Datentypen verstehen.
  • Kenntnisse über Operatoren, Schleifen und Bedingungen bekommen.

Themen & Aufgaben

  • Variablen & Datentypen
  • var, let, const
  • Primitive (String, Number, Boolean, null, undefined, Symbol) und Objekte/Arrays
  • Operatoren & Ausdrücke
  • Arithmetische Operatoren (+, -, *, /, %)
  • Vergleichsoperatoren (== vs. ===)
  • Kontrollstrukturen
  • if/else, switch, ternärer Operator
  • Schleifen: for, while, do…while, for…of, for…in
  • Übung
  • FizzBuzz: Zahlen von 1 bis 100 ausgeben, bestimmte Bedingungen prüfen

⸻

Funktionen & Modularisierung

Ziele

  • Unterschied zwischen Funktionsdeklarationen und -ausdrücken verstehen.
  • Modularen Code schreiben (ES6-Module).

Themen & Aufgaben

  • Funktionen schreiben
  • Funktionsdeklaration vs. Funktionsausdruck
  • Arrow Functions (() => )
  • Module & Scope
  • Import/Export in ES6 (import, export)
  • Lokaler vs. globaler Scope
  • Übung
  • Kleine Bibliothek (z.B. Rechenfunktionen) auf mehrere Dateien aufteilen und importieren

⸻

Objekte & Arrays

Ziele

  • Verständnis für objektorientierte Ansätze in JavaScript (Prototype-Based Inheritance).
  • Arrays und ihre Methoden (map(), filter(), reduce()) beherrschen.

Themen & Aufgaben

  • Objekterstellung & Prototypen
  • Literalschreibweise vs. new Object()
  • Prototype-Kette
  • Arrays & Array-Methoden
  • forEach, map, filter, reduce, find etc.
  • Klassen (ES6)
  • class, Konstruktor, Methoden
  • Übung
  • Erstelle und manipuliere eine Produktliste (sortieren, filtern).
  • Schreibe eine Klasse für ein Fahrzeug (Marke, Baujahr, etc.).

⸻

Browser-DOM & Events

Ziele

  • DOM-Aufbau verstehen und mit JavaScript manipulieren.
  • Auf Nutzereingaben reagieren (Eventhandling).

Themen & Aufgaben

  • DOM-Abfragen & -Veränderungen
  • document.getElementById(), document.querySelector(), classList
  • Eventhandling
  • addEventListener(“click”, …), input, change
  • Übung
  • To-Do-Liste: Einträge erstellen, anzeigen, editieren, löschen

⸻

Asynchrones JavaScript

Ziele

  • Daten von einem Server abrufen (Ajax, Fetch).
  • Asynchrone Abläufe über Promises oder async/await steuern.

Themen & Aufgaben

  • Callbacks & Promises
  • Unterschied Callbacks vs. Promises
  • Promise-Chaining
  • Fetch API & async/await
  • Daten von einer öffentlichen API (z.B. JSONPlaceholder) abrufen
  • Error Handling
  • try…catch, .catch()
  • Übung
  • Kleine App, die Daten von einer REST-API abruft und anzeigt

⸻

Moderne JavaScript-Features & Tooling

Ziele

  • Überblick über neue Sprachfeatures (ES6+).
  • Praktische Tools für Entwicklung & Auslieferung kennenlernen.

Themen & Aufgaben

  • Wichtige ES6+/ESNext-Features
  • Destructuring, Spread/Rest-Operator, Template Strings, Default-Parameter
  • Build-Tools & Pakete
  • npm, yarn
  • Babel, Webpack, Vite
  • Linting & Testing
  • ESLint, Jest, Mocha/Chai
  • Übung
  • Projekt mit Webpack/Vite einrichten, Linting und erste Tests konfigurieren

⸻

Frameworks & Bibliotheken

Ziele

  • Größere Projekte strukturieren.
  • Unterschiedliche Ansätze kennenlernen (Frontend, Backend).

Themen & Aufgaben

  • Frontend-Frameworks (Beispiel: React, Vue, Angular)
  • Komponenten, State-Management, Lifecycle
  • Backend mit Node.js & Express
  • REST-APIs erstellen
  • Übung
  • Kleine Web-App mit Datenanzeige & Filter
  • Einfacher REST-Server mit Node.js/Express

⸻

Praktische Projekte

Ziele

  • Das Gelernte anwenden und vertiefen.
  • „Big Picture“: Wie fügt sich JavaScript in eine Komplettanwendung ein?

Projektideen

  • Todo-App mit Serveranbindung
  • Frontend mit React/Vue/Vanilla JS
  • Backend mit Node.js/Express
  • Datenbank (MongoDB, MySQL)
  • Echtzeitanwendung mit WebSockets
  • Chat-App (Socket.io)
  • Portfolio-Website
  • Präsentation Deiner JavaScript-Projekte und Code-Beispiele

⸻

Vertiefung & Spezialisierung

Ziele

  • Je nach Interesse tief in bestimmte Bereiche einsteigen.
  • Expertenwissen aufbauen (z.B. Performance, Testing, Sicherheit).

Mögliche Vertiefungen

  • Performanceoptimierung & Best Practices
  • Lighthouse, Chrome DevTools
  • Code-Splitting, Lazy Loading
  • Security im Frontend & Backend
  • Token-Handling (JWT), XSS, CSRF
  • Testing & CI/CD
  • Unit-Tests, Integrationstests (z.B. Cypress)
  • Automatisierte Pipelines (GitHub/GitLab)

⸻

Allgemeine Tipps

  • Regelmäßiges Üben: Kleine Projekte umsetzen, um Wissen zu festigen.
  • Git & Versionskontrolle: Eigene Projekte versionieren, kollaborativ arbeiten.
  • Dokumentation: MDN (Mozilla Developer Network) für JavaScript-Referenzen nutzen.
  • Online-Kurse & Communities: freeCodeCamp, Codecademy, Udemy, YouTube etc. für praktische Anleitungen.

⸻

Beispielhafter Zeitplan

  • Woche 1: Basics (Variablen, Datentypen, Funktionen).
  • Woche 2: Kontrollstrukturen, Schleifen, kleinere Miniprojekte (FizzBuzz).
  • Woche 3: Objekte, Arrays, DOM-Manipulation.
  • Woche 4: Asynchrones JavaScript (Promises, Fetch, async/await).
  • Woche 5: Tooling (npm, Webpack/Vite), Testing (Jest, Mocha).
  • Woche 6: Erstes Framework (React/Vue/Angular) oder Node.js (Backend).
  • Woche 7+: Fortgeschrittene Projekte & Spezialisierung (Frontend/Backend, Testing).

⸻

Fazit

  • JavaScript ist eine vielseitige Sprache, die sowohl im Frontend als auch im Backend eingesetzt werden kann.
  • Regelmäßiges Üben und das Arbeiten an Projekten sind der Schlüssel zum Erfolg.