JS - úvod do 'this'

Zhrnutie prednášky

Prednáška rozširuje kalkulačku o okamžitú vizuálnu spätnú väzbu pri písaní: cez event listener na udalosť keyup sa kontroluje hodnota vstupu a pri neplatnom čísle (NaN) sa nastaví červené orámovanie a červený text. Duplicitný kód pre dva vstupy sa najprv rieši pomocnou funkciou, no to nie je škálovateľné. Vysvetľuje sa kľúčové slovo this, ktoré v obsluhe udalosti odkazuje na element, na ktorom bol listener registrovaný. Vďaka tomu možno jednu funkciu použiť pre všetky vstupy a listenery pridávať cyklom for cez pole identifikátorov, takže nový vstup stačí pridať do poľa.

• - Event listener na keyup umožňuje kontrolovať vstup už počas písania, nie až po stlačení tlačidla.
• - Neplatný vstup (isNaN po konverzii cez Number) sa označí červeným orámovaním a farbou textu, pri platnom vstupe sa štýl vynuluje.
• - Kopírovanie rovnakého kódu pre každý vstup je nepraktické a nepreskúmateľné pri desiatkach vstupov.
• - Kľúčové slovo this v obsluhe udalosti odkazuje na element, na ktorom bol listener pridaný (this sa rovná input).
• - Vďaka this stačí jedna spoločná funkcia a nie je potrebné znovu hľadať element cez getElementById.
• - Identifikátory vstupov sa uložia do poľa a listenery sa pridajú cyklom for; nový vstup stačí doplniť do poľa.

Zhrnutie pripravené s pomocou AI z prepisu videa.