Javascript For Beginner

6
JAVASCRIPT
6.1 Pengenalan JavaScript

Apa itu JavaScript?
JavaScript merupakan sebuah bahasa scripting yang dikembangkan
oleh Netscape. JavaScript digolongkan sebagai bahasa scripting sisi
klien (client side scripting) artinya bahwa script JavaScript tersebut
akan dieksekusi atau dijalankan pada komputer kita sendiri saat kita
membuka suatu halaman web yang berisi script JavaScript. Dengan
JavaScript kita dapat dengan mudah membuat halaman web yang
interaktif.
Menjalankan JavaScript
Apa yang diperlukan untuk menjalankan script yang ditulis dengan
JavaScript? Kita perlu JavaScript-enabled browser yaitu browser yang
mampu menjalankan JavaScript misalnya Netscape Navigator
(versi 2.0 ke atas ) atau Microsoft Internet Explorer (MSIE - versi 3.0
ke atas). Mengingat kedua browser di atas telah banyak beredar dan
digunakan, pemilihan JavaScript sebagai untuk meningkatkan
kemampuan halaman web menjadi sangat baik. Untuk menggunakan
JavaScript kita harus telah mengenal baik HTML.
105
Diktat Kuliah Internet & Web Disain Herman Tolle - UB
Mencantumkan JavaScript pada halaman HTML

Kode JavaScript dituliskan langsung pada halaman HTML. Mari kita
lihat contoh sederhana berikut ini untuk mengerti bagaimana
JavaScript bekerja:
<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):
106

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> diinterpretasi-kan sebagai kode JavaScript. Di situ kita bisa melihat
penggunaan document.write() salah satu perintah yang penting
dalam pemrograman dengan JavaScript. document.write()
digunakan untuk menulis sesuatu pada dokumen (dalam hal ini
adalah dokumen HTML). Jadi program JavaScript sederhana kita di
atas berfungsi untuk menuliskan text Yang ini akibat
JavaScript! ke dokumen HTML.
Non-JavaScript browser
Apa yang akan terjadi jika kita menggunakan browser yang tidak
mengerti JavaScript? Non-JavaScript browser tidak mengenal tag
<script>. Dia akan mengabaikan tag itu dan mengeluarkan seluruh
kode selayaknya text biasa . Ini berarti bahwa user akan melihat kode
JavaScript program kita yang ada di dokumen HTML. Ini tentunya
bukan hal yang kita harapkan. Ada cara untuk menyembunyikan
baris kode dari browser yang seperti itu, yaitu dengan menggunakan
HTML-comments . Baris kode kita yang baru akan terlihat
seperti ini:
<html>
<body>
<br>
Ini dokumen HTML normal
<br>
107

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

window dengan tulisan 'Ya' saat user men-click tombol.
Satu
hal
yang
mungkin membingungkan: pada perintah

document.write() kita menggunakan double quotes (") dan pada
alert() kita menggunakan juga single quotes ('), mengapa? Pada
contoh ini kita menuliskan onClick="alert('Yo')" kita gunakan
keduanya (double dan single quote) . Jika kita tulis
onClick="alert("Yo")" maka komputer akan bingung mana yang
menjadi bagian event-handler onClick dan mana yang bukan. Urutan
penggunaannya tidak menjadi masalah. Jadi bisa juga kita tuliskan
onClick='alert("Yo")'.
Ada banyak event-handler lain yang bisa kita gunakan. Selengkapnya
dapat dilihat pada referensi JavaScript.
Function
Pada dasarnya function merupakan cara untuk menyatukan
beberapa perintah. Mari kita tulis sebuah script yang mengeluarkan
teks tertentu sebanyak tiga kali. Perhatikan contoh berikut ini:
<html>

</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>
111
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>
112
</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
113
tersebut. Untuk ini kita harus mengerti hirarki dari semua objectobject 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>
114
dengan tampilan sebagai berikut:
Gambar 6.1. Elemen-elemen dari sebuah Halaman Web
Kita lihat ada dua image, satu link dan sebuah form dengan dua text
field dan sebuah tombol. Dari pandangan JavaScript window browser
adalah sebuah window-object. Window-object ini berisi elemenelemen seperti statusbar. Di dalam window kita dapat me-load
dokumen HTML (atau file bertipe lain - kita batasi dulu pada file
HTML). Halaman ini merupakan sebuah document-object. Artinya
document-object mewakili dokumen HTML yang di-load pada saat
itu. Document-object merupakan object yang sangat penting dalam
JavaScript kita akan sering menggunakannya. Properti dari
document-object contohnya adalah warna background halaman.
115
Berikut ini ilustrasi hirarki yang dibuat oleh contoh halaman HTML
di atas:
Gambar 6.2. Hirarki Dokumen HTML
Untuk bisa memperoleh informasi tentang suatu object tertentu dan

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

dimaksukkan user? Kita harus mengakses proprty atau method-nya.
116
Untuk mengetahui secara lengkap properti dan method apa yang

dimiliki oleh object kita dapat melihat referensi JavaScript. Di situ
kita akan melihat bahwa text field memiliki properti value yang berisi
text yang dimasukkan kedalamnya oleh user. Sekarang kita dapat
membaca apa yang dimasukkan user misalnya dengan baris berikut
ini:
name = document.forms[0].elements[0].value;
Isinya akan disimpan dalam variabel name sehingga sekarang kita

dapat bekerja dengan variabel ini. Misalnya kita dapat membuat
window popup dengan alert("Hi " + name). Jika input adalah
'Yulia perintah alert("Hi " + name) akan mengeluarkan window
popup dengan text 'Hi Yulia'.
Jika kita memiliki halaman HTML yang besar, akan sangat
merepotkan mengakses object-object yang ada dengan angka-angka contohnya
apakah
document.forms[3].elements[17]
ataukah
document.forms[2].elements[18]? Untuk menghindari kesulitan ini
kita dapat memberi nama yang unik untuk setiap object. Sekarang
kita tulis lagi kode HTML di atas sebagai berikut:
Name: <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
117
kecil artinya kita tidak bisa menulis myform untuk myForm). Properti
object-object JavaScript tidak cuma dibatasi pada operasi pembacaan
saja. Kita dapat juga mengisi harga baru untuk properti tertentu.
Contohnya kita dapat menulis string baru ke text field sebagai berikut.
<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>

</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>
119
<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:
120
<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>
121

</script>
</head>
<body>
<form>
<input type="button" value="Open new window"
onClick="openWin2()">
</form>
</body>
</html>
Hasilnya akan terlihat seperti ini:
Ini halaman percobaan
122
Terlihat
bahwa
kita
menentukan
properti-nya
"width=400,height=300,status=no,toolbar=no,menubar=no".
dengan
Kita
tidak boleh menggunakan spasi dalam string ini!
Berikut ini daftar properti yang dimiliki sebuah window:

Directories
yes|no
Height
number of pixels
Location
yes|no
Menubar
yes|no
Resizable
yes|no
Scrollbars
yes|no
Status
yes|no
Toolbar
yes|no
Width
number of pixels
Beberapa properti baru telah ditambahkan pada JavaScript 1.2

(Netscape Navigator 4.0). Kita tidak bisa menggunakan properti ini
dalam Netscape 2.x atau 3.x serta Microsoft Internet Explorer 3.x
karena browser-browser ini tidak mengerti JavaScript 1.2. Berikut ini
properti baru tersebut:
alwaysLowered
yes|no
AlwaysRaised
yes|no
dependent
yes|no
hotkeys
yes|no
innerWidth
number of pixels (replaces width)

123
innerHeight
number of pixels (replaces height)
outerWidth
number of pixels
outerHeight
number of pixels
screenX
position in pixels
screenY
position in pixels
titlebar
yes|no
z-lock
yes|no
Kita bisa memperoleh penjelasan tentang properti ini dalam

JavaScript 1.2 Guide. Dengan properti ini kita bisa men-definisikan
pada posisi mana window akan dibuka.
Nama window
Kita menggunakan tiga argumen untuk membuka sebuah window:
myWin = open("bla.htm", "displayWindow",
"width=400,height=300,status=no,toolbar=no,menubar=
no");
Apa guna dari argumen kedua? Ini adalah nama window. Jika kita
tahu nama dari window kita bisa me-load halaman baru kedalamnya
dengan:
<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.
124
Menutup window
Kita dapat menutup suatu window melalui JavaScript dengan
method close(). Mari kita buka window baru seperti sebelumnya.
Pada window ini kita me-load halaman berikut:
<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
125
harus menulis window jika kita ingin memanggil method yang ada
padanya (khusus untuk window-object).
6.4 STATUS BAR dan TIME OUT

Statusbar
Program JavaScript dapat menulisi statusbar satu baris yang
terdapat pada bagian bawah window browser - dengan mengisikan
string kepada window.status. Contoh berikut ini menunjukkan dua
tombol yang bisa digunakan untuk menulis statusbar dan
menghapusnya:
<html>
<head>

</script>
</head>
<body>
<form>
<input type="button" name="look" value="Write!"
onClick="statbar('Hi! This is the
statusbar!');">
126
<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:
127
<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.
128
Timeout
Dengan timeout (atau timer) kita bisa memerintahkan komputer
menjalankan kode setelah sekian waktu tertentu. Sebagain contoh,
pada kode berikut ini jika tombol ditekan maka setelah 3 detik akan
muncul window pop-up:

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

</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 diload. Kita panggil function scroll() dengan properti onLoad.
Langkah pertama scroller dihitung dan ditampikan. Pada akhir
function scroll() kita tentukan timeout. Ini menyebabkan function
scroll() dijalankan lagi setelah 100 millisecond. Text dipindahkan
satu langkah kedepan dan timeout yang lain di-set lagi. Hal ini
terjadi selamanya. (Ada beberapa masalah menjalankan scroller ini
dengan Netscape Navigator 2.x. Kadang-kadang keluar error 'Out of
memory'. Ini terjadi karena strings tidak bisa sebenarnya diubah
dalam JavaScript. Jika kita coba melakukan hal ini JavaScript akan
membuat object baru tanpa menghapus yang lama. Ini akan
menyebabkan memory overflow.)
6.5 PREDEFINED OBJECT

Date-object
JavaScript telah menyediakan predefined objects yaitu object-object
yang telah terdefinisi dan siap dipakai seperti Date-object, Arrayobject atau Math-object. Selengkapnya lihat pada referensi JavaScript.
132
Pertama-tama mari kita lihat Date-object. Object ini menyediakan

fasilitas penentuan tanggal dan waktu. Misalnya dengan gampang
kita bisa menghitung berapa hari lagi hari lebaran sejak hari ini, atau
kita juga bisa menampilkan jam pada halaman HTML.
Mari kita mulai dengan menampilkan waktu. Kita harus membuat
Date-object yang baru dengan menggunakan operator new. Lihat
pada baris kode berikut:
today= new Date()
Kode ini akan membuat sebuah Date-object baru bernama today. Jika
kita tidak menentukan hari dan waktu tertentu sebagai argumennya
berarti tanggal dan waktu sekarang yang akan digunakan. Artinya
setelah mengeksekusi today= new Date(), today akan mewakili
tanggal dan waktu sekarang.
Date-object menyediakan method yang bisa kita gunakan melalui
object today. Method-mothod ini contohnya adalah getHours(),
setHours(), getMinutes(), setMinutes(), getMonth(), setMonth()
dan seterusnya (lihat pada dokumentasi Netscapes JavaScript).

Perhatikan bahwa Date-object hanya mewakili tanggal dan waktu
tertentu dan bukan seperti jam yang berubah setiap detik secara
otomatis.
Untuk memperoleh tanggal dan waktu yang lain selain tanggal
sekarang, kita bisa menggunakan kode berikut ini:
today= new Date(1997, 0, 1, 17, 35, 23)
Ini akan membuat Date-object baru yang berisi tanggal 1 January

1997 pada jam 17:35 dan 23 detik. Jadi kita bisa menentukan tanggal
dan hari dengan format berikut:
Date(year, month, day, hours, minutes, seconds)
133
Perhatikan bahwa kita menggunakan angka 0 untuk January. Angka

1 untuk February dan seterusnya.
Sekarang kita akan membuat script yang mengeluarkan tanggal dan
waktu sekarang dengan hasil seperti ini:
Time: 10:8
Date: 1/24/1998
Baris kodenya adalah sebagai berikut:


</script>
Di sini kita gunakan method-method seperti getHours() untuk

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

dari 10 artinya kita mungkin akan meperoleh waktu dengan tampilan
seperti ini: 14:3 yang sebenarnya adalah 14:03. Kita selesaikan
masalah ini pada script berikutnya.
Sekarang kita akan membuat script yang menampilkan sebuah jam
yang benar-benar bekerja:
Kodenya adalah sebagai berikut:
<html>
<head>
<script Language="JavaScript">

</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 Dateobject 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()
136
menulis waktu dan tanggal pada kedua text-element ini dengan

format yang benar. Kita menggunkan dua string timeStr dan dateStr
untuk keperluan ini. Permasalahan menit yang kurang dari 10 kita
selesaikan pada script di atas melalui baris kode berikut:
timeStr+= ((minutes < 10) ? ":0" : ":") + minutes;
Di sini angka menit ditambahkan dengan string timeStr. Jika menit

kurang dari 10 kita harus menambah angka 0. Kode di atas
sebenarnya sama maksudnya dengan :
if (minutes < 10) timeStr+= ":0" + minutes

else timeStr+= ":" + minutes;
Array-object
Array merupakan suatu hal yang sangat penting diketahui. Misalkan
kita ingin menyimpan 100 nama yang berbeda. Bagaimana
melakukannya dengan JavaScript? Kita bisa saja mendefinisikan 100
variabel dan mengisinya dengan sederetan nama-nama. Cara ini
cukup rumit dan tidak efisien.
Array bisa dilihat sebagai banyak variabel yang disatukan. Kita bisa
mengaksesnya melalui satu nama dan penomoran. Misalnya array
kita berinama names. Maka kita dapat mengakses nama pertama
melalui names[0], nama kedua dengan names[1] dan seterusnya.
Setelah JavaScript 1.1 (Netscape Navigator 3.0) kita bisa
menggunakan Array-object. Kita membuat array baru dengan
perintah myArray = new Array(). Kita kemudian bisa mengisi
harganya dengan:
137
myArray[0]= 17;
myArray[1]= "Stefan";
myArray[2]= "Koch";
Array JavaScript sangat flexible. Kita tidak harus menentukan ukuran

array karena ukurannya akan ditentukan secara dinamis. Jika kita
tulis myArray[99]= "xyz" ukuran array akan menjadi 100 elemen
(array JavaScript hanya bisa bertambah bukan berkurang, jadi buat
array sekecil mungkin.). Tidak jadi masalah apakah kita menyimpan
angka, string atau object lain dalam array.
Mari kita beranjak melihat contoh dibawah ini. Keluaran dari yang
diinginkan adalah seperti:
first element
second element
third element
Baris kodenya adalah:

</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]
}
139
bisa kita gunakan untuk membentuk array dengan perintah:
myArray= new initArray(17, 3, 5);
Tentunya array ini tidak akan memiliki method yang ada pada
Array-object JavaScript 1.1.
6.6 FORM
Validasi input form
Form banyak sekali digunakan di Internet maupun intranet.
Masukan form biasanya dikirimkan lagi ke server atau via mail ke email account tertentu. Bagaimana kita bisa memastikan bahwa data
yang dimasukkan user valid atau tidak? Dengan bantuan JavaScript
form input dapat dengan mudah di-cek sebelum dikirimkan lewat
Internet. Pertama mari kita lihat contoh bagaimana input dari user divalidasi, lalu kita lihat bagaimana mengirimkan informasi melalui
Internet.
Mari kita buat script sederhana yang berupa halaman HTML yang
berisi dua text-element. User harus memasukkan namanya pada textelement pertama dan e-mail address-nya pada elemen kedua. Sebagai
contoh masukkan sembarang text pada input yang disediakan. Jika
input tidak valid maka akan muncul window peringatan yang
mengatakan bahwa input tidak valid. Berikut ini kira-kira tampilan
contoh yang akan kita buat.
140
Jika kita masukkan suatu text (misalnya Daniel) pada input-elemen

pertama lalu menekan tombol "Test Input", akan muncul window
popup yang memberitahu kita apakah input valid atau tidak.
Jika kita tidak memasukkan apapun pada text-element lalu menekan

tombol "Test Input", maka akan muncul window peringatan yang
menyatakan bahwa kita harus memasukkan sesuatu:
Pada text-element kedua, jika kita masukkan text yang tidak sesuai
dengan format e-mail (ada tanda @) maka text dianggap tidak valid:
141
Jika kita memasukkan input yang benar maka pesan valid akan
muncul
Bagaimana cara membuat halaman HTML yang demikian itu?

Berikut ini adalah baris kodenya:
<html>
<head>

</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.
143
Function test1(form) melakukan tes apakah string kosong atau tidak.

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

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

mengubah script kita agar mampu mengecek angka dan beberapa
simbol. Perhatikan contoh berikut ini:
Jika kita masukkan angka-angka dan simbol-simbol "/", "-", dan " ",
maka ketika kita tekan tombol check, akan keluar pesan OK.
Namun jika kita masukkan sembarang karakter di samping karakterkarakter di atas, maka akan keluar pesan error:
Berikut ini baris kode untuk mengimplementasikan contoh di atas.

<html>
<head>

</script>
</head>
<body>
<form>
Telephone:
<input type="text" name="telephone" value="">
146
<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:
147
<form method=post
action="mailto:your.address@goes.here"
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 eventhandler ini dalam tag <form> seperti ini:
function validate() {
// check if input ok
// ...
if (inputOK) return true

else return false;
}
...
<form ... onSubmit="return validate()">
148
...
Dengan kode itu, form tidak akan terkirim lewat Internet jika form
input masih salah.
Membuat focus form-elemen tertentu

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

script sebelumnya. Kita harus menentukan dengan lengkap nama
form - dalam hal ini first - dan nama form element - text1. Jika
hendak membuat focus pada element ini saat halaman di-load kita
bisa menambahkan pada properti onLoad di tag <body> seperti ini:
<body onLoad="setfocus()">
Lebih lanjut kita dapat melakukan hal sebagai berikut:

function setfocus() {
document.first.text1.focus();
document.first.text1.select();
}
149
yang akan mengeset focus dan juga men-select input.
6.8 Image-object
Image pada halaman web
Sekarang kita akan melihat Image-object yang tersedia dalam
JavaScript 1.1 (Netscape Navigator 3.0 ke atas). Dengan banutan
Image-object kita bisa mengganti gambar pada image pada suatu
halaman web, sehingga memungkinkan kita mambuat animasi,
misalnya.
Pertama mari kita lihat bagaimana image dalam halaman web dapat
diakses melalui JavaScript. Semua image diwakili melalui array.
Array ini disebut images yang merupakan properti dari documentobject. Setiap image dalam halaman web memiliki nomor. Image
pertama bernomor 0, image kedua bernomor 1 dan seterusnya. Jadi
kita bisa mengakses image pertama melalui document.images[0].
Setiap image dalam dokumen HTML dianggap sebagai sebuah
Image-object. Image-object tentunya memiliki properti yang dapat
diakses melalui JavaScript. Kita misalnya bisa berapa ukuran yang
dimiliki image dengan properti width dan height. Jadi
document.images[0].width akan memberi kita lebar (dalam pixel)
image pertama dalam halaman web yang kita miliki.
Jika kita memiliki banyak image dalam satu halaman akan sulit
untuk menomori seluruh image yang ada. Dengan memberikan
nama untuk setiap image akan jauh mempermudah hal ini. Jika kita
menyatakan image dengan tag berikut
<img src="img.gif" name="myImage" width=100
height=100>
150
kita akan bisa mengaksesnya melalui document.myImage atau

document.images["myImage"].
Me-loading image
Berikut ini kita akan mencoba mengganti isi (file gambar) sebuah
image pada web-page. Untuk ini kita akan menggunakan properti
src. Properti src mewakili alamat dari file gambar yang ditampilkan.
Dengan JavaScript 1.1 kita bisa mengisi alamat file gambar yang baru
ke image yang telah di-load pada web-page. Hasilnya adalah gambar
pada lokasi yang baru akan di-load. Gambar baru ini akan
menggantikan gambar lama. Mari kita lihat contoh berikut ini:
<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
151
telebih dahulu sebelum ditampilkan. Untuk ini kita harus membuat

Image-object tambahan. Lihat baris kode berikut ini:
hiddenImg= new Image();

hiddenImg.src= "img3.gif";
Baris pertama membuat sebuah Image-Object dengan nama

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

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

Dengan JavaScript kita bisa membuat efek yang bagus dengan
mengganti gambar sebagai reaksi dari event tertentu. Misalnya kita
bisa mengganti gambar saat mousecursor digerakkan di atas suatu
area. Coba ketikkan baris kode berikut ini:
152
<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
153
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>
154

</script>
156
<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
157
ditampilkan. Dengan argumen pertama "link1" pada pemanggilan

function preload() kita tentukan kedua preloaded image itu milik
Image-object yang mana.
Jika kita lihat pada bagian <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).
158
DAFTAR PUSTAKA
Anonymous, Javascrip Tutorial, http://www.javascriptsource.com,
diakses Januari 2006.
Anonymous, Pioneers On The Net, http://www.chick.net/wizards/
pioneers.html, diakses Januari 2006.
Budd, Andy. CSS Mastery: Advanced Web Standards Solutions,
Februari 2006.
Dave Taylor, Creating Cool Web Sites with HTML, XHTML, and CSS,
Wiley Publishing, Inc, 2004
Martin, Dodge, An Atlas of Cyberspaces- Historical Maps, http://
www.cybergeography.org/atlas/historical.html, diakses Januari
2006.
Shengili-Roberts, Keith.,Core Cascading Style Sheet, Prentice Hall,
New Jersey, 2000.
Tolle, Herman. Diktat Kuliah Internet & Disain Web. Teknik Elektro
Universitas Brawijaya. 2004.
Wibowo, Sugeng, Modul Pelatihan Dasar Disain Web. UPT Pusat
komputer universitas brawijaya, 2003.
159

Javascript For Beginner

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Javascript For Beginner

Diunggah oleh

Hak Cipta:

Format Tersedia

6

6.1 Pengenalan JavaScript

Diktat Kuliah Internet & Web Disain Herman Tolle - UB

Mencantumkan JavaScript pada halaman HTML

Contoh sederhana di atas kelihatan seperti halaman HTML normal.

Bagian di atas adalah contoh penggunaan JavaScript. Untuk melihat

Diktat Kuliah Internet & Web Disain Herman Tolle - UB

Sebenarnya script di atas tidaklah begitu berguna, namun bisa

Diktat Kuliah Internet & Web Disain Herman Tolle - UB

Tampilan pada non-JavaScript browser akan terlihat seperti ini:

Ini dokumen HTML normal

Tanpa HTML-comment tampilan pada non-JavaScript browser akan

Ini dokumen HTML normal

Harap diingat bahwa kita tidak bisa menyembunyikan baris kode

Diktat Kuliah Internet & Web Disain Herman Tolle - UB

Diktat Kuliah Internet & Web Disain Herman Tolle - UB

window yang dimaksud. Jadi script kita di atas menampilkan

mungkin membingungkan: pada perintah

document.write("Selamat datang pada homepage

document.write("Selamat datang pada homepage

Diktat Kuliah Internet & Web Disain Herman Tolle - UB

document.write("Selamat datang pada homepage

Hasil keluarannya akan seperti:

sebanyak tiga kali. Perhatikan baris kode, menuliskan kode sebanyak

Diktat Kuliah Internet & Web Disain Herman Tolle - UB

Pada script di atas kita definisikan sebuah function yang dilakukan

Perintah-perintah di dalam tanda {} merupakan milik function

Diktat Kuliah Internet & Web Disain Herman Tolle - UB

Tombol akan memanggil function calculation() jika di-click. Kita

6.2 DOKUMEN HTML

Diktat Kuliah Internet & Web Disain Herman Tolle - UB

Diktat Kuliah Internet & Web Disain Herman Tolle - UB

dengan tampilan sebagai berikut:

Gambar 6.1. Elemen-elemen dari sebuah Halaman Web

Diktat Kuliah Internet & Web Disain Herman Tolle - UB

Gambar 6.2. Hirarki Dokumen HTML

Untuk bisa memperoleh informasi tentang suatu object tertentu dan

Sekarang bagaimana kita bisa mengetahui isi dari text yang

Diktat Kuliah Internet & Web Disain Herman Tolle - UB

Untuk mengetahui secara lengkap properti dan method apa yang

Isinya akan disimpan dalam variabel name sehingga sekarang kita

Dengan cara seperti ini, kita dapat mengakses forms[0] dengan

kita dapat juga menuliskan

yang menjadikan pekerjaan jauh lebih mudah terutama untuk

Diktat Kuliah Internet & Web Disain Herman Tolle - UB

Sebagai contoh terakhir, ketikkan baris kode di bawah ini dan

// creates a popup window with the

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

Diktat Kuliah Internet & Web Disain Herman Tolle - UB

// this function checks the state of the checkbox

var myString= "The checkbox is ";

// is checkbox checked or not?

Diktat Kuliah Internet & Web Disain Herman Tolle - UB

document.write("The background color is: ");

document.write("The text on the second button is:

Diktat Kuliah Internet & Web Disain Herman Tolle - UB

Halaman bla.htm di-load kedalam window yang baru melalui

Diktat Kuliah Internet & Web Disain Herman Tolle - UB

Hasilnya akan terlihat seperti ini:

Ini halaman percobaan

Diktat Kuliah Internet & Web Disain Herman Tolle - UB

tidak boleh menggunakan spasi dalam string ini!

Berikut ini daftar properti yang dimiliki sebuah window: