JAVASCRIPT. 6.1 Pengenalan JavaScript. Apa itu JavaScript? Menjalankan JavaScript

6

JAVASCRIPT

6.1 Pengenalan JavaScript Apa itu JavaScript? JavaScript merupakan sebuah bahasa scripting yang dikembangkan oleh Netscape. JavaScript digolongkan sebagai bahasa scripting sisi klien (client side scripting) artinya bahwa script JavaScript tersebut akan dieksekusi atau dijalankan pada komputer kita sendiri saat kita membuka suatu halaman web yang berisi script JavaScript. Dengan JavaScript kita dapat dengan mudah membuat halaman web yang interaktif.

Menjalankan JavaScript Apa yang diperlukan untuk menjalankan script yang ditulis dengan JavaScript? Kita perlu JavaScript-enabled browser yaitu browser yang mampu menjalankan JavaScript – misalnya Netscape Navigator (versi 2.0 ke atas ) atau Microsoft Internet Explorer (MSIE - versi 3.0 ke atas). Mengingat kedua browser di atas telah banyak beredar dan digunakan, pemilihan JavaScript sebagai untuk meningkatkan kemampuan halaman web menjadi sangat baik. Untuk menggunakan JavaScript kita harus telah mengenal baik HTML.

105

Diktat Kuliah Internet & Web Disain – Herman Tolle - UB

Mencantumkan JavaScript pada halaman HTML Kode JavaScript dituliskan langsung pada halaman HTML. Mari kita lihat contoh sederhana berikut ini untuk mengerti bagaimana JavaScript bekerja:

Ini halaman HTML normal.
<script language="JavaScript"> document.write("Yang ini akibat JavaScript!")
Ini HTML lagi.

Contoh sederhana di atas kelihatan seperti halaman HTML normal. Satu-satunya hal yang baru adalah bagian:

<script language="JavaScript"> document.write("Yang ini akibat JavaScript!")

Bagian di atas adalah contoh penggunaan JavaScript. Untuk melihat hasilnya simpan file di atas sebagai file HTML normal dan buka dari JavaScript-enabled browser. Hasilnya akan terlihat seperti berikut ini: (jika kita menggunakan JavaScript-enabled browser akan terlihat 3 baris): 106

Diktat Kuliah Internet & Web Disain – Herman Tolle - UB Ini halaman HTML normal. Yang ini akibat JavaScript! Ini HTML lagi.

Sebenarnya script di atas tidaklah begitu berguna, namun bisa memberikan gambaran bagaimana cara menggunakan tag <script>. Segala sesuatu yang berada di antara tag <script> dan diinterpretasi-kan sebagai kode JavaScript. Di situ kita bisa melihat penggunaan document.write() – salah satu perintah yang penting dalam pemrograman dengan JavaScript. document.write() digunakan untuk menulis sesuatu pada dokumen (dalam hal ini adalah dokumen HTML). Jadi program JavaScript sederhana kita di atas berfungsi untuk menuliskan text “Yang ini akibat JavaScript!” ke dokumen HTML.

Non-JavaScript browser Apa yang akan terjadi jika kita menggunakan browser yang tidak mengerti JavaScript? Non-JavaScript browser tidak mengenal tag <script>. Dia akan mengabaikan tag itu dan mengeluarkan seluruh kode selayaknya text biasa . Ini berarti bahwa user akan melihat kode JavaScript program kita yang ada di dokumen HTML. Ini tentunya bukan hal yang kita harapkan. Ada cara untuk menyembunyikan baris kode dari browser yang seperti itu, yaitu dengan menggunakan HTML-comments . Baris kode kita yang baru akan terlihat seperti ini:

Ini dokumen HTML normal
107


<script language="JavaScript">
Ini HTML lagi.

Tampilan pada non-JavaScript browser akan terlihat seperti ini:

Ini dokumen HTML normal Ini HTML lagi

Tanpa HTML-comment tampilan pada non-JavaScript browser akan seperti:

Ini dokumen HTML normal document.write("Ini akibat JavaScript!") Ini HTML lagi

Harap diingat bahwa kita tidak bisa menyembunyikan baris kode JavaScript secara keseluruhan. Apa yang kita lakukan di atas adalah upaya untuk menyembunyikan kode dari browser-browser ‘tua’ yang tidak mengerti JavaScript. Melalui menu 'View document source' tetap saja baris kode JavaScript yang ada akan kelihatan.

108


Event Event dan event handler merupakan hal yang sangat penting dalam pemrograman JavaScript. Event adalah sesuatu yang terjadi karena aksi user. Contohnya jika user men-click tombol mouse terjadilah event Click. Jika mousepointer bergerak melewati sebuah link terjadilah event MouseOver. Ada banyak event yang terdapat dalam JavaScript yang selengkapnya bisa di lihat pada JavaScript Reference. Tentunya kita ingin program JavaScript kita bereaksi jika terjadi suatu event tertentu. Ini bisa dilakukan dengan bantuan eventhandlers. Sebagai contoh kita memiliki sebuah tombol yang akan mengeluarkan sebuah popup window jika di-tekan. Ini berarti bahwa sebuah window popup harus muncul sebagai reaksi dari event Click. Event-handler yang harus kita gunakan adalah onClick, yang memberitahukan apa yang harus dikerjakan oleh komputer jika event ini terjadi. Contoh di bawah ini menunjukkan bagaimana mudahnya menggunakan event-handler onClick:

Ada beberapa hal baru dalam kode di atas, mari kita lihat satu per satu. Kita telah membuat form dan sebuah tombol (ini merupakan bahasa HTML standard). Bagian yang baru adalah onClick="alert('Ya')" yang berada di dalam tag . Inilah yang mendefinisikan apa yang akan terjadi jika tombol ditekan. Jadi jika terjadi event Click, komputer akan mengeksekusi alert('Ya'), yang merupakan kode JavaScript (perhatikan bahwa kita tidak menggunakan tag <script> pada kasus ini). Fungsi alert() berfungsi untuk menampilkan window popup. Di dalam tanda kurung kita tentukan string yang akan muncul pada 109


window yang dimaksud. Jadi script kita di atas menampilkan window dengan tulisan 'Ya' saat user men-click tombol. Satu

hal

yang

mungkin membingungkan: pada perintah document.write() kita menggunakan double quotes (") dan pada alert() kita menggunakan juga single quotes ('), mengapa? Pada contoh ini kita menuliskan onClick="alert('Yo')" – kita gunakan keduanya (double dan single quote) . Jika kita tulis onClick="alert("Yo")" maka komputer akan bingung mana yang menjadi bagian event-handler onClick dan mana yang bukan. Urutan penggunaannya tidak menjadi masalah. Jadi bisa juga kita tuliskan onClick='alert("Yo")'. Ada banyak event-handler lain yang bisa kita gunakan. Selengkapnya dapat dilihat pada referensi JavaScript.

Function Pada dasarnya function merupakan cara untuk menyatukan beberapa perintah. Mari kita tulis sebuah script yang mengeluarkan teks tertentu sebanyak tiga kali. Perhatikan contoh berikut ini:


Hasil keluarannya akan seperti: Selamat datang pada homepage saya! Ini menggunakan JavaScript!

sebanyak tiga kali. Perhatikan baris kode, menuliskan kode sebanyak tiga kali akan memberikan hasil yang diinginkan. Tapi apakah ini efisien? Tidak, kita dapat mebuatnya lebih baik lagi seperti pada kode di bawah ini:

<script language="JavaScript"> 111


Pada script di atas kita definisikan sebuah function yang dilakukan melalui baris-baris:

function myFunction() { document.write("Selamat datang pada homepage saya!
"); document.write("Ini menggunakan JavaScript!
"); }

Perintah-perintah di dalam tanda {} merupakan milik function myFunction(). Ini berarti ada dua perintah document.write() yang dijadikan satu dan dapat dieksekusi melalui pemanggilan function yang dimaskud. Pada contoh kita memanggil function ini sebanyak tiga kali dan berarti bahwa function akan dieksekusi sebanyak tiga kali. Functions dapat pula dikombinasikan dengan event-handler seperti pada contoh berikut ini:



Tombol akan memanggil function calculation() jika di-click. Kita lihat bahwa function melakukan perhitungan tertentu sehingga kita perlu menggunakan variabel x, y dan result. Kita mendefinisikan variabel dengan keyword var. Variables dapat digunakan untuk menyimpan harga-harga yang berbeda- seperti angka, text, strings dan lainnya. Baris var result= x + y; memberitahu browser untuk membuat variabel result dan menyimpan harga x + y (5 + 12) dalam variabel result. Setelah operasi ini isi variabel result adalah 17. Perintah alert(result) artinya sama dengan alert(17), yaitu popup window akan muncul dengan isi angka 17.

6.2 DOKUMEN HTML Hirarki JavaScript Dalam sebuah halaman web terdapat bermacam-macam elemen seperti gambar (image), link, form, tombol, input text, dan sebagainya. JavaScript menyusun semua elemen halaman web dalam satu susunan hirarki. Setiap elemen dilihat sebagai object. Setiap object dapat memiliki beberapa properti (yang menentukan sifat dan tampilannya) dan method (yang menentukan apa yang bisa dikerjakan oleh object yang bersangkutan). Dengan bantuan JavaScript kita dapat dengan mudah memanipulasi object-object 113


tersebut. Untuk ini kita harus mengerti hirarki dari semua objectobject HTML. Sebagai contoh kode berikut ini merupakan halaman HTML sederhana berikut ini.

Name:
e-Mail:

My homepage
114


dengan tampilan sebagai berikut:

Gambar 6.1. Elemen-elemen dari sebuah Halaman Web

Kita lihat ada dua image, satu link dan sebuah form dengan dua text field dan sebuah tombol. Dari pandangan JavaScript window browser adalah sebuah window-object. Window-object ini berisi elemenelemen seperti statusbar. Di dalam window kita dapat me-load dokumen HTML (atau file bertipe lain - kita batasi dulu pada file HTML). Halaman ini merupakan sebuah document-object. Artinya document-object mewakili dokumen HTML yang di-load pada saat itu. Document-object merupakan object yang sangat penting dalam JavaScript – kita akan sering menggunakannya. Properti dari document-object contohnya adalah warna background halaman.

115


Berikut ini ilustrasi hirarki yang dibuat oleh contoh halaman HTML di atas:

Gambar 6.2. Hirarki Dokumen HTML

Untuk bisa memperoleh informasi tentang suatu object tertentu dan memanipulasinya kita harus tahu bagaimana mengaksesnya. Kita dapat mengetahui nama object-object yang ada berdasarkan pada hirarki di atas. Misalnya untuk mengakses image pertama kita harus melihat pada hirarki dimulai dari atas. Object pertama disebut document. Image pertama dalam halaman itu diwakili oleh images[0]. Ini artinya kita dapat mengakasesnya melalui JavaScript dengan nama document.images[0]. Demikian juga jika misalnya kita ingin mengetahui apa yang di masukkan user pada elemen pertama dari form, kita harus terlebih dahulu tahu bagaimana mengakses object yang dimaksud. Kita mulai lagi dari atas hirarki. Ikuti terus jalurnya sampai menemukan object bernama elements[0] – satukan semua nama object yang terlewati, sehingga kita menemukan nama text field pertama yaitu: document.forms[0].elements[0]

Sekarang bagaimana kita bisa mengetahui isi dari text yang dimaksukkan user? Kita harus mengakses proprty atau method-nya. 116


Untuk mengetahui secara lengkap properti dan method apa yang dimiliki oleh object kita dapat melihat referensi JavaScript. Di situ kita akan melihat bahwa text field memiliki properti value yang berisi text yang dimasukkan kedalamnya oleh user. Sekarang kita dapat membaca apa yang dimasukkan user misalnya dengan baris berikut ini: name = document.forms[0].elements[0].value;

Isinya akan disimpan dalam variabel name sehingga sekarang kita dapat bekerja dengan variabel ini. Misalnya kita dapat membuat window popup dengan alert("Hi " + name). Jika input adalah 'Yulia’ perintah alert("Hi " + name) akan mengeluarkan window popup dengan text 'Hi Yulia'. Jika kita memiliki halaman HTML yang besar, akan sangat merepotkan mengakses object-object yang ada dengan angka-angka contohnya apakah document.forms[3].elements[17] ataukah document.forms[2].elements[18]? Untuk menghindari kesulitan ini kita dapat memberi nama yang unik untuk setiap object. Sekarang kita tulis lagi kode HTML di atas sebagai berikut:
Name:
...

Dengan cara seperti ini, kita dapat mengakses forms[0] dengan myForm, dan elements[0] dengan name Jadi selain menuliskan name= document.forms[0].elements[0].value;

kita dapat juga menuliskan name= document.myForm.name.value;

yang menjadikan pekerjaan jauh lebih mudah – terutama untuk halaman yang besar dengan object-object yang banyak. (Harap diingat bahwa kita harus mempertahankan huruf besar dan huruf 117


kecil – artinya kita tidak bisa menulis myform untuk myForm). Properti object-object JavaScript tidak cuma dibatasi pada operasi pembacaan saja. Kita dapat juga mengisi harga baru untuk properti tertentu. Contohnya kita dapat menulis string baru ke text field sebagai berikut.

Sebagai contoh terakhir, ketikkan baris kode di bawah ini dan jalankan lalu amati apa yang terjadi.

Objects


119



6.3 WINDOW Membuat window Kemampuan membuka window browser baru merupakan salah satu keunggulan JavaScript. Kita bisa me-load dokumen (misalnya dokumen HTML) ke window yang baru itu atau bahkan membuat dokumen baru (on-the-fly). Pertama mari kita lihat bagaimana cara membuka window baru, me-load halaman HTML kedalam window ini dan kemudian menutupnya. Script berikut ini membuka browser window baru dan me-load sebuah halaman page: 120



Halaman bla.htm di-load kedalam window yang baru melalui method open() jika tombol ditekan. Kita dengan gampang bisa mengatur tampilan window baru itu. Misalnya menentukan apakah window akan memiliki statusbar, toolbar atau menubar serta menentukan ukuran window. Script berikut ini membuka window baru yang berukuran 400x300, tidak memiliki statusbar, toolbar atau menubar.

121



Hasilnya akan terlihat seperti ini:

Ini halaman percobaan

122


Terlihat

bahwa

kita

menentukan

properti-nya

"width=400,height=300,status=no,toolbar=no,menubar=no".

dengan Kita

tidak boleh menggunakan spasi dalam string ini!

Berikut ini daftar properti yang dimiliki sebuah window: Directories

yes|no

Height

number of pixels

Location

yes|no

Menubar

yes|no

Resizable

yes|no

Scrollbars

yes|no

Status

yes|no

Toolbar

yes|no

Width

number of pixels

Beberapa properti baru telah ditambahkan pada JavaScript 1.2 (Netscape Navigator 4.0). Kita tidak bisa menggunakan properti ini dalam Netscape 2.x atau 3.x serta Microsoft Internet Explorer 3.x karena browser-browser ini tidak mengerti JavaScript 1.2. Berikut ini properti baru tersebut:

alwaysLowered

yes|no

AlwaysRaised

yes|no

dependent

yes|no

hotkeys

yes|no

innerWidth

number of pixels (replaces width) 123


innerHeight

number of pixels (replaces height)

outerWidth

number of pixels

outerHeight

number of pixels

screenX

position in pixels

screenY

position in pixels

titlebar

yes|no

z-lock

yes|no

Kita bisa memperoleh penjelasan tentang properti ini dalam JavaScript 1.2 Guide. Dengan properti ini kita bisa men-definisikan pada posisi mana window akan dibuka.

Nama window Kita menggunakan tiga argumen untuk membuka sebuah window: myWin = open("bla.htm", "displayWindow", "width=400,height=300,status=no,toolbar=no,menubar= no");

Apa guna dari argumen kedua? Ini adalah nama window. Jika kita tahu nama dari window kita bisa me-load halaman baru kedalamnya dengan:

Di sini kita perlu nama window (jika windownya tidak ada, window baru akan dibuat secara otomatis). Perhatikan bahwa myWin bukan nama window walaupun kita bisa mengakses window melalui variabel ini. Variabel ini merupakan variabel lokal yang hanya berlaku di dalam script tempat ia di-definisikan. Nama window yang global (displayWindow) merupakan nama yang unik yang dapat digunakan oleh seluruh window browser yang sedang terbuka. 124


Menutup window Kita dapat menutup suatu window melalui JavaScript dengan method close(). Mari kita buka window baru seperti sebelumnya. Pada window ini kita me-load halaman berikut:


Jika kita menekan tombol "Close it" pada window yang baru itu, window-nya akan tertutup. Method open() dan close() merupakan method dari window-object. Seharusnya kita menuliskannya sebagai window.open() dan window.close() dan bukan open() dan close() saja. Tetapi ini dibolehkan karena pada window-object kita tidak 125


harus menulis window jika kita ingin memanggil method yang ada padanya (khusus untuk window-object).

6.4 STATUS BAR dan TIME OUT Statusbar Program JavaScript dapat menulisi statusbar – satu baris yang terdapat pada bagian bawah window browser - dengan mengisikan string kepada window.status. Contoh berikut ini menunjukkan dua tombol yang bisa digunakan untuk menulis statusbar dan menghapusnya:


126


Pada contoh di atas, kita membuat sebuah form dengan dua buah tombol. Kedua tombol itu memanggil function statbar(). Lihat bahwa pemanggilan function yang dilakukan oleh tombol Write! adalah seperti berikut: statbar('Hi! This is the statusbar!');

Di dalam tanda kurung kita tentukan string 'Hi! This is the statusbar!'. String ini diberikan kepada function statbar(). Kita definisikan function statbar() seperti ini: function statbar(txt) { window.status = txt; }

String txt ditampilkan pada Statusbar melalui window.status = txt. Menghapus text pada Statusbar dilakukan dengan memberikan string kosong pada window.status. Jika kita menggerakkan mouse pointer pada sebuah link, maka biasanya statusbar akan menampilkan URL link yang bersangkutan. Dengan bantuan JavaScript kita bisa menampilkan keterangan yang lebih informatif daripada URL yang berupa kalimat. Contoh link berikut ini memperlihatkan hal di atas – gerakkan mousepointer pada link:

127


link

Di sini kita menggunakan event onMouseOver dan onMouseOut untuk mendeteksi apakah mousepointer bergerak sepanjang link. Mengapa kita harus menulis “return true” di dalam properti onMouseOver? Ini ditulis agar browser tidak mengeksekusi kodenya sendiri sebagai reaksi dari event MouseOver. Biasanya browser akan menampilkan URL dari link pada statusbar jika ada event ini. Jika kita tidak mengunakan “return true”, browser akan menulis statusbar sesaat setelah kode kita dieksekusi – artinya browser akan menimpa text yang kita inginkan dan user tidak akan pernah sempat membacanya. Secara umum kita bisa menekan aksi-aksi browser dengan menggunakan “return true” dengan cara yang sama. Event onMouseOut tidak terdapat pada JavaScript 1.0, jadi jika kita menggunakan Netscape Navigator 2.x mungkin akan mendapatkan hasil yang berbeda untuk berbagai platforms. Pada platform Unix misalnya, text akan menghilang walaupun browser tidak mengenal onMouseOut. Pada Windows text tidak menghilang. Jika diinginkan script kompatibel dengan Netscape 2.x pada Windows kita mungkin menulis function yang menulis text ke statusbar dan menghapus text ini setelah sekian waktu tertentu. Ini diprogram melalui timeout. Kita akan mempelajari tentang timeouts pada bagian selanjutnya. Pada contoh script di atas, ada hal yang perlu kita perhatikan yaitu kita mengeluarkan tanda petik. Kita ingin mengeluarkan string Don't click me - karena kita meletakkan string ini di dalam onMouseOver event-handler kita harus menggunakan single quote. Tapi kata Don't juga menggunakan single quote! Browser akan bingung jika kita hanya menulis 'Don't ...'. Untuk mengatasi hal ini kita harus menggunakan backslash \ sebelum quote, yang akan memerintahkan browser bahwa tanda setelahnya merupakan bagian dari string yang akan dikeluarkan. 128


Timeout Dengan timeout (atau timer) kita bisa memerintahkan komputer menjalankan kode setelah sekian waktu tertentu. Sebagain contoh, pada kode berikut ini jika tombol ditekan maka setelah 3 detik akan muncul window pop-up:


...

method setTimeout() adalah method dari window-object yang mengeset waktu timeout. Argumen pertama adalah kode JavaScript yang akan dijalankan setelah suatu waktu tertentu. Pada contoh di atas argumennya adalah "alert('Time is up!')". Perhatikan bahwa kode JavaScript berada di dalam tanda petik dua (double quote). Argumen kedua menentukan berapa lama komputer harus mengunggu sebelum kode dijalankan. Besarnya adalah dalam satu per seribu detik (3000 millisecond = 3 detik). 129


Scroller Dengan mengetahui bagaimana menulis ke statusbar dan bagaimana timeout bekerja sekarang kita coba membuat scrollers. Scroller merupakan text yang bergerak pada statusbar. Kita akan coba membuat program scroller dasar. Kita bisa mengembangkannya lebih lanjut jika diperlukan. Scrollers sebenarnya tidak terlalu sulit diimplementasikan, karena sebenarnya hanya menulisi text pada statusbar. Setelah sekian waktu yang tertentu kita tulisi lagi text yang sama tapi pada posisi yang sedikit lebih ke kiri. Lalu kita ulangi proses ini terus menerus sehingga kita mendapatkan efek seakan-akan text bergerak dari kanan ke kiri. Yang harus dipikirkan adalah menentukan bagian mana dari text yang harus ditampilkan karena keseluruhan text biasanya lebih panjang daripada statusbar. Ketikkan contoh berikut ini


Your HTML-page goes here.

Bagian utama dari function scroll() diperlukan untuk menghitung bagian mana dari text yang akan ditampilkan. Untuk memulai scroller kita gunakan event-handler onLoad dari tag . Ini berarti function scroll() akan dipanggil setelah halaman HTML diload. Kita panggil function scroll() dengan properti onLoad. Langkah pertama scroller dihitung dan ditampikan. Pada akhir function scroll() kita tentukan timeout. Ini menyebabkan function scroll() dijalankan lagi setelah 100 millisecond. Text dipindahkan satu langkah kedepan dan timeout yang lain di-set lagi. Hal ini terjadi selamanya. (Ada beberapa masalah menjalankan scroller ini dengan Netscape Navigator 2.x. Kadang-kadang keluar error 'Out of memory'. Ini terjadi karena strings tidak bisa sebenarnya diubah dalam JavaScript. Jika kita coba melakukan hal ini JavaScript akan membuat object baru tanpa menghapus yang lama. Ini akan menyebabkan memory overflow.)

6.5 PREDEFINED OBJECT Date-object JavaScript telah menyediakan predefined objects yaitu object-object yang telah terdefinisi dan siap dipakai seperti Date-object, Arrayobject atau Math-object. Selengkapnya lihat pada referensi JavaScript. 132


Pertama-tama mari kita lihat Date-object. Object ini menyediakan fasilitas penentuan tanggal dan waktu. Misalnya dengan gampang kita bisa menghitung berapa hari lagi hari lebaran sejak hari ini, atau kita juga bisa menampilkan jam pada halaman HTML. Mari kita mulai dengan menampilkan waktu. Kita harus membuat Date-object yang baru dengan menggunakan operator new. Lihat pada baris kode berikut:

today= new Date()

Kode ini akan membuat sebuah Date-object baru bernama today. Jika kita tidak menentukan hari dan waktu tertentu sebagai argumennya berarti tanggal dan waktu sekarang yang akan digunakan. Artinya setelah mengeksekusi today= new Date(), today akan mewakili tanggal dan waktu sekarang. Date-object menyediakan method yang bisa kita gunakan melalui object today. Method-mothod ini contohnya adalah getHours(), setHours(), getMinutes(), setMinutes(), getMonth(), setMonth()

dan seterusnya (lihat pada dokumentasi Netscapes JavaScript). Perhatikan bahwa Date-object hanya mewakili tanggal dan waktu tertentu dan bukan seperti jam yang berubah setiap detik secara otomatis. Untuk memperoleh tanggal dan waktu yang lain selain tanggal sekarang, kita bisa menggunakan kode berikut ini: today= new Date(1997, 0, 1, 17, 35, 23)

Ini akan membuat Date-object baru yang berisi tanggal 1 January 1997 pada jam 17:35 dan 23 detik. Jadi kita bisa menentukan tanggal dan hari dengan format berikut: Date(year, month, day, hours, minutes, seconds)

133


Perhatikan bahwa kita menggunakan angka 0 untuk January. Angka 1 untuk February dan seterusnya. Sekarang kita akan membuat script yang mengeluarkan tanggal dan waktu sekarang dengan hasil seperti ini: Time: 10:8 Date: 1/24/1998

Baris kodenya adalah sebagai berikut: <script language="JavaScript">

Di sini kita gunakan method-method seperti getHours() untuk menampilkan waktu dan tanggal yang terdapat pada Date-object now. Perhatikan bahwa kita menambahkan 1900 pada tahun, karena method getYear() mengeluarkan angka tahun sejak 1900. Artinya untuk tahun 1997 hasilnya akan berupa angka 97 dan jika tahun 2010 hasilnya akan 110 – bukan 10! Jika kita menambahkan 1900 kita tidak akan mendapatkan permasalahan utnuk tahun 2000-an. Perhatikan juga bahwa kita harus menambahkan satu pada angka yang diperoleh dari getMonth() karena alasan yang sama seperti 134


sebelumnya. Script ini tidak mengecek apakah angka menit kurang dari 10 artinya kita mungkin akan meperoleh waktu dengan tampilan seperti ini: 14:3 yang sebenarnya adalah 14:03. Kita selesaikan masalah ini pada script berikutnya. Sekarang kita akan membuat script yang menampilkan sebuah jam yang benar-benar bekerja:

Kodenya adalah sebagai berikut:

<script Language="JavaScript">

Time:
Date:

Di sini kita menggunakan method setTimeout() untuk men-set waktu dan tanggal setiap detiknya, jadi kita harus membuat Dateobject baru setiap detik. Perhatikan bahwa kita memanggil function clock() pada event-handler onLoad di tag . Pada bagian body halaman HTML kita memiliki dua text-element. Function clock() 136


menulis waktu dan tanggal pada kedua text-element ini dengan format yang benar. Kita menggunkan dua string timeStr dan dateStr untuk keperluan ini. Permasalahan menit yang kurang dari 10 kita selesaikan pada script di atas melalui baris kode berikut:

timeStr+= ((minutes < 10) ? ":0" : ":") + minutes;

Di sini angka menit ditambahkan dengan string timeStr. Jika menit kurang dari 10 kita harus menambah angka 0. Kode di atas sebenarnya sama maksudnya dengan :

if (minutes < 10) timeStr+= ":0" + minutes else timeStr+= ":" + minutes;

Array-object Array merupakan suatu hal yang sangat penting diketahui. Misalkan kita ingin menyimpan 100 nama yang berbeda. Bagaimana melakukannya dengan JavaScript? Kita bisa saja mendefinisikan 100 variabel dan mengisinya dengan sederetan nama-nama. Cara ini cukup rumit dan tidak efisien.

Array bisa dilihat sebagai banyak variabel yang disatukan. Kita bisa mengaksesnya melalui satu nama dan penomoran. Misalnya array kita berinama names. Maka kita dapat mengakses nama pertama melalui names[0], nama kedua dengan names[1] dan seterusnya. Setelah JavaScript 1.1 (Netscape Navigator 3.0) kita bisa menggunakan Array-object. Kita membuat array baru dengan perintah myArray = new Array(). Kita kemudian bisa mengisi harganya dengan:

137


myArray[0]= 17; myArray[1]= "Stefan"; myArray[2]= "Koch";

Array JavaScript sangat flexible. Kita tidak harus menentukan ukuran array karena ukurannya akan ditentukan secara dinamis. Jika kita tulis myArray[99]= "xyz" ukuran array akan menjadi 100 elemen (array JavaScript hanya bisa bertambah bukan berkurang, jadi buat array sekecil mungkin.). Tidak jadi masalah apakah kita menyimpan angka, string atau object lain dalam array.

Mari kita beranjak melihat contoh dibawah ini. Keluaran dari yang diinginkan adalah seperti:

first element second element third element

Baris kodenya adalah:


Pada kode di atas, pertama kali kita buat array dengan nama myArray. Lalu kita isi dengan tiga harga yang berbeda. Setelah itu kita mulai sebuah loop. Loop ini menjalankan perintah document.write(myArray[i]+"
"); sebanyak tiga kali. Variabel i menghitung dari 0 sampai 2 dengan for-loop. Kita lihat kita menggunakan myArray[i] di dalam for-loop. Karena i menghitung dari 0 sampai 2 kita memperoleh tiga kali pemanggilan document.write(). Kita bisa menulis loop di atas seperti ini:

document.write(myArray[0] + "
"); document.write(myArray[1] + "
"); document.write(myArray[2] + "
");

Array dalam JavaScript 1.0 Array-object tidak terdapat di JavaScript 1.0 (Netscape Navigator 2.x dan Microsoft Internet Explorer 3.x), sehingga kita harus membuatnya secara manual seperti pada kode berikut ini yang terdapat pada Netscape documentation:

function initArray() { this.length = initArray.arguments.length for (var i = 0; i < this.length; i++) this[i+1] = initArray.arguments[i] } 139


bisa kita gunakan untuk membentuk array dengan perintah:

myArray= new initArray(17, 3, 5);

Tentunya array ini tidak akan memiliki method yang ada pada Array-object JavaScript 1.1.

6.6 FORM Validasi input form Form banyak sekali digunakan di Internet maupun intranet. Masukan form biasanya dikirimkan lagi ke server atau via mail ke email account tertentu. Bagaimana kita bisa memastikan bahwa data yang dimasukkan user valid atau tidak? Dengan bantuan JavaScript form input dapat dengan mudah di-cek sebelum dikirimkan lewat Internet. Pertama mari kita lihat contoh bagaimana input dari user divalidasi, lalu kita lihat bagaimana mengirimkan informasi melalui Internet. Mari kita buat script sederhana yang berupa halaman HTML yang berisi dua text-element. User harus memasukkan namanya pada textelement pertama dan e-mail address-nya pada elemen kedua. Sebagai contoh masukkan sembarang text pada input yang disediakan. Jika input tidak valid maka akan muncul window peringatan yang mengatakan bahwa input tidak valid. Berikut ini kira-kira tampilan contoh yang akan kita buat.

140


Jika kita masukkan suatu text (misalnya Daniel) pada input-elemen pertama lalu menekan tombol "Test Input", akan muncul window popup yang memberitahu kita apakah input valid atau tidak.

Jika kita tidak memasukkan apapun pada text-element lalu menekan tombol "Test Input", maka akan muncul window peringatan yang menyatakan bahwa kita harus memasukkan sesuatu:

Pada text-element kedua, jika kita masukkan text yang tidak sesuai dengan format e-mail (ada tanda @) maka text dianggap tidak valid:

141


Jika kita memasukkan input yang benar maka pesan valid akan muncul

Bagaimana cara membuat halaman HTML yang demikian itu? Berikut ini adalah baris kodenya:


Enter your name:

Enter your e-mail address:

Pertama perhatikan kode HTML pada bagian . Kita membuat dua text-element dan dua tombol. Tombol akan memanggil function test1(...) atau test2(...) tergantung dari tombol mana yang ditekan. Kita melakukan passing this.form ke function untuk bisa menentukan elemen yang benar pada function-nya nanti. 143


Function test1(form) melakukan tes apakah string kosong atau tidak. Ini dilakukan melalui if (form.text1.value == "")... . Variabel 'form' adalah variabel yang menerima harga 'this.form' pada pemanggilan function. Kita memperoleh harga dari elemen input dengan menggunakan 'value' dikombinasikan dengan form.text1. Untuk mengetahui apakah string kosong kita bandingkan dengan "". Jika input string sama dengan "" berarti user belum memasukkan sesuatu. User akan mendapatkan pesan error. Jika dimasukkan sesuatu, user akan mendapat pesan Ok. Permasalahannya adalah user mungkin saja memasukkan spasi kosong yang juga akan dianggap input yang valid! Script ini belum mengakomodasi hal tersebut, jadi masih harus dimodifikasi lagi. Sekarang lihat function test2(form). Function ini lagi-lagi membandingkan input string dengan string kosong "" untuk memastikan bahwa sesuatu telah diketikkan oleh user. Tetapi kita telah menambahkan baris tambahan pada perintah if. Tanda || disebut OR-operator. Kita telah mempelajarinya pada bagian 6. Perintah if ini megecek apakah salah satu di antara dua perbandingan bernilai benar (true). Jika minimal salah satu di antaranya true maka perintah if bernilai true dan perintah berikutnya akan dijalankan. Artinya kita akan mendapatkan pesan error jika string yang kita masukkan kosong atau tidak ada tanda @ di dalam string yang berada pada operasi kedua di dalam perintah if.

Mengecek karakter khusus Kadang kita ingin membatasi input form dengan karakter atau angka khusus. Misalnya saja nomor telephone - input harus hanya terdiri dari angka (dengan asumsi nomor telephone tidak mengandung karakter). Kita dapat mengecek apakah yang dimasukkan user itu berupa angkat atau bukan. Kebanyakan orang menggunakan simbol yang berbeda-beda untuk nomor telephone-nya - seperti: 01234-56789, 01234/56789 atau 01234 56789 (dengan spasi di antaranya). User hendaknya tidak dilarang 144


untuk memasukkan simbol yang dia ingini. Jadi kita harus mengubah script kita agar mampu mengecek angka dan beberapa simbol. Perhatikan contoh berikut ini:

Jika kita masukkan angka-angka dan simbol-simbol "/", "-", dan " ", maka ketika kita tekan tombol check, akan keluar pesan OK.

Namun jika kita masukkan sembarang karakter di samping karakterkarakter di atas, maka akan keluar pesan error:

Berikut ini baris kode untuk mengimplementasikan contoh di atas. <script language="JavaScript">

Telephone: 146


Dengan gampang kita lihat bahwa function test() menentukan karakter-karakter yang dianggap valid.

Mengirimkan masukan form Ada beberapa cara yang dapat dilakukan untuk mengirimkan input form. Cara yang paling sederhana adalah menggunakan e-mail. Cara ini yang akan kita pakai sebagai contoh. Jika input form ingin ditangani oleh server kita perlu menambahkan CGI (Common Gateway Interface) yang memungkinkan kita memproses form input secara otomatis. Server bisa berupa database yang menyimpan input dari pelanggan. Cara lain lagi menggunakan index-pages seperti Yahoo yang biasanya memiliki form search yang akan mencari data pada database. User akan mendapat respon yang cepat setelah menekan tombol submit karena prosesnya dilakukan server secara otomatis. JavaScript tidak bisa melakukan hal seperti ini. Kita juga tidak bisa membuat sistem guestbook dengan JavaScript karena JavaScript tidak bisa menulis file pada server. Tapi jika proses pengiriman data guestbook cukup menggunakan e-mail Javascript masih mampu menanganinya, tetapi kita harus melakukan feedback secara manual. Hal ini masih bisa ditolerir jika data yang diterima setiap hari masih sedikit. Contoh berikut ini sebenarnya merupakan HTML biasa, jadi JavaScript tidak diperlukan di sini! Hanya saja, jika kita hendak melakukan validasi input sebelum dikirim tentunya kita perlu JavaScript. Berikut ini contoh cara mengirimkan data form ke server melalui e-mail: 147


Do you like this page? Not at all.
Waste of time.
Worst site of the Net.

Properti enctype="text/plain" digunakan untuk mengirim plain text tanda bagian yang ter-encode, yang akan memudahkan pembacaan mail nantinya. Jika kita hendak melakukan validasi sebelum dikirimkan, kita bisa menggunakan event-handler onSubmit. Kita harus meletakkan eventhandler ini dalam tag
seperti ini:

function validate() { // check if input ok // ...

if (inputOK) return true else return false; } ...

148


...

Dengan kode itu, form tidak akan terkirim lewat Internet jika form input masih salah.

Membuat focus form-elemen tertentu Dengan bantuan method focus() kita bisa membuat form sedikit lebih user-friendly. Kita bisa membuat elemen mana yang difokuskan pada saat pertama atau yang input-nya salah. Fokus itu artinya mengeset kursor pada form-elemen tertentu sehingga user tidak harus lagi meng-click elemen yang bersangkutan sebelum memasukkan sesuatu. Kita bisa melakukan hal ini dengan script yang sederhana berikut ini: function setfocus() { document.first.text1.focus(); }

Script di atas akan mengeset focus ke text-elemen pertama pada script sebelumnya. Kita harus menentukan dengan lengkap nama form - dalam hal ini first - dan nama form element - text1. Jika hendak membuat focus pada element ini saat halaman di-load kita bisa menambahkan pada properti onLoad di tag seperti ini:

Lebih lanjut kita dapat melakukan hal sebagai berikut: function setfocus() { document.first.text1.focus(); document.first.text1.select(); } 149


yang akan mengeset focus dan juga men-select input.

6.8 Image-object Image pada halaman web Sekarang kita akan melihat Image-object yang tersedia dalam JavaScript 1.1 (Netscape Navigator 3.0 ke atas). Dengan banutan Image-object kita bisa mengganti gambar pada image pada suatu halaman web, sehingga memungkinkan kita mambuat animasi, misalnya. Pertama mari kita lihat bagaimana image dalam halaman web dapat diakses melalui JavaScript. Semua image diwakili melalui array. Array ini disebut images yang merupakan properti dari documentobject. Setiap image dalam halaman web memiliki nomor. Image pertama bernomor 0, image kedua bernomor 1 dan seterusnya. Jadi kita bisa mengakses image pertama melalui document.images[0]. Setiap image dalam dokumen HTML dianggap sebagai sebuah Image-object. Image-object tentunya memiliki properti yang dapat diakses melalui JavaScript. Kita misalnya bisa berapa ukuran yang dimiliki image dengan properti width dan height. Jadi document.images[0].width akan memberi kita lebar (dalam pixel) image pertama dalam halaman web yang kita miliki. Jika kita memiliki banyak image dalam satu halaman akan sulit untuk menomori seluruh image yang ada. Dengan memberikan nama untuk setiap image akan jauh mempermudah hal ini. Jika kita menyatakan image dengan tag berikut

150


kita akan bisa mengaksesnya melalui document.myImage atau document.images["myImage"].

Me-loading image Berikut ini kita akan mencoba mengganti isi (file gambar) sebuah image pada web-page. Untuk ini kita akan menggunakan properti src. Properti src mewakili alamat dari file gambar yang ditampilkan. Dengan JavaScript 1.1 kita bisa mengisi alamat file gambar yang baru ke image yang telah di-load pada web-page. Hasilnya adalah gambar pada lokasi yang baru akan di-load. Gambar baru ini akan menggantikan gambar lama. Mari kita lihat contoh berikut ini:

Image dengan file gambar img1.gif akan di-load dan bernama myImage. Baris kode berikut akan menggantikan gambar lama img1.gif dengan gambar baru img2.gif:

document.myImage.src= "img2.src";

Gambar yang baru akan berukutan sama dengan gambar lama. Kita tidak bisa merubah ukuran tempat gambar ditampilkan.

Preload image Salah satu kelemahan dari penggantian gambar seperti di atas adalah bahwa gambar akan di-load setelah kita mengisikan alamat baru pada properti src. Karena gambar itu tidak di-load terlebih dahulu, maka akan membutuhkan waktu yang lumayan lama untuk menampilkan gambar yang baru karena harus diambil dahulu melalui Internet. Apa yang dapat kita perbuat untuk memperbaiki hal ini? Solusinya adalah preloading image yaitu me-load gambar 151


telebih dahulu sebelum ditampilkan. Untuk ini kita harus membuat Image-object tambahan. Lihat baris kode berikut ini:

hiddenImg= new Image(); hiddenImg.src= "img3.gif";

Baris pertama membuat sebuah Image-Object dengan nama hiddenImg. Baris kedua mendefinisikan alamat gambar yang akan diwakili melalui object hiddenImg. Kita telah mencoba bahwa mengisi alamat baru pada attribute src akan membuat browser me-load file gambar dari alamat yang ditetapkan pada atribut src-nya. Jadi file gambar img2.gif akan di-load ketika baris kedua dieksekusi. Gambar akan tetap disimpan di memory (lebih tepatnya di cache) untuk digunakan kemudian. Untuk menampilkan gambar yang baru ini kita gunakan baris berikut:

document.myImage.src= hiddenImg.src;

Sekarang gambar diambil dari cache dan akan ditampilkan dengan jauh lebih cepat. Inilah yang disebut preloading image. Tentu saja browser harus terlebih dahulu menyelesaikan pengambilan gambar yang dimaksud. Jadi jika kita melakukan preloading banyak gambar, mungkin masih akan terdapat delay karena browser akan berusaha men-download seluruh gambar yang digunakan. Kita harus tetap memperhatikan kecepatan Internet.

Mengganti image berdasarkan event Dengan JavaScript kita bisa membuat efek yang bagus dengan mengganti gambar sebagai reaksi dari event tertentu. Misalnya kita bisa mengganti gambar saat mousecursor digerakkan di atas suatu area. Coba ketikkan baris kode berikut ini: 152


Kode sederhana di atas sudah menampakkan hasil yang kita inginkan, yaitu gambar akan berganti menjadi gambar lain jika kita gerakkan mouse di atas gambar (akibat baris onMouseOver="document.myImage2.src='img2.gif'"). Kemudian jika kita keluarkan mouse dari gambar tersebut, gambar akan berganti menjadi gambar awal

(onMouseOut="document.myImage2.src='img1.gif'").

Namun kode di atas masih memiliki kekurangan seperti: •

Browser yang digunakan tidak mengenal JavaScript 1.1.

•

Gambar kedua tidak di-preload.

•

Untuk setiap image kita harus menuliskan kode yang sama

•

Kita ingin memiliki script yang dapat digunakan untuk banyak halaman web berulang-ulang tanpa perlu banyak perubahan.

Kita sekarang lihat script yang lengkap yang mengatasi permasalahan di atas. Script menjadi lebih panjang tapi kita cukup menuliskannya sekali saja. Ada dua hal yang diperlukan untuk membuat script ini fleksibel: •

Jumlah image yang tak terbatas - tidak jadi masalah apakah itu 10 atau 100 images 153


•

Urutan image yang tak terbatas - memungkinkan mengubah urutan images tanpa merubah kode

Berikut ini baris kode selengkapnya


<script language="JavaScript1.1">



156


Script di atas meletakkan seluruh file gambar dalam array pics. Function preload() yang dipanggil di awal akan membuat array ini. Kita memanggil function preload() seperti berikut:

preload("link1", "img1f.gif", "img1t.gif");

Artinya script akan me-load kedua file gambar img1f.gif dan img1t.gif. File gambar pertama adalah yang akan ditampilkan saat mouse cursor tidak berada di daerah image. Saat user menggerakkan mouse cursor melewati daerah image, file gambar kedua akan 157


ditampilkan. Dengan argumen pertama "link1" pada pemanggilan function preload() kita tentukan kedua preloaded image itu milik Image-object yang mana.

Jika kita lihat pada bagian pada contoh, kita lihat ada image dengan nama img1. Kita gunakan nama dari image (bukan nomornya) untuk bisa mengubah urutan gambar tanpa merubah script-nya.

Function on() dan off() dipanggil melalui event-handler onMouseOver dan onMouseOut. Karena image tidak bisa bereaksi oleh event onMouseOver dan MouseOut kita harus membuat link pada image. Kita lihat function on() men-set image lainnya. Ini diperlukan karena bisa saja terjadi bahwa beberapa images terlewati sekaligus (event MouseOut tidak terjadi ketika user menggerakkan cursor dari sebuah image langsung keluar window).

158


DAFTAR PUSTAKA Anonymous, “Javascrip Tutorial”, http://www.javascriptsource.com, diakses Januari 2006. Anonymous, “Pioneers On The Net”, http://www.chick.net/wizards/ pioneers.html, diakses Januari 2006. Budd, Andy. ”CSS Mastery: Advanced Web Standards Solutions”, Februari 2006. Dave Taylor, “Creating Cool Web Sites with HTML, XHTML, and CSS”, Wiley Publishing, Inc, 2004 Martin, Dodge, “An Atlas of Cyberspaces- Historical Maps”, http:// www.cybergeography.org/atlas/historical.html, diakses Januari 2006. Shengili-Roberts, Keith.,”Core Cascading Style Sheet”, Prentice Hall, New Jersey, 2000. Tolle, Herman. “Diktat Kuliah Internet & Disain Web”. Teknik Elektro Universitas Brawijaya. 2004. Wibowo, Sugeng, “Modul Pelatihan Dasar Disain Web”. UPT Pusat komputer universitas brawijaya, 2003.

159

JAVASCRIPT. 6.1 Pengenalan JavaScript. Apa itu JavaScript? Menjalankan JavaScript

Recommend Documents