Terkadang, untuk memulai perjalanan mempelajari sesuatu yang besar dan kompleks, Anda perlu mempelajari sesuatu yang kecil dan sederhana. JavaScript itu besar dan kompleks, tetapi Anda dapat melangkah ke dalamnya dengan mempelajari hal-hal kecil dan sederhana. Jika Anda seorang desainer web, menurut saya ada satu hal khusus yang dapat Anda pelajari yang sangat bermanfaat.
Ini adalah hal yang saya ingin Anda pelajari: Saat Anda mengklik beberapa elemen, ubah kelas pada beberapa elemen.
Mendidih ke hal-hal penting mutlak, bayangkan kita memiliki tombol dan div:
Click Me I'm an element Div dapat memiliki beberapa gaya dasar dan ia dapat memiliki beberapa gaya ketika ia memiliki kelas tertentu:
div ( /* base styles */ ) div.yay ( /* styles when it has this class */ )CSS-Tricksters yang cerdik mungkin mengenali ini sebagai peluang untuk peretasan kotak centang, tetapi bukan itu yang kami kerjakan hari ini.
Kami ingin melampirkan "event listener" ke tombol: sedikit kode untuk "mendengarkan", dalam kasus kami, klik event, dan ketika itu terjadi, jalankan lebih banyak kode.
Anda tahu bagaimana di CSS kita perlu "memilih" elemen untuk menatanya? Kita perlu melakukannya di JavaScript juga untuk melampirkan pendengar acara kita. Kami akan membuat "referensi" ke tombol, sebagai variabel, seperti ini:
var button = document.querySelector("button");Sekarang setelah kita memiliki referensi ke tombol tersebut, kita akan melampirkan event listener itu:
button.addEventListener("click", function() ( /* run code here, after the button is clicked. */ ));Dan apa yang ingin kita lakukan jika terjadi klik? Tambahkan nama kelas ke div kami! Tapi sama seperti kita membutuhkan referensi untuk tombol tersebut untuk melakukan sesuatu dengannya, kita juga membutuhkan referensi untuk div. Mari kita lakukan keduanya pada saat yang sama, berikut seluruh bagian kodenya:
var button = document.querySelector("button"); var element = document.querySelector("div"); button.addEventListener("click", function() ( element.classList.toggle("yay"); ));Itu semua yang ingin saya tunjukkan kepada Anda. Dengan beberapa CSS yang ditambahkan ke kelas "yay" itu, kita dapat menghilangkan div:
Lihat Pena Klik Sesuatu / Ubah Kelas oleh Chris Coyier (@chriscoyier) di CodePen.
Mengapa satu hal ini?
Kemungkinan desain tidak terbatas saat Anda mengontrol CSS dan status elemen apa pun (nama kelas yang dimilikinya). Menyembunyikan dan mengungkapkan sesuatu adalah kekuatan yang jelas, tetapi bisa jadi apa saja.
Naik Level
Ingatlah bahwa Anda tidak dibatasi untuk mengubah satu nama kelas. Anda dapat mengubah beberapa kelas pada satu elemen atau mengubah kelas pada beberapa elemen.
Lihat properti classList lebih lanjut. “Toggle” bukanlah satu-satunya pilihan.
Sama seperti HTML dan CSS, JavaScript memiliki tingkat dukungan browser yang berbeda untuk berbagai hal. Lihat dukungan browser untuk classList dan tambahkan addEventListener. Apakah Anda setuju dengan tingkat dukungan tersebut untuk proyek Anda? Jika tidak, Anda dapat melihat polyfills, atau bahkan jQuery.
Kami menggunakan acara "klik", tetapi ada banyak yang lainnya. Peristiwa mouse lainnya, scrolling, keyboard, dan lainnya. Ratusan.
Metode yang kami gunakan untuk memilih adalah document.querySelector. Ini berguna karena mengembalikan satu elemen untuk kita kerjakan. Plus, penyeleksi yang Anda berikan sama seperti pemilih CSS. document.querySelector("#overlay .modal > h2");akan menjadi pilihan yang sah. Ini bukan satu-satunya metode untuk memilih, ada metode lain seperti getElementById, querySelectorAll, getElementsByClassName, dan banyak lagi.
Berikut adalah contoh di mana kami memilih sekumpulan item navigasi dan melampirkan click handler ke semuanya sekaligus:
Lihat Kelas Perubahan Pena pada Barang oleh Chris Coyier (@chriscoyier) di CodePen.
Jika JavaScript yang kami tulis dalam contoh kecil kami gagal dimuat karena alasan apa pun, kami masih memiliki tombol yang bertuliskan "Klik Saya". Tapi mengkliknya tidak akan banyak membantu, bukan? Mungkin kita bisa memasukkan tombol itu dengan JavaScript, jadi tombol itu bahkan tidak ada kecuali kita tahu itu akan berfungsi? Ide bagus, ya? ;)