From 46b5a313079339b68b3d64742f3d90ea9c042391 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Martin=20Podlouck=C3=BD?= Date: Wed, 13 Mar 2024 11:02:43 +0100 Subject: [PATCH] =?UTF-8?q?Vyd=C4=9Blen=C3=AD=20samostatn=C3=A9ho=20kurzu?= =?UTF-8?q?=20JavaScript=202?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- daweb/js1/entry.yml | 2 +- daweb/js1/pole-data/cteni-na-doma.md | 4 +- daweb/js1/pole-data/cv-foreach-map.md | 1 - daweb/js1/pole-data/cv-pole.md | 3 +- .../sachovnice/assets/figury.png | Bin .../sachovnice/assets/sachovnice.png | Bin .../sachovnice/assets/vysledek.png | Bin .../sachovnice/dev/cela-sachovnice.png | Bin .../sachovnice/dev/figury.png | Bin .../sachovnice/dev/figury.svg | 0 .../sachovnice/exercise.md | 0 daweb/js1/pole-data/cvlekce/indexy.md | 41 ++++++++++++++++++ daweb/js1/pole-data/entry.yml | 4 +- daweb/js1/pole-data/nodelist-a-foreach.md | 2 - daweb/js1/pole-data/pole-a-foreach.md | 2 +- daweb/js1/pole-data/pole.md | 24 ++-------- daweb/js1/pole-data/shrnuti.md | 4 +- js2/assets/javascript.svg | 11 +++++ js2/entry.yml | 16 +++++++ js2/organizace-kodu/entry.yml | 5 --- js2/organizace-kodu/import-export.md | 3 -- 21 files changed, 81 insertions(+), 41 deletions(-) rename daweb/js1/pole-data/{cvlekce => cvarchiv}/sachovnice/assets/figury.png (100%) rename daweb/js1/pole-data/{cvlekce => cvarchiv}/sachovnice/assets/sachovnice.png (100%) rename daweb/js1/pole-data/{cvlekce => cvarchiv}/sachovnice/assets/vysledek.png (100%) rename daweb/js1/pole-data/{cvlekce => cvarchiv}/sachovnice/dev/cela-sachovnice.png (100%) rename daweb/js1/pole-data/{cvlekce => cvarchiv}/sachovnice/dev/figury.png (100%) rename daweb/js1/pole-data/{cvlekce => cvarchiv}/sachovnice/dev/figury.svg (100%) rename daweb/js1/pole-data/{cvlekce => cvarchiv}/sachovnice/exercise.md (100%) create mode 100644 daweb/js1/pole-data/cvlekce/indexy.md create mode 100644 js2/assets/javascript.svg create mode 100644 js2/entry.yml delete mode 100644 js2/organizace-kodu/entry.yml delete mode 100644 js2/organizace-kodu/import-export.md diff --git a/daweb/js1/entry.yml b/daweb/js1/entry.yml index 031cb129..9bccddef 100644 --- a/daweb/js1/entry.yml +++ b/daweb/js1/entry.yml @@ -9,6 +9,6 @@ lessons: - funkce-obory - funkce-arg-udalosti - udalosti-formulare - - stranky-chyby - pole-data + - stranky-chyby - filmbox diff --git a/daweb/js1/pole-data/cteni-na-doma.md b/daweb/js1/pole-data/cteni-na-doma.md index 3271e57e..815d09b6 100644 --- a/daweb/js1/pole-data/cteni-na-doma.md +++ b/daweb/js1/pole-data/cteni-na-doma.md @@ -1,8 +1,8 @@ ## Povinné čtení na doma -Pro průchod polem existují ještě dva mnohem obecnější postupy pomocí klíčových slov `while` a `for`, které však v praxi s Reactem nejsou tolik využívané a my se jim tedy v tomto kurzu věnujeme jen okrajově. +Pro průchod polem existují ještě dva mnohem obecnější postupy pomocí klíčových slov `while` a `for`, které však v tomto kurzu nebudeme tolik potřebovat a proto je zmíníme pouze okrajove. Pozor však na to, že v programátorské praxi se s nimi setkáte velmi často. -Na rozdíl od `map` a `forEach` nám umožňují provádět smyčky i bez podkladového pole. Využívají se především v případě, kdy potřebujeme provádět nějakou operaci několikrát, ale nevíme předem, kolikrát. +Na rozdíl od `map` a `forEach` nám `while` a `for` umožňují provádět cykly i bez podkladového pole. Využívají se především v případě, kdy potřebujeme provádět nějakou operaci několikrát, ale nevíme předem, kolikrát. ### Cyklus `while` diff --git a/daweb/js1/pole-data/cv-foreach-map.md b/daweb/js1/pole-data/cv-foreach-map.md index 3035c892..9d0f76a7 100644 --- a/daweb/js1/pole-data/cv-foreach-map.md +++ b/daweb/js1/pole-data/cv-foreach-map.md @@ -1,5 +1,4 @@ ## Cvičení: Metody `forEach` a `map` -::exc[cvlekce/pocitani-ovecek] ::exc[cvlekce/map-jednohubky] ::exc[cvlekce/nezaplacene-objednavky] diff --git a/daweb/js1/pole-data/cv-pole.md b/daweb/js1/pole-data/cv-pole.md index 55aad46a..82234189 100644 --- a/daweb/js1/pole-data/cv-pole.md +++ b/daweb/js1/pole-data/cv-pole.md @@ -1,4 +1,5 @@ ## Cvičení: Práce s poli ::exc[cvlekce/pole-v-divadle] -::exc[cvlekce/sachovnice] +::exc[cvlekce/indexy] +::exc[cvlekce/pocitani-ovecek] diff --git a/daweb/js1/pole-data/cvlekce/sachovnice/assets/figury.png b/daweb/js1/pole-data/cvarchiv/sachovnice/assets/figury.png similarity index 100% rename from daweb/js1/pole-data/cvlekce/sachovnice/assets/figury.png rename to daweb/js1/pole-data/cvarchiv/sachovnice/assets/figury.png diff --git a/daweb/js1/pole-data/cvlekce/sachovnice/assets/sachovnice.png b/daweb/js1/pole-data/cvarchiv/sachovnice/assets/sachovnice.png similarity index 100% rename from daweb/js1/pole-data/cvlekce/sachovnice/assets/sachovnice.png rename to daweb/js1/pole-data/cvarchiv/sachovnice/assets/sachovnice.png diff --git a/daweb/js1/pole-data/cvlekce/sachovnice/assets/vysledek.png b/daweb/js1/pole-data/cvarchiv/sachovnice/assets/vysledek.png similarity index 100% rename from daweb/js1/pole-data/cvlekce/sachovnice/assets/vysledek.png rename to daweb/js1/pole-data/cvarchiv/sachovnice/assets/vysledek.png diff --git a/daweb/js1/pole-data/cvlekce/sachovnice/dev/cela-sachovnice.png b/daweb/js1/pole-data/cvarchiv/sachovnice/dev/cela-sachovnice.png similarity index 100% rename from daweb/js1/pole-data/cvlekce/sachovnice/dev/cela-sachovnice.png rename to daweb/js1/pole-data/cvarchiv/sachovnice/dev/cela-sachovnice.png diff --git a/daweb/js1/pole-data/cvlekce/sachovnice/dev/figury.png b/daweb/js1/pole-data/cvarchiv/sachovnice/dev/figury.png similarity index 100% rename from daweb/js1/pole-data/cvlekce/sachovnice/dev/figury.png rename to daweb/js1/pole-data/cvarchiv/sachovnice/dev/figury.png diff --git a/daweb/js1/pole-data/cvlekce/sachovnice/dev/figury.svg b/daweb/js1/pole-data/cvarchiv/sachovnice/dev/figury.svg similarity index 100% rename from daweb/js1/pole-data/cvlekce/sachovnice/dev/figury.svg rename to daweb/js1/pole-data/cvarchiv/sachovnice/dev/figury.svg diff --git a/daweb/js1/pole-data/cvlekce/sachovnice/exercise.md b/daweb/js1/pole-data/cvarchiv/sachovnice/exercise.md similarity index 100% rename from daweb/js1/pole-data/cvlekce/sachovnice/exercise.md rename to daweb/js1/pole-data/cvarchiv/sachovnice/exercise.md diff --git a/daweb/js1/pole-data/cvlekce/indexy.md b/daweb/js1/pole-data/cvlekce/indexy.md new file mode 100644 index 00000000..a1bba6ec --- /dev/null +++ b/daweb/js1/pole-data/cvlekce/indexy.md @@ -0,0 +1,41 @@ +--- +title: Práce s indexy +demand: 3 +lead: Vyzkoušejte si jak přistupovat k prvkům v poli pomocí indexů. +solutionAccess: protected +--- + +Cvičení provádějte ve vašem JavaScript souboru. + +1. Napište funkci `first`, která jako svůj parametr přijme pole a vrátí první prvek tohoto pole. Pokud pole bude prázdné, funkce vrátí `undefined`. Funkci otestujte s několika různými poli. Například: + + ```js + first([3, 2, 1]); // ⟶ 3 + first([]); // ⟶ undefined + ``` +1. Napište funkci `last`, která jako svůj parametr přijme pole a vrátí poslední prvek tohoto pole. Pokud pole bude prázdné, funkce vrátí `undefined`. Funkci otestujte s několika různými poli. Například: + + ```js + last([3, 2, 1]); // ⟶ 1 + last([]); // ⟶ undefined + ``` +1. Napište funkci `middle`, která jako svůj parametr přijme pole a vrátí prvek uprostřed tohoto pole. Pokud pole bude prázdné, funkce vrátí `undefined`. Pokud pole bude obsahovat sudý počet prvků, vrátí funkce prvek vlevo od středu. Funkci otestujte s několika různými poli. Například: + + ```js + middle([3, 2, 1]); // ⟶ 2 + middle([3, 2, 1, 0]); // ⟶ 2 + middle([]); // ⟶ undefined + ``` +1. Napište funkci `middleMean`, která jako svůj parametr přijme pole a vrátí prvek uprostřed tohoto pole. Pokud pole bude prázdné, funkce vrátí `undefined`. Pokud pole bude obsahovat sudý počet prvků, vrátí funkce průměr dvou prvků uprostřed. Funkci otestujte s několika různými poli. Například: + + ```js + middleMean([3, 2, 1]); // ⟶ 2 + middleMean([3, 2, 1, 0]); // ⟶ 1.5 + middleMean([]); // ⟶ undefined + ``` +1. Napište funkci `insert`, která jako první parametr přijme pole a jako druhý parametr nějakou hodnotu. Funkce zkontroluje, zda pole již obsahuje tuto hodnotu. Pokud ano, vrátí `false`. Pokud ne, vloží hodnotu na konec pole a vrátí `true`. Funkci otestujte s několika různými poli. Například: + + ```js + insert([3, 2, 1], 4); // ⟶ true + insert([3, 2, 1], 3); // ⟶ false + ``` diff --git a/daweb/js1/pole-data/entry.yml b/daweb/js1/pole-data/entry.yml index d3fcac84..ba3415ce 100644 --- a/daweb/js1/pole-data/entry.yml +++ b/daweb/js1/pole-data/entry.yml @@ -3,12 +3,12 @@ lead: Ukážeme si jako ukládat hodnoty do polí a také jak transformovat a ji access: protected sections: - pole - - cv-pole - pole-a-foreach + - cv-pole - nodelist-a-foreach - map - cv-foreach-map - # - cteni-na-doma - shrnuti - ulozky-na-doma + - cteni-na-doma # - volitelne-ulozky diff --git a/daweb/js1/pole-data/nodelist-a-foreach.md b/daweb/js1/pole-data/nodelist-a-foreach.md index f6cd23df..bb86de12 100644 --- a/daweb/js1/pole-data/nodelist-a-foreach.md +++ b/daweb/js1/pole-data/nodelist-a-foreach.md @@ -1,7 +1,5 @@ ## `querySelectorAll` a `forEach` -### document.querySelectorAll - Díky tomu, že už rozumíme polím a metodě `forEach`, si můžeme představit funkci `document.querySelectorAll`. Ta funguje podobně jako už známá funkce `document.querySelector`. Vrátí však **všechny** elementy, které najde pomocí zadaného selektoru. Výsledek obdržíme jako pole DOM elementů. To pak můžeme zpracovat pomocí metody `forEach`. V lekci o událostech jsme si slíbili, že dokážeme zjednodušít kód naší aplikace se smajlíky. Připomeňme si HTML kód našich tlačítek. diff --git a/daweb/js1/pole-data/pole-a-foreach.md b/daweb/js1/pole-data/pole-a-foreach.md index 09065626..f669720a 100644 --- a/daweb/js1/pole-data/pole-a-foreach.md +++ b/daweb/js1/pole-data/pole-a-foreach.md @@ -1,6 +1,6 @@ ## Pole a `forEach` -Metoda `forEach` je základní nástroj pro práci s poli v JavaScriptu. Pole jsou datové struktury, které nám umožňují ukládat více hodnot do jedné proměnné. Metoda `forEach` pak umožňuje procházet přes všechny prvky v poli a provádět na nich nějakou akci. +Metoda `forEach` je základní nástroj pro procházení poli prvek po prvku. Díky této metodě můžeme snadno provést nějakou akci pro každý prvek v poli. Jednoduché použití metody `forEach` pro výpis všech prvků v poli do stránky může vypadat takto: diff --git a/daweb/js1/pole-data/pole.md b/daweb/js1/pole-data/pole.md index d340ff13..2f733594 100644 --- a/daweb/js1/pole-data/pole.md +++ b/daweb/js1/pole-data/pole.md @@ -1,7 +1,7 @@ -Do této chvíle jsme uměli do nějaké proměnné uložit pouze jednu hodnotu, například řetězec, objekt, DOM element nebo funkci. Počítače ale často potřebují pracovat s mnohem větším objemem dat, než je několik čísel nebo řetězců. V této části si ukážeme jak ukládat větší množství hodnot do jedné proměnné. - ## Pole +Do této chvíle jsme uměli do nějaké proměnné uložit pouze jednu hodnotu, například řetězec, objekt, DOM element nebo funkci. Počítače ale často potřebují pracovat s mnohem větším objemem dat, než je několik čísel nebo řetězců. V této části si ukážeme jak ukládat větší množství hodnot do jedné proměnné. + :term{cs="Pole" en="Array"} nám umožňují do jedné proměnné uložit více hodnot. Tvoříme je pomocí hranatých závorek. Takto například do jedné proměnné uložíme různé druhy ovoce. @@ -28,7 +28,7 @@ const students = [ ]; ``` -Tato datová struktura v podstatě reprezentuje tabulku s řádky a sloupečky. V prvním sloupečku máme jména studentů, ve druhém jejich věk. Každý řádek tabulky je jeden objekt. +Tato datová struktura v podstatě reprezentuje tabulku s řádky a sloupečky. V prvním sloupečku máme jména studentů, ve druhém jejich věk. Každý řádek tabulky je pak jeden JavaScriptový objekt. | Name | Age | Mark | | ----- | --- | ---- | @@ -42,7 +42,7 @@ Pozor na to, že podobně jako existuje prázný řetězec `''`, existuje také ### Indexy -Hodnoty uvnitř polí sídlí na takzvaných indexech. Na jednotlivé indexy přistupujeme také pomocí hranatých závorek. Jak už víme z lekce o řetězcích, **programátoři všechno počítají od nuly**. +Hodnoty uvnitř polí sídlí na takzvaných _indexech_. Na jednotlivé indexy přistupujeme také pomocí hranatých závorek. Jak už víme z lekce o řetězcích, **programátoři všechno počítají od nuly**. ```js const fruits = ['jablko', 'hruška', 'banán', 'jahoda', 'malina']; @@ -128,19 +128,3 @@ const messages = [ { from: 'John', text: 'I am fine too.' }, ]; ``` - -Pomocí pole však také polí můžeme reprezentovat herní plány v různých počítačovách hrách. Takto například mohou vypadat rozehrané piškvorky 3x3. - -```js -const tictactoe = [ - ['o', ' ', ' '], - [' ', 'x', ' '], - [' ', 'o', 'x'], -]; -``` - -Vidíme, že na tahu je zrovna křížek. Můžeme tak snadno provést nějaký chytrý tah. - -```js -tictactoe[0][2] = 'x'; -``` diff --git a/daweb/js1/pole-data/shrnuti.md b/daweb/js1/pole-data/shrnuti.md index 803dbf5e..3c4572d2 100644 --- a/daweb/js1/pole-data/shrnuti.md +++ b/daweb/js1/pole-data/shrnuti.md @@ -4,6 +4,4 @@ Po této lekci byste měli vědět a znát - co jsou to pole a jak je vytvářet, měnit a hledat v nich, - metodu `forEach` na poli a na seznamu elementů (`NodeList`), -- metodu `map` na poli, -- jak z `NodeList` udělat pole, - +- jak používat metodu `map` na poli. diff --git a/js2/assets/javascript.svg b/js2/assets/javascript.svg new file mode 100644 index 00000000..d2dafcf8 --- /dev/null +++ b/js2/assets/javascript.svg @@ -0,0 +1,11 @@ + + + + diff --git a/js2/entry.yml b/js2/entry.yml new file mode 100644 index 00000000..a75f0f01 --- /dev/null +++ b/js2/entry.yml @@ -0,0 +1,16 @@ +title: JavaScript 2 +lead: Dlouhodobý kurz JavaScript 2 pro vývoj webových aplikací +image: assets/javascript.svg +lessons: + - ../daweb/js2/opakovani + - ../daweb/zaklady-gitu/spoluprace + - ../daweb/js2/organizace-bundle + - ../daweb/js2/sablony-komponenty + - ../daweb/js2/server-komunikace + - ../daweb/js2/podminene-zobrazeni + - ../daweb/js2/seznamy + - ../daweb/js2/posilani-dat + - ../daweb/js2/api-parametry + - ../daweb/js2/crud + - ../daweb/js2/cafe-lora-1 + - ../daweb/js2/cafe-lora-2 diff --git a/js2/organizace-kodu/entry.yml b/js2/organizace-kodu/entry.yml deleted file mode 100644 index 4f51ac46..00000000 --- a/js2/organizace-kodu/entry.yml +++ /dev/null @@ -1,5 +0,0 @@ -title: Organizace kódu -lead: Pro vývoj větších aplikací budeme potřebovat rozdělit náš kód do více souboru a naučit se import a export -access: 'claim' -sections: - - import-export diff --git a/js2/organizace-kodu/import-export.md b/js2/organizace-kodu/import-export.md deleted file mode 100644 index 264e961b..00000000 --- a/js2/organizace-kodu/import-export.md +++ /dev/null @@ -1,3 +0,0 @@ -## Import/export - -Konec je časům, kdy se nám veškerý kód aplikace vešel do jednoho souboru `index.js`.