návaznost na předchozí práci a uvedení problému „DOM: výběr prvků a změna obsahu“. 5–12 min: teoretické minimum – DOM, document, querySelector, textContent, classList, atribut. 12–18 min: společná ukázka v prohlížeči a vývojářské konzoli. 18–36 min: samostatná praktická práce – Doplnit ovládání, které přepne informační kartu mezi dvěma stavy a změní text i vizuální třídu. 36–41 min: test běžného, hraničního a chybového scénáře. 41–45 min: uložení výstupu (Karta ovládaná přes DOM), krátká reflexe a určení dalšího kroku.
JavaScript a interaktivní web · 45 minut
DOM: výběr prvků a změna obsahu
Vybere prvky stránky přes DOM a bezpečně změní jejich text, třídu nebo atribut.
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 „DOM: výběr prvků a změna obsahu“ 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 DOM, document, querySelector popisují základní stavební prvky dnešní práce. Pojmy textContent, classList, atribut 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í: Doplnit ovládání, které přepne informační kartu mezi dvěma stavy a změní text i vizuální třídu. Výsledkem je „Karta ovládaná přes DOM“. Nestačí, aby výstup pouze existoval; musí být možné doložit, že splňuje cíl: Vybere prvky stránky přes DOM a bezpečně změní jejich text, třídu nebo atribut.
Kvalitu posuzuj podle těchto hledisek: Javascript pracuje s existujícími prvky, Nepřepisuje html řetězcem bez důvodu a stav je vizuálně rozlišitelný. 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ů
DOM
Objektová reprezentace HTML dokumentu, přes kterou JavaScript čte a mění prvky stránky.
document
Výchozí objekt DOM reprezentující právě otevřený dokument.
querySelector
Metoda vracející první prvek odpovídající zadanému CSS selektoru.
textContent
Vlastnost pro bezpečné čtení nebo změnu textového obsahu prvku.
classList
Rozhraní pro přidávání, odebírání a přepínání CSS tříd prvku.
atribut
Pojmenovaná vlastnost entity uložená jako hodnota určitého datového typu.
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: Karta ovládaná přes DOM. 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í: Javascript pracuje s existujícími prvky; Nepřepisuje html řetězcem bez důvodu a stav je vizuálně rozlišitelný. Zaznamenej alespoň jeden test nebo porovnání.
- 06
Ulož zdrojovou i výslednou verzi pod jednoznačnými názvy. Odevzdej „Karta ovládaná přes DOM“ 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 „DOM: výběr prvků a změna obsahu“ 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: DOM, document, querySelector, textContent, classList, atribut.
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: DOM: výběr prvků a změna obsahu.
4. Plán praktické prácePostup musí obsahovat vstup, konkrétní kroky, kontrolu a výstup.
Rozepiš vlastní postup k zadání: Doplnit ovládání, které přepne informační kartu mezi dvěma stavy a změní text i vizuální třídu.
5. SebekontrolaFormuluj kontrolní otázky, které lze skutečně zodpovědět ano/ne nebo měřením.
Jak ověříš, že je výstup „Karta ovládaná přes DOM“ správný? Vycházej z kritérií: Javascript pracuje s existujícími prvky, Nepřepisuje html řetězcem bez důvodu a stav je vizuálně rozlišitelný.
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
DOM: výběr prvků a změna obsahu
Doplnit ovládání, které přepne informační kartu mezi dvěma stavy a změní text i vizuální třídu.
Očekávaný výstup
Karta ovládaná přes DOM
07
DŮKAZ O UČENÍ
Odevzdání praktického úkolu
Soubor a krátká odpověď
Karta ovládaná přes DOM
Odevzdej výstup „Karta ovládaná přes DOM“. 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.