Programmiertechniken im Webfrontend einsetzen

Bisher waren deine Seiten statisch. Jetzt bringst du Logik in den Browser. Du lernst die Grundbausteine des Programmierens mit JavaScript kennen: Variablen, Bedingungen, Schleifen, Arrays, Objekte und Funktionen. Damit greifst du auf Elemente der Seite zu, reagierst auf Klicks und Eingaben und baust typische Interaktionen wie Galerien, Filter oder Rechner. Zum Schluss lädst du Daten aus JSON-Dateien und zeigst sie dynamisch an. Fehler findest du systematisch mit den Browser-Entwicklertools.

Das sind die Fähigkeiten, die am Ende des Moduls sitzen sollten. Jedes Ziel mit einem Beispiel aus dem Lehrbetrieb.

1. 1

   Variablen, Datentypen, Bedingungen und Schleifen in JavaScript einsetzen

   Kompetenz A

   Du speicherst Werte in Variablen mit let und const, unterscheidest Zahlen, Texte, Wahrheitswerte, Arrays und Objekte und steuerst den Ablauf mit if und Schleifen. So kannst du einfache Regeln in Code übersetzen.

   Situation

   Eine Druckerei in Luzern möchte auf ihrer Website einen Preisrechner für Flyer: CHF 0.18 pro Stück, ab 1000 Stück 15 % Rabatt, ab 5000 Stück 25 %.

   Deine Aufgabe

   Schreibe die Logik, die aus der Auflage den Preis berechnet.

   Gutes Ergebnis

   const STUECKPREIS = 0.18; eine Variable 'rabatt' wird mit if/else if je nach Auflage auf 0, 0.15 oder 0.25 gesetzt. Für 2000 Stück ergibt das CHF 306.00, ausgegeben mit toFixed(2).

   let / constDatentypenif / elsefor / for...ofArrayObjekt
2. 2

   Code mit Funktionen strukturieren und wiederverwenden

   Kompetenz A

   Du verpackst wiederkehrende Abläufe in Funktionen mit Parametern und Rückgabewerten. Funktionen haben sprechende Namen und erledigen genau eine Aufgabe.

   Situation

   Der Preisrechner braucht dieselbe Rechnung für Flyer A6, A5 und A4, nur mit anderen Stückpreisen.

   Deine Aufgabe

   Mach aus der Berechnung eine wiederverwendbare Funktion.

   Gutes Ergebnis

   'function berechnePreis(auflage, stueckpreis) { ... return total; }'. Eine zweite Funktion 'formatiereCHF(betrag)' liefert den Text 'CHF 306.00'. Beide werden für alle Formate aufgerufen.

   FunktionParameterRückgabewertArrow FunctionGültigkeitsbereich (Scope)
3. 3

   Elemente im DOM finden, auslesen und verändern

   Kompetenz B

   Du greifst mit querySelector auf HTML-Elemente zu, änderst Texte und Attribute, schaltest CSS-Klassen um und erzeugst neue Elemente. Gestaltung bleibt im CSS, JavaScript wechselt nur Klassen.

   Situation

   Auf der Website eines Kinos soll bei ausverkauften Vorstellungen der Button grau werden und 'Ausverkauft' anzeigen.

   Deine Aufgabe

   Passe die Buttons per JavaScript an, wenn eine Vorstellung keine freien Plätze mehr hat.

   Gutes Ergebnis

   Alle Vorstellungen werden mit querySelectorAll geholt. Ist data-plaetze gleich 0, bekommt der Button die Klasse 'is-sold-out', den Text 'Ausverkauft' und das Attribut disabled.

   DOMquerySelector / querySelectorAlltextContentclassListdata-AttributecreateElement
4. 4

   Auf Klicks, Eingaben und andere Benutzeraktionen mit Events reagieren

   Kompetenz C

   Du registrierst Event-Listener für Klicks, Tastatur, Eingaben oder das Absenden von Formularen. Du kennst das Event-Objekt und weisst, wann du das Standardverhalten verhinderst.

   Situation

   Die FAQ-Seite einer Gemeinde hat 30 Fragen, die alle offen untereinander stehen. Niemand findet etwas.

   Deine Aufgabe

   Baue ein Akkordeon: Klick auf eine Frage öffnet die Antwort, die anderen schliessen sich.

   Gutes Ergebnis

   Ein einziger Listener auf der Liste (Event Delegation) prüft, ob ein Fragebutton geklickt wurde, setzt aria-expanded und schaltet die Klasse 'is-open'. Auch mit Tastatur bedienbar, weil die Fragen echte button-Elemente sind.

   addEventListenerclick / input / submit / keydownEvent-ObjektpreventDefaultEvent Delegation
5. 5

   Daten aus JSON-Dateien oder APIs laden und dynamisch anzeigen

   Kompetenz D

   Du lädst Daten mit fetch und async/await, wandelst sie in JavaScript-Objekte um und erzeugst daraus HTML. Du rechnest damit, dass ein Laden fehlschlagen kann, und zeigst dann eine verständliche Meldung.

   Situation

   Ein Jugendhaus in Biel pflegt seine Veranstaltungen in einer Datei events.json und möchte sie auf der Website als Liste mit Filter nach Kategorie zeigen.

   Deine Aufgabe

   Lade die Events und zeige sie nach Datum sortiert an.

   Gutes Ergebnis

   Eine async-Funktion lädt 'events.json' mit await fetch() und res.json() in einem try/catch-Block. Die Events werden mit sort() nach Datum geordnet, mit filter() nach Kategorie gefiltert und mit map() als Karten gerendert. Bei einem Fehler erscheint 'Die Agenda konnte nicht geladen werden.'

   JSONfetchasync / awaittry / catchmap / filter / sortTemplate Literals
6. 6

   Fehler mit den Browser-Entwicklertools systematisch finden

   Kompetenz E

   Du liest Fehlermeldungen in der Konsole, setzt console.log gezielt ein, arbeitest mit Breakpoints und prüfst im Network-Tab, ob Dateien geladen werden. Du gehst dabei Schritt für Schritt vor statt zu raten.

   Situation

   Die Agenda des Jugendhauses bleibt leer, in der Konsole steht 'Uncaught TypeError: Cannot read properties of undefined (reading 'map')'.

   Deine Aufgabe

   Finde die Ursache.

   Gutes Ergebnis

   Im Network-Tab ist events.json korrekt geladen. Ein Breakpoint zeigt: Die Daten liegen unter 'data.events', der Code greift aber auf 'data.items' zu. Nach der Korrektur erscheinen alle 14 Events.

   KonsoleFehlermeldung lesenBreakpointNetwork-Tabconsole.log

Die Kompetenzmatrix zerlegt das Modul in Themenstränge und drei Stufen. Für den Kompetenznachweis solltest du überall mindestens Stufe 2 erreichen. Dein Stand bleibt in diesem Browser gespeichert und färbt Lernweg und Übungen ein.

Ilaria ist im 2. Lehrjahr als Mediamatikerin bei der Seenland Tourismus AG in Murten, einer Tourismusorganisation mit 25 Mitarbeitenden. Die Website zeigt Ausflüge bisher als lange statische Liste, die das Marketing mühsam von Hand pflegt. Ilaria soll mit JavaScript einen Ausflugsfinder mit Filter und einen Preisrechner für Gruppen bauen.

1. Kapitel 1

   Der Gruppenpreis-Rechner

   Für die Schifffahrt mit Fondue gelten CHF 59 pro erwachsene Person, Kinder zahlen die Hälfte, und ab 15 Personen gibt es 10 Prozent Rabatt. Ilaria schreibt zuerst alles in einen einzigen langen Block und verliert schnell den Überblick. Sie teilt den Code in die Funktionen berechnePreis, rundeAuf5Rappen und formatiereCHF auf. Als 0.1 plus 0.2 in der Konsole nicht genau 0.3 ergibt, rechnet sie intern in Rappen und wandelt erst bei der Ausgabe um.

   Ziel 1Ziel 2

2. Kapitel 2

   Ausflugskarten aus Daten

   Statt 30 Ausflüge von Hand in HTML zu kopieren, legt Ilaria sie als Array von Objekten an und erzeugt die Karten per Skript. Ausgebuchte Ausflüge erhalten über classList eine eigene Klasse, die sie grau darstellt. Ein Titel mit dem Zeichen & und spitzen Klammern zerschiesst die Darstellung, weil sie innerHTML verwendet. Sie baut die Karten deshalb mit createElement und textContent auf.

   Ziel 3

3. Kapitel 3

   Filtern mit einem Klick

   Ilaria ergänzt Filterbuttons für Wandern, Wasser, Kulinarik und Familie und hängt nur einen einzigen Listener an die Buttonleiste. Dazu baut sie ein Burger-Menü für die mobile Ansicht. Eine Kollegin testet nur mit der Tastatur und kommt gar nicht ins Menü, weil das Burger-Symbol ein div ist. Ilaria ersetzt es durch einen echten button, der seinen Zustand mit aria-expanded mitteilt.

   Ziel 4

4. Kapitel 4

   Daten aus der JSON-Datei

   Damit das Marketing die Ausflüge selbst pflegen kann, lagert Ilaria sie in die Datei ausfluege.json aus und lädt sie mit fetch. Die Ausflüge sortiert sie nach Datum und formatiert dieses mit toLocaleDateString für die Schweiz. Während des Ladens erscheint ein Hinweis, und für Einträge ohne Bild zeigt sie ein Platzhalterbild. Fehlt die Datei ganz, sehen Besuchende eine freundliche Meldung statt einer leeren Seite.

   Ziel 5

5. Kapitel 5

   Am Montag ist alles leer

   Nach einem Update durch das Marketing zeigt der Ausflugsfinder am Montagmorgen keinen einzigen Ausflug. Im Network-Tab ist die Datei mit Status 200 geladen, die Konsole meldet aber einen SyntaxError, weil in Zeile 214 ein Komma fehlt. Nach der Korrektur findet der Filter Wasser trotzdem nichts, und ein Breakpoint zeigt, dass die Kategorie als "wasser " mit Leerzeichen erfasst wurde. Ilaria bereinigt die Werte mit trim() und schreibt für das Marketing eine kurze Anleitung, wie man die JSON-Datei vor dem Hochladen prüft.

   Ziel 6

1. 1

   Erste Schritte mit JavaScript

   ca. 5 Std.

   Du lernst die Grundbausteine in der Browser-Konsole und in einer eigenen Skriptdatei kennen.

   • Ein Skript per script-Tag mit defer einbinden und 'Hallo' in die Konsole schreiben
   • Kleine Rechnungen mit Variablen lösen, z.B. MWST 8.1 % auf einen Betrag
   • Mit Schleifen eine Liste von Produkten aus einem Array ausgeben

   Trainiert Kompetenz A1

   Lernziel1

2. 2

   Funktionen und saubere Struktur

   ca. 4 Std.

   Du gliederst deinen Code in kleine Funktionen mit klaren Namen.

   • Den MWST-Rechner in Funktionen aufteilen
   • Dieselbe Funktion einmal klassisch und einmal als Arrow Function schreiben
   • Den eigenen Code einer Kollegin erklären, ohne den Bildschirm zu zeigen

   Trainiert Kompetenz A2

   Lernziel2

3. 3

   Die Seite verändern

   ca. 5 Std.

   Du verbindest JavaScript mit HTML und CSS und baust erste sichtbare Effekte.

   • Texte, Bilder und Klassen eines Elements per Skript ändern
   • Eine Produktliste aus einem Array von Objekten als HTML erzeugen
   • Mit Klassen statt Inline-Styles zwischen Zuständen wechseln

   Trainiert Kompetenz B1B2

   Lernziel3

4. 4

   Interaktion mit Events

   ca. 6 Std.

   Du reagierst auf Aktionen der Besuchenden und baust typische Komponenten.

   • Mobile Navigation mit Burger-Button umsetzen
   • Ein FAQ-Akkordeon mit Event Delegation bauen
   • Einen Live-Preisrechner bauen, der bei jeder Eingabe neu rechnet

   Trainiert Kompetenz C1C2B2

   Lernziel43

5. 5

   Daten laden und Fehler finden

   ca. 6 Std.

   Du holst Daten aus JSON und lernst, Fehler mit den DevTools systematisch zu finden.

   • Eine events.json anlegen, mit fetch laden und als Karten anzeigen
   • Filter- und Sortierbuttons ergänzen
   • Absichtlich drei Fehler einbauen und mit Konsole, Breakpoints und Network-Tab finden

   Trainiert Kompetenz D1D2E1E2

   Lernziel56

6. 6

   Mini-Projekt

   ca. 4 Std.

   Du setzt eine interaktive Seite von A bis Z um, wie im Kompetenznachweis.

   • Anforderungen lesen und den Ablauf in Pseudocode skizzieren
   • Umsetzen, testen und mit Kommentaren dokumentieren
   • Die Lösung in 5 Minuten präsentieren

   Trainiert Kompetenz A2A3C2D2

   Lernziel1245

DOM

Baumstruktur, in der der Browser die HTML-Seite verwaltet und die JavaScript lesen und verändern kann.

Variable

Benannter Speicherplatz für einen Wert, in JavaScript mit let oder const angelegt.

Funktion

Benannter Codeblock, der Parameter entgegennimmt, eine Aufgabe erledigt und optional einen Wert zurückgibt.

Event

Ereignis im Browser, z.B. ein Klick, eine Eingabe oder das Absenden eines Formulars.

Event Listener

Funktion, die ausgeführt wird, sobald ein bestimmtes Event an einem Element eintritt.

JSON

Textformat für strukturierte Daten aus Objekten und Arrays, das JavaScript direkt verarbeiten kann.

fetch

Browserfunktion, um Daten von einer URL zu laden, z.B. eine JSON-Datei oder eine API.

Promise

Objekt für ein Ergebnis, das erst später vorliegt, z.B. die Antwort eines Servers.

Breakpoint (Debugging)

Markierung im Code, an der der Browser anhält, damit du Variablen und Ablauf untersuchen kannst.

Passende Module