From adbdb743f52471087fd1042358445a09e6414f94 Mon Sep 17 00:00:00 2001 From: Otmar Onderek Date: Sun, 10 Apr 2022 20:06:21 +0200 Subject: [PATCH 01/20] 2.1, part 1 --- .../01-hello-world/1-hello-alert/index.html | 2 +- .../01-hello-world/1-hello-alert/task.md | 8 +- .../01-hello-world/2-hello-alert-ext/alert.js | 2 +- .../2-hello-alert-ext/solution.md | 5 +- .../01-hello-world/2-hello-alert-ext/task.md | 6 +- 1-js/02-first-steps/01-hello-world/article.md | 90 +++++++++---------- 6 files changed, 56 insertions(+), 57 deletions(-) diff --git a/1-js/02-first-steps/01-hello-world/1-hello-alert/index.html b/1-js/02-first-steps/01-hello-world/1-hello-alert/index.html index ff1d871b0..fa41faee3 100644 --- a/1-js/02-first-steps/01-hello-world/1-hello-alert/index.html +++ b/1-js/02-first-steps/01-hello-world/1-hello-alert/index.html @@ -4,7 +4,7 @@ diff --git a/1-js/02-first-steps/01-hello-world/1-hello-alert/task.md b/1-js/02-first-steps/01-hello-world/1-hello-alert/task.md index afed6a91d..75fd34470 100644 --- a/1-js/02-first-steps/01-hello-world/1-hello-alert/task.md +++ b/1-js/02-first-steps/01-hello-world/1-hello-alert/task.md @@ -1,12 +1,12 @@ -importance: 5 +důležitost: 5 --- -# Show an alert +# Zobrazte zprávu -Create a page that shows a message "I'm JavaScript!". +Vytvořte stránku, která zobrazí zprávu „Já jsem JavaScript!“. -Do it in a sandbox, or on your hard drive, doesn't matter, just ensure that it works. +Nezáleží na tom, zda to uděláte na pískovišti nebo na svém harddisku, jen se snažte, aby to fungovalo. [demo src="solution"] diff --git a/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/alert.js b/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/alert.js index 4de725971..a12ad2425 100644 --- a/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/alert.js +++ b/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/alert.js @@ -1 +1 @@ -alert("I'm JavaScript!"); \ No newline at end of file +alert("Já jsem JavaScript!"); \ No newline at end of file diff --git a/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/solution.md b/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/solution.md index f42c41e6d..be060a3de 100644 --- a/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/solution.md +++ b/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/solution.md @@ -1,8 +1,7 @@ -The HTML code: +HTML kód: [html src="index.html"] -For the file `alert.js` in the same folder: +Soubor `alert.js` ve stejné složce: [js src="alert.js"] - diff --git a/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/task.md b/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/task.md index 26168d6a7..1f19efdcc 100644 --- a/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/task.md +++ b/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/task.md @@ -2,8 +2,8 @@ importance: 5 --- -# Show an alert with an external script +# Zobrazte zprávu pomocí externího skriptu -Take the solution of the previous task . Modify it by extracting the script content into an external file `alert.js`, residing in the same folder. +Vezměte si řešení předchozí úlohy a upravte je tak, že obsah skriptu umístíte do externího souboru `alert.js`, který bude umístěn ve stejné složce. -Open the page, ensure that the alert works. +Otevřete stránku a ujistěte se, že zobrazování zprávy funguje. diff --git a/1-js/02-first-steps/01-hello-world/article.md b/1-js/02-first-steps/01-hello-world/article.md index 35f82bf5d..3857c0c25 100644 --- a/1-js/02-first-steps/01-hello-world/article.md +++ b/1-js/02-first-steps/01-hello-world/article.md @@ -1,17 +1,17 @@ -# Hello, world! +# Ahoj, světe! -This part of the tutorial is about core JavaScript, the language itself. +Tato část tutoriálu pojednává o základech JavaScriptu, o samotném jazyce. -But we need a working environment to run our scripts and, since this book is online, the browser is a good choice. We'll keep the amount of browser-specific commands (like `alert`) to a minimum so that you don't spend time on them if you plan to concentrate on another environment (like Node.js). We'll focus on JavaScript in the browser in the [next part](/ui) of the tutorial. +Potřebujeme však pracovní prostředí, v němž budeme spouštět skripty. Protože tato kniha je online, prohlížeč je dobrá volba. Budeme však udržovat množství příkazů specifických pro prohlížeč (např. `alert`) na minimu, abyste nad nimi nemuseli ztrácet čas, jestliže se plánujete zaměřit na jiné prostředí (např. Node.js). Na JavaScript v prohlížeči se zaměříme v [další části](/ui) tutoriálu. -So first, let's see how we attach a script to a webpage. For server-side environments (like Node.js), you can execute the script with a command like `"node my.js"`. +Nejprve se podíváme, jak vložit skript na webovou stránku. V prostředích na straně serveru (např. Node.js) můžete spustit skript příkazem, například `"node my.js"`. -## The "script" tag +## Značka „script“ -JavaScript programs can be inserted almost anywhere into an HTML document using the ` */!* -

...After the script.

+

...a za skriptem.

@@ -35,24 +35,24 @@ For instance: ``` ```online -You can run the example by clicking the "Play" button in the right-top corner of the box above. +Příklad si můžete přehrát kliknutím na tlačítko „Play“ v pravém horním rohu ve výše uvedeném okně. ``` -The ` ``` - This trick isn't used in modern JavaScript. These comments hide JavaScript code from old browsers that didn't know how to process the ` + ``` -Here, `/path/to/script.js` is an absolute path to the script from the site root. One can also provide a relative path from the current page. For instance, `src="script.js"`, just like `src="./script.js"`, would mean a file `"script.js"` in the current folder. +Zde `/cesta/ke/skriptu.js` je absolutní cesta ke skriptu z kořenové složky webového sídla. Můžeme uvést i relativní cestu od aktuální stránky. Například `src="script.js"`, stejně jako `src="./script.js"`, by znamenalo soubor `"script.js"` v aktuální složce. -We can give a full URL as well. For instance: +Můžeme poskytnout i úplné URL. Například: ```html ``` -To attach several scripts, use multiple tags: +Chceme-li připojit více skriptů, použijeme více značek: ```html @@ -90,43 +90,43 @@ To attach several scripts, use multiple tags: ``` ```smart -As a rule, only the simplest scripts are put into HTML. More complex ones reside in separate files. +Bývá pravidlem, že do HTML se ukládají jen ty nejjednodušší skripty. Složitější se umisťují do oddělených souborů. -The benefit of a separate file is that the browser will download it and store it in its [cache](https://en.wikipedia.org/wiki/Web_cache). +Výhodou odděleného souboru je, že prohlížeč si jej stáhne a uloží do své [cache](https://en.wikipedia.org/wiki/Web_cache). -Other pages that reference the same script will take it from the cache instead of downloading it, so the file is actually downloaded only once. +Jiné stránky, které se odkazují na stejný skript, si jej místo opětovného stažení nahrají z cache, takže se soubor ve skutečnosti stáhne pouze jednou. -That reduces traffic and makes pages faster. +Tím se snižuje objem přenosu a načítání stránek se urychluje. ``` -````warn header="If `src` is set, the script content is ignored." -A single ` ``` -We must choose either an external ` + ``` ```` -## Summary +## Shrnutí -- We can use a ``. +- JavaScriptový kód můžeme umístit na stránku pomocí značky ``. -There is much more to learn about browser scripts and their interaction with the webpage. But let's keep in mind that this part of the tutorial is devoted to the JavaScript language, so we shouldn't distract ourselves with browser-specific implementations of it. We'll be using the browser as a way to run JavaScript, which is very convenient for online reading, but only one of many. +O skriptech v prohlížeči a jejich interakcí s webovou stránkou toho lze napsat mnohem více. Mějme však na paměti, že tato část tutoriálu je věnována pouze jazyku JavaScript, takže bychom se zde neměli zatěžovat specifiky jeho implementací v prohlížečích. Ke spouštění skriptů v JavaScriptu budeme používat prohlížeč, což je při online čtení velmi výhodné, ale je to jen jedna z mnoha možností. From d1ac1dacf3d7fb8b9892b16d5b6e72d7ca595f8e Mon Sep 17 00:00:00 2001 From: Otmar Onderek Date: Sun, 10 Apr 2022 20:10:23 +0200 Subject: [PATCH 02/20] 2.2 --- 1-js/02-first-steps/02-structure/article.md | 130 ++++++++++---------- 1 file changed, 63 insertions(+), 67 deletions(-) diff --git a/1-js/02-first-steps/02-structure/article.md b/1-js/02-first-steps/02-structure/article.md index e81fd343d..82e9fdf40 100644 --- a/1-js/02-first-steps/02-structure/article.md +++ b/1-js/02-first-steps/02-structure/article.md @@ -1,44 +1,44 @@ -# Code structure +# Struktura kódu -The first thing we'll study is the building blocks of code. +První, co si prostudujeme, jsou stavební bloky kódu. -## Statements +## Příkazy -Statements are syntax constructs and commands that perform actions. +Příkazy (anglicky statement) jsou syntaktické konstrukce a povely, které provádějí akce. -We've already seen a statement, `alert('Hello, world!')`, which shows the message "Hello, world!". +Už jsme viděli příkaz `alert('Ahoj, světe!')`, který zobrazuje zprávu „Ahoj, světe!“. -We can have as many statements in our code as we want. Statements can be separated with a semicolon. +V kódu můžeme mít tolik příkazů, kolik chceme. Příkazy mohou být odděleny středníkem. -For example, here we split "Hello World" into two alerts: +Například zde rozdělíme „Ahoj světe“ na dvě zprávy: ```js run no-beautify -alert('Hello'); alert('World'); +alert('Ahoj'); alert('Světe'); ``` -Usually, statements are written on separate lines to make the code more readable: +Každý příkaz obvykle píšeme na nový řádek, aby kód byl čitelnější: ```js run no-beautify -alert('Hello'); -alert('World'); +alert('Ahoj'); +alert('Světe'); ``` -## Semicolons [#semicolon] +## Středníky [#semicolon] -A semicolon may be omitted in most cases when a line break exists. +Ve většině případů, kdy je uveden konec řádku, můžeme středník vynechat. -This would also work: +Toto by také fungovalo: ```js run no-beautify -alert('Hello') -alert('World') +alert('Ahoj') +alert('Světe') ``` -Here, JavaScript interprets the line break as an "implicit" semicolon. This is called an [automatic semicolon insertion](https://tc39.github.io/ecma262/#sec-automatic-semicolon-insertion). +Zde JavaScript interpretuje konec řádku jako „implicitní“ středník. Takové chování se nazývá [automatické vkládání středníku](https://tc39.github.io/ecma262/#sec-automatic-semicolon-insertion). -**In most cases, a newline implies a semicolon. But "in most cases" does not mean "always"!** +**Ve většině případů nový řádek znamená středník, ale „ve většině případů“ neznamená „vždy“!** -There are cases when a newline does not mean a semicolon. For example: +Existují případy, v nichž nový řádek neznamená středník. Například: ```js run no-beautify alert(3 + @@ -46,14 +46,14 @@ alert(3 + + 2); ``` -The code outputs `6` because JavaScript does not insert semicolons here. It is intuitively obvious that if the line ends with a plus `"+"`, then it is an "incomplete expression", so a semicolon there would be incorrect. And in this case, that works as intended. +Tento kód vypíše `6`, protože JavaScript sem středník nevloží. Je intuitivně zřejmé, že jestliže řádek končí znaménkem plus `"+"`, je to „neúplný výraz“, takže středník by byl nesprávný. V tomto případě to bude fungovat tak, jak očekáváme. -**But there are situations where JavaScript "fails" to assume a semicolon where it is really needed.** +**Existují však situace, v nichž JavaScript „nedokáže“ vložit středník tam, kde je opravdu zapotřebí.** -Errors which occur in such cases are quite hard to find and fix. +V takových případech nastanou chyby, které je poměrně těžké najít a opravit. -````smart header="An example of an error" -If you're curious to see a concrete example of such an error, check this code out: +````smart header="Příklad chyby" +Pokud jste zvědaví na konkrétní příklad takové chyby, zkuste si tento kód: ```js run alert("Hello"); @@ -61,95 +61,91 @@ alert("Hello"); [1, 2].forEach(alert); ``` -No need to think about the meaning of the brackets `[]` and `forEach` yet. We'll study them later. For now, just remember the result of running the code: it shows `Hello`, then `1`, then `2`. +O významu hranatých závorek `[]` a klíčového slova `forEach` zatím nemusíte přemýšlet. To probereme později. Nyní si jen zapamatujte výsledek kódu: zobrazí `Ahoj`, pak `1`, pak `2`. -Now let's remove the semicolon after the `alert`: +Nyní odstraníme středník před `alert`: ```js run no-beautify -alert("Hello") +alert("Ahoj") [1, 2].forEach(alert); ``` -The difference compared to the code above is only one character: the semicolon at the end of the first line is gone. +Rozdíl oproti výše uvedenému kódu je pouze v jednom znaku: středník na konci prvního řádku zmizel. -If we run this code, only the first `Hello` shows (and there's an error, you may need to open the console to see it). There are no numbers any more. +Když tento kód nyní spustíme, zobrazí se jen první `Ahoj` (a pak nastane chyba, možná si budete muset otevřít konzoli, abyste ji viděli). Žádná čísla se už nezobrazí. -That's because JavaScript does not assume a semicolon before square brackets `[...]`. So, the code in the last example is treated as a single statement. +Je to proto, že JavaScript nepředpokládá středník před hranatými závorkami `[...]`. S kódem v prvním příkladu se tedy zachází jako s jediným příkazem. -Here's how the engine sees it: +Takto jej vidí engine: ```js run no-beautify -alert("Hello")[1, 2].forEach(alert); +alert("Ahoj")[1, 2].forEach(alert); ``` -Looks weird, right? Such merging in this case is just wrong. We need to put a semicolon after `alert` for the code to work correctly. +Vypadá to divně, že? Sloučení řádků v tomto případě je prostě špatně. Za `alert` musíme vložit středník, aby kód správně fungoval. -This can happen in other situations also. +To se může stát i v jiných situacích. ```` -We recommend putting semicolons between statements even if they are separated by newlines. This rule is widely adopted by the community. Let's note once again -- *it is possible* to leave out semicolons most of the time. But it's safer -- especially for a beginner -- to use them. +Doporučujeme vám psát středníky mezi příkazy i tehdy, když je odděluje konec řádku. Toto pravidlo je v komunitě všeobecně přijímáno. Zmíníme to ještě jednou -- ve většině případů *je možné* středník vypustit. Je však bezpečnější -- zejména pro začátečníky -- jej používat. -## Comments [#code-comments] +## Komentáře [#code-comments] -As time goes on, programs become more and more complex. It becomes necessary to add *comments* which describe what the code does and why. +S postupem času se programy stávají stále složitějšími a složitějšími, a proto je nutné do nich vkládat *komentáře*, které popisují, co kód dělá a proč. -Comments can be put into any place of a script. They don't affect its execution because the engine simply ignores them. +Komentáře můžeme vkládat na kterékoli místo ve skriptu. Nemají vliv na jeho výkon, protože je engine jednoduše ignoruje. -**One-line comments start with two forward slash characters `//`.** +**Jednořádkové komentáře jsou uvozeny dvěma lomítky `//`.** -The rest of the line is a comment. It may occupy a full line of its own or follow a statement. +Celý zbytek řádku je komentář. Může být umístěn na samostatném řádku nebo za příkazem. -Like here: +Například zde: ```js run -// This comment occupies a line of its own -alert('Hello'); +// Tento komentář je umístěn na samostatném řádku +alert('Ahoj'); -alert('World'); // This comment follows the statement +alert('světe'); // Tento komentář následuje za příkazem ``` -**Multiline comments start with a forward slash and an asterisk /* and end with an asterisk and a forward slash */.** +**Víceřádkové komentáře začínají lomítkem a hvězdičkou /* a končí hvězdičkou a lomítkem */.** -Like this: +Například takto: ```js run -/* An example with two messages. -This is a multiline comment. +/* Příklad se dvěma zprávami. +Toto je víceřádkový komentář. */ -alert('Hello'); -alert('World'); +alert('Ahoj'); +alert('světe'); ``` -The content of comments is ignored, so if we put code inside /* ... */, it won't execute. +Obsah komentáře se ignoruje, proto jestliže mezi /* ... */ vložíme kód, neprovede se. -Sometimes it can be handy to temporarily disable a part of code: +Někdy může přijít vhod dočasně zneplatnit část kódu: ```js run -/* Commenting out the code -alert('Hello'); +/* Zakomentovaný kód +alert('Ahoj'); */ -alert('World'); +alert('světe'); ``` -```smart header="Use hotkeys!" -In most editors, a line of code can be commented out by pressing the `key:Ctrl+/` hotkey for a single-line comment and something like `key:Ctrl+Shift+/` -- for multiline comments (select a piece of code and press the hotkey). For Mac, try `key:Cmd` instead of `key:Ctrl` and `key:Option` instead of `key:Shift`. +```smart header="Používejte horké klávesy!" +Ve většině editorů se dá řádek kódu zakomentovat stisknutím klávesy `key:Ctrl+/` pro jednořádkový komentář a `key:Ctrl+Shift+/` nebo podobné kombinace pro víceřádkový komentář (označte část kódu jako blok a stiskněte uvedené klávesy). Na Macu zkuste `key:Cmd` místo `key:Ctrl` a `key:Option` místo `key:Shift`. ``` -````warn header="Nested comments are not supported!" -There may not be `/*...*/` inside another `/*...*/`. - -Such code will die with an error: +````warn header="Vnořené komentáře nejsou povoleny!" +Uvnitř `/*...*/` nesmí být další `/*...*/`. Takový kód skončí s chybou: ```js run no-beautify /* - /* nested comment ?!? */ + /* vnořený komentář ?!? */ */ -alert( 'World' ); +alert( 'světe' ); ``` ```` -Please, don't hesitate to comment your code. - -Comments increase the overall code footprint, but that's not a problem at all. There are many tools which minify code before publishing to a production server. They remove comments, so they don't appear in the working scripts. Therefore, comments do not have negative effects on production at all. +Neváhejte do svého kódu vkládat komentáře. Sice zvětšují velikost kódu, ale to není vůbec žádný problém. Existuje mnoho nástrojů, které kód před publikací na produkčním serveru minimalizují a odstraní z něj komentáře, takže ty se v prováděných skriptech neobjeví. Komentáře tedy nemají vůbec žádný negativní efekt na výkon. -Later in the tutorial there will be a chapter that also explains how to write better comments. +Později v tomto tutoriálu budeme mít kapitolu , která nám vysvětlí, jak psát komentáře co nejlépe. From a97838b6930b0a0315f6f03e314b5b17a122355f Mon Sep 17 00:00:00 2001 From: Otmar Onderek Date: Sun, 10 Apr 2022 20:15:45 +0200 Subject: [PATCH 03/20] Revert "2.2" This reverts commit d1ac1dacf3d7fb8b9892b16d5b6e72d7ca595f8e. --- 1-js/02-first-steps/02-structure/article.md | 130 ++++++++++---------- 1 file changed, 67 insertions(+), 63 deletions(-) diff --git a/1-js/02-first-steps/02-structure/article.md b/1-js/02-first-steps/02-structure/article.md index 82e9fdf40..e81fd343d 100644 --- a/1-js/02-first-steps/02-structure/article.md +++ b/1-js/02-first-steps/02-structure/article.md @@ -1,44 +1,44 @@ -# Struktura kódu +# Code structure -První, co si prostudujeme, jsou stavební bloky kódu. +The first thing we'll study is the building blocks of code. -## Příkazy +## Statements -Příkazy (anglicky statement) jsou syntaktické konstrukce a povely, které provádějí akce. +Statements are syntax constructs and commands that perform actions. -Už jsme viděli příkaz `alert('Ahoj, světe!')`, který zobrazuje zprávu „Ahoj, světe!“. +We've already seen a statement, `alert('Hello, world!')`, which shows the message "Hello, world!". -V kódu můžeme mít tolik příkazů, kolik chceme. Příkazy mohou být odděleny středníkem. +We can have as many statements in our code as we want. Statements can be separated with a semicolon. -Například zde rozdělíme „Ahoj světe“ na dvě zprávy: +For example, here we split "Hello World" into two alerts: ```js run no-beautify -alert('Ahoj'); alert('Světe'); +alert('Hello'); alert('World'); ``` -Každý příkaz obvykle píšeme na nový řádek, aby kód byl čitelnější: +Usually, statements are written on separate lines to make the code more readable: ```js run no-beautify -alert('Ahoj'); -alert('Světe'); +alert('Hello'); +alert('World'); ``` -## Středníky [#semicolon] +## Semicolons [#semicolon] -Ve většině případů, kdy je uveden konec řádku, můžeme středník vynechat. +A semicolon may be omitted in most cases when a line break exists. -Toto by také fungovalo: +This would also work: ```js run no-beautify -alert('Ahoj') -alert('Světe') +alert('Hello') +alert('World') ``` -Zde JavaScript interpretuje konec řádku jako „implicitní“ středník. Takové chování se nazývá [automatické vkládání středníku](https://tc39.github.io/ecma262/#sec-automatic-semicolon-insertion). +Here, JavaScript interprets the line break as an "implicit" semicolon. This is called an [automatic semicolon insertion](https://tc39.github.io/ecma262/#sec-automatic-semicolon-insertion). -**Ve většině případů nový řádek znamená středník, ale „ve většině případů“ neznamená „vždy“!** +**In most cases, a newline implies a semicolon. But "in most cases" does not mean "always"!** -Existují případy, v nichž nový řádek neznamená středník. Například: +There are cases when a newline does not mean a semicolon. For example: ```js run no-beautify alert(3 + @@ -46,14 +46,14 @@ alert(3 + + 2); ``` -Tento kód vypíše `6`, protože JavaScript sem středník nevloží. Je intuitivně zřejmé, že jestliže řádek končí znaménkem plus `"+"`, je to „neúplný výraz“, takže středník by byl nesprávný. V tomto případě to bude fungovat tak, jak očekáváme. +The code outputs `6` because JavaScript does not insert semicolons here. It is intuitively obvious that if the line ends with a plus `"+"`, then it is an "incomplete expression", so a semicolon there would be incorrect. And in this case, that works as intended. -**Existují však situace, v nichž JavaScript „nedokáže“ vložit středník tam, kde je opravdu zapotřebí.** +**But there are situations where JavaScript "fails" to assume a semicolon where it is really needed.** -V takových případech nastanou chyby, které je poměrně těžké najít a opravit. +Errors which occur in such cases are quite hard to find and fix. -````smart header="Příklad chyby" -Pokud jste zvědaví na konkrétní příklad takové chyby, zkuste si tento kód: +````smart header="An example of an error" +If you're curious to see a concrete example of such an error, check this code out: ```js run alert("Hello"); @@ -61,91 +61,95 @@ alert("Hello"); [1, 2].forEach(alert); ``` -O významu hranatých závorek `[]` a klíčového slova `forEach` zatím nemusíte přemýšlet. To probereme později. Nyní si jen zapamatujte výsledek kódu: zobrazí `Ahoj`, pak `1`, pak `2`. +No need to think about the meaning of the brackets `[]` and `forEach` yet. We'll study them later. For now, just remember the result of running the code: it shows `Hello`, then `1`, then `2`. -Nyní odstraníme středník před `alert`: +Now let's remove the semicolon after the `alert`: ```js run no-beautify -alert("Ahoj") +alert("Hello") [1, 2].forEach(alert); ``` -Rozdíl oproti výše uvedenému kódu je pouze v jednom znaku: středník na konci prvního řádku zmizel. +The difference compared to the code above is only one character: the semicolon at the end of the first line is gone. -Když tento kód nyní spustíme, zobrazí se jen první `Ahoj` (a pak nastane chyba, možná si budete muset otevřít konzoli, abyste ji viděli). Žádná čísla se už nezobrazí. +If we run this code, only the first `Hello` shows (and there's an error, you may need to open the console to see it). There are no numbers any more. -Je to proto, že JavaScript nepředpokládá středník před hranatými závorkami `[...]`. S kódem v prvním příkladu se tedy zachází jako s jediným příkazem. +That's because JavaScript does not assume a semicolon before square brackets `[...]`. So, the code in the last example is treated as a single statement. -Takto jej vidí engine: +Here's how the engine sees it: ```js run no-beautify -alert("Ahoj")[1, 2].forEach(alert); +alert("Hello")[1, 2].forEach(alert); ``` -Vypadá to divně, že? Sloučení řádků v tomto případě je prostě špatně. Za `alert` musíme vložit středník, aby kód správně fungoval. +Looks weird, right? Such merging in this case is just wrong. We need to put a semicolon after `alert` for the code to work correctly. -To se může stát i v jiných situacích. +This can happen in other situations also. ```` -Doporučujeme vám psát středníky mezi příkazy i tehdy, když je odděluje konec řádku. Toto pravidlo je v komunitě všeobecně přijímáno. Zmíníme to ještě jednou -- ve většině případů *je možné* středník vypustit. Je však bezpečnější -- zejména pro začátečníky -- jej používat. +We recommend putting semicolons between statements even if they are separated by newlines. This rule is widely adopted by the community. Let's note once again -- *it is possible* to leave out semicolons most of the time. But it's safer -- especially for a beginner -- to use them. -## Komentáře [#code-comments] +## Comments [#code-comments] -S postupem času se programy stávají stále složitějšími a složitějšími, a proto je nutné do nich vkládat *komentáře*, které popisují, co kód dělá a proč. +As time goes on, programs become more and more complex. It becomes necessary to add *comments* which describe what the code does and why. -Komentáře můžeme vkládat na kterékoli místo ve skriptu. Nemají vliv na jeho výkon, protože je engine jednoduše ignoruje. +Comments can be put into any place of a script. They don't affect its execution because the engine simply ignores them. -**Jednořádkové komentáře jsou uvozeny dvěma lomítky `//`.** +**One-line comments start with two forward slash characters `//`.** -Celý zbytek řádku je komentář. Může být umístěn na samostatném řádku nebo za příkazem. +The rest of the line is a comment. It may occupy a full line of its own or follow a statement. -Například zde: +Like here: ```js run -// Tento komentář je umístěn na samostatném řádku -alert('Ahoj'); +// This comment occupies a line of its own +alert('Hello'); -alert('světe'); // Tento komentář následuje za příkazem +alert('World'); // This comment follows the statement ``` -**Víceřádkové komentáře začínají lomítkem a hvězdičkou /* a končí hvězdičkou a lomítkem */.** +**Multiline comments start with a forward slash and an asterisk /* and end with an asterisk and a forward slash */.** -Například takto: +Like this: ```js run -/* Příklad se dvěma zprávami. -Toto je víceřádkový komentář. +/* An example with two messages. +This is a multiline comment. */ -alert('Ahoj'); -alert('světe'); +alert('Hello'); +alert('World'); ``` -Obsah komentáře se ignoruje, proto jestliže mezi /* ... */ vložíme kód, neprovede se. +The content of comments is ignored, so if we put code inside /* ... */, it won't execute. -Někdy může přijít vhod dočasně zneplatnit část kódu: +Sometimes it can be handy to temporarily disable a part of code: ```js run -/* Zakomentovaný kód -alert('Ahoj'); +/* Commenting out the code +alert('Hello'); */ -alert('světe'); +alert('World'); ``` -```smart header="Používejte horké klávesy!" -Ve většině editorů se dá řádek kódu zakomentovat stisknutím klávesy `key:Ctrl+/` pro jednořádkový komentář a `key:Ctrl+Shift+/` nebo podobné kombinace pro víceřádkový komentář (označte část kódu jako blok a stiskněte uvedené klávesy). Na Macu zkuste `key:Cmd` místo `key:Ctrl` a `key:Option` místo `key:Shift`. +```smart header="Use hotkeys!" +In most editors, a line of code can be commented out by pressing the `key:Ctrl+/` hotkey for a single-line comment and something like `key:Ctrl+Shift+/` -- for multiline comments (select a piece of code and press the hotkey). For Mac, try `key:Cmd` instead of `key:Ctrl` and `key:Option` instead of `key:Shift`. ``` -````warn header="Vnořené komentáře nejsou povoleny!" -Uvnitř `/*...*/` nesmí být další `/*...*/`. Takový kód skončí s chybou: +````warn header="Nested comments are not supported!" +There may not be `/*...*/` inside another `/*...*/`. + +Such code will die with an error: ```js run no-beautify /* - /* vnořený komentář ?!? */ + /* nested comment ?!? */ */ -alert( 'světe' ); +alert( 'World' ); ``` ```` -Neváhejte do svého kódu vkládat komentáře. Sice zvětšují velikost kódu, ale to není vůbec žádný problém. Existuje mnoho nástrojů, které kód před publikací na produkčním serveru minimalizují a odstraní z něj komentáře, takže ty se v prováděných skriptech neobjeví. Komentáře tedy nemají vůbec žádný negativní efekt na výkon. +Please, don't hesitate to comment your code. + +Comments increase the overall code footprint, but that's not a problem at all. There are many tools which minify code before publishing to a production server. They remove comments, so they don't appear in the working scripts. Therefore, comments do not have negative effects on production at all. -Později v tomto tutoriálu budeme mít kapitolu , která nám vysvětlí, jak psát komentáře co nejlépe. +Later in the tutorial there will be a chapter that also explains how to write better comments. From 87ffd75460448ed4d8a7dceefbd28e3599015f31 Mon Sep 17 00:00:00 2001 From: Otmar Onderek Date: Sun, 10 Apr 2022 20:15:49 +0200 Subject: [PATCH 04/20] Revert "2.1, part 1" This reverts commit adbdb743f52471087fd1042358445a09e6414f94. --- .../01-hello-world/1-hello-alert/index.html | 2 +- .../01-hello-world/1-hello-alert/task.md | 8 +- .../01-hello-world/2-hello-alert-ext/alert.js | 2 +- .../2-hello-alert-ext/solution.md | 5 +- .../01-hello-world/2-hello-alert-ext/task.md | 6 +- 1-js/02-first-steps/01-hello-world/article.md | 90 +++++++++---------- 6 files changed, 57 insertions(+), 56 deletions(-) diff --git a/1-js/02-first-steps/01-hello-world/1-hello-alert/index.html b/1-js/02-first-steps/01-hello-world/1-hello-alert/index.html index fa41faee3..ff1d871b0 100644 --- a/1-js/02-first-steps/01-hello-world/1-hello-alert/index.html +++ b/1-js/02-first-steps/01-hello-world/1-hello-alert/index.html @@ -4,7 +4,7 @@ diff --git a/1-js/02-first-steps/01-hello-world/1-hello-alert/task.md b/1-js/02-first-steps/01-hello-world/1-hello-alert/task.md index 75fd34470..afed6a91d 100644 --- a/1-js/02-first-steps/01-hello-world/1-hello-alert/task.md +++ b/1-js/02-first-steps/01-hello-world/1-hello-alert/task.md @@ -1,12 +1,12 @@ -důležitost: 5 +importance: 5 --- -# Zobrazte zprávu +# Show an alert -Vytvořte stránku, která zobrazí zprávu „Já jsem JavaScript!“. +Create a page that shows a message "I'm JavaScript!". -Nezáleží na tom, zda to uděláte na pískovišti nebo na svém harddisku, jen se snažte, aby to fungovalo. +Do it in a sandbox, or on your hard drive, doesn't matter, just ensure that it works. [demo src="solution"] diff --git a/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/alert.js b/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/alert.js index a12ad2425..4de725971 100644 --- a/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/alert.js +++ b/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/alert.js @@ -1 +1 @@ -alert("Já jsem JavaScript!"); \ No newline at end of file +alert("I'm JavaScript!"); \ No newline at end of file diff --git a/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/solution.md b/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/solution.md index be060a3de..f42c41e6d 100644 --- a/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/solution.md +++ b/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/solution.md @@ -1,7 +1,8 @@ -HTML kód: +The HTML code: [html src="index.html"] -Soubor `alert.js` ve stejné složce: +For the file `alert.js` in the same folder: [js src="alert.js"] + diff --git a/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/task.md b/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/task.md index 1f19efdcc..26168d6a7 100644 --- a/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/task.md +++ b/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/task.md @@ -2,8 +2,8 @@ importance: 5 --- -# Zobrazte zprávu pomocí externího skriptu +# Show an alert with an external script -Vezměte si řešení předchozí úlohy a upravte je tak, že obsah skriptu umístíte do externího souboru `alert.js`, který bude umístěn ve stejné složce. +Take the solution of the previous task . Modify it by extracting the script content into an external file `alert.js`, residing in the same folder. -Otevřete stránku a ujistěte se, že zobrazování zprávy funguje. +Open the page, ensure that the alert works. diff --git a/1-js/02-first-steps/01-hello-world/article.md b/1-js/02-first-steps/01-hello-world/article.md index 3857c0c25..35f82bf5d 100644 --- a/1-js/02-first-steps/01-hello-world/article.md +++ b/1-js/02-first-steps/01-hello-world/article.md @@ -1,17 +1,17 @@ -# Ahoj, světe! +# Hello, world! -Tato část tutoriálu pojednává o základech JavaScriptu, o samotném jazyce. +This part of the tutorial is about core JavaScript, the language itself. -Potřebujeme však pracovní prostředí, v němž budeme spouštět skripty. Protože tato kniha je online, prohlížeč je dobrá volba. Budeme však udržovat množství příkazů specifických pro prohlížeč (např. `alert`) na minimu, abyste nad nimi nemuseli ztrácet čas, jestliže se plánujete zaměřit na jiné prostředí (např. Node.js). Na JavaScript v prohlížeči se zaměříme v [další části](/ui) tutoriálu. +But we need a working environment to run our scripts and, since this book is online, the browser is a good choice. We'll keep the amount of browser-specific commands (like `alert`) to a minimum so that you don't spend time on them if you plan to concentrate on another environment (like Node.js). We'll focus on JavaScript in the browser in the [next part](/ui) of the tutorial. -Nejprve se podíváme, jak vložit skript na webovou stránku. V prostředích na straně serveru (např. Node.js) můžete spustit skript příkazem, například `"node my.js"`. +So first, let's see how we attach a script to a webpage. For server-side environments (like Node.js), you can execute the script with a command like `"node my.js"`. -## Značka „script“ +## The "script" tag -Programy v JavaScriptu můžeme vložit téměř kamkoli do HTML dokumentu pomocí značky ` */!* -

...a za skriptem.

+

...After the script.

@@ -35,24 +35,24 @@ Příklad: ``` ```online -Příklad si můžete přehrát kliknutím na tlačítko „Play“ v pravém horním rohu ve výše uvedeném okně. +You can run the example by clicking the "Play" button in the right-top corner of the box above. ``` -Značka ` ``` - Tento trik se v moderním JavaScriptu již nepoužívá. Tyto komentáře znepřístupňovaly JavaScriptový kód starým prohlížečům, které neuměly zpracovat značku ` + ``` -Zde `/cesta/ke/skriptu.js` je absolutní cesta ke skriptu z kořenové složky webového sídla. Můžeme uvést i relativní cestu od aktuální stránky. Například `src="script.js"`, stejně jako `src="./script.js"`, by znamenalo soubor `"script.js"` v aktuální složce. +Here, `/path/to/script.js` is an absolute path to the script from the site root. One can also provide a relative path from the current page. For instance, `src="script.js"`, just like `src="./script.js"`, would mean a file `"script.js"` in the current folder. -Můžeme poskytnout i úplné URL. Například: +We can give a full URL as well. For instance: ```html ``` -Chceme-li připojit více skriptů, použijeme více značek: +To attach several scripts, use multiple tags: ```html @@ -90,43 +90,43 @@ Chceme-li připojit více skriptů, použijeme více značek: ``` ```smart -Bývá pravidlem, že do HTML se ukládají jen ty nejjednodušší skripty. Složitější se umisťují do oddělených souborů. +As a rule, only the simplest scripts are put into HTML. More complex ones reside in separate files. -Výhodou odděleného souboru je, že prohlížeč si jej stáhne a uloží do své [cache](https://en.wikipedia.org/wiki/Web_cache). +The benefit of a separate file is that the browser will download it and store it in its [cache](https://en.wikipedia.org/wiki/Web_cache). -Jiné stránky, které se odkazují na stejný skript, si jej místo opětovného stažení nahrají z cache, takže se soubor ve skutečnosti stáhne pouze jednou. +Other pages that reference the same script will take it from the cache instead of downloading it, so the file is actually downloaded only once. -Tím se snižuje objem přenosu a načítání stránek se urychluje. +That reduces traffic and makes pages faster. ``` -````warn header="Je-li nastaveno `src`, obsah značky se ignoruje." -Jedna značka ` ``` -Musíme si vybrat mezi externím ` + ``` ```` -## Shrnutí +## Summary -- JavaScriptový kód můžeme umístit na stránku pomocí značky ``. +- We can use a ``. -O skriptech v prohlížeči a jejich interakcí s webovou stránkou toho lze napsat mnohem více. Mějme však na paměti, že tato část tutoriálu je věnována pouze jazyku JavaScript, takže bychom se zde neměli zatěžovat specifiky jeho implementací v prohlížečích. Ke spouštění skriptů v JavaScriptu budeme používat prohlížeč, což je při online čtení velmi výhodné, ale je to jen jedna z mnoha možností. +There is much more to learn about browser scripts and their interaction with the webpage. But let's keep in mind that this part of the tutorial is devoted to the JavaScript language, so we shouldn't distract ourselves with browser-specific implementations of it. We'll be using the browser as a way to run JavaScript, which is very convenient for online reading, but only one of many. From 95f2ccd2997721abc4e0798a6fa875659c12ad64 Mon Sep 17 00:00:00 2001 From: Otmar Onderek Date: Sun, 10 Apr 2022 20:21:48 +0200 Subject: [PATCH 05/20] 2.2 --- 1-js/02-first-steps/02-structure/article.md | 130 ++++++++++---------- 1 file changed, 63 insertions(+), 67 deletions(-) diff --git a/1-js/02-first-steps/02-structure/article.md b/1-js/02-first-steps/02-structure/article.md index e81fd343d..82e9fdf40 100644 --- a/1-js/02-first-steps/02-structure/article.md +++ b/1-js/02-first-steps/02-structure/article.md @@ -1,44 +1,44 @@ -# Code structure +# Struktura kódu -The first thing we'll study is the building blocks of code. +První, co si prostudujeme, jsou stavební bloky kódu. -## Statements +## Příkazy -Statements are syntax constructs and commands that perform actions. +Příkazy (anglicky statement) jsou syntaktické konstrukce a povely, které provádějí akce. -We've already seen a statement, `alert('Hello, world!')`, which shows the message "Hello, world!". +Už jsme viděli příkaz `alert('Ahoj, světe!')`, který zobrazuje zprávu „Ahoj, světe!“. -We can have as many statements in our code as we want. Statements can be separated with a semicolon. +V kódu můžeme mít tolik příkazů, kolik chceme. Příkazy mohou být odděleny středníkem. -For example, here we split "Hello World" into two alerts: +Například zde rozdělíme „Ahoj světe“ na dvě zprávy: ```js run no-beautify -alert('Hello'); alert('World'); +alert('Ahoj'); alert('Světe'); ``` -Usually, statements are written on separate lines to make the code more readable: +Každý příkaz obvykle píšeme na nový řádek, aby kód byl čitelnější: ```js run no-beautify -alert('Hello'); -alert('World'); +alert('Ahoj'); +alert('Světe'); ``` -## Semicolons [#semicolon] +## Středníky [#semicolon] -A semicolon may be omitted in most cases when a line break exists. +Ve většině případů, kdy je uveden konec řádku, můžeme středník vynechat. -This would also work: +Toto by také fungovalo: ```js run no-beautify -alert('Hello') -alert('World') +alert('Ahoj') +alert('Světe') ``` -Here, JavaScript interprets the line break as an "implicit" semicolon. This is called an [automatic semicolon insertion](https://tc39.github.io/ecma262/#sec-automatic-semicolon-insertion). +Zde JavaScript interpretuje konec řádku jako „implicitní“ středník. Takové chování se nazývá [automatické vkládání středníku](https://tc39.github.io/ecma262/#sec-automatic-semicolon-insertion). -**In most cases, a newline implies a semicolon. But "in most cases" does not mean "always"!** +**Ve většině případů nový řádek znamená středník, ale „ve většině případů“ neznamená „vždy“!** -There are cases when a newline does not mean a semicolon. For example: +Existují případy, v nichž nový řádek neznamená středník. Například: ```js run no-beautify alert(3 + @@ -46,14 +46,14 @@ alert(3 + + 2); ``` -The code outputs `6` because JavaScript does not insert semicolons here. It is intuitively obvious that if the line ends with a plus `"+"`, then it is an "incomplete expression", so a semicolon there would be incorrect. And in this case, that works as intended. +Tento kód vypíše `6`, protože JavaScript sem středník nevloží. Je intuitivně zřejmé, že jestliže řádek končí znaménkem plus `"+"`, je to „neúplný výraz“, takže středník by byl nesprávný. V tomto případě to bude fungovat tak, jak očekáváme. -**But there are situations where JavaScript "fails" to assume a semicolon where it is really needed.** +**Existují však situace, v nichž JavaScript „nedokáže“ vložit středník tam, kde je opravdu zapotřebí.** -Errors which occur in such cases are quite hard to find and fix. +V takových případech nastanou chyby, které je poměrně těžké najít a opravit. -````smart header="An example of an error" -If you're curious to see a concrete example of such an error, check this code out: +````smart header="Příklad chyby" +Pokud jste zvědaví na konkrétní příklad takové chyby, zkuste si tento kód: ```js run alert("Hello"); @@ -61,95 +61,91 @@ alert("Hello"); [1, 2].forEach(alert); ``` -No need to think about the meaning of the brackets `[]` and `forEach` yet. We'll study them later. For now, just remember the result of running the code: it shows `Hello`, then `1`, then `2`. +O významu hranatých závorek `[]` a klíčového slova `forEach` zatím nemusíte přemýšlet. To probereme později. Nyní si jen zapamatujte výsledek kódu: zobrazí `Ahoj`, pak `1`, pak `2`. -Now let's remove the semicolon after the `alert`: +Nyní odstraníme středník před `alert`: ```js run no-beautify -alert("Hello") +alert("Ahoj") [1, 2].forEach(alert); ``` -The difference compared to the code above is only one character: the semicolon at the end of the first line is gone. +Rozdíl oproti výše uvedenému kódu je pouze v jednom znaku: středník na konci prvního řádku zmizel. -If we run this code, only the first `Hello` shows (and there's an error, you may need to open the console to see it). There are no numbers any more. +Když tento kód nyní spustíme, zobrazí se jen první `Ahoj` (a pak nastane chyba, možná si budete muset otevřít konzoli, abyste ji viděli). Žádná čísla se už nezobrazí. -That's because JavaScript does not assume a semicolon before square brackets `[...]`. So, the code in the last example is treated as a single statement. +Je to proto, že JavaScript nepředpokládá středník před hranatými závorkami `[...]`. S kódem v prvním příkladu se tedy zachází jako s jediným příkazem. -Here's how the engine sees it: +Takto jej vidí engine: ```js run no-beautify -alert("Hello")[1, 2].forEach(alert); +alert("Ahoj")[1, 2].forEach(alert); ``` -Looks weird, right? Such merging in this case is just wrong. We need to put a semicolon after `alert` for the code to work correctly. +Vypadá to divně, že? Sloučení řádků v tomto případě je prostě špatně. Za `alert` musíme vložit středník, aby kód správně fungoval. -This can happen in other situations also. +To se může stát i v jiných situacích. ```` -We recommend putting semicolons between statements even if they are separated by newlines. This rule is widely adopted by the community. Let's note once again -- *it is possible* to leave out semicolons most of the time. But it's safer -- especially for a beginner -- to use them. +Doporučujeme vám psát středníky mezi příkazy i tehdy, když je odděluje konec řádku. Toto pravidlo je v komunitě všeobecně přijímáno. Zmíníme to ještě jednou -- ve většině případů *je možné* středník vypustit. Je však bezpečnější -- zejména pro začátečníky -- jej používat. -## Comments [#code-comments] +## Komentáře [#code-comments] -As time goes on, programs become more and more complex. It becomes necessary to add *comments* which describe what the code does and why. +S postupem času se programy stávají stále složitějšími a složitějšími, a proto je nutné do nich vkládat *komentáře*, které popisují, co kód dělá a proč. -Comments can be put into any place of a script. They don't affect its execution because the engine simply ignores them. +Komentáře můžeme vkládat na kterékoli místo ve skriptu. Nemají vliv na jeho výkon, protože je engine jednoduše ignoruje. -**One-line comments start with two forward slash characters `//`.** +**Jednořádkové komentáře jsou uvozeny dvěma lomítky `//`.** -The rest of the line is a comment. It may occupy a full line of its own or follow a statement. +Celý zbytek řádku je komentář. Může být umístěn na samostatném řádku nebo za příkazem. -Like here: +Například zde: ```js run -// This comment occupies a line of its own -alert('Hello'); +// Tento komentář je umístěn na samostatném řádku +alert('Ahoj'); -alert('World'); // This comment follows the statement +alert('světe'); // Tento komentář následuje za příkazem ``` -**Multiline comments start with a forward slash and an asterisk /* and end with an asterisk and a forward slash */.** +**Víceřádkové komentáře začínají lomítkem a hvězdičkou /* a končí hvězdičkou a lomítkem */.** -Like this: +Například takto: ```js run -/* An example with two messages. -This is a multiline comment. +/* Příklad se dvěma zprávami. +Toto je víceřádkový komentář. */ -alert('Hello'); -alert('World'); +alert('Ahoj'); +alert('světe'); ``` -The content of comments is ignored, so if we put code inside /* ... */, it won't execute. +Obsah komentáře se ignoruje, proto jestliže mezi /* ... */ vložíme kód, neprovede se. -Sometimes it can be handy to temporarily disable a part of code: +Někdy může přijít vhod dočasně zneplatnit část kódu: ```js run -/* Commenting out the code -alert('Hello'); +/* Zakomentovaný kód +alert('Ahoj'); */ -alert('World'); +alert('světe'); ``` -```smart header="Use hotkeys!" -In most editors, a line of code can be commented out by pressing the `key:Ctrl+/` hotkey for a single-line comment and something like `key:Ctrl+Shift+/` -- for multiline comments (select a piece of code and press the hotkey). For Mac, try `key:Cmd` instead of `key:Ctrl` and `key:Option` instead of `key:Shift`. +```smart header="Používejte horké klávesy!" +Ve většině editorů se dá řádek kódu zakomentovat stisknutím klávesy `key:Ctrl+/` pro jednořádkový komentář a `key:Ctrl+Shift+/` nebo podobné kombinace pro víceřádkový komentář (označte část kódu jako blok a stiskněte uvedené klávesy). Na Macu zkuste `key:Cmd` místo `key:Ctrl` a `key:Option` místo `key:Shift`. ``` -````warn header="Nested comments are not supported!" -There may not be `/*...*/` inside another `/*...*/`. - -Such code will die with an error: +````warn header="Vnořené komentáře nejsou povoleny!" +Uvnitř `/*...*/` nesmí být další `/*...*/`. Takový kód skončí s chybou: ```js run no-beautify /* - /* nested comment ?!? */ + /* vnořený komentář ?!? */ */ -alert( 'World' ); +alert( 'světe' ); ``` ```` -Please, don't hesitate to comment your code. - -Comments increase the overall code footprint, but that's not a problem at all. There are many tools which minify code before publishing to a production server. They remove comments, so they don't appear in the working scripts. Therefore, comments do not have negative effects on production at all. +Neváhejte do svého kódu vkládat komentáře. Sice zvětšují velikost kódu, ale to není vůbec žádný problém. Existuje mnoho nástrojů, které kód před publikací na produkčním serveru minimalizují a odstraní z něj komentáře, takže ty se v prováděných skriptech neobjeví. Komentáře tedy nemají vůbec žádný negativní efekt na výkon. -Later in the tutorial there will be a chapter that also explains how to write better comments. +Později v tomto tutoriálu budeme mít kapitolu , která nám vysvětlí, jak psát komentáře co nejlépe. From 14962d4bfc56d3f7e03f27833648fca3cbe12f00 Mon Sep 17 00:00:00 2001 From: otmon76 <66325539+otmon76@users.noreply.github.com> Date: Sat, 30 Apr 2022 19:33:08 +0200 Subject: [PATCH 06/20] Update 1-js/02-first-steps/02-structure/article.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Daniel Pomajbík <60559058+danipoma@users.noreply.github.com> --- 1-js/02-first-steps/02-structure/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/02-first-steps/02-structure/article.md b/1-js/02-first-steps/02-structure/article.md index 82e9fdf40..869b749ac 100644 --- a/1-js/02-first-steps/02-structure/article.md +++ b/1-js/02-first-steps/02-structure/article.md @@ -46,7 +46,7 @@ alert(3 + + 2); ``` -Tento kód vypíše `6`, protože JavaScript sem středník nevloží. Je intuitivně zřejmé, že jestliže řádek končí znaménkem plus `"+"`, je to „neúplný výraz“, takže středník by byl nesprávný. V tomto případě to bude fungovat tak, jak očekáváme. +Tento kód vypíše `6`, protože JavaScript sem středník nevloží. Je zřejmé, že jestliže řádek končí znaménkem plus `"+"`, je to „neúplný výraz“, takže středník by byl nesprávný. V tomto případě to bude fungovat tak, jak očekáváme. **Existují však situace, v nichž JavaScript „nedokáže“ vložit středník tam, kde je opravdu zapotřebí.** From 477632e9b999a0f25a7b1b5bcbdd751ebfd8afec Mon Sep 17 00:00:00 2001 From: otmon76 <66325539+otmon76@users.noreply.github.com> Date: Sat, 30 Apr 2022 19:33:16 +0200 Subject: [PATCH 07/20] Update 1-js/02-first-steps/02-structure/article.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Daniel Pomajbík <60559058+danipoma@users.noreply.github.com> --- 1-js/02-first-steps/02-structure/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/02-first-steps/02-structure/article.md b/1-js/02-first-steps/02-structure/article.md index 869b749ac..07c306278 100644 --- a/1-js/02-first-steps/02-structure/article.md +++ b/1-js/02-first-steps/02-structure/article.md @@ -71,7 +71,7 @@ alert("Ahoj") [1, 2].forEach(alert); ``` -Rozdíl oproti výše uvedenému kódu je pouze v jednom znaku: středník na konci prvního řádku zmizel. +Rozdíl oproti výše uvedenému kódu je pouze v jednom znaku: středník na konci prvního řádku chybí. Když tento kód nyní spustíme, zobrazí se jen první `Ahoj` (a pak nastane chyba, možná si budete muset otevřít konzoli, abyste ji viděli). Žádná čísla se už nezobrazí. From 626a615b7b6c1feb6bfeac8a9d3e2a01596ab1cc Mon Sep 17 00:00:00 2001 From: otmon76 <66325539+otmon76@users.noreply.github.com> Date: Sat, 30 Apr 2022 19:33:28 +0200 Subject: [PATCH 08/20] Update 1-js/02-first-steps/02-structure/article.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Daniel Pomajbík <60559058+danipoma@users.noreply.github.com> --- 1-js/02-first-steps/02-structure/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/02-first-steps/02-structure/article.md b/1-js/02-first-steps/02-structure/article.md index 07c306278..488706667 100644 --- a/1-js/02-first-steps/02-structure/article.md +++ b/1-js/02-first-steps/02-structure/article.md @@ -73,7 +73,7 @@ alert("Ahoj") Rozdíl oproti výše uvedenému kódu je pouze v jednom znaku: středník na konci prvního řádku chybí. -Když tento kód nyní spustíme, zobrazí se jen první `Ahoj` (a pak nastane chyba, možná si budete muset otevřít konzoli, abyste ji viděli). Žádná čísla se už nezobrazí. +Když tento kód spustíme, zobrazí se jen první `Ahoj` (a pak nastane chyba, možná si budete muset otevřít konzoli, abyste ji viděli). Žádná čísla se už nezobrazí. Je to proto, že JavaScript nepředpokládá středník před hranatými závorkami `[...]`. S kódem v prvním příkladu se tedy zachází jako s jediným příkazem. From 19de9bcefda29aa515b947b3b981be20a82b75d9 Mon Sep 17 00:00:00 2001 From: otmon76 <66325539+otmon76@users.noreply.github.com> Date: Sat, 30 Apr 2022 19:37:03 +0200 Subject: [PATCH 09/20] Update 1-js/02-first-steps/02-structure/article.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Daniel Pomajbík <60559058+danipoma@users.noreply.github.com> --- 1-js/02-first-steps/02-structure/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/02-first-steps/02-structure/article.md b/1-js/02-first-steps/02-structure/article.md index 488706667..434dd9923 100644 --- a/1-js/02-first-steps/02-structure/article.md +++ b/1-js/02-first-steps/02-structure/article.md @@ -77,7 +77,7 @@ Když tento kód spustíme, zobrazí se jen první `Ahoj` (a pak nastane chyba, Je to proto, že JavaScript nepředpokládá středník před hranatými závorkami `[...]`. S kódem v prvním příkladu se tedy zachází jako s jediným příkazem. -Takto jej vidí engine: +Takto jej vidí motor (angl. engine): ```js run no-beautify alert("Ahoj")[1, 2].forEach(alert); From 8271f25e1f4b4f3899d5bde37a23db10d7b1e660 Mon Sep 17 00:00:00 2001 From: otmon76 <66325539+otmon76@users.noreply.github.com> Date: Sat, 30 Apr 2022 19:45:39 +0200 Subject: [PATCH 10/20] Update 1-js/02-first-steps/02-structure/article.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Daniel Pomajbík <60559058+danipoma@users.noreply.github.com> --- 1-js/02-first-steps/02-structure/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/02-first-steps/02-structure/article.md b/1-js/02-first-steps/02-structure/article.md index 434dd9923..8df629ec4 100644 --- a/1-js/02-first-steps/02-structure/article.md +++ b/1-js/02-first-steps/02-structure/article.md @@ -148,4 +148,4 @@ alert( 'světe' ); Neváhejte do svého kódu vkládat komentáře. Sice zvětšují velikost kódu, ale to není vůbec žádný problém. Existuje mnoho nástrojů, které kód před publikací na produkčním serveru minimalizují a odstraní z něj komentáře, takže ty se v prováděných skriptech neobjeví. Komentáře tedy nemají vůbec žádný negativní efekt na výkon. -Později v tomto tutoriálu budeme mít kapitolu , která nám vysvětlí, jak psát komentáře co nejlépe. +Později v tomto tutoriálu budeme mít kapitolu , která se mimo jiné zaobírá i tím, co by mělo a nemělo být v komentáři obsaženo. From e71e56e2f6bab49d661454c0054b6802c7a23d28 Mon Sep 17 00:00:00 2001 From: otmon76 <66325539+otmon76@users.noreply.github.com> Date: Sat, 30 Apr 2022 19:53:16 +0200 Subject: [PATCH 11/20] Update 1-js/02-first-steps/02-structure/article.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Daniel Pomajbík <60559058+danipoma@users.noreply.github.com> --- 1-js/02-first-steps/02-structure/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/02-first-steps/02-structure/article.md b/1-js/02-first-steps/02-structure/article.md index 8df629ec4..4dedd09e4 100644 --- a/1-js/02-first-steps/02-structure/article.md +++ b/1-js/02-first-steps/02-structure/article.md @@ -92,7 +92,7 @@ Doporučujeme vám psát středníky mezi příkazy i tehdy, když je odděluje ## Komentáře [#code-comments] -S postupem času se programy stávají stále složitějšími a složitějšími, a proto je nutné do nich vkládat *komentáře*, které popisují, co kód dělá a proč. +S postupem času se programy stávají čím dál složitější, a proto je nutné do nich vkládat *komentáře*, které popisují, co kód dělá a proč. Komentáře můžeme vkládat na kterékoli místo ve skriptu. Nemají vliv na jeho výkon, protože je engine jednoduše ignoruje. From eb0ec42879ef611027bcc337b6914f306762715c Mon Sep 17 00:00:00 2001 From: otmon76 <66325539+otmon76@users.noreply.github.com> Date: Sat, 30 Apr 2022 19:53:23 +0200 Subject: [PATCH 12/20] Update 1-js/02-first-steps/02-structure/article.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Daniel Pomajbík <60559058+danipoma@users.noreply.github.com> --- 1-js/02-first-steps/02-structure/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/02-first-steps/02-structure/article.md b/1-js/02-first-steps/02-structure/article.md index 4dedd09e4..3f417362b 100644 --- a/1-js/02-first-steps/02-structure/article.md +++ b/1-js/02-first-steps/02-structure/article.md @@ -131,7 +131,7 @@ alert('Ahoj'); alert('světe'); ``` -```smart header="Používejte horké klávesy!" +```smart header="Používejte zkratky!" Ve většině editorů se dá řádek kódu zakomentovat stisknutím klávesy `key:Ctrl+/` pro jednořádkový komentář a `key:Ctrl+Shift+/` nebo podobné kombinace pro víceřádkový komentář (označte část kódu jako blok a stiskněte uvedené klávesy). Na Macu zkuste `key:Cmd` místo `key:Ctrl` a `key:Option` místo `key:Shift`. ``` From f94fcad378f4bbda3190c62d2e44fd6e557b164a Mon Sep 17 00:00:00 2001 From: otmon76 <66325539+otmon76@users.noreply.github.com> Date: Sat, 30 Apr 2022 19:53:45 +0200 Subject: [PATCH 13/20] Update 1-js/02-first-steps/02-structure/article.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Daniel Pomajbík <60559058+danipoma@users.noreply.github.com> --- 1-js/02-first-steps/02-structure/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/02-first-steps/02-structure/article.md b/1-js/02-first-steps/02-structure/article.md index 3f417362b..3eef0185e 100644 --- a/1-js/02-first-steps/02-structure/article.md +++ b/1-js/02-first-steps/02-structure/article.md @@ -132,7 +132,7 @@ alert('světe'); ``` ```smart header="Používejte zkratky!" -Ve většině editorů se dá řádek kódu zakomentovat stisknutím klávesy `key:Ctrl+/` pro jednořádkový komentář a `key:Ctrl+Shift+/` nebo podobné kombinace pro víceřádkový komentář (označte část kódu jako blok a stiskněte uvedené klávesy). Na Macu zkuste `key:Cmd` místo `key:Ctrl` a `key:Option` místo `key:Shift`. +Ve většině editorů se dá řádek kódu vykomentovat pomocí zkratky `key:Ctrl+/` pro jednořádkový komentář a `key:Ctrl+Shift+/` pro víceřádkový komentář (označte část kódu a stiskněte uvedené klávesy). Na Macu zkuste `key:Cmd` místo `key:Ctrl` a `key:Option` místo `key:Shift`. ``` ````warn header="Vnořené komentáře nejsou povoleny!" From b8373492cef7f36433d38a12038cf1d6c79d8b83 Mon Sep 17 00:00:00 2001 From: otmon76 <66325539+otmon76@users.noreply.github.com> Date: Sat, 30 Apr 2022 19:54:11 +0200 Subject: [PATCH 14/20] Update 1-js/02-first-steps/02-structure/article.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Daniel Pomajbík <60559058+danipoma@users.noreply.github.com> --- 1-js/02-first-steps/02-structure/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/02-first-steps/02-structure/article.md b/1-js/02-first-steps/02-structure/article.md index 3eef0185e..66eba9fb5 100644 --- a/1-js/02-first-steps/02-structure/article.md +++ b/1-js/02-first-steps/02-structure/article.md @@ -94,7 +94,7 @@ Doporučujeme vám psát středníky mezi příkazy i tehdy, když je odděluje S postupem času se programy stávají čím dál složitější, a proto je nutné do nich vkládat *komentáře*, které popisují, co kód dělá a proč. -Komentáře můžeme vkládat na kterékoli místo ve skriptu. Nemají vliv na jeho výkon, protože je engine jednoduše ignoruje. +Komentáře můžeme vkládat na kterékoli místo ve skriptu. Nemají vliv na jeho výkon, protože je motor jednoduše ignoruje. **Jednořádkové komentáře jsou uvozeny dvěma lomítky `//`.** From 04185b306f4aa84b2e092eabfa193d34eb6d1577 Mon Sep 17 00:00:00 2001 From: otmon76 <66325539+otmon76@users.noreply.github.com> Date: Sat, 30 Apr 2022 19:54:28 +0200 Subject: [PATCH 15/20] Update 1-js/02-first-steps/02-structure/article.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Daniel Pomajbík <60559058+danipoma@users.noreply.github.com> --- 1-js/02-first-steps/02-structure/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/02-first-steps/02-structure/article.md b/1-js/02-first-steps/02-structure/article.md index 66eba9fb5..412e1f615 100644 --- a/1-js/02-first-steps/02-structure/article.md +++ b/1-js/02-first-steps/02-structure/article.md @@ -122,7 +122,7 @@ alert('světe'); Obsah komentáře se ignoruje, proto jestliže mezi /* ... */ vložíme kód, neprovede se. -Někdy může přijít vhod dočasně zneplatnit část kódu: +Někdy může přijít vhod dočasně vykomentovat část kódu: ```js run /* Zakomentovaný kód From b31fd33ba839a888346bc3dd2ecce0a5437348da Mon Sep 17 00:00:00 2001 From: otmon76 <66325539+otmon76@users.noreply.github.com> Date: Sat, 30 Apr 2022 19:54:57 +0200 Subject: [PATCH 16/20] Update 1-js/02-first-steps/02-structure/article.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Daniel Pomajbík <60559058+danipoma@users.noreply.github.com> --- 1-js/02-first-steps/02-structure/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/02-first-steps/02-structure/article.md b/1-js/02-first-steps/02-structure/article.md index 412e1f615..c7d9fa123 100644 --- a/1-js/02-first-steps/02-structure/article.md +++ b/1-js/02-first-steps/02-structure/article.md @@ -146,6 +146,6 @@ alert( 'světe' ); ``` ```` -Neváhejte do svého kódu vkládat komentáře. Sice zvětšují velikost kódu, ale to není vůbec žádný problém. Existuje mnoho nástrojů, které kód před publikací na produkčním serveru minimalizují a odstraní z něj komentáře, takže ty se v prováděných skriptech neobjeví. Komentáře tedy nemají vůbec žádný negativní efekt na výkon. +Neváhejte do svého kódu vkládat komentáře. Sice zvětšují velikost kódu, ale to není vůbec žádný problém. Existuje mnoho nástrojů, které kód před nasazením na produkční server minimalizují a odstraní z něj komentáře, nemají tedy žádný vliv na výkon. Později v tomto tutoriálu budeme mít kapitolu , která se mimo jiné zaobírá i tím, co by mělo a nemělo být v komentáři obsaženo. From 3fcb17e2fcf2c1c315b0e5d81b1220bd98e19f62 Mon Sep 17 00:00:00 2001 From: otmon76 <66325539+otmon76@users.noreply.github.com> Date: Sat, 30 Apr 2022 19:55:14 +0200 Subject: [PATCH 17/20] Update 1-js/02-first-steps/02-structure/article.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Daniel Pomajbík <60559058+danipoma@users.noreply.github.com> --- 1-js/02-first-steps/02-structure/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/02-first-steps/02-structure/article.md b/1-js/02-first-steps/02-structure/article.md index c7d9fa123..266220965 100644 --- a/1-js/02-first-steps/02-structure/article.md +++ b/1-js/02-first-steps/02-structure/article.md @@ -96,7 +96,7 @@ S postupem času se programy stávají čím dál složitější, a proto je nut Komentáře můžeme vkládat na kterékoli místo ve skriptu. Nemají vliv na jeho výkon, protože je motor jednoduše ignoruje. -**Jednořádkové komentáře jsou uvozeny dvěma lomítky `//`.** +**Jednořádkové komentáře začínají dvěma lomítky `//`.** Celý zbytek řádku je komentář. Může být umístěn na samostatném řádku nebo za příkazem. From 029f37987518a274dc5914f49450e03563b34408 Mon Sep 17 00:00:00 2001 From: otmon76 <66325539+otmon76@users.noreply.github.com> Date: Sat, 30 Apr 2022 19:55:23 +0200 Subject: [PATCH 18/20] Update 1-js/02-first-steps/02-structure/article.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Daniel Pomajbík <60559058+danipoma@users.noreply.github.com> --- 1-js/02-first-steps/02-structure/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/02-first-steps/02-structure/article.md b/1-js/02-first-steps/02-structure/article.md index 266220965..b991fc464 100644 --- a/1-js/02-first-steps/02-structure/article.md +++ b/1-js/02-first-steps/02-structure/article.md @@ -105,7 +105,7 @@ Například zde: // Tento komentář je umístěn na samostatném řádku alert('Ahoj'); -alert('světe'); // Tento komentář následuje za příkazem +alert('světe'); // Tento komentář je za příkazem ``` **Víceřádkové komentáře začínají lomítkem a hvězdičkou /* a končí hvězdičkou a lomítkem */.** From 169b0163a77b3d90b088221a3dcefda09d4c2410 Mon Sep 17 00:00:00 2001 From: otmon76 <66325539+otmon76@users.noreply.github.com> Date: Sat, 30 Apr 2022 20:17:59 +0200 Subject: [PATCH 19/20] Update article.md --- 1-js/02-first-steps/02-structure/article.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/1-js/02-first-steps/02-structure/article.md b/1-js/02-first-steps/02-structure/article.md index b991fc464..e5a8437c0 100644 --- a/1-js/02-first-steps/02-structure/article.md +++ b/1-js/02-first-steps/02-structure/article.md @@ -4,7 +4,7 @@ První, co si prostudujeme, jsou stavební bloky kódu. ## Příkazy -Příkazy (anglicky statement) jsou syntaktické konstrukce a povely, které provádějí akce. +Příkazy (anglicky *statement*) jsou syntaktické konstrukce a povely, které provádějí akce. Už jsme viděli příkaz `alert('Ahoj, světe!')`, který zobrazuje zprávu „Ahoj, světe!“. @@ -77,7 +77,7 @@ Když tento kód spustíme, zobrazí se jen první `Ahoj` (a pak nastane chyba, Je to proto, že JavaScript nepředpokládá středník před hranatými závorkami `[...]`. S kódem v prvním příkladu se tedy zachází jako s jediným příkazem. -Takto jej vidí motor (angl. engine): +Takto jej vidí motor (anglicky *engine*): ```js run no-beautify alert("Ahoj")[1, 2].forEach(alert); From 8e088b2533adc4618415fac4dd8c03117d953fa2 Mon Sep 17 00:00:00 2001 From: otmon76 <66325539+otmon76@users.noreply.github.com> Date: Sat, 30 Apr 2022 20:19:13 +0200 Subject: [PATCH 20/20] Update article.md --- 1-js/02-first-steps/02-structure/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/02-first-steps/02-structure/article.md b/1-js/02-first-steps/02-structure/article.md index e5a8437c0..4e2b8ba2f 100644 --- a/1-js/02-first-steps/02-structure/article.md +++ b/1-js/02-first-steps/02-structure/article.md @@ -92,7 +92,7 @@ Doporučujeme vám psát středníky mezi příkazy i tehdy, když je odděluje ## Komentáře [#code-comments] -S postupem času se programy stávají čím dál složitější, a proto je nutné do nich vkládat *komentáře*, které popisují, co kód dělá a proč. +S postupem času se programy stávají čím dál složitějšími, a proto je nutné do nich vkládat *komentáře*, které popisují, co kód dělá a proč. Komentáře můžeme vkládat na kterékoli místo ve skriptu. Nemají vliv na jeho výkon, protože je motor jednoduše ignoruje.