cb00b pemrograman berbasis web dom

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 dengan id

= "demo":  


Metode

My First Page
Properti

 

document.getElementById("demo").innerHTML = "Hello World!";





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 :
1. Menemukan elemen HTML dengan id
Hasilnya :
Contoh ;


element

Hello World!
Contoh ini menunjukkan metode getElementById


objek
var bagian = document.getElementById("intro");
document.getElementById("demo").innerHTML =
"Teks dari paragraf intro ini " + bagian.innerHTML;

JavaScript HTML DOM Elements
2.  

Menemukan elemen HTML dengan nama tag

Contoh ini menemukan semua elemen :



Ke 0
Hello World!
DOM sangat berguna.
Ke 1
Contoh ini menunjukkan metode
getElementsByTagName

 

var x = document.getElementsByTagName("p");

document.getElementById("demo").innerHTML =
'Paragraf Pertama (index 0) is: ' + x[0].innerHTML;




JavaScript HTML DOM Elements
3.Menemukan

elemen HTML dengan nama kelas

Contoh :



Hello World!
DOM sangat berguna.
Contoh ini menunjukkan metode
getElementsByClassName

 

var x = document.getElementsByClassName("intro");
document.getElementById("demo").innerHTML =
'Paragraf Pertama (index 0) dengan class ="intro": ' + x[0].innerHTML;




JavaScript HTML DOM Elements
4.

 Menemukan

elemen HTML oleh penyeleksi CSS

Contoh :

Hello World!
DOM sangat berguna.
contoh ini menunjukkan metode
querySelectorAll method.

 

var x = document.querySelectorAll("p.intro");
document.getElementById("demo").innerHTML =
'paragraf pertama (index 0) dengan class="intro": ' + x[0].innerHTML;




JavaScript HTML DOM Elements
5.

 Menemukan elemen HTML dengan koleksi objek HTML
Contoh:

Nama Depan:
Nama belakang:


 
Klik "Try it" untuk menampilkan nilai setiap elemen dalam form.
Try it

 

function myFunction() {
var x = document.forms["frm1"];
var text = "";
var i;
for (i = 0; i < x.length ;i++) {
text += x.elements[i].value + "";
}

document.getElementById("demo").innerHTML = text;
}




JavaScript HTML DOM Elements
Menemukan elemen HTML dengan koleksi objek HTML berdasarkan nama

Contoh :








NAMA
NIM

NILAI 1
NILAI 2



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




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 :




Old Header
 

var element = document.getElementById("header");
element.innerHTML = "New Header";
 



JavaScript HTML DOM - Changing HTML
Mengubah Nilai Atribut
 Untuk mengubah nilai atribut HTML, gunakan sintaks ini:
document.getElementById(id).attribute = new value


Contoh :




 

document.getElementById("image").src = "landscape.jpg";

 



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 :




Hello World!
Hello World!
 

document.getElementById("p2").style.color = "blue";
document.getElementById("p2").style.fontFamily = "Arial";
document.getElementById("p2").style.fontSize = "larger";

 
Paragraf di atas diubah dengan naskah.



JavaScript HTML DOM - Changing CSS
Menggunakan Event
 Contoh :



Hello World!

document.getElementById("demo").style.back
groundColor = "yellow";





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
    Saat
    Saat
    Saat
    Saat
    Saat

pengguna mengklik mouse
halaman web dimuat
gambar telah dimuat
mouse bergerak di atas sebuah elemen
bidang masukan diubah
formulir HTML dikirimkan

JavaScript HTML DOM Events
Contoh Saat pengguna mengklik mouse



Cli
ck on this text!




JavaScript HTML DOM
Events
Atribut Event HTML


Untuk menetapkan acara ke elemen HTML, Anda dapat menggunakan
atribut event.
 Contoh :



Click the button to display the date.
 
The time is?
 

function displayDate() {
document.getElementById("demo").innerHTML = Date();
}







Tugas


Buatlah sebuah inputan dengan perhitungan dan tampilan
sebagai berikut
1.



2.



TUGAS
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



Gunakan fungsi untuk mendeklarasikan sebuah file html dengan
penjelasan sebagai berikut :