Merubah isi HTML dengan menggunakan JavaScript sangat memungkinkan sekali, karena JavaScript adalah salah satu bahasa pemrograman yang bisa digunakan langsung di browser. JavaScript atau disingkat dengan JS, merupakan salah satu bahasa pemrograman yang berbasis object. Artinya, semua bagian dari kode pemrograman memiliki method dan property.
Sekilas tentang Pemrograman Berbasis Object di Javascript
Pertama-tama dalam bahasa pemrogaman berbasis object, kita akan mengenal terlebih dahulu tentang Class dan Object. Class adalah cetakan yang nantinya akan dibuat menjadi object, terdiri atas dua bagian penting yaitu method dan property. Sementara Object adalah hasil instansiasi dari class yang berarti object adalah suatu proses perwujudan dari suatu class. Kenapa object harus diwujudkan dari class, karena object bisa dibilang adalah individu baru yang bisa dikembangkan lagi diluar cetakan (class) yang ada.
Sekilas tentang Method dan Properti
Method dalam class adalah suatu kemampuan, fungsi, tata cara, atau prosedur yang ada dalam class. Sementara properti adalah kepunyaan, kepemilikian, atau variabel yang ada didalam class. Biasanya method menyimpan dan mengambil datanya dari properti. Berikut ini adalah ilustrasinya:
Class Mobil {
var warna = 'Hitam';
function klakson(){
return 'Tin.. Tin..';
}
}
Dari ilustrasi kode tersebut, kita membuat cetakan atau class bernama class Mobil. Class biasanya huruf kapital diawalnya diikuti nama class dengan huruf kapital diawalnya juga. Kemudian selanjutnya kita akan membuat object dari class mobil.
var avanza = new Mobil(); //object avanza diinstasiasi dari mobil var innova = new Mobil(); //object avanza diinstasiasi dari mobil //sekarang untuk menyalakan klakson melalui method avanza.klakson(); //tin.. tin..; innova.klakson(); //tin.. tin..; //mengambil warna mobil dari properti avanza.warna; //hitam innova.warna; //hitam //merubah warna mobil avanza avanza.warna='Putih'; avanza.warna; //Putih
Dari contoh ilustrasi tersebut, proses pemanggilan method dan properti dari masing-masing object sudah dapat terlihat. Satu hal yang paling mencolok adalah ketika kita akan merubah isi atau nilai dari properi object, kita cukup merubah isinya dengan melakukan operasi langsung terhadap propertinya. Sementara, untuk merubah method tidak dapat dilakukan secara sembarangan karena butuh cara khusus. Selanjutnya kita akan membahas cara implementasi JS di HTML.
Deklarasi JS di HTML
Untuk mendeklarasikan JS di HTML adalah dengan cara menyisipkan kode javascript didalam tag script di HTML. Posisi tag script ini boleh diawal HTML sebelum tutup HEAD, didalam body awal atau dibagian akhir sebelum tutup Body. Untuk saat ini, kita akan menempatkan script pada bagian akhir body, sebelum tag body ditutup. Berikut adalah contohnya:
<html> <body> <script type="text/javascript"> //javascript disini </script> </body> </html>
Untuk atribut type dalam tag script, tidak dibutuhkan untuk html versi 5 sekarang ini. Namun, untuk kompatibilitas, biasakan tetap menggunakan attribut type dalam setiap script.
Awas, JavaScript Case Sensitive!
Terakhir, jangan lupa untuk menuliskan setiap perintah javascript dengan kapital yang rapih. Karena, javascript adalah salah satu bahasa pemrograman yang perintah-perintahnya Case Sensitive atau huruf kapital dan non-kapital dianggap tidak sama. Seperti contoh dalam javascript, a tidak sama dengan A karena salah satunya kapital dan yang lainnya tidak. Maka dari itu, harap diperhatikan sebaik mungkin jika script tidak berjalan dengan baik mungkin salah satunya adalah kesalahan penggunaan huruf kapital.
Mengenal Object Document
Object document merupakan pemilik tunggal dari seluruh halaman web yang dibuka pada browser. Contoh, jika kita membuka Google.com, maka browser akan langsung membuatkan object baru bernama document yang berisi seluruh DOM dari halaman Google.com. Untuk selanjutnya kita akan membahas, tentang property dan method yang ada pada object document.
Mengenal Method dari Object Document
Seperti dalam penjelasan sebelumnya, object document memiliki method yang telah dibuatkan oleh browser. Adapun salah satunya adalah method getElementById. Method getElementById ini akan memilih atau memfilter tag html yang berisikan id tertentu. kita lihat ilustrasi sebagai berikut:
<html> <body> <h1 id="judul">Hello World</h1> </body> </html>
Dari potongan kode HTML tersebut, kita melihat bahwa ada ada tag h1 atribut id berisikan judul. Untuk memilih tag h1 tersebut, kita cukup mengeksekusi perintah document.getElementById("judul"). Hasil dari eksekusi perintah tersebut pun hasilnya akan berupa object yang memiliki method dan properti.
Mengenal Properti dari Object Document
Properti dari document salah satunya adalah innerHTML. Properti innerHTML memungkinkan untuk merubah isi teks yang diapit tag tertentu. Seperti pada pembahasan sebelumnya, untuk merubah isi tag h1 dengan attribut id=judul, maka cukup memberikan perintah document.getElementById("judul").innerHTML = ‘Selamat Datang’;. Dari hasil eksekusi perintah tersebut, sudah pasti isi tag h1 tadi yang berisikan Hello World sebelumnya, telah berubah menjadi Selamat Datang.
Kesimpulan
Untuk memanipulasi HTML DOM dengan javascript hanya membutuhkan 2 tahap yaitu mengeksekusi method getElementById dan merubah propertinya dengan innerHTML. Selain itu, masih banyak cara lain untuk merubah DOM HTML seperti menggunakan jQuery, Angular, React, Vue, dan masih banyak lainnya. Untuk method dan properti lainnya bisa dilihat di Developer Mozilla.
Demikian, semoga membantu.