návaznost na předchozí práci a uvedení problému „Události: kliknutí, vstup a změna“. 5–12 min: teoretické minimum – událost, addEventListener, click, input, change, event. 12–18 min: společná ukázka v prohlížeči a vývojářské konzoli. 18–36 min: samostatná praktická práce – Vytvořit malé rozhraní, které reaguje na tlačítko, průběžný textový vstup a výběr z nabídky. 36–41 min: test běžného, hraničního a chybového scénáře. 41–45 min: uložení výstupu (Rozhraní reagující na tři typy událostí), krátká reflexe a určení dalšího kroku.
JavaScript a interaktivní web · 45 minut
Události: kliknutí, vstup a změna
Naváže posluchače událostí a rozliší reakci na kliknutí, psaní a změnu hodnoty.
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 „Události: kliknutí, vstup a změna“ 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 událost, addEventListener, click popisují základní stavební prvky dnešní práce. Pojmy input, change, event 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í: Vytvořit malé rozhraní, které reaguje na tlačítko, průběžný textový vstup a výběr z nabídky. Výsledkem je „Rozhraní reagující na tři typy událostí“. Nestačí, aby výstup pouze existoval; musí být možné doložit, že splňuje cíl: Naváže posluchače událostí a rozliší reakci na kliknutí, psaní a změnu hodnoty.
Kvalitu posuzuj podle těchto hledisek: Každá událost má jasnou reakci, Posluchače nejsou duplikované a stránka se při kliknutí zbytečně nenačítá znovu. 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ů
událost
Zachycený podnět, například kliknutí, změna hodnoty nebo dokončení načítání, na který program reaguje.
addEventListener
Metoda registrující funkci, která se spustí při zvolené události.
click
Událost vznikající aktivací prvku myší, dotykem nebo odpovídající klávesou.
input
Událost vyvolaná při průběžné změně hodnoty formulářového prvku.
change
Událost oznamující potvrzenou změnu hodnoty ovládacího prvku.
event
Objekt s informacemi o konkrétní události a prvku, na kterém vznikla.
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: Rozhraní reagující na tři typy událostí. 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í: Každá událost má jasnou reakci; Posluchače nejsou duplikované a stránka se při kliknutí zbytečně nenačítá znovu. Zaznamenej alespoň jeden test nebo porovnání.
- 06
Ulož zdrojovou i výslednou verzi pod jednoznačnými názvy. Odevzdej „Rozhraní reagující na tři typy událostí“ 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 „Události: kliknutí, vstup a změna“ 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: událost, addEventListener, click, input, change, event.
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: Události: kliknutí, vstup a změna.
4. Plán praktické prácePostup musí obsahovat vstup, konkrétní kroky, kontrolu a výstup.
Rozepiš vlastní postup k zadání: Vytvořit malé rozhraní, které reaguje na tlačítko, průběžný textový vstup a výběr z nabídky.
5. SebekontrolaFormuluj kontrolní otázky, které lze skutečně zodpovědět ano/ne nebo měřením.
Jak ověříš, že je výstup „Rozhraní reagující na tři typy událostí“ správný? Vycházej z kritérií: Každá událost má jasnou reakci, Posluchače nejsou duplikované a stránka se při kliknutí zbytečně nenačítá znovu.
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
Události: kliknutí, vstup a změna
Vytvořit malé rozhraní, které reaguje na tlačítko, průběžný textový vstup a výběr z nabídky.
Očekávaný výstup
Rozhraní reagující na tři typy událostí
07
DŮKAZ O UČENÍ
Odevzdání praktického úkolu
Soubor a krátká odpověď
Rozhraní reagující na tři typy událostí
Odevzdej výstup „Rozhraní reagující na tři typy událostí“. 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.