9

Velké opakování

Zopakujeme si všechno, co jsme se doteď v JavaScriptu naučili.

Cvičení: Hodnoty, proměnné, podmínky

1

Rodná čísla

to dáš

Založte si projekt v čistém JavaScriptu bez Webpacku, stačí soubory index.html a index.js. Napište program, který zjistí, jestli je rodné číslo platné.

  1. Každé rodné číslo musí mít přesně 9 znaků. Zkontrolujte tedy, že zadaný řetězec je délky 9 a neprojdou nám například vstupy typu
    Žádné číslo ti nedám
    
  2. Každé rodné číslo musí být celé číslo. Zde je nějaká hodnota celé číslo v JavaScriptu zkontrolujete pomocí funkce Number.isInteger. Musíte však vstup předtím převést na číslo pomocí funkce Number.
    > Number.isInteger(Number('25'))
    true
    > Number.isInteger(Number('25.16'))
    false
    > Number.isInteger(Number('ahoj'))
    false
    
  3. Každné rodné číslo musí být dělitelné 11.

Cvičení: Funkce

2

Platnost jako funkce

to dáš

Využijte kód z předchozího příkladu a vytvořte funkci s názvem checkBirthID, která zkontroluje platnost rodného čísla. Funkce bude mít jeden parametr, ve kterém bude očekávat rodné číslo jako řetězec, a bude vracet pravdivostní hodnotu udávající, zda řetězec obsahuje platné rodné číslo či nikoliv.

Cvičení: Pole a cykly

3

Kontrola cifer

to dáš

Pokračuje v kód předchozího příkladu.

  1. Vytvořte pole digits obsahující všechny cifry '0''9' jako řetězce.
  2. Napište funkci isDigit, která na vstup dostane řetězec a vrátí true pokud tento řetězec obsahuje právě jednu cifru. Použijte k tomu pole digits a metodu includes (viz dokumentace). V opačném případě funkce vrátí false.
  3. Jakmile uživatel zadá rodné číslo jako řetězec a máte ověřeno, že má skutečně délku 9, projděte tento řetězec pomocí cyklu for znak po znaku a vypište do konzole všechny znaky, které nejsou cifry. Použijte k tomu funkci isDigit.

Cvičení: Objekty, map, filter

4

Kontrola cifer pomocí filtru

to dáš

V předchozím cvičení jsme vypisovali všechny špatně zadané znaky do konzole pomocí cyklu. Nyní tento kód přepíšeme pomocí metody filter.

  1. Jakmile uživatel zadá rodné číslo jako řetězec a máte ověřeno, že má skutečně délku 9, převeďte tento řetězec na pole pomocí funkce Array.from. Příklad použití.

    > Array.from('ahoj')
    ["a", "h", "o", "j"]
    
  2. Na vyrobeném poli znaků zavolejte metodu filter a získejte pole znaků, které nejsou cifry. Opět použijte funkci isDigit z předchozího cvičení. Výsledné pole vypište to konzole.

5

Kontrola cifer pomocí mapy

to dáš

V tomto cvičení budeme chtít kromě seznamu špatně zadaných znaků také u každného znaku informaci, zde ja správně, či nikoliv.

  1. Podobně jako v předchozím cvičení vyrobte z uživatelem zadaného řetězce pole znaků. Na tomto poli použijte metodu map a vytvořte pole objektů, obsahující informace o každém znaku. Například pro vstup

    462748/312
    

    chceme jako výsledek obdržet takovéto pole.

    [
      { char: '4', digit: true },
      { char: '6', digit: true },
      { char: '2', digit: true },
      { char: '7', digit: true },
      { char: '4', digit: true },
      { char: '8', digit: true },
      { char: '/', digit: false },
      { char: '3', digit: true },
      { char: '1', digit: true },
      { char: '2', digit: true },
    ]
    

    Výsledné pole vypište to konzole.

  2. Vyzkoušejte váš kód na různých vstupech a zkontrolujte, že generuje správné výsledky. Vaše aplikace by měla do konzole vypsat jednak seznam špatně zadaných znaků tak, jak jsme to dělali v předchozím cvičení, jednak pole objektů jako výše.

Cvičení: DOM a události

6

Vstup pomocí formuláře

to dáš

Upravte vaši aplikaci na kontrolu rodných čísel tak, aby obsahovala formulář.

  1. Do HTML vaší stránky vložte formulář s textovým políčkem pro rodné číslo. Formulář se bude odesílat tlačítkem Zkontrolovat.

  2. Na událost submit formuláře pověste posluchač, který provede kontrolu zadaného rodného čísla tak, jak jsme ji dělali v předchozím cvičení.

  3. Do HTML vložte div s nějakým vhodně zvoleným id. Tento div bude představovat zprávu pro uživatele.

  4. Z přechozího cvičení máme připravený kód, který pomocí filter generuje pole špatně zadaných znaků. Pokud je toto pole prázdné, vypište do vašeho divu

    V pořádku
    
  5. Pokud pole prázdné není, vypište zprávu ve smyslu

    V rodném čísle jsou chyby
    
  6. Pole objektů obsahující informace o jednotlivých cifrách zatím stále vypisujte do konzole. Vrátime se k němu v následujících cvičeních.

Cvičení: innerHTML a vlastní DOM elementy

7

Cifry jako komponenty

to dáš

Pokračuje v kódu předchozího příkladu. Budeme chtít zobrazit jednotlivé cifry rodného čísla dle následujícího vzoru.

Cifry

  1. Vytvořte čistě JavaScriptovou komponentu Digit, která bude představovat jednu cifru rodného čísla. Tato komponenta bude jako svůj parametr brát props s následující strukturou.

    {
      char: '3',
      digit: true,
    }
    

    Komponentu napište tak, aby vracela řetězec obsahující HTML.

  2. Pokud bude prop digit mít hodnotu true, bude mít znak zelené pozadí a černý text. V opačném případě bude mít červené pozadí a bílý text.

  3. V souboru index.html vytvořte div s nějakým smysluplným id, ve kterém budeme zobrazovat jednotlivé cifry. Nastylujte jej pomocí flexboxu tak, abychom mohli cifry zobrazovat vedle sebe.

  4. Jakmile uživatel klikne na tlačítko Zkontrolovat, ve vašem programu už máte text zadaný uživatelem převedený na pole. Projděte toto pole pomocí cyklu a naplňte váš připravený div ciframi s použitím komponenty Digit a vlastnosti innerHTML.

Vaše aplikce by měla ve výsledku fungovat tak, že kdykoliv uživatel zadá rodné číslo a nechá si jej zkontrolovat, aplikace vypíše, zda je číslo zadané dobře nebo špatně, a zobrazí jednotlivé znaky čísla s tím, že cifry jsou zelené a špatně zadané znaky jsou červené.

Fetch a voláni API

React, podmíněné zobrazování, seznamy

Cvičení: React stav a formáře

8

Rodné číslo v Reactu

to dáš

Z předchozích cvičení máme hotovou aplikaci na kontrolu rodných čísel. Založte si React projekt dle známé šablony a přepište tuto aplikaci do Reactu.

React efekty a fetch