JAVASCRIPT 

Penjelasan Mengenai DOM Pada Javascript



Pada artikel ini saya akan menjelaskan mengenai konsep DOM pada bahasa pemrograman javascript. Simak saja langsung di bawah!


DOM

DOM (Document Object Model) pada javascript ini yang bisa kita gunakan untuk manipulasi atau memainkan sebuah tag-tag pada HTML. Misal apa yang terjadi ketika tombol pada halaman web di tekan , lalu apa yang terjadi ketika mouse di geser pada halaman web. Semua itu berkat konsep DOM pada bahasa pemrograman javascript kamu bisa coba tombol di bawah ini ketika di tekan apa yang terjadi :

Kamu bisa lihat kan? ketika tombol di atas di tekan maka akan muncul sebuah peringatan halo pengunjung :) ini yang membuat saya menyukai javascript yaitu pada DOM nya kita bisa memanipulasi tag tag pada HTML, DOM ini sangat penting sekali kamu pelajari karena DOM pada javascript hal yang tidak boleh terpisah kan ketika membangun sebuah website. Berkat DOM website yang kamu buat akan hidup, maksud hidup di sini website kamu bisa melakukan sesuatu pada contoh ketika kamu meng klik tombol tersebut.


Event

Jika kamu ingin mempelajari konsep DOM tentu kamu harus mengenal apa itu event jadi saya mudah kan gini, event ini kemampuan pada javascript buat mendeteksi sebuah kejadian yang terjadi pada sebuah halaman web. Berkat event ini lah kita bisa menggunakan DOM tersebut pada javascript, tanpa sebuah event kita tidak akan bisa melakukan DOM atau kaitannya dengan manipulasi tag-tag HTML. Event pada javascript ada banyak yang kamu tekan tersebut merupakan event click saya akan berikan event pada javascript kamu bisa lihat di bawah ini :

  • onblur
  • onchange
  • onclick
  • ondblclick
  • onerror
  • onfocus
  • onkeydown
  • onkeypress
  • onkeyup
  • onload
  • onmousedown
  • onmousemove
  • onmouseout
  • onmouseover
  • onmouseup
  • onreset
  • onresize
  • onselect
  • onsubmit
  • onunload

Ouh ya saya kan memberikan script sederhana dan nanti kamu bisa jalankan script tersebut pada IDE kamu. Nah kamu bisa lihat di bawah ini : 

<!doctype html>
   <html>
  <head>
    <title>Belajar DOM Javascript</title>
  </head>   
    
  <body>         
<form>
    <button type="button" onclick="inform()">Klik saya!</button>
</form> 

      
<script>
function inform(){
 alert("Hai anda mengklik saya!")
}
</script>
  </body>
</html>

Penutup

Di sini saya hanya menjelaskan dasar nya saja kamu bisa jelajahi lebih dalam lagi mengenai DOM pada javascript entah dari youtube atau pun membaca artikel lain. Kamu bisa kunjungi juga contoh program javascript sederhana pada DOM mengenai event click di sini semoga bermanfaat :D