From 9e6a94d082f16022bcfc0786cbd1ab5ea5d5dd49 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Martin=20Podlouck=C3=BD?= Date: Tue, 12 Sep 2023 08:56:49 +0200 Subject: [PATCH 1/5] =?UTF-8?q?=C3=9Apln=C4=9B=20vyhodit=20pr=C3=A1ci=20s?= =?UTF-8?q?=20konzol=C3=AD=20a=20d=C4=9Blat=20v=C3=BDstup=20pouze=20pomoc?= =?UTF-8?q?=C3=AD=20innerHTML?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js1/uvod-do-js/cteni-na-doma.md | 6 +- js1/uvod-do-js/cvdoma/hazeni-kostkou.md | 2 + js1/uvod-do-js/cvdoma/prijem-divadla.md | 2 + .../cvdoma/schopnejsi-zaokrouhlovani-2.md | 1 + .../cvdoma/schopnejsi-zaokrouhlovani.md | 2 + js1/uvod-do-js/cvlekce/delka-filmu.md | 3 +- js1/uvod-do-js/cvlekce/email.md | 8 +- js1/uvod-do-js/cvlekce/nahodna-cisla.md | 2 + js1/uvod-do-js/cvlekce/prevod-meny.md | 3 + js1/uvod-do-js/cvlekce/ultramaraton.md | 6 +- js1/uvod-do-js/cvlekce/vyplata.md | 10 +- js1/uvod-do-js/entry.yml | 4 +- js1/uvod-do-js/funkce.md | 41 +++---- js1/uvod-do-js/hodnoty-operatory.md | 113 ++++++++++-------- js1/uvod-do-js/javascript.md | 1 - js1/uvod-do-js/promenne.md | 26 ++-- js1/uvod-do-js/prvni-program.md | 15 ++- js1/uvod-do-js/vypis-do-stranky.md | 21 ++-- 18 files changed, 141 insertions(+), 125 deletions(-) diff --git a/js1/uvod-do-js/cteni-na-doma.md b/js1/uvod-do-js/cteni-na-doma.md index faa9e560..b2c85aa1 100644 --- a/js1/uvod-do-js/cteni-na-doma.md +++ b/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`. diff --git a/js1/uvod-do-js/cvdoma/hazeni-kostkou.md b/js1/uvod-do-js/cvdoma/hazeni-kostkou.md index 1ef4f227..da5e62d9 100644 --- a/js1/uvod-do-js/cvdoma/hazeni-kostkou.md +++ b/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**. diff --git a/js1/uvod-do-js/cvdoma/prijem-divadla.md b/js1/uvod-do-js/cvdoma/prijem-divadla.md index cf79c28f..88a7222b 100644 --- a/js1/uvod-do-js/cvdoma/prijem-divadla.md +++ b/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`. diff --git a/js1/uvod-do-js/cvdoma/schopnejsi-zaokrouhlovani-2.md b/js1/uvod-do-js/cvdoma/schopnejsi-zaokrouhlovani-2.md index c21f8765..09d4b2b7 100644 --- a/js1/uvod-do-js/cvdoma/schopnejsi-zaokrouhlovani-2.md +++ b/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. diff --git a/js1/uvod-do-js/cvdoma/schopnejsi-zaokrouhlovani.md b/js1/uvod-do-js/cvdoma/schopnejsi-zaokrouhlovani.md index 90c8caec..1b14dd4b 100644 --- a/js1/uvod-do-js/cvdoma/schopnejsi-zaokrouhlovani.md +++ b/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. diff --git a/js1/uvod-do-js/cvlekce/delka-filmu.md b/js1/uvod-do-js/cvlekce/delka-filmu.md index 479e11a6..48b5f1dc 100644 --- a/js1/uvod-do-js/cvlekce/delka-filmu.md +++ b/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; ``` - ::: diff --git a/js1/uvod-do-js/cvlekce/email.md b/js1/uvod-do-js/cvlekce/email.md index c4e18228..5a59ee14 100644 --- a/js1/uvod-do-js/cvlekce/email.md +++ b/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'; ``` ::: diff --git a/js1/uvod-do-js/cvlekce/nahodna-cisla.md b/js1/uvod-do-js/cvlekce/nahodna-cisla.md index 5c663570..d1d25e17 100644 --- a/js1/uvod-do-js/cvlekce/nahodna-cisla.md +++ b/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. diff --git a/js1/uvod-do-js/cvlekce/prevod-meny.md b/js1/uvod-do-js/cvlekce/prevod-meny.md index 5cb2f56d..8e3d8244 100644 --- a/js1/uvod-do-js/cvlekce/prevod-meny.md +++ b/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: diff --git a/js1/uvod-do-js/cvlekce/ultramaraton.md b/js1/uvod-do-js/cvlekce/ultramaraton.md index 46dfbee0..b42bb4ea 100644 --- a/js1/uvod-do-js/cvlekce/ultramaraton.md +++ b/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 diff --git a/js1/uvod-do-js/cvlekce/vyplata.md b/js1/uvod-do-js/cvlekce/vyplata.md index 84fe9ae5..80361235 100644 --- a/js1/uvod-do-js/cvlekce/vyplata.md +++ b/js1/uvod-do-js/cvlekce/vyplata.md @@ -1,9 +1,12 @@ --- 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 @@ -11,13 +14,12 @@ demand: 1 #### 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); ``` - ::: diff --git a/js1/uvod-do-js/entry.yml b/js1/uvod-do-js/entry.yml index 8ddfdea4..904425c1 100644 --- a/js1/uvod-do-js/entry.yml +++ b/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 \ No newline at end of file + - cteni-na-doma diff --git a/js1/uvod-do-js/funkce.md b/js1/uvod-do-js/funkce.md index fe4a14c6..43ce3962 100644 --- a/js1/uvod-do-js/funkce.md +++ b/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. diff --git a/js1/uvod-do-js/hodnoty-operatory.md b/js1/uvod-do-js/hodnoty-operatory.md index 29e6c2f0..411da0fc 100644 --- a/js1/uvod-do-js/hodnoty-operatory.md +++ b/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"" -> '

Digitální akademie Web

' -"

Digitální akademie Web

" +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 += '

Digitální akademie Web

'; ``` 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" -> '

' + 'Digitální akademie Web' + '

' -"

Digitální akademie Web

" +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 += '

' + 'Digitální akademie Web' + '

'; ``` 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. diff --git a/js1/uvod-do-js/javascript.md b/js1/uvod-do-js/javascript.md index f8731d82..65ed2664 100644 --- a/js1/uvod-do-js/javascript.md +++ b/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_. diff --git a/js1/uvod-do-js/promenne.md b/js1/uvod-do-js/promenne.md index a42a397a..4d453da6 100644 --- a/js1/uvod-do-js/promenne.md +++ b/js1/uvod-do-js/promenne.md @@ -1,18 +1,18 @@ ## Proměnné -Při složitějších operacích a výpočtech často vyvstane potřeba si nějaký mezivýpočet uložit pro pozdější použití. K tomu nám poslouží takzvané :term{cs="proměnné" en="variables"}. Proměnná je jakási pojmenovaná krabička nebo šuplík, do kterého si můžeme uložit nějakou hodnotu, abychom ji neztratili a mohli ji používat v dalších výpočtech. Abychom si procvičili proměnné a zajímavé operátory, zkusíme vyřešit následující úlohu. +V této části se konečně dostaneme k tomu, že naše programy budou mít více než jeden řádek. Při složitějších operacích a výpočtech totiž často vyvstane potřeba si nějaký mezivýpočet uložit pro pozdější použití. K tomu nám poslouží takzvané :term{cs="proměnné" en="variables"}. Proměnná je jakási pojmenovaná krabička nebo šuplík, do kterého si můžeme uložit nějakou hodnotu, abychom ji neztratili a mohli ji používat v dalších výpočtech. Abychom si procvičili proměnné a zajímavé operátory, zkusíme vyřešit následující úlohu. -Mějme čas v hodinách zadaný ve 24hodinovém formátu. Tři hodiny odpoledne tedy píšeme jako 15h. Nyní chceme spočítat, kolik hodin uvidíme na hodinách po uplynutí zadané doby. Například jaký bude čas po uplynutí 15 hodin? +Mějme čas v hodinách zadaný ve 24hodinovém formátu. Tři hodiny odpoledne tedy píšeme jako 15h. Nyní chceme spočítat, kolik hodin uvidíme na hodinách po uplynutí zadané doby. Například jaký bude čas po uplynutí 17 hodin? ```js -const cas = 13; -const novyCas = (cas + 15) % 24; -document.body.innerHTML = novyCas; +const cas = 15; +const novyCas = (cas + 17) % 24; +document.body.innerHTML += novyCas; ``` V tomto kusu kódu jsme vytvořili hned dvě proměnné: :var[cas] a :var[novyCas]. Každá proměnná v JavaScriptu musí mít své jméno. To by mělo dobře vystihovat, co je v proměnné uloženo. Pokud chceme v programu používat nějakou proměnnou, musíme ji vždy nejdříve vytvořit. To se dělá pomocí klíčového slova `const`. Takovou proměnnou pak můžeme použít v libovolném výrazu tak, že prostě uvedeme její jméno. -Proměnná :var[document.body.innerHTML] je trochu speciální. Tuto proměnnou vytvářet nemusíme, protože už ji pro nás vytvořil prohlížeč při načtení stránky. Nepíšeme tedy před ni `const`. +Všimněte si důležité věci: :var[document.body.innerHTML] je také proměnná. Je trochu speciální tím, že ji nemusíme sami vytvářet, neboť už ji pro nás vytvořil prohlížeč při načtení stránky. Nepíšeme už tedy před ni `const`. Většinu proměnných budeme používat tak, že jim při vytvoření přiřadíme nějakou hodnotu a tato hodnota už v proměnné zůstane až do konce jejího života. Občas se však stane, že potřebujeme hodnotu uloženou v nějaké proměnné změnit. V takovém případě musíme proměnnou vytvořit pomocí slovíčka `let`. @@ -21,7 +21,7 @@ Takto můžeme například zkusit spočítat svou budoucí výplatu, pokud budem ```js let sazba = 500; let vyplata = 8 * 21 * sazba; -document.body.innerHTML = vyplata; +document.body.innerHTML += vyplata; ``` Pokud chceme spočítat výplatu pro jinou sazbu, můžeme hodnotu v proměnné změnit. V takovém případě už **nepoužíváme** `const` ani `let`. @@ -30,7 +30,7 @@ Pokud chceme spočítat výplatu pro jinou sazbu, můžeme hodnotu v proměnné let sazba = 500; let vyplata = 8 * 21 * sazba; sazba = 600; -document.body.innerHTML = vyplata; +document.body.innerHTML += vyplata; ``` Zde si však musíme všimnout jedné velmi důležité věci. @@ -42,11 +42,11 @@ Dejte pozor na to, že do proměnné se jako do šuplíku ukládá pouze hodnota ```js let sazba = 500; let vyplata = 8 * 21 * sazba; -document.body.innerHTML = vyplata; +document.body.innerHTML += vyplata; sazba = 600; vyplata = 8 * 21 * sazba; -document.body.innerHTML = vyplata; +document.body.innerHTML += vyplata; ``` ### Změna na základě předchozí hodnoty @@ -56,7 +56,7 @@ document.body.innerHTML = vyplata; ```js sazba = sazba + 100; vyplata = 8 * 21 * sazba; -document.body.innerHTML = vyplata; +document.body.innerHTML += vyplata; ``` Nebo ji můžeme chtít navýšit třeba o 15 %. @@ -64,7 +64,7 @@ Nebo ji můžeme chtít navýšit třeba o 15 %. ```js sazba = sazba * 1.15; vyplata = 8 * 21 * sazba; -document.body.innerHTML = vyplata; +document.body.innerHTML += vyplata; ``` Tyto případy jsou tak časté, že pro ně JavaScript zavedl speciální operátory. Místo @@ -96,5 +96,5 @@ Tyto operátory se nám budou hodit také u řetězců. Takto například může ```js let email = 'alzbeta.zelena'; email += '@gmail.com'; -document.body.innerHTML = email; +document.body.innerHTML += email; ``` diff --git a/js1/uvod-do-js/prvni-program.md b/js1/uvod-do-js/prvni-program.md index 07a9bf94..064e284d 100644 --- a/js1/uvod-do-js/prvni-program.md +++ b/js1/uvod-do-js/prvni-program.md @@ -1,8 +1,8 @@ ## První program -Do této chvíle jsme si s runtimem JavaScriptu povídali pouze skrze konzoli. Vždy jsme poslali jeden příkaz a rovnou na něj dostali odpověď. Nyní je čas začít psát programy, tedy nechat náš prohlížeč spustit více příkazů najednou. +JavaScriptový program je další díl skládačky tvořící naši webovou stránku nebo aplikaci. Pro JavaScriptový kód budeme vždy vytvářet oddělený soubor, podobně jako jsme zvyklí vytvářet oddělený soubor pro CSS styly. JavaScriptovému programu většinou budeme dávat název `index.js` a podobně jako CSS jej musíme do stránky zapojit. -Naše JavaScriptové programy budou vždy součástí nějaké webové stránky. Založíme si proto složku s jedním HTML souborem, který prozatím nebude obsahovat nic než nadpis. +Založme si nejdříve úplně prázdnou stránku: ```html @@ -13,18 +13,17 @@ Naše JavaScriptové programy budou vždy součástí nějaké webové stránky. První program -

První program

``` -Pro náš JavaScriptový kód budeme vždy vytvářet oddělený soubor, podobně jako jste zvyklí vytvářet oddělený soubor pro CSS styly. JavaScriptovému programu většinou budeme dávat název `index.js`. Jeho obsah může vypadat například takto. +Když tuto stránku zobrazíte v prohlížeči, uvidíte pouze prázdné bílé okno. Ideální inspirace pro naši první JavaScriptovou aplikaci. Založme si soubor `index.js` a vložme do něj následující příkaz. ```js -document.body.innerHTML = '

ahoj

'; +document.body.innerHTML += 'Vítejte na našem webu'; ``` -Co tento kód přesně dělá, se dozvíme za malou chvíli. Teď je naším hlavním úkolem zapojit tento program do naší stránky. To provedeme tak, že vložíme značku `script` s odkazem na soubor `index.js` do hlavičky stránky. +Co tento kód přesně dělá, se dozvíme za malou chvíli. Nejprve tento program zapojíme do naší stránky. To provedeme tak, že vložíme značku `script` s odkazem na soubor `index.js` do hlavičky stránky. ```html @@ -36,10 +35,10 @@ Co tento kód přesně dělá, se dozvíme za malou chvíli. Teď je naším hla ``` -Pokud nyní soubor `index.html` otevřete v prohlížeči, měl by nadpis stránky znít :i[ahoj]. Všimměte si, že v HTML kódu stránka obsahuje nadpis :i[První program]. +Pokud nyní v prohlížeči obnovíte stránku, měl byste vidět text :i[Vítejte na našem webu]. Takto jsme do úplně prázdné stránky vložili obsah pomocí JavaScriptu. Proč se JavaScriptový kód vkládá do stránky tímto způsobem a co přesně znamená atribut `type="module"` si povíme později, až budete malinko zkušenější. ### Středníky -Téměř každý příkaz v JavaScriptu končí středníkem. Tím JavaScript runtime pozná, kde končí jeden příkaz a začíná jiný. Inu, ve skutečnosti by to JavaScript poznal i bez středníků a dokonce bychom je na většině míst ani psát nemuseli. Psaní nebo nepsaní středníků je opět kulturní záležitost, podobně jako jednoduché nebo dvojité uvozovky. Každý to má rád po svém, jednou je trendy to, jindy zase ono. My na tomto webu budeme středníky používat svědomitě a vám do začátku doporučujeme totéž. Později se jistě sami rozhodnete pro styl, který se vám osobně líbí nejvíce. +Než rozebereme náš první příklad, všimněte si, že končí středníkem. Takto JavaScript runtime pozná, kde končí jeden příkaz a začíná jiný. Inu, ve skutečnosti by to JavaScript poznal i bez středníků a dokonce bychom je na většině míst ani psát nemuseli. Psaní nebo nepsaní středníků je ve skutešnosti značně kulturní záležitost. Každý na to má svůj názor, jednou je trendy to, jindy zase ono. My na tomto kurzu budeme středníky používat svědomitě a vám do začátku doporučujeme totéž. Později se jistě sami rozhodnete pro styl, který se vám osobně líbí nejvíce. diff --git a/js1/uvod-do-js/vypis-do-stranky.md b/js1/uvod-do-js/vypis-do-stranky.md index c6bb2018..5aa8bad4 100644 --- a/js1/uvod-do-js/vypis-do-stranky.md +++ b/js1/uvod-do-js/vypis-do-stranky.md @@ -1,8 +1,8 @@ ## Výpis do stránky -Zatím jsme si ještě pořád nevysvětlili, jak přesně dokážeme pomocí JavaScriptu měnit obsah stránky. Ve všech dosavadních ukázkách jsme k tomu používali tajemnou proměnnou :var[document.body.innerHTML], o které zatím víme pouze to, že ji pro nás vytvořil prohlížeč automaticky. V této speciální proměnné je vždy uložen obsah elementu `body`, a to jako jeden dlouhý řetězec. +Nakonec jsme dospěli až k odhalení tajemství našeho příkazu pro výstup do stránky, který tak trochu slepě používáme už od první lekce. Všimněte si, že v něm používáme operátor `+=`, který jsme si ukázali v předchozí části. V proměnné :var[document.body.innerHTML] má totiž prohlížeč uložen aktuální obsah elementu `` jako jeden dlouhý JavaScriptový řetězec. -Mějme následující stránku. +Pokud naše stránka vypadá například takto: ```html @@ -20,26 +20,19 @@ Mějme následující stránku. ``` -Když ji otevřeme v prohlížeči, můžeme si v konzoli ověřit, co proměnná :var[document.body.innerHTML] obsahuje. +V proměnné :var[document.body.innerHTML] je pak uložen řetězec: -```jscon -> document.body.innerHTML +```js "

První program

" ``` -Obdrželi jsme řetězec s celým HTML stránky včetně všech mezer a odsazení. Pokud chceme obsah stránky změnit, můžeme prostě změnit obsah této proměnné a prohlížeč se už sám postará o překreslení stránky. Vyzkoušejte si to v konzoli. +Všiměte si, že řetězec obsahuje i všechny mezery a odsazení. -```jscon -> document.body.innerHTML = '

Nový obsah

'; -``` - -Tímto postupem nahradíme celý obsah stránky obsahem našeho řetězce. Nejčastěji však budeme chtít k obsahu stránky pouze něco přidat. K tomu využijeme operátor `+=`. +Pokud chceme obsah stránky změnit, můžeme prostě změnit obsah této proměnné a prohlížeč se už sám postará o překreslení stránky. Například můžete k řetězci v :var[document.body.innerHTML] přičíst další řetězec, klidně i třeba s kouskem HTML. ```jscon -> document.body.innerHTML += '

Výsledek výpočtu

'; +> document.body.innerHTML = '

Nový obsah

'; ``` - -Takto můžeme přímo do stránky vkládat jakékoliv HTML značky a máme tak stránku zcela pod kontrolou. From 25c22feccd3716604c22e2d1a83845ec2e3eced3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Martin=20Podlouck=C3=BD?= Date: Tue, 12 Sep 2023 19:04:32 +0200 Subject: [PATCH 2/5] Opravy po CR --- js1/uvod-do-js/cvlekce/email.md | 2 +- js1/uvod-do-js/cvlekce/ultramaraton.md | 3 ++- js1/uvod-do-js/prvni-program.md | 6 +++--- js1/uvod-do-js/vypis-do-stranky.md | 2 +- 4 files changed, 7 insertions(+), 6 deletions(-) diff --git a/js1/uvod-do-js/cvlekce/email.md b/js1/uvod-do-js/cvlekce/email.md index 5a59ee14..e5614f90 100644 --- a/js1/uvod-do-js/cvlekce/email.md +++ b/js1/uvod-do-js/cvlekce/email.md @@ -10,7 +10,7 @@ Sestavte e-mailovou adresu tak, že sečtete dohromady vaše křestní jméno, z :::solution ```js -'Tomáš' + '.' + 'Marný' + '@mujmail.com'; +'Franta' + '.' + 'Dobrota' + '@mujmail.com'; ``` ::: diff --git a/js1/uvod-do-js/cvlekce/ultramaraton.md b/js1/uvod-do-js/cvlekce/ultramaraton.md index b42bb4ea..e8bbf285 100644 --- a/js1/uvod-do-js/cvlekce/ultramaraton.md +++ b/js1/uvod-do-js/cvlekce/ultramaraton.md @@ -9,7 +9,8 @@ Představte si, že jste pořadatelé ultramaratonského závodu. Závod začín 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. +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. +1. Vyzkoušejte různé délky a ověřte, že váš postup funguje. :::solution diff --git a/js1/uvod-do-js/prvni-program.md b/js1/uvod-do-js/prvni-program.md index 064e284d..bc16849b 100644 --- a/js1/uvod-do-js/prvni-program.md +++ b/js1/uvod-do-js/prvni-program.md @@ -20,7 +20,7 @@ Založme si nejdříve úplně prázdnou stránku: Když tuto stránku zobrazíte v prohlížeči, uvidíte pouze prázdné bílé okno. Ideální inspirace pro naši první JavaScriptovou aplikaci. Založme si soubor `index.js` a vložme do něj následující příkaz. ```js -document.body.innerHTML += 'Vítejte na našem webu'; +document.body.innerHTML += '

Vítejte na našem webu

'; ``` Co tento kód přesně dělá, se dozvíme za malou chvíli. Nejprve tento program zapojíme do naší stránky. To provedeme tak, že vložíme značku `script` s odkazem na soubor `index.js` do hlavičky stránky. @@ -35,10 +35,10 @@ Co tento kód přesně dělá, se dozvíme za malou chvíli. Nejprve tento progr ``` -Pokud nyní v prohlížeči obnovíte stránku, měl byste vidět text :i[Vítejte na našem webu]. Takto jsme do úplně prázdné stránky vložili obsah pomocí JavaScriptu. +Pokud nyní v prohlížeči obnovíte stránku, měl byste vidět nadpis :i[Vítejte na našem webu]. Takto jsme do úplně prázdné stránky vložili obsah pomocí JavaScriptu. Proč se JavaScriptový kód vkládá do stránky tímto způsobem a co přesně znamená atribut `type="module"` si povíme později, až budete malinko zkušenější. ### Středníky -Než rozebereme náš první příklad, všimněte si, že končí středníkem. Takto JavaScript runtime pozná, kde končí jeden příkaz a začíná jiný. Inu, ve skutečnosti by to JavaScript poznal i bez středníků a dokonce bychom je na většině míst ani psát nemuseli. Psaní nebo nepsaní středníků je ve skutešnosti značně kulturní záležitost. Každý na to má svůj názor, jednou je trendy to, jindy zase ono. My na tomto kurzu budeme středníky používat svědomitě a vám do začátku doporučujeme totéž. Později se jistě sami rozhodnete pro styl, který se vám osobně líbí nejvíce. +Než rozebereme náš první příklad, všimněte si, že končí středníkem. Takto JavaScript runtime pozná, kde končí jeden příkaz a začíná jiný. Inu, ve skutečnosti by to JavaScript poznal i bez středníků a dokonce bychom je na většině míst ani psát nemuseli. Psaní nebo nepsaní středníků je značně kulturní záležitost, každý na to má svůj názor. Jednou je trendy to, jindy zase ono. My na tomto kurzu budeme středníky používat svědomitě a vám do začátku doporučujeme totéž. Později se jistě sami rozhodnete pro styl, který se vám osobně líbí nejvíce. diff --git a/js1/uvod-do-js/vypis-do-stranky.md b/js1/uvod-do-js/vypis-do-stranky.md index 5aa8bad4..d799da42 100644 --- a/js1/uvod-do-js/vypis-do-stranky.md +++ b/js1/uvod-do-js/vypis-do-stranky.md @@ -34,5 +34,5 @@ Všiměte si, že řetězec obsahuje i všechny mezery a odsazení. Pokud chceme obsah stránky změnit, můžeme prostě změnit obsah této proměnné a prohlížeč se už sám postará o překreslení stránky. Například můžete k řetězci v :var[document.body.innerHTML] přičíst další řetězec, klidně i třeba s kouskem HTML. ```jscon -> document.body.innerHTML = '

Nový obsah

'; +> document.body.innerHTML += '

Nový obsah

'; ``` From 897133cd0b242de3c371dd69a419e853bc268611 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Martin=20Podlouck=C3=BD?= Date: Tue, 12 Sep 2023 19:05:37 +0200 Subject: [PATCH 3/5] Opravy QA --- js1/uvod-do-js/cvlekce/delka-filmu.md | 1 + js1/uvod-do-js/cvlekce/vyplata.md | 1 + js1/uvod-do-js/hodnoty-operatory.md | 2 +- js1/uvod-do-js/javascript.md | 1 - js1/uvod-do-js/prvni-program.md | 3 +-- 5 files changed, 4 insertions(+), 4 deletions(-) diff --git a/js1/uvod-do-js/cvlekce/delka-filmu.md b/js1/uvod-do-js/cvlekce/delka-filmu.md index 48b5f1dc..b4493f75 100644 --- a/js1/uvod-do-js/cvlekce/delka-filmu.md +++ b/js1/uvod-do-js/cvlekce/delka-filmu.md @@ -20,4 +20,5 @@ Math.floor(223 / 60); ```js 223 % 60; ``` + ::: diff --git a/js1/uvod-do-js/cvlekce/vyplata.md b/js1/uvod-do-js/cvlekce/vyplata.md index 80361235..4bd4a019 100644 --- a/js1/uvod-do-js/cvlekce/vyplata.md +++ b/js1/uvod-do-js/cvlekce/vyplata.md @@ -22,4 +22,5 @@ document.body.innerHTML += 21 * 7 * 320; ```js document.body.innerHTML += Math.floor(21 * 7 * 265 * (1 - 0.6) * 0.15); ``` + ::: diff --git a/js1/uvod-do-js/hodnoty-operatory.md b/js1/uvod-do-js/hodnoty-operatory.md index 411da0fc..ba6c2b3b 100644 --- a/js1/uvod-do-js/hodnoty-operatory.md +++ b/js1/uvod-do-js/hodnoty-operatory.md @@ -45,7 +45,7 @@ Pro zbytek po dělení se překvapivě používá znak procenta, přestože s pr 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. ```js -document.body.innerHTML += 5 * (3 + 7) % 9; +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 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. diff --git a/js1/uvod-do-js/javascript.md b/js1/uvod-do-js/javascript.md index 65ed2664..ec20af83 100644 --- a/js1/uvod-do-js/javascript.md +++ b/js1/uvod-do-js/javascript.md @@ -9,4 +9,3 @@ Jazyk JavaScript je jedním z nejdůležitějších programovacích jazyků neje Než se naplno pustíme do JavaScriptu, je dobré si pořádně ujasnit terminologii. JavaScript je programovací jazyk, tedy sada nějakých pravidel, jak sestavovat textové příkazy pro počítač. Pokud chceme, aby náš počítač tyto příkazy vykonal, protřebujeme takzvaný _JavaScript runtime_. To je program, který čte JavaScriptové příkazy a jeden za druhým je provádí. Pokud bychom použili divadelní analogii, můžeme si představit, že JavaScriptový program je scénář nějakého představení a JavaScript runtime je herec, který představení podle tohoto scénáře zahraje. ::fig[JavaScript runtime]{src=assets/runtime.jpg} - diff --git a/js1/uvod-do-js/prvni-program.md b/js1/uvod-do-js/prvni-program.md index bc16849b..79445df8 100644 --- a/js1/uvod-do-js/prvni-program.md +++ b/js1/uvod-do-js/prvni-program.md @@ -12,8 +12,7 @@ Založme si nejdříve úplně prázdnou stránku: První program - - + ``` From 4d433fbeffb15eaf733e616aaf63296b93fe848a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Martin=20Podlouck=C3=BD?= Date: Tue, 12 Sep 2023 20:48:15 +0200 Subject: [PATCH 4/5] =?UTF-8?q?Napou=C5=BE=C3=ADvat=20pro=20aplikace=20?= =?UTF-8?q?=C3=BApln=C4=9B=20pr=C3=A1zdnou=20str=C3=A1nku?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js1/uvod-do-js/prvni-program.md | 8 +++++--- js1/uvod-do-js/vypis-do-stranky.md | 4 ++-- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/js1/uvod-do-js/prvni-program.md b/js1/uvod-do-js/prvni-program.md index 79445df8..afb630b6 100644 --- a/js1/uvod-do-js/prvni-program.md +++ b/js1/uvod-do-js/prvni-program.md @@ -12,14 +12,16 @@ Založme si nejdříve úplně prázdnou stránku: První program - + +

První program

+ ``` -Když tuto stránku zobrazíte v prohlížeči, uvidíte pouze prázdné bílé okno. Ideální inspirace pro naši první JavaScriptovou aplikaci. Založme si soubor `index.js` a vložme do něj následující příkaz. +Když tuto stránku zobrazíte v prohlížeči, uvidíte pouze prázdnou stránku s nadpisem. Ideální inspirace pro naši první JavaScriptovou aplikaci. Založme si soubor `index.js` a vložme do něj následující příkaz. ```js -document.body.innerHTML += '

Vítejte na našem webu

'; +document.body.innerHTML += 'Vítejte na našem webu'; ``` Co tento kód přesně dělá, se dozvíme za malou chvíli. Nejprve tento program zapojíme do naší stránky. To provedeme tak, že vložíme značku `script` s odkazem na soubor `index.js` do hlavičky stránky. diff --git a/js1/uvod-do-js/vypis-do-stranky.md b/js1/uvod-do-js/vypis-do-stranky.md index d799da42..a288d16b 100644 --- a/js1/uvod-do-js/vypis-do-stranky.md +++ b/js1/uvod-do-js/vypis-do-stranky.md @@ -33,6 +33,6 @@ Všiměte si, že řetězec obsahuje i všechny mezery a odsazení. Pokud chceme obsah stránky změnit, můžeme prostě změnit obsah této proměnné a prohlížeč se už sám postará o překreslení stránky. Například můžete k řetězci v :var[document.body.innerHTML] přičíst další řetězec, klidně i třeba s kouskem HTML. -```jscon -> document.body.innerHTML += '

Nový obsah

'; +```js +document.body.innerHTML += '

Nový obsah

'; ``` From 50acad0121b61a9f41d79f9ee2f19a903911a643 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Martin=20Podlouck=C3=BD?= Date: Wed, 13 Sep 2023 07:41:40 +0200 Subject: [PATCH 5/5] =?UTF-8?q?Oprava=20p=C5=99eklepu?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js1/uvod-do-js/prvni-program.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js1/uvod-do-js/prvni-program.md b/js1/uvod-do-js/prvni-program.md index afb630b6..b8788a11 100644 --- a/js1/uvod-do-js/prvni-program.md +++ b/js1/uvod-do-js/prvni-program.md @@ -36,7 +36,7 @@ Co tento kód přesně dělá, se dozvíme za malou chvíli. Nejprve tento progr ``` -Pokud nyní v prohlížeči obnovíte stránku, měl byste vidět nadpis :i[Vítejte na našem webu]. Takto jsme do úplně prázdné stránky vložili obsah pomocí JavaScriptu. +Pokud nyní v prohlížeči obnovíte stránku, měli byste pod nadpisem vidět text :i[Vítejte na našem webu]. Takto jsme do téměř prázdné stránky vložili obsah pomocí JavaScriptu. Proč se JavaScriptový kód vkládá do stránky tímto způsobem a co přesně znamená atribut `type="module"` si povíme později, až budete malinko zkušenější.