Napoužívat pro aplikace úplně prázdnou stránku

Czechitas-podklady-WEB · Sep 12, 2023 · dae4c0a · dae4c0a
1 parent 897133c
commit dae4c0a
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 42 deletions.
diff --git 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:
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>První program</title>
   </head>
-  <body></body>
+  <body>
+    <h1>První program</h1>
+  </body>
 </html>
 ```
 
-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 += '<h1>Vítejte na našem webu</h1>';
+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
@@ -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 += '<p>Nový obsah</p>';
+```js
+document.body.innerHTML += '<p>Nový obsah</p>';
 ```
diff --git 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 = '<p>Běžec dorazí v ' + konec + 'h</p>';
+document.body.innerHTML += '<p>Běžec dorazí v ' + konec + 'h</p>';
 ```
diff --git 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.