Někdy se na cestě k učení něčeho obrovského a složitého musíte naučit něco malého a jednoduchého. JavaScript je obrovský a složitý, ale můžete do něj vstoupit učením malých a jednoduchých věcí. Pokud jste webový designér, myslím, že se můžete dozvědět zejména jednu věc, která je nesmírně zmocňující.
To je věc, kterou se chci naučit: Když kliknete na nějaký prvek, změňte třídu na nějakém prvku.
Když to zredukujeme na absolutní základy, představte si, že máme tlačítko a div:
Click Me I'm an element Div může mít některé základní styly a může mít některé styly, když má konkrétní třídu:
div ( /* base styles */ ) div.yay ( /* styles when it has this class */ )Vychytralí CSS-Tricksterové to možná rozpoznají jako příležitost pro hacknutí zaškrtávacího políčka, ale na tom dnes nepracujeme.
Chceme k tlačítku připojit „posluchače událostí“: trochu kódu, který „naslouchá“, v našem případě události kliknutí, a když k tomu dojde, spusťte více kódu.
Víte, jak v CSS musíme „vybrat“ prvky, abychom je mohli stylovat? Musíme to udělat i v JavaScriptu, abychom připojili našeho posluchače událostí. Vytvoříme „odkaz“ na tlačítko jako proměnnou, například takto:
var button = document.querySelector("button");Teď, když máme odkaz na tlačítko, připojíme posluchače událostí:
button.addEventListener("click", function() ( /* run code here, after the button is clicked. */ ));A co chceme dělat v případě kliknutí? Přidejte název třídy do naší div! Ale stejně jako jsme potřebovali odkaz na tlačítko, abychom s ním mohli dělat věci, budeme potřebovat odkaz také na div. Pojďme je udělat oba najednou, tady je celý bit kódu:
var button = document.querySelector("button"); var element = document.querySelector("div"); button.addEventListener("click", function() ( element.classList.toggle("yay"); ));To je celá věc, kterou jsem vám chtěl ukázat. S přidáním některých CSS do této třídy „yay“ můžeme div a fade div:
Podívejte se na Pen Click Something / Change Class od Chrisa Coyiera (@chriscoyier) na CodePen.
Proč tato jedna věc?
Možnosti návrhu jsou nekonečné, když ovládáte CSS a stav libovolného prvku (jaké názvy tříd má). Skrývání a odhalování věcí je zjevná síla, ale ve skutečnosti to může být cokoli.
Zvyšování úrovně
Nezapomeňte, že se neomezujete pouze na změnu názvu jedné třídy. Můžete změnit více tříd na jednom prvku nebo změnit třídy na více prvcích.
Podívejte se více na vlastnost classList. „Přepnout“ není jediná možnost.
Stejně jako HTML a CSS má JavaScript různé úrovně podpory prohlížeče. Podívejte se do podpory prohlížeče pro classList a přidejte addEventListener. Jste v pořádku s takovými úrovněmi podpory pro váš projekt? Pokud ne, můžete se podívat na polyfill nebo dokonce jQuery.
Použili jsme událost „kliknutí“, ale existuje spousta dalších. Další události myši, posouvání, klávesnice a další. Mnoho stovek.
Metoda, kterou jsme použili pro výběr, byla document.querySelector. To bylo užitečné, protože nám vrací jeden prvek, se kterým můžeme pracovat. Selektory, které mu dáte, jsou navíc jako selektory CSS. document.querySelector("#overlay .modal > h2");by byl legitimní výběr. Toto není jediná metoda pro výběr, existují i jiné, jako getElementById, querySelectorAll, getElementsByClassName a další.
Zde je příklad, kde vybereme spoustu položek navigace a ke všem připojíme obslužný program kliknutí:
Podívejte se na kurzy Pen Change on Stuff od Chris Coyier (@chriscoyier) na CodePen.
Pokud se JavaScript, který jsme napsali v našem malém příkladu, z nějakého důvodu nepodařilo načíst, měli bychom stále tlačítko s nápisem „Click Me“. Ale jeho kliknutí by sakra moc neudělalo, že? Možná bychom mohli toto tlačítko vložit pomocí JavaScriptu, takže tlačítko tam ani není, pokud nevíme, že bude fungovat? Dobrý nápad, hm? ;)