návaznost na předchozí práci a uvedení problému „JavaScript v prohlížeči a vývojářská konzole“. 5–12 min: teoretické minimum – JavaScript, script, konzole, příkaz, chyba, strict mode. 12–18 min: společná ukázka v prohlížeči a vývojářské konzoli. 18–36 min: samostatná praktická práce – Doplnit do startovního webu soubor script.js, změnit stavový text po načtení stránky a zapsat kontrolní zprávu do konzole. 36–41 min: test běžného, hraničního a chybového scénáře. 41–45 min: uložení výstupu (Web s připojeným a ověřeným JavaScriptem), krátká reflexe a určení dalšího kroku.
JavaScript a interaktivní web · 45 minut
JavaScript v prohlížeči a vývojářská konzole
Propojí JavaScript s HTML, spustí vlastní příkaz a použije konzoli k ověření běhu programu.
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 „JavaScript v prohlížeči a vývojářská konzole“ 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 JavaScript, script, konzole popisují základní stavební prvky dnešní práce. Pojmy příkaz, chyba, strict mode 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, JavaScript a vývojářské nástroje“. 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 do startovního webu soubor script.js, změnit stavový text po načtení stránky a zapsat kontrolní zprávu do konzole. Výsledkem je „Web s připojeným a ověřeným JavaScriptem“. Nestačí, aby výstup pouze existoval; musí být možné doložit, že splňuje cíl: Propojí JavaScript s HTML, spustí vlastní příkaz a použije konzoli k ověření běhu programu.
Kvalitu posuzuj podle těchto hledisek: Soubor je připojen správnou cestou, Konzole nehlásí chybu a změna je viditelná na stránce. 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ů
JavaScript
Programovací jazyk používaný v prohlížeči pro logiku, práci s daty a interaktivní změny webové stránky.
script
HTML prvek nebo samostatný soubor, kterým se JavaScript připojuje k webové stránce.
konzole
Nástroj vývojářského prostředí pro zobrazování zpráv, hodnot a chyb vzniklých při běhu programu.
příkaz
Pojem „příkaz“ 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.
chyba
Pojem „chyba“ 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.
strict mode
Přísnější režim JavaScriptu, který omezuje některé nebezpečné konstrukce a pomáhá odhalit chyby.
03
ŘÍZENÁ PRÁCE
Postup krok za krokem
- 01
Otevři prostředí „HTML, CSS, JavaScript a vývojářské nástroje“ 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: Web s připojeným a ověřeným JavaScriptem. 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í: Soubor je připojen správnou cestou; Konzole nehlásí chybu a změna je viditelná na stránce. Zaznamenej alespoň jeden test nebo porovnání.
- 06
Ulož zdrojovou i výslednou verzi pod jednoznačnými názvy. Odevzdej „Web s připojeným a ověřeným JavaScriptem“ 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 „JavaScript v prohlížeči a vývojářská konzole“ 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: JavaScript, script, konzole, příkaz, chyba, strict mode.
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: JavaScript v prohlížeči a vývojářská konzole.
4. Plán praktické prácePostup musí obsahovat vstup, konkrétní kroky, kontrolu a výstup.
Rozepiš vlastní postup k zadání: Doplnit do startovního webu soubor script.js, změnit stavový text po načtení stránky a zapsat kontrolní zprávu do konzole.
5. SebekontrolaFormuluj kontrolní otázky, které lze skutečně zodpovědět ano/ne nebo měřením.
Jak ověříš, že je výstup „Web s připojeným a ověřeným JavaScriptem“ správný? Vycházej z kritérií: Soubor je připojen správnou cestou, Konzole nehlásí chybu a změna je viditelná na stránce.
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
JavaScript v prohlížeči a vývojářská konzole
Doplnit do startovního webu soubor script.js, změnit stavový text po načtení stránky a zapsat kontrolní zprávu do konzole.
Očekávaný výstup
Web s připojeným a ověřeným JavaScriptem
07
DŮKAZ O UČENÍ
Odevzdání praktického úkolu
Soubor a krátká odpověď
Web s připojeným a ověřeným JavaScriptem
Odevzdej výstup „Web s připojeným a ověřeným JavaScriptem“. 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.