Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 6 commits into from
Sep 15, 2023
Merged
Show file tree
Hide file tree
Changes from 4 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions js1/vstup-vystup-objekty/cvdoma/fahrnheit-vs-celsius.md
Original file line number Diff line number Diff line change
@@ -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í.
Expand Down
8 changes: 6 additions & 2 deletions js1/vstup-vystup-objekty/cvdoma/formatovac-data.md
Original file line number Diff line number Diff line change
@@ -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že 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
Expand All @@ -16,6 +19,7 @@ Vytvořte stránku, která se zeptá uživatele na den, měsíc a rok.
<span class="year">2021</span>
</p>
```
1. Zkuste tyto prvky lehce nastylovat pomocí CSS, aby vypadaly hezky.
podlomar marked this conversation as resolved.
Show resolved Hide resolved

:::solution

Expand All @@ -24,7 +28,7 @@ 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">' +
Expand Down
6 changes: 4 additions & 2 deletions js1/vstup-vystup-objekty/cvdoma/letenka.md
Original file line number Diff line number Diff line change
@@ -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.
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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 +
Expand Down
2 changes: 2 additions & 0 deletions js1/vstup-vystup-objekty/cvlekce/knihovna.md
Original file line number Diff line number Diff line change
@@ -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.
Expand Down
6 changes: 5 additions & 1 deletion js1/vstup-vystup-objekty/cvlekce/ockovani-objekty.md
Original file line number Diff line number Diff line change
@@ -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.
Expand All @@ -13,13 +15,15 @@ Pokračujme v našem registračním systému na očkováni. Zatím se umíme už
}
```
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`.
podlomar marked this conversation as resolved.
Show resolved Hide resolved

:::solution

```js
const person = {
name: prompt("Jake je vase jmeno a primeni?"),
name: prompt("Jake je vase jmeno a primeni?"),
podlomar marked this conversation as resolved.
Show resolved Hide resolved
age: Number(prompt("Jaky je vas vek?")),
language: window.navigator.language,
};
document.body.innerHTML += "<p>Zadane jmeno je: " + person.name + ", vas vek je: " + person.age + ", boli ste zaregistrovany na ockovanie.</p>";
podlomar marked this conversation as resolved.
Show resolved Hide resolved
Expand Down
8 changes: 5 additions & 3 deletions js1/vstup-vystup-objekty/cvlekce/ockovani.md
Original file line number Diff line number Diff line change
@@ -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>";
```
Expand Down
7 changes: 5 additions & 2 deletions js1/vstup-vystup-objekty/cvlekce/realitka.md
Original file line number Diff line number Diff line change
@@ -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.
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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>"
Expand Down
10 changes: 6 additions & 4 deletions js1/vstup-vystup-objekty/cvlekce/vyplata-stranka.md
Original file line number Diff line number Diff line change
@@ -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.
Expand All @@ -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>";
```

:::
2 changes: 1 addition & 1 deletion js1/vstup-vystup-objekty/entry.yml
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ sections:
- konverze-hodnot
- cv-vstup-vystup
- objekty
- destrukturovani
- pripravene
- cv-objekty
- shrnuti
- cv-ulozky
130 changes: 72 additions & 58 deletions js1/vstup-vystup-objekty/konverze-hodnot.md
Original file line number Diff line number Diff line change
Expand Up @@ -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. 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;
podlomar marked this conversation as resolved.
Show resolved Hide resolved
```

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
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

-document.body.innerHTML += <br />; // Odřádkujeme
+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.
Expand All @@ -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].
Expand All @@ -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>';
```
Loading