DHTML ~ Belajar Komputer dan Elektronika

Selasa, 31 Juli 2012

DHTML

04.08 belajar

DHTML atau Dynamic HTML, bukanlah suatu bahasa pemrograman melainkan merupkan suatu istilah untuk membuat halaman web yang dinamis dan interaktif dengan mengkombinasikan bahasa pemrograman HTML, JavaScript, Document Object Model, dan CSS.
DHTML mengijinkan skrip bahasa pemrograman untuk diubah menjadi variabel-variabel pada setiap pendefenisian bahasa pemrograman halaman web, yang menghasilkan efek perubahan tampilan beserta dengan fungsi-fungsinya setelah halaman web ditampilkan. Berbeda dengan HTML, yang memiliki kemampuan menghasilkan dan mengolah halaman web sebelum ditampilkan.

Penggunaan

DHTML biasanya digunakan untuk membuat tombol rollover ataupun menu drop-down dan halaman web yang interaktif.

Beberapa teknologi aplikasi penjelajah web memiliki tingkat dukungan terhadap DHTML yang berbeda-beda sehingga sangat sulit dikembangkan. Seperti misalnya variasi dan kombinasi ukuran layar bisa menampilkan dengan baik pada beberapa aplikasi penjelajah web sedangkan yang lainnya tidak. Pengembangan terbaru yang relatif setiap aplikasi penjelajah web seperti Internet Explorer 5.0+, Mozilla Firefox 2.0+, dan Opera 7.0+ sudah manambahkan Document Object Model. tes

Struktur pada halaman web

Pada dasarnya sebuah halaman web diatur seperti cara berikut ini:

<!doctype html>
<html lang="en">
     <head>
          <meta charset="utf-8">
          <title>DHTML example</title>
     </head>
     <body>
          <div id="navigation"></div>
 
          <script> 
               var init = function () {
                    myObj = document.getElementById("navigation");
                    // ... manipulate myObj
               };
               window.onload = init;
          </script>
 
          <!--
      Walaupun kode tersebut disimpan pada file eksternal; ini bisa diselesaikan dengan membuat pranala file yang mengandung JavaScript. 
      Hal ini berguna jika menggunakan skrip pemrograman yang sama pada beberapa [[halaman web]]:
          -->
          <script src="myjavascript.js"></script>
     </body>
</html>

Contoh: menampilkan blok tambahan pada teks

Kode berikut menggambarkan fungsi yang paling sering digunakan. Bagian tambahan pada sebuah halaman web hanya akan ditampilkan jika pengguna menginginkannya.

<!doctype html>
<html lang="en">
     <head>
          <meta charset="utf-8">
          <title>Cara menggunakan fungsi DOM</title>
          <style>
               a {background-color:#eee;}
               a:hover {background:#ff0;}
               #contoh1 {background:#cfc; display:none; margin:30px 0; padding:1em;}
          </style>
     </head>
     <body>
          <h1>Cara menggunakan fungsi DOM</h1>
 
          <h2><a id="tampilkansembunyikan" href="#">Tampilkan contoh</a></h2>
 
          <p id="contoh1">Ini adalah sebuah contoh.
      (Informasi tambahan, hanya ditampilkan jika diinginkan pengguna)...</p>
 
          <p>Lanjutan teks...</p>
 
          <script>
               changeDisplayState = function (id) {
                    var d = document.getElementById('tampilkansembunyikan'),
                         e = document.getElementById(id);
                    if (e.style.display === 'none' || e.style.display === '') {
                         e.style.display = 'block';
                         d.innerHTML = 'Sembunyikan contoh';
                    }
                    else {
                         e.style.display = 'none';
                         d.innerHTML = 'Tampilkan contoh';
                    }
               };
               document.getElementById('tampilkansembunyikan').onclick = function () {
                    changeDisplayState('contoh1');
                    return false;
               };
          </script>
     </body>
</html>