6 javascript - hermantolle.comhermantolle.com/buku/iwd/iwd-06-javascript.pdfhasilnya simpan file di...

105

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.

6

Diktat Kuliah Internet & Web Disain – Herman Tolle - UB

106

Mencantumkan JavaScript pada halaman HTML

Kode JavaScript dituliskan langsung pada halaman HTML. Mari kita

lihat contoh sederhana berikut ini untuk mengerti bagaimana

JavaScript bekerja:

<html>

<body>

<br>

Ini halaman HTML normal.

<br>

<script language="JavaScript">

document.write("Yang ini akibat JavaScript!")

</script>

<br>

Ini HTML lagi.

</body>

</html>

Contoh sederhana di atas kelihatan seperti halaman HTML normal.

Satu-satunya hal yang baru adalah bagian:



</script>

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):

107

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 </script> di-

interpretasi-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:

<html>

<body>

<br>

Ini dokumen HTML normal

<br>

108




</script>

<br>

Ini HTML lagi.

</body>

</html>

Tampilan pada non-JavaScript browser akan terlihat seperti ini:


Ini HTML lagi

Tanpa HTML-comment tampilan pada non-JavaScript browser akan

seperti:


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.


109

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 event-

handlers. 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:

<form>

<input type="button" value="Click me"

onClick="alert('Ya')">

</form>

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

110

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:

<html>


<!-- hide

document.write("Selamat datang pada homepage

saya!<br>");

document.write("Ini menggunakan JavaScript!<br>");


saya!<br>");

111


saya!<br>");


// -->

</script>

</html>

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:

<html>




</script>

</html>

112

Pada script di atas kita definisikan sebuah function yang dilakukan

melalui baris-baris:

function myFunction() {


saya!<br>");


}

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:

<html>

<head>




</script>


113

</head>

<body>

<form>

<input type="button" value="Calculate"

onClick="calculation()">

</form>

</body>

</html>

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


114

tersebut. Untuk ini kita harus mengerti hirarki dari semua object-

object HTML.

Sebagai contoh kode berikut ini merupakan halaman HTML

sederhana berikut ini.

<html>

<head>

</head>

<body bgcolor=#ffffff>

<center>

<img src="home.gif" name="pic1" width=200

height=100>

</center>

<p>

<form name="myForm">

Name:

<input type="text" name="name" value=""><br>

e-Mail:

<input type="text" name="email" value=""><br><br>

<input type="button" value="Push me"

name="myButton" onClick="alert('Yo')">

</form>

<p>

<center>

<img src="ruler.gif" name="pic4" width=300

height=15>

<p>

<a href="http://www.hermantolle.org/index.html">My

homepage</a>

</center>

</body>

</html>


115

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 elemen-

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


116

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.


117

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: <input type="text" name="name" value=""><br>

...

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

118

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.


<input type="text" name="input" value="bla bla

bla">

<input type="button" value="Write"

onClick="document.myForm.input.value= 'Ya ya ya!';

">

Sebagai contoh terakhir, ketikkan baris kode di bawah ini dan

jalankan lalu amati apa yang terjadi.

<html>

<head>

<title>Objects</title>


<!-- hide

function first() {

// creates a popup window with the

// text which was entered into the text element

alert("The value of the textelement is: " +

document.myForm.myText.value);

}


119

function second() {

// this function checks the state of the checkbox

var myString= "The checkbox is ";

// is checkbox checked or not?

if (document.myForm.myCheckbox.checked)

myString+= "checked"

else myString+= "not checked";

// output string

alert(myString);

}

// -->

</script>

</head>

<body bgcolor=lightblue>


<input type="text" name="myText" value="bla bla

bla">

<input type="button" name="button1" value="Button

1"

onClick="first()">

<br>

<input type="checkbox" name="myCheckbox" CHECKED>

<input type="button" name="button2" value="Button

2"

onClick="second()">

</form>

120

<p><br><br>




</script>

</body>

</html>

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:

121

<html>

<head>




</script>

</head>

<body>

<form>

<input type="button" value="Open new window"

onClick="openWin()">

</form>

</body>

</html>

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.

<html>

<head>

122




</script>

</head>

<body>

<form>

<input type="button" value="Open new window"

onClick="openWin2()">

</form>

</body>

</html>

Hasilnya akan terlihat seperti ini:

Ini halaman percobaan


123

Terlihat bahwa kita menentukan properti-nya dengan

"width=400,height=300,status=no,toolbar=no,menubar=no". 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)


124

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:

<a href="bla.html" target="displayWindow">

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.

125

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:

<html>




</script>

<center>

<form>

<input type=button value="Close it"

onClick="closeIt()">

</form>

</center>

</html>

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

126

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:

<html>

<head>




</script>

</head>

<body>

<form>

<input type="button" name="look" value="Write!"

onClick="statbar('Hi! This is the

statusbar!');">


127

<input type="button" name="erase" value="Erase!"

onClick="statbar('');">

</form>

</body>

</html>

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:


128

<a href="dontclck.htm"

onMouseOver="window.status='Don\'t click me!';

return true;"

onMouseOut="window.status='';">link</a>

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.

129

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:




</script>

...

<form>

<input type="button" value="Timer"

onClick="timer()">

</form>

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

130

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

<html>

<head>


<!-- hide

// define the text of the scroller

var scrtxt = "This is JavaScript! " +

"This is JavaScript! " +

"This is JavaScript!";

var length = scrtxt.length;

var width = 100;

var pos = -(width + 2);

function scroll() {


131

// display the text at the right position and set a timeout

// move the position one step further

pos++;

// calculate the text which shall be displayed

var scroller = "";

if (pos == length) {

pos = -(width + 2);

}

// if the text hasn't reached the left side yet we have to

// add some spaces - otherwise we have to cut of the first

// part of the text (which moved already across the left

border

if (pos < 0) {

for (var i = 1; i <= Math.abs(pos); i++) {

scroller = scroller + " ";}

scroller = scroller + scrtxt.substring(0, width

- i + 1);

}

else {

scroller = scroller + scrtxt.substring(pos,

width + pos);

}

// assign the text to the statusbar

window.status = scroller;

// call this function again after 100

milliseconds

setTimeout("scroll()", 100);

}


132

// -->

</script>

</head>

<body onLoad="scroll()">

Your HTML-page goes here.

</body>

</html>

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 <body>. Ini

berarti function scroll() akan dipanggil setelah halaman HTML di-

load. 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, Array-

object atau Math-object. Selengkapnya lihat pada referensi JavaScript.


133

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)

134

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>

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

135

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:

<html>

<head>

<script Language="JavaScript">

<!-- hide

var timeStr, dateStr;

function clock() {

now= new Date();

// time

hours= now.getHours();

minutes= now.getMinutes();

seconds= now.getSeconds();

timeStr= "" + hours;

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

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

document.clock.time.value = timeStr;

// date


136

date= now.getDate();

month= now.getMonth()+1;

year= now.getYear();

dateStr= "" + month;

dateStr+= ((date < 10) ? "/0" : "/") + date;

dateStr+= "/" + year;

document.clock.date.value = dateStr;

Timer= setTimeout("clock()",1000);

}

// -->

</script>

</head>

<body onLoad="clock()">

<form name="clock">

Time: <input type="text" name="time" size="8"

value=""><br>

Date: <input type="text" name="date" size="8"

value="">

</form>

</body>

</html>

Di sini kita menggunakan method setTimeout() untuk men-set

waktu dan tanggal setiap detiknya, jadi kita harus membuat Date-

object baru setiap detik. Perhatikan bahwa kita memanggil function

clock() pada event-handler onLoad di tag <body> . Pada bagian body

halaman HTML kita memiliki dua text-element. Function clock()


137

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:

138

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:


<!-- hide

myArray= new Array();

myArray[0]= "first element";

myArray[1]= "second element";

myArray[2]= "third element";

for (var i= 0; i< 3; i++) {


139

document.write(myArray[i] + "<br>");

}

// -->

</script>

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]+"<br>"); 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] + "<br>");



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]

}


140

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 e-

mail 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 di-

validasi, 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 text-

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


141

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:

142

Jika kita memasukkan input yang benar maka pesan valid akan

muncul

Bagaimana cara membuat halaman HTML yang demikian itu?

Berikut ini adalah baris kodenya:

<html>

<head>


<!-- Hide

function test1(form) {

if (form.text1.value == "")

alert("Please enter a string!")

else {

alert("Hi "+form.text1.value+"! Form input

ok!");

}


143

}

function test2(form) {

if (form.text2.value == "" ||

form.text2.value.indexOf('@', 0) == -1)

alert("No valid e-mail address!");

else alert("OK!");

}

// -->

</script>

</head>

<body>

<form name="first">

Enter your name:<br>

<input type="text" name="text1">

<input type="button" name="button1" value="Test

Input" onClick="test1(this.form)">

<P>

Enter your e-mail address:<br>

<input type="text" name="text2">

<input type="button" name="button2" value="Test

Input" onClick="test2(this.form)">

</body>

</html>

Pertama perhatikan kode HTML pada bagian <body>. 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.


144

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

145

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 karakter-

karakter di atas, maka akan keluar pesan error:

Berikut ini baris kode untuk mengimplementasikan contoh di atas.

<html>

<head>


<!-- hide

function check(input) {

var ok = true;


146

for (var i = 0; i < input.length; i++) {

var chr = input.charAt(i);

var found = false;

for (var j = 1; j < check.length; j++) {

if (chr == check[j]) found = true;

}

if (!found) ok = false;

}

return ok;

}

function test(input) {

if (!check(input, "1", "2", "3", "4",

"5", "6", "7", "8", "9", "0", "/", "-", "

")) {

alert("Input not ok.");

}

else {

alert("Input ok!");

}

}

// -->

</script>

</head>

<body>

<form>

Telephone:

<input type="text" name="telephone" value="">


147

<input type="button" value="Check"

onClick="test(this.form.telephone.value)">

</form>

</body>

</html>

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:


148

<form method=post

action="mailto:[email protected]"

enctype="text/plain">

Do you like this page?

<input name="choice" type="radio" value="1">Not

at all.<br>

<input name="choice" type="radio" value="2"

CHECKED>Waste of time.<br>

<input name="choice" type="radio" value="3">Worst

site of the Net.<br>

<input name="submit" type="submit" value="Send">

</form>

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 event-

handler ini dalam tag <form> seperti ini:

function validate() {

// check if input ok

// ...

if (inputOK) return true

else return false;

}

...

<form ... onSubmit="return validate()">


149

...

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 <body> seperti ini:

<body onLoad="setfocus()">

Lebih lanjut kita dapat melakukan hal sebagai berikut:

function setfocus() {

document.first.text1.focus();

document.first.text1.select();

}


150

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 document-

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

<img src="img.gif" name="myImage" width=100

height=100>


151

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:

<img src="img1.gif" name="myImage" width=100

height=100>

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


152

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:


153

<a href="#"

onMouseOver="document.myImage2.src='img2.gif'"

onMouseOut="document.myImage2.src='img1.gif'">

<img src="img1.gif" name="myImage2" width=160

height=50 border=0></a>

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

154

• Urutan image yang tak terbatas - memungkinkan mengubah

urutan images tanpa merubah kode

Berikut ini baris kode selengkapnya

<html>

<head>




</script>

<script language="JavaScript1.1">



</script>

155

<!-- hide

var objCount = 0; // number of (changing) images on

web-page

function preload(name, first, second) {

// preload images and place them in an array

if (browserOK) {

pics[objCount] = new Array(3);

pics[objCount][0] = new Image();

pics[objCount][0].src = first;

pics[objCount][1] = new Image();

pics[objCount][1].src = second;

pics[objCount][2] = name;

objCount++;

}

}

function on(name){

if (browserOK) {

for (i = 0; i < objCount; i++) {

if (document.images[pics[i][2]] != null)

if (name != pics[i][2]) {

// set back all other pictures

document.images[pics[i][2]].src =

pics[i][0].src;

} else {

// show the second image because cursor

moves across this image


156


pics[i][1].src;

}

}

}

}

function off(){

if (browserOK) {

for (i = 0; i < objCount; i++) {

// set back all pictures

if (document.images[pics[i][2]] != null)


pics[i][0].src;

}

}

}

// preload images - you have to specify which

images should be preloaded

// and which Image-object on the wep-page they

belong to (this is the

// first argument). Change this part if you want to

use different images

// (of course you have to change the body part of

the document as well)

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



// -->

</script>


157

<head>

<body>

<a href="link1.htm" onMouseOver="on('link1')"

onMouseOut="off()">

<img name="link1" src="link1f.gif"

width="140" height="50" border="0"></a>


onMouseOut="off()">




onMouseOut="off()">



</body>

</html>

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:


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


158

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 <body> 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).


159

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.

6 javascript - hermantolle.comhermantolle.com/buku/iwd/iwd-06-javascript.pdfhasilnya simpan file di...

Documents