Active Web Page
Sebagaimana diketahui, HTML merupakan model dokumen yang statis,begitu ditampilkan tidak akan berubah sampai ada aktivitas navigasi. Adapun untuk menjadikan HTML sebagai halaman dinamis atau aktif, kita bisa memanfaatkan bahasa scripting.
DHTML (Dynamic Hypertext Markup Language)
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.
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.
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.
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 skrip yang populer di internet dan dapat bekerja di sebagian besar penjelajah web populer sepertiInternet Explorer (IE), Mozilla Firefox, Netscape dan Opera. Kode JavaScript dapat disisipkan dalam halaman web menggunakan tag SCRIPT. Jika 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 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
Struktur Pada Halaman Web
Pada dasarnya sebuah halaman web diatur seperti cara berikut ini:
<!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>
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:[7]
<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>
Elemen dasar JavaScript
Sebagaimana bahasa pemrograman umumnya, JavaScript terbentuk atas elemen-elemen fundamental. Di sini kita tidak akan mengulas elemen-elemen tersebut, melainkan langsung membahas beberapa komponen dasar yang kerap digunakan saat bekerja dengan JavaScript
