Bismillah, Show
Assalamualaikum.wr.wb, bertemu lagi dengan saya, kali ini saya akan membahas tentang manipulasi HTML DOM(Document Object Model) dengan Javascript. Sebelum masuk kepada pembahasan, kita mulai dengan sebuah pertanyaan, “Kenapa menggunakan Javascript?”. Dalam pengembangan aplikasi berbasis web, kita mengenal HTML(Hyper Text Markup Language) sebagai bahasa yang digunakan untuk membuat tampilan halaman web, kita kenal juga CSS(Cascading Style Sheets) yakni bahasa yang digunakan memberikan style pada dokument html, menggambarkan bagaimana setiap elemen html akan terlihat di layar, seperti warna latar belakang, ukuran, jenis huruf, warna huruf, dsb. Terakhir, kita mengenal Javascript dan PHP yang mana keduanya merupakan bahasa pemrograman yang digunakan pada pengembangan aplikasi web yang membuat halaman web menjadi ”hidup”, dalam artian input-proses-output terjadi disini. Timbul pertanyaan, “Apakah untuk penggunaan bahasa pemrograman kita boleh memilih salahsatunya saja? Php saja atau javascript saja.”. Jawabannya relatif, keduanya memiliki peruntukan yang berbeda. Javascript adalah bahasa pemrograman web bersifat client-side-programming, artinya kode program dieksekusi, diproses atau dijalankan di sisi client yang dalam hal ini web browser. Javascript lebih digunakan di sisi tampilan dengan membuat halaman web menjadi interaktif, seperti pembuatan animasi, menagani event yang dilakukan user dan berbagai fungsi lainnya Sedangkan, PHP adalah bahasa pemrograman web bersifat server-side-programming, artinya semua proses atau eksekusi kode php dilakukan di web server, dan client hanya akan menerima hasil(output) dari proses tersebut. PHP digunakan untuk membuat web dinamis yang membutuhkan manajemen data, seperti database, upload file dan masih banyak lagi. Javascript dapat membuat halaman web menjadi interaktif karena javascript dapat berinteraksi langsung dengan dokumen html, inilah yang kita sebut sebagai “manipulasi HTML DOM” yang akan kita bahas sekarang. Apa itu DOM?DOM(Document Object Model) adalah model data standar. DOM adalah cara javascript melihat suatu halaman html. DOM adalah sebuah platform dan interface yang memperbolehkan pengaksesan dan perubahan pada konten, struktur, dan style pada sebuah dokumen oleh program dan script. Istilah HTML DOM mengacu kepada dokumen html. Kasusnya disini ialah konten, struktur, dan style pada dokumen html dapat diakses dan dirubah dengan menggunakan sintaks javascript.Pada model DOM ini, setiap elemen html dipandang sebagai sebuah object. Setiap object bisa terdiri dari object-object lain, sama halnya dengan dokumen html yang terdiri dari elemen root (elemen <html>), elemen root terdiri dari elemen <head> dan elemen <body>, elemen <body> boleh jadi terdiri dari elemen <a>, <h1>, <p>, dst. Elemen-elemen pada dokumen html membentuk sebuah object document yang merupakan object dari dokumen html itu sendiri. Dibawah ini adalah representasi HTML DOM dalam model pohon:
Kalau dalam pemrograman OOP(Object Oriented Programing), sebuah object memiliki property dan method, begitu juga elemen pada dokumen html ini memiliki property yaitu nilai pada elemen html yang bisa ditetapkan atau dirubah dan method yakni aksi yang dapat dilakukan pada elemen html. Contoh property yang biasa digunakan ialah innerHTML yang digunakan untuk memperoleh atau merubah konten dari elemen html itu sendiri. Kemudian method, contoh misalnya getElementById(“id”) milik object document yang digunakan untuk mengakses elemen html dalam dokumen html berdasarkan id. Untuk lebih jelasnya ikuti setiap praktik dalam tutorial kali ini.
Baiklah, setelah sedikit teori di awal sebagai pengetahuan, selanjutnya kita masuk ke pembahasan-pembahasan yang lebih practical. Sebelumnya, dibawah ini saya paparkan apa-apa saja yang dapat dilakukan javascript dengan memanipulasi HTML DOM. Apa yang dapat Javascript lakukan dengan HTML DOM?
Praktik Manipulasi HTML DOMPada bagian ini kita akan praktik langsung mencoba memanipulasi HTML DOM dengan sintaks Javascript. Melalui praktik ini, diharapkan pembaca akan mampu untuk:
Merubah Konten dari Elemen HTML
Apa yang dapat dipelajari?Yup betul, elemen <p> dengan id “demo” yang semula kosong diberikan nilai “Hello World!” dengan menggunakan sintaks document.getElementById("demo").innerHTML = "Hello World!";.Penjelasan sintaks sebagai berikut :
Apa yang dapat dipelajari?Nilai yang baru yaitu “Hello World” akan menggantikan nilai yang lama yakni “Selamat Pagi”.Contoh lain lagi:
Memperoleh Konten dari Elemen HTMLHampir sama dengan merubah konten, yang perlu dilakukan ialah mengakses konten dari elemen yang dimaksud menggunakan property innerHTML.
Apa yang dapat dipelajari?Nilai/konten dari elemen yakni “Selamat Pagi” dimasukkan ke variabel konten, kemudian nilai dari variabel konten tersebut ditampilkan bersamaan dengan string ‘Konten elemen <p> dengan id "demo" bernilai : ‘ dengan menggunakan method dari object document yakni write() yang menampilkan nilai dalam string pada halaman html.Mengakses Element HTML dengan getElementsByTagName(“tag”)Ohya, selain menggunakan method getElementById(“id”) untuk mengakses elemen HTML, kita juga dapat menggunakan method yang lain, contohnya getElementsByTagName(“Tag”).
Apa yang dapat dipelajari?Berbeda dengan getElementById(“id”) yang mengakses elemen html berdasarkan id, method getElementsByTagName(“tag”) ini mengakses elemen html berdasarkan tag. Kita ketahui bahwa id itu bersifat unik, maka dengan menggunakan getElemenById(“id”) kita secara langsung mengacu kepada elemen dengan id tersebut, dalam artian nilai balik dari method ini ialah berupa nilai tunggal yakni elemen dengan id tersebut, sedangkan method getElementsByTagName(“tag”) mengembalikan nilai berupa array mengingat elemen html dengan tag tertentu bisa jadi lebih dari satu, contohnya disini ialah terdapat lebih dari satu elemen dengan tag(lihat sintaks html diatas). Untuk lebih jelasnya kita bedah sintaks berikut : var x = document.getElementsByTagName("p"); document.getElementById("demo").innerHTML = 'Paragraf pertama (indeks 0) adalah : ' + x[0].innerHTML; Sintaks document.getElementsByTagName(“p”); akan mengembalikan nilai berupa array yang isinya merupakan setiap elemen dengan tag <p>, kurang lebih gambarannya sebagai berikut :
Untuk mengakses masing-masing elemen kita gunakan indeks seperti yang terlihat pada potongan sintaks diatas x[0].innerHTML. Artinya, kita mengakses array x dengan indeks 0 sehingga kita peroleh elemen <p>Paragraf 1.</p> dan kemudian .innerHTML digunakan untuk mengacu kepada konten dari elemen tersebut yakni “Paragraf 1.”. sehingga string “Paragraf 1.” lah yang ditampilkan bersamaan dengan string “Paragraf pertama (indeks 0) adalah : ” menjadi “Paragraf pertama (indeks 0) adalah : Paragraf 1.”. Kita telah mempraktikan dua method untuk mengakses elemen html yakni getElementById(“id”) dan getElementsByTagName(“tag”), sebenarnya masih ada method lainnya dengan fungsi serupa diantaranya getElementsByClassName(“class”) dan querySelectorAll(“CSS Selector”). Namun, kita tidak akan membahasnya karena pada dasarnya kedua method diatas sama seperti getElementsByTagName(“tag”) yakni nilai baliknya berupa array, getElementsByClassName(“class”) mengakses elemen tertentu bersadarkan class sedangkan querySelectorAll(“CSS Selector”) berdasarkan CSS Selector. Contoh penggunaannya:
Merubah Nilai dari Suatu AtributSelain merubah konten elemen, kita juga dapat merubah nilai dari suatu atribut.
Apa yang dapat dipelajari?Kita dapat merubah nilai atribut dari sebuah elemen html. Seperti pada contoh, sintaks x[0].style="font-size:72pt"; akan merubah atribut dari elemen pertama yang sebelumnya di set dengan nilai “font-size:12pt”. Secara umum aturan penulisannya sebagai berikut element.attribute = new value . Jika melihat pada contoh, maka yang menjadi elemen ialah x[0] dan atribut nya adalah style, sehingga ditulis x[0].style (ingat bahwa x[0] mengacu pada elemen yang memiliki konten “Paragraf 1.” atau elemen indeks ke 0 dalam array x). Sintaks tersebut juga dapat ditulis seperti ini x[0].style.fontSize=”72pt”; contoh lain misalnya document.getElementById(“PP”).src=”guantengMaks.jpg”; atau document.getElementById(“link_download”).href=”http://www.blablabla/download”.Menambahkan Event Pada Elemen HTMLElemen html dapat kita tanam sebuah event, agar mudah memahaminya langsung saja kita coba praktikan.
Apa yang dapat dipelajari?Kita menambahkan event kepada x[0] yang mengacu ke elemen dengan konten “paragraf 1” dengan aturan sintaks element.event=nama_fungsi; sebagai berikut “
Menambahkan Event Handler Pada Elemen HTMLIni adalah cara lain menambahkan event pada elemen html
Apa yang dapat dipelajari?Method addEventListener() memiliki 2 parameter masukan, parameter pertama adalah jenis event handler nya dalam bentuk string, dan parameter kedua adalah fungsi yang akan dieksekusi jika event terjadi.Menghapus Event Handler dari Element HTMLSelain menambahkan, kita juga dapat menghapus event handler yang telah tertanam pada elemen html.
Ketika teks paragraf 1 telah di klik maka paragraf 1 tidak akan berubah warna lagi ketika di dekatkan. Apa yang dapat dipelajari?Jadi kita menambahkan 3 event pada elemen html (dalam kasus ini x[0] yang mengacu kepada elemen pertama), yakni “mouseover” →UbahKeBiru, “mouseout”→UbahKeDefault, dan “click”→HapusEventHandler. Warna background dari elemen pertama akan berubah menjadi biru ketika cursor diarahkan ke paragraf tersebut, sebaliknya, menjadi putih kembali ketika cursor dijauhkan. Namun, ketika paragraf 1 di klik maka fungsi HapusEventHandler() dipanggil, yang mana berisi perintah untuk menggapus event listener “mouseover” sehingga ketika cursor kembali diarahkan ke paragraf 1 tidak akan merubah apa-apa.Mengakses Elemen di Dalam ElemenSebuah elemen bisa memiliki elemen lain didalamnya, contoh: <body> <pre> <p> <h4></h4> </p> <p></p> <p></p> </pre> </body> elemen <body> memiliki elemen <pre> di dalamnya, elemen <pre> sendiri memiliki elemen <p>, dan seterusnya. Nah, bagaimana jika kita ingin mengakses elemen di dalam elemen?
Apa yang dapat dipelajari?Kita mempunyai 3 elemen <p> di dalam elemen <div>, kita mau mengakses elemen <p> yang kontennya berupa teks “Paragraf 2”. cara mengaksesnya ialah dengan terlebih dahulu mengacu kepada elemen <div>, kebetulan elemen <div> memiliki id yang dapat kita akses langsung dengan sintaks document.getElementById(“paragraf”). Kemudian setelah kita mengacu elemen <div>, kita acu elemen <p> dengan property childern. children berupa array, sehingga jika digambarkan ialah sebagai berikut :
Kita membuat elemen paragraf baru dengan sintaks document.createElement("p"); kemudian kita buat text node baru berupa teks “Ini elemen paragraf baru”, text node ini ialah teks yang menjadi konten dari node/elemen. Kemudian sintaks para.appendChild(node); artinya si text node yang baru ini dijadikan children nya si para. Sampai disini kita telah membuat elemen <p> baru lengkap dengan kontennya. Si elemen baru ini belum akan muncul karena si elemen ini belum punya tempat di dokumen html tersebut, oleh karena itu sintaks berikut akan menjadikan si elemen baru sebagai child nya <div> : var element = document.getElementById("div1"); element.appendChild(para); Untuk menghapus elemen gunakan sintaks elemen_parent.removeChild(child); dan untuk me replace elemen gunakan sintaks elemen_parent.replaceChild(child_lama,child_baru);. Gimana? Menarik bukan? Saya rasa cukup segitu dulu yang saya share tentang manipulasi HTML DOM, selebihnya kalian bisa eksplor lagi dari apa-apa yang sudah saya bahas. Maksud dan tujuan saya membuat tutorial ini ialah untuk mengenalkan basic manipulasi HTML DOM sekaligus memberikan gambaran seperti ini loh Javascript, ini loh salah satu kegunaan utamanya, bahasa pemrograman keren yang memungkinkan kita untuk mengotak-ngatik dokumen html secara realtime, oleh karenanya halaman web menjadi interaktif dan menarik. Jadi, jawaban atas pertanyaan “Kenapa menggunakan javascript?”, inilah jawabannya. Semoga tutorial kali ini membantu dan memacu semangat kalian untuk ngulik lebih dalam lagi tentang javascript. Mohon maaf bila ada kesalahan, sekian dan terimakasih. SELAMAT NGODING!!! Berikut saya lampirkan link untuk mengenal lebih banyak method dan property dalam manipulasi HTML DOM : http://www.w3schools.com/js/js_htmldom_document.asp http://www.w3schools.com/js/js_htmldom_navigation.asp Referensihttp://www.w3schools.com/js/js_htmldom.asphttps://codesaya.com/a/javascript-dan-php-mengapa-berbeda-dfjjibgfep/ https://id.wikipedia.org/wiki/Document_Object_Model
Tutorial ini ditujukan untuk kompetisi kontes Menulis Tutorial oleh:
|