Sobat Donga, menurut catatan Donga ada Empat attribute javascript yang digunakan menampilkan data javascript pada sebuah web. Empat attribute tersebut adalah innerHTML, document.write(), window.alert(), console.log(). Baiklah, Donga akan coba bahas satu persatu
1. innerHTML
Secara umum property innerHTML berfungsi untuk menggantikan text maupun style element yang ada pada HTML. Apa itu element HTML ? yang dimaksud element HTML di sini adalah sebuah block code yang dimulai dari tag pembuka sampai tag penutup.
element HTML : Sebuah block code yang dimulai dari tag pembuka sampai tag penutup
Konsep element HTML
<tag_pembuka>content/isi</tag_penutup>
Contoh element HTML
<p>Selamat Datang</p> //ini adalah sebuah element HTML
Catatan :
Ada element HTML yang tidak memeiliki tag_penutup, seperti : <img/> tag seperti ini disebut juga Void Element
Contoh Void Element
<img src="url_gambar.png">
Mengapa Donga serius sekali menjelaskan pengertian element HTML ini, karena tanpa memahami apa itu element HTML Donga khawatir kita keliru dalam menerapkan konsep attribut innerHTML.
Setelah kita memahami apa element HTML, kita harus paham juga apa itu innerHTML.
innerHTML : Semua yang ada didalam element HTML mulai dari tag pembuka sampai tag penutup.
Agar lebih jelas mengenai innerHTML Donga ambil sebuah contoh code :
<html>
<body>
<center>
<p id="coba">Selamat Datang!!!</p>
<button onclick="klikdonga()">Ganti</button>
</center>
<script type="text/javascript">
function klikdonga(){
document.getElementById("coba").innerHTML="Horee!!! Bisa Berganti";
}
</script>
</body>
</html>
<body>
<center>
<p id="coba">Selamat Datang!!!</p>
<button onclick="klikdonga()">Ganti</button>
</center>
<script type="text/javascript">
function klikdonga(){
document.getElementById("coba").innerHTML="Horee!!! Bisa Berganti";
}
</script>
</body>
</html>
Silahkan sobat copy code di atas ke notepad/notepad++ kemudian simpan dengan nama output1.html. Selanjutnya Sobat buka fele tadi menggunakan browser Chrome atau Mozilla Firefox. Jika langkah yang Sobat lakukan benar maka hasilnya akan seperti dibawah ini. Coba Sobat "Klik" tombol ganti, dan amati perubahan tulisan "Selamat Datang!!!"
Selamat Datang!!!
Untuk memahami sebuah code/script, Donga biasanya melihat code tersebut satu persatu. Untuk code di atas Donga mulai dari :
<p id="coba">Selamat Datang!!!</p>
Tentunya Sobat sudah tahu dengan code HTML di atas. Betul sekali... code tersebut adalah salah satu element HTML untuk membuat sebuah paragraf, ditandai dengan tag <p>....</p>. memiliki selector "id" yang diberi nama "coba" (id="coba"). Adapun Content/isi dari element tersebut adalah tulisan "Selamat Datang!!!"
Maksud dari code secara keseluruhan adalah mengganti tulisan Selamat Datang!!! menjadi "Horee!!! Bisa Berganti" dengan meng- "Klik" tombol "Ganti". Untuk itu diperlukan element HTML untuk membuat sebuah tombol seperti terlihat pada baris code dibawah ini.
<button onclick="klikdonga()">Ganti</button>
code di atas adalah element button HTML ditandai dengan <button> ... </button>. Buton ini memiliki content/isi yaitu tulisan "Ganti". Sedangkan onclick="klikdonga()" adalah sebuah event javascript yang dibuat agar tombol "Ganti" memberikan sebuah "aksi" jika di "Klik". Truss... aksi yang akan ditampilkan apa? aksinya : merubah tulisan Selamat Datang!!! menjadi "Horee!!! Bisa Berganti". Pada contoh code yang kita gunakan ini aksi yang timbul diatur oleh code javascript dibahwah ini.
Tag <script type="text/javascript"> ... </script> menunjukkan bahwa code tersebut ditulis dalam bahasa Javascript. sedangkan function klikdonga() berguna untuk membuat sebuah fungsi dengan nama "klikdonga()". Apa isi fungsinya?
document.getElementById("coba").innerHTML="Horee!!! Bisa Berganti";
cara membacanya : Ganti content dari element yang memiliki "id" dengan nama "coba" dengan content baru yang bertuliskan "Horee!!! Bisa Berganti".
innerHTML = Ganti
document = content dari element
getElementById = element yang memiliki "id" dengan nama "coba"
Horee!!! Bisa Berganti = Content baru
Untuk cara membaca script di atas, adalah cara Donga untuk memahami maksud dari serangkaian code, jadi.. jika sobat memiliki cara berbeda tidak masalah, yang penting kita paham dan bisa mengaplikasikannya.
Donga rasa itu saja pembahasan mengenai innerHTML. Untuk tiga attribute yang belum dibahas (document.write() ; window.alert() ; console.log();) akan kita bahas pada tulisan selanjutnya, jika ditulis di halaman ini juga akan terasa terlalu panjang. Baik, yang ingin langsung melihat catatan penggunaan document.write() silahkan kunjungi 4 Cara Menampilkan Javascript :document.write() Jika masih ingin mempelajari innerHTML bisa buka catatan Donga mengenai 7 Fungsi Untuk Mengakses Element DOM.
<p id="coba">Selamat Datang!!!</p>
Tentunya Sobat sudah tahu dengan code HTML di atas. Betul sekali... code tersebut adalah salah satu element HTML untuk membuat sebuah paragraf, ditandai dengan tag <p>....</p>. memiliki selector "id" yang diberi nama "coba" (id="coba"). Adapun Content/isi dari element tersebut adalah tulisan "Selamat Datang!!!"
Maksud dari code secara keseluruhan adalah mengganti tulisan Selamat Datang!!! menjadi "Horee!!! Bisa Berganti" dengan meng- "Klik" tombol "Ganti". Untuk itu diperlukan element HTML untuk membuat sebuah tombol seperti terlihat pada baris code dibawah ini.
<button onclick="klikdonga()">Ganti</button>
code di atas adalah element button HTML ditandai dengan <button> ... </button>. Buton ini memiliki content/isi yaitu tulisan "Ganti". Sedangkan onclick="klikdonga()" adalah sebuah event javascript yang dibuat agar tombol "Ganti" memberikan sebuah "aksi" jika di "Klik". Truss... aksi yang akan ditampilkan apa? aksinya : merubah tulisan Selamat Datang!!! menjadi "Horee!!! Bisa Berganti". Pada contoh code yang kita gunakan ini aksi yang timbul diatur oleh code javascript dibahwah ini.
<script type="text/javascript">
function klikdonga(){
document.getElementById("coba").innerHTML="Horee!!! Bisa Berganti";
}
</script>
Tag <script type="text/javascript"> ... </script> menunjukkan bahwa code tersebut ditulis dalam bahasa Javascript. sedangkan function klikdonga() berguna untuk membuat sebuah fungsi dengan nama "klikdonga()". Apa isi fungsinya?
document.getElementById("coba").innerHTML="Horee!!! Bisa Berganti";
cara membacanya : Ganti content dari element yang memiliki "id" dengan nama "coba" dengan content baru yang bertuliskan "Horee!!! Bisa Berganti".
innerHTML = Ganti
document = content dari element
getElementById = element yang memiliki "id" dengan nama "coba"
Horee!!! Bisa Berganti = Content baru
Untuk cara membaca script di atas, adalah cara Donga untuk memahami maksud dari serangkaian code, jadi.. jika sobat memiliki cara berbeda tidak masalah, yang penting kita paham dan bisa mengaplikasikannya.
Satu lagi sebagai acuan kita dalam memahami innerHTML adalah attribute "Id" pada mendefenisikan element HTML, sedangkan innerHTML mendefenisikan Content/isi dari element HTMl tersebut.
Donga rasa itu saja pembahasan mengenai innerHTML. Untuk tiga attribute yang belum dibahas (document.write() ; window.alert() ; console.log();) akan kita bahas pada tulisan selanjutnya, jika ditulis di halaman ini juga akan terasa terlalu panjang. Baik, yang ingin langsung melihat catatan penggunaan document.write() silahkan kunjungi 4 Cara Menampilkan Javascript :document.write() Jika masih ingin mempelajari innerHTML bisa buka catatan Donga mengenai 7 Fungsi Untuk Mengakses Element DOM.
Tidak ada komentar:
Tulis komentar