Merge pull request #499 from Czechitas-podklady-WEB/498-js1-lekce-2-v…

…yhodit-praci-s-konzoli

JS1 Lekce 2: Vyhodit práci s konzolí a destrukturování

js1/vstup-vystup-objekty/cv-ulozky.md

@@ -3,3 +3,4 @@
 ::exc[cvdoma/formatovac-data]
 ::exc[cvdoma/fahrnheit-vs-celsius]
 ::exc[cvdoma/letenka]
+::exc[cvdoma/velikost-okna]

js1/vstup-vystup-objekty/cvdoma/fahrnheit-vs-celsius.md

@@ -1,6 +1,8 @@
 ---
 title: Fahrnheit vs. Celsius
 demand: 3
+lead: Vytvořte převodník stupňů Fahrenheita na stupně Celsia.
+solutionAccess: lock
 ---
 
 Pokud pečete podle anglických receptů, často se po váš požaduje rozehřát troubu na uvedenou teplotu. Pokud si ovšem neuvědomíte, že Američané používají pro měření teploty stupně Fahrenheita namísto Celsia, bude vás na konci pečení čekat nemilé překvapení.

js1/vstup-vystup-objekty/cvdoma/formatovac-data.md

@@ -1,10 +1,13 @@
 ---
 title: Formátovač data
 demand: 2
+lead: Vypište do stránky hezky zformátované datum.
+solutionAccess: lock
 ---
 
-Vytvořte stránku, která se zeptá uživatele na den, měsíc a rok.
+Vytvořte stránku, která se zeptá uživatele na den, měsíc a rok a vypíše do stránky datum v hezkém formátu.
 
+1. Založte nový JavaScriptový program a v něm si pomocí funkce `prompt` zeptejte uživatele na den, měsíc a rok.
 1. Jakmile uživatel zadá patřičné údaje, vypište do stránky datum v tomto formátu.
    ```text
    28. 4. 2021
@@ -17,14 +20,18 @@ Vytvořte stránku, která se zeptá uživatele na den, měsíc a rok.
    </p>
    ```
 
+### Bonus
+
+Zkuste tyto prvky lehce nastylovat pomocí CSS, aby vypadaly hezky.
+
 :::solution
 
 ```js
 const den = prompt('Zadej den:');
 const mesic = prompt('Zadej měsíc:');
 const rok = prompt('Zadej rok:');
 
-document.body.innerHTML =
+document.body.innerHTML +=
   '<p class="date"><span class="day">' +
   den +
   '</span>. <span class="month">' +

js1/vstup-vystup-objekty/cvdoma/letenka.md

@@ -1,6 +1,8 @@
 ---
 title: Letenka
 demand: 2
+lead: Vypište informace o letu.
+solutionAccess: lock
 ---
 
 Vytvořte webovou stránku s JavaScriptem a do kódu vašeho programu vložte následující objekt představující reálná data o letu z Prahy do Barcelony.
@@ -63,7 +65,7 @@ const flight = {
 Proveďte následující:
 
 1. Vypište do stránky název **startovní** a **cílové země**.
-1. Pomocí **destrukturování** uložte do separátní proměnné objekt udávající **maximální rozměry zavazadel**.
+1. Uložte do separátní proměnné objekt udávající **maximální rozměry zavazadel**.
 1. Z objektu s rozměry zavazadel vytáhněte maximální povolené **rozměry příručního zavazadla** a vypište tyto rozměry opět jeden po druhém vypište do stránky.
 1. Vypište do stránky, kolik cestující zaplatí za **druhé zavazadlo** v českých korunách **zaokrouhleno nahoru** na celé koruny.
 1. Pokud máte chuť, malinko stránku nastylujte, aby se uživatel v informacích vyznal.
@@ -128,7 +130,7 @@ document.body.innerHTML =
   '<p><strong>Startovní země:</strong> ' + flight.countryFrom.name + '</p>';
 document.body.innerHTML +=
   '<p><strong>Startovní země:</strong> ' + flight.countryTo.name + '</p>';
-const { baglimit } = flight;
+const baglimit = flight.baglimit;
 document.body.innerHTML +=
   '<p><strong>Maximální šířka příručního zavazadla:</strong> ' +
   baglimit.hand_width +

js1/vstup-vystup-objekty/cvdoma/velikost-okna.md

@@ -0,0 +1,8 @@
+---
+title: Velikost okna
+demand: 2
+lead: Zjistěte, jak velké je okno stránky a prohlížeče.
+---
+
+1. Pohrajte si s vlastnostmi `window.innerWidth` a `window.innerHeight` a zjistěte, jak velké je okno stránky. Vypište tyto hodnoty do stránky a zkuste stránky několikrát změnšít a zvětšit, Pozor, že je vždy potřeba udělat refresh stránky, aby se hodnoty změnily.
+1. Vypište do stránky také vlastnosti `window.outerWidth` a `window.outerHeight`. Opět si pohrajte s velíkostí okna prohlížeče a pozorujte, jak se tyto hodnoty mění.

js1/vstup-vystup-objekty/cvlekce/knihovna.md

@@ -1,6 +1,8 @@
 ---
 title: Knihovna
 demand: 2
+lead: Vytvořte objekt představující jednu knihu v knihovně.
+solutionAccess: lock
 ---
 
 1. V JavaScriptovém programu vytvořte objekt představující jednu knihu v knihovně. Uvažte, jaké vlastnosti může taková kniha mít. Rozhodně budeme chtít název, autora a počet stran. Přidejte do objektu alespoň tři další vlastnosti tak, aby obsahovaly čísla, řetězce i vnořený objekt.

js1/vstup-vystup-objekty/cvlekce/ockovani-objekty.md

@@ -1,6 +1,8 @@
 ---
 title: Očkování - objekty
 demand: 2
+lead: Vytvořte objekt s údaji o uživateli.
+solutionAccess: lock
 ---
 
 Pokračujme v našem registračním systému na očkováni. Zatím se umíme uživatele zeptat na jméno a věk.
@@ -12,17 +14,21 @@ Pokračujme v našem registračním systému na očkováni. Zatím se umíme už
      age: 67,
    }
    ```
-1. Poté, co uživatel zadá všechny údaje, vypište do stránky objekt `person` v nějakém hezkém formátu a zkontrolujte, že obsahuje správné informace.
+1. Přidejte do objektu `person` údaj o tom, v jakém jazyce si uživatel přeje komunikovat. Zjistěte jej z objektu `window`.
+1. Poté, co uživatel zadá všechny údaje, vypište do stránky objekt `person` se všemi jeho vlastnostmi v nějakém hezkém formátu a zkontrolujte, že obsahuje správné informace.
 
 :::solution
 
 ```js
 const person = {
- name: prompt("Jake je vase jmeno a primeni?"),
-  age: Number(prompt("Jaky je vas vek?")),
+  name: prompt("Jaké je vaše jméno a příjmení?"),
+  age: Number(prompt("Jaký je váš věk?")),
+  language: window.navigator.language,
 };
 ​
-document.body.innerHTML += "<p>Zadane jmeno je: " + person.name + ", vas vek je: " + person.age + ", boli ste zaregistrovany na ockovanie.</p>";
+document.body.innerHTML += "<p>Zadané jméno: " + person.name + ", váš věk: " + person.age + "</p>";
+document.body.innerHTML += "<p>Váš jazyk: " + person.language + "</p>";
+document.body.innerHTML += "<p>Byli jste zaregistrováni na očkování.</p>";
 ```
 
 :::

js1/vstup-vystup-objekty/cvlekce/ockovani.md

@@ -1,21 +1,23 @@
 ---
 title: Očkování
 demand: 2
+lead: Vytvořte registrační systém na očkování proti COVID-19.
+solutionAccess: lock
 ---
 
 Představte si, že vyrábíte registrační systém na očkování proti COVID-19. U každého registrovaného chceme evidovat jméno a věk.
 
 1. Vytvořte webovou stránku, která se uživatele zeptá nejdříve na jméno a poté na věk. Tyto hodnoty si uložte do smysluplně pojmenovaných proměnných. Nezpomeňte věk převést na číslo.
-1. Poté, co uživatel zadá všechny údaje, vypište do stránky výstup ve tvaru
+1. Poté, co uživatel zadá všechny údaje, vypište do stránky odstavec s obsahem ve tvaru
    ```
    Květoslav Voňavý, věk: 67
    ```
 
 :::solution
 
 ```js
-let celeJmeno = prompt("Jake je vase jmeno a primeni?");
-let vek = Number(prompt("Jaky je vas vek?"));
+const celeJmeno = prompt("Jake je vase jmeno a primeni?");
+const vek = Number(prompt("Jaky je vas vek?"));
 ​
 document.body.innerHTML += "<p>" + celeJmeno + ", vek: " + vek + "</p>";
 ```

js1/vstup-vystup-objekty/cvlekce/realitka.md

@@ -1,6 +1,8 @@
 ---
 title: Realitka
 demand: 2
+lead: Vypište do stránky některé údaje z inzerátu na byt.
+solutionAccess: lock
 ---
 
 Mějme následující objekt představující inzerát na stránkách nějaké realitní kanceláře.
@@ -37,7 +39,7 @@ Vytvořte webovou stránku s JavaScriptem, zkopírujte si tento kód do vašeho
 1. Pomocí tečkové notace vypište do stránky dispozici bytu.
 1. Vypište do stránky čistý nájem bez poplatků.
 1. Vypište do stránky celý objekt představující výměru bytu.
-1. Pomocí destrukturování si do separátních proměnných uložte město a městskou část. Vypište je do stránky.
+1. Do separátních proměnných uložte město a městskou část. Vypište je do stránky.
 1. Změnte stav inzerátu z `'free'` na `'taken'`.
 
 :::solution
@@ -72,7 +74,8 @@ document.body.innerHTML += "<p>Dispozice: "+ apartment.disposition +"</p>"
 document.body.innerHTML += "<p>Najem bez poplatku: "+ apartment.price.rent +"</p>"
 document.body.innerHTML += "<p>Vymera bytu: "+ apartment.area.floorage + apartment.area.units +"</p>"
 ​
-const { city, district } = apartment;
+const city = apartment.city;
+const district = apartment.district;
 ​
 document.body.innerHTML += "<p>Mesto: "+ city +"</p>"
 document.body.innerHTML += "<p>Mestska cast: "+ district +"</p>"

js1/vstup-vystup-objekty/cvlekce/vyplata-stranka.md

@@ -1,6 +1,8 @@
 ---
 title: Výplata jako stránka
 demand: 2
+lead: Spočítejte, kolik si jako programátor vyděláte.
+solutionAccess: lock
 ---
 
 1. Vytvořte webovou stránku, která uživatele požádá o jeho hodinovou sazbu v korunách a spočítá jeho hrubou mzdu za předpokladu, že pracuje 8 hodin denně 21 dní v měsíci. Do stránky vypište výsledek zabalený do nějaké přívětivé formulace. Dbejte na to, abyste korektně převedli uživatelem zadanou hodnotu na číslo.
@@ -9,11 +11,11 @@ demand: 2
 :::solution
 
 ```js
-const hodinovaSazba = Number(prompt("Jaka je vasa hodinova sazba?"));
-const pocetHodin = Number(prompt("Kolko hodin denne pracujete?"));
-const pocetDni = Number(prompt("Kolko dni mesacne pracujete?"));
+const hodinovaSazba = Number(prompt("Jaká je vaše hodinová sazba?"));
+const pocetHodin = Number(prompt("Kolik hodin denně pracujete?"));
+const pocetDni = Number(prompt("Kolik dní měsíčně pracujete?"));
 ​
-document.body.innerHTML += "<p>" + (hodinovaSazba*pocetHodin*pocetDni) + "</p>";
+document.body.innerHTML += "<p>Vaše vyplata činí " + (hodinovaSazba*pocetHodin*pocetDni) + " korun</p>";
 ```
 
 :::

js1/vstup-vystup-objekty/entry.yml

@@ -6,7 +6,7 @@ sections:
   - konverze-hodnot
   - cv-vstup-vystup
   - objekty
-  - destrukturovani
+  - pripravene
   - cv-objekty
   - shrnuti
   - cv-ulozky

js1/vstup-vystup-objekty/konverze-hodnot.md

@@ -2,61 +2,80 @@
 
 Ú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;
+```
+
+Naopak tato operace do stránky vypíše řetězec `125`:
+
+```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 čísel na řetězce nebo řetězců na čísla. Sami si vyzkoušejte následující příklady a zkuste dopředu odhadnout, co se objeví na stránce.
+
+```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.
+```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;
+```
 
-```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í.
+```js
+document.body.innerHTML += 12 * '5';
+```
 
-```jscon
-> 12 * 5
-60
-> '12' * 5
-60
-> 12 * '5'
-60
-> '12' * '5'
-60
+```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
-> const delka = '10'
-> start + delka
-'1510'
-> '1510' % 24
-22
+```js
+const start = 15;
+const delka = '10';
+document.body.innerHTML += start + delka; // Vypíše '1510'
+document.body.innerHTML += '<br />'; // Odřádkujeme
+document.body.innerHTML += '1510' % 24; // Vypíše 22
 ```
 
 Abychom si s touto situací poradili, budeme potřebovat možnost provést konverzi hodnot sami, aniž by nám do toho JavaScript kecal.
@@ -65,22 +84,17 @@ Abychom si s touto situací poradili, budeme potřebovat možnost provést konve
 
 Pokud chceme konvertovat číslo na řetězec, použijeme funkci `String`.
 
-```jscon
-> String(12)
-'12'
-> String(-2.48)
-'-2.48'
+```js
+String(12); // Vrátí řetězec '12'
+String(-2.48); // Vrátí řetězec '-2.48'
 ```
 
 Když potřebujeme obrácenou konverzi, tedy řetězec na číslo, použijeme funkci `Number`.
 
-```jscon
-> Number('12')
-12
-> Number('-2.48')
--2.48
-> Number('-2,48')
-NaN
+```js
+Number('12'); // Vrátí číslo 12
+Number('-2.48'); // Vrátí číslo -2.48
+Number('-2,48'); // Vrátí hodnotu NaN
 ```
 
 Všimněte si, co se stane, když se pokusíme zkonvertovat nějaký řetězec, který na číslo převést nejde. V takovém případě obdržíme speciální hodnotu `NaN`, což je zkratka pro :i[Not a Number - Není číslo].
@@ -91,13 +105,13 @@ Nyní už můžeme náš program přepracovat tak, aby fungoval správně.
 const start = 15;
 const delka = Number(prompt('Zadej délku závodu:'));
 const konec = (start + delka) % 24;
-document.body.innerHTML = konec;
+document.body.innerHTML += konec;
 ```
 
-Z tohoto příkladu plyne do budoucna velmi důležité poučení. Vždycky si dávejte dobrý pozor na to, s jakými typy hodnot pracujete. Pokud například chcete používat výstup funkce `prompt` jako číslo, vždy jej explicitně převeďte na číslo. Dáte tak i čtenářům vašeho programu najevo, co je vaším záměrem, a oni tak nebudou muset smysl vašeho programu rozplétat jako detektivní zápletku.
+Z tohoto příkladu plyne do budoucna velmi důležité poučení: Vždycky si dávejte dobrý pozor na to, s jakými typy hodnot pracujete. Pokud například chcete používat výstup funkce `prompt` jako číslo, vždy jej explicitně převeďte na číslo. Dáte tak i čtenářům vašeho programu najevo, co je vaším záměrem, a oni tak nebudou muset smysl vašeho programu rozplétat jako detektivní zápletku.
 
-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.
+Fakt, že JavaScript pro nás některé konverze dělá automaticky, můžeme také 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>';
 ```