PEMBUATAN KOMPONEN WEB DENGAN JAVASCRIPT


1. Pengenalan Javascript

Javascript diperkenalkan pertama kali oleh Netscape pada tahun 1995. Pada awalnya bahasa ini dinamakan “LiveScript” yang berfungsi sebagai bahasa sederhana untuk browser Netscape Navigator 2. Pada masa itu bahasa ini banyak di kritik karena kurang aman, pengembangannya yang terkesan buru buru dan tidak ada pesan kesalahan yang di tampilkan setiap kali kita membuat kesalahan pada saat menyusun suatu program. Kemudian sejalan dengan sedang giatnya kerjasama antara Netscape dan Sun (pengembang bahasa pemrograman “Java” ) pada masa itu, maka Netscape memberikan nama “JavaScript” kepada bahasa tersebut pada tanggal 4 desember 1995. Pada saat yang bersamaan Microsoft sendiri mencoba untuk mengadaptasikan teknologi ini yang mereka sebut sebagai “Jscript” di browser Internet Explorer 3.
Javascript adalah bahasa yang berbentuk kumpulan skrip yang pada fungsinya berjalan pada suatu dokumen HTML, sepanjang sejarah internet bahasa ini adalah bahasa skrip pertama untuk web. Bahasa ini adalah bahasa pemrograman untuk memberikan kemampuan tambahan terhadap bahasa HTML dengan mengijinkan pengeksekusian perintah perintah di sisi user, yang artinya di sisi browser bukan di sisi server web.
Javascript bergantung kepada browser(navigator) yang memanggil halaman web yang berisi skrip skrip dari Javascript dan tentu saja terselip di dalam dokumen HTML. Javascript juga tidak memerlukan kompilator atau penterjemah khusus untuk menjalankannya (pada kenyataannya kompilator Javascript sendiri sudah termasuk di dalam browser tersebut). Lain halnya dengan bahasa “Java” (dengan mana JavaScript selalu di banding bandingkan) yang memerlukan kompilator khusus untuk menterjemahkannya di sisi user/klien.

Tabel daftar navigator dan versi dari Javascript :

Javascript merupakan suatu bahasa yang perkembangannya lambat di bandingkan dengan Java yang berkembang sangat cepat. Di Javascript kita tidak mungkin menyembunyikan kode skrip yang kita tulis, kode langsung di tulis di dalam dokumen HTML dan sangat mudah terlihat, sedangkan di Java, kode sudah berbentuk setengah terkompilasi (dalam bentuk applet) dan tidak mungkin terlihat dari dalam dokumen HTML, satu mesin virtual di sisi user yang bertanggung jawab untuk menterjemahkan program di dalam applet tersebut setiap kali halaman HTML yang memuat applet tersebut dipanggil oleh browser. Dibandingkan dengan applet java yang cukup lambat dibuka oleh browser, bisa kita katakan bahwa Javascript cukup cepat di panggil(di load) oleh navigator.
JavaScript sendiri merupakan bahasa yang mudah dipahami, dalam artian diperlukan skill novice atau dasar untuk mengerti bahasa ini, jika anda sudah terbiasa dan mengenal konsep bahasa pemrograman visual, maupun Java ataupun C, akan sangat mudah untuk memahami konsep Javascript.

Berikut ini satu tabel yang berisi beberapa perbandingan mendasar antara Java dan JavaScript :

JavaScript adalah bahasa yang “case sensitive” artinya membedakan penamaan variabel dan fungsi yang menggunakan huruf besar dan huruf kecil, contoh variabel atau fungsi dengan nama TEST berbeda dengan variabel dengan nama test. Dan yang terakhir seperti bahasa Java ataupun C, setiap instruksi diakhiri dengan karakter titik koma (;).

1.1 Bentuk skrip dari Javascript

Skrip dari JavaScript terletak di dalam dokumen HTML. Kode tersebut tidak akan terlihat dari dalam jendela navigator anda, karena diantara tag (kalau anda mengerti HTML pasti tahu dengan istilah ini) tertentu yang memerintahkan navigator untuk memperlakukan bahwa skrip tersebut adalah skrip dari JavaScript. Contoh dari skrip yang menunjukkan bahwa skrip tersebut adalah skrip dari JavaScript adalah sebagai berikut :

letakkan script anda disini

1.2 Memberikan komentar (dan membuat skrip tidak tereksekusi)
Sering kali pada navigator versi lama, sebelum adanya JavaScript, tidak mengenal tag tersebut dan akan melewatkannya untuk di baca. Contoh kode diatas tidak akan terlihat di navigator kita, akan tetapi dia akan menampilkan jendela peringatan (berupa kotak dialog) karena skrip tersebut tidak lengkap dan akan merusak dokumen HTML yang sudah kita buat dengan bagusnya. Untuk itu maka kita tambahkan tag komentar agar supaya skripnya tidak dibaca sebagai skrip, akan tetapi di baca sebagai komentar dan tidak akan dieksekusi sebagai program. Contohnya adalah sebagai berikut :

Seperti dalam banyak bahasa pemrograman lainnya, sangat dianjurkan untuk menambahkan komentar komentar di dalam skrip atau kode program yang kita bikin. kegunaannya antara lain adalah :
• Mengingatkan kita akan bagian bagian khusus di dalam skrip tersebut, jika kita ingin merubah sesuatu di dalamnya, mungkin beberapa bulan kemudian dan kita sudah lupa dengan detail dan alur dari skrip tersebut.
• Membuat orang yang tidak mengerti skrip anda, menjadi mengerti dengan petunjuk petunjuk yang anda bikin melalui komentar komentar, kecuali anda tidak mau mensharing program yang anda miliki ..
Untuk menulis komentar di JavaScript, kita bisa menggunakan cara yang sama dengan aturan yang ada di bahasa C/C++ ataupun Java.
• Untuk menulis komentar dalam satu baris kita gunakan karakter dobel slash.
// semua karakter di belakang // tidak akan di eksekusi
• Untuk menulis komentar yang terdiri dari beberapa baris kita gunakan karakter /* dan */
/* Semua baris antara 2 tanda tersebut
tidak akan di eksekusi oleh

kompilator */

1.3 Contoh program JavaScript
Pada contoh berikut ini adalah contoh skrip JavaScript didalam suatu dokumen HTML, disini kita akan membuat satu program untuk menampilkan satu kotak dialog (dijelaskan lebih lanjut di bab 10) pada saat kita membuka dokumen HTML

Contoh Program Javascript

1.4 Meletakkan JavaScript dalam dokumen HTML
Ada beberapa cara untuk meletakkan kode JavaScript di dalam dokumen/halaman HTML
• Menggunakan tag
Dengan menggunakan cara ini, pada saat mengakses satu halaman HTML kita harus menunggu sampai proses pemanggilan halaman itu selesai sepenuhnya, sebelum kita menjalankan program JavaScript tersebut. Proses eksekusi kode HTML untuk menampilkan satu halaman dilakukan dari atas ke bawah, semakin banyak user yang mengakses halaman ini (dan seringnya gak sabar …) dapat menganggu proses pemanggilan tersebut. Pada kasus dimana pemanggilan suatu fungsi JavaScript terjadi sebelum proses pemanggilan kode JavaScript selesai dilakukan oleh navigator, maka akan timbul pesan error.
Oleh karena itu untuk menghindari kejadian diatas, maka pada umumnya kita meletakkan tag diantara bagian kepala dari dokumen HTML, yaitu bagian antara tag dan . Pemanggilan fungsi JavaScript (atau disebut juga event) diletakkan di bagian badan dokumen HTML atau bisa kita sebut diantara tag dan .
Keterangan tambahan di dalam tag menunjukkan jenis bahasa yang digunakan dan versinya, contohnya “JavaScript“, “JavaScript1.1“,“JavaScript1.2“ untuk bahasa JavaScript atau bahasa lainnya, contohnya “VBScript“.
Jika kita ingin menggunakan beberapa versi JavaScript di dalam satu halaman HTML (untuk menyesuaikan dengan kompatibilitas navigator) , maka kita hanya perlu meletakkan kode kode JavaScript tersebut (berdasarkan versinya) kedalam beberapa tag dengan mencantumkan versi JavaScriptnya.
• Menggunakan file ekstern
Cara berikutnya adalah menuliskan kode program JavaScript dalam suatu file teks dan kemudian file teks yang berisi kode JavaScript di panggil dari dalam dokumen HTML (khusus Netscape mulai versi 3 keatas). Kode yang kita sisipkan kedalam dokumen HTML adalah sebagai berikut :

dimana url/file.js adalah adalah lokasi dan nama file yang berisi kode JavaScript, jika perintah tambahan SRC tidak disertakan maka tag Script akan mencari kode yang terletak di dalam tag Script.
• Melalui event tertentu
Event adalah sebutan dari satu action yang dilakukan oleh user, contohnya seperti klik tombol mouse, pembahasan lebih lanjut ada di bab 5. Kodenya dapat di tulis sebagai berikut :

dimana eventHandler adalah nama dari event tersebut.

2. Obyek

2.1 Tentang Obyek
Untuk selanjutnya mari kita masuk kebagian berikutnya, yaitu bagian yang berbicara tentang obyek, tujuan dari bagian ini tidaklah muluk muluk sampai ke pengetahuan tentang pemrograman orientasi obyek akan tetapi sekedar pengenalan tentang obyek, dan memberikan ide kepada anda apakah yang disebut obyek itu ? ,yang merupakan konsep penting di dalam pembuatan kode JavaScript.
JavaScript memperlakukan elemen elemen yang tampil di jendela navigator kita sebagai suatu obyek , yang artinya adalah elemen yang :
• Diklasifikasikan berdasarkan hirarki/tingkatan khusus sehingga kita bisa mengetahui dimana letak/lokasi obyek itu sebenernya.
• Dimana kita mengasosiasikan dengan kondisi atau sifat sifat khusus (properti)

Pengertian diatas mungkin sedikit membingungkan bagi anda, tapi marilah kita lihat contoh berikut ini untuk memperjelas. Misal kita bayangkan ada satu pohon yang terletak di dalam satu kebun, dimana pohon itu mempunyai banyak dahan, dan di salah satu dahannya terdapat sarang burung. Mari kita lihat hirarkinya sebagai berikut.
o Kebun
􀂃Pohon
• Dahan
o Daun
o Sarang Burung
􀂃Panjang = 20
􀂃Warna = kuning
􀂃Tinggi = 4
• Batang
• Akar
􀂃Kolam
􀂃Sangkar Ternak
• Ayam
• Bebek
􀂃Gudang
• Pintu

Atap
o Sarang Burung
􀂃Panjang =15
􀂃Warna = coklat
􀂃Tinggi = 6
• Jendela
Sarang burung yang berada di atas pohon dapat di tuliskan sebagai berikut :
Kebun.Pohon.Dahan.Sarang Burung
Sedangkan Sarang burung yang terletak diatas atap gudang, kita tuliskan sebagai berikut :
Kebun.Gudang.Atap.Sarang Burung
Bayangkan sekarang kita ingin mengecat atau mengganti warna sarang burung yang terletak di atas pohon, maka kita cukup mengetik perintah berikut ini
Kebun.Pohon.Dahan.Sarang Burung.warna=hijau
Nah begitulah ilustrasi tentang bagaimana kita memperlakukan obyek di dalam JavaScript, perbedaanya adalah bukan kebun sebagai bentuk obyek kita, akan tetapi navigator kitalah sebagai obyek utamanya.

2.2 Obyek dari navigator (browser)
JavaScript membagi satu halaman Navigator dalam berbagai obyek obyek, dengan tujuan untuk memudahkan kita untuk mengakses salah satu dari mereka dan memanipulasinya dengan cara merubah sifat/kondisi (properti) mereka.
Kita mulai dari obyek yang paling besar diantara semuanya (yang berisi semua obyek lainnya), kemudian kita turun berdasarkan tingkatan atau hirarkinya sampai kepada obyek yang kita inginkan.
• Obyek paling besar adalah obyek jendela (window) dari navigator.
• Di dalam obyek jendela, ada satu obyek yang ditampilkan dalam bentuk sebuah halaman, kita sebut obyek dokumen atau document
• Halaman itu berisi banyak obyek seperti, formula, text, image dan lain lainya..

Untuk mengakses satu obyek, kita harus mengakses terlebih dahulu obyek yang paling besar( dalam hal ini obyek window ) . ambil sebagai contoh satu obyek (yang bernama checkbox) dan satu textfield berikut ini

• Form untuk untuk contoh ini kita beri nama form1 tujuannya adalah utuk membedakan dengan form form lainnya di dalam satu dokumen, dan dituliskan dalam kode berikut ini :
window.document.forms[“form1”]
• Tombol checkbox, dan kita beri nama checkbox1 dituliskan dalam bentuk berikut ini :
window.document.forms[“form1”].checkbox1
• TextField disini kita beri nama tetxfield1 dan dituliskan dalam bentuk berikut ini
window.document.forms[“form1”].textfield1
Tombol checkbox mempunyai nilai kondisi(properti) checked , yang akan memberikan nilai 1 jika tombol itu di pilih (checked), dan nilai 0 pada kasus sebaliknya.
Sedangkan kode dari form form1 di dalam kode HTML adalah sebagai berikut :

dan fungsi JavaScript yang berhubungan dengan checkbox tersebut adalah ..

2.3 Obyek standart JavaScript
Selain obyek navigator di subbab 2.2, kita juga mengenal obyek standart dari JavaScript. Obyek obyek ini distandarisasikan oleh asosiasi ECMA (European Computer Manufacturer Association). Berikut ini adalah daftar obyek standart JavaScript

2.4 Event
Event adalah aksi dari user yang bisa menghasilkan interaktifitas, pada kenyataannya event di dalam JavaScript adalah klik dari tombol mouse (merupakan satu satunya aksi yang dapat diatur oleh HTML). JavaScript memungkinkan mengasosiasikan event dengan beberapa fungsi dari metode seperti lewatnya mouse pointer diatas zona tertentu, perubahan nilai, dan lain
Event administrator adalah yang memperbolehkan kita untuk mengasosiasikan satu aksi ke dalam sebuah event. Sintaks dari event administrator tersebut adalah sebagai berikut :
OnEvenement = “Aksi_Javascript_atau_Fungsi();”
Untuk penggunaan link hiperteks, maka sintaksnya adalah sebagai berikut :
Link
2.5 Daftar event
Berikut ini beberapa kode yang harus dimasukkan ke dalam tag event administrator untuk menghasilkan aksi tertentu.

2.6 Hubungan event dengan obyek
Tidak semua elemen bisa berhubungan atau berasosiasi dengan sembarang obyek. Sangat jelas sekali, sebagai contoh event onChange tidak akan bisa diaplikasikan ke suatu hiperteks. Berikut ini adalah tabel rekapitulatif obyek obyek yang mana bisa berasosiasi dengan suatu event.

2.7 Contoh penggunaan event
Cara terbaik untuk mengerti tentang penggunaan event adalah dengan cara berlatih menulis program kecil kecilan. Sebagai inspirasi anda, mungkin anda bisa mencoba melihat source code dari beberapa halaman web, akan tetapi marilah kita tidak langsung melakukan copy & paste
terhadap skrip itu dan membiasakan diri untuk menghormati hasil kerja orang lain dengan meminta ijin terlebih dahulu kepada si pembuat skrip tersebut, kecuali memang skrip tersebut tersedia secara free, seperti banyak tersedia di beberapa site yang menyediakan source code dari JavaScript.
Berikut ini kita akan mencoba satu contoh sederhana cara menampilkan kotak dialog yang berisi tulisan ‘teks anda’ (dengan tanda satu petik di depan dan di belakang kata) sesudah anda melakukan klik terhadap satu link yang mentrigger event untuk mengaktifkan kotak dialog tersebut.

Membuka kotak dialog pada saat melalukan klik mouse di satu link


klik disini !

analisa skrip diatas :
• Event administrator onClick dimasukkan didalam tag links dari hiperteks
• Tujuan dari skrip ini adalah menampilkan satu kotak dialog, jadi kita tidak ingin kalau link tersebut akan membawa kita ke halaman yang lain, oleh karena itu kita masukkan kode “javascript:;” didalam atribut href untuk memberi tahu navigator kalau kita ingin tetap berada di halaman yang sedang di proses tersebut.
• Perhatikan penggunaan \’ di dalam kalimat \’teks anda\’ . tanda antislash (\) di depan tanda petik untuk memperingatkan navigator kalo dianggap sebagai karakter biasa dan bukan di intepretasi sebagai pembatas string.
Selanjutnya contoh kedua adalah contoh penggunaan event onMouseover untuk membuat menu interaktif yang akan berubah tampilan imagenya pada saat kursor mouse lewat diatasnya, kita bahkan bisa menambahkan event onMouseout untuk mengembalikan image ke asalnya pada saat kursor sudah tidak diatas image lagi. Karena di sini kita tidak bisa mencoba secara live, anda bisa mencoba sendiri di rumah dengan mengcopy paste skrip ini dan mengganti file image1.gif dan image2.gif dengan sembarang file yang anda punya .

Memodifikasi image pada saat kursor mouse bergerak diatas image tersebut


analisa skrip diatas :
• Untuk bisa mengasosiasikan image dengan event tersebut, maka kita harus harus membuat image itu sebagai suatu link, sehingga kita memakai tag diantara tag dan
• Event onMouseover dan onMouseout terbatas penggunaannya untuk JavaScript versi 1.1 keatas

3. Berikut beberapa Tips & Trik Javascript yang cukup berguna untuk kita pakai :

3.1 Menonaktifkan Klik Kanan Pada Mouse

Terkadang kita ingin halaman web yg kita buat tidak bisa dengan mudah dilihat source html atau propertiesnya, salah satu cara sederhana adalah dengan menonaktifkan right click (klik kanan) pada mouse. Berikut source programnya :

<

var message=”Hallo”;
///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}
function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}
document.oncontextmenu=new Function(“alert(message);return false”)

Menonaktifkan Klik Kanan Pada Mouse

Bila halaman web tsb diakses, akan tampil box alert pada saat tombol mouse di klik kanan yg menampilkan alert box dengan pesan “Maaf, klik kanan tidak berfungsi”
catatan : berjalan baik pada browser IE & Modzilla

3.2 Menampilkan Isi Dari Komponen Form

Beberapa komponen Form yang sering kita gunakan biasanya ditujukan untuk validasi data, apakah data yang sudah kita masukkan sudah sesuai. Kita dapat menampilkan nilai/isi dari komponen tsb dengan fungsi javascript. Berikut source programnya :

Untitled Document

function tampil(){
tampil_1=form1.textfield.value; // simpan nilai dari objek form textfield sebagai tampil_1
tampil_2=form1.textarea.value; // simpan nilai dari objek form textarea sebagai tampil_2
tampil_3=form1.select.value; // simpan nilai dari objek form select sebagai tampil_3
tampil_all = ‘komponen 1 berisi : ‘+tampil_1+’ | ‘+’komponen 2 berisi :’+tampil_2+’ | ‘+’komponen 3
berisi :’+tampil_3;
alert(tampil_all);
}

Komponen 1 :

Komponen 2 :

Komponen 3 :
linux
window

Pada saat tombol “Tekan” kita tekan, maka properties OnClick=”tampil()” pada objek form button akan memanggil fungsi javascipt, yaitu fungsi tampil(). Perhatikan pada souce program diatas, semua objek form ditampung dalam variable tampil_1 s/d tampil_3. Semua variable tersebut digabungkan menjadi 1 variabel, yaitu variable tampil_all dan untuk menampilkan hasil dari inputan beberapa objek form tsb
dibrowser, digunakan fungsi alert().
catatan : berjalan baik pada browser IE & Modzilla

3.3 Menampilkan Window PopUp

Window Popup banyak digunakan untuk menampilan layanan keterangan iklan. Biasanya window popup muncul dengan mengklik banner atau gambar yang terpasang di halaman web utama.
Berikut source programnya :

<

function popUp(URL) {
day = new Date();
id = day.getTime();
eval(“page” + id + ” = window.open(URL, ‘” + id + “‘,
‘toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=250,height=250,left =
304,top = 150.5’);”);
}

popup

Perhatikan pada tag : popup
Pada saat mouse mengklik kata : popup, javascript akan memanggil fungsi popUp() dengan membawa link popup.html. Window popup akan muncul dengan menampilan halaman popup.html. Karenanya kita siapkan file popup.html,. Berikut source progamnya :

popup

Halaman PopUp

Kita dapat mengatur properties dari window popup yang akan dimunculkan dengan mengatur setting properties pada fungsi popup(). Standar window popup yg sering digunakan adalah men-setting semua properties menjadi 0 (disable), kecuali ukuran width untuk lebar popup & height untuk tinggi popup.
Semua setting tersebut dapat kita atur sesuai kebutuhan.
catatan : berjalan baik pada browser IE & Modzilla

3.4 Buka Window Baru Pada Saat Menutup Window

Kita terkadang menemukan pada saat ingin menutup suatu halaman web dengan mengklik tanda x pada pojok kanan atas window, justru yang terjadi adalah terbukanya window baru. Biasanya konsep tersebut banyak terdapat pada halaman web yang memuat iklan-iklan suatu produk. Konsepnya hampir sama dengan membuka window popup pada pembahasan sebelumnya, hanya penempatan pemanggilan fungsi javascriptnya yg berbeda. Berikut source programnya :

Tutup halaman web ini maka akan terbuka window baru secara otomatis

Perhatikan pada tag
properties : onunload inilah yang memanggil fungsi javascript untuk membuka halaman popup.html pada saat window browser utama ditutup. Karenanya kita siapkan file popup.html , bisa diambil dari source file popup.html di atas.
catatan : berjalan baik pada browser IE

3.5 Pembatasan Input Textbox Hanya Numerik

Seringkali pada saat kita membuat form web untuk suatu program aplikasi, hanya numerik (angka) saja yang dibolehkan diisi pada textbox. Berikut source programnya :

Untitled Document

<input name="periode" type="text" id="periode" size="15" maxlength="15" onKeypress="if
(event.keyCode 57) event.returnValue = false;”>

Properties onKeyPress dengan kondisi diatas akan membatasi berfungsinya tombol di keyboard sebatas numerik (angka) saja yang bisa diinput. Kita juga dapat mengubah kondisi tersebut sesuai keinginan kita dengan mengganti atau menambahkan kode. Untuk kasus diatas, numeric (angka) pada tombol keyboard adalah diantara kode 48 sampai kode 57. (http://rmhh.co.uk/ascii.html)
Catatan : berjalan dengan baik pada browser IE

3.6 Counter Karakter Pada TextArea

Kalau kita pernah mengunjungi situs web yang menyediakan fasilitas pengiriman sms gratis, biasanya kita akan temui Form TextArea pengisian pesan sms yang akan kita kirim. TextArea tsb membatasi jumlah karakter yg kita input. Berikut source programnya :

<title

function CountMax()
{
var wert,max;
max = 100
wert = max-(document.form1.question.value.length);
if (wert < 0) {
alert("Maaf, batas maksimum pengisian adalah " + max + " karakter!");
document.form1.question.value = document.form1.question.value.substring(0,max);
wert = max-(document.form1.question.value.length);
document.form1.rv_counter.value = wert;
} else {
document.form1.rv_counter.value = max-(document.form1.question.value.length);
}
}

sisa

Perhatikan pada properties TextArea tsb, setiap kali kita mengetikkan karakter atau angka di TextArea, maka fungsi javascript CountMax akan selalu menghitung jumlah karakter atau angka yang terisi pada TextArea. Setiap hitungan akan langsung secara otomatis mengisi kolom TextBox (rv_counter) dibawahnya. Pengisian tsb berupa pengurangan maksimal input keyboard yg didefinisikan dgn variable max=100 oleh tiap ketikan input keyboard yang kita lakukan. Pada saat jumlah inputan keyboard sama dengan atau lebih besar dari variable max=100, maka fungsi alert akan ter-eksekusi.
catatan : berjalan baik pada browser IE & Modzilla

Daftar Pustaka : www. Ilmu Komputer.com
JavaScript
Membuat halaman web menjadi “hidup”
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:

.. bagian heading (judul, dll) ..

<!–
..
deklarasi variabel, object, dan function JavaScript
..

..
bagian isi halaman web
..

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 , kemudian tag comment (<!– ), pendeklarasian variable dan seluruh function yang digunakan, diakhiri dengan tag comment lagi ( ), dan ditutup dengan tag .

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
2
3 Percobaan JavaScript

4
5 <!–
6 function keluarkanPesan() {
alert("Selamat, Anda telah berhasil membuat JavaScript");
7 }
8

9
10

11
12
13
14
15
16

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.

PEMBUATAN KOMPONEN WEB
DENGAN JAVASCRIPT

Tugas ini disusun untuk memenuhi tugas harian
Mata Pelajaran Pemrograman Rekayasa Lunak
Yang dibina oleh Ibu.Fatikha

Disusun Oleh :
Fifi Nuraini (X RPL/ 13 )
Giat Nitya (X RPL/ 17 )
KholidaAisyah (X RPL/ 22 )
Nur Lailatul Choiriyah (X RPL/ 31 )
Warda Firdausi Karima (X RPL/ 40 )

DEPARTEMEN PENDIDIKAN NASIONAL
SMK NEGERI 12 MALANG
JL PAHLAWAN, BALEARJOSARI MALANG
REKYASA PERANGKAT LUNAK
NOVEMBER 2009