Kode Javascript yang kita pelajari selama ini, selalu langsung dijalankan pada saat halaman kita dibuka. Pada kenyataannya, kode Javascript lebih banyak yang tidak langsung dijalankan, melainkan harus menunggu suatu peristiwa atau event terlebih dahulu. Peristiwa apa? Biasanya yang ditunggu adalah interaksi yang dilakukan oleh pengunjung terhadap situs kita. Interaksi ini bisa berupa mengklik navigasi, tombol ataupun gambar, bisa juga dengan cara mengetikkan teks pada input, melakukan copy + paste, mencetak halaman, mengubah ukuran browser, dan lain-lain.

Sebagai contoh, disini saya sudah membuka situs Twitter. Kita bisa melakukan banyak interaksi dengan halaman Twitter ini. Contohnya, pada setiap postingan ada icon titik-titik, yang kalau kita klik bisa menunjukkan apa saja interaksi yang bisa kita lakukan terhadap postingan ini. Kemudian di bagian paling atas kita bisa mengetikkan teks yang hendak kita tweet. Dan untuk setiap teks yang kita ketik, twitter menghitung jumlah hurufnya agar tidak melebihi jumlah maksimal. Kita juga bisa menambahkan gambar, video, emoticon, location dan lain-lain ke dalam postingan kita.

Kemudian ini adalah contoh halaman yang hendak kita buat pada video ini. Jadi pada saat halaman kita ditampilkan oleh browser, tidak ada kode Javascript yang dijalankan. Browser menampilkan satu tombol dan menunggu kita melakukan interaksi terhadap halaman ini. Pada saat kita menekan tombol tersebut, barulah browser menjalankan kode Javascript yang menampilkan pesan “Hello World” dalam bentuk popup.

Inilah yang kita sebut dengan Event. Dengan menggunakan Event Handler, maka kita bisa mengatur kode-kode Javascript mana saja yang akan dijalankan pada saat terjadi suatu peristiwa atau Event.

Kita mulai coding ya. Saya telah menyediakan satu buah file HTML yang isinya hanya boilerplate. Pertama kita tambahkan dahulu sebuah tombol dengan menggunakan tag Button. Kemudian teksnya kita tulis Klik Disini.

Kalau kita jalankan di browser, maka hanya ada satu buah tombol. Dan apabila tombol ini kita tekan, maka tidak terjadi apa-apa. Karena kita belum menambahkan kode Javascript untuk peristiwa tombol ditekan.

Bagaimana cara menambahkan event-nya? Nah, dalam video ini kita akan membahas mengenai beberapa cara untuk menambahkan event handler. Yang pertama kita gunakan cara inline terlebih dahulu. Kita bisa menambahkan attribute yang sesuai dengan jenis event yang akan menjalankan kode kita. Sebagai contoh, kalau kita ingin agar kode dijalankan pada saat tombol diklik, maka jenis event-nya adalah onclick. Jadi kita tambahkan attribute onclick. Berhubung attribute onclick ini masih adalah bahasa HTML, maka kita bisa terserah menggunakan huruf besar atau kecil ataupun camel case. Namun biasanya yang digunakan adalah huruf kecil semua.

Nilai dari attribute ini adalah kode Javascript yang akan dijalankan pada saat tombol diklik. Sebagai contoh, yang gampang saja ya, kita tampilkan popup tulisan “Hello World”. Kita bisa memanggil fungsi alert, dengan argument string “Hello World”.

Kita simpan dan jalankan di browser. Sekarang tombol kita sudah berhasil menampilkan tulisan “Hello World”. Sebenarnya tujuan akhir dari video ini sudah tercapai disini. Namun kita akan bahas lebih dalam lagi mengenai event handler ya. Terutama karena cara yang sedang kita gunakan sekarang adalah cara yang paling jelek dan sangat tidak disarankan untuk digunakan.

Mengapa jelek? Kita lihat kembali kode HTML kita. Disini terjadi kerancuan. Karena semua nilai yang berada di dalam attribute onclick ini adalah bahasa Javascript. Sedangkan kita berada di dalam file HTML. Artinya kita harus menulis Javascript di dalam HTML, sehingga tidak sesuai dengan konsep pemisahan antara HTML, CSS dan Javascript.

Kelemahan kedua, perhatikan bahwa kita menuliskan kode Javascript sebagai nilai dari attribute. Yang berada di dalam tanda petik. Artinya kode Javascript kita tidak boleh mengandung tanda petik. Kalau misalkan kita lupa, dan membuat string Hello World ini dalam tanda petik. Maka kode kita menjadi error. Mengapa? Karena yang dianggap sebagai kode Javascript hanya tulisan alert hingga tanda buka kurung saja. Begitu browser menemukan tanda petik, maka browser menganggapnya sebagai akhir dari nilai attribute. Bagian berikutnya akan diproses sebagai kode html, dalam hal ini akan diganggap sebagai attribute berikutnya.

Kelemahan ketiganya adalah, kita akan merasa tidak nyaman untuk menuliskan kode Javascript yang panjang disini. Sebagai contoh, kalau misalkan kita hendak menambahkan kode kedua. Maka kita harus memberikan tanda titik koma, kemudian kita tambahkan lagi misalkan alert kedua. Kalau kita coba, kode bisa berjalan normal ya. Namun cara penulisan kode Javascript seperti ini tidak nyaman. Apalagi kalau kode kita panjang, hingga kita perlu memakai sintaks seperti if for, dan lain-lain.

Dan kelemahan terakhir, kode Javascript yang kita tuliskan ini hanya bisa dijalankan untuk tombol ini saja. Misalkan kita membuat tombol kedua, maka pada saat kita menekan tombol kedua, tidak terjadi apa-apa. Apabila kita ingin agar tombol kedua turut menjalankan kode Javascript yang sama, maka kita harus mengcopy attribute onclick beserta seluruh kode Javascriptnya. Artinya terjadi penggandaan kode. Disini ada kode Javascript yang diulangi sebanyak 2 kali. Dan apabila kita memerlukan banyak tombol, maka kita harus mengulangi kode Javascript ini sebanyak tombol yang ada.

Beberapa cara berikutnya lebih disarankan untuk digunakan, karena kita menuliskan kode Javascript secara terpisah dari kode HTML. Namun sebelum melanjutkan, kita tambahkan dahulu attribute id pada kedua tombol kita, agar kita bisa lebih mudah untuk memilih tombol tersebut. Kita tambahkan id button1 dan button2. Lalu kita hapus attribute onclick. Sebelum tag penutup body, kita tambahkan tag script dengan attribute src menuju ke dom.js. Disini saya sudah menyediakan file dom.js namun isinya masih kosong ya.

Kita jalankan di browser. Saat ini kedua button masih belum memiliki event handler, sehingga apabila diklik maka tidak terjadi apa-apa. Kita buka console. Kita sudah belajar dari video sebelumnya ya. Di dalam Javascript, kita bisa memilih tombol dengan menggunakan method document.getElementById(“button1”).

Yang tampil di console adalah kode HTML dari button1. Apabila kita ingin melihatnya sebagai object, maka kita bisa menambahkan perintah console.dir. Kita bisa klik anak panah pada objectnya, dan kita bisa melihat banyak property dan method dari object ini. Kalau kita scroll hingga ke bawah, maka kita akan mendapatkan banyak property yang nama depannya adalah on. Semua property ini adalah event handler. Property bisa kita isi dengan function yang akan dijalankan apabila event terjadi. Sebagai contoh, yang kita pelajari pada video ini adalah event onclick. Perhatikan bahwa tulisan onclick menggunakan huruf kecil semua, begitu juga semua property yang berhubungan dengan event.

Kita kembali ke kode Javascript. Pertama kita buat dahulu function yang akan dijalankan apabila tombol diklik. Kita namakan function hello. Isinya hanya alert kata “Hello World”.

function hello()
{
  alert("Hello World");
}

Kemudian function ini mesti ke assign ke dalam property onclick dari button1. Caranya? Pertama kita lakukan dahulu DOM Selection terhadap button1. Lalu kita pilih property onclick dan kita isikan dengan hello.

document.getElementById("button1").onclick = hello;

Kita simpan dan jalankan di browser. Sekarang apabila kita mengklik tombol pertama, maka akan muncul tulisan “Hello World”. Sedangkan tombol kedua tidak melakukan apa-apa.

Apabila kita ingin agar fungsi hello juga dijalankan pada saat tombol kedua diklik, maka kita harus mengisikan juga property onclick pada button2. Caranya kita tinggal copy paste saja satu baris terakhir kita. Lalu kita ubah argumentnya menjadi button2.

document.getElementById("button2").onclick = hello;

Dan sekarang kedua tombol akan menampilkan tulisan Hello World pada saat ditekan.

Kita sudah belajar mengenai cara kedua untuk menuliskan event handler, yaitu dengan menggunakan property. Cara ini sudah lebih baik daripada cara inline, karena kita menuliskan kode Javascript secara terpisah di file dom.js. Namun disini masih ada yang kurang konsisten, karena kita menuliskan semua kode Javascript dengan menggunakan Camel Case. Namun khusus untuk nama property event, semuanya harus menggunakan huruf kecil. Dan bagi teman-teman yang salah menuliskan onClick menggunakan huruf C besar, akan menyebabkan tombol tidak melakukan apa-apa pada saat diklik.

Cara ketiga untuk menuliskan event handler adalah dengan menggunakan Method addEventListener. Ini adalah cara yang paling disarankan untuk pengaturan event. Bagaimana contoh cara menggunakannya? Pertama kita komentari dahulu kedua baris kode yang menggunakan property onclick ini. Lalu kita copy paste kode button1 ya. Kita ganti property onclick-nya menjadi memanggil method addEventListener. Disini kita memerlukan 2 buah argument. Yang pertama adalah jenis event yang akan menjalankan kode kita, berhubung yang kita inginkan adalah pada saat tombol ditekan, maka jenis eventnya adalah “click”. Perhatikan bahwa jenis event disini tidak menggunakan kata on. Dan semuanya menggunakan huruf kecil. Argument kedua adalah nama function yang akan dijalankan apabila event terjadi, kita isikan dengan hello.

Kita simpan dan jalankan di browser. Apabila tombol pertama diklik, maka muncul tulisan Hello World.

Sekarang muncul pertanyaan, mengapa addEventListener lebih baik daripada property onclick? Nah, untuk menjawab hal ini, maka kita perlu menambahkan fungsi kedua yang perlu dijalankan apabila tombol diklik. Kita tambahkan fungsi baru dengan nama again. Isinya hanya alert(“Hello Again”).

function again()
{
  alert("Hello Again");
}

Kemudian di bagian paling bawah, kita tambahkan addEventListener baru untuk fungsi again.

document.getElementById("button1").addEventListener("click", again);

Kalau kita simpan dan jalankan di browser, maka pada saat tombol ditekan, pertama browser menampilkan kata “Hello World”, kemudian diikuti dengan kata “Hello Again”. Artinya kedua fungsi dijalankan secara berurutan.

Apa yang terjadi akan berbeda apabila kita menggunakan property onclick. Pertama kita komentari dahulu kode addEventListener. Kemudian kita aktifkan kembali property onclick pada button1. Kita tambahkan kode baru untuk meng-assign property onclick ke fungsi again.

Kita simpan dan jalankan di browser, dan sekarang pada saat tombol ditekan, browser hanya menampilkan kata “Hello Again”. Artinya fungsi pertama dihapus, dan digantikan menjadi fungsi again.

Ini adalah perbedaan antara menggunakan property onclick dengan method addEventListener. Method addEventListener lebih baik karena tidak menghapus fungsi yang telah ditambahkan ke EventListener. Pada saat kita mengerjakan proyek besar yang menggunakan banyak programmer, maka event yang kita tulis tidak menghapus event yang telah ditulis oleh programmer lain. Dan ada kalanya juga kita lebih mudah memisahkan kode event kita menjadi beberapa function terpisah, daripada menggabungkannya menjadi satu buah function berukuran besar. Jadi fungsi-fungsi yang diperlukan untuk event, bisa kita tambahkan menggunakan method addEventListener. Sedangkan fungsi-fungsi yang sudah tidak diperlukan bisa kita hapus menggunakan method removeEventListener.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.