diff --git a/1-js/01-getting-started/1-intro/article.md b/1-js/01-getting-started/1-intro/article.md index b4aee0585..8bbde5708 100644 --- a/1-js/01-getting-started/1-intro/article.md +++ b/1-js/01-getting-started/1-intro/article.md @@ -18,11 +18,11 @@ Když byl JavaScript vytvořen, jmenoval se původně jinak: „LiveScript“. A Postupně při vývoji se však JavaScript stal zcela nezávislým jazykem se svou vlastní specifikací nazvanou [ECMAScript](http://cs.wikipedia.org/wiki/ECMAScript) a nyní nemá k Javě vůbec žádný vztah. ``` -Dnes je možné spouštět JavaScript nejen v prohlížeči, ale i na serveru nebo na kterémkoli zařízení, které obsahuje zvláštní program nazvaný [JavaScriptový engine](https://en.wikipedia.org/wiki/JavaScript_engine). +Dnes je možné spouštět JavaScript nejen v prohlížeči, ale i na serveru nebo na kterémkoli zařízení, které obsahuje zvláštní program nazvaný [JavaScriptový motor](https://en.wikipedia.org/wiki/JavaScript_engine). -Prohlížeč má zabudovaný engine, který se někdy nazývá „virtuální stroj JavaScriptu“. +Prohlížeč má zabudovaný motor (anglicky *engine*), který se někdy nazývá „virtuální stroj JavaScriptu“. -Různé enginy mají různá „kódová označení“. Například: +Různé motory mají různá „kódová označení“. Například: - [V8](https://en.wikipedia.org/wiki/V8_(JavaScript_engine)) -- v Chrome, Opeře a Edge. - [SpiderMonkey](https://cs.wikipedia.org/wiki/SpiderMonkey) -- ve Firefoxu. @@ -30,15 +30,15 @@ Různé enginy mají různá „kódová označení“. Například: Výše uvedené pojmy je dobré si pamatovat, protože se používají ve vývojářských článcích na internetu. Budeme je používat i my. Například je-li uvedeno „vlastnost X je podporována ve V8“, znamená to, že pravděpodobně bude fungovat v Chrome, Opeře a Edge. -```smart header="Jak enginy fungují?" +```smart header="Jak motory fungují?" -Enginy jsou složité, ale jejich základy jsou jednoduché. +Motory jsou složité, ale jejich základy jsou jednoduché. -1. Engine (v případě prohlížeče zahrnutý do něj) načte („rozebere“, „parsuje“) skript. +1. Motor (v případě prohlížeče zahrnutý do něj) načte („rozebere“, „parsuje“) skript. 2. Pak přeloží („zkompiluje“) skript do strojového kódu. 3. A pak se strojový kód hezky rychle spustí. -Při každém kroku procesu engine aplikuje optimalizace. Dokonce sleduje, jak zkompilovaný skript běží, analyzuje data, která jím protékají, a podle těchto znalostí dále optimalizuje strojový kód. +Při každém kroku procesu motor aplikuje optimalizace. Dokonce sleduje, jak zkompilovaný skript běží, analyzuje data, která jím protékají, a podle těchto znalostí dále optimalizuje strojový kód. ``` ## Co může JavaScript v prohlížeči dělat? @@ -72,13 +72,8 @@ Příklady takových omezení: Tento postup se nazývá „politika stejného původu“. Je možné ji obejít tak, že *obě stránky* musí souhlasit s výměnou dat a musí obsahovat speciální JavaScriptový kód, který to umožňuje. V tomto tutoriálu to budeme probírat. -<<<<<<< HEAD Toto omezení je zde opět pro bezpečnost uživatele. Stránka z `http://anysite.com`, kterou uživatel otevřel, nesmí mít možnost přistupovat k jiné záložce prohlížeče s URL například `http://gmail.com` a krást odtamtud informace. - JavaScript může jednoduše komunikovat po síti se serverem, z něhož přišla aktuální stránka, ale jeho schopnost získávat data z jiných sídel/domén je značně omezená. Přestože je to možné, vyžaduje to výslovný souhlas (uvedený v HTTP hlavičce) vzdálené strany. I to je bezpečnostní omezení. -======= - This limitation is, again, for the user's safety. A page from `http://anysite.com` which a user has opened must not be able to access another browser tab with the URL `http://gmail.com`, for example, and steal information from there. -- JavaScript can easily communicate over the net to the server where the current page came from. But its ability to receive data from other sites/domains is severely limited. Though possible, it requires explicit agreement (expressed in HTTP headers) from the remote side. Once again, that's a safety limitation. ->>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf ![](limitations.svg) @@ -114,7 +109,7 @@ Příklady takových jazyků: - [CoffeeScript](https://coffeescript.org/) je „syntaktický cukr“ pro JavaScript, který zavádí kratší syntaxi a tím nám umožňuje psát čistší a přesnější kód. Obvykle jej mají v oblibě vývojáři, kteří používají jazyk Ruby. - [TypeScript](https://www.typescriptlang.org/) se soustředí na přidání „striktního, silně typovaného systému“, aby zjednodušil vývoj a podporu složitých systémů. Vyvinula jej firma Microsoft. - [Flow](https://flow.org/) rovněž přidává typovací systém, ale jiným způsobem. Vyvinul jej Facebook. -- [Dart](https://www.dartlang.org/) je samostatný jazyk se svým vlastním enginem, který běží v prostředích mimo prohlížeč (např. v mobilních aplikacích), ale i ten může být transpilován do JavaScriptu. Vyvinut firmou Google. +- [Dart](https://www.dartlang.org/) je samostatný jazyk se svým vlastním motorem, který běží v prostředích mimo prohlížeč (např. v mobilních aplikacích), ale i ten může být transpilován do JavaScriptu. Vyvinut firmou Google. - [Brython](https://brython.info/) je transpiler Pythonu do JavaScriptu, který umožňuje psát aplikace v čistém Pythonu bez JavaScriptu. - [Kotlin](https://kotlinlang.org/docs/reference/js-overview.html) je moderní, stručný a bezpečný programovací jazyk, jehož cílem může být prohlížeč nebo Node. diff --git a/1-js/02-first-steps/04-variables/article.md b/1-js/02-first-steps/04-variables/article.md index 7c8d48245..b313c6c2c 100644 --- a/1-js/02-first-steps/04-variables/article.md +++ b/1-js/02-first-steps/04-variables/article.md @@ -172,11 +172,7 @@ let uživatelskéJméno; let test123; ``` -<<<<<<< HEAD Když název obsahuje více slov, obvykle se používá tzv. [velbloudí notace](https://cs.wikipedia.org/wiki/CamelCase). To znamená, že slova následují hned za sebou a každé kromě prvního začíná velkým písmenem: `můjVelmiDlouhýNázev`. -======= -When the name contains multiple words, [camelCase](https://en.wikipedia.org/wiki/CamelCase) is commonly used. That is: words go one after another, with each word except the first starting with a capital letter: `myVeryLongName`. ->>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf Zajímavé je, že v názvech je možné používat i znak dolaru `'$'` a podtržítko `'_'`. Jsou to obyčejné symboly bez zvláštního významu, podobně jako písmena. diff --git a/1-js/02-first-steps/07-type-conversions/article.md b/1-js/02-first-steps/07-type-conversions/article.md index 57f4cd364..b8cf5b179 100644 --- a/1-js/02-first-steps/07-type-conversions/article.md +++ b/1-js/02-first-steps/07-type-conversions/article.md @@ -146,4 +146,4 @@ Většinu těchto pravidel je snadné pochopit a zapamatovat si. Významné výj - `undefined` převedené na číslo je `NaN`, ne `0`. - `"0"` a řetězce obsahující jen mezery, např. `" "`, jsou po převodu na boolean vyhodnoceny jako true. -O objektech se zde nezmiňujeme. Později, až se v JavaScriptu naučíme všechny potřebné základy, se k nim vrátíme v kapitole , která je věnována výlučně objektům. +O objektech se zde nezmiňujeme. Později, až se v JavaScriptu naučíme všechny potřebné základy, se k nim vrátíme v kapitole , která je věnována výlučně objektům. \ No newline at end of file diff --git a/1-js/02-first-steps/08-operators/article.md b/1-js/02-first-steps/08-operators/article.md index 2a1d3183c..c600e73fa 100644 --- a/1-js/02-first-steps/08-operators/article.md +++ b/1-js/02-first-steps/08-operators/article.md @@ -267,11 +267,7 @@ alert( c ); // 4 Zřetězená přiřazení se vyhodnocují zprava doleva. Nejprve se vyhodnotí výraz `2 + 2` nejvíce vpravo a jeho hodnota se pak přiřadí do proměnných vlevo: `c`, `b` a `a`. Nakonec tedy budou mít všechny proměnné stejnou hodnotu. -<<<<<<< HEAD Opět je pro účely čitelnosti lepší rozdělit takový kód do více řádků: -======= -Once again, for the purposes of readability it's better to split such code into a few lines: ->>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf ```js c = 2 + 2; diff --git a/1-js/02-first-steps/10-ifelse/2-check-standard/ifelse_task2.svg b/1-js/02-first-steps/10-ifelse/2-check-standard/ifelse_task2.svg index fb567c1c1..f2eca800a 100644 --- a/1-js/02-first-steps/10-ifelse/2-check-standard/ifelse_task2.svg +++ b/1-js/02-first-steps/10-ifelse/2-check-standard/ifelse_task2.svg @@ -1 +1 @@ -ZačátekVy to nevíte? “ECMAScript”!Správně!What's the "oficiální" název JavaScript?JinéECMAScript \ No newline at end of file +ZačátekVy to nevíte? “ECMAScript”!Správně!Jaký je "oficiální" název JavaScriptu?JinéECMAScript \ No newline at end of file diff --git a/1-js/02-first-steps/11-logical-operators/9-check-login/ifelse_task.svg b/1-js/02-first-steps/11-logical-operators/9-check-login/ifelse_task.svg index 9e4caf654..9f3d967ac 100644 --- a/1-js/02-first-steps/11-logical-operators/9-check-login/ifelse_task.svg +++ b/1-js/02-first-steps/11-logical-operators/9-check-login/ifelse_task.svg @@ -1 +1 @@ -ZačátekZrušenoZrušenoVítejte!Neznám vásChybné hesloKdo je tam?Heslo?ZrušenoZrušenoAdminMistrJinéJiné \ No newline at end of file +ZačátekZrušenoZrušenoVítejte!Neznám vásChybné hesloKdo je tam?Heslo?ZrušenoZrušenoSprávceMistrJinéJiné \ No newline at end of file diff --git a/1-js/03-code-quality/01-debugging-chrome/chrome-sources-breakpoint.svg b/1-js/03-code-quality/01-debugging-chrome/chrome-sources-breakpoint.svg index 63bf4966e..71cd45bc1 100644 --- a/1-js/03-code-quality/01-debugging-chrome/chrome-sources-breakpoint.svg +++ b/1-js/03-code-quality/01-debugging-chrome/chrome-sources-breakpoint.svg @@ -1 +1 @@ -here's the listbreakpoints \ No newline at end of file +zde je seznamzarážky \ No newline at end of file diff --git a/1-js/03-code-quality/01-debugging-chrome/chrome-sources-debugger-pause.svg b/1-js/03-code-quality/01-debugging-chrome/chrome-sources-debugger-pause.svg index 0147c2e0a..b5fc0b33d 100644 --- a/1-js/03-code-quality/01-debugging-chrome/chrome-sources-debugger-pause.svg +++ b/1-js/03-code-quality/01-debugging-chrome/chrome-sources-debugger-pause.svg @@ -1 +1 @@ -213see the outer call detailswatch expressionscurrent variables \ No newline at end of file +213viz detaily vnějšího volánísledování výrazůaktuální proměnné \ No newline at end of file diff --git a/1-js/03-code-quality/01-debugging-chrome/chrome-sources-debugger-trace-1.svg b/1-js/03-code-quality/01-debugging-chrome/chrome-sources-debugger-trace-1.svg index 9fa1b3b8c..be27a8106 100644 --- a/1-js/03-code-quality/01-debugging-chrome/chrome-sources-debugger-trace-1.svg +++ b/1-js/03-code-quality/01-debugging-chrome/chrome-sources-debugger-trace-1.svg @@ -1 +1 @@ -nested calls \ No newline at end of file +vnořená volání \ No newline at end of file diff --git a/1-js/03-code-quality/02-coding-style/1-style-errors/solution.md b/1-js/03-code-quality/02-coding-style/1-style-errors/solution.md index 29e8102a9..2e6870983 100644 --- a/1-js/03-code-quality/02-coding-style/1-style-errors/solution.md +++ b/1-js/03-code-quality/02-coding-style/1-style-errors/solution.md @@ -2,7 +2,6 @@ Měli byste si všimnout následujícího: ```js no-beautify -<<<<<<< HEAD function mocnina(x,n) // <- chybí mezera mezi argumenty { // <- levá složená závorka na zvláštním řádku let výsledek=1; // <- chybějí mezery před a za = @@ -17,22 +16,6 @@ if (n<=0) // <- chybějí mezery uvnitř (n <= 0) a nad ním by měl být práz { // <- levá složená závorka na zvláštním řádku // níže - dlouhé řádky by měly být rozděleny na více řádků pro lepší čitelnost alert(`${n}-tá mocnina není podporována, zadejte prosím celé číslo větší než nula`); -======= -function pow(x,n) // <- no space between arguments -{ // <- curly brace on a separate line - let result=1; // <- no spaces before or after = - for(let i=0;i>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf } else // <- toto může být na jediném řádku: "} else {" { diff --git a/1-js/03-code-quality/04-ninja-code/article.md b/1-js/03-code-quality/04-ninja-code/article.md index 20901b22a..c6b65574c 100644 --- a/1-js/03-code-quality/04-ninja-code/article.md +++ b/1-js/03-code-quality/04-ninja-code/article.md @@ -135,7 +135,7 @@ Přidejte novou proměnnou jen tehdy, když je to absolutně nezbytné. Jinak místo toho opakovaně používejte již existující názvy. Jen do nich zapisujte nové hodnoty. -Ve funkci se snažte používat jedině proměnné, které byly předány jako argumenty. +Ve funkci se snažte používat jedině proměnné, které byly předány jako parametry. Díky tomu je opravdu těžké poznat, co vlastně proměnná obsahuje *právě teď*. A také, odkud to přišlo. Cílem je procvičit intuici a paměť člověka, který čte kód. Osoba se slabou intuicí bude muset analyzovat kód řádek po řádku a stopovat změny v každé větvi. @@ -171,6 +171,7 @@ Dejte každému vědět, jak úžasné jsou vaše entity! Názvy jako `superElem Jistě, na jednu stranu musíte něco napsat: `super..`, `mega..`, `pěkný..`. Ale na druhou stranu to neposkytuje žádné detaily. Čtenář se může rozhodnout hledat jejich skrytý význam a strávit meditací hodinu nebo dvě své placené pracovní doby. +Dejte každému vědět, jak úžasné jsou vaše entity! Názvy jako `superElement`, `megaRámec` nebo `pěknýPrvek` čtenáře zaručeně osvítí. ## Překrývejte vnější proměnné diff --git a/1-js/03-code-quality/index.md b/1-js/03-code-quality/index.md index 2ef64fa69..78218ce6a 100644 --- a/1-js/03-code-quality/index.md +++ b/1-js/03-code-quality/index.md @@ -1,3 +1,3 @@ -# Code quality +# Kvalita kódu -This chapter explains coding practices that we'll use further in the development. +Tato kapitola vysvětluje programovací praktiky, které budeme používat nadále při vývoji. diff --git a/1-js/04-object-basics/01-object/article.md b/1-js/04-object-basics/01-object/article.md index 3ce06845d..841dd000e 100644 --- a/1-js/04-object-basics/01-object/article.md +++ b/1-js/04-object-basics/01-object/article.md @@ -5,11 +5,7 @@ Jak víme z kapitoly , JavaScript obsahuje osm datových typů. Sedm Naproti tomu objekty se používají k uložení kolekcí různých dat pod klíči a složitějších entit. V JavaScriptu objekty pronikají do téměř všech aspektů jazyka. Musíme jim tedy porozumět předtím, než půjdeme do hloubky v něčem jiném. -<<<<<<< HEAD Objekt můžeme vytvořit pomocí složených závorek `{…}` obsahujících nepovinný seznam *vlastností*. Vlastnost je dvojice „klíč: hodnota“, v níž `klíč` je řetězec (nazývá se také „název vlastnosti“) a `hodnota` může být cokoli. -======= -An object can be created with curly braces `{…}` with an optional list of *properties*. A property is a "key: value" pair, where `key` is a string (also called a "property name"), and `value` can be anything. ->>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf Objekt si můžeme představit jako skříň s označenými spisy. Každý kousek dat je uložen podle klíče ve svém spisu. Je pak lehké najít spis podle jeho názvu nebo spis přidat či odstranit. @@ -24,11 +20,7 @@ let uživatel = {}; // syntaxe „objektový literál“ ![](object-user-empty.svg) -<<<<<<< HEAD Obvykle se používají složené závorky `{...}`. Tato deklarace se nazývá *objektový literál*. -======= -Usually, the curly braces `{...}` are used. That declaration is called an *object literal*. ->>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf ## Literály a vlastnosti diff --git a/1-js/04-object-basics/06-constructor-new/article.md b/1-js/04-object-basics/06-constructor-new/article.md index 2f21faac7..564183bba 100644 --- a/1-js/04-object-basics/06-constructor-new/article.md +++ b/1-js/04-object-basics/06-constructor-new/article.md @@ -170,8 +170,8 @@ alert( new MalýUživatel().jméno ); // Jan Konstruktory obvykle příkaz `return` neobsahují. Speciální chování s vracením objektů zde zmiňujeme zejména pro úplnost. -````smart header="Omitting parentheses" -By the way, we can omit parentheses after `new`: +````smart header="Vypuštění závorek" +Mimochodem, závorky za `new` můžeme vypustit: ```js let uživatel = new Uživatel; // <-- bez závorek diff --git a/1-js/04-object-basics/index.md b/1-js/04-object-basics/index.md index d2387aafa..7855038e9 100644 --- a/1-js/04-object-basics/index.md +++ b/1-js/04-object-basics/index.md @@ -1 +1 @@ -# Objects: the basics +# Objekty: základy diff --git a/1-js/05-data-types/10-destructuring-assignment/article.md b/1-js/05-data-types/10-destructuring-assignment/article.md index 0aed0bf03..486755ccc 100644 --- a/1-js/05-data-types/10-destructuring-assignment/article.md +++ b/1-js/05-data-types/10-destructuring-assignment/article.md @@ -80,13 +80,8 @@ To funguje, protože vnitřně se destrukturační přiřazení vykonává itera ```` -<<<<<<< HEAD ````smart header="Na levé straně můžeme přiřazovat do čehokoli" Na levé straně můžeme používat cokoli, do čeho lze přiřazovat. -======= -````smart header="Assign to anything on the left-side" -We can use any "assignables" on the left side. ->>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf Například vlastnost objektu: ```js run diff --git a/1-js/05-data-types/index.md b/1-js/05-data-types/index.md index 246e2bc91..43fef53d7 100644 --- a/1-js/05-data-types/index.md +++ b/1-js/05-data-types/index.md @@ -1,3 +1,3 @@ -# Data types +# Datové typy -More data structures and more in-depth study of the types. +Další datové struktury a další hloubkové studium typů. diff --git a/1-js/06-advanced-functions/08-settimeout-setinterval/article.md b/1-js/06-advanced-functions/08-settimeout-setinterval/article.md index a972d2d62..10866f044 100644 --- a/1-js/06-advanced-functions/08-settimeout-setinterval/article.md +++ b/1-js/06-advanced-functions/08-settimeout-setinterval/article.md @@ -217,11 +217,7 @@ A zde je obrázek pro vnořený `setTimeout`: ![](settimeout-interval.svg) -<<<<<<< HEAD -**Vnořený `setTimeout` zaručuje pevnou prodlevu (zde 100 ms).** -======= -**The nested `setTimeout` ensures a minimum delay (100ms here) between the end of one call and the beginning of the subsequent one.** ->>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf +**Vnořený `setTimeout` zaručuje pevnou prodlevu (zde 100 ms) před koncem jednoho volání a začátkem následujícího.** Je to proto, že nové volání je naplánováno na konci předchozího. diff --git a/1-js/06-advanced-functions/index.md b/1-js/06-advanced-functions/index.md index 7800dcc42..56d9316e7 100644 --- a/1-js/06-advanced-functions/index.md +++ b/1-js/06-advanced-functions/index.md @@ -1 +1 @@ -# Advanced working with functions +# Pokročilá práce s funkcemi diff --git a/1-js/08-prototypes/index.md b/1-js/08-prototypes/index.md index 8554a0e30..b52fd9cab 100644 --- a/1-js/08-prototypes/index.md +++ b/1-js/08-prototypes/index.md @@ -1 +1 @@ -# Prototypes, inheritance +# Prototypy, dědičnost diff --git a/1-js/09-classes/05-extend-natives/article.md b/1-js/09-classes/05-extend-natives/article.md index 28b4c6eb6..b174de3ca 100644 --- a/1-js/09-classes/05-extend-natives/article.md +++ b/1-js/09-classes/05-extend-natives/article.md @@ -1,89 +1,89 @@ -# Extending built-in classes +# Rozšiřování vestavěných tříd -Built-in classes like Array, Map and others are extendable also. +Rozšiřovat lze i vestavěné třídy, například Array, Map a jiné. -For instance, here `PowerArray` inherits from the native `Array`: +Například zde `SilnéPole` je zděděno z nativního `Array`: ```js run -// add one more method to it (can do more) -class PowerArray extends Array { - isEmpty() { +// přidáme do něj jednu další metodu (můžeme i víc) +class SilnéPole extends Array { + jePrázdné() { return this.length === 0; } } -let arr = new PowerArray(1, 2, 5, 10, 50); -alert(arr.isEmpty()); // false +let pole = new SilnéPole(1, 2, 5, 10, 50); +alert(pole.jePrázdné()); // false -let filteredArr = arr.filter(item => item >= 10); -alert(filteredArr); // 10, 50 -alert(filteredArr.isEmpty()); // false +let filtrovanéPole = pole.filter(prvek => prvek >= 10); +alert(filtrovanéPole); // 10, 50 +alert(filtrovanéPole.jePrázdné()); // false ``` -Please note a very interesting thing. Built-in methods like `filter`, `map` and others -- return new objects of exactly the inherited type `PowerArray`. Their internal implementation uses the object's `constructor` property for that. +Všimněte si prosíme velmi zajímavé věci. Vestavěné metody jako `filter`, `map` a jiné vracejí nové objekty přesně zděděného typu `SilnéPole`. Jejich vnitřní implementace k tomu využívá vlastnost `constructor` objektu, na němž je metoda volána. -In the example above, +V uvedeném příkladu: ```js -arr.constructor === PowerArray +pole.constructor === SilnéPole ``` -When `arr.filter()` is called, it internally creates the new array of results using exactly `arr.constructor`, not basic `Array`. That's actually very cool, because we can keep using `PowerArray` methods further on the result. +Když je voláno `pole.filter()`, vnitřně vytvoří nové pole výsledků voláním přesně `pole.constructor`, ne základního `Array`. To je vskutku vynikající, protože i nadále můžeme na výsledku používat metody třídy `SilnéPole`. -Even more, we can customize that behavior. +A navíc si můžeme toto chování sami nastavit. -We can add a special static getter `Symbol.species` to the class. If it exists, it should return the constructor that JavaScript will use internally to create new entities in `map`, `filter` and so on. +Můžeme do třídy přidat speciální statický getter `Symbol.species`. Pokud existuje, měl by vracet konstruktor, který bude JavaScriptem vnitřně používán k vytvoření nových entit ve funkcích `map`, `filter` a podobně. -If we'd like built-in methods like `map` or `filter` to return regular arrays, we can return `Array` in `Symbol.species`, like here: +Kdybychom chtěli, aby vestavěné metody jako `map` nebo `filter` vracely regulérní pole, můžeme v `Symbol.species` vracet `Array`, například zde: ```js run -class PowerArray extends Array { - isEmpty() { +class SilnéPole extends Array { + jePrázdné() { return this.length === 0; } *!* - // built-in methods will use this as the constructor + // vestavěné metody budou jako konstruktor používat toto static get [Symbol.species]() { return Array; } */!* } -let arr = new PowerArray(1, 2, 5, 10, 50); -alert(arr.isEmpty()); // false +let pole = new SilnéPole(1, 2, 5, 10, 50); +alert(pole.jePrázdné()); // false -// filter creates new array using arr.constructor[Symbol.species] as constructor -let filteredArr = arr.filter(item => item >= 10); +// filter vytvoří nové pole s použitím pole.constructor[Symbol.species] jako konstruktoru +let filtrovanéPole = pole.filter(prvek => prvek >= 10); *!* -// filteredArr is not PowerArray, but Array +// filtrovanéPole není SilnéPole, ale Array */!* -alert(filteredArr.isEmpty()); // Error: filteredArr.isEmpty is not a function +alert(filtrovanéPole.jePrázdné()); // Chyba: filtrovanéPole.jePrázdné není funkce ``` -As you can see, now `.filter` returns `Array`. So the extended functionality is not passed any further. +Jak vidíte, nyní `.filter` vrací `Array`. Rozšířená funkcionalita se tedy dál nepředává. -```smart header="Other collections work similarly" -Other collections, such as `Map` and `Set`, work alike. They also use `Symbol.species`. +```smart header="Obdobně fungují ostatní kolekce" +Obdobně fungují i ostatní kolekce, např. `Map` a `Set`. I ty používají `Symbol.species`. ``` -## No static inheritance in built-ins +## Zabudované objekty nemají statickou dědičnost -Built-in objects have their own static methods, for instance `Object.keys`, `Array.isArray` etc. +Zabudované objekty mají své vlastní statické metody, například `Object.keys`, `Array.isArray` atd. -As we already know, native classes extend each other. For instance, `Array` extends `Object`. +Jak už víme, nativní třídy se navzájem rozšiřují. Například třída `Array` rozšiřuje třídu `Object`. -Normally, when one class extends another, both static and non-static methods are inherited. That was thoroughly explained in the article [](info:static-properties-methods#statics-and-inheritance). +Když jedna třída rozšiřuje druhou, zpravidla z ní dědí statické i nestatické metody. To bylo podrobně vysvětleno v článku [](info:static-properties-methods#statics-and-inheritance). -But built-in classes are an exception. They don't inherit statics from each other. +Avšak vestavěné třídy jsou výjimkou. Ty od sebe navzájem nedědí statická pole. -For example, both `Array` and `Date` inherit from `Object`, so their instances have methods from `Object.prototype`. But `Array.[[Prototype]]` does not reference `Object`, so there's no, for instance, `Array.keys()` (or `Date.keys()`) static method. +Například třídy `Array` i `Date` dědí ze třídy `Object`, takže jejich instance obsahují metody z `Object.prototype`. Ale `Array.[[Prototype]]` se neodkazuje na `Object`, takže neexistuje například statická metoda `Array.keys()` (nebo `Date.keys()`). -Here's the picture structure for `Date` and `Object`: +Na obrázku vidíme strukturu pro `Date` a `Object`: ![](object-date-inheritance.svg) -As you can see, there's no link between `Date` and `Object`. They are independent, only `Date.prototype` inherits from `Object.prototype`. +Jak vidíte, mezi `Date` a `Object` neexistuje žádné spojení. Jsou nezávislé, jedině `Date.prototype` dědí z `Object.prototype`. -That's an important difference of inheritance between built-in objects compared to what we get with `extends`. +To je důležitý rozdíl v dědičnosti mezi vestavěnými objekty oproti tomu, co získáme použitím `extends`. diff --git a/1-js/09-classes/05-extend-natives/object-date-inheritance.svg b/1-js/09-classes/05-extend-natives/object-date-inheritance.svg index be47d7fd9..95fda7e24 100644 --- a/1-js/09-classes/05-extend-natives/object-date-inheritance.svg +++ b/1-js/09-classes/05-extend-natives/object-date-inheritance.svg @@ -1 +1 @@ -constructor: Object toString: function hasOwnProperty: function ...Object.prototypeconstructor: Date toString: function getDate: function ...Date.prototypeObjectDatenew Date()[[Prototype]][[Prototype]]prototypeprototypedefineProperty keys ...now parse ...1 Jan 2019 \ No newline at end of file +constructor: Object toString: function hasOwnProperty: function ...Object.prototypeconstructor: Date toString: function getDate: function ...Date.prototypeObjectDatenew Date()[[Prototype]][[Prototype]]prototypeprototypedefineProperty keys ...now parse ...1. leden 2019 \ No newline at end of file diff --git a/1-js/09-classes/index.md b/1-js/09-classes/index.md index 87846ef6b..ed3bad014 100644 --- a/1-js/09-classes/index.md +++ b/1-js/09-classes/index.md @@ -1 +1 @@ -# Classes +# Třídy diff --git a/1-js/10-error-handling/index.md b/1-js/10-error-handling/index.md index face61c6e..aaf0679a3 100644 --- a/1-js/10-error-handling/index.md +++ b/1-js/10-error-handling/index.md @@ -1 +1 @@ -# Error handling +# Ošetřování chyb diff --git a/1-js/11-async/08-async-await/04-promise-all-failure/solution.md b/1-js/11-async/08-async-await/04-promise-all-failure/solution.md index 9fda8e000..4a905be8d 100644 --- a/1-js/11-async/08-async-await/04-promise-all-failure/solution.md +++ b/1-js/11-async/08-async-await/04-promise-all-failure/solution.md @@ -1,77 +1,77 @@ -The root of the problem is that `Promise.all` immediately rejects when one of its promises rejects, but it do nothing to cancel the other promises. +Jádro problému spočívá v tom, že `Promise.all` se okamžitě zamítne, když bude zamítnut jeden z jeho příslibů, ale neudělá nic, aby zrušilo ostatní přísliby. -In our case, the second query fails, so `Promise.all` rejects, and the `try...catch` block catches this error.Meanwhile, other promises are *not affected* - they independently continue their execution. In our case, the third query throws an error of its own after a bit of time. And that error is never caught, we can see it in the console. +V našem případě selže druhý dotaz, takže `Promise.all` se zamítne a blok `try...catch` tuto chybu zachytí. Mezitím však ostatní přísliby *nejsou ovlivněny* -- jejich vykonávání nezávisle pokračuje. V našem případě třetí příslib za nějakou dobu vygeneruje chybu sám o sobě. A tato chyba není ničím zachycena a my ji uvidíme v konzoli. -The problem is especially dangerous in server-side environments, such as Node.js, when an uncaught error may cause the process to crash. +Tento problém je obzvláště nebezpečný v prostředích na straně serveru, například Node.js, kde nezachycená chyba může vést k havárii procesu. -How to fix it? +Jak to opravit? -An ideal solution would be to cancel all unfinished queries when one of them fails. This way we avoid any potential errors. +Ideální řešení by bylo zrušit všechny nedokončené dotazy ve chvíli, kdy jeden z nich selže. Tímto způsobem se vyhneme všem potenciálním chybám. -However, the bad news is that service calls (such as `database.query`) are often implemented by a 3rd-party library which doesn't support cancellation. Then there's no way to cancel a call. +Špatná zpráva však je, že volání služeb (např. `databáze.dotaz`) je často implementováno knihovnou třetí strany, která nepodporuje rušení. Pak neexistuje žádný způsob, jak volání zrušit. -As an alternative, we can write our own wrapper function around `Promise.all` which adds a custom `then/catch` handler to each promise to track them: results are gathered and, if an error occurs, all subsequent promises are ignored. +Jako alternativu si můžeme napsat vlastní obalovou funkci kolem `Promise.all`, která přidá ke každému příslibu vlastní handler `then/catch`, který je bude sledovat: výsledky se shromáždí, a pokud dojde k chybě, všechny ostatní přísliby jsou ignorovány. ```js -function customPromiseAll(promises) { - return new Promise((resolve, reject) => { - const results = []; - let resultsCount = 0; - let hasError = false; // we'll set it to true upon first error - - promises.forEach((promise, index) => { - promise - .then(result => { - if (hasError) return; // ignore the promise if already errored - results[index] = result; - resultsCount++; - if (resultsCount === promises.length) { - resolve(results); // when all results are ready - successs +function vlastníPromiseAll(přísliby) { + return new Promise((splň, zamítni) => { + const výsledky = []; + let početVýsledků = 0; + let mámeChybu = false; // po první chybě to nastavíme na true + + přísliby.forEach((příslib, index) => { + příslib + .then(výsledek => { + if (mámeChybu) return; // pokud už máme chybu, příslib ignorujeme + výsledky[index] = výsledek; + početVýsledků++; + if (početVýsledků === přísliby.length) { + splň(výsledky); // když jsou všechny výsledky připraveny - úspěch } }) - .catch(error => { - if (hasError) return; // ignore the promise if already errored - hasError = true; // wops, error! - reject(error); // fail with rejection + .catch(chyba => { + if (mámeChybu) return; // pokud už máme chybu, příslib ignorujeme + mámeChybu = true; // ouha, chyba! + zamítni(chyba); // zamítnutí při selhání }); }); }); } ``` -This approach has an issue of its own - it's often undesirable to `disconnect()` when queries are still in the process. +Tento přístup má sám o sobě problém -- často není žádoucí volat `odpoj()`, když jsou dotazy ještě zpracovávány. -It may be important that all queries complete, especially if some of them make important updates. +Může být důležité, aby se všechny dotazy zpracovaly, zvláště když některé z nich provádějí důležité zápisy do databáze. -So we should wait until all promises are settled before going further with the execution and eventually disconnecting. +Než tedy budeme pokračovat v provádění a nakonec se odpojíme, měli bychom počkat, než budou všechny přísliby usazeny. -Here's another implementation. It behaves similar to `Promise.all` - also resolves with the first error, but waits until all promises are settled. +Zde je jiná implementace. Chová se podobně jako `Promise.all` -- také se vyhodnotí při první chybě, ale počká, dokud nebudou všechny přísliby usazeny. ```js -function customPromiseAllWait(promises) { - return new Promise((resolve, reject) => { - const results = new Array(promises.length); - let settledCount = 0; - let firstError = null; - - promises.forEach((promise, index) => { - Promise.resolve(promise) - .then(result => { - results[index] = result; +function vlastníPromiseAllSČekáním(přísliby) { + return new Promise((splň, zamítni) => { + const výsledky = new Array(přísliby.length); + let početUsazených = 0; + let prvníChyba = null; + + přísliby.forEach((příslib, index) => { + Promise.splň(příslib) + .then(výsledek => { + výsledky[index] = výsledek; }) - .catch(error => { - if (firstError === null) { - firstError = error; + .catch(chyba => { + if (prvníChyba === null) { + prvníChyba = chyba; } }) .finally(() => { - settledCount++; - if (settledCount === promises.length) { - if (firstError !== null) { - reject(firstError); + početUsazených++; + if (početUsazených === přísliby.length) { + if (prvníChyba !== null) { + zamítni(prvníChyba); } else { - resolve(results); + splň(výsledky); } } }); @@ -80,34 +80,34 @@ function customPromiseAllWait(promises) { } ``` -Now `await customPromiseAllWait(...)` will stall the execution until all queries are processed. +Nyní `await vlastníPromiseAllSČekáním(...)` pozastaví provádění, dokud nebudou všechny dotazy zpracovány. -This is a more reliable approach, as it guarantees a predictable execution flow. +Tento přístup je spolehlivější, neboť zaručuje předvídatelný průběh provádění. -Lastly, if we'd like to process all errors, we can use either use `Promise.allSettled` or write a wrapper around it to gathers all errors in a single [AggregateError](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/AggregateError) object and rejects with it. +Nakonec, kdybychom chtěli zpracovat všechny chyby, můžeme buď použít `Promise.allSettled`, nebo kolem něj napsat obal, který shromáždí všechny chyby do jediného objektu [AggregateError](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/AggregateError) a zamítne se s ním. ```js -// wait for all promises to settle -// return results if no errors -// throw AggregateError with all errors if any -function allOrAggregateError(promises) { - return Promise.allSettled(promises).then(results => { - const errors = []; - const values = []; - - results.forEach((res, i) => { - if (res.status === 'fulfilled') { - values[i] = res.value; +// počkáme na usazení všech příslibů +// pokud nebyla žádná chyba, vrátíme výsledky +// pokud byly chyby, vygenerujeme AggregateError se všemi chybami +function všechnoNeboAggregateError(přísliby) { + return Promise.allSettled(přísliby).then(výsledky => { + const chyby = []; + const hodnoty = []; + + výsledky.forEach((výsl, i) => { + if (výsl.status === 'fulfilled') { + hodnoty[i] = výsl.value; } else { - errors.push(res.reason); + chyby.push(výsl.reason); } }); - if (errors.length > 0) { - throw new AggregateError(errors, 'One or more promises failed'); + if (chyby.length > 0) { + throw new AggregateError(chyby, 'Jeden nebo více příslibů selhalo'); } - return values; + return hodnoty; }); } ``` diff --git a/1-js/11-async/08-async-await/04-promise-all-failure/task.md b/1-js/11-async/08-async-await/04-promise-all-failure/task.md index 74571c43e..83ee76398 100644 --- a/1-js/11-async/08-async-await/04-promise-all-failure/task.md +++ b/1-js/11-async/08-async-await/04-promise-all-failure/task.md @@ -1,79 +1,79 @@ -# Dangerous Promise.all +# Nebezpečný Promise.all -`Promise.all` is a great way to parallelize multiple operations. It's especially useful when we need to make parallel requests to multiple services. +`Promise.all` je skvělý způsob, jak paralelizovat vícenásobné operace. Obzvláště se hodí, když potřebujeme vytvořit paralelní požadavky na více služeb. -However, there's a hidden danger. We'll see an example in this task and explore how to avoid it. +Skrývá se v něm však nebezpečí. V této úloze uvidíme jeho příklad a prozkoumáme, jak se mu vyhnout. -Let's say we have a connection to a remote service, such as a database. +Dejme tomu, že máme připojení ke vzdálené službě, například k databázi. -There're two functions: `connect()` and `disconnect()`. +Máme pro něj dvě funkce: `připoj()` a `odpoj()`. -When connected, we can send requests using `database.query(...)` - an async function which usually returns the result but also may throw an error. +Když se připojíme, můžeme posílat požadavky voláním `databáze.dotaz(...)` -- asynchronní funkce, která obvykle vrátí výsledek, ale může také vygenerovat chybu. -Here's a simple implementation: +Jednoduchá implementace: ```js -let database; +let databáze; -function connect() { - database = { - async query(isOk) { - if (!isOk) throw new Error('Query failed'); +function připoj() { + databáze = { + async dotaz(jeOk) { + if (!jeOk) throw new Error('Dotaz selhal'); } }; } -function disconnect() { - database = null; +function odpoj() { + databáze = null; } -// intended usage: -// connect() +// zamýšlené použití: +// připoj() // ... -// database.query(true) to emulate a successful call -// database.query(false) to emulate a failed call +// databáze.dotaz(true) pro emulaci úspěšného volání +// databáze.dotaz(false) pro emulaci neúspěšného volání // ... -// disconnect() +// odpoj() ``` -Now here's the problem. +Nyní zde máme problém. -We wrote the code to connect and send 3 queries in parallel (all of them take different time, e.g. 100, 200 and 300ms), then disconnect: +Napíšeme kód pro připojení a pošleme paralelně 3 dotazy (každý z nich trvá jinou dobu, např. 100, 200 a 300 ms), pak se odpojíme: ```js -// Helper function to call async function `fn` after `ms` milliseconds -function delay(fn, ms) { - return new Promise((resolve, reject) => { - setTimeout(() => fn().then(resolve, reject), ms); +// pomocná funkce pro volání asynchronní funkce `fn` za `ms` milisekund +function čekej(fn, ms) { + return new Promise((splň, zamítni) => { + setTimeout(() => fn().then(splň, zamítni), ms); }); } -async function run() { - connect(); +async function spusť() { + připoj(); try { await Promise.all([ - // these 3 parallel jobs take different time: 100, 200 and 300 ms - // we use the `delay` helper to achieve this effect + // tyto 3 paralelní úkoly trvají každý jinou dobu: 100, 200 a 300 ms + // k dosažení tohoto efektu použijeme pomocnou funkci `čekej` *!* - delay(() => database.query(true), 100), - delay(() => database.query(false), 200), - delay(() => database.query(false), 300) + čekej(() => databáze.dotaz(true), 100), + čekej(() => databáze.dotaz(false), 200), + čekej(() => databáze.dotaz(false), 300) */!* ]); - } catch(error) { - console.log('Error handled (or was it?)'); + } catch(chyba) { + console.log('Chyba zpracována (opravdu?)'); } - disconnect(); + odpoj(); } -run(); +spusť(); ``` -Two of these queries happen to be unsuccessful, but we're smart enough to wrap the `Promise.all` call into a `try..catch` block. +Dva z těchto dotazů byly neúspěšné, ale my jsme natolik chytří, že jsme volání `Promise.all` umístili do bloku `try..catch`. -However, this doesn't help! This script actually leads to an uncaught error in console! +Ale to nepomůže! Tento skript ve skutečnosti vyvolá nezachycenou chybu v konzoli! -Why? How to avoid it? \ No newline at end of file +Proč? Jak se tomu vyhnout? \ No newline at end of file diff --git a/1-js/11-async/index.md b/1-js/11-async/index.md index a6ec54397..18a59b983 100644 --- a/1-js/11-async/index.md +++ b/1-js/11-async/index.md @@ -1,2 +1,2 @@ -# Promises, async/await +# Přísliby, async/await diff --git a/1-js/12-generators-iterators/index.md b/1-js/12-generators-iterators/index.md index ccc909d1a..1d01acd06 100644 --- a/1-js/12-generators-iterators/index.md +++ b/1-js/12-generators-iterators/index.md @@ -1,2 +1,2 @@ -# Generators, advanced iteration +# Generátory, pokročilá iterace diff --git a/1-js/13-modules/index.md b/1-js/13-modules/index.md index 78fb060e8..541d7fa96 100644 --- a/1-js/13-modules/index.md +++ b/1-js/13-modules/index.md @@ -1,2 +1,2 @@ -# Modules +# Moduly diff --git a/1-js/99-js-misc/index.md b/1-js/99-js-misc/index.md index 79cd72fe7..07f5a5686 100644 --- a/1-js/99-js-misc/index.md +++ b/1-js/99-js-misc/index.md @@ -1,2 +1,2 @@ -# Miscellaneous +# Různé diff --git a/1-js/index.md b/1-js/index.md index c313cb85c..42079a365 100644 --- a/1-js/index.md +++ b/1-js/index.md @@ -1,6 +1,6 @@ -# The JavaScript language +# Jazyk JavaScript -Here we learn JavaScript, starting from scratch and go on to advanced concepts like OOP. +Zde se naučíme JavaScript. Začneme od píky a postupně přejdeme k pokročilým konceptům, například OOP. -We concentrate on the language itself here, with the minimum of environment-specific notes. +Budeme se soustředit na samotný jazyk a uvedeme jen minimum poznámek specifických pro určité prostředí. diff --git a/2-ui/1-document/01-browser-environment/article.md b/2-ui/1-document/01-browser-environment/article.md index eedc28fb3..d157990ae 100644 --- a/2-ui/1-document/01-browser-environment/article.md +++ b/2-ui/1-document/01-browser-environment/article.md @@ -1,113 +1,113 @@ -# Browser environment, specs +# Prostředí prohlížeče a jeho specifikace -The JavaScript language was initially created for web browsers. Since then, it has evolved into a language with many uses and platforms. +Jazyk JavaScript byl původně vytvořen pro webové prohlížeče. Od té doby se vyvinul v jazyk se širokým využitím na mnoha platformách. -A platform may be a browser, or a web-server or another *host*, or even a "smart" coffee machine if it can run JavaScript. Each of these provides platform-specific functionality. The JavaScript specification calls that a *host environment*. +Platformou může být prohlížeč, webový server nebo jiný *hostitel*, třeba i „chytrý“ automat na kávu, pokud dokáže spouštět JavaScriptové skripty. Každý z nich poskytuje vlastní specifickou funkcionalitu. Specifikace JavaScriptu ji nazývá *hostitelské prostředí*. -A host environment provides its own objects and functions in addition to the language core. Web browsers give a means to control web pages. Node.js provides server-side features, and so on. +Hostitelské prostředí poskytuje k jádru jazyka navíc své vlastní objekty a funkce. Webové prohlížeče poskytují způsoby, jak ovládat webové stránky, Node.js poskytuje prvky pro serverovou stranu a tak dále. -Here's a bird's-eye view of what we have when JavaScript runs in a web browser: +Pohled z ptačí perspektivy nám ukazuje, co máme, když spouštíme JavaScript ve webovém prohlížeči: ![](windowObjects.svg) -There's a "root" object called `window`. It has two roles: +Je zde „kořenový“ objekt nazvaný `window`, který má dvě role: -1. First, it is a global object for JavaScript code, as described in the chapter . -2. Second, it represents the "browser window" and provides methods to control it. +1. Za prvé, je to globální objekt pro JavaScriptový kód, jak je popsáno v kapitole . +2. Za druhé, představuje „okno prohlížeče“ a poskytuje metody, jak je ovládat. -For instance, we can use it as a global object: +Můžeme jej například použít jako globální objekt: ```js run global -function sayHi() { - alert("Hello"); +function řekniAhoj() { + alert("Ahoj"); } -// global functions are methods of the global object: -window.sayHi(); +// globální funkce jsou metody globálního objektu: +window.řekniAhoj(); ``` -And we can use it as a browser window, to show the window height: +A můžeme jej použít jako okno prohlížeče, abychom si zobrazili výšku okna: ```js run -alert(window.innerHeight); // inner window height +alert(window.innerHeight); // výška vnitřního okna ``` -There are more window-specific methods and properties, which we'll cover later. +Existují i další metody a vlastnosti specifické pro okna, které probereme později. ## DOM (Document Object Model) -The Document Object Model, or DOM for short, represents all page content as objects that can be modified. +Document Object Model, zkráceně DOM, představuje veškerý obsah stránky jako objekty, které mohou být modifikovány. -The `document` object is the main "entry point" to the page. We can change or create anything on the page using it. +Hlavním „vstupním bodem“ stránky je objekt `document`. S jeho pomocí můžeme na stránce cokoli změnit nebo vytvořit. -For instance: +Například: ```js run -// change the background color to red +// změníme barvu pozadí na červenou document.body.style.background = "red"; -// change it back after 1 second +// po 1 sekundě ji změníme zpět setTimeout(() => document.body.style.background = "", 1000); ``` -Here, we used `document.body.style`, but there's much, much more. Properties and methods are described in the specification: [DOM Living Standard](https://dom.spec.whatwg.org). +Tady jsme použili `document.body.style`, ale je toho mnohem, mnohem více. Vlastnosti a metody jsou popsány ve specifikaci: [DOM Living Standard](https://dom.spec.whatwg.org). -```smart header="DOM is not only for browsers" -The DOM specification explains the structure of a document and provides objects to manipulate it. There are non-browser instruments that use DOM too. +```smart header="DOM není jen pro prohlížeče" +Specifikace DOMu vysvětluje strukturu dokumentu a poskytuje objekty, pomocí nichž s ní lze manipulovat. Kromě prohlížečů existují i jiné nástroje, které používají DOM. -For instance, server-side scripts that download HTML pages and process them can also use the DOM. They may support only a part of the specification though. +Například DOM mohou používat i skripty na straně serveru, které stahují a zpracovávají HTML stránky. Ty však mohou podporovat jen část specifikace. ``` -```smart header="CSSOM for styling" -There's also a separate specification, [CSS Object Model (CSSOM)](https://www.w3.org/TR/cssom-1/) for CSS rules and stylesheets, that explains how they are represented as objects, and how to read and write them. +```smart header="CSSOM pro nastavování stylů" +Existuje také samostatná specifikace [CSS Object Model (CSSOM)](https://www.w3.org/TR/cssom-1/) pro CSS pravidla a styly, která vysvětluje, jakým způsobem jsou reprezentovány v podobě objektů a jak je lze načítat a ukládat. -The CSSOM is used together with the DOM when we modify style rules for the document. In practice though, the CSSOM is rarely required, because we rarely need to modify CSS rules from JavaScript (usually we just add/remove CSS classes, not modify their CSS rules), but that's also possible. +Když měníme pravidla stylů v dokumentu, CSSOM se používá společně s DOMem. V praxi je však CSSOM zapotřebí jen zřídka, jelikož málokdy potřebujeme měnit CSS pravidla v JavaScriptu (obvykle jen přidáváme a odebíráme CSS třídy, neměníme jejich CSS pravidla), ale i to je možné provést. ``` ## BOM (Browser Object Model) -The Browser Object Model (BOM) represents additional objects provided by the browser (host environment) for working with everything except the document. +Browser Object Model (BOM) představuje další objekty, které poskytuje prohlížeč (hostitelské prostředí) pro práci se vším ostatním kromě dokumentu. -For instance: +Například: -- The [navigator](mdn:api/Window/navigator) object provides background information about the browser and the operating system. There are many properties, but the two most widely known are: `navigator.userAgent` -- about the current browser, and `navigator.platform` -- about the platform (can help to differentiate between Windows/Linux/Mac etc). -- The [location](mdn:api/Window/location) object allows us to read the current URL and can redirect the browser to a new one. +- Objekt [navigator](mdn:api/Window/navigator) poskytuje informace o prohlížeči a operačním systému. Obsahuje mnoho vlastností, ale dvě nejznámější jsou: `navigator.userAgent` -- o aktuálním prohlížeči, a `navigator.platform` -- o platformě (může pomoci rozlišit Windows/Linux/Mac atd.). +- Objekt [location](mdn:api/Window/location) nám umožňuje načíst aktuální URL a může přesměrovat prohlížeč na jiné. -Here's how we can use the `location` object: +Takto můžeme objekt `location` použít: ```js run -alert(location.href); // shows current URL -if (confirm("Go to Wikipedia?")) { - location.href = "https://wikipedia.org"; // redirect the browser to another URL +alert(location.href); // zobrazí aktuální URL +if (confirm("Přejít na Wikipedii?")) { + location.href = "https://cs.wikipedia.org"; // přesměruje prohlížeč na jiné URL } ``` -The functions `alert/confirm/prompt` are also a part of the BOM: they are not directly related to the document, but represent pure browser methods for communicating with the user. +Součástí BOMu jsou i funkce `alert/confirm/prompt`: ty se nevztahují přímo k dokumentu, ale představují čistě prohlížečové metody pro komunikaci s uživatelem. -```smart header="Specifications" -The BOM is a part of the general [HTML specification](https://html.spec.whatwg.org). +```smart header="Specifikace" +BOM je součástí všeobecné [specifikace HTML](https://html.spec.whatwg.org). -Yes, you heard that right. The HTML spec at is not only about the "HTML language" (tags, attributes), but also covers a bunch of objects, methods, and browser-specific DOM extensions. That's "HTML in broad terms". Also, some parts have additional specs listed at . +Ano, čtete správně. Specifikace HTML na není jen o „jazyce HTML“ (značky, atributy), ale pokrývá i hromadu objektů, metod a rozšíření DOMu specifických pro prohlížeče. Je to „HTML v širším slova smyslu“. Navíc některé části mají další specifikace, které jsou uvedeny na . ``` -## Summary +## Shrnutí -Talking about standards, we have: +Hovoříme-li o standardech, pak máme: -DOM specification -: Describes the document structure, manipulations, and events, see . +Specifikaci DOM +: Popisuje strukturu dokumentu, manipulaci s ní a události dokumentu, viz . -CSSOM specification -: Describes stylesheets and style rules, manipulations with them, and their binding to documents, see . +Specifikaci CSSOM +: Popisuje styly a jejich pravidla, manipulaci s nimi a jejich vazbu na dokument, viz . -HTML specification -: Describes the HTML language (e.g. tags) and also the BOM (browser object model) -- various browser functions: `setTimeout`, `alert`, `location` and so on, see . It takes the DOM specification and extends it with many additional properties and methods. +Specifikaci HTML +: Popisuje jazyk HTML (např. jeho značky) a také BOM (browser object model -- objektový model prohlížeče) -- různé funkce prohlížeče: `setTimeout`, `alert`, `location` a podobně, viz . Přebírá specifikaci DOMu a rozšiřuje ji o mnoho dalších vlastností a metod. -Additionally, some classes are described separately at . +Některé třídy jsou navíc popsány odděleně na . -Please note these links, as there's so much to learn that it's impossible to cover everything and remember it all. +Tyto odkazy si prosím zapamatujte, neboť tady je toho k naučení tolik, že je nemožné to všechno obsáhnout a pamatovat si. -When you'd like to read about a property or a method, the Mozilla manual at is also a nice resource, but the corresponding spec may be better: it's more complex and longer to read, but will make your fundamental knowledge sound and complete. +Kdybyste si chtěli přečíst o nějaké vlastnosti nebo metodě, pěkným zdrojem je i manuál Mozilly na , ale příslušná specifikace může být lepší: je sice složitější a delší na přečtení, ale poskytne vám solidní a úplné základní znalosti. -To find something, it's often convenient to use an internet search "WHATWG [term]" or "MDN [term]", e.g , . +Když chcete něco najít, často se vyplatí použít internetové hledání „WHATWG [pojem]“ nebo „MDN [pojem]“, např. , . -Now, we'll get down to learning the DOM, because the document plays the central role in the UI. +Nyní přejdeme k učení DOMu, jelikož hlavní roli v uživatelském rozhraní hraje dokument. diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md index f7f2be91d..6d8d7d2dd 100644 --- a/2-ui/1-document/02-dom-nodes/article.md +++ b/2-ui/1-document/02-dom-nodes/article.md @@ -4,49 +4,49 @@ libs: --- -# DOM tree +# DOM strom -The backbone of an HTML document is tags. +Páteří každého HTML dokumentu jsou značky neboli tagy. -According to the Document Object Model (DOM), every HTML tag is an object. Nested tags are "children" of the enclosing one. The text inside a tag is an object as well. +Podle DOMu (Document Object Model) je každá HTML značka objekt. Vnořené značky jsou „dětmi“ vnějších. Text uvnitř značky je také objekt. -All these objects are accessible using JavaScript, and we can use them to modify the page. +Všechny tyto objekty jsou v JavaScriptu dostupné a my můžeme s jejich pomocí měnit stránku. -For example, `document.body` is the object representing the `` tag. +Například `document.body` je objekt, který představuje značku ``. -Running this code will make the `` red for 3 seconds: +Po spuštění tohoto kódu `` na 3 sekundy změní barvu na červenou: ```js run -document.body.style.background = 'red'; // make the background red +document.body.style.background = 'red'; // změní barvu pozadí na červenou -setTimeout(() => document.body.style.background = '', 3000); // return back +setTimeout(() => document.body.style.background = '', 3000); // vrátí ji zpět ``` -Here we used `style.background` to change the background color of `document.body`, but there are many other properties, such as: +Zde jsme použili `style.background`, abychom změnili barvu pozadí `document.body`, ale existuje mnoho dalších vlastností, například: -- `innerHTML` -- HTML contents of the node. -- `offsetWidth` -- the node width (in pixels) -- ...and so on. +- `innerHTML` -- HTML obsah uzlu, +- `offsetWidth` -- šířka uzlu (v pixelech), +- ...a tak dále. -Soon we'll learn more ways to manipulate the DOM, but first we need to know about its structure. +Brzy se naučíme další způsoby, jak manipulovat s DOMem, ale nejprve musíme poznat jeho strukturu. -## An example of the DOM +## Příklad DOMu -Let's start with the following simple document: +Začněme s následujícím jednoduchým dokumentem: ```html run no-beautify - About elk + O losovi - The truth about elk. + Pravda o losovi. ``` -The DOM represents HTML as a tree structure of tags. Here's how it looks: +DOM reprezentuje HTML v podobě stromové struktury značek. Vypadá následovně:
@@ -57,35 +57,35 @@ drawHtmlTree(node1, 'div.domtree', 690, 320); ```online -On the picture above, you can click on element nodes and their children will open/collapse. +Na uvedeném obrázku můžete klikat na elementové uzly a jejich děti se budou rozbalovat a schovávat. ``` -Every tree node is an object. +Každý uzel stromu je objektem. -Tags are *element nodes* (or just elements) and form the tree structure: `` is at the root, then `` and `` are its children, etc. +Značky jsou *elementové uzly* (nebo jen elementy) a tvoří strukturu stromu: jeho kořenem je ``, jeho dětmi jsou `` a ``, a tak dále. -The text inside elements forms *text nodes*, labelled as `#text`. A text node contains only a string. It may not have children and is always a leaf of the tree. +Text uvnitř elementů tvoří *textové uzly*, označené jako `#text`. Textový uzel obsahuje pouze řetězec. Nesmí mít děti a je vždy listem stromu. -For instance, the `` tag has the text `"About elk"`. +Například značka `<title>` obsahuje text `"O losovi"`. -Please note the special characters in text nodes: +Prosíme, všimněte si těchto zvláštních znaků v textových uzlech: -- a newline: `↵` (in JavaScript known as `\n`) -- a space: `␣` +- konec řádku: `↵` (v JavaScriptu znám jako `\n`) +- mezera: `␣` -Spaces and newlines are totally valid characters, like letters and digits. They form text nodes and become a part of the DOM. So, for instance, in the example above the `<head>` tag contains some spaces before `<title>`, and that text becomes a `#text` node (it contains a newline and some spaces only). +Mezery a konce řádků jsou zcela platnými znaky, tak jako písmena a číslice. Tvoří textové uzly a stávají se součástí DOMu. Například v uvedeném příkladu značka `<head>` obsahuje před `<title>` několik mezer, které se staly uzlem `#text` (který obsahuje pouze znak konce řádku a několik mezer). -There are only two top-level exclusions: -1. Spaces and newlines before `<head>` are ignored for historical reasons. -2. If we put something after `</body>`, then that is automatically moved inside the `body`, at the end, as the HTML spec requires that all content must be inside `<body>`. So there can't be any spaces after `</body>`. +Existují jen dvě výjimky na nejvyšší úrovni: +1. Mezery a konce řádků před `<head>` se z historických důvodů ignorují. +2. Jestliže vložíme něco za `</body>`, bude to automaticky přemístěno dovnitř `body` na konec, jelikož specifikace HTML vyžaduje, aby všechen obsah byl uvnitř `<body>`. Za `</body>` tedy nemohou být žádné mezery. -In other cases everything's straightforward -- if there are spaces (just like any character) in the document, then they become text nodes in the DOM, and if we remove them, then there won't be any. +V ostatních případech je všechno jasné -- jestliže jsou v dokumentu mezery (stejně jako kterýkoli jiný znak), stanou se v DOMu textovými uzly, a pokud je odstraníme, nebudou tam. -Here are no space-only text nodes: +Zde nejsou žádné textové uzly, které by obsahovaly jen mezery: ```html no-beautify <!DOCTYPE HTML> -<html><head><title>About elkThe truth about elk. +O losoviPravda o losovi. ```
@@ -96,21 +96,21 @@ let node2 = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1, drawHtmlTree(node2, 'div.domtree', 690, 210); -```smart header="Spaces at string start/end and space-only text nodes are usually hidden in tools" -Browser tools (to be covered soon) that work with DOM usually do not show spaces at the start/end of the text and empty text nodes (line-breaks) between tags. +```smart header="Mezery na začátku a konci řetězce a textové uzly obsahující pouze mezery jsou v nástrojích obvykle skryty" +Prohlížečové nástroje (brzy se o nich dozvíme), které pracují s DOMem, obvykle nezobrazují mezery na začátku a konci textu a prázdné textové uzly (konce řádků) mezi značkami. -Developer tools save screen space this way. +Vývojářské nástroje tímto způsobem šetří místo na obrazovce. -On further DOM pictures we'll sometimes omit them when they are irrelevant. Such spaces usually do not affect how the document is displayed. +Na dalších obrázcích DOMu je také někdy budeme vypouštět, když nebudou mít význam. Tyto mezery zpravidla nemají vliv na to, jak je dokument zobrazen. ``` -## Autocorrection +## Automatické opravy -If the browser encounters malformed HTML, it automatically corrects it when making the DOM. +Jestliže prohlížeč narazí na poškozený HTML kód, při vytváření DOMu jej automaticky opraví. -For instance, the top tag is always ``. Even if it doesn't exist in the document, it will exist in the DOM, because the browser will create it. The same goes for ``. +Například nejvyšší značka bude vždy ``. I kdyby v dokumentu nebyla, bude v DOMu vždy existovat, protože prohlížeč ji vytvoří. Totéž platí pro ``. -As an example, if the HTML file is the single word `"Hello"`, the browser will wrap it into `` and ``, and add the required ``, and the DOM will be: +Například jestliže je HTML soubor tvořen jediným slovem `"Ahoj"`, pak jej prohlížeč zabalí do `` a ``, přidá požadovanou značku `` a DOM bude vypadat následovně:
@@ -121,65 +121,65 @@ let node3 = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1, drawHtmlTree(node3, 'div.domtree', 690, 150); -While generating the DOM, browsers automatically process errors in the document, close tags and so on. +Prohlížeče při generování DOMu automaticky zpracují chyby v dokumentu, uzavřou značky a podobně. -A document with unclosed tags: +Dokument s neuzavřenými značkami: ```html no-beautify -

Hello -

  • Mom -
  • and -
  • Dad +

    Ahoj +

  • mami +
  • a +
  • tati ``` -...will become a normal DOM as the browser reads tags and restores the missing parts: +...se stane normálním DOMem, jelikož prohlížeč načte značky a obnoví chybějící části:
    -````warn header="Tables always have ``" -An interesting "special case" is tables. By DOM specification they must have `` tag, but HTML text may omit it. Then the browser creates `` in the DOM automatically. +````warn header="Tabulky mají vždy ``" +Zajímavým „zvláštním případem“ jsou tabulky. Podle specifikace DOMu musejí mít značku ``, ale HTML kód ji může vynechat. Pak prohlížeč vytvoří `` v DOMu automaticky. -For the HTML: +Pro HTML: ```html no-beautify -
    1
    +
    1
    ``` -DOM-structure will be: +Struktura DOMu bude následující:
    -You see? The `` appeared out of nowhere. We should keep this in mind while working with tables to avoid surprises. +Vidíte? Značka `` se zjevila odnikud. Při práci s tabulkami bychom to měli mít na paměti, abychom se vyhnuli překvapením. ```` -## Other node types +## Ostatní typy uzlů -There are some other node types besides elements and text nodes. +Existují i jiné typy uzlů, než elementové a textové. -For example, comments: +Například komentáře: ```html - The truth about elk. + Pravda o losovi.
      -
    1. An elk is a smart
      2. +
    2. Los je elegantní
      3. *!* - + */!* -
    3. ...and cunning animal!
      4. +
    4. ...a mazané zvíře!
    @@ -188,95 +188,96 @@ For example, comments:
    -We can see here a new tree node type -- *comment node*, labeled as `#comment`, between two text nodes. +Tady vidíme mezi dvěma textovými uzly nový typ stromového uzlu -- *komentářový uzel*, označený jako `#comment`. -We may think -- why is a comment added to the DOM? It doesn't affect the visual representation in any way. But there's a rule -- if something's in HTML, then it also must be in the DOM tree. +Může nás napadnout -- proč se vlastně do DOMu přidává komentář? Ten přece nemá na vzhled stránky žádný vliv. Existuje však pravidlo -- jestliže je něco v HTML, musí to být i v DOM stromu. -**Everything in HTML, even comments, becomes a part of the DOM.** +**Vše v HTML, včetně komentářů, se stává součástí DOMu.** -Even the `` directive at the very beginning of HTML is also a DOM node. It's in the DOM tree right before ``. Few people know about that. We are not going to touch that node, we even don't draw it on diagrams, but it's there. +Dokonce i direktiva `` na samém začátku HTML je DOM uzlem. V DOM stromu se nachází těsně před ``. O tom ví jen málokdo. Nebudeme na tento uzel sahat, nebudeme jej ani kreslit v diagramech, ale je tam. -The `document` object that represents the whole document is, formally, a DOM node as well. +Objekt `document`, který představuje celý dokument, je formálně také DOM uzlem. -There are [12 node types](https://dom.spec.whatwg.org/#node). In practice we usually work with 4 of them: +Celkem existuje [12 typů uzlů](https://dom.spec.whatwg.org/#node). V praxi obvykle pracujeme se čtyřmi z nich: -1. `document` -- the "entry point" into DOM. -2. element nodes -- HTML-tags, the tree building blocks. -3. text nodes -- contain text. -4. comments -- sometimes we can put information there, it won't be shown, but JS can read it from the DOM. +1. `document` -- „vstupní bod“ DOMu. +2. elementové uzly -- HTML značky, stavební kameny stromu. +3. textové uzly -- obsahují text. +4. komentáře -- někdy do nich můžeme vkládat informace, které se nezobrazí, ale JS je může z DOMu načíst. -## See it for yourself +## Podívejte se sami -To see the DOM structure in real-time, try [Live DOM Viewer](https://software.hixie.ch/utilities/js/live-dom-viewer/). Just type in the document, and it will show up as a DOM at an instant. +Chcete-li vidět strukturu DOMu v reálném čase, zkuste [Live DOM Viewer](https://software.hixie.ch/utilities/js/live-dom-viewer/). Stačí psát do dokumentu a ten se za okamžik zobrazí jako DOM. -Another way to explore the DOM is to use the browser developer tools. Actually, that's what we use when developing. +Dalším způsobem, jak prozkoumávat DOM, je používat prohlížečové vývojářské nástroje. Právě ty používáme při programování. -To do so, open the web page [elk.html](elk.html), turn on the browser developer tools and switch to the Elements tab. +Abyste tak učinili, otevřete si webovou stránku [elk.html](elk.html), zapněte si prohlížečové vývojářské nástroje a přepněte se na záložku Elements (Prvky). -It should look like this: +Měla by vypadat přibližně takto: ![](elk.svg) -You can see the DOM, click on elements, see their details and so on. -Please note that the DOM structure in developer tools is simplified. Text nodes are shown just as text. And there are no "blank" (space only) text nodes at all. That's fine, because most of the time we are interested in element nodes. +Vidíte DOM, klikáte na elementy, vidíte jejich detaily a podobně. -Clicking the button in the left-upper corner allows us to choose a node from the webpage using a mouse (or other pointer devices) and "inspect" it (scroll to it in the Elements tab). This works great when we have a huge HTML page (and corresponding huge DOM) and would like to see the place of a particular element in it. +Prosíme všimněte si, že struktura DOMu ve vývojářských nástrojích je zjednodušená. Textové uzly jsou zobrazeny pouze jako text. A „prázdné“ textové uzly (obsahující jen mezery) nejsou zobrazeny vůbec. To je dobře, neboť ve většině případů nás zajímají pouze elementové uzly. -Another way to do it would be just right-clicking on a webpage and selecting "Inspect" in the context menu. +Po kliknutí na tlačítko v levém horním rohu si můžeme zvolit uzel z webové stránky myší (nebo jiným ukazovacím zařízením) a „prozkoumat“ jej (záložka Elements se na něj posune). To funguje skvěle, když máme obrovskou HTML stránku (a odpovídající obrovský DOM) a chceme se podívat na umístění určitého jejího elementu. + +Další způsob, jak to udělat, je kliknout pravým tlačítkem na webovou stránku a v kontextovém menu zvolit „Prozkoumat“ („Inspect“). ![](inspect.svg) -At the right part of the tools there are the following subtabs: -- **Styles** -- we can see CSS applied to the current element rule by rule, including built-in rules (gray). Almost everything can be edited in-place, including the dimensions/margins/paddings of the box below. -- **Computed** -- to see CSS applied to the element by property: for each property we can see a rule that gives it (including CSS inheritance and such). -- **Event Listeners** -- to see event listeners attached to DOM elements (we'll cover them in the next part of the tutorial). -- ...and so on. +V pravé části nástrojů se nacházejí následující podzáložky: +- **Styles (Styly)** -- můžeme vidět CSS aplikované na aktuální element, jedno pravidlo po druhém, včetně vestavěných pravidel (šedě zobrazených). Téměř všechno můžeme na místě editovat, včetně rozměrů a vnějších i vnitřních okrajů boxu. +- **Computed (Vypočteno)** -- vidíme CSS aplikované na element podle vlastností: pro každou vlastnost vidíme pravidlo, které ji definuje (včetně CSS dědičnosti a podobně). +- **Event Listeners (Posluchače událostí)** -- vidíme posluchače událostí připojené k DOM elementům (probereme je v příští části tutoriálu). +- ...a tak dále. -The best way to study them is to click around. Most values are editable in-place. +Nejlepší způsob, jak je prostudovat, je klikat kolem dokola. Většinu hodnot lze na místě editovat. -## Interaction with console +## Interakce s konzolí -As we work the DOM, we also may want to apply JavaScript to it. Like: get a node and run some code to modify it, to see the result. Here are few tips to travel between the Elements tab and the console. +Při práci s DOMem na něj můžeme také chtít aplikovat JavaScript. Například můžeme chtít načíst uzel a spustit nějaký kód, který ho modifikuje, abychom viděli výsledek. Poskytneme několik rad, jak cestovat mezi záložkou Elements a konzolí. -For the start: +Pro začátek: -1. Select the first `
  • ` in the Elements tab. -2. Press `key:Esc` -- it will open console right below the Elements tab. +1. Na záložce Elements zvolte první značku `
  • `. +2. Stiskněte `key:Esc` -- přímo pod záložkou Elements se otevře konzole. -Now the last selected element is available as `$0`, the previously selected is `$1` etc. +Nyní je poslední zvolený element k dispozici jako `$0`, předposlední zvolený jako `$1`, a tak dále. -We can run commands on them. For instance, `$0.style.background = 'red'` makes the selected list item red, like this: +Můžeme na nich spouštět příkazy. Například `$0.style.background = 'red'` obarví zvolený prvek seznamu červeně, takto: ![](domconsole0.svg) -That's how to get a node from Elements in Console. +Tímto způsobem tedy získáme uzel ze záložky Elements v konzoli. -There's also a road back. If there's a variable referencing a DOM node, then we can use the command `inspect(node)` in Console to see it in the Elements pane. +Existuje i opačná cesta. Jestliže se nějaká proměnná odkazuje na DOM uzel, můžeme v konzoli použít příkaz `inspect(uzel)`, abychom jej viděli v záložce Elements. -Or we can just output the DOM node in the console and explore "in-place", like `document.body` below: +Nebo si prostě můžeme vypsat DOM uzel v konzoli a prozkoumat jej „na místě“, například `document.body` následovně: ![](domconsole1.svg) -That's for debugging purposes of course. From the next chapter on we'll access and modify DOM using JavaScript. +To samozřejmě slouží pro účely ladění. Od následující kapitoly budeme k DOMu přistupovat a modifikovat jej pomocí JavaScriptu. -The browser developer tools are a great help in development: we can explore the DOM, try things and see what goes wrong. +Prohlížečové vývojářské nástroje představují při vývoji značnou pomoc: můžeme prozkoumávat DOM, zkoušet různé věci a vidíme, co se pokazilo. -## Summary +## Shrnutí -An HTML/XML document is represented inside the browser as the DOM tree. +HTML/XML dokument je v prohlížeči reprezentován DOM stromem. -- Tags become element nodes and form the structure. -- Text becomes text nodes. -- ...etc, everything in HTML has its place in DOM, even comments. +- Značky se stávají elementovými uzly a tvoří jeho strukturu. +- Text se stává textovými uzly. +- ...atd., vše, co je v HTML, včetně komentářů, má v DOMu své místo. -We can use developer tools to inspect DOM and modify it manually. +Pomocí vývojářských nástrojů můžeme DOM prozkoumávat a ručně jej měnit. -Here we covered the basics, the most used and important actions to start with. There's an extensive documentation about Chrome Developer Tools at . The best way to learn the tools is to click here and there, read menus: most options are obvious. Later, when you know them in general, read the docs and pick up the rest. +V této kapitole jsme uvedli základy, nejpoužívanější a nejdůležitější akce, s kterými začneme. Rozsáhlá dokumentace vývojářských nástrojů Chrome (Chrome Developer Tools) se nachází na . Nejlepší způsob, jak se naučit nástroje používat, je klikat sem a tam a číst menu: většina možností je zřejmá. Až je budete později obecně znát, přečtěte si dokumentaci a naučte se zbytek. -DOM nodes have properties and methods that allow us to travel between them, modify them, move around the page, and more. We'll get down to them in the next chapters. +DOM uzly obsahují vlastnosti a metody, které nám umožňují mezi nimi cestovat, měnit je, přesunovat je na stránce a podobně. Dostaneme se k nim v dalších kapitolách. diff --git a/2-ui/1-document/02-dom-nodes/elk.html b/2-ui/1-document/02-dom-nodes/elk.html index dc5d65f54..49b30586f 100644 --- a/2-ui/1-document/02-dom-nodes/elk.html +++ b/2-ui/1-document/02-dom-nodes/elk.html @@ -1,11 +1,11 @@ - The truth about elk. + Pravda o losovi.
      -
    1. An elk is a smart
      2. +
    2. Los je elegantní
      3. -
    3. ...and cunning animal!
      4. +
    4. ...a mazané zvíře!
    diff --git a/2-ui/1-document/03-dom-navigation/1-dom-children/solution.md b/2-ui/1-document/03-dom-navigation/1-dom-children/solution.md index decfa62c7..7c36aaacf 100644 --- a/2-ui/1-document/03-dom-navigation/1-dom-children/solution.md +++ b/2-ui/1-document/03-dom-navigation/1-dom-children/solution.md @@ -1,27 +1,27 @@ -There are many ways, for instance: +Způsobů je mnoho, například: -The `
    ` DOM node: +DOM uzel `
    `: ```js document.body.firstElementChild -// or +// nebo document.body.children[0] -// or (the first node is space, so we take 2nd) +// nebo (první uzel je mezerový, takže vezmeme až druhý) document.body.childNodes[1] ``` -The `