Aktualizace práce s řetězci

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
    <address>
      <p>Pod Stájemi 67</p>

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
 

js1/retezce-podminky/cvlekce/vlastnosti-metody.md

@@ -1,35 +1,27 @@
 ---
 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.
 
 :::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 += `<br>`;​
+​document.innerHTML += title.toUpperCase();​
+​document.innerHTML += `<br>`;​
+​document.innerHTML += title.slice(0, 5);
+​document.innerHTML += `<br>`;​
+​document.innerHTML += title.slice(title.length - 5, title.length)Ł
 ```
-
 :::

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 = (
-  '<h2>Objednávka: ' + id + '</h2>' +
-  '<p>Zboží ' + product + ' bude doručeno ' + delivery + '.</p>'
+  '<h2>Objednávka: ' + order.id + '</h2>' +
+  '<p>Zboží ' + order.product + ' bude doručeno ' + order.delivery + '.</p>'
 );
 ```
 
-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 &#96;. 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 &#96;. 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 =
-  `<h2>Objednávka: ${id}</h2>` +
-  `<p>Zboží ${product} bude doručeno ${delivery}.</p>`;
+  `<h2>Objednávka: ${order.id}</h2>` +
+  `<p>Zboží ${order.product} bude doručeno ${order.delivery}.</p>`;
 ```
 
 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 =
-  `<h2>Objednávka: ${String(id).padStart(8, '0')}</h2>` +
-  `<p>Zboží ${product} bude doručeno ${delivery}.</p>`;
+  `<h2>Objednávka: ${String(order.id).padStart(8, '0')}</h2>` +
+  `<p>Zboží ${order.product} bude doručeno ${order.delivery}.</p>`;
 ```
 
 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 = '
   <header>
     <h1>Název stránky</h1>
@@ -81,17 +79,15 @@ const order = {
   delivery: '21.8.2021',
 };
 
-const { id, product, delivery } = order;
-
 const content = `
   <header>
-    <h1>Objednávka: ${String(id).padStart(8, '0')}</h1>
+    <h1>Objednávka: ${String(order.id).padStart(8, '0')}</h1>
   </header>
   <main>
-    <p>Zboží ${product} bude doručeno ${delivery}.</p>
+    <p>Zboží ${order.product} bude doručeno ${order.delivery}.</p>
   </main>
   <footer>www.matrace-a-syn.cz</footer>
 `;
 
-document.body.innerHTML = content;
+document.body.innerHTML += content;
 ```

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.

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!