Seri Tutorial - Java Script 1

Beri Otak Pada Hompej Anda

Udah nebak pasti akhirnya ngeliat ke sini juga. Dan memang itu pilihan yang tepa
t. Saya akan berikan tiga alasan kongkrit kenapa anda perlu belajar java script.
Pertama, dengan java script hompej anda jadi terlihat cerdas. Bisa melakukan res
pons yang tidak diduga oleh pengunjung. Kasarnya memberi otak pada hompej.
Kedua, dibanding jenis web program (program yang dipakai untuk situs) lainnya, j
ava script menurut saya adalah yang termudah. Hei, ini bukan berarti merendahkan
. Justru ini adalah keunggulan. Jangan anda memegang semboyan (seperti dosen say
a), "Kalau bisa dipersulit, mengapa tidak ?". Bagi saya, menembak lalat dengan m
eriam adalah perbuatan bodoh.
Terakhir, java script kini merupakan web program yang paling populer. Dengan mem
pelajari ini berarti anda akan masuk ke sebuah komunitas keren!
Nah mungkin kini anda penasaran, bagaimana sih memulai java script ? Tidak terla
lu `wah`, anda hanya perlu menyisipkan sedikit kode ke dalam file html dan jadil
ah. Berikut ini adalah contoh sederhana dari script java script. Masukkan ke dal
am file html anda.
<SCRIPT LANGUAGE="javascript">
document.write("<FONT COLOR='RED'>Cuman tulisan warna merah.</FONT>")
</SCRIPT>
Kalau anda jalankan file html anda, maka hasilnya cuman tulisan warna merah.
Script di atas sederhana dan mungkin anda dapat menebak maksud tiap perintah. Yu
p, setiap script harus dimulai dengan tag <SCRIPT LANGUAGE="javascript"> dan dit
utup dengan tag </SCRIPT>. Di antara kedua tag tersebut kita dapat memasukkan pe
rintah yang diinginkan.
Untuk script di atas, kita hanya menuliskan satu baris perintah, yaitu:
document.write("<FONT COLOR='RED'>Cuman tulisan warna merah.</FONT>")
Perintah di atas dapat kita artikan sebagai ambil "document" (document di sini a
dalah file html kita) kemudian tuliskan ("write") apa yang ada di dalam kurung.
Sebagai informasi bagi anda, dalam java script, "document" di atas disebut denga
n "object" dan "write" di atas disebut dengan "method" yang dilakukan terhadap o
bject tersebut. Ada banyak method yang dapat dilakukan dan akan kita bahas pada
tutorial-tutorial berikutnya.

Script kedua yang akan kita coba adalah menampilkan waktu seperti di bawah ini:
Hari ini 3-10-2006, jam: 4:21.22
Untuk menampilkan waktu seperti di atas kita dapat menggunakan script berikut:
<SCRIPT LANGUAGE="JavaScript">
//Script tentang waktu
Sekarang = new Date();
document.write("Hari ini " + Sekarang.getDate() + "-" + (Sekarang.getMonth()+1)+
"-" + Sekarang.getFullYear() + ", jam: " + Sekarang.getHours() + ":" + Sekarang
.getMinutes() + "." + Sekarang.getSeconds())
</SCRIPT>
Seperti script sebelumnya, script di atas dibuka dengan <SCRIPT LANGUAGE="JavaSc
ript"> dan ditutup dengan </SCRIPT>. Kemudian di baris kedua diperkenalkan tanda
"// " yang berarti bahwa apapun yang berada di sebelah kanan tanda tersebut aka
n diabaikan dan hanya dianggap sebagai komentar.
Kemudian baris berikutnya adalah perintah Sekarang = new Date(); Di sini kita me
mbuat object baru yang diberi nama "Sekarang". Obyek ini kita isi dengan waktu s
aat halaman ini di-load, yaitu menggunakan perintah new Date(). Kemudian ditutup
dengan tanda titik koma (;) untuk mengakhiri sebuah statemen.
Pada baris berikutnya kita menuliskan apa yang ada di dalam kurung ke halaman ht
ml, menggunakan document.write seperti biasa. Semua yang berada di antara tanda
petik ("), misalnya "Hari ini " atau ", jam: " akan ditampilkan apa adanya, dan
yang tidak diberi tanda petik akan diproses.
Di sini kita menemui beberapa hal baru, yaitu Sekarang.getDate(), juga Sekarang.
getMonth() sampai terakhir Sekarang.getSeconds(). Semua get...() tersebut adalah
"method" yang bekerja pada "object" yang bernama Sekarang, di mana getDate() ak
an akan memberikan nilai tanggal, getMonth() akan memberikan nilai bulan, dst.
Khusus untuk bulan, kita menggunakan perintah Sekarang.getMonth()+1 karena java
script selalu menghitung mulai dari 0. Sehingga bulan Januari akan berharga "0",
bulan Februari akan berharga "1", dst.

Seri Tutorial - Java Script 2

Event Handler, Penyusup yang Lihai
Event handler juga bagian dari java script. Tapi enggak seperti yang lain, event
handler nggak perlu dimulai dengan tag <SCRIPT LANGUAGE="javascript">. Dia meny
atu dengan kode HTML. Mungkin anda inget saat mempelajari tentang form. Di sana
sekilas kita mengenal tentang onClick saat pembahasan button. onClick ini adalah
salah satu event handler, dia adalah java script, tapi berhasil menyusup ke tag
HTML.
Sekarang saya akan menerangkan beberapa contoh event handler yang populer. Perta
ma adalah onMouseOver (perhatikan penggunaan huruf besar). Event handler onMouse
Over ini gunanya untuk mengatur apa yang akan terjadi saat mouse kita gerakkan k
e atasnya. Perhatikan contoh script berikut:
<A HREF="http://rahim.f2o.org" onMouseOver="window.status='Ke Menu Utama'; retur
n true">Klik di sini</A>
Perintah di atas akan memberikan hasil sebagai berikut:
Gerakkan mouse ke link di atas, dan perhatikan apa yang terjadi pada window stat
us (tulisan di bagian paling kiri bawah. Nah, anda lihat akan tertulis "Ke Menu
Utama". Mungkin tanpa perlu diterangkan anda telah faham, tapi baiklah saya jela
skan sedikit. onMouseOver di atas adalah event handler pada link. Event handler
ini mengubah window status menjadi seperti yang tertulis di antara tanda quote (
') saat mouse bergerak ke atas link. Di sini window adalah "object" dan status a
dalah "property" (pada tutorial sebelumnya kita telah mengenal istilah "object"
dan "method"). Kemudian ditutup dengan titik koma (;)
Berikutnya kita menuliskan return true. Script inilah yang menyebabkan window st
atus berubah saat mouse bergerak ke atas link. Tanpa adanya script tersebut efek
yang kita inginkan (berubahnya window status) muncul terlambat, setelah mouse p
ergi dari link. Saat mouse berada di atas link window status tetap seperti defau
lt, yaitu menampilkan alamat link. Reload halaman ini, dan arahkan mouse anda ke
link berikut, untuk melihat efek script yang sama, namun tanpa menggunakan retu
rn true.
Dengan menggunakan onMouseOver kita juga dapat mengubah property lain. Misalnya
kita akan mengubah warna latar dokumen, yaitu dengan menggunakan document.bgColo
r . Berikut ini contoh pemakaiannya.
<A HREF="http://rahim.f2o.org" onMouseOver="document.bgColor= '#ffcc99'; return
true">Klik di sini</A>
Script di atas akan menghasilkan link berikut:
Klik di sini
Untuk mengembalikan warna latar seperti semula reload halaman ini.
Sekarang mungkin anda tertarik untuk menggabung dua efek di atas, perubahan wind
ow.status dan document.bgColor - hmm tidak terlalu sulit. Kita cukup memisahkan
kedua efek tersebut dengan koma (,) seperti script berikut. Perintah onMouseOver
yang kedua berada di antara tanda petik (") untuk membuat efeknya terjadi secar
a simultan.
Klik di sini
Link di atas dibuat menggunakan script berikut.
<A HREF="http://rahim.f2o.org" onMouseOver="document.bgColor='#ffcc99', onMouseO
ver=window.status='Ke Menu Utama'; return true">Klik di sini</A>
Kita juga dapat menampilkan window dengan tulisan yang kita inginkan menggunakan
alert(). Script di bawah dan hasilnya saya rasa dapat anda mengerti dengan muda
h.
<A HREF="http://rahim.f2o.org" onMouseOver="alert('jrengggg ... kaget dong :D');
return true">Klik di sini</A>
Hasilnya adalah sebagai berikut. Gerakkan mouse anda ke atas link.
Klik di sini
Saya rasa sekarang anda sudah cukup faham dasar dari penggunaan event handler. O
leh karena itu kini saya akan memperkenalkan beberapa event handler lain yang po
puler. Yang pertama adalah onClick seperti telah kita bicarakan di atas. onClick
akan bekerja saat anda mengklik link. Perhatikan script berikut:
<A HREF="http://rahim.f2o.org" onClick="alert('jrengggg ... nggak kaget lagi ya
:D'); return true">Klik di sini</A>
Hasilnya adalah seperti di bawah. Ayo, jangan ragu meng-klik.
Klik di sini
Berikutnya adalah event handler onFocus. Event handler ini bekerja saat anda ter
fokus pada sebuah item. Wah, bingung deh, lihat aja contoh ini. Eits, anda benar
-benar masih inget tentang form kan ? Jika tidak pelajari dulu di sini.

<FORM>
<INPUT TYPE="text" SIZE="30" onFocus="window.status='Anda sekarang siap mengisi
kotak';">
</FORM>

Ini hasilnya. Coba letakkan kursor dalam kotak teks dan perhatikan window status
di bawah.
Sekarang kita belajar tentang onBlur. onBlur adalah kebalikan dari onFocus. Dia
bekerja justru saat anda nggak fokus :D. Lihat script dan hasilnya di bawah.
<FORM>
<INPUT TYPE="text" SIZE="40" VALUE="Tulis nama anda, kemudian pindahkan kursor d
ari kotak ini" onBlur="alert('Anda telah mengedit isi kotak, bener nih nggak nye
sel ?');">
</FORM>

Ada lagi event handler yang perintahnya onChange. Mirip dengan onBlur, hanya dia
bekerja apabila ada perubahan. Jika anda tidak mengubah isi kotak, dia tidak ak
an bekerja. Lihat script dan hasil berikut ini.
<FORM>
<INPUT TYPE="text" SIZE="40" VALUE="Tulis nama anda, kemudian pindahkan kursor d
ari kotak ini" onChange="alert('Anda telah mengedit isi kotak, bener nih nggak n
yesel ?');">
</FORM>

Berikutnya adalah onSelect. Event handler ini bekerja saat anda memilih (memblok
) isi kotak. Lebih baik perhatikan script dan hasilnya berikut ini.
<FORM>
<INPUT TYPE="text" SIZE="40" VALUE="Tulis nama anda, kemudian pindahkan kursor d
ari kotak ini" onSelect="alert('Hehehe, gagal deh ngeblok');">
</FORM>
Mmm masih ada beberapa nih. Anda bisa menggunakan onSubmit, yang bekerja saat an
da mengklik tombol submit. Lihat contoh ini.
<FORM onSubmit="alert('Anda yakin mau mengirim data ?')";>
<INPUT TYPE="submit">
</FORM>

Dan yang terakhir yang akan dibahas di sini - fiuh - adalah onLoad dan onUnLoad.
Kedua perintah ini berada dalam tag <BODY> di mana mereka akan memanggil sesuat
u saat halaman tersebut dipanggil (untuk onLoad) atau saat halaman tersebut ditu
tup (untuk onUnLoad). Untuk mencobanya ... hmmm ... bagusnya anda belajar fungsi
dulu deh. Jadi kita pending dulu ya.

Seri Tutorial - Java Script 3

Variabel dan Fungsi, Tapi Bukan Matematik Lho
Judulnya emang bau matematik banget. Tapi jangan takut, kita di sini nggak sedan
g belajar matematik ama keluarganya yang suka bikin mbulet. Kita langsung masuk
ke scriptnya aja ya, biar lebih gampang ngertinya.
<SCRIPT LANGUAGE="javascript">
/*
Script ini menanyakan kepada pengunjung namanya
kemudian menampilkan sapaan kepada pengunjung tersebut
*/
var pengunjung = prompt ("Tulis nama anda di bawah","Yup, di sini");
document.write("Hai " + pengunjung + ". Gimana kabarnya ?");
</SCRIPT>
Tanda /* dan */ berfungsi memberi komentar. Berbeda dengan tanda // yang akan me
ngabaikan tulisan di sebelah kanannya (dalam satu baris), di sini semua tulisan
yang berada di antara tanda /* dan */ akan diabaikan, walaupun tidak berada pada
baris yang sama.
var pengunjung gunanya mendefinisikan variabel yang diberi nama pengunjung. Vari
abel pengunjung ini nantinya akan kita isi nilainya dengan perintah prompt. Nama
variabel harus terdiri dari satu kata tanpa spasi, di mana huruf besar dan huru
f kecil dibedakan.
prompt ("Tulis nama anda di bawah","Yup, di sini") berguna untuk memunculkan kot
ak pertanyaan saat halaman ini dipanggil (diload). Kata yang berada di antara ta
nda petik, yang pertama ("Tulis nama anda di bawah") akan dimunculkan di atas ko
tak teks yang harus diisi, sedang yang kedua ("Yup, di sini") akan dimunculkan d
i dalam kotak teks.
document.write berfungsi untuk menuliskan sesuatu di halaman ini. Di sini salah
satu yang akan dituliskan adalah variabel pengunjung yang nilainya sesuai dengan
apa yang kita isi saat masuk ke halaman ini.
Semua perintah kemudian ditutup dengan tanda titik koma (;).
Saya kasih lagi satu contoh penggunaan variabel yang bener-bener untuk pengerjaa
n matematik. Lihat script berikut:
<SCRIPT LANGUAGE="javascript">
var jumlah = 12 + 24
alert("12 + 24 sama dengan " + jumlah)
var x = 10
alert("sepuluh itu " + x)
var y = "12"
var z = "24"
alert("12 gabung 24 menjadi " + y + z)
</SCRIPT>
Pada script di atas kita mendefinisikan beberapa jenis variabel. Yang pertama va
riabel "jumlah" dan variabel "x" yang diisi dengan numerik (angka). Kemudian var
iabel "y" dan variabel "z" diisi dengan string (karakter). Nah di sini akan terl
ihat bahwa penjumlahan "+" pada angka akan benar-benar menjumlahkannya, tetapi p
ada karakter berarti menggabungkan. Nggak susah kan. Juga perlu diperhatikan bah
wa pada fungsi alert() setiap tulisan (karakter) selalu diapit oleh tanda petik
("), sedang variabel tidak perlu.
Sekarang kita ngomongin fungsi. Fungsi adalah sekelompok (satu juga boleh) perin
tah yang dikumpulin terus dikasih nama. :D Jadi sewaktu-waktu diperlukan tinggal
dipanggil nama fungsinya, dan seluruh perintah yang dirangkum dalam fungsi itu
akan dijalankan. Gampangnya coba kita lihat contoh fungsi di bawah.
<SCRIPT LANGUAGE="javascript">
<!-- Hide from browsers that do not understand Javascript
function tanggal()
{
var d = new Date();
var y = d.getFullYear();
var m = d.getMonth() + 1;
var d = d.getDate();
var t = m + '/' + d + '/' + y + ' ';
defaultStatus = "Anda datang pada tanggal " + t + ".";
}
// end hiding -->
</SCRIPT>
Dan karena kita sekarang sudah punya fungsi, maka kita coba jalankan menggunakan
event handler onLoad pada tag <body>, dengan perintah berbentuk:
<body onLoad="tanggal()">
Nah anda bisa melihat efeknya langsung, karena begitu anda membuka halaman ini,
maka fungsi tanggal() ini langsung dipanggil dengan menggunakan event handler on
Load pada tag <body> di atas. Loh trus, fungsi ini kerjanya ngapain ? OK, kita b
ahas deh. Satu-persatu, baris demi baris ... jangan berebutan yee.
Pertama
<!-- Hide from browsers that do not understand Javascript
dan - lihat baris terakhir sebelum script ditutup.
// end hiding -->
Tanda <!-- dan --> gunanya untuk mengantisipasi kemungkinan adanya browser yang
nggak mensupport pemakaian java script. Artinya java script-nya nggak bisa jalan
dibrowser itu. Sebenarnya sih kalau ngeliat statistik, hampir 100 % pengguna in
ternet sekarang memakai browser yang support java script, jadi sebenarnya nggak
perlu khawatir masalah itu. Tapi ... in case.
btw kelihatannya belum saya jelaskan. Java script ini termasuk client side scrip
t, bukan server side script. Hahaha ... mudah-mudahan anda pernah mendengar isti
lah itu. Gampangnya gini, kalau client side script, berarti jalan enggaknya scri
pt ini tergantung client, atau tergantung browser (misalnya Internet Explorer, N
etscape, dll) yang dipakai pengguna. Apakah browsernya support atau nggak. Sedan
g server side script, tergantung pada servernya (mmm ... tempat anda naro` halam
an hompej). Ada host server yang support script tertentu ada yang nggak. Contoh
server side script ini misalnya php, asp, cgi. Untuk jenis script ini (server si
de) kita nggak perlu pusing memikirkan browser yang dipakai pengguna, karena sam
a sekali nggak ada masalah. Tapi kita bakalan pusing nyari host server yang men-
support script-script tersebut, apalagi yang gratisan. Geocities dan yang semaca
mnya udah jelas nggak support. Tapi kita lupakan aja hal ini, sekarang pokoknya
kita lagi make java script, sehingga kita bisa naro` hompej kita di mana saja, t
ermasuk di geocities. Asyik kan nggak usah pusing nyari host server khusus.
Kembali ke perintah di atas. Tanda <!-- dan --> akan menyebabkan browser yang ng
gak support java script mengabaikan semua perintah yang berada di antaranya. Sed
ang browser yang support java script nggak mempermasalahkannya. Untuk perintah <
!-- , kita dapat menulis apapun di sebelah kanannya dan hanya akan dianggap seba
gai komentar. Sedang perintah --> harus didahului dengan perintah // agar dia di
anggap sebagai komentar oleh browser yang support java script. mmm ... singkatny
a tulis <!-- setelah tag <script> dan tulis --> sebelum tag </script> dan anda b
isa tidur dengan nyenyak. ;)
Kedua
function tanggal()
Di sini kita mendefinisikan sebuah fungsi, dan memberinya nama tanggal(). Anda p
erlu memperhatikan bahwa nama fungsi di atas diakhiri dengan tanda () . Ikuti sa
ja dulu, setiap anda membuat fungsi. :)
Fungsi berawal dengan tanda { (bisa anda lihat pada baris berikutnya) dan ditutu
p dengan tanda } (lihat agak ke bawah).
Ketiga
var d = new Date();
var y = d.getFullYear();
var m = d.getMonth() + 1;
var d = d.getDate();
var t = m + '/' + d + '/' + y + ' ';
Di sini kita hanya mendefinisikan beberapa variabel, berturut-turut variabel d,
kemudian variabel y, m, kemudian variabel d kita beri harga baru, dan terakhir v
ariabel t. Perintah-perintah di sebelah kanan tiap variabel mestinya telah anda
fahami di luar kepala. Iya kan ? ;)
Terakhir
defaultStatus = "Anda datang pada tanggal " + t + ".";
Di sini kita mengubah defaultStatus menjadi berisi "Anda datang pada ...". Defau
lt status tuh yang mana sih ?!? Nah lihat di bagian bawah kiri browser anda ...
keliatan kan tulisan "Anda datang pada ...". Eits, jangan protes dulu. defaultSt
atus ini sama dengan window.status, hanya window.status hanya bisa anda gunakan
pada event handler seperti pada tutorial sebelumnya. Untuk kasus sekarang anda h
anya dapat menggunakan defaultStatus.
Sekarang pertanyaan terakhir ... di mana sebaiknya saya tuliskan script ini ? An
da dapat meletakannya di mana saja. Hanya jika anda letakkan di antara tag <head
> dan </head> atau di atas tag <body onLoad=...>, maka script ini akan dijalanka
n sebelum halaman ini ditampilkan. Sedang jika anda letakkan setelah tag <body o
nLoad=...>, maka script ini akan dijalankan setelah halaman ditampilkan. It's up
to you, tapi jangan takut it won't bite. :D
OK, sebenarnya penjelasan tentang fungsi dan variabel sudah cukup dengan keteran
gan di atas. Tapi saya kira saya masih berhutang dari tutorial sebelumnya, yaitu
tentang event handler yang belum terbahas. Event handler onLoad sudah dibahas d
i atas. Sekarang saya akan tampilkan event handler onMouseOut yaitu yang akan be
kerja saat mouse meninggalkan link. Perhatikan link berikut, gerakkan mouse anda
ke atas link kemudian tinggalkan link. Perhatikan window status di bawah saat a
nda menggerakkan mouse anda ke atas link, dan saat anda meninggalkan link akan m
uncul peringatan.
Ini link
Link di atas dibuat dengan menggunakan script berikut. Enggak ada yang baru kecu
ali tambahan event handler onMouseOut.
<A HREF="http://rahim.f2o.org" onMouseOver="window.status='Oh, jangan deket-deke
t..'; return true" onMouseOut="alert('Nah gitu dong'); return true">Ini link </A
>
Terakhir event handler onUnLoad. Event handler ini akan bekerja saat anda mening
galkan halaman ini. Nanti kalau anda menutup halaman ini atau berpindah ke halam
an lain, anda akan mendapatkan peringatan, karena pada tag <body> saya tuliskan
event handler seperti di bawah ini.
<BODY onUnload="alert('btw udah ngisi guestbook belum ?')">
Seri Tutorial - Java Script 4
Teori yang Menyebalkan, eh ?
Habis belajar matematik, terus belajar teoritis. Nyebelin banget nggak sih ? :p
Tapi jangan skeptis dulu deh, yang jelas selain perlu dan bermanfaat, apa yang a
kan kita bahas sekarang juga cukup menarik kok. Liat aja kalau nggak percaya.
Sekarang kita akan ngomongin tentang property dalam java script .. gubraks :p~ .
. apa pula nih. Dalam tutorial sebelumnya kita tahu ada object dan ada method ya
ng bekerja pada object itu. Juga kita tahu ada object dan ada property-nya. Jadi
kita tahu ada kode object.property dan ada juga object.method() ... method sela
lu menggunakan tanda (). Nah, sekarang saya akan memperkenalkan beberapa object
dan property-nya.
Object pertama adalah navigator. Perhatikan script di bawah yang menunjukkan beb
erapa property yang dimiliki object ini.
<SCRIPT LANGUAGE="javascript">
var an = navigator.appName;
var av = navigator.appVersion;
var acn = navigator.appCodeName;
var ua = navigator.userAgent;
document.write("Anda menggunakan browser <B>" +an+ "</B>, versi " +av+ ". Kode n
amanya " +acn+ ", dan header yang dikirim " +ua+ "." ); </SCRIPT>
Hasilnya adalah sebagai berikut.
Anda menggunakan browser Microsoft Internet Explorer, versi 4.0 (compatible; MSI
E 6.0; Windows NT 5.1; SV1). Kode namanya Mozilla, dan header yang dikirim Mozil
la/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1).
Anda dapat melihat di atas bahwa di sini property navigator.appName akan memberi
kan hasil Microsoft Internet Explorer (nama browser), navigator.appVersion membe
rikan hasil 4.0 (compatible; MSIE 6.0; Windows NT 5.0; YComp 5.0.0.0) yaitu vers
i browser yang dipakai dan platformnya. Kemudian navigator.appCodeName memberika
n hasil Mozilla yaitu kode name yang diberikan untuk browser. Dan terakhir navig
ator.userAgent memberikan hasil Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.
0; YComp 5.0.0.0) yaitu http header yang dikirim browser.
Ah saya sih cuman tertarik pada nama dan versi browser, lainnya tidak. Minimal u
ntuk saat ini. :D
Berikutnya adalah property yang dimiliki oleh document yaitu seperti pada script
berikut:
<SCRIPT LANGUAGE="javascript">
var bgc = document.bgColor;
var fgc = document.fgColor;
var lc = document.linkColor;
var al = document.alinkColor;
var vlc = document.vlinkColor;
var url = document.location;
var ref = document.referrer;
var t = document.title;
var lm = document.lastModified;
document.write("Warna latar (background color) halaman ini <B>" +bgc+ "</B>.")
document.write("<BR>Warna teksnya (mmm foreground color) <B>" +fgc+ "</B>.")
document.write("<BR>Warna link adalah <B>" +lc+ "</B>.")
document.write("<BR>Kalau warna link yang aktif <B>" +al+ "</B>.")
document.write("<BR>Dan warna link yang telah dikunjungi <B>" +vlc+ "</B>.")
document.write("<BR>Alamat URL halaman ini <B>" +url+ "</B>.")
document.write("<BR>Halaman yang anda lihat sebelum melihat halaman ini <B>" +re
f+ "</B>.")
document.write("<BR>Judul halaman ini (title lah kalau nggak ngerti judul) <B>"
+t+ "</B>.")
document.write("<BR>Dokumen ini terakhir diedit: <B>" +lm+ "</B>.")
</SCRIPT>
Script di atas akan memberikan hasil berikut:
Warna latar (background color) halaman ini #ffffff.
Warna teksnya (mmm foreground color) #000000.
Warna link adalah #0000ff.
Kalau warna link yang aktif #0000ff.
Dan warna link yang telah dikunjungi #800080.
Alamat URL halaman ini file:///D:/KULIAH/My%20Document/internet/malem%20minggu/t
utorial%20hompage/rahim.f2o.org/java/java_4.html.
Halaman yang anda lihat sebelum melihat halaman ini .
Judul halaman ini (title lah kalau nggak ngerti judul) Tutorial - Java Script.
Dokumen ini terakhir diedit: 10/01/2006 01:37:22.
Saya kira hasil script di atas sudah cukup menjelaskan tentang kegunaan tiap pro
perty dari document sehingga nggak perlu dijelasin lagi kan ? Mmm mungkin sediki
t penjelasan. Tentang warna, hasilnya akan ditampilkan dalam bentuk kode heksade
simal. Sekarang kita berlanjut ke property-nya history. Lihat script di bawah in
i.
<SCRIPT LANGUAGE="javascript">
var h = history.length;
document.write("<b>Anda telah mengunjungi " +h+ " halaman sebelum melihat ini.</
b>")
</SCRIPT>
Dan hasilnya adalah seperti di bawah. btw dengan memanfaatkan object history ini
kita bisa membuat link "back" dan "forward" .. mungkin nanti akan kita pelajari
.
Anda telah mengunjungi 4 halaman sebelum melihat ini.
Sekarang kita akan membicarakan property yang dimiliki object location seperti d
itampilkan pada script di bawah ini.
<SCRIPT LANGUAGE="javascript">
var hst = location.host
document.write("Lokasi file ini di <B>" + hst + "<B>. " )
var hstn = location.hostname
document.write("Lokasi file ini di <B>" + hstn + "</B>." )
</SCRIPT>
Lokasi file ini di . Lokasi file ini di .
Pada script di atas, location.host akan memberikan hasil berupa URL beserta port
-nya, sedang location.hostname hanya memberi hasil berupa URL. Terkadang keduany
a memberikan hasil yang sama jika tidak ada port yang digunakan (null).

Seri Tutorial - Java Script 5

Mbuka Jendela Baru Yuk
Sekarang kita akan belajar tentang cara membuka jendela baru. Masih ingat kan ik
lan-iklan pop up yang suka muncul kalau kita mbuka situs-situs tertentu. Menyeba
lkan bukan ? :D Mangkanya saya sarankan anda jangan melakukannya. Kalaupun sekar
ang saya memunculkan pop up, itu hanya sekedar contoh.
Berikut ini adalah script untuk memunculkan window baru.
<SCRIPT LANGUAGE="javascript">
window.open('contoh_java_5a.html', 'latihan', config='height=300,width=300')
</SCRIPT>
Dengan bentuk script seperti itu, otomatis saat halaman ini diload, akan muncul
pop up seperti yang telah anda lihat. Anda juga dapat memunculkan window baru sa
at menggunakan link, seperti pada contoh di bawah ini. Pada contoh ini kita meng
gunakan event handler onClick.
<A HREF="javascript:void(0)" onClick="window.open('contoh_java_5a.html', 'latiha
n', config='height=300,width=300')">Klik ini kalau mau pop up-nya keluar lagi :D
</A>
Klik ini kalau mau pop up-nya keluar lagi :D
(Di sini saya memanggil "javascript:void(0)", yang artinya sama saja dengan tida
k memanggil apa-apa)
Sekarang kita bahas satu-persatu perintah java script di atas.
Perintah window.open() berguna untuk membuka window baru. Anda sudah melihat con
tohnya tadi. Sedang atribut (atau apapun namanya) yang berada dalam kurung terdi
ri dari:
('alamat url', 'nama window yang baru dibuka', config='parameter')
Jadi script kita di atas memanggil file "contoh_java_5a.html" dan memberi nama w
indow baru tersebut dengan nama "latihan". mmm ... kita bisa memberi nama apapun
, persis dengan memberi nama hewan kesayangan kita. Tentu saat ingin memanggil,
kita harus memanggilnya dengan nama yang sesuai.
Sedang parameter yang dikonfigurasi bisa terdiri dari tinggi (height) dan lebar
(width) window yang akan dibuka. Di atas kita menentukan tinggi 300 pixel dan le
bar juga 300 pixel. Ada beberapa parameter lain yang dapat diatur, antara lain:
toolbar="yes" atau "no", berguna untuk menentukan ada tidaknya toolbar (menu di
atas, yang isinya BACK, FORWARD, STOP, RELOAD, dll).
menubar="yes" atau "no", berguna untuk menentukan ada tidaknya menubar (menu di
atas juga, yang isinya FILE, EDIT, VIEW, GO, dll).
scrollbars="yes" atau "no", menentukan ada tidaknya scrollbars. Scrollbars tuh y
ang bisa digeret untuk ngeliat bagian bawah atau atas dokumen, kayak di sebelah
kanan ini. -->
resizable="yes" atau "no", untuk menentukan apakah window yang dibuat bisa diuba
h ukurannya atau tidak, dengan cara menggeret pinggirannya.
location="yes" atau "no", untuk menentukan ada tidaknya location bar di window y
ang baru dibuka. Location bar tuh ... tempat kita nulis alamat url di atas.
directories="yes" atau "no", menentukan ada tidaknya directory bar. Directory ad
a di juga yang isinya bookmark, dll.
status="yes" atau "no", untuk menentukan ada tidaknya status bar di bawah, pada
window yang baru dibuat.
Udah. Sekarang kita memperhatikan isi window kecil yang kita buka. Di sana saya
menuliskan perintah ini.
<A HREF="java_1.php" target="main">Klik ini</a> untuk membuka file tutorial pert
ama di window besar.
Pada kode di atas, "main" adalah nama window besar, yup halaman yang sekarang an
da baca (asal saja ini halaman yang memang dari awal anda buka). "main" ini adal
ah default yang tidak perlu anda definisikan dahulu. Jika ingin link yang diklik
ditampilkan di window kecil yang baru dibuka, gunakan target="nama_window", unt
uk kasus kita namanya "latihan", sehingga perintahnya menjadi target="latihan".
Selain itu, saya juga menambahkan link untuk menutup window, dengan menggunakan
tag berikut:
Dan <A HREF="" onClick="self.close()">link ini</a> untuk menutup window kecil in
i.
Di sini self berarti window itu sendiri dan kita menggunakan method "close()" un
tuk menutupnya.
Sekarang saya akan memberi contoh membuka window baru, di mana isinya kita defin
isikan dengan menggunakan java script. Perhatikan script berikut ini.
<SCRIPT LANGUAGE="JavaScript">
function bukawindow()
{
var WindowBaru=window.open("", "baru", "height=300,width=300");
WindowBaru.document.write("<HTML>")
WindowBaru.document.write("<TITLE>Window Baru Nech</TITLE>")
WindowBaru.document.write("<BODY BGCOLOR='00ffff'>")
WindowBaru.document.write("<CENTER>")
WindowBaru.document.write("<font size=+1>Window Baru Nech</font><P>")
WindowBaru.document.write("<a href='java_1.php' target='main'>Buka tutorial pert
ama di window utama</a><p>")
WindowBaru.document.write("<P><HR WIDTH='60%'><P>")
WindowBaru.document.write("<a href='' onClick='self.close()'>Tutup window ini</a
><p>")

WindowBaru.document.write("</CENTER>")
WindowBaru.document.write("</HTML>")
}
</SCRIPT>
Fungsi di atas saya aktifkan dengan link ini. Link tersebut dibuat dengan menggu
nakan event handler onClick="bukawindow()". Dan di sekali lagi saya memanfaatkan
"javascript:void(0)" seperti di atas, agar anda tidak pergi ke mana-mana.
Hal baru pada script di atas hanyalah penggunaan perintah WindowBaru.document.wr
ite(".....") yang berfungsi untuk menuliskan sesuatu di dalam object "WindowBaru
". "WindowBaru" sendiri adalah variabel yang sebelumnya telah didefinisikan deng
an perintah "window.open()", yang artinya "WindowBaru" adalah window yang akan k
ita buka.
Sedang isi di dalam kurung, pada perintah "WindowBaru.document.write(".....")" a
dalah kode HTML yang ingin kita tampilkan pada window baru.

Seri Tutorial - Java Script 6

Belajar If - Else, Masalah Klasik
Mudah-mudahan anda tidak bosen belajar if - else. Kalau anda pernah mempelajari
pemrograman lain, mestinya anda akan dengan cepat memahami bahasan ini. Saya ter
angkan sekilas tentang penggunaan if. Secara sederhana dapat kita gambarkan seba
gai berikut.
if (sesuatu)
{
... blok if ...
}
else
{
... blok else ...
}
Dalam bagan di atas, mula-mula "sesuatu" itu akan diperiksa. Jika benar, maka bl
ok if akan dijalankan. Namun jika "sesuatu" ini bernilai salah, maka blok else y
ang akan dijalankan. Perhatikan contoh berikut ini.
<SCRIPT LANGUAGE="javascript">
if (confirm("Anda benar-benar mau membaca tutorial enam ?") )
{
alert("Bagus, silakan masuk");
}
else
{
alert("Berarti anda tetap di sini.");
history.go(-1);
}
</SCRIPT>
Di dalam perintah "if ()" saya menuliskan fungsi " confirm()". Fungsi confirm()
ini mirip dengan alert(), hanya bedanya pada fungsi confirm() akan muncul dua pi
lihan "OK" atau "Cancel". Jika kita memilih OK, maka fungsi confirm() ini akan m
emberikan nilai benar, dan sebaliknya jika kita memilih Cancel, maka nilai salah
akan diberikan.
Jadi pada saat kita memilih "OK", blok if akan dijalankan, berupa perintah alert
("Bagus, silakan masuk"); , dan pada saat kita memilih "Cancel", blok else akan
dijalankan. Di dalam blok else ini ada dua perintah. Yang pertama adalah fungsi
alert() seperti biasa akan menampilkan peringatan, sedang yang kedua adalah peri
ntah history.go(-1). History adalah catatan halaman yang anda lihat. Dan method
"go(-1)" akan menyuruh anda untuk mundur satu langkah, berarti kembali ke halama
n asal anda - sebelum anda mengklik tutorial keenam. Perintah ini juga berguna u
ntuk membuat tombol "back".
Sekarang akan saya sajikan penggunaan if - else untuk masalah lain. Perhatikan s
cript di bawah ini.
<SCRIPT LANGUAGE="JavaScript">
function tanya()
{
var jawab=" "
var jawab=prompt("Anda senang bikin hompej ?")
var JAWAB = jawab.toUpperCase()
var tampil="Jawab dong, ya/yup atau tidak/nggak"
if ( JAWAB == "YA" || JAWAB == "YUP")
{
var tampil="Sama dong, saya juga :D"
}
if(JAWAB == "TIDAK" || JAWAB == "NGGAK")
{
var tampil="Iya euy, bikin suntuk tuh (_ _)Zz.."
}
alert(tampil)
}
</SCRIPT>
<b>Hobi</b>
<FORM>
<INPUT TYPE="button" VALUE="polling" onClick="tanya()">
</FORM>
Hasil script di atas bisa anda lihat di sini.
Hobi
Script di atas secara struktur sama dengan contoh pertama. Jika pengunjung menja
wab "ya" maka blok if pertama akan dijalankan. Sedang jika pengunjung menjawab "
tidak", blok if yang kedualah yang akan dijalankan. Argumen logika untuk if dapa
t menggunakan simbol-simbol berikut.
|| untuk logika "atau" (salah satu kondisi harus dipenuhi).
&& untuk logika "dan" (semua kondisi harus dipenuhi).
== simbol untuk kesamaan.
!= simbol untuk ketidaksamaan.
Jadi pada script di atas, blok if pertama dijalankan jika pengunjung menjawab "y
a" atau "yup", dan blok if kedua dijalankan jika pengunjung menjawab "tidak" ata
u "nggak". Di sini kita memperbolehkan pengunjung mengisi dengan huruf kecil mau
pun huruf besar juga kombinasinya, walaupun javascript sebenarnya membedakan hur
uf kecil dengan huruf besar. Hal ini disebabkan kita menggunakan perintah toUppe
rCase(), yang akan mengubah semua yang ditulis pengunjung menjadi huruf besar.
Penggunaan if dapat digantikan dengan "switch". Untuk menjalankan hal yang sama
seperti di atas, kita dapat menggunakan script seperti di bawah ini.
<SCRIPT LANGUAGE="JavaScript">
function tanya()
{
var jawab=" "
var jawab=prompt("Anda senang bikin hompej ?")
var JAWAB = jawab.toUpperCase()
switch(JAWAB)
{
case "YA" :
var tampil="Sama dong, saya juga :D"
break;
case "YUP" :
var tampil="Sama dong, saya juga :D"
break;
case "TIDAK" :
var tampil="Iya euy, bikin suntuk tuh (_ _)Zz.."
break;
case "NGGAK" :
var tampil="Iya euy, bikin suntuk tuh (_ _)Zz.."
break;
default :
var tampil="Jawab dong, ya/yup atau tidak/nggak"
break;
}
alert(tampil)
}
</SCRIPT>
<b>Hobi</b>
<FORM>
<INPUT TYPE="button" VALUE="polling" onClick="tanya()">
</FORM>
Anda dapat menjalankan sendiri script di atas. Ingat, kita menggunakan "break;"
untuk setiap case.

Seri Tutorial - Java Script 7

Loop For dan While, Standar lah
Sekarang kita akan mempelajari perintah untuk melakukan iterasi (loop), atau mel
akukan pengulangan. Ya, ibaratnya anda nggak lulus ujian tentu harus mengulang s
ampai lulus. Begitu pula dengan iterasi. Ada dua perintah yang umum dilakukan, y
aitu menggunakan "for" dan menggunakan "while". Kita mulai dengan for pada scrip
t berikut ini.
<b>Kita cuman menghitung dari 1 sampai 7:</b><br>
<script language="JavaScript">
for (i=1; i<=7; i=i+1)
{
document.write("Ini angka " + i + "<BR>");
}
</SCRIPT>
Udah.
Script di atas hanya akan memberikan hasil seperti di bawah ini.
Kita cuman menghitung dari 1 sampai 7:
Ini angka 1
Ini angka 2
Ini angka 3
Ini angka 4
Ini angka 5
Ini angka 6
Ini angka 7
Udah.
Di sini kita dapat melihat bahwa perintah for mempunyai tiga argumen, yang perta
ma "i=1" dan berikutnya "i<=7" (i kurang dari atau sama dengan 7) menandakan bah
wa blok for akan dijalankan mulai dari nilai i=1 sampai nilai i menjadi i<=7. Se
dang argumen ketiga "i=i+1" akan menyebabkan harga "i" terus bertambah sebesar "
1" setiap menjalankan iterasi sekali. Karena i terus bertambah, suatu saat kondi
si "i<=7" akan tidak terpenuhi (pada saat i=8) dan iterasi akan berhenti.
Sedangkan saya akan memberikan contoh penggunaan while dalam script berikut ini:
<SCRIPT LANGUAGE="JavaScript">
iterasi=7
i=1
while (i <= iterasi)
{
document.write("Ini angka " + i + "<BR>");
i=i+1
}
</SCRIPT>
Udah.
Nah berbeda dengan for, perintah while hanya mempunyai satu argumen, yaitu untuk
kasus di atas "i <= iterasi". Selama argumen ini terpenuhi, blok while akan ter
us dijalankan. Nah, untungnya di dalam blok while kita menuliskan perintah "i=i+
1" sehingga setiap menjalankan sebuah iterasi, harga i akan bertambah seharga 1.
Dan akhirnya argumen "i <= iterasi" tidak terpenuhi saat i=8, dan iterasi dihen
tikan. Kita lihat hasilnya seperti di bawah ini.
Ini angka 1
Ini angka 2
Ini angka 3
Ini angka 4
Ini angka 5
Ini angka 6
Ini angka 7
Udah.
Kayaknya contoh-contohnya agak-agak garink ya. Saya kasih contoh terakhir deh, m
udah-mudahan rada seger. Pada contoh berikut saya akan membangun sebuah piramida
yang megah :). Perhatikan script berikut ini, atau boleh juga anda mencobanya d
ulu dengan menekan tombol di bawah script ini.
<script language="JavaScript">
function latar()
{
tinggi=prompt("Berapa meter tinggi piramid yang anda inginkan (maksimal = 20) ?"
)
iterasi=eval(tinggi)
var WindowBaru=window.open("", "baru", "height=400,width=400");
WindowBaru.document.write("<HTML>")
WindowBaru.document.write("<TITLE>Window Baru Nech</TITLE>")
WindowBaru.document.write("<BODY BGCOLOR='ffffcc'>")
WindowBaru.document.write("<CENTER>")
baris=1
while (baris <= iterasi)
{
nomor=1
while (nomor <= baris)
{
WindowBaru.document.write("<font size=2>&nbsp;*&nbsp;</font>")
nomor=nomor+1
}
WindowBaru.document.write("<br>")
baris=baris+1
}
WindowBaru.document.write("<P><HR WIDTH='60%'><P>")
WindowBaru.document.write("<a href='' onClick='self.close()'>Tutup window ini</a
><p>")
WindowBaru.document.write("</CENTER>")
WindowBaru.document.write("</HTML>")
}
</script>
Fungsi di atas saya aktifkan dengan event handler onClick pada tombol di bawah i
ni.
Keren kan ? :D
Tenang .. tenang .. akan saya terangkan. Mula-mula menggunakan perintah prompt()
, saya meminta input dari anda. Yang anda masukkan adalah angka, namun karena in
put masuk melalui perintah prompt(), maka saya menerimanya dalam bentuk karakter
(teks). Anda tentu masih ingat bahwa karakter "12" ditambah karakter "23" hasil
nya "1223", bukan 35. Oleh karena itu karakter tersebut perlu saya ubah menjadi
angka dengan menggunakan perintah eval(). Angka tersebut kini saya simpan dalam
variabel iterasi.
Berikutnya menggunakan perintah window.open() saya membuka window baru dan menge
set beberapa tag HTML. Nah setelah itu barulah saya mulai membangun piramida. Di
sini saya menggunakan while di dalam while. :) While yang berada di luar akan b
erulang sebanyak variabel "iterasi", yaitu angka yang anda masukkan. Ini menentu
kan tinggi piramida total. Sedang while yang dalam akan berulang sebanyak variab
el "baris". Pada baris pertama (yaitu saat variabel baris=1), kita menulis sebua
h tanda * . Dan pada baris kedua (baris=2) kita menulis dua buah tanda, menjadi
* * , dst. Di sini kita menggunakan simbol &nbsp; mengapit tanda * untuk memberi
spasi. Anda tentunya ingat karakter tersebut, yang telah saya jelaskan pada tut
orial html yang kedua.

Seri Tutorial - Java Script 8

Bermain Gambar (Kayak Anak Kecil :D)
Gimana ? hehehe. Untuk membuat gambar yang bisa berubah saat didekati mouse, say
a hanya menggunakan script sederhana seperti di bawah ini.
<A HREF="http://www.geocities.com/rohim94" onMouseOver="document. gambarku.src='
gambar1.gif'" onMouseOut="document.gambarku.src='gambar2.gif'">
<IMG SRC="gambar2.gif" BORDER=0 NAME="gambarku"></a>
Pada script di atas saya menggunakan event handler onMouseOver dan onMouseOut. S
aat mouse mendekati gambar, onMouseOver aktif, sehingga gambar yang muncul adala
h gambar2.gif. Ini dilakukan menggunakan perintah document.gambarku.src='gambar2
.gif'. Saya menggunakan object dan propertynya, yaitu document, gambarku dan src
. Gambarku adalah nama gambar yang didefinisikan dengan atribut NAME="gambarku"
pada tag <IMG>. Sedang saat mouse menjauh, onMouseOut aktif, dan gambar yang mun
cul adalah gambar1.gif.
Sekarang saya kembali akan menuliskan script untuk mengubah gambar saat didekati
, namun dengan memanfaatkan fungsi, seperti di bawah ini.
<SCRIPT LANGUAGE="JavaScript">
function lonjong()
{
document.gambar.src="gambar1.gif"
}
function bulat()
{
document.gambar.src="gambar2.gif"
}
</SCRIPT>
<A HREF="http://www.geocities.com/rohim94" onMouseOver="lonjong()" onMouseOut="b
ulat()">
<IMG SRC="gambar2.gif" NAME="gambar" BORDER=0></a>
Tidak ada yang berbeda, hanya kali ini saya mendefinisikan lebih dulu apa yang a
kan terjadi pada event onMouseOver dan onMouseOut dengan menggunakan fungsi lonj
ong() dan fungsi bulat(). Hasilnya seperti di bawah ini.
Sekarang saya akan menampilkan sesuatu yang lebih serius, yaitu membuat slide sh
ow. Ada beberapa foto yang ingin saya tampilkan. Perhatikan baik-baik.
<SCRIPT LANGUAGE="JavaScript">
var num=1
img1 = new Image ()
img1.src = "pic1.jpg"
img2 = new Image ()
img2.src = "pic2.jpg"
img3 = new Image ()
img3.src = "pic3.jpg"
img4 = new Image ()
img4.src = "pic4.jpg"
img5 = new Image ()
img5.src = "pic5.jpg"
img6 = new Image ()
img6.src = "pic6.jpg"
function slideshow(x)
{
num=num+x
if (num==7)
{num=1}
if (num==0)
{num=6}
document.mypic.src=eval("img"+num+".src")
}
</SCRIPT>
<CENTER>
<IMG SRC="pic1.jpg" NAME="mypic" BORDER=0 height="250"><p>
<A HREF="JavaScript:slideshow(-1)">Previous</A>
<A HREF="JavaScript:slideshow(1)">Next</A>
</CENTER>
Hasil dari script di atas adalah seperti ini.
Previous Next
Di sini ada beberapa hal yang ingin saya jelaskan.
Pertama, kita mendefinisikan var num di luar fungsi slideshow(). Akibatnya varia
bel ini menjadi bersifat "global" artinya bisa dipakai di mana-mana. Kalau sekir
anya kita mempunyai 10 fungsi, semuanya boleh memakai variabel ini dan berharga
sama. Sedang jika kita mendefinisikan variabel di dalam sebuah fungsi, maka vari
abel itu hanya menjadi milik fungsi itu sendiri.
Kedua, perintah "imgx = new Image ()" mendefinisikan sebuah object gambar baru b
ernama imgx. Di dalam kurung dapat kita isi "width" dan "height" jika kita ingin
menentukan ukuran gambar tersebut. Sedang "imgx.src=picx.jpg" akan mendefinisik
an gambar apa yang akan disimpan dalam object tersebut.
Ketiga, fungsi slideshow(x) adalah fungsi yang menjadi otak script ini. Fungsi s
lideshow(x) ini menerima variabel "x" dan akan memprosesnya. Jika variabel x ber
harga "1" maka harga num akan ditambah 1, dan jika variabel x berharga "-1" maka
variabel num akan dikurangi 1. Kemudian karena gambar yang ada hanya 6 buah, ji
ka variabel num berharga "7", maka variabel itu diubah kembali menjadi "1", agar
gambar berulang dari awal. Demikian pula jika variabel num berharga "0", akan d
iubah menjadi "6". Sehingga gambar dapat ditampilkan secara kontinu. Eh variabel
"num" itu apa sih ? Singkatnya dia akan menentukan gambar keberapa yang akan di
tampilkan.
Keempat, kita mengisi document.mypic.src dengan perintah eval("img"+num+".src").
Fungsi eval akan mengubah sehingga yang diisi bukanlah karakter "imgnum.src", n
amun yang diisi adalah isi dari variabel "imgnum.src". num di sini adalah angka
yang akan menentukan gambar mana yang akan ditampilkan.
Kelima, kita menggunakan tag <A HREF="JavaScript:slideshow(-1)"> . Di sini ada d
ua hal penting. Yang pertama, yang kita panggil bukan hanya fungsi slideshow(x),
tapi keseluruhan java script. Sehingga variabel-variabel yang berada di luar fu
ngsi juga dipanggil/diaktifkan. Kita mendefinisikan variabel tersebut agar dapat
me-load gambar sebelum menjalankan fungsi, sehingga tidak perlu ada delay. Kemu
dian yang kedua, kita mengirim bilangan "-1" ke dalam fungsi ini sebagai harga v
ariabel "x" yang akan diproses. Bilangan "-1" ini digunakan untuk link "previous
", sedang untuk link "next", bilangan yang dikirim adalah "1".
Saya kira anda cukup faham dengan script slideshow di atas. Menarik kan, bermain
dengan gambar. Jadi ingat masa kecil. :)
Seri Tutorial - Java Script 9
Membuat Form Interaktif
Sekarang sekali lagi kita akan membuat form. Tapi berbeda dengan pada tutorial H
TML, di mana kita 'cuman' mengirim data yang dimasukin ke alamat imel, sekarang
kita akan mencoba untuk sedikit meraciknya menjadi sesuatu. Pertama, saya akan m
embuat form di mana anda dapat memasukkan warna latar yang anda inginkan. Silaka
n coba tekan tombol di bawah ini.
Pilih warna favorit anda.
Untuk membuat perintah seperti di atas, anda cukup menggunakan script seperti in
i.
<SCRIPT LANGUAGE="JavaScript">
function warna(pilihan)
{
alert("Wah ternyata kamu suka " + pilihan + " toh.")
document.bgColor=pilihan
}
</SCRIPT>
<h3>Pilih warna favorit anda.</h3>
<FORM>
<INPUT TYPE="button" VALUE="Biru" onClick="warna('lightblue')">
<INPUT TYPE="button" VALUE="Pink" onClick="warna('pink')">
<INPUT TYPE="button" VALUE="Coklat" onClick="warna('burlywood')">
<INPUT TYPE="button" VALUE="Kelabu" onClick="warna('darkgray')">
<INPUT TYPE="button" VALUE="Oranye" onClick="warna('peachpuff')">
<INPUT TYPE="button" VALUE="Putih" onClick="warna('white')">
</FORM>
Pada script di atas, kita menggunakan fungsi "warna(pilihan)". Variabel "pilihan
" di sini berasal dari input yang diberikan pengunjung melalui form. Anda dapat
melihat pada tag <INPUT ..> di bawah, kita menggunakan event handler onClick="wa
rna(`pilihan'). Harga variabel pilihan akan tergantung pada tombol mana yang kit
a tekan.
Kemudian pada fungsi "warna(pilihan)" di atas, pilihan kita ini ditampilkan deng
an perintah alert(), juga digunakan untuk mengubah warna latar, menggunakan prop
erty "document.bgColor". Untuk jenis-jenis warna, selain menggunakan kode heksad
esimal (seperti #ffffff), kita juga dapat menggunakan kata seperti di atas (ligh
tblue, pink, burlywood, dll). Kata-kata lain yang dapat anda gunakan bisa diliha
t di sini.
Sekarang kita akan mencoba menggunakan form dan javascript untuk melakukan penca
rian menggunakan search engine "Google", favorit saya. Anda dapat mencoba mencar
i dengan menggunakan form di bawah ini.
Cari pakai Google:
Script untuk membuat mesin pencari seperti di atas dapat anda lihat berikut ini.
<SCRIPT LANGUAGE="JavaScript">
function cari(){
var kata = document.formcari.keyword.value;
{
var hasil = "http://www.google.com/search?q=" + kata ;
window.open(hasil, 'google', config='height=500,width=750 scrollbars=yes locatio
n=yes')
}
}
</SCRIPT>
<FORM NAME="formcari" onSubmit="cari()">
Cari pakai Google:
<INPUT NAME="keyword" SIZE="40" TYPE="text">
<INPUT TYPE="submit" VALUE="Cari .. !!">
</FORM>
Script di atas agak sedikit berbeda dalam mengirim input. Kalau sebelum ini kita
mengirim input melalui parameter di dalam fungsi (yang ada di dalam kurung sete
lah nama fungsi), sekarang kita mengirimnya melalui elemen form. Oleh karena itu
input ini dibaca oleh script java dalam bentuk document.namaform.namaelemen.val
ue
Karena form kita beri nama "formcari" dan elemen yang datanya kita kirimkan dibe
ri nama "keyword", maka script java di atas menggunakan "document.formcari.keywo
rd.value" untuk disimpan ke dalam variabel "kata". Perhatikan urutan document da
n propertynya dari yang paling atas document, kemudian form, berikutnya elemen f
orm, baru isinya yaitu menggunakan kata value. (Kalau diperlukan anda dapat meng
gunakan "document.formcari.keyword.value.length" untuk mengetahui panjang input
yang dimasukkan pengunjung. Saat ini kita memang belum memerlukannya). Kemudian
kita gabung dengan alamat google untuk mendapatkan "url" pencarian yang diingink
an (untuk google alamatnya seperti di atas "http://www.google.com/search?q=").
Terakhir hasilnya kita tampilkan dalam window baru - menggunakan perintah window
.open(). Di sini saya menambahkan parameter scrollbar=yes dan location=yes, untu
k iseng aja. :) mmm .. biar bisa di-scroll up-down lah.
Masih belum capek kan ? Kita coba script berikutnya. Perhatikan baik-baik script
di bawah ini.
<SCRIPT LANGUAGE="JavaScript">
function validnama(inputnama)
{
panjangnama=inputnama.length
if (panjangnama == 0)
{
alert("Anda belum memasukkan nama")
document.formdata.nama.focus()
}
}
function validpos(pos)
{
panjang=pos.length
digits="0123456789"
if(panjang != 5)
{
alert("Panjang kode pos-nya salah tuh.")
document.formdata.pos.focus()
}
for(i=0; i<5; i++)
{
if (digits.indexOf(pos.charAt(i))<0)
{
alert("Kok kode posnya bukan angka ?")
document.formdata.pos.focus()
break
}
}
}
</SCRIPT>
<FORM NAME="formdata">
<h4>Form data</h4>
Masukkan nama anda :<br>
<INPUT TYPE="text" NAME="nama" onBlur="validnama(nama.value)"><br>
Masukkan kode pos (99999) :<br>
<INPUT TYPE="text" NAME="pos" SIZE=10 ><P>
<INPUT TYPE="button" VALUE="Submit" onClick="validpos(pos.value)">

Hasil dari script di atas adalah seperti ini.

Form data
Masukkan nama anda :
Masukkan kode pos (99999) :

Sekarang akan saya jelaskan script di atas. Kita bahas per bagian saja ya, biar
lebih jelas. Saya mulai dari fungsi pertama pada script di atas, yaitu fungsi va
lidnama().
function validnama(inputnama)
{
panjangnama=inputnama.length
if (panjangnama == 0)
{
alert("Anda belum memasukkan nama")
document.formdata.nama.focus()
}
}
.....
<FORM NAME="formdata">
<h4>Form data</h4>
Masukkan nama anda :<br>
<INPUT TYPE="text" NAME="nama" onBlur="validnama(nama.value)"><br>
Fungsi validnama() di atas diaktifkan dengan event handler onBlur pada form. Jad
i saat kursor meninggalkan kotak yang diisi, fungsi ini aktif, dan menerima vari
abel "nama.value". Kita boleh juga menulis lengkap "document.formdata.nama.value
" seperti contoh-contoh sebelumnya, namun karena perintah tersebut berada di dal
am form, bagian "document.formdata" tidak perlu ditulis.
Kemudian variabel "nama.value" ini diterima sebagai variabel "inputnama". Dan pa
njang variabel "inputnama" (inputnama.length) disimpan dalam variabel "panjangna
ma". Nah jika panjangnya 0, maka blok if di atas dijalankan, dan keluarlah alert
yang menyebalkan ! Setelah itu dengan perintah document.formdata.nama.focus() k
ursor dikembalikan ke kotak nama. Kalau misalnya kita sudah mengisi sesuatu dala
m kotak itu, maka tidak ada apa-apa yang terjadi.
Berikutnya kita bahas bagian atas dari fungsi "validpos()". Perhatikan script be
rikut ini.
function validpos(pos)
{
panjang=pos.length
digits="0123456789"
if(panjang != 5)
{
alert("Panjang kode pos-nya salah tuh.")
document.formdata.pos.focus()
}
.....
Masukkan kode pos (99999) :<br>
<INPUT TYPE="text" NAME="pos" SIZE=10 ><P>
<INPUT TYPE="button" VALUE="Submit" onClick="validpos(pos.value)">
Sekarang kita membicarakan fungsi validpos(). Fungsi ini diaktifkan dengan event
handler onClick pada tombol di di atas. Saat diaktifkan, maka variabel "pos.val
ue" - yaitu data kode pos yang kita masukkan - dikirim. Oleh fungsi validpos() d
ata ini diterima dan disimpan dalam variabel "pos". Bagian pertama dari fungsi v
alidpos() di atas mengecek panjang data. Variabel panjang digunakan untuk menyim
pan panjang kode pos (pos.length) dan kemudian dicek. Jika panjangnya bukan lima
(kode pos di Indonesia lima angka kan), maka ditampilkan alert. Dan kemudian ku
rsor diletakkan pada kotak tempat mengisi kode pos dengan menggunakan perintah d
ocument.formdata.pos.focus().
Nah sekarang kita membahas bagian terakhir dari fungsi validpos() di atas. Koden
ya seperti ini.
function validpos(pos)
{
panjang=pos.length
digits="0123456789"
......
for(i=0; i<5; i++)
{
if (digits.indexOf(pos.charAt(i))<0)
{
alert("Kok kode posnya bukan angka ?")
document.formdata.pos.focus()
break
}
}
}
Bagian kedua dari fungsi validzip() akan mengecek apakah data yang dimasukkan pe
ngunjung berupa angka atau bukan. Untuk itu digunakan perintah if (digits.indexO
f(pos.charAt(i))<0). Perintah charAt(i) ini akan mencari angka/karakter pada pos
isi ke-i. Jadi jika variabel pos berisi "81421432", maka pos.charAt(4) adalah an
gka "1". Ingat perhitungan dimulai dari 0, sehingga pos.charAt(0) adalah "8", po
s.charAt(1) adalah "1", dan seterusnya.
Sedang perintah digits.indexOf(x) akan mengecek apakah "x" ada pada variabel dig
its. Jika "x" ada, maka hasilnya adalah posisi tempat x berada. Sedang jika "x"
tidak ada pada variabel digits, maka hasilnya adalah "-1". Misal variabel "digit
s" berisi "43256", maka perintah digits.indexOf(5) akan memberikan hasil "3", po
sisi di mana 5 berada. (Lagi-lagi posisi dihitung mulai dari 0.
Jadi misalnya variabel digits berisi "0123456789" (seperti di atas) dan variabel
pos berisi "42b23", maka pos.charAt(2) akan memberikan hasil "b", dan digit.ind
exOf(b) akan memberikan hasil "-1" karena tidak ada huruf "b" pada variabel digi
ts. Karena "-1" kurang dari "0", maka blok if pun dijalankan, yaitu keluar perin
gatan. Dan dengan perintah break, proses iterasi dihentikan. Jadi kalapun input
data kode pos berisi 5 huruf seperti "sdbwe", peringatan cukup keluar sekali. Da
n kalau ternyata anda mengisi semuanya dengan benar sesuai aturan, apa yang akan
terjadi ??? Jrengggg ... nggak terjadi apa-apa. :(

Seri Tutorial - Java Script 10

Sampai Titik Darah Penghabisan
Sekarang kita akan mempelajari beberapa hal yang belum sempat dipelajari pada tu
torial sebelumnya.
mmm ... pertama mungkin dalam proses pembelajaran :) yang anda lakukan hingga me
ncapai bagian ini anda membuat banyak error. Nah, untuk dapat mendeteksi error y
ang terjadi, sebaiknya anda men-"check" agar error message ditampilkan pada brow
ser anda. Caranya, anda masuk ke menu Tool --> Option. Kemudian pilih tab "Detai
l Setting" (atau apapun yang seperti itu, saya sekarang make windows versi Jepan
g sehingga lupa tulisan menunya dalam bahasa Inggrisnya). Nah di sana cari tulis
an yang kira-kira bunyinya "Display script error message" (enggak yakin juga nih
) pada bagian browser. Kemudian anda check. Nah, setelah ini setiap anda salah m
enulis script, akan muncul peringatan pada baris keberapa anda melakukan kesalah
an dan apa kesalahan yang anda lakukan. Enak kan :). Kita jadi mudah men-trace k
esalahan yang kita lakukan.
Udah. Mudah-mudahan membantu anda dalam menulis script-script setelah ini. :D
Berikutnya saya akan memperkenalkan fungsi random. Perhatikan script berikut ini
.
<SCRIPT LANGUAGE="JavaScript">
function rand()
{
var num=Math.round(Math.random()*9)
var num=num+1
alert(num)
}
</SCRIPT>
<h3>Bilangan Random:</h3>
<form>
<INPUT TYPE="button" VALUE="Bilangan Random (antara 1 - 10)" onClick="rand()">
</FORM>
Fungsi random ini menggunakan method "random()" pada object "Math", jadi Math.ra
ndom()Math.round() untuk melakukan pembulatan. Terakhir saya tambahkan dengan "1
" agar bilangan random yang diperoleh antara 1 dan 10.
Hasil dari script di atas dapat dilihat di sini.
Bilangan Random:

Mungkin contoh di atas kurang menarik. Tapi dengan fungsi random sebenarnya kita
bisa membuat banyak hal yang menarik, seperti game, tebak-tebakan, dll. Nah di