From 4b375ab4e023fd28839726e17c61ee5961372b3b Mon Sep 17 00:00:00 2001
From: Otmar Onderek <onderek@volny.cz>
Date: Wed, 5 Mar 2025 22:41:09 +0100
Subject: [PATCH 1/2] 1.13.1
---
1-js/13-modules/01-modules-intro/article.md | 362 +++++++++---------
.../01-modules-intro/say.view/index.html | 4 +-
.../01-modules-intro/say.view/say.js | 4 +-
.../scopes-working.view/hello.js | 4 +-
.../scopes-working.view/user.js | 2 +-
.../01-modules-intro/scopes.view/hello.js | 2 +-
.../01-modules-intro/scopes.view/user.js | 2 +-
7 files changed, 190 insertions(+), 190 deletions(-)
diff --git a/1-js/13-modules/01-modules-intro/article.md b/1-js/13-modules/01-modules-intro/article.md
index 5ad70d151..b5f1af26e 100644
--- a/1-js/13-modules/01-modules-intro/article.md
+++ b/1-js/13-modules/01-modules-intro/article.md
@@ -1,251 +1,251 @@
-# Modules, introduction
+# Úvod do modulů
-As our application grows bigger, we want to split it into multiple files, so called "modules". A module may contain a class or a library of functions for a specific purpose.
+Když se naše aplikace rozrůstá, chceme ji rozdělit do více souborů, tzv. „modulů“. Modul může obsahovat třídu nebo knihovnu funkcí sloužící specifickému účelu.
-For a long time, JavaScript existed without a language-level module syntax. That wasn't a problem, because initially scripts were small and simple, so there was no need.
+Dlouhou dobu JavaScript existoval bez modulové syntaxe na jazykové úrovni. To nebyl problém, protože skripty byly původně malé a jednoduché, takže to nebylo zapotřebí.
-But eventually scripts became more and more complex, so the community invented a variety of ways to organize code into modules, special libraries to load modules on demand.
+Časem se však skripty stávaly stále složitějšími a složitějšími, takže komunita vynalezla rozličné způsoby, jak zorganizovat kód do modulů, a speciální knihovny, které načtou moduly na požádání.
-To name some (for historical reasons):
+Abychom vyjmenovali některé z nich (z historických důvodů):
-- [AMD](https://en.wikipedia.org/wiki/Asynchronous_module_definition) -- one of the most ancient module systems, initially implemented by the library [require.js](https://requirejs.org/).
-- [CommonJS](https://wiki.commonjs.org/wiki/Modules/1.1) -- the module system created for Node.js server.
-- [UMD](https://github.com/umdjs/umd) -- one more module system, suggested as a universal one, compatible with AMD and CommonJS.
+- [AMD](https://en.wikipedia.org/wiki/Asynchronous_module_definition) -- jeden z nejstarších modulových systémů, původně implementován knihovnou [require.js](https://requirejs.org/).
+- [CommonJS](https://wiki.commonjs.org/wiki/Modules/1.1) -- modulový systém vytvořený pro server Node.js.
+- [UMD](https://github.com/umdjs/umd) -- další modulový systém, navržený jako univerzální, kompatibilní s AMD a CommonJS.
-Now these all slowly became a part of history, but we still can find them in old scripts.
+Nyní se všechny pomalu odebírají do dějin, ale ve starých skriptech je pořád můžeme najít.
-The language-level module system appeared in the standard in 2015, gradually evolved since then, and is now supported by all major browsers and in Node.js. So we'll study the modern JavaScript modules from now on.
+Modulový systém na jazykové úrovni se ve standardu objevil v roce 2015, od té doby se postupně vyvíjel a nyní je podporován všemi významnými prohlížeči a v Node.js. Od nynějška tedy budeme studovat moderní JavaScriptové moduly.
-## What is a module?
+## Co je modul?
-A module is just a file. One script is one module. As simple as that.
+Modul je prostě soubor. Jeden skript je jeden modul. Tak jednoduché to je.
-Modules can load each other and use special directives `export` and `import` to interchange functionality, call functions of one module from another one:
+Moduly se mohou navzájem načítat a používat speciální direktivy `export` a `import`, aby si vzájemně vyměňovaly funkcionalitu a jeden modul mohl volat funkce druhého:
-- `export` keyword labels variables and functions that should be accessible from outside the current module.
-- `import` allows the import of functionality from other modules.
+- Klíčové slovo `export` označuje proměnné a funkce, které by měly být dostupné zvenčí aktuálního modulu.
+- Klíčové slovo `import` umožňuje import funkcionality z jiných modulů.
-For instance, if we have a file `sayHi.js` exporting a function:
+Například máme-li soubor `řekniAhoj.js`, který exportuje funkci:
```js
-// 📁 sayHi.js
-export function sayHi(user) {
- alert(`Hello, ${user}!`);
+// 📁 řekniAhoj.js
+export function řekniAhoj(uživatel) {
+ alert(`Ahoj, ${uživatel}!`);
}
```
-...Then another file may import and use it:
+...Pak ji jiný soubor může importovat a používat:
```js
// 📁 main.js
-import {sayHi} from './sayHi.js';
+import {řekniAhoj} from './řekniAhoj.js';
-alert(sayHi); // function...
-sayHi('John'); // Hello, John!
+alert(řekniAhoj); // function...
+řekniAhoj('Jan'); // Ahoj, Jan!
```
-The `import` directive loads the module by path `./sayHi.js` relative to the current file, and assigns exported function `sayHi` to the corresponding variable.
+Direktiva `import` nahrává modul z cesty `./řekniAhoj.js`, která je relativní vůči aktuálnímu souboru, a přiřadí exportovanou funkci `řekniAhoj` do odpovídající proměnné.
-Let's run the example in-browser.
+Spusťme si tento příklad v prohlížeči.
-As modules support special keywords and features, we must tell the browser that a script should be treated as a module, by using the attribute `<script type="module">`.
+Protože moduly podporují speciální klíčová slova a jazykové prvky, musíme prohlížeči sdělit, že se skriptem má zacházet jako s modulem. Učiníme to použitím atributu `<script type="module">`.
-Like this:
+Například:
[codetabs src="say" height="140" current="index.html"]
-The browser automatically fetches and evaluates the imported module (and its imports if needed), and then runs the script.
+Prohlížeč automaticky stáhne a vyhodnotí importovaný modul (a jeho importy, jsou-li zapotřebí) a pak spustí skript.
-```warn header="Modules work only via HTTP(s), not locally"
-If you try to open a web-page locally, via `file://` protocol, you'll find that `import/export` directives don't work. Use a local web-server, such as [static-server](https://www.npmjs.com/package/static-server#getting-started) or use the "live server" capability of your editor, such as VS Code [Live Server Extension](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) to test modules.
+```warn header="Moduly fungují jen přes HTTP(s), ne lokálně"
+Pokud se pokusíte otevřít webovou stránku lokálně protokolem `file://`, zjistíte, že direktivy `import/export` nefungují. K testování modulů používejte lokální webový server, např. [statický server](https://www.npmjs.com/package/static-server#getting-started), nebo využijte schopnost „živého serveru“ ve vašem editoru, např. VS Code [Live Server Extension](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer).
```
-## Core module features
+## Základní vlastnosti modulů
-What's different in modules, compared to "regular" scripts?
+Čím se liší moduly od „obyčejných“ skriptů?
-There are core features, valid both for browser and server-side JavaScript.
+Mají základní vlastnosti, které platí pro JavaScript na prohlížečové i serverové straně.
-### Always "use strict"
+### Vždy používají „use strict“
-Modules always work in strict mode. E.g. assigning to an undeclared variable will give an error.
+Moduly vždy fungují ve striktním režimu. Například přiřazení hodnoty nedeklarované proměnné ohlásí chybu.
```html run
<script type="module">
- a = 5; // error
+ a = 5; // chyba
</script>
```
-### Module-level scope
+### Rozsah platnosti na úrovni modulu
-Each module has its own top-level scope. In other words, top-level variables and functions from a module are not seen in other scripts.
+Každý modul má na nejvyšší úrovni svůj vlastní rozsah platnosti. Jinými slovy, proměnné a funkce na nejvyšší úrovni modulu nejsou vidět v jiných skriptech.
-In the example below, two scripts are imported, and `hello.js` tries to use `user` variable declared in `user.js`. It fails, because it's a separate module (you'll see the error in the console):
+V následujícím příkladu jsou importovány dva skripty a `hello.js` se pokusí použít proměnnou `uživatel`, deklarovanou v `user.js`. Selže to, protože to je oddělený modul (chybu uvidíte v konzoli):
[codetabs src="scopes" height="140" current="index.html"]
-Modules should `export` what they want to be accessible from outside and `import` what they need.
+Moduly by měly exportovat direktivou `export` to, co chtějí zpřístupnit zvenčí, a importovat direktivou `import` to, co potřebují.
-- `user.js` should export the `user` variable.
-- `hello.js` should import it from `user.js` module.
+- `user.js` by měl exportovat proměnnou `uživatel`.
+- `hello.js` by ji měl importovat z modulu `user.js`.
-In other words, with modules we use import/export instead of relying on global variables.
+Jinými slovy, s moduly používáme import a export místo závislosti na globálních proměnných.
-This is the correct variant:
+Toto je správná varianta:
[codetabs src="scopes-working" height="140" current="hello.js"]
-In the browser, if we talk about HTML pages, independent top-level scope also exists for each `<script type="module">`.
+Hovoříme-li o HTML stránkách, v prohlížeči existuje nezávislý rozsah platnosti na nejvyšší úrovni také pro každý `<script type="module">` zvlášť.
-Here are two scripts on the same page, both `type="module"`. They don't see each other's top-level variables:
+Zde jsou dva skripty na stejné stránce, oba mají `type="module"`. Navzájem nevidí svoje proměnné na nejvyšší úrovni:
```html run
<script type="module">
- // The variable is only visible in this module script
- let user = "John";
+ // Proměnná je viditelná jen v tomto modulovém skriptu
+ let uživatel = "Jan";
</script>
<script type="module">
*!*
- alert(user); // Error: user is not defined
+ alert(uživatel); // Chyba: uživatel není definován
*/!*
</script>
```
```smart
-In the browser, we can make a variable window-level global by explicitly assigning it to a `window` property, e.g. `window.user = "John"`.
+V prohlížeči můžeme učinit proměnnou globální na úrovni okna tak, že ji výslovně přiřadíme do vlastnosti objektu `window`, např. `window.uživatel = "Jan"`.
-Then all scripts will see it, both with `type="module"` and without it.
+Pak ji uvidí všechny skripty, s `type="module"` i bez něj.
-That said, making such global variables is frowned upon. Please try to avoid them.
+Přesto je však vytváření takových globálních proměnných nehezké. Prosíme, snažte se tomu vyhnout.
```
-### A module code is evaluated only the first time when imported
+### Modulový kód je vyhodnocen jen poprvé, když je importován
-If the same module is imported into multiple other modules, its code is executed only once, upon the first import. Then its exports are given to all further importers.
+Je-li tentýž modul importován do několika jiných modulů, jeho kód se spustí pouze jednou, při prvním importu. Pak jsou jeho exporty předány všem budoucím importérům.
-The one-time evaluation has important consequences, that we should be aware of.
+Jednorázové vyhodnocení má důležité důsledky, kterých bychom si měli být vědomi.
-Let's see a couple of examples.
+Podívejme se na několik příkladů.
-First, if executing a module code brings side-effects, like showing a message, then importing it multiple times will trigger it only once -- the first time:
+Především jestliže spuštění kódu modulu způsobí vedlejší efekty, např. zobrazení zprávy, pak se při vícenásobném importu spustí pouze jednou -- poprvé:
```js
// 📁 alert.js
-alert("Module is evaluated!");
+alert("Modul je vyhodnocen!");
```
```js
-// Import the same module from different files
+// Importujeme stejný modul v různých souborech
// 📁 1.js
-import `./alert.js`; // Module is evaluated!
+import `./alert.js`; // Modul je vyhodnocen!
// 📁 2.js
-import `./alert.js`; // (shows nothing)
+import `./alert.js`; // (nezobrazí nic)
```
-The second import shows nothing, because the module has already been evaluated.
+Druhý import nic nezobrazí, protože modul již byl vyhodnocen.
-There's a rule: top-level module code should be used for initialization, creation of module-specific internal data structures. If we need to make something callable multiple times - we should export it as a function, like we did with `sayHi` above.
+Existuje pravidlo, že kód na nejvyšší úrovni modulu by měl být použit pro inicializaci, vytvoření vnitřních datových struktur specifických pro modul. Jestliže potřebujeme umožnit něco volat vícekrát, měli bychom to exportovat jako funkci, tak jak jsme to udělali s výše uvedenou funkcí `řekniAhoj`.
-Now, let's consider a deeper example.
+Nyní uvažujme hlubší příklad.
-Let's say, a module exports an object:
+Řekněme, že modul exportuje objekt:
```js
// 📁 admin.js
export let admin = {
- name: "John"
+ jméno: "Jan"
};
```
-If this module is imported from multiple files, the module is only evaluated the first time, `admin` object is created, and then passed to all further importers.
+Je-li tento modul importován z více souborů, je vyhodnocen pouze poprvé, vytvoří se objekt `admin` a ten je pak předán všem dalším importérům.
-All importers get exactly the one and only `admin` object:
+Všichni importéři dostanou přesně jeden a tentýž objekt `admin`:
```js
// 📁 1.js
import {admin} from './admin.js';
-admin.name = "Pete";
+admin.jméno = "Petr";
// 📁 2.js
import {admin} from './admin.js';
-alert(admin.name); // Pete
+alert(admin.jméno); // Petr
*!*
-// Both 1.js and 2.js reference the same admin object
-// Changes made in 1.js are visible in 2.js
+// Jak 1.js, tak 2.js se odkazují na tentýž objekt admin
+// Změny učiněné v 1.js jsou viditelné ve 2.js
*/!*
```
-As you can see, when `1.js` changes the `name` property in the imported `admin`, then `2.js` can see the new `admin.name`.
+Jak vidíte, když `1.js` v importovaném objektu `admin` změní vlastnost `jméno`, pak `2.js` uvidí nové `admin.jméno`.
-That's exactly because the module is executed only once. Exports are generated, and then they are shared between importers, so if something changes the `admin` object, other importers will see that.
+To je právě proto, že modul je spuštěn pouze jednou. Vygenerují se exporty a ty jsou pak sdíleny mezi importéry, takže jestliže něco změní objekt `admin`, ostatní importéři to uvidí.
-**Such behavior is actually very convenient, because it allows us to *configure* modules.**
+**Takové chování je ve skutečnosti velmi užitečné, protože nám umožňuje *konfigurovat* moduly.**
-In other words, a module can provide a generic functionality that needs a setup. E.g. authentication needs credentials. Then it can export a configuration object expecting the outer code to assign to it.
+Jinými slovy, modul může poskytovat obecnou funkcionalitu, která potřebuje nějaké nastavení. Například autentifikace potřebuje osobní údaje. Pak modul může exportovat konfigurační objekt a očekávat, že do něj vnější kód něco vloží.
-Here's the classical pattern:
-1. A module exports some means of configuration, e.g. a configuration object.
-2. On the first import we initialize it, write to its properties. The top-level application script may do that.
-3. Further imports use the module.
+Zde je klasický vzor:
+1. Modul exportuje konfiguraci nějakého druhu, např. konfigurační objekt.
+2. Při prvním importu jej inicializujeme, zapíšeme do jeho vlastností. To může udělat skript na nejvyšší úrovni aplikace.
+3. Další importy budou tento modul využívat.
-For instance, the `admin.js` module may provide certain functionality (e.g. authentication), but expect the credentials to come into the `config` object from outside:
+Například modul `admin.js` může poskytovat určitou funkcionalitu (např. autentifikaci), ale očekává, že osobní údaje přijdou do objektu `konfigurace` zvenčí:
```js
// 📁 admin.js
-export let config = { };
+export let konfigurace = { };
-export function sayHi() {
- alert(`Ready to serve, ${config.user}!`);
+export function řekniAhoj() {
+ alert(`Jsem připraven posloužit, ${konfigurace.uživatel}!`);
}
```
-Here, `admin.js` exports the `config` object (initially empty, but may have default properties too).
+Zde modul `admin.js` exportuje objekt `konfigurace` (na začátku je prázdný, ale může mít i nějaké standardní vlastnosti).
-Then in `init.js`, the first script of our app, we import `config` from it and set `config.user`:
+Pak z něj v `init.js`, prvním skriptu naší aplikace, objekt `konfigurace` importujeme a nastavíme `konfigurace.uživatel`:
```js
// 📁 init.js
-import {config} from './admin.js';
-config.user = "Pete";
+import {konfigurace} from './admin.js';
+konfigurace.uživatel = "Petr";
```
-...Now the module `admin.js` is configured.
+...Nyní je modul `admin.js` nakonfigurován.
-Further importers can call it, and it correctly shows the current user:
+Další importéři jej mohou volat a modul správně zobrazí aktuálního uživatele:
```js
-// 📁 another.js
-import {sayHi} from './admin.js';
+// 📁 jiný.js
+import {řekniAhoj} from './admin.js';
-sayHi(); // Ready to serve, *!*Pete*/!*!
+řekniAhoj(); // Jsem připraven posloužit, *!*Petr*/!*!
```
### import.meta
-The object `import.meta` contains the information about the current module.
+Informace o aktuálním modulu obsahuje objekt `import.meta`.
-Its content depends on the environment. In the browser, it contains the URL of the script, or a current webpage URL if inside HTML:
+Jeho obsah závisí na prostředí. V prohlížeči obsahuje URL skriptu nebo URL aktuální webové stránky, je-li uvnitř HTML:
```html run height=0
<script type="module">
- alert(import.meta.url); // script URL
- // for an inline script - the URL of the current HTML-page
+ alert(import.meta.url); // URL skriptu
+ // pro vložený skript URL aktuální HTML stránky
</script>
```
-### In a module, "this" is undefined
+### V modulu není definováno „this“
-That's kind of a minor feature, but for completeness we should mention it.
+Není to významná vlastnost, ale pro úplnost bychom ji měli uvést.
-In a module, top-level `this` is undefined.
+V modulu je `this` na nejvyšší úrovni nedefinované.
-Compare it to non-module scripts, where `this` is a global object:
+Porovnejme si to s nemodulovými skripty, v nichž je `this` globální objekt:
```html run height=0
<script>
@@ -257,66 +257,66 @@ Compare it to non-module scripts, where `this` is a global object:
</script>
```
-## Browser-specific features
+## Vlastnosti specifické pro prohlížeče
-There are also several browser-specific differences of scripts with `type="module"` compared to regular ones.
+Mezi skripty s `type="module"` a běžnými skripty existuje také několik rozdílů, které jsou specifické pro prohlížeče.
-You may want to skip this section for now if you're reading for the first time, or if you don't use JavaScript in a browser.
+Jestliže tento článek čtete poprvé nebo jestliže nepoužíváte JavaScript v prohlížeči, můžete tuto podkapitolu prozatím přeskočit.
-### Module scripts are deferred
+### Modulové skripty jsou deferované
-Module scripts are *always* deferred, same effect as `defer` attribute (described in the chapter [](info:script-async-defer)), for both external and inline scripts.
+Modulové skripty jsou *vždy* deferované. Je to stejný efekt jako u atributu `defer` (popsaného v kapitole [](info:script-async-defer)), a to pro externí i vložené skripty.
-In other words:
-- downloading external module scripts `<script type="module" src="...">` doesn't block HTML processing, they load in parallel with other resources.
-- module scripts wait until the HTML document is fully ready (even if they are tiny and load faster than HTML), and then run.
-- relative order of scripts is maintained: scripts that go first in the document, execute first.
+Jinými slovy:
+- stahování externích modulových skriptů `<script type="module" src="...">` neblokuje zpracování HTML, načtou se paralelně s ostatními zdroji.
+- modulové skripty čekají, dokud není celý HTML dokument připraven (i pokud jsou malé a načtou se rychleji než HTML), a až pak se spustí.
+- zachovává se relativní pořadí skriptů: skripty, které jsou uvedeny jako první v dokumentu, se jako první spustí.
-As a side effect, module scripts always "see" the fully loaded HTML-page, including HTML elements below them.
+Vedlejším efektem je, že modulové skripty vždy „vidí“ celou načtenou HTML stránku včetně HTML prvků, které jsou až pod nimi.
-For instance:
+Například:
```html run
<script type="module">
*!*
- alert(typeof button); // object: the script can 'see' the button below
+ alert(typeof tlačítko); // object: skript „vidí“ tlačítko pod sebou
*/!*
- // as modules are deferred, the script runs after the whole page is loaded
+ // protože moduly jsou deferované, skript se spustí až po načtení celé stránky
</script>
-Compare to regular script below:
+Porovnejme si to s běžným skriptem:
<script>
*!*
- alert(typeof button); // button is undefined, the script can't see elements below
+ alert(typeof tlačítko); // tlačítko je undefined, protože skript nevidí prvky pod sebou
*/!*
- // regular scripts run immediately, before the rest of the page is processed
+ // běžné skripty se spustí okamžitě, ještě před zpracováním zbytku stránky
</script>
-<button id="button">Button</button>
+<button id="tlačítko">Tlačítko</button>
```
-Please note: the second script actually runs before the first! So we'll see `undefined` first, and then `object`.
+Prosíme všimněte si, že druhý skript se ve skutečnosti spustí před prvním! Nejprve tedy uvidíme `undefined`, až pak `object`.
-That's because modules are deferred, so we wait for the document to be processed. The regular script runs immediately, so we see its output first.
+Je to proto, že moduly jsou deferované, takže čekají, až se zpracuje celý dokument. Běžný skript se spustí okamžitě, proto jeho výstup uvidíme jako první.
-When using modules, we should be aware that the HTML page shows up as it loads, and JavaScript modules run after that, so the user may see the page before the JavaScript application is ready. Some functionality may not work yet. We should put "loading indicators", or otherwise ensure that the visitor won't be confused by that.
+Při používání modulů bychom si měli být vědomi toho, že HTML stránka se zobrazuje průběžně, když se načítá, ale JavaScriptové moduly se spustí až potom. Uživatel tedy může vidět stránku ještě předtím, než je JavaScriptová aplikace připravena. Některá funkcionalita tedy ještě nemusí fungovat. Měli bychom tedy na stránku umístit „ukazatele načítání“ nebo nějak jinak zajistit, aby to návštěvníka nezmátlo.
-### Async works on inline scripts
+### Na vložených skriptech funguje async
-For non-module scripts, the `async` attribute only works on external scripts. Async scripts run immediately when ready, independently of other scripts or the HTML document.
+Pro nemodulové skripty funguje atribut `async` pouze na externích skriptech. Asynchronní skripty se spustí okamžitě, když jsou připraveny, nezávisle na ostatních skriptech nebo HTML dokumentu.
-For module scripts, it works on inline scripts as well.
+Pro modulové skripty funguje i na vložených skriptech.
-For example, the inline script below has `async`, so it doesn't wait for anything.
+Například následující vložený skript má `async`, takže nebude na nic čekat.
-It performs the import (fetches `./analytics.js`) and runs when ready, even if the HTML document is not finished yet, or if other scripts are still pending.
+Provede import (stáhne si `./analytics.js`) a spustí se, jakmile bude připraven, i když HTML dokument ještě nebude dokončen nebo jiné skripty budou stále čekat na vyřízení.
-That's good for functionality that doesn't depend on anything, like counters, ads, document-level event listeners.
+To je dobré pro funkcionalitu, která na ničem nezávisí, např. čítače, reklamy, posluchače událostí na dokumentové úrovni.
```html
-<!-- all dependencies are fetched (analytics.js), and the script runs -->
-<!-- doesn't wait for the document or other <script> tags -->
+<!-- jsou staženy všechny závislosti (analytics.js) a skript se spustí -->
+<!-- nečeká na dokument nebo jiné značky <script> -->
<script *!*async*/!* type="module">
import {counter} from './analytics.js';
@@ -324,95 +324,95 @@ That's good for functionality that doesn't depend on anything, like counters, ad
</script>
```
-### External scripts
+### Externí skripty
-External scripts that have `type="module"` are different in two aspects:
+Externí skripty, které mají `type="module"`, se liší ve dvou aspektech:
-1. External scripts with the same `src` run only once:
+1. Externí skripty se stejným `src` se spustí pouze jednou:
```html
- <!-- the script my.js is fetched and executed only once -->
- <script type="module" src="my.js"></script>
- <script type="module" src="my.js"></script>
+ <!-- skript můj.js se načte a spustí pouze jednou -->
+ <script type="module" src="můj.js"></script>
+ <script type="module" src="můj.js"></script>
```
-2. External scripts that are fetched from another origin (e.g. another site) require [CORS](mdn:Web/HTTP/CORS) headers, as described in the chapter <info:fetch-crossorigin>. In other words, if a module script is fetched from another origin, the remote server must supply a header `Access-Control-Allow-Origin` allowing the fetch.
+2. Externí skripty, které jsou staženy z jiného zdroje (např. z jiné stránky), vyžadují hlavičku [CORS](mdn:Web/HTTP/CORS), jak je popsáno v kapitole <info:fetch-crossorigin>. Jinými slovy, je-li modulový skript stažen z jiného zdroje, vzdálený server musí poskytnout hlavičku `Access-Control-Allow-Origin`, která stažení umožní.
```html
- <!-- another-site.com must supply Access-Control-Allow-Origin -->
- <!-- otherwise, the script won't execute -->
- <script type="module" src="*!*http://another-site.com/their.js*/!*"></script>
+ <!-- jina-stranka.com musí poskytovat Access-Control-Allow-Origin -->
+ <!-- jinak se skript nespustí -->
+ <script type="module" src="*!*http://jina-stranka.com/jejich-modul.js*/!*"></script>
```
- That ensures better security by default.
+ To standardně zajišťuje větší bezpečnost.
-### No "bare" modules allowed
+### „Holé“ moduly nejsou povoleny
-In the browser, `import` must get either a relative or absolute URL. Modules without any path are called "bare" modules. Such modules are not allowed in `import`.
+V prohlížeči musí `import` obdržet relativní nebo absolutní URL. Moduly bez cesty se nazývají „holé“ moduly. Takové moduly nejsou v `import` povoleny.
-For instance, this `import` is invalid:
+Například tento `import` je chybný:
```js
-import {sayHi} from 'sayHi'; // Error, "bare" module
-// the module must have a path, e.g. './sayHi.js' or wherever the module is
+import {řekniAhoj} from 'řekniAhoj'; // Chyba, „holý“ modul
+// modul musí obsahovat cestu, např. './řekniAhoj.js' nebo jinou, kde tento modul je
```
-Certain environments, like Node.js or bundle tools allow bare modules, without any path, as they have their own ways for finding modules and hooks to fine-tune them. But browsers do not support bare modules yet.
+Určitá prostředí, např. Node.js nebo spojovací nástroje, holé moduly bez uvedené cesty dovolují, protože mají své vlastní způsoby nalezení modulů a páky, jak je vyladit. Prohlížeče však holé moduly zatím nepodporují.
-### Compatibility, "nomodule"
+### Kompatibilita, „nomodule“
-Old browsers do not understand `type="module"`. Scripts of an unknown type are just ignored. For them, it's possible to provide a fallback using the `nomodule` attribute:
+Staré prohlížeče nerozumějí `type="module"`. Skripty neznámého typu prostě ignorují. Je možné jim poskytnout nouzové řešení pomocí atributu `nomodule`:
```html run
<script type="module">
- alert("Runs in modern browsers");
+ alert("Běží v moderních prohlížečích");
</script>
<script nomodule>
- alert("Modern browsers know both type=module and nomodule, so skip this")
- alert("Old browsers ignore script with unknown type=module, but execute this.");
+ alert("Moderní prohlížeče znají type=module i nomodule, takže toto přeskočí.")
+ alert("Staré prohlížeče ignorují skript s neznámým type=module, ale toto spustí.");
</script>
```
-## Build tools
+## Sestavovací nástroje
-In real-life, browser modules are rarely used in their "raw" form. Usually, we bundle them together with a special tool such as [Webpack](https://webpack.js.org/) and deploy to the production server.
+V reálném životě se prohlížečové moduly jen zřídka používají ve své „surové“ podobě. Obvykle je spojujeme dohromady (anglicky „bundle“) pomocí speciálního nástroje zvaného *bundler*, např. [Webpack](https://webpack.js.org/), a nahráváme na produkční server.
-One of the benefits of using bundlers -- they give more control over how modules are resolved, allowing bare modules and much more, like CSS/HTML modules.
+Jednou z výhod používání bundlerů je, že nám poskytují více kontroly nad tím, jak jsou moduly vyhodnocovány, umožňují holé moduly a mnoho dalších, např. CSS/HTML moduly.
-Build tools do the following:
+Sestavovací nástroje provádějí následující:
-1. Take a "main" module, the one intended to be put in `<script type="module">` in HTML.
-2. Analyze its dependencies: imports and then imports of imports etc.
-3. Build a single file with all modules (or multiple files, that's tunable), replacing native `import` calls with bundler functions, so that it works. "Special" module types like HTML/CSS modules are also supported.
-4. In the process, other transformations and optimizations may be applied:
- - Unreachable code removed.
- - Unused exports removed ("tree-shaking").
- - Development-specific statements like `console` and `debugger` removed.
- - Modern, bleeding-edge JavaScript syntax may be transformed to older one with similar functionality using [Babel](https://babeljs.io/).
- - The resulting file is minified (spaces removed, variables replaced with shorter names, etc).
-
-If we use bundle tools, then as scripts are bundled together into a single file (or few files), `import/export` statements inside those scripts are replaced by special bundler functions. So the resulting "bundled" script does not contain any `import/export`, it doesn't require `type="module"`, and we can put it into a regular script:
+1. Vezmou „hlavní“ modul, ten, který je určen k vložení do `<script type="module">` v HTML.
+2. Analyzují jeho závislosti: importy, pak importy importů atd.
+3. Sestaví jediný soubor se všemi moduly (nebo více souborů, to lze nastavit) a nahradí nativní volání `import` spojovacími funkcemi, takže to bude fungovat. Podporovány jsou i „speciální“ typy modulů, např. HTML/CSS.
+4. V tomto procesu mohou být aplikovány i jiné transformace a optimalizace:
+ - Odstranění nedosažitelného kódu.
+ - Odstranění nepoužitých exportů („třesení stromem“).
+ - Odstranění příkazů specifických pro vývoj, např. `console` a `debugger`.
+ - Moderní syntaxe JavaScriptu může být transformována na starší s podobnou funkcionalitou pomocí [Babelu](https://babeljs.io/).
+ - Výsledný soubor je minifikován (mezery odstraněny, názvy proměnných nahrazeny kratšími, atd.).
+
+Používáme-li bundlery, pak když jsou skripty spojeny dohromady do jediného souboru (nebo několika málo souborů), příkazy `import/export` uvnitř těchto skriptů jsou nahrazeny speciálními spojovacími funkcemi. Výsledný „spojený“ skript tedy neobsahuje žádný `import/export`, nevyžaduje `type="module"` a můžeme jej vložit do obvyklého skriptu:
```html
-<!-- Assuming we got bundle.js from a tool like Webpack -->
+<!-- Předpokládáme, že jsme z nástroje, např. Webpacku, získali bundle.js -->
<script src="bundle.js"></script>
```
-That said, native modules are also usable. So we won't be using Webpack here: you can configure it later.
+I přesto jsou ovšem použitelné i nativní moduly. Zde tedy Webpack používat nebudeme: můžete si jej nakonfigurovat později.
-## Summary
+## Shrnutí
-To summarize, the core concepts are:
+Abychom to shrnuli, základní koncepty jsou:
-1. A module is a file. To make `import/export` work, browsers need `<script type="module">`. Modules have several differences:
- - Deferred by default.
- - Async works on inline scripts.
- - To load external scripts from another origin (domain/protocol/port), CORS headers are needed.
- - Duplicate external scripts are ignored.
-2. Modules have their own, local top-level scope and interchange functionality via `import/export`.
-3. Modules always `use strict`.
-4. Module code is executed only once. Exports are created once and shared between importers.
+1. Modul je soubor. Aby fungoval `import/export`, prohlížeče potřebují `<script type="module">`. Moduly mají několik odlišností:
+ - Standardně jsou deferované.
+ - Ve vložených skriptech funguje async.
+ - K načtení externích skriptů z jiného zdroje (domény/protokolu/portu) jsou nezbytné hlavičky CORS.
+ - Duplicitní externí skripty jsou ignorovány.
+2. Moduly mají svůj vlastní, lokální rozsah platnosti na nejvyšší úrovni a vyměňují si funkcionalitu pomocí `import/export`.
+3. Moduly vždy mají `use strict`.
+4. Kód modulu se spustí pouze jednou. Exporty se vytvoří jednou a mezi importéry jsou sdíleny.
-When we use modules, each module implements the functionality and exports it. Then we use `import` to directly import it where it's needed. The browser loads and evaluates the scripts automatically.
+Když používáme moduly, každý modul implementuje funkcionalitu a exportuje ji. Pak použijeme `import` k jejímu přímému importu tam, kde je zapotřebí. Prohlížeč tyto skripty automaticky načte a vyhodnotí.
-In production, people often use bundlers such as [Webpack](https://webpack.js.org) to bundle modules together for performance and other reasons.
+Při produkci se často používají bundlery, např. [Webpack](https://webpack.js.org), ke spojení modulů dohromady kvůli zlepšení výkonnosti i z jiných důvodů.
-In the next chapter we'll see more examples of modules, and how things can be exported/imported.
+V příští kapitole uvidíme další příklady modulů a toho, jak lze různé věci exportovat nebo importovat.
diff --git a/1-js/13-modules/01-modules-intro/say.view/index.html b/1-js/13-modules/01-modules-intro/say.view/index.html
index 9a0429cf5..7f4151b28 100644
--- a/1-js/13-modules/01-modules-intro/say.view/index.html
+++ b/1-js/13-modules/01-modules-intro/say.view/index.html
@@ -1,6 +1,6 @@
<!doctype html>
<script type="module">
- import {sayHi} from './say.js';
+ import {řekniAhoj} from './say.js';
- document.body.innerHTML = sayHi('John');
+ document.body.innerHTML = řekniAhoj('Jan');
</script>
diff --git a/1-js/13-modules/01-modules-intro/say.view/say.js b/1-js/13-modules/01-modules-intro/say.view/say.js
index 198a3be6d..b80003776 100644
--- a/1-js/13-modules/01-modules-intro/say.view/say.js
+++ b/1-js/13-modules/01-modules-intro/say.view/say.js
@@ -1,3 +1,3 @@
-export function sayHi(user) {
- return `Hello, ${user}!`;
+export function řekniAhoj(uživatel) {
+ return `Ahoj, ${uživatel}!`;
}
diff --git a/1-js/13-modules/01-modules-intro/scopes-working.view/hello.js b/1-js/13-modules/01-modules-intro/scopes-working.view/hello.js
index 6c087ea81..d8ca02d1d 100644
--- a/1-js/13-modules/01-modules-intro/scopes-working.view/hello.js
+++ b/1-js/13-modules/01-modules-intro/scopes-working.view/hello.js
@@ -1,3 +1,3 @@
-import {user} from './user.js';
+import {uživatel} from './user.js';
-document.body.innerHTML = user; // John
+document.body.innerHTML = uživatel; // Jan
diff --git a/1-js/13-modules/01-modules-intro/scopes-working.view/user.js b/1-js/13-modules/01-modules-intro/scopes-working.view/user.js
index d289329c6..ef37f5ca3 100644
--- a/1-js/13-modules/01-modules-intro/scopes-working.view/user.js
+++ b/1-js/13-modules/01-modules-intro/scopes-working.view/user.js
@@ -1 +1 @@
-export let user = "John";
+export let uživatel = "Jan";
diff --git a/1-js/13-modules/01-modules-intro/scopes.view/hello.js b/1-js/13-modules/01-modules-intro/scopes.view/hello.js
index 714aafa1f..feee28491 100644
--- a/1-js/13-modules/01-modules-intro/scopes.view/hello.js
+++ b/1-js/13-modules/01-modules-intro/scopes.view/hello.js
@@ -1 +1 @@
-alert(user); // no such variable (each module has independent variables)
+alert(uživatel); // taková proměnná neexistuje (každý modul má nezávislé proměnné)
diff --git a/1-js/13-modules/01-modules-intro/scopes.view/user.js b/1-js/13-modules/01-modules-intro/scopes.view/user.js
index 12ec850d9..406901cc0 100644
--- a/1-js/13-modules/01-modules-intro/scopes.view/user.js
+++ b/1-js/13-modules/01-modules-intro/scopes.view/user.js
@@ -1 +1 @@
-let user = "John";
+let uživatel = "Jan";
From 6680dc7762c06d45248ba1c71f6aefc525fbb21d Mon Sep 17 00:00:00 2001
From: Otmar Onderek <onderek@volny.cz>
Date: Wed, 19 Mar 2025 21:08:24 +0100
Subject: [PATCH 2/2] 1.13.1
---
1-js/13-modules/01-modules-intro/article.md | 20 ++++++++++----------
1 file changed, 10 insertions(+), 10 deletions(-)
diff --git a/1-js/13-modules/01-modules-intro/article.md b/1-js/13-modules/01-modules-intro/article.md
index b5f1af26e..1685de8c5 100644
--- a/1-js/13-modules/01-modules-intro/article.md
+++ b/1-js/13-modules/01-modules-intro/article.md
@@ -156,33 +156,33 @@ Nyní uvažujme hlubší příklad.
```js
// 📁 admin.js
-export let admin = {
+export let správce = {
jméno: "Jan"
};
```
-Je-li tento modul importován z více souborů, je vyhodnocen pouze poprvé, vytvoří se objekt `admin` a ten je pak předán všem dalším importérům.
+Je-li tento modul importován z více souborů, je vyhodnocen pouze poprvé, vytvoří se objekt `správce` a ten je pak předán všem dalším importérům.
-Všichni importéři dostanou přesně jeden a tentýž objekt `admin`:
+Všichni importéři dostanou přesně jeden a tentýž objekt `správce`:
```js
// 📁 1.js
-import {admin} from './admin.js';
-admin.jméno = "Petr";
+import {správce} from './admin.js';
+správce.jméno = "Petr";
// 📁 2.js
-import {admin} from './admin.js';
-alert(admin.jméno); // Petr
+import {správce} from './admin.js';
+alert(správce.jméno); // Petr
*!*
-// Jak 1.js, tak 2.js se odkazují na tentýž objekt admin
+// Jak 1.js, tak 2.js se odkazují na tentýž objekt správce
// Změny učiněné v 1.js jsou viditelné ve 2.js
*/!*
```
-Jak vidíte, když `1.js` v importovaném objektu `admin` změní vlastnost `jméno`, pak `2.js` uvidí nové `admin.jméno`.
+Jak vidíte, když `1.js` v importovaném objektu `správce` změní vlastnost `jméno`, pak `2.js` uvidí nové `správce.jméno`.
-To je právě proto, že modul je spuštěn pouze jednou. Vygenerují se exporty a ty jsou pak sdíleny mezi importéry, takže jestliže něco změní objekt `admin`, ostatní importéři to uvidí.
+To je právě proto, že modul je spuštěn pouze jednou. Vygenerují se exporty a ty jsou pak sdíleny mezi importéry, takže jestliže něco změní objekt `správce`, ostatní importéři to uvidí.
**Takové chování je ve skutečnosti velmi užitečné, protože nám umožňuje *konfigurovat* moduly.**