10

Velké opakování

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

Po mnoha probdělých nocích nad Reactem jste už možná malinko pozapomněli na čistý JavaScript. V této lekci si tedy projdeme sérii cvíčení, která vám přiomnenout většinu toho, co jsme se v čistém JavaScriptu učili.

Rodná čísla

Všechna cvičení se točí kolem úlohy ověřování platnosti rodného čísla občana České republiky. Co všechno je povzažováno za platné rodné číslo si můžete přečít na Wikipedii. Je zde spousta různých výjimek a detailů, které si pro dnešní den odpustíme a pravidla si zjednodušíme takto:

Rodné číslo se skládá z deseti číslic. Prvních šest číslic popisuje datum narození ve formátu RRMMDD, tj. po dvou číslicích pro rok, měsíc a den narození. Např. 701020 označuje datum narození 20. října 1970. Přitom ženy mají k měsíci narození připočteno 50 (tzn. 706020 označuje ženu narozenou 20. října 1970). Zbytek rodného čísla (tzv. koncovka) odlišuje osoby stejného pohlaví narozené ve stejný den a zpravidla se odděluje lomítkem. My jej však lomítkem oddělovat nebudeme. Celé rodné číslo musí být beze zbytku dělitelná jedenácti, aby bylo možno snadno detekovat překlepy či jiné náhodné chyby.

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

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 zadané rodné číslo platné.

  1. Pomocí funkce prompt se zeptejte uživatele na rodné číslo. Rodné číslo zkontrolujte podle bodů popsaných níže.
  2. Každé rodné číslo musí mít přesně 10 znaků. Zkontrolujte tedy, že zadaný řetězec je délky 10 a neprojdou nám například vstupy typu
    Žádné číslo ti nedám
    
    Výsledek kontroly vypište do konzole prohlížeče.
  3. 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
    
  4. Každé rodné číslo musí být dělitelné 11. Zkontrolujte tedy, že zadané číslo je dělitelné jedenácti. Pokud jsou všechny podmínky splněny. rodné číslo budeme považovat za platné.
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áš

V případě, že uživatel zadal rodné číslo špatně, budeme chtít zkontrolovat jeho cifry a říct, kde se stala chyba. Pokračuje v kódu z 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. Když funkce checkBirthID vrátí false, 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 10, 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é.