Kurs · Modul 288
Programmiertechniken im Webfrontend einsetzen
Nach diesem Kurs bringst du Logik in deine Webseiten: Du schreibst JavaScript mit Variablen, Bedingungen, Schleifen, Arrays und Objekten, teilst deinen Code in saubere Funktionen auf und verarbeitest Daten mit map, filter und reduce. Du veränderst Seiten über das DOM, ohne Sicherheitslücken wie XSS zu öffnen, baust Filter, Menüs und Live-Rechner, die auch mit der Tastatur funktionieren, und lädst Daten aus JSON-Dateien so robust, dass die Seite bei Fehlern nie leer bleibt. Fehler findest du mit Konsole, Breakpoints und Network-Tab systematisch statt durch Raten. 18 Code-Labore mit automatischen Tests, ein durchgehendes Praxisprojekt und eine Prüfungssimulation bereiten dich gezielt auf den Kompetenznachweis vor. Was der Kurs nicht ersetzt: das eigene Üben im Editor und Browser, das du mit jedem Labor und Meilenstein trainierst.
Dein nächster Schritt
Erste Schritte: Variablen, Datentypen und Operatoren
Du bindest ein Skript richtig ein, arbeitest mit der Konsole, legst Variablen mit const und let an und rechnest mit Zahlen und Texten, ohne in die typischen Fallen wie "10" + 5 oder 0.1 + 0.2 zu tappen. · 40 Min.
Dein KI-Lerncoach
Lernen mit KI, aber richtig
Der Tutor kennt dieses Modul, deine Lektion und deine Aufgaben. Er führt dich zur Lösung, statt sie vorzusagen.
Training
…
Aufgaben gelöst
Karteikarten
…
Karten im Kurs
Praxisprojekt
…
Meilensteine
Prüfung
…
bestes Ergebnis
Deine Kompetenzen
offen begonnen sicher gemeistert
Berechnet aus deinen gelösten Aufgaben. Ziel für den Kompetenznachweis: überall mindestens «sicher» auf Stufe 2.
| 1 · Grundlagen | 2 · Fortgeschritten | 3 · Erweitert | |
|---|---|---|---|
| A · Grundbausteine und Funktionen | 0% | – | – |
| B · Die Seite verändern | – | – | – |
| C · Auf Events reagieren | – | – | – |
| D · Daten laden | – | – | – |
| E · Fehler finden | – | – | – |
Abzeichen
Lektionen
- 1Erste Schritte: Variablen, Datentypen und OperatorenDu bindest ein Skript richtig ein, arbeitest mit der Konsole, legst Variablen mit const und let an und rechnest mit Zahlen und Texten, ohne in die typischen Fallen wie "10" + 5 oder 0.1 + 0.2 zu tappen.Gratis40 Min.
- 2Bedingungen, Schleifen, Arrays und ObjekteDu übersetzt Preisregeln mit if und Vergleichen in Code, speicherst Ausflüge als Array von Objekten und verarbeitest sie mit Schleifen.45 Min.
- 3Funktionen: Code aufteilen und wiederverwendenDu schreibst Funktionen mit Parametern, Standardwerten und Rückgabewerten, kennst Arrow Functions und den Gültigkeitsbereich von Variablen und teilst einen Preisrechner sauber auf.40 Min.
- 4Daten verarbeiten mit map, filter, find, sort und reduceDu wählst mit filter aus, wandelst mit map um, findest mit find, ordnest mit sort und fasst mit reduce zusammen, und du verkettest diese Methoden zu wiederverwendbaren Funktionen.45 Min.
- 5Die Seite verändern: das DOMDu findest Elemente mit querySelector, änderst Texte, Attribute und Klassen, erzeugst Karten aus Daten und weisst, warum textContent sicher ist und innerHTML mit Daten zu XSS führen kann.45 Min.
- 6Auf Benutzer reagieren: EventsDu reagierst mit addEventListener auf Klicks, Eingaben und Formulare, nutzt das Event-Objekt, preventDefault und Event Delegation, baust barrierefreie Komponenten und speicherst eine Merkliste in localStorage.45 Min.
- 7Daten laden mit fetch und JSONDu schreibst gültiges JSON, lädst Dateien mit fetch und async/await, fängst Fehler mit res.ok und try/catch ab, ergänzt fehlende Felder und formatierst Datumswerte für die Schweiz.45 Min.
- 8Fehler finden mit den DevToolsDu liest Fehlermeldungen, setzt console.log und Breakpoints gezielt ein, prüfst im Network-Tab, ob Daten ankommen, und gehst bei der Fehlersuche systematisch vor bis zur Dokumentation.40 Min.