Pengenalan Browser Object Model, Document Object Model, dan Event

Pada modul sebelumnya kita telah mempelajari seluk-beluk bahasa pemrogramanan JavaScript. Lantas, bagaimana JavaScript mempunyai pengaruh terhadap aspek Front-End dari sebuah halaman web? Dalam modul inilah kita akan menemukan keajaiban JavaScript untuk membuat halaman web kita menjadi interaktif.

Kita akan mempelajari hal baru yang bernama Browser Object Model (BOM), Document Object Model (DOM), dan Event. Kita akan berinteraksi dengan hal-hal tersebut melalui JavaScript sehingga kita bisa memperlakukan laman web dengan hal-hal unik yang belum tentu bisa dicapai dengan hanya menggunakan HTML dan CSS saja. Oleh karena itu, di modul ini diharapkan Anda dapat mengetahui dan memahami beberapa hal berikut.

  • Browser Object Model (BOM)
  • Member dari BOM beserta fungsinya
  • Document Object Model (DOM)
  • Bagaimana DOM Tree terbentuk
  • Mampu mengubah konten website melalui teknik manipulasi DOM
  • Event dan macam-macamnya
  • Mampu menambahkan Event Handler pada HTML Element
  • Custom Event serta mampu membuat dan menggunakannya
  • Konsep dari Event Bubbling dan Event Capturing
  • Event yang berada pada elemen <form>
  • Event yang berada pada elemen <input>

Mari kita bersiap untuk membuat aspek Front-End Anda menjadi lebih keren. Let's Go!


Cara JavaScript Mengontrol Website dan Browser

Setelah membaca materi sebelumnya, maka akan muncul pertanyaan “Bagaimana JavaScript mengontrol sebuah website atau browser?” Jawabannya ada dua, dan keduanya akan kita bahas di modul ini, yakni melalui Browser Object Model (BOM) dan Document Object Model (DOM).

Yang pertama adalah BOM. Dengan BOM, kita dapat memberikan perintah-perintah khusus ke browser, misalnya melalui sebuah ‘atribut’ khusus milik browser yakni ‘window’ (akan kita membahasnya pada materi selanjutnya), sehingga kita bisa membuat browser menampilkan pesan pop-up. Caranya yakni menjalankan method alert() pada console milik browser. Berikut contohnya:


Selain method alert(), objek window juga memiliki method-method lainnya, seperti prompt, console, dsb. Tenang, kita akan berjelajah lebih jauh pada modul-modul selanjutnya.

Cara kedua adalah DOM. DOM sama seperti BOM. Perbedaannya adalah kita menggunakan global objek bernama document. Melalui global objek ini, kita bisa menangkap seluruh elemen dalam dokumen HTML guna memanipulasi konten HTML melalui method getElementById(). Method ini akan menangkap elemen berdasarkan value dari atribut id. Sebagai contoh, kita mengubah konten elemen HTML berikut ini.


Pada contoh yang kita pelajari di atas merupakan contoh yang sangat sederhana. Kita dapat melakukan lebih banyak hal lainnya, seperti mengubah konten elemen, memberikan event tertentu pada elemen, dan sebagainya.

Melalui contoh di atas, kita telah menggunakan console milik browser untuk menjalankan kode program JavaScript. Tentunya jika kita mengembangkan website tidak menggunakan pendekatan seperti ini. Ada cara lain dalam menulis kode JavaScript, yakni melalui berkas HTML secara langsung.

Di materi berikutnya, kita pelajari cara menyematkan kode JavaScript dengan dokumen HTML. Sudah penasaran, kan? Ayo kita menuju ke submodul berikutnya.


Menambahkan JavaScript di Website

Ketika membuat berkas html, tentu kita sudah tidak asing dengan tag html, bukan? Contohnya, seperti tag <html>, <style>, <p>, <div>, beserta tag-tag lainnya. Nah, jika kita sudah familier dengan gaya penulisan tag dalam sebuah berkas html, menambahkan kode JavaScript ke dalam berkas HTML akan lebih mudah. Mengapa demikian? Karena kita hanya perlu menggunakan tag <script> sebagai pembuka dan tag </script> sebagai penutup.

Ada dua cara untuk memasukkan kode JavaScript ke dalam berkas HTML kita, yakni secara internal dan external. Hmm, tampaknya terdengar familier? Betul! Hal ini mirip dengan cara menyematkan berkas CSS ke dokumen HTML, bukan?

Andaikan kita ingin meminta input dari user pada sebuah box yang muncul. Input tersebut berisi nama dari user dan akan kita munculkan kembali nama dari user tersebut pada sebuah box. Berikut adalah bentuknya dalam kode JavaScript:

const tamu = prompt('Siapakah Anda?');
alert('Selamat datang ' + tamu + '!');

Lalu kita siapkan juga berkas HTML bernama index.html dan strukturnya seperti di bawah ini:

<!DOCTYPE html>
<html>
  <body>
    <h2 id="pesan">Selamat datang!</h2>
  </body>
</html>

Nah, dari kedua kode program di atas, selanjutnya kita mempelajari cara memasukkan kode JavaScript ke dalam berkas HTML. Bagaimana caranya? Perhatikan pembahasan di bawah ini.


Internal JavaScript

Pertama, kita akan membahas cara menulis sintaks untuk memasukkan kode JavaScript secara internal terlebih dahulu. Caranya cukup mudah layaknya menulis CSS secara internal pada berkas HTML. Cukup tuliskan kode JavaScript kita diantara tag pembuka dan penutup (<script>> dan </script>). Contohnya adalah sebagai berikut.

<!DOCTYPE html>
<html>
  <body>
    <h2 id="pesan">Selamat datang!</h2>
 
    <script>
      const tamu = prompt('Siapakah Anda?');
      alert('Selamat datang ' + tamu + '!');
    </script>
  </body>
</html>

Cukup sederhana, bukan?


External JavaScript

Berikutnya kita akan membahas bagaimana memasukkan kode JavaScript ke dalam berkas HTML secara eksternal. Sama seperti memasukkan CSS secara eksternal pada berkas HTML, kita perlu menulis lokasi berkas berekstensi .js (dot js) pada atribut src di dalam tag <script> alias tag pembuka.

Sebagai contoh, kita akan memisahkan kode JavaScript sebelumnya pada berkas terpisah yang bernama welcome.js. Dengan demikian, untuk memasukkan welcome.js ke dalam berkas index.html dapat dituliskan seperti berikut.

<html>
  <body>
    <h2 id="pesan">Selamat datang!</h2>
    <script src="{direktori_kamu}/welcome.js"></script>
  </body>
</html>

Pada tahap ini pasti kita akan bertanya-tanya, "Kenapa tidak menggunakan JavaScript internal saja? Padahal kan sama saja dan cara eksternal terkesan lebih kompleks!". Pertanyaan yang bagus!

Jawabannya sama dengan ketika kita ingin mengimplementasikan CSS secara internal dan eksternal. Kita menggunakan implementasi internal jika baris atau kompleksitas kode JavaScript sedikit atau rendah.

Namun, perlahan kita akan dibuat pusing jika jumlah kode JavaScript kita banyak serta memiliki kompleksitas yang tinggi. Salah satu kelebihan implementasi JavaScript secara eksternal adalah memudahkan kita untuk memperbaiki laman web ketika terdapat bugs atau error dan menambah konten ketika diperlukan. Kita pun dapat menggunakan berkas javascript pada multiple dokumen HTML sehingga kita tidak perlu menduplikasi kode. Tentu, hal ini sama seperti berkas CSS.

Contohnya pada halaman utama W3C. Jika kita melihat berkas HTML-nya, terdapat sebuah elemen <script> yang merujuk ke sebuah berkas JavaScript eksternal.


Jika kita telaah kembali, di dalamnya terdapat kode JavaScript yang berisi perintah untuk memanipulasi struktur HTML mereka. Oleh karena itu, sebaiknya kita menggunakan cara JavaScript eksternal supaya dapat digunakan berulang kali.


Dimana Harus Meletakkan tag <script>?

Walaupun implementasi JavaScript secara internal maupun eksternal terlihat mirip dengan CSS internal dan eksternal, tetapi terdapat perbedaan mendasar. Perbedaannya adalah kode CSS diletakkan dalam elemen <style> yang berada di dalam elemen <head>, sedangkan kode JavaScript diletakkan dalam elemen <script> yang terdapat di bagian akhir elemen <body>. Mengapa demikian?

Implementasi JavaScript ke dalam HTML akan berbeda jika dibandingkan dengan implementasi CSS. Hal tersebut karena tag <style> harus berada di dalam tag <head> yang membuat elemen-elemen pada dokumen HTML akan bergantung pada konten dalam CSS. Sehingga, langkah paling logis adalah mempersiapkan konten CSS terlebih dahulu.

Berbeda dengan JavaScript, jika website kita tidak memerlukan JavaScript untuk menampilkan halaman web, maka sebaiknya tag <script> diletakkan sebelum bagian akhir dari sebuah berkas HTML. Mengapa demikian? Karena jika meletakkannya di awal, semua konten HTML tidak akan dijalankan sebelum semua kode JavaScript yang berada pada tag <script> selesai dijalankan. Ambil contoh isi berkas HTML berikut:

<html>
  <script>alert('Silakan menekan OK di bawah untuk memunculkan isi halaman ini');</script>
  <body>
    <h2 id="pesan">Selamat datang!</h2>
  </body>
</html>

Jika dijalankan pada browser prosesnya akan seperti berikut:


Jika diperhatikan kembali pada tampilan di atas, kita harus menekan tombol "OK" terlebih dahulu supaya dapat menampilkan konten HTML. Hal ini dikarenakan elemen script dijalankan terlebih dahulu sehingga dokumen HTML belum di-render secara menyeluruh.

Anda harus benar-benar mempertimbangkan posisi peletakan tag <script> pada berkas HTML-nya. Jika tidak hati-hati, maka bisa saja tampilan halaman web menjadi tertunda dan dapat membuat pengalaman yang tidak mengenakkan bagi user yang sedang mengunjungi website kita.

Apakah ini berarti tag <script> harus selalu diletakkan di bagian akhir berkas HTML? Tidak juga. Jika tampilan halaman web Anda bergantung terhadap kode JavaScript, maka sebaiknya kamu letakkan di bagian yang sesuai.


Browser Environment

Pada awalnya Bahasa Pemrograman JavaScript didesain untuk berjalan di browser. Namun, seiring berjalannya waktu, kini banyak platform yang dapat menjalankan JavaScript di luar browser. Platform tersebut menggunakan runtime environment lain seperti Node JS. Salah satu contohnya adalah ketika kita menjalankan kode JavaScript pada glot.io.

Walaupun JavaScript dapat berjalan di luar browser, kita perlu tahu bahwa JavaScript yang berjalan di browser memiliki fungsionalitas khusus yang tidak bisa ditemukan di tempat lain. Hal tersebut karena ia dijalankan di dalam browser environment.

Apa istimewanya browser environment ini? Istimewanya terletak pada "peralatan-peralatan" khusus yang dapat digunakan oleh kode JavaScript untuk berinteraksi dengan browser maupun dengan dokumen HTML yang kita buat. Masih ingat dengan istilah Browser Object Model (BOM) dan Document Object Model (DOM)? Keduanya secara khusus hanya tersedia untuk JavaScript yang dijalankan dalam browser environment.

Pada gambar di bawah ini, kita melihat representasi dari objek window yang hanya bisa diakses oleh JavaScript dalam browser environment. Dengan melalui objek window, kita bisa mengakses DOM serta BOM.


Sehingga, jika kita menjalankan kode JavaScript yang berjalan di luar browser environment, maka browser object (window) dan document object (document) tidak akan tersedia dan menyebabkan error. Sebagai contoh, jika kita menjalankan method alert() di environment browser, alert dialog akan muncul seperti berikut.


Namun, jika menggunakan glot.io, method tersebut akan melemparkan error karena pada situs tersebut (compiler online) kode JavaScript dijalankan di environment NodeJS, yang mana tidak tersedianya BOM maupun DOM.


Keren, bukan? Dalam pemrograman front-end kita akan sering bergulat dengan BOM serta DOM untuk mempercantik tampilan website. Sudah siap untuk mengetahui lebih lanjut tentang keduanya?


Pendahuluan Browser Object Model (BOM)

Setiap browser menyediakan apa yang disebut Browser Object Model atau BOM yang bisa kita gunakan dalam kode JavaScript kita. Dalam browser, BOM ini diwakilkan oleh sebuah objek bernama window. Mari kita ketik window pada console browser dan lihat method dan method apa saja yang tersedia melalui objek ini:


Melalui objek window inilah kode JavaScript kita bisa mengakses berbagai method dan atribut yang bisa membantu kita membuat halaman web menjadi lebih interaktif. Kemungkinan Anda akan tertegun melihat begitu banyak method serta atribut. Akan tetapi, Anda tidak diharapkan untuk menghafal semuanya karena pada materi berikutnya kita cukup membahas 3 method paling dasar yakni alert(), prompt(), dan objek console.


Anggota BOM

Pada sub-modul ini, kita akan membahas lebih dalam mengenai tiga method dari BOM. Ketiganya adalah alert(), prompt(), dan diakhiri dengan objek console.


Anggota BOM: alert()

Method alert() merupakan salah satu method BOM yang menerima satu parameter opsional berupa data string yang akan ditampilkan melalui sebuah pop-up browser. Contohnya jika kita ingin menampilkan sebuah pesan berisi string "Halo user!" menggunakan console browser, maka caranya adalah sebagai berikut:

alert('Halo user!');

Sehingga tampilannya akan terlihat seperti di bawah ini:


Sama seperti memanggil method pada umumnya pada JavaScript, bukan? Kita juga bisa memasukkan variabel sebagai parameternya seperit berikut.

let pesan = 'Halo user!';
alert(pesan);

Maka jika dijalankan pada console browser akan seperti berikut.


Keren, kan? Kita bisa menampilkan pesan yang telah ditentukan melalui JavaScript. Namun, ada satu hal yang perlu kita ingat saat menggunakan alert(), yakni ketika pop-up muncul, user tidak bisa berinteraksi dengan bagian lain dari halaman web sampai pop-up tersebut tersebut ditutup.


Anggota BOM: prompt()

Sebelumnya kita telah mempelajari penggunaan method alert() untuk menampilkan pesan dalam dialog browser. Nah, selain menampilkan pesan, kita juga akan belajar cara mengambil data input dari user melalui dialog browser, yaitu prompt(). Method ini akan menampilkan sebuah dialog browser yang meminta user untuk mengisi kolom inputnya. Karena bisa menangkap input dari user, method ini memiliki lebih banyak fungsionalitas ketimbang alert(). Yuk, kita bahas satu-satu.

Nilai Return dari prompt()

Jika kita lihat, sebenarnya method alert() mengembalikan sebuah value berupa undefined. Namun, prompt() akan mengembalikan sebuah nilai sesuai dengan inputkan oleh user. Sebagai contoh, mari jalankan kode berikut pada console browser.

let pesanInput = prompt('Masukkan pesan sesukamu...');

Lalu, coba kita tampilkan isi dari variabel pesanInput, maka hasilnya pasti akan sesuai dengan pesan yang kita input pada pop-up.


Kita bisa melihat bahwa nilai yang tersimpan di variabel pesanInput sesuai dengan input yang diberikan user, yakni "Aku suka belajar koding!". Jika user tidak mengisi apa pun dan tetap menekan tombol "OK", maka nilai yang diberikan hanya string kosong.

Pada contoh di atas, kita telah menekan tombol "OK", tetapi apa yang terjadi jika kita menekan tombol "Cancel"? Jika kita menekan tombol "Cancel", justru nilai yang dikembalikan adalah null. Silahkan coba kembali contoh di atas tetapi kali ini tekan tombol "Cancel", nanti nilai dari variabel pesanInput akan bernilai null.

Ada satu hal yang perlu kita ingat selama menggunakan prompt(), yakni nilai apa pun yang dimasukkan oleh user akan diproses dan dikembalikan menjadi data string. Silakan jalankan kode berikut pada console browser.

let pesanInput = prompt('Silakan masukkan angka...');

Ketika kita menampilkan tipe data dari variabel pesanInput, maka sudah pasti tipe datanya adalah string, walau yang kita masukkan berupa angka.

console.log(typeof pesanInput); // output -> 'string'


Hal ini perlu kita ingat baik-baik. Kode tidak bisa menduga bahwa variabel pesanInput merupakan string atau number, ia akan tetap mengeluarkan string. Meskipun demikian, kita bisa cast atau parse hasilnya ke tipe data tertentu. Namun, harap lebih teliti karena jika kita salah melakukan parse ke tipe data maka akan menghasilkan NaN. Sebagai contoh, kita ingin mendapatkan value number dari prompt() maka kita bisa menggunakan cara ini.

let pesanInput = Number(prompt('Masukkan angka sesukamu...'));

Jika kita periksa tipe data dari hasilnya, maka hasilnya berupa number. Selain Number(), kita juga bisa menggunakan function parseInt() untuk melakukan parsing data string ke number.


Memberikan Nilai Default pada prompt()

Terdapat satu parameter lagi yang bisa kita masukkan ke prompt(), di mana parameter ini berguna sebagai nilai alternatif. Mari kita jalankan kode berikut.

let nama = prompt('Silakan masukkan nama Anda', 'Lorem Ipsum');

Ketika kita jalankan pada browser, maka kolom input yang muncul pada dialog box akan memiliki data secara otomatis.


Terdapat satu hal penting, yaitu ketika dialog box dari prompt() muncul, maka kita tidak bisa berinteraksi dengan komponen lain pada halaman web sampai dialog box tersebut ditutup. Hal ini sama halnya dengan alert().


Anggota BOM: console()

Akhirnya kita sampai pada pembahasan objek console . Objek ini merupakan peralatan yang wajib diketahui oleh semua Front-End Web Developer. Mengapa demikian? Karena objek console memberikan kita akses ke fitur debugging alias peralatan-peralatan yang bisa membantu menghilangkan bug yang bersembunyi di dalam kode JavaScript.

Tentu Anda masih ingat jika kita ingin menampilkan sebuah nilai ke console browser, maka dapat menggunakan method log(). 

console.log('Pesan kamu');

Wah, ternyata kita sudah menggunakan objek console sejak awal! Melalui objek console ini, kita dapat membuat kode JavaScript menampilkan pesan-pesan khusus berdasarkan konteks tertentu pada console browser. Berikut beberapa method dari objek console yang umum digunakan:

Method Penjelasan
log() Menampilkan pesan secara umum ke console browser.
info() Menampilkan pesan yang berisi informasi penting ke console browser.
warn() Menampilkan pesan yang berisi informasi dalam bentuk peringatan ke console browser.
error() Menampilkan pesan yang berisi informasi dalam bentuk error ke console browser.

Cara Memanggil Anggota BOM

Sebelum kita lanjut ke materi berikutnya, kita perlu membahas satu hal terlebih dahulu. Ketika kalian ingat akan peraturan sintaks JavaScript, bukankah memanggil properti atau sebuah method dari suatu objek perlu menyertakan nama objek dan diikuti oleh nama properti atau functionnya? Hal ini benar dan berlaku untuk BOM yang diwakili oleh object window pada environment browser. Supaya lebih tergambarkan, perhatian dua baris kode ini.

// Cara pertama
window.alert('Hello World');
 
// Cara kedua
alert('Hello World');

Kedua cara di atas tidak memiliki perbedaan dan valid, yang mana cara pertama secara eksplisit memerintah kode JavaScript untuk memanggil method alert() milik objek window. Namun, cara yang kedua tidak menyebutkan objek window untuk menampilkan alert. Lalu, mengapa cara kedua tetap bisa dilakukan? Hal ini dikarenakan properti dan method yang dimiliki window bersifat global.

Walau cara kedua terkesan lebih singkat, kita harus tetap hati-hati karena jika pada scope sebuah berkas .js terdapat nama fungsi yang sama, maka pesan pada pop-up tidak akan muncul. Contohnya sebagai berikut:

function alert(nama) {
  console.log('Hati-hati, ' + nama);
}
 
alert('Chewbacca'); // Output: Hati-hati, Chewbacca
// Output di atas akan tercetak ke console browser
 
window.alert('Chewbacca'); // Output: Hati-hati, Chewbacca
// Output di atas akan tetap tercetak pada console browser

Jadi harap hati-hati jika kita mendefinisikan sebuah method dengan nama yang sama dengan method milik window .


Selanjutnya : Pengenalan Document Object Model