Shrnutí

V této lekci jste se naučili, že:

• Obsluha dostane jako argument objekt události: function (event) { ... }. event.target je prvek, ve kterém se událost stala, takže jedna funkce může obsluhovat víc prvků.
• Atributy, které začínají data-, nesou v prvcích vaše vlastní data: data-barva="teal" je prvek.dataset.barva, vždy jako text.
• Události probublávají nahoru přes prvky, ve kterých je cílový prvek, takže jedna obsluha na seznamu obslouží kliknutí na všechny jeho položky, i na ty přidané později. event.target.closest("li") najde položku, na kterou se kliklo, nebo vrátí null.
• Událost input přijde po každé změně textu v textovém poli, takže stránka může reagovat už během psaní. change přijde, když se změní výběr: value prvku select nebo checked zaškrtávacího políčka (true, nebo false).
• Text má metody includes(), toLowerCase() a trim(), která odstraní mezery na začátku a na konci.
• keydown přijde při každém stisku klávesy a event.key řekne, která klávesa to byla: "a", "Enter", "Escape", s velkými písmeny přesně takhle.
• form se odešle tlačítkem pro odeslání nebo Enterem a pak dostane událost submit. V obsluze zavolejte event.preventDefault(), jinak prohlížeč stránku načte znovu a všechno napsané zmizí.
• Než použijete, co uživatel napsal, zkontrolujte to: prázdné, moc krátké, není číslo (Number.isNaN(), nikdy === NaN). Každou chybu ukažte u jejího textového pole, vyprázdněte ji, když je pole v pořádku, a práci formuláře udělejte, jen když je v pořádku všechno.

V příští lekci, Miniprojekt: Registrační formulář, to všechno využijete v registračním formuláři, který se kontroluje sám: řekne, co je kde špatně, a když je všechno v pořádku, nového uživatele přivítá.

Nejdřív si ale vše procvičte na lepicím lístku, na který můžete psát a měnit mu barvu. script.js je zase prázdný a celý program napíšete sami.