Tautan-tautan membawa kamu ke suatu bagian dari sebuah halaman, ke halaman lain dari suatu situs web, atau ke situs web yang lain. Di sisi lain, tombol biasanya dimanipulasi oleh event (peristiwa) JavaScript sehingga mereka bisa memicu fungsionalitas tertentu. Show
Dalam tutorial ini, kita akan mengeksplorasi dua cara yang berbeda untuk mengeksekusi event klik di JavaScript menggunakan dua metode yang berbeda. Pertama-tama, kita akan melihat cara tradisional 4 yang bisa kamu terapkan di halaman HTML. Kemudian, kita akan melihat bagaimana cara "klik" 5, yang lebih modern, bekerja, yang dapat mengizinkanmu memisahkan HTML dari JavaScript.Cara Menggunakan Event <div> <p class="nama">freeCodeCamp</p> <button>Ubah menjadi biru</button> </div> 4 di JavaScriptEvent 4 menjalankan suatu fungsionalitas saat suatu tombol diklik. Contohnya saat seorang pengguna mengumpulkan formulir, saat kamu mengubah konten tertentu di halaman web, dan pada situasi-situasi lain seperti itu.Kamu menempatkan fungsi JavaScript yang ingin kamu jalankan di dalam tag pembuka tombolnya. Sintaksis <div> <p class="nama">freeCodeCamp</p> <button>Ubah menjadi biru</button> </div> 4 dasar
Contohnya
Ingatlah bahwa atribut 4 adalah JavaScript murni. Nilai yang diterima sudah jelas, yaitu fungsi apa yang ingin kamu jalankan, karena dia dipanggil di tag pembuka.Dalam JavaScript, kamu memanggil fungsi dengan menggunakan namanya, lalu menambahkan tanda kurung setelah pengenal fungsinya (namanya). Contoh Event <div> <p class="nama">freeCodeCamp</p> <button>Ubah menjadi biru</button> </div> 4Saya sudah mempersiapkan sedikit kode HTML sederhana dengan sedikit hiasan supaya kita bisa berlatih menggunakan event 4 dalam dunia nyata.
Dan di sini ada CSSnya juga, supaya jadi keren, bersamaan dengan semua sisa kode contohnya:
Jadi, di halaman web, inilah yang kita punya: Tujuan kita adalah untuk mengubah warna teks menjadi biru saat kita mengeklik tombolnya. Jadi, kita perlu menambahkan atribut 4 ke tombol kita, lalu menulis fungsi JavaScript untuk mengubah warnanya.Jadi, kita perlu membuat sedikit perubahan pada HTML kita:
Fungsi yang ingin kita jalankan adalah 3. Jadi, kita perlu menuliskannya dalam sebuah file JavaScript di dalam tag 4.Kalau kamu ingin menulis skrip kamu dalam file JavaScript, kamu harus menghubungkannya ke HTML menggunakan sintaksis di bawah ini:
Kalau kamu mau menulis skripnya dalam file HTML, simpan saja dalam tag script:
Sekarang, ayo kita tulis fungsi 3 kita.Pertama-tama, kita harus memilih elemen yang ingin kita manipulasi, yaitu tulisan freeCodeCamp dalam tag 6.Dalam JavaScript, kamu bisa melakukannya dengan metode DOM 7, 8, atau 9. Kemudian, kamu bisa menyimpannya dalam sebuah variabel.Dalam tutorial ini, saya akan menggunakan 9 karena dia lebih modern dan cepat. Saya juga akan menggunakan 1 untuk mendeklarasikan variabel-variabel kita alih-alih menggunakan 2 dan 3, karena menggunakan 1 lebih aman sebab variabelnya hanya bisa dibaca saja.
Sekarang, karena kita sudah mendapatkan tulisannya, mari kita buat fungsi kita. Dalam JavaScript, sintaksis fungsi dasarnya seperti ini:
Jadi, mari kita buat fungsi kita:
Apa yang sedang terjadi? Ingatlah, 3 adalah fungsi yang akan kita eksekusi. Itulah mengapa pengenal fungsinya (namanya) disetel menjadi 6. Jika namanya tidak berhubungan dengan apa yang ada di HTML, programnya tidak akan berjalan.Dalam DOM (Document Object Model atau Model Obyek Dokumen, merujuk kepada semua HTMLnya), untuk mengubah semua yang berkaitan dengan hiasan, kamu harus menulis “style” diikuti dengan titik (.). Dia diikuti dengan apa yang ingin kamu ubah, mungkin warna tulisannya, warna latar belakangnya, ukuran tulisan, dan lain-lain. Jadi, di dalam fungsi kita, kita akan mengambil nama variabel yang kita deklarasikan untuk mendapatkan tulisan freeCodeCampnya, kemudian kita akan ubah warnanya menjadi biru. Warna tulisan kita menjadi biru setiap kali tombolnya diklik: Kode kita berhasil! Kita bisa membuatnya lebih keren lagi dengan mengubah tulisan kita menjadi berwarna-warni: 0Jadi, apa yang kita mau lakukan sekarang adalah mengubah tulisannya menjadi biru, hijau, dan jingga. Sekarang, fungsi-fungsi 4 di HTML kita mengambil nilai-nilai warna untuk tulisan yang ingin kita ubah. Ini disebut dengan parameter dalam JavaScript. Fungsi yang akan kita tulis memilikinya juga: parameternya akan kita namakan "warna".Halaman web kita berubah sedikit: Jadi, mari kita ambil tulisan freeCodeCamp kita dan tulis fungsi untuk mengubah warnanya menjadi biru, hijau, dan jingga: 1Blok kode pada fungsi mengambil nama variabel (tempat kita menyimpan tulisan freeCodeCamp kita), kemudian menyetel warnanya menjadi warna apa saja sesuai warna yang kita berikan kepada fungsi-fungsi 3 dalam tombol-tombol HTML.Cara Menggunakan <div> <p class="nama">freeCodeCamp</p> <button>Ubah menjadi biru</button> </div> 5 click di JavaScriptDalam JavaScript, ada beberapa cara untuk melakukan hal yang sama. Seperti JavaScript sendiri telah berevolusi seiring berjalannya waktu, kita mulai memisahkan kode HTML, CSS, dan JavaScript supaya mengikuti praktek koding yang baik. Event listener (pendengar peristiwa) membuat hal ini mungkin dilakukan karena mereka mengizinkan kamu untuk memisahkan JavaScript dari HTML. Kamu juga bisa melakukannya dengan onclick, tetapi ayo kita coba pakai cara lain untuk saat ini. Sintaksis <div> <p class="nama">freeCodeCamp</p> <button>Ubah menjadi biru</button> </div> 5 dasar 2Sekarang, mari kita ubah tulisan freeCodeCamp menjadi biru menggunakan eventListener klik. Ini adalah HTML kita yang baru: 3Dan ini hasilnya: Untuk skrip yang sekarang, kita perlu mengambil tombolnya juga (bukan hanya tulisan freeCodeCampnya saja). Ini dilakukan karena tidak ada JavaScript di tag pembuka tombol kita, keren kan? Jadi, skrip kita sekarang terlihat seperti ini: 4Kita juga bisa memisahkan fungsi kita dari 5 dan fungsionalitasnya tetap sama: 5Cara Membuat Tombol "Lebih Banyak" dan "Lebih Sedikit" dengan JavaScriptSalah satu cara belajar terbaik adalah dengan membuat proyek, jadi mari kita gunakan apa yang sudah kita pelajari tentang 4 dan 5 "click" untuk membuat sesuatu.Saat kamu mengunjungi sebuah blog, kamu sering kali hanya bisa melihat sebagian artikelnya dulu. Sesudah itu, baru kamu bisa mengeklik tombol "baca selengkapnya" untuk melihat sisanya. Mari kita coba membuatnya. Ini adalah HTMLnya: 6Ini adalah HTML sederhana dengan beberapa fakta mengenai freeCodeCamp. Ada juga tombol yang sudah kami sisipkan 4. Fungsi yang mau kita jalankan adalah 5. Fungsi ini akan kita tulis sebentar lagi.Tanpa CSS, inilah yang kita punya: Ini ga gimana jelek, tapi kita bisa membuatnya menjadi lebih keren dan bekerja sesuai dengan apa yang kita mau. Jadi, kita punya sedikit CSS yang akan saya jelaskan di bawah ini: 7Apa yang CSS ini lakukan? Dengan pemilih universal ( 6), kita sedang menyingkirkan margin dan padding bawaan yang ditetapkan ke elemen-elemen, jadi kita bisa menambahkan margin dan padding kita sendiri.Kita juga punya box sizing (ukuran kotak) yang diisi dengan border-box jadi kita bisa memasukkan padding dan border dalam lebar dan tinggi total elemen. Kita juga membuat semua yang ada di body menjadi di tengah menggunakan Flexbox dan membuat warna latar belakangnya menjadi abu-abu cerah. Elemen 7 kita, yang berisi tulisan, memiliki lebar 8, latar belakang putih (#fff), dan padding 9 di atas, 9 di kiri dan kanan, dan 1 di bawah.Tag paragraf di dalamnya memiliki ukuran tulisan 2, lalu kita berikan juga tinggi maksimal 3. Karena adanya tinggi maksimal pada elemen artikel, tidak semua tulisan akan ditampung, sebagian akan meluap (overflow). Untuk memperbaikinya, kita akan menyetel overflow menjadi tersembunyi (hidden) supaya tulisannya tidak ditampilkan dulu.Properti transition memastikan bahwa semua perubahan terjadi setelah 1 detik. Semua tulisan dalam 4 dijustifikasi dan margin atasnya dibuat 20 piksel supaya tidak terlalu menempel ke halaman bagian atas.Karena kita sudah menyingkirkan margin bawaan, semua paragraf kita tertekan. Jadi, kita buat margin bawahnya menjadi 16 piksel supaya paragraf-paragrafnya terpisah satu sama lain. Penyeleksi kita, 5, memiliki properti 6 sebesar 7. Ini berarti, untuk setiap elemen artikel yang mengandung kelas 8, tinggi maksimalnya akan berubah dari 3 menjadi 7 untuk menunjukkan sisa artikelnya. Hal ini mungkin dilakukan karena JavaScript – sang pengubah permainan.Kita hias tombol kita dengan latar belakang gelap dan membuat warna tulisannya menjadi putih. Kita atur bordernya menjadi tidak ada (none) untuk menyingkirkan border HTML bawaan pada tombol, lalu kita berikan radius border 1 supaya tombolnya memiliki tepian yang bulat.Terakhir, kita gunakan pseudo-class 2 pada CSS untuk mengubah kursor tombol menjadi pointer (menunjuk). Warna latar belakang akan berubah sedikit saat pengguna melayangkan kursornya di atasnya.Sudah selesai – itulah CSSnya. Halaman kita sekarang lebih cantik: Hal selanjutnya yang harus kita lakukan adalah menulis JavaScript supaya kita bisa melihat sisa artikel yang disembunyikan. Kita punya atribut 4 dalam tag pembuka tombol kita yang siap menjalankan fungsi 5, jadi, ayo kita buat fungsinya.Kita harus mendapatkan artikel kita dulu, karena kita nanti akan menampilkan sisanya: 8Hal selanjutnya yang harus kita lakukan adalah menulis fungsi 5, jadi kita bisa berpindah-pindah antara melihat sisa artikel dan menyembunyikan sisanya. 9Apa yang dilakukan fungsi ini? Kita menggunakan pernyataan 6 di sini. Ini adalah bagian penting dari JavaScript yang membantumu membuat keputusan dalam kodemu jika suatu kondisi terpenuhi.Sintaksis dasarnya seperti ini: 0Di sini, jika nama kelas artikel sama dengan open (berarti kita ingin menambahkan kelas open di sini, yang sebelumnya disetel tinggi maksimalnya menjadi 1000px di CSS), maka kita ingin melihat sisa artikelnya. Sebaliknya, kita ingin artikelnya mengembalikan keadaannya menjadi seperti semula, yaitu sebagian tulisannya disembunyikan. Kita bisa melakukannya dengan menerapkan kelas open pada artikel di blok else, yang akan membuatnya menampilkan sisa artikelnya. Kemudian, kita setel kelasnya menjadi string kosong (none) di blok if, yang akan mengembalikannya ke kondisi semula. Kode kita sekarang bekerja dengan transisi yang mulus: Kita bisa memisahkan HTML dan JavaScript, namun tetap menggunakan 4, karena onclick itu JavaScript. Jadi, kita bisa menulis kode ini dalam file JavaScript alih-alih memulai dari HTML. 1Kita juga bisa menggunakan eventListener: 2 3Fungsionalitas kita tetap sama! A Video Explanation of HTML Button onclickKesimpulanSemoga tutorial ini membantumu memahami bagaimana event klik bekerja dalam JavaScript. Kita telah mengeksplorasi dua metode yang berbeda di sini, jadi sekarang kamu bisa mulai menggunakannya untuk proyek-proyek kodingan kamu. Terima kasih sudah membaca, tetaplah meng-koding. ADVERTISEMENT ADVERTISEMENT ADVERTISEMENT ADVERTISEMENT ADVERTISEMENT ADVERTISEMENT ADVERTISEMENT ADVERTISEMENT ADVERTISEMENT ADVERTISEMENT ADVERTISEMENT ADVERTISEMENT Web developer and technical writer focusing on frontend technologies. Read more posts. If you read this far, tweet to the author to show them you care. Tweet a thanks Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started Apa itu event JavaScript?Pada Javascript: Event adalah kejadian yang terjadi di halaman web. Kejadian yang dimaksud di sini seperti aktivitas yang dikerjakan pada halaman web.
Bagaimana cara memanggil fungsi di JavaScript?Cara Memanggil/Eksekusi Fungsi
Kita bisa memanggil fungsi di dalam kode Javascript dengan menuliskan nama fungsinya seperti ini: namaFungsi(); Contoh: // membuat fungsi function sayHello(){ console.log("Hello World!"); } // memanggil fungsi sayHello() // maka akan menghasilkan -> Hello World!
2 Apakah nama event yang terjadi ketika user mengklik suatu element HTML?onclick = adalah event jika sebuah element html di klik.
Apa itu OnMouseOut?OnMouseOut adalah suatu kejadian yang terjadi ketika cursor mouse meninggalkan elemen html.
|