Díky JavaScriptu a práci s DOMem už dokážete vašim stránkám vdechnout hodně života a zprostředkovat tak uživateli interaktivní zážitek. Zatím jsme však pracovali pouze s elementy, které už na stránce existují. Dnes si ukážeme, jak zapojit do stránky elementy vytvořené celé přímo v JavaScriptu. Tímto postupně nastupujeme cestu, která skončí až u toho, kdy budeme vytvářet v JavaScriptu úplně celou stránku a žádné HTML soubory už skoro potřebovat nebudeme.

Než se však pustíme do hlavního tématu, ještě si lehce zopakujeme cykly.

Cvičení - opáčko cyklů

1

Nákupní seznam

to dáš

Mějme pole řetězců představující nákupní seznam

const list = ['mouka', 'máslo', 'cukr', 'jablka', 'skořice'];
  1. Napište cyklus, který projde celé toto pole a všechny položky spojí dohromady do jednoho velkého řetězce jako níže.

    'moukamáslocukrjablkaskořice'
    
  2. Upravte váš program tak, že výsledný řetězec bude vypadat takto:

    'mouka,máslo,cukr,jablka,skořice'
    
  3. Upravte váš program tak, aby výsledný řětězec obsahoval HTML značky.

    '<li>mouka</li><li>máslo</li><li>cukr</li><li>jablka</li><li>skořice</li>'
    
2

Nákupní seznam jako funkce

to dáš

Vytvořte funkci s názvem shoppingList, která na vstupu obdrží pole řetězců, představující nákupní seznam. Funkce vrátí řetězec obsahující prvky tohoto seznamu zabalené do HTML značek li.

Příklad použití:

> shoppingList(['špagety', 'kečup', 'sýr']);
'<li>špagety</li><li>kečup</li><li>sýr</li>'

Tvorba HTML pomocí JavaScriptu

V poslední části našeho cvičení s nákupním seznamem jsme vytvořili řetězec, který obsahuje HTML značky. Po této zkušenosti by nás mohla napadnou otázka, zda-li by nešlo takto vytvořený HTML kód zapojit přímo do naší stránky.

Už dávno umíme změnit obsah nějakého DOM elementu pomocí vlastnosti textContent. Takto však můžeme pravovat pouze s obsah, který je čistý text. Pokud chceme do nějakého elementu vložit kus HTML, je třeba k tomu použít vlastnost innerHTML.

Pro příklad mějme následující jednoduchou HTML strukturu s prázdným odrážkovým seznamem.

<body>
  <ol class="shopping-list"></ol>
</body>

Nyní vybereme element seznamu dle třídy shopping-list a vložíme do něj kus HTML kódu.

const listElm = document.querySelector('.shopping-list');
listElm.innerHTML = '<li>mouka</li><li>máslo</li>';

Na výsledné stránce si můžeme ověřit, že po spuštění tohoto kódu skutečně obsahuje nové HTML elementy. Díky innerHTML takto můžeme dovnitř libovolného elementu vložit libovolně komplikované HTML. Navíc můžeme do našich řetězců vkládat obsahy proměnných. Není tedy problém sestavit naše HTML s použitím nějakých dat.

const item1 = 'mouka';
const item2 = 'máslo';
const listElm = document.querySelector('.shopping-list');
listElm.innerHTML = `<li>${item1}</li><li>${item2}</li>`;

Pomocí innerHTML získáváme mnohem větší kontrolu nad obsahem stránky než jsme měli pouze s použitím textContent.

První komponenta

V tomtu kurzu postupně směřujeme k tomu, abychom dokázali naši stránku sestavit z menších stavebních bloků, kterým budeme říkat komponenty. Ke skutečným komponentám se vším všudy se dostanema až ve chvíli, kdy potkáme React. Ale už nyní si můžeme vyzkoušet malou ochutnávku.

Komponenta je v podstatě funkce, která dostane na vstupu nějaká data, a vytvoří z nich kus obsahu naší stránky. Ve cvičení Nákupní seznam jako funkce jste už ve skutečnosti vlastní komponentu vytvořili. Funkce shoppingList ze zadaného pole vytvoří kus HTML pro naši stránku.

const ShoppingList = (items) => {
  let result = '';
  for (let i = 0; i < items.length; i += 1) {
    result += `<li>${items[i]}</li>`;
  }

  return result;
};

Máme-li tedy stránku s prázdným seznamem jako zde

<body>
  <ol class="shopping-list"></ol>
</body>

můžeme seznam naplnit obsahem zavoláním naší funkce ShoppingList.

const data = ['špagety', 'kečup', 'sýr'];
const listElm = document.querySelector('.shopping-list');
listElm.innerHTML = ShoppingList(data);

Všimněte si, že jsme funkci pojmenovali s velkým písmenem na začátku. Toto je konvence, kterou si vytvořili především React programátoři, aby dokázali rychle odlišit funkce představující komponenty od všech ostatních funkcí. JavaScriptu je úplně jedno, jaké písmenko na začátku názvu funkce uvedeme. Jde pouze o pomůcku pro nás a čtenáře našeho programu, aby všichni rychle dokázal poznat, z jakých komponent se náš program skládá. Protože také směřujeme směrem k vývoji v Reactu, budeme tuto konvenci dodržovat už od této chvíle.

Cvičení - komponenty

3

Nadpis stránky

pohodička

Vytvořte si HTML stránku s následující strukturu

<body>
  <div id="app"></div>
  <script src="index.js"></script>
</body>

Na začátku vašeho programu vytvořte proměnnou heading.

const heading = 'Čau lidi';

Vyberte ze stránky element app a pomocí vlastnosti innerHTML do něj vložte prvek h1, ve kterém bude obsah proměnné heading.

4

Nadpis stránky jako komponenta

to dáš

Vytvořte si HTML stránku s následující strukturu

<body>
  <div id="app"></div>
  <script src="index.js"></script>
</body>

Vytvořte funkci Heading, s jedním parametrem text. Tato funkce vytvoří řetězec obashující HTML značku h1 s obsahem zadným v parametru.

Ukázka použití:

> Heading('ahoj')
'<h1>ahoj</h1>'
> Heading('Zítra ráno v pět')
'<h1>Zítra ráno v pět</h1>'

Vyberte ze stránky element app a pomocí vlastnosti innerHTML do něj zapojte výsledek volání funkce Heading. Vyzkoušejte si tento postup s různými vstupy pro tuto funkci.

5

Hodiny

to dáš

Stáhněte si základ stránky zobrazující digitální hodiny. Následujte instrukce níže.

  1. HTML kód hodin ze stránky vyjměte a nechte v ní pouze element app.
  2. Vytvořte komponentu Clock se dvěma parametry hours a minutes, která vytvoří HTML kód hodin dle zadaných parametrů.
  3. V konzoli prohlížeče vyberte element app a pomocí funkce Clock do něj zapojte hodiny zaborazující nějaký čas.
  4. Zkuste pomocí funkce Clock vložit do stránky několik různých hodin pod sebe.

Doporučené úložky na doma

6

Podcasty

to dáš

Stáhněte si základ stránky zobrazující seznam epizod nějakého podcastu. Prohlédněte si HTML stránku a všimněte si, že jedna epizoda podcastu se zobrazí pomocí tohoto HTML.

<div class="episode">
  <div class="episode__num">127</div>
  <div class="episode__body">
    <div class="episode__title">Hledání plyšového Yettiho</div>
    <div class="episode__guest">host: Vojtěch Ryba</div>
  </div>
</div>
  1. Vytvořte komponentu Podcast se třemi parametry num, title a host představující číslo podcastu, název podcastu a hosta podcastu. Vaše komponenta nechť z těchto dat vyrobí HTML sturkturu pro jeden podcast.

  2. V souboru index.html smažte obsah elementu episode-list. V JavaScriptu vyberte tento element a s použitím komponenty Podcast a vlastnosti innerHTML v něm vytvořte jednu epizodu podcastu dle nějakých vymyšlených dat.

  3. Mějme následující pole obsahující několik epizod našeho podcastu.

    const episodes = [
      [127, 'Hledání plyšového Yettiho', 'Vojtěch Ryba'],
      [128, 'Moderní hrachová polévka', 'Kamila Štancová'],
      [129, 'Poloautomatické zrcadlo', 'Janka Janovská'],
      [130, 'Máčené hlavy parlamentu', 'Jonáš Daněk'],
      [131, 'Služby na hraně přívěsu', 'Tereza Křivánková'],
      [132, 'Klasifikace sněžných klokanů', 'Josef Stix'],
      [133, 'Rybolov v Oceánu bouří', 'Ludmila Gajová'],
    ];
    

    Napište cyklus, který projde toto pole a pro každou položku vytvoří novou epizodu uvnitř elementu episodes-list.

7

Úkolníček

zapni hlavu

Stáhněte si základ stránky zobrazující jednoduchý úkolníček.

  1. Podívejte se, jak stránka vypadá. Smažte obsah elementu todo__tasks uvnitř souboru index.html, ale zapamtutje si, jak se v HTML vytvoří jeden úkol.
  2. V JavaScriptu vytvořte pole řetězců tasks, které bude reprezentovat seznam úkolů.
  3. Vytvořte komponentu TasksList s jedním parametrem, která na vstupu očekává pole úkolů. Funkce TasksList pak pomocí cyklu sestaví HTML pro seznam úkolů tak, aby šel zobrazit na stránce.
  4. Zavolejte funkci TasksList, předejte jí pole úkolů tasks a zapojte výsledek funkce do vaší stránky.

Mandatory home reading

To better prepare you for the life of a badass professional programmer, from this lesson onwards we are going to write the mandatory home readings in English. Even if you do not aspire for a professional career in programming and just want to be a hobbyist, you will not be able to avoid English for long. It slowly sneaks in with your variable names but the road continues much further.

  • Most of good courses, articles and video tutorials are in English.
  • Most helpful books about programming are written in English.
  • All the documentation for HTML, CSS, JavaScript and other tools and technologies is in English.
  • If you have a problem and decide to take it to Stack Overflow, guess what? Your communication will be in English.

Switching to English may seem daunting at first. But in a while you will find that technical English is rather straightforward. Reading technical manuals and articles is not like reading a novel or, God forbid, reading the newspapers. The vocabulary in this particular area is quite limited and most of the time the hardest part is understanding the technical terms. If at first you feel a bit frightened by English, do not hesitate to chuck this paragraph into Google Translator. It is quite capable these days. In fact, with these simple texts, most of the time the translation is almost 100% acurate.

Once you get the hang of it, reading IT English will be a breeze. Actually, reading IT articles and books is a good way to get better in English in general. When at last you are smoothly reading through all the discussions on Stack Overflow, you might even get excited to read some real English literature.