Váš e-mail je: ${prijmeni}${jmeno}@fit.cvut.cz
`; ``` - ::: diff --git a/js1/retezce-podminky/cvlekce/cena-vstupenky.md b/js1/retezce-podminky/cvlekce/cena-vstupenky.md index 11d4e223..c31d22c3 100644 --- a/js1/retezce-podminky/cvlekce/cena-vstupenky.md +++ b/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 += `Cena lístku je ${cena} Eur.`; ``` ::: diff --git a/js1/retezce-podminky/cvlekce/registrace-na-ockovani.md b/js1/retezce-podminky/cvlekce/registrace-na-ockovani.md index 6df044e5..5793cda5 100644 --- a/js1/retezce-podminky/cvlekce/registrace-na-ockovani.md +++ b/js1/retezce-podminky/cvlekce/registrace-na-ockovani.md @@ -1,6 +1,8 @@ --- 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. @@ -8,8 +10,8 @@ V předchozí lekci jsem vytvářeli stránku pro registraci na očkování. Cht 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 += '
Věk je v pořádku
.'; if (heslo.length <= 8) { - document.body.innerHTML += 'Slabé heslo.'; + document.body.innerHTML += 'Slabé heslo
.'; } else { - document.body.innerHTML += 'Heslo je v pořádku.'; + document.body.innerHTML += 'Heslo je v pořádku
.'; } } else { - document.body.innerHTML += 'Nízký věk.'; + document.body.innerHTML += 'Nízký věk
.'; } ``` diff --git a/js1/retezce-podminky/podminky.md b/js1/retezce-podminky/podminky.md index 081bddb7..ab0fdf34 100644 --- a/js1/retezce-podminky/podminky.md +++ b/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 = 'Pokračujte k platbě
'; + document.body.innerHTML += 'Pokračujte k platbě
'; } else { - document.body.innerHTML = 'Bohužel máte nízký věk
'; + document.body.innerHTML += 'Bohužel máte nízký věk
'; } ``` @@ -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 = 'Pokračujte k platbě
'; + document.body.innerHTML += 'Pokračujte k platbě
'; } else { - document.body.innerHTML = 'Bohužel máte nízký věk
'; + document.body.innerHTML += 'Bohužel máte nízký věk
'; } ``` ```js -if(age>=18){document.body.innerHTML = 'Pokračujte k platbě
';} -else{document.body.innerHTML = 'Bohužel máte nízký věk
';} +if(age>=18){document.body.innerHTML+='Pokračujte k platbě
';} +else{document.body.innerHTML+='Bohužel máte nízký věk
';} ``` 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,15 +44,15 @@ Věřím, že uznáte, že první varianta je mnohem čitelnější než druhá. ```js if (age >= 18) { - document.body.innerHTML = 'Pokračujte k platbě
'; + document.body.innerHTML += 'Pokračujte k platbě
'; } else { - document.body.innerHTML = 'Bohužel máte nízký věk
'; + document.body.innerHTML += 'Bohužel máte nízký věk
'; } ``` -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 @@ -60,7 +60,7 @@ Zatím jsme viděli podmínky se dvěma větvemi. Není ovšem problém mít pod ```js if (age >= 18) { - document.body.innerHTML = 'Pokračujte k platbě
'; + document.body.innerHTML += 'Pokračujte k platbě
'; } ``` @@ -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 = 'Pokračujte k platbě
'; + document.body.innerHTML += 'Pokračujte k platbě
'; } else { const remains = 18 - age; if (remains < 2) { - document.body.innerHTML = 'Ještě si chvíli počkejte
'; + document.body.innerHTML += 'Ještě si chvíli počkejte
'; } else if (remains < 5) { - document.body.innerHTML = 'Co to tady zkoušíš?
'; + document.body.innerHTML += 'Co to tady zkoušíš?
'; } else { - document.body.innerHTML = 'Utíkej za mamkou!
'; + document.body.innerHTML += 'Utíkej za mamkou!
'; } } ``` diff --git a/js1/retezce-podminky/pravdivostni-hodnoty.md b/js1/retezce-podminky/pravdivostni-hodnoty.md index 3825502b..cf8e80c1 100644 --- a/js1/retezce-podminky/pravdivostni-hodnoty.md +++ b/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. +::: diff --git a/js1/retezce-podminky/retezce-metody.md b/js1/retezce-podminky/retezce-metody.md index 4beda851..d9d9e9d6 100644 --- a/js1/retezce-podminky/retezce-metody.md +++ b/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.