DHTML dan JavaScript
DHTML (Web) Dinamis
HTML dinamis (DHTML) merupakan kombinasi antara HTML, Cascading Style Sheet, Java Script, VB Script dan kode-kode bahasa pemrograman tertentu yang dijalankan di server, kemudian hasil pengolahan data dikirimkan ke client berupa script HTML yang dibuat secara “on the fly”oleh server untuk dijalankan di client melalui browser.
Tampilannya pada sisi client bersifat dinamis, variatif, interaktif dan otomatis karena merupakan hasil generate browser terhadap web server. Script (kode) HTML yang dijalankan di client tidak sama dengan kode HTML yang ada pada server.
Salah satu contoh DHTML adalah penggunaan Cascading Style Sheet (CSS), dimana pengaturan tata letak (layout), jenis dan ukuran tulisan, warna dan sebagainya dikontrol di CSS. Penggunaan database di
halaman web juga merupakan bagian dari DHTML. Halaman yang tampil menjadi fleksibel dan dapat berubah-ubah sesuai dengan isi database yang diakses dan sesuai dengan permintaan dari client.
halaman web juga merupakan bagian dari DHTML. Halaman yang tampil menjadi fleksibel dan dapat berubah-ubah sesuai dengan isi database yang diakses dan sesuai dengan permintaan dari client.
Bahasa pemrograman web yang mendukung antara lain PHP, ASP, JAVA, JASP, ASPX dan lain-lain yang sering disebut dengan CMS (Content Management System) yang benar-benar menerapkan fungsi DHTML.
Pengertian JavaScript
JavaScript adalah bahasa pemrograman berbasis prototipe yang berjalan disisi klien. Jika kita berbicara dalam konteks web, sederhananya, kita dapat memahami JavaScript sebagai bahasa pemrograman yang berjalan khusus untuk di browser atau halaman web agar halaman web menjadi lebih hidup. Kalau dilihat dari suku katanya terdiri dari dua suku kata, yaitu Java dan Script. Java adalah Bahasa pemrograman berorientasi objek, sedangkan Script adalah serangkaian instruksi program.
Secara fungsional, JavaScript digunakan untuk menyediakan akses script pada objek yang dibenamkan ( embedded ). Contoh sederhana dari penggunaan JavaScript adalah membuka halaman pop up, fungsi validasi pada form sebelum data dikirimkan ke server, merubah image kursor ketika melewati objek tertentu, dan lain lain.
JavaScript dapat bereaksi terhadap events - JavaScript dapat di-set untuk menjalankan saat terjadi sesuatu, seperti sebuah page telah selesai dipanggil atau saat seorang user meng-klik pada HTML element.JavaScript dapat membaca dan menulis HTML elements - JavaScript dapat membaca dan mengubah isi dari HTML element.
JavaScript dapat digunakan untuk mem-validasi data - JavaScript dapat digunakan untuk mem-validasi form data sebelum di-submitted ke server, hal ini akan mengamankan server dari pemrosesan extra.JavaScript dapat digunakan untuk mendeteksi browser pengunjung - JavaScript dapat digunakan untuk mendeteksi browser pengunjung dan – memanggil page lain yang secara specifik didesain untuk browser tersebut.JavaScript dapat digunakan untuk membuat cookies - JavaScript dapat digunakan untuk menyimpan dan memanggil informasi di komputer pengunjung.
Yang Harus Diperhatikan Dalam Penulisan JavaScript
Yang harus diperhatikan dalam pengelolaan pemrograman JavaScript, diantaranya JavaScript adalah “case sensitive”, yang artinya JavaScript membedakan huruf besar dan huruf kecil. Jika Anda pernah belajar bahasa pemrograman seperti Turbo C atau C++, maka sama seperti bahasa pemrograman tersebut, dimana huruf T tidak sama dengan huruf t.
Dalam bahasa pemrograman JavaScript juga, sebagai contoh fungsi perintah var tidak boleh ditulis Var dan juga tidak boleh ditulis VAR (huruf besar semua), yang benar adalah var (huruf kecil semua). Perintah lain adalah new Date tidak boleh ditulis new date (huruf kecil semua), dsb.
Kelebihan JavaScript
JavaScript bekerja pada sisi browser. maksudnya begini : untuk menampilkan halaman web, user menuliskan alamat web di address bar url. setelah itu, browser “mengambil” file html ( dengan file jJvaScript yang melekat padanya jika memang ada ) ke server yang beralamat di URL yang diketikan oleh user. Selesai file diambil, file ditampilkan pada browser. Nah, setelah file JavaScript berada pada browser, barulah script JavaScript tersebut bekerja.
Efek dari Javascript yang bekerja pada sisi browser ini, Javascript dapat merespon perintah user dengan cepat, dan membuat halaman web menjadi lebih responsif. JavaScript melakukan apa yang tidak bisa dilakukan oleh HTML, PHP, dan CSS : menangani hal – hal yang membutuhkan respons cepat terhadap aksi dari user.
Contoh : fungsi validasi pada form. ketika anda mengisi sebuah form yang divalidasi menggunakan JavaScript, anda mengetikkan data lalu mengetik submit, sebelum data dikirimkan ke server, data akan “dicek” terlebih dahulu pada browser menggunakan fungsi JavaScript yang ada pada halaman web. sehingga, jika memang data yang anda isikan tidak valid, daripada membuang – buang waktu dengan mengirimkan data ke server baru di validasi di server dan lalu server mengirimkan respons balik mengenai ketidak validan input data anda, lebih baik cek validasi data form dilakukan secara lokal di browser menggunakan fungsi JavaScript.
Lebih Cepat dan Lebih Hemat
Implementasi terpopuler saat ini dari pemrograman JavaScript adalah teknik AJAX. (Asynchronous JavaScript and XMLHTTP ). teknik ini sering digunakan oleh aplikasi berbasis web seperti Gmail, Google Reader, dan lain lain. Teknik yang membuat pertukaran data antara server dan browser terjadi di belakang layar sehingga interaksi antara user dan aplikasi web semakin responsif. Post tersendiri untuk membahas hal ini akan kita siapkan
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.
STRUKTUR PADA HALAMAN WEB
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DHTML example</title>
<script type="text/javascript">
function init() {
myObj = document.getElementById("navigation");
// .... more code]]
}
window.onload=init;
</script>
</head>
<body>
<div id="navigation"></div>
<pre>
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]]:
</pre>
<script type="text/javascript" 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 PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test</title>
<style type="text/css">
h2 {background-color: lightblue; width: 100%}
a {font-size: larger; background-color: goldenrod}
a:hover {background-color: gold}
#example1 {display: none; margin: 3%; padding: 4%; background-color: limegreen}
</style>
<script type="text/javascript">
function changeDisplayState (id) {
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';
}
}
</script>
</head>
<body>
<h2>Cara menggunakan fungsi DOM</h2>
<div><a id="tampilkansembunyikan" href="javascript:changeDisplayState('contoh1')">Tampilkan contoh</a></div>
<div id="contoh1">
Ini adalah sebuah contoh.
(Informasi tambahan, hanya ditampilkan jika diinginkan pengguna)...
</div>
<div>Lanjutan teks...</div>
</body>
</html>
PENULISAN JAVASCRIPT
Kode JavaScript biasanya dituliskan dalam bentuk fungsi yang ditaruh di tag <head> yang dibuka dengan tag <script type="teks/javascript">.
<script type="teks/javascript">
alert("Halo Dunia!");
<script>
Kode JavaScript juga bisa diletakkan di file tersendiri yang berekstensi .js (singkatan dari JavaScript).Untuk memanggil kode JavaScript yang terdapat di file sendiri, di bagian awal <head> harus ditentukan dahulu nama file .js yang dimaksud menggunakan contoh kode seperti berikut:
<script type="teks/javascript" src="alamat.js">
</script>
Script pada bagian head
Script ini akan dieksekusi ketika dipanggil (biasanya berbentuk function) atau dipanggil berdasarkan trigger pada event tertentu.Peletakkan script di head akan menjamin skript di-load terlebih dahulu sebelum digunakan (dipanggil).
<html>
<head>
<script type="teks/javascript">
...
</script>
</head>
</html>
Script pada Body
Script ini dieksekusi ketika halaman di-load sampai di bagian <body>. Ketika menempatkan script pada bagian <body> berarti antara isi dan JavaScript dijadikan satu bagian.
<html>
<head>
</head>
<body>
<script type="teks/javascript">
...
</script>
</body>
</html>
Jumlah JavaScript di <head> dan <body> yang ditempatkan pada dokumen tidak terbatas.
External JavaScript
Terkadang ada yang menginginkan menjalankan JavaScript yang sama dalam beberapa kali pada halaman yang berbeda, tetapi tidak mau disibukkan jika harus menulis ulang script yang diinginkan di setiap halaman. Maka JavaScript dapat ditulis di file secara eksternal. Jadi, antara dokumen HTML dan JavaScript dipisahkan, kemudian berkas tersebut dipanggil dari dokument HTML. Berkas JavaScript tersebut disimpan dengan ekstensi .js.
JavaScript : js/xxx.js
document.write("pesan ini tampil ketika halaman diload");Untuk menggunakan eksternal JavaScript (.js) dipakai atribut "src" pada tag <script> pada halaman HTML-nya.
<html>
<head>
</head>
<body>
<script src="xxx.js">
</script>
<p>Script di atas berada di berkas "xx.js" (eksternal) </p>
</body>
</html>
Komentar
Posting Komentar