Zusammenfassung

In dieser Lektion hast du gelernt:

• Ein Server ist ein Computer im Internet, der die Dateien einer Website aufbewahrt und sie jedem schickt, der danach fragt. Eine Seite kann ihn auch nach Daten fragen.
• Daten reisen als Text, meistens in JSON. Es sieht aus wie Arrays und Objekte in JavaScript, aber Schlüssel und Text stehen immer in doppelten Anführungszeichen, nach dem letzten Element steht kein Komma, und es gibt keine Kommentare. Dateien mit JSON enden auf .json.
• JSON.parse(text) wandelt JSON-Text in Arrays und Objekte um; JSON.stringify(wert) wandelt sie in JSON-Text um.
• await fetch("tiere.json") fragt den Server nach einer Datei und wartet auf die Antwort; await antwort.json() liest ihren Inhalt als JSON. Beides gehört in eine async-Funktion, und die Daten können erst danach benutzt werden.
• antwort.ok ist false, wenn der Server mit einem Fehler geantwortet hat, wie 404 Not Found bei einem falsch geschriebenen Dateinamen. Prüfe es und zeige statt der Daten eine Fehlermeldung an.
• Eine Meldung wie Lade… sagt dem Nutzer, dass die Daten unterwegs sind. Zeige sie vor fetch() an und entferne sie, wenn die Daten auf der Seite sind.
• Speichere geladene Daten in einer Variable und zeichne die Seite daraus mit einer Funktion, die du jedes Mal wieder aufrufst, wenn sich etwas ändert, mit createElement() und den Array-Methoden.
• Der localStorage speichert Daten im Browser, auch nach dem Neuladen: setItem(schluessel, wert) speichert, getItem(schluessel) liest (null, wenn nichts gespeichert ist) und removeItem(schluessel) löscht.
• Der localStorage speichert nur Text, also speichere Arrays und Objekte mit JSON.stringify() und lies sie mit JSON.parse(). Lade, was gespeichert wurde, sobald die Seite geöffnet wird.

In der nächsten Lektion, einem Checkpoint, baust du eine kleine App, mit der du einen Film für einen Filmabend auswählst: Sie lädt die Filme aus einer Datei, lässt dich in ihnen suchen und merkt sich deine Favoriten.

Aber zuerst ein bisschen Übung: eine Seite mit Rezepten und einer Checkbox, die nur die vegetarischen zeigt und sich merkt, ob sie angehakt ist.