From dae4c0a31618ba3c761935f82308da192aae63af Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Martin=20Podlouck=C3=BD?= Date: Tue, 12 Sep 2023 20:46:20 +0200 Subject: [PATCH] =?UTF-8?q?Napou=C5=BE=C3=ADvat=20pro=20aplikace=20=C3=BAp?= =?UTF-8?q?ln=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 +- js1/vstup-vystup-objekty/konverze-hodnot.md | 83 ++++++++++++--------- js1/vstup-vystup-objekty/vstup.md | 2 +- 4 files changed, 55 insertions(+), 42 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

'; ``` diff --git a/js1/vstup-vystup-objekty/konverze-hodnot.md b/js1/vstup-vystup-objekty/konverze-hodnot.md index 8871a82a..b04968f7 100644 --- a/js1/vstup-vystup-objekty/konverze-hodnot.md +++ b/js1/vstup-vystup-objekty/konverze-hodnot.md @@ -2,53 +2,64 @@ Úplně na začátku je šikovné všimnout si rozdílu mezi hodnotami jako `12` a `'12'`. Jedna představuje číslo dvanáct, druhá představuje řetězec obsahující znaky 1 a 2. Proto můžeme čekat, že aritmetické operace s těmito hodnotami dopadnou jinak podle toho, zda jde o číslo nebo o řetězec. -```jscon -> 12 + 5 -17 -> '12' + '5' -'125' +Tato operace například do stránky vypíše číslo 17: + +```js +document.body.innerHTML += 12 + 5 ``` -JavaScript se nám (občas k naší škodě) snaží udělat život jednodušší a tak za nás v určitých případech provádí automatickou konverzi. +Naopak tato operace do stránky vypíše řetězec `125`: -```jscon -> '12' + 5 -'125' -> 12 + '5' -'125' -> 1 + 2 + 3 + '4' -'64' -> '1' + 2 + 3 + 4 -'1234' +```js +document.body.innerHTML += '12' + '5' ``` -Tato konverze funguje i pro jiné operátory, napříkad násobení. +JavaScript se nám (občas k naší škodě) snaží udělat život jednodušší a tak za nás v určitých případech provádí automatickou konverzi čísel na řetězce. Sami si vyzkoušejte následující příklady a zkuste dopředu odhadnout, co se objeví na stránce. -```jscon -> 12 * 5 -60 -> '12' * 5 -60 -> 12 * '5' -60 -> '12' * '5' -60 +```js +document.body.innerHTML += '12' + 5 +``` +```js +document.body.innerHTML += 12 + '5' +``` +```js +document.body.innerHTML += 1 + 2 + 3 + '4' +``` +```js +document.body.innerHTML += '1' + 2 + 3 + 4 +``` + +Konverze fungují i pro jiné operátory, napříkad násobení. + +```js +document.body.innerHTML += 12 * 5 +``` +```js +document.body.innerHTML += '12' * 5 +``` +```js +document.body.innerHTML += 12 * '5' +``` +```js +document.body.innerHTML += '12' * '5' ``` Dokonce takto funguje i zbytek po dělení. -```jscon -> 12 % 5 -2 -> '12' % 5 -2 -> 12 % '5' -2 -> '12' % '5' -2 +```js +document.body.innerHTML += 12 % 5 +``` +```js +document.body.innerHTML += '12' % 5 +``` +```js +document.body.innerHTML += 12 % '5' +``` +```js +document.body.innerHTML += '12' % '5' ``` -Vybaveni touto zkušeností můžeme začít rozplétat, co se nám pokazilo na našem ultramaratonském programu. Nejdůležitější věcí k zapamatování je, že funkce `prompt` **vždycky vrací vstup od uživatele jako řetězec**. I když uživatel do políčka nakrásně napíše číslo, funkce `prompt` pro nás žádnou konverzi automaticky nedělá. Pokud tedy uživatel zadal jako délku závodu číslo 10, do proměnné délka se nám uložila hodnota `'10'`. V konzoli si pak můžeme vyzkoušet, co se dělo pak. +Vybaveni touto zkušeností můžeme začít rozplétat, co se nám pokazilo na našem ultramaratonském programu. Nejdůležitější věcí k zapamatování je, že funkce `prompt` **vždycky vrací vstup od uživatele jako řetězec**. I když uživatel do políčka nakrásně napíše číslo, funkce `prompt` pro nás žádnou konverzi automaticky nedělá. Pokud tedy uživatel zadal jako délku závodu číslo 10, do proměnné délka se nám uložila hodnota `'10'`. V jednotlivých krocích si pak můžeme vyzkoušet, co se dělo pak. ```jscon > const start = 15 @@ -99,5 +110,5 @@ Z tohoto příkladu plyne do budoucna velmi důležité poučení. Vždycky si d Fakt, že JavaScript pro nás některé konverze dělá automaticky, můžeme využít k tomu, abychom uživateli vypsali nějakou hezčí zprávu, než jen holé číslo. ```js -document.body.innerHTML = '

Běžec dorazí v ' + konec + 'h

'; +document.body.innerHTML += '

Běžec dorazí v ' + konec + 'h

'; ``` diff --git a/js1/vstup-vystup-objekty/vstup.md b/js1/vstup-vystup-objekty/vstup.md index 2f72415b..d97bcb72 100644 --- a/js1/vstup-vystup-objekty/vstup.md +++ b/js1/vstup-vystup-objekty/vstup.md @@ -8,7 +8,7 @@ Zatím jsme viděli, jak může náš program provést jednoduchý výstup pomoc const start = 15; const delka = prompt('Zadej délku závodu:'); const konec = (start + delka) % 24; -document.body.innerHTML = konec; +document.body.innerHTML += konec; ``` Tento program vypadá velmi přímočaře. Zadáme-li mu však v dobré víře na vstup délku 10 dočkáme se nesprávné odpovědi 22. Abychom odhalili, kde je zakopaný pes, musíme si povědět něco o konverzi hodnot.