Langkah - Langkah Dasar Menjadi Master JS HTML DOM - CATATAN ANAK SISTEM INFORMATIKA

Langkah - Langkah Dasar Menjadi Master JavaScript

Pengenalan HTML DOM (Document Object Model)

Langkah - Langkah Dasar Menjadi Master JavaScript - DOM (Document Object Model) adalah object model standar untuk HTML dan XML yang bersifat platform independent. Sebuah web brwoser tidak harus menggunakan DOM untuk menampilkan dokumen HTML. Namun DOM diperlukan oleh javascript untuk mengubah tampilan sebuah website secara dinamis. Dengan kata lain, DOM adalah cara lain Javascript melihat suatu halaman HTML. Adapun struktur HTML DOM bisa dilhat di bawah ini.

http://www.w3schools.com/

Berikut kegunaan dari object, dantaranya :

Dapat mengubah semua element
Dapat mengubah semua tribut
Dapat mengubah semua style CSS
Dapat menghapus element
Dapat menambah lement dan atribut baru
Dapat bereaksi terhadap semua event
Dapat membuat event baru

Properti HTML DOM

Properti	Fungsi
x.innerHTML	Menulis atau mengambil text dari elemen x
x.nodeName	Memberi atau mengambil nama elemen x
x.nodeValue	Memberi atau mengambil nilai dari elemen x
x.parentNode	Mengambil informasi parent dari elemen x
x.childNodes	Mengambil informasi child dari elemen x
x.attributs	memberi atau mengambil informasi atribut dari element x

x adalah suatu element.

Fungsi HTML DOM

Nama Fungsi	Kegunaan
x.getELementById(id)	Mengakses elemen dengan ID tertentu
x.getElementsByTagName(nama)	Mengakses semua elemen dengan nama tertentu
x.appendChild(node)	Menambah element child ke suatu element x
x.removeChild(node)	menghapus element child dari suatu element x

x adalah suatu element.

Document Object Collection

Koleksi	Deskripsi
anchor[]	Memberikan informasi semua anchor (tag a) dalam sebuah dokumen
forms[]	Memberikan informasi semua form dalam sebuah dokumen
images[]	Memberikan informasi semua images dokumen
link[]	Memberikan informasi semua link dalam sebuah dokumen

Contoh script untuk document object collection. Pada contoh script dibawah ini document.write("JUmlah Form : "+document.forms.length); digunakan untuk menampilkan jumlah form dan akan menghasilkan nilai 2. Udah paham kan apa maksutnya

documentobject.html

<!DOCTYPE html>
<html>
<head>
 <title>belajar HTML DOM</title>
</head>
<body>
 <form name="form1"></form>
 <form name="form2"></form>
 <script type="text/javascript">
  document.write("Jumlah Form : "+document.forms.length);
 </script>
</body>
</html>

Document Object Properties

Properti	Deskripsi
cookie	memberikan informasi nama/nilai cookie pada document
documentMode	memberikan informasi mode yang digunakan browser untuk me-render dokumne
domain	Memberikan informasi nama domain dari server yang mengolah dokumen
lastModified	Memberikan informasi tanggal dan waktu kapan dokumen terakhir dimodifikasi
readyState	Memberikan informasi status loading dari dokumen
referrer	Memberikan informasi URL yang memanggil halaman yang sedang ditampilkan
title	Memberikan informasi title suatu halaman
URL	Memberikan informasi lengkap URL dari suatu dokumen atau halaman

Contoh script untuk document object propertis. Coba copas script dibawah ini, lalu jalankan pada web browser

documentobject2.html

<!DOCTYPE html>
<html>
<head>
 <title>belajar HTML DOM</title>
</head>
<body>
 <script type="text/javascript">
  document.write(document.title);
 </script>
</body>
</html>

Document Object Method

Mthod	Deskripsi
open()	membuka output stream untuk mengumpulkan informasi yang dikirim oleh document.write()
close()	menutup output stream
write()	menuliskan text (HTML atau sintaks javascript) ke dokumen atau halaman
writeln	Sama dengan write tetapi diikuti dengan pindah baris
getElementById()	mengakses element berdasarkan id
getElementsByName()	mwngakses element berdasarkan name
getElementsByTagName	mengakses elemen berdasarkan tag
URL	Memberikan informasi lengkap URL dari suatu dokumen atau halaman

Disini saya memberikan salah satu contoh document object method. Mungkin temen-temen bisa mencoba method yang lainnya atau temen-temen bisa searching di google untuk mendapatkan contoh document object method yang lebih lengkap.

documentobject3.html

<!DOCTYPE html>
<html>
<head>
 <title>belajar HTML DOM</title>
</head>
<body>
 <div id="coba">
  <button onclick="panggilFunction()">Tampil</button>
 </div>
 <script type="text/javascript">
  function panggilFunction(){
   var a = document.getElementById('coba');
   a.innerHTML = "<h3>Tampilkan Disini</h3>";
  }
 </script>
</body>
</html>

untuk penjelasan code tersebut, dimana pada script onclick="panggilFunction()" dimana fungsi panggilFunction akan berjalan ketika terjadi aksi klik pada button Tampil. Selanjutnya untuk function panggilFunction() merupakan fungsi javascript panggilFunction. Yang terakhir coba.innerHTML akan mengisi nilai pada div id coba.

Event Object

Memberikan informasi tentang event (aksi user) yang terjadi
Mempresentasikan kondisi element saat diberi event, misalkan saat suatubutton diklik, atau keyboard di tekan

Ada macam-macam event yang bisa terjadi pada halaman web atau object HTML. diantaranya adalah

Event	Deskripsi
onError	Event ini dijalankan ketika terjadi kesalaham. event ini dimiliki oleh objek window dan image
onLoad	Event ini dijalankan ketika suatu objek selesai ditampilkan pada halaman web. Objek yang dimaksud pada keterangan in adalah objek window, frame dan image
onUnload	Event ini dijalankan ketika tesuatu objek telah dikeluarkan dari ruanga memori, atau tellah selesai digunakan. objek ini adalah window, frmae dan image
onAbort	Event yang dimiliki oleh objek image in akan dibangkitkan ketika sebuah gambar dihentikan proses pemunculannya yang diakibatkan penekanan tombol stop pada browser
onBlur	Event ini dijalankan ketika sebuah element (window, frmae, select, text dan textarea) kehilangan focus
onChange	Event ini dijalankan ketika sebuah element (select, text, textarea) telah diubah nilainya sebelum element tersebut kehilangan focusnya
onClick	Event ini dijalankan ketika terjadi aksi klik terhadap element, dimana element yang dimaksut adalah semua element dari form yang dapat diklik seperti button
onContextMenu	Event ini dijalankan ketika terjadi aksi klik kanan pada tombol mouse terhadap suatu element
onDblClick	hampir sama dengan event onClick, namun akan dijalankan ketika terjadi aksu klik ganda
onFocus	kebalikan dari event onBlur. Dijalankan ketika suatu elemen dikenai focus
onHelp	Event ini dijalankan ketika terjadi penekanan terhadap tombol F1
onKeydown	Event ini dijalankan ketika terjadi penekanan kebawah tombol keyboard
onKeypress	Event ini dijalankan ketika terjadi aksi penekanan tombol keyboard. Aksi penekanan ini adalah sebuah aksi lengkap penekanan tombol keyboard. Mulai dari memencet tobolkeyboard tersebut hingga melepaskannya
onKeyup	Event ini dijalankan ketika tombol keyboard yang awal nya ditekan lalu dilepas
onMousedown	Event ini dijalankan ketika terjadi tombol mouse di tekan kebawah
onMousemove	Event ini dijalankan ketika mouse digerakkan (mouse berpindah posisi)
onMouseout	Event ini dijalankan ketika panah mouse keluar dari daerah lingkup suatu element
onMouseover	Event ini dijalankan ketika panah mouse bearada diatas element. yaitu element hyperlink dan element area
onReset	Event yang dimiliki secara khusu oleh objek form ini akan dijalankan ketika terjadi penekanan terhadap tombol reset yang dimiliki form yang bersangkutan
onResize	Event ini dijalankan ketika jendela browser diubah ukurannya
onSelect	Event ini dijalankan ketika terjadi pemilihan text pada element text dan area dengan meberinya highlight atau blok
onStop	Event ini dijalankan ketika penggunak menekan pada tombol stop di browser
onSubmit	Event ini dijalankan ketika terjadi penekan tombol submit yang dimiliki sebuah form

berikut contoh-contoh untuk event object pada js HTML DOM

onclick.html

<!DOCTYPE html>
<html>
<head>
 <title>belajar HTML DOM</title>
</head>
<body>
 <form>
  <input type="button" name="test" value="test" onClick="tes()">
 </form>
 <script type="text/javascript">
  function tes(){
   alert("Berhasil");
  }
 </script>
</body>
</html>

onload.html

<!DOCTYPE html>
<html>
<head>
 <title>belajar HTML DOM</title>
</head>
<body onload="alert('Selamat Datang')">

</body>
</html>

onchange.html

<!DOCTYPE html>
<html>
<head>
 <title>belajar HTML DOM</title>
</head>
<body>
 <form>
  <select name="provinsi" onchange="tampil(this.value);">
   <option value=""></option>
   <option value="jateng">Jawa Tengah</option>
   <option value="jabar">Jawa Barat</option>
  </select>
 </form>
 <div id="kota"></div>
 <script type="text/javascript">
  function tampil(propinsi){
   var kota = "";
   switch(propinsi){
    case "jateng" : {
     kota = "<ul> 
     <li>Semarang</li> 
     <li>Solo</li> 
     </ul>";
    }
    break;

    case "jabar" : {
     kota = "<ul> 
     <li>Bandung</li> 
     <li>Garut</li> 
     </ul>";
    }
    break;

    default : kota = "";
   }

   document.getElementById('kota').innerHTML = kota;
  }
 </script>
</body>
</html>

onmouse.html

<!DOCTYPE html>
<html>
<head>
 <title>belajar HTML DOM</title>
</head>
<body>
 <table>
  <tr onmouseover="this.bgColor='lightblue'" onmouseout="this.bgColor='#efefef'" bgcolor="#efefef">
   <td>Baris Pertama</td>
  </tr>
  <tr onmouseover="this.bgColor='lightblue'" onmouseout="this.bgColor='#efefef'" bgcolor="#efefef">
   <td>Baris Kedua</td>
  </tr>
 </table>
</body>
</html>

Element Object

Digunakan untuk memanipulasi element HTML

Properti	Deskripsi
accessKey	Menentukan atau memberikan informasi accessKey (shortcut) dari suatu elemen
className	Menentukan atau memberikan informasi atribut class dari suatu elemen
disabled	Menentukan atau memberikan informasi atribut dissabled dari suatu elemen
id	Menentukan atau memberikan informasi atribut id dari suatu elemen
innerHTML	Menentukan atau memberikan konten HTML dari suatu elemen
style	Menentukan atau memberikan informasi atribut style dari suatu elemen

elementobject.html

<!DOCTYPE html>
<html>
<head>
 <title>belajar HTML DOM</title>
</head>
<body>
 <div id="welcome">
  <h1>Selamat Datang</h1>
 </div>
 <button id="ganti" onclick="gantiwarna()">Biru</button>

 <script type="text/javascript">
  function gantiwarna(){
   var a = document.getElementById('welcome');
   var b = document.getElementById('ganti');

   if(b.innerHTML == "Biru"){
    a.style.cssText = "background-color: blue;";
    b.innerHTML = "Merah"
   }else if(b.innerHTML == "Merah"){
    a.style.cssText = "background-color: red;";
    b.innerHTML = "Biru";
   }
  }
 </script>
</body>
</html>

Itulah Dasar-dasar untuk menjadi Master JS HTML DOM. Untuk melangkah ke tahap selanjutnya temen-temen harus menguasai bab ini karena bab ini merupakan dasar untuk menguasai bab selanjutnya. Untuk Bab Selanjutnya kita akan membahas apa itu JqGrid. Sekilas tentang JqGrid. dengan JqGrid kita bisa memanipulasi data diantaranya add data, edit data, delete data serta searching.

Pages

Langkah - Langkah Dasar Menjadi Master JS HTML DOM

Pengenalan HTML DOM (Document Object Model)

Properti HTML DOM

Fungsi HTML DOM

Document Object Collection

Document Object Properties

Document Object Method

Event Object

Element Object

Belum ada tanggapan untuk "Langkah - Langkah Dasar Menjadi Master JS HTML DOM"

Langkah - Langkah Dasar Menjadi Master JS HTML DOM

Pengenalan HTML DOM (Document Object Model)

Properti HTML DOM

Fungsi HTML DOM

Document Object Collection

Document Object Properties

Document Object Method

Event Object

Element Object

Postingan terkait:

Belum ada tanggapan untuk "Langkah - Langkah Dasar Menjadi Master JS HTML DOM"