JavaScript

Sekilas tentang Javascript

Sejarah dan Pengembangan Javascript

Dewasa ini, dunia Internet, khususnya World Wide Web berkembang dengan
sangat pesat. Perkembangan ini tentu saja mendorong orang untuk membuat
halaman Web yang lebih interaktif dan juga lebih cerdas. Salah satu cara
membuat halaman Web menjadi lebih interaktif adalah dengan menggunakan
JavaScript, bahasa script yang dikembangkan Netscape Communications
bekerja sama dengan Sun Microsystems.

Berbicara tentang Web tidak lepas dari HTML (Hypertext Markup Language),
bahasa yang digunakan untuk membuat halaman Web. HTML merupakan
bahasa yang sangat mudah dipelajari, Anda tidak perlu mempunyai latar
belakang pemrograman untuk menggunakannya, namun untuk membuat
halaman yang interaktif, HTML saja tidak cukup.

Oleh karena iu muncullah CGI (Common Gateway Interface). Dengan CGI

halaman web bisa menampilkan pencacah pengunjung, animasi sederhana,
dan masih banyak lagi.

Disamping CGI, ada bahasa pemrograman lainnya yang juga digunakan untuk
meningkatkan interaktivitas halaman web, yaitu Java. Java dikembangkan
oleh SunMicrosystems dari bahasa pemrograman yang sudah sangat populer
yaitu C++. Pada java beban pemrosesan dialihkan ke klien sehingga beban
server dikurangi. Dengan java, kita bisa menampilkan animasi bersuara,
menampilkan berbagai diagram.

Dari latar belakang inilah, Netscape Communications bersama dengan Sun

Microsystems mengembangkan bahasa skrip yang diberi nama JavaScript.
Asal mula JavaScript adalah LiveScript. Dikembangkan pertama kali pada
tahun 1995. Bahasa ini dikenali pada browser Netscape Navigator mulai versi
2.0 ke atas. Microsoft juga melengkapi Internet Explorer dengan JavaScript
mulai versi 3.0 ke atas.

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
1 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

Pada dasarnya skrip tidak berbeda dengan bahasa pemrograman biasa

karena skrip juga berisi kumpulan instruksi program. Hanya saja skrip
mempunyai aturan yang lebih sederhana dan biasanya tidak dikompilasi.
JavaScript adalah skrip yang ditempelkan pada kode HTML dan diproses pada
sisi klien.
Bahasa JavaScript versi 1.0 sudah mengalami perkembangan sejak dirilis
tahun 1995 yang lalu. Yang pertama adalah dirilisnya JavaScript 1.1 pada
tahun 1996. Yang kedua adalah dirilisnya JavaScript 1.2 pada tahun 1997.

Pada akhir tahun 1996, Netscape menyerahkan proses standarisasi

spesifikasi bahasa JavaScript ke badan independent, yaitu ECMA (European
Computer Manufacturers Association). ECMA inilah yang pada akhirnya
melakukan standarisasi JavaScript.

JavaScript bukan bahasa berorientasi objek, melainkan bahasa berbasis

objek. Bahasa berorientasi objek harus mendukung 3 konsep dasar, yaitu :
1. Pengkapsulan (Encapsulation)
Pengkapsulan (Enkapsulasi) yang merupakan pengemasan /
gabungan beberapa dari type data / record dengan prosedur dan
fungsi yang membentuk suatu type data baru yang tepat,
dimana kita dapat menyembunyikan informasi data maupun
fungsi / prosedur didalam sebuah objek dan hanya dapat diakses
datanya dengan interface objek
2. Pewarisan (Inheritance)
Penurunan sifat (Inheritance) yang memungkinkan kita untuk
membuat sebuah objek baru yang sama dengan objek
sebelumnya yang telah didefinisikan sehingga memiliki
karakteristik yang sama dengan induknya dan objek turunannya
dapat mengakses semua data dan program yang dimiliki oleh
objek induknya
3. Polimorfisme (Polymorphism) Keaneka Ragaman

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
2 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

Yang diperlukan dalam membuat halaman dengan javascript

Untuk mempelajari pemrograman JavaScript, hanya dua piranti yang
diperlukan, yaitu :
Editor teks : NotePad, Edit+, etc
Web Browser : Netscape Navigator, Internet Explorer, FireFox
Editor teks yang digunakan harus dapat menyimpan file dalam format ASCII
Dan Web browser yang digunakan harus mendukung JavaScript.
Javascript dengan HTML
Program JavaScript dituliskan pada file HTML (.html atau .htm) dengan
menggunakan tag kontainer <SCRIPT>. Dengan kata lain, kita tidak perlu
menuliskan program JavaScript pada file terpisah. Yang dimaksud dengan tag
kontainer adalah tag yang diawali dengan <NAMA_TAG> dan diakhiri dengan
</NAMA_TAG>.
Contoh :
<HTML>.. </HTML>
<HEAD>................... </HEAD>
<BODY> .................. </BODY>

Tag kontainer <SCRIPT> mempunyai atribut Language. Isikan atribut

Language dengan JavaScript. Disamping JavaScript, ada juga skript lain yang
diletakkan pada halaman HTML, yaitu VBScript. VBScript dikembangkan oleh
Microsoft dari bahasa pemrograman yang cukup populer Visual Basic fo
Aplication (VBA). Untuk menulis program VBScript, bisa digunakan tag
kontainer <SCRIPT>, hanya saja atribut language diisi VBScript.

Browser-browser lama yang belum mendukung skrip biasanya

mengabaikan tag <SCRIPT>. Namun masalahnya ada beberapa browser
lama yang menuliskan teks diantara tag <SCRIPT> dan </SCRIPT>.
contoh :
<HTML>
<HEAD>
<TITLE> Latihan Pertama </TITLE>
</HEAD>
<BODY>
Belajar membuat program JavaScript

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
3 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

<SCRIPT LANGUAGE = "JavaScript">

document.write ("Selamat Siang <br>");
document.write ("Universitas Mercu Buana);
</SCRIPT>
</BODY>
</HTML>

Keterangan :
Kode-kode tersebut di atas disebut dengan skrip JavaScript diawali dengan
tag <SCRIPT> dan diakhiri dengan tag </SCRIPT>. Di dalam tag <SCRIPT>
terdapat atribut LANGUAGE yang diisi dengan JavaScript.

Tag ini oleh browser yang mengenal JavaScript akan segera ditanggapi
dengan menerjemahkan kode yang terdapat diantara tag <SCRIPT> dan
</SCRIPT>

Tanda <!-- dan //--> umumnya disertakan dengan tujuan agar sekiranya
browser tidak mengenali JavaScript maka browser akan memperlakukannya
sebagai komentar sehingga tidak ditampilkan pada jendela browser.
Kode :

document.write ("Selamat Siang");

document.write ("Pemrograman Web");

kode diatas disebut sebagai sebuah pernyataan (statement). Pernyataan

adalah sebuah perintah pada JavaScript yang berdiri sendiri dan
menghasilkan suatu tindakan. Dalam hal ini pernyataan tersebut berfungsi
untuk menampilkan string pada jendela browser. Perlu diketahui jika
terdapat lebih dari satu pernyataan, maka antara pernyataan satu dengan
lainnya harus dipisahkan dengan tanda titikkoma (;).

Dengan demikian, pada kode JavaScript di depan terdapat dua perintah yang
masing-masing menampilkan string Selamat Siang dan Pemrograman
Web.

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
4 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

Pesan-Pesan Kesalahan
Kode JavaScript yang salah secara sintaks akan membuat browser
menampilkan kotak dialog yang menyatakan pesan kesalahan. Sebagai
contoh, ubahlah tulisan document pada kode di atas menjadi DOCUMENT dan
kemudian simpan kembali file tersebut. Selanjutnya panggillah kembali file
tersebut pada browser, maka pesan kesalahan yang muncul adalah seperti
pada gambar dibawah ini:

Keterangan : Pesan kesalahan diatas terdapat pada baris 13 berupa kata

DOCUMENT yang tidak dikenal.

Umumnya kesalahan yang sering terjadi pada kode JavaScript diakibatkan

oleh hal-hal sebagai berikut :
1. Kesalahan karena penulisan huruf capital dan huruf kecil
2. Penggunaan tanda kutip yang tidak cocok
3. Kesalahan dalam tag <SCRIPT>

Properti
Properti adalah atribut dari sebuah objek. Pada contoh di depan, document
adalah sebuah objek bawaan pada javascript. Untuk mengakses sebuah
properti, perlu penulisan dengan bentuk sebagai berikut :

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
5 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

nama_objek.nama_properti

Tanda titik digunakan sebagai pemisah antara nama objek dan nama
properti.

Properti dapat diberi nilai melalui bentuk penugasan berikut :

Objek.properti = nilai
Contoh :
<HTML>
<HEAD>
<TITLE> properti defaultStatus </TITLE>
</HEAD>
<BODY>
Tes defaultStatus
<SCRIPT LANGUAGE = "JavaScript">
<!--
window.defaultStatus = coba
//-->
</SCRIPT>
</BODY>
</HTML>

Hasil pemberian nilai ke defaultStatus diatas adalah seperti pada gambar

dibawah ini :

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
6 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

Metode
Metode adalah suatu kumpulan kode yang digunakan untuk melakukan
sesuatu tindakan terhadap objek. Sbg contoh, write() pada objek document
adalah metode yang digunakan untuk menuliskan tulisan ke jendela browser.

Seperti halnya properti, metode dipanggil dengan menyebutkan nama objek,

tanda titik, dan nama metode diikuti dengan daftar parameter yang
diletakkan di dalam tanda kurung.

Penanganan Kejadian
Penanganan kejadian (event handler) adalah sekumpulan kode yang akan
dijalankan manakala pemakai melakukan suatu tindakan (biasa disebut
dengan kejadian). Contoh kejadian adalah ketika pemakai mengklik tombol
mouse atau ketika menutup jendela browser. Bentuk penanganan kejadian
adalah seperti berikut ini :

nama_kejadian=kumpulan kode

Contoh kejadian adalah onMouseOver dan onMouseOut.

Penanganan kejadian ini dapat diletakkan pada suatu link. Dalam hal ini
onMouseOver adalah kejadian yang berlangsung saat penunjuj mouse
menunjuk ke link dan onMouseOut adalah kejadian yang berlangsung saat
penunjuk mouse tidak lagi menyorot link.
Contoh :
<A HREF = www.detik.com
onMouseOver = window.status = Anda menyorot link; return true
onMouseOut = window.status = ; return true> detik dot com
</A>

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
7 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

Cara Penulisan Javascript

Script javascript dapat diletakkan pada :

1. Body dalam document HMTL
<body>
<script language=javascript>
//Baris kode javascript ketik disini
//Setiap perintah diakhiri dengan ;
</script>
</body>
2. Header dalam bentuk function
Script javascript di definisikan diatas, yaitu diantara tag <head>
dan </head>, contoh :
<head>
<script language=javascript>
function namafunction(parameterinput)
{
// Baris Kode fungsi di sini dan diakhiri oleh ;
}
</script>
</head>

3. Terpisah dalam document HTML / external javascript

Yaitu jika file nya diletakkan terpisah dengan document HTML,
disimpan dalam sebuah file dengan ekstension .js . jika file HTML
ingin menggunakan script javascript yang terpisah, maka perintah
untuk memanggil file tersebut adalah sebagai berikut :
<script language=javascript src=path/namafile.js></script>
Dengan cara seperti ini, maka file javascript dapat digunakan oleh
beberapa document HTML. Gambaran nya seperti pada gambar
dibawah ini :
<script> <script>

file.js
file.js

file1.html

file1.html

<script>

file1.html

Latihan 1 :

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
8 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

<HTML>
<BODY>
<SCRIPT language="javascript">
document.write("Selamat Datang<BR>");
document.write("Di Pemrograman WEB");
</SCRIPT>
</BODY>
</HTML>

Latihan 2 :
<HTML>
<head>
<title>judul</title>
<SCRIPT language="javascript">
document.bgColor="blue";
document.fgColor="white";
document.title="ME";
document.write("<strong>Selamat Datang di Pemrograman Web</strong>");
</SCRIPT>
</head>
<BODY>

</BODY>
</HTML>

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
9 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

Jendela Pada javascript

Jendela Pemasukan Data

JavaScript memiliki mekanisme yang memungkinkan pemakai disuguhi
jendela untuk memasukkan sederetan masukan dan setelah pemakai
mengkilk tombol OK maka kode dalam JavaScript akan melakukan
serangkaian proses.
seperti pada contoh berikut, skrip berikut ini akan meminta user memasukan
namanya dan kemudian akan mendapatkan jawaban.
Contoh :

<HTML>
<HEAD>
<TITLE>Jendela Memasukkan Data</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
var nama = prompt("Nama Anda : ");
document.write("Hai, " + nama);
</SCRIPT>
</BODY>
</HTML>

Maka setelah skrip tersebut dijalankan akan muntul jendela seperti pada
gambar dibawah ini :

Masukkan nama anda, misalnya Supriadi. Kemudian klik tombol ok maka

akan melihat hasil dari inputan yang anda masukan.
Hasil di atas didapat melalui pernyataan :

document.write("Hai, " + nama);

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
10 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

Pada kata "Hai, " + nama menghasilkan string yang merupakan

gabungan dari string Hai, dan isi dari variabel nama. Bila user
menekan tombol Cancel, prompt akan menghasilkan nilai null. Jika
salah satu tombol diklik, maka pada browser anda akan muncul seperti

pada gambar dibawah ini :

Jendela Peringatan
Jika Anda ingin memberikan sebuah pesan kepada user, Anda bisa
menyajikannya dalam bentuk kotak dialog yang biasa disebut Alert Box. Maka
pernyataan yang diberikan adalah :

Window.alert("Jendela Peringatan");

Contoh :
<HTML>
<HEAD>
<TITLE>Alert Box</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
window.alert("Jendela Peringatan");
</SCRIPT>
</BODY>
</HTML>

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
11 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

Hasil dari script diatas adalah seperti pada gambar dibawah ini :

Jendela Konfirmasi
Javascript menyediakan jendela konfirmasi. Hal ini dapat dilakukan
dengan menggunakan metode confirm().

Contoh :
<HTML>
<HEAD>
<TITLE>Jendela Konfirmasi</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
var jawab = window.confirm("Anda sudah belajar?");
document.write("Jawaban Anda: " + jawab);
</SCRIPT>
</BODY>
</HTML>

Maka pada browser akan seperti pada gambar dibawah ini :

Client Side Scripting Pusat Pengembangan Bahan Ajar

12 Universitas Mercu Buana
12 Rapelino Ferdiansyah ST.MKOM
JavaScript

Keterangan :
var jawab = window.confirm("Anda sudah belajar?");

pada contoh ini menggunakan variabel jawab yang diisi dengan hasil dari
fungsi confirm().
jika tombol OK diklik, maka browser anda akan menampilkan seperti pada

gambar dibawah ini :

tetapi jika tombol cancel di klik, maka browser anda akan menampilkan
seperti pada gambar dibawah ini :

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
13 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
14 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

VARIABLE DAN TIPE DATA

Variable & Nilai

Dalam sebuah bahasa pemrograman, variabel sangatlah berperan
penting .Biasanya variabel digunakan untuk menyimpan data. Variabel
adalah suatu nama yang digunakan untuk menyimpan nilai dan nilai
yang ada di dalamnya dapat diubah sewaktu-waktu. Variabel
berlawanan dengan literal atau konstanta, dimana konstanta
menyatakan nilai yang tetap.

Pada JavaScript, pendeklarasian variabel bersifat opsional, artinya

bahwa variabel bisa dideklarasikan atau tidak. Bila suatu variabel
diberikan sebuah nilai, maka JavaScript menganggap bahwa variabel
tersebut telah dideklarasikan. Meskipun pendeklarasian variabel
pada JavaScript bersifat opsional, akan lebih baik jika variable selalu
dideklarasikan dalam pembuatan program.

Deklarasi Variable
Pendeklarasian variabel pada JavaScript ditulis dengan menggunakan
pernyataan var.
Contoh :
var nama = Budi;
var nilai = 8;
var x,y,z = 7;
var alamat;

Keterangan :
Pada contoh pertama, variabel nama dideklarasikan dan diisi
dengan string Budi.
Pada contoh kedua, variabel nilai dideklarasikan dan diisi dengan
nilai 8.
Pada contoh ketiga x, y, z dideklarasikan dan diisi dengan string
7. Pada contoh ketiga ini, dapat langsung dideklarasikan tiga
variabel sekaligus dengan cukup menuliskan kata kunci var satu

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
15 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

kali saja. Adapunun pada contoh terakhir variabel alamat akan diisi
dengan null.

Walaupun suatu variabel dapat dideklarasikan tanpa diberi nilai awal,

sebaiknya hal seperti ini dihindari. Variabel tidak dapat digunakan
sebelum diberi sebuah nilai atau dideklarasikan secara eksplisit.
Contoh :
Document.write(nama);

Padahal nama belum diberi oleh nilai tertentu atau belum

dideklarasikan, maka pesan kesalahan akan dimunculkan.

Penamaan Variable
Penamaan variabel harus mengikuti aturan-aturan sebagai berikut :
1. Penamaan variabel diawali dengan huruf atau tanda karakter garis
bawah ( _ ).
2. Nama variabel tidak boleh mengandung karakter spasi. Bila
variable terdiri dari beberapa kata, maka variabel dapat dipisahkan
dengan karakter garis bawah.
3. Karakter kedua dan seterusnya dapat berupa huruf, angka, atau
karakter garis bawah.
4. Penamaan variabel tidak boleh menggunakan kata kunci JavaScript.
5. Beberapa variabel yang bernama sama tidak dapat dimiliki dalam
sebuah blok. Tetapi dapat digunakan asalkan variabel-variabel
tersebut terletak dalam blok yang berbeda.
6. Sebaiknya penamaan variabel dibuat sesuai dengan apa yang
disimpannya.
7. Huruf kapital dan huruf kecil dibedakan (CASE-SENSITIF)

Contoh :
Penamaan Variabel yang benar :

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
16 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

nama, nama1, nama_2

contoh 2
nama_1 dan NAMA_1

Keterangan :
Menyatakan variabel yang berbeda karena huruf kapital dan huruf kecil
dibedakan
penamaan Variable yang salah :
2nama, nama 1, nama, datanama+nim

Keterangan :
Penggunaan variable ini dianggap salah karena diawali dengan angka,
mengandung spasi, mengandung tanda +

Tipe data
JavaScript tidak mendukung tipe data secara eksplisit. Hal ini dapat
dilihat pada beberapa contoh sebelumnya. Variabel dapat
dideklarasikan tetapi tidak menentukan tipe datanya. Meskipun
JavaScript tidak mendukung tipe data secara eksplisit, namun
JavaScript mempunyai tipe data secara implisit, yaitu :

Nama Contoh Nilai

Bilangan / Numerik 496, -90
String Pemrograman Web
Nilai Logika / Boolean True atau false
Null Variable yang tidak di inialisasi

Tipe data Bilangan / Numerik

Tipe bilangan/numerik dapat dibedakan menjadi tipe bilangan bulat
dan bilangan real.Bilangan bulat dapat ditulis dengan basis 10
(desimal), basis 8 (Oktal), ataupun basis 16 (Heksadesimal)

1. Bilangan Desimal

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
17 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

Bilangan desimal menggunakan digit 0 sampai dengan 9. Bilangan

desimal ditulis dengan tidak boleh diawali dengan angka 0 (nol)
(kecuali bilangan nol itu sendiri)
Contoh :
078 tidak diartikan sebagai 78

2. Bilangan Oktal
Bilangan oktal menggunakan digit 0 sampai dengan 7. Bilangan
oktal ditulis dengan diawali angka 0 (nol).
Contoh :
012 (identik dengan 10 dalam satuan desimal)

3. Bilangan hexadecimal
Bilangan heksadesimal menggunakan digit o samapi dengan 9,
huruf A samapi dengan hurf F. Bilangan heksadesimal diawali
dengan awalan 0x atau 0X.
Contoh :
A (identik dengan 10 dalam satuan desimal)
FF (identik dengan 255 dalam satuan desimal)

Bilangan real bisa mengandung tanda pecahan. Untuk

mendeklarasikan tipe bilangan real, dapat digunakan tanda titik
atau notasi ilmiah (notasi E) dan bukan tanda koma. Tanda e atau
tanda E yang biasa digunakan untuk menyatakan notasi ilmiah bisa
digunakan.
Contoh :
var A = 8765.789
var B = 8.765789E+3

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
18 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

Pada contoh di atas pendeklarasikan dua buah bilangan yang sama,

hanya saja pada pada pendeklarasikan pertama digunakan tanda
titik sedangkan pada pendeklarasikan kedua digunakan notasi
ilmiah.

Tipe data String

String adalah deretan karakter-karakter. Pada JavaScript string dapat
dituliskan diantara tanda petik tunggal () atau tanda ().
Contoh :
var nama = Rapelino Ferdiasyah ;
var nama = Rapelino Ferdiansyah ;

Cara penulisan yang harus digunakan tergantung pada kebutuhan.

Bila string yang dideklarasikan di dalamnya terdapat karakter , lebih
baik gunakan tanda petik tunggal.
Contoh :
var a = Eko berkata, Hari sudah malam ;
Dan sebaliknya, jika string yang dideklarasikan de dalamnya terdapat
karakter , lebih baik gunakan tanda petik ganda.
Contoh :
var a = Dont cry ;
Jika string tidak memiliki karakter sama sekali, maka stringnya disebut
string kosong.
Penulisannya : atau
JavaScript menyediakan karakter-karakter khusus, seperti :
\b menyatakan backspace
\f menyatakan form feed

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
19 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

\n menyatakan karakter baris baru

\r menyatakan carriage return (memindah kursos ke awal baris)
\t menyatakan karakter tab

Tipe data Logika (Boolean)

Tipe data boolean hanya dapat bernilai true atau false, dimana true
menyatakan benar dan false menyatakan salah. Tipe seperti ini banyak
digunakan sebagai kondisi dalam pernyataan seperti if dan
while.

Contoh :
var nilai_1 = (nilai_2 < 100);
Keterangan :
Pada contoh tersebut, jika nilai_2 lebih kecil dari pada 100 maka nilai_1
akan bernilai true.
Sebaliknya jika nilai_2 bernilai lebih besar atau sama dengan 100,
nilai_1 akan bernilai false.

Tipe Data Null

Tipe data null digunakan untuk merepresentasikan variabel yang tidak
diinisialisasi. Nilai null menyatakan nilai khusus yang berarti bahwa
nilainya tidak ada.
Contoh :
var total ;
Pada contoh tersebut variabel total akan diberi nilai null, yang
menyatakan bahwa variabel ini tidak pernah diberi nilai.

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
20 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

Latihan :
<HTML>
<HEAD>
<TITLE>BILANGAN DAN STRING </TITLE>
</HEAD>
<BODY>
<H2> OPERASI BILANGAN DAN STRING </H2>
<SCRIPT LANGUAGE = "JavaScript">
document.writeln("<PRE>");
var A = "40";
var B = "30";
var C = 80;
var D = 60;
var E = A + B;
document.writeln ('"40" + "30" = ' + E);
E = B + C;
document.writeln ('"30" + 80 = ' + E);
E = C + D;
document.writeln ('80 + 60 = ' + E);
E = D + A;
document.writeln ('60 + "40"= ' + E);
document.writeln("</PRE>");
</SCRIPT>
</BODY>
</HTML>

Simpan dan jalankan pada browser anda, maka akan muncul halaman
seperti pada gambar dibawah ini :

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
21 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

OPERATOR

Ekspresi
Ekspresi merupakan suatu bentuk yang menghasilkan suatu nilai.
Dalam bentuk yang sederhana ekspresi, biasanya ekspresi merupakan
sebuah variabel. Dan dalam bentuk yang kompleks biasanya sebuah
ekspresi disajikan dengan melibatkan operator & operand.

Misalnya :

31*6 Ekspresi

Angka 3, 1, dan 6 adalah merupakan operand, sedangkan simbol

dan* berperan sebagai operator.
Contoh dalam penggunaan ekspresi adalah yang biasanya terjadi pada
pernyataan yang menggunakan write.

document.write(4 + 5);

akan menampilkan hasil ekspresi 4 + 5 pada jendela browser.

Operator
Pada dasarnya, operator pada JavaScript dapat dibagi menjadi enam,
yaitu :
1. Operator Aritmatik
2. Operator Pemberian nilai
3. Operator pemanipulasi bit (bitwise)
4. Operator pembanding
5. Operator Logika
6. Operator String

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
22 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

Operator Aritmatika
Operator aritmatik digunakan pada operan bertipe numerik. Semua
operator berlaku untuk bilangan bulat maupun bilangan
pecahat(floating-point). Ada dua macam operator aritmatik :
1. Operator aritmatik tunggal (unary)
Hanya menggunakan satu buah operand

2. Operator aritmatik biner (binary)

Menggunakan operand lebih dari satu (biasanya 2 buah operand)

JavaScript tidak mendukung operator untuk perpangkatan.

Perpangkatan dapat dilakukan melalui metode yang akan dijelaskan
untuk berikutnya.
Operator +, -, *, dan / sering kali dijumpai dalam penggunaannya di
setiap bahasa pemrograman. Yang perlu diperhatikan adalah operator
penambahan dengan satu (++) dan operator pengurangan dengan
satu (--). Kedua operator ini masing-masing digunakan untuk
menambah atau mengurangi nilai suatu variabel dengan satu..

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
23 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

Contoh :
var x = 50;
Kemudian pada baris berikutnya dituliskan :
x++;
maka nilai variabel x sekarang adalah 51. emudian bila dituliskan lagi
x--;

variabel x akan kembali bernilai 50.

Operator ++ dan dapat dituliskan di belakang atau di depan
variabel : ++x atau x--;
Pada kasus di atas, letak operator ++ atau (di depan atau di
belakang variabel) tidak berpengaruh.. Ada kasus lain dimana letak
tanda ++ atau sangat berpengaruh.
Contoh :
var y = 10;
kemudian pada baris berikutmya ditulis pernyataan :
x = y++;
pernyataan ini berarti nilai y diberikan kepada x kemudian di tambah
1.
Dengan kata lain, sekarang x bernilai 10 dan y bernilai 11.
Bila operator dituliskan di depan variabel :
x = ++y;
maka x dan y bernilai sama yaitu 11. Hal ini dikarenakan pernyataan
tersebut dapat diterjemahkan menjadi : nilai y ditambah dengan 1
kemudian hasilnya diberikan kepada x.

Operator Pemberian Nilai

Operator pemberian nilai digunakan bila ingin memberi nilai ke suatu
operan atau mengubah nilai suatu operan. Semua opearotor pada
tabel dibawah dapat dikenakan pada operan bertipe numerik. Hanya
operator = dan += yang dapat dikenakan pada operan bertipe string.

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
24 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

Operator += digunakan untuk menambah suatu operan dengan

operan lain.
Contoh :
var x = 10;
Bila kemudian dituliskan pernyataan :
x+= 20
variabel x bernilai 30. Hal ini dikarenakan pernytaan tersebut dapat
diterjemahkan menjadi nilai x ditambah dengan 20.

Operator Pemanipulasian Bit

Operasi ini berhubungan dengan pemanipulasian bit pada operan
bertipe bilangan bulat.

Operator Pembanding
Operator pembanding digunakan untuk membandingkan dua buah
operan. Operan yang dikenai operator ini dapat bertipe string,
numerik, maupun ekspresi lain. Hasil dari operasi pembandingan

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
25 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

adalah data bertipe boolean yang menunjukkan hasil operasi benar

atau salah.

Latihan I
<HTML>
<HEAD>
<TITLE>Operasi Matematika</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE ="JavaScript">
document.write("10 + 4 = " + (10 + 4) );
document.write("<BR>");
document.write("20 - 3 = " + (20- 3) );
document.write("<BR>");
document.write("5 * 3 = " + (5 *3) );
document.write("<BR>");
document.write("40 / 3 = " + (40/ 3) );
document.write("<BR>");
document.write("20 % 3 = " + (20% 3) );
document.write("<BR>");
</SCRIPT>
</BODY>
</HTML>

Simpan file diatas, lalu jalankan pada browser anda, maka tampilannya
akan seperti pada gambar dibawah ini :

Client Side Scripting Pusat Pengembangan Bahan Ajar

12 Universitas Mercu Buana
26 Rapelino Ferdiansyah ST.MKOM
JavaScript

Latihan 2
<HTML>
<HEAD>
<TITLE>Operasi Pemanipulasi Bit</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
document.write("9 & 10 = " + (9 & 10) );
document.write("<BR>");
document.write("29 + 7 = " + (29 & 7) );
document.write("<BR>");
document.write("9 | 10 = " + (9 | 10) );
document.write("<BR>");
document.write("29 | 7 = " + (29 | 7) );
document.write("<BR>");
document.write("9 ^ 10 = " + (9 ^ 10) );
document.write("<BR>");
document.write("29 ^ 7 = " + (29 ^ 7) );
document.write("<BR>");
document.write("~1 = " + (~1) );
document.write("<BR>");
</SCRIPT>
</BODY>
</HTML>

Simpan file diatas lalu buka pada browser anda, maka hasilnya adalah
seperti pada gambar dibawah ini :
Latihan 3

<HTML>
<HEAD>
<TITLE>Konversi Bilangan</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
27 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

var a = parseInt("27");

document.write("1. " + a + "<BR>");

a = parseInt("27.5");

document.write("2. " + a + "<BR>");

var a = parseInt("27A");

document.write("3. " + a + "<BR>");

a = parseInt("A27.5");

document.write("4. " + a + "<BR>");

var b = parseFloat("27");

document.write("5. " + b + "<BR>");

b = parseFloat("27.5");

document.write("6. " + b + "<BR>");

var b = parseFloat("27A");

document.write("7. " + b + "<BR>");

b = parseFloat("A27.5");

document.write("8. " + b + "<BR>");

var uang_amir = 500; // Numerik

var uang_edi = "600"; // String

document.write("9. ");
document.write(uang_amir + uang_edi);
document.write("<BR>");
document.write("10. ");
document.write(uang_edi + uang_amir);
document.write("<BR>");
document.write("11. ");
document.write(parseInt(uang_edi) + uang_amir);
document.write("<BR>");
document.write("12. ");
document.write(parseInt("11", 16));
document.write("<BR>");

</SCRIPT>
</BODY>
</HTML>

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
28 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

PERCABANGAN

Pernyataan IF
Penrnyataan if adalah pernyataan yang berguna untuk
menjalankan salah satu dari dua alternatif yang didasarkan oleh
sebuah kondisi. Ada berbagai bentuk pernyataan ini yang akan
dituangkan sebagai berikut.

1. Pernyataan IF tanpa ELSE

Bentuk Umum :
if (kondisi) pernyataan

Dalam hal ini, kondisi berupa sembarang ekspresi yang menghasilkan

nilai true (benar) atau false (salah) dan di dalam tanda {} dapat
diletakkan pernyataan-pernyataan yang akan dijlankan sekiranya
kondisi if bernilai benar.

if (kondisi) {
pernyataan-pernyataan
}

2. Pernyataan IF dengan ELSE

Pernyataan if yaang lengkap memiliki bagian else.
Bentuk umumnya adalah sebagai berikut :

if (kondisi) {
pernyataan yang dijalankan jika kondisi benar
} else {
pernyataan yang dijalankan jika kondisi salah
}

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
29 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

3. Pernyataan IF bersarang
Pada kasus-kasus tertentu, mungkin akan diletakkan pernytaan if
lain setelah else.
Bentuk umum :

if (kondisi_1)
pernyataan yang dijalankan jika kondisi_1 benar
else if (kondisi_2)
pernyataan yang dijalankan apabila kondisi_1 tidak
terpenuhi dan kondisi_2 terpenuhi
else
pernyataan yang dijalankan bila semua kondisi tidak
terpenuhi

Pernyataan Switch
Kegunaan pernyataan ini adalah untuk menangani percabangan
majemuk. Dengan kata lain, pernyataan switch digunakan untuk
menyederhanakan pernyataan if bersarang.
Bentuk Umum :

switch (variabel) {
case nilai_1 :
perintah_1;
break;
case nilai_2 :
perintah_2;
break;
...........
case nilai_m :
perintah_m;
break;
default :
perintah_n;
break;
}
Pada bentuk ini, break bersifat opsional (bisa saja tidak disertakan).
Kegunaannya adalah untuk mengarahkan eksekusi ke akhir switch.
Perlu diketahui, setiap case bisa mengandung lebih dari satu
pernyataan, dengan antar pernyataan dipisahkan dengan tanda titik -
koma.

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
30 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

Bagian default juga bersifat opsional. Bagian ini akan dieksekusi tak
ada yang cocok dengan bagian case.

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
31 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

latihan 1
<HTML>
<HEAD>
<TITLE>Pernyataan if</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
var nilai = prompt("Nilai (0-100): ", 0);
var hasil = "Tidak Lulus";

if (nilai >= 60)

hasil = "Lulus";
document.write("Hasil: " + hasil);
</SCRIPT>
</BODY>
</HTML>

Simpan file diatas, setelah itu buka pada browser anda, maka akan
muncul halaman seperti pada gambar dibawah ini :

Latihan 2

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
32 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

<HTML>
<HEAD>
<TITLE>Pernyatan if-else</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">

var nilai = prompt("Nilai (0-100): ", 0);

var hasil = "";
if (nilai >= 60)
hasil = "Lulus";
else
hasil = "Tidak Lulus";
document.write("Hasil: " + hasil);

</SCRIPT>
</BODY>
</HTML>

Simpan file diatas, setelah itu jalankan pada browser anda, tampilan
browser anda akan seperti pada gambar dibawah ini :

Latihan 3
<HTML>
<HEAD>
<TITLE>Contoh switch</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
var tanggal = new Date();
var kode_hari = tanggal.getDay();
var nama_hari = "";

switch(kode_hari) {
case 0:
nama_hari = "Minggu";
break;
case 1:

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
33 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

nama_hari = "Senin";
break;
case 2:
nama_hari = "Selasa";
break;
case 3:
nama_hari = "Rabu";
break;
case 4:
nama_hari = "Kamis";
break;
case 5:
nama_hari = "Jumat";
break;
case 6:
nama_hari = "Sabtu";

}
document.write("Hari ini hari " + nama_hari);
document.write(", tanggal " + tanggal.getDate() +
"/" + (tanggal.getMonth() + 1) +
"/" + tanggal.getYear());

</SCRIPT>
</BODY>
</HTML>

Simpan file diatas, jalankan pada browser anda, maka tampilannya

akan seperti pada gambar dibawah ini :

PENGULANGAN

Proses Pengulangan

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
34 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

Pengulangan digunakan untuk mengeksekusi pernyataan-

pernyataan beberapa kali. Blok berisi pernyataan-pernyataan yang
harus diulang atau sering juga disebut kalang (loop). Jadi suatu
pernyataan dapat dieksekusi misalnya sebanyak 50 kali dengan cara
menuliskannya di dalam kalang.

Untuk menangani pengulangan-pengulangan, JavaScript menyediakan

pernyataan-pernyataan sebagai berikut :

1. While
Pernyataan while biasanya digunakan bila belum tahu pasti berapa
banyak pengulangan dilakukan. Berakhirnya kalang while
ditentukan oleh suatu kondisi. Bila kondisi sudah tidak terpenuhi
maka pengulangan akan dihentikan. Dengan kata lain, selama
kondisi masih terpenuhi, pengulangan akan terus dilakukan.
Bentuk pernyataan while :

while (kondisi) {
pernyataan
}

Jika dalam tanda { } hanya terdapat satu pernyataan, tanda

tersebut bisa dihilangkan. Alur programnya adalah mula-mula
kondisi dalam while diperiksa. Jika bernilai true maka pernyataan
yang mengikuti kondisi while akan dieksekusi dan kemudian kondisi
diperiksa lagi.

Selama kondisi masih bernilai benar, maka bagian pernyataan akan

dijalankan terus. Begitu kondisi bernilai false, pernyataan while
akan berakhir.

2. Do.while

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
35 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

Pernyataan do....while mulai diperkenalkan pada JavaScript 1.2.

Kegunaan pernyataan ini hampir sama dengan pernyataan while,
yaitu untuk mengulang beberapa pernyataan apabila
jumlah pengulangan belum diketahui.

Perbedaaannya adalah pada pernyataan do.....while, pengujian

kondisi diletakkan pada akhir kalang.
Bentuk pernyataan do..........while :
do {
bok pernyataan
} while (kondisi);

3. For
Pernyataan ini adalah pernytaan yang peling sering digunakan.
Pernyataan ini akan digunakan ketika sudah diketahui berapa kali
pengulangan akan dilakukan.
Bentuk Pernyataan for :

for (inisialisasi; kondisi; penaikan_penurunan) {

pernyataan_pernytaan
}

4. Break dan continue

Pada beberapa kasus, mungkin pengulangan akan dihentikan
ditengah jalan. Untuk keperluan itulah, JavaScript menyediakan
pernyataan break. Pernyataan break dapat digunakan pada
pernyataan for maupun while.

Pernyataan continue adalah pernyataan lain yang digunakan

pada pengulangan. Pernyataan ini digunakan untuk
mengembalikan aliran program ke penguji kondisi pengulangan.
Dengan kata lain, pernyataan-pernyataan di bawah continue akan
diabaikan.

Pernyataan break dan continue dapat juga digunakan pada

kalang bersarang (baik for maupun while). Pada kalang bersarang,
pernyataan break akan menghentikan semua kalang sedangkan

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
36 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

pernyataan akan mengembalikan aliran program ke penguji kondisi

kalang paling dalam.

Latihan 1
<HTML>
<HEAD>
<TITLE>Contoh while</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE ="JavaScript">
var bilangan = 0;
while (bilangan < 5) {
document.write("Teknik Informatika<BR>");
bilangan++;
}
</SCRIPT>
</BODY>
</HTML>

Simpan file diatas, setelah itu buka pada browser anda, maka akan
muncul halaman seperti pada gambar dibawah ini :

Latihan 2
<HTML>
<HEAD>
<TITLE>Contoh do while</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE ="JavaScript">

var bilangan = 1;
do {
document.write(bilangan + "<BR>");
bilangan++;
} while (bilangan < 6);

</SCRIPT>
</BODY>
</HTML>

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
37 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

Simpan file diatas setelah itu jalankan pada browser anda, maka
hasilnya akan seperti pada gambar dibawah ini :

Latihan 3
<HTML>
<HEAD>
<TITLE>Contoh for</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE ="JavaScript">

var bilangan = 0;

for (bilangan = 1; bilangan <= 10;

bilangan++)
document.write(bilangan + "<BR>");

</SCRIPT>
</BODY>
</HTML>

Simpan file diatas, setelah itu buka pada browser anda, maka
tampilannya seperti pada gambar dibawah ini :

Client Side Scripting Pusat Pengembangan Bahan Ajar

12 Universitas Mercu Buana
38 Rapelino Ferdiansyah ST.MKOM
JavaScript

Latihan 4
<HTML>
<HEAD>
<TITLE>Contoh break</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE ="JavaScript">
var bilangan = 0;
while (bilangan < 5) {
if (bilangan == 3)
break;
document.write(bilangan + "<BR>");
bilangan++;
}

</SCRIPT>
</BODY>
</HTML>

Simpan file diatas, setelah itu jalankan pada browser anda, maka akan
muncul halaman seperti pada gambar dibawah ini :

latihan 5

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
39 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

<HTML>
<HEAD>
<TITLE>Contoh continue</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE ="JavaScript">

var i = 0;
// Contoh dengan while
while (i < 5) {
if (i == 3)
{
i++;
continue;
}
document.write(i + "<BR>");
i++;
}
document.write("<HR>");
// contoh dengan for
for (i = 0; i < 5; i++) {
if (i == 3)
continue;
document.write(i + "<BR>");
}

</SCRIPT>
</BODY>
</HTML>
Simpan file diatas, setelah itu jalankan pada browser anda, maka akan
muncul halaman seperti pada gambar dibawah ini :

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
40 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

FUNGSI

Definisi fungsi
Fungsi merupakan bagian program yang melakukan tugas tertentu.
Beberapa fungsi juga bisa mengembalikan nilai tertentu. Pada
dasarnya ada dua macam fungsi pada JavaScript, yaitu fungsi yang
didefinisikan sendiri dan fungsi bawaan (built-in function).
Bentuk Umum fungsi :

function nama_fungsi (parameter1, parameter2, .........)

{
pernyataan-pernyataan
}

Nama_fungsi merupakan nama yang diberikan ke fungsi tersebut.

Aturan penamaan fungsi sama dengan aturan penamaan variabel.
parameter1, parameter2, ... Merupakan informasi diberikan ke fungsi
ini. Bila tidak ada informasi yang diberikan, tulislah tanda ().

Sebuah fungsi tidak hanya menerima informasi, tetapi juga dapat

mengembalikan informasi. Caranya adalah dengan menggunakan kata
kunci return. Contoh :
function penjumlahan(x,y) {
var hasil = x + y;
return(hasil);
}

Pernyataan pertama dalam fungsi berupa : var hasil = x + y;

yang digunakan untuk mendeklarasikan variabel hasil dan kemudian
mengisinya dengan penjumlahan kedua argumen x dan y.

Pernyataan kedua yaitu pernyataan return digunakan untuk

memberikan nilai balik fungsi. Perlu diketahui bahwa pernyataan
return akan membuat fungsi berakhir dan menghasilkan nilai yang

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
41 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

sesuai dengan isi variabel hasil, yakni berupa penjumlahan kedua

argumennya.

Fungsi Rekrusif
Fungsi rekursif adalah fungsi yagn memanggil dirinya sendiri. Hal
seperti ini biasa dilakukan untuk kasus-kasus tertentu. Misalnya, fungsi
rekursif dapat diterapkan untuk memecahkan faktorial.

Fungsi Bawaan
JavaScript mempunyai beberapa fungsi bawaan, yaitu eval, parseInt,
parsefloat, escape, unescape, isNaN.

1. Fungsi Eval
Fungsi eval digunakan untuk mengevaluasi ekspresi atau
mengeksekusi pernyataan JavaScript.
Fungsi ini banyak digunakan sebagai pengevaluasi ekspresi.
Contoh :
var A = eval (3*4+5);

Keterangan : akan memberikan nilai 17 ke variabel A.

Selain untuk mengevaluasi ekspresi, fungsi eval juga dapat
digunakan untuk mengeksekusi pernyataan.
Contoh :
var garis= document.write (<HR>);

Bila fungsi eval dipanggil dengan parameter variabel garis : eval

(garis);
Browser akan menggambar sebuah garis di jendela.

2. Fungsi parseInt dan parseFloat

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
42 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

Kegunaan kedua fungsi ini hampir sama. Keduanya meminta

sebuah parameter bertipe string dan mengkonversikannya ke
numerik.

3. Fungsi escape
Fungsi ini digunakan untuk menyandikan string ke himpunan
karakter ISO-latin-1. Tujuannya agar string tersebut dapat dibaca
oleh semua komputer. Fungsi ini mengganti semua karakter non
alfanumeris pada parameter string ke bentuk %XX, dimana XX
adalah nomor dari karakter ISO-Latin-1.
Contoh :
document.writeln(escape(halo, manis!));
Akan menuliskan :
halo%2C%20manis%21

4. Fungsi unescape
Fungsi unescape adalah kebalikan dari fungsi escape yaitu
mengembalikan hasil penyandian ke himpunan karakter ASCII.

5. Fungsi isNaN
Fungsi isNaN digunakan untuk menguji suatu variabel adalah
bilangan atau bukan. Jika variabel yang diuji bukan bilangan, fungsi
ini mengembalikan true; jika sebaliknya fungsi ini mengembalikan
false. Berikut ini adalah sintaks fungsi isNaN :
Contoh :
var a = parseInt (456);
if (isNaN (a))
a = -10;
Pada contoh di atas, bila program gagal mengkonversikan string ke
nilai numerik, variabel a akan bernilai -10.

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
43 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

Latihan 1
<HTML>
<HEAD>
<TITLE>Fungsi</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">

function jumlah(a, b) {
var hasil = a + b;
return(hasil);
}
var c = jumlah(5, 6);
document.write(c);
document.write("<BR>");
document.write(jumlah(4, 3));

</SCRIPT>
</BODY>
</HTML>

Simpan file diatas, setelah itu jalankan pada browser anda, maka
tampilannya akan seperti pada gambar dibawah ini :

Latihan 2
<HTML>
<HEAD>
<TITLE>Variabel Global</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
44 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

function tambah(a, b) {
c = a + b;
return(c);
}
var c = 77;
document.write("c semula = " + c + "<BR>");
document.write(tambah(2, 3) + "<BR>");
document.write("c sekarang = " + c + "<BR>");

</SCRIPT>
</BODY>
</HTML>
<HTML>

Simpan file diatas, lalu jalankan pada browser anda, maka tampilannya
akan seperti pada gambar dibawah ini :

Latihan 3
<HEAD>
<TITLE>Variabel Lokal</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
function tambah(a, b) {
var c = a + b;
return(c);
}
var c = 77;
document.write("c semula = " + c + "<BR>");
document.write(tambah(2, 3) + "<BR>");
document.write("c sekarang = " + c + "<BR>");
</SCRIPT>
</BODY>
</HTML

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
45 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

Simpan file diatas, setelah itu tampilkan pada web browser anda, maka
akan muncul halaman seperti pada gambar dibawah ini :

Latihan 4
<HTML>
<HEAD>
<TITLE>Faktorial</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
function faktorial(n) {
if (n == 0)
return(1);
else
return( n * faktorial(n-1));
}
document.write("5! = " + faktorial(5));

</SCRIPT>
</BODY>
</HTML>

Simpan file diatas, setelah itu jalankan pada web browser anda, maka
tampilannya akan seperti pada gambar dibawah ini :

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
46 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

Latihan 5
<HTML>
<HEAD>
<TITLE>Validasi Masukan</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
function cekNama(form) {
if (form.elements[0].value == "") {
alert("Nama harus dimasukkan");
form.nama.focus();
form.nama.select();
return(false);
}
alert("Terima kasih, " +
form.elements[0].value);
return(true);
}

</SCRIPT>
<FORM NAME = "formku">
<PRE>
Nama : <INPUT TYPE = "TEXT" NAME = "nama"><BR>
<INPUT TYPE = "BUTTON" VALUE = "Kirim"
onClick = "cekNama(this.form)"><BR>
</PRE>
</FORM>
</BODY>
</HTML>

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
47 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

Simpan file diatas, setelah itu jalankan pada web browser anda, maka
akan tampil halaman seperti pada gambar dibawah ini :

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
48 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

ARRAY

Definisi array
Array merupakan sekumpulan elemen, yang masing-masing
elemnennya mempunyai tipe apa saja. Konsep array merupakan
penggabungan beberapa variabel menjadi satu kesatuan.

Dapat juga dikatakan bahwa array adalah wadah yang dapat

menyimpan sebuah nilai skalar. Masing-masing nilai diakses melalui
indeks yang disebut subskrip. Biasanya indeks dimulai dari bilangan
nol (0).

Array diimplementasikan melalui objek array. Penulisannya dapat

dilakukan sebagai berikut :

namaArray=new Array(elemen_1, elemen_2, ........, elemen_n )

atau

namaArray=[elemen_1, elemen_2, ..........., elemen_n]

Contoh :
var nilai = new Array (100, 50, 80, 20, 40)
var kota = new Array (Jakarta, Bogor, Bekasi, Depok)
var nilai = new Array (5)

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
49 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

Jumlah elemen array dapat diketahui dengan menggunakan properti

length dalam objek. Misalnya, terdapat elemen array sebagai berikut :
var nilai = new Array (100, 50, 80, 20, 40)
maka jumlah elemen array nilai adalah nilai.length
Selain mengetahui jumlah elemen array nilai, dapat juga menampilkan
isi dari sebuah array sebagai berikut :

document.write (namaArray[indeks])

Properti pada array

Objek Array mengandung beberapa properti sebagaimana tercantum
seperti di bawah ini :
1. Index : Berisi indeks yang menyatakan posisi string yang cocok
dengan pola ekspresi
reguler
2. Input : Menyatakan string asli yang cocok dengan ekspresi
reguler
3. Length : Menyatakan jumlah elemen array
4. Prototype : Berguna untuk menciptakan properti yang berlaku
untuk seluruh objek array
dalam sebuah skrip

Metode Array
Objek Array mengandung beberapa metode seperti di bawah ini :

1. concat berguna menggabungkan elemen-elemen dari dua buah

array.
Bentuk umumnya :

namaArray1.concat(namaArray2)

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
50 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

join berguna untuk mendapatkan sebuah string yang disusun oleh

setiap elemen pada array dengan pemisah berupa koma atau
berupa string yang ditentukan oleh pemrogram.

Bentuk umumnya :

namaArray.join()

atau
namaArray.join(string pemisah)

2. pop berguna untuk membuang elemen terakhir dalam array dan

memberikan elemen terakhir tersebut sebagai nilai balik:
Bentuk umumnya :

namaArray.pop()

3. push berguna untuk menambahkan satu atau beberapa elemen ke

bagian terakhir dari array.
Bentuk umum :

namaArray.push(elemen_1, ...., elemen_N)

4. shift berguna untuk membuang elemen pertama dalam array dan

memberikan nilai balik berupa elemen pertama pada array.
Bentuk umum :
namaArray.shift()

5. unshift berguna untuk menambahkan satu atau beberapa elemen

ke posisi sebelum elemen partama dalam array
Bentuk umum :

nama_Array.unshift(elemen_1, ......., elemen_N)

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
51 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

6. slice berguna untuk mendapatkan satu atau beberapa elemen

dalam array.
Bentuk umum :
namaArray.slice(indeksAwal, indeksAkhir)

7. Splice berguna untuk menghapus elemen-elemen dalam array dan

sekaligus menambahkan elemen-elemen ke dalam array.
Bentuk umum :
namaArray.splice(indeksAwal, jumlah_dihapus,[el_tamb_1,....el_tamb_en])

8. toString berguna menghasilkan string yang tersusun atas elemen-

elemen array dengan pemisah berupa koma. Selain itu metode ini
bisa dikenakan pada elemen array. Kegunaannya adalah untuk
mengubah sembarang tipe nilai elemen menjadi teks (string).

namaArray.toString

9. reverse membalik urutan elemen-elemen dalam string. Elemen

pertama menjadi elemen terakhir dan elemen terakhir menjadi
elemen pertama.
Bentuk umum :

namaArray.reverse()

10. sort berguna untuk mengurutkan data.

Bentuk umum :

namaArray.sort

Array dimensi banyak

Selain berdimensi satu, array dapat juga dibuat menjadi dimensi
banyak (bisa dimensi dua atau tiga). Array berdimensi dua dapat

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
52 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

dibentuk dengan membuat dua buah array dan salah satu array
diberikan sebagai elemen dari array yang lain.

Latihan 1
<HTML>
<HEAD>
<TITLE>Jumlah Elemen Array</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE ="JavaScript">
var kota = new Array();
document.write("1. Jumlah elemen: " + kota.length + "<BR>");
kota[10] = "Jakarta";
document.write("2. Jumlah elemen: " + kota.length + "<BR>");
var nilai = new Array(5);
document.write("3. Jumlah elemen: " + nilai.length + "<BR>");
</SCRIPT>
</BODY>
</HTML>

Latihan 2
<HTML>
<HEAD>
<TITLE>Isi Array</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
var kota = new Array ("Bogor","Depok","Jakarta","Tangerang");
var i;

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

document.write(kota[i] + "<BR>");
}
</SCRIPT>
</BODY>
</HTML>

Latihan 3
<HTML>
<HEAD>
<TITLE>Metode concat</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
var nama1 = new Array("Sarah", "Eko", "Umay");
var nama2 = new Array("Seto", "Andri","Puput");
var nama3 = nama1.concat(nama2);
for (var i = 0; i < nama3.length; i++){
document.write("[" + i + "] = " + nama3[i] + "<BR>");
}
</SCRIPT>
</BODY>
</HTML>

Latihan 4
<HTML>
<HEAD>
<TITLE>Metode sort</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
53 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

var nama1 = new Array("sarah", "eko", "umay","seto","andri","puput");

document.write("Isi nama1 semula:<BR>");
document.write(nama1 + "<BR>");
nama1.sort();
document.write("Isi nama1 setelah sort():<BR>");
document.write(nama1 + "<BR>");

</SCRIPT>
</BODY>
</HTML>

Latihan 5
<HTML>
<HEAD>
<TITLE>Array Dua Dimensi</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">

var nilai = [ [100, 200, 300],[400, 500, 600],[700, 800, 900] ];

document.write("Isi nilai:<BR>");
document.write(nilai + "<BR>");
document.write("Pengaksesan dengan dua indeks:<BR>");
document.write(nilai[0][0] + "<BR>");
document.write(nilai[0][1] + "<BR>");
document.write(nilai[0][2] + "<BR>");
document.write(nilai[1][0] + "<BR>");
document.write(nilai[1][1] + "<BR>");
document.write(nilai[1][2] + "<BR>");
document.write(nilai[2][0] + "<BR>");
document.write(nilai[2][1] + "<BR>");
document.write(nilai[2][2] + "<BR>");

</SCRIPT>
</BODY>
</HTML>

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
54 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

OBJECT

Konsep object
Selain dapat membuat objek sendiri, JavaScript menyediakan banyak
objek yang dapat digunakan. Pada dasarnya tedapat tiga macam objek
:
1. Objek bawaan
Objek yang tidak berhubungand dengan browser maupun halaman
HTML.
2. Objek Browser
Objek yang berhubungan dengan browser pengguna
3. Objek HTML
Objek yang berhubungan dengan dokumen HTML yang dimuat di
browser.

Untuk membuat objek, hal-hal yang harus diperhatikan adalah

mendefinisikan fungsi yang akan menjadi metode bagi objek dan
membuat konstruktor objek. Konstruktor adalah fungsi yang berisi
definisi properti dan menghubungkan metode-metode objek dengan
definisi fungsi.
Bentuk umum konstruktor adalah sebagai berikut :

Function namaObjek (arg1, ...., arg2) {

// properti objek
this.nama_properti = arg2;

//Metode Objek
this.namaMetode = namaFungsi;
}

Untuk membuat objek buatan, bentuk umumnya adalah :

namaVariabel=new konstruktorObjek(daftarParameter);

Latihan 1
<HTML>
<HEAD>

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
55 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

<TITLE>Membuat Objek</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">

function perolehWarna () {
return(this.warna);
}
function ubahWarna (warna) {
this.warna = warna;
}

function tampilkanInfoMobil() {
document.write("Tipe : " + this.tipe + "<BR>");
document.write("Merk : " + this.merk + "<BR>");
document.write("cc : " + this.cc + "<BR>");
document.write("Warna: " + this.warna + "<BR>");
}
function Mobil(tipe, merk, cc, warna) {
// Properti
this.tipe = tipe;
this.merk = merk;
this.cc = cc;
this.warna = warna;

// Metode
this.perolehWarna = perolehWarna;
this.ubahWarna = ubahWarna;
this.tampilkanInfoMobil = tampilkanInfoMobil;
}
// Membuat objek berdasarkan Mobil
var mobilku = new Mobil("Sidekick", "Suzuki", 1600, "Merah");
mobilku.tampilkanInfoMobil();
document.write("<HR>");
mobilku.ubahWarna("Merah Metalik");
mobilku.tampilkanInfoMobil();

</SCRIPT>
</BODY>
</HTML>

Simpan file diatas, kemudian jalankan pada web browser anda, maka
hasilnya akan seperti pada gambar dibawah ini :

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
56 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

Latihan 2
<HTML>
<HEAD>
<TITLE>Menciptakan Objek dengan Notasi Literal</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">

// Membuat objek berdasarkan Buku

var bukuPascal = {judul: "Pemrograman Pascal",
pengarang: "Abdul Kadir"};
document.write(bukuPascal.judul + "<BR>");
document.write(bukuPascal.pengarang + "<BR>");

</SCRIPT>
</BODY>
</HTML>

Simpan file diatas, kemudian jalankan pada web browser anda, maka
tampilannya akan seperti pada gambar dibawah ini :

Latihan 3

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
57 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

<HTML>
<HEAD>
<TITLE>Menampilkan Properti Objek</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
function Mobil(tipe, merk, cc, warna) {
// Properti
this.tipe = tipe;
this.merk = merk;
this.cc = cc;
this.warna = warna;
}
// Membuat objek berdasarkan Mobil
var mobilku = new Mobil("Sidekick", "Suzuki", 1600, "Merah");
document.write(mobilku.tipe + "<BR>");
document.write(mobilku["tipe"] + "<BR>");

</SCRIPT>
</BODY>
</HTML>

Simpan file diatas, kemudian jalankan pada web browser anda, maka
tampillannya akan seperti pada gambar dibawah ini :

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
58 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

OBJECT BAWAAN JAVASCRIPT

Object Document
Objek ini digunakan untuk mengakses informasi mengenai dokumen
HTML, penampilan output, dan memanipulasinya. Seperti yang telah
diuraikan sebelumnya bahwa Java Script berada dalam dokumen HTML
dibungkus dalam tag <SCRIPT>, sehingga Java Script dapat secara
langsung mengakses tag-tag HTML.

Property dari Objek Document

berikut adalah property yang sering digunakan dalam Objek Document
:
document.alinkColor=warna

memberikan warna activated link color

document.bgColor=warna

memberikan warna background

document.fgColor=warna

memberikan warna foreground atau warna huruf

document.linkColor=warna

memberikan warna link

document.vlinkColor=warna

memberikan warna visited link color

document.title=judul_window

memberikan judul/title window

document.image[]

mengakses objek image (dapat digunakan nama dari objek

anchor/link)
document.forms[]

mengakses objek form (dapat digunakan nama dari objek form)

Method dari Objek Document

Method yang sering digunakan dalam Objek Document adalah sebagai
berikut :
document.open()

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
59 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

menciptakan document HTML

document.close()

mengakhiri document HTML

document.write(output)

memberikan output ke browser

document.writeln(output)

memberikan output ke browser dengan menyertakan perpindahan

baris

khusus untuk output ke browser ada beberapa hal yang perlu

diperhatikan, yaitu :
anda dapat memberikan string diantara tanda ( dan ) pada objek
write atau writeln.
Contoh : document.write(Batman Jogja);
dalam objek write atau writeln, dapat juga digunakan untuk
menampilkan isi variabel.
Contoh :
P = 5;
L = 10;
Luas = P*L;
document.write(Luas);
terdapat karakter spesial yang dapat digunakan dalam objek write
atau writeln, yaitu :
\b untuk backspace
\f untuk form feed
\n untuk baris baru
\r untuk carriage return
\t untuk tab

Object Window
Window merupakan objek tertinggi dalam objek JavaScript. Objek ini
digunakan untuk memanipulasi tampilan kendela dari document HTML.

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
60 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

Property dari objek window

berikut adalah property yang sering digunakan dalam Objek Window :
window.length
mengetahui jumlah frame dalam window
window.location.href=alamat_url

mengakses objek location untuk melakukan redirect atau berpindah ke

alamat tertentu
window.status=nilai_status

memberikan niai status window

Method dari Objek Window

method yang sering digunakan dalam Objek Window adalah sebagai
berikut :
window.alert(pesan)

memunculkan messagw box atau sebuah pesan peringatan

window.confirm(pesan)

memunculkan sebuah pesan konfirmasi. Method ini memiliki dua nilai

kembalian yaitu true untuk Ok dan False untuk Cancel
window.prompt(pesan,nilaidefault)

memunculkan sebuah pesan yang menantikan sebuah input

window.close()

menutup jendela aktif

window.open(url | file, windowname, windowfeatures)

membuka jendela baru dengan feature yang diberikan.

window.print()

membuka jendela dialog print

Object History
secara default akan menyimpan daftar-daftar URL yang pernah
dikunjungi. Dalam javascript terdapat sebuah objek untuk mengakses
daftar tersebut yaitu objek history.

Property dari objek history

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
61 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

Berikut adalah property yang sering digunakan dalam Objek History :

history.length

mengetahui banyaknya daftar URL yang pernah dikunjungi

Method dari Objek History

Berikut adalah method yang sering digunakan dalam objek History :
history.back()

menampilkan URL sebelum dari daftar

history.forward()

menampilkan URL sesudahnya dari daftar

history.go(n)

menampilkan history ke-n dari daftar

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
62 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

EVENT-DRIVEN DAN ELEMENT FORM HTML

Dalam pemrograman konvensional, program akan di eksekusi secara

berurutan dari baris pertama ke baris selanjutnya. Mungkin ada
percabangan dan perulangan, tetapi program akan di proses langkah
demi langkah. Dengan demikian, ada permulaan program dan akhir
program.

Model komputasi di dalam web dibangkitkan oleh event yang dilakukan

oleh user, misalnya, mouse click atau tombol. Program akan berjalan
jika user memberikan event tertentu pada obyek yang diinginkan.

JavaScript banyak digunakan untuk melakukan aksi yang spesifik,

misalnya mengontrol validitas atau akan berjalan ketika ada aksi dari
sebuah tombol. Jadi, program dijalankan tidak urut.

Event javascript
Yang dimaksud event di sini sebuah aksi yang dapat dideteksi oleh
JavaScript. Dengan JavaScript, dapat dibangun halaman web yang
interaktif dan dinamis. Setiap elemen sebuah halaman web
mempunyai beberapa event.
Contohnya adalah event onClick sebuah elemen yang menunjukan
sebuah function akan jalan ketika user mengklik sebuah tombol.
Berikut beberapa event yang sering digunakan:
Sebuah mouse di klik,
Sebuah halaman atau image sedang di-load,
Mouse melewati titik tertentu dalam sebuah halaman web,
Menyeleksi sebuah input box dalam form HTML,
Mengirimkan sebuah form HTML,
Sebuah tombol keyboard ditekan.

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
63 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

Catatan :
Setiap event biasannya digunakan dikombinasikan dengan function
dan function tidak akan jalan selama event tersebut tidak terjadi.
Onload dan onunload
Kedua event di-trigger ketika user masuk atau keluar dari halaman.
Event onload sering digunakan untuk mengecek tipe versi browser
yang digunakan oleh user.
Onload dan onunload, keduannya sering digunakan untuk
menangani cookies yang harus di set ketika user masuk atau keluar
dari sebuah halaman. Misalkan muncul popup untuk menanyakan
nama user atau popup ucapan selamat datang.
Contoh event yang sederhana adalah ketika sebuah halaman diload
atau unload.
Jika mempunyai kode JavaScript tertentu dan dipasang pada atribut
ONLOAD pada BODY maka kode tersebut akan dijalankan secara
otomatis ketika halaman di-load.
Jika mempunyai kode javaScript tertentu dan dipasang pada atribut
ONLOAD pada NPDY maka kode tersebut akan dijalankan secara
otomatis saat browser menutup halaman web kita.

Contoh :
<html>
<head>
<title>Halaman Hello/Goodbye</title>

<script type="text/javaScript">
function Hello()
{
globalName=prompt("Selamat Datang. " + " Siapa Nama Anda?","");
}

function Goodbye()
{
alert("Terima kasih, " + globalName + " semoga kembali.");
}
</script>
</head>

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
64 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

<body onLoad="Hello();" onUnload="Goodbye();">

Teks ini adalah isi dari halaman web
</body>
</html>

Simpan file diatas, kemudian jalankan pada browser anda, maka

tampilannya akan seperti pada gambar dibawah ini :

Onfocus, onblur and onchage

Event ini sering digunakan dalam kombinasi validitas data pada
form. Contoh berikut ini menunjukan bagaimana event onChange
digunakan untuk mengecek e-mail. Function dengan nama
checkEmail() akan dipanggila saat mengisi form.
<input type=text size=30 id=email Onchange=checkemail()>;

Onsubmit
Event onsubmit biasannya digunakan untuk validasi semua data
sebelum data tersebut terkirim. Berikut contoh penggunaan
onsubmit. Function checkform() akan dipanggil ketika user
mengklik tombol submit. Function checkform() dapat dibuat
mengembalikan nilai true jika data benar dan akan dikirim. Jika tidak
benar maka pengiriman data akan dibatalkan.

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
65 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

<form method=post action=xxx.htm onsubmit=return checkForm()>

Onmouseover and onmouseout

Event ini sering digunakan untuk membuat animasi tombol.berikut
contoh skrip yang akan menampilkan alert ketika event
onmouseover terdeteksi.

<a href=http://www.w3schools.com onmouseover=alert(An onMouseOver event);return

false>
<img scr=w3schools.gif width=100 height=30>
</a>

HTML FORMS

Sebagaian besar penanganan event (event-handling) digabung dengan

elemen form. Dalam HTML form merupakan kumpulan dari elemen
untuk menangani input, output dan event pada sebuah halaman.
Sintak:
<form name=FormName>
...
</form>

Elemen form terdiri dari:

Untuk input: button, selection, radio button, check box, password,
.
Untuk input atau output: text box, text area,..

Form juga cocok diterapkan dalam side-server programming karena isi

form akan kita olah di dalam server,

Element Button

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
66 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

Elemen form yang paling simpel adalah button. Buton berbentuk

tombol yang biasannya digunakan untuk mengirim data dari form.
Analoginya, ketika di klik maka akan me-trigger sebuah event.

Sintak:
<input type=button value=Label onClick=kode_JavaScript/>

Contoh program dapat dilihat pada script berikut ini:

JavaScript :event/random.js

function random (low, hight)

{ return Math.floor(Math.random()*(hight-low+1)) + low;}

HTML: event/event02.html
<html>
<!Myandisun event02.html -->

<head>
<title>Animasi Button</title>

<script language="javaScript">
function RandomInt(low, hight){
return Math.floor(Math.random()*(hight-low+1)) + low;
}
</script>
</head>
<body>
<form name="ButtonForm">
<input type="button" value="Klik Nomor Keberuntungan" onClick="num = RandomInt(1,
100);alert('Nomor Keberuntungan Anda Adalah: ' + num);"/>
</form>
</body>
</html>

Simpan file diatas, kemudian jalankan pada browser anda, maka

hasilnya akan seperti pada gambar dibawah ini :

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
67 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

Element Button dan Function

Untuk membuat sebuah aplikasi yang kompleks (rumit) maka function
sendiri harus didefinisikan. Ketika ada event ONCLICK maka akan
memanggil function.
Berikut contoh event untuk button (tombol), yang ketika diklik
(onClick()) akan memanggil function Greeting().
HTML: event/event03.html
<html>
<!--Myandisun event03.html -->

<head>
<title>Event pada Buttons</title>

<script type="text/javascript">
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
var monthnumber = now.getMonth();
var monthday = now.getDate();
var year = now.getYear();

function Greeting(){

if (hour <12){
alert("Selamat Pagi");
}
else if (hour <18){
alert("Selamat Siang");
}
else {

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
68 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

alert("Selamat Malam");
}
}
</script>
</head>

<body>
<form name="ButtonForm">
<input type="button" value="klik untuk salam" onClick="Greeting();"/>
</form>
</body>
</html>

Skrip di atas akan menampilkan alert Selamat Pagi jika jam pada
sistem kurang dari 12. alert Selamat Siang akan tampil jika jam
kurang dari 18. sementara itu, alert Selamat Malam akan tampil jika
kedua kondisi tidak ada yang memenuhi.
Agar lebih jelas, anda akan menjalankan skrip diatas. Contoh hasil
dapat dilihat pada gambar berikut:

Button dan Windows

Dalam melakukan tampilan, Alert Box akan:
Bagus jika menampilkan pesan pendek dan jarang
Tidak bagus jika menampilkan pesan yang panjang
Tidak dapat menformat tampilan text
Membutuhkan user untuk menutup tampilan pesan.
Berikut contoh scrip yang digunakan untuk membuat window.

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
69 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

var OutputWindow = window.open();

skrip di atas berfungsi membuka window baru dan di-assign ke

variable outputWindow.
outputWindow.document.open();

skrip di atas berfungsi membuka window untuk ditulis.

outputWindow.Document.write(WHATEVER);

script di atas berfungsi menulis window sebelum dibuka

outputWindow.Document.close();

skrip diatasberfungsi menutup window

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
70 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

HTML DOM

HTML DOM merupakan standar W3C dalam pengelolaan dikumen web

berbasis HTML. Di dalam HTML DOM mendefinisikan sebuah
pengaturan standar HTML sebagai objek sehingga kita di beri keluasan
untuk mengakses dan memanipulasi dokumen HTML. Semua elemen
HTML, sepanjang memiliki atribut dan isi, dapat diakses dengan DOM.
Isi dapat diubah, dihapus, atau dibuat baru.

HTML DOM merupakan suatu platform yang independent, yang dapat

digabungkan dengan bahasa pemrograman lain seperti java,
javaScript, dan VBScript. DOM dapat digunakan dengan javaScript
untuk membaca dan mengubah dokumen HTML, XHTML dan XML.
Dasar script yang harus dikuasai adalah HTML/XHTML dan javaScript.

DOM dibagi menjadi beberapa bagian yaitu:

Core DOM: untuk medefinisikan sebuah standar obyek pada
struktur dokumen.
XML DOM: untuk medefinisikan sebuah standar obyek pada
dokumen XML.
HTML DOM: untuk medefinisikan sebuah standar obyek pada
dokumen XML.

DOM membuat sebuah dokumen HTML sebagai tree-structure

dengan elemen, atribut dan text, sehingga dengan DOM dapat
dikatakan:
1. Semua yang ada di dalam dokumen HTML adalah sebuah node.
2. Setiap tag HTML adalah sebuah elemen node.
3. Teks dalam HTML adalah teks node.
4. Setiap atribut HTML adalah atribut node.

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
71 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

5. Comment adalah comment node.

Jadi, HTML Document Object Model (HTML DOM) adalah sebuah

standar bagaimana mengakses dan memanipulasi dokumen HTML.

Contoh dokumen HTML.

<html>
<head>
<title>Judulku</title>
</head>
<body>
<a href=http://www.yahoo.com>Linkku</a>
<h1>Headerku</h1>
</body>
</html>

Jika diilistrasikan dalam bentuk gambar maka dapat dilihat pada

gambar berikut.

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
72 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

Document

Root element:
<html>

Element: Element:
<head> <body>

Atribute: Element: Element:

Element:
<href> <a> <h1>
<title>

Text:
Text: Text:
Headerku
Judulku Linkku

dokumen HTML. Kedua method tersebut mengabaikan struktur

dokumen. Jika ingin mencari elemen <p> dalam dokumen, method
getElementsByTagName() akan mencari semuanya tanpa
memperhatikan di mana level elemen <p>.
Selanjutnya, method getElementById() selalu mengembalikan
kebenaran elemen walaupun elemen tersebut ter-hidden dalam
struktur dokumen HTML. Kedua method memberikan elemen HTML
yang diperlukan tanpa memperhatikan letak elemen tersebut di dalam
sebuah dokumen HTML. Method getElementById() mengembalikan
elemen dengan menentukan ID-nya.
Sintak getElementById():
Document.getElementById(someID) ;
Method getElementsByTagName() mengembalikan semua elemen
(sebagai daftar node). Method getElementsByTagName() dapat
digunakan pada setiap elemen HTML dan juga pada dokumen.
Catatan :
Mothod getElementById() tidak dapat jalan pada dokumen XML karena
pencarian sampai selesai dan tiap atribut mempunyai ID tipe yang
harus dideklarasikan pada DID (Document Type Definition).
Sintak getElementsByTagName():
document.getElementsByTagName(tagname);
// atau
document.getElementById(`someID`).getElementsByTagName (tagname);

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
73 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

Contoh berikut mengembalikan daftar node semua elemen <p> pada

dokumen HTML.
document.getElementsByTagName(p) ;
Contoh berikut mengembalikan daftar node semua elemen <p> yang
merupakan keturunan (anak cucu) dari elemen dengan id=maindiv
pada dokumen HTML.
document.getElementsById(`maindiv`).getElementsByTagName(p);

Daftar Node (Nodelist)

Ketika bekerja dengan sebuah daftar node (nodelist), biasanya list
disimpan di dalam variabel.

Var x=document.getElementsByTagName(p) ;

Dari skrip di atas berarti variabel x berisi sebuah daftar list semua
elemen <p> pada sebuah halaman, dan dapat mengaksesnya dengan
menggunakan nomor index-nya.
Catatan : nomor index dimulai dari 0
Untuk penelusuran semua node menggunakan perulangan sampai
habis, dibutuhkan properti length.

Var x=document.getElementsByTagName(p) ;
For (var i=0;i<x.length; i ++)
{

Sementara itu, untuk mengakses elemen tertentu, digunakan nomor

index.
Misalkan, untuk mencari <p> yang ketiga, digunakan perintah:
Var y=x[2];

Parentnode, firstchild, dan lastchild

Dalam dokumen ada tiga properti yang selalu mengikuti, yaitu
parentNode, firstChild, dan lastChild yang memudahkan untuk
mengakses dokumen.

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
74 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

<table>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
</table>

Dalam kode HTML di atas, <td> pertama adalah firstChild dari elemen
<tr> dan <td> terakhir adalah lastChild dari elemen <tr>. Jadi, <tr>
adalah parentNode dari semua elemen <td>.
Property firstChild digunakan untuk mengakses text dari elemen.

Var x=[a paragraph] ;

Var text=x.firstChild.nodeValue;

Property parentNode sering digunakan untuk mengganti struktur

dokumen. Seandainya akan menghapus node dengan id=maindiv
dari sebuah dokumen.

Var x=document.getElementById(maindiv);
x.parentNode.removeChild(x);

Pertama, harus dicari node dengan id yang dimaksud. Kemudian

pindahkan menjadi parent dan eksekusi perintah method removeChild
().

Root nodes
Ada dua properti spesial yang dapat digunakan untuk mengakses root
dari sebuah dokumen, yaitu:
document.documentElement
document.body
Properti pertama (documentElement) mengembalikan root pada
sebuah dokumen dan ada pada semua XML dan dokumen HTML.

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
75 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

Properti kedua (body) hanya berlaku pada dokumen HTML, yang dapat
memberikan akses langsung ke tag <body>.

Informasi pada Node

Setiap node mempunyai beberapa properti yang berisi beberapa
informasi tentang node tersebut.
Properti sebuah node adalah:
nodeName
Properti nodeName berisi nama node.
nodeName dari sebuah elemen adalah nama tag
nodeName dari sebuah atribut adalah nama atribut
nama dari sebuah text node selalu #text
nama dari node dokumen selalu #dokumen

catatan : nodeName selalu berisi huruf besar (uppercase) nama

tag dari elemen HTML.
nodeValue
Dalam text node, properti nodeValue berisi text. Dalam atribut
node, properti nodeValue berisi nilai atribut. Properti nodeValue
tidak tersedia dalam dokumen dan elemen node.
nodeType
Properti nodeType mengembalikan tipe node. Tipe-tipe yang
penting adalah:

Element Type NodeType

Element 1

Attribute 2

Text 3

Comment 8

Document 9

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
76 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

Contoh HTML DOM

Dari contoh berikut ditunjukkan bagaimana warna backgraound
dokumen HTML dapat berubah menjadi kuning ketika user mengklik
semua bagian dokumen.

HTML dom/html_dom01.html
<html>
<head>
<script type=text/javascript>
function ChangeColor()
{
document.body.bgColor=yellow;
}
</script>
</head>

<body onclick=ChangeColor() >

Klik pada dokumen!
</body>
</html>

Skrip di atas akan merubah background halaman web mwnjadi kuning

ketika bagian dari halaman di klik.

Object document HTML DOM

Obyek HTML DOM sebenarnya banyak, tapi yang sering dipakai adalah
obyek document.
Obyek document merepresentasikan seluruh dokumen HTML dan
dapat digunakan untuk mengakses semua elemen dalam satu
halaman. Obyek document adalah bagian dari obyek Window dan
diakses dari permulaan sampai habis.
Berikut adalah obyek document dari beberapa browser dan W3C
(World Widw Web Consortium).
Keterangan:
IE: Internet Explorer, F: Firefox, O: Opera, W3C: World Widw Web
Consortium(Internet Standart).

Koleksi obyek document dapat dilihat pada table berikut:

Collection Description IE F O W3C

anchors[] Mengembalikan referensi semua 4 1 9 Yes

obyek anchor dalam dokumen

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
77 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

Forms [] Mengembalikan referensi semua 4 1 9 Yes

obyek Form dalam dokumen
Images [] Mengembalikan referensi semua 4 1 9 Yes
obyek image dalam dokumen
Links [] Mengembalikan referensi semua 4 1 9 Yes
obyek area link dalam dokumen

Properti object dokumen

Berikut adalah table properti dari object document
Properti Description IE F O W3C

Body Emberikan akses langsung ke

elemen <body>
Cookie Menset atau mengembalikan 4 1 9 Yes
semua cookie dokumen yang
sedang dibuka
Domain Mengembalikan nama domain 4 1 9 Yes
dokumen yang sedang dibuka
lastModifie Mengembalikan tanggal dan jam 4 1 9 Yes
d terakhir pemodifikasi dokumen
Referrer Mengembalikan URL dokumen 4 1 9 Yes
yang sedang di-load
Title Mengembalikan title dokumen 4 1 9 Yes
yang sedang dibuka
URL Mengembalikan URL dokumen 4 1 9 Yes
yang sedang dibuka

Method object dokumen

Berikut method yang dapat digunakan dalam obyek dokumen.
Method Description IE F O W3
C
Close menutup sebuah output 4 1 9 Yes
stream yang dibuka
dengan method
doument.open() dan
menampilkan koleksi data
getElementById() mengembalikan sebuah 5 1 9 Yes
referensi obyek pertama
dengan menetapkan id
getElementsByName( Mengembalikan sebuah 5 1 9 Yes
) koleksi obyek dengan

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
78 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

menetapkan nama

getElementsByTagNa Mengembalikan koleksi 5 1 9 Yes

me() obyek dengan
menentukan tagname.
Open() Membuka stream untuk 4 1 9 Yes
menampung output dari
method document.write()
atau document.writeIn()
Write() Menuliskan ekspresi HTML 4 1 9 Yes
atau kode javaScript ke
dalam dokumen.
writeIn() Sama dengan write(), 4 1 9 Yes
tetapi ditambahkan
perpindahan baris
Penerapan getElementById
Pemakaian getElementById() akan mengembalikan referensi kobyek
pertama dari ID yang ditetapkan.
Sintak getElementById():
document.getElementById(id)

Contoh skrip penerapan getElementById() adalah

HTML: dom/html_dom02.html
<html>
<head>
<script type="text/javascript">
function getValue ()
{
var x=document.getElementById("myHeader");
alert (x.innerHTML)
}
</script>
</head>
<body>

<h1 id="myHeader" onclick="getValue()"> ini adalah Header</h1>

<p> klik pada header di atas, maka muncul alert nilai header Di atas </p>
</body>
</html>

Penerapan getElementById dan getElementBygetName

Method getElementsByName() mengembalikan sebuah koleksi obyek
dengan nama yang telah ditentukan.
Sintak getElementsByName:
document.getElementsByName(name);

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
79 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

Skrip di atas jika di klik tombol berapa jumlah elemen `myInput`?

maka akan menampilkan alert jumlah elemen inputnya (3).
Method getElementByTagName() akan mengembalikan koleksi obyek
dengan tag name yang telah ditentukan.
Sintak getElementByTagName:
document.getElementsByTagName(tagname);
Contoh getElementsByName dan getElementByTagName adalah:
HTML: dom/html_dom03.html

<html>
<head>
<script type="text/javascript">
function getByTag()
{
var x=document.getElementsByTagName("input");
alert(x.length) ;
}

function getByName()
{
var x=document.getElementsByName("myinput");
alert(x.length) ;
}

</script>
</head>
<body>

<input name="myinput" type="text" size="20" /><br/>

<input name="myinput" type="text" size="20" /><br/>
<input name="myinput" type="text" size="20" /><br/>
<br/>

<input type="button" onclick="getByTag()" value="Dengan getByTag" />

<p></p>
<input type="button" onclick="getByName()" value="Dengan getByName" />
</body>
</html>

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
80 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

jQuery

1Pengertian jQuery
JQuery merupakan suatu framework (library) Javascript yang menekankan
bagaimana interaksi antara Javascript dan HTML.

jQuery merupakan library open source dengan lisensi GNU General Public
License dan MIT License. Dari sisi ukurannya, framework JQuery sungguh
ramping, hanya sekitar 20 KB dan hanya terdiri dari satu file. Namun
demikian, bagi yang menginginkan fungsi lebih, JQuery memungkinkan
penambahan fungsionalitas dalam bentuk plugin. Saat ini tersedia ribuan
plugin yang dapat diperoleh secara gratis di internet.

jQuery adalah pustaka JavaScript yang cepat dan ringkas yang

menyederhanakan traversing dokumen HTML, penanganan event, animasi,
dan interaksi Ajax untuk mempercepat pengembangan web

JQuery merupakan library Javascript yang akan membuat aplikasi web yang
kita buat menjadi lebih waah, baik dari sisi user-interface, proses maupun
interaktivitas.

1Manfaat JQuery
Berikut adalah manfaat yang bisa didapatkan dengan menggunakan jQuery :
1. Mengakses bagian halaman tertentu dengan mudah.
Tanpa adanya library Javascript khusus, untuk mengakses suatu bagian
tertentu dari halaman, harus mengikuti aturan Document Object Model
(DOM) dan pengaksesan harus secara spesifik menyesuaikan dengan
struktur HTML. Dengan kata lain, pengaksesan bagian tertentu dari
halaman sangat tergantung pada struktur dari HTML. JQuery menawarkan
cara yang mudah (bahkan sangat mudah) dalam mengakses bagian
tertentu dari halaman. Pengaksesan juga tidak terlalu bergantung pada
struktur HTML.
2. Mengubah tampilan bagian halaman tertentu.

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
81 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

CSS (Cascading Style Sheet) menawarkan metode yang cukup handal

dalam mengatur dan mempercantik halaman web. Namun terkadang CSS
punya kelemahan yang cukup mengganggu, yaitu beberapa perintah CSS
tidak didukung oleh semua browser. Cukup merepotkan jika kita harus
mendesign halaman web dengan beberapa CSS sekaligus.
Sekali lagi jQuery menawarkan solusi untuk mengatasi hal tersebut.
Dengan jQuery, kesenjangan yang terjadi antara browser dalam urusan
CSS akan tertutup dengan baik.
3. Mengubah isi dari halaman.
Jaman dulu (baca:sebelum jQuery lahir) cukup sulit jika kita akan
mengubah sebagian isi dari halaman. Mengubah disini dapat berarti
mengganti teks, menambahkan teks atau gambar, mengurutkan suatu
daftar (list), menghapus baris tabel dan sebagainya. Dengan jQuery, hal
tersebut dapat dilakukan dengan hanya beberapa baris perintah.
4. Merespond interaksi user dalam halaman.
Website yang baik tidak cukup digambarkan dengan user-interface dan
tampilan yang memukau. Namun lebih dari itu, bagaimana pengunjung
dapat berinteraksi dengan website dan dapat mengatur tampilannya
sendiri. Interaktivitas sangat bergantung bagaimana pemrograman yang
dipakai dalam menangani event-handling. Javascript sendiri memiliki
beberapa event-handling seperti onclick untuk menangani event saat
terjadi click. Namun demikian, event handling pada Javascript terbatas
pada object-object tertentu, dan jenisnya pun terbatas. jQuery
melengkapi semuanya dengan tambahan penanganan event-handling
yang semakin mudah.
5. Menambahkan animasi ke halaman.
Animasi seringkali disertakan dalam suatu halaman web untuk
menambah kecantikannya. Saat ini animasi masih cukup digemari oleh
para peselancar situs. Animasi dapat dibuat dalam berbagai gaya, ada
yang menggunakan Flash, gambar bergerak (GIF), video, dan sebagainya.
Masing-masing tentu memiliki kelebihan dan kekurangan masing-masing.
jQuery sendiri menawarkan konsep animasi (walaupun masih sederhana)
yang cukup apik namun ramah bandwidth alias ringan. Salah satu

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
82 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

animasi yang bisa dibuat dengan jQuery adalah fading jika terdapat suatu
bagian dari halaman ditambahkan atau dihilangkan.
6. Mengambil informasi dari server tanpa me-refresh seluruh halaman.
Mengambil informasi dari server tanpa refresh halaman merupakan salah
satu konsep dasar dari yang namanya AJAX (Asynchronous Javascript and
XML). Pada penerapannya, cukup ribet jika harus membangun website
dengan konsep AJAX, saat ini banyak library khusus yang berusaha
mempermudahnya. jQuery merupakan salah satunya.
7. Menyederhanakan penulisan Javascript biasa.
Semboyan jQuery adalah Write less, do more atau dengan kata lain
kesederhanaan dalam penulisan code, tetapi menghasilnya tampilan
yang lebih. Sebenarnya inilah yang menjadi daya tarik tersendiri buat
para pengembang web untuk menggunakan jQuery.

Sejarah JQuery
JQuery pertama kali dirilis pada tahun 2006 oleh John Resig. Pada
perkembangannya jQuery tidak sekedar sebagai framework Javascript,
namun memiliki kehandalan dan kelebihan yang cukup banyak.
1. 20 Feb 2009 Pemeliharaan rilis: jQuery 1.3.2 Rilis
2. 21 Januari 2009 Bug fix release: jQuery 1.3.1 Rilis
3. Januari 14, 2009 3. Ulang tahun dari jQuery : jQuery 1,3 dan
jQuery Foundation
4. 28 Agustus, 2008 jQuery situs redesign
5. 14 Jul 2008 jQuery UI 1.5.2
6. 2 Jun 2008 jQuery UI 1,5 rilis
7. 24 Mei 2008 jQuery 1.2.6
8. 21 Mei 2008 jQuery 1.2.5: fix for bad build of 1.2.4
9. 19 Mei 2008 jQuery 1.2.4: bug fixing rilis
10. 5 Mei 2008 jQuery UI baru situs: 1.5b4 UI dan efek baru
11. 8 Feb 2008 jQuery 1.2.3: AIR, Namespacing, dan UI Alpha
12. 15 January 2008 Bug fix for jQuery 1.2, library is now 2 years
old: jQuery 1.2.2: 2nd Birthday Present
13. September 17th, 2007 New user interface library for jQuery:
jQuery UI: Interactions and Widgets

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
83 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

14. 10 September, 2007 jQuery 1,2 dirilis: jQuery 1,2: jQuery.extend

( "Awesome")
15. August 24th, 2007 jQuery 1.1.4: Faster, More Tests, Ready for
1.2
16. 5 Jul 2007 Bug 1.1.3 untuk memperbaiki jQuery: jQuery 1.1.3.1
17. 1 Jul 2007 versi baru dirilis jQuery: jQuery 1.1.3: 800% + Faster,
masih 20KB
18. 1 Jul 2007 Pengumuman baru UI modul yang sedang
dikembangkan: jQuery UI
19. June 18th, 2007 New Plugin Repository
20. May 20th, 2007 Third bug fix test release for 1.1: jQuery 1.1.3a 2
April, 2007 Mailing list dipindahkan ke Google Groups, kode sekarang
diselenggarakan oleh Amazon S3: Grup Google dan Amazon S3
21. March 11th, 2007 11 people attend the first jQuery meetup at
SXSWi
22. February 27th, 2007 Second bug fix release for 1.1: jQuery 1.1.2
23. Januari 22, 2007 Pertama bug fix release untuk versi baru:
jQuery 1.1.1
24. Januari 14, 2007 jQuery Birthday: 1.1, Situs Baru, New Docs
25. Januari 11, 2007 rilis Beta jQuery 1.1: jQuery 1.1b
26. 8 Jan 2007 Alpha rilis versi baru: jQuery 1.1a
27. 27 Desember, 2006 Perencanaan untuk jQuery 1.1: The Path ke
1,1
28. December 12th, 2006 Last bug fix release for 1.0: jQuery 1.0.4 7
November, 2006 Pemenang dari kontes diumumkan jQuery tombol: Tombol
jQuery Contest Pemenang
29. October 27th, 2006 Third bug fix release for 1.0: jQuery 1.0.3
30. October 9th, 2006 Second bug fix release for 1.0: jQuery 1.0.2 ,
with minor API changes (posted on 13 October)
31. 2 September, 2006 versi XML API dirilis: Mengambil jQuery
Dokumentasi ke tingkat berikutnya
32. August 31st, 2006 First bug fix release for 1.0: jQuery 1.0.1
33. 26 Agustus, 2006 Pertama versi stabil jQuery: jQuery 1,0
34. July 10th, 2006 Blogger recruitment begins: Bloggers Wanted .

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
84 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

35. 30 Jun 2006 jQuery 1.0 - Alpha Release

36. 23 Jun 2006 Perencanaan untuk jQuery 1,0: The Road to 1,0
37. 29 Mei 2006 jQuery tersedia melalui SVN: SVN Akses ke jQuery
38. September 7th, 2006 First sponsored developer joins the project:
Sponsored jQuery Deve
39. 27 Mei 2006 jQuery dipindahkan di bawah lisensi MIT: jQuery di
bawah lisensi MIT
40. 24 April, 2006 Thickbox dirilis: Thickbox
41. 21 Mar 2006 Bug perbaikan dan fitur-fitur baru: Accordion, nilai,
oncomplete, dan perbaikan bug!
42. February 26th, 2006 Ajax added to jQuery: Ajax, new fx, and
more!
43. February 23rd, 2006 Bug fix release: Bugs Squished, Ajax on the
way
44. Januari 27, 2006 jQuery Mailing List menyiapkan: jQuery Mailing
List
45. Januari 24, 2006 jQuery Blog menyiapkan: jQuery Blog
46. Januari 25, 2006 Pertama jQuery Plugin Dibangun: First jQuery
Plugin
47. January 14th, 2006 jQuery Announced at BarCampNYC:
BarCampNYC Wrap-up

1Situs situs yang menggunakan jQuery

Situs situs yang sudah menggunakan jQuery diantaranya adalah :
6. Google - Kode pencarian
7. IBM IBM
8. GamesWorkshop A British permainan dan produksi perusahaan
Retailing
9. NBC - Official site untuk jaringan televisi NBC.
10. MLB Official site of Major League Baseball MLB - Official
site Major League ESPN ESPN
11. Oracle Enterprise Software
12. National Instruments - Ujian dan peralatan pengukuran.
13. Mozilla Firefox Addon Community
14. 3 - A Mobile Media Company Britain's first and only pure
play 3G operator. 3 - A Mobile Media Perusahaan - Inggris
pertama dan satu-satunya operator 3G murni bermain.

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
85 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

15. 3Circle Studio 3Circle Studio is designer and developer,

Justin Carroll. 3Circle Studio - Studio 3Circle adalah perancang
dan pengembang, Justin Carroll.

Download jQuery
Situs resmi JQuery dapat diakses di http://jQuery.com/. Dan library JQuery
dapat didownload di alamat http://docs.jQuery.com/Downloading_jQuery.
Tersedia library jQuery dalam 2 (dua) jenis yaitu minified dan uncompressed.
Minified jika kita ingin menggunakannya saja dalam website kita (ukuran 18
KB), sedangkan uncompressed jika kita berkeinginan turut serta
mengembangkan code jQuery.

Cara penggunaan jQuery

Berikut adalah contoh sederhana penggunaan jQuery:
Klik di sini untuk menimbulkan atau menyembunyikan

1 $(document).ready( function() {
$("#toggle-hidden-div").click(
2 function() {
$("#hidden-
3 div").slideToggle('slow');
});
4 });

Untuk memudahkan penggunaan jQuery, ada baiknya Anda mengenal sedikit

tentang DOM (Document Object Model), CSS (Cascading Style Sheets) dan
JavaScript. Persiapan lainnya adalah jQuery.js. Ada dua format yang bisa
diunduh, yaitu: terkompresi (ukuran lebih kecil) dan tidak terkompresi (baik
untuk debugging dan mengetahui sulap di balik jQuery). Jika sudah
mengunduhnya, pastikan jQuery dimasukkan ke dalam dokumen HTML Anda:

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
86 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

1 <script src="path/jQuery.js"
type="text/javascript"></script>
2 <script type="text/javascript">
// kode ditulis di sini nantinya
3 </script>

Sesuaikan path src nya dengan direktori jQuery.js berada. Kebanyakan apa
yang kita kerjakan dengan jQuery adalah membaca dan memanipulasi DOM,
jadi sebelum kita bermain DOM dengan jQuery pastikan DOM sudah diload.
jQuery menyediakan fungsi $(document).ready() dimana semua fungsi yang
kita definisikan di dalamnya akan segera di load setelah DOM di load dan
sebelum konten (gambar, text, dsb) di load. Dengan memanfaatkan fungsi ini
kita bisa memisahkan behavior (JavaScript) dari struktur (HTML). Lebih
jelasnya perhatikan kode JavaScript berikut:
1 <script src="path/jQuery.js"
type="text/javascript"></script>
2 3 <script type="text/javascript">
$(document).ready( function() {
4 $("#toggle-hidden-
div").click( function() {
5 $("#hidden-
div").slideToggle('slow');
6 });
Bagian dari HTML yang dirujuk
});
adalah:
7 </script>
1 <a id="toggle-hidden-div" href="#toggle-hidden-div">Klik di sini
untuk menimbulkan atau menyembunyikan</a>
8
2 <div id="hidden-div" style="display: none">
Konten dalam div
3 </div>

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
87 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

Dengan fungsi $(document).ready()telah memisahkan behavior dan struktur,

sehingga tidak perlu meng-attach event onclick pada element a dengan id
toggle-hidden-div (baris 1). Dengan jQuery, element pada dokumen dapat
kita daftarkan event tanpa perlu menuliskannya di struktur (HTML).

Contoh lainnya:
Perhatikan warna latar, tulisan dan bold yang terjadi. Ini tanpa penggunaan
CSS, tapi manipulasi DOM dengan fungsi css() jQuery. Kodenya:
1 $(document).ready(function() {
$("#attach-event a").mouseover(function() {$(this).css({backgroundColor:
2 "black", fontWeight: "bold"; color: "white"});}).mouseout(function() {$
(this).css({backgroundColor: "#EAF3FA", fontWeight: "normal", color:
3 "black"});});
});

Contoh di atas adalah menunggu DOM di load, mendapatkan element melalui

selector, mendaftarkan penangan event ke element tersebut kemudian saat
event terjadi penangan akan beraksi (entah memberikan effect,
memanipulasi style atau mendapatkan nilai atribut dari element). jQuery
menyediakan fungsi untuk penanganan event seperti click(), mouseover(),
mouseout(), submit(), change(), dsb. Semua fungsi tersebut dapat dibaca di
referensi API jQuery khusus Event.
Selector
Untuk mendapatkan element dalam DOM, jQuery menyediakan beragam
selector. Yang sering digunakan adalah CSS dan XPath Selector. Contoh: Text
pada button. Klik!! Kodenya:

$("#alert-toggle-anchor").click(function(){alert($(this).text()};);

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
88 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

Dengan penulisan kode JavaScript biasa, mendapatkan element dengan id

alert-toggle-anchor document.getElementById("alert-toggle-anchor"), dengan
jQuery menjadi $("#alert-toggle-anchor"). String berupa id element
merupakan parameter bagi konstruktor class jQuery. Jadi untuk
menginisialisasi objek jQuery adalah dengan $(params) dimana params
adalah string yang umumnya merupakan nama element, class atau id dari
element di DOM. Tanda $ dalam JavaScript adalah karakter yang legal dan
valid untuk identifier, jQuery menggunakannya sebagai alias dari class
jQuery. Jadi $(table) dan jQuery(table) akan melakukan hal yang sama.
Dengan objek jQuery, element dalam DOM bisa kita manipulasi dengan
method / fungsi yang tersedia dari objek jQuery, seperti click() untuk
mendaftarkan event, slideToggle() untuk memberikan efek pada element
terserbut, atau text() untuk mendapatkan text di dalam element.

Contoh selector lainnya:

$(#nama-id-element)
Misal untuk mendapatkan element dengan id alert-toggle-anchor dan
memberinya warna text putih dan latar hitam:
$("#alert-toggle-anchor").css({color: "white", backgroundColor: "black"});
0
$(.nama-class-element)
Misal untuk mendapatkan element dengan nama class hideMe dan
menyembunyikan element tersebut adalah :
$(".hideMe").hide();

$(nama-element)
Misal untuk mendapatkan semua element p dan memberinya class yellow:
$("p").addClass("yellow");
1
$(elementF > childElementF:first-child)
Misal untuk mendapatkan semua element span yang merupakan anak
pertama dari element p dan memberinya class biru:
$("p > span:first-child").addClass("biru");
2
$(input[@name=nama_element])

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
89 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

Misal untuk mendapatkan element input dengan name username dan

memperoleh value-nya.
$("input[@name=username]).val();
3
$(element_name:odd)
Selector di atas akan mengambil element ganjil dari target element_name.
Metode ini sering digunakan pada element list dan table. Misal kita ingin
memberikan class alt ke tr ganjil dari table dengan class mytable

$("table.mytable tr:odd").addClass("alt");
2Ragam selector lainnya dapat dilihat di API jQuery untuk Selector.

DOM ( Document Object Model )

Selain selector dengan CSS, XPath, dan kustom lainnya, jQuery juga
menyediakan fungsi-fungsi untuk menjelajahi DOM (traversing) seperti:

1 $("tr").css({border: "1px solid

#000"}).filter(".alt").each(function(i){
2 $(this).append("yeah " + i);
});
3
Pertama, cari
semua tr, lalu beri
border hitam setebal 1 pixel, dari semua tr tersebut ambil yang hanya
memiliki class alt (filter). Dari tr yang sudah difilter, masing-masing (each)
tambahkan text yeah + i, dimana i merupakan index (dimulai dari 0) dari
hasil tr yang sudah difilter.
Contoh lainnya, misal unordered list :
1 <ul id="list">
<li>item ke-
2 1</li>
<li>item ke-
3 2</li>
<li>item ke-
4 3</li>

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
90 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

<li>item ke-
5 4</li>
</ul>
6

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
91 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

Kita ingin membuat list ganjil dapat diklik dan jika diklik akan menampilkan
list dibawahnya, yang sebelumnya sudah dihide. Kodenya:
1 $("#list").find("li:even").hide().end().find("li:odd").click(function(){$
(this).next().slideToggle();});

Kode bisa dipersingkat dengan cara chaining, dimana objek jQuery hanya
memilih satu kali element dengan id list. Dengan metode chaining ukuran
kode menjadi lebih kecil dibanding dengan kode berikut yang kurang lebih
sama:

1 $("#list").find("li:even").hide();
$("#list").find("li:odd").click(function(){$
2 (this).next().slideToggle();});

Yang pertama dilakukan adalah mendapatkan element dengan id list, lalu cari
anak element li yang genap, sembunyikan element genap tersebut. Hal
serupa bisa dilakukan dengan $("#list li:even").hide(), tapi dengan fungsi
end() penulisan kode menjadi lebih singkat dan baik. Dengan end() kita
mundur ke state element terpilih sebelumnya, yaitu element dengan id list.
Lalu dilanjutkan lagi dengan mencari anak element li ganjil dan mendaftarkan
penangan event onclick, dimana element list berikutnya (next()) akan diberi
efek slideToggle saat element li ganjil ini di click.
Kata this disini merujuk ke element sebenarnya (yaitu element li:odd). Jika
menjadi parameter bagi class jQuery (dalam hal ini menjadi $(this)), maka
bisa dimanfaatkan method dari jQuery untuk Manipulasi DOM, Traversing,
Event, dsb. Jika hanya this, maka akan mengacu ke elemen sebenarnya dan
bisa kita manfaatkan properties atau method yang tersedia pada element
tersebut, misal this.href, this.value, this.focus() atau this.reset().
Atribut dan Manipulasi DOM
Selain menyediakan fungsi untuk mendapatkan element dalam DOM, jQuery
juga menyediakan fungsi-fungsi untuk mendapatkan atribut dari element.
Kodenya:

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
92 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
JavaScript

$("#mybutton").click(function(){alert("type="+$("input[@name=myinputtxt]").attr("type")+
"\nvalue="+$("input[@name=myinputtxt]").val());});

Untuk mendapatkan nilai atribut element gunakan fungsi attr(). Fungsi ini
juga bisa untuk menset nilai atribut dan membuang atribut dari element.
Selain atribut element, jQuery juga menyediakan fungsi untuk memanipulasi
class dari element, seperti: addClass(), hasClass(), removeClass dan
toggleClass(). Contoh lainnya, yaitu mengubah konten div berikut:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis
autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan
et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis
dolore te feugait nulla facilisi.
Untuk mengganti konten dalam div tersebut kita bisa menggunakan fungsi
html() untuk memanipulasi element dalam DOM.

1 $(function(){
$("#lorem-ipsum-button").click(function(){
2 $("#lorem-ipsum-div").html("hell yeah..<br
/><strong>jQuery</strong> rocks!!");
3 });
});
4

Client Side Scripting

12 Pusat Pengembangan Bahan Ajar
93 Rapelino Ferdiansyah ST.MKOM Universitas Mercu Buana
 Rapelino Ferdiansyah ST. MKOM JavaScript94

Serupa dengan method innerHTML, method html(value) akan mengisi konten

dari elemen dengan value. Ada juga method text(value) yang mengisi konten
dari elemen dengan value, namun HTML diescape sehingga <" dan ">
diganti dengan HTML entiti. Contoh manipulasi lainnya adalah append().
Misal:
<div id="mydiv"><p>dalam sebuah paragraf</p></div>
Dengan menggunakan append()
$("#mydiv").append("<p>paragraf ke-2</p>")
maka menjadi:
<div id="mydiv"><p>dalam sebuah paragraf</p><p>paragraf ke-2</p></div>
Banyak manipulasi untuk menyisipkan konten ke dalam element seperti :
append(), appendTo, prepend(), prependTo(). Selain menyisipkan konten ke
dalam, jQuery juga menyediakan fungsi untuk menyisipkan ke luar
setelah/sebelum element, menyalin, mengganti dan menghapus element.
Lebih lengkapnya ada di dokumentasi jQuery.

1Membuat Element On The Fly

Dengan javascript kita dapat membuat element kemudian menyisipkannya
ke element lain dengan cara berikut:

1 var el = document.getElementById(id_element);
var new_el = document.createElement("div");
2 new_el.appendChild(document.createTextNode("konten
dalam div baru"));
3 el.appendChild(new_el);

Dengan jQuery:
1 $("<div>konten dalam div
baru</div>").appendTo("#id_element");
 Rapelino Ferdiansyah ST. MKOM JavaScript95

Latihan
<html>
<head>
<title>Belajar Jquery</title>
<script language="javaScript" src="../jquery-1.2.3.pack.js"></script>
<script language="javaScript">
$(document).ready(function(){
$("a.pbw1").click(function(){
alert($("div.pr p").size());
});
$("a.test").click(function(){
$("div.pr p.second").hide("slow");
return false;
});
$("a.testShow").click(function(){
$("div.pr p.second").show("slow");
return false;
});
$("a.test2").click(function(){
$("div.pr").hide("slow");
return false;
});
$("a.test3").click(function(){
$("div.pr").show("slow");
return false;
});
$("#belajar").click(function(){
alert('hasil dari klik disini');
});

});
</script>
</head>
<body>
<br>
<a class="pbw1" href="#">Link</a> ||
<a class="test" href="#">Test</a> ||
<a class="testShow" href="#">Test Show</a> ||
<a class="test2" href="#">Test2</a> ||
<a class="test3" href="#">Test3</a>
<br>
<div class="pr">
<p class="first" style="display: block;">
Pemrograman Berbasis Web 1
</p>
<p class="second" style="display: block;">
Baris 2, Pemrograman Berbasis Web 1
</p>

<div id="belajar">
Klik Disini
</div>
</div>
 Rapelino Ferdiansyah ST. MKOM JavaScript96

</body>
</html>

Membuat aplikasi hello word dengan jQuery berisi semboyan jQuery

yang bisa ditampilkan ataupun disembunyikan

1Keterangan :
21. Menyertakan (include) file library JQuery. Pastikan letak dari file
library sudah benar.
32. Perintah-perintah JQuery.
4 Baris 8 merupakan perintah inisialisasi dimana saat halaman
(dokumen) siap ditampilkan maka jalankan juga perintah yang
ada di dalamnya. Hal ini mirip dengan event onLoad yang
biasanya diletakkan di tag <body>.
5 Baris 9-11 maksudnya adalah mendefinisikan action yang terjadi
saat link dengan class=show ( $(a.show) ) diklik (lihat link baris
ke-22). Jadi jika link di-klik maka paragraf dengan nama
class=jQuery ( $(p.jQuery) ) akan tampil dengan durasi tampil
slow. Paragraf yang akan ditampilkan adalah paragraf baris
ke-24 sampai 27.
Baris 13-15 sebaliknya, akan menyembunyikan isi dari paragraf
yang mengandung nama class=jQuery.

Hasil dari script diatas adalah sebagai berikut :

 Rapelino Ferdiansyah ST. MKOM JavaScript97

Membuat aplikasi berita (headline) dengan menyajikan efek slideshow

<html>
<head>
<title>Belajar Jquery</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script language="javaScript" src="../../jquery-1.2.3.pack.js"></script>
<script language="javascript">
/* parameter untuk menjalankan fungsi openContent ini adalah
1. Element trigger (link) yang akan membuka content apabila di click
2. Id dari content yang akan ditampilkan
*/
/*
-> Slideshow diberikan animasi otomatis berpindah-pindah content
*/
// siapkan variable timer yang akan menyimpan fungsi animasi
var timer = null;
function openContent(trigger,divID){
// semua link pada div dengan id='divTrigger' akan di setarakan style-nya
menjadi style normal
 Rapelino Ferdiansyah ST. MKOM JavaScript98

$('#divTrigger a').each(
function(){
$(this).css({'background-color':'#FFF','color':'#000'});
}
);
// semua div di dalam element dengan id='divContent' disembunyikan
$('#divContent div').hide();
// div yang akan ditampilkan diberi efek fadeIn (built-in dari JQuery) ketika
ditampilkan
$('#'+divID).fadeIn('slow');
// link menjadi trigger diberi style berbeda dengan link lainnya agar dapat
diketahui content nomor berapa yang sedang aktif
$(trigger).css({'background-color':'#00A','color':'#FFF'});
// Update 08 Maret 2009
// timer di set
if(timer != null) clearTimeout(timer);
timer = setTimeout(
function(){
/* Cek terlebih dahulu apakah link yang sedang di-click saat ini ada link lagi
setelah itu
apabila tidak ada link lagi setelah element yang sedang di-click maka pilih
element link pertama
dengan selector ':first' dari jQuery. Setelah sudah ditentukan link, maka
lakukan event click
pada link tersebut. Setiap link yang di click akan menjalankan fungsi ini
sehingga terjadi animasi

perpindahan content slideshow.

*/
var nextAnchor = ($(trigger).next('a').text() == '') ? $('#divTrigger a:first') : $
(trigger).next('a');
nextAnchor.click();
}, 3000 // 3 detik waktu perpindahan content
);
}
$(document).ready(
function(){
// untuk permulaan, tampilkan content nomor pertama '#firstSlide' adalah id
dari trigger yang akan membuka content nomor pertama
openContent($('#firstSlide'),'div1');
}
)
</script>
</head>
<body>
<div id="divTrigger">
<a href="javascript:;" onClick="openContent(this,'div1')"
id="firstSlide">1</a>
 Rapelino Ferdiansyah ST. MKOM JavaScript99

<a href="javascript:;" onClick="openContent(this,'div2')">2</a>

<a href="javascript:;" onClick="openContent(this,'div3')">3</a>
<a href="javascript:;" onClick="openContent(this,'div4')">4</a>
</div>
<div id="divContent">
<div id="div1">
<span class="title">Pemandangan Pantai</span>
<img src="images/img1.jpg" align="left" /> Pemandangan pantai
memang menakjubkan, dengan berdiam diri sejenak dan
melihat pemandangan pantai niscaya kita akan mendapatkan
kedamaian jiwa.
</div>
<div id="div2">
<span class="title">Dua Pinguin</span>
<img src="images/img2.jpg" align="left" /> Pinguin adalah spesies
makhluk hidup yang langka dan hanya terdapat pada
benua tertentu di bumi ini. Oleh karena itu kita penduduk dunia harus
melestarikannya.
</div>
<div id="div3">
<span class="title">Pepohonan Sejuk</span>
<img src="images/img3.jpg" align="left" /> Ini adalah gambar
wallpaper pilihan saya ketika sedang bekerja, dengan
melihat gambar ini hati terasa menjadi lebih tenang.
</div>
<div id="div4">
<span class="title">Hujan Sakura</span>
<img src="images/img4.jpg" align="left" /> Menikmati bunga sakura
bagi warga jepang adalah tradisi musiman yang
menyenangkan pada saat memasuki musim dingin.
</div>
</div>
</body>
</html>
Hasilnya adalah tampilan berikut :
Secara otomatis gambar akan
berpindah dari gambar 1 ke
gambar berikutnya berulang2
dengan satuan waktu tertentu.
Rapelino Ferdiansyah ST. MKOM JavaScript100