Úplně vyhodit práci s konzolí a dělat výstup pouze pomocí innerHTML

js1/uvod-do-js/cteni-na-doma.md

@@ -8,9 +8,9 @@ Podobně jako má čeština :i[Pravidla českého pravopisu], má i JavaScript s
 
 Ve verzi ES5 se například proměnné nevytvářejí pomocí `let` a `const` nýbrž pomocí `var`. Náš příklad s výplatou by tedy ve verzi ES5 vypadal takto.
 
-```jscon
-> var celkem = 1 + 2 + 4 + 1 + 6
-> var prumer = celkem / 5
+```js
+var sazba = 500;
+var vyplata = 8 * 21 * sazba;
 ```
 
 Proměnné vytvořené pomocí `var` se dají měnit podobně jako proměnné vytvořené pomocí `let`. Platí pro ně ovšem trochu jiná pravidla a ta jsou právě často na překážku dobrému programátorskému stylu. To je důvod, proč toto klíčové slovo bylo v ES6 nahrazeno klíčovými slovy `let` a `const`. Klíčové slovo `var` už je tedy zastaralé a není žádný důvod jej používat. My v tomto kurzu budeme striktně používat `let` a `const`. Pokud v nějakém starším online kurzu nebo knize narazíte na `var`, použíjte místo něj vždy `let` nebo `const`.

js1/uvod-do-js/cvdoma/hazeni-kostkou.md

@@ -1,6 +1,8 @@
 ---
 title: Házení kostkou
 demand: 3
+lead: Vymyslete funkci, která simuluje hod kostkou.
+solutionAccess: lock
 ---
 
 Vymyslete, jak použít funkci `Math.random` a různé zaokrouhlovací funkce probírané v této lekci k simulování hodu klasickou šestistěnnou kostkou. S použitím vhodných funkcí sestavte výraz, který vygeneruje náhodné celé číslo **mezi 1 a 6**.

js1/uvod-do-js/cvdoma/prijem-divadla.md

@@ -1,6 +1,8 @@
 ---
 title: Příjem divadla
 demand: 2
+lead: Spočítejte příjem divadla ze vstupného.
+solutionAccess: lock
 ---
 
 1. Jeden lístek do divadla :i[Pěst na oko] stojí **12 euro**. Spočítejte měsíční příjem divadla ze vstupného, přichází-li průměrně **174 návštěvníků** na jedno představení a divadlo hraje **15 představení** měsíčně. Uložte výsledek do proměnné `prijem`.

js1/uvod-do-js/cvdoma/schopnejsi-zaokrouhlovani-2.md

@@ -1,6 +1,7 @@
 ---
 title: Schopnější zaokrouhlování 2
 demand: 3
+lead: Zaokrouhlete číslo na zadaný počet cifer.
 ---
 
 Představte si, že máme v proměnné se jménem `x` uloženo nějaké desetinné číslo a v proměnné `k` údaj na kolik cifer chceme zaokrouhlovat. Například `k=3` znamená, že chceme zaokrouhlit na tisíciny. Naopak `k=-2` znamená, že zaokrouhlujeme na celé stovky. Hodnota `k=0` tedy znamená běžné zaokrouhlování na jednotky.

js1/uvod-do-js/cvdoma/schopnejsi-zaokrouhlovani.md

@@ -1,6 +1,8 @@
 ---
 title: Schopnější zaokrouhlování
 demand: 3
+lead: Zaokrouhlete číslo na desetiny, setiny a celé stovky.
+solutionAccess: lock
 ---
 
 Mějme v proměnné `x` uloženo nějaké desetinné číslo. Pomocí funkce `Math.round` jej můžeme zaokrouhlit na celá čísla takto.

js1/uvod-do-js/cvlekce/delka-filmu.md

@@ -1,6 +1,8 @@
 ---
 title: Délka filmu
 demand: 2
+lead: Spočítejte, kolik hodin a minut trvá film Pán prstenů.
+solutionAccess: lock
 ---
 
 V programu kin se často uvádí délka filmu v minutách. Například rozšířená verze filmu :i[Pán prstenů: Dvě věže] trvá 223 minut. My bychom ovšem délku filmu raději věděli v hodinách a minutách. Za použití funkcí a operátorů z této lekce spočítejte, kolik hodin a minut trvá film :i[Pán prstenů: Dvě věže].
@@ -18,5 +20,4 @@ Math.floor(223 / 60);
 ```js
 223 % 60;
 ```
-
 :::

js1/uvod-do-js/cvlekce/email.md

@@ -1,16 +1,16 @@
 ---
 title: E-mail
 demand: 1
+lead: Vytvořte řetězec obsahující vaši e-mailovou adresu.
+solutionAccess: lock
 ---
 
-Vytvořte řetězec obsahující vaši e-mailovou adresu.
-
-1. Sestavte e-mailovou adresu tak, že sečtete dohromady vaše křestní jméno, znak tečka, vaše příjmení a koncovku `@mujmail.com`.
+Sestavte e-mailovou adresu tak, že sečtete dohromady vaše křestní jméno, znak tečka, vaše příjmení a koncovku `@mujmail.com`.
 
 :::solution
 
 ```js
-'Tom' + '.' + 'Jedno' + '@mujmail.com';
+'Tomáš' + '.' + 'Marný' + '@mujmail.com';
 ```
 
 :::

js1/uvod-do-js/cvlekce/nahodna-cisla.md

@@ -1,6 +1,8 @@
 ---
 title: Náhodná čísla
 demand: 1
+lead: Zobrazte na stránce náhodné číslo.
+solutionAccess: lock
 ---
 
 Založte si JavaScriptový program a pomocí `document.body.innerHTML` a funkce `Math.random` zobrazte na stránce náhodné číslo. Zkuste stránku několikrát po sobě obnovit a ověřte si, že pokaždé obdržíte jiné číslo.

js1/uvod-do-js/cvlekce/prevod-meny.md

@@ -1,8 +1,11 @@
 ---
 title: Převod měny
 demand: 2
+lead: Spočítejte, kolik si vyděláte v českých korunách.
+solutionAccess: lock
 ---
 
+1. Založte si novou prázdnou stránku s JavaScriptovým programem.
 1. Dejme tomu, že si jako programátoři vyděláváte 20 euro na hodinu. Uložte tuto hodnotu do proměnné `wageInEur`.
 1. Spočítejte, kolik je vaše hodinová mzda v českých korunách, jestliže kurz eura je `26.58` Kč. Výsledek zaokrouhlete na celé koruny a uložte do proměnné :var[wageInCzk].
 1. Vypište obsah proměnné :var[wageInCzk] do webové stránky tak, aby na stránce byl nadpis `h1` s obsahem:

js1/uvod-do-js/cvlekce/ultramaraton.md

@@ -1,11 +1,15 @@
 ---
 title: Ultramaraton
 demand: 2
+lead: Spočítejte, v kolik hodin skončí ultramaratonský závod.
+solutionAccess: lock
 ---
 
 Představte si, že jste pořadatelé ultramaratonského závodu. Závod začíná ve **tři hodiny odpoledne**, což ve 24hodinovém formátu zapíšeme jako **15**. Nejlepší běžec zvládne vaši brutální trasu za **10 hodin**. Doběhne tedy **v jednu hodinu ráno**, v našem formátu zapsáno jako **1**.
 
-Založte si JavaScriptový program a uložte čas startu závodu do proměnné `start`. Do proměnné `delka` uložte délku závodu pro nějakého běžce. Klidně může být pomalejší než náš šampion. Do proměnné `konec` spočítejte, v kolik hodin závod pro našeho běžce skončí a vypište její obsah do stránky. Vyzkoušejte různé délky a ověřte, že váš postup funguje.
+1. Založte si JavaScriptový program a uložte čas startu závodu do proměnné `start`.
+1. Do proměnné `delka` uložte délku závodu pro nějakého běžce. Klidně může být pomalejší než náš šampion.
+1. Do proměnné `konec` spočítejte, v kolik hodin závod pro našeho běžce skončí a vypište její obsah do stránky. Vyzkoušejte různé délky a ověřte, že váš postup funguje.
 
 :::solution
 

js1/uvod-do-js/cvlekce/vyplata.md

@@ -1,23 +1,25 @@
 ---
 title: Výplata
 demand: 1
+lead: Pomocí jednoduché aritmetiky spočítejte, kolik si jako programátor vyděláte.
+solutionAccess: lock
 ---
 
-1. Spočítejte svůj měsíční příjem, víte-li, že pracujete 7 hodin denně se mzdou 265 Kč na hodinu. Řekněme, že měsíc má 21 pracovních dní.
+1. Založte si novou prázdnou stránku s JavaScriptovým programem.
+1. V programu spočítejte svůj měsíční příjem, víte-li, že pracujete 7 hodin denně se mzdou 320 Kč na hodinu. Řekněme, že měsíc má 21 pracovních dní.
 1. Pokud pracujete na živnostenský list, můžete si odečíst 60 % příjmů jako paušál a ze zbytku zaplatíte 15% daň. Spočítejte, jak velkou daň zaplatíte ze své výplaty. Pomocí funkce `Math.floor` zaokrouhlete výsledek dolů na celé koruny.
 
 :::solution
 
 #### Měsíční příjem
 
 ```js
-21 * 7 * 265;
+document.body.innerHTML += 21 * 7 * 320;
 ```
 
 #### Daň
 
 ```js
-Math.floor(21 * 7 * 265 * (1 - 0.6) * 0.15);
+document.body.innerHTML += Math.floor(21 * 7 * 265 * (1 - 0.6) * 0.15);
 ```
-
 :::

js1/uvod-do-js/entry.yml

@@ -2,14 +2,14 @@ title: Úvod do JavaScriptu
 lead: Seznámíme se s jazykem JavaScript a ukážeme si, jak se v JavaScriptu píší jednoduché programy.
 sections:
   - javascript
+  - prvni-program
   - hodnoty-operatory
   - funkce
   - cv-vyrazy-funkce
-  - prvni-program
   - promenne
   - vypis-do-stranky
   - promenne-pravidla
   - cv-programy-promenne
   - shrnuti
   - cv-ulozky
-  - cteni-na-doma
+  - cteni-na-doma

js1/uvod-do-js/funkce.md

@@ -2,13 +2,12 @@
 
 Pouze s hodnotami a operátory bychom se v programování daleko nedostali. Často budeme potřeboval vykonat složitější operaci než jen matematický výpočet. Pokud nějakou takovou složitější operaci programátoři používají často, šance je, že pro ni existuje :term{cs="funkce" en="function"}.
 
-Funkce je kousek programu řešící nějakou konkrétní úlohu. Většinou jde o úlohu, kterou řešime často a opakovaně. Příkladem může být například zaokrouhlování desetinných čísel na celá čísla. To je operace, která se hodí skoro ve všech výpočtech, a bylo by zbyteční ji programovat neustále znova. V JavaScriptu proto máme k dispozici funkci jménem `Math.round`.
+Funkce je kousek programu řešící nějakou konkrétní úlohu. Většinou jde o úlohu, kterou řešime často a opakovaně. Příkladem může být například zaokrouhlování desetinných čísel na celá čísla. To je operace, která se hodí skoro ve všech výpočtech, a bylo by zbytečné ji programovat neustále znova. V JavaScriptu proto máme k dispozici funkci jménem `Math.round`.
 
 Pokud chceme nějakou funkci použít, uděláme to tak, že napíšeme její jméno a do kulatých závorek vložíme hodnotu, se kterou má funkce pracovat. Takto například použijeme naši funci `Math.round`.
 
-```jscon
-> Math.round(3.14)
-3
+```js
+document.body.innerHTML += Math.round(3.14);
 ```
 
 Hodnotě uvnitř kulatých závorek říkáme :term{cs="vstup" en="input"} funkce. Spuštění funkce se mezi programátory říká :term{cs="volání" en="call"}. Jakmile funkce dokončí operaci, :term{cs="vrátí" en="return"} nám takzvaný :term{cs="výstup" en="output"}. V programátorském žargonu tedy říkáme, že když **zavoláme** funkci s nějakým **vstupem**, ona nám **vrátí výstup**.
@@ -25,9 +24,8 @@ Můžeme si představovat, že funkce je něco jako stánek s rychlým občerstv
 
 Volání funkce je také výraz, podobně jako operace s hodnotami a proměnnými. Můžeme jej tedy použít uvnitř libovolného jiného výrazu. Navíc vstup pro funkci lze také vytvořit pomocí výrazu. Nabízí se tedy mnoho způsobů, jak skládat složitější výpočty, jako například tento.
 
-```jscon
-> 70 % Math.round(100 / 3)
-4
+```js
+document.body.innerHTML += 70 % Math.round(100 / 3);
 ```
 
 ### Užitečné funkce
@@ -36,35 +34,26 @@ JavaScript obsahuje spousty a spousty funkcí, díky kterým lze provádět mnoh
 
 Pokud bychom místo klasického zaokrouhlování chtěli zaokrouhlovat vždy dolů nebo vždy nahoru, můžeme použít funkce `Math.floor` a `Math.ceil`.
 
-```jscon
-> Math.floor(3.9)
-3
-> Math.ceil(3.1)
-4
+```js
+document.body.innerHTML += Math.floor(3.9);
+```
+
+```js
+document.body.innerHTML += Math.ceil(3.1);
 ```
 
 Jednou z funkcí, se kterými si užijeme více zábavy, je `Math.random`. Ta při každém zavolání vrátí náhodné desetinné číslo mezi 0 a 1.
 
-```jscon
-> Math.random()
-0.5533144240115158
-> Math.random()
-0.30269146855422213
-> Math.random()
-0.8730206392247666
+```js
+document.body.innerHTML += Math.random();
 ```
 
 Všimněte si, že tato funkce nemá žádný vstup. I takové funkce jsou možné a nejsou žádnou velkou výjimkou.
 
 Chytrým použitím zaokrouhlování a trochou matematiky můžeme pomocí `Math.random` generovat náhodná celá čísla například v rozmezí 0 až 9.
 
-```jscon
-> Math.floor(Math.random() * 10)
-8
-> Math.floor(Math.random() * 10)
-2
-> Math.floor(Math.random() * 10)
-5
+```js
+document.body.innerHTML += Math.floor(Math.random() * 10);
 ```
 
 To se nám může hodit pokud programujeme nějakou hru nebo třeba chceme-li vygenerovat náhodná testovací data.

js1/uvod-do-js/hodnoty-operatory.md

@@ -4,77 +4,94 @@
 
 ### Čísla a aritmetika
 
-Každý počítač je ve svojí nejniternější podstatě jen hrozně rychlá kalkulačka. Proto je přirozené, že si v JavaScriptu nejdříve vyzkoušíme počítání. Počítání s čísly se odborně říká aritmetika. Nemusíte se vůbec bát, do žádné tvrdé matematiky se určitě pouštět nebudeme. Zcela nám postačí znalosti nabyté ve školce. Do JS konzole ve vašem prohlížeči můžete rovnou zkusit napsat následující příkazy a sledovat jejich výsledky.
-
-```jscon
-> 12 + 5
-17
-> 12 - 5
-7
-> 12 * 5
-60
-> 12 / 5
-2.4
+Každý počítač je ve své nejniternější podstatě jen ohromně rychlá kalkulačka. Proto je přirozené, že si v JavaScriptu nejdříve vyzkoušíme počítání. Počítání s čísly se odborně říká _aritmetika_. Nemusíte se vůbec bát, do žádné tvrdé matematiky se určitě pouštět nebudeme. Zcela nám postačí znalosti nabyté ve školce. Do vašeho souboru `index.js` napište
+
+```js
+document.body.innerHTML += 12 + 5;
+```
+
+Všimněte si, že opět používáme náš tajemný příkad pro výstup do stránky. Budeme jej v následujících lekcích hojně používat, abychom si mohli výsledky našich programů snadno prohlédnout. Když nyní obnovíte stránku v prohlížeči, měli byste vidět číslo 17, tedy výsledek sčítání 12 a 5. Můžete si vyzkoušet i jiné operace:
+
+```js
+document.body.innerHTML += 12 - 5;
 ```
 
-Vždy, když v konzoli napíšete příkaz a stisknete klávesu :kbd[Enter], pošlete tím JavaScriptovému runtimu uvnitř prohlížeče příkaz. Runtime tento příkaz vykoná a ihned vám odpoví výsledek. Zatím jsme sice nic závratného nespočítali, použili jsme však základní JavaScriptové hodnoty a operátory. Hodnoty jsou v našem případě čísla. Později uvidíme další druhy hodnot, které na kalkulačce nepotkáte.
+```js
+document.body.innerHTML += 12 * 5;
+```
+
+```js
+document.body.innerHTML += 12 / 5;
+```
+
+Vždy, když náš program změníme, je potřeba udělat refresh stránký v prohlížeči, aby se program spustil znovu.
+
+Zatím jsme sice nic závratného nespočítali, použili jsme však základní JavaScriptové hodnoty a operátory. Hodnoty jsou v našem případě _čísla_. Později uvidíme další druhy hodnot, které na kalkulačce nepotkáte.
 
 :::warn
 Pozor na to, že ve všech programovacích jazycích (s výjimkou MS Excel) se desetinná čísla píší s tečkou, nikoliv s čárkou.
 :::
 
-Operátory jsou v našem případě sčítání, odčítání, násobení a dělení. Je potřeba si zvyknout na to, jakými symboly se JavaScriptu zapisují. Možná budete muset malinko prohledat klávesnici, než najdete například dopředné lomítko nebo hvězdičku.
+Operátory jsou v našem případě _sčítání_, _odčítání_, _násobení_ a _dělení_. Je potřeba si zvyknout na to, jakými symboly se JavaScriptu zapisují. Možná budete muset malinko prohledat klávesnici, než najdete například dopředné lomítko nebo hvězdičku.
 
-Kromě výše zmíněných nabízí JavaScript jeden zajímavý operátor, který jste možná ještě nepotkali. Jmenuje se zbytek po dělení.
+Kromě výše zmíněných nabízí JavaScript jeden zajímavý operátor, který jste možná ještě nepotkali. Jmenuje se _zbytek po dělení_.
 
-```jscon
-> 12 % 5
-2
-> 11 % 2
-1
+```js
+document.body.innerHTML += 12 % 5;
 ```
 
-Pro zbytek po dělení se překvapivě používá znak procenta, přestože s procenty tento operátor nemá nic společného. Jeho výsledek je zbytek po celočíselném dělení prvního čísla druhým číslem. Zbytek po dělení můžeme použít například ke zjištění, zde ja číslo sudé nebo liché. Sudá čísla totiž mají po dělení dvěma zbytek 0. Později uvidíme užitečnější a také zajímavější použití této operace.
+Pro zbytek po dělení se překvapivě používá znak procenta, přestože s procenty tento operátor nemá nic společného. Jeho výsledek je zbytek po celočíselném dělení prvního čísla druhým číslem. Zbytek po dělení můžeme použít například ke zjištění, zde ja číslo sudé nebo liché. Sudá čísla totiž mají po dělení dvěma zbytek 0. Také se nám tento operátor bude hodit pro práci s časem a daty.
 
 Z operátorů a hodnot můžete samozřejmě stavět mnohem složitější konstrukce třeba i s použitím závorek.
 
-```jscon
-> 5 * (3 + 7) % 9
-5
+```js
+document.body.innerHTML += 5 * (3 + 7) % 9;
 ```
 
-Konstrukcím vytvořeným z hodnot a operátorů se odborně říká :term{cs="výrazy" en="expressions"}. Pokud necháme JavaScript runtime spočítat výsledek výrazu, získáme tak jeho hodnotu. Každý výraz tedy má svoji hodnotu a JavaScript runtime nám ji rád sdělí, když mu výraz pošleme v konzoli. Je dobré zde zmínit, že ne všechny konstrukce v JavaScriptu jsou výrazy. To se však ukáže jako důležité až později.
+Konstrukcím vytvořeným z hodnot a operátorů se odborně říká :term{cs="výrazy" en="expressions"}. Pokud necháme JavaScript runtime spočítat výsledek výrazu, získáme tak jeho hodnotu. Každý výraz tedy má svoji hodnotu a můžeme si ji vždy vypsat do stránky, abychom ji viděli. Je dobré zde zmínit, že ne všechny konstrukce v JavaScriptu jsou výrazy. To se však ukáže jako důležité až později.
 
 ### Řetězce
 
-Pokud chceme v JavaScriptu pracovat s textem, použijeme hodnotu, které se říká :term{cs="řetězec" en="string"}. Můžeme pak psát například toto.
-
-```jscon
-> 'Pavel'
-"Pavel"
-> 'Prací prášek'
-"Prací prášek"
-> "I'am awesome"
-"I'am awesome"
-> 'Řekl: "ahoj"'
-"Řekl: "ahoj""
-> '<h1 class="title">Digitální akademie Web</h1>'
-"<h1 class="title">Digitální akademie Web</h1>"
+Pokud chceme v JavaScriptu pracovat s textem, použijeme hodnotu, které se říká :term{cs="řetězec" en="string"}. Můžeme pak psát například:
+
+```js
+document.body.innerHTML += 'Pavel';
+```
+
+```js
+document.body.innerHTML += 'Prací prášek';
+```
+
+```js
+document.body.innerHTML += "I'am awesome";
+```
+
+```js
+document.body.innerHTML += 'Řekl: "ahoj"';
+```
+
+```js
+document.body.innerHTML += '<h1 class="title">Digitální akademie Web</h1>';
 ```
 
 Textové řetězce vždy uzavíráme do uvozovek. V JavaScriptu můžete používat jak apostrofy (jednoduché uvozovky), tak dvojité uvozovky. Z hlediska funkčnosti programu na druhu použitých uvozovek nezáleží. Můžete si tak pomaličku začít budovat svůj programátorský styl a používat ty uvozovky, které se vám líbí. Občas se dvojité uvozovky hodí, pokud chceme mít uvnitř řetězce například apostrof. Pro tento případ si však později ukážeme obecnější techniku.
 
-Textové řetězce jdou sčítat podobně jako čísla, můžete tedy psát například následující.
-
-```jscon
-> 'Digitální akademie' + ' Web'
-"Digitální akademie Web"
-> 'Digitální akademie' + ' ' + 'Web'
-"Digitální akademie Web"
-> 'Digitální akademie' + ''
-"Digitální akademie"
-> '<h1>' + 'Digitální akademie Web' + '</h1>'
-"<h1>Digitální akademie Web</h1>"
+Textové řetězce jdou sčítat podobně jako čísla, můžete tedy psát například následující:
+
+```js
+document.body.innerHTML += 'Digitální akademie' + ' Web';
+```
+
+```js
+document.body.innerHTML += 'Digitální akademie' + ' ' + 'Web';
+```
+
+```js
+document.body.innerHTML += 'Digitální akademie Web' + '';
+```
+
+```js
+document.body.innerHTML += '<h1>' + 'Digitální akademie Web' + '</h1>';
 ```
 
 Všimněte si v druhém příkladu řetězce, který obsahuje pouze mezeru. V třetím případě dokonce vidíme řetězec, který neobsahuje vůbec nic. To je takzvaný :term{cs="prázdný řetězec" en="empty string"}. Chová se podobně jako nula při sčítání čísel a bude se nám pozdějí hodit.

js1/uvod-do-js/javascript.md

@@ -10,4 +10,3 @@ Než se naplno pustíme do JavaScriptu, je dobré si pořádně ujasnit terminol
 
 ::fig[JavaScript runtime]{src=assets/runtime.jpg}
 
-Velkou výhodu máme do začátku v tom, že každý webový prohlížeč v sobě obsahuje JavaScript runtime. Naše první JavaScriptové příkazy tak můžeme psát rovnou v prohlížeči. Stačí otevřít takzvané _Developer Tools_.