Pertama di Indonesia: "Murottal Al Qur'an + Terjemahan" dalam bentuk CD MP3 Original (Tentang DOM di Javascript
March 24th, 2009 | by rosihanari |
Cetak Artikel Ini
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.
Mudah-mudahan kali lain saya bisa membahas contoh-contoh aplikasi lain menggunakan DOM ini.
Beberapa artikel terkait
- Teknik Membuat Script Mengubah Ukuran Image dengan Javascript
- Javascript Untuk Validasi Input Hanya Angka Pada Form
- Membuat Sendiri Share Link Ke Social Network Dengan Javascript
- Membuat Pilihan Combobox Dinamis Tanpa AJAX
- Ide Membuat Pembatasan Jumlah Karakter Pada Form dengan Counter
- Script Multiple File Upload Dengan PHP
- Tentang Letak Script Pengolah Form
- Alternatif Cara Membuat Form Dinamis Untuk Submit Data Secara Simultan
- Tentang Function str_replace()
- Tentang Recursive Function
Share this article on:
Kata kunci: DOM - Javascript -
Rosihan Ari adalah seorang programmer, penulis buku, trainer, peneliti dan berusaha menjadi seorang blogger sejati dengan memberikan yang terbaik buat negeri ini. Berfokus pada computer programming serta computer aided learning for mathematics, ia ingin berbagi ilmu yang dimilikinya. 
Loading ...
maksih kaka.. ini ni yang q cari ilmunya
lebih banyak artikel/tutorial/bantuan dll
ttg AJAX ya Mas..suwun
mas,bisa bantu ngak,kalau javascript automatis buat hyperlink pd postingan diwebpage ada ngak???
misalnya gini,mas
kalau saya ketikan http://www.12345.com atau http://12345.com, begitu saya submit langsung alamat http tadi bisa diklik,jadi tanpa kita bikin dulu dengan <a> atau tanpa memasukan link pada menu URL /gambar rantai..cukup klik submit link tsb langsung jadi hyperlink
nah cara bikin & embbed code javanya ke website kita gimana?
soalnya saya coba diforum-forum hal itu bisa
nah ternyata diblog mas ini,bisa looo..!,bikin codenya gimana tuh mas?..
Ass. bapak ketemu lagi
Yang kemarin dah bisa pak, ternyata ajax nya harus di jadiin inner html dl pak, terimakasih y pak..
Skr nanya lagi pak ;(
Pak supaya ajax bisa cross browser kaya css gmn y pak caranya?
Soalnya ajax modal window di Mozilla jalan, kok di IE g jalan