lekce-11.md

Vícestránkové aplikace

Počasí

Podobných postupem jako jsme na lekci tvořili aplikaci Zprávičky zkuste vytvořit vlastní aplikaci, která bude zobrazovat počasí na aktální týden.

1. Forkem si vytvořte kopii tohoto repozitáře. Najdete v něm soubor s daty pro počasí na jeden týden.
2. V naší aplikaci budeme chtít vytvořit dvě stránky podle popisu dále. Zatím je nemusíme nijak horlivě stylovat, stačí nám zatím základní zobrazení dat.
3. Hlavní stránka bude index.html s přehledem počasí na sedm dní v týdnou, pondělí až pátek. Každý den bude zobrazen jako karta s názvem dne, teplotou a stavem typu zataženo, déšť, sníh, atd. Pro tuto stránku si vytvořte samostatný soubor index.js a naplňte HTML obsahem podle dodaných dat.
4. Po rozkliknutí karty na hlavní stránce se uživatel dostane na stránku detail.html s detailním přehledem počasí na daný den. Odkaz bude vypadat například detail.html?den=pondeli. Na stránce se zobrazí název dne, teploty ráno, odpoledne a večer, stav jako zataženo, déšť apod., vlhkost, tlak a slovní popis počasí.

Ladění

Recitály

U všech následujících úryvků kódů vytvořte technický popis jejich fungování a zároveň zkuste odhadnout záměr daného kódu. Obě dvě části si skutečně napište například do textového souboru.

1. const average = (a, b) => {
     return (a + b) / 2;
   };

2. const titleElement = document.querySelector('.title');
   titleElement.textContent = 'Nadpis';

3. let time = 0;
   setTimeout(() => {
     time += 1;
     console.log('time', time);
   }, 1000);

4. buttonOk.addEventListener('click', () => {
     document.body.innerHTML = '<p>Everything OK</p>';
   });

5. document.addEventListener('keyup', (event) => {
     if (event.code === 'KeyP') {
       console.log('paused');
     }
   });

Řešení

1

const average = (a, b) => {
  return (a + b) / 2;
};

1. Vytvářím funkci, která očekává na vstupu dva parametry, které sipojmenovávám a a b. Funkci si ukládám do proměnné pojmenované average.
2. V těle funkce je jediný příkaz, který vypočítá součet parametrů a a b, součet vydělí dvěma a výslednou hodnotu vrátí pomocí return jako návratovou hodnotu funkce.

Funkce average počítá průměrnou hodnotu dvou zadaných čísel.

2

const titleElement = document.querySelector('.title');
titleElement.textContent = 'Nadpis';

1. Pomocí metody querySelector() vyhledám první element v dokumentu, který odpovídá zadanému CSS selektoru .title. Selektor odpovídá všem prvkům s třídou title. Nalezený prvek se uloží do proměnné titleElement.
2. Do textového obsahu (textContent) nalezeného prvku se vloží text „Nadpis“ – původní obsah se přepíše.

Kód nastaví text „Nadpis“ do prvního elekemntu se třídou title v dokumentu. (Pokud by v dokumentu takový element nebyl, kód spadne s chybou.)

3

let time = 0;
setTimeout(() => {
  time += 1;
  console.log('time', time);
}, 1000);

1. Vytvořím proměnnou time, do které se uloží číslo 0. Obsah proměnné bude možné později v kódu změnit.
2. Zavolám funkci setTimeout(), která zavolá mou funkci (callback) za jednu sekundu.
3. Předaná callback funkce je anonymní.
4. Předaná callback funkce má v těle dva příkazy.
5. První příkaz funkce zvýší hodnotu proměnné time o 1.
6. Druhý příkaz vypíše dvě hodnoty do konzole v DevTools prohlížeče. První hodnota je text „time“, druhá hodnota je aktuální hodnota proměnné time (tj. 1).

Kód jednu sekundu po načtení stránky vypíše do konzole time 1.

4

buttonOk.addEventListener('click', () => {
  document.body.innerHTML = '<p>Everything OK</p>';
});

1. Kód předpokládá existenci proměnné buttonOk, která obsahuje DOM element (pravděpodobně potvrzovací tlačítko).
2. Na proměnné buttonOk se volá metoda addEventListener se dvěma parametry. Metoda addEventListener nastaví posluchače událostí na DOM elementu buttonOk.
3. První parametr metody addEventListener je název události, které chceme poslouchat. Zde se nastavuje událost click, tedy kliknutí tlačítkem myši.
4. Druhý parametr je funkce (callback), která se zavolá v okamžiku, kdy došlo k dané události – v tomto případě kdy uživatel klikl na tlačítko buttonOk.
5. V tomto případě se předává anonymní funkce (callback).
6. V těle funkce je jediný příkaz. Z proměnné document (ve které je DOM element reprezentující celý dokument zobrazený v prohlížeči) se přečte vlastnost (property) body, která obsahuje DOM element odpovídající elementu <body> v HTML, tedy viditelnou část webové stránky.
7. Do vlastnosti (property) innerHTML property body se zapíše (přepíše) text „

   Everything OK

   “. Vlastnost innerHTML reprezentuje HTML kód příslušného DOM elementu (v tomto případě viditelného obsahu celé stránky).
8. Text „

   Everything OK

   “ představuje HTML kód – odstavec textu (element <p>) s vloženým textem „Everything OK“.

Při kliknutí na tlačítko buttonOk se přepíše obsah celé webové stránky, nahradí se jedním odstavcem, ve kterém bude text „Everything OK“.

5

document.addEventListener('keyup', (event) => {
  if (event.code === 'KeyP') {
    console.log('paused');
  }
});

1. Na proměnné document (reprezentující celý dokument zobrazený v prohlížeči) se zavolá metoda addEventListener, která nastavuje posluchač události. Metoda dostane dva parametry.
2. První parametr je text „keyup“, posluchač události tedy bude navěšen na události, když uživatel pustil dříve stisknutou klávesu.
3. Druhý parametr je funkce (callback), která se zavolá, když k uvedené události dojde.
4. Předávaná funkce je anonymní funkce, která očekává jeden parametr. Pojmenovává si ho event.
5. Tělo funkce tvoří jeden příkaz – podmínka (if), která testuje, zda vlastnost (property) code události (parametr event) je rovna řetězci „KeyP“. Testuje se, zda událost nese informaci, že uživatel pustil klávesu s písmenem „P“.
6. Pokud je podmínka splněna, zavolá se metoda log na objektu console s parametrem – textem „paused“.

Pokaždé, když uživatel kdekoli v dokumentu stiskne a pak pustí klávesu „P“, vypíše se do konzole v DevTools text „paused“