From 1892a646e88ae3410ef5d4258723026becdb48f9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Martin=20Podlouck=C3=BD?= Date: Fri, 15 Sep 2023 21:38:00 +0200 Subject: [PATCH] =?UTF-8?q?Aktualizace=20pr=C3=A1ce=20s=20=C5=99et=C4=9Bzc?= =?UTF-8?q?i?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js1/retezce-podminky/cvlekce/dorucovani.md | 3 +- js1/retezce-podminky/cvlekce/emaily.md | 16 +++--- .../cvlekce/vlastnosti-metody.md | 32 +++++------ js1/retezce-podminky/interpolace.md | 30 +++++------ js1/retezce-podminky/retezce-metody.md | 53 +++++++------------ js1/retezce-podminky/vlastnosti-metody.md | 33 +++++------- 6 files changed, 69 insertions(+), 98 deletions(-) diff --git a/js1/retezce-podminky/cvlekce/dorucovani.md b/js1/retezce-podminky/cvlekce/dorucovani.md index 994fab9b..a02529a7 100644 --- a/js1/retezce-podminky/cvlekce/dorucovani.md +++ b/js1/retezce-podminky/cvlekce/dorucovani.md @@ -1,12 +1,13 @@ --- title: Doručování demand: 2 +lead: Vytvořte jednoduchý objednávkový systém. --- Vytvořte webovou stránku, kde uživatel zadá svoji adresu například pro účely doručení objednaného zboží. Požaduje **ulici**, **číslo domu**, **město** a **PSČ**. 1. Uložte všechny údaje do vhodně pojmenovaných proměnných. -1. Ze zadanách údajů sestavte pomocí **interpolace řetězeců** obsahující HTML ve formátu jako níže +1. Ze zadanách údajů sestavte pomocí interpolace řetězeců obsahující HTML ve formátu jako níže ```html

Pod Stájemi 67

diff --git a/js1/retezce-podminky/cvlekce/emaily.md b/js1/retezce-podminky/cvlekce/emaily.md index 8a96d93c..c085da09 100644 --- a/js1/retezce-podminky/cvlekce/emaily.md +++ b/js1/retezce-podminky/cvlekce/emaily.md @@ -1,6 +1,8 @@ --- title: E-maily demand: 2 +lead: Vyzkoušejte si práci s řetězci obsahující e-mailové adresy. +solutionAccess: lock --- Vytvořte stránku, která bude pracovat s e-mailovými adresami ve formátu @@ -17,19 +19,19 @@ Tedy například: Postupujte dle následujících kroků. -1. Vytvořte jednoduchou **webovou stránku** s JavaScriptovým programem. -1. Nechte uživatele **zadat jeho e-mail** a uložte si jej do proměnné `email`. -1. Pomocí metody `indexOf` najděte v tomto e-mailu **pozici znaku zavináč**. Tuto pozici si uložte do proměnné `atIndex`. -1. Pomocí metody `slice` získejte z e-mailu první část představující **uživatelské jméno** uživatele. -1. Dále z e-mailu získehte **název domény** tedy například `gmail.com`. -1. Ze získaných informací vytvořte **objekt**, který bude vypadat například takto: +1. Vytvořte jednoduchou webovou stránku s JavaScriptovým programem. +1. Nechte uživatele zadat jeho e-mail a uložte si jej do proměnné `email`. +1. Pomocí metody `indexOf` najděte v tomto e-mailu pozici znaku zavináč. Tuto pozici si uložte do proměnné `atIndex`. +1. Pomocí metody `slice` získejte z e-mailu první část představující uživatelské jméno uživatele. +1. Dále z e-mailu získejte název domény tedy například `gmail.com`. +1. Ze získaných informací vytvořte objekt, který bude vypadat například takto: ```js const parsedEmail = { userName: 'slavomir.ponuchalek', domain: 'yahoo.com', }; ``` -1. Pro kontrolu **vypište tento objekt do stránky**. Každou hodnotu vypište jako odstavec. +1. Pro kontrolu vypište tento objekt do stránky. Každou hodnotu vypište jako odstavec. :::solution diff --git a/js1/retezce-podminky/cvlekce/vlastnosti-metody.md b/js1/retezce-podminky/cvlekce/vlastnosti-metody.md index 7493a9e3..6b611efc 100644 --- a/js1/retezce-podminky/cvlekce/vlastnosti-metody.md +++ b/js1/retezce-podminky/cvlekce/vlastnosti-metody.md @@ -1,11 +1,13 @@ --- title: Vlastnosti a metody demand: 1 +lead: Vyzkoušejte si vlastnosti a metody řetězců. +solutionAccess: lock --- -V **konzoli prohlížeče** si založte proměnnou `title` a uložte do ní **název svého oblíbeného filmu** (např. _Pán prstenů_). Proveďte následující úkoly. +V JavaScriptovém programu si založte proměnnou `title` a uložte do ní **název svého oblíbeného filmu** (např. _Pán prstenů_). Proveďte následující úkoly. -1. Vypište do konzole **počet znaků** názvu. +1. Vypište do stránky **počet znaků** názvu. 1. Vypište název filmu převedený na **velká písmena**. 1. Vypište z názvu **prvních pět** písmen. 1. Vypište z názvu **posledních pět** písmen. @@ -13,23 +15,13 @@ V **konzoli prohlížeče** si založte proměnnou `title` a uložte do ní **n :::solution ```js -const title = "Lord of the Rings" -​ -// Vypište do konzole počet znaků názvu. -​ -title.length -​ -// Převeďte název filmu na velká písmena. -​ -title.toUpperCase() -​ -// Vypište z názvu prvních pět písmen. -​ -title.slice(0, 5) -​ -// Vypište z názvu posledních pět písmen. -​ -title.slice(title.length - 5, title.length) +const title = "Lord of the Rings";​ +document.innerHTML += title.length; +​document.innerHTML += `
`;​ +​document.innerHTML += title.toUpperCase();​ +​document.innerHTML += `
`;​ +​document.innerHTML += title.slice(0, 5); +​document.innerHTML += `
`;​ +​document.innerHTML += title.slice(title.length - 5, title.length)Ł ``` - ::: diff --git a/js1/retezce-podminky/interpolace.md b/js1/retezce-podminky/interpolace.md index 5bfa2964..4a37dfe5 100644 --- a/js1/retezce-podminky/interpolace.md +++ b/js1/retezce-podminky/interpolace.md @@ -2,44 +2,42 @@ Když chceme v JavaScriptu vytvořit nějaký kus textu, například nějakou zprávu pro uživatele, často potřebujeme do tohoto textu vložit obsah několika různých proměnných. -``` +```js const order = { id: 37214, product: 'pěnová matrace', delivery: '21.8.2021', }; -const { id, product, delivery } = order; - document.body.innerHTML = ( - '

Objednávka: ' + id + '

' + - '

Zboží ' + product + ' bude doručeno ' + delivery + '.

' + '

Objednávka: ' + order.id + '

' + + '

Zboží ' + order.product + ' bude doručeno ' + order.delivery + '.

' ); ``` -Abychom se ze všeho toho sčítání a uvozovek nezbláznili, moderní JavaScript nabízí nový zápis řetězců, kterému se odborně říká :term{cs="interpolace řetězců" en="string interpolation"}. V tomto zápisu se místo obyčejných nebo dvojitých uvozovek používá takzvaný zpětný apostrof `. Pomocí tohoto zápisu můžeme obsah proměnných vložit přímo do řetězce pomocí znaku `$` a složených závorek. +Abychom se ze všeho toho sčítání a uvozovek nezbláznili, moderní JavaScript nabízí zápis řetězců, kterému se odborně říká :term{cs="interpolace řetězců" en="string interpolation"}. V tomto zápisu se místo obyčejných nebo dvojitých uvozovek používá takzvaný zpětný apostrof `. Pomocí tohoto zápisu můžeme obsah proměnných vložit přímo do řetězce pomocí znaku `$` a složených závorek. ```js document.body.innerHTML = - `

Objednávka: ${id}

` + - `

Zboží ${product} bude doručeno ${delivery}.

`; + `

Objednávka: ${order.id}

` + + `

Zboží ${order.product} bude doručeno ${order.delivery}.

`; ``` Uvnitř složených závorek otevíráme jakési JavaScriptové okno, do kterého můžeme vepsat nejen proměnnou, ale zcela libovolný výraz, jehož výsledek bude automaticky zkonvertován na řetězec. ```js document.body.innerHTML = - `

Objednávka: ${String(id).padStart(8, '0')}

` + - `

Zboží ${product} bude doručeno ${delivery}.

`; + `

Objednávka: ${String(order.id).padStart(8, '0')}

` + + `

Zboží ${order.product} bude doručeno ${order.delivery}.

`; ``` Díky interpolaci řetězců se náš kód stává mnohem čitelnějším a budeme ji tedy používat všude, kde to půjde. ### Víceřádkové řetězce -Když v JavaScriptu vytváříme HTML, které chceme vložit do stránky, často potřebujeme vygenerovat dlouhý řetězec, který se nám nevejde na jeden řádek. V JavaScriptu ovšem nelze zapsat běžný řetězec na více řádků. Následující kód by bohužel nefungoval. +Když v JavaScriptu vytváříme kus HTML, která chceme vložit do stránky, často potřebujeme vygenerovat dlouhý řetězec, který se nám ovšem nevejde na jeden řádek. V JavaScriptu nelze zapsat běžný řetězec na více řádků. Následující kód by bohužel nefungoval. -```js +``` const content = '

Název stránky

@@ -81,17 +79,15 @@ const order = { delivery: '21.8.2021', }; -const { id, product, delivery } = order; - const content = `
-

Objednávka: ${String(id).padStart(8, '0')}

+

Objednávka: ${String(order.id).padStart(8, '0')}

-

Zboží ${product} bude doručeno ${delivery}.

+

Zboží ${order.product} bude doručeno ${order.delivery}.

`; -document.body.innerHTML = content; +document.body.innerHTML += content; ``` diff --git a/js1/retezce-podminky/retezce-metody.md b/js1/retezce-podminky/retezce-metody.md index b54a62b6..4beda851 100644 --- a/js1/retezce-podminky/retezce-metody.md +++ b/js1/retezce-podminky/retezce-metody.md @@ -5,63 +5,50 @@ Na řetězcích máme v JavaScriptu spoustu metod, které nám umožňují prov `toUpperCase()` : Převede všechna písmena na velká. -```jscon -> 'popokatepetl'.toUpperCase() -'POPOKATEPETL' +```js +'popokatepetl'.toUpperCase() // 'POPOKATEPETL' ``` `toLowerCase()` : Převede všechna písmena na malá. -```jscon -> 'Popokatepetl'.toLowerCase() -'popokatepetl' +```js +'Popokatepetl'.toLowerCase() // 'popokatepetl' ``` `trim()` : Odstraní bílé znaky ze začátku a konce. -```jscon -> ' popokatepetl '.trim() -'popokatepetl' +```js +' popokatepetl '.trim() // 'popokatepetl' ``` `slice(start, end)` : Vyřízne z řetězce kus podle zadaných pozic začátku a konce. U této metody poprvé narážíme na jednu programátorskou výstřednost, kterou budeme potkávat pořád znovu a znovu: **programátoři vždy počítají od nuly**, nikoliv od jedničky jako běžní lidé. V řetězci `'martin'` je tedy písmenko `'m'` na pozici nula, písmenko `'a'` na pozici 1 a tak dále. Metoda `slice` navíc bere dolní mez **včetně**, kdežto horní mez se bere **vyjma**. -```jscon -> 'popokatepetl'.slice(4, 7) -'kat' -> 'popokatepetl'.slice(0, 3) -'pop' +```js +'popokatepetl'.slice(4, 7) // 'kat' +'popokatepetl'.slice(0, 3) // 'pop' ``` `indexOf(value)` : Vyhledá řetězec zadaný v parametru `value` uvnitř řetězce, na kterém tuto metodu voláme. Vrací pozici prvního výskytu nebo -1 pokud se obsah `value` v řetězci nenachází. -```jscon -> 'popokatepetl'.indexOf('kat') -4 -> 'popokatepetl'.indexOf('po') -0 -> 'popokatepetl'.indexOf('t') -6 -> 'popokatepetl'.indexOf('katka') --1 +```js +'popokatepetl'.indexOf('kat') // 4 +'popokatepetl'.indexOf('po') // 0 +'popokatepetl'.indexOf('t') // 6 +'popokatepetl'.indexOf('katka') // -1 ``` `padStart(targetLength, padString)` : Prodlouží řetězec na zadanou délku tak, že na začátek přidá opakování řetězce `padString`. Hodí se na zarovnávání nebo na formátování čísel. -```jscon -> '12'.padStart(4, '0') -'0012' -> '12'.padStart(4, ' ') -' 12' -> '12'.padStart(3, ' ') -' 12' -> '12'.padStart(2, ' ') -'12' +```js +'12'.padStart(4, '0') // '0012' +'12'.padStart(4, ' ') // ' 12' +'12'.padStart(3, ' ') // ' 12' +'12'.padStart(2, ' ') // '12' ``` -Možná vám nyní vrtá hlavou, jestli funkce `Math.round` nebo `console.log` nejsou náhodou metody, když používají tečkovou notaci. Je to skutečně tak. `Math` i `console` jsou speciální JavaScriptové objekty, která sdružují metody pro matematické výpočty nebo pro práci s konzolí. +Možná vám nyní vrtá hlavou, jestli funkce `Math.round` nebo `Math.floor` nejsou náhodou metody, když používají tečkovou notaci. Je to skutečně tak. `Math` je přepřipravený JavaScriptový objekt, který sdružuje metody pro matematické výpočty. I ostatní předpřípravené objekty, jako `window` nebo `document` mají své užitečné metody. Některé z nich potkáme hned v následující lekci. diff --git a/js1/retezce-podminky/vlastnosti-metody.md b/js1/retezce-podminky/vlastnosti-metody.md index abe0e398..f4f5710d 100644 --- a/js1/retezce-podminky/vlastnosti-metody.md +++ b/js1/retezce-podminky/vlastnosti-metody.md @@ -6,37 +6,30 @@ Z předchozí lekce už víme jak vytvářet jednoduché objekty a jak do nich p U řetězců je situace v celku jednoduchá, protože mají pouze jednu vlastnost. Jmenuje se `length` a udává počet znaků v řetězci. -```jscon -> 'martin'.length -6 -> 'm'.length -1 -> ''.length -0 +```js +'martin'.length // 6 +'m'.length // 1 +''.length // 0 ``` -V objektech však kromě vlastností najdeme i takzvané :term{cs="metody" en="methods"}. Metoda je funkce schovaná uvnitř objektu a je tak s ním pevně spjata. V praxi se totiž často stává, že některé funkce se hodí na práci pouze s jedním typem hodnoty. Například bychom mohli mít funkci `toUpperCase`, která by převedla všechna písmena v řetězci na velká. Kdyby taková funkce existovala, mohli bychom ji -volat třeba takto +V objektech však kromě vlastností najdeme i takzvané :term{cs="metody" en="methods"}. Metoda je funkce schovaná uvnitř objektu a je tak s ním pevně spjata. V praxi se totiž často stává, že některé funkce se hodí na práci pouze s jedním typem hodnoty. Například bychom mohli mít funkci `toUpperCase`, která by převedla všechna písmena v řetězci na velká. Kdyby taková funkce existovala, mohli bychom ji volat třeba takto -```jscon -> toUpperCase('martin') -'MARTIN' +```js +toUpperCase('martin') // 'MARTIN' ``` Je pochopitelné, že tato funkce funguje pouze pro řetězce. Pro ostatní hodnoty nedává smysl. Těžko si představit, co by taková funkce měla vrátit například v takovémto případě. -```jscon -> toUpperCase(3.14) +```js +toUpperCase(3.14) // ? ``` -Funkce, které pracují pouze na jednom typu objektu, můžeme svázat přímo s tímto objektem. Můžeme tedy říct, že funkce `toUpperCase` patří pouze řetězcům. Máme-li funkci, která patří pouze typu řetězec, voláme ji pomocí už známé tečkové notace. +Funkce, které pracují pouze na jednom typu objektu, můžeme svázat přímo s tímto objektem. Můžeme tak říct, že funkce `toUpperCase` patří pouze řetězcům. Máme-li funkci, která patří pouze typu řetězec, voláme ji pomocí už známé tečkové notace. -```jscon -> 'martin'.toUpperCase() -'MARTIN' +```js +document.body.innerHTML += 'martin'.toUpperCase(); ``` -Funkce `toUpperCase` je prvním příkladem jednoduché metody. Výhoda je, že tato metoda v JavaScriptu skutečně existuje, takže výše uvedený kód bude fungovat. Podobně existuje například metoda -`toLowerCase`. Vyzkoušejte si ji! +Funkce `toUpperCase` je prvním příkladem jednoduché metody. Výhoda je, že tato metoda v JavaScriptu skutečně existuje, takže výše uvedený kód bude fungovat. Podobně existuje například metoda `toLowerCase`. Vyzkoušejte si ji!