Sada úloh pro procvičení v předmětu KVD/PGM1P (BP Vítek Dolný)
Osnova sekce
-
Vítejte v kurzu „Sada úloh pro procvičení v předmětu KVD/PGM1P“
Tento kurz je určen pro všechny studenty předmětu Programování 1 (PGM1P).
Jeho hlavním cílem je pomoci vám prakticky si procvičit a upevnit látku, kterou jste probírali na přednáškách a cvičeních.
Najdete tu sadu úloh rozdělených podle témat, které vám pomohou postupně se zlepšovat, lépe porozumět kódu a naučit se přemýšlet jako programátoři – tedy ne jen „co napsat“, ale hlavně „proč to tak napsat“.
Jak je kurz rozdělený
Kurz má dvě hlavní části:
1. Úkoly vázané k seminářům
Tady najdete úlohy, které přímo navazují na to, co jste dělali na cvičeních.
Ke každému seminářovému úkolu tu jsou dva podobné příklady – první je jednodušší a pomůže vám upevnit základy, druhý už je o něco náročnější a zkouší, jestli látce opravdu rozumíte.
Cílem není jen „mít správnou odpověď“, ale naučit se přemýšlet nad tím, proč řešení funguje.2. Interaktivní seminářové řešení
V této části najdete kompletní kód, se kterým jste pracovali během seminářů.
Můžete si v něm kliknout na žlutě zvýrazněné části, které vás zavedou na vysvětlení daného pojmu nebo na příslušnou úlohu, kde si téma můžete rovnou procvičit.
Je to skvělý způsob, jak si znovu projít logiku celého programu a pochopit, jak jednotlivé části spolu souvisí.V dalších kapitolách najdete i rozšiřující úlohy, které jdou nad rámec běžné látky. Jsou určené pro ty z vás, kdo si chtějí zkusit něco navíc, zlepšit se nebo zkrátka zjistit, co všechno se s JavaScriptem dá dělat.
Co se tu naučíte
V tomhle kurzu se nebudete jen učit zpaměti nebo opisovat kód.
Budete zkoušet, chybovat a objevovat.
Naučíte se přemýšlet nad tím, proč se váš kód chová určitým způsobem, jak hledat chyby, jak se z nich poučit a jak přemýšlet nad lepším řešením.
Když pochopíte, proč vám něco nefunguje, jste už jen krůček od toho, abyste to dokázali vyřešit sami – a to je přesně to, o co tady jde.
Jak s úlohami pracovat
Začněte hezky od začátku a postupujte podle pořadí.
Úlohy na sebe navazují, takže přeskočit jednu znamená často nerozumět té další.
Nejdřív si přečtěte zadání a příklad, a pak se pusťte do práce.
Až budete hotoví, nezapomeňte se podívat na zpětnou vazbu – často vám ukáže nejen chybu, ale i důvod, proč k ní došlo.Když narazíte na něco, čemu nerozumíte, zkuste si to nejdřív dohledat sami.
Schopnost hledat informace je pro programátory úplně klíčová – nikdo neumí všechno nazpaměť, ale dobrý programátor ví, kde odpověď najít.
AI a jak s ní pracovat
Možná vás napadne, že by bylo jednodušší nechat si úlohu vyřešit umělou inteligencí.
Ale pozor – tím byste se připravili o to nejdůležitější: vlastní přemýšlení a učení.
AI dokáže rychle napsat funkční kód, ale pokud mu nerozumíte, nic jste se nenaučili.V tomto kurzu berte AI jako poslední pomocníka – když už dlouho tápete, nebo potřebujete vysvětlit pojem.
Nechte si poradit, kde začít nebo jak se na problém podívat, ale nenechte si od ní vzít prostor na vlastní pokusy.
Právě zkoušení, omyly a hledání řešení vás posunou nejdál.
Váš průvodce: Učitel vysvětlovač (JavaScript)
V kurzu máte svého AI mentora, který tu není od toho, aby za vás psal řešení.
Pomáhá vám pochopit principy a logiku kódu, vysvětlí nejasnosti a vede vás k tomu, abyste na odpověď přišli sami.Pomáhá vám třeba takto:
-
vysvětlí, co dělá konkrétní část kódu,
-
nasměruje vás, jak začít,
-
upozorní na chyby a vysvětlí, proč vznikly,
-
nebo vám poradí, jak kód zpřehlednit.
Zeptejte se ho třeba:
-
„Co přesně tenhle kód dělá?“
-
„Jak bych mohl začít s tímhle zadáním?“
-
„Proč mi to píše chybu undefined?“
-
„Jak by se dal tenhle kód zjednodušit?“
Je tu proto, aby vám pomohl pochopit, ne jen „dodat řešení“.
Zpětná vazba a dotazníky
Budu moc rád, když mi pomůžete kurz dál zlepšovat.
V průběhu semestru se tu objeví krátké dotazníky, kde můžete napsat, co se vám líbí, co vám pomáhá a co by šlo udělat lépe.
Vaše odpovědi mi pomohou nejen kurz posunout dál, ale i vyhodnotit, jak efektivní takové úlohy vlastně jsou.
Na závěr
V tomhle kurzu se budete učit přemýšlet jako programátoři.
Nebojte se dělat chyby – ty jsou součástí cesty.
Zkoušejte, hledejte a tvořte.
Tenhle kurz je tu proto, aby vám v tom pomohl, ne aby vás o to připravil.Vítejte v prostoru, kde se z učení stává objevování.
-
-
-
-
-
Zpětná vazba k úlohám a podúlohám
Děkujeme, že jste se rozhodli vyplnit tento krátký dotazník.
Slouží k tomu, abych mohl lépe porozumět tomu, jak pro vás jednotlivé úlohy fungují — jak jsou srozumitelné, jak jsou náročné a jak vám pomáhají v pochopení probírané látky.Kdy dotazník vyplnit?
Tento dotazník prosím vyplňte po dokončení jedné úlohy, tedy po splnění obou jejích podúloh. Pokud jste dokončili více úloh, dotazník můžete vyplnit opakovaně (jednou pro každou úlohu).Co se bude dít s vašimi odpověďmi?
Vaše odpovědi budou použity výhradně k vylepšování kvality úkolů a celkového kurzu. Vyplnění je anonymní.Vyplnění zabere přibližně 1–2 minuty.
Děkuji vám za spolupráci a za poctivou zpětnou vazbu.
-
-
-
-
-
-
-
HTML (HyperText Markup Language) je základní jazyk pro tvorbu webových stránek. Jeho hlavní úlohou je popisovat obsah a jeho strukturu – nikoli vzhled nebo chování. Pomocí HTML určujete, co je nadpis, odstavec, seznam, obrázek nebo odkaz. Prohlížeč pak podle těchto značek (tagů) obsah správně zobrazí.
V této části se naučíte:
-
jak vytvořit kostru HTML dokumentu,
-
jak používat sémantické tagy (nadpisy, odstavce, seznamy),
-
jak správně pracovat s atributy (např.
id,class,src,alt), -
jak psát kód čitelně a validně.
-
chtěl bych Vás požádat o vyplění vaší zpětné vazby, která zkoumá problématiků dané sekce a úkolů v ní. Výžkum probíhá v rámci zpracovaní mé bakalářské práce.
Vyplnění zpětné vazby Vám nezabere více než 4 minuty. Odpovědi jsou plně anonymní a pomohou mi získat hlubší pohled do zkoumané problématiky.
Srdečne děkuji za Váš čas a otevřenost při vypňování zpětné vazby.
-
-
-
-
CSS (Cascading Style Sheets) slouží k tomu, aby webová stránka nebyla jen prostý text, ale měla i vzhled a uspořádání. Odděluje obsah (HTML) od prezentace (styly). To je důležité – díky tomu můžete měnit barvy, písma a rozložení, aniž byste zasahovali do samotného obsahu.
V této části se naučíte:
-
různé způsoby připojení CSS (inline, interní, externí),
-
základní syntaxi pravidel a práci se selektory,
-
principy kaskádování a specifikace,
-
používání základních vlastností (barvy, písmo, odsazení, rámečky),
-
jak psát udržitelný a přehledný kód pomocí seskupování a zkrácených zápisů.
-
chtěl bych Vás požádat o vyplění vaší zpětné vazby, která zkoumá problématiků dané sekce a úkolů v ní. Výžkum probíhá v rámci zpracovaní mé bakalářské práce.
Vyplnění zpětné vazby Vám nezabere více než 4 minuty. Odpovědi jsou plně anonymní a pomohou mi získat hlubší pohled do zkoumané problématiky.
Srdečne děkuji za Váš čas a otevřenost při vypňování zpětné vazby.
-
-
-
-
JavaScript je programovací jazyk, který umožňuje dělat webové stránky interaktivní a dynamické. Zatímco HTML určuje obsah a CSS vzhled, JavaScript přidává logiku a chování.
Na začátku je důležité pochopit, jak JavaScript propojit s HTML stránkou:
-
pomocí značky
<script>můžete kód vložit přímo do stránky (v hlavičce<head>nebo v těle<body>), -
častější praxí je ale psát kód do externího souboru (např.
script.js) a ten připojit přes atributsrc.
Velký význam má i pořadí načítání:
-
pokud spustíte kód dříve, než je stránka načtená, může chybět obsah, se kterým pracujete,
-
proto se často
<script>dává až na konec<body>, aby HTML bylo načteno před spuštěním kódu.
V této části se naučíte:
-
jak správně připojit JavaScript k HTML,
-
jak používat externí soubory a proč je to výhodné,
-
jak využívat JavaScript konzoli pro kontrolu a ladění kódu,
-
základy správného psaní a formátování kódu (odsazování, středníky, konzistence).
Tyto základy jsou nezbytné, abyste v dalších úlohách mohli psát JavaScript, který bude spolehlivý a čitelný.
-
chtěl bych Vás požádat o vyplění vaší zpětné vazby, která zkoumá problématiků dané sekce a úkolů v ní. Výžkum probíhá v rámci zpracovaní mé bakalářské práce.
Vyplnění zpětné vazby Vám nezabere více než 4 minuty. Odpovědi jsou plně anonymní a pomohou mi získat hlubší pohled do zkoumané problématiky.
Srdečne děkuji za Váš čas a otevřenost při vypňování zpětné vazby.
-
-
-
-
-
-
JavaScript je jazyk, který umožňuje webovým stránkám reagovat, počítat a měnit svůj obsah. Aby mohl pracovat s daty, potřebuje místo, kam si je „uloží“ – a právě tím jsou proměnné. Pomocí nich si můžeš zapamatovat čísla, texty nebo jiné hodnoty a kdykoli s nimi dál pracovat.
V této části se naučíš:
-
jak proměnné vytvářet a pojmenovávat,
-
jak používat různé typy deklarací (
let,const,var), -
jak funguje rozsah platnosti (scope),
-
a jak psát čitelnější a bezpečnější kód díky správným zásadám pojmenování.
-
chtěl bych Vás požádat o vyplění vaší zpětné vazby, která zkoumá problématiků dané sekce a úkolů v ní. Výžkum probíhá v rámci zpracovaní mé bakalářské práce.
Vyplnění zpětné vazby Vám nezabere více než 4 minuty. Odpovědi jsou plně anonymní a pomohou mi získat hlubší pohled do zkoumané problématiky.
Srdečne děkuji za Váš čas a otevřenost při vypňování zpětné vazby.
-
-
-
-
Aby proměnné v JavaScriptu mohly měnit své hodnoty, používáme přiřazovací operátory. Ty určují, jakým způsobem se nová hodnota uloží nebo vypočítá z té původní.
Základní operátor=přiřazuje hodnotu, zatímco složené operátory jako+=,-=,*=,/=umožňují zkrácený zápis výpočtů a zpřehledňují kód.V této části se naučíš:
-
jak funguje základní přiřazení (
=), -
jak používat složené přiřazovací operátory při práci s čísly a texty,
-
jak se vyhnout typickým chybám při změně hodnot,
-
a jak psát efektivnější a přehlednější kód při výpočtech i aktualizacích dat.
-
chtěl bych Vás požádat o vyplění vaší zpětné vazby, která zkoumá problématiků dané sekce a úkolů v ní. Výžkum probíhá v rámci zpracovaní mé bakalářské práce.
Vyplnění zpětné vazby Vám nezabere více než 4 minuty. Odpovědi jsou plně anonymní a pomohou mi získat hlubší pohled do zkoumané problématiky.
Srdečne děkuji za Váš čas a otevřenost při vypňování zpětné vazby.
-
-
-
-
Logické operátory pomáhají JavaScriptu rozhodovat se.
Umožňují vyhodnocovat více podmínek najednou a reagovat podle toho, zda jsou splněné (true) nebo ne (false). Díky nim můžeš psát chytřejší a pružnější kód, který lépe reaguje na různé situace.V této části se naučíš:
-
používat základní logické operátory
&&,||a!, -
kombinovat více podmínek v jednom výrazu,
-
chápat princip zkráceného vyhodnocování (short-circuiting),
-
a rozpoznat typické chyby v podmínkách i jejich efektivní přepis pomocí tzv. guard clauses.
-
chtěl bych Vás požádat o vyplění vaší zpětné vazby, která zkoumá problématiků dané sekce a úkolů v ní. Výžkum probíhá v rámci zpracovaní mé bakalářské práce.
Vyplnění zpětné vazby Vám nezabere více než 4 minuty. Odpovědi jsou plně anonymní a pomohou mi získat hlubší pohled do zkoumané problématiky.
Srdečne děkuji za Váš čas a otevřenost při vypňování zpětné vazby.
-
-
-
-
Aritmetické operátory jsou základním nástrojem pro počítání a práci s čísly v JavaScriptu.
Pomocí nich můžeš sčítat, odčítat, násobit, dělit nebo zjišťovat zbytek po dělení. Patří mezi úplné základy programování – bez nich by nefungovaly výpočty, počítadla ani logika v cyklech.V této části se naučíš:
-
používat základní operátory
+,-,*,/a%, -
pracovat s inkrementací a dekrementací (
++,--) v prefixové i postfixové podobě, -
chápat prioritu a pořadí vyhodnocování výrazů,
-
a zapisovat výpočty efektivněji pomocí zkrácených zápisů.
-
chtěl bych Vás požádat o vyplění vaší zpětné vazby, která zkoumá problématiků dané sekce a úkolů v ní. Výžkum probíhá v rámci zpracovaní mé bakalářské práce.
Vyplnění zpětné vazby Vám nezabere více než 4 minuty. Odpovědi jsou plně anonymní a pomohou mi získat hlubší pohled do zkoumané problématiky.
Srdečne děkuji za Váš čas a otevřenost při vypňování zpětné vazby.
-
-
-
-
Porovnávací operátory umožňují JavaScriptu rozhodovat na základě srovnání hodnot.
Pomocí nich zjistíš, zda jsou dvě hodnoty stejné, menší, větší nebo různého typu.
Bez porovnávání by nefungovaly podmínky ani logika, která řídí tok programu.V této části se naučíš:
-
používat základní porovnávací operátory
==,===,!=,!==,<,>,<=,>=, -
rozumět rozdílu mezi volným a striktním porovnáním (
==vs===), -
pochopit princip dynamického typování v JavaScriptu,
-
a psát přesnější a čitelnější podmínky díky dobré praxi a refaktoringu
-
chtěl bych Vás požádat o vyplění vaší zpětné vazby, která zkoumá problématiků dané sekce a úkolů v ní. Výžkum probíhá v rámci zpracovaní mé bakalářské práce.
Vyplnění zpětné vazby Vám nezabere více než 4 minuty. Odpovědi jsou plně anonymní a pomohou mi získat hlubší pohled do zkoumané problématiky.
Srdečne děkuji za Váš čas a otevřenost při vypňování zpětné vazby.
-
-
-
-
JavaScript obsahuje množství vestavěných funkcí, které ti usnadní práci s daty, čísly, texty i časem.
Místo složitého psaní vlastního kódu můžeš využít hotové nástroje, které jsou rychlé, spolehlivé a připravené k okamžitému použití.V této části se naučíš:
-
ověřovat a převádět uživatelské vstupy na číselné hodnoty,
-
používat základní matematické funkce z objektu
Math, -
pracovat s objektem
Datea vypisovat aktuální datum nebo čas, -
a kombinovat více funkcí dohromady pro praktické úkoly, jako je kontrola nebo sčítání vstupů.
-
chtěl bych Vás požádat o vyplění vaší zpětné vazby, která zkoumá problématiků dané sekce a úkolů v ní. Výžkum probíhá v rámci zpracovaní mé bakalářské práce.
Vyplnění zpětné vazby Vám nezabere více než 4 minuty. Odpovědi jsou plně anonymní a pomohou mi získat hlubší pohled do zkoumané problématiky.
Srdečne děkuji za Váš čas a otevřenost při vypňování zpětné vazby.
-
-
-
-
JavaScript dokáže měnit obsah, strukturu i vzhled stránky přímo za běhu.
Pomocí přístupu k DOM (Document Object Model) můžeš číst hodnoty z prvků, přidávat nové elementy, měnit texty nebo reagovat na uživatelské akce.
Právě zde se HTML, CSS a JavaScript poprvé opravdu propojují.V této části se naučíš:
-
vybírat HTML prvky pomocí
querySelectoraclassList, -
číst a zapisovat hodnoty z formulářových polí,
-
vytvářet a mazat dynamické prvky na stránce,
-
reagovat na kliknutí nebo změny pomocí událostí a delegace,
-
a vytvářet interaktivní prvky s přepínáním obsahu.
-
chtěl bych Vás požádat o vyplění vaší zpětné vazby, která zkoumá problématiků dané sekce a úkolů v ní. Výžkum probíhá v rámci zpracovaní mé bakalářské práce.
Vyplnění zpětné vazby Vám nezabere více než 4 minuty. Odpovědi jsou plně anonymní a pomohou mi získat hlubší pohled do zkoumané problématiky.
Srdečne děkuji za Váš čas a otevřenost při vypňování zpětné vazby.
-
-
-
-
Textové řetězce (strings) patří k nejpoužívanějším datovým typům v JavaScriptu.
Slouží ke zpracování textů, vytváření zpráv, výpisů a komunikaci s uživatelem.
Díky nim můžeš spojovat data do vět, formátovat výstupy nebo dynamicky vytvářet HTML obsah.V této části se naučíš:
-
vytvářet a zapisovat řetězce pomocí uvozovek a zpětných apostrofů,
-
používat interpolaci proměnných v šablonových literálech,
-
spojovat texty (
+a${}) a správně escapovat speciální znaky, -
formátovat výstup z dat proměnných a přidávat zalomení řádků.
-
chtěl bych Vás požádat o vyplění vaší zpětné vazby, která zkoumá problématiků dané sekce a úkolů v ní. Výžkum probíhá v rámci zpracovaní mé bakalářské práce.
Vyplnění zpětné vazby Vám nezabere více než 4 minuty. Odpovědi jsou plně anonymní a pomohou mi získat hlubší pohled do zkoumané problématiky.
Srdečne děkuji za Váš čas a otevřenost při vypňování zpětné vazby.
-
-
-
-
Kromě samotného zápisu textu nabízí JavaScript mnoho metod pro jeho úpravu a analýzu.
Tyto metody ti umožní měnit velikost písmen, hledat a nahrazovat části textu, spojovat nebo dělit řetězce a kontrolovat jejich délku.
Bez těchto nástrojů by práce s textem byla zdlouhavá a nepřehledná.V této části se naučíš:
-
získávat délku řetězce a přistupovat ke znakům,
-
používat metody jako
.trim(),.substring(),.slice(),.concat()a.split(), -
vyhledávat text pomocí
.indexOf()a.includes(), -
nahrazovat text metodou
.replace()a upravovat formát před porovnáním, -
kombinovat metody pro složitější zpracování textu (např. kontrolu nebo normalizaci).
-
chtěl bych Vás požádat o vyplění vaší zpětné vazby, která zkoumá problématiků dané sekce a úkolů v ní. Výžkum probíhá v rámci zpracovaní mé bakalářské práce.
Vyplnění zpětné vazby Vám nezabere více než 4 minuty. Odpovědi jsou plně anonymní a pomohou mi získat hlubší pohled do zkoumané problématiky.
Srdečne děkuji za Váš čas a otevřenost při vypňování zpětné vazby.
-
-
-
-
-
-
Funkce jsou základním stavebním prvkem každého programu.
Pomáhají rozdělit kód na menší, přehledné části, které se dají znovu použít. Díky nim můžeš jednou napsaný postup volat kdykoli a s různými vstupy – bez nutnosti opakování stejného kódu.V této části se naučíš:
-
vytvářet vlastní funkce pomocí deklarace i výrazu funkce,
-
předávat parametry a zpracovávat jejich hodnoty,
-
vracet výsledky pomocí return,
-
rozumět tomu, jak funguje hoisting a proč na pořadí deklarací záleží,
-
a používat funkce pro výpočty, převody nebo validace dat.
-
chtěl bych Vás požádat o vyplění vaší zpětné vazby, která zkoumá problématiků dané sekce a úkolů v ní. Výžkum probíhá v rámci zpracovaní mé bakalářské práce.
Vyplnění zpětné vazby Vám nezabere více než 4 minuty. Odpovědi jsou plně anonymní a pomohou mi získat hlubší pohled do zkoumané problématiky.
Srdečne děkuji za Váš čas a otevřenost při vypňování zpětné vazby.
-
-
-
-
Parametry umožňují funkcím pracovat s různými vstupními daty.
Díky nim můžeš napsat jednu univerzální funkci a použít ji v mnoha situacích – pokaždé s jinými hodnotami.
To dělá kód flexibilní, přehledný a snadno rozšiřitelný.V této části se naučíš:
-
definovat a volat funkce s parametry a argumenty,
-
pochopit rozdíl mezi pořadím parametrů a jejich významem,
-
používat výchozí hodnoty parametrů při volání,
-
a provádět refaktoring funkcí tak, aby byly srozumitelnější a univerzálnější.
-
chtěl bych Vás požádat o vyplění vaší zpětné vazby, která zkoumá problématiků dané sekce a úkolů v ní. Výžkum probíhá v rámci zpracovaní mé bakalářské práce.
Vyplnění zpětné vazby Vám nezabere více než 4 minuty. Odpovědi jsou plně anonymní a pomohou mi získat hlubší pohled do zkoumané problématiky.
Srdečne děkuji za Váš čas a otevřenost při vypňování zpětné vazby.
-
-
-
-
-
-
Podmínky umožňují programu rozhodovat se – tedy spustit určitý blok kódu jen tehdy, když je splněna daná situace.
Díky nim se JavaScript stává dynamickým: dokáže reagovat na uživatelský vstup, hodnoty proměnných i výsledky výpočtů.V této části se naučíš:
-
používat základní konstrukce
if,else ifaelse, -
kombinovat logické a relační operátory v podmínkách,
-
řídit tok programu podle splněných či nesplněných pravidel,
-
rozkládat složitější podmínky do menších kroků,
-
a poznáš i ternární operátor jako zkrácenou variantu rozhodování.
-
chtěl bych Vás požádat o vyplění vaší zpětné vazby, která zkoumá problématiků dané sekce a úkolů v ní. Výžkum probíhá v rámci zpracovaní mé bakalářské práce.
Vyplnění zpětné vazby Vám nezabere více než 4 minuty. Odpovědi jsou plně anonymní a pomohou mi získat hlubší pohled do zkoumané problématiky.
Srdečne děkuji za Váš čas a otevřenost při vypňování zpětné vazby.
-
-
-
-
Konstrukce
switchslouží k přehlednému větvení programu, pokud potřebuješ zpracovat více různých možností podle jedné hodnoty.
Namísto dlouhých řetězcůifaelse ifmůžeš díkyswitchpsát čitelnější a organizovanější kód.V této části se naučíš:
-
vytvářet přepínač pomocí větví
casea příkazubreak, -
pochopit rozdíl mezi fall-through a správným ukončením větve,
-
kombinovat
if/elseaswitchpodle typu rozhodování, -
a používat přepínač pro praktické situace, jako je vyhodnocení objednávek nebo volba akce podle vstupu.
-
chtěl bych Vás požádat o vyplění vaší zpětné vazby, která zkoumá problématiků dané sekce a úkolů v ní. Výžkum probíhá v rámci zpracovaní mé bakalářské práce.
Vyplnění zpětné vazby Vám nezabere více než 4 minuty. Odpovědi jsou plně anonymní a pomohou mi získat hlubší pohled do zkoumané problématiky.
Srdečne děkuji za Váš čas a otevřenost při vypňování zpětné vazby.
-
-
-
-
Cykly umožňují programu opakovat určitou část kódu bez nutnosti ji psát znovu.
Díky nim můžeš snadno zpracovat více položek, počítat, procházet seznamy nebo vykonávat příkazy, dokud platí daná podmínka.V této části se naučíš:
-
používat základní smyčky
for,whileado...while, -
správně nastavit podmínku ukončení cyklu,
-
pracovat s počítadlem průchodů a proměnnými uvnitř smyčky,
-
využívat příkazy
continueabreakpro řízení toku cyklu, -
a kombinovat více cyklů v jednom programu (např. pro práci s více daty najednou).
-
chtěl bych Vás požádat o vyplění vaší zpětné vazby, která zkoumá problématiků dané sekce a úkolů v ní. Výžkum probíhá v rámci zpracovaní mé bakalářské práce.
Vyplnění zpětné vazby Vám nezabere více než 4 minuty. Odpovědi jsou plně anonymní a pomohou mi získat hlubší pohled do zkoumané problématiky.
Srdečne děkuji za Váš čas a otevřenost při vypňování zpětné vazby.
-
-
-
-
-
-
Pole (arrays) slouží k ukládání více hodnot do jedné proměnné.
Díky nim můžeš pracovat s celými seznamy dat – například s názvy produktů, body hráčů nebo čísly v tabulce – a efektivně je zpracovávat pomocí cyklů a metod.V této části se naučíš:
-
vytvářet pole a přistupovat k jednotlivým prvkům podle indexu,
-
zjišťovat délku pole pomocí
.length, -
přidávat, odebírat a měnit prvky pomocí metod jako
push(),pop(),shift(),unshift(),splice()aconcat(), -
a provádět základní iterace pole pro práci s více daty najednou.
-
chtěl bych Vás požádat o vyplění vaší zpětné vazby, která zkoumá problématiků dané sekce a úkolů v ní. Výžkum probíhá v rámci zpracovaní mé bakalářské práce.
Vyplnění zpětné vazby Vám nezabere více než 4 minuty. Odpovědi jsou plně anonymní a pomohou mi získat hlubší pohled do zkoumané problématiky.
Srdečne děkuji za Váš čas a otevřenost při vypňování zpětné vazby.
-
-
-
-
Metody polí umožňují pohodlně upravovat, kontrolovat a procházet data uložená v polích.
Díky nim dokážeš zjednodušit kód, spojovat nebo dělit seznamy, kopírovat prvky, převádět pole na text i efektivně reagovat na obsah pomocí cyklů a funkcí.V této části se naučíš:
-
převádět pole na text pomocí metod
.toString()a.join(), -
používat metodu
.forEach()pro výpis, úpravy a kontrolu dat, -
pracovat se spread operátorem (
...) pro kopírování a spojování polí, -
a využívat pokročilejší metody jako
.slice(),.splice(),.concat()či.unshift()pro úpravu obsahu.
-
chtěl bych Vás požádat o vyplění vaší zpětné vazby, která zkoumá problématiků dané sekce a úkolů v ní. Výžkum probíhá v rámci zpracovaní mé bakalářské práce.
Vyplnění zpětné vazby Vám nezabere více než 4 minuty. Odpovědi jsou plně anonymní a pomohou mi získat hlubší pohled do zkoumané problématiky.
Srdečne děkuji za Váš čas a otevřenost při vypňování zpětné vazby.
-
-
-
-
Pole nemusí obsahovat jen jednoduché hodnoty — mohou v sobě nést jiná pole nebo složitější struktury dat.
Tím vznikají vícerozměrná pole, která umožňují pracovat s tabulkami, maticemi nebo víceúrovňovými seznamy.
Tato dovednost je klíčová pro zpracování dat v reálných aplikacích.V této části se naučíš:
-
vytvářet a používat 2D pole (pole v poli),
-
přistupovat k hodnotám pomocí dvojitého indexu,
-
upravovat a procházet vnořená pole pomocí cyklů
forafor...of, -
provádět součty, úpravy a výpisy hodnot z vícerozměrných struktur.
-
chtěl bych Vás požádat o vyplění vaší zpětné vazby, která zkoumá problématiků dané sekce a úkolů v ní. Výžkum probíhá v rámci zpracovaní mé bakalářské práce.
Vyplnění zpětné vazby Vám nezabere více než 4 minuty. Odpovědi jsou plně anonymní a pomohou mi získat hlubší pohled do zkoumané problématiky.
Srdečne děkuji za Váš čas a otevřenost při vypňování zpětné vazby.
-
-
-
-
-
-
Objekty jsou jedním z nejdůležitějších prvků JavaScriptu.
Umožňují ukládat a organizovat data do přehledných struktur tvořených vlastnostmi (klíči) a jejich hodnotami.
Díky objektům můžeš pracovat s informacemi o osobách, produktech nebo událostech stejně snadno, jako s běžnými reálnými objekty.V této části se naučíš:
-
vytvářet objekty různými způsoby (
{},new Object(),Object.create()), -
přistupovat k vlastnostem a měnit jejich hodnoty,
-
přidávat nové vlastnosti a metody,
-
iterovat objekty a vypisovat jejich obsah,
-
a pracovat s klíčovým slovem
thispři volání metod.
-
chtěl bych Vás požádat o vyplění vaší zpětné vazby, která zkoumá problématiků dané sekce a úkolů v ní. Výžkum probíhá v rámci zpracovaní mé bakalářské práce.
Vyplnění zpětné vazby Vám nezabere více než 4 minuty. Odpovědi jsou plně anonymní a pomohou mi získat hlubší pohled do zkoumané problématiky.
Srdečne děkuji za Váš čas a otevřenost při vypňování zpětné vazby.
-
-
-
-
Kombinací polí a objektů vzniká velmi silný nástroj pro práci s daty.
Pole objektů se používají všude tam, kde potřebuješ zpracovat více záznamů se stejnou strukturou – například seznam uživatelů, produktů nebo výsledků testu.
Umožňují efektivně procházet, filtrovat i zobrazovat složitější informace.V této části se naučíš:
-
vytvářet pole složené z objektů a přistupovat k jejich vlastnostem,
-
iterovat pole objektů pomocí různých typů cyklů (
for,for...of,forEach), -
filtrovat, hledat a vybírat konkrétní objekty podle podmínek,
-
a vytvářet textové výpisy z dat v poli.
-
chtěl bych Vás požádat o vyplění vaší zpětné vazby, která zkoumá problématiků dané sekce a úkolů v ní. Výžkum probíhá v rámci zpracovaní mé bakalářské práce.
Vyplnění zpětné vazby Vám nezabere více než 4 minuty. Odpovědi jsou plně anonymní a pomohou mi získat hlubší pohled do zkoumané problématiky.
Srdečne děkuji za Váš čas a otevřenost při vypňování zpětné vazby.
-
-
-
-
-
-
Plátno (
<canvas>) umožňuje kreslit grafiku přímo pomocí JavaScriptu.
Díky němu můžeš vytvářet jednoduché animace, interaktivní prvky nebo vizualizace dat – a to všechno bez použití obrázků.
Práce s plátnem rozvíjí logické myšlení i představivost, protože kombinuje programování a grafiku.V této části se naučíš:
-
vytvořit a nastavit plátno pomocí HTML atributů
widthaheight, -
ověřit kontext vykreslování a používat základní příkazy pro kreslení,
-
kreslit čáry a tvary pomocí metod
beginPath(),moveTo(),lineTo()aarc(), -
vymazávat části plátna pomocí
clearRect(), -
a vytvořit jednoduchou animaci pomocí opakovaného překreslování.
-
Děkujeme, že jste se rozhodli vyplnit tento krátký dotazník.
Slouží k tomu, abych mohl lépe porozumět tomu, jak pro vás jednotlivé úlohy fungují — jak jsou srozumitelné, jak jsou náročné a jak vám pomáhají v pochopení probírané látky.Kdy dotazník vyplnit?
Tento dotazník prosím vyplňte po dokončení jedné úlohy, tedy po splnění obou jejích podúloh. Pokud jste dokončili více úloh, dotazník můžete vyplnit opakovaně (jednou pro každou úlohu).Co se bude dít s vašimi odpověďmi?
Vaše odpovědi budou použity výhradně k vylepšování kvality úkolů a celkového kurzu.Vyplnění zabere přibližně 1–2 minuty.
Děkuji vám za spolupráci a za poctivou zpětnou vazbu.
-
-
-
-
Plátno (
<canvas>) umožňuje kreslit grafiku přímo pomocí JavaScriptu.
Díky němu můžeš vytvářet jednoduché animace, interaktivní prvky nebo vizualizace dat – a to všechno bez použití obrázků.
Práce s plátnem rozvíjí logické myšlení i představivost, protože kombinuje programování a grafiku.V této části se naučíš:
-
vytvořit a nastavit plátno pomocí HTML atributů
widthaheight, -
ověřit kontext vykreslování a používat základní příkazy pro kreslení,
-
kreslit čáry a tvary pomocí metod
beginPath(),moveTo(),lineTo()aarc(), -
vymazávat části plátna pomocí
clearRect(), -
a vytvořit jednoduchou animaci pomocí opakovaného překreslování.
-
chtěl bych Vás požádat o vyplění vaší zpětné vazby, která zkoumá problématiků dané sekce a úkolů v ní. Výžkum probíhá v rámci zpracovaní mé bakalářské práce.
Vyplnění zpětné vazby Vám nezabere více než 4 minuty. Odpovědi jsou plně anonymní a pomohou mi získat hlubší pohled do zkoumané problématiky.
Srdečne děkuji za Váš čas a otevřenost při vypňování zpětné vazby.
-
-
-
-
Při tvorbě výukových materiálů, příkladů a úloh k JavaScriptu, práci s DOM, událostem a proměnným byly jako inspirační a podpůrné zdroje využity následující webové stránky a veřejně dostupné repozitáře.
Oficiální a výuková dokumentace
- MDN Web Docs – JavaScript a DOM
Dokumentace k JavaScriptu, DOM, metodám pro výběr prvků, práci s událostmi a webovým API.
https://developer.mozilla.org/en-US/docs/Web/JavaScript
https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model - MDN Web Docs – querySelector()
Referenční materiál k metodě pro výběr prvků z dokumentu pomocí CSS selektorů.
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector - MDN Web Docs – addEventListener()
Referenční materiál k práci s událostmi a registraci posluchačů událostí.
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener - W3Schools – JavaScript Tutorial
Výukové materiály k základům JavaScriptu, proměnným, DOM a událostem vhodné zejména pro začátečníky.
https://www.w3schools.com/js/
https://www.w3schools.com/js/js_htmldom.asp
https://www.w3schools.com/js/js_let.asp
https://www.w3schools.com/js/js_const.asp - JavaScript.info – The Modern JavaScript Tutorial
Podrobnější výklad moderního JavaScriptu, DOM stromu, práce s prvky, událostmi a formuláři.
https://javascript.info/
https://javascript.info/dom-nodes
https://javascript.info/introduction-browser-events
GitHub repozitáře
- MDN Web Docs – obsah dokumentace
Veřejný repozitář se zdrojovými materiály dokumentace MDN.
https://github.com/mdn/content - MDN DOM Examples
Ukázkové příklady k DOM a webovým API.
https://github.com/mdn/dom-examples - The Modern JavaScript Tutorial – GitHub
Zdrojový obsah výukového webu JavaScript.info.
https://github.com/javascript-tutorial/en.javascript.info - Airbnb JavaScript Style Guide
Doporučení ke stylu zápisu JavaScriptu, včetně používáníconst,leta omezení použitívar.
https://github.com/airbnb/javascript - You Don't Know JS Yet
Otevřená knižní série zaměřená na hlubší pochopení JavaScriptu.
https://github.com/getify/You-Dont-Know-JS - ECMAScript Language Specification
Oficiální specifikace jazyka ECMAScript, ze které JavaScript vychází.
https://github.com/tc39/ecma262
Poznámka: Uvedené zdroje sloužily jako odborná a výuková inspirace při tvorbě materiálů. Konkrétní formulace úloh, vysvětlení a příklady byly upraveny pro potřeby kurzu a začátečníků v předmětu PGM1P.
Datum uvedení zdrojů: 26. 4. 2026.
- MDN Web Docs – JavaScript a DOM
-
Dokumentace a tutoriály
-
MDN Web Docs– oficiální a nejpodrobnější dokumentace pro HTML, CSS i JavaScript
-
W3Schools– přehledné návody a příklady pro rychlé pochopení
-
CSS Tricks– tipy a postupy pro moderní CSS
Online editory / kompilátory
-
CodePen– okamžité testování HTML/CSS/JS s náhledem
-
JSFiddle– jednoduché sdílení a ladění kódu
-
JS Bin– živý editor pro HTML, CSS a JS
-
StackBlitz– plnohodnotné online IDE (vhodné i pro projekty)
Kontrola a validace
-
W3C HTML Validator– ověření správnosti HTML kódu
-
W3C CSS Validator– kontrola CSS pravidel
-
ESLint (Playground)– kontrola a automatické opravy JS kódu
Tvůj učitel–vysvětlovač
-
ChatGPT – Učitel vysvětlovač (JavaScript)– vlastní GPT model pro vysvětlování kódu a nápovědy k úlohám
-