JavaScript
Membuat halaman web menjadi “hidup”

Akhmad Daniel Sembiring & Onno W. Purbo
Computer Network Research Group (CNRG)
Institut Teknologi Bandung (ITB)
Pendahuluan
JavaScript merupakan sebuah bahasa scripting (scripting language) yang dikembangkan oleh Netscape Corp., dan ditujukan untuk meningkatkan features dari sebuah halaman web. Dengan adanya JavaScript sebuah halaman web akan menjadi lebih dinamis dan interaktif terhadap user, karena halaman web mampu berfungsi sebagai sebuah program aplikasi yang dapat memproses masukan yang diberikan user dan memberikan hasil sesuai dengan yang telah diprogramkan. Halaman web yang merupakan jawaban dari suatu permintaan user tidak harus di-download terlebih dahulu dari web server, melainkan dihasilkan sendiri oleh JavaScript yang berada pada browser.

Banyak sekali halaman web di Internet yang telah mengimplementasikan JavaScript, seperti Netscape (http://home.netscape.com),  lihat aplikasi PowerStart yang memungkinkan kita berinteraksi pada salah satu halaman web-nya.

Perbedaan cara kerja halaman web biasa dengan halaman web dengan JavaScript dalam hal penjawaban terhadap masukan user dapat dilihat pada gambar di bawah ini:

Gambar  1 Interaksi halaman-halaman web dengan servernya

Gambar  2 Interaksi halaman-halaman web yang memiliki JavaScript dengan servernya. Halaman 2 merupakan halaman web yang memiliki JavaScript

Akibat dari proses kerja JavaScript di atas, maka beban server akan menjadi lebih ringan, dan halaman web akan jauh menjadi lebih cepat merespon bahkan pada hubungan internet yang paling rendah sekalipun.

Pada prakteknya, JavaScript disertakan dalam halaman web dan sewaktu halaman web tersebut dibuka oleh user, Netscape browser akan meninterpretasi (interpret) baris-baris script yang ada dan mengeksekusi script tersebut sesuai dengan perintah-perintah yang tercantum.

Secara sekilas JavaScript mirip dengan bahasa Java, namun keduanya memiliki perbedaan yang mendasar. Perbandingan keduanya adalah sebagai berikut:

JavaScript	Java	
Diinterpretasi oleh browser	Di-compile dan diletakkan pada server, dijalankan pada browser	
Dynamic binding	Static binding	
Script dibatasi oleh kemampuan browser	Merupakan aplikasi stand-alone	
Berjalan bersamaan dengan HTML	Bisa melebihi HTML, misalnya multimedia	
Bisa mengakses object-object browser dan memfungsikannya	Tidak bisa mengakses object browser	

Aplikasi JavaScript
Beberapa contoh aplikasi yang biasa diimplementasikan dengan JavaScript adalah:
•	Calculator; dengan JavaScript dimungkinkan halaman web menampilkan sebuah kalkulator yang jika telah di-download dapat berkerja tanpa harus berinteraksi lagi dengan web server
•	Display waktu; dengan JavaScript sebuah halaman web dapat menampilkan jam, tanggal, dan sebagainya 
•	Feedback status
•	User dapat mengetahui status dari suatu proses
•	Verifikasi form; sebelum form yang telah diisi oleh user dikirimkan ke server, JavaScript dapat terlebih dahulu memverifikasi kebenarannya, tanpa harus berkomunikasi dengan server.
•	Entertainment; halaman web dapat dijadikan sarana permainan interaktif tanpa membebani traffic jaringan dan server
•	Mengganti warna tampilan browser; karena JavaScript dapat mengakses seluruh object yang ada pada browser, maka komposisi warna  dari suatu halaman web dapat diganti sesuai dengan selera secara real-time.
•	Mengganti link; 
•	Memformat ulang halaman
•	Alat analisis
•	Dialog boxes untuk peringatan (alert), konfirmasi, dan prompt (menungu masukan dari user)
•	Window yang disesuaikan dengan keinginan
•	Window Navigasi

Struktur JavaScript dalam halaman web
Struktur bahasa JavaScript yang disertakan dalam suatu halaman web adalah sebagai berikut:

<HTML>
<HEAD>
	.. bagian heading (judul, dll) ..

<SCRIPT LANGUAGE=”JavaScript”>
<!--
	.. 
deklarasi variabel, object, dan function JavaScript 
..
<!-- akhir dari script -- >
</SCRIPT>

</HEAD>

<BODY>
	..
	bagian isi halaman web 
	..
</BODY>
</HTML>
Gambar  3 Struktur penambahan JavaScript dalam HTML

Pada struktur di atas dapat kita lihat bahwa untuk menambahkan program JavaScript pada sebuah halaman web adalah dengan menambahkan tag <SCRIPT>, kemudian tag comment (<!-- ), pendeklarasian variable dan seluruh function yang digunakan, diakhiri dengan tag comment lagi (<!-- dan - -> ), dan ditutup dengan tag </SCRIPT>.

Bahasa JavaScript sendiri merupakan bahasa yang bersifat Object-Oriented, dimana kita dapat membuat turunan dari suatu object atau function, atau membuat object atau function baru dari object-obejct yang telah tersedia (built-in object).

function (arg1, arg2, …)  {
	/* deklarasi local variable */
	var local_variable1 = 0;
	var local_variable2 = arg2;

/* deklarasi program */

}

Gambar  4 Struktur function / object JavaScript
JavaScript dan event web browser
JavaScript bekerja sama dengan halaman web dengan berdasarkan “mendengarkan” seluruh event yang terjadi antara user dengan web browser. Event adalah suatu “kejadian” yang diakibatkan oleh interaksi user dengan web browser. Beberapa di antaranya adalah:
•	onClick: event yang terjadi pada suatu object jika user men-click object itu dengan tombol mouse
•	onLoad: event yang terjadi jika user me-load suatu halaman web pada browser
•	onSubmit: event yang terjadi jika user menekan tombol submit yang ada pada form dari suatu halaman web
•	onMouseOver: event yang terjadi pada suatu object jika user menggerakkan mousenya melintasi object tersebut
•	onBlur: event yang terjadi pada suatu object jika mouse user meniggalkan object tersebut

Berikut ini adalah ringkasan object-object halaman web dengan event-event yang ada:

Event 
  Object
	onBlur	onClick	onChange	onFocus	onLoad	onMouseOver	onSelect	onSubmit	onUnload	
Button		x								
Checkbox		x			x				x	
Document								x		
Form						x				
Link		x								
Radio		x								
Reset		x								
Selection	x		x	x						
Submit		x								
Text	x		x	x			x			
Textarea	x		x	x			x			

Setiap event yang terjadi dapat dikaitkan pada suatu function JavaScript yang menyebabkan function itu bekerja dan menghasilkan output yang diinginkan. Sebagai contoh, jika kita ingin sebuah tombol submit dari sebuah form pada sebuah halaman web mengeluarkan suatu pesan jika di-click, maka script yang harus kita sertakan pada halaman web tersebut adalah:

1        	<HTML>
2        	<HEAD>
3        	<TITLE>Percobaan JavaScript</TITLE>

4        	<SCRIPT LANGUAGE="JavaScript">
5        	<!--
6        	function keluarkanPesan() {
     alert("Selamat, Anda telah berhasil membuat JavaScript");
7        	}
8        	<!-- akhir script -->

9        	</SCRIPT>
10        	</HEAD>

11        	<BODY>
12        	<FORM>
13        	<INPUT TYPE="submit" NAME="tombol" VALUE="tekanlah aku" 
     onClick="keluarkanPesan()"> 
14        	</FORM>
15        	</BODY>
16        	</HTML>

Gambar  5 Contoh listing program JavaScript sederhana

Pada listing di atas perhatikan baris  6 dan baris 13, dimana jika tombol pada baris 13 ditekan, tombol itu akan menghasilkan event onClick, yang didefinisikan harus mengeksekusi function keluarkanPesan().

Function keluarkanPesan() memerintahkan sistem untuk mengeluarkan window (alert pada baris 6) yang berisi pesan “Selamat, Anda telah berhasil membuat JavaScript”.

Hasil dari program JavaScript sederhana di atas adalah sebagai berikut:

Gambar  6 Hasil JavaScript dari script gambar 5
Untuk membuat sebuah script, tidak diperlukan development tools yang khusus, melainkan hanya sebuah editor teks seperti Notepad, Writepad, vi, pico, dan sebagainya. Setelah selesai membuat script, halaman web yang telah disertai script dapat langsung di jalankan pada Netscape Browser versi 2.0 ke atas.