-
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:
Ini halaman HTML normal.
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:
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):
-
Diktat Kuliah Internet & Web Disain Herman Tolle - UB
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 .
Segala sesuatu yang berada di antara tag dan 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
. 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
-
Diktat Kuliah Internet & Web Disain Herman Tolle - UB
108
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.
-
Diktat Kuliah Internet & Web Disain Herman Tolle - UB
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:
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 pada kasus ini).
Fungsi alert() berfungsi untuk menampilkan window popup. Di
dalam tanda kurung kita tentukan string yang akan muncul pada
-
Diktat Kuliah Internet & Web Disain Herman Tolle - UB
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:
-
Diktat Kuliah Internet & Web Disain Herman Tolle - UB
111
document.write("Selamat datang pada homepage saya!");
document.write("Ini menggunakan JavaScript!");
// -->
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:
-
Diktat Kuliah Internet & Web Disain Herman Tolle - UB
112
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:
-
Diktat Kuliah Internet & Web Disain Herman Tolle - UB
113
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
-
Diktat Kuliah Internet & Web Disain Herman Tolle - UB
114
tersebut. Untuk ini kita harus mengerti hirarki dari semua
object-
object HTML.
Sebagai contoh kode berikut ini merupakan halaman HTML
sederhana berikut ini.
Name:
e-Mail:
My homepage
-
Diktat Kuliah Internet & Web Disain Herman Tolle - UB
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.
-
Diktat Kuliah Internet & Web Disain Herman Tolle - UB
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.
-
Diktat Kuliah Internet & Web Disain Herman Tolle - UB
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:
...
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
-
Diktat Kuliah Internet & Web Disain Herman Tolle - UB
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.
Sebagai contoh terakhir, ketikkan baris kode di bawah ini
dan
jalankan lalu amati apa yang terjadi.
Objects
-
Diktat Kuliah Internet & Web Disain Herman Tolle - UB
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); }
// -->
-
Diktat Kuliah Internet & Web Disain Herman Tolle - UB
120
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:
-
Diktat Kuliah Internet & Web Disain Herman Tolle - UB
121
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.
-
Diktat Kuliah Internet & Web Disain Herman Tolle - UB
122
Hasilnya akan terlihat seperti ini:
Ini halaman percobaan
-
Diktat Kuliah Internet & Web Disain Herman Tolle - UB
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)
-
Diktat Kuliah Internet & Web Disain Herman Tolle - UB
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:
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.
-
Diktat Kuliah Internet & Web Disain Herman Tolle - UB
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:
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
-
Diktat Kuliah Internet & Web Disain Herman Tolle - UB
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:
-
Diktat Kuliah Internet & Web Disain Herman Tolle - UB
127
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:
-
Diktat Kuliah Internet & Web Disain Herman Tolle - UB
128
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.
-
Diktat Kuliah Internet & Web Disain Herman Tolle - UB
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:
...
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).
-
Diktat Kuliah Internet & Web Disain Herman Tolle - UB
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
-
Diktat Kuliah Internet & Web Disain Herman Tolle - UB
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
-
Diktat Kuliah Internet & Web Disain Herman Tolle - UB
132
// -->
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
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.
-
Diktat Kuliah Internet & Web Disain Herman Tolle - UB
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)
-
Diktat Kuliah Internet & Web Disain Herman Tolle - UB
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:
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
-
Diktat Kuliah Internet & Web Disain Herman Tolle - UB
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:
-
Diktat Kuliah Internet & Web Disain Herman Tolle - UB
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); }
// -->
Time:
Date:
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 . Pada bagian body
halaman HTML kita memiliki dua text-element. Function clock()
-
Diktat Kuliah Internet & Web Disain Herman Tolle - UB
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:
-
Diktat Kuliah Internet & Web Disain Herman Tolle - UB
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:
-
Diktat Kuliah Internet & Web Disain Herman Tolle - UB
139
document.write(myArray[i] + ""); }
// -->
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] }
-
Diktat Kuliah Internet & Web Disain Herman Tolle - UB
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.
-
Diktat Kuliah Internet & Web Disain Herman Tolle - UB
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:
-
Diktat Kuliah Internet & Web Disain Herman Tolle - UB
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:
-
Diktat Kuliah Internet & Web Disain Herman Tolle - UB
143
}
function test2(form) { if (form.text2.value == "" ||
form.text2.value.indexOf('@', 0) == -1) alert("No valid e-mail
address!"); else alert("OK!"); } // -->
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.
-
Diktat Kuliah Internet & Web Disain Herman Tolle - UB
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
-
Diktat Kuliah Internet & Web Disain Herman Tolle - UB
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.
-
Diktat Kuliah Internet & Web Disain Herman Tolle - UB
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!"); } }
// -->
Telephone:
-
Diktat Kuliah Internet & Web Disain Herman Tolle - UB
147
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:
-
Diktat Kuliah Internet & Web Disain Herman Tolle - UB
148
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
event-
handler ini dalam tag seperti ini:
function validate() { // check if input ok // ...
if (inputOK) return true else return false;
} ...
-
Diktat Kuliah Internet & Web Disain Herman Tolle - UB
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 seperti ini:
Lebih lanjut kita dapat melakukan hal sebagai berikut:
function setfocus() { document.first.text1.focus();
document.first.text1.select(); }
-
Diktat Kuliah Internet & Web Disain Herman Tolle - UB
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
-
Diktat Kuliah Internet & Web Disain Herman Tolle - UB
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:
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
-
Diktat Kuliah Internet & Web Disain Herman Tolle - UB
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:
-
Diktat Kuliah Internet & Web Disain Herman Tolle - UB
153
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
-
Diktat Kuliah Internet & Web Disain Herman Tolle - UB
154
Urutan image yang tak terbatas - memungkinkan mengubah
urutan images tanpa merubah kode
Berikut ini baris kode selengkapnya
-
Diktat Kuliah Internet & Web Disain Herman Tolle - UB
155
-
Diktat Kuliah Internet & Web Disain Herman Tolle - UB
156
document.images[pics[i][2]].src = 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) document.images[pics[i][2]].src = 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"); preload("link2",
"img2f.gif", "img2t.gif"); preload("link3", "img3f.gif",
"img3t.gif");
// -->
-
Diktat Kuliah Internet & Web Disain Herman Tolle - UB
157
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
-
Diktat Kuliah Internet & Web Disain Herman Tolle - UB
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 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).
-
Diktat Kuliah Internet & Web Disain Herman Tolle - UB
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.