Ponekad, da biste započeli putovanje u učenje nečega ogromnog i složenog, morate naučiti nešto malo i jednostavno. JavaScript je ogroman i složen, ali u njega možete zakoračiti učeći male i jednostavne stvari. Ako ste web dizajner, mislim da posebno možete naučiti jednu stvar koja izuzetno osnažuje.
To je stvar koju želim da naučite: Kada kliknete na neki element, promijenite klasu na nekom elementu.
Svodijući to na apsolutno najvažnije, zamislimo da imamo gumb i div:
Click Me I'm an element Div može imati neke osnovne stilove i može imati neke stilove kada ima određenu klasu:
div ( /* base styles */ ) div.yay ( /* styles when it has this class */ )Oštroumni CSS-prevaranti to bi mogli prepoznati kao priliku za hakiranje potvrdnog okvira, ali to nije ono na čemu danas radimo.
Na gumb želimo priložiti "slušatelj događaja": malo koda za "preslušavanje", u našem slučaju, kliknite događaje, a kada se to dogodi, pokrenite još koda.
Znate kako u CSS-u moramo "odabrati" elemente kako bismo ih oblikovali? To moramo učiniti i u JavaScript-u da bismo priključili našeg slušatelja događaja. Stvorit ćemo "referencu" na gumb, kao varijablu, poput ove:
var button = document.querySelector("button");Sad kad imamo referencu na gumb, priložit ćemo slušatelj događaja:
button.addEventListener("click", function() ( /* run code here, after the button is clicked. */ ));A što želimo učiniti u slučaju klika? Dodajte naziv klase u naš div! No, baš kao što nam je trebala referenca za gumb kako bismo to učinili, trebat će nam referenca i za div. Učinimo ih obje istovremeno, evo cijelog dijela koda:
var button = document.querySelector("button"); var element = document.querySelector("div"); button.addEventListener("click", function() ( element.classList.toggle("yay"); ));To je cijela stvar koju sam vam želio pokazati. Uz dodavanje CSS-a toj klasi "yay", možemo prelaziti i uklanjati div:
Pogledajte Pen Pen Something / Change Class autora Chrisa Coyiera (@chriscoyier) na CodePen-u.
Zašto ovo jedno?
Mogućnosti dizajna su bezbrojne kada kontrolirate CSS i stanje bilo kojeg elementa (koja imena klasa ima). Skrivanje i otkrivanje stvari očita je snaga, ali doista može biti sve.
Izravnavanje
Imajte na umu da niste ograničeni na promjenu imena jednog predmeta. Možete promijeniti više klasa na jednom elementu ili klase na više elemenata.
Pogledajte svojstvo classList više. "Prebaci" nije jedina opcija.
Baš kao i HTML i CSS, JavaScript ima različite razine podrške preglednika za stvari. Potražite podršku za preglednik za classList i dodajte addEventListener. Jeste li dobro s tim razinama podrške za svoj projekt? Ako ne, možete pogledati polifil ili čak jQuery.
Koristili smo događaj "klik", ali ima puno drugih. Ostali događaji miša, pomicanje, tipkovnica i još mnogo toga. Mnogo stotina.
Metoda koju smo koristili za odabir bila je document.querySelector. Ovo je bilo korisno jer vraća jedan element s kojim možemo raditi. Osim toga, selektori koje mu date su baš poput CSS selektora. document.querySelector("#overlay .modal > h2");bila bi legitimna selekcija. Ovo ipak nije jedina metoda odabira, postoje i druge poput getElementById, querySelectorAll, getElementsByClassName i još mnogo toga.
Evo primjera gdje odabiremo hrpu stavki za navigaciju i na njih odjednom priložimo obrađivač klikova:
Pogledajte satove o promjeni olovke na stvarima Chrisa Coyiera (@chriscoyier) na CodePenu.
Ako se JavaScript koji smo napisali u našem malom primjeru iz bilo kojeg razloga nije uspio učitati, i dalje ćemo imati gumb na kojem piše "Klikni me". Ali ako klikneš, ne bi bilo puno, zar ne? Možda bismo taj gumb mogli umetnuti s JavaScriptom, tako da ga čak nema ni ako ne znamo da će raditi? Dobra ideja, a? ;)