Assalamu’alaikum…

Hai sobat kali ini saya akan memberitahu apa itu javascript DOM dan juga akan saya praktikkan, pasti kalian bertanya tanya apa sih Javascript HTML DOM itu dan bagaimana penggunaannya. Mari kkita lihat uraian berikut :

Pengertian
HTML DOM dapat di akses dengan javascript atau dengan bahasa pemrograman lainnya.

Latar Belakang
pada HTML DOM semua elemen HTML didefinisikan sebagai objek. Antar muka adalah sifat dan metode objek.

Contoh :

Javascript HTML DOM Method

coding :

<html>
<body>
<h1>My First Page</h1>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Selamat Pagi Semua !^_^";
</script>
</body>
</html>




hasil:












mengapa menghasilkan tampilan di atas, karena pada saat kita mengetikkan “document.getElementById("demo").innerHTML = "Selamat Pagi Semua !^_^";” di situ tertulis sama dengan Selamat Pagi Semua !^_^ nah maka tampilan yang akan muncul pada baris kedua setelah my First Page adalah tulisan itu tadi.


Javascript HTML DOM HTML

coding :

<html>
<body>

<script>
document.write(Date());
</script>

</body>
</html>


hasil :














seperti yang terlihat pada gambar diatas bahwa yang muncul adalah waktu dan tanggal, karena pada document write dimasukkan perintah Date maka yang akan muncul adalah waktu dan tanggal. Dan tampilan muncul sesuai kapan kita menjalankan project tersebut.


JavaScript HTML DOM CSS

coding :

<body>

<p id="p1">Nama : Khoirul laila s</p>
<p id="p2">Kelas : XI H</p>
<p id="p3">Jurusan : RPL</p>

<script>
document.getElementById("p2").style.color = "blue";
document.getElementById("p2").style.fontFamily = "Arial";
document.getElementById("p2").style.fontSize = "larger";
document.getElementById("p1").style.color = "red";
document.getElementById("p3").style.color = "purple";
</script>


</body>
</html>



hasil :












seperti tampilan di atas bahwa disini css berperan penting bahwa css ini bertujuan untuk memperindah sebuah project agar lebih menarik, contoh di atas terdapat pewarnaan dalam text. Css disini beda dengan yang digunakan di html biasa karena di HTML DOM ini menaruh coding pewarnaan bukan di tag <style> melainkan di tag <script>.



Maksud dan Tujuan
Mengenal tentang apa itu Javascript HTML DOM dengan benar.

Alat dan Bahan
  • Laptop
  • File Items
  • Text Editor

Hasil yang diharapkan
bisa memahami dan mempraktikkan Javascript HTML DOM .

Referensi