návaznost na předchozí práci a uvedení problému „Pole, objekty a dynamický seznam“. 5–12 min: teoretické minimum – pole, objekt, vlastnost, metoda, map, render. 12–18 min: společná ukázka v prohlížeči a vývojářské konzoli. 18–36 min: samostatná praktická práce – Načíst modelové položky do pole objektů, přidat novou položku a znovu vykreslit seznam bez ručního duplikování HTML. 36–41 min: test běžného, hraničního a chybového scénáře. 41–45 min: uložení výstupu (Dynamický seznam založený na poli objektů), krátká reflexe a určení dalšího kroku.
JavaScript a interaktivní web · 45 minut
Pole, objekty a dynamický seznam
Použije pole objektů jako stav aplikace a vykreslí z něj seznam prvků.
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 „Pole, objekty a dynamický seznam“ 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 pole, objekt, vlastnost popisují základní stavební prvky dnešní práce. Pojmy metoda, map, render 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í: Načíst modelové položky do pole objektů, přidat novou položku a znovu vykreslit seznam bez ručního duplikování HTML. Výsledkem je „Dynamický seznam založený na poli objektů“. Nestačí, aby výstup pouze existoval; musí být možné doložit, že splňuje cíl: Použije pole objektů jako stav aplikace a vykreslí z něj seznam prvků.
Kvalitu posuzuj podle těchto hledisek: Data jsou oddělená od zobrazení, Každá položka má jednoznačný identifikátor a po změně se seznam správně překreslí. 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ů
pole
Pojem „pole“ označuje konkrétní prvek nebo pravidlo používané při tématu této lekce; jeho význam se ověřuje na pracovním příkladu a podle výsledného výstupu.
objekt
Struktura ukládající související hodnoty a funkce pod pojmenovanými vlastnostmi.
vlastnost
Pojmenovaná hodnota uložená v objektu.
metoda
Funkce uložená jako vlastnost objektu.
map
Metoda pole vytvářející nové pole převedením každé původní položky pomocí zadané funkce.
render
Funkce nebo krok, který převede aktuální stav aplikace na viditelné prvky rozhraní.
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: Dynamický seznam založený na poli objektů. 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í: Data jsou oddělená od zobrazení; Každá položka má jednoznačný identifikátor a po změně se seznam správně překreslí. Zaznamenej alespoň jeden test nebo porovnání.
- 06
Ulož zdrojovou i výslednou verzi pod jednoznačnými názvy. Odevzdej „Dynamický seznam založený na poli objektů“ 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 „Pole, objekty a dynamický seznam“ 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: pole, objekt, vlastnost, metoda, map, render.
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: Pole, objekty a dynamický seznam.
4. Plán praktické prácePostup musí obsahovat vstup, konkrétní kroky, kontrolu a výstup.
Rozepiš vlastní postup k zadání: Načíst modelové položky do pole objektů, přidat novou položku a znovu vykreslit seznam bez ručního duplikování HTML.
5. SebekontrolaFormuluj kontrolní otázky, které lze skutečně zodpovědět ano/ne nebo měřením.
Jak ověříš, že je výstup „Dynamický seznam založený na poli objektů“ správný? Vycházej z kritérií: Data jsou oddělená od zobrazení, Každá položka má jednoznačný identifikátor a po změně se seznam správně překreslí.
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
Pole, objekty a dynamický seznam
Načíst modelové položky do pole objektů, přidat novou položku a znovu vykreslit seznam bez ručního duplikování HTML.
Očekávaný výstup
Dynamický seznam založený na poli objektů
07
DŮKAZ O UČENÍ
Odevzdání praktického úkolu
Soubor a krátká odpověď
Dynamický seznam založený na poli objektů
Odevzdej výstup „Dynamický seznam založený na poli objektů“. 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.