Phase 3: Erweiterung

Webseitenprojekt · Phase 3 von 4 · Meilenstein M3 · passt zu IT 12.6 Webanwendungen

Ziel dieser Phase

Am Ende dieser Phase reagiert deine Seite auf ihre Besucher. Sie lädt Daten aus einer JSON-Datei, zeigt sie an, lässt sich filtern, sortieren oder durchsuchen und prüft Eingaben in einem Formular. Sie erfüllt die Checkliste Erweiterung. Das ist der Meilenstein M3.

Was passt zu deinem Thema?

Überlege zuerst selbst: Welche Daten hat dein Thema, die man als Liste von Objekten speichern könnte? Was würden Besucher damit tun wollen? Notiere zwei Ideen, bevor du dir die Tabelle ansiehst.

Ideen ansehen

Thema	Daten in JSON	Interaktion	Formular
Hobby, Sport	Übungen oder Trainingstermine	nach Schwierigkeit filtern, nach Dauer sortieren	eigenen Trainingswunsch eintragen
Ratgeber	Tipps mit Kategorie	Suche nach Stichwort, Kategorie wählen	Frage an die Redaktion
erfundenes Unternehmen	Angebote mit Preis	nach Preis sortieren, Warenkorb mit Summe	Bestellung oder Reservierung
Sammlung	Bücher, Rezepte, Ausflugsziele	Filter (zum Beispiel vegetarisch, kostenlos), Zufallsvorschlag	eigenen Vorschlag einreichen
Lernangebot	Quizfragen mit Antworten	Fragen nacheinander, Punkte zählen	Anmeldung zur Lerngruppe

Schritte

Schritt 1: Die Daten entwerfen mittel

Entwirf die Struktur deiner Daten, bevor du Code schreibst: Welche Eigenschaften hat jedes Objekt? Welchen Datentyp hat jede Eigenschaft (Text, Zahl, Wahrheitswert, Liste)?

Lege dann im Projektordner die Datei daten.json (oder einen passenden Namen) mit mindestens sechs Objekten an. Überprüfe die Datei, indem du sie über Live Server im Browser öffnest.

Tipp 1

Frag dich, wonach Besucher filtern oder sortieren wollen. Genau das muss als eigene Eigenschaft in den Daten stehen. Steht „vegetarisch“ nur irgendwo im Beschreibungstext, kann man schlecht danach filtern; mit "vegetarisch": true geht es leicht.

Tipp 2

Zahlen ohne Anführungszeichen speichern ("preis": 2.5), sonst kann man nicht damit rechnen oder richtig sortieren. Im JSON stehen alle Namen und alle Texte in doppelten Anführungszeichen, und nach dem letzten Eintrag steht kein Komma (siehe IT 12.6, Einheit 8).

Beispiel ansehen (erst nach deinem eigenen Versuch)

Die Schulgarten-AG speichert ihren Pflanzenkalender so (Ausschnitt):

[
  { "name": "Radieschen", "aussaat": [3, 4, 5, 8], "ernte": [5, 6, 9], "schatten": true },
  { "name": "Kürbis", "aussaat": [5], "ernte": [9, 10], "schatten": false }
]

Monate sind Zahlen (3 = März). So kann die Seite mit new Date().getMonth() + 1 den aktuellen Monat bestimmen und mit filter und includes nur die Pflanzen zeigen, die gerade erntereif sind.

Schritt 2: Daten laden und anzeigen mittel

Lege app.js an und binde sie mit defer ein. Lade deine JSON-Datei mit fetch, durchlaufe die Liste und erzeuge für jedes Objekt passendes HTML (zum Beispiel eine Kachel oder eine Tabellenzeile).

Zeige eine verständliche Meldung auf der Seite, wenn die Daten nicht geladen werden können.

Tipp 1

Gehe in zwei Schritten vor. Zuerst stehen die Daten als Array direkt in app.js, und die Anzeige funktioniert. Erst danach ersetzt du das Array durch fetch. So weißt du bei einem Fehler, ob es an der Anzeige oder am Laden liegt.

Tipp 2

Schreibe eine Funktion anzeigen(liste), die den Bereich leert und neu füllt. Diese Funktion brauchst du in Schritt 3 wieder: Filtern heißt dann nur noch „gefilterte Liste anzeigen“ (siehe HTML aus Daten erzeugen).

Schritt 3: Interaktion schwer

Entwickle mindestens eine Möglichkeit, die Daten mit Knöpfen oder Eingabefeldern zu verändern: filtern, sortieren oder durchsuchen. Die Anzeige muss sich dabei ohne Neuladen der Seite ändern.

Gute Projekte haben zwei davon, zum Beispiel einen Filter und eine Sortierung, die zusammen wirken.

Tipp 1

Das Muster: Ereignis → aktuelle Einstellungen lesen → aus der vollständigen Liste eine neue Liste bilden (filter, dann sort) → anzeigen(neueListe). Ändere nie die Originalliste selbst, sonst sind gefilterte Einträge für immer weg.

Tipp 2

sort verändert die Liste, auf der es aufgerufen wird. Sortiere deshalb eine Kopie: [...liste].sort(…) oder sortiere das Ergebnis von filter, das schon eine neue Liste ist. Siehe Sortieren.

Tipp 3

Für die Suche Groß- und Kleinschreibung angleichen: eintrag.name.toLowerCase().includes(suchtext.toLowerCase()).

Schritt 4: Ein Formular prüfen mittel

Baue ein Formular, das zu deinem Thema passt, mit mindestens drei Feldern verschiedener Art. Prüfe die Eingaben mit HTML-Attributen und mit JavaScript. Zeige Fehler direkt am Feld mit einer Meldung, die sagt, was zu tun ist.

Ist alles richtig, zeigt die Seite eine Bestätigung mit den eingegebenen Daten. Das Formular wird nicht an einen Server geschickt; verhindere das Absenden mit preventDefault.

Tipp 1

Eine gute Fehlermeldung nennt das Feld und die Lösung: „Bitte gib eine Klasse wie 11FO ein.“ statt „Ungültige Eingabe.“ Siehe Gute Fehlermeldungen.

Tipp 2

Gib die Eingaben in der Bestätigung mit textContent aus, nicht mit innerHTML. Sonst könnte jemand HTML oder Skripte in das Formular tippen, die dann ausgeführt werden.

Schritt 5: Code aufräumen und kommentieren leicht

Gehe deinen JavaScript-Code durch:

Haben Variablen und Funktionen sprechende Namen?
Steht über jeder Funktion ein kurzer Kommentar, was sie tut?
Gibt es in der Konsole (F12) Fehlermeldungen oder alte console.log-Ausgaben, die weg können?

Erkläre einer Mitschülerin oder einem Mitschüler eine deiner Funktionen Zeile für Zeile. Genau das wird auch in der Prüfung verlangt: fremden oder eigenen Code beschreiben.

Zusatz: Was wäre auf dem Server? schwer Zusatz

Beschreibe in deinem Projektplan, was sich ändern müsste, wenn deine Seite wirklich im Internet stünde und das Formular Daten speichern sollte:

Welche Aufgaben übernimmt der Server, welche bleiben im Browser?
Welche Methode (GET oder POST) passt für dein Formular, und warum?
Gibt es Bereiche, die eine Anmeldung brauchen? Wer darf was?

Nutze dafür IT 12.6, Einheit 9 bis 11. Du musst dafür keinen Server-Code schreiben.

Kann-Erweiterungen

Ist die Checkliste erfüllt und bleibt Zeit, wähle aus deinen Kann-Anforderungen oder aus dieser Liste:

eine Animation oder einen Übergang, der etwas verständlicher macht, mit prefers-reduced-motion (siehe Barrierefreie Bewegung)
ein Warenkorb oder Zähler mit Summe
ein aufklappbarer Bereich oder eine Bildergalerie mit Vor- und Zurück-Knöpfen
ein Zufallsvorschlag aus deinen Daten

Checkliste Erweiterung

Anforderung	Nachschlagen
eigene JavaScript-Datei, mit `defer` eingebunden, ohne Fehler in der Konsole	IT 12.6, Einheit 3: Wann läuft das Skript?
Daten in einer eigenen JSON-Datei (mindestens sechs Objekte), mit `fetch` geladen, mit Fehlermeldung bei Problemen	Einheit 8: Daten laden mit fetch
HTML wird aus den Daten erzeugt (Schleife über die Liste)	Einheit 5: HTML aus Daten erzeugen
mindestens eine Interaktion: filtern, sortieren oder suchen, über Ereignisse ausgelöst	Einheit 4: Ereignisbehandlung, Einheit 5: Filtern
ein Formular mit mindestens drei Feldern, Prüfung mit HTML und JavaScript, verständliche Fehlermeldungen	Einheit 6: Prüfen mit JavaScript
Code mit sprechenden Namen und Kommentaren	Schritt 5 oben
die Checkliste Grundstufe gilt weiter, auch für neue Bereiche (Kontrast, Tastatur, Handy)	Checkliste Grundstufe

Typische Probleme

Checkliste für M3

alle Punkte der Checkliste Erweiterung erfüllt
die eigenen Muss-Anforderungen aus dem Plan erfüllt oder begründet geändert
eine Funktion einer anderen Person erklärt
Arbeitstagebuch und Quellen aktuell
Sicherungskopie angelegt

Weiter geht es mit Phase 4: Testen und Präsentieren.