Shrnutí

V této lekci jste se naučili, že:

• Server je počítač na internetu, který má uložené soubory webu a posílá je tomu, kdo o ně požádá. Stránka si u něj může říct i o data.
• Data cestují jako text, většinou v JSON. Vypadá jako pole a objekty v JavaScriptu, ale klíče i text jsou vždy ve dvojitých uvozovkách, za poslední položkou není čárka a nejsou v něm komentáře. Soubory s JSON mají příponu .json.
• JSON.parse(text) převede text v JSON na pole a objekty, JSON.stringify(hodnota) je převede na text v JSON.
• await fetch("zvirata.json") požádá server o soubor a počká na odpověď, await odpoved.json() přečte její obsah jako JSON. Obojí patří do async funkce a data se dají použít až po nich.
• odpoved.ok je false, když server odpověděl chybou, třeba 404 Not Found při překlepu v názvu souboru. Zkontrolujte ho a místo dat ukažte chybovou zprávu.
• Zpráva jako Načítám… dá uživateli vědět, že data jsou na cestě. Ukažte ji před fetch() a odstraňte ji, když jsou data na stránce.
• Načtená data mějte v proměnné a stránku z nich vykreslujte funkcí, kterou zavoláte znovu, kdykoli se něco změní. Pomůže vám createElement() a metody polí.
• localStorage uchovává data v prohlížeči i po znovunačtení stránky: setItem(klic, hodnota) ukládá, getItem(klic) čte (null, když nic uložené není) a removeItem(klic) maže.
• localStorage uchovává jen text, takže pole a objekty ukládejte pomocí JSON.stringify() a čtěte pomocí JSON.parse(). Co je uložené, načtěte hned při otevření stránky.

V příští lekci, dalším miniprojektu, postavíte malou aplikaci na výběr filmu pro filmový večer: načte filmy ze souboru, nechá vás v nich hledat a zapamatuje si vaše oblíbené.

Nejdřív si ale vše procvičte na stránce s recepty, kde zaškrtávací políčko ukáže jen vegetariánské recepty a stránka si pamatuje, jestli je políčko zaškrtnuté.