JavaScript HTML DOM
Assalamu’alaikum wr. wb.
A. PENDAHULUAN
Hai kawan apa kabar? Semoga baik-baik saja dan masih dalam perlindunganNya ya. Kali ini saya akan membagi ilmu yang sudah saya dapat dari apa yang saya kerjakan hari ini yaitu tentang HTML
DOM. Seperti apa mari kita lihat.
1. Pengertian
HTML DOM
Document Object Model (DOM) adalah object model standar untuk HTML dan XML yang bersifat platform independent. Sebuah web browser tidak harus menggunakan DOM untuk menampilkan dokumen HTML. Namun DOM diperlukan oleh JavaScript yang akan mengubah tampilan sebuah website secara dinamis.
2. Latar Belakang dan Batasan Permasalahan
Pada HTML DOM semua elemen HTML didefinisikan sebagai objek. Antar muka adalah sifat dan metode objek.
3. Maksud dan Tujuan
Tujuan saya membagikan materi ini agar kalian mengerti dan mungkin sudah ada yang tahu, tapi saya ingin menunjukkan apa yang bisa dilakukan oleh JavaScript HTML DOM ini.
4. Hasil yang diharapkan
Saya harap Kawan-kawan faham mengenai materi yang saya sampaikan ini.
B. ALAT DAN BAHAN
1. Laptop
2. Text Editor (saya menggunakan sublime text karena saya menggunakan Sistem Operasi Ubuntu.
3. Browser
4. Referensi-referensi mengenai materi ini
C. PROSES TAHAP PEKERJAAN
1. JavaScript HTML DOM Method
Berikut contoh Coding yang digunakan dalam JavaScript HTML DOM Method:
<html>
<body>
<h1>My First Page</h1>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Selamat Pagi Semua !^_^";
</script>
</body>
</html>
Hasil dari coding di atas seperti ini:
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.
2. JavaScript HTML DOM HTML
Berikut contoh Coding yang digunakan dalam JavaScript HTML DOM HTML:
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>
Maka hasil dari code di atas:
Seperti yang terlihat pada gambar di atas 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.
3. JavaScript HTML DOM CSS
Berikut contoh Coding yang digunakan dalam JavaScript HTML DOM CSS:
<HTML>
<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>
Maka hasilnya akan seperti ini:
Seperti tampilan di atas bahwa di sini CSS berperan penting dengan tujuan untuk memperindah sebuah project agar lebih menarik, contoh di atas terdapat pewarnaa dalam text. CSS di sini beda dengan yang digunakan di html biasa karena di HTML DOM ini menaruh coding pewarnaa bukan di tag <style> melainkan di tag <script>.
D. REFERENSI
-
A. PENDAHULUAN
Hai kawan apa kabar? Semoga baik-baik saja dan masih dalam perlindunganNya ya. Kali ini saya akan membagi ilmu yang sudah saya dapat dari apa yang saya kerjakan hari ini yaitu tentang HTML
DOM. Seperti apa mari kita lihat.
1. Pengertian
HTML DOM
Document Object Model (DOM) adalah object model standar untuk HTML dan XML yang bersifat platform independent. Sebuah web browser tidak harus menggunakan DOM untuk menampilkan dokumen HTML. Namun DOM diperlukan oleh JavaScript yang akan mengubah tampilan sebuah website secara dinamis.
2. Latar Belakang dan Batasan Permasalahan
Pada HTML DOM semua elemen HTML didefinisikan sebagai objek. Antar muka adalah sifat dan metode objek.
3. Maksud dan Tujuan
Tujuan saya membagikan materi ini agar kalian mengerti dan mungkin sudah ada yang tahu, tapi saya ingin menunjukkan apa yang bisa dilakukan oleh JavaScript HTML DOM ini.
4. Hasil yang diharapkan
Saya harap Kawan-kawan faham mengenai materi yang saya sampaikan ini.
B. ALAT DAN BAHAN
1. Laptop
2. Text Editor (saya menggunakan sublime text karena saya menggunakan Sistem Operasi Ubuntu.
3. Browser
4. Referensi-referensi mengenai materi ini
C. PROSES TAHAP PEKERJAAN
1. JavaScript HTML DOM Method
Berikut contoh Coding yang digunakan dalam JavaScript HTML DOM Method:
<html>
<body>
<h1>My First Page</h1>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Selamat Pagi Semua !^_^";
</script>
</body>
</html>
Hasil dari coding di atas seperti ini:
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.
2. JavaScript HTML DOM HTML
Berikut contoh Coding yang digunakan dalam JavaScript HTML DOM HTML:
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>
Maka hasil dari code di atas:
Seperti yang terlihat pada gambar di atas 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.
3. JavaScript HTML DOM CSS
Berikut contoh Coding yang digunakan dalam JavaScript HTML DOM CSS:
<HTML>
<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>
Maka hasilnya akan seperti ini:
Seperti tampilan di atas bahwa di sini CSS berperan penting dengan tujuan untuk memperindah sebuah project agar lebih menarik, contoh di atas terdapat pewarnaa dalam text. CSS di sini beda dengan yang digunakan di html biasa karena di HTML DOM ini menaruh coding pewarnaa bukan di tag <style> melainkan di tag <script>.
D. REFERENSI
-
![]Kesukaan](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLj9fuyJzNU2iCkdEt_6-9Hihf63Zgl7W2nrsnMxAIkuiT9vZbcgdYN6J_OLaFwHZsjbvh5uLvfb0f5X-9vfa9wIVDlslyMRRjrVyUNpxyzYPhwBhTPLlOJcOrkKXxHBZjkEooytt272wm/s1600/a.jpg)
Tidak ada komentar