Anda di halaman 1dari 5

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:

W e b S e rv e r

...
H a la m a n 1

H a la m a n 2
...
H a la m a n 3

Gambar 1 Interaksi halaman-halaman web dengan servernya

1
W e b S e rv e r

...
H a la m a n 1

H a la m a n 2
...
H a la m a n 3

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 Tidak bisa mengakses object browser
memfungsikannya

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

2
• 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

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

Event  onBlur onClic onChang onFocus onLoa onMouseOve onSelect onSubmit onUnload
Object k e d r

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:

4
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.