Skip to content

Code editors, Developer console #5

New issue

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

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

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Oct 25, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion 1-js/01-getting-started/1-intro/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -118,4 +118,4 @@ Jsou i další. Samozřejmě i když používáme některý z transpilovaných j

- 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.
- 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.
50 changes: 25 additions & 25 deletions 1-js/01-getting-started/3-code-editors/article.md
Original file line number Diff line number Diff line change
@@ -1,46 +1,46 @@
# 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](http://www.jetbrains.com/webstorm/) (cross-platform, paid).
- [Visual Studio Code](https://code.visualstudio.com/) (různé platformy, zdarma).
- [WebStorm](http://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.

The following options deserve your attention:
Vaši pozornost si zasluhují následující možnosti:

- [Atom](https://atom.io/) (cross-platform, free).
- [Visual Studio Code](https://code.visualstudio.com/) (cross-platform, free).
- [Sublime Text](http://www.sublimetext.com) (cross-platform, shareware).
- [Notepad++](https://notepad-plus-plus.org/) (Windows, free).
- [Vim](http://www.vim.org/) and [Emacs](https://www.gnu.org/software/emacs/) are also cool if you know how to use them.
- [Atom](https://atom.io/) (různé platformy, zdarma).
- [Visual Studio Code](https://code.visualstudio.com/) (různé platformy, zdarma).
- [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 každého nástroje, je individuální záležitost a závisí na projektech, zvyklostech a osobním vkusu každého vývojáře.
58 changes: 29 additions & 29 deletions 1-js/01-getting-started/4-devtools/article.md
Original file line number Diff line number Diff line change
@@ -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 <info:debugging-chrome>.
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 <info:debugging-chrome>.

```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.