diff --git a/1-js/01-getting-started/1-intro/article.md b/1-js/01-getting-started/1-intro/article.md index 2f4f518f3..9395c9fe1 100644 --- a/1-js/01-getting-started/1-intro/article.md +++ b/1-js/01-getting-started/1-intro/article.md @@ -1,122 +1,122 @@ -# An Introduction to JavaScript +# Úvod do JavaScriptu -Let's see what's so special about JavaScript, what we can achieve with it, and what other technologies play well with it. +Podíváme se, co je na JavaScriptu tak zvláštního, čeho s ním můžeme dosáhnout a které jiné technologie si s ním dobře rozumějí. -## What is JavaScript? +## Co je JavaScript? -*JavaScript* was initially created to "make web pages alive". +*JavaScript* byl původně vytvořen k „oživení webových stránek“. -The programs in this language are called *scripts*. They can be written right in a web page's HTML and run automatically as the page loads. +Programy v tomto jazyce se nazývají *skripty*. Mohou být vepsány přímo v HTML kódu webové stránky a spustí se automaticky při jejím načtení. -Scripts are provided and executed as plain text. They don't need special preparation or compilation to run. +Skripty jsou poskytovány a spouštěny jako čistý text. Ke spuštění nepotřebují žádnou speciální přípravu nebo kompilaci. -In this aspect, JavaScript is very different from another language called [Java](https://en.wikipedia.org/wiki/Java_(programming_language)). +V tomto směru se JavaScript značně odlišuje od jiného jazyka, nazvaného [Java](https://cs.wikipedia.org/wiki/Java_(programovací_jazyk)). -```smart header="Why is it called JavaScript?" -When JavaScript was created, it initially had another name: "LiveScript". But Java was very popular at that time, so it was decided that positioning a new language as a "younger brother" of Java would help. +```smart header="Proč se jmenuje JavaScript?" +Když byl JavaScript vytvořen, jmenoval se původně jinak: „LiveScript“. Avšak jazyk Java byl tehdy velmi populární, a tak bylo rozhodnuto, že novému jazyku pomůže, když bude prohlášen za „mladšího bratříčka“ Javy. -But as it evolved, JavaScript became a fully independent language with its own specification called [ECMAScript](http://en.wikipedia.org/wiki/ECMAScript), and now it has no relation to Java at all. +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. ``` -Today, JavaScript can execute not only in the browser, but also on the server, or actually on any device that has a special program called [the JavaScript 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ý engine](https://en.wikipedia.org/wiki/JavaScript_engine). -The browser has an embedded engine sometimes called a "JavaScript virtual machine". +Prohlížeč má zabudovaný engine, který se někdy nazývá „virtuální stroj JavaScriptu“. -Different engines have different "codenames". For example: +Různé enginy mají různá „kódová označení“. Například: -- [V8](https://en.wikipedia.org/wiki/V8_(JavaScript_engine)) -- in Chrome, Opera and Edge. -- [SpiderMonkey](https://en.wikipedia.org/wiki/SpiderMonkey) -- in Firefox. -- ...There are other codenames like "Chakra" for IE, "JavaScriptCore", "Nitro" and "SquirrelFish" for Safari, etc. +- [V8](https://en.wikipedia.org/wiki/V8_(JavaScript_engine)) -- v Chrome, Opeře a Edge. +- [SpiderMonkey](https://cs.wikipedia.org/wiki/SpiderMonkey) -- ve Firefoxu. +- Existují i jiná krycí jména, například „Chakra“ pro Internet Explorer, "JavaScriptCore", „Nitro“ a „SquirrelFish“ pro Safari, a tak dále. -The terms above are good to remember because they are used in developer articles on the internet. We'll use them too. For instance, if "a feature X is supported by V8", then it probably works in Chrome, Opera and Edge. +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="How do engines work?" +```smart header="Jak enginy fungují?" -Engines are complicated. But the basics are easy. +Enginy jsou složité, ale jejich základy jsou jednoduché. -1. The engine (embedded if it's a browser) reads ("parses") the script. -2. Then it converts ("compiles") the script to machine code. -3. And then the machine code runs, pretty fast. +1. Engine (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í. -The engine applies optimizations at each step of the process. It even watches the compiled script as it runs, analyzes the data that flows through it, and further optimizes the machine code based on that knowledge. +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. ``` -## What can in-browser JavaScript do? +## Co může JavaScript v prohlížeči dělat? -Modern JavaScript is a "safe" programming language. It does not provide low-level access to memory or the CPU, because it was initially created for browsers which do not require it. +Moderní JavaScript je „bezpečný“ programovací jazyk. Neposkytuje přímý přístup k paměti nebo CPU na nejnižší úrovni, protože byl původně vytvořen pro prohlížeče, které jej nepotřebují. -JavaScript's capabilities greatly depend on the environment it's running in. For instance, [Node.js](https://wikipedia.org/wiki/Node.js) supports functions that allow JavaScript to read/write arbitrary files, perform network requests, etc. +Schopnosti JavaScriptu značně závisejí na prostředí, v němž je spuštěn. Například prostředí [Node.js](https://cs.wikipedia.org/wiki/Node.js) podporuje funkce, které umožňují JavaScriptu svévolně číst a zapisovat do souborů, provádět požadavky na síti a podobně. -In-browser JavaScript can do everything related to webpage manipulation, interaction with the user, and the webserver. +JavaScript v prohlížeči umí dělat vše, co se týká manipulace s webovou stránkou, interakce s uživatelem a webového serveru. -For instance, in-browser JavaScript is able to: +Například JavaScript v prohlížeči může: -- Add new HTML to the page, change the existing content, modify styles. -- React to user actions, run on mouse clicks, pointer movements, key presses. -- Send requests over the network to remote servers, download and upload files (so-called [AJAX](https://en.wikipedia.org/wiki/Ajax_(programming)) and [COMET](https://en.wikipedia.org/wiki/Comet_(programming)) technologies). -- Get and set cookies, ask questions to the visitor, show messages. -- Remember the data on the client-side ("local storage"). +- Přidat na stránku nový HTML kód, měnit existující obsah, modifikovat styly. +- Reagovat na uživatelské akce, spouštět skript při kliknutí myší, pohybu kurzorem, stisku klávesy. +- Posílat po síti požadavky na vzdálené servery, stahovat a uploadovat soubory (tzv. technologie [AJAX](https://cs.wikipedia.org/wiki/AJAX) a [COMET](https://en.wikipedia.org/wiki/Comet_(programming))). +- Číst a nastavovat cookies, pokládat návštěvníkovi otázky, zobrazovat zprávy. +- Pamatovat si data na straně klienta („lokální úložiště“). -## What CAN'T in-browser JavaScript do? +## Co NEMŮŽE JavaScript v prohlížeči dělat? -JavaScript's abilities in the browser are limited to protect the user's safety. The aim is to prevent an evil webpage from accessing private information or harming the user's data. +Schopnosti JavaScriptu v prohlížeči jsou omezeny, aby byla chráněna bezpečnost uživatele. Cílem je zabránit zlé webové stránce v přístupu k soukromým informacím nebo v poškození uživatelových dat. -Examples of such restrictions include: +Příklady takových omezení: -- JavaScript on a webpage may not read/write arbitrary files on the hard disk, copy them or execute programs. It has no direct access to OS functions. +- JavaScript na webové stránce nesmí svévolně číst a zapisovat do souborů na pevném disku, kopírovat je nebo spouštět programy. Nemá přímý přístup k funkcím operačního systému. - Modern browsers allow it to work with files, but the access is limited and only provided if the user does certain actions, like "dropping" a file into a browser window or selecting it via an `` tag. + Moderní prohlížeče umožňují pracovat se soubory, ale přístup je omezen a je poskytován jen tehdy, když uživatel provede určitou akci, např. „přetažení“ souboru do okna prohlížeče nebo jeho výběr pomocí tagu ``. - There are ways to interact with the camera/microphone and other devices, but they require a user's explicit permission. So a JavaScript-enabled page may not sneakily enable a web-camera, observe the surroundings and send the information to the [NSA](https://en.wikipedia.org/wiki/National_Security_Agency). -- Different tabs/windows generally do not know about each other. Sometimes they do, for example when one window uses JavaScript to open the other one. But even in this case, JavaScript from one page may not access the other page if they come from different sites (from a different domain, protocol or port). + Existují způsoby, jak komunikovat s kamerou, mikrofonem nebo jinými zařízeními, ale ty vyžadují výslovné svolení uživatele. Stránka s povoleným JavaScriptem tedy nemůže bez vědomí uživatele zapnout webovou kameru, nasnímat okolí a nahrávku poslat do [NSA](https://cs.wikipedia.org/wiki/Národní_bezpečnostní_agentura). +- Různé záložky a okna o sobě navzájem obvykle nevědí. Někdy ano, například tehdy, když jedno okno používá JavaScript k otevření druhého. Ale ani v tomto případě JavaScript z jedné stránky nemůže přistupovat k jiné, pokud pocházejí z různých webových sídel (z jiné domény, protokolu nebo portu). - This is called the "Same Origin Policy". To work around that, *both pages* must agree for data exchange and must contain special JavaScript code that handles it. We'll cover that in the tutorial. + 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. - 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 crippled. Though possible, it requires explicit agreement (expressed in HTTP headers) from the remote side. Once again, that's a safety limitation. + 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í. ![](limitations.svg) -Such limitations do not exist if JavaScript is used outside of the browser, for example on a server. Modern browsers also allow plugins/extensions which may ask for extended permissions. +Jestliže použijete JavaScript mimo prohlížeč, např. na serveru, tato omezení neplatí. Moderní prohlížeče navíc umožňují používat pluginy nebo rozšíření, které mohou uživatele požádat o další povolení. -## What makes JavaScript unique? +## V čem je JavaScript unikátní? -There are at least *three* great things about JavaScript: +Na JavaScriptu jsou nejméně *tři* skvělé věci: ```compare -+ Full integration with HTML/CSS. -+ Simple things are done simply. -+ Supported by all major browsers and enabled by default. ++ Plná integrace s HTML/CSS. ++ Jednoduché věci se v něm dělají jednoduše. ++ Je podporován ve všech významných prohlížečích a standardně bývá povolen. ``` -JavaScript is the only browser technology that combines these three things. +JavaScript je jediná prohlížečová technologie, která má všechny tyto tři vlastnosti současně. -That's what makes JavaScript unique. That's why it's the most widespread tool for creating browser interfaces. +To vše činí JavaScript unikátním. To vše je důvodem, proč je dnes nejrozšířenějším nástrojem pro vytváření prohlížečových rozhraní. -That said, JavaScript can be used to create servers, mobile applications, etc. +Při tom všem však lze JavaScript použít i k vytváření serverů, mobilních aplikací a podobně. -## Languages "over" JavaScript +## Jazyky „nad“ JavaScriptem -The syntax of JavaScript does not suit everyone's needs. Different people want different features. +Syntaxe JavaScriptu samozřejmě neuspokojí každého, neboť různí lidé chtějí různé vlastnosti. -That's to be expected, because projects and requirements are different for everyone. +To se dá očekávat, jelikož každý má jiné požadavky a pracuje na jiných projektech. -So, recently a plethora of new languages appeared, which are *transpiled* (converted) to JavaScript before they run in the browser. +Proto se začala objevovat spousta nových jazyků, které jsou před spuštěním v prohlížeči *transpilovány* (překládány) do JavaScriptu. -Modern tools make the transpilation very fast and transparent, actually allowing developers to code in another language and auto-converting it "under the hood". +Moderní nástroje provádějí transpilaci velmi rychle a čistě. V podstatě umožňují vývojářům programovat v jiném jazyce a automaticky jej převádět do JavaScriptu. -Examples of such languages: +Příklady takových jazyků: -- [CoffeeScript](https://coffeescript.org/) is "syntactic sugar" for JavaScript. It introduces shorter syntax, allowing us to write clearer and more precise code. Usually, Ruby devs like it. -- [TypeScript](https://www.typescriptlang.org/) is concentrated on adding "strict data typing" to simplify the development and support of complex systems. It is developed by Microsoft. -- [Flow](https://flow.org/) also adds data typing, but in a different way. Developed by Facebook. -- [Dart](https://www.dartlang.org/) is a standalone language that has its own engine that runs in non-browser environments (like mobile apps), but also can be transpiled to JavaScript. Developed by Google. -- [Brython](https://brython.info/) is a Python transpiler to JavaScript that enables the writing of applications in pure Python without JavaScript. -- [Kotlin](https://kotlinlang.org/docs/reference/js-overview.html) is a modern, concise and safe programming language that can target the browser or Node. +- [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. +- [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. -There are more. Of course, even if we use one of these transpiled languages, we should also know JavaScript to really understand what we're doing. +Jsou i další. Samozřejmě i když používáme některý z těchto transpilovaných jazyků, měli bychom znát i JavaScript, abychom skutečně porozuměli tomu, co se děje. -## Summary +## Shrnutí -- JavaScript was initially created as a browser-only language, but it is now used in many other environments as well. -- Today, JavaScript has a unique position as the most widely-adopted browser language, fully integrated with HTML/CSS. -- There are many languages that get "transpiled" to JavaScript and provide certain features. It is recommended to take a look at them, at least briefly, after mastering JavaScript. +- JavaScript byl původně vytvořen jako jazyk určený výhradně pro prohlížeč, ale dnes se používá i v mnoha jiných prostředích. +- Dnes si JavaScript vydobyl unikátní postavení jako nejrozsáhleji přijímaný prohlížečový jazyk s plnou integrací s HTML/CSS. +- Existuje mnoho jazyků, které jsou „transpilovány“ do JavaScriptu a poskytují určité vlastnosti. Až zvládnete JavaScript, doporučujeme vám, abyste se na ně alespoň krátce podívali. diff --git a/1-js/01-getting-started/2-manuals-specifications/article.md b/1-js/01-getting-started/2-manuals-specifications/article.md index 3fa243336..dd7cd7e80 100644 --- a/1-js/01-getting-started/2-manuals-specifications/article.md +++ b/1-js/01-getting-started/2-manuals-specifications/article.md @@ -1,37 +1,40 @@ -# Manuals and specifications +# Manuály a specifikace -This book is a *tutorial*. It aims to help you gradually learn the language. But once you're familiar with the basics, you'll need other resources. +Tato kniha je *tutoriál*, jehož cílem je pomoci vám postupně se naučit jazyk. Až ovšem budete znát základy, budete potřebovat i jiné zdroje. -## Specification +## Specifikace -[The ECMA-262 specification](https://www.ecma-international.org/publications/standards/Ecma-262.htm) contains the most in-depth, detailed and formalized information about JavaScript. It defines the language. +[Specifikace ECMA-262](https://www.ecma-international.org/publications/standards/Ecma-262.htm) obsahuje nejhlubší, nejpodrobnější a nejformalizovanější informace o JavaScriptu. Ta definuje tento jazyk. -But being that formalized, it's difficult to understand at first. So if you need the most trustworthy source of information about the language details, the specification is the right place. But it's not for everyday use. +Avšak právě kvůli této vysoké formálnosti je obtížné jí na první pohled porozumět. Potřebujete-li tedy co nejdůvěryhodnější zdroj informací o detailech JavaScriptu, tato specifikace je správné místo. Ke každodennímu použití se však nehodí. -A new specification version is released every year. Between these releases, the latest specification draft is at . +Každý rok se vydává nová verze specifikace. Poslední návrh nového vydání specifikace najdete na . -To read about new bleeding-edge features, including those that are "almost standard" (so-called "stage 3"), see proposals at . +Chcete-li si přečíst o zbrusu nových vlastnostech, včetně těch, které jsou „téměř standardem“ (tzv. „3. stadium“), viz propozice na . -Also, if you're developing for the browser, then there are other specifications covered in the [second part](info:browser-environment) of the tutorial. +Pokud vyvíjíte pro prohlížeč, existují i další specifikace uvedené ve [druhé části](info:browser-environment) tutoriálu. -## Manuals +## Manuály -- **MDN (Mozilla) JavaScript Reference** is the main manual with examples and other information. It's great to get in-depth information about individual language functions, methods etc. +- **MDN (Mozilla) JavaScript Reference** je manuál s příklady a dalšími informacemi. Výborně poslouží pro získání podrobných informací o jednotlivých funkcích jazyka, metodách atd. - You can find it at . + Lze jej najít na . + + Často je však nejlepší použít obyčejné internetové vyhledávání. Do dotazu jednoduše napište „MDN [pojem]“, např. pro vyhledávání funkce `parseInt` zadejte . -Although, it's often best to use an internet search instead. Just use "MDN [term]" in the query, e.g. to search for the `parseInt` function. +- **MSDN** – Manuál od Microsoftu s mnoha informacemi včetně těch o JavaScriptu (v IE se mu říká JScript). Potřebujete-li něco specifického ohledně Internet Exploreru, je lepší zavítat na: . -## Compatibility tables + Můžete také použít internetové vyhledávání s frázemi jako „RegExp MSDN“ nebo „RegExp MSDN jscript“. -JavaScript is a developing language, new features get added regularly. +## Tabulky kompatibility -To see their support among browser-based and other engines, see: +JavaScript je neustále vyvíjen a pravidelně se do něj přidávají nové vlastnosti. -- - per-feature tables of support, e.g. to see which engines support modern cryptography functions: . -- - a table with language features and engines that support those or don't support. +Chcete-li vědět, v jakých enginech jsou tyto vlastnosti už podporovány, podívejte se na: +- - pro každou vlastnost obsahuje tabulku enginů, které ji podporují, např. chcete-li vidět, které enginy podporují moderní kryptografické funkce, jděte na . +- - tabulka vlastností jazyka a enginů, které je podporují nebo nepodporují. -All these resources are useful in real-life development, as they contain valuable information about language details, their support, etc. +Všechny tyto zdroje se vám budou při vývoji hodit, jelikož obsahují cenné informace o detailech jazyka, jejich podpoře apod. -Please remember them (or this page) for the cases when you need in-depth information about a particular feature. +Pamatujte si je (nebo tuto stránku) pro případ, že byste potřebovali podrobné informace o určité vlastnosti. diff --git a/1-js/01-getting-started/3-code-editors/article.md b/1-js/01-getting-started/3-code-editors/article.md index ca6194741..53831d82d 100644 --- a/1-js/01-getting-started/3-code-editors/article.md +++ b/1-js/01-getting-started/3-code-editors/article.md @@ -1,49 +1,49 @@ -# Code editors +# Editory kódu -A code editor is the place where programmers spend most of their time. +Editor kódu je místo, v němž programátoři tráví většinu času. -There are two main types of code editors: IDEs and lightweight editors. Many people use one tool of each type. +Editory kódu se dělí na dva hlavní druhy: vývojová prostředí (IDE) a textové editory. Mnozí lidé používají jeden nástroj od každého druhu. ## IDE -The term [IDE](https://en.wikipedia.org/wiki/Integrated_development_environment) (Integrated Development Environment) refers to a powerful editor with many features that usually operates on a "whole project." As the name suggests, it's not just an editor, but a full-scale "development environment." +Pojem [vývojové prostředí](https://cs.wikipedia.org/wiki/Vývojové_prostředí), zkráceně IDE (z anglického Integrated Development Environment) označuje specializovaný editor s rozšířenou funkčností, který obvykle pracuje s celým projektovým adresářem. Jak název napovídá, není to pouhý editor, ale plnohodnotné „vývojové prostředí“. -An IDE loads the project (which can be many files), allows navigation between files, provides autocompletion based on the whole project (not just the open file), and integrates with a version management system (like [git](https://git-scm.com/)), a testing environment, and other "project-level" stuff. +IDE načítá projekt (který se může skládat z mnoha souborů), umožňuje navigaci mezi soubory, radí vývojáři skrze automatické doplňování založené na celém projektu (nejenom na právě otevřeném souboru) a je propojen s verzovacím systémem (např. [git](https://git-scm.com/)), testovacím prostředím a dalšími pomůckami na „projektové úrovni“. -If you haven't selected an IDE yet, consider the following options: +Pokud jste si IDE ještě nevybrali, zvažte následující možnosti: -- [Visual Studio Code](https://code.visualstudio.com/) (cross-platform, free). -- [WebStorm](https://www.jetbrains.com/webstorm/) (cross-platform, paid). +- [Visual Studio Code](https://code.visualstudio.com/) (různé platformy, zdarma). +- [WebStorm](https://www.jetbrains.com/webstorm/) (různé platformy, placené). -For Windows, there's also "Visual Studio", not to be confused with "Visual Studio Code". "Visual Studio" is a paid and mighty Windows-only editor, well-suited for the .NET platform. It's also good at JavaScript. There's also a free version [Visual Studio Community](https://www.visualstudio.com/vs/community/). +Pro Windows existuje také „Visual Studio“ (nezaměňovat s „Visual Studio Code“), což je placený, ale silný editor pouze pro Windows, velmi vhodný pro platformu .NET, který funguje dobře i pro JavaScript. Má i neplacenou verzi [Visual Studio Community](https://www.visualstudio.com/vs/community/). -Many IDEs are paid, but have a trial period. Their cost is usually negligible compared to a qualified developer's salary, so just choose the best one for you. +Mnoho IDE je placených, ale mají zkušební dobu. Jejich cena je obvykle zanedbatelná ve srovnání s platem kvalifikovaného vývojáře, takže si bez obav vyberte to, které se vám zdá nejlepší. -## Lightweight editors +## Textové editory -"Lightweight editors" are not as powerful as IDEs, but they're fast, elegant and simple. +„Lehké“ textové editory (z anglického „lightweight editor“) nejsou tak silné jako IDE, ale jsou rychlé, elegantní a jednoduché. -They are mainly used to open and edit a file instantly. +Používají se zejména k okamžitému otevření a editaci souboru. -The main difference between a "lightweight editor" and an "IDE" is that an IDE works on a project-level, so it loads much more data on start, analyzes the project structure if needed and so on. A lightweight editor is much faster if we need only one file. +Hlavní rozdíl mezi „textovým editorem“ a „IDE“ je, že „IDE“ pracuje na projektové úrovni, takže si při spuštění načítá mnohem více dat, analyzuje strukturu projektu, je-li to zapotřebí, a podobně. Potřebujeme-li editovat pouze jeden soubor, textový editor to zvládne mnohem rychleji. -In practice, lightweight editors may have a lot of plugins including directory-level syntax analyzers and autocompleters, so there's no strict border between a lightweight editor and an IDE. +V praxi mají textové editory obvykle velké množství zásuvných modulů a rozšíření včetně syntaktických analyzátorů a automatického doplňování na adresářové úrovni, takže mezi textovými editory a vývojovými prostředími neexistuje pevně daná hranice. -There are many options, for instance: +Možností je mnoho, například: -- [Sublime Text](https://www.sublimetext.com/) (cross-platform, shareware). -- [Notepad++](https://notepad-plus-plus.org/) (Windows, free). -- [Vim](https://www.vim.org/) and [Emacs](https://www.gnu.org/software/emacs/) are also cool if you know how to use them. +- [Sublime Text](http://www.sublimetext.com) (různé platformy, shareware). +- [Notepad++](https://notepad-plus-plus.org/) (Windows, zdarma). +- Také [Vim](http://www.vim.org/) a [Emacs](https://www.gnu.org/software/emacs/) jsou výborné, jestliže je umíte používat. -## Let's not argue +## Nehádejme se -The editors in the lists above are those that either I or my friends whom I consider good developers have been using for a long time and are happy with. +Ve výše uvedených seznamech jsou zmíněny editory, které já nebo moji přátelé, které považuji za dobré vývojáře, dlouhou dobu používáme a jsme s nimi spokojeni. -There are other great editors in our big world. Please choose the one you like the most. +Svět je velký a existují v něm i jiné skvělé editory. Vyberte si prosím ten, který se vám nejvíce líbí. -The choice of an editor, like any other tool, is individual and depends on your projects, habits, and personal preferences. +Výběr editoru, stejně jako výběr kteréhokoli jiného nástroje, je individuální záležitost a závisí na vašich projektech, zvyklostech a osobním vkusu. -The author's personal opinion: +Autorovo osobní mínění: -- I'd use [Visual Studio Code](https://code.visualstudio.com/) if I develop mostly frontend. -- Otherwise, if it's mostly another language/platform and partially frontend, then consider other editors, such as XCode (Mac), Visual Studio (Windows) or Jetbrains family (Webstorm, PHPStorm, RubyMine etc, depending on the language). +- Když vyvíjím převážně frontend, používám [Visual Studio Code](https://code.visualstudio.com/). +- Jinak, pokud je to většinou jiný jazyk/platforma a částečně frontend, zvažte jiné editory, například XCode (Mac), Visual Studio (Windows) nebo rodinu Jetbrains (Webstorm, PHPStorm, RubyMine atd. v závislosti na jazyce). diff --git a/1-js/01-getting-started/4-devtools/article.md b/1-js/01-getting-started/4-devtools/article.md index 50926d4f7..02da6b4df 100644 --- a/1-js/01-getting-started/4-devtools/article.md +++ b/1-js/01-getting-started/4-devtools/article.md @@ -1,63 +1,63 @@ -# Developer console +# Vývojářská konzole -Code is prone to errors. You will quite likely make errors... Oh, what am I talking about? You are *absolutely* going to make errors, at least if you're a human, not a [robot](https://en.wikipedia.org/wiki/Bender_(Futurama)). +Kód je náchylný k chybám. Je pravděpodobné, že budete dělat chyby... Co to povídám? *Zaručeně* budete dělat chyby, jestliže jste člověk a ne [robot](https://cs.wikipedia.org/wiki/Bender_(Futurama)). -But in the browser, users don't see errors by default. So, if something goes wrong in the script, we won't see what's broken and can't fix it. +V prohlížeči však uživatelé chyby standardně nevidí. Jestliže je tedy ve skriptu něco špatně, nevidíme co a nemůžeme to opravit. -To see errors and get a lot of other useful information about scripts, "developer tools" have been embedded in browsers. +Abychom viděli chyby a získali spoustu dalších užitečných informací o skriptech, byly do prohlížečů zahrnuty „vývojářské nástroje“. -Most developers lean towards Chrome or Firefox for development because those browsers have the best developer tools. Other browsers also provide developer tools, sometimes with special features, but are usually playing "catch-up" to Chrome or Firefox. So most developers have a "favorite" browser and switch to others if a problem is browser-specific. +Většina vývojářů tíhne k vývoji v Chrome nebo Firefoxu, protože mají vyhlášené vývojářské nástroje. Jiné prohlížeče rovněž poskytují vývojářské nástroje, někdy se speciálními vlastnostmi, ale obvykle jen „dohánějí“ Chrome nebo Firefox. Většina vývojářů tedy má svůj „oblíbený“ prohlížeč a k jinému se uchýlí jen tehdy, řeší-li problém specifický pro určitý prohlížeč. -Developer tools are potent; they have many features. To start, we'll learn how to open them, look at errors, and run JavaScript commands. +Vývojářské nástroje jsou silné a mají mnoho funkcí. Pro začátek se naučíme, jak je otevřít, podívat se na chyby a spustit v nich příkazy JavaScriptu. ## Google Chrome -Open the page [bug.html](bug.html). +Otevřete si stránku [bug.html](bug.html). -There's an error in the JavaScript code on it. It's hidden from a regular visitor's eyes, so let's open developer tools to see it. +V JavaScriptovém kódu na této stránce je chyba. Před očima běžného uživatele je skrytá, a tak otevřeme vývojářské nástroje, abychom ji viděli. -Press `key:F12` or, if you're on Mac, then `key:Cmd+Opt+J`. +Stiskněte `key:F12` nebo, máte-li Mac, stiskněte `key:Cmd+Opt+J`. -The developer tools will open on the Console tab by default. +Otevřou se vývojářské nástroje na záložce „Console“. -It looks somewhat like this: +Budou vypadat zhruba takto: ![chrome](chrome.png) -The exact look of developer tools depends on your version of Chrome. It changes from time to time but should be similar. +Vzhled vývojářských nástrojů závisí na vaší verzi Chrome. Čas od času se mění, ale měl by se podobat obrázku. -- Here we can see the red-colored error message. In this case, the script contains an unknown "lalala" command. -- On the right, there is a clickable link to the source `bug.html:12` with the line number where the error has occurred. +- Zde vidíte červenou chybovou zprávu. V tomto případě skript obsahuje neznámý příkaz „lalala“. +- Napravo vidíte kliknutelný odkaz na zdrojový kód `bug.html:12` s číslem řádku, na němž se chyba vyskytla. -Below the error message, there is a blue `>` symbol. It marks a "command line" where we can type JavaScript commands. Press `key:Enter` to run them. +Pod chybovou zprávou se nachází modrý symbol `>`, který označuje „příkazový řádek“, na němž můžeme psát příkazy JavaScriptu. Stisknutím `key:Enter` je spustíte. -Now we can see errors, and that's enough for a start. We'll come back to developer tools later and cover debugging more in-depth in the chapter . +Nyní vidíme chyby a to pro začátek stačí. K vývojářským nástrojům se později vrátíme a ladění se budeme hlouběji věnovat v kapitole . -```smart header="Multi-line input" -Usually, when we put a line of code into the console, and then press `key:Enter`, it executes. +```smart header="Víceřádkový vstup" +Obvykle když napíšeme do konzole řádek kódu a stiskneme `key:Enter`, řádek se vykoná. -To insert multiple lines, press `key:Shift+Enter`. This way one can enter long fragments of JavaScript code. +Chcete-li vložit více řádků, stiskněte `key:Shift+Enter`. Tímto způsobem můžeme vkládat delší fragmenty JavaScriptového kódu. ``` -## Firefox, Edge, and others +## Firefox, Edge a ostatní -Most other browsers use `key:F12` to open developer tools. +Většina ostatních prohlížečů rovněž využívá k otevření vývojářských nástrojů klávesu `key:F12`. -The look & feel of them is quite similar. Once you know how to use one of these tools (you can start with Chrome), you can easily switch to another. +Jejich vzhled je vcelku podobný. Až budete vědět, jak používat nástroje v jednom prohlížeči (můžete začít s Chromem), budete moci snadno přejít na jiný. ## Safari -Safari (Mac browser, not supported by Windows/Linux) is a little bit special here. We need to enable the "Develop menu" first. +Safari (prohlížeč pro Mac, není podporován ve Windows nebo Linuxu) je v tomto ohledu trochu zvláštní. Nejprve musíme povolit „menu Vývoj“. -Open Preferences and go to the "Advanced" pane. There's a checkbox at the bottom: +Otevřete „Preferences“ a jděte na záložku „Advanced“. Dole uvidíte checkbox, který zaškrtněte: ![safari](safari.png) -Now `key:Cmd+Opt+C` can toggle the console. Also, note that the new top menu item named "Develop" has appeared. It has many commands and options. +Nyní můžete zapínat konzoli pomocí `key:Cmd+Opt+C`. Všimněte si také, že v horním menu se objevila nová položka s názvem „Develop“ („Vývoj“), která obsahuje mnoho příkazů a nastavení. -## Summary +## Shrnutí -- Developer tools allow us to see errors, run commands, examine variables, and much more. -- They can be opened with `key:F12` for most browsers on Windows. Chrome for Mac needs `key:Cmd+Opt+J`, Safari: `key:Cmd+Opt+C` (need to enable first). +- Vývojářské nástroje nám umožňují vidět chyby, prozkoumávat proměnné a mnoho dalšího. +- Ve většině prohlížečů ve Windows se otevírají klávesou `key:F12`. Chrome pro Mac vyžaduje `key:Cmd+Opt+J`, Safari `key:Cmd+Opt+C` (zde je třeba je napřed povolit). -Now we have the environment ready. In the next section, we'll get down to JavaScript. +Nyní máme prostředí připraveno a v příští kapitole již přejdeme k samotnému JavaScriptu. diff --git a/1-js/01-getting-started/index.md b/1-js/01-getting-started/index.md index b327c7860..06c7e6e22 100644 --- a/1-js/01-getting-started/index.md +++ b/1-js/01-getting-started/index.md @@ -1,3 +1,3 @@ -# An introduction +# Úvod -About the JavaScript language and the environment to develop with it. +O jazyku JavaScript a jeho vývojovém prostředí. 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..5bfd4f52f 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 lokálně, jen se snažte, aby to fungovalo. [demo src="https://github.com/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..cfc96e3f1 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="https://github.com/index.html"] -For the file `alert.js` in the same folder: +Pro soubor `alert.js` ve stejné složce: [js src="https://github.com/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..b81f6dd7d 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 , vytvořte ve stejné složce nový soubor `alert.js` a obsah skriptu přemístěte do něj. -Open the page, ensure that the alert works. +Otevřete stránku a ujistěte se, že se zpráva zobrazuje. 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..218e1eacf 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 „Přehrát“ 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="https://github.com/script.js"`, just like `src="https://github.com/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="https://github.com/script.js"`, stejně jako `src="https://github.com/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é [mezipaměti](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 mezipaměti, takže se soubor ve skutečnosti stáhne pouze jednou. -That reduces traffic and makes pages faster. +Tím se snižuje přenos dat a načítání stránek je tak rychlejší. ``` -````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í. diff --git a/1-js/02-first-steps/02-structure/article.md b/1-js/02-first-steps/02-structure/article.md index e81fd343d..4e2b8ba2f 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 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 chybí. -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 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í motor (anglicky *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í čí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č. -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 motor jednoduše ignoruje. -**One-line comments start with two forward slash characters `//`.** +**Jednořádkové komentáře začínají 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ář je 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ě vykomentovat čá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 zkratky!" +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="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 nasazením na produkční server minimalizují a odstraní z něj komentáře, nemají tedy žádný vliv 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á se mimo jiné zaobírá i tím, co by mělo a nemělo být v komentáři obsaženo. diff --git a/1-js/02-first-steps/03-strict-mode/article.md b/1-js/02-first-steps/03-strict-mode/article.md index 9586733cc..be826b2db 100644 --- a/1-js/02-first-steps/03-strict-mode/article.md +++ b/1-js/02-first-steps/03-strict-mode/article.md @@ -1,89 +1,85 @@ -# The modern mode, "use strict" +# Moderní režim, „use strict“ -For a long time, JavaScript evolved without compatibility issues. New features were added to the language while old functionality didn't change. +Dlouhou dobu byl JavaScript vyvíjen bez problémů s kompatibilitou. Do jazyka byly přidávány nové prvky, zatímco stará funkcionalita se neměnila. -That had the benefit of never breaking existing code. But the downside was that any mistake or an imperfect decision made by JavaScript's creators got stuck in the language forever. +Mělo to tu výhodu, že se nerozbíjel již existující kód. Nevýhodou však bylo, že každá chyba nebo nedokonalé rozhodnutí tvůrců JavaScriptu zůstala v jazyce zakotvena navždy. -This was the case until 2009 when ECMAScript 5 (ES5) appeared. It added new features to the language and modified some of the existing ones. To keep the old code working, most such modifications are off by default. You need to explicitly enable them with a special directive: `"use strict"`. +To platilo až do roku 2009, kdy se objevil ECMAScript 5 (ES5), který do jazyka přidal nové vlastnosti a upravil některé již existující. Aby starý kód nepřestal fungovat, většina těchto úprav je defaultně vypnuta. Musíte je výslovně povolit speciální direktivou: `"use strict"`. -## "use strict" +## „use strict“ -The directive looks like a string: `"use strict"` or `'use strict'`. When it is located at the top of a script, the whole script works the "modern" way. +Tato direktiva má podobu řetězce: `"use strict"` nebo `'use strict'`. Když je umístěna na začátku skriptu, celý skript bude fungovat „moderním“ způsobem. -For example: +Příklad: ```js "use strict"; -// this code works the modern way +// tento kód funguje moderním způsobem ... ``` -Quite soon we're going to learn functions (a way to group commands), so let's note in advance that `"use strict"` can be put at the beginning of a function. Doing that enables strict mode in that function only. But usually people use it for the whole script. +Brzy se naučíme používat funkce (způsob, jak seskupit příkazy), a tak s předstihem zmíníme, že `"use strict"` můžeme umístit i na začátek funkce. Když to uděláme, umožníme striktní režim pouze v této funkci. Většinou jej však lidé používají pro celý skript. -````warn header="Ensure that \"use strict\" is at the top" -Please make sure that `"use strict"` is at the top of your scripts, otherwise strict mode may not be enabled. +````warn header="Zajistěte, aby „use strict“ bylo na začátku" +Zajistěte, aby `"use strict"` bylo hned na samém začátku vašeho skriptu, jinak nebude striktní režim povolen. -Strict mode isn't enabled here: +Zde není striktní režim povolen: ```js no-strict -alert("some code"); -// "use strict" below is ignored--it must be at the top +alert("nějaký kód"); +// níže uvedený "use strict" se ignoruje -- musí být na začátku "use strict"; -// strict mode is not activated +// striktní režim není aktivován ``` -Only comments may appear above `"use strict"`. +Nad `"use strict"` nesmí být nic jiného než komentáře. ```` -```warn header="There's no way to cancel `use strict`" -There is no directive like `"no use strict"` that reverts the engine to old behavior. - -Once we enter strict mode, there's no going back. +```warn header="`use strict` nelze nijak zrušit" +Neexistuje žádná direktiva jako `"no use strict"`, která by vrátila motoru výchozí chování. Jakmile jednou vstoupíme do striktního režimu, už není cesty zpět. ``` -## Browser console - -When you use a [developer console](info:devtools) to run code, please note that it doesn't `use strict` by default. +## Prohlížečová konzole -Sometimes, when `use strict` makes a difference, you'll get incorrect results. +Když spustíte kód ve [vývojářské konzoli](info:devtools), neběží automaticky ve striktním režimu. +Někdy to může ovlivnit i samotný výsledek. -So, how to actually `use strict` in the console? +Jak tedy vlastně používat `use strict` v konzoli? -First, you can try to press `key:Shift+Enter` to input multiple lines, and put `use strict` on top, like this: +Můžete zkusit vložit více řádků pomocí zkratky `key:Shift+Enter` a umístit `use strict` na začátek, například takto: ```js -'use strict'; -// ...your code - +'use strict'; +// ...váš kód + ``` -It works in most browsers, namely Firefox and Chrome. +Funguje to ve většině prohlížečů, konkrétně ve Firefoxu a Chrome. -If it doesn't, e.g. in an old browser, there's an ugly, but reliable way to ensure `use strict`. Put it inside this kind of wrapper: +Pokud to nefunguje, např. v nějakém starém prohlížeči, existuje jeden nepěkný, ale spolehlivý způsob, jak zajistit `use strict`. Umístěte jej do tohoto obalu: ```js (function() { 'use strict'; - // ...your code here... + // ...zde je váš kód... })() ``` -## Should we "use strict"? - -The question may sound obvious, but it's not so. +## Měli bychom používat „use strict“? -One could recommend to start scripts with `"use strict"`... But you know what's cool? +Odpověď na tuto otázku se může zdát samozřejmá, ale není tomu tak. -Modern JavaScript supports "classes" and "modules" - advanced language structures (we'll surely get to them), that enable `use strict` automatically. So we don't need to add the `"use strict"` directive, if we use them. +Můžeme vám doporučit, abyste zahajovali skripty s `"use strict"`... ale víte, co je fajn? -**So, for now `"use strict";` is a welcome guest at the top of your scripts. Later, when your code is all in classes and modules, you may omit it.** +Moderní JavaScript podporuje „třídy“ a „moduly“ -- pokročilé jazykové struktury (určitě se k nim dostaneme), které používají `use strict` automaticky. Pokud je tedy používáme, nemusíme direktivu `use strict` přidávat. -As of now, we've got to know about `use strict` in general. +**Prozatím tedy `"use strict"` používejte; na začátku vašich skriptů bývá vítaným hostem. Později, až budete mít celý svůj kód v třídách a modulech, jej můžete vypustit.** -In the next chapters, as we learn language features, we'll see the differences between the strict and old modes. Luckily, there aren't many and they actually make our lives better. +Prozatím tedy víme, jak obecně `use strict` používat. +Až se v dalších kapitolách naučíme další vlastnosti jazyka, poznáme rozdíly mezi striktním a starším režimem. Naštěstí jich není mnoho a ve skutečnosti nám spíše ulehčují práci. -All examples in this tutorial assume strict mode unless (very rarely) specified otherwise. +Všechny příklady v našem tutoriálu předpokládají striktní režim, pokud není (velmi zřídka) uvedeno jinak. diff --git a/1-js/02-first-steps/04-variables/1-hello-variables/solution.md b/1-js/02-first-steps/04-variables/1-hello-variables/solution.md index 9249e1c84..116993cc9 100644 --- a/1-js/02-first-steps/04-variables/1-hello-variables/solution.md +++ b/1-js/02-first-steps/04-variables/1-hello-variables/solution.md @@ -1,12 +1,12 @@ -In the code below, each line corresponds to the item in the task list. +V níže uvedeném kódu každý řádek odpovídá jednomu bodu v zadání. ```js run -let admin, name; // can declare two variables at once +let správce, jméno; // můžeme deklarovat dvě proměnné najednou -name = "John"; +jméno = "Jan"; -admin = name; +správce = jméno; -alert( admin ); // "John" +alert( správce ); // "Jan" ``` diff --git a/1-js/02-first-steps/04-variables/1-hello-variables/task.md b/1-js/02-first-steps/04-variables/1-hello-variables/task.md index 84f009e8c..0d549bae6 100644 --- a/1-js/02-first-steps/04-variables/1-hello-variables/task.md +++ b/1-js/02-first-steps/04-variables/1-hello-variables/task.md @@ -2,9 +2,9 @@ importance: 2 --- -# Working with variables +# Práce s proměnnými -1. Declare two variables: `admin` and `name`. -2. Assign the value `"John"` to `name`. -3. Copy the value from `name` to `admin`. -4. Show the value of `admin` using `alert` (must output "John"). +1. Deklarujte dvě proměnné: `správce` a `jméno`. +2. Přiřaďte do proměnné `jméno` hodnotu `"Jan"`. +3. Zkopírujte hodnotu z proměnné `jméno` do proměnné `správce`. +4. Zobrazte hodnotu proměnné `správce` pomocí `alert` (musí vypsat „Jan“). diff --git a/1-js/02-first-steps/04-variables/2-declare-variables/solution.md b/1-js/02-first-steps/04-variables/2-declare-variables/solution.md index 392f4e26f..ae8779a43 100644 --- a/1-js/02-first-steps/04-variables/2-declare-variables/solution.md +++ b/1-js/02-first-steps/04-variables/2-declare-variables/solution.md @@ -1,21 +1,21 @@ -## The variable for our planet +## Proměnná pro naši planetu -That's simple: +To je jednoduché: ```js -let ourPlanetName = "Earth"; +let jménoNašíPlanety = "Země"; ``` -Note, we could use a shorter name `planet`, but it might not be obvious what planet it refers to. It's nice to be more verbose. At least until the variable isNotTooLong. +Všimněte si, že bychom mohli použít kratší název `planeta`, ale pak by nemuselo být zřejmé, na kterou planetu se odkazuje. Je vhodné být výřečnější, aspoň dokud název proměnné neníPřílišDlouhý. -## The name of the current visitor +## Jméno aktuálního návštěvníka ```js -let currentUserName = "John"; +let jménoAktuálníhoUživatele = "Jan"; ``` -Again, we could shorten that to `userName` if we know for sure that the user is current. +Opět bychom to mohli zkrátit na `jménoUživatele`, pokud máme jistotu, že jde o aktuálního uživatele. -Modern editors and autocomplete make long variable names easy to write. Don't save on them. A name with 3 words in it is fine. +V moderních editorech se dlouhé názvy proměnných snadno píší díky funkci automatického doplňování. Nešetřete na nich. Tříslovný název je zcela v pořádku. -And if your editor does not have proper autocompletion, get [a new one](/code-editors). +A pokud váš editor neumí automatické doplňování, pořiďte si [nový](/code-editors). diff --git a/1-js/02-first-steps/04-variables/2-declare-variables/task.md b/1-js/02-first-steps/04-variables/2-declare-variables/task.md index f364badf4..51e3db323 100644 --- a/1-js/02-first-steps/04-variables/2-declare-variables/task.md +++ b/1-js/02-first-steps/04-variables/2-declare-variables/task.md @@ -2,7 +2,7 @@ importance: 3 --- -# Giving the right name +# Správná volba názvu -1. Create a variable with the name of our planet. How would you name such a variable? -2. Create a variable to store the name of a current visitor to a website. How would you name that variable? +1. Vytvořte proměnnou s názvem naší planety. Jak byste takovou proměnnou pojmenovali? +2. Vytvořte proměnnou, v níž bude uloženo jméno aktuálního návštěvníka webové stránky. Jak byste takovou proměnnou pojmenovali? diff --git a/1-js/02-first-steps/04-variables/3-uppercast-constant/solution.md b/1-js/02-first-steps/04-variables/3-uppercast-constant/solution.md index acd643fde..4b46c3d0e 100644 --- a/1-js/02-first-steps/04-variables/3-uppercast-constant/solution.md +++ b/1-js/02-first-steps/04-variables/3-uppercast-constant/solution.md @@ -1,5 +1,5 @@ -We generally use upper case for constants that are "hard-coded". Or, in other words, when the value is known prior to execution and directly written into the code. +Obecně používáme velká písmena pro konstanty, které jsou „zakódovány natvrdo“. Jinými slovy, když je jejich hodnota známa ještě před spuštěním programu a je přímo uvedena v kódu. -In this code, `birthday` is exactly like that. So we could use the upper case for it. +V tomto kódu je to přesně případ proměnné `datumNarození`. Pro ni bychom tedy mohli použít velká písmena. -In contrast, `age` is evaluated in run-time. Today we have one age, a year after we'll have another one. It is constant in a sense that it does not change through the code execution. But it is a bit "less of a constant" than `birthday`: it is calculated, so we should keep the lower case for it. +Naproti tomu `věk` se počítá až při běhu programu. Dnes máme jeden věk, za rok budeme mít jiný. Je to konstanta v tom smyslu, že se její hodnota nezmění při provádění kódu, ale je „trochu méně konstantní“ než `datumNarození`: její hodnota je vypočítávána, takže pro ni bychom měli nechat malá písmena. diff --git a/1-js/02-first-steps/04-variables/3-uppercast-constant/task.md b/1-js/02-first-steps/04-variables/3-uppercast-constant/task.md index f3c208a74..6edffeb3e 100644 --- a/1-js/02-first-steps/04-variables/3-uppercast-constant/task.md +++ b/1-js/02-first-steps/04-variables/3-uppercast-constant/task.md @@ -2,24 +2,24 @@ importance: 4 --- -# Uppercase const? +# Konstanta velkými písmeny? -Examine the following code: +Prohlédněte si následující kód: ```js -const birthday = '18.04.1982'; +const datumNarození = '18.04.1982'; -const age = someCode(birthday); +const věk = nějakýKód(datumNarození); ``` -Here we have a constant `birthday` for the date, and also the `age` constant. +Zde máme konstantu `datumNarození` a také konstantu `věk`. -The `age` is calculated from `birthday` using `someCode()`, which means a function call that we didn't explain yet (we will soon!), but the details don't matter here, the point is that `age` is calculated somehow based on the `birthday`. +Konstanta `věk` se vypočítá z konstanty `datumNarození` pomocí `nějakýKód()`, což znamená volání funkce, které jsme zatím nevysvětlili (ale brzy tak učiníme!), ale na podrobnostech zde nezáleží, podstatné je, že `věk` se vypočítá nějak podle `datumNarození`. -Would it be right to use upper case for `birthday`? For `age`? Or even for both? +Bylo by správné použít pro název proměnné `datumNarození` velká písmena? A pro `věk`? Nebo dokonce pro obě? ```js -const BIRTHDAY = '18.04.1982'; // make birthday uppercase? +const DATUM_NAROZENÍ = '18.04.1982'; // napsat DATUM_NAROZENÍ velkými písmeny? -const AGE = someCode(BIRTHDAY); // make age uppercase? +const VĚK = nějakýKód(DATUM_NAROZENÍ); // napsat VĚK velkými písmeny? ``` diff --git a/1-js/02-first-steps/04-variables/article.md b/1-js/02-first-steps/04-variables/article.md index e91d0ea7e..b313c6c2c 100644 --- a/1-js/02-first-steps/04-variables/article.md +++ b/1-js/02-first-steps/04-variables/article.md @@ -1,345 +1,345 @@ -# Variables +# Proměnné -Most of the time, a JavaScript application needs to work with information. Here are two examples: -1. An online shop -- the information might include goods being sold and a shopping cart. -2. A chat application -- the information might include users, messages, and much more. +JavaScriptová aplikace musí většinu času pracovat s informacemi. Uvedeme dva příklady: +1. Online obchod -- informace se mohou týkat prodávaného zboží a nákupního vozíku. +2. Chatovací aplikace -- informace mohou zahrnovat uživatele, zprávy a mnoho dalšího. -Variables are used to store this information. +K ukládání těchto informací se používají proměnné. -## A variable +## Proměnná -A [variable](https://en.wikipedia.org/wiki/Variable_(computer_science)) is a "named storage" for data. We can use variables to store goodies, visitors, and other data. +[Proměnná](https://cs.wikipedia.org/wiki/Proměnná_(programování)) je „pojmenovaný sklad“ dat. Proměnné můžeme používat k ukládání zboží, návštěvníků i jiných dat. -To create a variable in JavaScript, use the `let` keyword. +K vytvoření proměnné v JavaScriptu se používá klíčové slovo `let`. -The statement below creates (in other words: *declares*) a variable with the name "message": +Níže uvedený příkaz vytvoří (jiným slovem *deklaruje*) proměnnou s názvem „zpráva“: ```js -let message; +let zpráva; ``` -Now, we can put some data into it by using the assignment operator `=`: +Nyní do ní můžeme uložit nějaká data pomocí operátoru `=`: ```js -let message; +let zpráva; *!* -message = 'Hello'; // store the string 'Hello' in the variable named message +zpráva = 'Ahoj'; // uložíme řetězec 'Ahoj' do proměnné jménem zpráva */!* ``` -The string is now saved into the memory area associated with the variable. We can access it using the variable name: +Řetězec se nyní uloží do paměťové oblasti, která je vyhrazena pro tuto proměnnou. Můžeme k ní přistoupit pomocí názvu proměnné: ```js run -let message; -message = 'Hello!'; +let zpráva; +zpráva = 'Ahoj!'; *!* -alert(message); // shows the variable content +alert(zpráva); // zobrazí obsah proměnné */!* ``` -To be concise, we can combine the variable declaration and assignment into a single line: +Abychom byli stručnější, můžeme zkombinovat deklaraci proměnné a přiřazení dat do jednoho řádku: ```js run -let message = 'Hello!'; // define the variable and assign the value +let zpráva = 'Ahoj!'; // definujeme proměnnou a přiřadíme jí hodnotu -alert(message); // Hello! +alert(zpráva); // Ahoj! ``` -We can also declare multiple variables in one line: +Na jednom řádku můžeme deklarovat i více proměnných: ```js no-beautify -let user = 'John', age = 25, message = 'Hello'; +let uživatel = 'Jan', věk = 25, zpráva = 'Ahoj'; ``` -That might seem shorter, but we don't recommend it. For the sake of better readability, please use a single line per variable. +Může se to zdát kratší, ale nedoporučujeme to. Pro účely lepší čitelnosti raději uvádějte každou proměnnou na novém řádku. -The multiline variant is a bit longer, but easier to read: +Víceřádková varianta je trochu delší, ale snadněji se čte: ```js -let user = 'John'; -let age = 25; -let message = 'Hello'; +let uživatel = 'Jan'; +let věk = 25; +let zpráva = 'Ahoj'; ``` -Some people also define multiple variables in this multiline style: +Někteří lidé definují více proměnných i tímto víceřádkovým stylem: ```js no-beautify -let user = 'John', - age = 25, - message = 'Hello'; +let uživatel = 'Jan', + věk = 25, + zpráva = 'Ahoj'; ``` -...Or even in the "comma-first" style: +...Nebo dokonce tímto stylem „čárka napřed“: ```js no-beautify -let user = 'John' - , age = 25 - , message = 'Hello'; +let uživatel = 'Jan' + , věk = 25 + , zpráva = 'Ahoj'; ``` -Technically, all these variants do the same thing. So, it's a matter of personal taste and aesthetics. +Technicky všechny tyto varianty dělají totéž, takže je to jen otázkou osobního vkusu a estetiky. -````smart header="`var` instead of `let`" -In older scripts, you may also find another keyword: `var` instead of `let`: +````smart header="`var` namísto `let`" +Ve starších skriptech můžete najít i jiné klíčové slovo: `var` namísto `let`: ```js -*!*var*/!* message = 'Hello'; +*!*var*/!* zpráva = 'Ahoj'; ``` -The `var` keyword is *almost* the same as `let`. It also declares a variable but in a slightly different, "old-school" way. +Klíčové slovo `var` znamená *skoro* totéž jako `let`. Rovněž deklaruje proměnnou, ale trochu jiným, „staroškolským“ způsobem. -There are subtle differences between `let` and `var`, but they do not matter to us yet. We'll cover them in detail in the chapter . +Mezi `let` a `var` existují drobné rozdíly, ale ty nás zatím nezajímají. Podrobně je probereme v kapitole . ```` -## A real-life analogy +## Analogie s reálným životem -We can easily grasp the concept of a "variable" if we imagine it as a "box" for data, with a uniquely-named sticker on it. +Koncept „proměnné“ můžeme snadno pochopit, když si ji představíme jako „krabičku“ na data, na níž je nalepen štítek s unikátním názvem. -For instance, the variable `message` can be imagined as a box labelled `"message"` with the value `"Hello!"` in it: +Například proměnnou `zpráva` si můžeme představit jako krabičku se štítkem `"zpráva"`, v níž je hodnota `"Ahoj!"`: ![](variable.svg) -We can put any value in the box. +Do krabičky můžeme uložit libovolnou hodnotu. -We can also change it as many times as we want: +Můžeme ji také změnit tolikrát, kolikrát chceme: ```js run -let message; +let zpráva; -message = 'Hello!'; +zpráva = 'Ahoj!'; -message = 'World!'; // value changed +zpráva = 'Světe!'; // hodnota se změní -alert(message); +alert(zpráva); ``` -When the value is changed, the old data is removed from the variable: +Když se hodnota změní, stará data jsou z proměnné odstraněna: ![](variable-change.svg) -We can also declare two variables and copy data from one into the other. +Můžeme také deklarovat dvě proměnné a zkopírovat data z jedné do druhé. ```js run -let hello = 'Hello world!'; +let ahoj = 'Ahoj světe!'; -let message; +let zpráva; *!* -// copy 'Hello world' from hello into message -message = hello; +// zkopírujeme 'Ahoj světe!' z proměnné ahoj do proměnné zpráva +zpráva = ahoj; */!* -// now two variables hold the same data -alert(hello); // Hello world! -alert(message); // Hello world! +// nyní obě proměnné obsahují stejná data +alert(ahoj); // Ahoj světe! +alert(zpráva); // Ahoj světe! ``` -````warn header="Declaring twice triggers an error" -A variable should be declared only once. +````warn header="Dvojí deklarace způsobí chybu" +Stejná proměnná může být deklarována pouze jednou. -A repeated declaration of the same variable is an error: +Opakovaná deklarace stejné proměnné ohlásí chybu: ```js run -let message = "This"; +let zpráva = "Toto"; -// repeated 'let' leads to an error -let message = "That"; // SyntaxError: 'message' has already been declared +// opakované 'let' vede k chybě +let zpráva = "Tamto"; // Syntaktická chyba: 'zpráva' již byla deklarována ``` -So, we should declare a variable once and then refer to it without `let`. +Proměnnou bychom tedy měli deklarovat jen jednou a pak se na ni odkazovat bez použití `let`. ```` -```smart header="Functional languages" -It's interesting to note that there exist so-called [pure functional](https://en.wikipedia.org/wiki/Purely_functional_programming) programming languages, such as [Haskell](https://en.wikipedia.org/wiki/Haskell), that forbid changing variable values. +```smart header="Funkcionální jazyky" +Stojí za zmínku, že existují tzv. [čistě funkcionální](https://en.wikipedia.org/wiki/Purely_functional_programming) programovací jazyky, například [Haskell](https://cs.wikipedia.org/wiki/Haskell_(programovací_jazyk)), které nedovolují měnit hodnotu proměnných. -In such languages, once the value is stored "in the box", it's there forever. If we need to store something else, the language forces us to create a new box (declare a new variable). We can't reuse the old one. +Když je v takových jazycích hodnota jednou uložena „do krabičky“, zůstane tam navždy. Pokud chceme uložit něco jiného, jazyk nás přinutí vytvořit novou krabičku (deklarovat novou proměnnou). Nemůžeme znovu použít starou. -Though it may seem a little odd at first sight, these languages are quite capable of serious development. More than that, there are areas like parallel computations where this limitation confers certain benefits. +Ačkoli to na první pohled může vypadat trochu zvláštně, i v takových jazycích je seriózní programování docela dobře možné. Kromě toho existují oblasti, např. paralelní výpočty, v nichž právě toto omezení přináší určité výhody. ``` -## Variable naming [#variable-naming] +## Názvy proměnných [#variable-naming] -There are two limitations on variable names in JavaScript: +V JavaScriptu platí pro názvy proměnných dvě omezení: -1. The name must contain only letters, digits, or the symbols `$` and `_`. -2. The first character must not be a digit. +1. Název musí obsahovat pouze písmena, číslice nebo symboly `$` a `_`. +2. První znak nesmí být číslice. -Examples of valid names: +Příklady platných názvů: ```js -let userName; +let uživatelskéJméno; let test123; ``` -When the name contains multiple words, [camelCase](https://en.wikipedia.org/wiki/CamelCase) is commonly used. That is: words go one after another, each word except first starting with a capital letter: `myVeryLongName`. +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`. -What's interesting -- the dollar sign `'$'` and the underscore `'_'` can also be used in names. They are regular symbols, just like letters, without any special meaning. +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. -These names are valid: +Tyto názvy jsou platné: ```js run untrusted -let $ = 1; // declared a variable with the name "$" -let _ = 2; // and now a variable with the name "_" +let $ = 1; // deklarujeme proměnnou s názvem "$" +let _ = 2; // a nyní proměnnou s názvem "_" alert($ + _); // 3 ``` -Examples of incorrect variable names: +Příklady nesprávných názvů proměnných: ```js no-beautify -let 1a; // cannot start with a digit +let 1a; // nesmí začínat číslicí -let my-name; // hyphens '-' aren't allowed in the name +let moje-jméno; // spojovník '-' není v názvu povolen ``` -```smart header="Case matters" -Variables named `apple` and `APPLE` are two different variables. +```smart header="Na velikosti záleží" +Proměnné s názvy `jablko` a `JABLKO` jsou dvě různé proměnné. ``` -````smart header="Non-Latin letters are allowed, but not recommended" -It is possible to use any language, including Cyrillic letters, Chinese logograms and so on, like this: +````smart header="Nelatinská písmena jsou povolena, ale nedoporučují se" +Je dovoleno použít písmena z jakéhokoli jazyka, včetně písmen z kyrilice, čínských znaků a podobně, třeba takto: ```js let имя = '...'; let 我 = '...'; ``` -Technically, there is no error here. Such names are allowed, but there is an international convention to use English in variable names. Even if we're writing a small script, it may have a long life ahead. People from other countries may need to read it sometime. +Technicky zde není žádná chyba. Takové názvy jsou povoleny, ale podle mezinárodní konvence se v názvech proměnných používá angličtina. I když píšeme malý skript, může mít před sebou dlouhý život a lidé z jiných zemí si ho možná někdy budou potřebovat přečíst. ```` -````warn header="Reserved names" -There is a [list of reserved words](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords), which cannot be used as variable names because they are used by the language itself. +````warn header="Rezervované názvy" +Existuje [seznam rezervovaných slov](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords), které nemůžeme používat jako názvy proměnných, protože je již používá samotný jazyk. -For example: `let`, `class`, `return`, and `function` are reserved. +Například: `let`, `class`, `return`, `function` jsou rezervované. -The code below gives a syntax error: +Níže uvedený kód ohlásí syntaktickou chybu: ```js run no-beautify -let let = 5; // can't name a variable "let", error! -let return = 5; // also can't name it "return", error! +let let = 5; // proměnnou nelze pojmenovat "let", chyba! +let return = 5; // nelze ji ani pojmenovat "return", chyba! ``` ```` -````warn header="An assignment without `use strict`" +````warn header="Přiřazení bez `use strict`" -Normally, we need to define a variable before using it. But in the old times, it was technically possible to create a variable by a mere assignment of the value without using `let`. This still works now if we don't put `use strict` in our scripts to maintain compatibility with old scripts. +Obvykle musíme proměnnou před použitím definovat. Ve starých časech však bylo technicky možné vytvořit proměnnou pouze přiřazením hodnoty bez použití `let`. Aby byla zaručena kompatibilita se starými skripty, funguje to dodnes, pokud v našich skriptech neuvedeme `use strict`. ```js run no-strict -// note: no "use strict" in this example +// poznámka: v tomto příkladu není "use strict" -num = 5; // the variable "num" is created if it didn't exist +čslo = 5; // pokud proměnná "čslo" ještě neexistuje, je vytvořena -alert(num); // 5 +alert(čslo); // 5 ``` -This is a bad practice and would cause an error in strict mode: +Je to špatný zvyk a ve striktním režimu vyvolá chybu: ```js "use strict"; *!* -num = 5; // error: num is not defined +čslo = 5; // chyba: proměnná čslo není definována */!* ``` ```` -## Constants +## Konstanty -To declare a constant (unchanging) variable, use `const` instead of `let`: +Chceme-li deklarovat konstantní (neměnící se) proměnnou, použijeme `const` místo `let`: ```js -const myBirthday = '18.04.1982'; +const mojeDatumNarození = '18.04.1982'; ``` -Variables declared using `const` are called "constants". They cannot be reassigned. An attempt to do so would cause an error: +Proměnné deklarované pomocí `const` se nazývají „konstanty“ a není možné jim přiřadit jinou hodnotu. Pokus o to by ohlásil chybu: ```js run -const myBirthday = '18.04.1982'; +const mojeDatumNarození = '18.04.1982'; -myBirthday = '01.01.2001'; // error, can't reassign the constant! +mojeDatumNarození = '01.01.2001'; // chyba, nelze změnit konstantu! ``` -When a programmer is sure that a variable will never change, they can declare it with `const` to guarantee and communicate that fact to everyone. +Když má programátor jistotu, že hodnota proměnné se nikdy nezmění, může ji deklarovat pomocí `const`, aby tuto skutečnost pojistil a všem jasně sdělil. -### Uppercase constants +### Konstanty velkými písmeny -There is a widespread practice to use constants as aliases for difficult-to-remember values that are known before execution. +Je široce rozšířenou praktikou používat konstanty jako názvy obtížně zapamatovatelných hodnot, které jsou známy ještě před spuštěním programu. -Such constants are named using capital letters and underscores. +Názvy takových konstant se uvádějí velkými písmeny a s podtržítky. -For instance, let's make constants for colors in so-called "web" (hexadecimal) format: +Například vytvoříme konstanty pro barvy v tzv. „webovém“ (hexadecimálním) formátu: ```js run -const COLOR_RED = "#F00"; -const COLOR_GREEN = "#0F0"; -const COLOR_BLUE = "#00F"; -const COLOR_ORANGE = "#FF7F00"; - -// ...when we need to pick a color -let color = COLOR_ORANGE; -alert(color); // #FF7F00 +const BARVA_ČERVENÁ = "#F00"; +const BARVA_ZELENÁ = "#0F0"; +const BARVA_MODRÁ = "#00F"; +const BARVA_ORANŽOVÁ = "#FF7F00"; + +// ...když si máme zvolit barvu +let barva = BARVA_ORANŽOVÁ; +alert(barva); // #FF7F00 ``` -Benefits: +Výhody: -- `COLOR_ORANGE` is much easier to remember than `"#FF7F00"`. -- It is much easier to mistype `"#FF7F00"` than `COLOR_ORANGE`. -- When reading the code, `COLOR_ORANGE` is much more meaningful than `#FF7F00`. +- `BARVA_ORANŽOVÁ` se pamatuje mnohem lépe než `"#FF7F00"`. +- Je mnohem snadnější špatně napsat `"#FF7F00"` než `BARVA_ORANŽOVÁ`. +- Při čtení kódu dává `BARVA_ORANŽOVÁ` mnohem větší smysl než `#FF7F00`. -When should we use capitals for a constant and when should we name it normally? Let's make that clear. +Kdy bychom měli používat pro konstantu velká písmena a kdy bychom ji měli pojmenovat obvyklým způsobem? Ujasníme si to. -Being a "constant" just means that a variable's value never changes. But some constants are known before execution (like a hexadecimal value for red) and some constants are *calculated* in run-time, during the execution, but do not change after their initial assignment. +Být „konstanta“ znamená prostě to, že hodnota proměnné se nikdy nezmění. Některé konstanty jsou však známy již před spuštěním programu (například hexadecimální hodnota červené barvy) a pak jsou konstanty, které se *vypočítají* až za běhu programu, ale jejich vypočtená hodnota se nikdy nezmění. -For instance: +Příklad: ```js -const pageLoadTime = /* time taken by a webpage to load */; +const dobaNačítáníStránky = /* doba, kterou trvá načíst webovou stránku */; ``` -The value of `pageLoadTime` is not known before the page load, so it's named normally. But it's still a constant because it doesn't change after the assignment. +Hodnota proměnné `dobaNačítáníStránky` není známa dříve, než se stránka načte, proto je pojmenována obvyklým způsobem. Je to však konstanta, protože se po přiřazení již nezmění. -In other words, capital-named constants are only used as aliases for "hard-coded" values. +Jinými slovy, názvy konstant zapsané velkými písmeny se používají jen pro pojmenování „natvrdo uvedených“ hodnot. -## Name things right +## Pojmenovávejte věci správně -Talking about variables, there's one more extremely important thing. +Když už mluvíme o proměnných, je tady jedna velice důležitá věc. -A variable name should have a clean, obvious meaning, describing the data that it stores. +Název proměnné by měl mít jasný a jednoznačný význam a měl by popisovat data, která jsou v proměnné uložena. -Variable naming is one of the most important and complex skills in programming. A glance at variable names can reveal which code was written by a beginner versus an experienced developer. +Pojmenovávání proměnných je jednou z nejdůležitějších a nejsložitějších dovedností v programování. Rychlý pohled na názvy proměnných nám může prozradit, zda kód psal začátečník nebo zkušený vývojář. -In a real project, most of the time is spent modifying and extending an existing code base rather than writing something completely separate from scratch. When we return to some code after doing something else for a while, it's much easier to find information that is well-labelled. Or, in other words, when the variables have good names. +V reálných projektech většinu času nezabere psaní něčeho úplně nového od základů, ale úprava a rozšiřování již existujícího kódu. Když se vrátíme k nějakému kódu poté, co jsme nějakou dobu dělali něco jiného, je mnohem jednodušší najít potřebné informace, když jsou vhodně pojmenovány. Nebo, jinými slovy, když proměnné mají vhodné názvy. -Please spend time thinking about the right name for a variable before declaring it. Doing so will repay you handsomely. +Než deklarujete proměnnou, dobře si promyslete její název. Bohatě se vám to vyplatí. -Some good-to-follow rules are: +Některá pravidla, která je vhodné dodržovat, jsou: -- Use human-readable names like `userName` or `shoppingCart`. -- Stay away from abbreviations or short names like `a`, `b`, and `c`, unless you know what you're doing. -- Make names maximally descriptive and concise. Examples of bad names are `data` and `value`. Such names say nothing. It's only okay to use them if the context of the code makes it exceptionally obvious which data or value the variable is referencing. -- Agree on terms within your team and in your mind. If a site visitor is called a "user" then we should name related variables `currentUser` or `newUser` instead of `currentVisitor` or `newManInTown`. +- Používejte názvy čitelné člověkem, například `uživatelskéJméno` nebo `nákupníVozík`. +- Zdržte se zkratek nebo krátkých názvů typu `a`, `b`, `c`, leda že byste opravdu dobře věděli, co děláte. +- Volte názvy co nejpopisnější a nejstručnější. Příklady špatných názvů jsou `data` nebo `hodnota`. Takové názvy nic neříkají. Je vhodné je používat jen tehdy, když je z kontextu kódu naprosto zřejmé, jaká data nebo hodnota se v proměnné nachází. +- Dohodněte se na pojmech se svým týmem a promyslete si je. Jestliže se návštěvník stránky nazývá „uživatel“, pak byste příslušné proměnné měli pojmenovat `aktuálníUživatel` nebo `novýUživatel`, a ne `aktuálníNávštěvník` nebo `novýPánVeMěstě`. -Sounds simple? Indeed it is, but creating descriptive and concise variable names in practice is not. Go for it. +Zní to jednoduše? Bezpochyby ano, ale vytvářet popisné a stručné názvy proměnných v praxi jednoduché není. -```smart header="Reuse or create?" -And the last note. There are some lazy programmers who, instead of declaring new variables, tend to reuse existing ones. +```smart header="Vytvořit novou nebo použít starou?" +A jedna poznámka na závěr. Existují líní programátoři, kteří místo deklarace nové proměnné mají sklon znovu použít starou. -As a result, their variables are like boxes into which people throw different things without changing their stickers. What's inside the box now? Who knows? We need to come closer and check. +Výsledkem je, že jejich proměnné připomínají krabičky, do nichž lidé dávají různé věci, aniž by se obtěžovali změnit štítek. Co je právě teď v krabičce? Kdo ví? Musíme přijít blíž a podívat se. -Such programmers save a little bit on variable declaration but lose ten times more on debugging. +Takoví programátoři ušetří trochu času deklarací proměnné, ale desetkrát víc času ztratí při ladění. -An extra variable is good, not evil. +Proměnná navíc je dobro, ne zlo. -Modern JavaScript minifiers and browsers optimize code well enough, so it won't create performance issues. Using different variables for different values can even help the engine optimize your code. +Moderní JavaScriptové minifikátory a prohlížeče dokáží kód dostatečně dobře optimalizovat, takže nenastane problém s výkonem. Používání různých proměnných pro různé hodnoty motoru dokonce pomůže optimalizovat váš kód. ``` -## Summary +## Shrnutí -We can declare variables to store data by using the `var`, `let`, or `const` keywords. +Deklarovat proměnné pro ukládání dat můžeme pomocí klíčových slov `var`, `let` nebo `const`. -- `let` -- is a modern variable declaration. -- `var` -- is an old-school variable declaration. Normally we don't use it at all, but we'll cover subtle differences from `let` in the chapter , just in case you need them. -- `const` -- is like `let`, but the value of the variable can't be changed. +- `let` -- je moderní deklarace proměnné. +- `var` -- je deklarace proměnné ze staré školy. Obvykle ji vůbec nepoužíváme, ale v kapitole probereme drobné rozdíly oproti `let` pro případ, že byste je potřebovali znát. +- `const` -- je jako `let`, ale hodnota proměnné se nesmí měnit. -Variables should be named in a way that allows us to easily understand what's inside them. +Proměnné by měly být pojmenovány tak, abychom snadno pochopili, co obsahují. diff --git a/1-js/02-first-steps/04-variables/variable-change.svg b/1-js/02-first-steps/04-variables/variable-change.svg index 1b2679238..74951e8fd 100644 --- a/1-js/02-first-steps/04-variables/variable-change.svg +++ b/1-js/02-first-steps/04-variables/variable-change.svg @@ -1 +1 @@ -"World!""Hello!"message \ No newline at end of file +"světe!""Ahoj!"zpráva \ No newline at end of file diff --git a/1-js/02-first-steps/04-variables/variable.svg b/1-js/02-first-steps/04-variables/variable.svg index 1c3d8b0cb..16f74663d 100644 --- a/1-js/02-first-steps/04-variables/variable.svg +++ b/1-js/02-first-steps/04-variables/variable.svg @@ -1 +1 @@ -"Hello!"message \ No newline at end of file +"Ahoj!"zpráva \ No newline at end of file diff --git a/1-js/02-first-steps/05-types/1-string-quotes/solution.md b/1-js/02-first-steps/05-types/1-string-quotes/solution.md index 68a13c15b..564a701c0 100644 --- a/1-js/02-first-steps/05-types/1-string-quotes/solution.md +++ b/1-js/02-first-steps/05-types/1-string-quotes/solution.md @@ -1,15 +1,15 @@ -Backticks embed the expression inside `${...}` into the string. +Obrácené čárky vkládají do řetězce hodnotu výrazu uvnitř `${...}`. ```js run -let name = "Ilya"; +let jméno = "Ilja"; -// the expression is a number 1 -alert( `hello ${1}` ); // hello 1 +// výrazem je číslo 1 +alert( `ahoj ${1}` ); // ahoj 1 -// the expression is a string "name" -alert( `hello ${"name"}` ); // hello name +// výrazem je řetězec "jméno" +alert( `ahoj ${"jméno"}` ); // ahoj jméno -// the expression is a variable, embed it -alert( `hello ${name}` ); // hello Ilya +// výrazem je proměnná, hodnota se vloží do řetězce +alert( `ahoj ${jméno}` ); // ahoj Ilja ``` diff --git a/1-js/02-first-steps/05-types/1-string-quotes/task.md b/1-js/02-first-steps/05-types/1-string-quotes/task.md index 14ea6b4d6..14ad66c94 100644 --- a/1-js/02-first-steps/05-types/1-string-quotes/task.md +++ b/1-js/02-first-steps/05-types/1-string-quotes/task.md @@ -2,16 +2,16 @@ importance: 5 --- -# String quotes +# Uvozovky řetězců -What is the output of the script? +Jaký je výstup tohoto skriptu? ```js -let name = "Ilya"; +let jméno = "Ilja"; -alert( `hello ${1}` ); // ? +alert( `ahoj ${1}` ); // ? -alert( `hello ${"name"}` ); // ? +alert( `ahoj ${"jméno"}` ); // ? -alert( `hello ${name}` ); // ? +alert( `ahoj ${jméno}` ); // ? ``` \ No newline at end of file diff --git a/1-js/02-first-steps/05-types/article.md b/1-js/02-first-steps/05-types/article.md index 04e8b2450..ac27efda1 100644 --- a/1-js/02-first-steps/05-types/article.md +++ b/1-js/02-first-steps/05-types/article.md @@ -1,225 +1,226 @@ -# Data types +# Datové typy -A value in JavaScript is always of a certain type. For example, a string or a number. +Každá hodnota v JavaScriptu je určitého typu, například řetězec nebo číslo. -There are eight basic data types in JavaScript. Here, we'll cover them in general and in the next chapters we'll talk about each of them in detail. +V JavaScriptu existuje osm základních datových typů. Zde je všeobecně popíšeme a v příštích kapitolách podrobně rozebereme každý z nich. -We can put any type in a variable. For example, a variable can at one moment be a string and then store a number: +Do proměnné můžeme uložit hodnotu libovolného typu. Například proměnná může být v jednu chvíli řetězec a pak do ní můžeme uložit číslo: ```js -// no error -let message = "hello"; -message = 123456; +// to není chyba +let zpráva = "ahoj"; +zpráva = 123456; ``` -Programming languages that allow such things, such as JavaScript, are called "dynamically typed", meaning that there exist data types, but variables are not bound to any of them. +Programovací jazyky jako JavaScript, které něco takového umožňují, se nazývají „dynamicky typované“. Znamená to, že v nich existují datové typy, ale proměnné na ně nejsou navázány. -## Number +## Číslo ```js let n = 123; n = 12.345; ``` -The *number* type represents both integer and floating point numbers. +Typ *číslo* (anglicky *number*) představuje čísla, a to celá čísla i čísla s plovoucí řádovou čárkou. -There are many operations for numbers, e.g. multiplication `*`, division `/`, addition `+`, subtraction `-`, and so on. +Pro čísla existuje mnoho operací, např. násobení `*`, dělení `/`, sčítání `+`, odčítání `-` a jiné. -Besides regular numbers, there are so-called "special numeric values" which also belong to this data type: `Infinity`, `-Infinity` and `NaN`. +Kromě běžných čísel obsahuje JavaScript i tzv. „speciální číselné hodnoty“, které také patří do tohoto datového typu: `Infinity`, `-Infinity` a `NaN`. -- `Infinity` represents the mathematical [Infinity](https://en.wikipedia.org/wiki/Infinity) ∞. It is a special value that's greater than any number. +- `Infinity` (anglicky nekonečno) představuje matematické [nekonečno](https://en.wikipedia.org/wiki/Infinity) ∞. Je to speciální hodnota, která je větší než kterékoli číslo. - We can get it as a result of division by zero: + Můžeme je získat jako výsledek dělení nulou: ```js run alert( 1 / 0 ); // Infinity ``` - Or just reference it directly: + Nebo se na ně přímo odkázat: ```js run alert( Infinity ); // Infinity ``` -- `NaN` represents a computational error. It is a result of an incorrect or an undefined mathematical operation, for instance: + +- `NaN` (z anglického „not a number“ -- není číslo) představuje výpočetní chybu. Je to výsledek nekorektní nebo nedefinované matematické operace, například: ```js run - alert( "not a number" / 2 ); // NaN, such division is erroneous + alert( "to není číslo" / 2 ); // NaN, takové dělení je chybné ``` - `NaN` is sticky. Any further mathematical operation on `NaN` returns `NaN`: + `NaN` je „lepkavé“. Jakákoli operace provedená s `NaN` vrátí opět `NaN`: ```js run alert( NaN + 1 ); // NaN alert( 3 * NaN ); // NaN - alert( "not a number" / 2 - 1 ); // NaN + alert( "to není číslo" / 2 - 1 ); // NaN ``` - So, if there's a `NaN` somewhere in a mathematical expression, it propagates to the whole result (there's only one exception to that: `NaN ** 0` is `1`). + Je-li tedy někde v matematickém výrazu `NaN`, přenese se až do jeho celkového výsledku (jediná výjimka: `NaN ** 0` je `1`). -```smart header="Mathematical operations are safe" -Doing maths is "safe" in JavaScript. We can do anything: divide by zero, treat non-numeric strings as numbers, etc. +```smart header="Matematické operace jsou bezpečné" +Veškeré matematické výpočty v JavaScriptu jsou „bezpečné“. Můžeme provádět cokoli: dělit nulou, zacházet s řetězci neobsahujícími číslo jako s čísly a podobně. -The script will never stop with a fatal error ("die"). At worst, we'll get `NaN` as the result. +Skript nikdy neskončí fatální chybou („nespadne“). Přinejhorším dostaneme jako výsledek `NaN`. ``` -Special numeric values formally belong to the "number" type. Of course they are not numbers in the common sense of this word. +Speciální číselné hodnoty formálně patří k typu „číslo“. Samozřejmě to nejsou čísla v běžném slova smyslu. -We'll see more about working with numbers in the chapter . +O práci s čísly si povíme víc v kapitole . ## BigInt [#bigint-type] -In JavaScript, the "number" type cannot safely represent integer values larger than (253-1) (that's `9007199254740991`), or less than -(253-1) for negatives. +Typ „číslo“ v JavaScriptu nedokáže reprezentovat celočíselné hodnoty větší než (253-1) (což je `9007199254740991`), nebo záporné hodnoty nižší než -(-253-1). -To be really precise, the "number" type can store larger integers (up to 1.7976931348623157 * 10308), but outside of the safe integer range ±(253-1) there'll be a precision error, because not all digits fit into the fixed 64-bit storage. So an "approximate" value may be stored. +Abychom byli opravdu přesní, typ „číslo“ umí ukládat větší celá čísla (až do 1.7976931348623157 * 10308), ale mimo bezpečný celočíselný interval ±(253-1) nastane chyba přesnosti, jelikož do pevného 64-bitového úložiště se nevejdou všechny číslice. Může být tedy uložena „přibližná“ hodnota. -For example, these two numbers (right above the safe range) are the same: +Například tato dvě čísla (těsně nad bezpečným intervalem) budou stejná: ```js console.log(9007199254740991 + 1); // 9007199254740992 console.log(9007199254740991 + 2); // 9007199254740992 ``` -So to say, all odd integers greater than (253-1) can't be stored at all in the "number" type. +Dá se tedy říci, že do typu „číslo“ nelze uložit žádné liché celé číslo větší než (253-1). -For most purposes ±(253-1) range is quite enough, but sometimes we need the entire range of really big integers, e.g. for cryptography or microsecond-precision timestamps. +Pro většinu účelů je interval ±(253-1) dostačující, ale někdy potřebujeme opravdu velká čísla, např. pro kryptografii nebo časová razítka s přesností na mikrosekundy. -`BigInt` type was recently added to the language to represent integers of arbitrary length. +Proto byl do jazyka nedávno přidán typ `BigInt`, který představuje celá čísla libovolné délky. -A `BigInt` value is created by appending `n` to the end of an integer: +Hodnota typu `BigInt` vznikne přidáním písmene `n` na konec celého čísla: ```js -// the "n" at the end means it's a BigInt +// "n" na konci znamená, že to je BigInt const bigInt = 1234567890123456789012345678901234567890n; ``` -As `BigInt` numbers are rarely needed, we don't cover them here, but devoted them a separate chapter . Read it when you need such big numbers. +Protože čísla typu `BigInt` potřebujeme jen málokdy, nebudeme je tady probírat, ale věnujeme jim zvláštní kapitolu . Až budete tak velká čísla potřebovat, přečtěte si ji. -## String +## Řetězec -A string in JavaScript must be surrounded by quotes. +Řetězec (anglicky string) v JavaScriptu musí být uzavřen do uvozovek. ```js -let str = "Hello"; -let str2 = 'Single quotes are ok too'; -let phrase = `can embed another ${str}`; +let řtzc = "Ahoj"; +let řtzc2 = 'Jednoduché uvozovky lze také použít'; +let věta = `může zahrnovat jiný ${řtzc}`; ``` -In JavaScript, there are 3 types of quotes. +JavaScript rozeznává tři druhy uvozovek. -1. Double quotes: `"Hello"`. -2. Single quotes: `'Hello'`. -3. Backticks: `Hello`. +1. Dvojité uvozovky: `"Ahoj"`. +2. Jednoduché uvozovky: `'Ahoj'`. +3. Zpětné uvozovky: `Ahoj`. -Double and single quotes are "simple" quotes. There's practically no difference between them in JavaScript. +Dvojité a jednoduché uvozovky jsou „obyčejné“. V JavaScriptu mezi nimi není prakticky žádný rozdíl. -Backticks are "extended functionality" quotes. They allow us to embed variables and expressions into a string by wrapping them in `${…}`, for example: +Zpětné uvozovky jsou uvozovky „s rozšířenou funkcionalitou“. Umožňují nám vložit do řetězce proměnné a výrazy, když je uzavřeme do `${…}`. Například: ```js run -let name = "John"; +let jméno = "Jan"; -// embed a variable -alert( `Hello, *!*${name}*/!*!` ); // Hello, John! +// vložíme proměnnou +alert( `Ahoj, *!*${jméno}*/!*!` ); // Ahoj, Jan! -// embed an expression -alert( `the result is *!*${1 + 2}*/!*` ); // the result is 3 +// vložíme výraz +alert( `výsledek je *!*${1 + 2}*/!*` ); // výsledek je 3 ``` -The expression inside `${…}` is evaluated and the result becomes a part of the string. We can put anything in there: a variable like `name` or an arithmetical expression like `1 + 2` or something more complex. +Výraz uvnitř `${…}` se vypočítá a jeho výsledek se stane součástí řetězce. Můžeme tam vložit cokoli: proměnnou jako `jméno`, aritmetický výraz jako `1 + 2`, nebo i něco složitějšího. -Please note that this can only be done in backticks. Other quotes don't have this embedding functionality! +Všimněte si, že toto lze provést jen uvnitř zpětných uvozovek. Ostatní druhy uvozovek tuto funkcionalitu nemají! ```js run -alert( "the result is ${1 + 2}" ); // the result is ${1 + 2} (double quotes do nothing) +alert( "výsledek je ${1 + 2}" ); // výsledek je ${1 + 2} (dvojité uvozovky s tím nic neudělají) ``` -We'll cover strings more thoroughly in the chapter . +Řetězce probereme podrobněji v kapitole . -```smart header="There is no *character* type." -In some languages, there is a special "character" type for a single character. For example, in the C language and in Java it is called "char". +```smart header="V JavaScriptu není typ *znak*" +V některých jazycích existuje speciální typ „znak“ pro jediný znak. Například v jazyce C nebo Java se nazývá „char“. -In JavaScript, there is no such type. There's only one type: `string`. A string may consist of zero characters (be empty), one character or many of them. +V JavaScriptu žádný takový typ není. Je tady jen jeden typ: `string` (řetězec). Řetězec může být prázdný (neobsahovat žádný znak), může se skládat z jediného znaku nebo z více znaků. ``` -## Boolean (logical type) +## Boolean (logický typ) -The boolean type has only two values: `true` and `false`. +Typ boolean má jen dvě hodnoty: `true` a `false`. -This type is commonly used to store yes/no values: `true` means "yes, correct", and `false` means "no, incorrect". +Tento typ se běžně používá k ukládání hodnot ano/ne: `true` znamená „ano, pravda“, `false` znamená „ne, nepravda“. -For instance: +Příklad: ```js -let nameFieldChecked = true; // yes, name field is checked -let ageFieldChecked = false; // no, age field is not checked +let poleJménaZkontrolováno = true; // ano, pole se jménem je zkontrolováno +let poleVěkuZkontrolováno = false; // ne, pole s věkem není zkontrolováno ``` -Boolean values also come as a result of comparisons: +Booleovské hodnoty také dostáváme jako výsledek porovnání: ```js run -let isGreater = 4 > 1; +let jeVětší = 4 > 1; -alert( isGreater ); // true (the comparison result is "yes") +alert( jeVětší ); // true (výsledek porovnání je „ano“) ``` -We'll cover booleans more deeply in the chapter . +Datový typ boolean probereme podrobněji v kapitole . -## The "null" value +## Hodnota „null“ -The special `null` value does not belong to any of the types described above. +Speciální hodnota `null` nepatří k žádnému z výše uvedených typů. -It forms a separate type of its own which contains only the `null` value: +Tvoří samostatný typ, který obsahuje jedině hodnotu `null`: ```js -let age = null; +let věk = null; ``` -In JavaScript, `null` is not a "reference to a non-existing object" or a "null pointer" like in some other languages. +V JavaScriptu `null` není „odkaz na neexistující objekt“ nebo „nulový ukazatel“, jako v některých jiných jazycích. -It's just a special value which represents "nothing", "empty" or "value unknown". +Je to speciální hodnota, která představuje „nic“, „prázdno“ nebo „neznámá hodnota“. -The code above states that `age` is unknown. +Výše uvedený kód říká, že `věk` je neznámý. -## The "undefined" value +## Hodnota „undefined“ -The special value `undefined` also stands apart. It makes a type of its own, just like `null`. +Rovněž speciální hodnota `undefined` stojí stranou a tvoří svůj vlastní typ, stejně jako `null`. -The meaning of `undefined` is "value is not assigned". +Význam `undefined` je „hodnota není přiřazena“. -If a variable is declared, but not assigned, then its value is `undefined`: +Je-li proměnná deklarována, ale není jí přiřazena hodnota, pak má hodnotu `undefined`: ```js run -let age; +let věk; -alert(age); // shows "undefined" +alert(věk); // zobrazí „undefined“ ``` -Technically, it is possible to explicitly assign `undefined` to a variable: +Technicky je možné výslovně přiřadit hodnotu `undefined` nějaké proměnné: ```js run -let age = 100; +let věk = 100; -// change the value to undefined -age = undefined; +// změníme hodnotu na undefined +věk = undefined; -alert(age); // "undefined" +alert(věk); // "undefined" ``` -...But we don't recommend doing that. Normally, one uses `null` to assign an "empty" or "unknown" value to a variable, while `undefined` is reserved as a default initial value for unassigned things. +...Toto však nedoporučujeme. Běžně se k přiřazení „prázdné“ nebo „neznámé“ hodnoty do proměnné používá `null`, zatímco `undefined` je vyhrazeno jako výchozí úvodní hodnota u proměnných, kterým nebyla hodnota přiřazena. -## Objects and Symbols +## Objekty a symboly -The `object` type is special. +Typ `object` je speciální. -All other types are called "primitive" because their values can contain only a single thing (be it a string or a number or whatever). In contrast, objects are used to store collections of data and more complex entities. +Všechny ostatní typy se nazývají „primitivní“, protože jejich hodnoty mohou obsahovat pouze jednu věc (ať je to řetězec, číslo nebo cokoli). Naproti tomu objekty se používají k ukládání kolekcí dat a složitějších entit. -Being that important, objects deserve a special treatment. We'll deal with them later in the chapter , after we learn more about primitives. +Když jsou objekty tak důležité, vyžadují zvláštní zacházení. Budeme o nich hovořit později v kapitole , až se dozvíme více o primitivních typech. -The `symbol` type is used to create unique identifiers for objects. We have to mention it here for the sake of completeness, but also postpone the details till we know objects. +Typ `symbol` se používá k vytváření unikátních identifikátorů pro objekty. Musíme jej zde zmínit, aby seznam byl úplný, ale podrobnosti si necháme až na dobu, kdy budeme vědět více o objektech. -## The typeof operator [#type-typeof] +## Operátor typeof [#type-typeof] -The `typeof` operator returns the type of the operand. It's useful when we want to process values of different types differently or just want to do a quick check. +Operátor `typeof` vrací typ operandu. Je užitečný, když chceme hodnoty různých typů zpracovávat různě anebo si jen chceme typ rychle ověřit. -A call to `typeof x` returns a string with the type name: +Volání `typeof x` vrátí řetězec s názvem typu: ```js typeof undefined // "undefined" @@ -247,41 +248,41 @@ typeof alert // "function" (3) */!* ``` -The last three lines may need additional explanation: +Poslední tři řádky možná vyžadují podrobnější vysvětlení: -1. `Math` is a built-in object that provides mathematical operations. We will learn it in the chapter . Here, it serves just as an example of an object. -2. The result of `typeof null` is `"object"`. That's an officially recognized error in `typeof`, coming from very early days of JavaScript and kept for compatibility. Definitely, `null` is not an object. It is a special value with a separate type of its own. The behavior of `typeof` is wrong here. -3. The result of `typeof alert` is `"function"`, because `alert` is a function. We'll study functions in the next chapters where we'll also see that there's no special "function" type in JavaScript. Functions belong to the object type. But `typeof` treats them differently, returning `"function"`. That also comes from the early days of JavaScript. Technically, such behavior isn't correct, but can be convenient in practice. +1. `Math` je vestavěný objekt, který poskytuje matematické operace. Dozvíme se o něm víc v kapitole . Zde nám slouží jen jako příklad objektu. +2. Výsledkem `typeof null` je `"object"`. Toto je oficiálně přiznaná chyba chování `typeof`, která pochází z pravěku JavaScriptu a byla v něm ponechána kvůli kompatibilitě. Ve skutečnosti `null` není objekt. Je to speciální hodnota, která má svůj vlastní typ. +3. Výsledkem `typeof alert` je `"function"`, protože `alert` je funkce. Funkce prostudujeme v dalších kapitolách, kde také uvidíme, že v JavaScriptu není žádný speciální typ „funkce“. Funkce jsou typu objekt. Avšak `typeof` s nimi zachází jinak a vrátí `"function"`. To také pochází z pravěku JavaScriptu. Technicky není toto chování korektní, ale v praxi může být užitečné. -```smart header="The `typeof(x)` syntax" -You may also come across another syntax: `typeof(x)`. It's the same as `typeof x`. +```smart header="Syntaxe `typeof(x)`" +Můžete narazit i na jinou syntaxi: `typeof(x)`. To je totéž jako `typeof x`. -To put it clear: `typeof` is an operator, not a function. The parentheses here aren't a part of `typeof`. It's the kind of parentheses used for mathematical grouping. +Abychom to objasnili: `typeof` je operátor, ne funkce. Závorky zde uvedené nejsou součástí `typeof`. Je to stejný druh závorek, který se v matematice používá pro seskupování. -Usually, such parentheses contain a mathematical expression, such as `(2 + 2)`, but here they contain only one argument `(x)`. Syntactically, they allow to avoid a space between the `typeof` operator and its argument, and some people like it. +Zpravidla takové závorky obsahují matematický výraz, např. `(2 + 2)`, ale zde obsahují jen jediný argument `(x)`. Syntakticky umožňují vyhnout se mezeře mezi operátorem `typeof` a jeho argumentem. Některým lidem se to líbí. -Some people prefer `typeof(x)`, although the `typeof x` syntax is much more common. +Někteří lidé dávají přednost `typeof(x)`, ačkoli syntaxe `typeof x` je mnohem běžnější. ``` -## Summary +## Shrnutí -There are 8 basic data types in JavaScript. +V JavaScriptu existuje osm základních datových typů. -- Seven primitive data types: - - `number` for numbers of any kind: integer or floating-point, integers are limited by ±(253-1). - - `bigint` for integer numbers of arbitrary length. - - `string` for strings. A string may have zero or more characters, there's no separate single-character type. - - `boolean` for `true`/`false`. - - `null` for unknown values -- a standalone type that has a single value `null`. - - `undefined` for unassigned values -- a standalone type that has a single value `undefined`. - - `symbol` for unique identifiers. -- And one non-primitive data type: - - `object` for more complex data structures. +- Sedm primitivních datových typů: + - `number` pro čísla libovolného druhu: celá čísla nebo čísla s plovoucí řádovou čárkou. Celá čísla jsou omezena hodnotou ±(253-1). + - `bigint` pro celá čísla libovolné délky. + - `string` pro řetězce. Řetězec může mít nula nebo více znaků. Neexistuje datový typ pro znak. + - `boolean` pro `true`/`false`. + - `null` pro neznámé hodnoty -- samostatný typ, který má jedinou hodnotu `null`. + - `undefined` pro nepřiřazené hodnoty -- samostatný typ, který má jedinou hodnotu `undefined`. + - `symbol` pro unikátní identifikátory. +- A jeden neprimitivní datový typ: + - `object` pro složitější datové struktury. -The `typeof` operator allows us to see which type is stored in a variable. +Operátor `typeof` nám umožní zjistit, jaký typ byl uložen do proměnné. -- Usually used as `typeof x`, but `typeof(x)` is also possible. -- Returns a string with the name of the type, like `"string"`. -- For `null` returns `"object"` -- this is an error in the language, it's not actually an object. +- Obvykle se používá jako `typeof x`, ale je možné i `typeof(x)`. +- Vrátí řetězec s názvem typu, např. `"string"`. +- Pro `null` vrátí `"object"` -- to je chyba jazyka, ve skutečnosti to není objekt. -In the next chapters, we'll concentrate on primitive values and once we're familiar with them, we'll move on to objects. +V dalších kapitolách se zaměříme na primitivní hodnoty. Až je budeme dobře znát, přejdeme k objektům. diff --git a/1-js/02-first-steps/06-alert-prompt-confirm/1-simple-page/solution.md b/1-js/02-first-steps/06-alert-prompt-confirm/1-simple-page/solution.md index 903ee7ff3..3fb06b6d6 100644 --- a/1-js/02-first-steps/06-alert-prompt-confirm/1-simple-page/solution.md +++ b/1-js/02-first-steps/06-alert-prompt-confirm/1-simple-page/solution.md @@ -1,11 +1,11 @@ -JavaScript-code: +Kód v JavaScriptu: ```js demo run -let name = prompt("What is your name?", ""); -alert(name); +let jméno = prompt("Jak se jmenuješ?", ""); +alert(jméno); ``` -The full page: +Celá stránka: ```html @@ -15,8 +15,8 @@ The full page: diff --git a/1-js/02-first-steps/06-alert-prompt-confirm/1-simple-page/task.md b/1-js/02-first-steps/06-alert-prompt-confirm/1-simple-page/task.md index a65a654e0..b8632a056 100644 --- a/1-js/02-first-steps/06-alert-prompt-confirm/1-simple-page/task.md +++ b/1-js/02-first-steps/06-alert-prompt-confirm/1-simple-page/task.md @@ -2,8 +2,8 @@ importance: 4 --- -# A simple page +# Jednoduchá stránka -Create a web-page that asks for a name and outputs it. +Vytvořte webovou stránku, která se zeptá na jméno a pak ho zobrazí. [demo] diff --git a/1-js/02-first-steps/06-alert-prompt-confirm/article.md b/1-js/02-first-steps/06-alert-prompt-confirm/article.md index ef0f333cb..21b53f56f 100644 --- a/1-js/02-first-steps/06-alert-prompt-confirm/article.md +++ b/1-js/02-first-steps/06-alert-prompt-confirm/article.md @@ -1,105 +1,105 @@ -# Interaction: alert, prompt, confirm +# Interakce: alert, prompt, confirm -As we'll be using the browser as our demo environment, let's see a couple of functions to interact with the user: `alert`, `prompt` and `confirm`. +Protože jako demonstrační prostředí budeme používat prohlížeč, podíváme se na několik funkcí sloužících k interakci s uživatelem: `alert`, `prompt` a `confirm`. ## alert -This one we've seen already. It shows a message and waits for the user to press "OK". +Tuto funkci jsme už viděli. Zobrazí zprávu a počká, až uživatel stiskne tlačítko „OK“. -For example: +Příklad: ```js run -alert("Hello"); +alert("Ahoj"); ``` -The mini-window with the message is called a *modal window*. The word "modal" means that the visitor can't interact with the rest of the page, press other buttons, etc, until they have dealt with the window. In this case -- until they press "OK". +Miniokno se zprávou se nazývá *modální okno*. Slovo „modální“ znamená, že uživatel nemůže komunikovat se zbytkem stránky, mačkat jiná tlačítka apod., dokud nevyhodnotí toto okno -- v tomto případě dokud nestiskne „OK“. ## prompt -The function `prompt` accepts two arguments: +Funkce `prompt` přijímá dva argumenty: ```js no-beautify -result = prompt(title, [default]); +výsledek = prompt(titulek, [default]); ``` -It shows a modal window with a text message, an input field for the visitor, and the buttons OK/Cancel. +Zobrazí modální okno s textovou zprávou, vstupní pole pro návštěvníka a tlačítka OK a Storno. -`title` -: The text to show the visitor. +`titulek` +: Text, který se má zobrazit návštěvníkovi. `default` -: An optional second parameter, the initial value for the input field. +: Volitelný druhý parametr, úvodní hodnota ve vstupním poli. -```smart header="The square brackets in syntax `[...]`" -The square brackets around `default` in the syntax above denote that the parameter is optional, not required. +```smart header="Hranaté závorky v syntaxi `[...]`" +Hranaté závorky okolo `default` ve výše uvedené syntaxi označují, že parametr je dobrovolný a není vyžadován. ``` -The visitor can type something in the prompt input field and press OK. Then we get that text in the `result`. Or they can cancel the input by pressing Cancel or hitting the `key:Esc` key, then we get `null` as the `result`. +Návštěvník může do vstupního pole něco napsat a stisknout OK. Pak získáme napsaný text jako `výsledek`. Nebo může zrušit vstup stisknutím tlačítka Storno nebo klávesy `key:Esc`. Pak jako `výsledek` obdržíme `null`. -The call to `prompt` returns the text from the input field or `null` if the input was canceled. +Volání `prompt` vrátí text ze vstupního pole nebo `null`, pokud byl vstup zrušen. -For instance: +Příklad: ```js run -let age = prompt('How old are you?', 100); +let věk = prompt('Kolik je ti let?', 100); -alert(`You are ${age} years old!`); // You are 100 years old! +alert(`Je ti ${věk} let!`); // Je ti 100 let! ``` -````warn header="In IE: always supply a `default`" -The second parameter is optional, but if we don't supply it, Internet Explorer will insert the text `"undefined"` into the prompt. +````warn header="Pro IE vždy uvádějte `default`" +Druhý parametr je nepovinný, ale jestliže ho neuvedeme, Internet Explorer vloží do dotazu text `"undefined"`. -Run this code in Internet Explorer to see: +Spusťte si v Internet Exploreru tento kód a uvidíte: ```js run let test = prompt("Test"); ``` -So, for prompts to look good in IE, we recommend always providing the second argument: +Aby dotazy vypadaly dobře i v IE, doporučujeme vždy uvádět i druhý argument: ```js run -let test = prompt("Test", ''); // <-- for IE +let test = prompt("Test", ''); // <-- pro IE ``` ```` ## confirm -The syntax: +Syntaxe: ```js -result = confirm(question); +výsledek = confirm(otázka); ``` -The function `confirm` shows a modal window with a `question` and two buttons: OK and Cancel. +Funkce `confirm` zobrazí modální okno s otázkou -- v našem případě obsaženou v promenné `otázka` -- a dvěma tlačítky: OK a Storno. -The result is `true` if OK is pressed and `false` otherwise. +Výsledek bude `true`, jestliže uživatel stiskne OK, jinak bude `false`. -For example: +Příklad: ```js run -let isBoss = confirm("Are you the boss?"); +let jeŠéf = confirm("Jsi šéf?"); -alert( isBoss ); // true if OK is pressed +alert( jeŠéf ); // pokud bylo stisknuto OK, tak true ``` -## Summary +## Shrnutí -We covered 3 browser-specific functions to interact with visitors: +Uvedli jsme tři funkce specifické pro prohlížeče, které umožňují interakci s návštěvníky: `alert` -: shows a message. +: Zobrazí zprávu. `prompt` -: shows a message asking the user to input text. It returns the text or, if Cancel button or `key:Esc` is clicked, `null`. +: Zobrazí zprávu, která požádá uživatele o zadání textu. Vrátí zadaný text nebo `null`, pokud uživatel stiskl tlačítko Storno nebo klávesu `key:Esc`. `confirm` -: shows a message and waits for the user to press "OK" or "Cancel". It returns `true` for OK and `false` for Cancel/`key:Esc`. +: Zobrazí zprávu a počká, než uživatel stiskne „OK“ nebo „Storno“. Vrátí `true`, pokud stiskl OK, nebo `false`, pokud stiskl Storno nebo klávesu `key:Esc`. -All these methods are modal: they pause script execution and don't allow the visitor to interact with the rest of the page until the window has been dismissed. +Všechny tyto metody jsou modální: pozastaví vykonávání skriptu a neumožní návštěvníkovi komunikovat se zbytkem stránky, dokud okno nezmizí. -There are two limitations shared by all the methods above: +Všechny uvedené metody mají dvě omezení: -1. The exact location of the modal window is determined by the browser. Usually, it's in the center. -2. The exact look of the window also depends on the browser. We can't modify it. +1. Poloha modálního okna je stanovena prohlížečem. Obvykle je uprostřed. +2. Vzhled okna závisí na prohlížeči. Nelze jej upravit. -That is the price for simplicity. There are other ways to show nicer windows and richer interaction with the visitor, but if "bells and whistles" do not matter much, these methods work just fine. +To je cena za jednoduchost. Existují jiné způsoby, kde můžete upravit vzhled oken a umožnit bohatší interakci s návštěvníkem, ale pokud nám na těchto věcech příliš nezáleží, tyto metody fungují dobře. \ No newline at end of file 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 329556141..57f4cd364 100644 --- a/1-js/02-first-steps/07-type-conversions/article.md +++ b/1-js/02-first-steps/07-type-conversions/article.md @@ -1,150 +1,149 @@ -# Type Conversions +# Typová konverze -Most of the time, operators and functions automatically convert the values given to them to the right type. +Operátory a funkce většinou automaticky převedou hodnoty, které jim byly zadány, na správný typ. -For example, `alert` automatically converts any value to a string to show it. Mathematical operations convert values to numbers. +Například `alert` automaticky převede libovolnou hodnotu na řetězec a ten zobrazí. Matematické operace převádějí hodnoty na čísla. -There are also cases when we need to explicitly convert a value to the expected type. +Existují však případy, v nichž musíme konverzi hodnoty na potřebný typ explicitně uvést. -```smart header="Not talking about objects yet" -In this chapter, we won't cover objects. For now, we'll just be talking about primitives. +```smart header="Zatím nehovoříme o objektech" +V této kapitole se ještě nebudeme zabývat objekty. Prozatím budeme hovořit jen o primitivních typech. -Later, after we learn about objects, in the chapter we'll see how objects fit in. +Až se později dozvíme něco o objektech, v kapitole uvidíme, jak do toho zapadají. ``` -## String Conversion +## Konverze na řetězec -String conversion happens when we need the string form of a value. +Konverze na řetězec se odehraje tehdy, když potřebujeme hodnotu ve formě řetězce. -For example, `alert(value)` does it to show the value. +Provádí ji například `alert(hodnota)`, aby mohla zobrazit hodnotu. -We can also call the `String(value)` function to convert a value to a string: +Můžeme také volat funkci `String(hodnota)`, která převede zadanou hodnotu na řetězec: ```js run -let value = true; -alert(typeof value); // boolean +let hodnota = true; +alert(typeof hodnota); // boolean *!* -value = String(value); // now value is a string "true" -alert(typeof value); // string +hodnota = String(hodnota); // hodnota je nyní řetězec "true" +alert(typeof hodnota); // string (řetězec) */!* ``` -String conversion is mostly obvious. A `false` becomes `"false"`, `null` becomes `"null"`, etc. +Konverze na řetězec je většinou zřejmá: `false` se převede na `"false"`, `null` se převede na `"null"`, atd. -## Numeric Conversion +## Konverze na číslo -Numeric conversion in mathematical functions and expressions happens automatically. +Konverze na číslo se automaticky odehrává v matematických funkcích a výrazech. -For example, when division `/` is applied to non-numbers: +Například když použijeme dělení `/` na něco jiného než čísla: ```js run -alert( "6" / "2" ); // 3, strings are converted to numbers +alert( "6" / "2" ); // 3, řetězce se konvertují na čísla ``` -We can use the `Number(value)` function to explicitly convert a `value` to a number: +Pro explicitní konverzi hodnoty `hodnota` na číslo můžeme použít funkci `Number(hodnota)`: ```js run -let str = "123"; -alert(typeof str); // string +let řtzc = "123"; +alert(typeof řtzc); // string (řetězec) -let num = Number(str); // becomes a number 123 +let čslo = Number(řtzc); // stane se z něj číslo 123 -alert(typeof num); // number +alert(typeof čslo); // number (číslo) ``` -Explicit conversion is usually required when we read a value from a string-based source like a text form but expect a number to be entered. +Explicitní konverze je obvykle potřebná, když načítáme hodnotu z řetězcového zdroje, například z textového formuláře, ale očekáváme zadání čísla. -If the string is not a valid number, the result of such a conversion is `NaN`. For instance: +Není-li v řetězci platné číslo, výsledkem konverze bude `NaN`. Například: ```js run -let age = Number("an arbitrary string instead of a number"); +let věk = Number("nějaký řetězec místo čísla"); -alert(age); // NaN, conversion failed +alert(věk); // NaN, konverze neuspěla ``` -Numeric conversion rules: +Pravidla pro konverzi na číslo: -| Value | Becomes... | -|-------|-------------| +| Hodnota | Převede se na... | +|---------|-------------------| |`undefined`|`NaN`| |`null`|`0`| -|true and false | `1` and `0` | -| `string` | Whitespaces (includes spaces, tabs `\t`, newlines `\n` etc.) from the start and end are removed. If the remaining string is empty, the result is `0`. Otherwise, the number is "read" from the string. An error gives `NaN`. | +|true a false | `1` a `0` | +| `řetězec` | Odstraní se bílé znaky (mezery, tabulátory `\t`, konce řádku `\n` atd.) ze začátku a konce. Je-li výsledný řetězec prázdný, výsledkem je `0`. Jinak se číslo „přečte“ z řetězce. Při chybě je vydáno `NaN`. | -Examples: +Příklady: ```js run alert( Number(" 123 ") ); // 123 -alert( Number("123z") ); // NaN (error reading a number at "z") +alert( Number("123z") ); // NaN (chyba při čtení čísla u znaku "z") alert( Number(true) ); // 1 alert( Number(false) ); // 0 ``` -Please note that `null` and `undefined` behave differently here: `null` becomes zero while `undefined` becomes `NaN`. +Všimněte si, že `null` a `undefined` se tady chovají rozdílně: `null` se převede na nulu, zatímco `undefined` se převede na `NaN`. -Most mathematical operators also perform such conversion, we'll see that in the next chapter. +Tuto konverzi provádí i většina matematických operátorů. Uvidíme to v následující kapitole. -## Boolean Conversion +## Konverze na boolean -Boolean conversion is the simplest one. +Konverze na boolean je nejjednodušší. -It happens in logical operations (later we'll meet condition tests and other similar things) but can also be performed explicitly with a call to `Boolean(value)`. +Odehrává se v logických operátorech (později se setkáme s testy platnosti podmínky a podobnými věcmi), ale můžeme ji provést i explicitně voláním `Boolean(hodnota)`. -The conversion rule: +Pravidla konverze: -- Values that are intuitively "empty", like `0`, an empty string, `null`, `undefined`, and `NaN`, become `false`. -- Other values become `true`. +- Hodnoty, které jsou intuitivně „prázdné“, tj. `0`, prázdný řetězec, `null`, `undefined` a `NaN`, se převedou na `false`. +- Ostatní hodnoty se převedou na `true`. -For instance: +Příklad: ```js run alert( Boolean(1) ); // true alert( Boolean(0) ); // false -alert( Boolean("hello") ); // true +alert( Boolean("ahoj") ); // true alert( Boolean("") ); // false ``` -````warn header="Please note: the string with zero `\"0\"` is `true`" -Some languages (namely PHP) treat `"0"` as `false`. But in JavaScript, a non-empty string is always `true`. +````warn header="Všimněte si: řetězec s nulou `\"0\"` se převede na `true`" +Některé jazyky (konkrétně PHP) zacházejí s řetězcem `"0"` jako s `false`, avšak v JavaScriptu je neprázdný řetězec vždy `true`. ```js run alert( Boolean("0") ); // true -alert( Boolean(" ") ); // spaces, also true (any non-empty string is true) +alert( Boolean(" ") ); // mezery, také true (každý neprázdný řetězec je true) ``` ```` -## Summary +## Shrnutí -The three most widely used type conversions are to string, to number, and to boolean. +Tři nejčastěji používané typové konverze jsou na řetězec, na číslo a na boolean. -**`String Conversion`** -- Occurs when we output something. Can be performed with `String(value)`. The conversion to string is usually obvious for primitive values. +**`Konverze na řetězec`** -- Nastává, když něco vypisujeme. Můžeme ji provést pomocí `String(hodnota)`. Konverze na řetězec je u primitivních typů obvykle zřejmá. -**`Numeric Conversion`** -- Occurs in math operations. Can be performed with `Number(value)`. +**`Konverze na číslo`** -- Nastává při matematických operacích. Můžeme ji provést pomocí `Number(hodnota)`. -The conversion follows the rules: +Konverze se řídí těmito pravidly: -| Value | Becomes... | -|-------|-------------| +| Hodnota | Převede se na... | +|---------|-------------------| |`undefined`|`NaN`| |`null`|`0`| |true / false | `1 / 0` | -| `string` | The string is read "as is", whitespaces (includes spaces, tabs `\t`, newlines `\n` etc.) from both sides are ignored. An empty string becomes `0`. An error gives `NaN`. | +| `řetězec` | Načte se „doslovně“, bílé znaky (mezery, tabulátory `\t`, konce řádku `\n` atd.) na obou stranách se ignorují. Z prázdného řetězce se stane `0`. Při chybě je vydáno `NaN`. | -**`Boolean Conversion`** -- Occurs in logical operations. Can be performed with `Boolean(value)`. +**`Konverze na boolean`** -- Nastává při logických operacích. Můžeme ji provést pomocí `Boolean(hodnota)`. -Follows the rules: +Řídí se těmito pravidly: -| Value | Becomes... | -|-------|-------------| +| Hodnota | Převede se na... | +|---------|-------------------| |`0`, `null`, `undefined`, `NaN`, `""` |`false`| -|any other value| `true` | +|jakákoli jiná hodnota| `true` | +Většinu těchto pravidel je snadné pochopit a zapamatovat si. Významné výjimky, v nichž lidé obvykle chybují, jsou: -Most of these rules are easy to understand and memorize. The notable exceptions where people usually make mistakes are: +- `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. -- `undefined` is `NaN` as a number, not `0`. -- `"0"` and space-only strings like `" "` are true as a boolean. - -Objects aren't covered here. We'll return to them later in the chapter that is devoted exclusively to objects after we learn more basic things about JavaScript. +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. diff --git a/1-js/02-first-steps/08-operators/1-increment-order/solution.md b/1-js/02-first-steps/08-operators/1-increment-order/solution.md index 8a44d798e..908de2919 100644 --- a/1-js/02-first-steps/08-operators/1-increment-order/solution.md +++ b/1-js/02-first-steps/08-operators/1-increment-order/solution.md @@ -1,5 +1,5 @@ -The answer is: +Odpověď zní: - `a = 2` - `b = 2` @@ -9,10 +9,10 @@ The answer is: ```js run no-beautify let a = 1, b = 1; -alert( ++a ); // 2, prefix form returns the new value -alert( b++ ); // 1, postfix form returns the old value +alert( ++a ); // 2, prefixová notace vrátí novou hodnotu +alert( b++ ); // 1, postfixová notace vrátí starou hodnotu -alert( a ); // 2, incremented once -alert( b ); // 2, incremented once +alert( a ); // 2, zvýšeno jedenkrát +alert( b ); // 2, zvýšeno jedenkrát ``` diff --git a/1-js/02-first-steps/08-operators/1-increment-order/task.md b/1-js/02-first-steps/08-operators/1-increment-order/task.md index 7db092389..aebe84b1a 100644 --- a/1-js/02-first-steps/08-operators/1-increment-order/task.md +++ b/1-js/02-first-steps/08-operators/1-increment-order/task.md @@ -2,9 +2,9 @@ importance: 5 --- -# The postfix and prefix forms +# Postfixová a prefixová notace -What are the final values of all variables `a`, `b`, `c` and `d` after the code below? +Jaké jsou konečné hodnoty všech proměnných `a`, `b`, `c` a `d` po provedení uvedeného kódu? ```js let a = 1, b = 1; diff --git a/1-js/02-first-steps/08-operators/2-assignment-result/solution.md b/1-js/02-first-steps/08-operators/2-assignment-result/solution.md index e3113b4cd..baa4d477d 100644 --- a/1-js/02-first-steps/08-operators/2-assignment-result/solution.md +++ b/1-js/02-first-steps/08-operators/2-assignment-result/solution.md @@ -1,5 +1,5 @@ -The answer is: +Odpověď zní: -- `a = 4` (multiplied by 2) -- `x = 5` (calculated as 1 + 4) +- `a = 4` (vynásobí se 2) +- `x = 5` (vypočítá se jako 1 + 4) diff --git a/1-js/02-first-steps/08-operators/2-assignment-result/task.md b/1-js/02-first-steps/08-operators/2-assignment-result/task.md index 5345c9485..42438ec9d 100644 --- a/1-js/02-first-steps/08-operators/2-assignment-result/task.md +++ b/1-js/02-first-steps/08-operators/2-assignment-result/task.md @@ -2,9 +2,9 @@ importance: 3 --- -# Assignment result +# Výsledek přiřazení -What are the values of `a` and `x` after the code below? +Jaké jsou hodnoty proměnných `a` a `x` po provedení uvedeného kódu? ```js let a = 2; diff --git a/1-js/02-first-steps/08-operators/3-primitive-conversions-questions/solution.md b/1-js/02-first-steps/08-operators/3-primitive-conversions-questions/solution.md index 7370b66af..8ade3f3d7 100644 --- a/1-js/02-first-steps/08-operators/3-primitive-conversions-questions/solution.md +++ b/1-js/02-first-steps/08-operators/3-primitive-conversions-questions/solution.md @@ -16,10 +16,10 @@ undefined + 1 = NaN // (6) " \t \n" - 2 = -2 // (7) ``` -1. The addition with a string `"" + 1` converts `1` to a string: `"" + 1 = "1"`, and then we have `"1" + 0`, the same rule is applied. -2. The subtraction `-` (like most math operations) only works with numbers, it converts an empty string `""` to `0`. -3. The addition with a string appends the number `5` to the string. -4. The subtraction always converts to numbers, so it makes `" -9 "` a number `-9` (ignoring spaces around it). -5. `null` becomes `0` after the numeric conversion. -6. `undefined` becomes `NaN` after the numeric conversion. -7. Space characters are trimmed off string start and end when a string is converted to a number. Here the whole string consists of space characters, such as `\t`, `\n` and a "regular" space between them. So, similarly to an empty string, it becomes `0`. +1. Sčítání s řetězcem `"" + 1` převede `1` na řetězec: `"" + 1 = "1"` a pak budeme mít `"1" + 0`, použije se stejné pravidlo. +2. Odčítání `-` (stejně jako většina matematických operací) pracuje jen s čísly, takže převede prázdný řetězec `""` na `0`. +3. Sčítání s řetězcem připojí k řetězci číslo `5`. +4. Odčítání vždy převádí operandy na čísla, takže vyrobí z `" -9 "` číslo `-9` (mezery okolo něj se ignorují). +5. Z `null` se po konverzi na číslo stane `0`. +6. Z `undefined` se po konverzi na číslo stane `NaN`. +7. Když se řetězec převádí na číslo, mezerové znaky se z jeho začátku a konce odříznou. V tomto případě se celý řetězec skládá z mezerových znaků, konkrétně `\t`, `\n` a „obyčejné“ mezery mezi nimi. Stejně jako prázdný řetězec se tedy převede na `0`. diff --git a/1-js/02-first-steps/08-operators/3-primitive-conversions-questions/task.md b/1-js/02-first-steps/08-operators/3-primitive-conversions-questions/task.md index 068420c7d..63c3c09f5 100644 --- a/1-js/02-first-steps/08-operators/3-primitive-conversions-questions/task.md +++ b/1-js/02-first-steps/08-operators/3-primitive-conversions-questions/task.md @@ -2,9 +2,9 @@ importance: 5 --- -# Type conversions +# Typová konverze -What are results of these expressions? +Jaké jsou výsledky následujících výrazů? ```js no-beautify "" + 1 + 0 @@ -23,4 +23,4 @@ undefined + 1 " \t \n" - 2 ``` -Think well, write down and then compare with the answer. +Dobře si to promyslete, zapište si výsledky a pak je porovnejte s odpovědí. diff --git a/1-js/02-first-steps/08-operators/4-fix-prompt/solution.md b/1-js/02-first-steps/08-operators/4-fix-prompt/solution.md index 209a0702c..59c046435 100644 --- a/1-js/02-first-steps/08-operators/4-fix-prompt/solution.md +++ b/1-js/02-first-steps/08-operators/4-fix-prompt/solution.md @@ -1,32 +1,32 @@ -The reason is that prompt returns user input as a string. +Důvodem je, že funkce `prompt` vrací uživatelský vstup jako řetězec. -So variables have values `"1"` and `"2"` respectively. +V proměnných jsou tedy hodnoty po řadě `"1"` a `"2"`. ```js run -let a = "1"; // prompt("First number?", 1); -let b = "2"; // prompt("Second number?", 2); +let a = "1"; // prompt("První číslo?", 1); +let b = "2"; // prompt("Druhé číslo?", 2); alert(a + b); // 12 ``` -What we should do is to convert strings to numbers before `+`. For example, using `Number()` or prepending them with `+`. +To, co bychom měli udělat, je před sečtením převést řetězce na čísla. Například použít `Number()` nebo před ně uvést `+`. -For example, right before `prompt`: +Například rovnou před `prompt`: ```js run -let a = +prompt("First number?", 1); -let b = +prompt("Second number?", 2); +let a = +prompt("První číslo?", 1); +let b = +prompt("Druhé číslo?", 2); alert(a + b); // 3 ``` -Or in the `alert`: +Nebo až při volání `alert`: ```js run -let a = prompt("First number?", 1); -let b = prompt("Second number?", 2); +let a = prompt("První číslo?", 1); +let b = prompt("Druhé číslo?", 2); alert(+a + +b); // 3 ``` -Using both unary and binary `+` in the latest code. Looks funny, doesn't it? +V posledním kódu používáme současně unární i binární `+`. Vypadá to legračně, že? diff --git a/1-js/02-first-steps/08-operators/4-fix-prompt/task.md b/1-js/02-first-steps/08-operators/4-fix-prompt/task.md index b3ea4a3a3..a298b2eef 100644 --- a/1-js/02-first-steps/08-operators/4-fix-prompt/task.md +++ b/1-js/02-first-steps/08-operators/4-fix-prompt/task.md @@ -2,17 +2,17 @@ importance: 5 --- -# Fix the addition +# Opravte sčítání -Here's a code that asks the user for two numbers and shows their sum. +Následující kód se zeptá uživatele na dvě čísla a zobrazí jejich součet. -It works incorrectly. The output in the example below is `12` (for default prompt values). +Nefunguje však správně. Výstup v níže uvedeném příkladu (pro defaultní hodnoty v dotazech) je `12`. -Why? Fix it. The result should be `3`. +Proč? Opravte jej. Výsledek by měl být `3`. ```js run -let a = prompt("First number?", 1); -let b = prompt("Second number?", 2); +let a = prompt("První číslo?", 1); +let b = prompt("Druhé číslo?", 2); alert(a + b); // 12 ``` diff --git a/1-js/02-first-steps/08-operators/article.md b/1-js/02-first-steps/08-operators/article.md index d52c37a17..c600e73fa 100644 --- a/1-js/02-first-steps/08-operators/article.md +++ b/1-js/02-first-steps/08-operators/article.md @@ -1,15 +1,15 @@ -# Basic operators, maths +# Základní operátory, matematika -We know many operators from school. They are things like addition `+`, multiplication `*`, subtraction `-`, and so on. +Mnoho operátorů známe ze školy. Jsou mezi nimi sčítání `+`, násobení `*`, odčítání `-` a podobně. -In this chapter, we’ll start with simple operators, then concentrate on JavaScript-specific aspects, not covered by school arithmetic. +V této kapitole začneme jednoduchými operátory a pak se budeme soustředit na prvky specifické pro JavaScript, které školní aritmetika nepokrývá. -## Terms: "unary", "binary", "operand" +## Pojmy: „unární“, „binární“, „operand“ -Before we move on, let's grasp some common terminology. +Než budeme pokračovat, ujasníme si základní terminologii. -- *An operand* -- is what operators are applied to. For instance, in the multiplication of `5 * 2` there are two operands: the left operand is `5` and the right operand is `2`. Sometimes, people call these "arguments" instead of "operands". -- An operator is *unary* if it has a single operand. For example, the unary negation `-` reverses the sign of a number: +- *Operand* je to, na co se aplikují operátory. Například při násobení `5 * 2` máme dva operandy: levý operand je `5` a pravý operand je `2`. Někdy se jim místo „operandy“ říká „argumenty“. +- Operátor je *unární*, jestliže má jediný operand. Například unární negace `-`, která obrací znaménko čísla: ```js run let x = 1; @@ -17,51 +17,51 @@ Before we move on, let's grasp some common terminology. *!* x = -x; */!* - alert( x ); // -1, unary negation was applied + alert( x ); // -1, byla aplikována unární negace ``` -- An operator is *binary* if it has two operands. The same minus exists in binary form as well: +- Operátor je *binární*, jestliže má dva operandy. Stejné minus existuje i v binární podobě: ```js run no-beautify let x = 1, y = 3; - alert( y - x ); // 2, binary minus subtracts values + alert( y - x ); // 2, binární minus odečítá hodnoty ``` - Formally, in the examples above we have two different operators that share the same symbol: the negation operator, a unary operator that reverses the sign, and the subtraction operator, a binary operator that subtracts one number from another. +Formálně mají výše uvedené příklady dva různé operátory, které mají stejný symbol: operátor negace, což je unární operátor měnící znaménko, a operátor odčítání, což je binární operátor odečítající jedno číslo od druhého. -## Maths +## Matematika -The following math operations are supported: +JavaScript podporuje následující matematické operace: -- Addition `+`, -- Subtraction `-`, -- Multiplication `*`, -- Division `/`, -- Remainder `%`, -- Exponentiation `**`. +- sčítání `+`, +- odčítání `-`, +- násobení `*`, +- dělení `/`, +- zbytek po dělení `%`, +- umocňování `**`. -The first four are straightforward, while `%` and `**` need a few words about them. +První čtyři jsou jasné, `%` a `**` potřebují trochu vysvětlení. -### Remainder % +### Zbytek po dělení % -The remainder operator `%`, despite its appearance, is not related to percents. +Operátor zbytku po dělení `%` nemá navzdory svému symbolu nic společného s procenty. -The result of `a % b` is the [remainder](https://en.wikipedia.org/wiki/Remainder) of the integer division of `a` by `b`. +Výsledkem `a % b` je [zbytek](https://cs.wikipedia.org/wiki/Zbytek_po_dělení) při celočíselném dělení čísla `a` číslem `b`. -For instance: +Příklad: ```js run -alert( 5 % 2 ); // 1, the remainder of 5 divided by 2 -alert( 8 % 3 ); // 2, the remainder of 8 divided by 3 -alert( 8 % 4 ); // 0, the remainder of 8 divided by 4 +alert( 5 % 2 ); // 1, zbytek po dělení 5 děleno 2 +alert( 8 % 3 ); // 2, zbytek po dělení 8 děleno 3 +alert( 8 % 4 ); // 0, zbytek po dělení 8 děleno 4 ``` -### Exponentiation ** +### Umocňování ** -The exponentiation operator `a ** b` raises `a` to the power of `b`. +Operátor umocňování `a ** b` umocní `a` na `b`-tou. -In school maths, we write that as ab. +Ve školní matematice to zapisujeme ab. -For instance: +Příklad: ```js run alert( 2 ** 2 ); // 2² = 4 @@ -69,72 +69,73 @@ alert( 2 ** 3 ); // 2³ = 8 alert( 2 ** 4 ); // 2⁴ = 16 ``` -Just like in maths, the exponentiation operator is defined for non-integer numbers as well. +Stejně jako v matematice je operátor umocňování definován i pro necelá čísla. -For example, a square root is an exponentiation by ½: +Například odmocnina je umocnění na ½: ```js run -alert( 4 ** (1/2) ); // 2 (power of 1/2 is the same as a square root) -alert( 8 ** (1/3) ); // 2 (power of 1/3 is the same as a cubic root) +alert( 4 ** (1/2) ); // 2 (umocnění na 1/2 je totéž jako druhá odmocnina) +alert( 8 ** (1/3) ); // 2 (umocnění na 1/3 je totéž jako třetí odmocnina) ``` -## String concatenation with binary + +## Spojení řetězců pomocí binárního + -Let's meet the features of JavaScript operators that are beyond school arithmetics. +Přejděme nyní k vlastnostem JavaScriptu, které jsou za hranicemi školní aritmetiky. -Usually, the plus operator `+` sums numbers. +Operátor plus `+` obvykle sčítá čísla. -But, if the binary `+` is applied to strings, it merges (concatenates) them: +Pokud je však binární `+` použito na řetězce, spojí je (zřetězí): ```js -let s = "my" + "string"; -alert(s); // mystring +let s = "můj" + "řetězec"; +alert(s); // můjřetězec ``` -Note that if any of the operands is a string, then the other one is converted to a string too. +Všimněte si, že jestliže je kterýkoli z operandů řetězec, bude na řetězec převeden i druhý operand. -For example: +Příklad: ```js run alert( '1' + 2 ); // "12" alert( 2 + '1' ); // "21" ``` -See, it doesn't matter whether the first operand is a string or the second one. +Vidíme, že nezáleží na tom, zda je řetězec první nebo druhý operand. -Here's a more complex example: +Složitější příklad: ```js run -alert(2 + 2 + '1' ); // "41" and not "221" +alert(2 + 2 + '1' ); // "41", ne "221" ``` -Here, operators work one after another. The first `+` sums two numbers, so it returns `4`, then the next `+` adds the string `1` to it, so it's like `4 + '1' = '41'`. +Tady operátory fungují jeden za druhým. První `+` sečte dvě čísla, takže vrátí `4`, pak druhé `+` k němu přidá řetězec `1`, takže je to jako `4 + '1' = 41`. ```js run -alert('1' + 2 + 2); // "122" and not "14" +alert('1' + 2 + 2); // "122" a ne "14" ``` -Here, the first operand is a string, the compiler treats the other two operands as strings too. The `2` gets concatenated to `'1'`, so it's like `'1' + 2 = "12"` and `"12" + 2 = "122"`. -The binary `+` is the only operator that supports strings in such a way. Other arithmetic operators work only with numbers and always convert their operands to numbers. +První operand je zde řetězec, takže kompilátor zachází i s ostatními dvěma operandy jako s řetězci. `2` se zřetězí s `'1'`, takže to bude jako `'1' + 2 = "12"` a `"12" + 2 = "122"`. -Here's the demo for subtraction and division: +Binární `+` je jediný operátor, který takovýmto způsobem podporuje řetězce. Ostatní aritmetické operátory fungují jen s čísly a své operandy převádějí vždy na čísla. + +Ukázka odčítání a dělení: ```js run -alert( 6 - '2' ); // 4, converts '2' to a number -alert( '6' / '2' ); // 3, converts both operands to numbers +alert( 6 - '2' ); // 4, převede '2' na číslo +alert( '6' / '2' ); // 3, převede oba operandy na čísla ``` -## Numeric conversion, unary + +## Konverze na číslo a unární + -The plus `+` exists in two forms: the binary form that we used above and the unary form. +Plus `+` existuje ve dvou podobách: binární, kterou jsme používali výše, a unární. -The unary plus or, in other words, the plus operator `+` applied to a single value, doesn't do anything to numbers. But if the operand is not a number, the unary plus converts it into a number. +Unární plus, jinými slovy operátor `+` aplikovaný na jedinou hodnotu, neprovádí s čísly nic. Jestliže však operand není číslo, unární plus jej převede na číslo. -For example: +Příklad: ```js run -// No effect on numbers +// Žádný efekt na čísla let x = 1; alert( +x ); // 1 @@ -142,77 +143,77 @@ let y = -2; alert( +y ); // -2 *!* -// Converts non-numbers +// Převádí hodnoty, které nejsou čísla alert( +true ); // 1 alert( +"" ); // 0 */!* ``` -It actually does the same thing as `Number(...)`, but is shorter. +Dělá tedy ve skutečnosti totéž jako `Number(...)`, ale je kratší. -The need to convert strings to numbers arises very often. For example, if we are getting values from HTML form fields, they are usually strings. What if we want to sum them? +Potřeba převádět řetězce na čísla se objevuje velmi často. Například jestliže načítáme hodnoty z polí HTML formulářů, jsou to obvykle řetězce. Co když je chceme sečíst? -The binary plus would add them as strings: +Binární plus by je spojilo jako řetězce: ```js run -let apples = "2"; -let oranges = "3"; +let jablka = "2"; +let pomeranče = "3"; -alert( apples + oranges ); // "23", the binary plus concatenates strings +alert( jablka + pomeranče ); // "23", binární plus spojuje řetězce ``` -If we want to treat them as numbers, we need to convert and then sum them: +Pokud s nimi chceme zacházet jako s čísly, musíme je napřed konvertovat a teprve pak sečíst: ```js run -let apples = "2"; -let oranges = "3"; +let jablka = "2"; +let pomeranče = "3"; *!* -// both values converted to numbers before the binary plus -alert( +apples + +oranges ); // 5 +// obě hodnoty převedeme na čísla před binárním plus +alert( +jablka + +pomeranče ); // 5 */!* -// the longer variant -// alert( Number(apples) + Number(oranges) ); // 5 +// delší varianta +// alert( Number(jablka) + Number(pomeranče) ); // 5 ``` -From a mathematician's standpoint, the abundance of pluses may seem strange. But from a programmer's standpoint, there's nothing special: unary pluses are applied first, they convert strings to numbers, and then the binary plus sums them up. +Z pohledu matematika může přemíra plusů vypadat podivně, ale z pohledu programátora na tom nic zvláštního není: nejprve se aplikují unární plusy, které převedou řetězce na čísla, a pak je binární plus sečte. -Why are unary pluses applied to values before the binary ones? As we're going to see, that's because of their *higher precedence*. +Proč se unární plusy aplikují na hodnoty dříve než binární? Jak uvidíme, je to důsledkem jejich *vyšší priority*. -## Operator precedence +## Priorita operátorů -If an expression has more than one operator, the execution order is defined by their *precedence*, or, in other words, the default priority order of operators. +Obsahuje-li výraz více než jeden operátor, je pořadí jejich výkonu definováno jejich *prioritou*, nebo jinými slovy standardním pořadím operátorů. -From school, we all know that the multiplication in the expression `1 + 2 * 2` should be calculated before the addition. That's exactly the precedence thing. The multiplication is said to have *a higher precedence* than the addition. +Ze školy jistě všichni víme, že ve výrazu `1 + 2 * 2` by násobení mělo být vyhodnoceno před sčítáním. To je přesně otázkou priority. Říkáme, že násobení má *vyšší prioritu* než sčítání. -Parentheses override any precedence, so if we're not satisfied with the default order, we can use them to change it. For example, write `(1 + 2) * 2`. +Závorky mají přednost před veškerou prioritou, takže nejsme-li spokojeni se standardním pořadím, můžeme je s jejich pomocí změnit. Například zapíšeme `(1 + 2) * 2`. -There are many operators in JavaScript. Every operator has a corresponding precedence number. The one with the larger number executes first. If the precedence is the same, the execution order is from left to right. +JavaScript obsahuje mnoho operátorů. Každému z nich odpovídá hodnota jeho priority. Dříve se vykoná ten, jehož priorita je vyšší. Je-li priorita více operátorů stejná, vykonávají se v pořadí zleva doprava. -Here's an extract from the [precedence table](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence) (you don't need to remember this, but note that unary operators are higher than corresponding binary ones): +Následuje výtažek z [tabulky priorit](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence) (nemusíte si ji celou pamatovat, ale všimněte si, že unární operátory mají vyšší prioritu než odpovídající binární): -| Precedence | Name | Sign | -|------------|------|------| +| Priorita | Název | Znak | +|----------|-------|------| | ... | ... | ... | -| 14 | unary plus | `+` | -| 14 | unary negation | `-` | -| 13 | exponentiation | `**` | -| 12 | multiplication | `*` | -| 12 | division | `/` | -| 11 | addition | `+` | -| 11 | subtraction | `-` | +| 14 | unární plus | `+` | +| 14 | unární negace | `-` | +| 13 | umocňování | `**` | +| 12 | násobení | `*` | +| 12 | dělení | `/` | +| 11 | sčítání | `+` | +| 11 | odčítání | `-` | | ... | ... | ... | -| 2 | assignment | `=` | +| 2 | přiřazení | `=` | | ... | ... | ... | -As we can see, the "unary plus" has a priority of `14` which is higher than the `11` of "addition" (binary plus). That's why, in the expression `"+apples + +oranges"`, unary pluses work before the addition. +Jak vidíme, „unární plus“ má prioritu `14`, která je vyšší než priorita `11` „sčítání“ (binární plus). To je důvod, proč se ve výrazu `"+jablka + +pomeranče"` unární plusy vyhodnotí před sčítáním. -## Assignment +## Přiřazení -Let's note that an assignment `=` is also an operator. It is listed in the precedence table with the very low priority of `2`. +Všimněte si, že přiřazení `=` je také operátor. V tabulce priorit je uveden s velmi nízkou prioritou `2`. -That's why, when we assign a variable, like `x = 2 * 2 + 1`, the calculations are done first and then the `=` is evaluated, storing the result in `x`. +To je důvod, proč při přiřazení proměnné, např. `x = 2 * 2 + 1`, se nejprve provedou výpočty a až potom se vyhodnotí `=`, které uloží výsledek do `x`. ```js let x = 2 * 2 + 1; @@ -220,15 +221,15 @@ let x = 2 * 2 + 1; alert( x ); // 5 ``` -### Assignment = returns a value +### Přiřazení = vrátí hodnotu -The fact of `=` being an operator, not a "magical" language construct has an interesting implication. +Skutečnost, že `=` je operátor a ne nějaký „magický“ jazykový konstrukt, má zajímavý důsledek. -All operators in JavaScript return a value. That's obvious for `+` and `-`, but also true for `=`. +Všechny operátory v JavaScriptu vracejí nějakou hodnotu. Pro `+` a `-` je to samozřejmé, ale platí to i pro `=`. -The call `x = value` writes the `value` into `x` *and then returns it*. +Volání `x = hodnota` zapíše hodnotu `hodnota` do `x` *a pak ji vrátí*. -Here's a demo that uses an assignment as part of a more complex expression: +Následuje ukázka, v níž je přiřazení využito jako součást složitějšího výrazu: ```js run let a = 1; @@ -242,15 +243,15 @@ alert( a ); // 3 alert( c ); // 0 ``` -In the example above, the result of expression `(a = b + 1)` is the value which was assigned to `a` (that is `3`). It is then used for further evaluations. +V uvedeném příkladu je výsledkem výrazu `(a = b + 1)` hodnota, která je přiřazena do `a` (což je `3`). Ta se pak použije pro další výpočty. -Funny code, isn't it? We should understand how it works, because sometimes we see it in JavaScript libraries. +Legrační kód, že? Měli bychom porozumět, jak funguje, protože v knihovnách JavaScriptu bývá občas k vidění. -Although, please don't write the code like that. Such tricks definitely don't make code clearer or readable. +Přesto vás prosíme, abyste takový kód nepsali. Takové triky zcela jistě nepřispívají k jeho jasnosti a čitelnosti. -### Chaining assignments +### Zřetězení přiřazení -Another interesting feature is the ability to chain assignments: +Další zajímavá vlastnost je možnost zřetězit přiřazení za sebou: ```js run let a, b, c; @@ -264,22 +265,22 @@ alert( b ); // 4 alert( c ); // 4 ``` -Chained assignments evaluate from right to left. First, the rightmost expression `2 + 2` is evaluated and then assigned to the variables on the left: `c`, `b` and `a`. At the end, all the variables share a single value. +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. -Once again, for the purposes of readability it's better to split such code into few lines: +Opět je pro účely čitelnosti lepší rozdělit takový kód do více řádků: ```js c = 2 + 2; b = c; a = c; ``` -That's easier to read, especially when eye-scanning the code fast. +Snadněji se to čte, zejména když kód rychle projíždíte očima. -## Modify-in-place +## Modifikace na místě -We often need to apply an operator to a variable and store the new result in that same variable. +Často potřebujeme aplikovat operátor na nějakou proměnnou a uložit nový výsledek do této proměnné. -For example: +Příklad: ```js let n = 2; @@ -287,194 +288,194 @@ n = n + 5; n = n * 2; ``` -This notation can be shortened using the operators `+=` and `*=`: +Tento zápis lze zkrátit pomocí operátorů `+=` a `*=`: ```js run let n = 2; -n += 5; // now n = 7 (same as n = n + 5) -n *= 2; // now n = 14 (same as n = n * 2) +n += 5; // nyní n = 7 (totéž jako n = n + 5) +n *= 2; // nyní n = 14 (totéž jako n = n * 2) alert( n ); // 14 ``` -Short "modify-and-assign" operators exist for all arithmetical and bitwise operators: `/=`, `-=`, etc. +Takové „modifikační“ operátory existují pro všechny aritmetické a bitové operátory: `/=`, `-=`, apod. -Such operators have the same precedence as a normal assignment, so they run after most other calculations: +Tyto operátory mají stejnou prioritu jako běžné přiřazení, takže se provedou až po většině ostatních výpočtů: ```js run let n = 2; -n *= 3 + 5; // right part evaluated first, same as n *= 8 +n *= 3 + 5; // napřed se provede část vpravo, totéž jako n *= 8 alert( n ); // 16 ``` -## Increment/decrement +## Inkrementace a dekrementace -Increasing or decreasing a number by one is among the most common numerical operations. +Jednou z nejběžnějších číselných operací je zvýšení nebo snížení čísla o 1 (inkrementace, dekrementace). -So, there are special operators for it: +Proto pro ně existují speciální operátory: -- **Increment** `++` increases a variable by 1: +- **Inkrementace** `++` zvýší proměnnou o 1: ```js run no-beautify - let counter = 2; - counter++; // works the same as counter = counter + 1, but is shorter - alert( counter ); // 3 + let čítač = 2; + čítač++; // funguje stejně jako čítač = čítač + 1, ale je to kratší + alert( čítač ); // 3 ``` -- **Decrement** `--` decreases a variable by 1: +- **Dekrementace** `--` sníží proměnnou o 1: ```js run no-beautify - let counter = 2; - counter--; // works the same as counter = counter - 1, but is shorter - alert( counter ); // 1 + let čítač = 2; + čítač--; // funguje stejně jako čítač = čítač - 1, ale je to kratší + alert( čítač ); // 1 ``` ```warn -Increment/decrement can only be applied to variables. Trying to use it on a value like `5++` will give an error. +Inkrementaci a dekrementaci lze aplikovat pouze na proměnné. Pokus použít ji na hodnotu, např. `5++`, vyvolá chybu. ``` -The operators `++` and `--` can be placed either before or after a variable. +Operátory `++` a `--` lze umístit před i za proměnnou. -- When the operator goes after the variable, it is in "postfix form": `counter++`. -- The "prefix form" is when the operator goes before the variable: `++counter`. +- Je-li operátor umístěn za proměnnou, nazývá se to „postfixová notace“: `čítač++`. +- „Prefixová notace“ je umístění operátoru před proměnnou: `++čítač`. -Both of these statements do the same thing: increase `counter` by `1`. +Oba tyto příkazy vykonají totéž: zvýší `čítač` o `1`. -Is there any difference? Yes, but we can only see it if we use the returned value of `++/--`. +Je v nich tedy nějaký rozdíl? Ano, ale uvidíme ho jen tehdy, když použijeme hodnotu, kterou operátor `++/--` vrátí. -Let's clarify. As we know, all operators return a value. Increment/decrement is no exception. The prefix form returns the new value while the postfix form returns the old value (prior to increment/decrement). +Ujasněme si to. Jak víme, všechny operátory vracejí nějakou hodnotu. Inkrementace a dekrementace nejsou výjimkou. Prefixová notace vrací novou hodnotu, zatímco postfixová notace vrací starou hodnotu (tu před zvýšením nebo snížením). -To see the difference, here's an example: +Abychom viděli rozdíl, uvedeme příklad: ```js run -let counter = 1; -let a = ++counter; // (*) +let čítač = 1; +let a = ++čítač; // (*) alert(a); // *!*2*/!* ``` -In the line `(*)`, the *prefix* form `++counter` increments `counter` and returns the new value, `2`. So, the `alert` shows `2`. +Na řádku `(*)` *prefixová* notace `++čítač` zvýšila `čítač` a vrátila novou hodnotu, `2`. Proto `alert` zobrazila `2`. -Now, let's use the postfix form: +Nyní použijeme postfixovou notaci: ```js run -let counter = 1; -let a = counter++; // (*) changed ++counter to counter++ +let čítač = 1; +let a = čítač++; // (*) změnili jsme ++čítač na čítač++ alert(a); // *!*1*/!* ``` -In the line `(*)`, the *postfix* form `counter++` also increments `counter` but returns the *old* value (prior to increment). So, the `alert` shows `1`. +Na řádku `(*)` *postfixová* notace `čítač++` rovněž zvýšila `čítač`, ale vrátila *starou* hodnotu (tu před zvýšením). Proto `alert` zobrazil `1`. -To summarize: +Shrneme to: -- If the result of increment/decrement is not used, there is no difference in which form to use: +- Pokud výsledek zvýšení nebo snížení nepoužijeme, není rozdíl v tom, kterou notaci použijeme: ```js run - let counter = 0; - counter++; - ++counter; - alert( counter ); // 2, the lines above did the same + let čítač = 0; + čítač++; + ++čítač; + alert( čítač ); // 2, oba výše uvedené řádky dělají totéž ``` -- If we'd like to increase a value *and* immediately use the result of the operator, we need the prefix form: +- Pokud chceme zvýšit hodnotu *a* výsledek operátoru ihned použít, potřebujeme prefixovou notaci: ```js run - let counter = 0; - alert( ++counter ); // 1 + let čítač = 0; + alert( ++čítač ); // 1 ``` -- If we'd like to increment a value but use its previous value, we need the postfix form: +- Pokud chceme zvýšit hodnotu, ale použít předchozí hodnotu, potřebujeme postfixovou notaci: ```js run - let counter = 0; - alert( counter++ ); // 0 + let čítač = 0; + alert( čítač++ ); // 0 ``` -````smart header="Increment/decrement among other operators" -The operators `++/--` can be used inside expressions as well. Their precedence is higher than most other arithmetical operations. +````smart header="Inkrementace a dekrementace mezi jinými operátory" +Operátory `++/--` je možné použít i uvnitř výrazů. Jejich priorita je vyšší než priorita většiny ostatních aritmetických operací. -For instance: +Příklad: ```js run -let counter = 1; -alert( 2 * ++counter ); // 4 +let čítač = 1; +alert( 2 * ++čítač ); // 4 ``` -Compare with: +Porovnejte si to s: ```js run -let counter = 1; -alert( 2 * counter++ ); // 2, because counter++ returns the "old" value +let čítač = 1; +alert( 2 * čítač++ ); // 2, protože čítač++ vrací „starou“ hodnotu ``` -Though technically okay, such notation usually makes code less readable. One line does multiple things -- not good. +Ačkoli je to technicky v pořádku, takový zápis obvykle snižuje čitelnost kódu. Jeden řádek provádí více věcí, a to není dobré. -While reading code, a fast "vertical" eye-scan can easily miss something like `counter++` and it won't be obvious that the variable increased. +Když čteme kód, při rychlém „svislém“ projíždění očima můžeme snadno přehlédnout něco jako `čítač++` a nevšimneme si, že se proměnná zvýšila. -We advise a style of "one line -- one action": +Doporučujeme psát stylem „jeden řádek -- jedna akce“: ```js run -let counter = 1; -alert( 2 * counter ); -counter++; +let čítač = 1; +alert( 2 * čítač ); +čítač++; ``` ```` -## Bitwise operators +## Bitové operátory -Bitwise operators treat arguments as 32-bit integer numbers and work on the level of their binary representation. +Bitové operátory zacházejí s argumenty jako s 32-bitovými celými čísly a pracují na úrovni jejich binární reprezentace. -These operators are not JavaScript-specific. They are supported in most programming languages. +Tyto operátory nejsou specifické pro JavaScript. Podporuje je většina programovacích jazyků. -The list of operators: +Seznam operátorů: - AND ( `&` ) - OR ( `|` ) - XOR ( `^` ) - NOT ( `~` ) -- LEFT SHIFT ( `<<` ) -- RIGHT SHIFT ( `>>` ) -- ZERO-FILL RIGHT SHIFT ( `>>>` ) +- LEFT SHIFT (posun doleva) ( `<<` ) +- RIGHT SHIFT (posun doprava) ( `>>` ) +- ZERO-FILL RIGHT SHIFT (posun doprava s doplněním nul) ( `>>>` ) -These operators are used very rarely, when we need to fiddle with numbers on the very lowest (bitwise) level. We won't need these operators any time soon, as web development has little use of them, but in some special areas, such as cryptography, they are useful. You can read the [Bitwise Operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#bitwise_operators) chapter on MDN when a need arises. +Tyto operátory se používají jen velmi zřídka, když potřebujeme pracovat s čísly na naprosto nejnižší (bitové) úrovni. Nebudeme je v dohledné době potřebovat, jelikož při vývoji webů se využívají jen málokdy, ale jsou užitečné v některých speciálních oblastech, například v kryptografii. Až je budete potřebovat, můžete si o nich přečíst [článek](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Bitwise) na MDN. -## Comma +## Čárka -The comma operator `,` is one of the rarest and most unusual operators. Sometimes, it's used to write shorter code, so we need to know it in order to understand what's going on. +Operátor čárky `,` je jeden z nejvzácnějších a nejneobvyklejších operátorů. Někdy se používá k psaní kratšího kódu, takže jej potřebujeme znát, abychom pochopili, o co tady jde. -The comma operator allows us to evaluate several expressions, dividing them with a comma `,`. Each of them is evaluated but only the result of the last one is returned. +Operátor čárky nám umožňuje vyhodnotit několik výrazů za sebou, oddělených čárkou `,`. Vyhodnotí se každý z nich, ale vrátí se jen výsledek posledního. -For example: +Příklad: ```js run *!* let a = (1 + 2, 3 + 4); */!* -alert( a ); // 7 (the result of 3 + 4) +alert( a ); // 7 (výsledek 3 + 4) ``` -Here, the first expression `1 + 2` is evaluated and its result is thrown away. Then, `3 + 4` is evaluated and returned as the result. +Zde se napřed vyhodnotí první výraz `1 + 2` a jeho výsledek se zahodí. Pak se vyhodnotí `3 + 4` a jeho výsledek je vrácen. -```smart header="Comma has a very low precedence" -Please note that the comma operator has very low precedence, lower than `=`, so parentheses are important in the example above. +```smart header="Čárka má velmi nízkou prioritu" +Všimněte si, že operátor čárky má velmi nízkou prioritu, dokonce nižší než `=`, takže závorky jsou ve výše uvedeném příkladu nezbytné. -Without them: `a = 1 + 2, 3 + 4` evaluates `+` first, summing the numbers into `a = 3, 7`, then the assignment operator `=` assigns `a = 3`, and the rest is ignored. It's like `(a = 1 + 2), 3 + 4`. +Bez nich: `a = 1 + 2, 3 + 4`, jako první by se vyhodnotilo `+`, které by sečetlo čísla do `a = 3, 7`, pak by operátor přiřazení `=` přiřadil `a = 3` a zbytek by se ignoroval. Bylo by to jako `(a = 1 + 2), 3 + 4`. ``` -Why do we need an operator that throws away everything except the last expression? +K čemu potřebujeme operátor, který zahodí všechno kromě posledního výrazu? -Sometimes, people use it in more complex constructs to put several actions in one line. +Někdy jej lidé používají ve složitějších konstrukcích, aby umístili několik akcí na jeden řádek. -For example: +Příklad: ```js -// three operations in one line +// tři operace na jednom řádku for (*!*a = 1, b = 3, c = a * b*/!*; a < 10; a++) { ... } ``` -Such tricks are used in many JavaScript frameworks. That's why we're mentioning them. But usually they don't improve code readability so we should think well before using them. +Takové triky se používají v mnoha rámcích JavaScriptu, a proto se o nich zmiňujeme. Obvykle však zrovna nezlepšují čitelnost kódu, a proto byste si jejich používání měli dobře rozmyslet. diff --git a/1-js/02-first-steps/09-comparison/1-comparison-questions/solution.md b/1-js/02-first-steps/09-comparison/1-comparison-questions/solution.md index 632b1cf4e..480a91a61 100644 --- a/1-js/02-first-steps/09-comparison/1-comparison-questions/solution.md +++ b/1-js/02-first-steps/09-comparison/1-comparison-questions/solution.md @@ -2,7 +2,7 @@ ```js no-beautify 5 > 4 → true -"apple" > "pineapple" → false +"ananas" > "jablko" → false "2" > "12" → true undefined == null → true undefined === null → false @@ -10,12 +10,12 @@ null == "\n0\n" → false null === +"\n0\n" → false ``` -Some of the reasons: +Některé z důvodů: -1. Obviously, true. -2. Dictionary comparison, hence false. `"a"` is smaller than `"p"`. -3. Again, dictionary comparison, first char `"2"` is greater than the first char `"1"`. -4. Values `null` and `undefined` equal each other only. -5. Strict equality is strict. Different types from both sides lead to false. -6. Similar to `(4)`, `null` only equals `undefined`. -7. Strict equality of different types. +1. Samozřejmě true. +2. Slovníkové porovnání, proto false. `"a"` je menší než `"j"`. +3. Opět slovníkové porovnání, první znak `"2"` je větší než první znak `"1"`. +4. Hodnoty `null` a `undefined` se rovnají jedině sobě navzájem. +5. Striktní rovnost je striktní. Různé typy na obou stranách vedou k výsledku false. +6. Obdobně jako ve `(4)` se `null` rovná jedině `undefined`. +7. Striktní rovnost s různými typy vrací false. diff --git a/1-js/02-first-steps/09-comparison/1-comparison-questions/task.md b/1-js/02-first-steps/09-comparison/1-comparison-questions/task.md index be7f75ddd..ac9c70d08 100644 --- a/1-js/02-first-steps/09-comparison/1-comparison-questions/task.md +++ b/1-js/02-first-steps/09-comparison/1-comparison-questions/task.md @@ -2,13 +2,13 @@ importance: 5 --- -# Comparisons +# Porovnávání -What will be the result for these expressions? +Jaký bude výsledek těchto výrazů? ```js no-beautify 5 > 4 -"apple" > "pineapple" +"ananas" > "jablko" "2" > "12" undefined == null undefined === null diff --git a/1-js/02-first-steps/09-comparison/article.md b/1-js/02-first-steps/09-comparison/article.md index a69317fee..35b2ce048 100644 --- a/1-js/02-first-steps/09-comparison/article.md +++ b/1-js/02-first-steps/09-comparison/article.md @@ -1,47 +1,47 @@ -# Comparisons +# Porovnávání -We know many comparison operators from maths. +Z matematiky známe mnoho porovnávacích operátorů. -In JavaScript they are written like this: +V JavaScriptu se píší následovně: -- Greater/less than: a > b, a < b. -- Greater/less than or equals: a >= b, a <= b. -- Equals: `a == b`, please note the double equality sign `==` means the equality test, while a single one `a = b` means an assignment. -- Not equals: In maths the notation is ≠, but in JavaScript it's written as a != b. +- Větší/menší než: a > b, a < b. +- Větší/menší nebo rovno: a >= b, a <= b. +- Rovno: `a == b`. Prosíme všimněte si, že znak dvou rovnítek za sebou `==` znamená test rovnosti, zatímco jediné rovnítko `a = b` znamená přiřazení. +- Nerovno: v matematice se používá znak ≠, ale v JavaScriptu se píše a != b. -In this article we'll learn more about different types of comparisons, how JavaScript makes them, including important peculiarities. +V tomto článku se dozvíme víc o různých druzích porovnání a o tom, jak s nimi JavaScript zachází, včetně důležitých zvláštností. -At the end you'll find a good recipe to avoid "JavaScript quirks"-related issues. +Na konci najdete recept, jak se vyhnout různým problémům způsobeným JavaScriptovými „vtípky“. -## Boolean is the result +## Výsledkem je typ boolean -All comparison operators return a boolean value: +Všechny porovnávací operátory vracejí hodnotu typu boolean: -- `true` -- means "yes", "correct" or "the truth". -- `false` -- means "no", "wrong" or "not the truth". +- `true` -- znamená „ano“, „správně“ nebo „pravda“. +- `false` -- znamená „ne“, „nesprávně“ nebo „nepravda“. -For example: +Příklad: ```js run -alert( 2 > 1 ); // true (correct) -alert( 2 == 1 ); // false (wrong) -alert( 2 != 1 ); // true (correct) +alert( 2 > 1 ); // true (správně) +alert( 2 == 1 ); // false (nesprávně) +alert( 2 != 1 ); // true (správně) ``` -A comparison result can be assigned to a variable, just like any value: +Výsledek porovnání můžeme přiřadit do proměnné, stejně jako každou jinou hodnotu: ```js run -let result = 5 > 4; // assign the result of the comparison -alert( result ); // true +let výsledek = 5 > 4; // přiřadíme výsledek porovnání +alert( výsledek ); // true ``` -## String comparison +## Porovnávání řetězců -To see whether a string is greater than another, JavaScript uses the so-called "dictionary" or "lexicographical" order. +Ke zjištění, zda je jeden řetězec větší než jiný, JavaScript používá tzv. „slovníkové“ neboli „lexikografické“ pořadí. -In other words, strings are compared letter-by-letter. +Jinými slovy, řetězce se porovnávají znak po znaku. -For example: +Příklad: ```js run alert( 'Z' > 'A' ); // true @@ -49,55 +49,55 @@ alert( 'Glow' > 'Glee' ); // true alert( 'Bee' > 'Be' ); // true ``` -The algorithm to compare two strings is simple: +Algoritmus pro porovnání dvou řetězců je jednoduchý: -1. Compare the first character of both strings. -2. If the first character from the first string is greater (or less) than the other string's, then the first string is greater (or less) than the second. We're done. -3. Otherwise, if both strings' first characters are the same, compare the second characters the same way. -4. Repeat until the end of either string. -5. If both strings end at the same length, then they are equal. Otherwise, the longer string is greater. +1. Porovnej první znak obou řetězců. +2. Je-li první znak prvního řetězce větší (nebo menší) než první znak druhého řetězce, je první řetězec větší (nebo menší) než druhý. Tím jsme hotovi. +3. V opačném případě, tedy jsou-li první znaky obou řetězců stejné, porovnej stejným způsobem druhé znaky. +4. Tento proces opakuj, dokud nedojdeš na konec některého z řetězců. +5. Mají-li oba řetězce stejnou délku, jsou si rovny. V opačném případě je delší řetězec větší. -In the first example above, the comparison `'Z' > 'A'` gets to a result at the first step. +Ve výše uvedených příkladech porovnání `'Z' > 'A'` dojde k výsledku hned v prvním kroku. -The second comparison `'Glow'` and `'Glee'` needs more steps as strings are compared character-by-character: +Porovnání řetězců `"Glow"` a `"Glee"` však vyžaduje více kroků, jelikož řetězce se porovnávají znak po znaku: -1. `G` is the same as `G`. -2. `l` is the same as `l`. -3. `o` is greater than `e`. Stop here. The first string is greater. +1. `G` je stejné jako `G`. +2. `l` je stejné jako `l`. +3. `o` je větší než `e`. Tady se zastavíme. První řetězec je větší. -```smart header="Not a real dictionary, but Unicode order" -The comparison algorithm given above is roughly equivalent to the one used in dictionaries or phone books, but it's not exactly the same. +```smart header="Není to skutečný slovník, ale pořadí podle Unicode" +Uvedený porovnávací algoritmus zhruba odpovídá tomu, jaký se používá k řazení ve slovnících nebo telefonních seznamech, ale není úplně stejný. -For instance, case matters. A capital letter `"A"` is not equal to the lowercase `"a"`. Which one is greater? The lowercase `"a"`. Why? Because the lowercase character has a greater index in the internal encoding table JavaScript uses (Unicode). We'll get back to specific details and consequences of this in the chapter . +Například záleží na velikosti písmen. Velké písmeno `"A"` není rovno malému `"a"`. Které je větší? Malé `"a"`. Proč? Protože malá písmena mají v interní kódovací tabulce, kterou JavaScript používá (Unicode), vyšší index. Ke specifickým podrobnostem a důsledkům se vrátíme v kapitole . ``` -## Comparison of different types +## Porovnávání rozdílných typů -When comparing values of different types, JavaScript converts the values to numbers. +Když JavaScript porovnává hodnoty různých typů, převádí je na čísla. -For example: +Příklad: ```js run -alert( '2' > 1 ); // true, string '2' becomes a number 2 -alert( '01' == 1 ); // true, string '01' becomes a number 1 +alert( '2' > 1 ); // true, řetězec '2' se převede na číslo 2 +alert( '01' == 1 ); // true, řetězec '01' se převede na číslo 1 ``` -For boolean values, `true` becomes `1` and `false` becomes `0`. +U hodnot typu boolean se `true` převede na `1` a `false` na `0`. -For example: +Příklad: ```js run alert( true == 1 ); // true alert( false == 0 ); // true ``` -````smart header="A funny consequence" -It is possible that at the same time: +````smart header="Legrační důsledek" +Je možné, že současně: -- Two values are equal. -- One of them is `true` as a boolean and the other one is `false` as a boolean. +- Dvě hodnoty se budou rovnat. +- Jedna z nich bude jako boolean `true` a druhá `false`. -For example: +Příklad: ```js run let a = 0; @@ -109,67 +109,67 @@ alert( Boolean(b) ); // true alert(a == b); // true! ``` -From JavaScript's standpoint, this result is quite normal. An equality check converts values using the numeric conversion (hence `"0"` becomes `0`), while the explicit `Boolean` conversion uses another set of rules. +Z pohledu JavaScriptu je tento výsledek zcela normální. Test rovnosti převádí hodnoty pomocí konverze na čísla (proto se `"0"` převede na `0`), zatímco explicitní konverze `Boolean` funguje podle jiných pravidel. ```` -## Strict equality +## Striktní rovnost -A regular equality check `==` has a problem. It cannot differentiate `0` from `false`: +Běžné ověření rovnosti `==` má problém. Nedokáže rozlišit `0` od `false`: ```js run alert( 0 == false ); // true ``` -The same thing happens with an empty string: +Totéž platí pro prázdný řetězec: ```js run alert( '' == false ); // true ``` -This happens because operands of different types are converted to numbers by the equality operator `==`. An empty string, just like `false`, becomes a zero. +To se děje proto, že operátor rovnosti `==` převádí operandy různých typů na čísla. Prázdný řetězec, stejně jako `false`, se převede na nulu. -What to do if we'd like to differentiate `0` from `false`? +Co máme dělat, jestliže chceme rozlišit `0` od `false`? -**A strict equality operator `===` checks the equality without type conversion.** +**Operátor striktní rovnosti `===` zkontroluje rovnost bez typové konverze.** -In other words, if `a` and `b` are of different types, then `a === b` immediately returns `false` without an attempt to convert them. +Jinými slovy, jsou-li `a` a `b` různých typů, pak `a === b` okamžitě vrátí `false`, aniž by se je pokusil konvertovat. -Let's try it: +Zkusme to: ```js run -alert( 0 === false ); // false, because the types are different +alert( 0 === false ); // false, protože typy jsou různé ``` -There is also a "strict non-equality" operator `!==` analogous to `!=`. +Existuje i operátor „striktní nerovnosti“ `!==`, který je analogický s `!=`. -The strict equality operator is a bit longer to write, but makes it obvious what's going on and leaves less room for errors. +Operátor striktní rovnosti se píše trošičku déle, ale díky němu je hned zřejmé, o co tady jde, a ponechává méně prostoru k chybám. -## Comparison with null and undefined +## Porovnávání s null a undefined -There's a non-intuitive behavior when `null` or `undefined` are compared to other values. +Chování při porovnávání `null` nebo `undefined` s jinými hodnotami není zcela intuitivní. -For a strict equality check `===` -: These values are different, because each of them is a different type. +U operátoru striktní rovnosti `===` +: Tyto hodnoty jsou různé, protože každá z nich je jiného typu. ```js run alert( null === undefined ); // false ``` -For a non-strict check `==` -: There's a special rule. These two are a "sweet couple": they equal each other (in the sense of `==`), but not any other value. +U operátoru nestriktní rovnosti `==` +: Platí zvláštní pravidlo. Tyto dvě hodnoty tvoří „zamilovanou dvojici“: jsou si navzájem rovny (ve smyslu `==`), ale nejsou rovny žádné jiné hodnotě. ```js run alert( null == undefined ); // true ``` -For maths and other comparisons `< > <= >=` -: `null/undefined` are converted to numbers: `null` becomes `0`, while `undefined` becomes `NaN`. +U matematických a jiných porovnání `< > <= >=` +: `null/undefined` se převádějí na čísla: `null` se převede na `0`, zatímco `undefined` se převede na `NaN`. -Now let's see some funny things that happen when we apply these rules. And, what's more important, how to not fall into a trap with them. +Nyní se podívejme na některé legrační jevy, k nimž dochází při použití těchto pravidel. A, což je důležitější, jak se s nimi nechytit do pasti. -### Strange result: null vs 0 +### Podivný výsledek: null vs 0 -Let's compare `null` with a zero: +Porovnejme `null` s nulou: ```js run alert( null > 0 ); // (1) false @@ -177,15 +177,15 @@ alert( null == 0 ); // (2) false alert( null >= 0 ); // (3) *!*true*/!* ``` -Mathematically, that's strange. The last result states that "`null` is greater than or equal to zero", so in one of the comparisons above it must be `true`, but they are both false. +Matematicky je to zvláštní. Poslední uvedený výsledek tvrdí, že „`null` je větší nebo rovno nule“, takže jedno z výše uvedených porovnání musí být `true`, ale obě jsou `false`. -The reason is that an equality check `==` and comparisons `> < >= <=` work differently. Comparisons convert `null` to a number, treating it as `0`. That's why (3) `null >= 0` is true and (1) `null > 0` is false. +Důvodem je, že test rovnosti `==` a porovnání `> < >= <=` fungují odlišně. Porovnání převedou `null` na číslo a zacházejí s ním jako s `0`. Proto (3) `null >= 0` platí a (1) `null > 0` neplatí. -On the other hand, the equality check `==` for `undefined` and `null` is defined such that, without any conversions, they equal each other and don't equal anything else. That's why (2) `null == 0` is false. +Naproti tomu rovnost `==` pro `undefined` a `null` je definována tak, že se bez jakýchkoli konverzí rovnají navzájem a nerovnají se ničemu jinému. Proto (2) `null == 0` neplatí. -### An incomparable undefined +### Neporovnatelné undefined -The value `undefined` shouldn't be compared to other values: +Hodnota `undefined` by neměla být porovnávána s jinými hodnotami: ```js run alert( undefined > 0 ); // false (1) @@ -193,24 +193,24 @@ alert( undefined < 0 ); // false (2) alert( undefined == 0 ); // false (3) ``` -Why does it dislike zero so much? Always false! +Proč ji porovnávání nemá tak rádo? Vždycky vyjde false! -We get these results because: +Tyto výsledky jsme získali, protože: -- Comparisons `(1)` and `(2)` return `false` because `undefined` gets converted to `NaN` and `NaN` is a special numeric value which returns `false` for all comparisons. -- The equality check `(3)` returns `false` because `undefined` only equals `null`, `undefined`, and no other value. +- Porovnání `(1)` a `(2)` vracejí `false`, protože `undefined` se převede na `NaN` a `NaN` je speciální číselná hodnota, která při všech porovnáních vrátí `false`. +- Test rovnosti `(3)` vrací `false`, protože `undefined` se rovná jedině `null` a `undefined`, žádné jiné hodnotě. -### Avoid problems +### Jak se vyhnout problémům -Why did we go over these examples? Should we remember these peculiarities all the time? Well, not really. Actually, these tricky things will gradually become familiar over time, but there's a solid way to avoid problems with them: +Jak se přes tyto příklady přenést? Měli bychom si tyto zvláštnosti neustále pamatovat? Vlastně ani ne. Ve skutečnosti se s těmito triky postupem času sžijete, ale existuje solidní způsob, jak se vyhnout problémům, které způsobují: -- Treat any comparison with `undefined/null` except the strict equality `===` with exceptional care. -- Don't use comparisons `>= > < <=` with a variable which may be `null/undefined`, unless you're really sure of what you're doing. If a variable can have these values, check for them separately. +- Zacházejte s každým porovnáním s `undefined/null` kromě striktní rovnosti `===` výjimečně opatrně. +- Nepoužívejte porovnání `>= > < <=` na proměnnou, která by mohla být `null/undefined`, pokud si opravdu nejste jisti tím, co děláte. Může-li proměnná obsahovat tyto hodnoty, ověřte je zvlášť. -## Summary +## Shrnutí -- Comparison operators return a boolean value. -- Strings are compared letter-by-letter in the "dictionary" order. -- When values of different types are compared, they get converted to numbers (with the exclusion of a strict equality check). -- The values `null` and `undefined` equal `==` each other and do not equal any other value. -- Be careful when using comparisons like `>` or `<` with variables that can occasionally be `null/undefined`. Checking for `null/undefined` separately is a good idea. +- Porovnávací operátory vracejí hodnotu typu boolean. +- Řetězce se porovnávají znak po znaku podle „slovníkového“ pořadí. +- Když se porovnávají hodnoty různých typů, převedou se na čísla (s výjimkou operátoru striktní rovnosti). +- Hodnoty `null` a `undefined` se rovnají `==` sobě navzájem, ale nerovnají se žádné jiné hodnotě. +- Buďte opatrní při používání porovnávání jako `<` nebo `>` na proměnné, které mohou být `null/undefined`. Dobrý nápad je odděleně ověřit, zda opravdu jsou `null/undefined`. diff --git a/1-js/02-first-steps/10-ifelse/1-if-zero-string/solution.md b/1-js/02-first-steps/10-ifelse/1-if-zero-string/solution.md index 51f1d4680..7c8ea0c2b 100644 --- a/1-js/02-first-steps/10-ifelse/1-if-zero-string/solution.md +++ b/1-js/02-first-steps/10-ifelse/1-if-zero-string/solution.md @@ -1,12 +1,12 @@ -**Yes, it will.** +**Ano, zobrazí.** -Any string except an empty one (and `"0"` is not empty) becomes `true` in the logical context. +Každý řetězec kromě prázdného (a `"0"` není prázdný řetězec) se v logickém kontextu převede na `true`. -We can run and check: +Můžeme si to spustit a uvidíme: ```js run if ("0") { - alert( 'Hello' ); + alert( 'Ahoj' ); } ``` diff --git a/1-js/02-first-steps/10-ifelse/1-if-zero-string/task.md b/1-js/02-first-steps/10-ifelse/1-if-zero-string/task.md index 5f16cda85..93d7360d8 100644 --- a/1-js/02-first-steps/10-ifelse/1-if-zero-string/task.md +++ b/1-js/02-first-steps/10-ifelse/1-if-zero-string/task.md @@ -2,13 +2,13 @@ importance: 5 --- -# if (a string with zero) +# if (řetězec s nulou) -Will `alert` be shown? +Zobrazí se `alert`? ```js if ("0") { - alert( 'Hello' ); + alert( 'Ahoj' ); } ``` 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 47b020aab..fb567c1c1 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 @@ -BeginYou don't know? “ECMAScript”!Right!What's the “official” name of JavaScript?OtherECMAScript \ No newline at end of file +ZačátekVy to nevíte? “ECMAScript”!Správně!What's the "oficiální" název JavaScript?JinéECMAScript \ No newline at end of file diff --git a/1-js/02-first-steps/10-ifelse/2-check-standard/ifelse_task2/index.html b/1-js/02-first-steps/10-ifelse/2-check-standard/ifelse_task2/index.html index ea9966653..e052025fc 100644 --- a/1-js/02-first-steps/10-ifelse/2-check-standard/ifelse_task2/index.html +++ b/1-js/02-first-steps/10-ifelse/2-check-standard/ifelse_task2/index.html @@ -5,12 +5,12 @@ diff --git a/1-js/02-first-steps/10-ifelse/2-check-standard/task.md b/1-js/02-first-steps/10-ifelse/2-check-standard/task.md index 4305584fa..8950ae4fa 100644 --- a/1-js/02-first-steps/10-ifelse/2-check-standard/task.md +++ b/1-js/02-first-steps/10-ifelse/2-check-standard/task.md @@ -2,11 +2,11 @@ importance: 2 --- -# The name of JavaScript +# Název JavaScriptu -Using the `if..else` construct, write the code which asks: 'What is the "official" name of JavaScript?' +Pomocí konstruktu `if..else` napište kód, který se zeptá: „Jaký je „oficiální“ název JavaScriptu?“ -If the visitor enters "ECMAScript", then output "Right!", otherwise -- output: "You don't know? ECMAScript!" +Pokud návštěvník zadá „ECMAScript“, vypište „Správně!“, jinak vypište „Vy to nevíte? ECMAScript!“ ![](ifelse_task2.svg) diff --git a/1-js/02-first-steps/10-ifelse/3-sign/solution.md b/1-js/02-first-steps/10-ifelse/3-sign/solution.md index 262a605c2..73e52e887 100644 --- a/1-js/02-first-steps/10-ifelse/3-sign/solution.md +++ b/1-js/02-first-steps/10-ifelse/3-sign/solution.md @@ -1,11 +1,11 @@ ```js run -let value = prompt('Type a number', 0); +let hodnota = prompt('Zadejte číslo', 0); -if (value > 0) { +if (hodnota > 0) { alert( 1 ); -} else if (value < 0) { +} else if (hodnota < 0) { alert( -1 ); } else { alert( 0 ); diff --git a/1-js/02-first-steps/10-ifelse/3-sign/task.md b/1-js/02-first-steps/10-ifelse/3-sign/task.md index 0c5d0e008..adff20a06 100644 --- a/1-js/02-first-steps/10-ifelse/3-sign/task.md +++ b/1-js/02-first-steps/10-ifelse/3-sign/task.md @@ -2,14 +2,14 @@ importance: 2 --- -# Show the sign +# Zobrazte znaménko -Using `if..else`, write the code which gets a number via `prompt` and then shows in `alert`: +Pomocí `if..else` napište kód, který načte číslo pomocí `prompt` a pak pomocí `alert` zobrazí: -- `1`, if the value is greater than zero, -- `-1`, if less than zero, -- `0`, if equals zero. +- `1`, je-li toto číslo větší než nula, +- `-1`, je-li menší než nula, +- `0`, je-li rovno nule. -In this task we assume that the input is always a number. +V tomto cvičení předpokládáme, že vstupem je vždy číslo. [demo src="https://github.com/if_sign"] diff --git a/1-js/02-first-steps/10-ifelse/5-rewrite-if-question/solution.md b/1-js/02-first-steps/10-ifelse/5-rewrite-if-question/solution.md index ff32354fa..80f19e446 100644 --- a/1-js/02-first-steps/10-ifelse/5-rewrite-if-question/solution.md +++ b/1-js/02-first-steps/10-ifelse/5-rewrite-if-question/solution.md @@ -1,6 +1,6 @@ ```js -let result = (a + b < 4) ? 'Below' : 'Over'; +let výsledek = (a + b < 4) ? 'Málo' : 'Moc'; ``` diff --git a/1-js/02-first-steps/10-ifelse/5-rewrite-if-question/task.md b/1-js/02-first-steps/10-ifelse/5-rewrite-if-question/task.md index 6bdf8453e..d6dc9908d 100644 --- a/1-js/02-first-steps/10-ifelse/5-rewrite-if-question/task.md +++ b/1-js/02-first-steps/10-ifelse/5-rewrite-if-question/task.md @@ -2,16 +2,16 @@ importance: 5 --- -# Rewrite 'if' into '?' +# Přepište „if“ na „?“ -Rewrite this `if` using the conditional operator `'?'`: +Přepište tento příkaz `if` pomocí podmíněného operátoru `'?'`: ```js -let result; +let výsledek; if (a + b < 4) { - result = 'Below'; + výsledek = 'Málo'; } else { - result = 'Over'; + výsledek = 'Moc'; } ``` diff --git a/1-js/02-first-steps/10-ifelse/6-rewrite-if-else-question/solution.md b/1-js/02-first-steps/10-ifelse/6-rewrite-if-else-question/solution.md index 6d68e29d7..efc673852 100644 --- a/1-js/02-first-steps/10-ifelse/6-rewrite-if-else-question/solution.md +++ b/1-js/02-first-steps/10-ifelse/6-rewrite-if-else-question/solution.md @@ -1,9 +1,9 @@ ```js -let message = (login == 'Employee') ? 'Hello' : - (login == 'Director') ? 'Greetings' : - (login == '') ? 'No login' : +let zpráva = (přihlášený == 'Zaměstnanec') ? 'Ahoj' : + (přihlášený == 'Ředitel') ? 'Dobrý den' : + (přihlášený == '') ? 'Nikdo není přihlášený' : ''; ``` diff --git a/1-js/02-first-steps/10-ifelse/6-rewrite-if-else-question/task.md b/1-js/02-first-steps/10-ifelse/6-rewrite-if-else-question/task.md index 4f7d994a2..ade76f6af 100644 --- a/1-js/02-first-steps/10-ifelse/6-rewrite-if-else-question/task.md +++ b/1-js/02-first-steps/10-ifelse/6-rewrite-if-else-question/task.md @@ -2,22 +2,22 @@ importance: 5 --- -# Rewrite 'if..else' into '?' +# Přepište „if..else“ na „?“ -Rewrite `if..else` using multiple ternary operators `'?'`. +Přepište `if..else` pomocí několika ternárních operátorů `'?'`. -For readability, it's recommended to split the code into multiple lines. +Z důvodu čitelnosti doporučujeme rozdělit kód na více řádků. ```js -let message; +let zpráva; -if (login == 'Employee') { - message = 'Hello'; -} else if (login == 'Director') { - message = 'Greetings'; -} else if (login == '') { - message = 'No login'; +if (přihlášený == 'Zaměstnanec') { + zpráva = 'Ahoj'; +} else if (přihlášený == 'Ředitel') { + zpráva = 'Dobrý den'; +} else if (přihlášený == '') { + zpráva = 'Nikdo není přihlášený'; } else { - message = ''; + zpráva = ''; } ``` diff --git a/1-js/02-first-steps/10-ifelse/article.md b/1-js/02-first-steps/10-ifelse/article.md index 82e8800b9..2022f9070 100644 --- a/1-js/02-first-steps/10-ifelse/article.md +++ b/1-js/02-first-steps/10-ifelse/article.md @@ -1,239 +1,239 @@ -# Conditional branching: if, '?' +# Podmíněné větvení: if, „?“ -Sometimes, we need to perform different actions based on different conditions. +Někdy potřebujeme provést různé akce v závislosti na platnosti různých podmínek. -To do that, we can use the `if` statement and the conditional operator `?`, that's also called a "question mark" operator. +K tomu můžeme použít příkaz `if` a podmíněný operátor `?`, který se také nazývá operátor „otazníku“. -## The "if" statement +## Příkaz „if“ -The `if(...)` statement evaluates a condition in parentheses and, if the result is `true`, executes a block of code. +Příkaz `if(...)` vyhodnotí podmínku v závorkách a je-li výsledek `true`, vykoná blok kódu. -For example: +Příklad: ```js run -let year = prompt('In which year was ECMAScript-2015 specification published?', ''); +let rok = prompt('Ve kterém roce byla publikována specifikace ECMAScript-2015?', ''); *!* -if (year == 2015) alert( 'You are right!' ); +if (rok == 2015) alert( 'Máte pravdu!' ); */!* ``` -In the example above, the condition is a simple equality check (`year == 2015`), but it can be much more complex. +V uvedeném příkladu je podmínkou jednoduchý test rovnosti (`rok == 2015`), ale může být i mnohem složitější. -If we want to execute more than one statement, we have to wrap our code block inside curly braces: +Jestliže chceme vykonat více než jeden příkaz, musíme náš blok kódu uzavřít do složených závorek: ```js -if (year == 2015) { - alert( "That's correct!" ); - alert( "You're so smart!" ); +if (rok == 2015) { + alert( "Správně!" ); + alert( "Vy jste tak chytrý!" ); } ``` -We recommend wrapping your code block with curly braces `{}` every time you use an `if` statement, even if there is only one statement to execute. Doing so improves readability. +Doporučujeme uzavírat blok kódu do složených závorek `{}` vždy, když použijete příkaz `if`, i když má vykonat pouze jeden příkaz. Zlepšuje to čitelnost. -## Boolean conversion +## Konverze na boolean -The `if (…)` statement evaluates the expression in its parentheses and converts the result to a boolean. +Příkaz `if (…)` vyhodnotí výraz v závorkách a převede výsledek na typ boolean. -Let's recall the conversion rules from the chapter : +Zopakujme si pravidla konverze z kapitoly : -- A number `0`, an empty string `""`, `null`, `undefined`, and `NaN` all become `false`. Because of that they are called "falsy" values. -- Other values become `true`, so they are called "truthy". +- Číslo `0`, prázdný řetězec `""`, `null`, `undefined` a `NaN` se převedou na `false`. Proto se jim také říká „nepravdivé“ hodnoty. +- Ostatní hodnoty se převedou na `true`, proto se jim říká „pravdivé“. -So, the code under this condition would never execute: +Kód pod touto podmínkou se tedy nikdy nevykoná: ```js -if (0) { // 0 is falsy +if (0) { // 0 je nepravdivá ... } ``` -...and inside this condition -- it always will: +...a pod touto podmínkou se naopak vykoná vždy: ```js -if (1) { // 1 is truthy +if (1) { // 1 je pravdivá ... } ``` -We can also pass a pre-evaluated boolean value to `if`, like this: +Můžeme také do `if` předat předem vypočtenou hodnotu, například takto: ```js -let cond = (year == 2015); // equality evaluates to true or false +let podmínka = (rok == 2015); // rovnost se vyhodnotí jako true nebo false -if (cond) { +if (podmínka) { ... } ``` -## The "else" clause +## Klauzule „else“ -The `if` statement may contain an optional `else` block. It executes when the condition is falsy. +Příkaz `if` může obsahovat nepovinný blok `else`, který se vykoná, když podmínka je nepravdivá. -For example: +Příklad: ```js run -let year = prompt('In which year was the ECMAScript-2015 specification published?', ''); +let rok = prompt('Ve kterém roce byla publikována specifikace ECMAScript-2015?', ''); -if (year == 2015) { - alert( 'You guessed it right!' ); +if (rok == 2015) { + alert( 'Uhádli jste!' ); } else { - alert( 'How can you be so wrong?' ); // any value except 2015 + alert( 'Jak se můžete takhle zmýlit?' ); // jakákoli jiná hodnota než 2015 } ``` -## Several conditions: "else if" +## Více podmínek za sebou: „else if“ -Sometimes, we'd like to test several variants of a condition. The `else if` clause lets us do that. +Někdy bychom chtěli otestovat několik variant podmínky. To nám umožní klauzule `else if`. -For example: +Příklad: ```js run -let year = prompt('In which year was the ECMAScript-2015 specification published?', ''); +let rok = prompt('Ve kterém roce byla publikována specifikace ECMAScript-2015?', ''); -if (year < 2015) { - alert( 'Too early...' ); -} else if (year > 2015) { - alert( 'Too late' ); +if (rok < 2015) { + alert( 'Příliš brzy...' ); +} else if (rok > 2015) { + alert( 'Příliš pozdě...' ); } else { - alert( 'Exactly!' ); + alert( 'Správně!' ); } ``` -In the code above, JavaScript first checks `year < 2015`. If that is falsy, it goes to the next condition `year > 2015`. If that is also falsy, it shows the last `alert`. +Ve výše uvedeném kódu JavaScript napřed ověří podmínku `rok < 2015`. Není-li splněna, pokračuje k další podmínce `rok > 2015`. Není-li splněna ani ta, zobrazí se poslední `alert`. -There can be more `else if` blocks. The final `else` is optional. +Bloků `else if` může být více. Závěrečné `else` není povinné. -## Conditional operator '?' +## Podmíněný operátor „?“ -Sometimes, we need to assign a variable depending on a condition. +Někdy potřebujeme přiřadit do proměnné hodnotu v závislosti na výsledku podmínky. -For instance: +Příklad: ```js run no-beautify -let accessAllowed; -let age = prompt('How old are you?', ''); +let přístupPovolen; +let věk = prompt('Kolik je vám let?', ''); *!* -if (age > 18) { - accessAllowed = true; +if (věk > 18) { + přístupPovolen = true; } else { - accessAllowed = false; + přístupPovolen = false; } */!* -alert(accessAllowed); +alert(přístupPovolen); ``` -The so-called "conditional" or "question mark" operator lets us do that in a shorter and simpler way. +Provést to kratším a jednodušším způsobem nám umožní tzv. „podmíněný“ operátor neboli operátor „otazníku“. -The operator is represented by a question mark `?`. Sometimes it's called "ternary", because the operator has three operands. It is actually the one and only operator in JavaScript which has that many. +Tento operátor je reprezentován otazníkem `?`. Někdy se nazývá „ternární“, protože má tři operandy. Je to v současnosti jediný operátor v JavaScriptu, který jich má tolik. -The syntax is: +Jeho syntaxe je: ```js -let result = condition ? value1 : value2; +let výsledek = podmínka ? hodnota1 : hodnota2; ``` -The `condition` is evaluated: if it's truthy then `value1` is returned, otherwise -- `value2`. +Vyhodnotí se `podmínka`: je-li splněna, vrátí se `hodnota1`, jinak se vrátí `hodnota2`. -For example: +Příklad: ```js -let accessAllowed = (age > 18) ? true : false; +let přístupPovolen = (věk > 18) ? true : false; ``` -Technically, we can omit the parentheses around `age > 18`. The question mark operator has a low precedence, so it executes after the comparison `>`. +Technicky můžeme závorky kolem `věk > 18` vynechat. Operátor otazníku má nízkou prioritu, a proto se vykoná až po porovnání `>`. -This example will do the same thing as the previous one: +Tento příklad provede totéž jako předchozí: ```js -// the comparison operator "age > 18" executes first anyway -// (no need to wrap it into parentheses) -let accessAllowed = age > 18 ? true : false; +// porovnávací operátor „věk > 18“ se vykoná jako první +// (není třeba jej uzavírat do závorek) +let přístupPovolen = věk > 18 ? true : false; ``` -But parentheses make the code more readable, so we recommend using them. +Závorky však zlepšují čitelnost kódu, a proto je doporučujeme používat. ````smart -In the example above, you can avoid using the question mark operator because the comparison itself returns `true/false`: +Ve výše uvedeném příkladu se můžeme operátoru otazníku úplně vyhnout, protože samo porovnání vrací `true/false`: ```js -// the same -let accessAllowed = age > 18; +// totéž +let přístupPovolen = věk > 18; ``` ```` -## Multiple '?' +## Více „?“ za sebou -A sequence of question mark operators `?` can return a value that depends on more than one condition. +Sekvence několika operátorů otazníku `?` může vrátit hodnotu, která závisí na více než jedné podmínce. -For instance: +Příklad: ```js run -let age = prompt('age?', 18); +let věk = prompt('Věk?', 18); -let message = (age < 3) ? 'Hi, baby!' : - (age < 18) ? 'Hello!' : - (age < 100) ? 'Greetings!' : - 'What an unusual age!'; +let zpráva = (věk < 3) ? 'Nazdar, mimino!' : + (věk < 18) ? 'Ahoj!' : + (věk < 100) ? 'Dobrý den!' : + 'To je ale vysoký věk!'; -alert( message ); +alert( zpráva ); ``` -It may be difficult at first to grasp what's going on. But after a closer look, we can see that it's just an ordinary sequence of tests: +Na první pohled může být obtížné pochopit, o co tady jde. Po bližším prozkoumání však vidíme, že to je jen obyčejná posloupnost testů: -1. The first question mark checks whether `age < 3`. -2. If true -- it returns `'Hi, baby!'`. Otherwise, it continues to the expression after the colon ":", checking `age < 18`. -3. If that's true -- it returns `'Hello!'`. Otherwise, it continues to the expression after the next colon ":", checking `age < 100`. -4. If that's true -- it returns `'Greetings!'`. Otherwise, it continues to the expression after the last colon ":", returning `'What an unusual age!'`. +1. První otazník ověří, zda `věk < 3`. +2. Pokud ano, vrátí `'Nazdar, mimino!'`. Jinak pokračuje výrazem za dvojtečkou ":" a ověří `věk < 18`. +3. Pokud to platí, vrátí `'Ahoj!'`. Jinak pokračuje výrazem za další dvojtečkou ":" a ověří `věk < 100`. +4. Pokud to platí, vrátí `'Dobrý den!'`. Jinak pokračuje výrazem za poslední dvojtečkou ":" a vrátí `'To je ale vysoký věk!'`. -Here's how this looks using `if..else`: +Při použití `if..else` by to vypadalo následovně: ```js -if (age < 3) { - message = 'Hi, baby!'; -} else if (age < 18) { - message = 'Hello!'; -} else if (age < 100) { - message = 'Greetings!'; +if (věk < 3) { + zpráva = 'Nazdar, mimino!'; +} else if (věk < 18) { + zpráva = 'Ahoj!'; +} else if (věk < 100) { + zpráva = 'Dobrý den!'; } else { - message = 'What an unusual age!'; + zpráva = 'To je ale vysoký věk!'; } ``` -## Non-traditional use of '?' +## Netradiční použití „?“ -Sometimes the question mark `?` is used as a replacement for `if`: +Někdy se otazník `?` používá jako náhrada za `if`: ```js run no-beautify -let company = prompt('Which company created JavaScript?', ''); +let firma = prompt('Která firma vytvořila JavaScript?', ''); *!* -(company == 'Netscape') ? - alert('Right!') : alert('Wrong.'); +(firma == 'Netscape') ? + alert('Správně!') : alert('Špatně.'); */!* ``` -Depending on the condition `company == 'Netscape'`, either the first or the second expression after the `?` gets executed and shows an alert. +Podle platnosti podmínky `firma == 'Netscape'` se buď první, nebo druhý výraz za `?` vykoná a zobrazí zprávu. -We don't assign a result to a variable here. Instead, we execute different code depending on the condition. +Zde nepřiřazujeme výsledek žádné proměnné. Místo toho v závislosti na podmínce spouštíme různý kód. -**It's not recommended to use the question mark operator in this way.** +**Nedoporučuje se používat operátor otazníku tímto způsobem.** -The notation is shorter than the equivalent `if` statement, which appeals to some programmers. But it is less readable. +Zápis je sice kratší než odpovídající příkaz `if`, což může na některé programátory zapůsobit, ale je také méně čitelný. -Here is the same code using `if` for comparison: +Zde je stejný kód, který pro porovnání používá `if`: ```js run no-beautify -let company = prompt('Which company created JavaScript?', ''); +let firma = prompt('Která firma vytvořila JavaScript?', ''); *!* -if (company == 'Netscape') { - alert('Right!'); +if (firma == 'Netscape') { + alert('Správně!'); } else { - alert('Wrong.'); + alert('Špatně.'); } */!* ``` -Our eyes scan the code vertically. Code blocks which span several lines are easier to understand than a long, horizontal instruction set. +Naše oči projíždějí kód shora dolů. Bloky kódu, které jsou roztaženy přes několik řádků, pochopíme snadněji než dlouhou vodorovnou řadu instrukcí. -The purpose of the question mark operator `?` is to return one value or another depending on its condition. Please use it for exactly that. Use `if` when you need to execute different branches of code. +Účelem operátoru otazníku `?` je vrátit jednu nebo druhou hodnotu podle platnosti jeho podmínky. Prosíme, používejte jej přesně takto. Když budete potřebovat vykonat různé větve kódu, použijte `if`. diff --git a/1-js/02-first-steps/11-logical-operators/1-alert-null-2-undefined/solution.md b/1-js/02-first-steps/11-logical-operators/1-alert-null-2-undefined/solution.md index 8869d32e6..5b7759b2f 100644 --- a/1-js/02-first-steps/11-logical-operators/1-alert-null-2-undefined/solution.md +++ b/1-js/02-first-steps/11-logical-operators/1-alert-null-2-undefined/solution.md @@ -1,4 +1,4 @@ -The answer is `2`, that's the first truthy value. +Odpověď zní `2`, což je první pravdivá hodnota. ```js run alert( null || 2 || undefined ); diff --git a/1-js/02-first-steps/11-logical-operators/1-alert-null-2-undefined/task.md b/1-js/02-first-steps/11-logical-operators/1-alert-null-2-undefined/task.md index a7c9addfc..d2992822c 100644 --- a/1-js/02-first-steps/11-logical-operators/1-alert-null-2-undefined/task.md +++ b/1-js/02-first-steps/11-logical-operators/1-alert-null-2-undefined/task.md @@ -2,9 +2,9 @@ importance: 5 --- -# What's the result of OR? +# Jaký je výsledek OR? -What is the code below going to output? +Co vypíše níže uvedený kód? ```js alert( null || 2 || undefined ); diff --git a/1-js/02-first-steps/11-logical-operators/2-alert-or/solution.md b/1-js/02-first-steps/11-logical-operators/2-alert-or/solution.md index f85b56366..a81b9f5db 100644 --- a/1-js/02-first-steps/11-logical-operators/2-alert-or/solution.md +++ b/1-js/02-first-steps/11-logical-operators/2-alert-or/solution.md @@ -1,13 +1,13 @@ -The answer: first `1`, then `2`. +Odpověď zní: nejprve `1`, pak `2`. ```js run alert( alert(1) || 2 || alert(3) ); ``` -The call to `alert` does not return a value. Or, in other words, it returns `undefined`. +Volání `alert` nevrátí žádnou hodnotu, jinými slovy vrátí `undefined`. -1. The first OR `||` evaluates its left operand `alert(1)`. That shows the first message with `1`. -2. The `alert` returns `undefined`, so OR goes on to the second operand searching for a truthy value. -3. The second operand `2` is truthy, so the execution is halted, `2` is returned and then shown by the outer alert. +1. První OR `||` vyhodnotí svůj levý operand `alert(1)`. Ten zobrazí první zprávu obsahující `1`. +2. Tento `alert` vrátí `undefined`, takže OR ve svém hledání pravdivé hodnoty přejde ke druhému operandu. +3. Druhý operand `2` je pravdivý, takže vyhodnocení operátoru se zastaví, vrátí `2` a to je pak zobrazeno vnějším `alert`em. -There will be no `3`, because the evaluation does not reach `alert(3)`. +Nezobrazí se `3`, protože vyhodnocení se k `alert(3)` nedostane. diff --git a/1-js/02-first-steps/11-logical-operators/2-alert-or/task.md b/1-js/02-first-steps/11-logical-operators/2-alert-or/task.md index 3908fa2ec..96cee19ad 100644 --- a/1-js/02-first-steps/11-logical-operators/2-alert-or/task.md +++ b/1-js/02-first-steps/11-logical-operators/2-alert-or/task.md @@ -2,9 +2,9 @@ importance: 3 --- -# What's the result of OR'ed alerts? +# Jaký je výsledek alertů spojených ORem? -What will the code below output? +Co vypíše níže uvedený kód? ```js alert( alert(1) || 2 || alert(3) ); diff --git a/1-js/02-first-steps/11-logical-operators/3-alert-1-null-2/solution.md b/1-js/02-first-steps/11-logical-operators/3-alert-1-null-2/solution.md index 368b59409..093b29dbf 100644 --- a/1-js/02-first-steps/11-logical-operators/3-alert-1-null-2/solution.md +++ b/1-js/02-first-steps/11-logical-operators/3-alert-1-null-2/solution.md @@ -1,4 +1,4 @@ -The answer: `null`, because it's the first falsy value from the list. +Odpověď zní `null`, protože je to první nepravdivá hodnota v seznamu. ```js run alert(1 && null && 2); diff --git a/1-js/02-first-steps/11-logical-operators/3-alert-1-null-2/task.md b/1-js/02-first-steps/11-logical-operators/3-alert-1-null-2/task.md index 043d431e4..aa3bdc892 100644 --- a/1-js/02-first-steps/11-logical-operators/3-alert-1-null-2/task.md +++ b/1-js/02-first-steps/11-logical-operators/3-alert-1-null-2/task.md @@ -2,9 +2,9 @@ importance: 5 --- -# What is the result of AND? +# Jaký je výsledek AND? -What is this code going to show? +Co vypíše níže uvedený kód? ```js alert( 1 && null && 2 ); diff --git a/1-js/02-first-steps/11-logical-operators/4-alert-and/solution.md b/1-js/02-first-steps/11-logical-operators/4-alert-and/solution.md index b6fb10d72..ecf3c2696 100644 --- a/1-js/02-first-steps/11-logical-operators/4-alert-and/solution.md +++ b/1-js/02-first-steps/11-logical-operators/4-alert-and/solution.md @@ -1,10 +1,9 @@ -The answer: `1`, and then `undefined`. +Odpověď zní: nejprve `1`, pak `undefined`. ```js run alert( alert(1) && alert(2) ); ``` -The call to `alert` returns `undefined` (it just shows a message, so there's no meaningful return). - -Because of that, `&&` evaluates the left operand (outputs `1`), and immediately stops, because `undefined` is a falsy value. And `&&` looks for a falsy value and returns it, so it's done. +Volání `alert` vrátí `undefined` (funkce jen zobrazí zprávu, takže její návratová hodnota nemá žádný význam). +Proto `&&` vyhodnotí první operand (vypíše `1`) a okamžitě se zastaví, protože `undefined` je nepravdivá hodnota. Operátor `&&` hledá první nepravdivou hodnotu a vrátí ji, takže je hotov. diff --git a/1-js/02-first-steps/11-logical-operators/4-alert-and/task.md b/1-js/02-first-steps/11-logical-operators/4-alert-and/task.md index 69f877b95..8608f0cc2 100644 --- a/1-js/02-first-steps/11-logical-operators/4-alert-and/task.md +++ b/1-js/02-first-steps/11-logical-operators/4-alert-and/task.md @@ -2,9 +2,9 @@ importance: 3 --- -# What is the result of AND'ed alerts? +# Jaký je výsledek alertů spojených ANDem? -What will this code show? +Co vypíše níže uvedený kód? ```js alert( alert(1) && alert(2) ); diff --git a/1-js/02-first-steps/11-logical-operators/5-alert-and-or/solution.md b/1-js/02-first-steps/11-logical-operators/5-alert-and-or/solution.md index 25e3568f8..d5407434f 100644 --- a/1-js/02-first-steps/11-logical-operators/5-alert-and-or/solution.md +++ b/1-js/02-first-steps/11-logical-operators/5-alert-and-or/solution.md @@ -1,16 +1,16 @@ -The answer: `3`. +Odpověď zní: `3`. ```js run alert( null || 2 && 3 || 4 ); ``` -The precedence of AND `&&` is higher than `||`, so it executes first. +Operátor AND `&&` má vyšší prioritu než `||`, proto se vykoná jako první. -The result of `2 && 3 = 3`, so the expression becomes: +Výsledek `2 && 3 = 3`, takže z výrazu se stane: ``` null || 3 || 4 ``` -Now the result is the first truthy value: `3`. +Nyní bude výsledkem první pravdivá hodnota: `3`. diff --git a/1-js/02-first-steps/11-logical-operators/5-alert-and-or/task.md b/1-js/02-first-steps/11-logical-operators/5-alert-and-or/task.md index b18bb9c51..6e0298d58 100644 --- a/1-js/02-first-steps/11-logical-operators/5-alert-and-or/task.md +++ b/1-js/02-first-steps/11-logical-operators/5-alert-and-or/task.md @@ -2,9 +2,9 @@ importance: 5 --- -# The result of OR AND OR +# Výsledek OR AND OR -What will the result be? +Jaký bude výsledek? ```js alert( null || 2 && 3 || 4 ); diff --git a/1-js/02-first-steps/11-logical-operators/6-check-if-in-range/solution.md b/1-js/02-first-steps/11-logical-operators/6-check-if-in-range/solution.md index 87c733b22..7dbe60181 100644 --- a/1-js/02-first-steps/11-logical-operators/6-check-if-in-range/solution.md +++ b/1-js/02-first-steps/11-logical-operators/6-check-if-in-range/solution.md @@ -1,6 +1,6 @@ ```js -if (age >= 14 && age <= 90) +if (věk >= 14 && věk <= 90) ``` diff --git a/1-js/02-first-steps/11-logical-operators/6-check-if-in-range/task.md b/1-js/02-first-steps/11-logical-operators/6-check-if-in-range/task.md index fc9e336c1..2ac202d14 100644 --- a/1-js/02-first-steps/11-logical-operators/6-check-if-in-range/task.md +++ b/1-js/02-first-steps/11-logical-operators/6-check-if-in-range/task.md @@ -2,8 +2,8 @@ importance: 3 --- -# Check the range between +# Ověřte, zda je hodnota v rozsahu -Write an `if` condition to check that `age` is between `14` and `90` inclusively. +Napište podmínku „if“, která ověří, že proměnná `věk` má hodnotu mezi `14` a `90` včetně. -"Inclusively" means that `age` can reach the edges `14` or `90`. +„Včetně“ znamená, že podmínka je splněna i tehdy, je-li `věk` `14` nebo `90`. diff --git a/1-js/02-first-steps/11-logical-operators/7-check-if-out-range/solution.md b/1-js/02-first-steps/11-logical-operators/7-check-if-out-range/solution.md index d1946a967..c67031b6e 100644 --- a/1-js/02-first-steps/11-logical-operators/7-check-if-out-range/solution.md +++ b/1-js/02-first-steps/11-logical-operators/7-check-if-out-range/solution.md @@ -1,12 +1,12 @@ -The first variant: +První varianta: ```js -if (!(age >= 14 && age <= 90)) +if (!(věk >= 14 && věk <= 90)) ``` -The second variant: +Druhá varianta: ```js -if (age < 14 || age > 90) +if (věk < 14 || věk > 90) ``` diff --git a/1-js/02-first-steps/11-logical-operators/7-check-if-out-range/task.md b/1-js/02-first-steps/11-logical-operators/7-check-if-out-range/task.md index 9b947d00f..6c3bdb7ea 100644 --- a/1-js/02-first-steps/11-logical-operators/7-check-if-out-range/task.md +++ b/1-js/02-first-steps/11-logical-operators/7-check-if-out-range/task.md @@ -2,8 +2,8 @@ importance: 3 --- -# Check the range outside +# Ověřte, zda hodnota je mimo rozsah -Write an `if` condition to check that `age` is NOT between `14` and `90` inclusively. +Napište podmínku „if“, která ověří, zda proměnná `věk` NENÍ mezi `14` a `90` včetně. -Create two variants: the first one using NOT `!`, the second one -- without it. +Vytvořte dvě varianty: první bude používat NOT `!`, druhá se obejde bez něj. diff --git a/1-js/02-first-steps/11-logical-operators/8-if-question/solution.md b/1-js/02-first-steps/11-logical-operators/8-if-question/solution.md index 210509758..87044d2cc 100644 --- a/1-js/02-first-steps/11-logical-operators/8-if-question/solution.md +++ b/1-js/02-first-steps/11-logical-operators/8-if-question/solution.md @@ -1,20 +1,20 @@ -The answer: the first and the third will execute. +Odpověď zní: vykoná se první a třetí `alert`. -Details: +Podrobnosti: ```js run -// Runs. -// The result of -1 || 0 = -1, truthy -if (-1 || 0) alert( 'first' ); +// Vykoná se. +// Výsledek -1 || 0 = -1, tedy pravda. +if (-1 || 0) alert( 'první' ); -// Doesn't run -// -1 && 0 = 0, falsy -if (-1 && 0) alert( 'second' ); +// Nevykoná se. +// -1 && 0 = 0, nepravda. +if (-1 && 0) alert( 'druhý' ); -// Executes -// Operator && has a higher precedence than || -// so -1 && 1 executes first, giving us the chain: +// Vykoná se. +// Operátor && má vyšší prioritu než ||, +// takže -1 && 1 se vykoná jako první, což dává tento řetězec: // null || -1 && 1 -> null || 1 -> 1 -if (null || -1 && 1) alert( 'third' ); +if (null || -1 && 1) alert( 'třetí' ); ``` diff --git a/1-js/02-first-steps/11-logical-operators/8-if-question/task.md b/1-js/02-first-steps/11-logical-operators/8-if-question/task.md index 55987121b..a488c57fa 100644 --- a/1-js/02-first-steps/11-logical-operators/8-if-question/task.md +++ b/1-js/02-first-steps/11-logical-operators/8-if-question/task.md @@ -2,15 +2,15 @@ importance: 5 --- -# A question about "if" +# Otázka na „if“ -Which of these `alert`s are going to execute? +Který z těchto `alert`ů se vykoná? -What will the results of the expressions be inside `if(...)`? +Jaké budou výsledky výrazů uvnitř `if(...)`? ```js -if (-1 || 0) alert( 'first' ); -if (-1 && 0) alert( 'second' ); -if (null || -1 && 1) alert( 'third' ); +if (-1 || 0) alert( 'první' ); +if (-1 && 0) alert( 'druhý' ); +if (null || -1 && 1) alert( 'třetí' ); ``` 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 d22b518a9..9e4caf654 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 @@ -BeginCanceledCanceledWelcome!I don't know youWrong passwordWho's there?Password?CancelCancelAdminTheMasterOtherOther \ No newline at end of file +ZačátekZrušenoZrušenoVítejte!Neznám vásChybné hesloKdo je tam?Heslo?ZrušenoZrušenoAdminMistrJinéJiné \ No newline at end of file diff --git a/1-js/02-first-steps/11-logical-operators/9-check-login/solution.md b/1-js/02-first-steps/11-logical-operators/9-check-login/solution.md index 604606259..bcdd7d6f6 100644 --- a/1-js/02-first-steps/11-logical-operators/9-check-login/solution.md +++ b/1-js/02-first-steps/11-logical-operators/9-check-login/solution.md @@ -1,25 +1,25 @@ ```js run demo -let userName = prompt("Who's there?", ''); +let uživatelskéJméno = prompt("Kdo je tam?", ''); -if (userName === 'Admin') { +if (uživatelskéJméno === 'Správce') { - let pass = prompt('Password?', ''); + let heslo = prompt('Heslo?', ''); - if (pass === 'TheMaster') { - alert( 'Welcome!' ); - } else if (pass === '' || pass === null) { - alert( 'Canceled' ); + if (heslo === 'Vládce') { + alert( 'Vítáme vás!' ); + } else if (heslo === '' || heslo === null) { + alert( 'Zrušeno' ); } else { - alert( 'Wrong password' ); + alert( 'Špatné heslo' ); } -} else if (userName === '' || userName === null) { - alert( 'Canceled' ); +} else if (uživatelskéJméno === '' || uživatelskéJméno === null) { + alert( 'Zrušeno' ); } else { - alert( "I don't know you" ); + alert( "Neznám vás" ); } ``` -Note the vertical indents inside the `if` blocks. They are technically not required, but make the code more readable. +Všimněte si svislého odsazení uvnitř bloků `if`. Není technicky vyžadováno, ale činí kód čitelnějším. diff --git a/1-js/02-first-steps/11-logical-operators/9-check-login/task.md b/1-js/02-first-steps/11-logical-operators/9-check-login/task.md index 290a52642..d4fad802a 100644 --- a/1-js/02-first-steps/11-logical-operators/9-check-login/task.md +++ b/1-js/02-first-steps/11-logical-operators/9-check-login/task.md @@ -2,24 +2,24 @@ importance: 3 --- -# Check the login +# Ověřte přihlášení -Write the code which asks for a login with `prompt`. +Napište kód, který se pomocí `prompt` zeptá na přihlášení. -If the visitor enters `"Admin"`, then `prompt` for a password, if the input is an empty line or `key:Esc` -- show "Canceled", if it's another string -- then show "I don't know you". +Jestliže návštěvník zadá `"Správce"`, zeptejte se ho pomocí `prompt` na heslo. Bude-li vstupem prázdný řádek nebo uživatel stiskne `key:Esc`, zobrazte „Zrušeno“. Bude-li zadán jiný řetězec, zobrazte „Neznám vás“. -The password is checked as follows: +Heslo se ověří následovně: -- If it equals "TheMaster", then show "Welcome!", -- Another string -- show "Wrong password", -- For an empty string or cancelled input, show "Canceled" +- Pokud se rovná „Vládce“, tak zobrazte „Vítáme vás!“. +- Při jiném řetězci zobrazte „Špatné heslo“. +- Bude-li zadán prázdný řetězec nebo bude vstup zrušen, zobrazte „Zrušeno“. -The schema: +Schéma: ![](ifelse_task.svg) -Please use nested `if` blocks. Mind the overall readability of the code. +Použijte vnořené bloky `if`. Dbejte na celkovou čitelnost kódu. -Hint: passing an empty input to a prompt returns an empty string `''`. Pressing `key:ESC` during a prompt returns `null`. +Nápověda: po zadání prázdného vstupu `prompt` vrátí prázdný řetězec `''`. Po stisknutí klávesy `key:ESC` vrátí `null`. [demo] diff --git a/1-js/02-first-steps/11-logical-operators/article.md b/1-js/02-first-steps/11-logical-operators/article.md index 78c4fd2f1..88b5becb3 100644 --- a/1-js/02-first-steps/11-logical-operators/article.md +++ b/1-js/02-first-steps/11-logical-operators/article.md @@ -1,24 +1,24 @@ -# Logical operators +# Logické operátory -There are four logical operators in JavaScript: `||` (OR), `&&` (AND), `!` (NOT), `??` (Nullish Coalescing). Here we cover the first three, the `??` operator is in the next article. +V JavaScriptu jsou čtyři logické operátory: `||` (OR -- nebo), `&&` (AND -- a), `!` (NOT -- ne), `??` (koalescence). V tomto článku vysvětlíme první tři, operátor `??` bude vysvětlen v dalším článku. -Although they are called "logical", they can be applied to values of any type, not only boolean. Their result can also be of any type. +Ačkoli se nazývají „logické“, mohou být použity na hodnoty libovolného typu, nejenom boolean. Také jejich výsledek může být jakéhokoli typu. -Let's see the details. +Podívejme se na podrobnosti. ## || (OR) -The "OR" operator is represented with two vertical line symbols: +Operátor „OR“ („nebo“) je reprezentován dvěma svislými čarami za sebou: ```js -result = a || b; +výsledek = a || b; ``` -In classical programming, the logical OR is meant to manipulate boolean values only. If any of its arguments are `true`, it returns `true`, otherwise it returns `false`. +V klasickém programování je logické OR určeno pouze k manipulaci s booleovskými hodnotami. Je-li některý z jeho argumentů `true`, vrátí `true`, jinak vrátí `false`. -In JavaScript, the operator is a little bit trickier and more powerful. But first, let's see what happens with boolean values. +V JavaScriptu je tento operátor trochu rafinovanější a silnější. Nejprve se však podívejme, co se stane s hodnotami typu boolean. -There are four possible logical combinations: +Existují čtyři možné logické kombinace: ```js run alert( true || true ); // true @@ -27,124 +27,124 @@ alert( true || false ); // true alert( false || false ); // false ``` -As we can see, the result is always `true` except for the case when both operands are `false`. +Jak vidíme, výsledek je vždy `true` kromě případu, kdy jsou oba operandy `false`. -If an operand is not a boolean, it's converted to a boolean for the evaluation. +Není-li operand typu boolean, je pro účel vyhodnocení převeden na boolean. -For instance, the number `1` is treated as `true`, the number `0` as `false`: +Například číslo `1` se převede na `true`, číslo `0` na `false`: ```js run -if (1 || 0) { // works just like if( true || false ) - alert( 'truthy!' ); +if (1 || 0) { // funguje stejně jako if ( true || false ) + alert( 'pravda!' ); } ``` -Most of the time, OR `||` is used in an `if` statement to test if *any* of the given conditions is `true`. +Většinou se OR `||` používá v příkazu `if` k otestování, zda *některá* ze zadaných podmínek je `true`. -For example: +Příklad: ```js run -let hour = 9; +let hodina = 9; *!* -if (hour < 10 || hour > 18) { +if (hodina < 10 || hodina > 18) { */!* - alert( 'The office is closed.' ); + alert( 'Úřad má zavřeno.' ); } ``` -We can pass more conditions: +Můžeme předat další podmínky: ```js run -let hour = 12; -let isWeekend = true; +let hodina = 12; +let jeVíkend = true; -if (hour < 10 || hour > 18 || isWeekend) { - alert( 'The office is closed.' ); // it is the weekend +if (hodina < 10 || hodina > 18 || jeVíkend) { + alert( 'Úřad má zavřeno.' ); // je víkend } ``` -## OR "||" finds the first truthy value [#or-finds-the-first-truthy-value] +## OR „||“ najde první pravdivou hodnotu [#or-finds-the-first-truthy-value] -The logic described above is somewhat classical. Now, let's bring in the "extra" features of JavaScript. +Výše uvedená logika je vcelku klasická. Nyní se podívejme na „extra“ vlastnosti JavaScriptu. -The extended algorithm works as follows. +Rozšířený algoritmus funguje následovně. -Given multiple OR'ed values: +Zadáme více hodnot, spojených ORem: ```js -result = value1 || value2 || value3; +výsledek = hodnota1 || hodnota2 || hodnota3; ``` -The OR `||` operator does the following: +Operátor OR `||` provádí následující: -- Evaluates operands from left to right. -- For each operand, converts it to boolean. If the result is `true`, stops and returns the original value of that operand. -- If all operands have been evaluated (i.e. all were `false`), returns the last operand. +- Vyhodnocuje operandy zleva doprava. +- Každý operand převede na typ boolean. Je-li výsledek `true`, zastaví se a vrátí původní hodnotu tohoto operandu. +- Pokud byly vyhodnoceny všechny operandy (tj. všechny byly `false`), vrátí poslední operand. -A value is returned in its original form, without the conversion. +Hodnota se vrátí ve své původní podobě bez konverze. -In other words, a chain of OR `||` returns the first truthy value or the last one if no truthy value is found. +Jinými slovy, řetězec ORů `"||"` vrátí první pravdivou hodnotu, a pokud není žádná pravdivá hodnota nalezena, vrátí poslední hodnotu. -For instance: +Příklad: ```js run -alert( 1 || 0 ); // 1 (1 is truthy) +alert( 1 || 0 ); // 1 (1 je pravdivá) -alert( null || 1 ); // 1 (1 is the first truthy value) -alert( null || 0 || 1 ); // 1 (the first truthy value) +alert( null || 1 ); // 1 (1 je první pravdivá hodnota) +alert( null || 0 || 1 ); // 1 (první pravdivá hodnota) -alert( undefined || null || 0 ); // 0 (all falsy, returns the last value) +alert( undefined || null || 0 ); // 0 (všechny jsou nepravdivé, vrátí poslední hodnotu) ``` -This leads to some interesting usage compared to a "pure, classical, boolean-only OR". +To umožňuje některé zajímavé způsoby použití ve srovnání s „čistým, klasickým, pouze booleovským ORem“. -1. **Getting the first truthy value from a list of variables or expressions.** +1. **Získání první pravdivé hodnoty ze seznamu proměnných nebo výrazů.** - For instance, we have `firstName`, `lastName` and `nickName` variables, all optional (i.e. can be undefined or have falsy values). - - Let's use OR `||` to choose the one that has the data and show it (or `"Anonymous"` if nothing set): + Například máme proměnné `jméno`, `příjmení` a `přezdívka`, všechny jsou nepovinné (tj. mohou být `undefined` nebo obsahovat hodnoty nepravda). + + Vybereme pomocí OR `||` tu, která obsahuje data, a zobrazíme je (není-li nastaveno nic, zobrazíme `anonym`): ```js run - let firstName = ""; - let lastName = ""; - let nickName = "SuperCoder"; + let jméno = ""; + let příjmení = ""; + let přezdívka = "SuperCoder"; *!* - alert( firstName || lastName || nickName || "Anonymous"); // SuperCoder + alert( jméno || příjmení || přezdívka || "anonym"); // SuperCoder */!* ``` - If all variables were falsy, `"Anonymous"` would show up. + Kdyby všechny proměnné obsahovaly hodnotu nepravda, zobrazil by se `anonym`. -2. **Short-circuit evaluation.** +2. **Zkrácené vyhodnocení.** - Another feature of OR `||` operator is the so-called "short-circuit" evaluation. + Další vlastností operátoru OR `||` je tzv. „zkrácené“ vyhodnocení. - It means that `||` processes its arguments until the first truthy value is reached, and then the value is returned immediately, without even touching the other argument. + Znamená to, že `||` zpracovává své argumenty, dokud nenarazí na první pravdivou hodnotu, a pak tuto hodnotu okamžitě vrátí, aniž by se byť jen dotkl dalších argumentů. - The importance of this feature becomes obvious if an operand isn't just a value, but an expression with a side effect, such as a variable assignment or a function call. + Důležitost této vlastnosti se projeví, jestliže operandem nebude pouhá hodnota, ale výraz s vedlejším efektem, například přiřazení proměnné nebo volání funkce. - In the example below, only the second message is printed: + V níže uvedeném příkladu se zobrazí jen druhá zpráva: ```js run no-beautify - *!*true*/!* || alert("not printed"); - *!*false*/!* || alert("printed"); + *!*true*/!* || alert("nezobrazí se"); + *!*false*/!* || alert("zobrazí se"); ``` - In the first line, the OR `||` operator stops the evaluation immediately upon seeing `true`, so the `alert` isn't run. + Operátor OR `||` na prvním řádku se přestane vyhodnocovat ihned poté, co narazí na `true`, takže `alert` se nevykoná. - Sometimes, people use this feature to execute commands only if the condition on the left part is falsy. + Někdy lidé využívají tuto vlastnost k tomu, aby vykonali příkaz jen tehdy, není-li splněna podmínka na levé straně. ## && (AND) -The AND operator is represented with two ampersands `&&`: +Operátor „AND“ („a“) je reprezentován dvěma znaky „ampersand“ `&&`: ```js -result = a && b; +výsledek = a && b; ``` -In classical programming, AND returns `true` if both operands are truthy and `false` otherwise: +V klasickém programování AND vrací `true`, jsou-li oba operandy pravdivé, a `false` jinak: ```js run alert( true && true ); // true @@ -153,137 +153,137 @@ alert( true && false ); // false alert( false && false ); // false ``` -An example with `if`: +Příklad s `if`: ```js run -let hour = 12; -let minute = 30; +let hodina = 12; +let minuta = 30; -if (hour == 12 && minute == 30) { - alert( 'The time is 12:30' ); +if (hodina == 12 && minuta == 30) { + alert( 'Je právě 12:30' ); } ``` -Just as with OR, any value is allowed as an operand of AND: +Stejně jako u OR může být operandem AND jakákoli hodnota: ```js run -if (1 && 0) { // evaluated as true && false - alert( "won't work, because the result is falsy" ); +if (1 && 0) { // vyhodnotí se jako true && false + alert( "nevykoná se, protože výsledkem je nepravda" ); } ``` -## AND "&&" finds the first falsy value +## AND „&&“ najde první nepravdivou hodnotu -Given multiple AND'ed values: +Mějme několik hodnot spojených ANDem: ```js -result = value1 && value2 && value3; +výsledek = hodnota1 && hodnota2 && hodnota3; ``` -The AND `&&` operator does the following: +Operátor AND `&&` provádí následující: -- Evaluates operands from left to right. -- For each operand, converts it to a boolean. If the result is `false`, stops and returns the original value of that operand. -- If all operands have been evaluated (i.e. all were truthy), returns the last operand. +- Vyhodnocuje operandy zleva doprava. +- Každý operand převede na typ boolean. Je-li výsledek `false`, zastaví se a vrátí původní hodnotu tohoto operandu. +- Pokud byly vyhodnoceny všechny operandy (tj. všechny byly pravdivé), vrátí poslední operand. -In other words, AND returns the first falsy value or the last value if none were found. +Jinými slovy, řetězec ANDů `"&&"` vrátí první nepravdivou hodnotu, a pokud není žádná nepravdivá hodnota nalezena, vrátí poslední hodnotu. -The rules above are similar to OR. The difference is that AND returns the first *falsy* value while OR returns the first *truthy* one. +Výše uvedená pravidla se podobají operátoru OR. Rozdíl spočívá v tom, že AND najde první *nepravdivou* hodnotu, zatímco OR najde první *pravdivou*. -Examples: +Příklady: ```js run -// if the first operand is truthy, -// AND returns the second operand: +// je-li první operand pravdivý, +// AND vrátí druhý operand: alert( 1 && 0 ); // 0 alert( 1 && 5 ); // 5 -// if the first operand is falsy, -// AND returns it. The second operand is ignored +// je-li první operand nepravdivý, +// AND ho vrátí. Druhý operand se pak ignoruje. alert( null && 5 ); // null -alert( 0 && "no matter what" ); // 0 +alert( 0 && "je jedno co" ); // 0 ``` -We can also pass several values in a row. See how the first falsy one is returned: +Můžeme předat i více hodnot za sebou. Podívejme se, jak se vrátí první nepravdivá: ```js run alert( 1 && 2 && null && 3 ); // null ``` -When all values are truthy, the last value is returned: +Když jsou všechny hodnoty pravdivé, vrátí se poslední z nich: ```js run -alert( 1 && 2 && 3 ); // 3, the last one +alert( 1 && 2 && 3 ); // 3, poslední hodnota ``` -````smart header="Precedence of AND `&&` is higher than OR `||`" -The precedence of AND `&&` operator is higher than OR `||`. +````smart header="Priorita AND `&&` je vyšší než priorita OR `||`" +Priorita operátoru AND `&&` je vyšší než priorita operátoru OR `||`. -So the code `a && b || c && d` is essentially the same as if the `&&` expressions were in parentheses: `(a && b) || (c && d)`. +Kód `a && b || c && d` je tedy v zásadě stejný, jako kdyby výrazy s `&&` byly uzavřeny do závorek: `(a && b) || (c && d)`. ```` -````warn header="Don't replace `if` with `||` or `&&`" -Sometimes, people use the AND `&&` operator as a "shorter way to write `if`". +````warn header="Nenahrazujte příkaz `if` operátorem || nebo &&" +Někdy lidé používají operátor AND `&&` jako „kratší variantu `if`“. -For instance: +Příklad: ```js run let x = 1; -(x > 0) && alert( 'Greater than zero!' ); +(x > 0) && alert( 'Větší než nula!' ); ``` -The action in the right part of `&&` would execute only if the evaluation reaches it. That is, only if `(x > 0)` is true. +Akce napravo od `&&` se vykoná jen tehdy, když k ní dospěje vyhodnocování, tedy jen když `(x > 0)` platí. -So we basically have an analogue for: +Máme tedy v zásadě analogii k: ```js run let x = 1; -if (x > 0) alert( 'Greater than zero!' ); +if (x > 0) alert( 'Větší než nula!' ); ``` -Although, the variant with `&&` appears shorter, `if` is more obvious and tends to be a little bit more readable. So we recommend using every construct for its purpose: use `if` if we want `if` and use `&&` if we want AND. +Ačkoli varianta s `&&` se zdá být kratší, `if` je zřejmější a obvykle bývá trochu čitelnější. Doporučujeme tedy používat každou konstrukci k tomu, k čemu byla stvořena: používejte `if`, chcete-li „pokud“, a používejte `&&`, chcete-li AND. ```` ## ! (NOT) -The boolean NOT operator is represented with an exclamation sign `!`. +Booleovský operátor „NOT“ („ne“) je reprezentován vykřičníkem `!`. -The syntax is pretty simple: +Jeho syntaxe je velice jednoduchá: ```js -result = !value; +výsledek = !hodnota; ``` -The operator accepts a single argument and does the following: +Tento operátor přijímá jediný argument a provádí následující: -1. Converts the operand to boolean type: `true/false`. -2. Returns the inverse value. +1. Převede operand na typ boolean: `true/false`. +2. Vrátí opačnou hodnotu. -For instance: +Příklad: ```js run alert( !true ); // false alert( !0 ); // true ``` -A double NOT `!!` is sometimes used for converting a value to boolean type: +Někdy se používá dvojité NOT `!!` ke konverzi hodnoty na typ boolean: ```js run -alert( !!"non-empty string" ); // true +alert( !!"neprázdný řetězec" ); // true alert( !!null ); // false ``` -That is, the first NOT converts the value to boolean and returns the inverse, and the second NOT inverses it again. In the end, we have a plain value-to-boolean conversion. +Znamená to, že první NOT převede hodnotu na boolean a vrátí opak, druhý NOT jej znovu převrátí. Na konci tedy máme planou konverzi na boolean. -There's a little more verbose way to do the same thing -- a built-in `Boolean` function: +Existuje trochu výmluvnější způsob, jak udělat totéž -- vestavěná funkce `Boolean`: ```js run -alert( Boolean("non-empty string") ); // true +alert( Boolean("neprázdný řetězec") ); // true alert( Boolean(null) ); // false ``` -The precedence of NOT `!` is the highest of all logical operators, so it always executes first, before `&&` or `||`. +Operátor NOT `!` má nejvyšší prioritu ze všech logických operátorů, takže se vždy vykoná jako první, dříve než `&&` nebo `||`. diff --git a/1-js/02-first-steps/12-nullish-coalescing-operator/article.md b/1-js/02-first-steps/12-nullish-coalescing-operator/article.md index 0b2f092ab..4af2b3195 100644 --- a/1-js/02-first-steps/12-nullish-coalescing-operator/article.md +++ b/1-js/02-first-steps/12-nullish-coalescing-operator/article.md @@ -1,169 +1,168 @@ -# Nullish coalescing operator '??' +# Operátor koalescence „??“ [recent browser="new"] -The nullish coalescing operator is written as two question marks `??`. +Operátor koalescence se zapisuje dvěma otazníky za sebou `??`. -As it treats `null` and `undefined` similarly, we'll use a special term here, in this article. For brevity, we'll say that a value is "defined" when it's neither `null` nor `undefined`. +Protože tento operátor zachází s hodnotami `null` a `undefined` podobně, budeme v tomto článku používat speciální pojem. Řekněme, že výraz je „definován“, pokud nemá hodnotu `null` ani `undefined`. -The result of `a ?? b` is: -- if `a` is defined, then `a`, -- if `a` isn't defined, then `b`. +Výsledkem `a ?? b` je: +- pokud `a` je definovaný, pak `a`; +- pokud `a` není definovaný, pak `b`. -In other words, `??` returns the first argument if it's not `null/undefined`. Otherwise, the second one. +Jinými slovy, `??` vrátí první argument, jestliže nemá hodnotu `null/undefined`. Jinak vrátí druhý argument. -The nullish coalescing operator isn't anything completely new. It's just a nice syntax to get the first "defined" value of the two. +Operátor koalescence není zcela nová věc. Je to jen pěkná syntaxe, jak vrátit první „definovanou“ hodnotu ze dvou. -We can rewrite `result = a ?? b` using the operators that we already know, like this: +Můžeme přepsat `result = a ?? b` pomocí operátorů, které již známe, například: ```js result = (a !== null && a !== undefined) ? a : b; ``` -Now it should be absolutely clear what `??` does. Let's see where it helps. +Nyní by mělo být naprosto zřejmé, co `??` umí. Podíváme se, kde nám pomůže. -The common use case for `??` is to provide a default value. +Operátor `??` se běžně používá k udání výchozí hodnoty. -For example, here we show `user` if its value isn't `null/undefined`, otherwise `Anonymous`: +Například zde zobrazíme `anonym`, jestliže proměnná `uživatel` není definována: ```js run -let user; +let uživatel; -alert(user ?? "Anonymous"); // Anonymous (user is undefined) +alert(uživatel ?? "Anonym"); // Anonym (uživatel má hodnotu undefined) ``` -Here's the example with `user` assigned to a name: +Zde je příklad, kde má proměnná `uživatel` přiřazenou hodnotu: ```js run -let user = "John"; +let uživatel = "Jan"; -alert(user ?? "Anonymous"); // John (user is not null/undefined) +alert(uživatel ?? "Anonym"); // Jan (uživatel nemá hodnotu null/undefined) ``` -We can also use a sequence of `??` to select the first value from a list that isn't `null/undefined`. +Můžeme také použít sekvenci `??` k výběru první hodnoty ze seznamu, která není `null/undefined`. -Let's say we have a user's data in variables `firstName`, `lastName` or `nickName`. All of them may be not defined, if the user decided not to fill in the corresponding values. +Představme si, že máme data o uživateli v proměnných `jméno`, `příjmení` a `přezdívka`. Všechny mohou být nedefinované, jestliže se uživatel rozhodl tyto informace nevyplnit. -We'd like to display the user name using one of these variables, or show "Anonymous" if all of them are `null/undefined`. +Rádi bychom zobrazili uživatelské jméno: jednu z těchto tří proměnných, nebo „anonym“, pokud žádná z nich není definována. -Let's use the `??` operator for that: +Použijeme k tomu operátor `??`: ```js run -let firstName = null; -let lastName = null; -let nickName = "Supercoder"; +let jméno = null; +let příjmení = null; +let přezdívka = "Supercoder"; -// shows the first defined value: +// zobrazíme první definovanou hodnotu: *!* -alert(firstName ?? lastName ?? nickName ?? "Anonymous"); // Supercoder +alert(jméno ?? příjmení ?? přezdívka ?? "anonym"); // Supercoder */!* ``` -## Comparison with || +## Srovnání s || -The OR `||` operator can be used in the same way as `??`, as it was described in the [previous chapter](info:logical-operators#or-finds-the-first-truthy-value). +Operátor OR `||` můžeme používat stejným způsobem jako `??`, jak bylo popsáno v [předchozí kapitole](info:logical-operators#or-finds-the-first-truthy-value). -For example, in the code above we could replace `??` with `||` and still get the same result: +Například ve výše uvedeném kódu můžeme operátor `??` nahradit operátorem `||` a získat stejný výsledek: ```js run -let firstName = null; -let lastName = null; -let nickName = "Supercoder"; +let jméno = null; +let příjmení = null; +let přezdívka = "Supercoder"; -// shows the first truthy value: +// zobrazí první pravdivou hodnotu: *!* -alert(firstName || lastName || nickName || "Anonymous"); // Supercoder +alert(jméno || příjmení || přezdívka || "anonym"); // Supercoder */!* ``` -Historically, the OR `||` operator was there first. It's been there since the beginning of JavaScript, so developers were using it for such purposes for a long time. +Historicky tu operátor OR `||` byl dříve. Existuje již od začátků JavaScriptu, takže jej vývojáři pro tyto účely dlouhou dobu skutečně používali. -On the other hand, the nullish coalescing operator `??` was added to JavaScript only recently, and the reason for that was that people weren't quite happy with `||`. +Naproti tomu operátor koalescence `??` byl do JavaScriptu přidán teprve nedávno a důvodem bylo, že lidé nebyli s operátorem `||` zcela spokojeni. -The important difference between them is that: -- `||` returns the first *truthy* value. -- `??` returns the first *defined* value. +Důležitý rozdíl mezi nimi je, že: +- `||` vrací první *pravdivou* hodnotu. +- `??` vrací první *definovanou* hodnotu. -In other words, `||` doesn't distinguish between `false`, `0`, an empty string `""` and `null/undefined`. They are all the same -- falsy values. If any of these is the first argument of `||`, then we'll get the second argument as the result. +Jinými slovy, `||` nerozlišuje mezi `false`, `0`, prázdným řetězcem `""` a `null/undefined`. Pro něj jsou všechny stejné -- nepravdivé hodnoty. Je-li kterákoli z nich prvním argumentem `||`, dostaneme jako výsledek druhou hodnotu. -In practice though, we may want to use default value only when the variable is `null/undefined`. That is, when the value is really unknown/not set. - -For example, consider this: +V praxi však můžeme chtít použít defaultní hodnotu jen tehdy, je-li proměnná `null/undefined`, tedy když hodnota je opravdu neznámá nebo není nastavena. +Jako příklad poslouží tento kód: ```js run -let height = 0; +let výška = 0; -alert(height || 100); // 100 -alert(height ?? 100); // 0 +alert(výška || 100); // 100 +alert(výška ?? 100); // 0 ``` -- The `height || 100` checks `height` for being a falsy value, and it's `0`, falsy indeed. - - so the result of `||` is the second argument, `100`. -- The `height ?? 100` checks `height` for being `null/undefined`, and it's not, - - so the result is `height` "as is", that is `0`. +- `výška || 100` prověří, zda `výška` je nepravdivá hodnota, a protože je `0`, je tomu tak. + - výsledkem `||` je tedy druhý argument `100`. +- `výška ?? 100` prověří, zda `výška` je `null/undefined`, a to není. + - výsledkem je tedy `výška` tak, jak je, tedy `0`. -In practice, the zero height is often a valid value, that shouldn't be replaced with the default. So `??` does just the right thing. +V praxi je nulová výška často platnou hodnotou, takže by neměla být nahrazena defaultní hodnotou. Zde tedy bude správně fungovat `??`. -## Precedence +## Priorita -The precedence of the `??` operator is the same as `||`. They both equal `3` in the [MDN table](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence#Table). +Priorita operátoru `??` je stejná jako `||`. Oba operátory mají v [tabulce MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence#Table) prioritu `3`. -That means that, just like `||`, the nullish coalescing operator `??` is evaluated before `=` and `?`, but after most other operations, such as `+`, `*`. +To znamená, že operátor koalescence `??` se stejně jako `||` vyhodnocuje před `=` a `?`, ale až po většině ostatních operací, například `+`, `*`. -So we may need to add parentheses in expressions like this: +Jestliže tedy chcete vybrat hodnotu pomocí `??` ve výrazu obsahujícím i jiné operátory, zvažte použití závorek: ```js run -let height = null; -let width = null; +let výška = null; +let šířka = null; -// important: use parentheses -let area = (height ?? 100) * (width ?? 50); +// důležité: použijte závorky +let plocha = (výška ?? 100) * (šířka ?? 50); -alert(area); // 5000 +alert(plocha); // 5000 ``` -Otherwise, if we omit parentheses, then as `*` has the higher precedence than `??`, it would execute first, leading to incorrect results. +Kdybychom závorky nepoužili, `*` by se vykonalo dřív, neboť má vyšší prioritu než `??`. To by vedlo k nesprávným výsledkům. ```js -// without parentheses -let area = height ?? 100 * width ?? 50; +// bez závorek +let plocha = výška ?? 100 * šířka ?? 50; -// ...works this way (not what we want): -let area = height ?? (100 * width) ?? 50; +// ...funguje stejně jako toto (což jsme nechtěli): +let plocha = výška ?? (100 * šířka) ?? 50; ``` -### Using ?? with && or || +### Používání ?? společně s && nebo || -Due to safety reasons, JavaScript forbids using `??` together with `&&` and `||` operators, unless the precedence is explicitly specified with parentheses. +Z bezpečnostních důvodů JavaScript zakazuje používat `??` společně s operátory `&&` a `||`, pokud není priorita výslovně uvedena pomocí závorek. -The code below triggers a syntax error: +Následující kód vydá syntaktickou chybu: ```js run -let x = 1 && 2 ?? 3; // Syntax error +let x = 1 && 2 ?? 3; // Syntaktická chyba ``` -The limitation is surely debatable, it was added to the language specification with the purpose to avoid programming mistakes, when people start to switch from `||` to `??`. +Toto omezení je bezpochyby diskutabilní. Do specifikace jazyka bylo přidáno za účelem zabránit programátorským chybám, kdy lidé začnou z `||` přecházet na `??`. -Use explicit parentheses to work around it: +Omezení se dá se obejít pomocí závorek: ```js run *!* -let x = (1 && 2) ?? 3; // Works +let x = (1 && 2) ?? 3; // funguje */!* alert(x); // 2 ``` -## Summary +## Shrnutí -- The nullish coalescing operator `??` provides a short way to choose the first "defined" value from a list. +- Operátor koalescence `??` poskytuje zkratku, jak vybrat první „definovanou“ hodnotu ze seznamu. - It's used to assign default values to variables: + Používá se k přiřazení výchozích hodnot do proměnných: ```js - // set height=100, if height is null or undefined - height = height ?? 100; + // nastavíme proměnnou výška=100, je-li proměnná výška null nebo undefined + výška = výška ?? 100; ``` -- The operator `??` has a very low precedence, only a bit higher than `?` and `=`, so consider adding parentheses when using it in an expression. -- It's forbidden to use it with `||` or `&&` without explicit parentheses. +- Operátor `??` má velmi nízkou prioritu, jen o něco vyšší než `?` a `=`, takže když jej používáte ve výrazu, zvažte použití závorek. +- Je zakázáno používat jej spolu s operátory `||` nebo `&&` bez uvedení závorek. diff --git a/1-js/02-first-steps/13-while-for/1-loop-last-value/solution.md b/1-js/02-first-steps/13-while-for/1-loop-last-value/solution.md index 43ee4aad3..92e28c94e 100644 --- a/1-js/02-first-steps/13-while-for/1-loop-last-value/solution.md +++ b/1-js/02-first-steps/13-while-for/1-loop-last-value/solution.md @@ -1,4 +1,4 @@ -The answer: `1`. +Odpověď: `1`. ```js run let i = 3; @@ -8,18 +8,18 @@ while (i) { } ``` -Every loop iteration decreases `i` by `1`. The check `while(i)` stops the loop when `i = 0`. +Každá iterace cyklu sníží `i` o `1`. Ověření `while(i)` zastaví cyklus, když `i = 0`. -Hence, the steps of the loop form the following sequence ("loop unrolled"): +Jednotlivé kroky cyklu tedy vytvoří následující posloupnost: ```js let i = 3; -alert(i--); // shows 3, decreases i to 2 +alert(i--); // zobrazí 3, sníží i na 2 -alert(i--) // shows 2, decreases i to 1 +alert(i--) // zobrazí 2, sníží i na 1 -alert(i--) // shows 1, decreases i to 0 +alert(i--) // zobrazí 1, sníží i na 0 -// done, while(i) check stops the loop +// hotovo, ověření while(i) ukončí cyklus ``` diff --git a/1-js/02-first-steps/13-while-for/1-loop-last-value/task.md b/1-js/02-first-steps/13-while-for/1-loop-last-value/task.md index 3b847dfa2..d9b36c548 100644 --- a/1-js/02-first-steps/13-while-for/1-loop-last-value/task.md +++ b/1-js/02-first-steps/13-while-for/1-loop-last-value/task.md @@ -2,9 +2,9 @@ importance: 3 --- -# Last loop value +# Poslední hodnota v cyklu -What is the last value alerted by this code? Why? +Jaká je poslední hodnota, kterou vypíše tento kód? Proč? ```js let i = 3; diff --git a/1-js/02-first-steps/13-while-for/2-which-value-while/solution.md b/1-js/02-first-steps/13-while-for/2-which-value-while/solution.md index 495359876..041b86dd9 100644 --- a/1-js/02-first-steps/13-while-for/2-which-value-while/solution.md +++ b/1-js/02-first-steps/13-while-for/2-which-value-while/solution.md @@ -1,30 +1,31 @@ -The task demonstrates how postfix/prefix forms can lead to different results when used in comparisons. +Tato úloha ukazuje, jak může prefixová a postfixová notace vést k rozdílným výsledkům, když je použijeme v porovnání. -1. **From 1 to 4** +1. **Od 1 do 4** ```js run let i = 0; while (++i < 5) alert( i ); ``` - The first value is `i = 1`, because `++i` first increments `i` and then returns the new value. So the first comparison is `1 < 5` and the `alert` shows `1`. + První hodnota je `i = 1`, jelikož `++i` nejprve zvýší `i` a pak vrátí novou hodnotu. První porovnání je tedy `1 < 5` a `alert` zobrazí `1`. - Then follow `2, 3, 4…` -- the values show up one after another. The comparison always uses the incremented value, because `++` is before the variable. + Následují `2, 3, 4…` -- hodnoty se zobrazí jedna po druhé. Porovnání se vždy dívá na zvýšenou hodnotu, protože `++` je před proměnnou. - Finally, `i = 4` is incremented to `5`, the comparison `while(5 < 5)` fails, and the loop stops. So `5` is not shown. -2. **From 1 to 5** + Nakonec `i = 4` se zvýší na `5`, porovnání `while(5 < 5)` neuspěje a cyklus skončí. Takže `5` se nezobrazí. + +2. **Od 1 do 5** ```js run let i = 0; while (i++ < 5) alert( i ); ``` - The first value is again `i = 1`. The postfix form of `i++` increments `i` and then returns the *old* value, so the comparison `i++ < 5` will use `i = 0` (contrary to `++i < 5`). + První hodnota je opět `i = 1`. Postfixová notace `i++` zvýší `i` a pak vrátí *starou* hodnotu, takže porovnání `i++ < 5` se dívá na `i = 0` (na rozdíl od `++i < 5`). - But the `alert` call is separate. It's another statement which executes after the increment and the comparison. So it gets the current `i = 1`. + Avšak `alert` se volá odděleně. Je to další příkaz, který se spustí až po zvýšení a porovnání. Proto obdrží aktuální `i = 1`. - Then follow `2, 3, 4…` + Následují `2, 3, 4…` - Let's stop on `i = 4`. The prefix form `++i` would increment it and use `5` in the comparison. But here we have the postfix form `i++`. So it increments `i` to `5`, but returns the old value. Hence the comparison is actually `while(4 < 5)` -- true, and the control goes on to `alert`. + Zastavme se u `i = 4`. Prefixová notace `++i` by je zvýšila a v porovnání by použila `5`. Tady však máme postfixovou notaci `i++`. Ta zvýší `i` na `5`, ale vrátí starou hodnotu. Proto se provede porovnání `while(4 < 5)` -- pravda, tudíž řízení přejde k `alert`. - The value `i = 5` is the last one, because on the next step `while(5 < 5)` is false. + Hodnota `i = 5` je poslední, jelikož další krok `while(5 < 5)` dává nepravdu. diff --git a/1-js/02-first-steps/13-while-for/2-which-value-while/task.md b/1-js/02-first-steps/13-while-for/2-which-value-while/task.md index 298213237..3a7fff489 100644 --- a/1-js/02-first-steps/13-while-for/2-which-value-while/task.md +++ b/1-js/02-first-steps/13-while-for/2-which-value-while/task.md @@ -2,19 +2,18 @@ importance: 4 --- -# Which values does the while loop show? +# Které hodnoty zobrazí cyklus while? -For every loop iteration, write down which value it outputs and then compare it with the solution. +Pro oba cykly si zapište hodnoty, které budou vypsány, a pak je porovnejte s řešením. -Both loops `alert` the same values, or not? - -1. The prefix form `++i`: +Vypíše `alert` v obou cyklech stejné hodnoty, nebo ne? +1. Prefixová notace `++i`: ```js let i = 0; while (++i < 5) alert( i ); ``` -2. The postfix form `i++` +2. Postfixová notace `i++` ```js let i = 0; diff --git a/1-js/02-first-steps/13-while-for/3-which-value-for/solution.md b/1-js/02-first-steps/13-while-for/3-which-value-for/solution.md index e2e28e75b..61cc4510d 100644 --- a/1-js/02-first-steps/13-while-for/3-which-value-for/solution.md +++ b/1-js/02-first-steps/13-while-for/3-which-value-for/solution.md @@ -1,4 +1,4 @@ -**The answer: from `0` to `4` in both cases.** +**Odpověď: od `0` do `4` v obou případech.** ```js run for (let i = 0; i < 5; ++i) alert( i ); @@ -6,12 +6,12 @@ for (let i = 0; i < 5; ++i) alert( i ); for (let i = 0; i < 5; i++) alert( i ); ``` -That can be easily deducted from the algorithm of `for`: +Lze to snadno odvodit z algoritmu pro `for`: -1. Execute once `i = 0` before everything (begin). -2. Check the condition `i < 5` -3. If `true` -- execute the loop body `alert(i)`, and then `i++` +1. Nejdříve se jedenkrát vykoná `i = 0` (začátek). +2. Ověří se podmínka `i < 5`. +3. Je-li `true`, vykoná se tělo cyklu `alert(i)` a pak `i++`. -The increment `i++` is separated from the condition check (2). That's just another statement. +Zvýšení `i++` je odděleno od testu podmínky (2). Je to jen další příkaz. -The value returned by the increment is not used here, so there's no difference between `i++` and `++i`. +Hodnota vrácená zvýšením se tady nepoužívá, takže mezi `i++` a `++i` není žádný rozdíl. diff --git a/1-js/02-first-steps/13-while-for/3-which-value-for/task.md b/1-js/02-first-steps/13-while-for/3-which-value-for/task.md index bfefa63f5..6b05ab195 100644 --- a/1-js/02-first-steps/13-while-for/3-which-value-for/task.md +++ b/1-js/02-first-steps/13-while-for/3-which-value-for/task.md @@ -2,18 +2,18 @@ importance: 4 --- -# Which values get shown by the "for" loop? +# Které hodnoty zobrazí cyklus „for“? -For each loop write down which values it is going to show. Then compare with the answer. +Pro oba cykly zapište hodnoty, které budou zobrazeny, a pak je porovnejte s řešením. -Both loops `alert` same values or not? +Vypíše `alert` v obou cyklech stejné hodnoty, nebo ne? -1. The postfix form: +1. Postfixová notace: ```js for (let i = 0; i < 5; i++) alert( i ); ``` -2. The prefix form: +2. Prefixová notace: ```js for (let i = 0; i < 5; ++i) alert( i ); diff --git a/1-js/02-first-steps/13-while-for/4-for-even/solution.md b/1-js/02-first-steps/13-while-for/4-for-even/solution.md index e8e66bb47..00758ebff 100644 --- a/1-js/02-first-steps/13-while-for/4-for-even/solution.md +++ b/1-js/02-first-steps/13-while-for/4-for-even/solution.md @@ -8,4 +8,4 @@ for (let i = 2; i <= 10; i++) { } ``` -We use the "modulo" operator `%` to get the remainder and check for the evenness here. +K získání zbytku po dělení dvěma a ověření sudosti zde používáme operátor „modulo“ `%`. diff --git a/1-js/02-first-steps/13-while-for/4-for-even/task.md b/1-js/02-first-steps/13-while-for/4-for-even/task.md index ff34e7e40..059ea4b39 100644 --- a/1-js/02-first-steps/13-while-for/4-for-even/task.md +++ b/1-js/02-first-steps/13-while-for/4-for-even/task.md @@ -2,8 +2,8 @@ importance: 5 --- -# Output even numbers in the loop +# Vypište sudá čísla v cyklu -Use the `for` loop to output even numbers from `2` to `10`. +Použitím cyklu `for` vypište sudá čísla od `2` do `10`. [demo] diff --git a/1-js/02-first-steps/13-while-for/5-replace-for-while/solution.md b/1-js/02-first-steps/13-while-for/5-replace-for-while/solution.md index 612cf559c..d83493c91 100644 --- a/1-js/02-first-steps/13-while-for/5-replace-for-while/solution.md +++ b/1-js/02-first-steps/13-while-for/5-replace-for-while/solution.md @@ -3,7 +3,7 @@ ```js run let i = 0; while (i < 3) { - alert( `number ${i}!` ); + alert( `číslo ${i}!` ); i++; } ``` diff --git a/1-js/02-first-steps/13-while-for/5-replace-for-while/task.md b/1-js/02-first-steps/13-while-for/5-replace-for-while/task.md index 0c69d9c2d..6f3ceb5f1 100644 --- a/1-js/02-first-steps/13-while-for/5-replace-for-while/task.md +++ b/1-js/02-first-steps/13-while-for/5-replace-for-while/task.md @@ -2,13 +2,13 @@ importance: 5 --- -# Replace "for" with "while" +# Nahraďte cyklus „for“ cyklem „while“ -Rewrite the code changing the `for` loop to `while` without altering its behavior (the output should stay same). +Přepište kód tak, že cyklus `for` zaměníte za cyklus `while`, aniž by se změnilo jeho chování (výstup má zůstat stejný). ```js run for (let i = 0; i < 3; i++) { - alert( `number ${i}!` ); + alert( `číslo ${i}!` ); } ``` diff --git a/1-js/02-first-steps/13-while-for/6-repeat-until-correct/solution.md b/1-js/02-first-steps/13-while-for/6-repeat-until-correct/solution.md index c7de5f09b..3b021c198 100644 --- a/1-js/02-first-steps/13-while-for/6-repeat-until-correct/solution.md +++ b/1-js/02-first-steps/13-while-for/6-repeat-until-correct/solution.md @@ -1,15 +1,15 @@ ```js run demo -let num; +let číslo; do { - num = prompt("Enter a number greater than 100?", 0); -} while (num <= 100 && num); + číslo = prompt("Zadejte číslo větší než 100", 0); +} while (číslo <= 100 && číslo); ``` -The loop `do..while` repeats while both checks are truthy: +Cyklus `do..while` se opakuje, dokud jsou obě podmínky splněny: -1. The check for `num <= 100` -- that is, the entered value is still not greater than `100`. -2. The check `&& num` is false when `num` is `null` or an empty string. Then the `while` loop stops too. +1. Podmínka `číslo <= 100` -- tedy že zadaná hodnota stále není větší než `100`. +2. Podmínka `&& číslo` je nepravdivá, když `číslo` je `null` nebo prázdný řetězec. Pak se cyklus `while` rovněž zastaví. -P.S. If `num` is `null` then `num <= 100` is `true`, so without the 2nd check the loop wouldn't stop if the user clicks CANCEL. Both checks are required. +P.S. Jestliže `číslo` je `null`, pak `číslo <= 100` vydá `true`, takže bez druhé podmínky by se cyklus nezastavil, kdyby uživatel stiskl Storno. Obě podmínky jsou zapotřebí. diff --git a/1-js/02-first-steps/13-while-for/6-repeat-until-correct/task.md b/1-js/02-first-steps/13-while-for/6-repeat-until-correct/task.md index 0788ee76e..149a6658e 100644 --- a/1-js/02-first-steps/13-while-for/6-repeat-until-correct/task.md +++ b/1-js/02-first-steps/13-while-for/6-repeat-until-correct/task.md @@ -2,12 +2,12 @@ importance: 5 --- -# Repeat until the input is correct +# Opakujte, dokud vstup nebude správně -Write a loop which prompts for a number greater than `100`. If the visitor enters another number -- ask them to input again. +Napište cyklus, který se bude ptát na číslo větší než `100`. Pokud návštěvník zadá jiné číslo, zeptejte se ho znovu. -The loop must ask for a number until either the visitor enters a number greater than `100` or cancels the input/enters an empty line. +Cyklus se musí ptát na číslo tak dlouho, než návštěvník zadá číslo větší než `100` nebo zruší vstup či zadá prázdný řádek. -Here we can assume that the visitor only inputs numbers. There's no need to implement a special handling for a non-numeric input in this task. +Zde předpokládáme, že uživatel zadává pouze čísla. V této úloze nemusíte implementovat zvláštní zacházení s nečíselnými vstupy. [demo] diff --git a/1-js/02-first-steps/13-while-for/7-list-primes/solution.md b/1-js/02-first-steps/13-while-for/7-list-primes/solution.md index b4b64b6fa..6fcd617dd 100644 --- a/1-js/02-first-steps/13-while-for/7-list-primes/solution.md +++ b/1-js/02-first-steps/13-while-for/7-list-primes/solution.md @@ -1,29 +1,29 @@ -There are many algorithms for this task. +Pro tuto úlohu existuje mnoho algoritmů. -Let's use a nested loop: +Použijeme vnořený cyklus: ```js -For each i in the interval { - check if i has a divisor from 1..i - if yes => the value is not a prime - if no => the value is a prime, show it +pro každé i v intervalu { + ověř, zda i má dělitele mezi 1..i + pokud ano => i není prvočíslo + pokud ne => i je prvočíslo, zobraz ho } ``` -The code using a label: +Kód s použitím návěští: ```js run let n = 10; -nextPrime: -for (let i = 2; i <= n; i++) { // for each i... +dalšíPrvočíslo: +for (let i = 2; i <= n; i++) { // pro každé i... - for (let j = 2; j < i; j++) { // look for a divisor.. - if (i % j == 0) continue nextPrime; // not a prime, go next i + for (let j = 2; j < i; j++) { // hledáme dělitele... + if (i % j == 0) continue dalšíPrvočíslo; // není to prvočíslo, přejdeme k dalšímu i } - alert( i ); // a prime + alert( i ); // je to prvočíslo } ``` -There's a lot of space to optimize it. For instance, we could look for the divisors from `2` to square root of `i`. But anyway, if we want to be really efficient for large intervals, we need to change the approach and rely on advanced maths and complex algorithms like [Quadratic sieve](https://en.wikipedia.org/wiki/Quadratic_sieve), [General number field sieve](https://en.wikipedia.org/wiki/General_number_field_sieve) etc. +Je zde mnoho prostoru k optimalizaci. Můžeme se například dívat jen na dělitele od `2` do odmocniny `i`. Kdybychom však chtěli být opravdu efektivní i pro velké intervaly, museli bychom změnit přístup a zaměřit se na vysokou matematiku a složité algoritmy, např. [kvadratické síto](https://en.wikipedia.org/wiki/Quadratic_sieve), [Obecné číselné teoretické síto (GNFS)](https://en.wikipedia.org/wiki/General_number_field_sieve) atd. diff --git a/1-js/02-first-steps/13-while-for/7-list-primes/task.md b/1-js/02-first-steps/13-while-for/7-list-primes/task.md index 6344b9f6f..e61b644bb 100644 --- a/1-js/02-first-steps/13-while-for/7-list-primes/task.md +++ b/1-js/02-first-steps/13-while-for/7-list-primes/task.md @@ -2,16 +2,16 @@ importance: 3 --- -# Output prime numbers +# Vypište prvočísla -An integer number greater than `1` is called a [prime](https://en.wikipedia.org/wiki/Prime_number) if it cannot be divided without a remainder by anything except `1` and itself. +Celé číslo větší než `1` se nazývá [prvočíslo](https://cs.wikipedia.org/wiki/Prvočíslo), jestliže není dělitelné beze zbytku jiným celým číslem než `1` a sebou samým. -In other words, `n > 1` is a prime if it can't be evenly divided by anything except `1` and `n`. +Jinými slovy, číslo `n > 1` je prvočíslo, jestliže není dělitelné beze zbytku jiným číslem než `1` a `n`. -For example, `5` is a prime, because it cannot be divided without a remainder by `2`, `3` and `4`. +Například `5` je prvočíslo, protože není dělitelné beze zbytku číslem `2`, `3` ani `4`. -**Write the code which outputs prime numbers in the interval from `2` to `n`.** +**Napište kód, který vypíše všechna prvočísla v intervalu od `2` do `n`.** -For `n = 10` the result will be `2,3,5,7`. +Například pro `n = 10` bude výsledek `2,3,5,7`. -P.S. The code should work for any `n`, not be hard-tuned for any fixed value. +P.S. Kód by měl fungovat pro jakékoli `n`. Neměl by být vyladěn jen pro nějakou pevnou hodnotu. diff --git a/1-js/02-first-steps/13-while-for/article.md b/1-js/02-first-steps/13-while-for/article.md index d1b749888..5bf451964 100644 --- a/1-js/02-first-steps/13-while-for/article.md +++ b/1-js/02-first-steps/13-while-for/article.md @@ -1,67 +1,67 @@ -# Loops: while and for +# Cykly: while a for -We often need to repeat actions. +Často potřebujeme opakovat některé akce. -For example, outputting goods from a list one after another or just running the same code for each number from 1 to 10. +Například vypsat ze seznamu jedno zboží po druhém nebo jen vykonat stejný kód pro každé z čísel od 1 do 10. -*Loops* are a way to repeat the same code multiple times. +Způsob, jak opakovat stejný kód několikrát, poskytují *cykly* neboli *smyčky*. -```smart header="The for..of and for..in loops" -A small announcement for advanced readers. +```smart header="Cykly for..of a for..in" +Malé oznámení pro pokročilé čtenáře. -This article covers only basic loops: `while`, `do..while` and `for(..;..;..)`. +Tento článek probírá jen základní cykly: `while`, `do..while` a `for(..;..;..)`. -If you came to this article searching for other types of loops, here are the pointers: +Jestli jste sem přišli hledat informace o jiných cyklech, najdete je zde: -- See [for..in](info:object#forin) to loop over object properties. -- See [for..of](info:array#loops) and [iterables](info:iterable) for looping over arrays and iterable objects. +- [for..in](info:object#forin) pro procházení vlastností objektu. +- [for..of](info:array#loops) and [iterables](info:iterable) pro procházení polí a iterovatelných objektů. -Otherwise, please read on. +Jinak čtěte dále. ``` -## The "while" loop +## Cyklus „while“ -The `while` loop has the following syntax: +Cyklus `while` má následující syntaxi: ```js -while (condition) { - // code - // so-called "loop body" +while (podmínka) { + // kód + // tzv. „tělo cyklu“ } ``` -While the `condition` is truthy, the `code` from the loop body is executed. +Dokud je `podmínka` pravdivá, `kód` z těla cyklu se bude vykonávat. -For instance, the loop below outputs `i` while `i < 3`: +Například tento cyklus vypisuje proměnnou `i` tak dlouho, dokud je `i < 3`: ```js run let i = 0; -while (i < 3) { // shows 0, then 1, then 2 +while (i < 3) { // zobrazí 0, pak 1, pak 2 alert( i ); i++; } ``` -A single execution of the loop body is called *an iteration*. The loop in the example above makes three iterations. +Jedno vykonání těla cyklu se nazývá *iterace*. Cyklus ve výše uvedeném příkladu vykoná tři iterace. -If `i++` was missing from the example above, the loop would repeat (in theory) forever. In practice, the browser provides ways to stop such loops, and in server-side JavaScript, we can kill the process. +Kdyby v tomto příkladu chyběl příkaz `i++`, cyklus by se vykonával (teoreticky) donekonečna. V praxi prohlížeče poskytují způsoby, jak takový cyklus zastavit, a v JavaScriptu na serverové straně můžeme proces zastavit („shodit“) sami. -Any expression or variable can be a loop condition, not just comparisons: the condition is evaluated and converted to a boolean by `while`. +Platnou podmínkou cyklu může být jakákoli proměnná nebo výraz, nejenom porovnání: příkaz `while` podmínku vyhodnotí a převede na typ boolean. -For instance, a shorter way to write `while (i != 0)` is `while (i)`: +Například `while (i != 0)` se dá napsat kratším způsobem jako `while (i)`: ```js run let i = 3; *!* -while (i) { // when i becomes 0, the condition becomes falsy, and the loop stops +while (i) { // když i bude 0, podmínka bude nepravdivá a cyklus skončí */!* alert( i ); i--; } ``` -````smart header="Curly braces are not required for a single-line body" -If the loop body has a single statement, we can omit the curly braces `{…}`: +````smart header="Tělo tvořené jedním příkazem nemusí mít složené závorky" +Obsahuje-li tělo cyklu jen jediný příkaz, můžeme složené závorky `{…}` vynechat: ```js run let i = 3; @@ -71,19 +71,19 @@ while (i) alert(i--); ``` ```` -## The "do..while" loop +## Cyklus „do..while“ -The condition check can be moved *below* the loop body using the `do..while` syntax: +Ověření podmínky můžeme přesunout až *za* tělo cyklu, použijeme-li syntaxi `do..while`: ```js do { - // loop body -} while (condition); + // tělo cyklu +} while (podmínka); ``` -The loop will first execute the body, then check the condition, and, while it's truthy, execute it again and again. +Cyklus nejprve vykoná tělo, pak ověří podmínku, a dokud je pravdivá, bude vykonávat tělo znovu a znovu. -For example: +Příklad: ```js run let i = 0; @@ -93,107 +93,107 @@ do { } while (i < 3); ``` -This form of syntax should only be used when you want the body of the loop to execute **at least once** regardless of the condition being truthy. Usually, the other form is preferred: `while(…) {…}`. +Tuto formu syntaxe byste měli používat jen tehdy, když chcete, aby se tělo cyklu vykonalo vždy **aspoň jednou**, bez ohledu na pravdivost podmínky. Obvykle se dává přednost předchozí formě: `while(…) {…}`. -## The "for" loop +## Cyklus „for“ -The `for` loop is more complex, but it's also the most commonly used loop. +Cyklus `for` je složitější, ale také nejčastěji používaný. -It looks like this: +Vypadá takto: ```js -for (begin; condition; step) { - // ... loop body ... +for (začátek; podmínka; krok) { + // ... tělo cyklu ... } ``` -Let's learn the meaning of these parts by example. The loop below runs `alert(i)` for `i` from `0` up to (but not including) `3`: +Význam jednotlivých částí si objasníme na příkladu. Níže uvedený cyklus vykoná `alert(i)` pro `i` od `0` až do (ale ne včetně) `3`: ```js run -for (let i = 0; i < 3; i++) { // shows 0, then 1, then 2 +for (let i = 0; i < 3; i++) { // zobrazí 0, pak 1, pak 2 alert(i); } ``` -Let's examine the `for` statement part-by-part: +Prozkoumáme příkaz `for` po částech: -| part | | | +| část | | | |-------|----------|----------------------------------------------------------------------------| -| begin | `let i = 0` | Executes once upon entering the loop. | -| condition | `i < 3`| Checked before every loop iteration. If false, the loop stops. | -| body | `alert(i)`| Runs again and again while the condition is truthy. | -| step| `i++` | Executes after the body on each iteration. | +| začátek | `let i = 0` | Vykoná se jednou po vstupu do cyklu. | +| podmínka | `i < 3`| Kontroluje se před každou iterací cyklu. Je-li nepravdivá, cyklus skončí. | +| tělo | `alert(i)`| Vykonává se stále znovu, dokud je podmínka pravdivá. | +| krok | `i++` | Vykoná se po těle cyklu při každé iteraci. | -The general loop algorithm works like this: +Všeobecný algoritmus cyklu funguje takto: ``` -Run begin -→ (if condition → run body and run step) -→ (if condition → run body and run step) -→ (if condition → run body and run step) +Vykonej začátek +→ (platí-li podmínka → vykonej tělo a vykonej krok) +→ (platí-li podmínka → vykonej tělo a vykonej krok) +→ (platí-li podmínka → vykonej tělo a vykonej krok) → ... ``` -That is, `begin` executes once, and then it iterates: after each `condition` test, `body` and `step` are executed. +To znamená, že `začátek` se vykoná jednou a pak se iteruje: po každém testu `podmínky` se vykoná `tělo` a `krok`. -If you are new to loops, it could help to go back to the example and reproduce how it runs step-by-step on a piece of paper. +Jestliže s cykly teprve začínáte, pomůže vám vrátit se k příkladu a na papíře si krok po kroku projít, jak se vykoná. -Here's exactly what happens in our case: +V našem případě se stane přesně toto: ```js // for (let i = 0; i < 3; i++) alert(i) -// run begin +// vykonej začátek let i = 0 -// if condition → run body and run step +// platí-li podmínka → vykonej tělo a vykonej krok if (i < 3) { alert(i); i++ } -// if condition → run body and run step +// platí-li podmínka → vykonej tělo a vykonej krok if (i < 3) { alert(i); i++ } -// if condition → run body and run step +// platí-li podmínka → vykonej tělo a vykonej krok if (i < 3) { alert(i); i++ } -// ...finish, because now i == 3 +// ...konec, protože nyní je i == 3 ``` -````smart header="Inline variable declaration" -Here, the "counter" variable `i` is declared right in the loop. This is called an "inline" variable declaration. Such variables are visible only inside the loop. +````smart header="Inline deklarace proměnné" +„Čítačová“ proměnná `i` je zde deklarována rovnou v cyklu. To se nazývá „inline“ (na místě) deklarace proměnné. Takové proměnné jsou viditelné jen uvnitř cyklu. ```js run for (*!*let*/!* i = 0; i < 3; i++) { alert(i); // 0, 1, 2 } -alert(i); // error, no such variable +alert(i); // chyba, tato proměnná neexistuje ``` -Instead of defining a variable, we could use an existing one: +Namísto definice nové proměnné můžeme použít existující: ```js run let i = 0; -for (i = 0; i < 3; i++) { // use an existing variable +for (i = 0; i < 3; i++) { // použijeme existující proměnnou alert(i); // 0, 1, 2 } -alert(i); // 3, visible, because declared outside of the loop +alert(i); // 3, je viditelná, protože byla deklarována mimo cyklus ``` ```` -### Skipping parts +### Vynechávání částí -Any part of `for` can be skipped. +Kteroukoli část `for` můžeme vynechat. -For example, we can omit `begin` if we don't need to do anything at the loop start. +Například můžeme vynechat `začátek`, jestliže nechceme na začátku cyklu nic provádět. -Like here: +Například zde: ```js run -let i = 0; // we have i already declared and assigned +let i = 0; // už máme proměnnou i deklarovanou a přiřazenou -for (; i < 3; i++) { // no need for "begin" +for (; i < 3; i++) { // nepotřebujeme „začátek“ alert( i ); // 0, 1, 2 } ``` -We can also remove the `step` part: +Můžeme vynechat i část `krok`: ```js run let i = 0; @@ -203,69 +203,69 @@ for (; i < 3;) { } ``` -This makes the loop identical to `while (i < 3)`. +Pak bude cyklus stejný jako `while (i < 3)`. -We can actually remove everything, creating an infinite loop: +Ve skutečnosti můžeme vynechat všechno a vytvořit tím nekonečnou smyčku: ```js for (;;) { - // repeats without limits + // opakuje se neustále } ``` -Please note that the two `for` semicolons `;` must be present. Otherwise, there would be a syntax error. +Všimněte si, že dva středníky `;` ve `for` musejí být uvedeny, jinak nastane syntaktická chyba. -## Breaking the loop +## Opuštění smyčky -Normally, a loop exits when its condition becomes falsy. +Za běžných okolností se cyklus ukončí, když jeho podmínka přestane být splněna. -But we can force the exit at any time using the special `break` directive. +Kdykoli si však můžeme ukončení vynutit použitím speciální direktivy `break`. -For example, the loop below asks the user for a series of numbers, "breaking" when no number is entered: +Například níže uvedený cyklus se uživatele ptá na sérii čísel, a když uživatel žádné číslo nezadá, cyklus skončí: ```js run -let sum = 0; +let součet = 0; while (true) { - let value = +prompt("Enter a number", ''); + let hodnota = +prompt("Zadejte číslo", ''); *!* - if (!value) break; // (*) + if (!hodnota) break; // (*) */!* - sum += value; + součet += hodnota; } -alert( 'Sum: ' + sum ); +alert( 'Součet: ' + součet ); ``` -The `break` directive is activated at the line `(*)` if the user enters an empty line or cancels the input. It stops the loop immediately, passing control to the first line after the loop. Namely, `alert`. +Direktiva `break` na řádku `(*)` se aktivuje, jestliže uživatel zadá prázdný řádek nebo zruší vstup. Okamžitě ukončí cyklus a předá řízení na první řádek za cyklem, konkrétně `alert`. -The combination "infinite loop + `break` as needed" is great for situations when a loop's condition must be checked not in the beginning or end of the loop, but in the middle or even in several places of its body. +Kombinace „nekonečná smyčka + `break`, když je zapotřebí“ je výhodná v situacích, kdy potřebujeme podmínku cyklu ověřovat ne na začátku nebo na konci cyklu, ale uprostřed cyklu nebo dokonce na několika místech jeho těla. -## Continue to the next iteration [#continue] +## Pokračování k další iteraci [#continue] -The `continue` directive is a "lighter version" of `break`. It doesn't stop the whole loop. Instead, it stops the current iteration and forces the loop to start a new one (if the condition allows). +Direktiva `continue` je „slabší verzí“ `break`. Nezastaví celý cyklus, ale zastaví jen právě probíhající iteraci a přinutí cyklus začít novou (jestliže podmínka platí). -We can use it if we're done with the current iteration and would like to move on to the next one. +Můžeme ji použít, když jsme hotovi s právě probíhající iterací a rádi bychom okamžitě přešli k další. -The loop below uses `continue` to output only odd values: +Níže uvedený cyklus využívá `continue` k vypsání jen lichých hodnot: ```js run no-beautify for (let i = 0; i < 10; i++) { - // if true, skip the remaining part of the body + // je-li podmínka pravdivá, přeskočíme zbytek těla *!*if (i % 2 == 0) continue;*/!* - alert(i); // 1, then 3, 5, 7, 9 + alert(i); // 1, pak 3, 5, 7, 9 } ``` -For even values of `i`, the `continue` directive stops executing the body and passes control to the next iteration of `for` (with the next number). So the `alert` is only called for odd values. +Pro sudé hodnoty `i` direktiva `continue` ukončí vykonávání těla a předá řízení další iteraci `for` (s dalším číslem). Proto se `alert` bude volat jedině pro liché hodnoty. -````smart header="The `continue` directive helps decrease nesting" -A loop that shows odd values could look like this: +````smart header="Direktiva `continue` pomáhá redukovat vnoření" +Cyklus, který zobrazuje liché hodnoty, by mohl vypadat i takto: ```js run for (let i = 0; i < 10; i++) { @@ -277,15 +277,15 @@ for (let i = 0; i < 10; i++) { } ``` -From a technical point of view, this is identical to the example above. Surely, we can just wrap the code in an `if` block instead of using `continue`. +Z technického pohledu je to stejné jako výše uvedený příklad. Bezpochyby můžeme namísto použití `continue` vnořit kód do bloku `if`. -But as a side effect, this created one more level of nesting (the `alert` call inside the curly braces). If the code inside of `if` is longer than a few lines, that may decrease the overall readability. +Jako vedlejší efekt jsme však vytvořili jednu další úroveň vnoření (volání `alert` uvnitř složených závorek). Je-li kód uvnitř `if` delší než pár řádků, může to snížit jeho celkovou čitelnost. ```` -````warn header="No `break/continue` to the right side of '?'" -Please note that syntax constructs that are not expressions cannot be used with the ternary operator `?`. In particular, directives such as `break/continue` aren't allowed there. +````warn header="`break/continue` nesmějí být na pravé straně „?“" +Všimněte si, že syntaktické konstrukce, které nejsou výrazy, nelze použít s ternárním operátorem „?“. Konkrétně tam nejsou povoleny direktivy jako `break/continue`. -For example, if we take this code: +Vezměme si například tento kód: ```js if (i > 5) { @@ -295,117 +295,117 @@ if (i > 5) { } ``` -...and rewrite it using a question mark: +...a přepišme jej pomocí otazníku: ```js no-beautify -(i > 5) ? alert(i) : *!*continue*/!*; // continue isn't allowed here +(i > 5) ? alert(i) : *!*continue*/!*; // continue tady nesmí být ``` -...it stops working: there's a syntax error. +...přestane to fungovat: nastane syntaktická chyba. -This is just another reason not to use the question mark operator `?` instead of `if`. +To je další důvod, proč nepoužívat operátor otazníku `?` namísto `if`. ```` -## Labels for break/continue +## Návěští pro break/continue -Sometimes we need to break out from multiple nested loops at once. +Někdy se potřebujeme dostat ven z několika vnořených cyklů najednou. -For example, in the code below we loop over `i` and `j`, prompting for the coordinates `(i, j)` from `(0,0)` to `(2,2)`: +Například v níže uvedeném kódu vykonáváme cyklus nad `i` a `j`, který se ptá na hodnoty `(i, j)` od `(0,0)` do `(2,2)`: ```js run no-beautify for (let i = 0; i < 3; i++) { for (let j = 0; j < 3; j++) { - let input = prompt(`Value at coords (${i},${j})`, ''); + let vstup = prompt(`Hodnota na souřadnicích (${i},${j})`, ''); - // what if we want to exit from here to Done (below)? + // co když chceme vyskočit odtud až na „Hotovo“ níže? } } -alert('Done!'); +alert('Hotovo!'); ``` -We need a way to stop the process if the user cancels the input. +Potřebujeme způsob, jak tento proces zastavit, jestliže uživatel zruší vstup. -The ordinary `break` after `input` would only break the inner loop. That's not sufficient -- labels, come to the rescue! +Pouhé `break` po `vstup` by ukončilo jen vnitřní cyklus. To nám však nestačí. V takovém případě použijeme návěští. -A *label* is an identifier with a colon before a loop: +*Návěští* je identifikátor s dvojtečkou před cyklem: ```js -labelName: for (...) { +názevNávěští: for (...) { ... } ``` -The `break ` statement in the loop below breaks out to the label: +Příkaz `break ` v níže uvedeném cyklu vyskočí z uvedeného návěští: ```js run no-beautify -*!*outer:*/!* for (let i = 0; i < 3; i++) { +*!*vnější:*/!* for (let i = 0; i < 3; i++) { for (let j = 0; j < 3; j++) { - let input = prompt(`Value at coords (${i},${j})`, ''); + let vstup = prompt(`Hodnota na souřadnicích (${i},${j})`, ''); - // if an empty string or canceled, then break out of both loops - if (!input) *!*break outer*/!*; // (*) + // je-li zadán prázdný řetězec nebo zrušen vstup, vyskočí se z obou cyklů + if (!vstup) *!*break vnější*/!*; // (*) - // do something with the value... + // provedeme něco s hodnotou... } } -alert('Done!'); +alert('Hotovo!'); ``` -In the code above, `break outer` looks upwards for the label named `outer` and breaks out of that loop. +Ve výše uvedeném kódu `break vnější` najde návěští s názvem `vnější` a vyskočí z jeho cyklu. -So the control goes straight from `(*)` to `alert('Done!')`. +Řízení se tedy předá přímo z `(*)` na `alert('Hotovo!')`. -We can also move the label onto a separate line: +Můžeme návěští umístit i na samostatný řádek: ```js no-beautify -outer: +vnější: for (let i = 0; i < 3; i++) { ... } ``` -The `continue` directive can also be used with a label. In this case, code execution jumps to the next iteration of the labeled loop. +Návěští můžeme použít i v direktivě `continue`. V takovém případě se zbytek kódu přeskočí a další iterace bude v cyklu s uvedeným návěštím. -````warn header="Labels do not allow to \"jump\" anywhere" -Labels do not allow us to jump into an arbitrary place in the code. +````warn header="Návěští nám neumožňují „skákat“ kamkoli!" +Návěští nám neumožňují skákat na libovolné místo v kódu. -For example, it is impossible to do this: +Například nejde udělat toto: ```js -break label; // jump to the label below (doesn't work) +break návěští; // skok na návěští níže (nebude fungovat) -label: for (...) +návěští: for (...) ``` -A `break` directive must be inside a code block. Technically, any labelled code block will do, e.g.: +Direktiva `break` musí být uvnitř kódového bloku. Technicky to může být jakýkoli blok kódu s návěštím, např.: ```js -label: { +návěští: { // ... - break label; // works + break návěští; // toto funguje // ... } ``` -...Although, 99.9% of the time `break` is used inside loops, as we've seen in the examples above. +...Avšak v 99,9% případů se `break` používá uvnitř cyklů, jak jsme viděli ve výše uvedených příkladech. -A `continue` is only possible from inside a loop. +Direktiva `continue` může být jedině uvnitř cyklu. ```` -## Summary +## Shrnutí -We covered 3 types of loops: +Uvedli jsme tři druhy cyklů: -- `while` -- The condition is checked before each iteration. -- `do..while` -- The condition is checked after each iteration. -- `for (;;)` -- The condition is checked before each iteration, additional settings available. +- `while` -- Podmínka se ověří před každou iterací. +- `do..while` -- Podmínka se ověří po každé iteraci. +- `for (;;)` -- Podmínka se ověří před každou iterací, jsou možná i další nastavení. -To make an "infinite" loop, usually the `while(true)` construct is used. Such a loop, just like any other, can be stopped with the `break` directive. +K vytvoření „nekonečné“ smyčky se obvykle používá konstrukce `while(true)`. Takovou smyčku lze zastavit direktivou `break`, stejně jako každou jinou. -If we don't want to do anything in the current iteration and would like to forward to the next one, we can use the `continue` directive. +Pokud nechceme už nic provádět v současné iteraci a chceme rovnou přejít k další, použijeme direktivu `continue`. -`break/continue` support labels before the loop. A label is the only way for `break/continue` to escape a nested loop to go to an outer one. +`break/continue` podporují návěští před cyklem. Návěští je jediný způsob, jak může `break/continue` ve vnořeném cyklu vyskočit z vnějšího cyklu. diff --git a/1-js/02-first-steps/14-switch/1-rewrite-switch-if-else/solution.md b/1-js/02-first-steps/14-switch/1-rewrite-switch-if-else/solution.md index d3e397434..e823ff691 100644 --- a/1-js/02-first-steps/14-switch/1-rewrite-switch-if-else/solution.md +++ b/1-js/02-first-steps/14-switch/1-rewrite-switch-if-else/solution.md @@ -1,20 +1,20 @@ -To precisely match the functionality of `switch`, the `if` must use a strict comparison `'==='`. +Abychom dosáhli přesné funkcionality příkazu `switch`, musí `if` používat striktní rovnost `'==='`. -For given strings though, a simple `'=='` works too. +V tomto případě však pro zadané řetězce funguje i obyčejné `'=='`. ```js no-beautify -if(browser == 'Edge') { - alert("You've got the Edge!"); -} else if (browser == 'Chrome' - || browser == 'Firefox' - || browser == 'Safari' - || browser == 'Opera') { - alert( 'Okay we support these browsers too' ); +if(prohlížeč == 'Edge') { + alert("Vy máte Edge!"); +} else if (prohlížeč == 'Chrome' + || prohlížeč == 'Firefox' + || prohlížeč == 'Safari' + || prohlížeč == 'Opera') { + alert( 'V pořádku, tyto prohlížeče také podporujeme' ); } else { - alert( 'We hope that this page looks ok!' ); + alert( 'Doufáme, že tato stránka vypadá dobře!' ); } ``` -Please note: the construct `browser == 'Chrome' || browser == 'Firefox' …` is split into multiple lines for better readability. +Všimněte si, že konstrukce `prohlížeč == 'Chrome' || prohlížeč == 'Firefox' …` je pro lepší čitelnost rozdělena do několika řádků. -But the `switch` construct is still cleaner and more descriptive. +Ale i přesto je `switch` jasnější a přehlednější. diff --git a/1-js/02-first-steps/14-switch/1-rewrite-switch-if-else/task.md b/1-js/02-first-steps/14-switch/1-rewrite-switch-if-else/task.md index f4dc0e5f1..a23fb7b31 100644 --- a/1-js/02-first-steps/14-switch/1-rewrite-switch-if-else/task.md +++ b/1-js/02-first-steps/14-switch/1-rewrite-switch-if-else/task.md @@ -2,25 +2,25 @@ importance: 5 --- -# Rewrite the "switch" into an "if" +# Přepište „switch“ na „if“ -Write the code using `if..else` which would correspond to the following `switch`: +Přepište tento kód pomocí `if..else`, které nahradí následující `switch`: ```js -switch (browser) { +switch (prohlížeč) { case 'Edge': - alert( "You've got the Edge!" ); + alert( "Vy máte Edge!" ); break; case 'Chrome': case 'Firefox': case 'Safari': case 'Opera': - alert( 'Okay we support these browsers too' ); + alert( 'V pořádku, tyto prohlížeče také podporujeme' ); break; default: - alert( 'We hope that this page looks ok!' ); + alert( 'Doufáme, že tato stránka vypadá dobře!' ); } ``` diff --git a/1-js/02-first-steps/14-switch/2-rewrite-if-switch/solution.md b/1-js/02-first-steps/14-switch/2-rewrite-if-switch/solution.md index ed87dd94b..c656d3be6 100644 --- a/1-js/02-first-steps/14-switch/2-rewrite-if-switch/solution.md +++ b/1-js/02-first-steps/14-switch/2-rewrite-if-switch/solution.md @@ -1,4 +1,4 @@ -The first two checks turn into two `case`. The third check is split into two cases: +První dvě podmínky můžeme přepsat do samostatné varianty, třetí musí být ve dvou variantách: ```js run let a = +prompt('a?', ''); @@ -21,6 +21,6 @@ switch (a) { } ``` -Please note: the `break` at the bottom is not required. But we put it to make the code future-proof. +Všimněte si, že `break` na konci není nezbytný, ale vložili jsme ho tam, aby byl kód zajištěný pro rozšiřování. -In the future, there is a chance that we'd want to add one more `case`, for example `case 4`. And if we forget to add a break before it, at the end of `case 3`, there will be an error. So that's a kind of self-insurance. +Je možné, že v budoucnu budeme chtít přidat další `case`, například `case 4`. Kdybychom před něj na konec `case 3` zapomněli umístit `break`, nastala by chyba. Je to tedy určitý druh pojistky. diff --git a/1-js/02-first-steps/14-switch/2-rewrite-if-switch/task.md b/1-js/02-first-steps/14-switch/2-rewrite-if-switch/task.md index ec99d098d..86584f437 100644 --- a/1-js/02-first-steps/14-switch/2-rewrite-if-switch/task.md +++ b/1-js/02-first-steps/14-switch/2-rewrite-if-switch/task.md @@ -2,9 +2,9 @@ importance: 4 --- -# Rewrite "if" into "switch" +# Přepište „if“ na „switch“ -Rewrite the code below using a single `switch` statement: +Přepište uvedený kód pomocí jediného příkazu `switch`: ```js run let a = +prompt('a?', ''); diff --git a/1-js/02-first-steps/14-switch/article.md b/1-js/02-first-steps/14-switch/article.md index d86babcec..b663975b2 100644 --- a/1-js/02-first-steps/14-switch/article.md +++ b/1-js/02-first-steps/14-switch/article.md @@ -1,22 +1,22 @@ -# The "switch" statement +# Příkaz „switch“ -A `switch` statement can replace multiple `if` checks. +Příkaz `switch` dokáže nahradit několik podmíněných příkazů `if`. -It gives a more descriptive way to compare a value with multiple variants. +Poskytuje přehlednější způsob, jak porovnat hodnotu s několika variantami. -## The syntax +## Syntaxe -The `switch` has one or more `case` blocks and an optional default. +Příkaz `switch` obsahuje jeden nebo více bloků `case` a nepovinný blok `default`. -It looks like this: +Vypadá to takto: ```js no-beautify switch(x) { - case 'value1': // if (x === 'value1') + case 'hodnota1': // if (x === 'hodnota1') ... [break] - case 'value2': // if (x === 'value2') + case 'hodnota2': // if (x === 'hodnota2') ... [break] @@ -26,71 +26,71 @@ switch(x) { } ``` -- The value of `x` is checked for a strict equality to the value from the first `case` (that is, `value1`) then to the second (`value2`) and so on. -- If the equality is found, `switch` starts to execute the code starting from the corresponding `case`, until the nearest `break` (or until the end of `switch`). -- If no case is matched then the `default` code is executed (if it exists). +- Je ověřena striktní rovnost hodnoty `x` s hodnotou z prvního `case` (tj. `hodnota1`), pak s druhou `hodnota2`, a tak dále. +- Pokud je rovnost nalezena, `switch` začne vykonávat kód od odpovídajícího `case` až do nejbližšího `break` (nebo do konce bloku `switch`). +- Není-li nalezena žádná rovnost, je vykonán kód `default` (pokud je uveden). -## An example +## Příklad -An example of `switch` (the executed code is highlighted): +Příklad příkazu `switch` (vykonaný kód je zvýrazněn): ```js run let a = 2 + 2; switch (a) { case 3: - alert( 'Too small' ); + alert( 'Příliš málo' ); break; *!* case 4: - alert( 'Exactly!' ); + alert( 'Přesně!' ); break; */!* case 5: - alert( 'Too big' ); + alert( 'Příliš mnoho' ); break; default: - alert( "I don't know such values" ); + alert( "Takové hodnoty neznám" ); } ``` -Here the `switch` starts to compare `a` from the first `case` variant that is `3`. The match fails. +Zde `switch` začne porovnávat `a` od první varianty, kterou je `3`. Porovnání neuspěje. -Then `4`. That's a match, so the execution starts from `case 4` until the nearest `break`. +Pak `4`. Tady je nalezena shoda, takže se začne vykonávat kód obsažený v `case 4` a skončí na nejbližším `break`. -**If there is no `break` then the execution continues with the next `case` without any checks.** +**Není-li přítomen příkaz `break`, spustí se kód v dalších `case` bez jakéhokoliv porovnání.** -An example without `break`: +Příklad bez `break`: ```js run let a = 2 + 2; switch (a) { case 3: - alert( 'Too small' ); + alert( 'Příliš málo' ); *!* case 4: - alert( 'Exactly!' ); + alert( 'Přesně!' ); case 5: - alert( 'Too big' ); + alert( 'Příliš mnoho' ); default: - alert( "I don't know such values" ); + alert( "Takové hodnoty neznám" ); */!* } ``` -In the example above we'll see sequential execution of three `alert`s: +V uvedeném příkladu vidíme sekvenční vykonání tří `alert`ů: ```js -alert( 'Exactly!' ); -alert( 'Too big' ); -alert( "I don't know such values" ); +alert( 'Přesně!' ); +alert( 'Příliš mnoho' ); +alert( "Takové hodnoty neznám" ); ``` -````smart header="Any expression can be a `switch/case` argument" -Both `switch` and `case` allow arbitrary expressions. +````smart header="Argumentem `switch/case` může být jakýkoli výraz" +Jak `switch`, tak `case` dovolují libovolné výrazy. -For example: +Příklad: ```js run let a = "1"; @@ -99,74 +99,74 @@ let b = 0; switch (+a) { *!* case b + 1: - alert("this runs, because +a is 1, exactly equals b+1"); + alert("toto se vykoná, protože +a je 1, což se rovná b+1"); break; */!* default: - alert("this doesn't run"); + alert("toto se nevykoná"); } ``` -Here `+a` gives `1`, that's compared with `b + 1` in `case`, and the corresponding code is executed. +Zde `+a` dává `1`, to se v `case` porovná s `b + 1` a spustí se příslušný kód. ```` -## Grouping of "case" +## Seskupování „case“ -Several variants of `case` which share the same code can be grouped. +Je možné seskupit několik `case` variant, které mají mít stejný kód. -For example, if we want the same code to run for `case 3` and `case 5`: +Například když chceme, aby se stejný kód spustil pro `case 3` a `case 5`: ```js run no-beautify let a = 3; switch (a) { case 4: - alert('Right!'); + alert('Správně!'); break; *!* - case 3: // (*) grouped two cases + case 3: // (*) dvě seskupené varianty case 5: - alert('Wrong!'); - alert("Why don't you take a math class?"); + alert('Špatně!'); + alert("Proč nenavštěvujete kurz matematiky?"); break; */!* default: - alert('The result is strange. Really.'); + alert('Tento výsledek je divný. Opravdu.'); } ``` -Now both `3` and `5` show the same message. +Nyní `3` a `5` zobrazí stejnou zprávu. -The ability to "group" cases is a side effect of how `switch/case` works without `break`. Here the execution of `case 3` starts from the line `(*)` and goes through `case 5`, because there's no `break`. +Schopnost „seskupovat“ varianty je vedlejší efekt toho, jak `switch/case` funguje bez `break`. Zde provádění `case 3` začne od řádku `(*)` a projde přes `case 5`, protože tam není žádný `break`. -## Type matters +## Na datovém typu záleží -Let's emphasize that the equality check is always strict. The values must be of the same type to match. +Zdůrazňujeme, že ověření rovnosti je vždy striktní. Aby se hodnoty rovnaly, musí být stejného typu. -For example, let's consider the code: +Jako příklad poslouží tento kód: ```js run -let arg = prompt("Enter a value?"); +let arg = prompt("Zadejte hodnotu"); switch (arg) { case '0': case '1': - alert( 'One or zero' ); + alert( 'Jedna nebo nula' ); break; case '2': - alert( 'Two' ); + alert( 'Dvě' ); break; case 3: - alert( 'Never executes!' ); + alert( 'Toto se nikdy nevykoná!' ); break; default: - alert( 'An unknown value' ); + alert( 'Neznámá hodnota' ); } ``` -1. For `0`, `1`, the first `alert` runs. -2. For `2` the second `alert` runs. -3. But for `3`, the result of the `prompt` is a string `"3"`, which is not strictly equal `===` to the number `3`. So we've got a dead code in `case 3`! The `default` variant will execute. +1. Pro `0` a `1` se spustí první `alert`. +2. Pro `2` se spustí druhý `alert`. +3. Avšak pro `3` je výsledkem příkazu `prompt` řetězec `"3"`, který není striktně roven `===` číslu `3`. Proto jsme pro `case 3` získali mrtvý kód! Spustí se varianta `default`. diff --git a/1-js/02-first-steps/15-function-basics/1-if-else-required/solution.md b/1-js/02-first-steps/15-function-basics/1-if-else-required/solution.md index e3a0df77c..752a7c17f 100644 --- a/1-js/02-first-steps/15-function-basics/1-if-else-required/solution.md +++ b/1-js/02-first-steps/15-function-basics/1-if-else-required/solution.md @@ -1,3 +1,3 @@ -No difference! +Žádný rozdíl v nich není. -In both cases, `return confirm('Did parents allow you?')` executes exactly when the `if` condition is falsy. \ No newline at end of file +V obou případech se příkaz `return confirm('Dovolili ti to rodiče?');` spustí právě tehdy, když podmínka za `if` není splněna. diff --git a/1-js/02-first-steps/15-function-basics/1-if-else-required/task.md b/1-js/02-first-steps/15-function-basics/1-if-else-required/task.md index 4f69a5c8c..12055ce02 100644 --- a/1-js/02-first-steps/15-function-basics/1-if-else-required/task.md +++ b/1-js/02-first-steps/15-function-basics/1-if-else-required/task.md @@ -2,37 +2,37 @@ importance: 4 --- -# Is "else" required? +# Je nutné „else“? -The following function returns `true` if the parameter `age` is greater than `18`. +Následující funkce vrátí `true`, jestliže parametr `věk` je větší než `18`. -Otherwise it asks for a confirmation and returns its result: +Jinak se zeptá na povolení a vrátí výsledek dotazu: ```js -function checkAge(age) { - if (age > 18) { +function ověřVěk(věk) { + if (věk > 18) { return true; *!* } else { // ... - return confirm('Did parents allow you?'); + return confirm('Dovolili ti to rodiče?'); } */!* } ``` -Will the function work differently if `else` is removed? +Bude tato funkce fungovat jinak, bude-li odstraněno `else`? ```js -function checkAge(age) { - if (age > 18) { +function ověřVěk(věk) { + if (věk > 18) { return true; } *!* // ... - return confirm('Did parents allow you?'); + return confirm('Dovolili ti to rodiče?'); */!* } ``` -Is there any difference in the behavior of these two variants? +Je nějaký rozdíl mezi chováním těchto dvou variant? diff --git a/1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/solution.md b/1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/solution.md index e48502642..320a61e19 100644 --- a/1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/solution.md +++ b/1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/solution.md @@ -1,17 +1,17 @@ -Using a question mark operator `'?'`: +Pomocí operátoru otazníku `'?'`: ```js -function checkAge(age) { - return (age > 18) ? true : confirm('Did parents allow you?'); +function ověřVěk(věk) { + return (věk > 18) ? true : confirm('Dovolili ti to rodiče?'); } ``` -Using OR `||` (the shortest variant): +Pomocí OR `||` (kratší varianta): ```js -function checkAge(age) { - return (age > 18) || confirm('Did parents allow you?'); +function ověřVěk(věk) { + return (věk > 18) || confirm('Dovolili ti to rodiče?'); } ``` -Note that the parentheses around `age > 18` are not required here. They exist for better readability. +Závorky okolo `věk > 18` zde nejsou nutné. Slouží jen k lepší čitelnosti. diff --git a/1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/task.md b/1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/task.md index 46da079c0..ece56e29b 100644 --- a/1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/task.md +++ b/1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/task.md @@ -2,25 +2,26 @@ importance: 4 --- -# Rewrite the function using '?' or '||' +# Přepište funkci pomocí „?“ nebo „||“ -The following function returns `true` if the parameter `age` is greater than `18`. +Následující funkce vrátí `true`, jestliže parametr `věk` je větší než `18`. + +Jinak se zeptá na povolení a vrátí výsledek dotazu: -Otherwise it asks for a confirmation and returns its result. ```js -function checkAge(age) { - if (age > 18) { +function ověřVěk(věk) { + if (věk > 18) { return true; } else { - return confirm('Did parents allow you?'); + return confirm('Dovolili ti to rodiče?'); } } ``` -Rewrite it, to perform the same, but without `if`, in a single line. +Přepište ji, aby dělala totéž, ale bez použití `if` a na jediný řádek. -Make two variants of `checkAge`: +Vytvořte dvě varianty `ověřVěk`: -1. Using a question mark operator `?` -2. Using OR `||` +1. Pomocí operátoru otazníku `?` +2. Pomocí OR `||` diff --git a/1-js/02-first-steps/15-function-basics/3-min/solution.md b/1-js/02-first-steps/15-function-basics/3-min/solution.md index 2236d9203..f45c01731 100644 --- a/1-js/02-first-steps/15-function-basics/3-min/solution.md +++ b/1-js/02-first-steps/15-function-basics/3-min/solution.md @@ -1,4 +1,4 @@ -A solution using `if`: +Řešení pomocí `if`: ```js function min(a, b) { @@ -10,7 +10,7 @@ function min(a, b) { } ``` -A solution with a question mark operator `'?'`: +Řešení pomocí operátoru otazníku `'?'`: ```js function min(a, b) { @@ -18,4 +18,4 @@ function min(a, b) { } ``` -P.S. In the case of an equality `a == b` it does not matter what to return. \ No newline at end of file +P.S. V případě rovnosti `a == b` nezáleží na tom, kterou proměnnou funkce vrátí. \ No newline at end of file diff --git a/1-js/02-first-steps/15-function-basics/3-min/task.md b/1-js/02-first-steps/15-function-basics/3-min/task.md index 50edd0d36..1c39c3841 100644 --- a/1-js/02-first-steps/15-function-basics/3-min/task.md +++ b/1-js/02-first-steps/15-function-basics/3-min/task.md @@ -2,11 +2,11 @@ importance: 1 --- -# Function min(a, b) +# Funkce min(a, b) -Write a function `min(a,b)` which returns the least of two numbers `a` and `b`. +Napište funkci `min(a,b)`, která vrátí menší ze dvou čísel `a` a `b`. -For instance: +Příklady použítí: ```js min(2, 5) == 2 diff --git a/1-js/02-first-steps/15-function-basics/4-pow/solution.md b/1-js/02-first-steps/15-function-basics/4-pow/solution.md index 19fe9011f..97565a2ff 100644 --- a/1-js/02-first-steps/15-function-basics/4-pow/solution.md +++ b/1-js/02-first-steps/15-function-basics/4-pow/solution.md @@ -1,21 +1,21 @@ ```js run demo -function pow(x, n) { - let result = x; +function mocnina(x, n) { + let výsledek = x; for (let i = 1; i < n; i++) { - result *= x; + výsledek *= x; } - return result; + return výsledek; } let x = prompt("x?", ''); let n = prompt("n?", ''); if (n < 1) { - alert(`Power ${n} is not supported, use a positive integer`); + alert(`${n}-tá mocnina není podporována, zadejte kladné celé číslo`); } else { - alert( pow(x, n) ); + alert( mocnina(x, n) ); } ``` diff --git a/1-js/02-first-steps/15-function-basics/4-pow/task.md b/1-js/02-first-steps/15-function-basics/4-pow/task.md index f569320c7..1f6382836 100644 --- a/1-js/02-first-steps/15-function-basics/4-pow/task.md +++ b/1-js/02-first-steps/15-function-basics/4-pow/task.md @@ -2,18 +2,18 @@ importance: 4 --- -# Function pow(x,n) +# Funkce mocnina(x,n) -Write a function `pow(x,n)` that returns `x` in power `n`. Or, in other words, multiplies `x` by itself `n` times and returns the result. +Napište funkci `mocnina(x,n)`, která vrátí `x` umocněné na `n`-tou. Nebo, jinak řečeno, vynásobí `x` sebou samým `n`-krát a vrátí výsledek. ```js -pow(3, 2) = 3 * 3 = 9 -pow(3, 3) = 3 * 3 * 3 = 27 -pow(1, 100) = 1 * 1 * ...* 1 = 1 +mocnina(3, 2) = 3 * 3 = 9 +mocnina(3, 3) = 3 * 3 * 3 = 27 +mocnina(1, 100) = 1 * 1 * ...* 1 = 1 ``` -Create a web-page that prompts for `x` and `n`, and then shows the result of `pow(x,n)`. +Vytvořte webovou stránku, která se zeptá na `x` a `n` a pak zobrazí výsledek `mocnina(x,n)`. [demo] -P.S. In this task the function should support only natural values of `n`: integers up from `1`. +P.S. V této úloze by funkce měla podporovat jen přirozené hodnoty `n`: celá čísla větší nebo rovna `1`. diff --git a/1-js/02-first-steps/15-function-basics/article.md b/1-js/02-first-steps/15-function-basics/article.md index 415fed3e0..4392c8571 100644 --- a/1-js/02-first-steps/15-function-basics/article.md +++ b/1-js/02-first-steps/15-function-basics/article.md @@ -1,506 +1,505 @@ -# Functions +# Funkce -Quite often we need to perform a similar action in many places of the script. +Poměrně často potřebujeme vykonat podobnou akci na mnoha místech ve skriptu. -For example, we need to show a nice-looking message when a visitor logs in, logs out and maybe somewhere else. +Například chceme zobrazit pěkně vypadající zprávu, když se návštěvník přihlásí, odhlásí a možná i někde jinde. -Functions are the main "building blocks" of the program. They allow the code to be called many times without repetition. +Funkce jsou hlavní „stavební kameny“ programu. Umožňují volat kód vícekrát, aniž by bylo nutné ho psát znova. -We've already seen examples of built-in functions, like `alert(message)`, `prompt(message, default)` and `confirm(question)`. But we can create functions of our own as well. +Už jsme viděli příklady vestavěných funkcí, např. `alert(zpráva)`, `prompt(zpráva, výchozí hodnota)` a `confirm(otázka)`. Můžeme si však vytvořit i své vlastní funkce. -## Function Declaration +## Deklarace funkcí -To create a function we can use a *function declaration*. +Funkce vytváříme pomocí *deklarace funkce*. -It looks like this: +Deklarujeme ji takto: ```js -function showMessage() { - alert( 'Hello everyone!' ); +function zobrazZprávu() { + alert( 'Ahoj všichni!' ); } ``` -The `function` keyword goes first, then goes the *name of the function*, then a list of *parameters* between the parentheses (comma-separated, empty in the example above, we'll see examples later) and finally the code of the function, also named "the function body", between curly braces. +Napřed je uvedeno klíčové slovo `function`, pak *název funkce*, potom máme závorky a v nich seznam *parametrů* (jsou odděleny čárkami, v uvedeném příkladu je seznam prázdný, jeho příklady uvidíme později) a nakonec následují složené závorky, ve kterých je obsažen kód funkce, nazývaný také „tělo funkce“. ```js -function name(parameter1, parameter2, ... parameterN) { - // body +function název(parametr1, parametr2, ... parametrN) { + // tělo } ``` -Our new function can be called by its name: `showMessage()`. +Naši novou funkci pak můžeme volat pomocí jejího názvu: `zobrazZprávu()`. -For instance: +Například: ```js run -function showMessage() { - alert( 'Hello everyone!' ); +function zobrazZprávu() { + alert( 'Ahoj všichni!' ); } *!* -showMessage(); -showMessage(); +zobrazZprávu(); +zobrazZprávu(); */!* ``` -The call `showMessage()` executes the code of the function. Here we will see the message two times. +Volání `zobrazZprávu()` vykoná kód funkce. Zde tedy uvidíme tuto zprávu dvakrát. -This example clearly demonstrates one of the main purposes of functions: to avoid code duplication. +Tento příklad jasně demonstruje jeden z hlavních účelů funkcí: vyhnout se duplikaci kódu. -If we ever need to change the message or the way it is shown, it's enough to modify the code in one place: the function which outputs it. +Jestliže někdy budeme potřebovat změnit text zprávy nebo způsob, jakým je zobrazována, bude nám stačit modifikovat kód na jediném místě: ve funkci, která zprávu vypisuje. -## Local variables +## Lokální proměnné -A variable declared inside a function is only visible inside that function. +Proměnná deklarovaná uvnitř funkce je viditelná pouze v této funkci. -For example: +Příklad: ```js run -function showMessage() { +function zobrazZprávu() { *!* - let message = "Hello, I'm JavaScript!"; // local variable + let zpráva = "Ahoj, já jsem JavaScript!"; // lokální proměnná */!* - alert( message ); + alert( zpráva ); } -showMessage(); // Hello, I'm JavaScript! +zobrazZprávu(); // Ahoj, já jsem JavaScript! -alert( message ); // <-- Error! The variable is local to the function +alert( zpráva ); // <-- Chyba! Proměnná je dostupná jen uvnitř funkce ``` -## Outer variables +## Vnější proměnné -A function can access an outer variable as well, for example: +Funkce může přistupovat i k vnějším proměnným, například: ```js run no-beautify -let *!*userName*/!* = 'John'; +let *!*uživatelskéJméno*/!* = 'Jan'; -function showMessage() { - let message = 'Hello, ' + *!*userName*/!*; - alert(message); +function zobrazZprávu() { + let zpráva = 'Ahoj, ' + *!*uživatelskéJméno*/!*; + alert(zpráva); } -showMessage(); // Hello, John +zobrazZprávu(); // Ahoj, Jan ``` -The function has full access to the outer variable. It can modify it as well. +Funkce má plný přístup k vnější proměnné a může ji také modifikovat. -For instance: +Příklad: ```js run -let *!*userName*/!* = 'John'; +let *!*uživatelskéJméno*/!* = 'Jan'; -function showMessage() { - *!*userName*/!* = "Bob"; // (1) changed the outer variable +function zobrazZprávu() { + *!*uživatelskéJméno*/!* = "Pavel"; // (1) změna vnější proměnné - let message = 'Hello, ' + *!*userName*/!*; - alert(message); + let zpráva = 'Ahoj, ' + *!*uživatelskéJméno*/!*; + alert(zpráva); } -alert( userName ); // *!*John*/!* before the function call +alert( uživatelskéJméno ); // *!*Jan*/!* před voláním funkce -showMessage(); +zobrazZprávu(); -alert( userName ); // *!*Bob*/!*, the value was modified by the function +alert( uživatelskéJméno ); // *!*Pavel*/!*, funkce změnila hodnotu proměnné ``` -The outer variable is only used if there's no local one. +Vnější proměnná se použije jen tehdy, neexistuje-li lokální. -If a same-named variable is declared inside the function then it *shadows* the outer one. For instance, in the code below the function uses the local `userName`. The outer one is ignored: +Pokud je uvnitř funkce deklarována proměnná se stejným názvem, tak *zastíní* tu vnější. Například v níže uvedeném kódu funkce používá lokální proměnnou `uživatelskéJméno` a vnější ignoruje: ```js run -let userName = 'John'; +let uživatelskéJméno = 'Jan'; -function showMessage() { +function zobrazZprávu() { *!* - let userName = "Bob"; // declare a local variable + let uživatelskéJméno = "Pavel"; // deklarace lokální proměnné */!* - let message = 'Hello, ' + userName; // *!*Bob*/!* - alert(message); + let zpráva = 'Ahoj, ' + uživatelskéJméno; // *!*Pavel*/!* + alert(zpráva); } -// the function will create and use its own userName -showMessage(); +// funkce vytvoří a použije své vlastní uživatelskéJméno +zobrazZprávu(); -alert( userName ); // *!*John*/!*, unchanged, the function did not access the outer variable +alert( uživatelskéJméno ); // *!*Jan*/!*, beze změny, funkce nepřistupovala k vnější proměnné ``` -```smart header="Global variables" -Variables declared outside of any function, such as the outer `userName` in the code above, are called *global*. +```smart header="Globální proměnné" +Proměnné deklarované mimo jakoukoli funkci, například `uživatelskéJméno` ve výše uvedeném kódu, se nazývají *globální*. -Global variables are visible from any function (unless shadowed by locals). +Globální proměnné jsou viditelné z každé funkce (pokud nejsou zastíněny lokálními). -It's a good practice to minimize the use of global variables. Modern code has few or no globals. Most variables reside in their functions. Sometimes though, they can be useful to store project-level data. +Je dobrým zvykem minimalizovat používání globálních proměnných. Moderní kód obsahuje jen málo globálních proměnných nebo vůbec žádné. Většina proměnných je uvnitř svých funkcí. Někdy ovšem mohou být globální proměnné užitečné k ukládání dat na úrovni projektu. ``` -## Parameters +## Parametry -We can pass arbitrary data to functions using parameters. +Do funkcí můžeme předávat data pomocí parametrů. -In the example below, the function has two parameters: `from` and `text`. +V níže uvedeném příkladu má funkce dva parametry: `odKoho` a `text`. ```js run -function showMessage(*!*from, text*/!*) { // parameters: from, text - alert(from + ': ' + text); +function zobrazZprávu(*!*odKoho, text*/!*) { // parametry: odKoho, text + alert(odKoho + ': ' + text); } -*!*showMessage('Ann', 'Hello!');*/!* // Ann: Hello! (*) -*!*showMessage('Ann', "What's up?");*/!* // Ann: What's up? (**) +*!* +zobrazZprávu('Anna', 'Ahoj!'); // Anna: Ahoj! (*) +zobrazZprávu('Anna', "Co se děje?"); // Anna: Co se děje? (**) +*/!* ``` -When the function is called in lines `(*)` and `(**)`, the given values are copied to local variables `from` and `text`. Then the function uses them. +Když se na řádcích `(*)` a `(**)` volá funkce, zadané hodnoty se zkopírují do lokálních proměnných `odKoho` a `text`. Pak je funkce použije. -Here's one more example: we have a variable `from` and pass it to the function. Please note: the function changes `from`, but the change is not seen outside, because a function always gets a copy of the value: +Další příklad: máme proměnnou `odKoho` a předáme ji funkci. Všimněte si, že funkce změní hodnotu `odKoho`, ale tato změna není vidět zvenčí, jelikož funkce obdrží vždy kopii hodnoty: ```js run -function showMessage(from, text) { +function zobrazZprávu(odKoho, text) { *!* - from = '*' + from + '*'; // make "from" look nicer + odKoho = '*' + odKoho + '*'; // aby „odKoho“ vypadalo lépe */!* - alert( from + ': ' + text ); + alert( odKoho + ': ' + text ); } -let from = "Ann"; +let odKoho = "Anna"; -showMessage(from, "Hello"); // *Ann*: Hello +zobrazZprávu(odKoho, "Ahoj"); // *Anna*: Ahoj -// the value of "from" is the same, the function modified a local copy -alert( from ); // Ann +// hodnota „odKoho“ je stejná, funkce změnila lokální kopii +alert( odKoho ); // Anna ``` -When a value is passed as a function parameter, it's also called an *argument*. - -In other words, to put these terms straight: +Když je nějaká hodnota předána funkci jako parametr, můžeme ji označovat jako *argument*. -- A parameter is the variable listed inside the parentheses in the function declaration (it's a declaration time term). -- An argument is the value that is passed to the function when it is called (it's a call time term). +Jinými slovy, abychom tyto pojmy upřesnili: -We declare functions listing their parameters, then call them passing arguments. +- Parametr je proměnná uvedená v závorkách v deklaraci funkce (pojem používaný v okamžiku deklarace). +- Argument je hodnota, která je předána funkci, když je volána (pojem používaný v okamžiku volání). -In the example above, one might say: "the function `showMessage` is declared with two parameters, then called with two arguments: `from` and `"Hello"`". +Když funkce deklarujeme, značíme jejich parametry. Když funkce voláme, voláme je spolu s argumenty. +Ve výše uvedeném příkladu bychom mohli říci: „funkce `zobrazZprávu` je deklarována se dvěma parametry a pak je volána se dvěma argumenty: `odKoho` a `"Ahoj"`.“ -## Default values +## Výchozí hodnoty -If a function is called, but an argument is not provided, then the corresponding value becomes `undefined`. +Jestliže je volána funkce, ale některý argument není poskytnut, pak odpovídající hodnota bude `undefined`. -For instance, the aforementioned function `showMessage(from, text)` can be called with a single argument: +Například výše uvedenou funkci `zobrazZprávu(odKoho, text)` lze volat jen s jediným argumentem: ```js -showMessage("Ann"); +zobrazZprávu("Anna"); ``` -That's not an error. Such a call would output `"*Ann*: undefined"`. As the value for `text` isn't passed, it becomes `undefined`. +To není chyba. Takové volání vypíše `"*Anna*: undefined"`. Protože hodnota `text` nebyla předána, stane se `undefined`. -We can specify the so-called "default" (to use if omitted) value for a parameter in the function declaration, using `=`: +V deklaraci funkce můžeme specifikovat tzv. „výchozí“ hodnotu parametru (pokud argument chybí) pomocí `=`: ```js run -function showMessage(from, *!*text = "no text given"*/!*) { - alert( from + ": " + text ); +function zobrazZprávu(odKoho, *!*text = "text není zadán"*/!*) { + alert( odKoho + ": " + text ); } -showMessage("Ann"); // Ann: no text given +zobrazZprávu("Anna"); // Anna: text není zadán ``` -Now if the `text` parameter is not passed, it will get the value `"no text given"`. +Jestliže argument k parametru `text` nebude předán, bude mít hodnotu `"text není zadán"`. -The default value also jumps in if the parameter exists, but strictly equals `undefined`, like this: +Výchozí hodnota bude nastavena i tehdy, když parametr existuje, ale je striktně roven `undefined`, například: ```js -showMessage("Ann", undefined); // Ann: no text given +showMessage("Anna", undefined); // Anna: text není zadán ``` -Here `"no text given"` is a string, but it can be a more complex expression, which is only evaluated and assigned if the parameter is missing. So, this is also possible: +Zde `"text není zadán"` je řetězec, ale může to být složitější výraz, který se vyhodnotí a přiřadí jen tehdy, jestliže argument chybí. Je tedy možné i toto: ```js run -function showMessage(from, text = anotherFunction()) { - // anotherFunction() only executed if no text given - // its result becomes the value of text +function zobrazZprávu(odKoho, text = jináFunkce()) { + // jináFunkce() se vykoná jen tehdy, když argument u parametru text chybí + // její výsledek pak bude argumentem parametru text } ``` -```smart header="Evaluation of default parameters" -In JavaScript, a default parameter is evaluated every time the function is called without the respective parameter. +```smart header="Vyhodnocení výchozích argumentů" +V JavaScriptu bude výchozí argument vyhodnocen pokaždé, když bude funkce volána bez příslušného argumentu. -In the example above, `anotherFunction()` isn't called at all, if the `text` parameter is provided. +Ve výše uvedeném příkladu nebude `jináFunkce()` vůbec volána, jestliže bude argument u parametru `text` poskytnut. -On the other hand, it's independently called every time when `text` is missing. +Na druhou stranu bude nezávisle na sobě volána pokaždé, když bude argument parametru `text` chybět. ``` -````smart header="Default parameters in old JavaScript code" -Several years ago, JavaScript didn't support the syntax for default parameters. So people used other ways to specify them. +````smart header="Výchozí argumenty ve starém JavaScriptovém kódu" +Před několika lety JavaScript nepodporoval syntaxi pro výchozí argumenty. Lidé tedy používali jiné způsoby, jak je specifikovat. -Nowadays, we can come across them in old scripts. +V současnosti na ně můžeme narazit ve starých skriptech. -For example, an explicit check for `undefined`: +Například explicitní ověřování na `undefined`: ```js -function showMessage(from, text) { +function zobrazZprávu(odKoho, text) { *!* if (text === undefined) { - text = 'no text given'; + text = 'text není zadán'; } */!* - alert( from + ": " + text ); + alert( odKoho + ": " + text ); } ``` -...Or using the `||` operator: +...Nebo pomocí operátoru `||`: ```js -function showMessage(from, text) { - // If the value of text is falsy, assign the default value - // this assumes that text == "" is the same as no text at all - text = text || 'no text given'; +function zobrazZprávu(odKoho, text) { + // Je-li hodnota proměnné text nepravdivá, přiřadíme výchozí hodnotu + // to předpokládá, že text == "" je totéž jako vůbec žádný text + text = text || 'text není zadán'; ... } ``` ```` +### Alternativní výchozí argumenty +Někdy má smysl nastavovat výchozí hodnoty argumentů až později po deklaraci funkce. -### Alternative default parameters - -Sometimes it makes sense to assign default values for parameters at a later stage after the function declaration. - -We can check if the parameter is passed during the function execution, by comparing it with `undefined`: +Abychom během provádění funkce ověřili, zda argument byl předán, můžeme jej porovnat s `undefined`: ```js run -function showMessage(text) { +function zobrazZprávu(text) { // ... *!* - if (text === undefined) { // if the parameter is missing - text = 'empty message'; + if (text === undefined) { // jestliže argument chybí + text = 'prázdná zpráva'; } */!* alert(text); } -showMessage(); // empty message +zobrazZprávu(); // prázdná zpráva ``` -...Or we could use the `||` operator: +...Nebo můžeme použít operátor `||`: ```js -function showMessage(text) { - // if text is undefined or otherwise falsy, set it to 'empty' - text = text || 'empty'; +function zobrazZprávu(text) { + // je-li argument parametru text neuveden nebo je nepravdivý, nastaví se na 'prázdný' + text = text || 'prázdný'; ... } ``` -Modern JavaScript engines support the [nullish coalescing operator](info:nullish-coalescing-operator) `??`, it's better when most falsy values, such as `0`, should be considered "normal": +Moderní enginy JavaScriptu podporují [operátor koalescence](info:nullish-coalescing-operator) `??`, který je lepší použít, když by většina nepravdivých hodnot, například `0`, měla být zpracována „normálně“: ```js run -function showCount(count) { - // if count is undefined or null, show "unknown" - alert(count ?? "unknown"); +function zobrazPočet(počet) { + // je-li počet undefined nebo null, zobrazí se "neznámý" + alert(počet ?? "neznámý"); } -showCount(0); // 0 -showCount(null); // unknown -showCount(); // unknown +zobrazPočet(0); // 0 +zobrazPočet(null); // neznámý +zobrazPočet(); // neznámý ``` -## Returning a value +## Návratová hodnota -A function can return a value back into the calling code as the result. +Funkce může vrátit volajícímu kódu jako výsledek nějakou hodnotu. -The simplest example would be a function that sums two values: +Nejjednodušším příkladem je funkce, která sečte dvě hodnoty: ```js run no-beautify -function sum(a, b) { +function součet(a, b) { *!*return*/!* a + b; } -let result = sum(1, 2); -alert( result ); // 3 +let výsledek = součet(1, 2); +alert( výsledek ); // 3 ``` -The directive `return` can be in any place of the function. When the execution reaches it, the function stops, and the value is returned to the calling code (assigned to `result` above). +Direktiva `return` může být ve funkci umístěna kdekoli. Když na ni vykonávající se funkce narazí, ukončí se a vrátí zadanou hodnotu volajícímu kódu (v uvedeném příkladu se přiřadí do proměnné `výsledek`). -There may be many occurrences of `return` in a single function. For instance: +V jedné funkci se může `return` vyskytovat mnohokrát. Příklad: ```js run -function checkAge(age) { - if (age >= 18) { +function ověřVěk(věk) { + if (věk >= 18) { *!* return true; */!* } else { *!* - return confirm('Do you have permission from your parents?'); + return confirm('Máš povolení od rodičů?'); */!* } } -let age = prompt('How old are you?', 18); +let věk = prompt('Kolik je ti let?', 18); -if ( checkAge(age) ) { - alert( 'Access granted' ); +if ( ověřVěk(věk) ) { + alert( 'Přístup povolen' ); } else { - alert( 'Access denied' ); + alert( 'Přístup zakázán' ); } ``` -It is possible to use `return` without a value. That causes the function to exit immediately. +Je možné použít `return` bez hodnoty. To způsobí okamžité ukončení funkce. -For example: +Příklad: ```js -function showMovie(age) { - if ( !checkAge(age) ) { +function zobrazFilm(věk) { + if ( !ověřVěk(věk) ) { *!* return; */!* } - alert( "Showing you the movie" ); // (*) + alert( "Ukážu vám ten film" ); // (*) // ... } ``` -In the code above, if `checkAge(age)` returns `false`, then `showMovie` won't proceed to the `alert`. +Pokud v uvedeném kódu `ověřVěk(věk)` vrátí `false`, pak `zobrazFilm` nebude pokračovat k `alert`. -````smart header="A function with an empty `return` or without it returns `undefined`" -If a function does not return a value, it is the same as if it returns `undefined`: +````smart header="Funkce s prázdným `return` nebo bez něj vrátí `undefined`" +Jestliže funkce nevrátí žádnou hodnotu, je to stejné, jako by vrátila `undefined`: ```js run -function doNothing() { /* empty */ } +function nedělejNic() { /* prázdná funkce */ } -alert( doNothing() === undefined ); // true +alert( nedělejNic() === undefined ); // true ``` -An empty `return` is also the same as `return undefined`: +Rovněž prázdný `return` je totéž jako `return undefined`: ```js run -function doNothing() { +function nedělejNic() { return; } -alert( doNothing() === undefined ); // true +alert( nedělejNic() === undefined ); // true ``` ```` -````warn header="Never add a newline between `return` and the value" -For a long expression in `return`, it might be tempting to put it on a separate line, like this: +````warn header="Nevkládejte konec řádku mezi `return` a hodnotu" +Je-li za `return` dlouhý výraz, může to svádět k jeho umístění na samostatný řádek, například: ```js return - (some + long + expression + or + whatever * f(a) + f(b)) + (nějaký + dlouhý + výraz + nebo + co * f(a) + f(b)) ``` -That doesn't work, because JavaScript assumes a semicolon after `return`. That'll work the same as: +To však nebude fungovat, neboť JavaScript za `return` vloží středník. Bude to tedy stejné jako: ```js return*!*;*/!* - (some + long + expression + or + whatever * f(a) + f(b)) + (nějaký + dlouhý + výraz + nebo + co * f(a) + f(b)) ``` -So, it effectively becomes an empty return. +Z příkazu se tedy stane prázdný `return`. -If we want the returned expression to wrap across multiple lines, we should start it at the same line as `return`. Or at least put the opening parentheses there as follows: +Jestliže chceme rozdělit vracený výraz na více řádků, měli bychom jej zahájit na stejném řádku jako `return`, nebo tam aspoň umístit levou závorku: ```js return ( - some + long + expression - + or + - whatever * f(a) + f(b) + nějaký + dlouhý + výraz + + nebo + + co * f(a) + f(b) ) ``` -And it will work just as we expect it to. +Teď to bude fungovat tak, jak očekáváme. ```` -## Naming a function [#function-naming] +## Pojmenování funkcí [#function-naming] -Functions are actions. So their name is usually a verb. It should be brief, as accurate as possible and describe what the function does, so that someone reading the code gets an indication of what the function does. +Funkce jsou akce, takže jejich názvem bývá obvykle sloveso. Mělo by být krátké a mělo by co nejpřesněji popisovat, co funkce dělá, aby člověk, který čte kód, měl tušení, co funkce provádí. -It is a widespread practice to start a function with a verbal prefix which vaguely describes the action. There must be an agreement within the team on the meaning of the prefixes. +Je široce rozšířenou praktikou zahájit název funkce slovesným prefixem (předponou), který přibližně popisuje akci. Na významu prefixů se celý tým musí dohodnout. -For instance, functions that start with `"show"` usually show something. +Například funkce, jejichž název začíná `"zobraz"` (v angličtině `"show"`), obvykle něco zobrazují. -Function starting with... +Funkce, které začínají... -- `"get…"` -- return a value, -- `"calc…"` -- calculate something, -- `"create…"` -- create something, -- `"check…"` -- check something and return a boolean, etc. +- `"vrať…"` (`"get…"`) -- vracejí nějakou hodnotu, +- `"vypočítej…"` (`"calc…"`) -- něco vypočítávají, +- `"vytvoř…"` (`"create…"`) -- něco vytvářejí, +- `"ověř…"` (`"check…"`) -- něco ověřují a vracejí typ boolean, atd. -Examples of such names: +Příklady takových názvů: ```js no-beautify -showMessage(..) // shows a message -getAge(..) // returns the age (gets it somehow) -calcSum(..) // calculates a sum and returns the result -createForm(..) // creates a form (and usually returns it) -checkPermission(..) // checks a permission, returns true/false +zobrazZprávu(..) // zobrazí zprávu +vraťVěk(..) // vrátí věk (nějak jej zjistí) +vypočítejSoučet(..) // vypočítá součet a vrátí výsledek +vytvořFormulář(..) // vytvoří formulář (a obvykle jej vrátí) +ověřOprávnění(..) // ověří oprávnění, vrátí true nebo false ``` -With prefixes in place, a glance at a function name gives an understanding what kind of work it does and what kind of value it returns. +Když jsou použity prefixy, pohled na název funkce nám umožňuje lépe porozumět, jaký druh činnosti funkce provádí a jaký druh hodnoty vrací. -```smart header="One function -- one action" -A function should do exactly what is suggested by its name, no more. +```smart header="Jedna funkce -- jedna akce" +Funkce by měla provádět přesně to, co naznačuje její název, a nic víc. -Two independent actions usually deserve two functions, even if they are usually called together (in that case we can make a 3rd function that calls those two). +Dvě nezávislé akce si zpravidla zasluhují dvě funkce, i když jsou obvykle volány společně (v takovém případě můžeme vytvořit třetí funkci, která bude volat ty dvě). -A few examples of breaking this rule: +Několik příkladů porušení tohoto pravidla: -- `getAge` -- would be bad if it shows an `alert` with the age (should only get). -- `createForm` -- would be bad if it modifies the document, adding a form to it (should only create it and return). -- `checkPermission` -- would be bad if it displays the `access granted/denied` message (should only perform the check and return the result). +- `vraťVěk` -- bylo by špatně, kdyby zobrazovala `alert` s věkem (měla by ho jen vrátit). +- `vytvořFormulář` -- bylo by špatně, kdyby modifikovala dokument a formulář do něj přidávala (měla by ho jen vytvořit a vrátit). +- `ověřOprávnění` -- bylo by špatně, kdyby zobrazovala zprávu `přístup povolen/zamítnut` (měla by jen ověřit právo přístupu a vrátit výsledek). -These examples assume common meanings of prefixes. You and your team are free to agree on other meanings, but usually they're not much different. In any case, you should have a firm understanding of what a prefix means, what a prefixed function can and cannot do. All same-prefixed functions should obey the rules. And the team should share the knowledge. +Tyto příklady předpokládají běžný význam prefixů. Se svým týmem se můžete dohodnout na jiném významu, ale obvykle se příliš neliší. V každém případě byste měli jasně rozumět tomu, co prefix znamená a co funkce s tímto prefixem v názvu může a nemůže dělat. Tato pravidla by měly dodržovat všechny funkce se stejným prefixem a celý tým by je měl znát. ``` -```smart header="Ultrashort function names" -Functions that are used *very often* sometimes have ultrashort names. +```smart header="Ultrakrátké názvy funkcí" +Funkce, které se používají *velmi často*, mají někdy ultrakrátké názvy. -For example, the [jQuery](https://jquery.com/) framework defines a function with `$`. The [Lodash](https://lodash.com/) library has its core function named `_`. +Například knihovna [jQuery](https://jquery.com) definuje funkci s názvem `$`. Knihovna [Lodash](https://lodash.com/) má svou ústřední funkci pojmenovanou `_`. -These are exceptions. Generally function names should be concise and descriptive. +To jsou však výjimky. Obecně by názvy funkcí měly být stručné a popisné. ``` -## Functions == Comments +## Funkce == komentáře -Functions should be short and do exactly one thing. If that thing is big, maybe it's worth it to split the function into a few smaller functions. Sometimes following this rule may not be that easy, but it's definitely a good thing. +Funkce by měly být krátké a provádět právě jednu věc. Je-li ta věc velká, může se vyplatit rozdělit funkci na několik menších funkcí. Dodržovat toto pravidlo nemusí být vždy snadné, ale bezpochyby se to vyplatí. -A separate function is not only easier to test and debug -- its very existence is a great comment! +Oddělená funkce se nejenom snadněji testuje a ladí -- samotná její existence je skvělým komentářem! -For instance, compare the two functions `showPrimes(n)` below. Each one outputs [prime numbers](https://en.wikipedia.org/wiki/Prime_number) up to `n`. +Například srovnejte dvě níže uvedené funkce `zobrazPrvočísla(n)`. Každá z nich vypíše [prvočísla](https://cs.wikipedia.org/wiki/Prvočíslo) menší nebo rovná `n`. -The first variant uses a label: +První varianta používá návěští: ```js -function showPrimes(n) { - nextPrime: for (let i = 2; i < n; i++) { +function zobrazPrvočísla(n) { + dalšíPrvočíslo: for (let i = 2; i < n; i++) { for (let j = 2; j < i; j++) { - if (i % j == 0) continue nextPrime; + if (i % j == 0) continue dalšíPrvočíslo; } - alert( i ); // a prime + alert( i ); // prvočíslo } } ``` -The second variant uses an additional function `isPrime(n)` to test for primality: +Druhá varianta používá další funkci `jePrvočíslo(n)`, která otestuje, zda zadané číslo je prvočíslo: ```js -function showPrimes(n) { +function zobrazPrvočísla(n) { for (let i = 2; i < n; i++) { - *!*if (!isPrime(i)) continue;*/!* + *!*if (!jePrvočíslo(i)) continue;*/!* - alert(i); // a prime + alert(i); // prvočíslo } } -function isPrime(n) { +function jePrvočíslo(n) { for (let i = 2; i < n; i++) { if ( n % i == 0) return false; } @@ -508,32 +507,32 @@ function isPrime(n) { } ``` -The second variant is easier to understand, isn't it? Instead of the code piece we see a name of the action (`isPrime`). Sometimes people refer to such code as *self-describing*. +Druhou variantu je snadnější pochopit, že? Namísto části kódu vidíme název akce (`jePrvočíslo`). Takovému kódu lidé někdy říkají *sebepopisující*. -So, functions can be created even if we don't intend to reuse them. They structure the code and make it readable. +Funkce tedy můžeme vytvořit, i když nemáme v úmyslu je používat opakovaně. Strukturují kód a činí jej čitelnějším. -## Summary +## Shrnutí -A function declaration looks like this: +Deklarace funkce vypadá takto: ```js -function name(parameters, delimited, by, comma) { - /* code */ +function název(parametry, oddělené, čárkami) { + /* kód */ } ``` -- Values passed to a function as parameters are copied to its local variables. -- A function may access outer variables. But it works only from inside out. The code outside of the function doesn't see its local variables. -- A function can return a value. If it doesn't, then its result is `undefined`. +- Hodnoty předané funkci jako argumenty se zkopírují do lokálních proměnných. +- Funkce může přistupovat k vnějším proměnným, ale opačně to nefunguje -- kód mimo funkci nevidí její lokální proměnné. +- Funkce může vracet hodnotu. Pokud žádnou nevrátí, její výsledek je `undefined`. -To make the code clean and easy to understand, it's recommended to use mainly local variables and parameters in the function, not outer variables. +Aby kód byl čistší a srozumitelnější, doporučuje se ve funkcích používat zejména lokální proměnné a parametry, ne vnější proměnné. -It is always easier to understand a function which gets parameters, works with them and returns a result than a function which gets no parameters, but modifies outer variables as a side effect. +Je vždy jednodušší pochopit funkci, která obdrží argumenty, pracuje s nimi a vrátí výsledek, než funkci, která neobdrží žádné argumenty, ale jako vedlejší efekt modifikuje vnější proměnné. -Function naming: +Pojmenování funkcí: -- A name should clearly describe what the function does. When we see a function call in the code, a good name instantly gives us an understanding what it does and returns. -- A function is an action, so function names are usually verbal. -- There exist many well-known function prefixes like `create…`, `show…`, `get…`, `check…` and so on. Use them to hint what a function does. +- Název by měl jasně popisovat, co funkce dělá. Když v kódu vidíme volání funkce, dobrý název nám umožňuje okamžitě pochopit, co funkce dělá a co vrací. +- Funkce je akce, takže názvy funkcí jsou obvykle slovesa. +- Existuje mnoho dobře známých prefixů funkcí, např. `vytvoř…`, `zobraz…`, `vrať…`, `ověř…` atd. Používají se, aby bylo naznačeno, co funkce dělá. -Functions are the main building blocks of scripts. Now we've covered the basics, so we actually can start creating and using them. But that's only the beginning of the path. We are going to return to them many times, going more deeply into their advanced features. +Funkce jsou hlavními stavebními kameny skriptů. Když jsme nyní vysvětlili jejich základy, můžeme je začít vytvářet a používat. To je však teprve začátek. Ještě mnohokrát se k nim vrátíme a pronikneme hlouběji do jejich složitějších vlastností. diff --git a/1-js/02-first-steps/16-function-expressions/article.md b/1-js/02-first-steps/16-function-expressions/article.md index c6dd891bd..d0eab5155 100644 --- a/1-js/02-first-steps/16-function-expressions/article.md +++ b/1-js/02-first-steps/16-function-expressions/article.md @@ -1,380 +1,384 @@ -# Function expressions +# Funkční výrazy -In JavaScript, a function is not a "magical language structure", but a special kind of value. +Funkce v JavaScriptu není nějaká „magická jazyková struktura“, ale speciální druh hodnoty. -The syntax that we used before is called a *Function Declaration*: +Syntaxe, kterou jsme dosud používali, se nazývá *deklarace funkce*: ```js -function sayHi() { - alert( "Hello" ); +function řekniAhoj() { + alert( "Ahoj" ); } ``` -There is another syntax for creating a function that is called a *Function Expression*. +Existuje i jiná syntaxe pro vytváření funkce, která se nazývá *funkční výraz*. -It allows us to create a new function in the middle of any expression. +Ten nám umožňuje vytvořit novou funkci uprostřed libovolného výrazu. -For example: +Například: ```js -let sayHi = function() { - alert( "Hello" ); +let řekniAhoj = function() { + alert( "Ahoj" ); }; ``` -Here we can see a variable `sayHi` getting a value, the new function, created as `function() { alert("Hello"); }`. +Zde vidíme proměnnou `řekniAhoj`, do níž je uložena hodnota, kterou je nová funkce, vytvořená jako `function() { alert("Ahoj"); }`. -As the function creation happens in the context of the assignment expression (to the right side of `=`), this is a *Function Expression*. +Protože k vytvoření funkce dochází v kontextu přiřazovacího výrazu (na pravé straně `=`), je to *funkční výraz*. -Please note, there's no name after the `function` keyword. Omitting a name is allowed for Function Expressions. +Prosíme všimněte si, že za klíčovým slovem `function` není žádný název. Ve funkčních výrazech je vynechání názvu dovoleno. -Here we immediately assign it to the variable, so the meaning of these code samples is the same: "create a function and put it into the variable `sayHi`". +Zde okamžitě přiřazujeme funkci proměnné, takže význam tohoto příkladu kódu je stejný: „vytvoř funkci a ulož ji do proměnné `řekniAhoj`“. -In more advanced situations, that we'll come across later, a function may be created and immediately called or scheduled for a later execution, not stored anywhere, thus remaining anonymous. +V pokročilejších situacích, na které narazíme později, můžeme funkci vytvořit a okamžitě volat nebo naplánovat její pozdější spuštění, aniž bychom ji někam uložili, takže funkce zůstane anonymní. -## Function is a value +## Funkce je hodnota -Let's reiterate: no matter how the function is created, a function is a value. Both examples above store a function in the `sayHi` variable. +Zopakujme si: bez ohledu na to, jak je funkce vytvořena, funkce je hodnota. V obou výše uvedených příkladech je funkce uložena do proměnné `řekniAhoj`. -We can even print out that value using `alert`: +Tuto hodnotu dokonce můžeme zobrazit pomocí `alert`: ```js run -function sayHi() { - alert( "Hello" ); +function řekniAhoj() { + alert( "Ahoj" ); } *!* -alert( sayHi ); // shows the function code +alert( řekniAhoj ); // zobrazí kód funkce */!* ``` -Please note that the last line does not run the function, because there are no parentheses after `sayHi`. There are programming languages where any mention of a function name causes its execution, but JavaScript is not like that. +Všimněte si, že poslední řádek nevolá funkci, protože za `řekniAhoj` nejsou závorky. Existují programovací jazyky, v nichž je funkce zavolána pokaždé, když je uveden její název, ale to není případ JavaScriptu. -In JavaScript, a function is a value, so we can deal with it as a value. The code above shows its string representation, which is the source code. +V JavaScriptu je funkce hodnota, takže s ní můžeme zacházet jako s hodnotou. Výše uvedený kód zobrazí její řetězcovou reprezentaci, kterou je zdrojový kód funkce. -Surely, a function is a special value, in the sense that we can call it like `sayHi()`. +Samozřejmě, funkce je speciální hodnota v tom smyslu, že ji můžeme volat, např. `řekniAhoj()`. -But it's still a value. So we can work with it like with other kinds of values. +Je to však stále hodnota, a proto s ní můžeme pracovat jako s hodnotou jakéhokoli jiného druhu. -We can copy a function to another variable: +Můžeme zkopírovat funkci do jiné proměnné: ```js run no-beautify -function sayHi() { // (1) create - alert( "Hello" ); +function řekniAhoj() { // (1) vytvoření + alert( "Ahoj" ); } -let func = sayHi; // (2) copy +let funkce = řekniAhoj; // (2) zkopírování -func(); // Hello // (3) run the copy (it works)! -sayHi(); // Hello // this still works too (why wouldn't it) +funkce(); // Ahoj // (3) spustíme kopii (funguje to!) +řekniAhoj(); // Ahoj // i tohle stále funguje (proč by nemělo) ``` -Here's what happens above in detail: +Co se v uvedeném příkladu přesně stane: -1. The Function Declaration `(1)` creates the function and puts it into the variable named `sayHi`. -2. Line `(2)` copies it into the variable `func`. Please note again: there are no parentheses after `sayHi`. If there were, then `func = sayHi()` would write *the result of the call* `sayHi()` into `func`, not *the function* `sayHi` itself. -3. Now the function can be called as both `sayHi()` and `func()`. +1. Deklarace funkce `(1)` vytvoří funkci a uloží ji do proměnné nazvané `řekniAhoj`. +2. Řádek `(2)` ji zkopíruje do proměnné `funkce`. Opět si všimněte, že za `řekniAhoj` nejsou závorky. Kdyby tam byly, příkaz `funkce = řekniAhoj()` by zapsal do proměnné `funkce` *výsledek volání* `řekniAhoj`, ne samotnou *funkci* `řekniAhoj`. +3. Nyní můžeme tuto funkci volat pomocí `řekniAhoj()` i pomocí `funkce()`. -We could also have used a Function Expression to declare `sayHi`, in the first line: +Na prvním řádku jsme mohli deklarovat `řekniAhoj` i pomocí funkčního výrazu: ```js -let sayHi = function() { // (1) create - alert( "Hello" ); +let řekniAhoj = function() { // (1) vytvoření + alert( "Ahoj" ); }; +<<<<<<< HEAD +let funkce = řekniAhoj; +======= let func = sayHi; //(2) +>>>>>>> 6236eb8c3cdde729dab761a1d0967a88a1a6197e // ... ``` -Everything would work the same. +Všechno bude fungovat stejně. -````smart header="Why is there a semicolon at the end?" -You might wonder, why do Function Expressions have a semicolon `;` at the end, but Function Declarations do not: +````smart header="Proč je na konci středník?" +Možná se divíte, proč funkční výraz obsahuje na konci středník `;`, ale deklarace funkce ne: ```js -function sayHi() { +function řekniAhoj() { // ... } -let sayHi = function() { +let řekniAhoj = function() { // ... }*!*;*/!* ``` -The answer is simple: a Function Expression is created here as `function(…) {…}` inside the assignment statement: `let sayHi = …;`. The semicolon `;` is recommended at the end of the statement, it's not a part of the function syntax. +Odpověď je jednoduchá: funkční výraz je zde vytvořen jako `function(…) {…}` uvnitř příkazu přiřazení: `let řekniAhoj = …;`. Středník `;` se doporučuje uvádět na konci příkazu, není to součást syntaxe funkce. -The semicolon would be there for a simpler assignment, such as `let sayHi = 5;`, and it's also there for a function assignment. +Středník by zde byl i u jednoduššího přiřazení, například `let řekniAhoj = 5;`, a je zde také u přiřazení funkce. ```` -## Callback functions +## Funkce zpětného volání (callbackové funkce) -Let's look at more examples of passing functions as values and using function expressions. +Podíváme se na další příklady předávání funkcí jako hodnot a používání funkčních výrazů. -We'll write a function `ask(question, yes, no)` with three parameters: +Napíšeme funkci `zeptejSe(otázka, ano, ne)` se třemi parametry: -`question` -: Text of the question +`otázka` +: Text otázky -`yes` -: Function to run if the answer is "Yes" +`ano` +: Funkce, která se spustí, je-li odpověď „ano“ -`no` -: Function to run if the answer is "No" +`ne` +: Funkce, která se spustí, je-li odpověď „ne“ -The function should ask the `question` and, depending on the user's answer, call `yes()` or `no()`: +Funkce by měla položit otázku `otázka` a pak podle odpovědi uživatele zavolat `ano()` nebo `ne()`: ```js run *!* -function ask(question, yes, no) { - if (confirm(question)) yes() - else no(); +function zeptejSe(otázka, ano, ne) { + if (confirm(otázka)) ano() + else ne(); } */!* -function showOk() { - alert( "You agreed." ); +function zobrazOK() { + alert( "Souhlasil jste." ); } -function showCancel() { - alert( "You canceled the execution." ); +function zobrazStorno() { + alert( "Zrušil jste provádění." ); } -// usage: functions showOk, showCancel are passed as arguments to ask -ask("Do you agree?", showOk, showCancel); +// použití: funkce zobrazOK, zobrazStorno jsou předány funkci zeptejSe jako argumenty +zeptejSe("Souhlasíte?", zobrazOK, zobrazStorno); ``` -In practice, such functions are quite useful. The major difference between a real-life `ask` and the example above is that real-life functions use more complex ways to interact with the user than a simple `confirm`. In the browser, such functions usually draw a nice-looking question window. But that's another story. +V praxi jsou takové funkce poměrně užitečné. Hlavním rozdílem mezi `zeptejSe` ve skutečném životě a uvedeným příkladem je, že skutečné funkce používají složitější způsoby interakce s uživatelem, než pouhé `confirm`. V prohlížeči taková funkce obvykle vykreslí pěkné dotazovací okno. To je však jiný příběh. -**The arguments `showOk` and `showCancel` of `ask` are called *callback functions* or just *callbacks*.** +**Argumenty `zobrazOK` a `zobrazStorno` funkce `zeptejSe` se nazývají *callbackové funkce* nebo jednoduše *callbacky*.** -The idea is that we pass a function and expect it to be "called back" later if necessary. In our case, `showOk` becomes the callback for "yes" answer, and `showCancel` for "no" answer. +Myšlenkou je, že předáme funkci a očekáváme, že bude „zpětně volána“ (call = volání, back = zpět) později, až to bude nutné. V našem případě `zobrazOK` se stala callbackem pro odpověď „ano“ a `zobrazStorno` pro odpověď „ne“. -We can use Function Expressions to write an equivalent, shorter function: +Pomocí funkčních výrazů můžeme napsat ekvivalentní, ale kratší funkci: ```js run no-beautify -function ask(question, yes, no) { - if (confirm(question)) yes() - else no(); +function zeptejSe(otázka, ano, ne) { + if (confirm(otázka)) ano() + else ne(); } *!* -ask( - "Do you agree?", - function() { alert("You agreed."); }, - function() { alert("You canceled the execution."); } +zeptejSe( + "Souhlasíte?", + function() { alert("Souhlasil jste."); }, + function() { alert("Zrušil jste provádění."); } ); */!* ``` -Here, functions are declared right inside the `ask(...)` call. They have no name, and so are called *anonymous*. Such functions are not accessible outside of `ask` (because they are not assigned to variables), but that's just what we want here. +Zde jsou funkce deklarovány přímo ve volání `zeptejSe(...)`. Nemají žádný název, a tak se nazývají *anonymní*. Takové funkce nejsou dostupné mimo `zeptejSe` (protože nejsou přiřazeny žádným proměnným), ale to je přesně to, co tady chceme. -Such code appears in our scripts very naturally, it's in the spirit of JavaScript. +Takový kód se v našich skriptech objevuje zcela přirozeně a je přesně v duchu JavaScriptu. -```smart header="A function is a value representing an \"action\"" -Regular values like strings or numbers represent the *data*. +```smart header="Funkce je hodnota představující „akci“" +Běžné hodnoty, např. řetězce nebo čísla, představují *data*. -A function can be perceived as an *action*. +Na funkci lze pohlížet jako na *akci*. -We can pass it between variables and run when we want. +Můžeme ji předávat mezi proměnnými a zavolat, až budeme chtít. ``` -## Function Expression vs Function Declaration +## Funkční výrazy vs. deklarace funkcí -Let's formulate the key differences between Function Declarations and Expressions. +Zformulujme nyní základní rozdíly mezi deklaracemi funkcí a funkčními výrazy. -First, the syntax: how to differentiate between them in the code. +První rozdíl je syntaxe: jak je rozlišovat v kódu. -- *Function Declaration:* a function, declared as a separate statement, in the main code flow: +- *Deklarace funkce:* funkce deklarovaná samostatným příkazem v hlavním toku kódu: ```js - // Function Declaration - function sum(a, b) { + // deklarace funkce + function součet(a, b) { return a + b; } ``` -- *Function Expression:* a function, created inside an expression or inside another syntax construct. Here, the function is created on the right side of the "assignment expression" `=`: +- *Funkční výraz:* funkce vytvořená uprostřed výrazu nebo uvnitř jiného syntaktického konstruktu. Zde je funkce vytvořena na pravé straně „operátoru přiřazení“ `=`: ```js - // Function Expression - let sum = function(a, b) { + // funkční výraz + let součet = function(a, b) { return a + b; }; ``` -The more subtle difference is *when* a function is created by the JavaScript engine. +Jemnější rozdíl spočívá v tom, *kdy* přesně je funkce vytvořena enginem JavaScriptu. -**A Function Expression is created when the execution reaches it and is usable only from that moment.** +**Funkční výraz je vytvořen ve chvíli, kdy k němu dospěje vykonávání kódu, a je použitelný až od této chvíle.** -Once the execution flow passes to the right side of the assignment `let sum = function…` -- here we go, the function is created and can be used (assigned, called, etc. ) from now on. +Jakmile se provádění skriptu dostane k pravé straně přiřazení `let součet = function…` -- v tom okamžiku je funkce vytvořena a od nynějška může být používána (přiřazena, volána apod.). -Function Declarations are different. +Deklarace funkcí jsou odlišné. -**A Function Declaration can be called earlier than it is defined.** +**Deklarovaná funkce může být volána ještě dříve, než je definována.** -For example, a global Function Declaration is visible in the whole script, no matter where it is. +Například globální deklarace funkce je viditelná v celém skriptu, ať se nachází kdekoli. -That's due to internal algorithms. When JavaScript prepares to run the script, it first looks for global Function Declarations in it and creates the functions. We can think of it as an "initialization stage". +Je to způsobeno vnitřními algoritmy. Když JavaScript připravuje spuštění skriptu, nejprve v něm najde globální deklarace funkcí a tyto funkce vytvoří. Můžeme to považovat za „přípravnou fázi“. -And after all Function Declarations are processed, the code is executed. So it has access to these functions. +Teprve až jsou všechny deklarace funkcí zpracovány, kód se vykoná. Proto má k těmto funkcím přístup. -For example, this works: +Například toto funguje: ```js run refresh untrusted *!* -sayHi("John"); // Hello, John +řekniAhoj("Jan"); // Ahoj, Jan */!* -function sayHi(name) { - alert( `Hello, ${name}` ); +function řekniAhoj(jméno) { + alert( `Ahoj, ${jméno}` ); } ``` -The Function Declaration `sayHi` is created when JavaScript is preparing to start the script and is visible everywhere in it. +Deklarace funkce `řekniAhoj` se vytvoří, když JavaScript připravuje spuštění skriptu, a je v něm všude viditelná. -...If it were a Function Expression, then it wouldn't work: +...Kdyby to však byl funkční výraz, nefungovalo by to: ```js run refresh untrusted *!* -sayHi("John"); // error! +řekniAhoj("Jan"); // chyba! */!* -let sayHi = function(name) { // (*) no magic any more - alert( `Hello, ${name}` ); +let řekniAhoj = function(jméno) { // (*) už žádná magie + alert( `Ahoj, ${jméno}` ); }; ``` -Function Expressions are created when the execution reaches them. That would happen only in the line `(*)`. Too late. +Funkční výrazy se vytvoří, když k nim dorazí vykonávání kódu. To se stane až na řádku `(*)`. Pozdě. -Another special feature of Function Declarations is their block scope. +Další speciální vlastností deklarací funkcí je blok jejich platnosti. -**In strict mode, when a Function Declaration is within a code block, it's visible everywhere inside that block. But not outside of it.** +**Ve striktním režimu platí, že když je deklarace funkce umístěna v bloku kódu, je viditelná všude uvnitř tohoto bloku, ale ne mimo něj.** -For instance, let's imagine that we need to declare a function `welcome()` depending on the `age` variable that we get during runtime. And then we plan to use it some time later. +Například si představme, že potřebujeme deklarovat funkci `uvítání()`, která závisí na proměnné `věk`, kterou získáme za běhu skriptu. A pak ji plánujeme použít o něco později. -If we use Function Declaration, it won't work as intended: +Kdybychom použili deklaraci funkce, nefungovalo by to tak, jak zamýšlíme: ```js run -let age = prompt("What is your age?", 18); +let věk = prompt("Kolik je vám let?", 18); -// conditionally declare a function -if (age < 18) { +// podmíněná deklarace funkce +if (věk < 18) { - function welcome() { - alert("Hello!"); + function uvítání() { + alert("Ahoj!"); } } else { - function welcome() { - alert("Greetings!"); + function uvítání() { + alert("Dobrý den!"); } } -// ...use it later +// ...použijeme ji později *!* -welcome(); // Error: welcome is not defined +uvítání(); // Chyba: uvítání není definováno */!* ``` -That's because a Function Declaration is only visible inside the code block in which it resides. +Je to proto, že deklarace funkce je viditelná jedině uvnitř bloku kódu, v němž se nachází. -Here's another example: +Další příklad: ```js run -let age = 16; // take 16 as an example +let věk = 16; // vezmeme 16 jako příklad -if (age < 18) { +if (věk < 18) { *!* - welcome(); // \ (runs) + uvítání(); // \ (spustí se) */!* // | - function welcome() { // | - alert("Hello!"); // | Function Declaration is available - } // | everywhere in the block where it's declared + function uvítání() { // | + alert("Ahoj!"); // | deklarace funkce je k dispozici + } // | všude v bloku, v němž je funkce deklarována // | *!* - welcome(); // / (runs) + uvítání(); // / (spustí se) */!* } else { - function welcome() { - alert("Greetings!"); + function uvítání() { + alert("Zdravíme vás!"); } } -// Here we're out of curly braces, -// so we can not see Function Declarations made inside of them. +// Tady už jsme mimo složené závorky, +// takže nevidíme deklarace funkcí, které se nacházejí uvnitř nich. *!* -welcome(); // Error: welcome is not defined +uvítání(); // Chyba: uvítání není definováno */!* ``` -What can we do to make `welcome` visible outside of `if`? +Jak můžeme `uvítání` učinit viditelným i mimo `if`? -The correct approach would be to use a Function Expression and assign `welcome` to the variable that is declared outside of `if` and has the proper visibility. +Správný přístup by byl použití funkčního výrazu a přiřazení `uvítání` do proměnné, která je deklarována mimo `if` a má náležitou viditelnost. -This code works as intended: +Tento kód funguje tak, jak zamýšlíme: ```js run -let age = prompt("What is your age?", 18); +let věk = prompt("Kolik je vám let?", 18); -let welcome; +let uvítání; -if (age < 18) { +if (věk < 18) { - welcome = function() { - alert("Hello!"); + uvítání = function() { + alert("Ahoj!"); }; } else { - welcome = function() { - alert("Greetings!"); + uvítání = function() { + alert("Dobrý den!"); }; } *!* -welcome(); // ok now +uvítání(); // nyní je to v pořádku */!* ``` -Or we could simplify it even further using a question mark operator `?`: +Nebo to můžeme ještě zjednodušit pomocí operátoru otazníku `?`: ```js run -let age = prompt("What is your age?", 18); +let věk = prompt("Kolik je vám let?", 18); -let welcome = (age < 18) ? - function() { alert("Hello!"); } : - function() { alert("Greetings!"); }; +let uvítání = (věk < 18) ? + function() { alert("Ahoj!"); } : + function() { alert("Dobrý den!"); }; *!* -welcome(); // ok now +uvítání(); // nyní je to v pořádku */!* ``` -```smart header="When to choose Function Declaration versus Function Expression?" -As a rule of thumb, when we need to declare a function, the first thing to consider is Function Declaration syntax. It gives more freedom in how to organize our code, because we can call such functions before they are declared. +```smart header="Kdy zvolit deklaraci funkce a kdy funkční výraz?" +Orientační pravidlo zní, že když potřebujeme deklarovat funkci, měli bychom napřed zvážit syntaxi deklarace funkce. Ta nám dává více svobody v tom, jak zorganizovat kód, protože takovou funkci můžeme volat ještě předtím, než je deklarována. -That's also better for readability, as it's easier to look up `function f(…) {…}` in the code than `let f = function(…) {…};`. Function Declarations are more "eye-catching". +Je také lépe čitelná, protože je jednodušší najít v kódu `function f(…) {…}` než `let f = function(…) {…};`. Deklarace funkcí lépe „padnou do oka“. -...But if a Function Declaration does not suit us for some reason, or we need a conditional declaration (we've just seen an example), then Function Expression should be used. +...Jestliže nám však deklarace funkce pro naše účely nestačí nebo potřebujeme podmíněnou deklaraci (jak jsme právě viděli v příkladu), měli bychom použít funkční výraz. ``` -## Summary +## Shrnutí -- Functions are values. They can be assigned, copied or declared in any place of the code. -- If the function is declared as a separate statement in the main code flow, that's called a "Function Declaration". -- If the function is created as a part of an expression, it's called a "Function Expression". -- Function Declarations are processed before the code block is executed. They are visible everywhere in the block. -- Function Expressions are created when the execution flow reaches them. +- Funkce jsou hodnoty. Kdekoli v kódu je můžeme přiřazovat, kopírovat nebo deklarovat. +- Je-li funkce deklarována samostatným příkazem v hlavním kódu, nazývá se to „deklarace funkce“. +- Je-li funkce vytvořena jako součást výrazu, nazývá se to „funkční výraz“. +- Deklarace funkcí se zpracovávají ještě předtím, než je blok kódu vykonán. Jsou tedy viditelné všude v celém bloku. +- Funkční výrazy se vytvoří až ve chvíli, kdy k nim dorazí výkon kódu. -In most cases when we need to declare a function, a Function Declaration is preferable, because it is visible prior to the declaration itself. That gives us more flexibility in code organization, and is usually more readable. +Ve většině případů, kdy potřebujeme deklarovat funkci, dáváme přednost deklaraci funkce, protože pak je funkce viditelná ještě před samotnou deklarací. To nám dává více možností při organizaci kódu a je to zpravidla čitelnější. -So we should use a Function Expression only when a Function Declaration is not fit for the task. We've seen a couple of examples of that in this chapter, and will see more in the future. +Funkční výrazy bychom tedy měli používat jen tehdy, když nám pro naše účely deklarace funkce nestačí. V této kapitole jsme viděli několik takových příkladů a v budoucnu uvidíme další. \ No newline at end of file diff --git a/1-js/02-first-steps/17-arrow-functions-basics/1-rewrite-arrow/solution.md b/1-js/02-first-steps/17-arrow-functions-basics/1-rewrite-arrow/solution.md index 041db18bc..26fe35019 100644 --- a/1-js/02-first-steps/17-arrow-functions-basics/1-rewrite-arrow/solution.md +++ b/1-js/02-first-steps/17-arrow-functions-basics/1-rewrite-arrow/solution.md @@ -1,17 +1,17 @@ ```js run -function ask(question, yes, no) { - if (confirm(question)) yes(); - else no(); +function zeptejSe(otázka, ano, ne) { + if (confirm(otázka)) ano(); + else ne(); } -ask( - "Do you agree?", +zeptejSe( + "Souhlasíte?", *!* - () => alert("You agreed."), - () => alert("You canceled the execution.") + () => alert("Souhlasil jste."), + () => alert("Zrušil jste provádění.") */!* ); ``` -Looks short and clean, right? +Vypadá to stručně a čistě, že? diff --git a/1-js/02-first-steps/17-arrow-functions-basics/1-rewrite-arrow/task.md b/1-js/02-first-steps/17-arrow-functions-basics/1-rewrite-arrow/task.md index e18c08a83..92dd7538c 100644 --- a/1-js/02-first-steps/17-arrow-functions-basics/1-rewrite-arrow/task.md +++ b/1-js/02-first-steps/17-arrow-functions-basics/1-rewrite-arrow/task.md @@ -1,17 +1,17 @@ -# Rewrite with arrow functions +# Přepište na šipkové funkce -Replace Function Expressions with arrow functions in the code below: +Přepište funkční výrazy v následujícím kódu na šipkové funkce: ```js run -function ask(question, yes, no) { - if (confirm(question)) yes(); - else no(); +function zeptejSe(otázka, ano, ne) { + if (confirm(otázka)) ano(); + else ne(); } -ask( - "Do you agree?", - function() { alert("You agreed."); }, - function() { alert("You canceled the execution."); } +zeptejSe( + "Souhlasíte?", + function() { alert("Souhlasil jste."); }, + function() { alert("Zrušil jste provádění."); } ); ``` diff --git a/1-js/02-first-steps/17-arrow-functions-basics/article.md b/1-js/02-first-steps/17-arrow-functions-basics/article.md index 50c0d475d..2e013b0e4 100644 --- a/1-js/02-first-steps/17-arrow-functions-basics/article.md +++ b/1-js/02-first-steps/17-arrow-functions-basics/article.md @@ -1,111 +1,110 @@ -# Arrow functions, the basics +# Šipkové funkce (arrow funkce) – základy +Existuje ještě jedna velice jednoduchá a výstižná syntaxe vytváření funkcí, která často bývá lepší než funkční výrazy. -There's another very simple and concise syntax for creating functions, that's often better than Function Expressions. - -It's called "arrow functions", because it looks like this: +Nazývá se „šipková funkce“, jelikož vypadá takto: ```js -let func = (arg1, arg2, ..., argN) => expression; +let funkce = (arg1, arg2, ..., argN) => výraz; ``` -This creates a function `func` that accepts arguments `arg1..argN`, then evaluates the `expression` on the right side with their use and returns its result. +Tím se vytvoří funkce `funkce`, která přijímá argumenty `arg1..argN`, pak s jejich použitím vyhodnotí `výraz` na pravé straně a vrátí jeho výsledek. -In other words, it's the shorter version of: +Jinými slovy, je to kratší verze tohoto: ```js -let func = function(arg1, arg2, ..., argN) { - return expression; +let funkce = function(arg1, arg2, ..., argN) { + return výraz; }; ``` -Let's see a concrete example: +Podívejme se na konkrétní příklad: ```js run -let sum = (a, b) => a + b; +let součet = (a, b) => a + b; -/* This arrow function is a shorter form of: +/* Tato šipková funkce je zkrácenou formou této funkce: -let sum = function(a, b) { +let součet = function(a, b) { return a + b; }; */ -alert( sum(1, 2) ); // 3 +alert( součet(1, 2) ); // 3 ``` -As you can see, `(a, b) => a + b` means a function that accepts two arguments named `a` and `b`. Upon the execution, it evaluates the expression `a + b` and returns the result. +Jak vidíte, `(a, b) => a + b` značí funkci, která má dva parametry `a` a `b`. Když je vykonána, vyhodnotí výraz `a + b` a vrátí jeho výsledek. -- If we have only one argument, then parentheses around parameters can be omitted, making that even shorter. +- Máme-li pouze jeden parametr, můžeme závorky kolem něj vynechat, čímž se zápis ještě zkrátí. - For example: + Příklad: ```js run *!* - let double = n => n * 2; - // roughly the same as: let double = function(n) { return n * 2 } + let dvojnásobek = n => n * 2; + // zhruba totéž jako: let dvojnásobek = function(n) { return n * 2 } */!* - alert( double(3) ); // 6 + alert( dvojnásobek(3) ); // 6 ``` -- If there are no arguments, parentheses are empty, but they must be present: +- Nejsou-li žádné parametry, závorky budou prázdné, ale musí být uvedeny: ```js run - let sayHi = () => alert("Hello!"); + let řekniAhoj = () => alert("Ahoj!"); - sayHi(); + řekniAhoj(); ``` -Arrow functions can be used in the same way as Function Expressions. +Šipkové funkce můžeme používat stejným způsobem jako funkční výrazy. -For instance, to dynamically create a function: +Například k dynamickému vytvoření funkce: ```js run -let age = prompt("What is your age?", 18); +let věk = prompt("Kolik je vám let?", 18); -let welcome = (age < 18) ? - () => alert('Hello!') : - () => alert("Greetings!"); +let uvítání = (věk < 18) ? + () => alert('Ahoj!') : + () => alert("Dobrý den!"); -welcome(); +uvítání(); ``` -Arrow functions may appear unfamiliar and not very readable at first, but that quickly changes as the eyes get used to the structure. +Šipkové funkce mohou na první pohled vypadat podivně a nepříliš čitelně, ale to se rychle změní, jakmile si oči na tuto strukturu zvyknou. -They are very convenient for simple one-line actions, when we're just too lazy to write many words. +Jsou velmi vhodné pro jednoduché jednořádkové akce, kdy se nám prostě nechce psát příliš mnoho slov. -## Multiline arrow functions +## Víceřádkové šipkové funkce -The arrow functions that we've seen so far were very simple. They took arguments from the left of `=>`, evaluated and returned the right-side expression with them. +Šipkové funkce, které jsme doposud viděli, byly velmi jednoduché. Přebíraly argumenty z levé strany `=>`, vyhodnotily s nimi výraz na pravé straně a vrátily jeho hodnotu. -Sometimes we need a more complex function, with multiple expressions and statements. In that case, we can enclose them in curly braces. The major difference is that curly braces require a `return` within them to return a value (just like a regular function does). +Někdy potřebujeme složitější funkci s více výrazy a příkazy. V takovém případě je můžeme uzavřít do složených závorek. Hlavní rozdíl je v tom, že složené závorky vyžadují uvnitř `return`, aby mohly vrátit hodnotu (stejně jako běžná funkce). -Like this: +Například takto: ```js run -let sum = (a, b) => { // the curly brace opens a multiline function - let result = a + b; +let součet = (a, b) => { // složená závorka uvozuje víceřádkovou funkci + let výsledek = a + b; *!* - return result; // if we use curly braces, then we need an explicit "return" + return výsledek; // když používáme složené závorky, musíme výslovně uvést „return“ */!* }; -alert( sum(1, 2) ); // 3 +alert( součet(1, 2) ); // 3 ``` -```smart header="More to come" -Here we praised arrow functions for brevity. But that's not all! +```smart header="Bude toho víc" +Zde jsme chválili šipkové funkce pro jejich stručnost, ale to ještě není všechno! -Arrow functions have other interesting features. +Šipkové funkce mají i jiné zajímavé vlastnosti. -To study them in-depth, we first need to get to know some other aspects of JavaScript, so we'll return to arrow functions later in the chapter . +Abychom je mohli prostudovat do hloubky, musíme napřed poznat některé další prvky JavaScriptu. K šipkovým funkcím se tedy vrátíme později v kapitole . -For now, we can already use arrow functions for one-line actions and callbacks. +Prozatím už můžeme používat šipkové funkce pro jednořádkové akce a callbacky. ``` -## Summary +## Shrnutí -Arrow functions are handy for simple actions, especially for one-liners. They come in two flavors: +Šipkové funkce se hodí pro jednoduché akce, zvláště pro jednořádkové funkce. Dají se napsat dvěma způsoby: -1. Without curly braces: `(...args) => expression` -- the right side is an expression: the function evaluates it and returns the result. Parentheses can be omitted, if there's only a single argument, e.g. `n => n*2`. -2. With curly braces: `(...args) => { body }` -- brackets allow us to write multiple statements inside the function, but we need an explicit `return` to return something. +1. Bez složených závorek: `(...args) => výraz` -- na pravé straně je výraz: funkce jej vyhodnotí a vrátí jeho výsledek. Kulaté závorky můžeme vynechat, má-li funkce pouze jeden parametr, např. `n => n*2`. +2. Se složenými závorkami: `(...args) => { tělo }` -- složené závorky nám umožňují uvést ve funkci více příkazů, ale aby funkce něco vrátila, musíme výslovně uvést `return`. diff --git a/1-js/02-first-steps/18-javascript-specials/article.md b/1-js/02-first-steps/18-javascript-specials/article.md index e7ddacac4..94f1e9840 100644 --- a/1-js/02-first-steps/18-javascript-specials/article.md +++ b/1-js/02-first-steps/18-javascript-specials/article.md @@ -1,51 +1,51 @@ -# JavaScript specials +# Speciality JavaScriptu -This chapter briefly recaps the features of JavaScript that we've learned by now, paying special attention to subtle moments. +Tato kapitola krátce opakuje prvky JavaScriptu, které jsme se doposud naučili. Zvláštní pozornost věnuje citlivým místům. -## Code structure +## Struktura kódu -Statements are delimited with a semicolon: +Příkazy jsou ukončeny středníkem: ```js run no-beautify -alert('Hello'); alert('World'); +alert('Ahoj'); alert('světe'); ``` -Usually, a line-break is also treated as a delimiter, so that would also work: +Konec řádku se zpravidla také považuje za středník, takže fungovat bude i toto: ```js run no-beautify -alert('Hello') -alert('World') +alert('Ahoj') +alert('světe') ``` -That's called "automatic semicolon insertion". Sometimes it doesn't work, for instance: +To se nazývá „automatické vkládání středníku“. Někdy to však nefunguje, například: ```js run -alert("There will be an error after this message") +alert("Po této zprávě bude ohlášena chyba") [1, 2].forEach(alert) ``` -Most codestyle guides agree that we should put a semicolon after each statement. +Většina průvodců stylem kódu se shoduje, že bychom měli uvádět středník za každým příkazem. -Semicolons are not required after code blocks `{...}` and syntax constructs with them like loops: +Středníky nejsou vyžadovány za bloky kódu `{...}` a syntaktickými konstrukcemi, které je obsahují, například cykly: ```js function f() { - // no semicolon needed after function declaration + // za deklarací funkce není středník zapotřebí } for(;;) { - // no semicolon needed after the loop + // za cyklem není středník zapotřebí } ``` -...But even if we can put an "extra" semicolon somewhere, that's not an error. It will be ignored. +...Ale i když někde uvedeme středník „navíc“, není to chyba. Středník bude ignorován. -More in: . +Více v kapitole: . -## Strict mode +## Striktní režim -To fully enable all features of modern JavaScript, we should start scripts with `"use strict"`. +Abychom plně využili všechny vlastnosti moderního JavaScriptu, měli bychom zahajovat skripty direktivou `"use strict"`. ```js 'use strict'; @@ -53,143 +53,143 @@ To fully enable all features of modern JavaScript, we should start scripts with ... ``` -The directive must be at the top of a script or at the beginning of a function body. +Tato direktiva musí být uvedena na začátku skriptu nebo těla funkce. -Without `"use strict"`, everything still works, but some features behave in the old-fashioned, "compatible" way. We'd generally prefer the modern behavior. +Bez `"use strict"` bude všechno stále fungovat, ale některé prvky se budou chovat staromódně, „kompatibilně“. Obvykle dáváme přednost modernímu chování. -Some modern features of the language (like classes that we'll study in the future) enable strict mode implicitly. +Některé moderní vlastnosti jazyka (např. třídy, které budeme probírat v budoucnu) implicitně umožňují striktní režim. -More in: . +Více v kapitole: . -## Variables +## Proměnné -Can be declared using: +Lze je deklarovat pomocí: - `let` -- `const` (constant, can't be changed) -- `var` (old-style, will see later) +- `const` (konstanta, nemůže být měněna) +- `var` (ve starém stylu, uvidíme později) -A variable name can include: -- Letters and digits, but the first character may not be a digit. -- Characters `$` and `_` are normal, on par with letters. -- Non-Latin alphabets and hieroglyphs are also allowed, but commonly not used. +Název proměnné může obsahovat: +- Písmena a číslice, ale první znak nesmí být číslice. +- Znaky `$` a `_`, které lze používat běžně jako písmena. +- Povoleny jsou i znaky nelatinských abeced a hieroglyfy, ale obvykle se nepoužívají. -Variables are dynamically typed. They can store any value: +Proměnné jsou dynamicky typovány. Může do nich být uložena jakákoli hodnota: ```js let x = 5; -x = "John"; +x = "Jan"; ``` -There are 8 data types: +Existuje osm datových typů: -- `number` for both floating-point and integer numbers, -- `bigint` for integer numbers of arbitrary length, -- `string` for strings, -- `boolean` for logical values: `true/false`, -- `null` -- a type with a single value `null`, meaning "empty" or "does not exist", -- `undefined` -- a type with a single value `undefined`, meaning "not assigned", -- `object` and `symbol` -- for complex data structures and unique identifiers, we haven't learnt them yet. +- `number` pro čísla, a to jak celá, tak s pohyblivou řádovou čárkou, +- `bigint` pro celá čísla libovolné délky, +- `string` pro řetězce, +- `boolean` pro logické hodnoty: `true/false`, +- `null` -- typ s jedinou hodnotou `null`, která znamená „prázdná“ nebo „neexistující“, +- `undefined` -- typ s jedinou hodnotou `undefined`, která znamená „nepřiřazená“, +- `object` a `symbol` -- pro komplexní datové struktury a unikátní identifikátory, zatím jsme je neprobírali. -The `typeof` operator returns the type for a value, with two exceptions: +Operátor `typeof` vrací typ hodnoty se dvěma výjimkami: ```js -typeof null == "object" // error in the language -typeof function(){} == "function" // functions are treated specially +typeof null == "object" // chyba v jazyce +typeof function(){} == "function" // s funkcemi se zachází odlišně ``` -More in: and . +Více v kapitole: a . -## Interaction +## Interakce -We're using a browser as a working environment, so basic UI functions will be: +Jako pracovní prostředí používáme prohlížeč, takže základní funkce uživatelského rozhraní budou: -[`prompt(question, [default])`](https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt) -: Ask a `question`, and return either what the visitor entered or `null` if they clicked "cancel". +[`prompt(otázka, [default])`](https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt) +: Položí otázku `otázka` a vrátí buď to, co návštěvník zadal, nebo `null`, jestliže stiskl „Storno“. -[`confirm(question)`](https://developer.mozilla.org/en-US/docs/Web/API/Window/confirm) -: Ask a `question` and suggest to choose between Ok and Cancel. The choice is returned as `true/false`. +[`confirm(otázka)`](https://developer.mozilla.org/en-US/docs/Web/API/Window/confirm) +: Položí otázku `otázka` a nabídne na výběr mezi OK a Storno. Zvolená možnost je vrácena jako `true/false`. -[`alert(message)`](https://developer.mozilla.org/en-US/docs/Web/API/Window/alert) -: Output a `message`. +[`alert(zpráva)`](https://developer.mozilla.org/en-US/docs/Web/API/Window/alert) +: Vypíše zprávu `zpráva`. -All these functions are *modal*, they pause the code execution and prevent the visitor from interacting with the page until they answer. +Všechny tyto funkce jsou *modální*. Pozastaví vykonávání kódu a znemožní uživateli jinou interakci se stránkou, dokud neodpoví. -For instance: +Příklad: ```js run -let userName = prompt("Your name?", "Alice"); -let isTeaWanted = confirm("Do you want some tea?"); +let uživatelskéJméno = prompt("Jak se jmenujete?", "Alice"); +let dáSiČaj = confirm("Dáte si čaj?"); -alert( "Visitor: " + userName ); // Alice -alert( "Tea wanted: " + isTeaWanted ); // true +alert( "Návštěvník: " + uživatelskéJméno ); // Alice +alert( "Dá si čaj: " + dáSiČaj ); // true ``` -More in: . +Více v kapitole: . -## Operators +## Operátory -JavaScript supports the following operators: +JavaScript podporuje následující operátory: -Arithmetical -: Regular: `* + - /`, also `%` for the remainder and `**` for power of a number. +Aritmetické +: Obvyklé: `* + - /`, dále `%` pro zbytek po dělení a `**` pro mocninu. - The binary plus `+` concatenates strings. And if any of the operands is a string, the other one is converted to string too: + Binární plus `+` spojuje řetězce. Jestliže je jeden z operandů řetězec, bude na řetězec převeden i druhý operand: ```js run - alert( '1' + 2 ); // '12', string - alert( 1 + '2' ); // '12', string + alert( '1' + 2 ); // '12', řetězec + alert( 1 + '2' ); // '12', řetězec ``` -Assignments -: There is a simple assignment: `a = b` and combined ones like `a *= 2`. +Přiřazení +: Existuje jednoduché přiřazení `a = b` a kombinovaná přiřazení, např. `a *= 2`. -Bitwise -: Bitwise operators work with 32-bit integers at the lowest, bit-level: see the [docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#bitwise_operators) when they are needed. +Bitové +: Bitové operátory pracují se 32-bitovými celými čísly na nejnižší, bitové úrovni: až je budete potřebovat, viz [dokumentaci](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#bitwise_operators). -Conditional -: The only operator with three parameters: `cond ? resultA : resultB`. If `cond` is truthy, returns `resultA`, otherwise `resultB`. +Podmíněný +: Jediný operátor se třemi parametry: `podmínka ? výsledekA : výsledekB`. Je-li `podmínka` pravdivá, vrátí `výsledekA`, jinak vrátí `výsledekB`. -Logical operators -: Logical AND `&&` and OR `||` perform short-circuit evaluation and then return the value where it stopped (not necessary `true`/`false`). Logical NOT `!` converts the operand to boolean type and returns the inverse value. +Logické +: Logické AND `&&` a OR `||` provádějí zkrácené vyhodnocování a pak vrátí hodnotu, na které se zastavily (nemusí to nutně být `true`/`false`). Logické NOT `!` převádí operand na typ boolean a vrací opačnou hodnotu. -Nullish coalescing operator -: The `??` operator provides a way to choose a defined value from a list of variables. The result of `a ?? b` is `a` unless it's `null/undefined`, then `b`. +Koalescence +: Operátor `??` poskytuje způsob, jak vybrat definovanou hodnotu ze seznamu proměnných. Výsledek `a ?? b` je `a`, pokud není `null/undefined`; v takovém případě je výsledek `b`. -Comparisons -: Equality check `==` for values of different types converts them to a number (except `null` and `undefined` that equal each other and nothing else), so these are equal: +Porovnávání +: Test rovnosti `==` pro hodnoty různých typů je převede na číslo (s výjimkou `null` a `undefined`, které se rovnají sobě navzájem a ničemu jinému), takže tyto hodnoty jsou si rovny: ```js run alert( 0 == false ); // true alert( 0 == '' ); // true ``` - Other comparisons convert to a number as well. + Jiná porovnání se převádí také na čísla. - The strict equality operator `===` doesn't do the conversion: different types always mean different values for it. + Operátor striktní rovnosti `===` tuto konverzi neprovádí: různé typy pro něj vždy znamenají, že hodnoty se nerovnají. - Values `null` and `undefined` are special: they equal `==` each other and don't equal anything else. + Hodnoty `null` a `undefined` jsou speciální: rovnají se `==` sobě navzájem a nerovnají se ničemu jinému. - Greater/less comparisons compare strings character-by-character, other types are converted to a number. + Operátory porovnání větší/menší porovnávají řetězce znak po znaku, ostatní typy se převádějí na čísla. -Other operators -: There are few others, like a comma operator. +Ostatní +: Existuje několik dalších operátorů, např. operátor čárky. -More in: , , , . +Více v kapitolách: , , , . -## Loops +## Cykly -- We covered 3 types of loops: +- Probrali jsme tři druhy cyklů: ```js // 1 - while (condition) { + while (podmínka) { ... } // 2 do { ... - } while (condition); + } while (podmínka); // 3 for(let i = 0; i < 10; i++) { @@ -197,88 +197,88 @@ More in: , , , . +Více v kapitole: . -Later we'll study more types of loops to deal with objects. +Později prostudujeme další druhy cyklů, které pracují s objekty. -## The "switch" construct +## Konstrukce „switch“ -The "switch" construct can replace multiple `if` checks. It uses `===` (strict equality) for comparisons. +Konstrukce „switch“ dokáže nahradit několik testů `if`. K porovnávání používá `===` (striktní rovnost). -For instance: +Příklad: ```js run -let age = prompt('Your age?', 18); +let věk = prompt('Kolik je vám let?', 18); -switch (age) { +switch (věk) { case 18: - alert("Won't work"); // the result of prompt is a string, not a number + alert("Tohle nefunguje"); // výsledkem dotazu prompt je řetězec, ne číslo break; case "18": - alert("This works!"); + alert("Tohle funguje!"); break; default: - alert("Any value not equal to one above"); + alert("Jakákoli hodnota, která se nerovná žádné výše uvedené"); } ``` -Details in: . +Více v kapitole: . -## Functions +## Funkce -We covered three ways to create a function in JavaScript: +Uvedli jsme tři způsoby, jakými lze v JavaScriptu vytvořit funkci: -1. Function Declaration: the function in the main code flow +1. Deklarace funkce: funkce v hlavním kódu ```js - function sum(a, b) { - let result = a + b; + function součet(a, b) { + let výsledek = a + b; - return result; + return výsledek; } ``` -2. Function Expression: the function in the context of an expression +2. Funkční výraz: funkce v kontextu výrazu ```js - let sum = function(a, b) { - let result = a + b; + let součet = function(a, b) { + let výsledek = a + b; - return result; + return výsledek; }; ``` -3. Arrow functions: +3. Šipkové funkce: ```js - // expression on the right side - let sum = (a, b) => a + b; + // výraz na pravé straně + let součet = (a, b) => a + b; - // or multi-line syntax with { ... }, need return here: - let sum = (a, b) => { + // nebo víceřádková syntaxe s { ... }, zde potřebujeme return: + let součet = (a, b) => { // ... return a + b; } - // without arguments - let sayHi = () => alert("Hello"); + // bez argumentů + let řekniAhoj = () => alert("Ahoj"); - // with a single argument - let double = n => n * 2; + // s jediným argumentem + let dvojnásobek = n => n * 2; ``` -- Functions may have local variables: those declared inside its body or its parameter list. Such variables are only visible inside the function. -- Parameters can have default values: `function sum(a = 1, b = 2) {...}`. -- Functions always return something. If there's no `return` statement, then the result is `undefined`. +- Funkce mohou obsahovat lokální proměnné: ty jsou deklarovány uvnitř jejich těla nebo v seznamu parametrů. Tyto proměnné jsou viditelné jen uvnitř funkce. +- Parametry mohou mít nastavené výchozí hodnoty: `function součet(a = 1, b = 2) {...}`. +- Funkce vždy něco vrátí. Neobsahuje-li příkaz `return`, jejím výsledkem je `undefined`. -Details: see , . +Více v kapitolách: , . -## More to come +## Bude toho víc -That was a brief list of JavaScript features. As of now we've studied only basics. Further in the tutorial you'll find more specials and advanced features of JavaScript. +Toto byl krátký seznam prvků JavaScriptu. Dosud jsme prostudovali pouze základy. Dále v tomto tutoriálu naleznete další speciální a pokročilé prvky JavaScriptu. diff --git a/1-js/03-code-quality/01-debugging-chrome/article.md b/1-js/03-code-quality/01-debugging-chrome/article.md index 4f50fb428..49b6ba7e2 100644 --- a/1-js/03-code-quality/01-debugging-chrome/article.md +++ b/1-js/03-code-quality/01-debugging-chrome/article.md @@ -1,195 +1,195 @@ -# Debugging in the browser +# Ladění v prohlížeči -Before writing more complex code, let's talk about debugging. +Než začneme psát složitější kód, pohovořme si o ladění. -[Debugging](https://en.wikipedia.org/wiki/Debugging) is the process of finding and fixing errors within a script. All modern browsers and most other environments support debugging tools -- a special UI in developer tools that makes debugging much easier. It also allows to trace the code step by step to see what exactly is going on. +[Ladění](https://cs.wikipedia.org/wiki/Ladění_(programování)) je proces hledání a opravování chyb ve skriptu. Ve všech moderních prohlížečích i ve většině ostatních prostředí jsou podporovány ladicí nástroje -- speciální uživatelské rozhraní ve vývojářských nástrojích, které ladění znatelně ulehčuje. Umožňuje také procházet kód krok za krokem, abychom viděli, co přesně se v něm děje. -We'll be using Chrome here, because it has enough features, most other browsers have a similar process. +Zde budeme používat Chrome, protože má dostatek potřebných prvků. Většina ostatních prohlížečů má podobný proces. -## The "Sources" panel +## Panel „Zdroje“ -Your Chrome version may look a little bit different, but it still should be obvious what's there. +Vaše verze Chrome může vypadat trochu odlišně, ale i tak by mělo být zřejmé, o co jde. -- Open the [example page](debugging/index.html) in Chrome. -- Turn on developer tools with `key:F12` (Mac: `key:Cmd+Opt+I`). -- Select the `Sources` panel. +- Otevřete v Chrome [stránku s příkladem](debugging/index.html). +- Zapněte vývojářské nástroje klávesou `key:F12` (Mac: `key:Cmd+Opt+I`). +- Zvolte panel `Sources` (v české verzi `Zdroje`). -Here's what you should see if you are doing it for the first time: +Když to uděláte napoprvé, měli byste vidět toto: ![](chrome-open-sources.svg) -The toggler button opens the tab with files. +Přepínač otevírá záložku se soubory. -Let's click it and select `hello.js` in the tree view. Here's what should show up: +Klikněme na něj a a zvolme `hello.js` ve stromovém zobrazení. Mělo by se zobrazit toto: ![](chrome-tabs.svg) -The Sources panel has 3 parts: +Panel zdrojů má 3 části: -1. The **File Navigator** pane lists HTML, JavaScript, CSS and other files, including images that are attached to the page. Chrome extensions may appear here too. -2. The **Code Editor** pane shows the source code. -3. The **JavaScript Debugging** pane is for debugging, we'll explore it soon. +1. Záložka **File Navigator** (**Navigační panel**) zobrazuje soubory HTML, JavaScript, CSS a jiné, včetně obrázků, které jsou připojeny ke stránce. Zde se mohou objevit i rozšíření Chrome. +2. Záložka **Code Editor** (**Editor kódu**) zobrazuje zdrojový kód. +3. Záložka **JavaScript Debugging** (**Ladicí nástroj**) slouží k ladění. Brzy ji prozkoumáme. -Now you could click the same toggler again to hide the resources list and give the code some space. +Nyní můžete kliknout na stejný přepínač znovu, abyste skryli seznam zdrojů a poskytli prostor kódu. -## Console +## Konzole -If we press `key:Esc`, then a console opens below. We can type commands there and press `key:Enter` to execute. +Pokud stiskneme `key:Esc`, otevře se dole konzole. Můžeme tam psát příkazy a pak stisknout `key:Enter`, aby se vykonaly. -After a statement is executed, its result is shown below. +Poté, co se příkaz vykoná, se dole zobrazí jeho výsledek. -For example, here `1+2` results in `3`, while the function call `hello("debugger")` returns nothing, so the result is `undefined`: +Například `1+2` zde vydá výsledek `3`, zatímco volání funkce `ahoj("debugger")` nevrátí nic, takže výsledek bude `undefined`: ![](chrome-sources-console.svg) -## Breakpoints +## Zarážky -Let's examine what's going on within the code of the [example page](debugging/index.html). In `hello.js`, click at line number `4`. Yes, right on the `4` digit, not on the code. +Nyní prozkoumáme, co se přesně děje v kódu na [stránce s příkladem](debugging/index.html). V `hello.js` klikněte na číslo řádku `4`. Ano, přímo na číslici `4`, ne na kód. -Congratulations! You've set a breakpoint. Please also click on the number for line `8`. +Gratulujeme! Právě jste nastavili zarážku. Klikněte prosím také na číslo řádku `8`. -It should look like this (blue is where you should click): +Mělo by to vypadat takto (modrá barva označuje, kam byste měli kliknout): ![](chrome-sources-breakpoint.svg) -A *breakpoint* is a point of code where the debugger will automatically pause the JavaScript execution. +*Zarážka* je místo, na němž ladicí nástroj automaticky pozastaví běh JavaScriptu. -While the code is paused, we can examine current variables, execute commands in the console etc. In other words, we can debug it. +Když je kód pozastaven, můžeme prozkoumávat aktuální proměnné, spouštět příkazy v konzoli a podobně. Jinými slovy, můžeme kód ladit. -We can always find a list of breakpoints in the right panel. That's useful when we have many breakpoints in various files. It allows us to: -- Quickly jump to the breakpoint in the code (by clicking on it in the right panel). -- Temporarily disable the breakpoint by unchecking it. -- Remove the breakpoint by right-clicking and selecting Remove. -- ...And so on. +V pravém panelu vždy najdeme seznam zarážek. To je užitečné, když máme mnoho zarážek v různých souborech. Seznam nám umožňuje: +- Rychle přeskočit na zarážku v kódu (když na ni klikneme v pravém panelu). +- Dočasně zarážku zakázat tím, že zrušíme její zaškrtnutí. +- Odstranit zarážku tím, že na ni klikneme pravým tlačítkem myši a zvolíme Remove (Odstranit zarážku). +- ...A tak dále. -```smart header="Conditional breakpoints" -*Right click* on the line number allows to create a *conditional* breakpoint. It only triggers when the given expression, that you should provide when you create it, is truthy. +```smart header="Podmíněné zarážky" +*Kliknutím pravým tlačítkem* na číslo řádku můžeme vytvořit *podmíněnou* zarážku. Ta se aktivuje, jen když je zadaný výraz, který byste měli uvést při jejím vytvoření, pravdivý. -That's handy when we need to stop only for a certain variable value or for certain function parameters. +To se hodí, když potřebujeme pozastavit skript jen při určité hodnotě proměnné nebo při určitých argumentech pro funkci. ``` -## The command "debugger" +## Příkaz „debugger“ -We can also pause the code by using the `debugger` command in it, like this: +Pozastavit kód můžeme také tím, že v něm použijeme příkaz `debugger`, například: ```js -function hello(name) { - let phrase = `Hello, ${name}!`; +function ahoj(jméno) { + let věta = `Ahoj, ${jméno}!`; *!* - debugger; // <-- the debugger stops here + debugger; // <-- ladicí nástroj se tady zastaví */!* - say(phrase); + řekni(věta); } ``` -Such command works only when the development tools are open, otherwise the browser ignores it. +Tento příkaz funguje jen tehdy, když jsou otevřené vývojářské nástroje, jinak jej prohlížeč ignoruje. -## Pause and look around +## Pozastavení a rozhlédnutí -In our example, `hello()` is called during the page load, so the easiest way to activate the debugger (after we've set the breakpoints) is to reload the page. So let's press `key:F5` (Windows, Linux) or `key:Cmd+R` (Mac). +V našem příkladu je během nahrání stránky zavoláno `ahoj()`, takže nejjednodušším způsobem, jak aktivovat ladicí nástroj (po nastavení zarážek), je znovu načíst stránku. Stiskneme tedy `key:F5` (Windows, Linux) nebo `key:Cmd+R` (Mac). -As the breakpoint is set, the execution pauses at the 4th line: +Když je zarážka nastavena, běh se zastaví na 4. řádku: ![](chrome-sources-debugger-pause.svg) -Please open the informational dropdowns to the right (labeled with arrows). They allow you to examine the current code state: +Rozevřete si rozbalovací menu, které se nachází vpravo (označené šipkami). Umožní vám prozkoumávat aktuální stav kódu: -1. **`Watch` -- shows current values for any expressions.** +1. **`Watch` (`Sledované výrazy`) -- zobrazuje aktuální hodnoty libovolných výrazů.** - You can click the plus `+` and input an expression. The debugger will show its value, automatically recalculating it in the process of execution. + Můžete kliknout na plus `+` a zadat výraz. Ladicí nástroj bude zobrazovat jeho hodnotu, kterou při běhu skriptu automaticky přepočítá. -2. **`Call Stack` -- shows the nested calls chain.** +2. **`Call Stack` (`Zásobník volání`) -- zobrazuje řetězec vnořených volání funkcí.** - At the current moment the debugger is inside `hello()` call, called by a script in `index.html` (no function there, so it's called "anonymous"). + V aktuálním okamžiku je ladicí nástroj uvnitř volání `ahoj()`, kterou zavolal skript v `index.html` (není zde žádná funkce, takže se nazývá „anonymní“). - If you click on a stack item (e.g. "anonymous"), the debugger jumps to the corresponding code, and all its variables can be examined as well. -3. **`Scope` -- current variables.** + Když kliknete na prvek zásobníku (např. „anonymní“), ladicí nástroj přeskočí na odpovídající kód a vy můžete prozkoumávat všechny jeho proměnné. +3. **`Scope` (`Rozsah`) -- aktuální proměnné.** - `Local` shows local function variables. You can also see their values highlighted right over the source. + `Local` (`Místní`) zobrazuje lokální funkční proměnné. Vidíte také jejich hodnoty zvýrazněné přímo nad zdrojovým kódem. - `Global` has global variables (out of any functions). + `Global` (`Globální`) obsahuje globální proměnné (mimo všechny funkce). - There's also `this` keyword there that we didn't study yet, but we'll do that soon. + Je zde také klíčové slovo `this`, které jsme zatím neprobírali, ale brzy tak učiníme. -## Tracing the execution +## Sledování běhu skriptu -Now it's time to *trace* the script. +Nyní nastal čas *krokovat* skript. -There are buttons for it at the top of the right panel. Let's engage them. +K tomu slouží tlačítka na vrchu pravého panelu. Podívejme se na ně. - -- "Resume": continue the execution, hotkey `key:F8`. -: Resumes the execution. If there are no additional breakpoints, then the execution just continues and the debugger loses control. + -- „Resume“ („Obnovit běh skriptu“): pokračuje v běhu, klávesa `key:F8`. +: Pokračuje v běhu skriptu. Nejsou-li už žádné další zarážky, skript se bude prostě vykonávat dál a ladicí nástroj nad ním ztratí kontrolu. - Here's what we can see after a click on it: + Toto uvidíme poté, co na něj klikneme: ![](chrome-sources-debugger-trace-1.svg) - The execution has resumed, reached another breakpoint inside `say()` and paused there. Take a look at the "Call Stack" at the right. It has increased by one more call. We're inside `say()` now. + Běh skriptu se obnovil, dosáhl další zarážky uvnitř `řekni()` a zastavil se tam. Podívejte se na zásobník volání („Call Stack“) vpravo. Zvětšil se o jedno volání. Nyní jsme uvnitř `řekni()`. - -- "Step": run the next command, hotkey `key:F9`. -: Run the next statement. If we click it now, `alert` will be shown. + -- „\“ („Krokovat“): spustí další příkaz, klávesa `key:F9`. +: Spustí další příkaz. Když na něj nyní klikneme, zobrazí se `alert`. - Clicking this again and again will step through all script statements one by one. + Dalším a dalším klikáním můžeme krokovat všechny příkazy skriptu jeden po druhém. - -- "Step over": run the next command, but *don't go into a function*, hotkey `key:F10`. -: Similar to the previous "Step" command, but behaves differently if the next statement is a function call (not a built-in, like `alert`, but a function of our own). + -- „Step over“ („Překročit“): spustí další příkaz, ale *nevstoupí do funkce*, klávesa `key:F10`. +: Podobá se předchozímu příkazu „Krokovat“, ale chová se jinak, jestliže dalším příkazem je volání funkce (ne vestavěné funkce jako `alert`, ale naší vlastní funkce). - If we compare them, the "Step" command goes into a nested function call and pauses the execution at its first line, while "Step over" executes the nested function call invisibly to us, skipping the function internals. + Když si je srovnáme, příkaz „Krokovat“ vstoupí do vnořeného volání funkce a pozastaví běh na jejím prvním řádku, zatímco „Překročit“ spustí vnořené volání funkce a překročí její vnitřek. - The execution is then paused immediately after that function call. + Běh se pak ihned po volání této funkce pozastaví. - That's good if we're not interested to see what happens inside the function call. + To se hodí, když nás nezajímá, co se děje uvnitř volané funkce. - -- "Step into", hotkey `key:F11`. -: That's similar to "Step", but behaves differently in case of asynchronous function calls. If you're only starting to learn JavaScript, then you can ignore the difference, as we don't have asynchronous calls yet. + -- „Step into“ („Vnořit“), klávesa `key:F11`. +: Podobá se variantě „Krokovat“, ale chová se jinak v případě asynchronního volání funkce. Jestliže se teprve začínáte učit JavaScript, můžete tento rozdíl ignorovat, jelikož asynchronní volání funkcí ještě neznáme. - For the future, just note that "Step" command ignores async actions, such as `setTimeout` (scheduled function call), that execute later. The "Step into" goes into their code, waiting for them if necessary. See [DevTools manual](https://developers.google.com/web/updates/2018/01/devtools#async) for more details. + Do budoucna si jen poznamenejme, že příkaz „Krokovat“ ignoruje asynchronní akce, například `setTimeout` (vyvolání funkce za určitou dobu), které se vykonávají později. Příkaz „Vnořit“ vstoupí do jejich kódu a počká na ně, pokud je to nutné. Podrobnosti viz [manuál k vývojářským nástrojům](https://developers.google.com/web/updates/2018/01/devtools#async). - -- "Step out": continue the execution till the end of the current function, hotkey `key:Shift+F11`. -: Continue the execution and stop it at the very last line of the current function. That's handy when we accidentally entered a nested call using , but it does not interest us, and we want to continue to its end as soon as possible. + -- „Step out“ („Vyskočit“) pokračuje v běhu až do konce vykonávané funkce, klávesa `key:Shift+F11`. +: Pokračuje v běhu a zastaví se až na posledním řádku právě vykonávané funkce. To se hodí, když jsme omylem vstoupili do volání funkce pomocí , ale ta nás nezajímá, a tak chceme co nejrychleji dospět k jejímu konci. - -- enable/disable all breakpoints. -: That button does not move the execution. Just a mass on/off for breakpoints. + -- povolí/zakáže všechny zarážky. +: Toto tlačítko nemá vliv na běh skriptu, jen hromadně zapne/vypne všechny zarážky. - -- enable/disable automatic pause in case of an error. -: When enabled, if the developer tools is open, an error during the script execution automatically pauses it. Then we can analyze variables in the debugger to see what went wrong. So if our script dies with an error, we can open debugger, enable this option and reload the page to see where it dies and what's the context at that moment. + -- povolí/zakáže automatické pozastavení v případě chyby. +: Když je povoleno a vývojářské nástroje jsou otevřeny, chyba během výkonu skriptu jej automaticky pozastaví. Pak můžeme v ladicím nástroji analyzovat proměnné, abychom viděli, co se pokazilo. Když tedy náš skript skončí s chybou, můžeme otevřít ladicí nástroj, povolit tuto možnost a znovu načíst stránku, abychom viděli, kde spadl a jaký je v tom okamžiku jeho kontext. -```smart header="Continue to here" -Right click on a line of code opens the context menu with a great option called "Continue to here". +```smart header="Pokračovat až sem" +Po kliknutí pravým tlačítkem myši na řádek kódu se otevře kontextové menu s výtečnou možností „Continue to here“ („Pokračovat sem“). -That's handy when we want to move multiple steps forward to the line, but we're too lazy to set a breakpoint. +To se hodí, když chceme provést větší množství kroků až k tomuto řádku, ale nechce se nám nastavovat zarážku. ``` -## Logging +## Logování -To output something to console from our code, there's `console.log` function. +Chceme-li vypsat něco z našeho kódu na konzoli, máme k tomu funkci `console.log`. -For instance, this outputs values from `0` to `4` to console: +Například tento kód vypíše na konzoli hodnoty od `0` do `4`: ```js run -// open console to see +// otevřete si konzoli a uvidíte for (let i = 0; i < 5; i++) { - console.log("value,", i); + console.log("hodnota,", i); } ``` -Regular users don't see that output, it is in the console. To see it, either open the Console panel of developer tools or press `key:Esc` while in another panel: that opens the console at the bottom. +Běžní uživatelé tento výstup neuvidí, vypíše se na konzoli. Abyste jej viděli, otevřete panel Console (Konzole) vývojářských nástrojů nebo stiskněte `key:Esc`, když jste v jiném panelu: tím se dole otevře konzole. -If we have enough logging in our code, then we can see what's going on from the records, without the debugger. +Máme-li v kódu dostatek logování, uvidíme z těchto záznamů, co se děje, i bez ladicího nástroje. -## Summary +## Shrnutí -As we can see, there are three main ways to pause a script: -1. A breakpoint. -2. The `debugger` statements. -3. An error (if dev tools are open and the button is "on"). +Zjistili jsme, že existují tři hlavní způsoby, jak pozastavit skript: +1. Zarážkou. +2. Pomocí příkazu `debugger`. +3. Když se vyskytne chyba (jsou-li vývojářské nástroje otevřené a přepínač je „zapnutý“). -When paused, we can debug: examine variables and trace the code to see where the execution goes wrong. +Když je skript pozastaven, můžeme jej ladit: prozkoumávat proměnné a krokovat kód, abychom viděli, kde a co se při jeho vykonávání pokazilo. -There are many more options in developer tools than covered here. The full manual is at . +Vývojářské nástroje obsahují mnohem více možností, než jsme zde uvedli. Kompletní manuál najdete na . -The information from this chapter is enough to begin debugging, but later, especially if you do a lot of browser stuff, please go there and look through more advanced capabilities of developer tools. +Informace o ladění, zmíněné v této kapitole, vám do začátku postačí, ale později, zvlášť když budete hodně pracovat s prohlížeči, se tam prosím podívejte a prostudujte si pokročilejší možnosti vývojářských nástrojů. -Oh, and also you can click at various places of dev tools and just see what's showing up. That's probably the fastest route to learn dev tools. Don't forget about the right click and context menus! +A také můžete klikat na různá místa vývojářských nástrojů a zkoušet, co se objeví. To je asi nejrychlejší způsob, jak se je naučit. Nezapomínejte na pravé tlačítko myši a kontextová menu! diff --git a/1-js/03-code-quality/01-debugging-chrome/chrome-open-sources.svg b/1-js/03-code-quality/01-debugging-chrome/chrome-open-sources.svg index 5fc6dce3a..a0e9057c7 100644 --- a/1-js/03-code-quality/01-debugging-chrome/chrome-open-sources.svg +++ b/1-js/03-code-quality/01-debugging-chrome/chrome-open-sources.svg @@ -1 +1,34 @@ -open sources \ No newline at end of file + + + + + + + + + + + + + + Otevřete záložku se zdrojovými soubory + + + + + 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 4facc8b29..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 @@ -1,48 +1,48 @@ -You could note the following: +Měli byste si všimnout následujícího: ```js no-beautify -function pow(x,n) // <- no space between arguments -{ // <- figure bracket on a separate line - let result=1; // <- no spaces before or after = - for(let i=0;i -Now let's discuss the rules and reasons for them in detail. +Nyní si tato pravidla a jejich důvody probereme podrobně. -```warn header="There are no \"you must\" rules" -Nothing is set in stone here. These are style preferences, not religious dogmas. +```warn header="Toto nejsou žádná povinná pravidla" +Nic tady není zasazeno do kamene. Toto jsou stylové preference, ne náboženská dogmata. ``` -### Curly Braces +### Složené závorky -In most JavaScript projects curly braces are written in "Egyptian" style with the opening brace on the same line as the corresponding keyword -- not on a new line. There should also be a space before the opening bracket, like this: +Ve většině JavaScriptových projektů se složené závorky píší „egyptským“ stylem, kdy je levá závorka na stejném řádku jako odpovídající klíčové slovo -- ne na novém řádku. Před levou závorkou by také měla být mezera, jako zde: ```js -if (condition) { - // do this - // ...and that - // ...and that +if (podmínka) { + // dělej tohle + // ...a tohle + // ...a tohle } ``` -A single-line construct, such as `if (condition) doSomething()`, is an important edge case. Should we use braces at all? +Důležitým krajním případem je jednořádková konstrukce, například `if (podmínka) dělejNěco()`. Měli bychom vůbec použít závorky? -Here are the annotated variants so you can judge their readability for yourself: +Uvádíme jednotlivé varianty s komentářem, takže můžete sami posoudit jejich čitelnost: -1. 😠 Beginners sometimes do that. Bad! Curly braces are not needed: +1. 😠 Začátečníci někdy píší takto. Špatně! Složené závorky nejsou zapotřebí: ```js - if (n < 0) *!*{*/!*alert(`Power ${n} is not supported`);*!*}*/!* + if (n < 0) *!*{*/!*alert(`${n}-tá mocnina není podporována`);*!*}*/!* ``` -2. 😠 Split to a separate line without braces. Never do that, easy to make an error when adding new lines: +2. 😠 Umístění na samostatný řádek bez složených závorek. Tohle nikdy nedělejte, jelikož snadno uděláte chybu, když budete přidávat další řádky: ```js if (n < 0) - alert(`Power ${n} is not supported`); + alert(`${n}-tá mocnina není podporována`); ``` -3. 😏 One line without braces - acceptable, if it's short: +3. 😏 Jeden řádek bez složených závorek - to je přijatelné, pokud je krátký: ```js - if (n < 0) alert(`Power ${n} is not supported`); + if (n < 0) alert(`${n}-tá mocnina není podporována`); ``` -4. 😃 The best variant: +4. 😃 Nejlepší varianta: ```js if (n < 0) { - alert(`Power ${n} is not supported`); + alert(`${n}-tá mocnina není podporována`); } ``` -For a very brief code, one line is allowed, e.g. `if (cond) return null`. But a code block (the last variant) is usually more readable. +Pro velmi krátký kód je dovolen jeden řádek, např. `if (podmínka) return null`. Ale kódový blok (poslední uvedená varianta) bývá obvykle čitelnější. -### Line Length +### Délka řádku -No one likes to read a long horizontal line of code. It's best practice to split them. +Nikdo není rád, když musí číst dlouhý vodorovný řádek kódu. Lepší přístup je rozdělit jej. -For example: +Například: ```js -// backtick quotes ` allow to split the string into multiple lines -let str = ` - ECMA International's TC39 is a group of JavaScript developers, - implementers, academics, and more, collaborating with the community - to maintain and evolve the definition of JavaScript. +// zpětné uvozovky ` umožňují rozdělit řádek na více řádků +let řetězec = ` + TC39 v ECMA International je skupina JavaScriptových vývojářů, + implementátorů, akademiků a dalších, kteří spolupracují s komunitou, + aby udržovali a rozvíjeli definici JavaScriptu. `; ``` -And, for `if` statements: +A pro příkazy `if`: ```js if ( id === 123 && - moonPhase === 'Waning Gibbous' && - zodiacSign === 'Libra' + měsíčníFáze === 'Ubývání' && + znameníZvěrokruhu === 'Váhy' ) { - letTheSorceryBegin(); + začniKouzlo(); } ``` -The maximum line length should be agreed upon at the team-level. It's usually 80 or 120 characters. +Na maximální délce řádku by se měl dohodnout celý tým. Obvykle bývá 80 nebo 120 znaků. -### Indents +### Odsazení -There are two types of indents: +Existují dva druhy odsazení: -- **Horizontal indents: 2 or 4 spaces.** +- **Vodorovné odsazení: 2 nebo 4 mezery.** - A horizontal indentation is made using either 2 or 4 spaces or the horizontal tab symbol (key `key:Tab`). Which one to choose is an old holy war. Spaces are more common nowadays. + Vodorovné odsazení se dělá pomocí 2 nebo 4 mezer nebo pomocí vodorovného symbolu tabulátoru (klávesa `key:Tab`). O tom, které zvolit, se už dlouho vedou svaté války. V dnešní době se více používají mezery. - One advantage of spaces over tabs is that spaces allow more flexible configurations of indents than the tab symbol. + Výhodou mezer oproti tabulátorům je, že mezery umožňují konfigurovat odsazení flexibilněji než symbol tabulátoru. - For instance, we can align the parameters with the opening bracket, like this: + Můžeme například zarovnat parametry k levé závorce takto: ```js no-beautify - show(parameters, - aligned, // 5 spaces padding at the left - one, - after, - another + zobraz(parametry, + zarovnané, // vlevo je odsazení 7 mezer + jeden, + za, + druhým ) { // ... } ``` -- **Vertical indents: empty lines for splitting code into logical blocks.** +- **Svislé odsazení: prázdné řádky pro rozdělení kódu do logických bloků.** - Even a single function can often be divided into logical blocks. In the example below, the initialization of variables, the main loop and returning the result are split vertically: + I jediná funkce může být často rozdělena do logických bloků. V níže uvedeném příkladu jsou svisle odděleny inicializace proměnných, hlavní smyčka a vrácení výsledku: ```js - function pow(x, n) { - let result = 1; + function mocnina(x, n) { + let výsledek = 1; // <-- for (let i = 0; i < n; i++) { - result *= x; + výsledek *= x; } // <-- - return result; + return výsledek; } ``` - Insert an extra newline where it helps to make the code more readable. There should not be more than nine lines of code without a vertical indentation. + Vkládejte prázdný nový řádek všude, kde pomáhá učinit kód čitelnějším. V kódu by nemělo být více než devět řádků za sebou bez svislého odsazení. -### Semicolons +### Středníky -A semicolon should be present after each statement, even if it could possibly be skipped. +Středník by měl být uveden za každým příkazem, i kdyby mohl být vynechán. -There are languages where a semicolon is truly optional and it is rarely used. In JavaScript, though, there are cases where a line break is not interpreted as a semicolon, leaving the code vulnerable to errors. See more about that in the chapter . +Existují jazyky, v nichž je středník zcela dobrovolný a používá se jen zřídka. V JavaScriptu však existují případy, kdy se zlom řádku neinterpretuje jako středník, čímž se kód stává náchylnějším k chybám. Více o tom se píše v kapitole . -If you're an experienced JavaScript programmer, you may choose a no-semicolon code style like [StandardJS](https://standardjs.com/). Otherwise, it's best to use semicolons to avoid possible pitfalls. The majority of developers put semicolons. +Jste-li zkušený programátor v JavaScriptu, můžete se rozhodnout pro bezstředníkový kódovací styl, např. [StandardJS](https://standardjs.com/). Jinak je však lepší středníky používat, abyste se vyhnuli možným úskalím. Většina vývojářů středníky uvádí. -### Nesting Levels +### Úrovně vnoření -Try to avoid nesting code too many levels deep. +Snažte se vyhnout příliš mnoha úrovním vnoření. -For example, in the loop, it's sometimes a good idea to use the [`continue`](info:while-for#continue) directive to avoid extra nesting. +Například v cyklu je někdy dobrý nápad použít direktivu [`continue`](info:while-for#continue), abychom se vyhnuli dalšímu vnoření. -For example, instead of adding a nested `if` conditional like this: +Například místo použití vnořené podmínky `if` tímto způsobem: ```js for (let i = 0; i < 10; i++) { - if (cond) { - ... // <- one more nesting level + if (podmínka) { + ... // <- o jednu úroveň vnoření víc } } ``` -We can write: +můžeme napsat: ```js for (let i = 0; i < 10; i++) { - if (!cond) *!*continue*/!*; - ... // <- no extra nesting level + if (!podmínka) *!*continue*/!*; + ... // <- žádná další úroveň vnoření } ``` -A similar thing can be done with `if/else` and `return`. +Podobně můžeme postupovat s `if/else` a `return`. -For example, two constructs below are identical. +Například dvě níže uvedené konstrukce jsou identické. -Option 1: +Možnost 1: ```js -function pow(x, n) { +function mocnina(x, n) { if (n < 0) { - alert("Negative 'n' not supported"); + alert("Záporné 'n' není podporováno"); } else { - let result = 1; + let výsledek = 1; for (let i = 0; i < n; i++) { - result *= x; + výsledek *= x; } - return result; + return výsledek; } } ``` -Option 2: +Možnost 2: ```js -function pow(x, n) { +function mocnina(x, n) { if (n < 0) { - alert("Negative 'n' not supported"); + alert("Záporné 'n' není podporováno"); return; } - let result = 1; + let výsledek = 1; for (let i = 0; i < n; i++) { - result *= x; + výsledek *= x; } - return result; + return výsledek; } ``` -The second one is more readable because the "special case" of `n < 0` is handled early on. Once the check is done we can move on to the "main" code flow without the need for additional nesting. +Druhá konstrukce je čitelnější, protože „zvláštní případ“ `n < 0` je ošetřen hned na začátku. Když je kontrola provedena, můžeme se přesunout k „hlavnímu“ toku kódu, aniž bychom potřebovali další vnoření. -## Function Placement +## Umístění funkcí -If you are writing several "helper" functions and the code that uses them, there are three ways to organize the functions. +Jestliže píšeme několik „pomocných“ funkcí a kód, který je používá, tak máme tři možnosti, jak funkce organizovat. -1. Declare the functions *above* the code that uses them: +1. Deklarovat funkce *před* kódem, který je používá: ```js - // *!*function declarations*/!* - function createElement() { + // *!*deklarace funkcí*/!* + function vytvořPrvek() { ... } - function setHandler(elem) { + function nastavHandler(prvek) { ... } - function walkAround() { + function choďKolem() { ... } - // *!*the code which uses them*/!* - let elem = createElement(); - setHandler(elem); - walkAround(); + // *!*kód, který je používá*/!* + let prvek = vytvořPrvek(); + nastavHandler(prvek); + choďKolem(); ``` -2. Code first, then functions +2. Nejprve kód, pak funkce: ```js - // *!*the code which uses the functions*/!* - let elem = createElement(); - setHandler(elem); - walkAround(); + // *!*kód, který používá funkce*/!* + let prvek = vytvořPrvek(); + nastavHandler(prvek); + choďKolem(); - // --- *!*helper functions*/!* --- - function createElement() { + // --- *!*pomocné funkce*/!* --- + function vytvořPrvek() { ... } - function setHandler(elem) { + function nastavHandler(prvek) { ... } - function walkAround() { + function choďKolem() { ... } ``` -3. Mixed: a function is declared where it's first used. +3. Směs: funkce je deklarována tam, kde je poprvé použita. -Most of time, the second variant is preferred. +Ve většině případů se dává přednost druhé variantě. -That's because when reading code, we first want to know *what it does*. If the code goes first, then it becomes clear from the start. Then, maybe we won't need to read the functions at all, especially if their names are descriptive of what they actually do. +Je to proto, že při čtení kódu chceme nejdříve vědět, *co kód dělá*. Pokud je kód uveden jako první, bude to zřejmé od začátku. Pak možná nebudeme muset funkce vůbec číst, zvláště pokud je z jejich názvů dostatečně jasné, co dělají. -## Style Guides +## Styloví průvodci -A style guide contains general rules about "how to write" code, e.g. which quotes to use, how many spaces to indent, the maximal line length, etc. A lot of minor things. +Stylový průvodce obsahuje obecná pravidla o tom, „jak psát“ kód, tj. které uvozovky používat, o kolik mezer odsazovat, maximální délku řádku atd. Mnoho vedlejších věcí. -When all members of a team use the same style guide, the code looks uniform, regardless of which team member wrote it. +Když všichni členové týmu používají stejného stylového průvodce, bude kód vypadat jednotně bez ohledu na to, který člen týmu ho napsal. -Of course, a team can always write their own style guide, but usually there's no need to. There are many existing guides to choose from. +Samozřejmě si tým vždy může napsat svého vlastního stylového průvodce, ale obvykle to není zapotřebí. Existuje mnoho průvodců, z nichž si lze vybrat. -Some popular choices: +Některé oblíbené možnosti: -- [Google JavaScript Style Guide](https://google.github.io/styleguide/jsguide.html) -- [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript) +- [JavaScriptový stylový průvodce Google](https://google.github.io/styleguide/jsguide.html) +- [JavaScriptový stylový průvodce Airbnb](https://github.com/airbnb/javascript) - [Idiomatic.JS](https://github.com/rwaldron/idiomatic.js) - [StandardJS](https://standardjs.com/) -- (plus many more) +- (a mnoho dalších) -If you're a novice developer, start with the cheat sheet at the beginning of this chapter. Then you can browse other style guides to pick up more ideas and decide which one you like best. +Pokud jste začínající vývojář, začněte podle příkladu na začátku této kapitoly. Pak si můžete projít jiné stylové průvodce, abyste získali další nápady a rozhodli se, který se vám líbí nejvíc. -## Automated Linters +## Automatické lintery -Linters are tools that can automatically check the style of your code and make improving suggestions. +Lintery jsou nástroje, které umějí automaticky zkontrolovat styl vašeho kódu a navrhnout zlepšení. -The great thing about them is that style-checking can also find some bugs, like typos in variable or function names. Because of this feature, using a linter is recommended even if you don't want to stick to one particular "code style". +Výborné na nich je, že tato kontrola stylu umí najít i některé chyby, například překlepy v názvech proměnných nebo funkcí. Pro tuto jejich vlastnost se používání linteru doporučuje, i když se nechcete vázat k jednomu konkrétnímu „stylu zápisu“. -Here are some well-known linting tools: +Zde jsou některé dobře známé lintery: -- [JSLint](https://www.jslint.com/) -- one of the first linters. -- [JSHint](https://jshint.com/) -- more settings than JSLint. -- [ESLint](https://eslint.org/) -- probably the newest one. +- [JSLint](https://www.jslint.com/) -- jeden z prvních linterů. +- [JSHint](https://www.jshint.com/) -- více nastavení než JSLint. +- [ESLint](https://eslint.org/) -- pravděpodobně nejnovější. -All of them can do the job. The author uses [ESLint](https://eslint.org/). +Všechny tuto práci odvedou. Autor používá [ESLint](http://eslint.org/). -Most linters are integrated with many popular editors: just enable the plugin in the editor and configure the style. +Většina linterů je integrována s mnoha oblíbenými editory: jednoduše povolte plugin v editoru a nakonfigurujte styl. -For instance, for ESLint you should do the following: +Například pro ESLint byste měli udělat následující: -1. Install [Node.js](https://nodejs.org/). -2. Install ESLint with the command `npm install -g eslint` (npm is a JavaScript package installer). -3. Create a config file named `.eslintrc` in the root of your JavaScript project (in the folder that contains all your files). -4. Install/enable the plugin for your editor that integrates with ESLint. The majority of editors have one. +1. Nainstalujte [Node.js](https://nodejs.org/). +2. Nainstalujte ESLint příkazem `npm install -g eslint` (npm je instalátor JavaScriptových balíků). +3. Vytvořte konfigurační soubor s názvem `.eslintrc` v kořenové složce vašeho JavaScriptového projektu (ve složce, která obsahuje všechny vaše soubory). +4. Nainstalujte/povolte ve svém editoru plugin, který jej spojí s ESLintem. Většina editorů jej má. -Here's an example of an `.eslintrc` file: +Uvádíme příklad souboru `.eslintrc`: ```js { @@ -333,16 +333,16 @@ Here's an example of an `.eslintrc` file: } ``` -Here the directive `"extends"` denotes that the configuration is based on the "eslint:recommended" set of settings. After that, we specify our own. +Zde direktiva `"extends"` oznamuje, že konfigurace je založena na sadě nastavení „eslint:recommended“. Poté si specifikujeme vlastní. -It is also possible to download style rule sets from the web and extend them instead. See for more details about installation. +Je také možné si místo toho stáhnout sady stylových pravidel z webu a pak je rozšířit. Pro podrobnosti ohledně instalace viz . -Also certain IDEs have built-in linting, which is convenient but not as customizable as ESLint. +Také některá IDE obsahují zabudovaný linting, který je vyhovující, ale ne tak nastavitelný jako ESLint. -## Summary +## Shrnutí -All syntax rules described in this chapter (and in the style guides referenced) aim to increase the readability of your code. All of them are debatable. +Všechna syntaktická pravidla uvedená v této kapitole (a v odkazovaných stylových průvodcích) směřují ke zvýšení čitelnosti vašeho kódu. Všechna jsou diskutovatelná. -When we think about writing "better" code, the questions we should ask ourselves are: "What makes the code more readable and easier to understand?" and "What can help us avoid errors?" These are the main things to keep in mind when choosing and debating code styles. +Když uvažujeme o psaní „lepšího“ kódu, měli bychom si klást otázky „Co učiní kód čitelnějším a snadnějším k porozumění?“ a „Co nám pomůže vyvarovat se chyb?“. To je to hlavní, co bychom měli mít na paměti, když si vybíráme styly kódování a diskutujeme o nich. -Reading popular style guides will allow you to keep up to date with the latest ideas about code style trends and best practices. +Čtení oblíbených stylových průvodců nám umožní držet krok s nejnovějšími myšlenkami o trendech stylů zápisu programu a nejlepších praktikách. diff --git a/1-js/03-code-quality/02-coding-style/code-style.svg b/1-js/03-code-quality/02-coding-style/code-style.svg index 739d9f1ed..4a5acdb09 100644 --- a/1-js/03-code-quality/02-coding-style/code-style.svg +++ b/1-js/03-code-quality/02-coding-style/code-style.svg @@ -1 +1 @@ -2No space between the function name and parentheses between the parentheses and the parameterIndentation 2 spacesA space after for/if/while…} else { without a line breakSpaces around a nested callAn empty line between logical blocksLines are not very longA semicolon ; is mandatorySpaces around operatorsCurly brace { on the same line, after a spaceA space between argumentsA space between parameters \ No newline at end of file +2Bez mezer mezi názvem funkcí a závorkou mezi závorkou a parametremOdsazení 2 mezeryMezera za for/if/while…} else { bez konce řádkuMezery kolem vnořeného voláníPrázdný řádek mezi logickými blokyŘádky nejsou příliš dlouhéStředník ; je povinnýMezery kolem operátorůSložená závorka { na stejném řádku za mezerouMezera mezi argumentyMezera mezi parametry \ No newline at end of file diff --git a/1-js/03-code-quality/03-comments/article.md b/1-js/03-code-quality/03-comments/article.md index af3a06c80..2225c5243 100644 --- a/1-js/03-code-quality/03-comments/article.md +++ b/1-js/03-code-quality/03-comments/article.md @@ -1,40 +1,40 @@ -# Comments +# Komentáře -As we know from the chapter , comments can be single-line: starting with `//` and multiline: `/* ... */`. +Jak víme z kapitoly , komentáře mohou být jednořádkové, které začínají `//`, a víceřádkové `/* ... */`. -We normally use them to describe how and why the code works. +Obvykle je používáme k popisu, jak a proč kód funguje. -At first sight, commenting might be obvious, but novices in programming often use them wrongly. +Na první pohled může být komentování samozřejmé, ale začínající programátoři je často používají nesprávně. -## Bad comments +## Špatné komentáře -Novices tend to use comments to explain "what is going on in the code". Like this: +Začátečníci tíhnou k psaní komentářů, které vysvětlují, „co se v kódu děje“. Například: ```js -// This code will do this thing (...) and that thing (...) -// ...and who knows what else... -very; -complex; -code; +// Tento kód dělá toto (...) a toto (...) +// ...a kdo ví, co jiného... +velmi; +složitý; +kód; ``` -But in good code, the amount of such "explanatory" comments should be minimal. Seriously, the code should be easy to understand without them. +V dobrém kódu by však množství takových „vysvětlujících“ komentářů mělo být minimální. Kód by měl být srozumitelný i bez nich. -There's a great rule about that: "if the code is so unclear that it requires a comment, then maybe it should be rewritten instead". +Platí jedno zlaté pravidlo: „Je-li kód natolik nejasný, že vyžaduje komentář, možná by měl být přepsán.“ -### Recipe: factor out functions +### Recept: extrahujte funkce -Sometimes it's beneficial to replace a code piece with a function, like here: +Někdy se vyplatí nahradit kus kódu funkcí, například: ```js -function showPrimes(n) { - nextPrime: +function zobrazPrvočísla(n) { + dalšíPrvočíslo: for (let i = 2; i < n; i++) { *!* - // check if i is a prime number + // ověří, zda i je prvočíslo for (let j = 2; j < i; j++) { - if (i % j == 0) continue nextPrime; + if (i % j == 0) continue dalšíPrvočíslo; } */!* @@ -43,20 +43,20 @@ function showPrimes(n) { } ``` -The better variant, with a factored out function `isPrime`: +Lepší varianta s vyjmutou funkcí `jePrvočíslo`: ```js -function showPrimes(n) { +function zobrazPrvočísla(n) { for (let i = 2; i < n; i++) { - *!*if (!isPrime(i)) continue;*/!* + *!*if (!jePrvočíslo(i)) continue;*/!* alert(i); } } -function isPrime(n) { +function jePrvočíslo(n) { for (let i = 2; i < n; i++) { if (n % i == 0) return false; } @@ -65,116 +65,116 @@ function isPrime(n) { } ``` -Now we can understand the code easily. The function itself becomes the comment. Such code is called *self-descriptive*. +Nyní kódu snadno porozumíme. Funkce sama o sobě se stává komentářem. Takový kód se nazývá *sebepopisující*. -### Recipe: create functions +### Recept: vytvářejte funkce -And if we have a long "code sheet" like this: +A máme-li dlouhý „kus kódu“, jako třeba: ```js -// here we add whiskey +// zde přidáme whisky for(let i = 0; i < 10; i++) { - let drop = getWhiskey(); - smell(drop); - add(drop, glass); + let kapka = vezmiWhisky(); + přičichni(kapka); + přidej(kapka, sklenice); } -// here we add juice +// zde přidáme džus for(let t = 0; t < 3; t++) { - let tomato = getTomato(); - examine(tomato); - let juice = press(tomato); - add(juice, glass); + let rajče = vezmiRajče(); + prozkoumej(rajče); + let džus = rozmačkej(rajče); + přidej(džus, sklenice); } // ... ``` -Then it might be a better variant to refactor it into functions like: +pak může být lepší varianta jej přepsat do funkcí takto: ```js -addWhiskey(glass); -addJuice(glass); +přidejWhisky(sklenice); +přidejDžus(sklenice); -function addWhiskey(container) { +function přidejWhisky(nádoba) { for(let i = 0; i < 10; i++) { - let drop = getWhiskey(); + let kapka = vezmiWhisky(); //... } } -function addJuice(container) { +function přidejDžus(nádoba) { for(let t = 0; t < 3; t++) { - let tomato = getTomato(); + let rajče = vezmiRajče(); //... } } ``` -Once again, functions themselves tell what's going on. There's nothing to comment. And also the code structure is better when split. It's clear what every function does, what it takes and what it returns. +Opět funkce samy o sobě říkají, co se děje. Není tady co komentovat. I struktura kódu je lepší, když je kód rozdělený. Je jasné, co která funkce provádí, co přijímá a co vrací. -In reality, we can't totally avoid "explanatory" comments. There are complex algorithms. And there are smart "tweaks" for purposes of optimization. But generally we should try to keep the code simple and self-descriptive. +V realitě se nemůžeme „vysvětlujícím“ komentářům úplně vyhnout. Existují složité algoritmy a existují chytrá „vylepšení“ pro účely optimalizace. Obecně bychom se však měli snažit udržet kód jednoduchý a sebepopisující. -## Good comments +## Dobré komentáře -So, explanatory comments are usually bad. Which comments are good? +Vysvětlující komentáře jsou tedy obecně špatné. Jaké komentáře jsou dobré? -Describe the architecture -: Provide a high-level overview of components, how they interact, what's the control flow in various situations... In short -- the bird's eye view of the code. There's a special language [UML](http://wikipedia.org/wiki/Unified_Modeling_Language) to build high-level architecture diagrams explaining the code. Definitely worth studying. +Popis architektury +: Poskytují vysokoúrovňový pohled na komponenty, jak spolu komunikují, jaký je řídicí tok v různých situacích... Stručně řečeno -- pohled na kód z ptačí perspektivy. Existuje i speciální jazyk [UML](http://wikipedia.org/wiki/Unified_Modeling_Language) určený k tvorbě diagramů na vysoké úrovni architektury, které popisují kód. Rozhodně má smysl si jej prostudovat. -Document function parameters and usage -: There's a special syntax [JSDoc](http://en.wikipedia.org/wiki/JSDoc) to document a function: usage, parameters, returned value. +Dokumentace parametrů a použití funkcí +: Existuje speciální syntaxe [JSDoc](http://en.wikipedia.org/wiki/JSDoc) pro dokumentaci funkcí: použití, parametry, návratová hodnota. -For instance: +Například: ```js /** - * Returns x raised to the n-th power. + * Vrátí x umocněné na n-tou. * - * @param {number} x The number to raise. - * @param {number} n The power, must be a natural number. - * @return {number} x raised to the n-th power. + * @param {number} x Číslo, které se má umocnit. + * @param {number} n Exponent, musí být přirozené číslo. + * @return {number} x umocněné na n-tou. */ -function pow(x, n) { +function mocnina(x, n) { ... } ``` -Such comments allow us to understand the purpose of the function and use it the right way without looking in its code. +Takové komentáře nám umožňují porozumět účelu funkce a používat ji správně, aniž bychom se dívali na její kód. -By the way, many editors like [WebStorm](https://www.jetbrains.com/webstorm/) can understand them as well and use them to provide autocomplete and some automatic code-checking. +Mimochodem i mnoho editorů, například [WebStorm](https://www.jetbrains.com/webstorm/), jim dokáže porozumět a používá je k našeptávání a automatické kontrole kódu. -Also, there are tools like [JSDoc 3](https://github.com/jsdoc/jsdoc) that can generate HTML-documentation from the comments. You can read more information about JSDoc at . +Existují i nástroje jako [JSDoc 3](https://github.com/jsdoc/jsdoc), které umějí z těchto komentářů vygenerovat dokumentaci v HTML. Více informací o JSDoc si můžete přečíst na . -Why is the task solved this way? -: What's written is important. But what's *not* written may be even more important to understand what's going on. Why is the task solved exactly this way? The code gives no answer. +Proč se tato úloha řeší zrovna takhle? +: To, co je psáno, je důležité. Ale to, co *není* psáno, může být ještě důležitější k pochopení toho, o co jde. Proč je tato úloha řešena právě tímto způsobem? Kód nám odpověď nedává. - If there are many ways to solve the task, why this one? Especially when it's not the most obvious one. + Existuje-li mnoho způsobů, jak tuto úlohu řešit, proč zrovna tento? Zvláště pokud to není zrovna nejzřejmější způsob. - Without such comments the following situation is possible: - 1. You (or your colleague) open the code written some time ago, and see that it's "suboptimal". - 2. You think: "How stupid I was then, and how much smarter I'm now", and rewrite using the "more obvious and correct" variant. - 3. ...The urge to rewrite was good. But in the process you see that the "more obvious" solution is actually lacking. You even dimly remember why, because you already tried it long ago. You revert to the correct variant, but the time was wasted. + Bez takových komentářů může nastat následující situace: + 1. Vy (nebo váš kolega) otevřete kód, napsaný před nějakou dobou, a vidíte, že je „neoptimální“. + 2. Pomyslíte si: „To jsem byl tehdy ale hloupý, teď jsem o hodně chytřejší“, a přepíšete ho na „jasnější a korektnější“ variantu. + 3. ...Potřeba přepsat kód byla dobrá. Ale po spuštění uvidíte, že „jasnější“ řešení je ve skutečnosti horší. Matně si vzpomenete proč, jelikož jste to kdysi už zkoušeli. Vrátíte kód na korektní variantu, ale byla to ztráta času. - Comments that explain the solution are very important. They help to continue development the right way. + Komentáře, které vysvětlují řešení, jsou velmi důležité, protože nám pomáhají vyvíjet správnou cestou. -Any subtle features of the code? Where they are used? -: If the code has anything subtle and counter-intuitive, it's definitely worth commenting. +Jsou v kódu nějaké finty? Proč jsou použity? +: Obsahuje-li kód cokoli promyšleného a neintuitivního, má rozhodně smysl jej komentovat. -## Summary +## Shrnutí -An important sign of a good developer is comments: their presence and even their absence. +Komentáře jsou důležitým znakem dobrého vývojáře: jejich přítomnost, ale i jejich absence. -Good comments allow us to maintain the code well, come back to it after a delay and use it more effectively. +Dobré komentáře nám umožňují kód dobře udržovat, později se k němu vracet a efektivněji jej využívat. -**Comment this:** +**Komentujte toto:** -- Overall architecture, high-level view. -- Function usage. -- Important solutions, especially when not immediately obvious. +- Celkovou architekturu, pohled z vysoké úrovně. +- Používání funkcí. +- Důležitá řešení, zvláště pokud nejsou jasná na první pohled. -**Avoid comments:** +**Zdržte se komentářů:** -- That tell "how code works" and "what it does". -- Put them in only if it's impossible to make the code so simple and self-descriptive that it doesn't require them. +- Které vysvětlují „jak kód funguje“ a „co dělá“. +- Vkládejte je jen tehdy, když není možné udržet kód natolik jednoduchý a sebepopisující, že je nevyžaduje. -Comments are also used for auto-documenting tools like JSDoc3: they read them and generate HTML-docs (or docs in another format). +Komentáře se také používají pro nástroje automatické dokumentace jako JSDoc3, které je načtou a vygenerují z nich dokumentaci v HTML (nebo v jakémkoli jiném formátu). 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 96fdf4143..20901b22a 100644 --- a/1-js/03-code-quality/04-ninja-code/article.md +++ b/1-js/03-code-quality/04-ninja-code/article.md @@ -1,240 +1,239 @@ -# Ninja code +# Ninjův kód -```quote author="Confucius (Analects)" -Learning without thought is labor lost; thought without learning is perilous. +```quote author="Konfucius (Hovory)" +Učení bez myšlení je zbytečná práce; myšlení bez učení je nebezpečné. ``` -Programmer ninjas of the past used these tricks to sharpen the mind of code maintainers. +Tyto triky používali programátorští ninjové v minulosti, aby zostřili mysl údržbářů kódu. -Code review gurus look for them in test tasks. +Zasvěcení recenzenti kódu je hledají v testovacích úlohách. -Novice developers sometimes use them even better than programmer ninjas. +Začínající vývojáři je někdy používají ještě lépe než programátorští ninjové. -Read them carefully and find out who you are -- a ninja, a novice, or maybe a code reviewer? +Pozorně si je přečtěte a zjistěte, kdo jste -- ninja, začátečník, nebo snad recenzent kódu? -```warn header="Irony detected" -Many try to follow ninja paths. Few succeed. +```warn header="Detekována ironie" +Mnozí lidé se snaží následovat cesty ninjů. Jen málokteří uspějí. ``` -## Brevity is the soul of wit +## Stručnost je duší důvtipu -Make the code as short as possible. Show how smart you are. +Snažte se napsat kód co nejkratší. Ukažte všem, jak jste chytří. -Let subtle language features guide you. +Nechte se vést jemnými prvky jazyka. -For instance, take a look at this ternary operator `'?'`: +Podívejte se například na tento ternární operátor `'?'`: ```js -// taken from a well-known javascript library +// převzato z dobře známé JavaScriptové knihovny i = i ? i < 0 ? Math.max(0, len + i) : i : 0; ``` -Cool, right? If you write like that, a developer who comes across this line and tries to understand what is the value of `i` is going to have a merry time. Then come to you, seeking for an answer. +Hezké, ne? Budete-li takhle psát, zažije vývojář, který narazí na tento řádek a bude se snažit porozumět, jaká je hodnota `i`, veselé chvíle. Pak přijde za vámi a bude žádat odpověď. -Tell them that shorter is always better. Initiate them into the paths of ninja. +Řekněte mu, že co je kratší, to je vždy lepší. Zasvěťte ho do cest ninjů. -## One-letter variables +## Jednopísmenné proměnné -```quote author="Laozi (Tao Te Ching)" -The Dao hides in wordlessness. Only the Dao is well begun and well -completed. +```quote author="Laozi (Tao te ťing)" +Dao spočívá v bezeslovnosti. Jedině Dao správně začíná a správně končí. ``` -Another way to code shorter is to use single-letter variable names everywhere. Like `a`, `b` or `c`. +Další způsob, jak zkrátit kód, je všude používat jednopísmenné názvy proměnných, např. `a`, `b` nebo `c`. -A short variable disappears in the code like a real ninja in the forest. No one will be able to find it using "search" of the editor. And even if someone does, they won't be able to "decipher" what the name `a` or `b` means. +Krátká proměnná se v kódu ztratí jako opravdový ninja v lese. Nikdo ji nebude moci najít pomocí funkce hledání v editoru. A i kdyby ano, nedokáže „rozšifrovat“, co názvy `a` nebo `b` znamenají. -...But there's an exception. A real ninja will never use `i` as the counter in a `"for"` loop. Anywhere, but not here. Look around, there are many more exotic letters. For instance, `x` or `y`. +...Je tady však jedna výjimka. Opravdový ninja nikdy nepoužije `i` jako čítač v cyklu `„for“`. Všude, jen ne tam. Jen se rozhlédněte kolem, existuje spousta exotičtějších písmen, např. `x` nebo `y`. -An exotic variable as a loop counter is especially cool if the loop body takes 1-2 pages (make it longer if you can). Then if someone looks deep inside the loop, they won't be able to quickly figure out that the variable named `x` is the loop counter. +Exotická proměnná jako čítač v cyklu je obzvláště půvabná, jestliže tělo cyklu zabírá 1-2 stránky (můžete-li, napište je co nejdelší). Když se potom někdo podívá hlouběji do cyklu, nebude schopen rychle přijít na to, že proměnná `x` je čítač cyklu. -## Use abbreviations +## Používejte zkratky -If the team rules forbid the use of one-letter and vague names -- shorten them, make abbreviations. +Jestliže týmová pravidla zakazují používat jednopísmenné a vágní názvy, zkracujte je. Vytvářejte zkratky. -Like this: +Třeba takto: -- `list` -> `lst`. -- `userAgent` -> `ua`. -- `browser` -> `brsr`. -- ...etc +- `seznam` -> `szn`. +- `uživatelskýAgent` -> `ua`. +- `prohlížeč` -> `prhl`. +- ...atd. -Only the one with truly good intuition will be able to understand such names. Try to shorten everything. Only a worthy person should be able to uphold the development of your code. +Jedině osoba s opravdu dobrou intuicí pak bude schopna takové názvy pochopit. Snažte se zkrátit všechno. Jen úctyhodný člověk pak bude moci podpořit vývoj vašeho kódu. -## Soar high. Be abstract. +## Stoupejte vzhůru. Buďte abstraktní. -```quote author="Laozi (Tao Te Ching)" -The great square is cornerless
-The great vessel is last complete,
-The great note is rarified sound,
-The great image has no form. +```quote author="Laozi (Tao te ťing) (překlad Václav Cílek)" +velký čtverec nemá rohy
+velkou nádobu neuděláš hned
+velký tón není slyšet
+velká podoba je bez tvaru
``` -While choosing a name try to use the most abstract word. Like `obj`, `data`, `value`, `item`, `elem` and so on. +Když volíte název, snažte se použít co nejabstraktnější slovo. Třeba `obj`, `data`, `hodnota`, `prvek`, `element` a podobně. -- **The ideal name for a variable is `data`.** Use it everywhere you can. Indeed, every variable holds *data*, right? +- **Ideální název proměnné je `data`.** Používejte jej všude, kde můžete. Každá proměnná přece obsahuje nějaká *data*, ne? - ...But what to do if `data` is already taken? Try `value`, it's also universal. After all, a variable eventually gets a *value*. + ...Ale co když je název `data` už zabrán? Zkuste `hodnota`, to je také univerzální. Koneckonců každá proměnná nakonec bude mít nějakou *hodnotu*. -- **Name a variable by its type: `str`, `num`...** +- **Pojmenujte proměnnou podle jejího typu: `řetězec`, `číslo`...** - Give them a try. A young initiate may wonder -- are such names really useful for a ninja? Indeed, they are! + Zkuste to. Mladý učedník se může divit -- jsou takové názvy pro ninju opravdu užitečné? Ale ano, jsou! - Sure, the variable name still means something. It says what's inside the variable: a string, a number or something else. But when an outsider tries to understand the code, they'll be surprised to see that there's actually no information at all! And will ultimately fail to alter your well-thought code. + Jistě, takový název proměnné stále něco znamená. Říká, co proměnná obsahuje: řetězec, číslo nebo něco jiného. Když se však outsider pokusí porozumět kódu, bude překvapen, že vidí, že název neobsahuje vlastně vůbec žádnou informaci! A nakonec se mu nepodaří váš skvěle promyšlený kód změnit. - The value type is easy to find out by debugging. But what's the meaning of the variable? Which string/number does it store? + Datový typ proměnné lze snadno odhalit při ladění. Ale jaký je význam proměnné? Jaký řetězec nebo číslo je v ní uloženo? - There's just no way to figure out without a good meditation! + Není způsob, jak to odhalit bez dobré meditace! -- **...But what if there are no more such names?** Just add a number: `data1, item2, elem5`... +- **...Ale co když žádné další takové názvy už nezbývají?** Stačí přidat číslo: `data1, prvek2, element5`... -## Attention test +## Zkouška pozornosti -Only a truly attentive programmer should be able to understand your code. But how to check that? +Vašemu kódu by měl porozumět jen skutečně pozorný programátor. Ale jak to zajistit? -**One of the ways -- use similar variable names, like `date` and `data`.** +**Jeden způsob -- používejte podobné názvy proměnných, např. `datum` a `data`.** -Mix them where you can. +Směšujte je všude, kde je to možné. -A quick read of such code becomes impossible. And when there's a typo... Ummm... We're stuck for long, time to drink tea. +Takový kód je pak nemožné rychle přečíst. A když je někde překlep... Hmmm... Nadlouho nás to zdrží, uděláme si přestávku na čaj. -## Smart synonyms +## Chytrá synonyma -```quote author="Laozi (Tao Te Ching)" -The Tao that can be told is not the eternal Tao. The name that can be named is not the eternal name. +```quote author="Laozi (Tao te ťing) (překlad Václav Cílek)" +Tao, které se dá popsat slovy, není stálé Tao
+jméno, které se dá jmenovat, není věčné jméno ``` -Using *similar* names for *same* things makes life more interesting and shows your creativity to the public. +Používání *podobných* názvů pro *stejné* věci činí život zajímavějším a ukáže publiku vaši kreativitu. -For instance, consider function prefixes. If a function shows a message on the screen -- start it with `display…`, like `displayMessage`. And then if another function shows on the screen something else, like a user name, start it with `show…` (like `showName`). +Zvažte například prefixy funkcí. Jestliže funkce zobrazuje zprávu na obrazovce, začněte její název `zobraz…`, např. `zobrazZprávu`. Pokud pak jiná funkce zobrazí na obrazovce něco jiného, třeba uživatelské jméno, začněte její název `vypiš…` (např. `vypišJméno`). -Insinuate that there's a subtle difference between such functions, while there is none. +To naznačuje, že mezi těmito funkcemi je nějaký drobný rozdíl, přestože ve skutečnosti žádný není. -Make a pact with fellow ninjas of the team: if John starts "showing" functions with `display...` in his code, then Peter could use `render..`, and Ann -- `paint...`. Note how much more interesting and diverse the code became. +Dohodněte se s kolegy ninji z týmu: bude-li Honza pojmenovávat „zobrazovací“ funkce ve svém kódu `zobraz...`, pak Petr by mohl používat `vypiš...` a Anna `vykresli...`. Všimněte si, nakolik se kód stane zajímavějším a rozmanitějším. -...And now the hat trick! +...A nyní přijde ten pravý trik! -For two functions with important differences -- use the same prefix! +Pro dvě funkce, mezi nimiž je důležitý rozdíl, použijte stejný prefix! -For instance, the function `printPage(page)` will use a printer. And the function `printText(text)` will put the text on-screen. Let an unfamiliar reader think well over similarly named function `printMessage`: "Where does it put the message? To a printer or on the screen?". To make it really shine, `printMessage(message)` should output it in the new window! +Například funkce `tiskniStránku(stránka)` bude tisknout na tiskárnu. Ale funkce `tiskniText(text)` vypíše text na obrazovku. Nechte neznalého čtenáře, aby se zamyslel nad podobně pojmenovanou funkcí `tiskniZprávu`: „Kam tu zprávu vlastně vytiskne? Na tiskárnu, nebo na obrazovku?“ Aby to bylo opravdu úchvatné, `tiskniZprávu(zpráva)` by měla zobrazit zprávu v novém okně! -## Reuse names +## Používejte opakovaně stejné názvy -```quote author="Laozi (Tao Te Ching)" -Once the whole is divided, the parts
-need names.
-There are already enough names.
-One must know when to stop. +```quote author="Laozi (Tao te ťing) (překlad Václav Cílek)" +když rozdělujeme jednotu,
+objevují se jména
+pohromě se vyhneme,
+jen když víme, kdy přestat
``` -Add a new variable only when absolutely necessary. +Přidejte novou proměnnou jen tehdy, když je to absolutně nezbytné. -Instead, reuse existing names. Just write new values into them. +Jinak místo toho opakovaně používejte již existující názvy. Jen do nich zapisujte nové hodnoty. -In a function try to use only variables passed as parameters. +Ve funkci se snažte používat jedině proměnné, které byly předány jako argumenty. -That would make it really hard to identify what's exactly in the variable *now*. And also where it comes from. The purpose is to develop the intuition and memory of a person reading the code. A person with weak intuition would have to analyze the code line-by-line and track the changes through every code branch. +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. -**An advanced variant of the approach is to covertly (!) replace the value with something alike in the middle of a loop or a function.** +**Pokročilá varianta tohoto přístupu je utajeně (!) nahradit hodnotu něčím podobným uvnitř cyklu nebo funkce.** -For instance: +Například: ```js -function ninjaFunction(elem) { - // 20 lines of code working with elem +function ninjovaFunkce(elem) { + // 20 řádků kódu pracujícího s elem elem = clone(elem); - // 20 more lines, now working with the clone of the elem! + // 20 dalších řádků kódu, které nyní pracují s klonem proměnné elem! } ``` -A fellow programmer who wants to work with `elem` in the second half of the function will be surprised... Only during the debugging, after examining the code they will find out that they're working with a clone! +Kolega, který bude chtít pracovat s proměnnou `elem` ve druhé polovině funkce, bude překvapen... Teprve při ladění po prozkoumání kódu přijde na to, že pracuje s klonem! -Seen in code regularly. Deadly effective even against an experienced ninja. +Toto je v kódu často vidět. Je to hrozivě efektivní i proti zkušenému ninjovi. -## Underscores for fun +## Legrace s podtržítky -Put underscores `_` and `__` before variable names. Like `_name` or `__value`. It would be great if only you knew their meaning. Or, better, add them just for fun, without particular meaning at all. Or different meanings in different places. +Umisťujte před názvy proměnných podtržítka `_` a `__`. Například `_jméno` nebo `__hodnota`. Bude to legrace, když budete jejich význam znát jenom vy. Nebo ještě lépe: přidávejte je jen pro legraci, aniž by měla nějaký konkrétní význam. Nebo ať mají na různých místech různé významy. -You kill two rabbits with one shot. First, the code becomes longer and less readable, and the second, a fellow developer may spend a long time trying to figure out what the underscores mean. +Zabijete dvě mouchy jednou ranou. Za prvé, kód se prodlouží a stane se méně čitelným, a za druhé, kolega vývojář může strávit dlouhou dobu zjišťováním, co vlastně ta podtržítka znamenají. -A smart ninja puts underscores at one spot of code and evades them at other places. That makes the code even more fragile and increases the probability of future errors. +Elegantní ninja na jednom místě kódu podtržítka vkládá a na jiných se jim vyhýbá. Díky tomu je kód ještě zranitelnější a zvyšuje se pravděpodobnost budoucích chyb. -## Show your love +## Ukažte svou lásku -Let everyone see how magnificent your entities are! Names like `superElement`, `megaFrame` and `niceItem` will definitely enlighten a reader. +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í. -Indeed, from one hand, something is written: `super..`, `mega..`, `nice..` But from the other hand -- that brings no details. A reader may decide to look for a hidden meaning and meditate for an hour or two of their paid working time. +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. -## Overlap outer variables +## Překrývejte vnější proměnné ```quote author="Guan Yin Zi" -When in the light, can't see anything in the darkness.
-When in the darkness, can see everything in the light. +Kdo je na světle, nevidí nic, co je ve tmě.
+Kdo je ve tmě, vidí všechno, co je na světle. ``` -Use same names for variables inside and outside a function. As simple. No efforts to invent new names. +Používejte stejné názvy pro proměnné vně a uvnitř funkce. Je to jednoduché. Není třeba úsilí k vymýšlení nových názvů. ```js -let *!*user*/!* = authenticateUser(); +let *!*uživatel*/!* = autentikujUživatele(); -function render() { - let *!*user*/!* = anotherValue(); +function renderuj() { + let *!*uživatel*/!* = jináHodnota(); ... - ...many lines... + ...mnoho řádků... ... - ... // <-- a programmer wants to work with user here and... + ... // <-- programátor zde chce pracovat s uživatelem a... ... } ``` -A programmer who jumps inside the `render` will probably fail to notice that there's a local `user` shadowing the outer one. +Programátor, který skočí dovnitř funkce `renderuj`, si pravděpodobně nevšimne, že v ní je lokální proměnná `uživatel`, která zastiňuje tu vnější. -Then they'll try to work with `user` assuming that it's the external variable, the result of `authenticateUser()`... The trap is sprung! Hello, debugger... +Pak se pokusí pracovat s proměnnou `uživatel` předpokládaje, že je to externí proměnná, která je výsledkem volání `autentikujUživatele()`... A past sklapne! Nazdar, debuggere... -## Side-effects everywhere! +## Všude vedlejší efekty! -There are functions that look like they don't change anything. Like `isReady()`, `checkPermission()`, `findTags()`... They are assumed to carry out calculations, find and return the data, without changing anything outside of them. In other words, without "side-effects". +Existují funkce, které vypadají, jako by nic neměnily. Například `jePřipraven()`, `ověřOprávnění()`, `najdiZnačky()`... Předpokládá se, že provedou výpočty a najdou a vrátí data, aniž by měnily cokoli mimo ně. Jinými slovy, bez „vedlejších efektů“. -**A really beautiful trick is to add a "useful" action to them, besides the main task.** +**Opravdu krásný trik je přidat do nich kromě hlavního úkolu ještě nějakou „užitečnou“ akci navíc.** -An expression of dazed surprise on the face of your colleague when they see a function named `is..`, `check..` or `find...` changing something -- will definitely broaden your boundaries of reason. +Pohled na překvapenou tvář vašeho kolegy, který zjistí, že funkce pojmenovaná `je..`, `ověř..` nebo `najdi..` něco mění, zaručeně posune hranice vašeho rozumu. -**Another way to surprise is to return a non-standard result.** +**Další cestou, jak překvapit, je vrátit nestandardní výsledek.** -Show your original thinking! Let the call of `checkPermission` return not `true/false`, but a complex object with the results of the check. +Předveďte své originální myšlení! Nechte funkci `ověřOprávnění` vrátit nikoli `true/false`, ale složitý objekt s výsledky ověření. -Those developers who try to write `if (checkPermission(..))`, will wonder why it doesn't work. Tell them: "Read the docs!". And give this article. +Vývojáři, kteří se pokusí napsat `if (ověřOprávnění(..))`, se budou divit, proč to nefunguje. Řekněte jim: „Přečtěte si dokumentaci!“ A dejte jim odkaz na tento článek. -## Powerful functions! +## Silné funkce! -```quote author="Laozi (Tao Te Ching)" -The great Tao flows everywhere,
-both to the left and to the right. +```quote author="Laozi (Tao te ťing) (překlad Václav Cílek)" +Velké Tao se rozlévá, kam chce ``` -Don't limit the function by what's written in its name. Be broader. +Neomezujte funkci na to, co je uvedeno v jejím názvu. Rozšiřte se. -For instance, a function `validateEmail(email)` could (besides checking the email for correctness) show an error message and ask to re-enter the email. +Například funkce `zkontrolujEmail(email)` by mohla (kromě kontroly, zda email je správně) zobrazit chybovou zprávu a požádat uživatele, aby email zadal znovu. -Additional actions should not be obvious from the function name. A true ninja coder will make them not obvious from the code as well. +Přidané akce by neměly být zřejmé z názvu funkce. Opravdový ninja je učiní nezřejmými dokonce i z kódu. -**Joining several actions into one protects your code from reuse.** +**Spojení několika akcí do jedné ochrání váš kód před opakovaným použitím.** -Imagine, another developer wants only to check the email, and not output any message. Your function `validateEmail(email)` that does both will not suit them. So they won't break your meditation by asking anything about it. +Představte si, že jiný vývojář bude chtít jen zkontrolovat email a nevypisovat žádnou zprávu. Vaše funkce `zkontrolujEmail(email)`, která dělá obojí, mu pak nebude vyhovovat. Nepřekazí tedy vaši meditaci tím, že se na ni bude ptát. -## Summary +## Shrnutí -All "pieces of advice" above are from the real code... Sometimes, written by experienced developers. Maybe even more experienced than you are ;) +Všechny výše uvedené „rady“ pocházejí ze skutečného kódu... Někdy byl dokonce napsán zkušenými vývojáři. Možná ještě zkušenějšími, než vy ;) -- Follow some of them, and your code will become full of surprises. -- Follow many of them, and your code will become truly yours, no one would want to change it. -- Follow all, and your code will become a valuable lesson for young developers looking for enlightenment. +- Když budete dodržovat některé z nich, bude váš kód plný překvapení. +- Když budete dodržovat mnohé z nich, bude váš kód opravdu jen váš a nikdo ho nebude chtít měnit. +- Když budete dodržovat všechny, bude váš kód cennou lekcí pro mladé vývojáře toužící po osvícení. diff --git a/1-js/04-object-basics/07-optional-chaining/article.md b/1-js/04-object-basics/07-optional-chaining/article.md index 4c6029423..2c33f081b 100644 --- a/1-js/04-object-basics/07-optional-chaining/article.md +++ b/1-js/04-object-basics/07-optional-chaining/article.md @@ -1,4 +1,3 @@ - # Optional chaining '?.' [recent browser="new"] diff --git a/images.yml b/images.yml new file mode 100644 index 000000000..16d6c177b --- /dev/null +++ b/images.yml @@ -0,0 +1,606 @@ +code-style.svg: + "A space between parameters": + text: "Mezera mezi parametry" + "No space": + text: "Bez mezer" + position: "center" + "between the function name and parentheses": + position: "center" + text: "mezi názvem funkcí a závorkou" + "between the parentheses and the parameter": + position: "center" + text: "mezi závorkou a parametrem" + "Indentation": + position: "center" + text: "Odsazení" + "2 spaces": + position: "center" + text: "2 mezery" + "A space ": + position: "center" + text: "Mezera" + "after for/if/while…": + position: "center" + text: "za for/if/while…" + "} else { without a line break": "} else { bez konce řádku" + "Spaces around a nested call": + position: "center" + text: "Mezery kolem vnořeného volání" + "An empty line": + position: "center" + text: "Prázdný řádek" + "between logical blocks": + position: "center" + text: "mezi logickými bloky" + "Lines are not very long": "Řádky nejsou příliš dlouhé" + "A semicolon ;": "Středník ;" + "is mandatory": "je povinný" + "Spaces": + position: "center" + text: "Mezery" + "around operators": + position: "center" + text: "kolem operátorů" + "Curly brace {": + position: "center" + text: "Složená závorka {" + "on the same line, after a space": + position: "center" + text: "na stejném řádku za mezerou" + "A space": + position: "center" + text: "Mezera" + "between": + position: "center" + text: "mezi" + "parameters": + position: "center" + text: "parametry" + "arguments": + position: "center" + text: "argumenty" + "A space between arguments": + position: "center" + text: "Mezera mezi argumenty" + +try-catch-flow.svg: + "Begin": + text: "Začátek" + position: "center" + "No Errors": + text: "Bez chyb" + position: "center" + "An error occured in the code": + text: "V kódu nastala chyba" + position: "center" + "// code...": "// kód..." + "Ignore catch block": + text: "Ignoruj blok catch" + position: "center" + "Ignore the rest of try": + text: "Ignoruj zbytek try" + position: "center" + "Execute catch block": + text: "Vykonej blok catch" + position: "center" + +recursion-pow.svg: + "Yes": + text: "Ano" + position: "center" + "No": + text: "Ne" + "recursive call until n==1": "rekurzívní volání až do n==1" + +hello-world-render.svg: + "1. The browser shows this part": "1. Prohlížeč zobrazí tuto část" + "2. Then runs the script": "2. Pak spustí skript" + "3. Then shows the rest": "3. Pak zobrazí zbytek" + +ifelse_task2.svg: + "Begin": + text: "Začátek" + position: "center" + "Other": + text: "Jiné" + position: "center" + "You don't know?": + text: "Vy to nevíte?" + position: "center" + "Right!": + text: "Správně!" + position: "center" + "What's the": + text: "Jaký je" + position: "center" + "“official” name of": + text: "\"oficiální\" název" + position: "center" + "JavaScript?": + text: "JavaScriptu?" + position: "center" + "Иначе": "" + +ifelse_task.svg: + "Begin": "Začátek" + "Canceled": + position: "center" + text: "Zrušeno" + "Welcome!": + text: "Vítejte!" + position: "center" + "I don't know you": "Neznám vás" + "Wrong password": + position: "center" + text: "Chybné heslo" + "Who's there?": + position: "center" + text: "Kdo je tam?" + "Password?": "Heslo?" + "Cancel": "Zrušeno" + "Admin": "Správce" + "TheMaster": "Vládce" + "Other": "Jiné" + +chrome-sources-breakpoint.svg: + "here's the list": + text: "zde je seznam" + position: "right" + "breakpoints": + text: "zarážky" + +chrome-sources-debugger-pause.svg: + "see the outer call details": + text: "viz detaily vnějšího volání" + position: "right" + "watch expressions": + text: "sledování výrazů" + position: "right" + "current variables": + text: "aktuální proměnné" + position: "right" + +chrome-sources-debugger-trace-1.svg: + "nested calls": + text: "vnořená volání" + position: "right" + +chrome-open-sources.svg: + open sources: 'Otevřete záložku se zdrojovými soubory' + +object-user-empty.svg: + empty: + text: prázdný + position: "center" + user: uživatel + +garbage-collection-5.svg: + unreachables: + text: nedosažitelný + +array-shift.svg: + clear: + text: vymazat + position: "center" + move: posunout + elements: prvky + to the left: doleva + +array-pop.svg: + clear: + text: vymazat + position: "center" + +decorator-makecaching-wrapper.svg: + wrapper: 'wrapper' + around the function: 'kolem funkce' + +xhr-another-domain.svg: + _defaults: + position: "center" + Browser: 'Prohlížeč' + Server: 'Server' + HTTP-request: 'HTTP požadavek' + HTTP-response: 'HTTP odpověď' + '* OR https://javascript.info': '* NEBO https://javascript.info' + 'if the header allows, then success,': 'pokud to hlavička umožní, pak úspěch,' + otherwise fail: 'jinak chyba' + +xhr-preflight.svg: + _defaults: + position: "center" + Browser: 'Prohlížeč' + Server: 'Server' + Main HTTP-response: 'Hlavní HTTP odpověď' + otherwise error: 'jinak chyba' + 'if allowed: success,': 'je-li povoleno, úspěch,' + Main HTTP-request: 'Hlavní HTTP požadavek' + preflight: + text: 'předlet' + position: 'right' + if allowed: + text: 'je-li povoleno' + position: 'right' + +cors-gmail-messages.svg: + _defaults: + position: "center" + got the cookie?: 'máme cookie?' + okay!: 'ok!' + +websocket-handshake.svg: + _defaults: + position: "center" + Browser: 'Prohlížeč' + Server: 'Server' + HTTP-request: 'HTTP požadavek' + '"Hey, server, let''s talk WebSocket?"': '„Servere, popovídáme si na WebSocketu?“' + HTTP-response: 'HTTP odpověď' + '"Okay!"': 'Dobře!' + WebSocket protocol: 'Protokol WebSocket' + +long-polling.svg: + _defaults: + position: "center" + Browser: 'Prohlížeč' + Server: 'Server' + request: 'požadavek' + connection: 'spojení' + hangs: 'visí' + connection breaks: 'spojení přerušeno' + end of request: 'konec požadavku' + data: 'data' + +genYield2-2.svg: + _defaults: + position: "center" + Generator: 'Generátor' + Calling code: 'Volající kód' + +genYield2.svg: + _defaults: + position: "center" + Generator: 'Generátor' + Calling code: 'Volající kód' + question = "2 + 2 = ?": 'otázka = "2 + 2 = ?"' + +promise-handler-variants.svg: + _defaults: + position: "center" + ...with the result: '...s výsledkem' + of the new promise...: 'nového příslibu...' + 'the call of .then(handler) always returns a promise:': 'volání .then(handler) vždy vrátí příslib:' + if handler ends with…: 'pokud handler skončí…' + return value: 'vrácením hodnoty' + return promise: 'vrácením příslibu' + throw error: 'chybou' + 'that promise settles with:': 'tento příslib se usadí s:' + 'result: value': 'result: hodnota' + 'result: error': 'result: chyba' + +promiseQueue.svg: + '"code finished"': '"konec kódu"' + handler enqueued: 'handler ve frontě' + queued handler runs: 'spouští se handler z fronty' + script execution finished: 'výkon skriptu ukončen' + +eventLoop-full.svg: + script: 'skript' + event: + text: 'událost' + position: 'center' + loop: + text: 'cyklus' + position: 'center' + microtasks: 'mikroúlohy' + render: 'renderování' + +eventLoop.svg: + script: 'skript' + event: + text: 'událost' + position: 'center' + loop: + text: 'cyklus' + position: 'center' + macrotask: + text: 'makroúloha' + position: 'center' + queue: + text: 'fronta' + position: 'center' + +cookie-xsrf.svg: + _defaults: + position: "center" + got the cookie?: 'máme cookie?' + okay!: 'ok!' + +lexical-environment-global-3.svg: + execution start: 'začátek výkonu' + +lexenv-nested-makecounter-5.svg: + '<empty>': + text: '<prázdno>' + position: 'center' + +lexical-environment-global-2.svg: + execution start: 'začátek výkonu' + '<empty>': '<prázdno>' + +lexenv-makearmy.svg: + for block: 'pro blok' + +lexical-environment-simple.svg: + 'LexicalEnvironment for the call': 'LexicalEnvironment pro toto volání' + +lexenv-nested-makecounter-2.svg: + global LexicalEnvironment: 'globální LexicalEnvironment' + 'of makeCounter() call': 'volání makeCounter()' + +lexenv-nested-makecounter-6.svg: + modified here: 'zde změněno' + +proxy-inherit.svg: + '_name: "Guest"': '_name: "Host"' + user (proxied): + text: 'uživatel (proxy)' + position: "center" + original user: + text: 'původní uživatel' + position: "center" + + +proxy-inherit-admin.svg: + '_name: "Guest"': '_name: "Host"' + '_name: "Admin"': '_name: "Admin"' + user (proxied): + text: 'uživatel (proxy)' + position: "center" + original user: + text: 'původní uživatel' + position: "center" + + +selection-firefox.svg: + selection: 'výběr' + +selection-direction-backward.svg: + focus: 'zaměření' + anchor: 'kotva' + +selection-direction-forward.svg: + focus: 'zaměření' + anchor: 'kotva' + +object-prototype-empty.svg: + 'object': 'objekt' + 'prototype object': 'prototypový objekt' + +rabbit-prototype-constructor.svg: + 'default "prototype"': 'defaultně "prototype"' + 'Rabbit': 'Králík' + 'rabbit': 'králík' + +function-prototype-constructor.svg: + 'default "prototype"': 'defaultní "prototype"' + 'Rabbit': 'Králík' + +rabbit-animal-independent-animal.svg: + 'name: "My animal"': 'jméno: "Moje zvíře"' + 'Animal': 'Zvíře' + 'Animal.prototype': 'Zvíře.prototype' + 'constructor: Animal': 'constructor: Zvíře' + 'run: function': 'běž: function' + 'stop: function': 'stůj: function' + 'new Animal': 'new Zvíře' + +rabbit-animal-independent-rabbit.svg: + 'name: "My rabbit"': 'jméno: "Můj králík"' + +animal-rabbit-extends.svg: + 'name: "White Rabbit"': 'jméno: "Bílý králík"' + 'Animal': 'Zvíře' + 'Animal.prototype': 'Zvíře.prototype' + 'Rabbit': 'Králík' + 'Rabbit.prototype': 'Králík.prototype' + 'constructor: Animal': 'constructor: Zvíře' + 'run: function': 'běž: function' + 'stop: function': 'stůj: function' + 'constructor: Rabbit': 'constructor: Králík' + 'hide: function': 'schovejSe: function' + 'new Rabbit': 'new Králík' + +animal-rabbit-static.svg: + 'name: "White Rabbit"': 'jméno: "Bílý králík"' + 'Animal': 'Zvíře' + 'Animal.prototype': 'Zvíře.prototype' + 'Rabbit': 'Králík' + 'Rabbit.prototype': 'Králík.prototype' + 'constructor: Animal': 'constructor: Zvíře' + 'run: function': 'běž: function' + 'constructor: Rabbit': 'constructor: Králík' + 'hide: function': 'schovejSe: function' + 'compare': 'porovnej' + 'rabbit': 'králík' + +class-inheritance-rabbit-animal.svg: + 'methods of Animal': 'metody Zvířete' + 'methods of Rabbit': 'metody Králíka' + 'properties of rabbit': 'vlastnosti králíka' + +proto-animal-rabbit-walk-3.svg: + 'name: "White Rabbit"': 'jméno: "Bílý králík"' + 'animal': 'zvíře' + 'walk: function': 'jdi: function' + 'sleep: function': 'spi: function' + 'rabbit': 'králík' + 'isSleeping: true': 'jeSpící: true' + +class-inheritance-rabbit-animal-2.svg: + 'name: "White Rabbit"': 'jméno: "Bílý králík"' + +event-order-bubbling.svg: + _defaults: + position: "center" + 'Most deeply': 'Nejhlouběji' + 'nested element': 'vnořený prvek' + +proto-animal-rabbit.svg: + 'animal': 'zvíře' + 'rabbit': 'králík' + 'eats: true': 'žere: true' + 'jumps: true': 'skáče: true' + +proto-constructor-animal-rabbit.svg: + 'Rabbit': 'Králík' + 'animal': 'zvíře' + 'eats: true': 'žere: true' + 'rabbit': 'králík' + 'name: "White Rabbit"': 'jméno: "Bílý králík"' + +native-prototypes-classes.svg: + 'other object methods': 'jiné metody objektů' + 'other array methods': 'jiné metody polí' + 'other function methods': 'jiné metody funkcí' + 'other number methods': 'jiné metody čísel' + +proto-animal-rabbit-walk.svg: + 'animal': 'zvíře' + 'eats: true': 'žere: true' + 'walk: function': 'jdi: function' + 'rabbit': 'králík' + 'jumps: true': 'skáče: true' + +proto-animal-rabbit-chain.svg: + 'animal': 'zvíře' + 'eats: true': 'žere: true' + 'walk: function': 'jdi: function' + 'rabbit': 'králík' + 'jumps: true': 'skáče: true' + 'longEar': 'dlouhouchý' + 'earLength': 'délkaUcha' + +proto-animal-rabbit-walk-2.svg: + 'animal': 'zvíře' + 'eats: true': 'žere: true' + 'walk: function': 'jdi: function' + 'rabbit': 'králík' + +rabbit-animal-object.svg: + 'animal': 'zvíře' + 'eats: true': 'žere: true' + 'rabbit': 'králík' + 'jumps: true': 'skáče: true' + +class-user.svg: + 'User': 'Uživatel' + 'name': 'jméno' + 'sayHi: function': 'řekniAhoj: function' + 'constructor(name) {': 'constructor(jméno) {' + ' this.name = name;': ' this.jméno = jméno;' + 'constructor: User': 'constructor: Uživatel' + 'User.prototype': 'Uživatel.prototype' + +this-super-loop.svg: + 'rabbit': 'králík' + 'animal': 'zvíře' + 'eat': 'žer' + 'longEar': 'dlouhouchý' + 'let rabbit = {': 'let králík = {' + ' __proto__: animal': ' __proto__: zvíře' + ' __proto__: rabbit': ' __proto__: králík' + ' eat() {': ' žer() {' + ' this.__proto__.žer.call(this); (*)': ' this.__proto__.eat.call(this); (*)' + ' this.__proto__.žer.call(this); (**)': ' this.__proto__.eat.call(this); (**)' + +super-homeobject-wrong.svg: + 'animal': 'zvíře' + 'plant': 'rostlina' + 'sayHi': 'řekniAhoj' + 'rabbit': 'králík' + 'tree': 'strom' + +variable.svg: + '"Hello!"': '"Ahoj!"' + 'message': 'zpráva' + +variable-change.svg: + '"Hello!"': '"Ahoj!"' + '"World!"': '"světe!"' + 'message': 'zpráva' + +rabbit-extends-object.svg: + 'class Rabbit': 'class Králík' + 'class Rabbit extends Object': 'class Králík extends Object' + 'Rabbit': 'Králík' + +object-date-inheritance.svg: + '1 Jan 2019': '1. leden 2019' + +instanceof.svg: + 'Animal.prototype': 'Zvíře.prototype' + '= Animal.prototype?': '= Zvíře.prototype?' + 'rabbit': 'králík' + 'Rabbit.prototype': 'Králík.prototype' + +mixin-inheritance.svg: + 'sayMixin': 'mixinŘekni' + 'say: function': 'řekni: function' + 'User.prototype': 'Uživatel: prototype' + 'constructor: User': 'constructor: Uživatel' + 'sayHi: function': 'řekniAhoj: function' + 'sayBye: function': 'řekniNashle: function' + 'user': 'uživatel' + 'name: ...': 'jméno: ...' + 'sayHiMixin': 'mixinŘekniAhoj' + +promise-resolve-reject.svg: + 'resolve(value)': 'resolve(hodnota)' + 'reject(error)': 'reject(chyba)' + 'result: value': 'result: hodnota' + 'result: error': 'result: chyba' + 'new Promise(executor)': 'new Promise(exekutor)' + +promise-resolve-1.svg: + 'resolve("done")': 'resolve("hotovo")' + 'result: "done"': 'result: "hotovo"' + 'new Promise(executor)': 'new Promise(exekutor)' + +promise-reject-1.svg: + 'reject(error)': 'reject(chyba)' + 'result: error': 'result: chyba' + 'new Promise(executor)': 'new Promise(exekutor)' + +generateSequence-1.svg: + 'generateSequence': 'generujPosloupnost' + +proxy.svg: + 'target': 'cíl' + +object.svg: + key1: klíč1 + key2: klíč2 + key3: klíč3 + +object-user.svg: + user: uživatel + name: jméno + age: věk + +object-user-isadmin.svg: + user: uživatel + name: jméno + age: věk + isAdmin: jeAdmin + +object-user-delete.svg: + user: uživatel + name: jméno + isAdmin: jeAdmin + +object-user-props.svg: + user: uživatel + name: jméno + age: věk + likes birds: má rád ptáky \ No newline at end of file