Knihovny a vlastní funkce

Knihovny a vlastní funkce

  • Úvod
  • Knihovny a vlastní funkce

Knihovny a vlastní funkce

1. Kreditní karta

  1. Vytvořte prázdnou stránku, do které vložte knihovnu validator.js.
  2. Otevřete stránku v prohlížeči a pomocí metody validator.isEmail ověřte svoji e-mailovou adresu.
  3. Pokud máte po ruce svoji platební kartu, ověřte, že má platné číslo pomocí metody isCreditCard.
  4. Do těla stránky vložte prázdný odstavec, který bude zobrazovat zprávu pro uživetele. 
    <p id="msg" class="msg"></p>
  5. Pomocí funkce prompt požádejte uživatele o jeho e-mail. V případě, že jde o platný e-mail, zobrazte v připraveném odstavci zprávu "E-mail v pořádku". V opačném případě zobrazte "Neplatný e-mail".
  6. Pokud je e-mail platný, přidejte zároveň na odstavec CSS třídu msg--valid. V opačném případě použijte třídu msg--invalid. Třídy nastylujte například tak, že msg--valid bude mí zelené pozadí a msg--invalid naopak červené.

Řešení

'use strict';

console.log(validator.isEmail('pepa.novak@seznam.cz'));

console.log(validator.isCreditCard('4111 1111 1111 1111'));

const messagePanel = document.querySelector('#msg');
const email = prompt('Zadej email');

if (validator.isEmail(email)) {
  messagePanel.textContent = 'Email je v pořádku';
  messagePanel.classList.add('msg--valid');
} else {
  messagePanel.textContent = 'Neplatný email';
  messagePanel.classList.add('msg--invalid');
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <p id="msg" class="msg"></p>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/validator/13.5.2/validator.min.js"></script>
  <script src="index.js"></script>
</body>

</html>

2. Nouzový stav

Podívejte se na stránku skonciluznouzovystav.cz. Podle toho, v jakém období toto zadání čtete, se dozvíte, zda již skončil nouzový stav spojený s pandemií COVID-19 či nikoliv. Stránka zobrazuje obyčejné ANO či NE a krátkou zprávu. Podobných stránek lze na internetu najít vícero. Například

Vytvořte podobnou stránku s vaším vlastním tématem.

  1. Vytvořte prázdnou stránku, do které vložte knihovnu dayjs.

    
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.4/dayjs.min.js" ></script>```

  2. Vyberte si nějakou budoucí událost, jejíž datum je pevně určeno. Za pomoci knihovny dayjs vytvořte stránku zobrazující velké ANO nebo NE případně krátkou zprávu podle toho, zda už událost nastala či nikoliv.

  3. Publikuje vaši stránku na GitHub pages.

Řešení

'use strict';

const messagePanel = document.querySelector('#msg');
const stedryDen = dayjs('2021-12-24');
const dnes = dayjs();

if (dnes.isAfter(stedryDen)) {
  messagePanel.textContent = 'ANO';
} else {
  messagePanel.textContent = 'NE';
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <h1>Byl jis stedry den?</h1>
  <p id="msg" class="msg"></p>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.4/dayjs.min.js"></script>
  <script src="index.js"></script>
</body>

</html>

3. Obsah elipsy

Zlovolní zahrádkáři nám chtějí stížit výměru pozemků a proto si pořídíli pozemek ve tvru elipsy.

Elipsa

Z matematiky víme, že známe-li šířku a výšku elipsy, její obsah je polovina šířky krát polovina výšky krát číslo π.

Založte si prázdnou stránku s JavaScriptovým souborem a napište funkci ellipseArea, která spočítá plochu pozemku dle zadané šířky a výšky. Číslo π najdete v JavaScriptu v proměnné Math.PI.

Řešení

const ellipseArea = (w, h) => {
  return (w / 2) * (h / 2) * Math.PI;
};

4. Maximum ze dvou čísel

Napište funkci max2, která vrátí větší ze dvou zadaných čísel. V JavaScriptu už na toto funkce existuje, jmenuje se Math.max. Pro účely tohoto příkladu se budeme tvářit, že o ní nevíme.

Řešení

const max2 = (a, b) => {
  if (a > b) {
    return a;
  } else {
    return b;
  }
};

5. Kontrola rodného čísla

Všimněte si, že knihovna validator.js v době vzniku tohoto zadání neumí ověřit platnost českého DIČ (daňové identifikační číslo). Zkusme tedy takovou funkci napsat.

Formát DIČ sestává z předpony CZ a poté následuje devět nebo deset číslic. Tedy například

  • CZ123456789
  • CZ1234567890

Postupujte dle následujících kroků.

  1. Vytvořte prázdnou stránku s JavaScriptem a knihovnou validator.js.
  2. Vytvořte funkci isDIC s jedním parametrem inputStr, což bude řetězec, který chceme zkontrolovat.
  3. Jako první ve funkci zkontrolujte, jestli je vstupní řetězce kratší než 9 znaků. V takovém případě namá smysl dál nic dělat, protože vstup evidentně není DIČ. Vraťte tady z funkce false. Tím naše funkce končí. Všimněte si, že takto používáme vzor "časný návrat".
  4. Dále ve funkci zkontrolujte, jestli je vstupní řetězce delší než 10 znaků. V takovém případě opět vraťte false.
  5. Dále ve funkce si do proměnné prefix uložte první dva znaky vstupního řetězce.
  6. Pomocí podmínky zkontrolujte, že proměnná prefix obsahuje přesně znaky CZ. Pokud ne, ihned vraťte false.
  7. Do promměné digits si uložte část vstupního řetězce od třetího znaku dále.
  8. Použijte metodu validator.isInt, která umí zkontrolovat, zda řetězec obsahuje pouze číslice. Pokud metoda vrátí false, ihned také vraťte false.
  9. Pokud funkce dospěla až do tohoto bodu, vstup prošel všemi testy. Můžeme vrátit true.
  10. Vyzoušejte svoji funkci v konzoli na různých vstupech a ověřte, že funguje.

Řešení

'use strict';

const isDIC = (inputStr) => {
  if (inputStr.length < 9) {
    return false;
  }
  if (inputStr.length > 10) {
    return false;
  }
  const prefix = inputStr.slice(0, 2);
  if (prefix !== 'CZ') {
    return false;
  }

  const rest = inputStr.slice(2);
  if (!validator.isInt(rest)) {
    return false;
  }

  return true;
};

console.log(isDIC('CZ1234567'));
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <p id="msg" class="msg"></p>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/validator/13.5.2/validator.min.js"></script>
  <script src="index.js"></script>
</body>

</html>

6. Na doma | Parsování data

Bez použití knihovny dayjs napište funkci parseDate, která na vstupu obdrží řetězec obsahující datum ve formátu DD.MM.YYYY a vrátí objekt s jednotlivýnu částmi zadaného data. Příklad použití:

>  parseDate('12.03.2015')
<· { day: 12, month: 3, year: 2015 }
>  parseDate('06.04.2021')
<· { day: 6, month: 4, year: 2021 }

Řešení

'use strict';

const parseDate = (datum) => {
  return {
    day: Number(datum.slice(0, 2)),
    month: Number(datum.slice(3, 5)),
    year: Number(datum.slice(6)),
  };
};

console.log(parseDate('12.03.2015'));
console.log(parseDate('06.04.2021'));

7. Na doma | Formátování data

Bez použití knihovny dayjs napište funkci formatDate, která na vstupu obdrží objekt představující datum v následujícím formátu. 

{ day: 12, month: 3, year: 2015 }

Funkce vrátí řetězec představující datum ve formátu DD.MM.YYYY. Příklad použití.

>  formatDate({ day: 6, month: 4, year: 2021 })
<· "06.04.2021"

V tomto cvičení se vám jistě bude hodit metoda padStart. Zkuste také uvnitř těla funkce použít destrukturování.

Řešení

'use strict';

const formatDate = (datum) => {
  const den = String(datum.day).padStart(2, '0');
  const mesic = String(datum.month).padStart(2, '0');

  return `${den}.${mesic}.${datum.year}`;
};

console.log(formatDate({ day: 12, month: 3, year: 2015 }));

8. Na doma | Python zaokrouhlování

Jak jistě znalci jazyka Python dobře vědí, funkce round v tomto jazyce zaokrouhluje malinko jinak, než jsme zvyklí. Pokud je desetinná část čísla přesně 0.5, Python zaokrouhluje k nejbližšímu sudému číslu. JavaScriptová funkce Math.round naopak provádí zaokrouhlování způsobem, na který jste zvyklí, tedy pro 0.5 vždy nahoru. Někomu by se po po Pythonovském zaokrouhlování mohlo stýskat. Napište proto funkci jménem round, která bude zaokrouhlovat čísla na celé jednotky podle následujících pravidel.

  1. Pokud je desetinná část menší než 0.5, zaokrouhlujeme dolů.
  2. Pokud je desetinná část větší než 0.5, zaokrouhlujeme nahoru.
  3. Pokud je desetinná část přesně rovna 0.5, zaokrouhlujeme k sudému číslu. Tedy například 3.5 se zaokrouhlí na 4, naopak 2.5 se zaokrouhlí na 2.

V tomto cvičení se vám může hodit funkce Math.trunc, která umí odříznout desetinnou část čísla.

Řešení

'use strict';

const round = (cislo) => {
  const celeCislo = Math.trunc(cislo);
  const desetinnaCast = cislo - celeCislo;

  if (desetinnaCast !== 0.5) {
    return Math.round(cislo);
  } else {
    if (celeCislo % 2 === 0) {
      return Math.floor(cislo);
    } else {
      return Math.ceil(cislo);
    }
  }
};

console.log(round(3.5));

9. Na doma | Maximum ze tří čísel

Napište funkci max3, která vrátí největší ze tří zadaných čísel. Opět se vyhněte použití funkce Math.max.

Řešení

'use strict';

const max3 = (a, b, c) => {
  if (a > b && a > c) {
    return a;
  } else if (b >= a && b >= c) {
    return b;
  }

  return c;
};

console.log(max3(11, 24, 6));