PEMROGRAMAN WEB 1

Document object model (DOM)

STMIK Asia Malang - 2013

Rina Dewi Indah Sari, S.Kom

Pendahuluan

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. Dengan kata lain, DOM adalah cara JavaScript melihat suatu halaman HTML.
STMIK Asia Malang -

Definisi DOM

DOM adalah antarmuka yang memungkinkan seseorang untuk mengakses dan memanipulasi konten dari web (dokumen) dengan pendekatan pemrograman. DOM menyediakan representasi terstruktur dan berorientasi objek dari setiap elemen dan konten dalam halaman dengan method-method untuk menerima dan mengatur property dari objek. DOM juga menyediakan method untuk menambah dan menghilangkan objek, sehingga akan lebih leluasa dalam pembuatan konten yang dinamis. DOM juga menyediakan interface untuk mengatur event, sehingga memungkinkan seseorang untuk menangkap dan merespon kepada user atau aksi browser. STMIK Asia Malang -

Struktur Hierarki DOM

STMIK Asia Malang -

DOM Standart

W3C mulai mengembangkan DOM awal 1990-an. Pada bulan Oktober 1998, DOM 1 diluncurkan. Spesifikasi DOM W3C terbagi menjadi beberapa tingkat. Sebuah halaman yang mendukung suatu level harus menerapkan semua persyaratan level tersebut dan di bawahnya. Sebelum ada standar DOM dari W3C, masing-masing web browser memiliki DOM sendiri. Akibatnya, bila suatu website ingin ditampilkan secara cross-browser compatible, harus dirancang untuk setiap web browser yang akan didukung. DOM standar mempermudah pengembangan aplikasi web. STMIK Asia Malang -

Level DOM

DOM Level 0 (dom0) yang sesuai dengan model browser lama, seperti Internet Explorer dan Netscape versi 4. Saat ini W3C telah mengeluarkan tiga buah rekomendasi untuk DOM yaitu

DOM Level 1, DOM Level 2 dan DOM Level 3.

STMIK Asia Malang -

Pengembangan DOM

Aktivitas pengembangan DOM di W3C sudah ditutup sejak tahun 2004 dengan lengkapnya pengembangan DOM Level 3 Recommendations. Tapi saat ini W3C Web Applications Working Group sudah mulai bergerak untuk melakukan revisi.

STMIK Asia Malang -

Parser DOM

Untuk memanipulasi dokumen dengan DOM, suatu parser akan membentuk representasi logik dari bagian isi dokumen dalam bentuk struktur pohon. DOM tidak menjelaskan bagaimana melakukan parsing terhadap dokumen, pembuatan dokumen baru ataupun melakukan serialisasi terhadap dokumen. Hal ini dikarenakan DOM adalah spesifikasi yang bebas bahasa. Untuk melakukan fungsi-fungsi tersebut dibutuhkan DOM parser yang diimplementasikan kedalam berbagai bahasa pemrograman tertentu seperti C, C++, atau Java. Beberapa contoh DOM parser adalah Apache Xerces, Crimson, Oracle XML Parser for Java atau MsXML.

STMIK Asia Malang -

Variasi DOM

Core DOM
Model

Standar untuk Dokumen terstruktur. Standar untuk Dokumen HTML. Standar untuk Doukumen XML.

HTML DOM
Model

XML DOM
Model

STMIK Asia Malang -

HTML DOM

HTML DOM bisa didefinisikan:

Standar

model objek untuk HTML Standar programming interface untuk HTML Platform dan language-independent Standar W3C

HTML DOM mendefiniskan object dan property dari seluruh elemen HTML dan method (interface) untuk mengaksesnya. Dengan kata lain: HTML DOM adalah standar untuk menerima, mengubah, menambah, atau menghapus elemen HTML. STMIK Asia Malang -

Struktur Pohon HTML DOM

Berdasarkan DOM, seluruh elemen HTML adalah Node yang akan disusun dengan menggunakan struktur tree.

STMIK Asia Malang -

Aturan DOM menyatakan:

Seluruh dokumen adalah suatu node dokumen Seluruh elemen HTML adalah suatu node elemen Teks dalam elemen HTML adalah node teks Setiap atribut HTML adalah node atribut. Komentar adalah node komentar

STMIK Asia Malang -

Objek HTML DOM

Document object Anchor object Area object Base object Body object Button object Event object Form object Frame object Frameset object IFrame object

Input Checkbox object Input File object Input Hidden object Input Password object Input Radio object Input Reset object Input Submit object Input Text object Link object Meta object Object object Option object Select object

Style object Table object TableCell object TableRow object Textarea object

Image object
Input Button object

STMIK Asia Malang -

Property HTML DOM

x.innerHTML

nilai text dari x nama dari x nilai dari x parent node dari x node-node child dari x atribut dari x

x.nodeName

x.nodeValue

x.parentNode

x.childNodes

x.attributes

STMIK Asia Malang -

Method HTML DOM

x.getElementById(id)
mendapatkan

elemen berdasarkan id seluruh elemen sesuai tag name node child ke x

x.getElementsByTagName(name)
mendapatkan

x.appendChild(node)
memasukkan

x.removeChild(node)
menghapus

node child dari x

STMIK Asia Malang -

Contoh DOM
<html><body> <h1>W3Schools Internal Note</h1> <p><b>To:</b> <span id=to></span><br /> <b>From:</b> <span id=from></span><br /> <b>Message:</b> <span id=message></span> <script type=text/javascript> if (window.XMLHttpRequest) { xhttp=new XMLHttpRequest() } else { xhttp=new ActiveXObject(Microsoft.XMLHTTP) } xhttp.open(GET,note.xml,false); xhttp.send(); xmlDoc=xhttp.responseXML; document.getElementById(to).innerHTML= xmlDoc.getElementsByTagName(to)[0].childNodes[0].nodeValue; document.getElementById(from).innerHTML= xmlDoc.getElementsByTagName(from)[0].childNodes[0].nodeValue; document.getElementById(message).innerHTML= xmlDoc.getElementsByTagName(body)[0].childNodes[0].nodeValue; </script></body>

</html>

STMIK Asia Malang -

Mengakses Element DOM dengan Javascript

document.getElementById('id_element')

dengan perintah ini akan mendapatkan objek dari element yang dimaksud secara langsung, dan dapat digunakan secara langsung juga. dengan perintah ini akan mendapatkan array dari semua objek pada halaman yang memiliki nama tag sesuai dengan parameter yang dimasukan. dengan perintah ini, bisa mendapatkan object dari parent element (element di atasnya) untuk element yang dimaksud. dengan perintah ini, bisa mendapatkan object dari child element (element anaknya) pertama untuk element yang dimaksud. dengan perintah ini, bisa mendapatkan object tetangga untuk element yang dimaksud. STMIK Asia Malang -

document.getElementsByTagName('NAMA_TAG')

element.parentNode

element.firstChild

element.nextSibling

Contoh dokumen HTML

<html> <body> <div id="fakultas"> <b>Ekonomi</b> <b>Bahasa</b> <a href="/">Hukum</a> <div id="teknik"> <div id="if">Informatika</div> <div id="mi">Manajemen Informatika</div> <b>Teknik Komputer</b> </div> </body> </html> STMIK Asia Malang -

Mengakses dengan JS

/* Mendapatkan element <div id="teknik"> */

var teknik = document.getElementById('teknik'); var fakultas = document.getElementById('fakultas');

/* Mendapatkan element <div id="fakultas"> */

/* Mendapatkan semua element div, dengan hasil array element berikut: Array(<div id="fakultas">, <div id="teknik">, <div id="if">, <div id="mi">)

var divs = document.getElementsByTagName('div');

STMIK Asia Malang -

Mengakses dengan JS

/* Mengambil Element dari hasil getElementsByTagName *

var fakultas_2 = divs[0];

var teknik_2 = divs[1];

var if = divs[2]; var mi = divs[3];

Mengambil parent dari fakultas, yaitu <body> */

var el_body = fakultas.parentNode;

var el_body = mi.parentNode;

/* Mengambil parent dari mi, yaitu <div id="teknik"> */

/* Mengambil firstChild dari teknik, yaitu <b>Ekonomi</b> */

var ekonomi = fakultas.firstChild;

var bahasa = ekonomi.nextSibling; var hukum = bahasa.nextSibling;

/* Mengambil tetangga dari ekonomi, yaitu <b>Bahasa</b> */

/* Mengambil tetangga dari bahasa, yaitu <a href="/">Hukum</a>

STMIK Asia Malang -

Contoh
<html> <head> <title>Object Model</title> <script language="Javascript">

function start()
{ alert(document.getElementById("pText").innerHTML); document.getElementById("pText").innerHTML = "Terimakasih sudah mampir.";

}
</script></head> <body OnLoad="start()"> <p id="pText">Selamat Datang di website kami!</p>

</body></html>

STMIK Asia Malang -

innerHTML
<html><head> <SCRIPT language=Javascript> function xxx() { document.all.Layer1.style.backgroundColor=0xFF0000;

document.all.Layer1.innerHTML='<i>MERAH<i> Muda'; }
function yyy() { document.all.Layer1.style.backgroundColor=0xFFFF00; document.all.Layer1.innerHTML='<b><a href=google.com>KUNING</a></b>'; }

</SCRIPT></head>
<body bgcolor="#FFCC99"> <div id="Layer1" style="position:absolute; left:235px; top:152px; width:246px; height:136px; zindex:1; background-color: #FF3333; layer-background-color: #FF3333; border: 1px none #000000 onmouseover=xxx(); onmouseout=yyy(); > </div></body></html>

STMIK Asia Malang -

Membuat Element Baru di dalam Element yang sudah ada

Kadang perlu untuk menyisipkan element baru di dalam element yang sudah ada tanpa memperbarui semua kontent HTML dari element yang akan diisi dengan menggunakan .innerHTML. Untuk melakukan hal tersebut, dapat menggunakan document.createElement dan memasukannya ke dalam element yang dimaksud dengan menggunakan appendChild atau insertBefore.
STMIK Asia Malang -

Contoh Membuat elemen div baru

/* Membuat Element DIV baru */

var teknik_elektro = document.createElement('div');

teknik_elektro.innerHTML = 'Elektro';

/* Memasukan element DIV elektro ke dalam element <div id="teknik"> yang sudah ada dalam variabel teknik

teknik.appendChild(teknik_elektro);

/* Sekarang ini isi tag <div id="teknik"> akan berubah menjadi: <div id="teknik"> <div id="if">Informatika</div> <div id="mi">Manajemen Informatika</div> <b>Teknik Komputer</b> <div>Elektro</div> </div>

STMIK Asia Malang -

Contoh Membuat elemen a baru

/* Membuat Element A baru */

var teknik_industri = document.createElement('a');

teknik_industri.href='http://asia.ac.id/';
i.innerHTML = 'Teknik Industri';

/* Kita akan memasukannya ke element <div id="teknik"> sebelum element <div id="mi"> yang sudah ada dalam variabel mi

teknik.insertBefore(teknik_industri,mi);

/* Sekarang ini isi tag <div id="teknik"> akan berubah menjadi:

<div id="teknik"> <div id="if">Informatika</div>

<a href="http://asia.ac.id/">Teknik Industri</a>

<div id="mi">Manajemen Informatika</div> <b>Teknik Komputer</b> <div>Elektro</div>

</div>

STMIK Asia Malang -

Contoh hapus row tabel

<html><head> <script type="text/javascript"> function deleteRow(r) { var i=r.parentNode.parentNode.rowIndex; document.getElementById('myTable').deleteRow(i); } </script></head> <body> <table id="myTable" border="1"> <tr> <td>Row 1</td> <td><input type="button" value="Delete" onclick="deleteRow(this)"></td></tr> <tr> <td>Row 2</td> <td><input type="button" value="Delete" onclick="deleteRow(this)"></td></tr> <tr> <td>Row 3</td> <td><input type="button" value="Delete" onclick="deleteRow(this)"></td></tr> </table></body></html>

STMIK Asia Malang -

Dynamic Styles

Elements style yang dapat dirubah secara dinamis Dynamic HTML Object Model juga memperbolehkan untuk merubah class attribute

STMIK Asia Malang -

Contoh 1
<html><head> <title>Object Model</title> <script language="javascript"> function start()

{
var inputColor = prompt("Masukkan warna untuk " +"background halaman ini", ""); document.body.style.backgroundColor = inputColor; } </script> </head> <body onload="start()"> <p>Selamat Datang di website kami!</p> </body>

</html>

STMIK Asia Malang -

Contoh 2
<html ><head> <script language="javascript"> function ubah() {

document.getElementById("layer1").style.color="blue";
document.getElementById("layer1").style.fontFamily="Arial"; document.getElementById("layer1").style.textDecoration="Underline"; }

</script></head>
<body> <div id="layer1">Halo!! </div> <input type="button" value="ubah" onclick=ubah()" />

</body>
</html>

STMIK Asia Malang -

Contoh 3
<html><head> <title>Object Model</title>

<style type = "text/css">

.bigText { font-size: 3em; font-weight: bold } .smallText { font-size: .75em } </style> <script type = "text/javascript"> function start() { var inputClass = prompt("Masukkan className untuk teks " + "(bigText atau smallText)", "" );

pText.className = inputClass;
} </script></head> <body onload = "start()"> <p id = "pText">Selamat Datang di website kami!</p> </body>

STMIK Asia Malang -

Dynamic Positioning

HTML elements dapat diatur dengan scripting

Mendeklarasikan

posisi elements CSS menjadi absolute atau relative Memindah elemen dengan memanipulasi properti top, left, right atau bottom dari CSS

STMIK Asia Malang -

Contoh
<html><head> <title>Dynamic Positioning</title> <script type = "text/javascript">

var speed = 5;
var count = 10; var direction = 1; var firstLine = "Text Membesar"; var fontStyle = [ "serif", "sans-serif", "monospace" ]; var fontStylecount = 0;

function start() {
window.setInterval( "run()", 100 ); } function run() { count += speed; if ( ( count % 200 ) == 0 ) { speed *= -1; direction = !direction; pText.style.color = ( speed < 0 ) ? "red" : "blue" ; firstLine = ( speed < 0 ) ? "Text Mengecil" : "Text Membesar"; pText.style.fontFamily =fontStyle[ ++fontStylecount % 3 ]; } pText.style.fontSize = count / 3; pText.style.left = count;

STMIK Asia Malang -

Image Gallery
<html> <head>

<script language="javascript">
var arr=new Array("a.jpg","b.jpg","c.jpg"); var n=0; function gambar() { n+=1; if(n==3) n=0; document.getElementById("layer1").innerHTML="<img src='"+arr[n]+"' width=100 height=100>"; }

</script></head>
<body> <div id="layer1"><img src="a.jpg" height="100" width="100"/> </div> <input type="button" value="ubah" onclick=gambar()" /> </body></html>

STMIK Asia Malang -

Ubah Image
<html><head> <SCRIPT>

function xxx(x)
{document.all('img'+x).src="nextdown.gif";} function yyy(x)

{eval('document.img'+x+'.src="nextup.gif"');}
</SCRIPT> </head> <body bgcolor="#FFCC66" > <IMG name="img0" src="nextup.gif" onMouseover="xxx(0)" onMouseout="yyy(0)"> <IMG name="img1" src="nextup.gif" onMouseover="xxx(1)" onMouseout="yyy(1)"> <IMG name="img2" src="nextup.gif" onMouseover="xxx(2)" onMouseout="yyy(2)"> </body> </html>

STMIK Asia Malang -

Z-Index dan Visibility

<html><head>CCCCCUC;NLKC;C C function yyy() { if (y) { document.all.Layer1.style.visibility = "hidden"; }

else { document.all.Layer1.style.visibility = "visible"; }

y = !y; } x=false; function xxx() {if (x) { document.all.Layer1.style.zIndex = 0; } else { document.all.Layer1.style.zIndex = 5; } x = !x; } </SCRIPT></head> <body bgcolor="#FFCC99"> <div id="Layer1" style="position:absolute; left:133px; top:70px; width:327px; height:81px; z-index:2; background-color: #FF3333; layer-background-color: #FF3333; border: 1px none #000000" class="Besar"></div>

<div id="Layer2" style="position:absolute; left:103px; top:40px; width:172px; height:74px; z-index:1; background-color: #3333FF; layer-background-color: #3333FF; border: 1px none #000000"></div>
<div id="Layer3" style="position:absolute; left:345px; top:110px; width:218px; height:102px; z-index:3; background-color: #00CC66; layer-background-color: #00CC66; border: 1px none #000000"></div> <form name="form1" > <input type="button" name="Button" value="Pindah" onClick="xxx()">

<input type="button" name="Button" value="Sembunyi" onClick="yyy()">

STMIK Asia Malang -

Tugas Tambahan

Bagi mahasiswa yang merasa nilai UTSnya kurang, dapat mengerjakan tugas berikut ini. Dikumpulkan minggu depan

STMIK Asia Malang -

Tugas Tambahan

Buatlah halaman sebagai berikut:

Kedip

Senyum

Gunakan div untuk membuat bentuk diatas. Buat animasi kedip dan senyum dengan materi diatas.

STMIK Asia Malang -