lekce-08.md

Cvičení: Funkce jako argumenty

Hesla

Vytvořte si repozitář ze šablony cviceni-hesla se stránkou, která obsahuje tři různé funkce na generování hesel. Každá funkce vygeneruje heslo zadané délky s určitou bezpečnostní silou. Kód funkcí zkoumat nemusíte, obsahuje věci, které jsme zatím neprobírali.

Příklad samostatného použití jednotlivých funkcí:

weakPassword(5); // → '01234'

mediumPassword(8); // → '48140525'

strongPassword(6); // → 'azc7mw'

Napište funkci createAccount, která se bude tvářit, že zakládá nový uživatelský účet. Funkce bude mít dva parametry user a generatePassword. První bude uživatelské jméno a druhý bude funkce, pomocí které se má vygenerovat heslo pro tento účet. Funkce createAccount vrátí řetězec, který bude obsahovat jméno uživatele a heslo vygenerované voláním funkce generatePassword. Funkci generatePassword při volání předejte číslo 9 jako délku hesla.

Na konci javascriptového kódu vyzkoušejte založit více různých účtů s různými typy hesel. Například:

document.body.innerHTML += `
	<p>${createAccount('Míša', weakPassword)}</p>
	<p>${createAccount('Řízek', mediumPassword)}</p>
	<p>${createAccount('Mápodčepicí', strongPassword)}</p>
`;

by mělo vepsat do stránky něco jako:

Uživatel Míša s heslem 012345678
Uživatel Řízek s heslem 074031827
Uživatel Mápodčepicí s heslem mwwf9epts

Řešení

const createAccount = (user, generatePassword) => {
  return `Uživatel ${user} s heslem ${generatePassword(9)}`;
};

document.body.innerHTML += `
	<p>${createAccount('Míša', weakPassword)}</p>
	<p>${createAccount('Řízek', mediumPassword)}</p>
	<p>${createAccount('Mápodčepicí', strongPassword)}</p>
`;

E-mail podruhé

Pojďme dále rozvinout cvičení s vyplňováním e-mailu z předchozí lekce.

1. Vytvořte si repozitář ze šablony cviceni-email-podruhe.
2. Všimněte si funkce goodbye, která generuje pozdrav na konec e-mailu. Přidejte alespoň dvě další funkce, kde každá generuje k zadanému jménu jiný typ pozdravu. Například formalGoodbye pro velmi formální pozdravy jako „S uctivou poklonou…“, nebo naopak rudeGoodbye typu „Se měj…“, pokud se chcete rozloučit nevybíravě.
3. Upravte funkci fillBody tak, aby brala třetí parametr goodbyeFunction představující funkci, pomocí které se má vygenerovat závěrečný pozdrav. Vyzkoušejte zavolat funkci fillBody postupně s každou z vašich zdravících funkcí a ověřte, že vše správně funguje.

Ukázka použití

fillSubject('Obchodní sdělení');
fillBody(
  'Kupte mycí prostředek, který vám vytře zrak, se slevou 50 %.',
  'Jan Čistý',
  formalGoodbye
);

nebo

fillSubject('Pozvánka na oslavu narozenin');
fillBody('Zítra oslava. 18:00 ve Starý hospodě.', 'Patrik Veselý', rudeGoodbye);

Řešení

const goodbye = (name) => {
  return 'S pozdravem ' + name;
};

const formalGoodbye = (name) => {
  return 'S uctivou poklonou ' + name;
};

const rudeGoodbye = (name) => {
  return 'Se měj. ' + name;
};

const fillSubject = (subject) => {
  document.querySelector('.email__subject').textContent = subject;
};

const fillBody = (body, name, goodbyeFunction) => {
  const bodyElement = document.querySelector('.email__body');
  bodyElement.innerHTML = body;
  const closingElement = document.querySelector('.email__closing');
  closingElement.textContent = goodbyeFunction(name);
};

Cvičení: Události

Objednavka

Vytvoříme jednoduchou stránku s objednávacím tlačítkem.

1. Založte HTML stránku s jedním tlačítkem

   <button id="button-order">Objednat</button>

2. Doplňte do stránky JavaScriptový program, který zařídí, že po stisknutí tlačítka se do stránky za tlačítko vypíše odstavec:

   <p>Objednáno</p>

3. Upravte program tak, že text se nevypíše do stránky, ale zobrazí se na samotném tlačítku.

ukázka řešení

Řešení

const button = document.querySelector('#button-order');
button.addEventListener('click', () => {
  // document.body.innerHTML += '<p>Objednáno</p>';
  button.textContent = 'Objednáno';
});

Kontrola dosupnosti

Vyjděte z řešení předchozího příkladu, kdy se objednává při kliknutí na tlačítko.

1. Zařiďte úpravou přímo v HTML souboru, aby při načtení stránky tlačítko obsahovalo zprávu Kontroluji dostupnost…
2. Přidejte do stránky zpoždění pomocí funkce setTimeout, která zařídí, že 8 vteřin po načtení stránky se zpráva na tlačítku změní na Objednat.
3. Tlačítka mají speciální HTML atribut s názvem disabled. Pokud je tento atribut přítomen, na tlačítko se nedá kliknout. Přidejte tento atribut do HTML kódu tlačítka, aby tlačítko bylo při načtení stránky nedostupné/neklikatelné. Až po uplynutí časovače jej zpřístupněte nastavením vlastnosti disabled v JavaScriptu na false.

ukázka řešení

Řešení

<button id="button-order" disabled>Kontroluji dostupnost…</button>

const button = document.querySelector('#button-order');
setTimeout(() => {
  button.textContent = 'Objednat';
  button.disabled = false;
}, 8000);
button.addEventListener('click', () => {
  button.textContent = 'Objednáno';
});

Zarovka

Vytvořte si repozitář ze šablony cviceni-zarovka se stránkou, která zobrazuje obyčejnou žárovku.

1. Pomocí JavaScriptu zařiďte, aby se při stisknutí libovolné klávesy na stránce přidala k elementu žárovky CSS třída bulb--on. Žárovka by se takto měla rozsvítit.
2. Vylepšete program tak, aby na následné stisknutí libovolné klávesy žárovka opět zhasnula. Opakovaným mačkáním kláves ji tak můžeme rozsvěcovat a zhasínat.

ukázka řešení

Řešení

const bulb = document.querySelector('.bulb');
document.addEventListener('keydown', () => {
  bulb.classList.toggle('bulb--on');
});