Merge pull request #778 from Czechitas-podklady-WEB/FJ-opravy-od-ucas…

…tnic

Fj opravy od ucastnic

daweb/js1/filmbox/cvlekce/detail-filmu/exercise.md

@@ -7,7 +7,7 @@ solutionAccess: protected
 
 Zobrazte příslušné informace o filmu na stránce s detailem.
 
-1. Protože stránka `film.html` obsluhuje datail všech filmů, budete si muset přes adresu stránky předat informaci, který konkrétní film si uživatel právě prohlíží. Využijeme toho, že dna konec adresy můžeme přidat znak mřížky (`#`) a za něj libovolný text, který následně můžeme v JavaScriptu přečíst. (V tomto kroku jsou jen informace, nic neděláte.)
+1. Protože stránka `film.html` obsluhuje datail všech filmů, budete si muset přes adresu stránky předat informaci, který konkrétní film si uživatel právě prohlíží. Využijeme toho, že na konec adresy můžeme přidat znak mřížky (`#`) a za něj libovolný text, který následně můžeme v JavaScriptu přečíst. (V tomto kroku jsou jen informace, nic neděláte.)
 1. V souboru `seznam.js` v HTML kódu z předchozího úkolu (který zobrazuje jeden film v seznamu) přidejte do odkazu `href` za `film.html` znak mřížky (`#`) a za něj ještě unikátní identifikátor (`id`), který má každý film jiný. HTML by pak mělo vypadat zhruba takto:
 
    <!-- prettier-ignore -->

daweb/js1/funkce-arg-udalosti/anonymni-funkce.md

@@ -1,16 +1,16 @@
 ## Anonymní funkce
 
-V předchozím programu je vidět, že funkci `timesIsUp` používáme pouze jednou. Je proto trochu zbytečné pro ni vytvářet proměnnou. Funkci můžeme vytvořit přímo na místě, kdy ji používáme.
+V předchozím programu je vidět, že funkci `timesIsUp` používáme pouze jednou. Je proto trochu zbytečné pro ni vytvářet proměnnou. Funkci můžeme vytvořit přímo na místě, kde ji používáme.
 
 ```js
 setTimeout(() => {
   document.body.innerHTML += '<p>Čas vypršel</p>';
 }, 5000);
 ```
 
-Pokud nějakou funkci vytváříme přímo takto na místě místo toho, abychom ji nejdříve uložili do proměné, říkáme, že taková funkce je takzvaně :term{cs="anonymní" en="anonymous"}. V teorii programování se místo tohoto pojmu spíše setkáte s pojmem :term{cs="lambda funkce" en="lambda functions"}. V JavaScriptu se toto sousloví až tolik nepoužívá, zato v jazyce Python je to zažitý termín.
+Pokud nějakou funkci vytváříme přímo takto na místě místo toho, abychom ji nejdříve uložili do proměnné, říkáme, že taková funkce je takzvaně :term{cs="anonymní" en="anonymous"}. V teorii programování se místo tohoto pojmu spíše setkáte s pojmem :term{cs="lambda funkce" en="lambda functions"}. V JavaScriptu se toto sousloví až tolik nepoužívá, zato v jazyce Python je to zažitý termín.
 
-Program napsaný pomocí lambda funkcí vám možná přijde hůř k přečtení. Anonymní funkce se ovšem v JavaScriptu používají zcela běžně a jakmile si na tento způsob zapisu zvyknete, budete jej radostně používat také.
+Program napsaný pomocí lambda funkcí vám možná přijde hůř k přečtení. Anonymní funkce se ovšem v JavaScriptu používají zcela běžně a jakmile si na tento způsob zápisu zvyknete, budete jej radostně používat také.
 
 Podobně jako u funkce `setTimout`, anonymní funkci můžeme předat i naší známé funkci `calc`. Zkuste určit, co bude výsledkem následujícího výrazu a proč.
 

daweb/js1/funkce-arg-udalosti/cvdoma/catering.md

@@ -18,7 +18,7 @@ Napište pro každou z těcho společností funkci s jedním parametrem, který
 
 > Catering od Flavour Haven pro 100 lidí za 300000 Kč
 
-Vyzkoušjte si vaše funkce v konzoli. Poté napište funkci `createEvent`, která představuje vytvoření nějaké události s cateringem. Funkce na vstupu obdrží název události, počet lidí a funkci, pomocí které se má provést catering. Funkce `createEvent` pak vrátí zprávu ve smyslu
+Vyzkoušejte si vaše funkce v konzoli. Poté napište funkci `createEvent`, která představuje vytvoření nějaké události s cateringem. Funkce na vstupu obdrží název události, počet lidí a funkci, pomocí které se má provést catering. Funkce `createEvent` pak vrátí zprávu ve smyslu
 
 > Událost Inaugurace prezidenta s catering od Flavour Haven pro 100 lidí za 300000 Kč
 

daweb/js1/funkce-arg-udalosti/cvlekce/zarovka/exercise.md

@@ -10,7 +10,7 @@ Vytvořte si repozitář ze šablony [cviceni-zarovka](https://github.com/Czechi
 
 Cílem bude, aby se po stisknutí klávesy žárovka na stránce rozsvítila (k elementu žárovky `.bulb` se přidá třída `bulb--on`, která pomocí CSS zařídí rozsvícení žárovky). Po té vylepšíte program tak, aby dalším stisknutím klávesy žárovka zase zhasla – a tak stále dokola.
 
-1. Budete potřebovat reagovat na událost `keydown`. Pozor na to, že události z klávesnice získávají pouze elemnety, které mají :term{cs="zaměření" en="focus"}. Focus mají třeba formulářová políčka, když do nich uživatel klikne. Aby získal focus element `div` by ale bylo obtížné. Proto posluchač události navěsíme na `document`, tedy na celou webovu stránku. Tím pádem se o stisknutí klávesy dozvíme, ať má focus kterýkoli prvek na stránce. Při zkoušení vašeho kódu si ověřte, že má focus okno prohlížeče – než stisknete klávesu, klikněte myší do webové stránky.
+1. Budete potřebovat reagovat na událost `keydown`. Pozor na to, že události z klávesnice získávají pouze elementy, které mají :term{cs="zaměření" en="focus"}. Focus mají třeba formulářová políčka, když do nich uživatel klikne. Aby získal focus element `div` by ale bylo obtížné. Proto posluchač události navěsíme na `document`, tedy na celou webovou stránku. Tím pádem se o stisknutí klávesy dozvíme, ať má focus kterýkoli prvek na stránce. Při zkoušení vašeho kódu si ověřte, že má focus okno prohlížeče – než stisknete klávesu, klikněte myší do webové stránky.
 1. Dá se zjistit, kterou klávesu uživatel stiskl. My chceme, aby žárovka reagovala na libovolnou klávesu, proto to nebudeme řešit – stačí nám informace, že došlo k události `keydown`.
 1. Do ovladače události (funkce), který reaguje na událost `keydown`, přidejte kód, který elementu s žárovkou (s třídou `bulb`) přidá třídu `bulb--on`. Žárovka by se takto měla rozsvítit.
 1. Vylepšete program tak, aby na následné stisknutí libovolné klávesy žárovka opět zhasnula (tj. odstraní se třída `bulb--on`).

daweb/js1/funkce-arg-udalosti/druhy-udalosti.md

@@ -10,7 +10,7 @@ const handleClick = () => {
 document.addEventListener('click', handleClick);
 ```
 
-Takto přidáme posluchače události k celé naší stránce. Na celé stránce také můžeme použít událost `scroll`, která nastave pokaždé, když uživatel na stránce zascrolluje.
+Takto přidáme posluchače události k celé naší stránce. Na celé stránce také můžeme použít událost `scroll`, která nastane pokaždé, když uživatel na stránce zascrolluje.
 
 ```js
 const handleScroll = () => {

daweb/js1/funkce-arg-udalosti/funkce-arg.md

@@ -1,4 +1,4 @@
-V předchozích lekcích jsme si ukázali, jak můžeme pomocí JavaScriptu měnit obsah stránky a jak vyrábět vlastní funkce. Díky těmto nástrojům se postupně bližíme k tomu, abychom uměli naše stránky udělat skutečně interaktivní. Budeme chtít umět změnit obsah stránky ve chvíli, kdy uživatel klikne na tlačítko, umožnit uživateli vložit vstup pomocí textového políčka a mnoho dalších interakcí. K tomu potřebujeme porozumět takzvaným :term{cs="událostem" en="events"}. Abychom uměli dobře používat události, bude se nám hodit vědět něco více o tom, jak fungují funkce.
+V předchozích lekcích jsme si ukázali, jak můžeme pomocí JavaScriptu měnit obsah stránky a jak vyrábět vlastní funkce. Díky těmto nástrojům se postupně blížíme k tomu, abychom uměli naše stránky udělat skutečně interaktivní. Budeme chtít umět změnit obsah stránky ve chvíli, kdy uživatel klikne na tlačítko, umožnit uživateli vložit vstup pomocí textového políčka a mnoho dalších interakcí. K tomu potřebujeme porozumět takzvaným :term{cs="událostem" en="events"}. Abychom uměli dobře používat události, bude se nám hodit vědět něco více o tom, jak fungují funkce.
 
 ## Funkce jako argumenty
 

daweb/js1/funkce-arg-udalosti/udalosti.md

@@ -1,6 +1,6 @@
 ## Události
 
-Aby naše stránky mohly být skutečně interaktivní, potřebujeme být schopni reagovat na akce, které uživatel na stránce provádí - klikání na tlačíka, stiknutí kláves, scrollování, pohyb myší apod. Vždy, když některá z těcho akcí na stránce nastane, říkáme, že nastala určitá :term{cs="událost" en="event"}. JavaScript reprezentuje takovou událost jako speciální typ hodnoty podobně jako číslo, řetězec nebo funkci. Událost tedy můžeme uložit do proměnné nebo poslat nějaké funkci jako vstup. Událost obsahuje vlastnosti a metody, které popisují co se přesně stalo, například jaká klávesa byla zrovna stisknuta, kde na obrazovce bylo kliknuto a spoustu dalších užitenčných informací.
+Aby naše stránky mohly být skutečně interaktivní, potřebujeme být schopni reagovat na akce, které uživatel na stránce provádí – klikání na tlačítka, stisknutí kláves, scrollování, pohyb myší apod. Vždy, když některá z těcho akcí na stránce nastane, říkáme, že nastala určitá :term{cs="událost" en="event"}. JavaScript reprezentuje takovou událost jako speciální typ hodnoty podobně jako číslo, řetězec nebo funkci. Událost tedy můžeme uložit do proměnné nebo poslat nějaké funkci jako vstup. Událost obsahuje vlastnosti a metody, které popisují co se přesně stalo, například jaká klávesa byla zrovna stisknuta, kde na obrazovce bylo kliknuto a spoustu dalších užitečných informací.
 
 Abychom mohli na události reagovat, JavaScript nám umožňuje ke každé události, která nás zajímá, připojit funkci, která se zavolá ve chvíli, kdy daná událost nastane. Takové funkci často říkáme :term{cs="posluchač události" en="event listener"}. Můžeme si představit, že JavaScript runtime pečlivě naslouchá všem možným událostem a volá k nim přiřazené funkce. Taková funkce může vypadat například takto.
 
@@ -36,13 +36,13 @@ buttonElement.addEventListener('click', changeTitle);
 
 S událostmi přichází několik nástrah, na které když si nedáme pozor, naše stránka nejen že nebude fungovat, ale nevyhodí ani žádnou chybu. V takové situací může být těžké odhalit, v čem přesně je zakopaný pes. Tyto nástrahy se často rády objeví těsně před deadlinem odevzdání projektu a jejich hektické řešení pak má neblahý vliv na naše zdraví a zdraví našich kolegů.
 
-Nástraha první spočítá v předávání funkce `changeTitle`. Všimněte si opět toho, že používáme funkci `changeTitle` jako hodnotu a předáváme ji jako vstup metodě `addEventListener`. Nikde v našem kódu funkci sami nevoláme. Zavolá ji až JavaScript runtime ve chvíli, kdy na tlačíku nastane událost `click`. Častou začátečnickou chybou je pokušet se funkci zavolat sami.
+Nástraha první spočítá v předávání funkce `changeTitle`. Všimněte si opět toho, že používáme funkci `changeTitle` jako hodnotu a předáváme ji jako vstup metodě `addEventListener`. Nikde v našem kódu funkci sami nevoláme. Zavolá ji až JavaScript runtime ve chvíli, kdy na tlačíku nastane událost `click`. Častou začátečnickou chybou je pokoušet se funkci zavolat sami.
 
 ```js
 buttonElement.addEventListener('click', changeTitle());
 ```
 
-V tomto případě se funkce `changeTitle` zavolá už ve chvíli, kdy voláme metodu `addEventListener`. Té se pak jako druhý vstup předá **výsledek** volání funkce `changeTitle`, nikoliv funkce samotná. Jelikož `changeTitle` nic nevrací (přesněji řečeno, vrací `undefined`), k události `click` se žádný posluchač nepřipojí. Naše tlačítko tedy nebude fungovat. Co nás může zmást je to, že takováto stránka nevyhodí žádnou chybu. Náš JavaScript kód totiž funguje jak má. Jen jsme ho napsali tak, že dělá něco jiného než chceme. JavaScript runtime však nemůže telepaticky nahlížet do našich hlav aby věděl, co doopravdy chceme. Prostě dělá to, co jsme mu řekli.
+V tomto případě se funkce `changeTitle` zavolá už ve chvíli, kdy voláme metodu `addEventListener`. Té se pak jako druhý vstup předá **výsledek** volání funkce `changeTitle`, nikoliv funkce samotná. Jelikož `changeTitle` nic nevrací (přesněji řečeno, vrací `undefined`), k události `click` se žádný posluchač nepřipojí. Naše tlačítko tedy nebude fungovat. Co nás může zmást je to, že takováto stránka nevyhodí žádnou chybu. Náš JavaScript kód totiž funguje jak má. Jen jsme ho napsali tak, že dělá něco jiného než chceme. JavaScript runtime však nemůže telepaticky nahlížet do našich hlav, aby věděl, co doopravdy chceme. Prostě dělá to, co jsme mu řekli.
 
 Nástraha druhá spočívá v názvech událostí. To jsou obyčejné řetězce, jak je známe už z první lekce. Není vůbec těžké udělat v názvu události překlep, obzvlášť, pokud je název delší, nebo nejsme tolik zdatní v angličtině.
 
@@ -51,6 +51,6 @@ buttonElement.addEventListener('clik', changeTitle);
 buttonElement.addEventListener('mousdown', changeTitle);
 ```
 
-Správně je `click` a `mousedown`. Toto za nás JavaScript runtime bohužel nezkontroluje. Jenoduše k našemu názvu připojí posluchače a už se nestará o to, že událost se špatným názvem nikdy nenastane. Naše stránka pak prostě nebude fungovat a opět také nenastane žádná chyba. Z hlediska runtimu je však jako v předchozím případě všechno v naprostém pořádku.
+Správně je `click` a `mousedown`. Toto za nás JavaScript runtime bohužel nezkontroluje. Jednoduše k našemu názvu připojí posluchače a už se nestará o to, že událost se špatným názvem nikdy nenastane. Naše stránka pak prostě nebude fungovat a opět také nenastane žádná chyba. Z hlediska runtimu je však jako v předchozím případě všechno v naprostém pořádku.
 
 Když tedy pracujete s událostmi, vždy si dobře zkontrolujte, že jste jméno události napsali správně a že také správným způsobem předáváte posluchače.

daweb/js1/funkce-arg-udalosti/zpozdeni-casovace.md

@@ -1,6 +1,6 @@
 ## Zpoždění a časovače
 
-Dobrá zpráva pro začínající programátory je, že psát funkce očekávající jiné funkce na vstupu je spíše pokročilá věc a budeme ji používat až při práci v Reactu. Zatím budeme funkce tohoto ražení používat už hotové, zabuduované přímo v JavaScriptu.
+Dobrá zpráva pro začínající programátory je, že psát funkce očekávající jiné funkce na vstupu je spíše pokročilá věc a budeme ji používat až při práci v Reactu. Zatím budeme funkce tohoto ražení používat už hotové, zabudované přímo v JavaScriptu.
 
 Jedna ze situací, kdy se nám velmi hodí použít funkci jako argument, nastává, když chceme v JavaScriptu provedení nějaké funkce pozdržet nebo její volání pravidelně opakovat. Jako příklad vezměme aplikaci, kde uživatel odpovídá na kvízové otázky. Budeme chtít, aby uživatel měl na každou odpověď nějaký časový limit, například 5 vteřin, po jehož uplynutí vypíšeme „čas vypršel“. Vyrobíme si tedy funkci, která vypisuje naši zprávu, zatím pro jednoduchost přimo do `body`.
 

daweb/js2/api-parametry/cvlekce/e-shop.md

@@ -8,13 +8,13 @@ solutionAccess: protected
 
 Vytvořte aplikaci, která bude simulovat nějaký malý e-shop. E-shop bude mít dvě stránky, na jedné bude seznam produktů a na druhé detail jednoho produktu. Na stránce s produkty bude možné vybrat jeden produkt a přejít na jeho detail.
 
-Toto cvičení je zadáno schválně vágněji a obecněji než jsme zvyklí, abyste měli příležitost se semi zamyslet nad strukturou aplikac.
+Toto cvičení je zadáno schválně vágněji a obecněji než jsme zvyklí, abyste měli příležitost se sami zamyslet nad strukturou aplikace.
 
 1. Rozmyslete si, jaké produkty váš e-shop bude nabízet.
 1. Založte lokální API server. Vytvořte v něm jednu kolekci dat s vašimi produkty. Sami si rozmyslete, jaké vlastnosti budou produkty mít. Nebojte se do dat vložit např. odkazy na obrázek produktu, který můžete sehnat někde na internetu. Server rozeběhněte pomocí `npx apidroid` a ověřte, že se vám data zobrazují v prohlížeči.
 1. Založte si novou Vite/JSX aplikaci. Na úvodní stránce vytvořte hlavní komponentu `HomePage`, která bude zobrazovat seznam produktů. Vytvořte komponentu `Product`, která bude zobrazovat jeden produkt. Zapojte komponentu do stránky.
 1. Každý produkt nechť zobrazuje tlačítko, které vás přesune na stránku `detail.html`. Stránce předejte search parametr s id produktu.
-1. Vytvořte stráku `detail.html` s vlastním JavaScriptem `detail.jsx`. Vytvořte hlavní komponentu `ProductPage`, která zatím bude zobrazovat například pouze nadpis _Detail produktu_. Zapojte komponentu do stránky.
+1. Vytvořte stránku `detail.html` s vlastním JavaScriptem `detail.jsx`. Vytvořte hlavní komponentu `ProductPage`, která zatím bude zobrazovat například pouze nadpis _Detail produktu_. Zapojte komponentu do stránky.
 1. Na začátku souboru načtěte data produktu z API serveru pomocí `fetch`. K tomu bude potřeba si přečíst id produktu ze search parametru. Výsledek uložte do proměnné `product`.
 1. V komponentě `ProductPage` zobrazte detail produktu podle dat ze serveru.
 1. Aplikaci lehce nastylujte, aby vypadala jako e-shop.

daweb/js2/api-parametry/cvlekce/spravce-odkazu.md

@@ -6,12 +6,12 @@ lead: Vytvořte aplikaci, která bude spravovat internetové odkazy.
 solutionAccess: protected
 ---
 
-Při brouzdání internetem by se jistě leckomu mohla hodit aplikace, která bude spravovat různé internetové odkazy, abychom je nemuseli mít v tísíci záložkách v prohlížeči, které se pak bojíme zavřít. Základ takové aplikací si vytvoříme v této úloze.
+Při brouzdání internetem by se jistě leckomu mohla hodit aplikace, která bude spravovat různé internetové odkazy, abychom je nemuseli mít v tisíci záložkách v prohlížeči, které se pak bojíme zavřít. Základ takové aplikací si vytvoříme v této úloze.
 
 Postupujte dle následujících kroků. Naši aplikaci nazveme originálně _Správce odkazů_.
 
 1. Nejdříve vytvořte lokální API server pro náš projekt. Založte si někde na disku složku `odkazy-api` a otevřete ji ve VS Code.
-1. V této složce vytvořte složku `api` a v ní soubor `links.json` a vložte do něj pole několika odkazů, abychom mělik do začátku nějaká data. Rozmyslete si, jak by měl objekt jednoho odkazu vypadat. Určitě budeme chtít evidovat
+1. V této složce vytvořte složku `api` a v ní soubor `links.json` a vložte do něj pole několika odkazů, abychom měli do začátku nějaká data. Rozmyslete si, jak by měl objekt jednoho odkazu vypadat. Určitě budeme chtít evidovat
 
    - URL na kterou odkaz míří, např. `https://www.seznam.cz`,
    - název odkazu, např. `Seznam`,

daweb/js2/api-parametry/search-parametry.md

@@ -11,9 +11,9 @@ Pro předávání informací z jedné stránky na druhou se standardně použív
 https://api.sunrise-sunset.org/json?lat=50&lng=14.5
 ```
 
-Zde vidíme dva search parametry `lat` a `lng` oddělené znakem `&`. Každý z nich má svou hodnotu, kterou vidímze za znakem `=`.
+Zde vidíme dva search parametry `lat` a `lng` oddělené znakem `&`. Každý z nich má svou hodnotu, kterou vidíme za znakem `=`.
 
-Naším hlavím cílem je naučit se search parametry přečíst v naší stránce pomocí JavaScriptu.
+Naším hlavním cílem je naučit se search parametry přečíst v naší stránce pomocí JavaScriptu.
 
 ## Search parametry v JavaScriptu