Pemrograman berbasis web
Model HTML DOM dibangun sebagai
pohon Objek:
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>
DOM HTML (Document Object
Model)
Metode
mengajarkan Anda bagaimana menemukan dan mengakses elemen HTML
di halaman HTML, dalam menemukan elemen html pada JavaScript HTML DOM Element mempunyai beberapa cara diantaranya :
1. 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>
JavaScript HTML DOM Elements
element
2.
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>
JavaScript HTML DOM Elements
Ke 0
3.
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>
4.
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>
5. 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>
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 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
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>
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>
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>
Menggunakan Event
Contoh :
<!DOCTYPE html>
<html>
<body>
<p id="demo">Hello World!</p>
<script>
document.getElementById("demo").style.back
groundColor = "yellow";
</script>
</body>
</html>
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
Contoh Saat pengguna mengklik mouse
<!DOCTYPE html>
<html>
<body>
<h1
onclick="this.innerHTML='Ooops!'"
>Cli
ck on this text!</h1>
</body>
</html>
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>
Buatlah sebuah inputan dengan perhitungan dan tampilan
sebagai berikut
1.
2.
3.
Dengan menggunakan Fungsi dan event maka buatlah tampilan
kalkulator seperti di bawah ini
4.
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
