návaznost na předchozí práci a uvedení problému „localStorage a uchování stavu“. 5–12 min: teoretické minimum – stav aplikace, localStorage, setItem, getItem, JSON.stringify, JSON.parse. 12–18 min: společná ukázka v prohlížeči a vývojářské konzoli. 18–36 min: samostatná praktická práce – Rozšířit dynamický seznam tak, aby se po přidání nebo smazání uložil a po obnovení stránky znovu načetl. 36–41 min: test běžného, hraničního a chybového scénáře. 41–45 min: uložení výstupu (Aplikace s lokálně uloženým stavem), krátká reflexe a určení dalšího kroku.
JavaScript a interaktivní web · 45 minut
localStorage a uchování stavu
Uloží jednoduchý stav aplikace do prohlížeče a obnoví jej po novém načtení stránky.
00
ČASOVÁ OSA
Struktura 45minutové hodiny
01
VIDEO LEKCE
Ukázka a vysvětlení postupu
▶
Video je připravené k doplnění
Video ukáže princip, první kroky, kontrolu a typickou chybu. Nebude obsahovat celý hotový upravitelný úkol.
provider: youtube · youtubeId: ""02
STUDIJNÍ MATERIÁL
Výklad: z čeho se učíš
Téma „localStorage a uchování stavu“ patří do celku „JavaScript a interaktivní web“. Nejde pouze o ovládání nástroje: cílem je porozumět rozhodnutím, která vedou od zadání k ověřitelnému digitálnímu výstupu.
Klíčové pojmy stav aplikace, localStorage, setItem popisují základní stavební prvky dnešní práce. Pojmy getItem, JSON.stringify, JSON.parse pomáhají výsledek kontrolovat, vysvětlit nebo porovnat s jinou variantou. Každý pojem proto použij v konkrétním kroku, nikoli jen v definici.
Pracovat budeš v prostředí „HTML, CSS a JavaScript“. Nejprve si uchovej původní podklady, potom vytvoř pracovní kopii a změny prováděj po menších ověřitelných krocích. Po každé důležité změně výsledek otevři, spusť nebo porovnej s požadovaným chováním.
Praktické zadání zní: Rozšířit dynamický seznam tak, aby se po přidání nebo smazání uložil a po obnovení stránky znovu načetl. Výsledkem je „Aplikace s lokálně uloženým stavem“. Nestačí, aby výstup pouze existoval; musí být možné doložit, že splňuje cíl: Uloží jednoduchý stav aplikace do prohlížeče a obnoví jej po novém načtení stránky.
Kvalitu posuzuj podle těchto hledisek: Stav se obnoví po reloadu, Prázdná nebo poškozená hodnota nezpůsobí pád a uživatel může data vymazat. Před odevzdáním zkontroluj názvy a strukturu souborů, funkčnost na čistém nebo cílovém prostředí a připoj stručnou reflexi rozhodnutí, testu a případné opravy.
Slovníček pojmů
stav aplikace
Soubor aktuálních dat určujících, co aplikace zobrazuje a jak reaguje.
localStorage
Úložiště prohlížeče uchovávající textová data pro daný web i po zavření stránky.
setItem
Metoda localStorage ukládající textovou hodnotu pod zvoleným klíčem.
getItem
Metoda localStorage načítající hodnotu uloženou pod zvoleným klíčem.
JSON.stringify
Metoda převádějící objekt nebo pole na text ve formátu JSON.
JSON.parse
Metoda převádějící platný JSON text zpět na JavaScriptovou hodnotu.
03
ŘÍZENÁ PRÁCE
Postup krok za krokem
- 01
Otevři prostředí „HTML, CSS a JavaScript“ a vytvoř si vlastní pracovní složku s číslem lekce. Původní podklady neměň; nejprve je zkopíruj do pracovní verze.
- 02
Přečti zadání a napiš si jednou větou očekávaný výsledek: Aplikace s lokálně uloženým stavem. Označ vstupy, omezení a nejméně tři kontrolní kritéria.
- 03
Rozbal startovní projekt a spusť jej přes lokální webový server, pokud lekce načítá JSON. Otevři vývojářskou konzoli a ověř, že neobsahuje neošetřenou chybu.
- 04
Doplň JavaScript po malých funkcích. Po každé změně otestuj běžný, hraniční a neplatný vstup, stav po obnovení stránky a ovládání klávesnicí podle zadání.
- 05
Proveď sebekontrolu podle kritérií: Stav se obnoví po reloadu; Prázdná nebo poškozená hodnota nezpůsobí pád a uživatel může data vymazat. Zaznamenej alespoň jeden test nebo porovnání.
- 06
Ulož zdrojovou i výslednou verzi pod jednoznačnými názvy. Odevzdej „Aplikace s lokálně uloženým stavem“ a krátce popiš, jak jsi ověřil/a správnost.
04
PRACOVNÍ PODKLADY
Stáhni si soubory, se kterými budeš pracovat
Náhled ukazuje pouze strukturu a typ výsledku. Hotové upravitelné řešení ve studentské části není.
Důležité: Podklady jsou vstupy k práci, nikoli kompletní řešení. Vlastní výsledek musí vzniknout podle zadání, testu a reflexe.
05
OTEVŘENÉ ODPOVĚDI
Pracovní list
1. Výchozí představaNapiš konkrétní příklad, ne pouze obecný dojem.
Co už o tématu „localStorage a uchování stavu“ víš a kde ses s ním setkal/a?
2. Práce s pojmyKe každému pojmu přidej situaci, ve které ovlivňuje rozhodnutí.
Vysvětli vlastními slovy alespoň tři pojmy: stav aplikace, localStorage, setItem, getItem, JSON.stringify, JSON.parse.
3. Rozhodovací situaceUveď kritérium, důkaz a možné omezení.
Jaké dvě možné varianty řešení připadají v úvahu a podle čeho mezi nimi rozhodneš? Téma: localStorage a uchování stavu.
4. Plán praktické prácePostup musí obsahovat vstup, konkrétní kroky, kontrolu a výstup.
Rozepiš vlastní postup k zadání: Rozšířit dynamický seznam tak, aby se po přidání nebo smazání uložil a po obnovení stránky znovu načetl.
5. SebekontrolaFormuluj kontrolní otázky, které lze skutečně zodpovědět ano/ne nebo měřením.
Jak ověříš, že je výstup „Aplikace s lokálně uloženým stavem“ správný? Vycházej z kritérií: Stav se obnoví po reloadu, Prázdná nebo poškozená hodnota nezpůsobí pád a uživatel může data vymazat.
6. Exit ticketOdpověď má být konkrétní a vztahovat se k dnešní práci.
Napiš jeden princip, jednu provedenou kontrolu a jeden další krok.
06
PRAKTICKÁ PRÁCE
localStorage a uchování stavu
Rozšířit dynamický seznam tak, aby se po přidání nebo smazání uložil a po obnovení stránky znovu načetl.
Očekávaný výstup
Aplikace s lokálně uloženým stavem
07
DŮKAZ O UČENÍ
Odevzdání praktického úkolu
Soubor a krátká odpověď
Aplikace s lokálně uloženým stavem
Odevzdej výstup „Aplikace s lokálně uloženým stavem“. Přilož zdrojové soubory nebo export a krátce popiš, jak jsi výsledek zkontroloval/a.
Zatím nebyl vybrán žádný soubor.
Offline verze ukládá pouze odpovědi a názvy vybraných souborů v prohlížeči; skutečný upload provede Studio po napojení API.
08
ZÁVĚREČNÁ KONTROLA
Test
09
REFLEXE
Co si z lekce odnášíš
Dokončeno neznamená pouze vytvořeno. Výsledek je dokončený tehdy, když je uložený, otevřitelný, otestovaný a vysvětlitelný podle kritérií. Zapiš jednu provedenou kontrolu, jednu opravu a jeden další krok.