Beranda > pemprograman > Tentang DOM di Javascript

Tentang DOM di Javascript

Setelah banyak menulis artikel tentang PHP, saya akan coba menulis tentang Javascript. Bukannya jenuh menulis tentang PHP, namun ada beberapa konsep dalam Javascript yang sedikit-sedikit saya kuasai meskipun tidak canggih-canggih amat sih :-) , sekaligus sedikit refreshing dengan sharing ilmu baru he.. 3x

Dalam artikel ini saya akan coba bahas mengenai DOM di Javascript. DOM di sini merupakan singkatan dari Document Object Model. DOM adalah standard atau platform terbaru dari W3C (World Wide Web Consortium) yang memungkinkan untuk mengakses dan mengupdate dokumen HTML secara dinamis. Tidak hanya konten dokumen saja yang bisa diakses dan diupdate dengan DOM namun juga struktur beserta stylenya.

Untuk menjembatani HTML dengan DOM, di dalam Javascript sudah mulai mendukung platform DOM ini.

Konsep DOM dalam Javascript adalah memandang elemen dokumen sebagai suatu object. Seperti halnya konsep OOP, object ini bisa memuat method dan properties. Selanjutnya untuk pemrosesan object-object dalam dokumen HTML menggunakan method dan properties tersebut.

Sebagai gambaran aplikasi yang menggunakan DOM, perhatikan contoh dokumen HTML berikut ini

<html>
<head>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
   <h1>Ubah Warna Halaman dengan DOM</h1>
   <input type="button" name="merah" onclick="ubahMerah()" value="Ubah Jadi Merah" />
   <input type="button" name="merah" onclick="ubahKuning()" value="Ubah Jadi Kuning" />
   <input type="button" name="merah" onclick="ubahHijau()" value="Ubah Jadi Hijau" />
</body>
</html>

Dokumen HTML di atas mengincludekan Javascript yang terletak dalam file script.js

script.js

function ubahMerah()
{
   document.body.style.backgroundColor="red";
}

function ubahKuning()
{
   document.body.style.backgroundColor="yellow";
}

function ubahHijau()
{
   document.body.style.backgroundColor="green";
}

OK.. dalam contoh ini, kita akan membuat aplikasi yang memungkinkan user untuk dapat mengubah warna background melalui tombol-tombol yang disediakan. Untuk mengimplementasikan hal ini kita akan menggunakan DOM.

Dalam halaman HTML terdapat tiga buah tombol untuk mengubah warna yaitu tombol pertama untuk mengubah warna background menjadi merah, tombol kedua untuk mengubah menjadi kuning dan hijau untuk yang ketiga.

Pada tombol pertama, diberikan event onclick yang selanjutnya akan memanggil function ubahMerah(). Maksudnya adalah bila tombol ini diklik maka akan mentrigger function ubahMerah(). Hal yang sama juga diberikan pada tombol kedua dan ketiga.

Now.. let’s see the inside of Javascript.

Kita lihat function ubahMerah(). Dalam function ini terdapat perintah

document.body.style.backgroundColor="red";

Perintah tersebut digunakan untuk mengubah style warna background pada dokumen. Untuk mengubah warna background dokumen dengan konsep DOM, kita menggunakan object ‘document’.

Karena pada dasarnya apa yang tampil pada jendela browser adalah bagian body pada dokumen HTML, maka kita akses properti ‘body’. Selanjutnya… kita akan mengubah style body khususnya pada warna background. Untuk mengubahnya kita akses properti ‘style.backgroundColor’.

Konsep yang sama kita terapkan pada function ubahKuning() dan ubahKuning().

Anda dapat mengetahui lebih dalam tentang konsep DOM ini dengan mempelajari beberapa object-object yang lain, serta method dan properti apa saja yang dapat Anda gunakan. Saya sangat merekomendasikan W3Schools.com untuk tempat belajar konsep DOM ini. Untuk lebih jelasnya, silakan kunjungi http://www.w3schools.com/HTMLDOM.

Kategori:pemprograman Tag:
  1. Belum ada komentar.
  1. No trackbacks yet.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: