Aktualizace sekce o podmínkách

js1/retezce-podminky/cvdoma/fit-email.md

@@ -1,14 +1,16 @@
 ---
 title: FIT e-mail
 demand: 2
+lead: Vytvořte e-mailovou adresu pro studenty FIT ČVUT.
+solutionAccess: lock
 ---
 
 Pokud se přihlásíte jako student například na Fakultu Informačních Technologí ČVUT, bude vám informačním systémem automaticky přidělen e-mail, který se vytvoří z vašeho jména a příjmení. Z vašeho příjmení se vezme pět prvních znaků a z vašeho křestního jména první tři. Výsledek se převede na malá písmena a připojí se doména `fit.cvut.cz`. Pro jméno Jana Procházková tak vznikne adresa `[email protected]`.
 
-1. Vytvořte webovou stránku, která **požádá uživatele** nejdříve o jeho **křestní jméno** a pak **příjmení**, obojí bez diakritiky.
-1. Pomocí metody `trim` zajistěte, že ve jméně ani příjmení nebudou na začátku ani na konci **žádné bílé znaky**.
-1. Pomocí metody `slice` **vyřízněte** ze jména i příjmení **příslušné části**.
-1. Pomocí **interpolace řetězců** sestavte výslednou adresu a vypište ji do stránky.
+1. Vytvořte webovou stránku, která požádá uživatele nejdříve o jeho **křestní jméno** a pak **příjmení**, obojí bez diakritiky.
+1. Pomocí metody `trim` zajistěte, že ve jméně ani příjmení nebudou na začátku ani na konci žádné bílé znaky.
+1. Pomocí metody `slice` vyřízněte ze jména i příjmení příslušné části.
+1. Pomocí interpolace řetězců sestavte výslednou adresu a vypište ji do stránky.
 
 :::solution
 
@@ -21,5 +23,4 @@ const prijmeni = prompt('Zadejte příjmení.').toLowerCase().trim().slice(0, 5)
 
 document.body.innerHTML = `<p>Váš e-mail je: ${prijmeni}${jmeno}@fit.cvut.cz</p>`;
 ```
-
 :::

js1/retezce-podminky/cvlekce/cena-vstupenky.md

@@ -1,18 +1,22 @@
 ---
 title: Cena vstupenky
 demand: 2
+lead: Spočítejte cenu vstupenky do divadla.
+solutionAccess: lock
 ---
 
-Pokusme se o základ jednoduchého rezervačního sestému pro vstupenky do divadla. Založte si webovou stránku s JavaScriptem. Nechte uživatele **zadat jeho věk**. Vytvořte si proměnnou `plnaCena`, do které uložte hodnotu `12`. Vytvořte podmínku, která do proměnné `cena` uloží cenu spočítanou podle věku uživatele **dle následujících pravidel**
+Pokusme se o základ jednoduchého rezervačního sestému pro vstupenky do divadla.
 
-- **0 euro** pro návštěvníky **mladší 6 let**,
-- **65 % ze základní ceny** pro návštěvníky **6 až 26 let** (žák, student),
-- **100 % ze základní ceny** pro návštěvníky **27 až 64 let** (dospělý),
-- **50 % ze základní ceny** pro **ostatní** (senior).
-
-Nezapomeňte na **zaokrouhlování**, ať nám cena vyjde v celých centech.
-
-Nakonec spočtenou cenu vypište s nějakou hezkou zprávou na výstup.
+1. Založte si webovou stránku s JavaScriptem.
+1. Nechte uživatele zadat jeho věk.
+1. Vytvořte si proměnnou `plnaCena`, udávající základní cenu vstupenky a uložte do ní hodnotu `12`.
+1. Vytvořte podmínku, která do proměnné `cena` uloží cenu spočítanou podle věku uživatele dle následujících pravidel:
+  - **0 euro** pro návštěvníky mladší 6 let,
+  - **65 % ze základní ceny** pro návštěvníky 6 až 26 let (žák, student),
+  - **100 % ze základní ceny** pro návštěvníky 27 až 64 let (dospělý),
+  - **50 % ze základní ceny** pro ostatní (senior).
+1. Nezapomeňte na zaokrouhlování, ať nám cena vyjde v celých centech.
+1. Nakonec spočtenou cenu vypište s nějakou hezkou zprávou na výstup.
 
 :::solution
 
@@ -30,7 +34,7 @@ if (age < 6) {
   cena = plnaCena * 0.5;
 }
 cena = Math.ceil(cena);
-document.body.innerHTML = 'Cena lístku je ' + cena + ' Eur.';
+document.body.innerHTML += `<p>Cena lístku je ${cena} Eur.`;
 ```
 
 :::

js1/retezce-podminky/cvlekce/registrace-na-ockovani.md

@@ -1,15 +1,17 @@
 ---
 title: Registrace na očkování
 demand: 2
+lead: Zkontrolujte, zda je uživatel starší 65 let a zda má silné heslo.
+solutionAccess: lock
 ---
 
 V předchozí lekci jsem vytvářeli stránku pro registraci na očkování. Chtěli jsme po uživateli jméno a věk. Nyní budeme chtít, aby uživatel zadal také heslo. To bychom v pozdější verzi aplikaci mohli použít například k přihlášení do systému.
 
 Vytvořte novou stránku, nebo pokračujte ve stránce z předchozí lekce pro registraci na očkování.
 
 1. Nejdříve nechte uživatele zadat všechny hodnoty, tedy **jméno**, **věk** i **heslo**. Uložte si je do dobře pojmenovaných proměnných.
-1. Napište **první podmínku**, ve které zkontrolujte, že **věk uživatele je větší nebo roven 65**. Pokud ano, vypište do stránky „**věk v pořádku**“. Pokud uživateli **není alespoň 65 let**, vypište „**nízký věk**“.
-1. Napište **druhou podmínku**, která zkontroluje, zda je zadané **heslo delší než osm znaků**. Pokud není, vypište „**slabé heslo**“. Heslo se bude kontrolovat pouze v případě, kdy uživatel splnil první podmínku (věk alespoň 65 let).
+1. Napište první podmínku, ve které zkontrolujte, že věk uživatele je větší nebo roven 65. Pokud ano, vypište do stránky „věk v pořádku“. Pokud uživateli není alespoň 65 let, vypište „nízký věk“.
+1. Napište druhou podmínku, která zkontroluje, zda je zadané heslo delší než osm znaků. Pokud není, vypište „slabé heslo“. Heslo se bude kontrolovat pouze v případě, kdy uživatel splnil první podmínku (věk alespoň 65 let).
 
 :::solution
 
@@ -19,14 +21,14 @@ const age = Number(prompt('Zadejte svůj věk:'));
 const heslo = prompt('Zadejte nové heslo:');
 
 if (age >= 65) {
-  document.body.innerHTML += 'Věk je v pořádku.';
+  document.body.innerHTML += '<p>Věk je v pořádku</p>.';
   if (heslo.length <= 8) {
-    document.body.innerHTML += 'Slabé heslo.';
+    document.body.innerHTML += '<p>Slabé heslo</p>.';
   } else {
-    document.body.innerHTML += 'Heslo je v pořádku.';
+    document.body.innerHTML += '<p>Heslo je v pořádku</p>.';
   }
 } else {
-  document.body.innerHTML += 'Nízký věk.';
+  document.body.innerHTML += '<p>Nízký věk</p>.';
 }
 ```
 

js1/retezce-podminky/podminky.md

@@ -8,9 +8,9 @@ Pro jednoduchý příklad si představme e-shop prodávající alkoholické náp
 const age = Number(prompt('Zadejte svůj věk:'));
 
 if (age >= 18) {
-  document.body.innerHTML = '<p>Pokračujte k platbě</p>';
+  document.body.innerHTML += '<p>Pokračujte k platbě</p>';
 } else {
-  document.body.innerHTML = '<p>Bohužel máte nízký věk</p>';
+  document.body.innerHTML += '<p>Bohužel máte nízký věk</p>';
 }
 ```
 
@@ -20,22 +20,22 @@ Toto je příklad velmi jednoduché podmínky se dvěm větvemi. V závorkách p
 
 Pokud nějaké řádky kódu uzavřeme do složených závorek, vytváříme takzvaný blok. JavaScript každý blok chápe jako samostatnou jednotku, která se vykoná za určité situace. Taková situace může být například splnění nebo nesplnění výrazu v podmínce. Později uvidíme další situace, kde se nám budou bloky kódu hodit.
 
-Aby se nám kód dobře četl, odsazujeme řádky uvnitř bloku o kus doprava. V tomto kurzu budeme používat dvě mezery. Pokud máte VS Code nastavené podle naších doporučení, při psaní se vám řádky budou automaticky odsazovat. Stisknutím tabulátoru :kbd[Tab] pak můžete odsazení vložit sami. Stisknutím :kbd[Shift]+:kbd[Tab] jej naopak zrušíte. To se hodí pokud chcete například odsadit velký kus kódu najednou. Stačí jej vybrat myší a stiknout :kbd[Tab] nebo :kbd[Shift]+:kbd[Tab].
+Aby se nám kód dobře četl, odsazujeme řádky uvnitř bloku o kus doprava. V tomto kurzu budeme používat dvě mezery. Pokud máte prostředí VS Code nastavené podle naších doporučení, při psaní se vám řádky budou automaticky odsazovat. Stisknutím tabulátoru :kbd[Tab] pak můžete odsazení vložit sami. Stisknutím :kbd[Shift]+:kbd[Tab] jej naopak zrušíte. To se hodí pokud chcete například odsadit velký kus kódu najednou. Stačí jej vybrat myší a stiknout :kbd[Tab] nebo :kbd[Shift]+:kbd[Tab].
 
 Je dobré mít na paměti, že odsazování a obecně většina bílých znaků, je především pro nás pro lidi, tedy pro čtenáře kódu. Počítači, tedy přesnějí JavaScript runtimu, jsou bílé znaky jedno. Můžeme si je tady dávat kam chceme. Následující dva zápisy jsou z hlediska runtimu zcela stejné.
 
 ```js
 if (age >= 18) {
-  document.body.innerHTML = '<p>Pokračujte k platbě</p>';
+  document.body.innerHTML += '<p>Pokračujte k platbě</p>';
 } else {
-  document.body.innerHTML = '<p>Bohužel máte nízký věk</p>';
+  document.body.innerHTML += '<p>Bohužel máte nízký věk</p>';
 }
 ```
 
 <!-- prettier-ignore -->
 ```js
-if(age>=18){document.body.innerHTML = '<p>Pokračujte k platbě</p>';}
-else{document.body.innerHTML = '<p>Bohužel máte nízký věk</p>';}
+if(age>=18){document.body.innerHTML+='<p>Pokračujte k platbě</p>';}
+else{document.body.innerHTML+='<p>Bohužel máte nízký věk</p>';}
 ```
 
 Věřím, že uznáte, že první varianta je mnohem čitelnější než druhá. Způsobů, jak formátovat kód existuje vícero a můžete se tak účastnit nekonečných hospodských disputací o tom, jestli odsazovat pomocí dvou mezer nebo čtyř, jestli otvírací složenou závorku psát na konec řádku nebo na začátek nového a tak dále.
@@ -44,23 +44,23 @@ Věřím, že uznáte, že první varianta je mnohem čitelnější než druhá.
 ```js
 if (age >= 18)
 {
-    document.body.innerHTML = '<p>Pokračujte k platbě</p>';
+    document.body.innerHTML += '<p>Pokračujte k platbě</p>';
 }
 else
 {
-    document.body.innerHTML = '<p>Bohužel máte nízký věk</p>';
+    document.body.innerHTML += '<p>Bohužel máte nízký věk</p>';
 }
 ```
 
-Nakonec je však důležité hlavně si nějaká pravidla stanovit a ta pak dodržovat. V tomto směru existuje [několik manuálů](https://codeburst.io/5-javascript-style-guides-including-airbnb-github-google-88cbc6b2b7aa), kterým se říká _style guide_. Ty kodifikují určitá pravidla formátování kódu tak, abyste je nemuseli vždy od nuly vymýšlet sami. Ve firmě nebo v programátorském týmu pak stačí říct, že používáme takový nebo onaký style guide, a předejít tak nekonečným diskuzím o tom, kde mají být mezery a kde ne. V tomto kurzu používáme [AirBnB style guide](https://github.com/airbnb/javascript).
+Ať už vzájemné spory dopadnou jakkoliv, nakonec je důležité si nějaká pravidla stanovit a ta pak svorně dodržovat. V tomto směru existuje [několik manuálů](https://codeburst.io/5-javascript-style-guides-including-airbnb-github-google-88cbc6b2b7aa), kterým se říká _style guide_. Ty kodifikují určitá pravidla formátování kódu tak, abyste je nemuseli vždy od nuly vymýšlet sami. Ve firmě nebo v programátorském týmu pak stačí říct, že používáme takový nebo onaký style guide, a předejít tak nekonečným diskuzím o tom, kde mají být mezery a kde ne. V tomto po dohodě kurzu používáme [AirBnB style guide](https://github.com/airbnb/javascript).
 
 ### Podmínky s více větvemi
 
 Zatím jsme viděli podmínky se dvěma větvemi. Není ovšem problém mít podmínku například jen s jednou větví.
 
 ```js
 if (age >= 18) {
-  document.body.innerHTML = '<p>Pokračujte k platbě</p>';
+  document.body.innerHTML += '<p>Pokračujte k platbě</p>';
 }
 ```
 
@@ -106,15 +106,15 @@ Každý blok kódu může obsahovat libovolné příkazy, tedy i další podmín
 
 ```js
 if (age >= 18) {
-  document.body.innerHTML = '<p>Pokračujte k platbě</p>';
+  document.body.innerHTML += '<p>Pokračujte k platbě</p>';
 } else {
   const remains = 18 - age;
   if (remains < 2) {
-    document.body.innerHTML = '<p>Ještě si chvíli počkejte</p>';
+    document.body.innerHTML += '<p>Ještě si chvíli počkejte</p>';
   } else if (remains < 5) {
-    document.body.innerHTML = '<p>Co to tady zkoušíš?</p>';
+    document.body.innerHTML += '<p>Co to tady zkoušíš?</p>';
   } else {
-    document.body.innerHTML = '<p>Utíkej za mamkou!</p>';
+    document.body.innerHTML += '<p>Utíkej za mamkou!</p>';
   }
 }
 ```

js1/retezce-podminky/pravdivostni-hodnoty.md

@@ -1,6 +1,6 @@
 ## Pravdivostní hodnoty
 
-Ve zbývající části lekce se vrhneme na podmínky a umožníme naším programům dělat rozhodnutí. Před tím si ale musíme trošku připravit půdu a ukázat si nový typ hodnoty. Zatím jsme viděli čísla, řetězce a objekty. Nyní přichází takzvané :term{cs="pravdivostní hodnoty" en="boolean values"}. Čísel a řetězců je nekonečně mnoho, pravdivostní hodnoty jsou však jen dvě: `true` a `false`. Používají se k tomu, abychom vyjádřili, zda je něco pravda nebo není. Například:
+Ve zbývající části lekce se vrhneme na takzvané __podmínky__ a umožníme tím naším programům dělat rozhodnutí. Před tím si ale musíme trošku připravit půdu a ukázat si nový typ hodnoty. Zatím jsme viděli čísla, řetězce a objekty. Nyní přichází takzvané :term{cs="pravdivostní hodnoty" en="boolean values"}. Čísel a řetězců je nekonečně mnoho, pravdivostní hodnoty jsou však jen dvě: `true` a `false`. Používají se k tomu, abychom vyjádřili, zda je něco pravda nebo není. Například:
 
 ```js
 const pristupPovolen = false;
@@ -10,21 +10,16 @@ const mobilniProhlizec = true;
 
 Abychom mohli v našich programech činit rozhodnutí, budeme také potřebovat výrazy vracející pravdivostní hodnoty. Ty můžeme sestavit pomocí takzvaných :term{cs="porovnávacích operátorů" en="comparison operators"}.
 
-```jscon
-> const age = 21
-> age > 18
-true
-> age > 21
-false
-> age >= 21
-true
-> age === 21
-true
-> age !== 21
-false
+```js
+const age = 21;
+age > 18 // ⟶ true
+age > 21 // ⟶ false
+age >= 21 // ⟶ true
+age === 21 // ⟶ true
+age !== 21 // ⟶ false
 ```
 
-Kompletní sada porovnávacích operátorů vypadá takto.
+Kompletní sada porovnávacích operátorů vypadá takto:
 
 | Operátor  | Popis            |
 | --------- | ---------------- |
@@ -35,4 +30,6 @@ Kompletní sada porovnávacích operátorů vypadá takto.
 | **`===`** | rovno            |
 | **`!==`** | nerovno          |
 
-V JavaScriptu můžete narazit i na operátory `==` a `!=`. Ty však nebudeme nikdy používat, protože v některých případech mohou zanést do našeho programu nechtěné chyby.
+:::warn
+V JavaScriptu můžete narazit i na operátory `==` a `!=`. Ty však nebudeme nikdy používat! V některých případech mohou zanést do našeho programu nechtěné chyby a zmatky.
+:::

js1/retezce-podminky/retezce-metody.md

@@ -35,20 +35,20 @@ Na řetězcích máme v JavaScriptu spoustu metod, které nám umožňují prov
 : Vyhledá řetězec zadaný v parametru `value` uvnitř řetězce, na kterém tuto metodu voláme. Vrací pozici prvního výskytu nebo -1 pokud se obsah `value` v řetězci nenachází.
 
 ```js
-'popokatepetl'.indexOf('kat') // 4
-'popokatepetl'.indexOf('po') // 0
-'popokatepetl'.indexOf('t') // 6
-'popokatepetl'.indexOf('katka') // -1
+'popokatepetl'.indexOf('kat') // ⟶ 4
+'popokatepetl'.indexOf('po') // ⟶ 0
+'popokatepetl'.indexOf('t') // ⟶ 6
+'popokatepetl'.indexOf('katka') // ⟶ -1
 ```
 
 `padStart(targetLength, padString)`
 : Prodlouží řetězec na zadanou délku tak, že na začátek přidá opakování řetězce `padString`. Hodí se na zarovnávání nebo na formátování čísel.
 
 ```js
-'12'.padStart(4, '0') // '0012'
-'12'.padStart(4, ' ') // '  12'
-'12'.padStart(3, ' ') // ' 12'
-'12'.padStart(2, ' ') // '12'
+'12'.padStart(4, '0') // ⟶ '0012'
+'12'.padStart(4, ' ') // ⟶ '  12'
+'12'.padStart(3, ' ') // ⟶ ' 12'
+'12'.padStart(2, ' ') // ⟶ '12'
 ```
 
 Možná vám nyní vrtá hlavou, jestli funkce `Math.round` nebo `Math.floor` nejsou náhodou metody, když používají tečkovou notaci. Je to skutečně tak. `Math` je přepřipravený JavaScriptový objekt, který sdružuje metody pro matematické výpočty. I ostatní předpřípravené objekty, jako `window` nebo `document` mají své užitečné metody. Některé z nich potkáme hned v následující lekci.