Pemrograman berbasis web DOM HTML (Document Object Model) Stimata/linda@stimata.ac.id/2017
DOM HTML (Document Object Model) Model HTML DOM dibangun sebagai pohon Objek:
DOM HTML (Document Object Model) DOM HTML adalah standar untuk mendapatkan, mengubah, menambah, atau menghapus elemen HTML. Metode HTML DOM adalah tindakan yang dapat Anda lakukan (pada Elemen HTML). Properti HTML DOM adalah nilai (dari Elemen HTML) yang dapat Anda setel atau ubah. Contoh berikut mengubah konten (innerHTML) elemen <p> dengan id = "demo": <!DOCTYPE html> <html> <body> <h2>My First Page</h2> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "Hello World!"; </script> </body> </html> Metode Properti
JavaScript HTML DOM Elements mengajarkan Anda bagaimana menemukan dan mengakses elemen HTML di halaman HTML, dalam menemukan elemen html pada JavaScript HTML DOM Element mempunyai beberapa cara diantaranya : Menemukan elemen HTML dengan id Hasilnya : Contoh ; <!DOCTYPE html> <html> <body> <p id="intro">Hello World!</p> <p>Contoh ini menunjukkan metode <b>getElementById</b> </p> <p id="demo"></p> <script> var bagian = document.getElementById("intro"); document.getElementById("demo").innerHTML = "Teks dari paragraf intro ini " + bagian.innerHTML; </script> </body> </html> element objek
JavaScript HTML DOM Elements Menemukan elemen HTML dengan nama tag Contoh ini menemukan semua elemen <p>: <!DOCTYPE html> <html> <body> <p>Hello World!</p> <p>DOM sangat berguna.</p> <p>Contoh ini menunjukkan metode <b>getElementsByTagName</b> </p> <p id="demo"></p> <script> var x = document.getElementsByTagName("p"); document.getElementById("demo").innerHTML = 'Paragraf Pertama (index 0) is: ' + x[0].innerHTML; </script> </body> </html> Ke 0 Ke 1
JavaScript HTML DOM Elements Menemukan elemen HTML dengan nama kelas Contoh : <!DOCTYPE html> <html> <body> <p>Hello World!</p> <p class="intro">DOM sangat berguna.</p> <p class="intro">Contoh ini menunjukkan metode <b>getElementsByClassName</b></p> <p id="demo"></p> <script> var x = document.getElementsByClassName("intro"); document.getElementById("demo").innerHTML = 'Paragraf Pertama (index 0) dengan class ="intro": ' + x[0].innerHTML; </script> </body> </html>
JavaScript HTML DOM Elements Menemukan elemen HTML oleh penyeleksi CSS Contoh : <!DOCTYPE html> <html> <body> <p>Hello World!</p> <p class="intro">DOM sangat berguna.</p> <p class="intro">contoh ini menunjukkan metode <b>querySelectorAll</b> method.</p> <p id="demo"></p> <script> var x = document.querySelectorAll("p.intro"); document.getElementById("demo").innerHTML = 'paragraf pertama (index 0) dengan class="intro": ' + x[0].innerHTML; </script> </body> </html>
JavaScript HTML DOM Elements Menemukan elemen HTML dengan koleksi objek HTML Contoh: <!DOCTYPE html> <html> <body> <form id="frm1" action="/action_page.php"> Nama Depan: <input type="text" name="fname" value="Donal"><br> Nama belakang: <input type="text" name="lname" value="bebek"><br><br> <input type="submit" value="Submit"> </form> <p>Klik "Try it" untuk menampilkan nilai setiap elemen dalam form.</p> <button onclick="myFunction()">Try it</button> <p id="demo"></p> <script> function myFunction() { var x = document.forms["frm1"]; var text = ""; var i; for (i = 0; i < x.length ;i++) { text += x.elements[i].value + "<br>"; } document.getElementById("demo").innerHTML = text; </script> </body> </html>
JavaScript HTML DOM Elements Menemukan elemen HTML dengan koleksi objek HTML berdasarkan nama Contoh : <!DOCTYPE html> <html> <head> <title></title> </head> <body> <form name="form1"> <pre> NAMA <input type="text" name="tnama"><br> NIM <input type="text" name="tnim"><br> <hr size="1px"/> NILAI 1 <input type="text" name="tnilai1"><br> NILAI 2 <input type="text" name="tnilai2"><br> </pre> </form> <script language="JavaScript"> nama = prompt('Masukkan Nama : ','') nim = prompt('Masukkan NIM : ','') nilai1 = prompt('Masukkan Nilai pertama :','') nilai2 = prompt('Masukkan Nilai kedua :','') document.form1.tnama.value = nama document.form1.tnim.value = nim document.form1.tnilai1.value = nilai1 document.form1.tnilai2.value = nilai2 </script> </body> </html>
JavaScript HTML DOM - Changing HTML HTML DOM memungkinkan JavaScript untuk mengubah isi elemen HTML.Mengubah Aliran Output HTML. Dengan javascript dapat membuat konten html lebih dinamis. Mengubah Konten HTML Cara termudah untuk memodifikasi konten elemen HTML adalah dengan menggunakan properti innerHTML. Untuk mengubah isi elemen HTML, gunakan sintaks ini: document.getElementById(id).innerHTML = new HTML
JavaScript HTML DOM - Changing HTML Mengubah Konten HTML Contoh ini mengubah isi elemen <h1>: <!DOCTYPE html> <html> <body> <h1 id="header">Old Header</h1> <script> var element = document.getElementById("header"); element.innerHTML = "New Header"; </script> </body> </html>
JavaScript HTML DOM - Changing HTML Mengubah Nilai Atribut Untuk mengubah nilai atribut HTML, gunakan sintaks ini: document.getElementById(id).attribute = new value Contoh : <!DOCTYPE html> <html> <body> <img id="image" src="smiley.gif" width="160" height="120"> <script> document.getElementById("image").src = "landscape.jpg"; </script> </body> </html>
JavaScript HTML DOM - Changing CSS DOM HTML memungkinkan JavaScript untuk mengubah style elemen HTML. Untuk mengubah gaya elemen HTML, gunakan sintaks ini: document.getElementById(id).style.property = new style Contoh berikut mengubah gaya elemen <p>: <!DOCTYPE html> <html> <body> <p id="p1">Hello World!</p> <p id="p2">Hello World!</p> <script> document.getElementById("p2").style.color = "blue"; document.getElementById("p2").style.fontFamily = "Arial"; document.getElementById("p2").style.fontSize = "larger"; </script> <p>Paragraf di atas diubah dengan naskah.</p> </body> </html>
JavaScript HTML DOM - Changing CSS Menggunakan Event Contoh : <!DOCTYPE html> <html> <body> <p id="demo">Hello World!</p> <script> document.getElementById("demo").style.backgr oundColor = "yellow"; </script> </body> </html>
JavaScript HTML DOM Events JavaScript dapat dijalankan saat sebuah event terjadi, seperti saat pengguna mengeklik elemen HTML. Untuk menjalankan kode saat pengguna mengeklik elemen, tambahkan kode JavaScript ke atribut acara HTML: onclick=JavaScript Contoh event HTML: Saat pengguna mengklik mouse Saat halaman web dimuat Saat gambar telah dimuat Saat mouse bergerak di atas sebuah elemen Saat bidang masukan diubah Saat formulir HTML dikirimkan
JavaScript HTML DOM Events Contoh Saat pengguna mengklik mouse <!DOCTYPE html> <html> <body> <h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1> </body> </html>
JavaScript HTML DOM Events Atribut Event HTML Untuk menetapkan acara ke elemen HTML, Anda dapat menggunakan atribut event. Contoh : <!DOCTYPE html> <html> <body> <p>Click the button to display the date.</p> <button onclick="displayDate()">The time is?</button> <script> function displayDate() { document.getElementById("demo").innerHTML = Date(); } </script> <p id="demo"></p> </body> </html>
Tugas Buatlah sebuah inputan dengan perhitungan dan tampilan sebagai berikut 1. 2.
TUGAS Dengan menggunakan Fungsi dan event maka buatlah tampilan kalkulator seperti di bawah ini Buatlah script untuk mendeklarasikan tampilan sebuah halaman menggunakan tombol login. Terdapat dua form input seperti gambar berikut: Isi form username = “admin” dan form password = “12345”. Kemudian tekan tombol login. Pada tombol login, isi dengan sebuah function yang berfungsi untuk melakukan pengecekan. Apabila username=”admin” dan password=”12345” , maka akan tampil (alert dan warna background berubah) seperti berikut
Gunakan fungsi untuk mendeklarasikan sebuah file html dengan penjelasan sebagai berikut :