Czasami, aby rozpocząć podróż do nauki czegoś wielkiego i złożonego, musisz nauczyć się czegoś małego i prostego. JavaScript jest ogromny i złożony, ale możesz w niego wkroczyć, ucząc się małych i prostych rzeczy. Jeśli jesteś projektantem stron internetowych, myślę, że jest jedna rzecz, której możesz się nauczyć, a która jest niezwykle inspirująca.
To jest to, czego chcę, żebyś się nauczył: Kiedy klikniesz na jakiś element, zmień klasę na jakimś elemencie.
Sprowadzając to do absolutnych podstaw, wyobraź sobie, że mamy przycisk i element div:
Click Me I'm an element Element div może mieć style podstawowe i może mieć style, jeśli ma określoną klasę:
div ( /* base styles */ ) div.yay ( /* styles when it has this class */ )Wnikliwi CSS-Tricksters mogą uznać to za okazję do włamania się do pól wyboru, ale nie nad tym dzisiaj pracujemy.
Chcemy dołączyć do przycisku „detektor zdarzeń”: fragment kodu do „nasłuchiwania”, w naszym przypadku, zdarzeń kliknięcia, a kiedy to się stanie, uruchom więcej kodu.
Wiesz, jak w CSS musimy „wybierać” elementy, aby nadać im styl? Musimy to zrobić również w JavaScript, aby dołączyć nasz detektor zdarzeń. Utworzymy „odniesienie” do przycisku jako zmienną, na przykład:
var button = document.querySelector("button");Teraz, gdy mamy odniesienie do przycisku, dołączymy ten detektor zdarzeń:
button.addEventListener("click", function() ( /* run code here, after the button is clicked. */ ));A co chcemy zrobić w przypadku kliknięcia? Dodaj nazwę klasy do naszego div! Ale tak jak potrzebowaliśmy odwołania do przycisku, aby zrobić z nim coś, będziemy również potrzebować odwołania do elementu div. Zróbmy je jednocześnie, oto cały fragment kodu:
var button = document.querySelector("button"); var element = document.querySelector("div"); button.addEventListener("click", function() ( element.classList.toggle("yay"); ));To wszystko, co chciałem ci pokazać. Po dodaniu CSS do tej klasy „yay” możemy wprowadzać i wyłączać div:
Zobacz artykuł Pen Click Something / Change Class autorstwa Chrisa Coyiera (@chriscoyier) na CodePen.
Skąd ta jedna rzecz?
Możliwości projektowania są nieograniczone, gdy kontrolujesz CSS i stan dowolnego elementu (jakie ma nazwy klas). Ukrywanie i ujawnianie rzeczy to oczywista moc, ale naprawdę może to być wszystko.
Zdobywanie kolejnych poziomów
Pamiętaj, że nie jesteś ograniczony do zmiany nazwy jednej klasy. Możesz zmienić wiele klas w jednym elemencie lub zmienić klasy w wielu elementach.
Przyjrzyj się bliżej właściwości classList. „Przełącz” nie jest jedyną opcją.
Podobnie jak HTML i CSS, JavaScript ma różne poziomy obsługi przeglądarek. Zapoznaj się z obsługą przeglądarki dla classList i dodaj addEventListener. Czy zgadzasz się z takim poziomem wsparcia dla swojego projektu? Jeśli nie, możesz zajrzeć do polyfillów, a nawet jQuery.
Użyliśmy zdarzenia „kliknięcia”, ale jest też mnóstwo innych. Inne zdarzenia myszy, przewijanie, klawiatura i nie tylko. Wiele setek.
Metoda, której użyliśmy do wyboru, to document.querySelector. Było to przydatne, ponieważ zwraca nam pojedynczy element do pracy. Dodatkowo selektory, które mu dajesz, są takie same jak selektory CSS. document.querySelector("#overlay .modal > h2");byłby uzasadnionym wyborem. Nie jest to jedyna metoda wyboru, istnieją inne, takie jak getElementById, querySelectorAll, getElementsByClassName i inne.
Oto przykład, w którym wybieramy kilka elementów nawigacyjnych i dołączamy moduł obsługi kliknięcia do wszystkich na raz:
Zobacz zajęcia dotyczące zmiany pióra w materiałach autorstwa Chrisa Coyiera (@chriscoyier) w witrynie CodePen.
Jeśli JavaScript, który napisaliśmy w naszym małym przykładzie, nie załadował się z jakiegokolwiek powodu, nadal mielibyśmy przycisk z napisem „Kliknij mnie”. Ale kliknięcie nie dałoby dużo, prawda? Może moglibyśmy wstawić ten przycisk za pomocą JavaScript, więc go nie ma, chyba że wiemy, że zadziała? Dobry pomysł, co? ;)