Pemrograman Web Javascript

PR
sdms`mf?i`u`rbqhos
13.1 Tujuan Instruksional
1. Pembaca mengetahui sejarah Javascript.
2. Pembaca mengetahui penulisan Javascript.
3. Pembaca mengetahui struktur Javascript.
13.2 Pendahuluan
JavaScript dikembangkan oleh Netscape Communications dan Sun Microsystems
tahun 1995. JavaScript adalah bahasa pemrograman script untuk web bersifat open
source dan open architecture yang diletakkan dan berjalan pada komputer klien.
Sedangkan JavaScript yang di server disebut LiveWire. Perbedaan yang tampak
adalah JavaScript klien diletakkan pada bagian HTML dan JavaScript server terletak
pada bagian file executable yang berisi kode-kode byte.
Bentuk JavaScript mirip dengan Java, namun keduanya berbeda jauh. Java adalah
bahasa pemrograman kompiler dan JavaScript adalah skrip interpreter yang
diletakkan pada bagian skrip HTML. Awalnya JavaScript hanya dapat berjalan di
Nescape, namun seiring perkembangannya browser Internet Explore pun dapat
menerima JavaScript. Microsoft juga menciptakan skrip yang dapat berjalan di
browser Internet Explore yang bernama Jscript. Namun keduanya sedikit berbeda
sehingga tidak dapat saling berkolaborasi.
Kelebihan JavaScript adalah :

Bersifat open source dan open architecture.
JavaScript adalah bahasa hibrid yaitu gabungan antara Java sebagai bahasa
pemrograman dan HTML sebagai bahasa kode.
JavaScript adalah bahasa yang mudah, cepat, ukurannya kecil.
75
13.3 Penulisan Javascript
Untuk belajar JavaScript hanya diperlukan teks editor dan web browser. Teks editor
dapat menggunakan notepad, word, editplus dan lainnya. Web browser dapat
menggunakan Nescape atau IE. Program JavaScript diletakkan pada bagian skrip
HTML dengan diawali <script language=”JavaScript”>. Untuk komentar dalam
skrip JavaScript menggunakan tanda // atau /* dan */. JavaScript bersifat case
sensitive artinya penulisan huruf besar dan huruf kecil dibedakan. Misal penulisan
DOCUMENT berbeda dengan document. Berikut contoh penggunaan komentar
JavaScript.
<script language="JavaScript">
// program JavaScript tulis disini
/* program selanjutnya tulis disini */
</script>
atau
<script type="text/javaScript">
// program JavaScript tulis disini
/* program selanutnya tulis disini */
</SCRIPT>
kemudian, penulisan JavaScript tidak perlu diakhiri tanda apapun. Namun bila anda
menulis beberapa pernyataan dalam satu baris harus diakhiri dengan tanda ; lebih
jelasnya lihat contoh berikut :
<HTML>
<HEAD><TITLE> contoh JavaScript</TITLE></HEAD>
</BODY>
document.write("Selamat Belajar","<br>")
document.write("JavaScript")
</script>
</BODY>
</HTML>
Kedua program diatas strukturnya berbeda dimana contoh pertama, beberapa

pernyataan ditulis satu baris dan diakhiri tanda ; sedangkan contoh kedua setiap
pernyataan tidak diakhiri tanda ;. Terlihat juga bahwa perintah JavaScript terletak di
dalam skrip HTML yang diawali dengan <script language=”JavaScript”> dan
diakhiri </script.
76
Gambar 13.1 Hasil dari Javascript dengan HTML
13.4 Struktur Javascript

Perintah JavaScript dapat ditulis dalam dokumen HTML atau pada file terpisah, yang
nantinya dipanggil dengan perintah src yang dijelaskan pada bab tersendiri. Berikut
ini contoh JavaScript dalam dokumen HTML.
<HTML>
<HEAD><TITLE> contoh JavaScript</TITLE></HEAD>
</BODY>
document.write("Program JavaSript-ku yang pertama")
</script>
</BODY>
</HTML>
Pada contoh diatas perintah JavaScript diletakkan pada bagian <body>. Pada pola
kedua perintah JavaScript dapat diletakkan pada bagian <head> biasanya berupa
fungsi. Semua definisi ditulis dan dipanggil pada bagian <head>, contoh di bawah
menjelaskan. Hasilnya sama.
<HTML>
<HEAD>
<TITLE> contoh JavaScript</TITLE>
document.write(" Program JavaSript-ku yang pertama")
</script>
</HEAD>
<BODY>
</BODY>
</HTML>
Gambar 13.2 Hasil dari Javascript tanpa HTML

77
Perintah JavaScript dapat terpisah dari dokumen HTML dengan menggunakan
atribut src. Sintaknya sebagai berikut :
<script src=http://nama_file_javascript.js> <script>
Kemudian file tersebut di simpan dengan ekstensi .js, cara ini cukup efektif untuk
mengamankan script JavaScript yang anda buat. Kelebihan lainnya adalah anda dapat
memanggil file tersebut secara berulang-ulang selama dibutuhkan. Sehingga dapat
menghemat baris program. Contoh di bawah menjelaskan.
<HTML>
<HEAD><TITLE> contoh JavaScript</TITLE>
<script src="http://hal_pertama.js"></script>
</HEAD>
<BODY>
<h4>Haloo apa kabar ?</h4>
</BODY>
</HTML>
Pada buku ini penulis menggunakan editor EditPlus 2. Software ini mendukung
dalam penulisan script berbasis web. Berikut tampilan utama dari EditPlus 2.
Gambar 13.3 Tampilan utama EditPlus2
78
PS
u`qh`adk?c`m?jnmrs`ms`
1. Pembaca mampu membuat variabel pada Javascript.
2. Pembaca mampu mendeklarasikan variabel.
3. Pembaca mampu membuat konstanta.
14.2 Aturan Menciptakan Variabel

Dalam membuat program pasti tidak lepas dari variabel. Variabel berfungsi untuk
menampung suatu nilai yang dapat berubah-ubah isinya. Setiap bahasa pemrograman
mempunyai aturan dalam menciptakan variabel, pada JavaScript aturan membuat
variabel adalah :
1. Harus diawali dengan huruf atau garis bawah.
2. Tidak boleh diawali dengan angka atau simbol.
3. Tidak boleh mengandung spasi.
4. Bersifat case sensitive artinya huruf besar dan kecil dibedakan.
5. Tidak boleh menggunakan reserved word JavaScript.
Berikut ini contoh menciptakan variabel yang benar :

nama_pasien
nip2
_jmlbayar
Kemudian contoh variabel yang salah adalah :

&no mhs
@#alamat
12345
ko ta.
79
14.3 Mendeklarasikan Variabel
Sintak menciptakan variabel adalah :
var namavariabel = nilainya
Contoh :
var nm_pegawai = “haryanto”
var jml_bayar = 150000
var ip_sem = 2.89
var laki_laki = true
var perempuan = false
var kota = null
Untuk mendeklarasikan beberapa variabel dalam satu baris, cukup dipisahkan

dengan tanda , (koma). Contoh :
var v_kode, jml_bayar, v_nama, v_total
14.4 Mendeklarasikan Konstanta

Konstanta atau disebut juga literal adalah suatu nilai yang bersifat tetap dan tidak
dapat berubah-ubah. Contoh :
Jml_bayar = hg_satuan * 5
Nilai 5 dalam rumus diatas adalah konstanta/literal yang akan digunakan selama
program aktif. Jenis konstanta ada 4 yaitu :
1. Konstanta integer, adalah bilangan bulat tanpa desimal/pecahan. Contoh :
50, 3, 1500 atau 450.
2. Konstanta floating point adalah bilangan pecahan atau bilangan pangkat.
Pada JavaScript penulisan pangkat menggunakan E atau e. Contoh : 3.14,
10E3, -5E.
3. Konstanta string, adalah karakter yang mengandung huruf angka atau
simbol-simbol. Konstanta string harus diawali dan diakhiri tanda “ “. Contoh
: “Tjahjo”, “Candra”.
4. Konstanta boolean, adalah konstanta yang hanya memiliki dua buah nilai
yaitu “true” atau “false”.
80
PT
shod?c`s`
1. Pembaca dapat menggunakan tipe-tipe data dalam Javscript.
2. Pembaca mampu mendeklarasikan variabel dengan tipe data yang sesuai.
3. Pembaca mampu menggunakan karakter khusus pada tipe data dalam variabel.
15.2 Tipe String/Karakter

Adalah tipe data yang bernilai huruf, katak, kalimat atau simbol. Angka juga
termasuk tipe data string jika tidak digunakan untuk operasi perhitungan. Harus
diapit dengan tanda kutip ganda “ “ atau tunggal ‘ ‘
. Namun bila ada string angka
gunakan tanda kutip tunggal. Bila data mengandung tanda ‘ maka harus diapit tanda
kutip ganda. Contoh :
var nama = “hari maryanto”
var tgl_lahir = ’ 28 oktober 1999’
var x = “do’ a”
var y = “#$%^”
var = “don’ t forget me, please”
JavaScript juga mendukung beberapa karakter khusus yang dinamankan escape

sequence, yaitu :
\b menyatakan backspace
\f menyatakan form feed
\n menyatakan karakter baris baru
\r menyatakan carriage return
\t menyatakan karakter tab.
81
15.3 Tipe Numerik
Adalah tiep data yang bernilai angka atau bilangan yang digunakan untuk operasi
perhitungan. Contoh :
var jml_beli = 12500
var nilai = 79
var ip_sem = 3.01
15.4 Tipe Boolean

Adalah tipe data yang mempunyai nilai true dan false. Biasanya digunakan untuk
pengecekan kondisi. Contoh :
var hasil = nilai_ujian > 40
15.5 Tipe Null

Data yang tidak dikenal atau boleh kosong. Dapat juga dikatakan NULL. NULL
tidak sama dengan NOL. Dalam mendeklarasikan variabel disarankan untuk
menghindari data bertipe NULL. Karena akan membingungkan pada saat pelacakan
kesalahan program.
oooO0Oooo
82
PU
nodq`snq? \‹?djroqdrh
1. Pembaca mengenal berbagai operator pada Javascript.
2. Pembaca mampu menggunakan operator sesuai dengan permasalahannya.
16.2 Pendahuluan
Operator adalah perintah untuk melakukan sesuatu terhadap nilai atau variabel dan
memberikan hasil. Seperti penambahan, pengurangan, pembanding terhadap dua
nilai dan lainnya. JavaScript mempunyai enam operator yaitu :
1. Operator Aritmatika.
2. Operator Pembanding.
3. Operator Logika.
4. Operator Penugasan.
5. Operator String.
6. Ekspresi.
16.3 Operator Aritmatika

Digunakan pada data bertipe numerik. Ada dua macam operator numerik yaitu
operator unary dan operator binary. Perbedaannya terletak pada jumlah nilai yang
dioperasikan, pada operator unary nilai yang digunakan bersifat tunggal dan operator
binary nilai yang digunakan lebih dari satu. Contoh nilai binary : B * 4 = X.
Penjelasannya adalah :
B dan 4 adalah nilai
X adalah hasil
* adalah operator perkalian
Contoh nilai unary : hasil++. Daftar operator aritmatik lihat pada tabel 14.1.
83
Tabel 16.1 Daftar operator aritmatika
Operator Jenis Keterangan
* Binary Perkalian
/ Binary Pembagian
+ Binary Penjumlahan
- Binary Pengurangan
% Binary Pembagian sisa/modulus
- Unary Negasi
++ Unary Penambahan satu
-- Unary Pengurangan satu
Jenis binary tidak dibahas lebih jauh karena operator ini sering digunakan oleh
pembaca. Berikut ini contoh penggunaan operator jenis binary dengan program
JavaScript dan hasilnya.
<HTML>
<HEAD><TITLE> Contoh Penggunaan Operator Binary</TITLE></HEAD>
<BODY>
document.write("12 * 4 = " + (12*4) + "<br>")
document.write("12 / 4 = " + (12/4) + "<br>")
document.write("12 + 4 = " + (12+4) + "<br>")
document.write("12 - 4 = " + (12-4) + "<br>")
document.write("12 % 5 = " + (12%5) + "<br>")
</script>
</BODY>
</HTML>
Gambar 16.1 Hasil operator aritmatika jenis binary
Berikut ini contoh penggunaan operator jenis unary dengan program JavaScript dan
hasilnya.
<HTML>
<HEAD><TITLE> Contoh Penggunaan Operator Unary</TITLE></HEAD>
<BODY>
hasil=1
document.write("hasil pertama = " + (hasil++) + "<br>")
document.write("hasil kedua = " + (hasil++) + "<br>")
document.write("hasil ketiga = " + (hasil++) + "<br>")
84
document.write("hasil keempat = " + (hasil++) + "<br>")
document.write("hasil kelima = " + (hasil++) + "<br>")
</script>
</BODY>
</HTML>
Gambar 16.2 Hasil operator aritmatika jenis unary ++
<HTML>
<HEAD><TITLE>Contoh Penggunaan Operator Unary</TITLE></HEAD>
<BODY>
hasil=2
document.write("hasil berikutnya = " + (hasil--) + "<br>")
</script>
</BODY>
</HTML>
Gambar 16.3 Hasil operator aritmatika jenis unary --
<HTML>
<HEAD><TITLE>Contoh Penggunaan Operator Unary</TITLE></HEAD>
<BODY>
hasil=2
document.write("nilai semula = " + (hasil) + "<br>")
document.write("nilai negasinya = " + (-hasil) + "<br>")
</script>
</BODY>
</HTML>
85
Gambar 16.4 Hasil operator aritmatika jenis unary -
16.4 Operator Penugasan

Disebut juga operator pemberi nilai. Digunakan jika ingin memberikan nilai ke suatu
nilai atau merubah nilai nilai. Semua operator dalam tabel 14.2 dapat digunakan
untuk data bertipe numerik. Untuk tipe data string hanya dapat menggunakan
operator = dan +=. Operator penugasan pada dasarnya adalah singkatan dari operator
binary.
Contoh :
Hasil = hasil + jml
artinya sama dengan
hasil += jml
Tabel 16.2 Daftar operator penugasan

Operator Contoh Ekuivalen Keterangan
= 2=2 - Sama dengan
+= 2 += 2 4=2+2 Ditambah dengan
-= 2 -= 2 0=2–2 Dikurangi dengan
*= 2 *= 2 4=2*2 Dikalikan dengan
%= 2 %= 2 0=2%2 Modulus dengan
/= 2 /= 2 1=2/2 Dibagi dengan
&= 2 &= 2 2=2&2 Bit AND dengan
|= 2 |= 2 2=2|2 Bit OR dengan
Berikut contoh penggunaan operator penugasan dengan program JavaScript.
<HTML>
<HEAD><TITLE>Contoh Penggunaan Operator Penegasan</TITLE></HEAD>
<BODY>
x = 9; y = 5;
document.write("nilai awal x = 9 dan y = 5","<br><br>")
x = 9; y = 5;
document.write("hasilnya x += y adalah " + (x += y) + "<br>")
x = 9; y = 5;
document.write("hasilnya x -= y adalah " + (x -= y) + "<br>")
x = 9; y = 5;
document.write("hasilnya x *= y adalah " + (x *= y) + "<br>")
x = 9; y = 5;
86
document.write("hasilnya x /= y adalah " + (x /= y) + "<br>")
x = 9; y = 5;
document.write("hasilnya x %= y adalah " + (x %= y) + "<br>")
x = 9; y = 5;
document.write("hasilnya x &= y adalah " + (x &= y) + "<br>")
x = 9; y = 5;
document.write("hasilnya x |= y adalah " + (x |= y) + "<br>")
</script>
</BODY>
</HTML>
Gambar 16.5 Hasil operator penugasan dengan nilai awal
Pada baris program diatas, timbul pertanyaan ‘mengapa setiap baris program diberi
nilai awal pada variabelnya secara berulang-ulang ?’. Anda akan menemukan
jawabannya setelah mempelajari program bawah dengan cara menelusuri satu per
satu setiap operator dan nilai variabel pada baris programnya.
<HTML>
<HEAD><TITLE>Contoh Penggunaan Operator Penegasan</TITLE></HEAD>
<BODY>
x = 9; y = 5;
document.write("nilai awal x = 9 dan y = 5","<br><br>")
document.write("hasilnya x += y adalah " + (x += y) + "<br>")
document.write("hasilnya x -= y adalah " + (x -= y) + "<br>")
document.write("hasilnya x *= y adalah " + (x *= y) + "<br>")
document.write("hasilnya x /= y adalah " + (x /= y) + "<br>")
document.write("hasilnya x %= y adalah " + (x %= y) + "<br>")
document.write("hasilnya x &= y adalah " + (x &= y) + "<br>")
document.write("hasilnya x |= y adalah " + (x |= y) + "<br>")
</script>
</BODY>
</HTML>
87
Gambar 16.6 Hasil operator penugasan tanpa nilai awal
16.5 Operator Pembanding

Adalah operator yang digunakan untuk membandingkan dua buah nilai/nilai yang
hasilnya bertipe boolean yaitu true atau false. Nilai yang dibandingkan dapat bertipe
string atau numerik.
Tabel 16.3 Daftar operator pembanding

Operator Keterangan
== Sama dengan
!= Tidak sama dengan
> Lebih besar
< Lebih kecil
>= Lebih besar atau sama dengan
<= Lebih kecil atau sama dengan
Berikut ini implementasi operator pembanding dengan program JavaScript. Hasil

dari oprasinya akan bernilai true atau false.
<HTML>
<HEAD><TITLE>Contoh Penggunaan Operator Pembanding</TITLE></HEAD>
<BODY>
document.write("Hasil dari 10 = = 10 adalah "+(10 == 10)+"<br>")
document.write("Hasil dari 10 != 10 adalah "+(10 != 10)+"<br>")
document.write("Hasil dari 10 >= 11 adalah "+(10 >= 11)+"<br>")
document.write("Hasil dari 10 <= 6 adalah "+(10 <= 6)+"<br>")
document.write("Hasil dari 10 > 5 adalah "+(10 > 5)+"<br>")
document.write("Hasil dari 10 < 55 adalah "+(10 < 55)+"<br>")
</script>
</BODY>
</HTML>
88
Gambar 16.7 Hasil dari operator pembanding
16.6 Operator Logika

Digunakan untuk membandingkan dua buah nilai yang hasilnya bernilai true atau
false. Perbedaan dengan operator pembanding, adalah bila operator logika
membandingkan hasil perbandingan dari proses kedua nilai dan hasilnya
dibandingkan secara logika. Contoh :
(2000 > 1500) || (2000 !+ 1500)
Dari contoh diatas dapat diuraikan salah satu nilai yang dibandingkan harus sesuai
dengan kriteria atau salah satu dari perbandingan diatas harus bernilai true. Artinya
2000 lebih besar dari 1500 ATAU 2000 tidak sama dengan 1500 maka hasilnya
bernilai TRUE. Sebagai pedoman tentang operator logika dapat dilihat pada tabel di
bawah.
Tabel 16.4 Panduan operator OR
Kondisi 1 Kondisi 2 Hasil
False False False
False True True
True False True
True True True
Tabel 16.5 Panduan operator AND

Kondisi 1 Kondisi 2 Hasil
False True False
True False False
True True True
Tabel 16.6 Panduan operator NOT

Kondisi Hasil
NOT False True
NOT True False
89
Berikut ini daftar operator logika pada JavaScript dan implementasi operator logika
dengan contoh program JavaScript.
Tabel 16.7 Daftar operator logika

Operator Arti Keterangan
&& AND Kedua nilai yang dibandingkan harus memenuhi syarat.
|| OR Salah satu nilai yang dibandingkan harus memenuhi syarat.
! NOT Nilai yang dibandingkan merupakan kebalikannya.
<HTML>
<HEAD><TITLE>Contoh Penggunaan Operator Logika</TITLE></HEAD>
<BODY>
document.write("10 > 20 AND 12 > 12 hasilnya "+((10>20)&&(12>12))+"<br>")
document.write("10 < 10 AND 12 < 12 hasilnya "+((10<10)&&(12<12))+"<br>")
document.write("11 > 10 AND 9 < 10 hasilnya "+((11>10)&&(9< 10))+"<br>")
document.write("","<hr>")
document.write("10 > 20 OR 12 > 12 hasilnya "+((10>20)||(12>12))+"<br>")
document.write("10 < 10 OR 12 = = 12 hasilnya "+((10<10)||(12==12))+"<br>")
document.write("11 > 10 OR 9 = = 10 hasilnya "+((11>10)||(9==10))+"<br>")
document.write("11 > 10 OR 9 < 10 hasilnya "+((11>10)||(9<10))+"<br>")
document.write("","<hr>")
document.write("10 TIDAK = 10 hasilnya adalah "+(!(10==10))+"<br>")
document.write("10 TIDAK = 9 hasilnya adalah "+(!(10==9))+"")
</script>
</BODY>
</HTML>
Gambar 16.8 Hasil operator logika
16.7 Operator String

Adalah operator yang digunakan untuk memproses atau menggabungkan nilai string.
Beberapa aturan yang perlu diingat adalah :
90
1. String tidak dapat dibandingkan.
2. JavaScript akan merubah string berisi angka menadi numerik, sehingga dapat
dibandingkan. Contoh : “250” >= “300”. Maka hasilnya berubah menjadi
250 >= 300, sehingga hasilnya adalah true.
3. String berisi angka dan huruf tidak akan berubah. Contoh : ”bond007” maka
hasilnya tetap “bond007”.
Tabel 16.8 Daftar operator string

Operator Arti
== Membandingkan string
> Lebih besar dari
< Lebih kecil dari
+ Penjumlahan
+= Penjumlahan berganda
Berikut ini contoh penggunaan operator string dengan JavaScript dan hasilnya.
<HTML>
<HEAD><TITLE>Contoh Penggunaan Operator String</TITLE></HEAD>
<BODY>
document.write("Lulus = Tidak ? adalah:"+("lulus" ==
"tidak")+"<br>")
document.write("1 > 2 ? hasilnya adalah "+("1" > "2")+"<br>")
document.write("1 < 10 ? hasilnya adalah "+("1" < "10")+"<br>")
kata1="belajar"
kata2="bersama"
hasil=kata1+kata2
document.write("kata pertama : belajar","<br>")
document.write("kata kedua : bersama","<br>")
document.write("setelah di tambah hasilnya : "+hasil+"<br>")
document.write("hasil += adalah "+(kata1+="bersama")+"<br>")
</script>
</BODY></HTML>
Gambar 16.9 Hasil operator string

91
16.8 Ekspresi
Adalah kumpulan beberapa nilai dan operator yang digunakan untuk melakukan
perhitungan atau penugasan. JavaScript mengenal bentuk ekspresi khusus yaitu
ekspresi kondisional, merupakan ekspresi yang nilainya bergantung pada kondisi
tertentu. Sintaknya :
(kondisi) ? nilai1 : nilai2.
Misal x = 9 >= 3 ? “true” : “false”;. Pada ekspresi ini bila kondisi benar
akan mengembalikan nilai1. Sebaliknya jika kondisi salah akan mengembalikan
nilai2. Jadi pada contoh tersebut jika 9 lebih besar dari 3 variabel x akan berisi
“true”. Sebaliknya jika 9 lebih kecil sama dengan 3 maka variabel x berisi “false”.
Contoh berikut ini menjelaskan penggunaan ekspresi.
<HTML>
<HEAD><TITLE>Contoh Penggunaan Ekspresi</TITLE></HEAD>
<BODY>
var a = 9
var x = (a >= 3) ? "anda benar" : "anda salah"
document.write("apakah 9 >= 3 ? jawab : "+ x +"<br>")
var a = 9
var x = (a <= 3) ? "anda benar" : "anda salah"
document.write("apakah 9 <= 3 ? jawab : "+ x +"")
</script>
</BODY>
</HTML>
Gambar 16.10 Hasil dari ekspresi
92
16.9 Latihan
Selesaikan dengan JavaScript dan amati hasilnya.
1. Apakah karakter G lebih kecil dari L ?.
2. Diketahui data A=”Belajar”, B=”jam 16.00” dan C=”bersama”, D=”javascript”
dan E=”Rudi” . Gabunglah data-data tersebut sehingga menjadi sebuah kalimat ?.
3. Apakah setiap data pada soal No. 2 dapat dibandingkan ? . Mengapa demikian ?.
4. Berapakah hasil dari perhitungan berikut: Hasil = A – B * C / D + E. Dimana
A=5, B=2, C=6, D=2 dan E=3. Gunakan operator aritmatika yang tersedia pada
JavaScript.
oooO0Oooo
93
PV
rs`sdldms
1. Pembaca dapat memahami statement pencabangan dan perulangan.
2. Pembaca dapat membuat sebuah fungsi atau script yang melibatkan perulangan
dan pencabangan.
3. Pembaca dapat membuat script validasi data dengan pencabangan.
17.2 Pendahuluan
Statement adalah pernyataan yang menjelaskan tentang alur/jalannya program.
Statement ada dua yaitu perulangan dan pencabangan. Perulangan digunakan untuk
mengulang suatu proses beberapa kali sesuai kondisi yang diminta. Pencabangan
digunakan untuk melakukan sebuah atau beberapa validasi data sesuai data yang
diinginkan. Pada JavaScript tersedia pencabangan IF….ELSE, IF….ELSE IF,
SWITCH. Untuk perulangan ada FOR, FOR….IN, WHILE, DO….WHILE. Berikut
ini penjelasan pencabangan dan perulangan yang ada pada JavaScript.
17.3 Statement IF…..ELSE

Digunakan untuk menguji sebuah kondisi, jika benar akan dikerjakan pernyataan
berikutnya, namun jika salah akan dikerjakan pernyataan yang lain. Sintaknya :
Untuk implementasi dari statement if…..else dengan JavaScript dapat dilihat pada
kedua program di bawah. Perlu diperhatikan jika pernyataan lebih dari satu maka
94
diakhiri dengan tanda ; dan diapit tanda { dan }. Namun bila pernyataan hanya satu
maka tidak perlu menggunakan tanda { dan }.
<HTML>
<HEAD><TITLE>Contoh Statement IF.....ELSE</TITLE></HEAD>
<BODY>
lulus=84
if (lulus>=70)
{
document.write("anda lulus, dapat hadiah mobil","<br>");
document.write("silahkan ambil gratis")
}
else
{
document.write("anda dapat hadiah sepeda motor","<br>");
document.write("silahkan ambil dengan bawa identitas")
}
</script>
</BODY>
</HTML>
Gambar 17.1 Hasil pencabangan IF….ELSE
17.4 Statement IF…..ELSE IF

Pernyataan yang kondisinya lebih dari satu. Perhatikan contoh berikut :
<HTML>
<HEAD><TITLE>Contoh Statement IF.....ELSE IF</TITLE></HEAD>
<BODY>
lulus=51
if (lulus>=90)
document.write("anda lulus, dapat hadiah mobil","")
else if (lulus>=50)
document.write("maaf, anda lulus dengan syarat","")
else
document.write("anda tidak lulus","")
</script>
</BODY>
</HTML>
95
Gambar 17.2 Hasil pencabangan IF….ELSE IF
17.5 Statement SWITCH

Mulai dikenalkan pada JavaScript 1.2, dan digunakan untuk menangani pencabangan
majemuk. Atau untuk menyederhanakan pencabangan yang menggunakan
if…..else if terlalu banyak. Berikut contohnya.
<HTML>
<HEAD><TITLE></TITLE></HEAD>
<BODY>
x = 2
if (x == 1)
document.write("Menikah","")
else if (x == 2)
document.write("Belum Menikah","")
else if (x == 3)
document.write("Duda","")
else if (x == 4)
document.write("Janda","")
</script>
</BODY>
</HTML>
Kasus program diatas dapat diatasi dengan menggunakan statement Switch, sehingga
dari segi baris program lebih ringkas. Program diatas dapat dimodifikasi dengan
menggunakan statement Switch, seperti program di bawah. Klausa break digunakan
untuk mengakhiri suatu pilihan/kondisi. Klausa default digunakan untuk
memproses pernyataan jika sudah tidak ada lagi yang harus dieksekusi.
<HTML>
<HEAD><TITLE>Contoh Statement SWITCH</TITLE></HEAD>
<BODY>
x = 2
switch (x)
{
case 1: document.write("Menikah","");break;
case 2: document.write("Belum Menikah","");break;
case 3: document.write("Duda","");break;
case 4: document.write("Janda","")
96
}
</script>
</BODY>
</HTML>
Gambar 17.3 Hasil pencabangan SWITCH
17.6 Statement FOR

Digunakan untuk mengulang suatu proses dengan kondisi yang sudah ditentukan.
Pernyataan for hampir sama dengan while. Perbedaannya jika for menyertakan
kondisi awal dan akhir serta besarnya kenaikan suatu nilai. Berikut sintaknya :
Berikut ini contoh program tentang statement for pada JavaScript dan hasilnya.
<HTML>
<HEAD><TITLE>Contoh Statement FOr</TITLE></HEAD>
<BODY>
for (nilai = 1; nilai <= 8; nilai +=2)
{
document.write("Nilai sekarang adalah : "+nilai+"<br>")
}
</script>
</BODY>
</HTML>
Gambar 17.4 Hasil perulangan FOR
97
Penjelasan dari program diatas yaitu nilai awal = 1 dan nilai akhir = 8, dengan
kenaikan sejumlah 2. Maka setiap kenaikan dihitung 1+2, 3+2, 5+2. Selama nilai
masih diantara 1 – 8 maka proses akan terus berlangsung, sampai batas akhir
terpenuhi. Contoh lain dari penggunaan for seperti pada program dibawah ini, yaitu
dengan kenaikan nilai sebesar 1.
<HTML>
<HEAD><TITLE>Contoh Statement FOr</TITLE></HEAD>
<BODY>
for (ang = 1; ang <= 10; ang +=1)
{
document.write("Nilai angsuran kedit motor ke : "+ang+"<br>")
}
</script>
</BODY>
</HTML>
Gambar 17.5 Hasil perulangan FOR
Statement for tersarang adalah pernyataan for dalam pernyataan for lain, disebut
juga for nested atau for bertingkat. Berikut ini contohnya :
<HTML>
<HEAD><TITLE>Contoh Penggunaan Statement FOr</TITLE></HEAD>
<BODY>
for(x = 1; x <= 5; x++)
for (y = 1000; y <= 1000; y++)
{
document.write("Angsuran ke "+x+" Dibayar Rp. "+y+"<br>")
}
</script>
</BODY>
</HTML>
98
Gambar 17.6 Hasil FOR Nested
Setiap kali pernyataan for terluar dikerjakan maka variabel x akan dikerjakan
sebanyak 5 kali. Setiap proses mengerjakan akan dicetak nilai x dan y.
17.7 Statement FOR…..IN

Pernyataan for………in digunakan untuk proses mengulang anggota suatu obyek.
Sintanya sebagai berikut :
Keterangan :
Counter : jumlah counter/properti dalam obyek
Nama_obyek : obyek yang akan di loop
Pernyataan : pernyataan yang akan dijalankan selama loop
Contoh potongan programnya adalah sebagai berikut :

kendaraan.jenis = ”mobil”
kendaraan.merek = ”honda”
kendaraan.tipe = ”jazz”
for (counter in kendaraan)
(kendaraan += mobil(counter)+” “)
Penjelasan program diatas yaitu obyeknya kendaraan, propertinya adalah jenis,
merek dan tipe. Dan setiap properti memiliki indek yang dimulai dari 0.
Jadi obyek kendaraan diatas memiliki counter berikut :
Kendaraan[0] = kendaraan.jenis
Kendaraan[1] = kendaraan.merek
Kendaraan[2] = kendaraan.tipe
99
Untuk program lengkap dan hasilnya akan dibahas secara rinci pada bab XVIII
tentang obyek.
17.8 Statement WHILE

Digunakan untuk melakukan atau menjalankan suatu pernyataan berulang-ulang
selama kondisi benar. Bila kondisi sudah tidak terpenuhi atau salah maka perulangan
akan dihentikan. Sintaknya sebagai berikut :
Contoh program berikut ini menjelaskan penggunaan statement while. Dan

badingkan dengan program dibawahnya yang menggunakan statement for. Hasilnya
sama namun perhatikan peletakan kondisinya yang berbeda.
<HTML>
<HEAD><TITLE>Contoh Penggunaan Statement WHILE</TITLE></HEAD>
<BODY>
var nilai = 1
while (nilai < 10)
{
document.write("Nilainya sekarang : "+nilai+"<Br>")
nilai += 1
}
</script>
</BODY>
</HTML>
<HTML >
<BODY>
for (nilai=1; nilai < 10; nilai+=1)
{
document.write("Nilainya sekarang : "+nilai+"<Br>")
}
</script>
</BODY>
</HTML>
100
Gambar 17.7 Hasil perulangan WHILE
Statement while juga dapat ditulis secara bertingkat atau nested. Contoh programnya
sebagai berikut :
<HTML>
<BODY>
x = 1
while (x < 4)
{
y = 1
while (y < 2)
document.writeln(" "+x+" "+ y++ +"<br>")
x++
}
</script>
</BODY>
</HTML>
Gambar 17.8 Contoh perulangan WHILE nested untuk matrik
101
17.9 Statement DO…..WHILE
Statement ini mulai diperkenalkan pada JavaScript 2.1 fungsinya hampir sama
dengan statement while. Perbedaannya terletak pada pengujian kondisi pada akhir
kalang. Perlu diperhatikan bahwa pernyataan dalam kalang do…..while selalu
dieksekusi paling tidak satu kali (meskipun kondisi tidak terpenuhi). Sebaliknya
pernyataan dalam kalang while mungkin tidak pernah eksekusi (meskipun kondisi
tidak terpenuhi). Berikut ini contoh penggunaan statement do…..while.
<HTML>
<HEAD><TITLE></TITLE></HEAD>
<BODY>
x = 1
do
{
y = 1
do
{
document.writeln(" "+x+" "+ y++ +"<br>")
}
while (y < 3)
x++
}
while (x < 4)
</script></BODY></HTML>
Gambar 17.9 Hasil perulangan DO…WHILE
17.10 Statement BREAK dan CONTINUE

Dalam keadaan tertentu kadang anda menginginkan proses perulangan berhenti
ditengah jalan. Untuk keadaan yang demikian digunakan JavaScript menyediakan
statement break. Statement break dan continue dapat digunakan pada for atau
while. Statement continue digunakan untuk mengembalikan proses perulangan
102
yang berhenti karena statement break. Berikut contoh program untuk statement
break.
<HTML>
<HEAD><TITLE>Contoh Statement BREAK dan CONTINUE</TITLE></HEAD>
<BODY>
var nilai = 0
while (nilai >= 0)
{
nilai = nilai + 1
document.write("Hitungan ke : "+nilai+" <br>")
if (nilai > 3)
{
break
}
}
document.write("Hitungan terakhir keluar ...."+"<br>")
</script>
</BODY>
</HTML>
Gambar 17.10 Hasil statement Break
Dari program diatas dapat dijelaskan sebagai berikut : jika dilihat kalang diatas tidak
pernah berakhir karena nilai var nilai >= 0 artinya while akan menghitung terus
sampai angka berapapun. Namun karena ada kondisi nilai > 3 dan menjumpai
statement break maka proses berhenti pada perulangan terakhir dan keluar dari
statement while. Contoh dari penggunaan statement continue sebagai berikut :
<HTML>
<HEAD><TITLE>Contoh Statement BREAK dan CONTINUE</TITLE></HEAD>
<BODY>
for (i = 0; i < 15; i++)
{
if ((i % 2) != 0)
continue
document.write(" "+i+"<br>")
103
}
</script>
</BODY>
</HTML>
Alur program diatas yaitu kondisi dalam for akan melakukan perulangan sebanyak
15 kali dengan nilai I bertambah 1. Ketika I habis dibagi 2 dan tidak sama dengan
nol, maka proses akan melanjutnya pernyataan document.write, karena menjumpai
statement continue.
Gambar 17.11 Hasil statement Continue
17.11 Statement WITH

Digunakan untuk memberi tahu obyek yang sedang digunakan. Dan setiap referensi
variabel dalam pernyataan berikutnya akan merujuk ke obyek tersebut. Sintak dari
statement with sebagai berikut :
Semua properti yang ada di dalam with akan merujuk kepada obyek bersangkutan.
Sehingga anda tidak perlu menulis obyek dengan lengkap, seperti
kendaraan.jenis, kendaraan.tipe dan sebagainya. Contoh program berikut ini
menjelaskan.
104
With (kendaraan)
{
jenis=”mobil”
merek=”honda”
tipe=”jazz”
}
17.12 Latihan
1. Buatlah script perulangan untuk membuat sebuah matrik 3 x 3 dengan
menggunakan FOR NESTED.
2. Buatlah script untuk menghitung berapa kali angsuran jika diketahui besarnya
pinjaman Rp. 5.000.000 dan setiap angsuran sebesar Rp. 200.000, tampilan yang
diinginkan seperti gambar 17.6
oooO0Oooo
105
PW
etmbshnm

1. Pembaca mengetahui manfaat fungsi pada JavaScript.
2. Pembaca dapat membuat fungsi dan fungsi tersarang.
3. Pembaca dapat menggunakan fungsi.
18.2 Fungsi Buatan Sendiri

Fungsi adalah kumpulan kode-kode script yang mempunyai tugas tertentu. Pada
JavaScript fungsi ada dua macam yaitu fungsi buatan sendiri dan fungsi bawaan
(default). Fungsi disebut juga modul program.
Aturan Membuat Fungsi

Aturan membuat fungsi pada JavaScript yaitu :
1. Diawali kata function. Contoh :
2. Nama harus diikuti tanda ( ). Diusahakan nama fungsi menunjukkan isi dari
fungsi. Contoh :
Function menyapa()
3. Nama fungsi dapat diikuti parameter dan ditulis dalam tanda ( ). Contoh :
Function rumus(x,y)
4. Isi fungsi ditulis dalam tanda kurung kurawal { }. Contoh :

Function gabungan()
{
var kata_1 = “saya bisa”;
var kata_2 = “membuat fungsi”;
var kata_3 = “pada JavaScript”;
var hasil = kata_1 + kata_2 + kata_3
document.write.(hasil)
}
106
Setiap akhir baris fungsi, untuk memisahkan setiap kelompok script atau baris
dipisahkan tanda ; dan pada baris terakhir tidak perlu.
Sintak Dan Penggunaan Fungsi
Letak fungsi terdapat dalam JavaScript, contoh :
<HTML>
<HEAD><TITLE>Contoh Membuat Fungsi</TITLE></HEAD>
<BODY>
function tampil()
{
document.write("belajar fungsi javascript")
}
</script>
</BODY>
</HTML>
Fungsi tampil() diatas berisi teks “belajar fungsi JavaScript” yang diletakkan di
antara <script language=”JavaScript”> dan </script>. Fungsi dapat dibuat
tanpa parameter, seperti contoh diatas.
Parameter Dalam Fungsi

Parameter adalah variabel yang akan di proses oleh pernyataan-pernyataan dalam
fungsi. Berikut ini contoh membuat fungsi dengan variabel x dan y dimana sebagai
parameternya.
<HTML>
<HEAD><TITLE>Contoh Fungsi Dengan Parameter</TITLE></HEAD>
<BODY>
function hitung(x,y)
{
var hasil = x * y
document.write("hasil fungsi hitung adalah : "+hasil+" ")
}
</script>
</BODY>
</HTML>
107
Menggunakan Fungsi
Cara menggunakan fungsi pada JavaScript ada tiga cara yaitu :
1. Fungsi dipanggil dari dalam JavaScript.
2. Fungsi dipanggil dari dalam fungsi itu sendiri, disebut juga fungsi rekursif.
3. Fungsi dipanggil dari dalam fungsi yang lain.
Berikut ini contoh fungsi yang dipanggil dari dalam JavaScript yaitu, baik dengan
parameter maupun tanpa parameter (menggunakan program sebelumnya). Dan fungsi
pada JavaScript dapat dipanggil dari bagian <head> dan bagian <body>.
<HTML>
<HEAD>
<TITLE>Contoh Membuat Fungsi</TITLE>
</HEAD>
<BODY>
function tampil()
{
}
tampil()
</script>
</BODY>
</HTML>
Gambar 18.1 Function dalam <body>.
<HTML>
<HEAD>
<TITLE>Contoh Membuat Fungsi</TITLE>
function tampil()
{
}
tampil()
</script>
</HEAD>
<BODY>
</BODY>
</HTML>
Gambar 18.2 Function dalam <head>
Dari kedua contoh program diatas terlihat bahwa fungsi dapat diletakkan dan
dipanggil pada bagian <head> seperti gambar 16.1 atau diletakkan dan dipanggil
pada bagian <body> seperti gambar 16.2. Hasilnya akan sama seperti gambar 16.3.
108
Gambar 18.3 Hasil pemanggilan function
Berikut ini contoh fungsi dengan parameter, dimana fungsi terletak pada bagian
<head> dan fungsi dipanggil pada bagian <body> seperti gambar 16.4.
<HTML>
<HEAD>
<TITLE>Contoh Membuat Fungsi Dengan Parameter</TITLE>
function hitung(x,y)
{
var hasil = x * y
document.write("hasil fungsi hitung adalah : "+hasil+" ")
}
</script>
</HEAD>
<BODY>
<script>
hitung(3,8)
</script>
</BODY>
</HTML>
Gambar 18.4 Memanggil function pada <body>
18.3 Fungsi Dalam Fungsi

Memanggil fungsi dalam fungsi sering disebut rekursif atau berulang. Agar mudah
memahami fungsi rekursif adalah contoh menghitung nilai faktorial yaitu hasil
perkalian suatu angka dari 1 sampai angka terakhir. Nilai faktorial dari 0 dan 1
adalah 1. Rumus faktorial adalah x! = x * (x-1)! Artinya faktorial dari x adalah x
dikalikan faktorial dari x-1. Contoh :
Nilai faktorial dari 2 : 1 x 2 = 2

Nilai faktorial dari 3 : 1 x 2 x 3 = 6
Nilai faktorial dari 4 : 1 x 2 x 3 x 4 = 24
Implementasi dari rumus rekursif diatas ke JavaScript adalah seperti program

dibawah ini. Perlu anda perhatikan bahwa fungsi rekursif diletakkan pada bagian
109
<head> dan dipanggil pada bagian <body>. Dan fungsi rekursif mempunyai
parameter bernama x.
<HTML>
<HEAD><TITLE>Contoh Fungsi Memanggil Fungsi</TITLE>
function rekursif(x)
{
if ((x == 0) || (x == 1))
{
return 1
}
else
{
hasil=(x * rekursif(x-1))
return hasil
}
}
</script>
</HEAD>
<BODY>
for (ulangi = 0; ulangi < 5; ulangi++)
{
document.write("Faktorial: "+ulangi+" : "+rekursif(ulangi)+"<br>")
}
</script>
</BODY>
</HTML>
Gambar 18.5 Fungsi memanggil fungsi pada faktorial
Memanggil Fungsi Dalam Fungsi

Fungsi dapat dipanggil dalam fungsi. Berikut ini contoh programnya :
<HTML>
<HEAD><TITLE>Contoh Membuat Fungsi Memanggil Fungsi</TITLE>
function menyapa()
{
document.write("selamat deh semoga berhasil")
110
}
function membalas()
{
document.write("saya sedang membuat fungsi dalam fungsi","<br>");
menyapa()
}
membalas()
</script>
</HEAD>
<BODY>
</BODY>
</HTML>
Gambar 18.6 Memanggil fungsi dalam fungsi
18.4 Fungsi Built-In

JavaScript juga menyediakan fungsi built-in yang langsung bisa digunakan, fungsi-
fungsi tersebut diantaranya :
FUNGSI parseInt()
Digunakan untuk mengkonversi nilai string menjadi integer/numerik dengan basis
tertentu. Contoh : 100(basis 10), 100(basis 3), 40(basis 2). Sintaknya sebagai berikut :
ParseInt(“nilai string”, nilai basis)
Jika parameter nilai basis tidak disebutkan maka otomatis akan dianggap basis 10.
Dan bila nilai string tidak dapat di konversi maka fungsi parseInt akan
mengembalikan nilai NaN. Berikut ini contoh programnya.
FUNGSI parseFloat()
Digunakan untuk mengkonversi nilai string menjadi nilai floating-point (angka
pecahan atau angka berpangkat). Sintaknya sebagai berikut :
parseFloat(string)
111
Fungsi parseFloat mengembalikan angka real hasil pengkonversiannya. Jika nilai
string tidak dapat dikonversi maka fungsi akan memberikan nilai NaN. Berikut
contoh penggunaan fungsi parseFloat.
<HTML>
<HEAD><TITLE>Contoh Fungsi parseInt dan parseFloat</TITLE></HEAD>
<BODY>
{
document.write("1000 basis 10 = "+parseInt("1000", 10)+"<br>")
document.write("Hasil dari '10' : "+parseFloat("10")+"<br>")
document.write("Hasil dari '2 apa ' : "+parseFloat("2 apa")+" ")
}
</script>
</BODY>
</HTML>
Gambar 18.7 Implementasi fungsi parseFloat dan parseInt
FUNGSI isNaN()
isNaN kepanjangannya adalah is not a number. Digunakan untuk menentukan apakah
suatu nilai bertipe numerik atau bukan. Bila nilaid saat diuji bertipe numerik maka
menghasilkan nilai false, jika string maka bernilai true. Sintaknya sebagai berikut :
isNaN(nilaid)
Berikut ini contoh programnya.

<HTML>
<HEAD><TITLE>Contoh Fungsi isNan</TITLE></HEAD>
<BODY>
{
document.write("23 adalah angka ? ",isNaN(23),"<br>")
document.write("100 adalah angka ? "+isNaN(100)+"<br>")
112
document.write("'kami' bukan angka ? "+isNaN('kami')+"<br>")
document.write("'baca' bukan angka ? "+isNaN('baca')+"<br>")
}
</script>
</BODY>
Gambar 18.8 Hasil dari fungsi isNaN
FUNGSI eval()
Digunakan untuk mengeksekusi atau menguji suatu nilai aritmatika. Sintaknya
adalah :
eval(pernyataan)
Contoh program dan hasilnya sebagai berikut :

<HTML>
<HEAD><TITLE>Contoh Fungsi eval</TITLE></HEAD>
<BODY>
var x=prompt("Maukkan pernyataan aritmatika","")
{
document.write("Hasil dari proses eval() adalah : "+eval(x)+"")
}
</script>
</BODY>
</HTML>
Gambar 18.9 Proses input data pada eval()
113
Gambar 18.10 Hasil fungsi eval()
FUNGSI escape() dan unscape()

Fungsi escape() digunakan untuk menghasilkan kode ASCII. Tujuannya adalah agar
string dapat dibaca oleh setiap komputer. Fungsi escape() mengganti semua
karakter non-alfanumerik ke bentuk “%xx”, dimana xx adalah nomor karakter
ASCII. Sintaknya adalah :
escape(“karakter”)
<HTML>
<HEAD><TITLE>Contoh Fungsi escape dan unescape</TITLE></HEAD>
<BODY>
{
document.write("Kode ASCII '%' yaitu "+escape("%")+"<br>")
document.write("Kode ASCII '(E' yaitu "+escape("(E")+"<br>")
document.write("Kode ASCII '%3D' yaitu "+unescape("%3D")+"<br>")
document.write("Kode ASCII '%28E' yaitu "+unescape("%28E")+"")
}
</script>
</BODY>
</HTML>
Fungsi unescape() untuk menghasilkan karakter dari kode ASCII. Sintaknya adalah :
unescape(“%string”)
Gambar 18.11 Hasil dari fungsi escape dan Unescape
114
18.5 Latihan
1. Buatlah script untuk menguji perhitungan berikut: hasil = 3 * 5 / 4 + 2 - 3.
2. Buatlah fungsi untuk menghitung pada soal no. 1, nama variabel ditentukan
sendiri dan hasilnya dipanggil pada bagian <body>.
3. Berapakah hasil dari kebalikan nilai berikut ini:
(UE
%6H
=6
%#$
oooO0Oooo
115
PX
dudms

1. Pembaca dapat mengetahui berbagai event dalam Javascript.
2. Pembaca dapat menggunakan event sesuai fungsinya.
3. Pembaca mampu membuat fungsi yang mengandung event Javascript.
4. Pembaca mampu menciptakan event handler sendiri.
19.2 Daftar Event

Event adalah suatu kejadian atau aksi dari sebuah obyek. Jika sebuah event di proses
maka akan menyebabkan script melakukan aksinya. Beberapa contoh event adalah :
memasukkan data pada kotak teks, melakukan penekanan tombol dan memilih teks.
Event pada JavaScript bersifat non case sensitive, namun demikian sebaiknya tetap
dibiasakan menulis event seperti dalam tabel. Berikut tabel 18 yang memuat
beberapa macam event JavaScript.
Tabel 19.1 Daftar event pada Javascript

Event Keterangan
Abort Terjadi jika user menghentikan pemuatan citra dengan <img>
karena user menekan tombol stop atau klik elemen link.
Blur Terjadi jika sebuah elemen form ditinggal fokus masukan karena
user menekan tombol atau klik elemen form.
change Terjadi jika isi input dari suatu elemen form diubah oleh user.
Click Terjadi jika user menekan sebuah tombol atau link.
dbClick Terjadi jika user menekan ganda sebuah elemen form atau link.
dragdrop Terjadi jika user melakukan drop sebuah obyek ke jendela
browser.
error Terjadi jika ada kesalahan saat browser menampilkan dokumen
atau citra.
keyDown Terjadi jika user menekan tombol keyboard.
keyUp Terjadi jika user melepas tombol keyboard.
keyPress Terjadi jika user menekan tombol keyboard dan menahannya.
Event ini akan diproses setelah event KeyDown bila penanganan
onKeyDown mengembalikan nilai true.
load Terjadi jika browser selesai menampilkan dokumen.
mouseDown Terjadi bila user menekan tombol mouse.
116
mouseUp Teradi jika user melepas tombol mouse.
mouseMove Terjadi jika user menggerakkan kursor mouse.
move Terjadi jika user menggerakkan jendela aau frame.
mouseOut Terjadi jika kursor mouse keluar dari area link atau area citra.
mouseOver Terjadi jika kursor mouse berada di atas sebuah link, maka akan
muncul keterangan pada status bar.
reset Terjadi jika user menekan tombol reset.
select Terjadi jika user memilih sebagian atau seluruh teks pada elemen
form yang berupa textbox.
submit Terjadi jika user menekan tombol submit.
unLoad Terjadi jika user keluar dari dokumen aktif.
rezise Terjadi bila user atau skrip mengubah ukuran jendela atau frame.
19.3 Event Handler

Event handler artinya menangani kejadian. Maksudnya kode-kode JavaScript yang
akan dijalankan jika event dieksekusi. Sintak dari event handler yaitu :
onNamaEvent = “kode JavaScript”
Keterangan :
onNamaEvent : jenis event JavaScript yang akan digunakan.
Kode JavaScript : kode JavaScript yang akan dikerjakan jika event dieksekusi.
Contoh penulisan event handler sebagai berikut :

onBlur=”document.write(‘ halo apa kabar’ )”
onMouseOver=tekan;
onFocus=”document.write(‘ sudah bisa kah javascript?’ )”
Event handler dapat dipanggil dengan dua cara yaitu :

1. Memanggil melalui fungsi.
2. Memanggil secara langsung.
Memanggil Melalui Fungsi

Memanggil event handler melalui fungsi sintaknya sebagai berikut :
onNamaEvent = “nama_fungsi(parameter)”
Parameter dalam fungsi bersifat opsional artinya harus ditulis jika ada parameternya
atau tidak. Berikut ini contoh program dan hasilnya memanggil event handler dari
fungsi.
117
<HTML>
<HEAD><TITLE>Contoh Memanggil Event Handler</TITLE></HEAD>
<BODY>
function tampil()
{
document.write("SELAMAT ANDA SUDAH BERHASIL")
}
</script>
<h3>Silahkan tekan tombol link</h3>
<a href="http://www.firefox.com" onClick="tampil()">Klik disini...
</a>
</BODY>
</HTML>
Gambar 19.1 Hasil script event yang memanggil fungsi
Gambar 19.2 Hasil fungsi yang dipanggil event
Penjelasan program diatas adalah jika link klik disini… ditekan, maka event
handler onClick memanggil fungsi tampil() dan akan ditampilkan pada browser.
Memanggil Secara Langsung

Memanggil event handler secara langsung sintaknya adalah :
OnNamaEvent = “kode JavaScript”
118
Berikut ini contoh program sederhana dan hasilnya memanggil event handler secara
langsung.
<HTML>
<HEAD><TITLE>Contoh Penggunaan Event Handler</TITLE></HEAD>
<BODY>
<h3><center>MEMANGGIL EVENT HANDLER SECARA LANGSUNG</center></h3>
<br>
<a href="http://www.firefo x.com" onclick="document.write('Haloo
?')">
Klik disini donk.....
</a>
<br>
<a href="http://www.firefox.com" onclick="document.write('Haloo
juga')">
Klik disini juga.... ya...
</a>
</script>
</BODY>
</HTML>
Gambar 19.3 Contoh memanggil event secara langsung
Gambar 19. Hasil setelah event dikerjakan
Jika link pertama di pilih klik disini donk… maka event handler akan
menjalankan program dalam document.write seperti gambar 17.3. Bila link kedua
di pilih klik disini juga …ya… maka event handler akan menjalankan program
dalam document.write.
119
19.4 Implementasi Event
Event onFocus
Program dibawah ini mengimplementasikan penggunaan event onFocus pada daftar
pengunjung. Setiap kali meletakkan kursor mouse pada elemen textbox, maka pada
status bar akan ditampilkan sebuah keterangan dari textbox tersebut. Berikut ini
contoh program dan hasilnya.
<HTML>
<HEAD><TITLE>Implementasi Event</TITLE></HEAD>
<BODY>
<h3><center><u>ISIAN DAFTAR PENGUNJUNG</u></center></h3>
<pre>
<form name=”contoh”>
Nama depan : <input type=textbox name="Nm_awal"
onFocus="window.status='Ketik nama depan anda' ">
<br>
Nama akhir : <input type=textbox name="Nm_akhir"
onFocus="window.status='Ketik nama akhir anda' ">
<br>
Alamat asal : <input type=textbox name="almt"
onFocus="window.status='Ketik alamat lengkap' ">
<br>
Pesannya : <input type=textbox name="pesan"
onFocus="window.status='Ketik
pesan anda' ">
</form>
</BODY>
</HTML>
Gambar 19.5 Hasil event onFocus
Event onClick
Event ini biasanya digunakan untuk melakukan suatu proses pada elemen tombol
atau link. Event onClick digunakan untuk elemen reset, submit, button, file.
Masih menggunakan contoh program sebelumnya berikut ini program dan hasilnya.
120
<HTML>
<HEAD><TITLE>Implementasi onClick()</TITLE>
function kirim()
{
alert("Aplikasi telah terkirim \n"+ document.contoh.awal.value+"
"+document.contoh.akhir.value)
window.open("http://www.mozilla.com")
}
function kembali()
{
alert("Data isian telah dihapus")
document.clear()
}
</script></HEAD>
<BODY>
<h3><center><u>ISIAN DAFTAR PENGUNJUNG</u></center></h3>
<form name="contoh">
Nama depan : <input type=textbox name="awal" maxlength=20 size=22
onFocus="window.status='Ketik nama depan anda' ">
<br>
Nama akhir : <input type=textbox name="akhir" maxlength=20 size=22
onFocus="window.status='Ketik nama akhir anda' ">
<br>
Alamat asal : <input type=textbox name="almt" maxlength=40 size=42
onFocus="window.status='Ketik alamat lengkap' ">
<br>
Pesannya : <textarea name="pesan" cols=35 rows=5
onFocus="window.status='Ketik pesan anda' "> </textarea>
<br><br>
<input type="submit" value="Kirim....." onClick="kirim()">
<input type="reset" value="Kembali" onclick="kembali()">
</form>
</BODY>
</HTML>
Gambar 19.6 Tampilan jika fungsi kembeli() dipanggil
Gambar 19.7 Tampilan jika fungsi kirim() dipanggil
121
Penjelasan program diatas, yaitu saat tombol kirim di klik maka fungsi kirim() akan
dipanggil dan hasilnya seperti gambar 17.7, jika tombol kembali ditekan maka fungsi
kembali() akan dipanggil dan hasilnya seperti gambar 17.6.
Event onMouseOver
Penggunaan event onMouseOver dapat dilihat pada potpngan program dibawah yang
telah dimodifikasi dari program sebelumnya.
Pesannya : <textarea name="pesan" cols=35 rows=5

onFocus="window.status='Ketik pesan anda' "> </textarea>
<br><br>
<input type="submit" value="Kirim....." onClick="kirim()">
<input type="reset" value="Kembali" onclick="kembali()">
</form>
<hr>
<a href="mailto:wahju_ok@yahoo.co.id" subject="Mohon kirim brosur"
onMouseOver="window.status='Kirim brosur' ">
email: wahju_ok@yahoo.co.id
</a>
</BODY>
</HTML>
Gambar 19.8 Hasil dari event onMouseIver
19.5 Latihan
Disainlah sebuah form isian tentang Pendaftaran Mahasiswa Baru dengan
memanfaatkan event handler yang ada pada Javascript maupun event handler buatan
sendiri yang dikombinasikan dengan fungsi. Dimana setiap fungsi yang dipanggil
mengeksekusi suatu statement. Pada form tersebut harus mengandung Tombol
Kirim, Tombol Informasi, Tombol Kembali dan Tombol Login.
oooO0Oooo
122
QO
naidbs

1. Pembaca mengetahui elemen pembentuk obyek.
2. Pembaca dapat memahami properti dan metode pada obyek.
3. Pembaca dapat mengetahui tahap-tahap menciptakan obyek.
4. Pembaca mampu menciptakan obyek.
20.2 Pendahuluan
JavaScript adalah salah satu bahasa pemrograman yang mendukung OOP (object
oriented programming). Konsep obyek sebenarnya adalah perluasan dari tipe data
primitif. Dengan obyek anda dapat mengelompokkan atau mengkapsulkan beberapa
variabel bersamaan dengan fungsi ke dalam satu kesatuan. Variabel dalam obyek
disebut dengan properti dan fungsi dalam obyek disebut dengan metode. JavaScript
menggunakan obyek-obyek ini untuk memanipulasi tampilan browser serta untuk
melakukan perhitungan yang terdapat pada JavaScript.
Properti
Setiap obyek memiliki properti. Properti adalah sifat yang melekat pada obyek.
Sebagai contoh :
1. Obyek kendaraan propertinya warna biru, merk honda, jenis mpv, tipe jazz.
2. Obyek textbox propertinya warna putih, bentuk kotak persegi.
Metode
Metode adalah tindakan atau perbuatan yang dilakukan oleh obyek saat dieksekusi.
Sebagai contoh :
1. Obyek kendaraan mempunyai metode berputar, maju, mundur dan berhenti.
123
2. Obyek textbox mempunyai metode menerima, menghapus dan menampilkan
teks.
Untuk memudahkan dalam memahami obyek JavaScript, kita ambil contoh obyek
sepeda motor. Setiap obyek sepeda motor memiliki properti :
Merk : suzuki, honda, yamaha, kawasaki.
Warna : hitam, biru, merah, kuning.
Tipe : kharisma, shogun, vega, yupiter, supra.
Tahun pembuatan : 2000, 2001, 2002.
Dan setiap sepeda motor memiliki metode :

Berjalan : maju, mundur, berputar dan berhenti.
Contoh lainnya, obyek manusia. Setiap manusia memiliki properti/sifat yaitu :

Jenis kelamin : laki-laki.
Warna kulit : hitam, putih, sawo matang, kuning langsat.
Jenis rambut : lurus, keriting, ikal.
Gaya berbicara : lembut, kasar.
Umur manusia : 20 th, 55 th, 40 th.
Setiap obyek orang memiliki metode/perbuatan/aksi yaitu :

Berjalan, berbicara, berteriak, bekerja, tidur, makan, minum.
20.3 Mendefinisikan Obyek

Untuk mendefinisikan obyek menggunakan kata function. Sintaknya adalah :
Function nama_obyek(properti1,properti2,properti3,…..)
{
this.properti1=properti1;
}
Misal anda ingin mendefinisikan obyek mahasiswa yang terdiri dari properti nama,
alamat, jurusan dan ip_kum. Maka untuk mendefinisikan obyek tersebut yaitu :
124
function mahasiswa(nama,alamat,jurusan,ip_kum)
{
this.nama=nama;
this.alamat=alamat;
this.jurusan=jurusan;
this.ip_kum=ip_kum;
}
Selanjutnya struktur fungsi diatas disebut dengan konstruktor, karena

mengkonstruksikan sebuah obyek dengan function mahasiswa(). Empat pernyataan
dalam konstruktor diatas digunakan untuk memberikan nilai ke setiap properti obyek
mahasiswa.
This merupakan properti penunjuk ke obyek yang bersangkutan. Properti this

diperlukan karena pernyataan diatas hanya berisi definisi obyek. Anda belum
menciptakan obyek. Untuk menciptakan obyek digunakan perintah new yang dibahas
pada subbab berikut ini.
20.4 Menciptakan Obyek

setelah obyek didefinisikan langkah berikutnya adalah menciptakan obyek. Untuk
membuat obyek sintaknya adalah :
Nama_instance=new nama_obyek(isi_properti)
Contoh menciptakan obyek :

Fajar = new mahasiswa(“Fajar”,”Semarang”,”Akuntansi”,”2.67”)
Nanik = new mahasiswa(“Nanik”,”Surabaya”,”Informatika”,”3.01”)
Dari contoh diatas berdasarkan pada definisi obyek mahasiswa, maka sekarang setiap
obyek mahasiswa telah memiliki properti.
20.5 Menentukan Isi Obyek

Setelah mendefinisikan dan menciptakan obyek, langkah selanjutnya adalah
menentukn isi obyek. Sintaknya sebagia berikut :
Nama_obyek.properti = isi_properti
125
atau
nama_obyek.[urutan_definisi_obyek] = isi_properti
setiap properti memiliki nomor urut yang di mulai dari nol “0”, berdasarkan urutan
saat mendefinisikan. Contoh :
mahasiswa.nama = “Fajar”
mahasiswa.alamat = “ Semarang”
mahasiswa.jurusan = “Auntansi”
mahasiswa.ip_kum = “2.67”
mahasiswa.nama = “Nanik”
mahasiswa.alamat = ”Surabaya”
mahasiswa.jurusan = ”Informatika”
mahasiswa.ip_kum = ”3.01”
Bentuk diatas dapat juga ditulis menggunakan urutan definisi, misalnya sebagai
berikut :
mahasiswa.[0] = “Fajar”
mahasiswa.[1] = “ Semarang”
mahasiswa.[2] = “Auntansi”
mahasiswa.[3] = “2.67”
mahasiswa.[0] = “Nanik”
mahasiswa.[1] = “ Surabaya”
mahasiswa.[2] = “Informatika”
mahasiswa.[3] = “3.01”
Untuk contoh lengkap program dan hasilnya pada JavaScript sebagai berikut :
<HTML>
<HEAD><TITLE>Contoh Menciptakan Obyek</TITLE></HEAD>
<BODY>
// mendefinisikan obyek mahasiswa
{
this.nama=nama
this.alamat=alamat
this.jurusan=jurusan
this.ip_kum=ip_kum
}
//membuat obyek
fajar = new mahasiswa("Fajar","Semarang","Akuntansi","2.67")
nanik = new mahasiswa("Nanik","Surabaya","Informatika","3.01")
126
//menentukan isi obyek
function tampil(nm_obyek,string)
{
document.write("<b>"+string+"</b>"+"<br>")
document.write("Nama Mhs : "+nm_obyek.nama+"<br>")
document.write("Alamat : "+nm_obyek.alamat+"<br>")
document.write("Jurusan : "+nm_obyek.jurusan+"<br>")
document.write("IP Kum. : "+nm_obyek.ip_kum+"<br><br>")
}
//menampilkan obyek
tampil(fajar,"Ini obyeknya mahasiswa fajar :")
tampil(nanik,"Ini obyeknya mahasiswa nanik :")
</script>
</BODY>
</HTML>
Gambar 191 Menciptakan obyek pada Javascript
20.6 Statement For…In

Pada Bab 15 telah disinggung tentang statement for…in yaitu digunakan untuk
melakukan perulangan berdasarkan properti obyek. Untuk memperjelas bagaimana
menciptakan obyek dan penggunaan for…..in disini akan diberikan contoh program
lengkap modifikasi dari program sebelumnya.
<HTML>
<HEAD><TITLE>Menciptakan Obyek dan Statement FOR..IN</TITLE></HEAD>
<BODY>
{
this.nama=nama
this.alamat=alamat
127
this.ip_kum=ip_kum
}
// membuat obyek
// menentukan isi obyek pada for...in
function buat(obyek)
{
for (var x in obyek)
document.write(" "+obyek[x]+"<br>")
document.write(" "+"<br>")
}
// menampilkan obyek
buat(fajar,"Ini obyeknya mahasiswa fajar :")
buat(nanik,"Ini obyeknya mahasiswa nanik :")
</script>
</BODY>
</HTML>
Gambar 19.2 Menciptakan obyek dengan For..In
20.7 Membuat Metode

Sebuah obyek terdiri dari properti dan metode. Pada JavaScript metode didefinisikan
sebagai function. Jadi caranya sama dengan membuat fungsi. Sintak untuk
membuat metode yaitu :
128
Keterangan :
Nama_metode() : nama fungsi yang dijadikan sebuah metode
Nama_obyek() : nama obyek yang mengandung metode terkait.
Properti : nama properti yang mengandung fungsi metode.
Contoh metode adalah :

Function metode_mesin(kapasitas)
{
if (kapasitas == “100 cc”)
{
harga = 10500000
}
{
harga = 11500000
{
{
harga == 12250000
}
}
Metode diatas mengandung sebuah fungsi yang akan menentukan kapasitas mesin
sepeda motor. Pada saat mendefinisikan obyek, metode tersebut juga harus
disertakan sebagai bagian dari propertinya. Perhatikan definisi obyek berikut ini :
Function sepeda_motor(merk, tipe, warna,kapasitas)

{
this.merk = merk
this.tipe = tipe
this.warna = warna
this.kapasitas = kapasitas
}
Berikut ini contoh dari program sebelumnya yang telah dimodifikasi, dan ada
metodenya sehingga obyek mampu melakukan aksi atau perbuatan.
<HTML>
<HEAD><TITLE>Menciptakan Obyek dan Statement FOR..IN</TITLE></HEAD>
<BODY>
function mahasiswa(nama,alamat,jurusan,ip_kum,keterangan)
{
this.nama=nama
this.alamat=alamat
this.ip_kum=ip_kum
this.keterangan=metode_hasil(ip_kum)
}
129
// membuat obyek
// membuat metode
function metode_hasil(ip_kum)
{
if (ip_kum >= 3.00)
{
var keterangan = "Lulus"
}
if (ip_kum <= 3.00)
{
var keterangan = "Belul Lulus"
}
return keterangan
}
// menentukan isi obyek pada for...in
function buat(obyek)
{
for (var x in obyek)
document.write(" "+obyek[x]+"<br>")
document.write(" "+"<br>")
}
// menampilkan obyek
buat(fajar,"Ini obyeknya mahasiswa fajar :")
buat(nanik,"Ini obyeknya mahasiswa nanik :")
</script>
</BODY>
</HTML>
Dari program diatas jika dibandingkan dengan program sebelumnya, maka tampak
bahwa obyek yang mengandung metode ternyata mampu melakukan aksi yaitu
berupa hasil/status seorang mahasiswa. Sedangkan pada obyek sebelumnya hanya
mampu mempunyai properti atau sifat dari setiap mahasiswa tersebut. Lihat gambar
20.3 bahwa mahasiswa bisa lulus atau tidak lulus.
Gambar 19.3 Obyek dengan metode

130
20.8 Latihan
Buatlah sebuah obyek tentang penjualan sepeda motor Merk A harga Rp.
11.500.000, Merk B harga Rp. 11.800.000 dan Merk C harga 10.750.000 dengan
data bebas. Tentukan properti dan metode yang melekat pada obyek tersebut. Serta
setiap obyek mempunyai metode, sehingga dapat diperoleh status Diskon dan Tidak
Diskon. Jika status Diskon mendapat potongan 5% dari harga jual.
oooO0Oooo
131
QP
naidbs?athksLhm

1. Pembaca mengetahui berbagai fungsi Built-In Javascript.
2. Pembaca mampu menggunakan fungsi-fungsi Built-In Javascript.
21.2 Pendahuluan
JavaScript menyediakan obyek bawaan (object built-in) yang langsung dapat
digunakan untuk memanipulasi elemen pada JavaScript. Obyek built-in mempunyai
banyak properti dan metode yang dapat dilihat pada lampiran. Obyek built-in
tersebut adalah :
1. Obyek Array
2. Obyek Boolean
3. Obyek Date
4. Obyek Function
5. Obyek Math
6. Obyek Number
7. Obyek String
21.3 Obyek Array

Adalah obyek yang digunakan untuk menangani jenis bilangan array. Kelebihan
obyek array adalah mempunyai dimensi satu, dua dan dimensi tiga. Ukuran array
JavaScript dapat berubah secara dinamis. Contoh : Motor[3] = “Motor A”
Artinya array motor mempunyai tiga elemen yaitu motor[0], motor[1] dan
motor[2]. Namun hanya satu elemen yang sudah ada nilainya, elemen lain masih
bernilai NULL. NULL tidak sama dengan nol. NULL artiya bahwa data boleh
132
kosong atau tidak diisi, dan sewaktu-waktu dapat di update untuk diisi data. Elemen
array juga dapat diberi nilai pada saat array diciptakan. Contoh :
var motor = new array(“”,”CepatMoto”,”HebatMoto”)
Karena array pada JavaScript tidak mendukung tipe data secara eksplisit, maka array
juga bisa diciptakan dengan elemen berisi nilai yang berbeda. Contoh :
var motor = new array(“Motor A”,”2003”,”hitam”,”100 cc”)
Contoh diatas menciptakan sebuah array dengan empat elemen. Tiga elemen bertipe
string. Satu elemen bertipe nuemrik. Seperti telah disebutkan diatas bahwa array
adalah jenis bilangan yang memiliki dimensi satu sampai tiga. Berikut ini
penjelasannya :
Array Dimensi Satu

Misal :
Motor[0]: CepatMoto
Motor[2]: HebatMoto
Motor[3]: AsyikMoto
Array Dimensi Dua

Adalah array yang memiliki baris dan kolom seperti tabel. Penentuan nilai
berdasarkan pertemuan baris dan kolom. Lihat tabel 18.1 berikut :
Tabel 21.1 Array berdimensi dua

0 1
0 AsyikMoto CepatMoto
1 MediumMoto HebatMoto
Motor[0,0]: AsyikMoto
Motor[0,1]: CepatMoto
Motor[1,0]: MediumMoto
Motor[1,1]: HebatMoto
Array Dimensi Tiga

Array yang memiliki struktur data seperti kubus. Menentukan nilai berdasarkan
pertemuan tiga buah sumbu a,b dan c. Berikut ini contohnya :
133
Motor[0,0,0]: AsyikMoto
Motor[0,0,1]: CepatMoto
Motor[0,1,0]: MediumMoto
Motor[0,1,1]: HebatMoto
Sintak dari array adalah :
Nama_array = new array(panjang_array)

Nama_array = new array(elemen-0,elemen-1,…,elemen-n)
Keterangan :
Nama_array : nama obyek array yang dibuat.
Panjang_array : panjang atau besarnya array.
Elemen : elemen dari obyek array.
Contoh :
Mhs = new array(3)
Mhs = new (“fajar”,”nanik”,”ahmad”)
Metode Obyek Array

Metode yang terdapat pada obyek array seperti yang tercantum pada tabel 18.2.
Tabel 21.2 Daftar Metode Obyek Array

Metode Keterangan
join Menggabungkan elemen array ke dalam sebuah string
tunggal.
reverse Membalik elemen array, sehingga elemen pertama menjadi
terakhir dan sebaliknya.
sort Digunakan untuk mengurutkan elemen array.
concat Digunakan untuk menggabungkan dua array kemudian
menghasilkan sebuah array baru.
slice(x,[y]) Mengembalikan array baru yang elemennya sama dengan
elemen array tersebut, mulai dari awal sampai akhir.
Berikut contoh-contoh program penggunaan metode obyek array secara lengkap.
<HTML>
<HEAD><TITLE>Contoh Obyek Array</TITLE></HEAD>
<BODY>
//deklarasi nilai awal
mhs = new Array("fajar","nanik","ahmad")
document.write("<h4>"+"Nilai awal aray"+"</h4>")
for (i = 0; i < 3; i++)
{
document.write("Mhs["+ i +"] = "+mhs[i]+"<br>")
}
134
//dengan metode join
document.write("<br><b>"+"Hasil dari Metode Join"+"</b><br>")
mhs_baru = mhs.join()
document.write(mhs_baru+"<br>")
</script>
</BODY>
</HTML>
Gambar 21.1 Hasil Obyek Array Metode Join
<HTML>
<BODY>
for (i = 0; i < 3; i++)
{
}
//dengan metode reverse
document.write("<br><b>"+"Hasil dari Metode Reverse"+"</b><br>")
mhs_baru = mhs.reverse()
for (i = 0; i < 3; i++)
{
}
</script>
</BODY>
</HTML>
135
Gambar 21.2 Hasil Obyek Array Metode Reverse
<HTML>
<BODY>
for (i = 0; i < 3; i++)
{
}
//dengan metode sort
document.write("<br><b>"+"Hasil dari Metode Sort"+"</b><br>")
mhs_baru = mhs.sort()
for (i = 0; i < 3; i++)
{
}
</script>
</BODY>
</HTML>
Gambar 21.3 Hasil Obyek Array Metode Sort
136
<HTML>
<BODY>
//deklarasi array pertama

//deklarasi array kedua

pegawai = new Array("rudi","andi","hasan")
//dengan metode concat

document.write("<br><b>"+"Hasil dari Metode Concat"+"</b><br>")
gabungan = pegawai.concat(mhs)
for (x = 0; x < 3; x++)
{
document.write("gabungan["+x+"] = "+gabungan[x]+"<br>")
}
document.write("<br>"+gabungan+"<br>")
</script>
</BODY>
</HTML>
Gambar 21.4 Hasil Array Metode Concat
Jika baris program diatas nama array dibalik maka hasilnya seperti gambar 18.5.
Maka dapat disimpulkan bahwa nama array yang disebutkan lebih dulu maka
hasilnya akan disebutkan lebih dulu pula.
137
Gambar 21.5 Hasil Membalik Nama Array
<HTML>
<HEAD><TITLE>Contoh Metode Array</TITLE>
pegawai = new Array("rudi","andi","hasan","fajar","nanik","ahmad")
for (var i = 0; i < 6; i++)
document.write("hasilnya : ["+i+"] = "+pegawai[i]+"<br>")
</script>
</HEAD>
<BODY>
document.write("<br><b>"+"Hasil dari Metode Slice"+"</b><br>")
pegawai = pegawai.slice(1,3)
document.write(pegawai+"<br>")
</script>
</BODY>
</HTML>
Gambar 21.6 Hasil Array Metode Slice
Metode sort dapat digunakan untuk mengurutkan array bertipe string. Kemudian
cobalah untuk mengurutkan data numerik berikut : 16, 3, 27, 45, 7. Hasilnya :
138
<HTML>
<HEAD><TITLE>Contoh Metode Array</TITLE>
angka = new Array(16, 3, 27, 45, 7)
document.write("<b>"+"Data awal adalah :"+"</b><br>")
for (var i = 0; i < 5; i++)
document.write("hasilnya : ["+i+"] = "+angka[i]+"<br>")
</script>
</HEAD>
<BODY>
hasil = angka.sort()
document.write("<br>"+hasil+"<br>")
</script>
</BODY>
</HTML>
Gambar 21.7 Hasil Metode Sort Untuk Array Numerik
Ternyata hasilnya tidak diurutkan. Mengapa demikian ?, karena JavaScript

menganggap semua elemen array bertipe string termasuk angka. Maka untuk
mengurutkan data angka dibutuhkan pembanding. Misal x = angka positif dan y =
angka negatif, maka y < x demikian sebaliknya. Untuk itu diperlukan sebuah fungsi
pembanding. Setelah terbentuk, tahap selanjutnya memanggil Metode Sort dengan
memberikan parameter fungsi pembanding tersebut. Berikut contohnya :
<HTML>
<HEAD><TITLE>Contoh Metode Array</TITLE></HEAD>
<BODY>
//deklarasi array
angka = new Array(16, 3, 27, 45, 7)
//metode sort
document.write("<b><br>"+"Hasil setelah diurutkan"+"</b>")
hasil = angka.sort()
document.write("<br>"+hasil+"<br>")
//buat fungsi pembanding
function urutkan(x,y)
139
{
return x - y
}
//panggil fungsi pembanding dan metode sort
document.write("<b><br>"+"Setelah dibandingkan dan urut"+"</b><br>")
hasil = angka.sort(urutkan)
document.write(hasil+"<br>")
</script>
</BODY>
</HTML>
Gambar 21.8 Hasil Metode Sort dengan Pembanding
Properti Obyek Array

Ada dua properti untuk obyek array yaitu :
Tabel 21.3 Datar Properti Obyek Array

Properti Keterangan
length Jumlah elemen erray
prototype Untuk menambah suatu properti ke obyek array agar nantinya
semua properti tersebut dapat digunakan oleh semua obyek.
Berikut ini contoh program penggunaan properti length pada JavaScript.
<HTML>
<BODY>
datanya = new Array("fajar","nanik","rudi","hasan","ahmad")
document.write("Hasilnya ada : "+datanya.length+" array")
</script>
</BODY>
</HTML>
140
Gambar 21.9 Contoh Penggunaan Properti Obyek Array
Array dua dimensi merupakan array yang terdiri dari baris dan kolom. Misal array
satu dimensi adalah :
X = new Array(3)
Artinya parameter 3 menunjukkan bahwa ukuran array adalah 3 elemen. Sedangkan

untuk membuat array dua dimensi setiap elemen array diisi penunjuk ke array baru.
Misal :
X[0] = new Array(3)

X[1] = new Array(3)
X[2] = new Array(3)
X[3] = new Array(3)
Dengan pernyataan diatas sekarang mempunyai array berukuran 3 x 3. Untuk

mengakses setiap array digunakan penulisan seperti berikut :
<HTML>
<HEAD><TITLE>Contoh Array Dua Dimensi</TITLE></HEAD>
<BODY>
var baris = window.prompt("Ketikkan jumlah baris : ","0")
var kolom = window.prompt("Ketikkan jumlah kolom : ","0")
//menentukan array i x j
hasil = new Array(baris)
for (i = 0; i <= baris; i++)
{
hasil [i]= new Array(kolom)
for (j = 0; j <= kolom; j++)
{
hasil[i][j] = " "+ i +" "," "+ j +" "
}
}
document.write("<b>"+"Hasil Array Dua Dimensi"+"</b><br>")
//tampilkan hasil array
for (i = 0; i < baris; i++)
{
var akhir = "Baris "+ i +" = "
for (j = 0; j < kolom; j++)
{
akhir += hasil [i][j]
141
}
document.write(akhir,"<br>")
}
</script>
</BODY>
</HTML>
Gambar 21.10 Hasil Array Dua Dimensi
21.4 Obyek Boolean

Digunakan untuk mengubah nilai bukan boolean menjadi nilai boolean. Sintak obyek
boolean sebagai berikut :
Nama_boolean = new boolean(nilai)
Keterangan :
Nama_boolean : nama obyek boolean yang akan dibuat.
Nilai : nilai yang akan diubah menjadi boolean.
Contoh :
<HTML>
<HEAD><TITLE>Contoh Obyek Boolean</TITLE></HEAD>
<BODY>
x1 = new Boolean("kabar baik")
x2 = new Boolean(2300)
x3 = new Boolean("2300")
x4 = new Boolean(0)
x5 = new Boolean(null)
x6 = new Boolean("")
x7 = new Boolean(false)
x8 = new Boolean(true)
document.write("<b>"+"Hasil Obyek Boolean"+"</b><br>")
document.write("Hasil boolean 'kabar baik' : "+ x1 +"<br>")
document.write("Hasil boolean 2300 : "+ x2 +"<br>")
document.write("Hasil boolean '2300' : "+ x3 +"<br>")
document.write("Hasil boolean 0 : "+ x4 +"<br>")
document.write("Hasil boolean NULL : "+ x5 +"<br>")
document.write("Hasil boolean ' ' : "+ x6 +"<br>")
142
document.write("Hasil boolean false : "+ x7 +"<br>")
document.write("Hasil boolean true : "+ x8)
</script>
</BODY>
</HTML>
Gambar 21.11 Contoh Obyek Boolean
Dari hasil gambar 18.11 menunjukkan bahwa jika diisi parameter dengan nilai 0,
null, “ “ atau tanpa parameter maka JavaScript mengganggap false.
Tabel 21.4 Daftar Properti Prototype

Properti Keterangan
prototype Untuk menambah suatu properti ke obyek array agar nantinya
semua properti tersebut dapat digunakan oleh semua obyek.
21.5 Obyek Date

Obyek data digunakan untuk memanipulasi tanggal dan jam. Misal, ingin
menyimpan informasi yang berbentuk tanggal dan jam. Untuk membuat obyek date
pertama harus dibuat obyek date dengan operator new. Berikut sintaknya :
Nama_date = new date(parameter)
Parameter pada obyek date dapat berisi salah satu berikut ini :
1. Jika parameter tidak diisi, maka obyek date menggunakan tanggal dan jam
komputer. Misal : tgl_hasil = new date().
2. Parameter dapat diisi “bulan, tanggal, tahun dan am:menit:detik”. Pada obyek
date menentukan bulan dan hari dimulai bulan 0 = januari dan hari 0 =
143
minggu. Misal : tgl_hasil = new date(“January, 24, 1972
14:15:03”).
3. Parameter dapat diisi = (tahun, bulan, tanggal). Misal : tgl_hasil = new

date(72, 1, 24).
4. Parameter dapat diisi = (tahun, bulan, tanggal, jam, menit, detik). Misal :
tgl_hasil = new date(72, 1, 24, 14, 15, 3).
Pada JavaScript batas minimum tanggal dari obyek date adalah 1 Januari 1970.
Untuk contoh program lengkapnya sebagai berikut :
</HTML>
</HEAD><BODY>
//menetukan obyek date()
jam_sekarang = new Date()
//menampilkan obyek date()
document.write("<b>"+"Hasil dari obyek date()"+"</b><br>")
document.write("Waktu : "+jam_sekarang+" ")
</script>
</BODY>
</HTML>
Gambar 21.12 Hasil Obyek Data
Metode Obyek Date

Metode pada obyek date dapat dibagi ke dalam empat kategori yaitu :
1. Metode yang berhubungan dengan setting tangal dan waktu. Metodenya
diawali dengan set. Misal, getMonth untuk mensetting tahun.
2. Metode yang berhubungan dengan pengambilan tanggal dan waktu.
Metodenya diawali dengan get. Misal, getMinutes untuk mengambil menit.
3. Metode yang berhubungan pengambilan tanggal dan waktu ke tipe string.
Metodenya diawali dengan to. Contoh, toGTMString mengkonversi tanggal
ke tipe string.
144
4. Metode yang berhubungan dengan penguraian tanggal (parsing). Ada dua
teknik parsing yaitu parse dan UTC. Kedua teknik ini bersifat statik artinya
bisa dipanggil langsung. Misal, date.parse(…..) atau date.UTC(…..).
Berikut ini tabel 18.5 yang memuat daftar metode pada obyek date.
Tabel 21.5 Daftar Metode Pada Obyek Date

Metode Keterangan
getDate() Menghasilkan tanggal dalam nilai integer 1 – 31.
getDay() Menghasilkan hari dalam nilai integer dari 0 – 6. 0 =
Minggu dan 6 = Sabtu.
getHours() Menghasilkan jam dalam nilai integer dari 0 – 23.
getMinutes() Menghasilkan menit dalam nilai integer dari 0 – 59.
getMonth() Menghasilkan bulan dalam nilai integer dari 0 – 11. 0 =
Januari dan 11 = Desember.
getSeconds() Menghasilkan detik dalam nilai integer dari 0 –59.
getTimezoneOffset() Menghasilkan perbedaan antar waktu lokal dengan waktu
GMT dalam nilai integer yang mewakili jumlah menit.
getYear() Menghasilkan tahun dalam nilai dua digit yang mewakili
tahun sebelum 1900.
parse(tanggal) Menghasilkan jumlah milidetik antara 1 Januari 1970
pada jam 00:00:00 dan tanggal yang ditentukan pada
tanggal. Format tanggal adalah day, DD mon
YYYY HH :MM:SS TZN Mon DD, YYYY.
setDate(tanggal) Menset tanggal dlam nilai integer dari 1 – 31.
setHours(jam) Menset jam dalam nilai integer dari 0 – 23.
setMinutes(menit) Menset menit dalam nilai integer dari 0 – 59.
setMonth(bulan) Menset bulan dalam nilai integer dari 0 – 11.
setSeconds(detik) Menset detik dalam nilai integer dari 0 – 59.
setTime(waktu) Menset nilai dalam nilai integer yang mewakili umlah
milidetik seak 1 Januari 1970 jam 00:00:00.
setYear(tahun) Menset tanggal dalam nilai integer yang lebih besar dari
1900.
toGMTString() Menghasilkan nilai dalam GMT sebagai string untuk
menggunakan aturan di internet. Format : Day, DD Mon
YYYY HH:MM:SS GMT.
toLocalString() Menghasilkan nilai dengan waktu lokal dan aturan lokal.
UTC(tahun,bulan,tanggal, Menghasilkan jumlah milidetik antara 1 Januari 1970
Jam,menit,detik) pukul 00:00:00 GMT.
Berikut ini contoh program menggunakan metode get.
<HTML>
<HEAD><TITLE>Contoh Obyek Date</TITLE></HEAD>
<BODY>
tgl_lhr = new Date("January 1, 2003 13:00:03")
document.write("Lahir pada tanggal : "+tgl_lhr+"<br>")
document.write("Harinya : "+tgl_lhr.getDay()+" <br>")
document.write("Tgl/bln/th : "+tgl_lhr.getDate()+
145
"-"+tgl_lahir.getMonth()+"-"+tgl_lhr.getYear()+"<br>") "<br>"
document.write("Pukul:"+tgl_lhr.getHours()+":"+tgl_lhr.getMinutes()+
":"+tgl_lhr.getSeconds())
</script>
</BODY>
</HTML>
Gambar 21.13 Hasil Penggunaan Metode Get Pada Obyek Date
Berikut ini contoh program menggunakan metode set.

<HTML>
<BODY>
tgl_lhr = new Date()
tgl_lhr.setDate(10)
tgl_lhr.setMonth(0)
tgl_lhr.setYear(2003)
tgl_lhr.setHours(13)
tgl_lhr.setMinutes(00)
tgl_lhr.setSeconds(03)
document.write("Lahir pada tanggal : "+tgl_lhr+"<br>")
document.write("Harinya : "+tgl_lhr.getDay()+" <br>")
document.write("Tgl/bln/th : "+tgl_lhr.getDate()+
"-"+tgl_lhr.getMonth()+"-"+tgl_lhr.getYear()+"<br>")
"<br>"
document.write("Pukul :
"+tgl_lhr.getHours()+":"+tgl_lhr.getMinutes()+
":"+tgl_lhr.getSeconds())
</script>
</BODY>
</HTML>
Gambar 21.14 Hasil Penggunaan Metode Set Pada Obyek Get
146
Berikut ini contoh program lain dengan obyek date.
<HTML>
<BODY>
bulan = new Array(11)
bulan[0] = "Januari"
bulan[1] = "Februari"
bulan[2] = "Maret"
bulan[3] = "April"
bulan[4] = "Mei"
bulan[5] = "Juni"
bulan[6] = "Juli"
bulan[7] = "Agustus"
bulan[8] = "September"
bulan[9] = "Oktober"
bulan[10] = "November"
bulan[11] = "Desember"
var tanggal = new Date()
var tgl = tanggal.getDate()
var bln = bulan[tanggal.getMonth()]
var th = tanggal.getYear()
hr = new Array(6)
hr[0] = "Minggu"
hr[1] = "Senin"
hr[2] = "Selasa"
hr[3] = "Rabu"
hr[4] = "Kamis"
hr[5] = "Jumat"
hr[6] = "Sabtu"
var hari = tanggal.getDate()
var hasil = hr[tanggal.getDay()]
document.write("Hari ini adalah : "+tgl+"-"+bln+"-"+th+"<br>")
document.write("Harinya : "+hasil)
</script>
</BODY>
</HTML>
Gambar 21.15 Contoh Penggunaan Obyek Date
21.6 Obyek Function

Digunakan untuk mengubah program HTML menjadi sebuah fungsi. Sintaknya :
nama_fungsi = new function(parameter, “isi fungsi”)
147
Contoh :
biodata = new function(“document.write(‘ wahju’ )”)
Atau
function biodata()
{
document.write(“wahju”)
}
Program lengkapnya sebagai berikut :
<HTML>
<HEAD><TITLE>Contoh Obyek Function</TITLE>
function biodata1()
{
document.write("Wahju Tjahjo S")
}
function biodata2()
{
document.write("Jl. Wates Km9.7 Jogjakarta")
}
function biodata3()
{
document.write("He..hee... Ketemu lagi")
}
</script>
</HEAD>
<BODY>
<b>Klik tombol yang anda suka</b><br><hr>
<input type=button name="bio1" value="Klik disini ok..."
onclick="biodata1()">
<input type=button name="bio2" value="Klik juga lho..."
<input type=button name="bio3" value="Klik saja ya..."
</BODY>
</HTML>
Gambar 21.16 Hasil obyek function
148
21.7 Obyek Math
Digunakan untuk melakukan perhitungan matematika yang rumit. Misal logaritma,
trigonometri, pembulatan dan lainnya. Sintak obyek math yaitu :
math.[properti|metode(operan)]
Fungsi trigonometri JavaScript mengembalikan sudut dalam satuan radian bukan

derajat.
Properti Obyek Math

Tabel 21.6 Daftar properti obyek Math
Properti Keterangan
E Nilai konstanta Euler(2.718) digunakan sebagai dasar logaritma
natural.
LN10 Nilai logaritma natural dari 10 yaitu 2.302
NIL2 Nilai logaritma natural dari 2 yaitu 0.639
PI Nilai besaran PI, yang digunakan untuk menghitung lingkaran
yaitu 3.14.
SQRT1 Nilai akar kuadrat dari setengah yaitu 0.707
SQRT2 Nilai akar kuadrat daru dua yaitu 1.414
Metode Obyek Math

Tabel 21.7 Daftar obyek Math
Metode Keterangan
abs(x) Mengembalikan nilai absolut dari x.
acos(x) Mengembalikan nilai arc-kosinus dari x dalam radian.
asin(x) Mengembalikan nilai arc-sinus dari x dalam radian.
atan(x) Mengembalikan nilai arc-tangen dari x dalam radian.
atan2(x,y) Mengembalikan sudut dalam radian dari sumbu x ke titik
(x,y)
ceil(x) Mengembalikan bilangan bulat terdekat yang lebih besar
atau sama dengan x.
cos(x) Mengembalikan nilai kosinus dari x dalam radian.
exp(x) Mengembalikan nilai E pangkat x.
floor(x) Mengembalikan bilangan bulat yang kuran dari x atau
sama dengan x.
log(x) Mengembalikan nilai logaritma dari x.
max(x,y) Mengembalikan nilai yang lebih besar di antara x dan y.
min(x,y) Mengembalikan nilai yang lebih kecil di antara x dan y.
pow(x,y) Mengembalikan nilai xy.
random() Mengembalikan bilangan real acak antara 0 sampai 1.
Metode ini bekerja pada platform UNIX.
round(x) Mengembalikan bilangan bulat yang terdekat dengan x.
sin(x) Mengembalikan nilai sinus dari x.
149
sqrt(x) Mengembalikan akar kuadrat dari x.
tan(x) Mengembalikan tangen dari x.
Contoh program lengkap dari penggunaan properti obyek math adalah :
<HTML>
<HEAD><TITLE>Contoh Obyek Math</TITLE></HEAD>
<BODY>
document.write("Nilai properti E adalah : "+Math.E+"<br>")
document.write("Nilai properti LN10 adalah : "+Math.LN10+"<br>")
document.write("Nilai properti LN2 adalah : "+Math.LN2+"<br>")
document.write("Nilai properti PI adalah : "+Math.PI+"<br>")
document.write("Nilai properti SQRT1 adalah : "+Math.SQRT1+"<br>")
document.write("Nilai properti SQRT2 adalah : "+Math.SQRT2+"<br>")
</script>
</BODY>
</HTML>
Contoh program lengkap dari penggunaan metode obyek math adalah :
<HTML>
<HEAD><TITLE>Contoh Obyek Math</TITLE></HEAD>
<BODY>
document.write("Pembulatan 93.6321 : "+Math.round(93.6321)+"<br>")
document.write("Absolut dari -93.6321 : "+Math.abs(-93.6321)+"<br>")
document.write("Pembulatan ke atas 93.6321 :
"+Math.ceil(93.6321)+"<br>")
document.write("Pembulatan ke bawah 93.6321 :
"+Math.floor(93.6321)+"<br>")
document.write("Hasil cos(45) : "+Math.cos(45)+"<br>")
document.write("Hasil sin(45) : "+Math.sin(45)+"<br>")
document.write("Hasil tan(45) : "+Math.tan(45)+"<br>")
document.write("Hasil acos(1) : "+Math.acos(1)+"<br>")
document.write("Hasil asin(1) : "+Math.asin(1)+"<br>")
document.write("Hasil atan(2) : "+Math.atan(2)+"<br>")
document.write("Hasil atan2(1,8) : "+Math.atan2(1,8)+"<br>")
document.write("Hasil exp(45.12345) : "+Math.exp(45.12345)+"<br>")
document.write("Hasil log(10) : "+Math.log(10)+"<br>")
document.write("Hasil max(4,5) : "+Math.max(4,5)+"<br>")
document.write("Hasil min(4,5) : "+Math.min(4,5)+"<br>")
document.write("Hasil pow(4,5) : "+Math.pow(4,5)+"<br>")
document.write("Hasil sqrt(45) : "+Math.sqrt(45)+"<br>")
document.write("Hasil random() : "+Math.random())
</script>
</BODY>
</HTML>
21.8 Obyek Number

Digunakan untuk memproses bilangan numerik. Sintaknya :
150
number.properti
Semua properti milik obyek number bersifat statik, artinya anda tinggal
menggunakannya saja. Berikut ini daftar properti milik obyek number.
Tabel 21.8 Daftar properti obyek number

Properti Keterangan
MAX_VALUE Nilai bilangan yang paling besar.
MIN_VALUE Nilai bilangan yang paling kecil.
NAN Bukan bilangan.
POSITIVE_INFINITY Bilangan tak terhingga yang paling besar.
NEGATIVE_INFINITY Bilangan tak terhingga yang paling kecil.
Berikut contoh program penggunaan properti milik obyek number.
<HTML>
<HEAD><TITLE>Contoh Obyek Number</TITLE></HEAD>
<BODY>
document.write("Bilangan terbesar : "+Number.MAX_VALUE+"<br>")
document.write("Bilangan terkecil : "+Number.MIN_VALUE+"<br>")
document.write("Bukan bilangan : "+Number.NaN+"<br>")
document.write("Bilangan tak terhingga terbesar :
"+Number.POSITIVE_INFINITY+"<br>")
document.write("Bilangan tak terhingga terkecil :
"+Number.NEGATIVE_INFINITY+"<br>")
</script>
</BODY>
</HTML>
Gambar 21.17 Contoh penggunaan obyek Number
21.9 Obyek String

Digunakan untuk memproses atau manipulasi terhadap string. Sintaknya :
151
nama_string = new string(string)
Keterangan :
Nama_string : nama obyek string yang akan dibuat.
String : karakter yang akan diubah menjadi string.
Properti Obyek String

Tabel 21.9 Daftar properti obyek String
Properti Keterangan
length Menghitung jumlah karakter pada suatu string.
Contoh programnya sebagai berikut :
<HTML>
<HEAD><TITLE>Contoh Obyek String</TITLE></HEAD>
<BODY>
nama = "wahju tjahjo saputro"
alamat = "jl. wates km 9.7 jogakarta"
document.write("Jumlah huruf dalam nama : "+nama.length+"<br>")
document.write("Jumlah huruf dalam alamat : "+alamat.length+"<br>")
</script>
</BODY>
</HTML>
Gambar 21.18 Contoh penggunaan obyek string
Metode Obyek String

Metode obyek string dapat dibagi menjadi dua kategori yaitu :
1. Metode yang melakukan pemformatan terhadap string menurut perintah
HTML tertentu.
2. Metode yang mengembalikan variasi dari string.
Tabel 21.19 Daftar metode obyek String

Metode Keterangan
anchor(x) Menghasilkan string yang menunjukkan bagian
dokumen bernama x.
152
big() Menghasilkan string dengan huruf besar.
blink() Menghasilkan string yang berkedip-kedip.
bold() Menghasilkan string dengan huruf tebal.
charAt(index) Menghasilkan karakter pada lokasi yang
ditentukan oleh index.
fixed() Menghasilkan string dengan font FIXED.
fontColor(x) Menghasilkan string dengan warna font x.
fontSize(x) Menghasilkan string dengan ukuran font x.
indexOf(findString, Menghasilkan indek dari pemunculan findstring
startingIndex) yang pertama, dan memulai pencarian pada
posisi startingindex.
Italics() Menghasilkan string dengan huruf miring.
lastIndexOf(findString Menghasilkan indek dari pemunculan findstring
,startingIndex) yang terakhir. Dilakukan dengan mencari
mundur dari posisi startingindex.
link(href) Menghasilkan string yang menunjuk ke alamat
pada href.
small() Menghasilkan string dengan ukuran huruf kecil.
strike() Menghasilkan string dengan huruf dicoret.
sub() Menghasilkan string subscript
substring(firstIndex, Menghasilkan sebagian string yang dimulai dari
lastIndex) karakter firstindex dan diakhiri pada karakter
sebelum lastindex.
sup() Menghasilkan string superscript.
toLowerCase() Menghasilkan string dengan huruf kecil.
toUpperCase() Menghasilkan string dengan huruf besar.
Contoh programnya sebagai berikut :

<HTML>
<HEAD><TITLE>Contoh Obyek String</TITLE></HEAD>
<BODY>
contoh = "belajar javascript"
document.write("hasil metode anchor :
"+contoh.anchor("bottom")+"<br>")
document.write("hasil metode small : "+contoh.small()+"<br>")
document.write("hasil metode big : "+contoh.big()+"<br>")
document.write("hasil metode fixed : "+contoh.fixed()+"<br>")
document.write("hasil metode bold : "+contoh.bold()+"<br>")
document.write("hasil metode italics : "+contoh.italics()+"<br>")
document.write("hasil metode strike : "+contoh.strike()+"<br>")
document.write("hasil metode sub : "+contoh.sub()+"<br>")
document.write("hasil metode sup : "+contoh.sup()+"<br>")
document.write("hasil metode toLowerCase :
"+contoh.toLowerCase()+"<br>")
document.write("hasil metode toUpperCase :
"+contoh.toUpperCase()+"<br>")
document.write("hasil metode chartAt : "+contoh.charAt(3)+"<br>")
document.write("hasil metode substring :
"+contoh.substring(2,7)+"<br>")
document.write("hasil metode indexOf :
"+contoh.indexOf('r',2)+"<br>")
document.write("hasil metode lastIndexOF :
"+contoh.lastIndexOf('r',2)+"<br>")
document.write("hasil metode link : "+contoh.link("top"))
</script>
153
</BODY>
</HTML>
Gambar 21.19 Contoh penggunaan metode obyek String
21.10 Obyek Screen

Digunakan untuk menyimpan informasi tentang resolusi tampilan dan jumlah warna
tampilan. Semua properti obyek screen bersifat statik. Berikut ini daftar tabel yang
memuat properti obyek screen.
Tabel 21.20 Daftar obyek Screen

Properti Keterangan
availHeight Menentukan tinggi layar monitor dikurangi antarmuka user
yang bersifat transparan atau semi transparan. Untuk Windows
XP/9x tinggi layar dikurangi tinggi taskbar.
availWidth Menentukan lebar layar monitor dikurangi antarmuka user
yang bersifat transparan atau semi transparan. Untuk Windows
XP/9x lebar layar dikurangi lebar taskbar.
colorDepth Menentukan jumlah warna yang mungkin ditampikan. Jumlah
warna ditentukan dari pallet atau pixeldepth.
height Menentukan tinggi layar.
pixelDepth Menentukan jumlah bit per pixel pada tampilan.
Width Menentukan lebar layar.
154
Berikut contohnya :
<HTML>
<HEAD><TITLE>Contoh Obyek Screen</TITLE></HEAD>
<BODY>
document.write("Width : "+screen.width+"<br>")
document.write("height : "+screen.height+"<br>")
document.write("availheight: "+screen.availheight+"<br>")
document.write("availwidth : "+screen.availwidth+"<br>")
document.write("pixeldepth : "+screen.pixeldepth+"<br>")
document.write("colordepth : "+screen.colordepth)
</script>
</BODY>
</HTML>
Gambar 21.20 Contoh penggunaan obyek Screen
21.11 Latihan
1. Ada 5 buah Merk sepeda motor dengan data seperti tabel di bawah ini
Merk Motor Harga Satuan Kapasitas Mesin
A 10.500.000 100
B 10.750.000 110
C 11.500.000 110
D 11.750.000 125
E 12.500.000 125
2. Lengkapi web anda dengan informasi screen yang digunakan, tannggal dan jam
sehingga menjadi lebih dinamis.
oooO0Oooo
155
QQ
naxdj?aqnvrdq
1. Pembaca dapat mengetahui manfaat obyek browser.
2. Pembaca mampu menggunakan obyek browser pada disain web.
3. Pembaca mampu melengkapi web dengan memanfaatkan metode dan properti
obyek browser.
22.2 Pendahuluan
Obyek JavaScript tidak dapat diturunkan (inheritance) seperti pada C++ atau Java,
meskipun demikian obyek browser mudah untuk dipahami sebagai struktur hirarki
obyek, seperti gambar 22.1.
Gambar 22.1 Hirarki obyek browser
Dari gambar 22.1 diatas dapat dikelompokkan dalam dua kategori yaitu :
1. Obyek browser terdiri dari : window, document, history, location dan
navigator.
2. Obyek HTML terdiri dari : semua obyek yang berada dibawah document.
Seperti anchor, applet, area, form dan lainnya.
156
Gambar 22.1 diatas menunjukkan bahwa suatu obyek dibawahnya adalah properti
bagi obyek diatasnya. Misal, obyek document memiliki properti anchor, applet,
area. Contoh lain obyek window memiliki properti document, history, location
dan navigator. Maka untuk mengakses properti tersebut dapat ditulis :
window.document
window.history
window.location
Pada bab 20 ini yang akan dibahas adalah obyek browser. Sedangkan obyek HTML
dibahas pada bab 21. Properti dan metode yang dimiliki oleh obyek window sangat
banyak, maka yang dibahas pada bab 20 ini hanya sebagian properti dan beberapa
metode saja. Untuk daftar lengkapnya dapat dilihat pada tabel daftar properti dan
tabel daftar metode.
22.3 Obyek Window

Adalah obyek yang digunakan untuk memanipulasi jendela browser. Obyek window
merupakan obyek yang luas karena dapat menampung teks, gambar, form, frame dan
lainnya. Dan merupakan obyek tingkat top level object atau obyek tingkat paling
atas.
Properti Obyek Window

Properti yang terdapat pada obyek window adalah :
Tabel 22.1 Daftar properti obyek window

Properti Keterangan
closed Mengecek jendela tertutup atau tidak. Jika tertutup properti
closed bernilai true dan jika terbuka properti closed bernilai false.
defaultStatus Menunjukkan nilai default yang ditampilkan pada status bar.
Frames
innerHeight Menentukan dimensi vertikal dari area isi jendela.
innerWidth Menentukan dimensi horisontal dari area isi jendela.
length Jumlah frame yang tercantum pada jendela induk.
locationbar Obyek yang memungkinkan bisa menampilkan atau
menyembunyikan toolbar dari window.
menubar Obyek yang memungkinkan menampilkan atau menyembunyikan
menubar dari window.
name Nama internal yang didefinisikan saat window dibuka dengan
metode window.open().
opener Nama window yang memanggil window tersebut. Properti ini
157
hanya akan diisi jika window diciptakan dengan metode open().
outerheight Menentukan dimensi vertikal dari bingkai luar jendela.
outerWidth Menentukan dimensi horisontal dari luar jendela.
pageXOffset Menentukan posisi x dari halaman yang aktif.
pageYOffset Menentukan posisi y dari halaman yang aktif.
parent Jendela induk, jika jendela saat ini merupakan subjendela dalam
<frameset>.
personalbar Obyek yang memungkinkan ditampilkan atau disembunyikan
toolbar directories dari jendela.
scrollbars Obyek yang memungkinkan menampilkan atau menyembunyikan
penggulung dari jendela.
self Jendela aktif.
status Menampilkan pesan pada status bar.
statusbar Obyek yang memungkinkan menampilkan atau menyembunyikan
status dari jendela.
toolbar Obyek yang memungkinkan menampilkan atau menyembunyikan
toolbar dari jendela.
top Jendela paling atas yang memiliki semua frame.
Beberapa properti diatas sengaja tidak disertai contoh programnya, dan anda bisa
mencobanya sebagai latihan. Berikut ini contoh penggunaan properti status dan
defaultStatus.
<HTML>
<HEAD><TITLE>Contoh Obyek Window</TITLE></HEAD>
<BODY>
window.defaultStatus = "belajar obyek window"
</script>
<input type=button name="tombol" value="Tombol 1"
onclick="window.status='Halloo apa kabar di tombol 1'">
<input type=button name="tekan" value="Tombol 2"
onclick="window.status='Halloo apa kabar di tombol 2'">
</BODY>
</HTML>
Jika kursor mouse sedang bebas, maka baris status menampilkan pesan default yang
disebutkan pada window.defaultStatus. Jika kursor mouse berada pada sebuah
tombol dan melakukan penekanan maka baris status menampilkan pesan yang
disebutkan pada window.status. Lihat gambar 20.1.
Gambar 22.1 Properti obyek Window menampilkan status
158
Metode Obyek Window
Metode yang terdapat pada obyek window adalah :
Tabel 22.2 Dafar metode obyek window

Metode Keterangan
alert(“x”) Menampilkan kotak dialog.
back() Memuat URL yang merupakan entri sebelumnya
pada daftar history. Memanggil metode ini sama saja
dengan mengklik tombol back pada toolbar.
blur() Menghilangkan fokus masukan dari jendela aktif.
captureevents(kejadian) Menangkap semua kejadian pada jendela aktif.
clearinterval() Mematikan waktu yang telah di set oleh metode
setinterval().
cleartimeout(timeoutid) Membatalkan pengevaluasian waktu yang di set
melalui metode settimeout. TimeoutID adalah
mengenal yang dikembalikan oleh metode
settimeout.
close() Menutup jendela.
confirm(“pesan”) Menampilkan kotak dialog berisi OK dan Cancel.
Memberikan nilai true jika pilih OK dan false jika
pilih Cancel.
disableexternalcapture() Mematikan penangkapan keadian yang diset oleh
metode enableexternalcapture.
enableexternalcapture() Memungkinkan jendela dengan frame menangkap
kejadian pada halaman yang dimuat daris erver lain.
find([“string”] Mencari teks yang telah ditentukan pada jendela
[,truefalse] aktif. Bila parameter kedua bernilai true pencarian
[‘ truefalse]) bersifat case sensitive. Jika parameter ketiga bernilai
true, pencarian dilakukan dari posisi saat ini ke
belakang.
focus() Memberikan fokus masukan ke jendela.
forward() Memuat URL yang merupakan entri berikutnya pada
daftar history. Memanggil metode ini sama dengan
menekan tombol forward pada toolbar.
home() Memuat URL yang merupakan homepage user di set
melalui menu edit | preferences. Memanggil metode
ini sama dengan menekan tombol home pada toolbar.
moveby(horisontal, Menggeser jendela sebanyak horisontal dan vertikal
vertikal) dengan satuan pixel.
moveto(x,y) Menggeser jendela ke posisi (x,y), dimana x dan y
dalam satuan pixel.
open(“url”,”nama”, Membuka jendela klien baru yang diberi identitas,
[“pil1, kemudian memuat URL yang diberikan.
pil2,pil3,…”])
print() Mencetak isi jendela ke printer. Memanggil metode
ini sama dengan menekan tombol print pada toolbar.
prompt(pesan, Menampilkan kotakdialog “prompt” yaitu kotak
[masukandefault]) dialog untuk meminta masukan data dari pengguna.
releaseevents(kejadian) Membebaskan penangkapan kejadian.
resizeby(x,y) Mengubah ukuran jendela dengan cara
menggerakkan titik kanan bawah dari jendela sejauh
x pixel dan y pixel.
159
resizeto(p,q) Mengubah ukuran jendela sehingga ukurannya
menjadi p x q.
routeevent(kejadian) Melewatkan kejadian yang ditangkap ke hirarki
penangan keadian default.
scroll(x,y) Menggulung jendela saat ini ke koordinat x, y.
scrollby(x,y) Menggulung jendela sejauh x dan y pixel.
scrollto(x,y) Menggulung jendela sehingga titik x, y menjadi titik
kiri atas pada jendela aktif.
setinterval(ekspresi, Mengevaluasi ekspresi setiap sekian waktu milidetik.
milidetik)
settimeout()(ekspresi, Mengevaluasi ekspresi setelah sekian waktu milidetik
milidetik)
stop() Menghentikan proses download. Memanggil metode
ini sama dengan menekan tombol stop pada toolbar.
Keterangan dari metode open() sebagai berikut :

url1 : alamat URL file yang diakes.
Nama : nama jendela yang buka.
Atribut : atribut-atribut tambahan untuk menetukan jendela yang akan dibuka.
Atribut tersebut adalah :

toolbar=[yes/no] : jendela memiliki toolbar.
location=[yes/no] : jendela memiliki field location.
directories=[yes/no] : jendela mengandung tombol direktori.
status=[yes/no] : jendela mengandung status bar.
menubar=[yes/no] : jendela mengandung menu.
scrollbar=[yes/no] : jendela mengandung baris penggulung.
resizable=[yes/no] : jendela bisa diubah ukurannya.
width=pixels : lebar jendela dalam pixel.
height=pixels : tinggi jendela dalam pixel.
Tidak semua metode pada buku ini diberikan contoh program, mengingat banyak
sekali metode yang dimiliki obyek window. Anda dapat mencobanya sebagai latihan.
Berikut ini contoh penggunaan metode alert().
<HTML>
<BODY>
function tampil()
{
window.alert("Selamat belajar javascript")
}
</script>
<input type=button name="contoh" value="Tekan disini"
onclick="tampil()")
</BODY>
</HTML>
160
Gambar 22.2 Contoh penggunaan metode alert
Berikut ini contoh penggunaan metode confirm().
<HTML>
<BODY>
function coba(ambil)
{
if (window.confirm("Apakah anda yakin ?") == true)
{
document.write(" "+ambil+" ")
}
else
{
return false
}
}
</script>
<form onSubmit="coba(this.teks.value)">
<input type=text name="teks">
<input type=submit name="contoh" value="Tekan disini">
</BODY>
</HTML>
Gambar 22.3 Contoh penggunaan Metode Confirm
161
Gambar 22.4 Hasil setelah tombol “Tekan Disini” ditekan
Jika tombol OK di klik maka tulisan dalam textbox akan ditampilkan. Jika pilih
tombol Cancel maka isi dari textbox akan dihilangkan. Berikut ini contoh program
menggunakan metode prompt().
<HTML>
<BODY>
var dataku = prompt("Silahkan tulis nama anda."+"")
document.write(" "+dataku+" "+"selamat belajar javascript")
</script>
</BODY>
</HTML>
Gambar 22.5 Penggunaan metode prompt
Jika prompt pada gambar 20.5 diisi data, dan ditekan OK, maka hasilnya akan
digabung dengan teks yang telah ditulis dalam program. Berikut ini contoh metode
prompt yag lain.
<HTML>
<BODY>
var soal = "Siapakah Presiden Indonesia Pertama ?"
var jawab = "Soekarno"
var benar = "Anda benaaarr !!"
var salah = "Silahkan pilih : Phone a friend; 50 : 50; audience ?"
var hasil = prompt("soal"," ")
if (hasil == jawab)
{
document.write(benar)
162
}
else
{
document.write(salah)
}
</script>
</BODY>
</HTML>
Berikut ini contoh program menggunakan metode close() dan open().

<HTML>
<BODY>
function buka_pertama()
{
window.open()
}
function tutup()
{
window.close()
}
</script>
<input type=button value="Warung Makan Citra Murah"
onclick="buka_pertama()">
<input type=button value="Tutup" onclick="tutup()">
</BODY>
</HTML>
Berikut program menggunakan metode setTimeout() dan clearTimeout().

<HTML>
<HEAD><TITLE>Contoh Obyek Window</TITLE>
function selesai()
{
window.alert("Kamu kok tidak tekan tombol, melamun ya ?")
}
function tekan()
{
window.alert("Selamat anda berhasil")
}
</script>
</HEAD>
<BODY onLoad="batasnya=setTimeout('selesai()',2000)">
<center><h4>Tekan tombol atau tunggu 2 detik</h4></center>
<hr>
<input type=button value="Silahkan di tekan"
onclick="clearTimeout(selesai); tekan()">
</BODY>
</HTML>
163
Gambar 22.6 Contoh penggunaan setTimeout() dan clearTimeout()
Penjelasan dari program diatas yaitu jika selama 2000 milidetik/2 detik tombol tidak
ditekan maka muncul pesan seperti gambar 20.6. Jika tombol di tekan sebelum 2
detik fungsi maka fungsi tekan akan dikerjakan dan fungsi selesai akan dibatalkan
oleh metode clearTimeout().
Event Handler Obyek Window

Event handler adalah kode JavaScript yang akan dijalankan jika anda membuka
dokumen HTML. Letak penulisan event handler pada bagian <body>. Sekilas event
handler ini telah digunakan pada contoh program sebelumnya. Lihat kembali
program dari gambar 20.6. Event handler pada obyek window cukup banyak, namun
disini hanya diberikan beberapa contoh saja. Event handler yang lain dapat anda coba
sebagai latihan.
<HTML>
<BODY onLoad="alert('Apa kabar ?. Baik-baik saja ?.')";
onUnload="alert('Selesai')">
<h3><center>PT. KARYA CITRA SEJAHTERA</center></h3>
<hr>
</BODY>
</HTML>
Berikut ini daftar penanganan kejadian pada obyek window.
Tabel 22.3 Daftar event pada obyek window

Kejadian Keterangan
onBlur Menangani kejadian yang membangkitkan bila jendela
kehilangan fokus.
onDragdrop Menangani kejadian yang dibangkitkan bila pengguna men-
drop sesuatu ke jendela aktif.
onError Menangani kejadian yang dibangkitkan bila terjadi kesalahan
saat memuat dokumen atau citra.
164
onFocus Menangani kejadian yang dibangkitkan bila jendela menerima
fokus .
onLoad Menangani kejadian yang dibangkitkan setelah browser selesai
memuat dokumen.
onMove Menangani kejadian yang dibangkitkan bila pengguna
mengubah letak jendela aktif.
onResize Menangani kejadian yang dibangkitkan bila pengguna
mengubah ukuran jendela aktif.
onUnload Menangani kejadian yang dibangkitkan saat user keluar dari
dokumen aktif.
22.4 Obyek Location

Obyek location memuat informasi URL (uniform resource locator) yang sedang
dibuka. URL dapat berupa http atau www. Selain itu dapat berupa alamat file. Letak
obyek location pada browser adalah :
Gambar 22.7 Letak obyek location pada browser
Properti Obyek Location

Href
Digunakan untuk menampilkan informasi alamat lengkap dari dokumen yang sedang
dibuka. Misal :
location.href = “http://www.yahoo.co.id”
location.href = “file:/d:/dataku/page_pertama.html”
href juga dapat digunakan untuk membuka endela baru dengan alamat yang sudah
ditentukan. Misal :
location.href = “http://www.yahoo.co.id”
window.open(location.href,”namanya”,”atributnya”)
Berikut contoh program lengkapnya.
<HTML>
<HEAD><TITLE>Contoh Obyek Location</TITLE></HEAD>
<BODY>
function koneksi()
{
document.write(location.href)
}
165
</script>
alamatnya :
koneksi()
</script>
<br><hr>
<input type=button value="Klik di sini" onclick="location.href =
'contoh4.html' ">
<input type=button value="Klik di sini" onclick="location.href =
'http://www.yahoo.co.id' ">
</BODY>
</HTML>
Gambar 22.8 Contoh penggunaan href
Host, Hostname Dan Port

Host digunakan untuk menghasilkan nama host dan nomor port dokumen yang
sedang dibuka. hostname digunakan untuk menghasilkan nama host dokumen yang
dibuka. Sedangkan properti port digunakan untuk menghasilkan nomor port
dokumen yang sedang dibuka. Jadi properti hostname menyimpan nama host dari
URL. Properti ini dapat berisi domain atau IP Address.
Karena orang lebih mudah menghafal nama, maka alamat situs dapat ditulis dengan
huruf. Misal : www.citrakarya.co.id, yang seharus dapat ditulis dalam bentuk IP
Address misal 192.161.2.1. Jika tidak ada nomor port maka properti host sama
dengan hostname. Contoh di bawah ini menjelaskan tentang masing-masing properti
diatas.
Nama host-nya : location.host = “www.citra_karya.co.id”

Nomor port-nya : 80 (default web server)
Nama hostname : location.hostname = “www.citra_karya.co.id:80
Pathname
Digunakan untuk menghasilkan path lengkap dari dokumen yang sedang dibuka.
Biasanya terdiri dari nama direktori dan nama file. Jadi anda dapat meletakkan
166
dokumen ke jendela browser. Namun dokumen yang dimuat harus terletak di host
yang sama dengan dokumen yang sedang dimuat. Berikut contoh programnya.
<HTML>
<BODY>
document.write("Lokasi dari dokumen ini : "+location.pathname)
</script>
</BODY>
</HTML>
Gambar 22.9 Penggunaan properti pathname
Protokol
Digunakan untuk menghasilkan protokol yang dipakai guna menampilkan dokumen
yang sedang dibuka. Untuk dokumen HTML properti ini bernilai “http”. Jika
dokumen terletak pada file lokal bernilai “file:/”. Perlu diperhatikan jika brwoser
menggunakan Nescape URL-nya : file:///d\buku_web\contoh_1.html,
sedangkan IE URL-nya : d:\buku_web\contoh_1.html, terlihat keduanya berbeda.

Berikut ini contohnya.
<HTML>
<BODY>
document.write("Protokol dokumen ini : "+location.protocol)
</script>
</BODY>
</HTML>
Protokol lain yang digunakan adalah :

location.protocol = “ftp:”
location.protocol = “http:”
location.protocol = “gopher:”
location.protocol = “file:”
167
Hash
Digunakan untuk menyimpan nama anchor dari dokumen yang sedang dimuat pada
URL. Anchor adalah nama bagian dokumen yang dapat langsung dituju. Pada
dokumen HTML anchor ditunjukkan dengan <a name = “…”> apa kabar </a>.
Misalnya :
http://www.citra_karya.co.id/index.html#networking
location.hash = “netwoking”
file://d:/direktori/file.html#anchor-1
location.hash = “anchor-1”
Search
Digunakan untuk menghasilkan string pencarian dari dokumen yang sedang dibuka.
Parameter pencarian selalu diletakkan setelah tanda tanya “?” dan biasanya dipakai
pada dokumen HTML yang memiliki elemen form. Setelah tombol submit ditekan,
URL yang ada di browser akan mengikuti format :
http://www.domain.net/direktori/program?data1=nilai1&data2=nilai2&…
Perlu diketahui pada bagian data1&nilai1&data2=nilai2, menyatakan URL

mengirimkan dua data yang dicari atau dibutuhkan. Jadi form yang dikirim harus
mengikuti format data1&nilai1&data2=nilai2&………. Dan form yang dibuat
dengan perintah <form> atribut method harus bernilai “GET” atau “POST” maka saat
form dikirim data akan diletakkan pada bagian akhir URL dipisahkan tanda “?”.
Contoh : http://www.citra_karya.co.id/index.html?networking .
22.5 Obyek History

Adalah obyek yang menyimpan semua tempat alamat situs yang telah dikunjungi.
Alamat yang dikunjungi dapat berupa :
1. URL (berupa www atau http).
2. File lokal pada host.
3. Semua file yang dibuka dengan browser.
Obyek browser mengandung informasi :

1. Judul dokumen.
2. Lokasi dokumen berada.
168
3. Waktu membuka dokumen pertama kali
4. Waktu membuka dokumen terakhir kali.
5. Berapa banyak dokumen telah dibuka.
Properti Obyek History
Tabel 22.4 Daftar properti obyek History

Properti Keterangan
length Jumlah item di dalam daftar history.
Properti length akan menghitung jumlah dokumen web yang pernah di kunjungi
sejak browser dijalankan. Berikut contoh programnya :
<HTML>
<HEAD><TITLE>Contoh Obyek History</TITLE></HEAD>
<BODY>
<script language="Javascript">
var website = history.length
document.write("Daftar website yang pernah diakses : "+website)
</script>
</BODY>
</HTML>
Gambar 22.10 Contoh penggunaan obyek history
Metode Obyek History

Tabel 22.5 Daftar metode obyek history
Metode Keterangan
back() Mundur ke dokumen sebelumnya.
forward() Maju ke dokumen berikutnya.
go(lokasi) Menuju ke dokumen yang ditentukan oleh parameter
lokasi. Parameter dapat bertipe string atau numerik.
Berikut contoh programnya.

<HTML>
<HEAD><TITLE>Contoh Obyek History</TITLE></HEAD>
<BODY>
<script language="Javascript">
169
function mundur()
{
history.back()
}
function maju()
{
history.forward()
}
function maju1()
{
history.go(1)
}
function mundur_1()
{
history.go(-1)
}
</script>
<input type=button value="MUNDUR" onclick="mundur()">
<input type=button value="MAJU" onclick="maju()">
<input type=button value="MAJU 1" onclick="maju1()">
<input type=button value="MUNDUR 1" onclick="mundur_1()">
</BODY>
</HTML>
Untuk dapat menjalankan program diatas, anda harus menjalankan beberapa

dokumen melalui browser di komputer, agar saat tombol ditekan terlihat aksi dari
tombol tersebut.
22.6 Obyek Document

Yang dimaksud adalah dokumen web yang saat ini sedang aktif. Dokumen web
berisi elemen seperti text, button, textarea, link, radio dan lainnya.
Properti Obyek Document

bgcolor dan fgcolor
Digunakan untuk menentukan warna teks dan latar belakang dokumen. Berikut
contoh programnya.
<HTML>
<HEAD><TITLE>Contoh Obyek Document</TITLE></HEAD>
<BODY>
<center><h3>PT. KARYA JATI PERSADA</h3></center>
<hr><br>
<input type=button name="biru" value="Merubah warna depan"
onclick="document.fgcolor='blue' ">
<input type=button name="hijau" value="Merubah warna belakang"
onclick="document.bgcolor='green' ">
</BODY>
</HTML>
170
Linkcolor, Alinkcolor dan Vlinkcolor
1. Linkcolor digunakan untuk mengatur warna link yang belum pernah dikunjungi.
2. Alinkcolor digunakan untuk mengatur warna link yang sedang aktif.
3. Vlinkcolor digunakan untuk mengatur warna link yang sudah dikunjungi.
Berikut ini contoh programnya.

<HTML>
<BODY>
document.linkcolor="blue"
document.alinkcolor="cyan"
document.vlinkcolor="green"
</script>
<center><h3>PT. KARYA JATI PERSADA</h3></center>
<hr><br>
<a href="http://www.mail.yahoo.co.id">Koneksi ke yahoo.co.id</a><br>
<a href="http://www.lycos.com">Koneksi ke lycos.com</a><br>
<a href="http://www.plasa.com">Koneksi ke plasa.com</a>
</BODY>
</HTML>
Title
Digunakan untuk menentukan judul dari dokumen web yang sedang aktif. Properti
ini tanpa anda sadari sebetulnya sering digunakan. Lihat program dibawah, dimana
properti title digunakan.
<HTML>
<BODY>
document.linkcolor="blue"
Location
Digunakan untuk menentukan alamat dari dokumen yang sedang aktif. Properti ini
sama dengan proeprti href pada obyek location). Berikut contoh programnya.
<HTML>
<BODY>
document.write("alamat yang aktif saat ini :"+document.location)
</script>
</BODY>
</HTML>
171
Gambar 22.11 Contoh properti location
Referer
Digunakan untuk menentukan dokumen yang memanggil dokumen aktif. Berikut
contoh programnya.
<HTML>
<BODY>
document.write("Dokumen ini dipanggil dari : "+document.referrer)
</script>
</BODY>
</HTML>
lastModifed
Digunakan untuk menentukan tanggal terakhir dokumen diperbaiki. Berikut contoh
programnya.
<HTML>
<BODY>
document.write("Informasi terakhir dokumen diperbaiki :
"+document.lastModified)
</script>
</BODY>
</HTML>
Gambar 22.12 Penggunaan properti lastModified
172
Metode Obyek Document
Beberapa metode obyek document dapat diliat pada tabel 35. Beberapa metode dapat
anda coba sendiri sebagai latihan.
Tabel 22.6 Daftar metode obyek document

Metode Keterangan
write() Menulis teks ke dalam dokumen.
writeln() Menulis teks ke dalam dokumen, dan diikuti karakter baris baru.
clear() Menghapus tampilan jendela dokumen.
close() Menutup dokumen yang aktif.
open(mimetype) Membuka aliran yang mengijinkan metode write() dan writeln()
menulis pada jendela dokumen. Parameter mimeType adalah
string yang menetukan jenis dokumen yang didukung navigator
text/html, image,gif.
Berikut ini contoh penggunaan metode obyek document.

<HTML>
<BODY>
function hilang()
{
document.clear()
}
function selesai()
{
document.close()
}
</script>
<input type=button value="Bersihkan Dokumen" onclick="hilang()">
<input type=button value="Selesai" onclick="selesai()">
</BODY>
</HTML>
22.7 Latihan
Tambahkan pada disain web anda dari tugas Bab 19 dengan beberapa fasilitas
dibawah, gunakan obyek yang tersedia pada Bab 20.
1. Mampu menampilkan status jika mouse berada pada sebuah obyek.
2. Mengandung pesan yang di bangun dari metode alert.
3. Mampu menampilkan alamat lengkap dari dokumen aktif.
4. Mampu menampilkan jumlah pengunjung yang mengakses website.
5. Mampu menampilkan informasi kapan terakhir dokumen diupdate.
oooO0Oooo
173
QR
naxdj?gslk
1. Pembaca memahami manfaat obyek HTML.
2. Pembaca mampu menggunakan elemen form obyek HTML.
3. Pembaca mampu menentukan properti dan metode obyek HTML.
4. Pembaca dapat membuat event handler pada obyek HTML.
23.2 Pendahuluan
Obyek Form adalah obyek yang digunakan untuk mengambil input dari pemakai
sehingga user dapat berinteraksi dengan server. Fungsi obyek form biasanya
digunakan untuk membuat buku tamu, polling dan data isian. Pada saat mempelajari
HTML anda sudah pernah menggunakan perintah <form>. Semua elemen yang
didefinisikan dalam <form> ….. </form> merupakan bagian dari form tersebut.
Menentukan Elemen Form

Form adalah obyek dari obyek document, sehingga form dalam dokumen merupakan
properti dari obyek document. Misal berikut ini contoh dokumen dengan satu buah
form :
<form>
<input type=text name=”contoh” maxlength=25 size=26>
<input type=button name=”proses” value=”Kirim …”>
</form>
Contoh diatas merupakan struktur dari HTML untuk JavaScript anda bisa menunjuk
ke setiap elemen sebagai berikut :
Document.forms[0].elements[0]
Document.forms[1].elements[1]
174
Dimana elemens[0] adalah text dan elemens[1] adalah button. Dalam sebuah
dokumen pun dapat terdiri lebih dari satu obyek form. Berikut ini contohnya :
<form>
<input type=text name=”nm” maxlength=25 size=26>
<input type=text name=”almt” maxlength=35 size=36>
<input type=text name=”kota” maxlength=12 size=13>
</form>
<form>
<input type=reset name=”kembali” value=”Kembali”>
</form>
Pada potongan program diatas dokumen mengandung dua buah obyek form. Pada
JavaScript dapat ditulis sebagai berikut :
//milik form pertama dengan tiga elements

document.forms[0].elements[0]
// milik form kedua dengan dua elements

Menentukan Properti Elemen Obyek Form

Setiap properti elemen form dapat ditentukan pada JavaScript. Misal :
<form>
</form>
Dari contoh diatas, dalam JavaScript setiap properti elemen dapat ditulis :
document.forms[0].elements[0].name
document.forms[0].elements[0].value
Selain cara seperti diatas dapat pula ditulis menggunakan properti this untuk merujuk
ke isi properti form yang digunakan. Contoh :
<input type=text name=”nm” maxlength=25 size=26

onClick=proses(this.nm.value)>
175
23.3 Properti Obyek Form
Action
Digunakan untuk menentukan dokumen yang akan dibuka atau dituju oleh form yang
dikirim. Misal :
window.form[0].action=”http://www.wahju.blogspot.com/index.html”
Method
Digunakan untuk menentukan cara mengirimkan form. Ada dua nilai yaitu :
Get : guna mengirimkan form
Post : guna mengambil hasil dari form
Misal :
<form name=”contoh” method=”post”

action=”mailto:wahju@yahoo.com?subject=kenalan”>
Target
Digunakan untuk menentukan jendela atau frame yang akan dituju. Contoh :
document.forms[0[.elements[0].target=”bagian_2”
Elements
Digunakan untuk menentukan urutan array setiap elemen pada obyek form. Contoh :
document.forms[0].elements[0].value==” ”
23.4 Metode Obyek Form

Hanya ada satu metode yaitu submit(), digunakan untuk mengirimkan form ke
lokasi yang telah ditunjuk. Contoh :
<form>
<input type=button value=”Kirim …”
onclick=”document.forms[0].elements[0].submit()”>
</form>
176
23.5 Event Handler Obyek Form
Event handler obyek form adalah onSubmit, digunakan untuk menentukan kode
JavaScript yang akan dijalankan bila form dikirimkan. Berikut contoh lengkapnya.
<HTML>
<HEAD><TITLE>contoh</TITLE>
function coba()
{
window.alert("Proses kirim selesai")
}
</script>
</HEAD>
<BODY>
<form method=post action="http://www.yahoo.com" onSubmit="coba()">
<input type=submit name="proses" value="Kirim ...">
</form>
</BODY>
</HTML>
Gambar 23.1 Contoh event handler obyek form
23.6 Latihan
Lengkapi disain web anda dari latihan Bab 20 dengan menambah properti form yang
sesuai serta lengkapi dengan validasi event handler buatan anda sendiri. Misal pesan
kesalahan pada saat entri data dan suatu tombol telah dilakukan.
oooO0Oooo
177

Pemrograman Web Javascript

Diunggah oleh

Informasi Dokumen

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

Pemrograman Web Javascript

Diunggah oleh

Hak Cipta:

Format Tersedia

PR

Kelebihan JavaScript adalah :

Kedua program diatas strukturnya berbeda dimana contoh pertama, beberapa

13.4 Struktur Javascript

Gambar 13.2 Hasil dari Javascript tanpa HTML

<script src=http://nama_file_javascript.js> <script>

Gambar 13.3 Tampilan utama EditPlus2

14.2 Aturan Menciptakan Variabel

Berikut ini contoh menciptakan variabel yang benar :

Kemudian contoh variabel yang salah adalah :

var namavariabel = nilainya

Untuk mendeklarasikan beberapa variabel dalam satu baris, cukup dipisahkan

var v_kode, jml_bayar, v_nama, v_total

14.4 Mendeklarasikan Konstanta

15.2 Tipe String/Karakter

JavaScript juga mendukung beberapa karakter khusus yang dinamankan escape

15.4 Tipe Boolean

var hasil = nilai_ujian > 40

15.5 Tipe Null

16.3 Operator Aritmatika

Gambar 16.1 Hasil operator aritmatika jenis binary

Gambar 16.2 Hasil operator aritmatika jenis unary ++

Gambar 16.3 Hasil operator aritmatika jenis unary --

16.4 Operator Penugasan

Tabel 16.2 Daftar operator penugasan

Berikut contoh penggunaan operator penugasan dengan program JavaScript.

Gambar 16.5 Hasil operator penugasan dengan nilai awal

16.5 Operator Pembanding

Tabel 16.3 Daftar operator pembanding

Berikut ini implementasi operator pembanding dengan program JavaScript. Hasil

16.6 Operator Logika

(2000 > 1500) || (2000 !+ 1500)

Tabel 16.5 Panduan operator AND

Tabel 16.6 Panduan operator NOT

Tabel 16.7 Daftar operator logika

Gambar 16.8 Hasil operator logika

16.7 Operator String

Tabel 16.8 Daftar operator string

Gambar 16.9 Hasil operator string

(kondisi) ? nilai1 : nilai2.

Gambar 16.10 Hasil dari ekspresi

17.3 Statement IF…..ELSE

Gambar 17.1 Hasil pencabangan IF….ELSE

17.4 Statement IF…..ELSE IF

17.5 Statement SWITCH

Gambar 17.3 Hasil pencabangan SWITCH

17.6 Statement FOR

Gambar 17.4 Hasil perulangan FOR

Gambar 17.5 Hasil perulangan FOR

17.7 Statement FOR…..IN

Contoh potongan programnya adalah sebagai berikut :

Penjelasan program diatas yaitu obyeknya kendaraan, propertinya adalah jenis,

17.8 Statement WHILE

Contoh program berikut ini menjelaskan penggunaan statement while. Dan

Gambar 17.8 Contoh perulangan WHILE nested untuk matrik

Gambar 17.9 Hasil perulangan DO…WHILE

17.10 Statement BREAK dan CONTINUE

Gambar 17.10 Hasil statement Break

Gambar 17.11 Hasil statement Continue

17.11 Statement WITH

18.1 Tujuan Instruksional

18.2 Fungsi Buatan Sendiri

Aturan Membuat Fungsi

4. Isi fungsi ditulis dalam tanda kurung kurawal { }. Contoh :