Niekedy sa na ceste k tomu, aby ste sa naučili niečo obrovské a zložité, musíte naučiť niečo malé a jednoduché. JavaScript je obrovský a zložitý, ale môžete doň vstúpiť tak, že sa naučíte malé a jednoduché veci. Ak ste webový dizajnér, myslím si, že existuje jedna vec, ktorú sa môžete naučiť, ktorá je nesmierne posilňujúca.
Toto je vec, ktorú sa chcem naučiť: Keď kliknete na nejaký prvok, zmeňte triedu na nejakom prvku.
Keď to zredukujeme na absolútnu nevyhnutnosť, predstavte si, že máme tlačidlo a div:
Click Me I'm an element Div môže mať niekoľko základných štýlov a môže mať niektoré štýly, keď má konkrétnu triedu:
div ( /* base styles */ ) div.yay ( /* styles when it has this class */ )Bystrí CSS-podvodníci by to mohli poznať ako príležitosť na začiarknutie políčka hack, ale to nie je to, na čom dnes pracujeme.
Chceme k tlačidlu pripojiť „poslucháča udalostí“: trochu kódu na „počúvanie“, v našom prípade udalostí kliknutí, a keď k tomu dôjde, spustiť ďalší kód.
Viete, ako v CSS musíme „vyberať“ prvky, aby sme ich mohli upravovať? Musíme to urobiť aj v JavaScripte, aby sme pripojili nášho poslucháča udalostí. Vytvoríme „odkaz“ na toto tlačidlo ako premennú, napríklad takto:
var button = document.querySelector("button");Teraz, keď máme odkaz na toto tlačidlo, pripojíme daného poslucháča udalostí:
button.addEventListener("click", function() ( /* run code here, after the button is clicked. */ ));A čo chceme robiť v prípade kliknutia? Pridajte k našej skupine názov triedy! Ale rovnako ako sme potrebovali referenciu pre tlačidlo, aby sme s tým mohli robiť, budeme potrebovať referenciu aj pre div. Urobme ich obidve naraz, tu je celý kúsok kódu:
var button = document.querySelector("button"); var element = document.querySelector("div"); button.addEventListener("click", function() ( element.classList.toggle("yay"); ));To je celá vec, ktorú som ti chcel ukázať. S pridaním niektorých CSS do tejto triedy „yay“ môžeme rozbiť a vyblednúť div:
Prezrite si Pen Click Something / Change Class od Chrisa Coyiera (@chriscoyier) na CodePen.
Prečo táto jedna vec?
Možnosti ovládania sú nekonečné, keď ovládate CSS a stav ľubovoľného prvku (aký má názov triedy). Skrývanie a odhaľovanie vecí je zjavnou silou, ale naozaj to môže byť čokoľvek.
Zvyšovanie úrovne
Pamätajte, že sa neobmedzujete iba na zmenu jedného názvu triedy. Môžete zmeniť viac tried na jednom prvku alebo zmeniť triedy na viacerých prvkoch.
Prezrite si viac vlastnosť classList. „Prepnúť“ nie je jediná možnosť.
Rovnako ako HTML a CSS má JavaScript rôzne úrovne podpory prehľadávačov. Prezrite si podporu prehliadača pre classList a pridajte addEventListener. Ste v poriadku s takými úrovňami podpory pre váš projekt? Ak nie, mohli by ste sa pozrieť na polyfill alebo dokonca jQuery.
Použili sme udalosť „kliknutia“, ale existuje veľa ďalších. Ďalšie udalosti myši, posúvanie, klávesnica a ďalšie. Mnoho stoviek.
Metóda, ktorú sme použili na výber, bola document.querySelector. To bolo užitočné, pretože nám vracia jediný prvok, s ktorým môžeme pracovať. Selektory, ktoré zadáte, sú navyše ako selektory CSS. document.querySelector("#overlay .modal > h2");by bol legitímny výber. Toto nie je jediný spôsob výberu, existujú aj ďalšie, ako getElementById, querySelectorAll, getElementsByClassName a ďalšie.
Tu je príklad toho, kde vyberieme veľa navigačných položiek a ku všetkým pripojíme obslužný program kliknutí:
Prezrite si kurzy výmeny pera na webe Chrisa Coyiera (@chriscoyier) na stránke CodePen.
Keby sa nám nepodarilo načítať JavaScript, ktorý sme si napísali v našom malom príklade, z nejakého dôvodu by sme stále mali tlačidlo s textom „Click Me“. Ale jeho kliknutie by veľa neurobilo, že? Možno by sme mohli vložiť toto tlačidlo pomocou JavaScriptu, takže tlačidlo tam ani nie je, pokiaľ nevieme, že bude fungovať? Dobrý nápad, hm? ;)