From 8e2f5f6c39ffee8be27cac18a431de89c9849c72 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Martin=20Podlouck=C3=BD?= Date: Wed, 13 Sep 2023 08:27:32 +0200 Subject: [PATCH 1/5] =?UTF-8?q?Vyhodit=20pr=C3=A1ci=20s=20konzol=C3=AD=20a?= =?UTF-8?q?=20destrukturov=C3=A1n=C3=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../cvdoma/fahrnheit-vs-celsius.md | 2 +- .../cvdoma/formatovac-data.md | 8 +- js1/vstup-vystup-objekty/cvdoma/letenka.md | 7 +- js1/vstup-vystup-objekty/cvlekce/knihovna.md | 3 +- .../cvlekce/ockovani-objekty.md | 6 +- js1/vstup-vystup-objekty/cvlekce/ockovani.md | 8 +- js1/vstup-vystup-objekty/cvlekce/realitka.md | 7 +- .../cvlekce/vyplata-stranka.md | 10 +- js1/vstup-vystup-objekty/entry.yml | 2 +- js1/vstup-vystup-objekty/konverze-hodnot.md | 121 +++++++++--------- js1/vstup-vystup-objekty/objekty.md | 46 ++++--- js1/vstup-vystup-objekty/pripravene.md | 34 +++++ js1/vstup-vystup-objekty/shrnuti.md | 2 +- js1/vstup-vystup-objekty/vstup.md | 2 +- 14 files changed, 159 insertions(+), 99 deletions(-) create mode 100644 js1/vstup-vystup-objekty/pripravene.md diff --git a/js1/vstup-vystup-objekty/cvdoma/fahrnheit-vs-celsius.md b/js1/vstup-vystup-objekty/cvdoma/fahrnheit-vs-celsius.md index 2d64da55..85af9c5a 100644 --- a/js1/vstup-vystup-objekty/cvdoma/fahrnheit-vs-celsius.md +++ b/js1/vstup-vystup-objekty/cvdoma/fahrnheit-vs-celsius.md @@ -1,6 +1,7 @@ --- title: Fahrnheit vs. Celsius demand: 3 +lead: Vytvořte převeďník stupňů Fahrenheita na stupně Celsia. --- 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í. @@ -19,5 +20,4 @@ document.body.innerHTML = Math.round((5 * (fahrnheit - 32)) / 9) + ' stupňů Celsia'; ``` - ::: diff --git a/js1/vstup-vystup-objekty/cvdoma/formatovac-data.md b/js1/vstup-vystup-objekty/cvdoma/formatovac-data.md index 3f99f6fb..9c704645 100644 --- a/js1/vstup-vystup-objekty/cvdoma/formatovac-data.md +++ b/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ž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 @@ -16,6 +19,7 @@ Vytvořte stránku, která se zeptá uživatele na den, měsíc a rok. 2021

``` +1. Zkuste tyto prvky lehce nastylovat pomocí CSS, aby vypadaly hezky. :::solution @@ -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 += '

' + den + '. ' + diff --git a/js1/vstup-vystup-objekty/cvdoma/letenka.md b/js1/vstup-vystup-objekty/cvdoma/letenka.md index 859b1709..fa5a7840 100644 --- a/js1/vstup-vystup-objekty/cvdoma/letenka.md +++ b/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 = '

Startovní země: ' + flight.countryFrom.name + '

'; document.body.innerHTML += '

Startovní země: ' + flight.countryTo.name + '

'; -const { baglimit } = flight; +const baglimit = flight.baglimit; document.body.innerHTML += '

Maximální šířka příručního zavazadla: ' + baglimit.hand_width + @@ -146,5 +148,4 @@ document.body.innerHTML += Math.ceil(flight.bags_price[2] * flight.conversion.EUR) + ' Kč

'; ``` - ::: diff --git a/js1/vstup-vystup-objekty/cvlekce/knihovna.md b/js1/vstup-vystup-objekty/cvlekce/knihovna.md index 13773969..f8830293 100644 --- a/js1/vstup-vystup-objekty/cvlekce/knihovna.md +++ b/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. @@ -43,5 +45,4 @@ const book = { }, }; ``` - ::: diff --git a/js1/vstup-vystup-objekty/cvlekce/ockovani-objekty.md b/js1/vstup-vystup-objekty/cvlekce/ockovani-objekty.md index ac2c038e..3a7ba824 100644 --- a/js1/vstup-vystup-objekty/cvlekce/ockovani-objekty.md +++ b/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. @@ -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`. :::solution ```js const person = { - name: prompt("Jake je vase jmeno a primeni?"), + name: prompt("Jake je vase jmeno a primeni?"), age: Number(prompt("Jaky je vas vek?")), + language: window.navigator.language, }; ​ document.body.innerHTML += "

Zadane jmeno je: " + person.name + ", vas vek je: " + person.age + ", boli ste zaregistrovany na ockovanie.

"; diff --git a/js1/vstup-vystup-objekty/cvlekce/ockovani.md b/js1/vstup-vystup-objekty/cvlekce/ockovani.md index 9dd5b1e6..ad4897d5 100644 --- a/js1/vstup-vystup-objekty/cvlekce/ockovani.md +++ b/js1/vstup-vystup-objekty/cvlekce/ockovani.md @@ -1,12 +1,14 @@ --- 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 ``` @@ -14,8 +16,8 @@ Představte si, že vyrábíte registrační systém na očkování proti COVID- :::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 += "

" + celeJmeno + ", vek: " + vek + "

"; ``` diff --git a/js1/vstup-vystup-objekty/cvlekce/realitka.md b/js1/vstup-vystup-objekty/cvlekce/realitka.md index b4d03eef..d1b3edae 100644 --- a/js1/vstup-vystup-objekty/cvlekce/realitka.md +++ b/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 += "

Dispozice: "+ apartment.disposition +"

" document.body.innerHTML += "

Najem bez poplatku: "+ apartment.price.rent +"

" document.body.innerHTML += "

Vymera bytu: "+ apartment.area.floorage + apartment.area.units +"

" ​ -const { city, district } = apartment; +const city = apartment.city; +const district = apartment.district; ​ document.body.innerHTML += "

Mesto: "+ city +"

" document.body.innerHTML += "

Mestska cast: "+ district +"

" diff --git a/js1/vstup-vystup-objekty/cvlekce/vyplata-stranka.md b/js1/vstup-vystup-objekty/cvlekce/vyplata-stranka.md index ee1cb36b..26454b1b 100644 --- a/js1/vstup-vystup-objekty/cvlekce/vyplata-stranka.md +++ b/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 += "

" + (hodinovaSazba*pocetHodin*pocetDni) + "

"; +document.body.innerHTML += "

Vaše vyplata činí " + (hodinovaSazba*pocetHodin*pocetDni) + " korun

"; ``` ::: diff --git a/js1/vstup-vystup-objekty/entry.yml b/js1/vstup-vystup-objekty/entry.yml index 320036d7..eae07060 100644 --- a/js1/vstup-vystup-objekty/entry.yml +++ b/js1/vstup-vystup-objekty/entry.yml @@ -6,7 +6,7 @@ sections: - konverze-hodnot - cv-vstup-vystup - objekty - - destrukturovani + - pripravene - cv-objekty - shrnuti - cv-ulozky diff --git a/js1/vstup-vystup-objekty/konverze-hodnot.md b/js1/vstup-vystup-objekty/konverze-hodnot.md index 8871a82a..2f33c29a 100644 --- a/js1/vstup-vystup-objekty/konverze-hodnot.md +++ b/js1/vstup-vystup-objekty/konverze-hodnot.md @@ -2,61 +2,71 @@ Ú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 -> 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 +=
; // 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 +75,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 +96,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 = '

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

'; +document.body.innerHTML += '

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

'; ``` diff --git a/js1/vstup-vystup-objekty/objekty.md b/js1/vstup-vystup-objekty/objekty.md index 67850b71..e27fb5e8 100644 --- a/js1/vstup-vystup-objekty/objekty.md +++ b/js1/vstup-vystup-objekty/objekty.md @@ -1,6 +1,6 @@ ## Objekty -Prozatím jsme v naších programech pracovali pouze s čísly a řetězci. V reálnějších programech však budeme potřebovat do naších proměných uložit více než pouze jednu informaci. Představte si například, že chceme evidovat doručovací adresu uživatele e-shopu. Každá adresa má ulici, číslo domu, město a PSČ. Takovou informaci bychom mohli zkusit nacpat do jednoho řetězce třeba takto. +Prozatím jsme v našich programech pracovali pouze s čísly a řetězci. V reálnějších programech však budeme potřebovat do naších proměných uložit více než pouze jednu informaci. Představte si například, že chceme evidovat doručovací adresu uživatele e-shopu. Každá adresa má ulici, číslo domu, město a PSČ. Takovou informaci bychom mohli zkusit nacpat do jednoho řetězce třeba takto. ```js const address = 'Pod Kaštany 31, 123 11 Horní Dlouhonosy'; @@ -23,15 +23,22 @@ Objekt vytvoříme tak, že do složených závorek vložíme čárkou oddělen Pomocí klíčů pak můžeme z objektu získat jednotlivé hodnoty použitím takzvané :term{cs="tečkové notace" en="dot notation"}. -```jscon -> address.city -"Horní Dlouhonosy" -> address.streetName -"Pod Kaštany" -> address.number -31 +```js +document.innerHTML += '

' + address.city + '

'; +document.innerHTML += '

' + address.streetName + '

'; +document.innerHTML += '

' + address.address.number + '

'; +``` + +Objekty do stránky vždy vypisujeme po jednotlivých položkách. Pokud bychom se pokusili vypsat celý objekt takto: + +```js +document.innerHTML += '

' + address + '

'; ``` +na stránce se objeví pouze tajemné `[object Object]`. Protože objekt může být velmi složitá struktura, prohlížeč neví, jak by ji měl správně vypsat a snaží se vytvořit alespoň nějaký textový popis, který nám však moc nepomůže. + +### Klíče + Klíče v objektu se chovají podobně jako proměnné. Řídí se stejnými pravidly pro názvosloví. Můžete tedy mít objekty třeba v hadí notací. ```js @@ -43,7 +50,7 @@ const address = { }; ``` -Nelze však použít například klíče s pomlčkou. +Nelze však použít například klíče s pomlčkou, tedy kebab notaci, na kterou jsem zvyklí z CSS. ```js const address = { @@ -54,7 +61,7 @@ const address = { }; ``` -Pokud trváme na tom, že v klíči chceme mít pomlčku nebo dokonce mezeru, můžeme jej uzavřít do uvozovek jako řetězec. +Pokud trváme na tom, že v klíči chceme mít pomlčku nebo dokonce mezeru, můžeme jej uzavřít do uvozovek jako řetězec: ```js const address = { @@ -67,19 +74,17 @@ const address = { Potíž je v tom, že k takovým klíčům se už pomocí tečkové notace nedostaneme a musíme použít jiný zápis. -```jscon -> address['street name'] -"Pod Kaštany" -> address['postal-code'] -"123 11" +```js +document.innerHTML += '

' + address.address['street name'] + '

'; +document.innerHTML += '

' + address['postal-code'] + '

'; ``` -Tento zápis není tak šikovný jako tečková notace a proto se budeme klíčům v uvozovkách snažit co nejvíce vyhýbat. +Tento zápis není tak šikovný jako tečková notace a proto se v praxi používá pouze zřídka a v situacích, kdy to z nějakého technického důvodu nejde jinak. Hodnoty uvnitř objektů lze také měnit. Takto například můžeme změnit číslo ulice. -```jscon -> address.number = 28 +```js +address.number = 28 ``` Všimněte si, že při vytváření objekt ukládáme do proměnné, jde tedy o nový typ hodnoty, podobně jako číslo nebo řetězec. To mimo jiné znamená, že uvnitř objektu můžeme mít vnořené další objekty. Takto bychom mohli například reprezentovat uživatele i s doručovací adresou. @@ -100,9 +105,8 @@ const user1 = { Kdybychom pak chtěli získat například město, kam máme objednané zboží doručit, opět použijeme tečkovou notaci. -```jscon -> user1.address.city -"Horní Dlouhonosy" +```js +user1.address.city ``` Díky objektům tak můžeme v našich programech reprezentovat i velmi komplikovaná data. diff --git a/js1/vstup-vystup-objekty/pripravene.md b/js1/vstup-vystup-objekty/pripravene.md new file mode 100644 index 00000000..31efdd2a --- /dev/null +++ b/js1/vstup-vystup-objekty/pripravene.md @@ -0,0 +1,34 @@ +## Připravené objekty + +Po zkušenosti s objekty jste jistě odhalili, že `document.body.innerHTML` není tak úplně název proměnné, jak jsme se vám snažili do této chvíle namluvit. Z tečkové notace je poznat, že máme co dočinění se zanořenými objekty. + +V prohlížeči máme k dispozici celou řadu dopředu připravených objektů, které nám usnadňují práci se stránkou. Jeden takový je uložen v proměnné `document` a poskytuje různé informace o naší stránce. + +Například vlastnost `document.title` obsahuje název naší stránky z tagu ``. Snadno jej tak můžeme změnit. + +```js +document.title = 'Objekty v JavaScriptu | Můj blogísek'; +``` + +Jak už víme, vlastnost `document.body` obsahuje objekt reprezentující element `<body>`. A pomocí jeho vlastnosti `innerHTML` můžeme měnit obsah tohoto elementu. + +### Objekt `window` + +Další zajímavý objekt je uložen v proměnné `window`. Zde se dozvíme informace o okně prohlížeče, ve kterém stránku spouštíme. + +Můžeme například zjistit: + +1. Jakou má uživatel šířku a výšku okna prohlížeče: + ```js + const width = window.innerWidth; + const height = window.innerHeight; + ``` +2. Jaký má aktuálně nastavený jazyk: + ```js + const language = window.navigator.language; + ``` +3. Název prohlížeče: + ```js + const browser = window.navigator.userAgent; + ``` + diff --git a/js1/vstup-vystup-objekty/shrnuti.md b/js1/vstup-vystup-objekty/shrnuti.md index dc364f06..149149ff 100644 --- a/js1/vstup-vystup-objekty/shrnuti.md +++ b/js1/vstup-vystup-objekty/shrnuti.md @@ -6,4 +6,4 @@ Po této lekci byste měli vědět a znát - jak správně konvertovat hodnoty pomocí funkcí `Number` a `String`, - jak ukládat informace do objektů a jak k těmto informacím přistupovat pomocí tečkové notace, - jak vytvářet vnořené objekty, -- jednoduché destrukturování. +- k čemu slouží proměnné `document` a `window`. 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. From 0a85d0a9a4917a7bff6c77025daa04dd6f8a35ab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Martin=20Podlouck=C3=BD?= <podlouckymartin@gmail.com> Date: Wed, 13 Sep 2023 08:30:20 +0200 Subject: [PATCH 2/5] =?UTF-8?q?P=C5=99eklep?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js1/vstup-vystup-objekty/cvdoma/fahrnheit-vs-celsius.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js1/vstup-vystup-objekty/cvdoma/fahrnheit-vs-celsius.md b/js1/vstup-vystup-objekty/cvdoma/fahrnheit-vs-celsius.md index 85af9c5a..68103732 100644 --- a/js1/vstup-vystup-objekty/cvdoma/fahrnheit-vs-celsius.md +++ b/js1/vstup-vystup-objekty/cvdoma/fahrnheit-vs-celsius.md @@ -1,7 +1,7 @@ --- title: Fahrnheit vs. Celsius demand: 3 -lead: Vytvořte převeďník stupňů Fahrenheita na stupně Celsia. +lead: Vytvořte převodník stupňů Fahrenheita na stupně Celsia. --- 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í. From 370b8e626c4a2e83efbfe182569d9cc70675bf97 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Martin=20Podlouck=C3=BD?= <podlouckymartin@gmail.com> Date: Wed, 13 Sep 2023 08:31:06 +0200 Subject: [PATCH 3/5] =?UTF-8?q?P=C5=99=C3=ADstup=20ke=20cvi=C4=8Den=C3=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js1/vstup-vystup-objekty/cvdoma/fahrnheit-vs-celsius.md | 1 + 1 file changed, 1 insertion(+) diff --git a/js1/vstup-vystup-objekty/cvdoma/fahrnheit-vs-celsius.md b/js1/vstup-vystup-objekty/cvdoma/fahrnheit-vs-celsius.md index 68103732..6252ff93 100644 --- a/js1/vstup-vystup-objekty/cvdoma/fahrnheit-vs-celsius.md +++ b/js1/vstup-vystup-objekty/cvdoma/fahrnheit-vs-celsius.md @@ -2,6 +2,7 @@ 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í. From de05facf226465c20d8dd04d9cce392746b4f541 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Martin=20Podlouck=C3=BD?= <podlouckymartin@gmail.com> Date: Wed, 13 Sep 2023 08:32:50 +0200 Subject: [PATCH 4/5] Opravy QA --- .../cvdoma/fahrnheit-vs-celsius.md | 1 + js1/vstup-vystup-objekty/cvdoma/letenka.md | 1 + js1/vstup-vystup-objekty/cvlekce/knihovna.md | 1 + .../cvlekce/ockovani-objekty.md | 2 +- js1/vstup-vystup-objekty/konverze-hodnot.md | 51 +++++++++++-------- js1/vstup-vystup-objekty/objekty.md | 4 +- js1/vstup-vystup-objekty/pripravene.md | 7 ++- 7 files changed, 39 insertions(+), 28 deletions(-) diff --git a/js1/vstup-vystup-objekty/cvdoma/fahrnheit-vs-celsius.md b/js1/vstup-vystup-objekty/cvdoma/fahrnheit-vs-celsius.md index 6252ff93..3e863321 100644 --- a/js1/vstup-vystup-objekty/cvdoma/fahrnheit-vs-celsius.md +++ b/js1/vstup-vystup-objekty/cvdoma/fahrnheit-vs-celsius.md @@ -21,4 +21,5 @@ document.body.innerHTML = Math.round((5 * (fahrnheit - 32)) / 9) + ' stupňů Celsia'; ``` + ::: diff --git a/js1/vstup-vystup-objekty/cvdoma/letenka.md b/js1/vstup-vystup-objekty/cvdoma/letenka.md index fa5a7840..a9f2c96d 100644 --- a/js1/vstup-vystup-objekty/cvdoma/letenka.md +++ b/js1/vstup-vystup-objekty/cvdoma/letenka.md @@ -148,4 +148,5 @@ document.body.innerHTML += Math.ceil(flight.bags_price[2] * flight.conversion.EUR) + ' Kč</p>'; ``` + ::: diff --git a/js1/vstup-vystup-objekty/cvlekce/knihovna.md b/js1/vstup-vystup-objekty/cvlekce/knihovna.md index f8830293..bd33b960 100644 --- a/js1/vstup-vystup-objekty/cvlekce/knihovna.md +++ b/js1/vstup-vystup-objekty/cvlekce/knihovna.md @@ -45,4 +45,5 @@ const book = { }, }; ``` + ::: diff --git a/js1/vstup-vystup-objekty/cvlekce/ockovani-objekty.md b/js1/vstup-vystup-objekty/cvlekce/ockovani-objekty.md index 3a7ba824..787d5588 100644 --- a/js1/vstup-vystup-objekty/cvlekce/ockovani-objekty.md +++ b/js1/vstup-vystup-objekty/cvlekce/ockovani-objekty.md @@ -15,7 +15,7 @@ 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`. +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`. :::solution diff --git a/js1/vstup-vystup-objekty/konverze-hodnot.md b/js1/vstup-vystup-objekty/konverze-hodnot.md index 2f33c29a..d87a6e41 100644 --- a/js1/vstup-vystup-objekty/konverze-hodnot.md +++ b/js1/vstup-vystup-objekty/konverze-hodnot.md @@ -5,65 +5,74 @@ Tato operace například do stránky vypíše číslo 17: ```js -document.body.innerHTML += 12 + 5 +document.body.innerHTML += 12 + 5; ``` Naopak tato operace do stránky vypíše řetězec `125`: ```js -document.body.innerHTML += '12' + '5' +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 +document.body.innerHTML += '12' + 5; ``` + ```js -document.body.innerHTML += 12 + '5' +document.body.innerHTML += 12 + '5'; ``` + ```js -document.body.innerHTML += 1 + 2 + 3 + '4' +document.body.innerHTML += 1 + 2 + 3 + '4'; ``` + ```js -document.body.innerHTML += '1' + 2 + 3 + 4 +document.body.innerHTML += '1' + 2 + 3 + 4; ``` Konverze fungují i pro jiné operátory, napříkad násobení. ```js -document.body.innerHTML += 12 * 5 +document.body.innerHTML += 12 * 5; ``` + ```js -document.body.innerHTML += '12' * 5 +document.body.innerHTML += '12' * 5; ``` + ```js -document.body.innerHTML += 12 * '5' +document.body.innerHTML += 12 * '5'; ``` + ```js -document.body.innerHTML += '12' * '5' +document.body.innerHTML += '12' * '5'; ``` Dokonce takto funguje i zbytek po dělení. ```js -document.body.innerHTML += 12 % 5 +document.body.innerHTML += 12 % 5; ``` + ```js -document.body.innerHTML += '12' % 5 +document.body.innerHTML += '12' % 5; ``` + ```js -document.body.innerHTML += 12 % '5' +document.body.innerHTML += 12 % '5'; ``` + ```js -document.body.innerHTML += '12' % '5' +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 jednotlivých krocích si pak můžeme vyzkoušet, co se dělo pak. ```js -const start = 15 -const delka = '10' +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 @@ -76,16 +85,16 @@ 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`. ```js -String(12) // Vrátí řetězec '12' -String(-2.48) // Vrátí řetězec '-2.48' +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`. ```js -Number('12') // Vrátí číslo 12 -Number('-2.48') // Vrátí číslo -2.48 -Number('-2,48') // Vrátí hodnotu NaN +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]. diff --git a/js1/vstup-vystup-objekty/objekty.md b/js1/vstup-vystup-objekty/objekty.md index e27fb5e8..75865442 100644 --- a/js1/vstup-vystup-objekty/objekty.md +++ b/js1/vstup-vystup-objekty/objekty.md @@ -84,7 +84,7 @@ Tento zápis není tak šikovný jako tečková notace a proto se v praxi použ Hodnoty uvnitř objektů lze také měnit. Takto například můžeme změnit číslo ulice. ```js -address.number = 28 +address.number = 28; ``` Všimněte si, že při vytváření objekt ukládáme do proměnné, jde tedy o nový typ hodnoty, podobně jako číslo nebo řetězec. To mimo jiné znamená, že uvnitř objektu můžeme mít vnořené další objekty. Takto bychom mohli například reprezentovat uživatele i s doručovací adresou. @@ -106,7 +106,7 @@ const user1 = { Kdybychom pak chtěli získat například město, kam máme objednané zboží doručit, opět použijeme tečkovou notaci. ```js -user1.address.city +user1.address.city; ``` Díky objektům tak můžeme v našich programech reprezentovat i velmi komplikovaná data. diff --git a/js1/vstup-vystup-objekty/pripravene.md b/js1/vstup-vystup-objekty/pripravene.md index 31efdd2a..cd0f4c24 100644 --- a/js1/vstup-vystup-objekty/pripravene.md +++ b/js1/vstup-vystup-objekty/pripravene.md @@ -1,6 +1,6 @@ ## Připravené objekty -Po zkušenosti s objekty jste jistě odhalili, že `document.body.innerHTML` není tak úplně název proměnné, jak jsme se vám snažili do této chvíle namluvit. Z tečkové notace je poznat, že máme co dočinění se zanořenými objekty. +Po zkušenosti s objekty jste jistě odhalili, že `document.body.innerHTML` není tak úplně název proměnné, jak jsme se vám snažili do této chvíle namluvit. Z tečkové notace je poznat, že máme co dočinění se zanořenými objekty. V prohlížeči máme k dispozici celou řadu dopředu připravených objektů, které nám usnadňují práci se stránkou. Jeden takový je uložen v proměnné `document` a poskytuje různé informace o naší stránce. @@ -14,7 +14,7 @@ Jak už víme, vlastnost `document.body` obsahuje objekt reprezentující elemen ### Objekt `window` -Další zajímavý objekt je uložen v proměnné `window`. Zde se dozvíme informace o okně prohlížeče, ve kterém stránku spouštíme. +Další zajímavý objekt je uložen v proměnné `window`. Zde se dozvíme informace o okně prohlížeče, ve kterém stránku spouštíme. Můžeme například zjistit: @@ -25,10 +25,9 @@ Můžeme například zjistit: ``` 2. Jaký má aktuálně nastavený jazyk: ```js - const language = window.navigator.language; + const language = window.navigator.language; ``` 3. Název prohlížeče: ```js const browser = window.navigator.userAgent; ``` - From ca9039ac76849bb8d10caa95731c28b3a7cb9f7d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Martin=20Podlouck=C3=BD?= <podlouckymartin@gmail.com> Date: Fri, 15 Sep 2023 09:05:35 +0200 Subject: [PATCH 5/5] =?UTF-8?q?Vlastnosti=20outerWidth,=20outerHeight,=20c?= =?UTF-8?q?vi=C4=8Den=C3=AD=20na=20velikost=20str=C3=A1nky?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js1/vstup-vystup-objekty/cv-ulozky.md | 1 + .../cvdoma/formatovac-data.md | 7 +++++-- js1/vstup-vystup-objekty/cvdoma/velikost-okna.md | 8 ++++++++ .../cvlekce/ockovani-objekty.md | 10 ++++++---- js1/vstup-vystup-objekty/konverze-hodnot.md | 4 ++-- js1/vstup-vystup-objekty/pripravene.md | 15 ++++++++------- 6 files changed, 30 insertions(+), 15 deletions(-) create mode 100644 js1/vstup-vystup-objekty/cvdoma/velikost-okna.md diff --git a/js1/vstup-vystup-objekty/cv-ulozky.md b/js1/vstup-vystup-objekty/cv-ulozky.md index ef85df2f..6c804887 100644 --- a/js1/vstup-vystup-objekty/cv-ulozky.md +++ b/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] diff --git a/js1/vstup-vystup-objekty/cvdoma/formatovac-data.md b/js1/vstup-vystup-objekty/cvdoma/formatovac-data.md index 9c704645..05d48407 100644 --- a/js1/vstup-vystup-objekty/cvdoma/formatovac-data.md +++ b/js1/vstup-vystup-objekty/cvdoma/formatovac-data.md @@ -7,7 +7,7 @@ solutionAccess: lock 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. 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 @@ -19,7 +19,10 @@ Vytvořte stránku, která se zeptá uživatele na den, měsíc a rok a vypíše <span class="year">2021</span> </p> ``` -1. Zkuste tyto prvky lehce nastylovat pomocí CSS, aby vypadaly hezky. + +### Bonus + +Zkuste tyto prvky lehce nastylovat pomocí CSS, aby vypadaly hezky. :::solution diff --git a/js1/vstup-vystup-objekty/cvdoma/velikost-okna.md b/js1/vstup-vystup-objekty/cvdoma/velikost-okna.md new file mode 100644 index 00000000..0113bcd9 --- /dev/null +++ b/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í. diff --git a/js1/vstup-vystup-objekty/cvlekce/ockovani-objekty.md b/js1/vstup-vystup-objekty/cvlekce/ockovani-objekty.md index 787d5588..2c9ce831 100644 --- a/js1/vstup-vystup-objekty/cvlekce/ockovani-objekty.md +++ b/js1/vstup-vystup-objekty/cvlekce/ockovani-objekty.md @@ -14,19 +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>"; ``` ::: diff --git a/js1/vstup-vystup-objekty/konverze-hodnot.md b/js1/vstup-vystup-objekty/konverze-hodnot.md index d87a6e41..b98aecb4 100644 --- a/js1/vstup-vystup-objekty/konverze-hodnot.md +++ b/js1/vstup-vystup-objekty/konverze-hodnot.md @@ -14,7 +14,7 @@ Naopak tato operace do stránky vypíše řetězec `125`: 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. +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; @@ -74,7 +74,7 @@ Vybaveni touto zkušeností můžeme začít rozplétat, co se nám pokazilo na const start = 15; const delka = '10'; document.body.innerHTML += start + delka; // Vypíše '1510' -document.body.innerHTML += <br />; // Odřádkujeme +document.body.innerHTML += '<br />'; // Odřádkujeme document.body.innerHTML += '1510' % 24; // Vypíše 22 ``` diff --git a/js1/vstup-vystup-objekty/pripravene.md b/js1/vstup-vystup-objekty/pripravene.md index cd0f4c24..a1050c9f 100644 --- a/js1/vstup-vystup-objekty/pripravene.md +++ b/js1/vstup-vystup-objekty/pripravene.md @@ -18,16 +18,17 @@ Další zajímavý objekt je uložen v proměnné `window`. Zde se dozvíme info Můžeme například zjistit: -1. Jakou má uživatel šířku a výšku okna prohlížeče: +1. Jakou má stránka v prohlížeči šířku a výšku: ```js - const width = window.innerWidth; - const height = window.innerHeight; + const siteWidth = window.innerWidth; + const siteHeight = window.innerHeight; ``` -2. Jaký má aktuálně nastavený jazyk: +1. Jakou má výšku a šířku úplně celé okno prohlížeče. ```js - const language = window.navigator.language; + const browserWidth = window.outerWidth; + const browserHeight = window.outerHeight; ``` -3. Název prohlížeče: +1. Jaký má uživatel aktuálně nastavený jazyk: ```js - const browser = window.navigator.userAgent; + const language = window.navigator.language; ```