PENGENALAN JAVASCRIPT DAN DASAR-

DASAR JAVASCRIPT

Tujuan Instruksional Umum :

Agar mahasiswa dapat mengenal dan memahami sejarah perkembangan JavaScript serta dapat
memahami tag-tag dasar pada JavaScript

Tujuan Instruksional Khusus :

- Mahasiswa dapat membuat tag-tag dasar pada JavaScript
- Mahasiswa dapat mengetahui persamaan dan perbedaan antara dokumen HTML biasa dengan
dokumen HTML yang mengandung JavaScript
- Mahasiswa dapat memahami bahwa JavaScript merupakan bahasa yang berorientasi objek
- Mahasiswa dapat membuat jendela-jendela yang akan ditampilkan pada saat program
JavaScript dijalankan

Pokok Bahasan :
- Sejarah dan Perkembangan JavaScript
- Apa yang diperlukan ?
- JavaScript dan HTML
- Pesan-pesan kesalahan
- Bahasa berorientasi objek (properti, metode, penanganan kejadian)
- Menangani pemasukan data
- Jendela peringatan
- Jendela Konfirmasi
- Objek pada JavaScript
- Variabel dan Nilai (deklarasi variabel, penaman variabel, tipe data)
- Ekspresi
- Operator
- Komentar

Daftar Pustaka :
- Abdul Kadir, P em rogram an W eb M encakup : HTM L, CSS, JavaScript & P HP , Penerbit
Andi, Yogyakarta, 2002
- Anthony Pranata, P anduan P em rogram an JavaScript, Penerbit Andi, Ypgyakarta, 2002
- Betha Sidik, etc, P em rogram an W eb dengan HTM L, Penerbit Informatika, Bandung, 2002
- DR. Erhans A, M em buat Desain W eb dengan JavaScript, Penerbit PT. Ercontara Rajawali,
Jakarta, 2002

A. Sejarah & Perkembangan 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. 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)
2. Pewarisan (Inheritance)
 3. Polimorfisme (Polymorphism)

B. Apa yang diperlukan ?

Untuk mempelajari pemrograman JavaScript, ada dua piranti yang diperlukan, yaitu :
1. Editor teks
- NotePad
- Word Pad
- Dll
2. Web Browser
- Netscape Navigator
- Internet Explorer
- dll
Editor teks yang digunakan harus dapat menyimpan file dalam format ASCII. Dan Web
browser yang digunakan harus mendukung JavaScript.

C. JavaScript dan HTML

Program JavaScript dituliskan pada file HTML (.html atau .htm) dengan menggunakan
tag container <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>. Jalan termudah dengan memahami sesuatu adalah dengan mempraktekannya.
Oleh karena itu cobalah program JavaScript berikut ini :

FILE : skrip1-1.htm
<HTML>
<HEAD>
<TITLE>Sekilas JavaScript</TITLE>
</HEAD>
<BODY>
Belajar membuat program JavaScript<BR>
<SCRIPT LANGUAGE="JavaScript">
<!--
document.write("Selamat Malam<BR>");
document.write("Sarwati Rahayu");
//-->
</SCRIPT>
</BODY>
</HTML>

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 Malam");
document.write ("Sarwati Rahayu");

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 Malam” dan
“Sarwati Rahayu”. Hasilnya dapat dilihat pada gambar di bawah ini :
 Gambar 1. Hasil skrip1-1.htm

D. Pesan-pesan Kesalahan
Kode JavaScript yang salah secara sintaks akan membuat browser menampilkan kotak
dialog yang menyatakan pesan kesalahan. Umumnya kesalahan yang sering terjadi pada
kode JavaScript diakibatkan oleh hal-hal sebagai berikut :
1. Kesalahan karena penulisan huruf kapital dan huruf kecil.
2. Penggunaan tanda kutip yang tidak cocok.
3. Kesalahan dalam tag <SCRIPT>

E. Bahasa Berorientasi Objek

JavaScript merupakan sebuah bahasa yang berorientasi objek. Sebuah objek terdiri
dari properti, metode, dan penanganan kejadian.

1. 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 :
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

FILE : skrip1-2.htm
 <HTML>
<HEAD>
<TITLE> properti defaultStatus </TITLE>
</HEAD>
<BODY>
Tes defaultStatus
<SCRIPT LANGUAGE = "JavaScript">
<!--
window.defaultStatus = “coba”
//-->
</SCRIPT>
</BODY>
</HTML>

Gambar 3. Hasil skrip1-2.htm

2. 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.
3. 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>

F. Manangani Pemasukkan 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. Misal, skrip berikut ini akan meminta
user memasukan namanya dan kemudian akan mendapatkan jawaban.

FILE : skrip1-3.htm
<HTML>
<HEAD>
<TITLE>Jendela Memasukkan Data</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
var nama = prompt("Nama Anda : ");
document.write("Hai, " + nama);
//-->
</SCRIPT>
</BODY>
</HTML>
 Gambar 4. Hasil skrip1-3.htm
Masukkan nama anda, misalnya Sarwati Rahayu. Kemudian klik tombol ok maka :

Gambar 5. Hasil skrip1-3.htm setelah jendela prompt dimasukkan sebuah nama

G. 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("Hati-Hati, Jangan Salah Tekan");

FILE : skrip1-4.htm
<HTML>
<HEAD>
<TITLE>Alert Box</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
window.alert("Hati-Hati, Jangan Salah Tekan");
//-->
</SCRIPT>
</BODY>
 </HTML>

Gambar 6. Hasil skrip-1-4.htm

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

FILE : skrip1-5.htm
<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>
 Gambar 7 Hasil skrip1-5.htm

Jika pada gambar 7 tombol OK diklik, maka akan terlihat hasilnya seperti gambar di bawah
ini :

Gambar 8. Hasil skrip1-5.htm setelah tombol OK diklik

I. Objek pada JavaScript

JavaScript mempunyai objek hirarki yang disebut sebagai window.
→ Window
→ Location
→ History
→ Document
→ Forms
→ Anchors
 Window merupakan objek berisi metoda dan properti yang berinteraksi dengan
window aktual. Setiap window dapat mempresentasikan Frame. Location berisi properti dan
metoda yang berkaitan dengan lokasi URL. History berisi tentang infomasi daftar dari history
tempat/url yang telah dikunjungi. Sedangkan document merupakan objek yang paling
banyak digunakan dalam JavaScript, termasuk penggunaan forms, links, string (teks) dan
lainnya.

J. Variabel dan 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.

1. Deklarasi Variabel
Pendeklarasian variabel pada JavaScript ditulis dengan menggunakan pernyataan var.
Contoh :
var nama = “sarah”;
var nilai = 8;
var x,y,z = “9”;
var alamat;

Pada contoh pertama, variabel nama dideklarasikan dan diisi dengan string “sarah”. 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 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.

2. Penamaan Variabel
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 variabel 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)

- nama, nama1, nama_2 → BENAR
- 2nama, nama 1, nama, datanama+nim → SALAH
(Karena diawali dengan angka, mengandung spasi, mengandung tanda +)
- nama_1 dan NAMA_1 → BENAR
(Menyatakan variabel yang berbeda karena huruf kapital dan huruf kecil dibedakan.

K. 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 :
 1. Bilangan atau Numerik → Misalnya : 456, -90
2. String → Misalnya : “Sarwati Rahayu”
3. Nilai logika atau dikenal dengan istilah boolean. Nilainya berupa true atau false
4. Null → Variabel yang tidak diinisialisasi

1. 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)
a) Bilangan Desimal
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
b) 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)
c) Bilangan Heksadesimal
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
Pada contoh di atas pendeklarasikan dua buah bilangan yang sama, hanya saja pada pada
pendeklarasikan pertama digunakan tanda titk sedangkan pada pendeklarasikan kedua
digunakan notasi ilmiah.
2. Tipe Data String
String adalah deretan karakter-karakter. Pada JavaScript string dapat dituliskan
diantara tanda petik tunggal (‘) atau tanda (“).
Contoh :
var nama = ‘sarwati rahayu’ ;
var nama = “sarwati rahayu” ;
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 = “Don’t 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
\n menyatakan karakter baris baru
\r menyatakan carriage return (memindah kursos ke awal baris)
\t menyatakan karakter tab

3. 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);
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.
4. 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.

L. 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 :

3–1*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 w rite.
document.write(4 + 5);
akan menampilkan hasil ekspresi 4 + 5 pada jendela browser.

M. Operator
Pada dasarnya, operator pada JavaScript dapat dibagi menjadi enam, yaitu :
a) Operator Aritmatik
b) Operator Pemberian nilai
c) Operator pemanipulasi bit (bitwise)
d) Operator pembanding
e) Operator Logika
f) Operator String

1. Operator Aritmatik
 Operator aritmatik digunakan pada operan bertipe numerik. Semua operator berlaku
untuk bilangan bulat maupun bilangan pecahat (floating-point). Ada dua macam operator
aritmatik :
a) Operator aritmatik tunggal (unary)
Hanya menggunakan satu buah operand
b) Operator aritmatik biner (binary)
Menggunakan operand lebih dari satu (biasanya 2 buah operand)

Tabel 8.1 Operator Aritmatik

Operator Tunggal / Biner Kegunaan

+ Biner Penjumlahan
- Biner Pengurangan
* Biner Perkalian
/ Biner Pembagian
% Biner Modulus (sisa pembagian)
- Tunggal Negasi
++ Tunggal Penambahan dengan satu (penaikan)
-- Tunggal Pengurangan dengan satu (Penurunan)

JavaScript tidak mendukung operator untuk perpangkatan. Perpangkatan dapat dilakukan

melalui metode yang akan dijelaskan untuk berikutnya 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.
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.

2. Operator Pemberian Nilai

Operator pemberian nilai digunakan bila ingin memberi nilai ke suatu operan atau
mengubah nilai suatu operan. Semua opearotor pada tabel 4.2 dapat dikenakan pada operan
bertipe numerik. Hanya operator = dan += yang dapat dikenakan pada operan bertipe
string. Operator += digunakan untuk menambah suatiu 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.

Tabel 2. Operator pemberi nilai

Operator Keterangan Contoh Ekuivalen

= sama dengan a= b -
+= ditambah dengan a+=b a=a+b
-= dikurangi dengan a-=b a=a–b
*= dikalikan dengan a*=b a=a*b
/= dibagi dengan a/=b a=a/b
%= dikenai operasi modulus dengan a %= b a=a%b
&= dikenai operasi bit and dengan a&=b a=a&b
 |= dikenai operasi bit or dengan a|=b a=a|b
>>= dikenai operasi bit >> dengan a >> = b a = a >> b
<<= dikenai operasi bit <<dengan a << = b a = a << b
>>>= dikenai operasi bit >>> dengan a >>> = b a = a >>>b

3. Operator Pemanipulasian Bit

Operasi ini berhubungan dengan pemanipulasian bit pada operan bertipe bilangan bulat.
Tabel 3. Operator pemanipulasian Bit

Operator Keterangan
& Operator bit AND
| Operator bit OR
^ Operator bit XOR
~ Operator NOT
<< Menggeser ke kiri
>> Menggeser ke kanan
>>> Menggeser ke kanan dengan diisi nol

4. 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 adalah data bertipe boolean yang menunjukkan hasil operasi benar
atau salah.
Tabel 4. Operator pembanding

Operator Keterangan
== Kesamaan
!= Ketidaksamaan
> Lebih besar daripada
< Lebih kecil daripada
>= Lebih besar atau sama dengan
<= Lebih kecil atau sama dengan&

N. Konversi Tipe
Konversi tipe data pada JavaScript telah diatur dengan sendirinya oleh JavaScript itu
sendiri. Konversi tipe data string ke dalam tipe data numerik dapat menggunakan fungsi
paseInt() atau parseFloat(). Fungsi parseInt() adalah fungsi yang berguna untuk
mengkonversi string bilangan menjadi bilangan bulat. Sedangkan fungsi parseFloat()
adalah fungsi yang berguna untuk mengkonversi string bilangan menjadi bilangan pecahan.
O. Komentar
Komentar dalam JavaScript dapat dibuat dengan menggunakan /* dan */. Semua
teks yang terletak dalam pasangan tanda tersebut tidak akan diproses oleh JavaScript.

Latihan Untuk Dikerjakan Di Laboratorium Komputer

Buatlah program JavaScript dengan file-file yang ada di dalam BAB 8

Latihan Untuk Dikerjakan Di Rumah

1. Buatlah sebuah jendela peringatan/informasi untuk menampilkan kata ”Perhatian,
saya cantik !”
2. Buat pula sebuah jendela konfirmasi untuk mengkonfirmasikan kata ”Saya cantik :
Setuju kan ?”
3. Buatlah program untuk mengitung luas segitiga, dengan ketentuan sebagai berikut :
- window.defaultStatus berisikan kata ”Selamat Mencoba”
- Nilai alas diinput melalui jendela prompt dan browser akan menampilkan nilai
alas yang diinput
- Nilai tinggi diinput melalui jendela prompt dan browser akan menampilkan nilai
tinggi yang diinput
- Hitung luas segitiga dengan rumus : (alas * tinggi) / 2
- Browser menampilkan Luas segitiga yang telah dihitung
 PERCABANGAN

Tujuan Instruksional Umum :

Agar mahasiswa dapat mengenal dan memahami percabangan-percabangan dalam JavaScript

Tujuan Instruksional Khusus :

- Mahasiswa dapat membuat perintah-perintah dasar yang berhubungan dengan percabangan
- Mahasiswa dapat membuat percabangan yang bersarang

Pokok Bahasan :
- Operator ?
- Blok pernyataan
- Pernyataan if tanpa else
- Pernyataan if dengan else
- Pernyataan if bersarang
- Pernyataan switch

Daftar Pustaka :
- Abdul Kadir, P em rogram an W eb M encakup : HTM L, CSS, JavaScript & P HP , Penerbit
Andi, Yogyakarta, 2002
- Anthony Pranata, P anduan P em rogram an JavaScript, Penerbit Andi, Ypgyakarta, 2002
- Betha Sidik, etc, P em rogram an W eb dengan HTM L, Penerbit Informatika, Bandung, 2002

A. Operator ?
Penggunaan operator ? dapat digunakan dengan statemen sebagai berikut : Kondisi ?
pernyataan1_dijalankan_jika_kondisi_benar : pernyataan2_dijalankan_jika_kondisi_salah.
Perhatikan contoh berikut ini :
FILE : skrip9-1.htm
<HTML>
<HEAD>
<TITLE>Operator ?</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
var berat=prompt("Masukkan berat badan anda : ", 0);
var hasil=(berat >=100) ? "Anda Gendut" : "Anda kurus";
document.write("Hasil : " + hasil);
//-->
</SCRIPT>
</BODY>
</HTML>
 Gambar 1 Hasil skrip9-1.htm

Isikan berat badan, misalnya 150, maka hasilnya akan tampak seperti gambar di bawah ini :

Gambar 2. Hasil skrip9-1.htm setelah diinput

C. Blok Pernyataan
Blok pernyataan adalah sekelompok pernyataan yang terdapat di dalam tanda kurung
kurawal {}. Intinya, kalau dalam percabangan terdapat beberapa pernyataan maka sebaiknya
mnggunakan blok pernyataan.
{
pernyataan1;
pernyataan2;
.........
pernyataanke-n;
}

C. Pernyataan If Tanpa Else

 Pernyataan if merupakan pernyataan untuk menjalankan kondisi dimana kondisi dapat
bernilai banar atau salah. Struktur pernyatan if tanpa else adalah sebagai berikut :
if (kondisi)
pernyataan

Perhatikan contoh berikut ini :

FILE : skrip9-2.htm
<HTML>
<HEAD>
<TITLE>Pernyataan if</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
var berat=prompt("Masukkan berat badan anda : ", 0);
var hasil = "Anda kurus";
if (berat >=100)
hasil = "Anda gendut";
document.write("Hasil berat badan anda : " +hasil);
</SCRIPT>
</BODY>
</HTML>

Gambar 3. Hasil skrip9-2.htm

 Gambar 4. Hasil pada gambar 9.3setelah diinput dan diklik OK

D. Pernyataan if dengan else

Pernyataan if dengan else mempunyai struktur sebagai berikut :
if (kondisi) {
Pernyataan yang akan dijalankan Jika kondisi bernilai benar;
} else {
Pernyataan yang akan dijalankan Jika kondisi bernilai salah;
}
Perhatikan contoh berikut ini :

FILE : skrip9-3.htm
<HTML>
<HEAD>
<TITLE>Pernyataan if-else</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
var berat = prompt("Masukkan berat badan anda: ", 0);
var hasil = "";
if (berat >= 100)
hasil = "Anda Gendut";
else
hasil = "Anda Kurus";
document.write("Hasil: " + hasil);
//-->
</SCRIPT>
</BODY>
</HTML>

Gambar 5. Hasil skrip9-3.htm

Bila diisikan berat badan, misalnya 20 kemudian klik OK maka hasilnya seperti di bawah ini :
 Gambar 6. Hasil skrip9-3.htm setelah diinput
E. Pernyataan if bersarang
Pada kasus tertentu, akan diletakkan pernyataan 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
Perhatikan contoh berikut ini :

FILE : skrip9-4.htm
<HTML>
<HEAD>
<TITLE> If bersarang </TITLE>
</HEAD>
<SCRIPT LANGUAGE = "JavaScript">
<!--
var kota=prompt("Nama kota di pulau Sulawesi (Huruf pertama harus
kapital): ", "");
if (kota=="Kendari")
document.write("Ibu kota Sulawesi Tenggara");
else if (kota=="Makassar")
document.write("Ibu kota Sulawesi Selatan");
else if (kota=="Menado")
document.write("Ibu kota Sulawesi Utara");
else
document.write("Kota ini belum terdaftar");
//-->
</SCRIPT>
</BODY>
</HTML>
Setelah program dijalankan, maka ditanyakan kota besar di Pulau Jawa. Misalnya diisikan
Bandung, perlu diingat bahwa penamaan kota harus diawali huruf kapital. Jika dimasukkan
dengan benar, tetapi tidak diawali huruf kapital, maka nama kota tersebut tidak terdeteksi.

Gambar 7.Hasil skrip9-4.htm tampilan awal setelah program dijalankan

Gambar 8. Hasil skrip9-4.htm setelah diinput & mengklik OK

F. 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.
Bagian default juga bersifat opsional. Bagian ini akan dieksekusi tak ada yang cocok dengan
bagian case. Perhatikan contoh berikut ini :

FILE : skrip9-5.htm
<HTML>
<HEAD>
<TITLE>Penggunaan 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:
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>

Gambar 9. Hasil skrip9-5.htm

Latihan Untuk Dikerjakan Di Laboratorium Komputer

Buatlah program JavaScript dengan file-file yang ada di dalam BAB 9

Latihan Untuk Dikerjakan Di Rumah

Buatlah sebuah program dengan menggunakan JavaScript dengan ketentuan :
- Input melalui jendela Prompt dengan kalimat : ”Masukkan nilai huruf (A, B, C, D, E) :”
- Nilai yang diinput akan ditampilkan di browser
- Jika pengguna memilih nilai A maka hasilnya adalah ”Istimewa”
- Jika pengguna memilih nilai B maka hasilnya adalah ”Baik”
- Jika pengguna memilih nilai C maka hasilnya adalah ”Cukup”
- Jika pengguna memilih nilai D maka hasilnya adalah ”Buruk”
- Jika pengguna memilih nilai E maka hasilnya adalah ”Sangat Buruk”
- Nilai yang dipilih berikut hasilnya akan ditampilkan di browser
- Jangan lupa tampilkan pula hari dan tanggal pada saat browser menjalankan program
ini
 PENGULANGAN

Tujuan Instruksional Umum :

Agar mahasiswa dapat mengenal dan memahami pengulangan-pengulangan dalam JavaScript

Tujuan Instruksional Khusus :

- Mahasiswa dapat membuat perintah-perintah pengulangan yang terdapat dalam JavaScript
- Mahasiswa dapat menghentikan pengulangan dan melanjutkan pengulangannya kembali

Pokok Bahasan :
- Proses pengulangan
- Pernyataan while
- Pernyataan do..while
- Pernyataan for
- Pernyataan break dan continue

Daftar Pustaka :
- Abdul Kadir, P em rogram an W eb M encakup : HTM L, CSS, JavaScript & P HP , Penerbit
Andi, Yogyakarta, 2002
- Anthony Pranata, P anduan P em rogram an JavaScript, Penerbit Andi, Ypgyakarta, 2002
- Betha Sidik, etc, P em rogram an W eb dengan HTM L, Penerbit Informatika, Bandung, 2002

Pengulangan digunakan untuk mengeksekusi pernyataan beberapa kali. Blok berisi

pernyataan yang harus diulang atau sering juga disebut loop. Jadi suatu pernyataan dapat
dieksekusi misalnya sebanyak 50 kali dengan cara menuliskannya di dalam loop. Untuk
menangani pengulangan, JavaScript menyediakan pernyataan : while, do…….while, dan
for

A. Pernyataan while
Pernyataan while biasanya digunakan bila belum tahu pasti berapa banyak
pengulangan dilakukan. Berakhirnya loop 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 : 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. Perhatikan contoh berikut ini :

FILE : skrip10-1.htm
<HTML>
<HEAD>
<TITLE>Contoh while</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE ="JavaScript">
<!--
var bilangan = 0;
while (bilangan < 10) {
document.write("Teknologi Informasi UMK<BR>");
bilangan++;
}
//-->
</SCRIPT>
</BODY>
</HTML>

Gambar 1 Hasil skrip10-1.htm

B. Pernyataan do.....while
 Kegunaan pernyataan do….while 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 loop. Bentuk pernyataan do……….while :
do
{
bok pernyataan
} while (kondisi);

FILE : skrip10-2.htm
<HTML>
<HEAD>
<TITLE>Penggunaan do while</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE ="JavaScript">
<!--
var bilangan = 1;
do {
document.write(bilangan + "<BR>");
bilangan++;
} while (bilangan < 10);
//-->
</SCRIPT>
</BODY>
</HTML>

Gambar 2. Hasil skrip10-2.htm

Pada file skrip10-2.htm, dapat dilihat bahwa pada awalnya dideklarasikan variabel
bilangan=1 yang akan menjadi nilai awal pada variabel bilangan. Kemudian bilangan akan
tercetak selama kondisi terpenuhi yaitu bilangan < 10.

C. Pernyataan for
Pernyataan for paling sering digunakan. Pernyataan ini digunakan ketika sudah
diketahui berapa kali pengulangan akan dilakukan. Bentuk Pernyataan for :
for (inisialisasi; kondisi; penaikan_penurunan) {
pernyataan_pernytaan
}

FILE : skrip10-3.htm
<HTML>
<HEAD>
<TITLE>Penggunaan for</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE ="JavaScript">
<!--
var bil = 0;
for (bil = 1; bil <= 10; bil++)
document.write(bil + "<BR>");
//-->
</SCRIPT>
</BODY>
</HTML>

Gambar 3. Hasil skrip10-3.htm

D. Pernyataan break dan continue
Pada beberapa kasus, pengulangan akan dihentikan di tengah jalan. Untuk keperluan
itu, JavaScript menyediakan pernyataan break. Pernyataan break dapat digunakan pada
pernyataan for maupun while. Pernyataan continue adalah pernyataan lain yang
digunakan pada pengulangan, yang digunakan untuk mengembalikan aliran program ke
penguji kondisi pengulangan. Dengan kata lain, pernyataan di bawah continue akan
diabaikan. Pernyataan break dan continue dapat juga digunakan pada loop bersarang (baik
for maupun while). Pada loop bersarang, break akan menghentikan semua loop sedangkan
continue akan mengembalikan aliran program ke penguji kondisi loop paling dalam.

FILE : skrip10-4.htm
<HTML>
<HEAD>
<TITLE>Penggunaan break</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE ="JavaScript">
<!--
var bilangan = 0;
while (bilangan < 10) {
if (bilangan == 5)
break;
document.write(bilangan + "<BR>");
bilangan++;
}
//-->
</SCRIPT>
</BODY>
</HTML>
 Gambar 4. Hasil skrip10-4.htm
Contoh penggunaan continue :

FILE : skrip10-5.htm
<HTML>
<HEAD>
<TITLE>Penggunaan continue</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
var i = 0;
while (i < 10) {
if (i == 5)
{
i++;
continue;
}
document.write(i + "<BR>");
i++;
}
//-->
</SCRIPT>
</BODY>
</HTML>
 Gambar 5. Hasil skrip10-5.htm

Latihan Untuk Dikerjakan Di Laboratorium Komputer

Buatlah program JavaScript dengan file-file yang ada di dalam BAB 10
Kerjakan kode-kode Java Script Berikut ini :
1.
<HTML>
<HEAD>
<TITLE>Contoh break</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
var i = 0;
var j = 0;
while (i < 3) {
j = 0;
while (j < 5) {
if (j == 3)
break;
document.write("i = " + i +
" j = " + j + "<BR>");
j++;
}
i++;
}
//-->
</SCRIPT>
</BODY>
</HTML>

2.
<HTML>
<HEAD>
<TITLE>Contoh break</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
var i = 0;
var j = 0;
selesai:
while (i < 3) {
j = 0;
while (j < 5) {
if (j == 3)
break selesai;
document.write("i = " + i +
" j = " + j + "<BR>");
j++;
}
i++;
}
//-->
</SCRIPT>
</BODY>
</HTML>

3.
<HTML>
<HEAD>
<TITLE> do while</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
var bilangan = 1;
do {
document.write(bilangan + "<BR>");
bilangan++;
} while (bilangan < 100);
//-->
</SCRIPT>
</BODY>
</HTML>

Latihan Untuk Dikerjakan Di Rumah

1. Buat program untuk mencetak kata ”Pemrograman JavaScript” sebanyak 10 baris
tersusun ke bawah
2. Buatlah sebuah program dengan menggunakan JavaScript. Ketika dijalankan,
program tersebut akan menanyakan nilai masukkan. Setelah nilai dimasukkan, maka
nilai tersebut akan ditampilkan di browser. Program akan terus menanyakan sebuah
nilai dan mencetaknya secara tersusun ke bawah. Pada saat nilai yang diinput lebih
besar atau sama dengan 100, program akan berhenti
 FUNGSI

Tujuan Instruksional Umum :

Agar mahasiswa dapat mengenal dan memahami fungsi-fungsi yang terdapat dalam JavaScript

Tujuan Instruksional Khusus :

- Mahasiswa dapat membuat fungsi yang terdapat dalam JavaScript
- Mahasiswa dapat membuat dan membedakan antara variabel global dengan variabel lokal

Pokok Bahasan :
- Definisi fungsi
- Variabel lokal dan variabel global
- Fungsi rekursif
- Contoh lain penggunaan fungsi

Daftar Pustaka :
- Abdul Kadir, P em rogram an W eb M encakup : HTM L, CSS, JavaScript & P HP , Penerbit
Andi, Yogyakarta, 2002
- Anthony Pranata, P anduan P em rogram an JavaScript, Penerbit Andi, Ypgyakarta, 2002
- Betha Sidik, etc, P em rogram an W eb dengan HTM L, Penerbit Informatika, Bandung, 2002

A. 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 sesuai dengan isi variabel hasil, yakni berupa penjumlahan
kedua argumennya. Perhatikan contoh fungsi yang tidak menggunakan parameter berikut :
FILE : skrip11-1.htm
<HTML>
<HEAD>
<TITLE>Fungsi tanpa parameter</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
function cetak()
{
document.write("Pemrograman JavaScript <BR>")
}
document.write("Hasil cetakan : <BR>")
cetak()
//-->
</SCRIPT></BODY></HTML>

Gambar 1. Hasil skrip11-1.htm

Kadangkala ada juga fungsi yang menggunakan parameter seperti contoh berikut :
FILE : skrip11-2.htm
<HTML>
<HEAD>
<TITLE>Fungsi tanpa parameter</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
function cetak(str)
{
document.write("Pemrograman JavaScript dan " + str + "<BR>")
}
document.write("Hasil cetakan : <BR>")
cetak("PHP")
cetak("ASP")
//-->
</SCRIPT>
</BODY>
</HTML>

Gambar 2. Hasil skrip11-2.htm

B. Variabel Lokal dan Variabel Global

Dalam pembuatan fungsi tidak dianjurkan untuk menggunakan variabel global
(variabel yang dikenali di semua bagian program). Perhatikan contoh berikut ini fungsi yang
menggunakan variabel global :

FILE : skrip11-3.htm
<HTML>
<HEAD>
<TITLE>Variabel Global</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
function kali(a, b) {
 c = a * b;
return(c);
}
var c = 100;
document.write("c semula = " + c + "<BR>");
document.write(kali(10, 2) + "<BR>");
document.write("c sekarang = " + c + "<BR>");
//-->
</SCRIPT>
</BODY>
</HTML>

Gambar 3. Hasil skrip11-3.htm

Jika dilihat dari contoh di atas, variabel c pada fungsi kali() merupakan variabel global
karena tidak didefinisikan dengan var. Maka variabel c pada pemanggil fungsi ini akan ikut
berubah ketika fungsi kali() dipanggil. Bagaimana jika variabel c sudah didefinisikan terlebih
dahulu? Perhatikan contoh di berikut ini :

FILE : skrip11-4.htm
<<HTML>
<HEAD>
<TITLE>Variabel Lokal</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
function kali(a, b) {
var c = a * b;
return(c);
}
var c = 100;
document.write("c semula = " + c + "<BR>");
document.write(kali(10, 2) + "<BR>");
document.write("c sekarang = " + c + "<BR>");
//-->
 </SCRIPT>
</BODY>
</HTML>

Gambar 4. Hasil skrip11-4.htm

Dapat dilihat pada contoh skrip11-4, terdapat definisi var pada variabel c, hal ini
menandakan bahwa variabel tersebut merupakan variabel lokal yang diletakkan pada fungsi
kali.

C. Fungsi Rekursif
Fungsi rekursif adalah fungsi yang dapa memanggil dirinya sendiri. Biasanya fungsi
rekursif ini digunakan untuk masalah tertentu, seperti faktorial. Perhatikan contoh berikut :
FILE : skrip11-5.htm
<HTML>
<HEAD>
<TITLE>Fungsi Rekursif</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
function faktorial(x) {
if (x == 0)
return(1);
else
return( x * faktorial(x-1));
}
document.write("6! = " + faktorial(6));
//-->
</SCRIPT>
</BODY>
</HTML>
 Gambar 5. Hasil skrip11-5.htm

D. Contoh Lain Penggunaan Fungsi

Perhatikan contoh lain berikut ini dalam penggunaan fungsi lainnya.
FILE : skrip11-6.htm
<HTML>
<HEAD>
<TITLE>Contoh Fungsi Lainnya</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
function contohlain()
{
alert("Selamat Datang di Pemrograman Web")
}
//-->
</SCRIPT>
<FORM>
<INPUT TYPE = "button" onclick="contohlain()" value = "Panggil
Fungsi">
</FORM>
</BODY>
</HTML>

Pada saat program dijalankan, maka akan dihasilkan tampilan sebagai berikut :
 Gambar 6. Hasil skrip11-6.htm

Jika button Panggil Fungsi diklik maka akan ditampilkan sebuah window alert sebagai
berikut :

Gambar 7. Hasil skrip11-6.htm setelah button dikllik

Fungsi di atas dibuat tanapa adanya sebuah parameter fungsi. Hal ini tidaklah menjadi
masalah. Perhatikan contoh berikut ini yang menggunakan parameter pada fungsinya.
FILE : skrip11-7.htm
<HTML>
<HEAD>
<TITLE>Contoh Fungsi Lainnya Dengan Parameter</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
function contohlain(teks)
{
alert("Hai " +teks)
 }
//-->
</SCRIPT>
<FORM>
Masukkan nama Anda : <INPUT TYPE="text" name="nama">
<INPUT TYPE="button" onclick="contohlain(nama.value)" value="Panggil
Fungsi">
</FORM>
</BODY>
</HTML>

Jalankan program di atas, kemudian masukkan nama Anda, misalnya Sarwati Rahayu, maka
tampilan pada jendela Browser seperti di bawah ini :

Gambar 8. Hasil skrip11-7.htm

Kemudian klik button Panggil Fungsi di atas, maka browser akan menampilkan jendela
alert sebagai berikut :

Gambar 9. Hasil skrip11-7.htm setelah button dikllik

Latihan Untuk Dikerjakan Di Laboratorium Komputer
Buatlah program JavaScript dengan file-file yang ada di dalam BAB 11

Latihan Untuk Dikerjakan Di Rumah

Buatlah tiga buah fungsi:
1. Fungsi pertama adalah fungsi penjumlahan dua buah bilangan. Nilai bilangan pertama
dan nilai bilangan kedua harus diinput. Hasil inputan dan hasil perhitungan
ditampilkan di browser.
2. Fungsi kedua adalah fungsi perkalian dua buah bilangan. Nilai bilangan pertama dan
nilai bilangan kedua harus diinput. Hasil inputan dan hasil perhitungan ditampilkan di
browser.
3. Fungsi kedua adalah fungsi pembagian dua buah bilangan. Nilai bilangan pertama dan
nilai bilangan kedua harus diinput. Hasil inputan dan hasil perhitungan ditampilkan di
browser.
 ARRAY

Tujuan Instruksional Umum :

Agar mahasiswa dapat mengenal dan memahami penggunaan array dalam JavaScript

Tujuan Instruksional Khusus :

- Mahasiswa dapat membuat array satu dimensi, dua dimensi dan array tiga dimensi
- Mahasiswa dapat menampilkan jumlah elemen array
- Mahasiswa dapat membuat properti dan metode pada array

Pokok Bahasan :
- Definisi array
- Jumlah elemen array
- Properti pada array
- Metode array
- Array berdimensi banyak

Daftar Pustaka :
- Abdul Kadir, P em rogram an W eb M encakup : HTM L, CSS, JavaScript & P HP , Penerbit
Andi, Yogyakarta, 2002
- Anthony Pranata, P anduan P em rogram an JavaScript, Penerbit Andi, Ypgyakarta, 2002
- Betha Sidik, etc, P em rogram an W eb dengan HTM L, Penerbit Informatika, Bandung, 2002

A. Definisi Array
Array merupakan sekumpulan elemen, tiap elemen mempunyai tipe apa saja. 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).

Gambar 1. Array
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) atau
var kota = new Array (“Jakarta”, “Bogor”, “Bekasi”,“Depok”) atau
var nilai = new Array (5)

B. Jumlah Elemen Array

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]). Perhatikan contoh berikut ini :
FILE : skrip12.1.htm
<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>

Gambar 1. Hasil skrip12-1.htm

C. Property 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

D. 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)
2. 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”)
3. pop berguna untuk membuang elemen terakhir dalam array dan memberikan elemen
terakhir tersebut sebagai nilai balik. Bentuk umumnya :
namaArray.pop()
4. push berguna untuk menambahkan satu atau beberapa elemen ke bagian terakhir dari
array. Bentuk umum :
namaArray.push(elemen_1, …., elemen_N)
5. shift berguna untuk membuang elemen pertama dalam array dan memberikan nilai balik
berupa elemen pertama pada array. Bentuk umum :
namaArray.shift()
6. unshift berguna untuk menambahkan satu atau beberapa elemen ke posisi sebelum
elemen partama dalam array. Bentuk umum :
nama_Array.unshift(elemen_1, ……., elemen_N)
7. slice berguna untuk mendapatkan satu atau beberapa elemen dalam array. Bentuk umum
namaArray.slice(indeksAwal, indeksAkhir)
8. 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])
9. 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
10. reverse membalik urutan elemen-elemen dalam string. Elemen pertama menjadi elemen
terakhir dan elemen terakhir menjadi elemen pertama. Bentuk umum :
namaArray.reverse()
11. sort berguna untuk mengurutkan data. Bentuk umum :
namaArray.sort

E. Array Dimensi Banyak

Selain berdimensi satu, array dapat juga dibuat menjadi dimensi banyak (bisa dimensi
dua atau tiga). Array berdimensi dua dapat dibentuk dengan membuat dua buah array dan
salah satu array diberikan sebagai elemen dari array yang lain. Perhatikan contoh array dua
dimensi berikut ini :

FILE : skrip12-2.htm
<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>

Gambar 2. Hasil skrip12-2.htm

Perhatikan pula contoh array tiga dimensi berikut ini :

FILE : skrip12-3.htm
<HTML>
<HEAD>
<TITLE>Array Tiga Dimensi</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
var x = [[["10", "20"], ["30", "40"]],
[["50", "60"], ["70", "80"]]];
document.write("Isi x:<BR>");
document.write(x + "<BR>");;
document.write("Pengaksesan dengan tiga indeks:<BR>");
document.write(x[0][0][0] + "<BR>");
document.write(x[0][0][1] + "<BR>");
document.write(x[0][1][0] + "<BR>");
 document.write(x[0][1][1] + "<BR>");
document.write(x[1][0][0] + "<BR>");
document.write(x[1][0][1] + "<BR>");
document.write(x[1][1][0] + "<BR>");
document.write(x[1][1][1] + "<BR>");
//-->
</SCRIPT>
</BODY>
</HTML>

Gambar 3. Hasil skrip12-3.htm

Latihan Untuk Dikerjakan Di Laboratorium Komputer

Buatlah program JavaScript dengan file-file yang ada di dalam BAB 12

Latihan Untuk Dikerjakan Di Rumah

Buatlah array 3 dimensi dengan elemen-elemen yang ditentukan sendiri. Tampilkan isi array
tersebut. Serta tampilkan jumlah elemen yang terdapat di dalam array tersebut
 OBJEK-1

Tujuan Instruksional Umum :

Agar mahasiswa dapat mengenal dan memahami pembuatan objek sendiri pada JavaScript

Tujuan Instruksional Khusus :

- Mahasiswa dapat membuat objek-objek yang diciptakan sendiri pada JavaScript
- Mahasiswa dapat membuat objek-objek dengan notasi literal
- Mahasiswa dapat membuat objek yang dapat berinteraksi dengan objek HTML

Pokok Bahasan :
- Definisi Objek
- Objek buatan
- Objek dengan notasi literal
- Interaksi dengan objek HTML (objek form, objek button, objek text, objek
- checkbox, objek radio, objek password, upload berkas

Daftar Pustaka :
- Abdul Kadir, P em rogram an W eb M encakup : HTM L, CSS, JavaScript & P HP , Penerbit
Andi, Yogyakarta, 2002
- Anthony Pranata, P anduan P em rogram an JavaScript, Penerbit Andi, Ypgyakarta, 2002
- Betha Sidik, etc, P em rogram an W eb dengan HTM L, Penerbit Informatika, Bandung, 2002

A. Definisi Objek
Jika ingin membuat sebuah objek, ada beberapa hal yang harus dikerjakan. Pertama,
mendefinisikan fungsi yang akan menjadi metode bagi objek, dan kedua 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 = nmaFungsi;
}

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.

B. Objek Buatan
Untuk membuat objek buatan, bentuk umumnya adalah :
namaVariabel=new konstruktorObjek(daftarParameter);
Perhatikan contoh berikut ini :
FILE : skrip13-1.htm
<HTML>
<HEAD>
<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("Grand Extra", "Toyota",
1500, "Abu-abu Metalik");
mobilku.tampilkanInfoMobil();
document.write("<HR>");
mobilku.ubahWarna("Merah Metalik"); mobilku.tampilkanInfoMobil();
//-->
</SCRIPT>
</BODY>
</HTML>
//-->
</SCRIPT>
</BODY>
 Gambar 1. Hasil skrip13-1.htm

C. Objek dengan Notasi Literal

Objek dapat dibuat dengan menggunakan notasi literal dengan bentuk umum sebagai
berikut : namaObjek = { properti_1:nilai1, .......,properti_n : nilai_n};
Tanda kurung yang digunakan adalah tanda kurung kurawal {}. Perhatikan contoh di bawah
ini :
FILE : skrip13-2.htm
<HTML>
<HEAD>
<TITLE>Objek dengan Notasi Literal</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
// Membuat objek berdasarkan Mata Kuliah
var kuliah = {matakuliah: "Pemrograman Web",
dosen: "Firdaus Sulaiman"};
document.write(kuliah.matakuliah + "<BR>");
document.write(kuliah.dosen + "<BR>");
//-->
</SCRIPT>
</BODY>
</HTML>
 Gambar 2. Hasil skrip13-2.htm

D. Interaksi dengan Objek HTML

Objek yang berhubungan dengan dokumen HTML yang dimuat di browser antara lain
objek form, objek button, objek text, objek checkbox, objek radio, objek password, dan lain-
lainnya.

1. Objek Form
Form yang pernah dipelajari pada bab-bab sebelumnya mempunyai dua buah atribut
yaitu METHOD dan ACTION. Formulir beserta atribut-atributnya dapat diakses dengan
menggunakan JavaScript. Selain atribut-atribut di atas ada beberapa atribut lainnya yang
menyertai formulir, diantaranya :
• Atribut NAME, Menyatakan nama formulir.
• Atribut ENCTYPE, Menentukan jenis data pada URL. Misalnya berisi ”text/ascii” . Pada
Java Script, metode ini dinyatakan dengan properti encoding.
• Atribut TARGET, Menentukan hasil formulir yang akan ditempatkan pada frame atau
halaman.
• onSubmit, Penanganan kejadian jika tombol submit diklik
• onReset, Penanganan kejadian jika tombol reset diklik

Perhatikan contoh berikut ini :

FILE : skrip13-3.htm
<HTML>
 <HEAD>
<TITLE>Contoh FORM</TITLE>
</HEAD>
<BODY>
<FORM NAME = "form1"
METHOD = "POST"
ACTION = "skrip13-2.htm"
onSubmit = "alert('Tombol OK diklik')"
onReset = "alert('Tombol Batal diklik')">
Masukkan nama Anda : <INPUT TYPE = "TEXT" NAME = "nama" ><BR>
<INPUT TYPE = "SUBMIT" VALUE=" OK " >
<INPUT TYPE = "RESET" VALUE="Batal">
</FORM>
<SCRIPT LANGUAGE = "JavaScript">
<!--
document.write("Formulir akan menjalankan ");
document.write(document.forms[0].action);
document.write(" jika tombol OK diklik");
//-->
</SCRIPT> </BODY> </HTML>

Gambar 3. Hasil skrip13-3

Jika tombol OK diklik maka akan ada jendela pesan seperti dibawah ini :

Gambar 4. Jendela Alert

Pada jendela alert tersebut, klik OK maka browser kan menampilkan isi file skrip13-2.htm :
 Gambar 5. Pemanggilan file skrip13-2.htm

2. Objek Button
Tipe input pada formulir digunakan untuk memasukkan sebuah input yang biasanya
menggunakan beberpa atribut yang terdapat pada tag <INPUT>.
Beberapa atribut yang terdapat dalam tag <INPUT> dapat diproses dalam Java Script,
diantaranya :
1. Atribut NAME, Menyatakan variabel dari sebuah masukkan
2. Atribut Value, Menyatakan judul pada tombol
3. onClick(), Penanganan kejadian jika tombol ini diklik
Perhatikan contoh berikut ini :
FILE : skrip13-4.htm
<HTML>
<HEAD>
<TITLE>Contoh FORM</TITLE>
</HEAD>
<BODY>
<FORM NAME = "form1"
METHOD = "POST"
ACTION = "skrip13-2.htm"
onSubmit = "alert('Tombol OK diklik')"
onReset = "alert('Tombol Batal diklik')">
Masukkan nama Anda : <INPUT TYPE = "TEXT" NAME = "nama" ><BR>
<INPUT TYPE = "SUBMIT" VALUE=" OK " >
<INPUT TYPE = "RESET" VALUE="Batal">
</FORM>
<SCRIPT LANGUAGE = "JavaScript">
<!--
document.write("Formulir akan menjalankan ");
document.write(document.forms[0].action);
document.write(" jika tombol OK diklik");
//-->
</SCRIPT> </BODY> </HTML>
 Gambar 6. Pemanggilan file skrip13-4.htm

jika tombol on diklik maka jendela browser menampilkan jendela alert seperti di bawah ini :

Gambar 7.Alert tampilan akan menjadi off

Jika pada jendela alert tombol OK diklik, maka tombol akan berubah menjadi Off dan begitu
seterusnya.

3. Objek Text
Pada tag <INPUT> terdapat pula atribut text yang biasanya digunakan untuk
memasukkan data dari keyboard. Text ini dapat diproses pada JavaScript dan dinamakan
sebagai objek teks. Beberapa yang berhubungan dengan text yang digunakan pada
JavaScript :
• TYPE, Menyatakan jenis atribut dari TYPE
• NAME, Menyatakan variabel
• VALUE, Menyatakan isi dari field teks
• onBlur, Penanganan kejadian saat field teks tidak disorot lagi
• onChange, Penanganan kejadian saat isi field teks ini berubah
• onFocus, Penanganan kejadian saat field teks ini menjadi fokus
• onSelect, Penanganan kejadian saat isi field teks ini dipilih (diblok
 • focus(), Identik kalau field teks ini diklik
• blur(), Identik kalau field teks ini ditinggalkan
• select(), Identik dengan memblok teks pada field teks ini.

FILE : skrip13-5.htm
<HTML>
<HEAD>
<TITLE>Memeriksa Objek text</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!—
function cekIsiField() {
if (document.form1.elements[0].value == "") {
alert("Nama harap diisi");
document.form1.elements[0].focus();
return;
}
if (document.form1.elements[1].value == "") {
alert("alamat harap diisi");
document.form1.elements[1].focus();
return;
}
window.location.href = "skrip13-2.htm";
}
//-->
</SCRIPT>
<FORM NAME = "form1"
METHOD = "POST">
Nama : <INPUT TYPE = "TEXT" NAME = "nama"><BR>
Alamat: <INPUT TYPE = "TEXT" NAME = "alamat">
<BR>
<INPUT TYPE = "BUTTON" NAME = "tombolok" VALUE = "Kirim"
onClick = "cekIsiField()">
</FORM>
</BODY> </HTML>

Gambar 8. Hasil skrip13-5.htm

Jika salah satu kotak tidak disi (nama atau alamat), kemudian tombol Kirim diklik, maka
browser akan menampilkan sebuah pesan berbentuk jendela alert seperti di bawah ini :

Gambar 9. salah satu field tidak diisi

Tetapi jika semua field telah terisi, maka browser akan menjalankan file skrip13-2.htm.

4. Objek CheckBox
Kotak CheckBox berguna untuk melakukan pilihan yang kemungkinannya ada dua,
yaitu bias dipilih atau bisa juga tidak. Objek checkbox dapat diproses dengan JavaScript.
Beberapa hal yang berhubungan dengan objek checkbox, diantaranya :
• Atribut CHECKED, Digunakan untuk memberikan keadaan awal agar kotak check
dalam keadaan dicentang. Pada JavaScript atribut ini identik dengan properti
defaultChecked.
• Properti Checked, Untuk mengetahui keadaan kotak check. Nilainya true jika kotak
check dalam keadaan tercentang dan false untuk keadaan sebaliknya.
• onClick, Menyatakan penanganan kejadian saat kotak check diklik.

Perhatikan contoh berikut ini :

FILE : skrip13-6.htm
<HTML>
<HEAD>
<TITLE>Kotak Cek</TITLE>
</HEAD>
<BODY>
Pilihlah maksimal 15 SKS<BR>
<FORM NAME = "formTes" METHOD = "POST">
<SCRIPT LANGUAGE = "JavaScript">
<!--
function cekKRS() {
var jum_sks = 0;
for (var i = 0; i < 7; i++) {
 if (document.formTes.elements[i].checked)
jum_sks += matakuliah[i][2];
}
document.formTes.fieldJumlah.value = jum_sks;
if (jum_sks > 15)
alert("Anda harus mengurangi SKS\n" +
"karena melebihi 15 SKS");
}
function cekKirim() {
if (document.formTes.fieldJumlah.value > 15)
alert("Anda harus mengurangi SKS\n" +
"karena melebihi 15 SKS");
else
window.location.href = "url";
}
var matakuliah =
[ ["TI201", "Pendidikan Agama", 3],
["TI202", "Pengantar Pendidikan", 3],
["TI203", "Ilmu Alamiah Dasar", 3],
["TI204", "Pengantar TIK", 3],
["TI205", "Bahasa Indonesia", 2],
["IN201", "Bahasa Inggris I", 3],
["FI201", "Pancasila", 3] ];
document.write("<TABLE BORDER = '2'>");
document.write("<TR><TH>Kode</TH><TH>Matakuliah</TH>");
document.write("<TH>SKS</TH><TH>Pilihan</TH></TR>");
for (var i = 0; i < 7; i++) {
document.write("<TR><TD>" + matakuliah[i][0] +
"</TD><TD>" + matakuliah[i][1] +
"</TD><TD>" + matakuliah[i][2] +
"</TD><TD><INPUT TYPE = 'CHECKBOX'" +
" NAME = 'mk" + matakuliah[i][0] + "'" +
" onClick = 'cekKRS()'>");
}
document.write("<TR><TD COLSPAN = '2' ");
document.write("ALIGN = 'RIGHT'>Jumlah SKS</TD>");
document.write("<TD COLSPAN = '2'>");
document.write("<INPUT TYPE = 'TEXT' VALUE = '0' ");
document.write("SIZE = '3'" );
document.write("NAME = 'fieldJumlah'</TD></TR>");
document.write("</TABLE>");
//-->
</SCRIPT>
<BR>
<INPUT TYPE = "BUTTON" NAME = "tombolKirim" VALUE = "Kirim"
onClick = "cekKirim()">
</FORM>
</BODY>
 Gambar 10. Hasil skrip 13-6.htm

5. Objek Radio
Objek ini biasanya digunakan secara berpasangan, minimal dua buah. Objek ini dapat
diproses pada JavaScript. Beberapa hal yang berhubungan dengan Radio Button, diantaranya
:
1. Atribut radio, Digunakan untuk memberikan keadaan awal agar radio button dalam
keadaan dipilih. Pada JavaScript atribut ini identik dengan properti defaultRadio.
2. Properti Radio, Untuk mengetahui keadaan radio button. Nilainya true jika radio button
dalam keadaan terpilih dan false untuk keadaan sebaliknya.
3. onClick, Menyatakan penanganan kejadian saat radio button diklik.
Perhatikan contoh berikut ini :
FILE : skrip13-7.htm
<HTML>
<HEAD>
<TITLE>Objek radio</TITLE>
</HEAD>
<BODY>
Pilih hobby Anda<BR>
<FORM NAME = "form1" METHOD = "GET">
<INPUT TYPE = "RADIO" NAME = "hobi" VALUE = "membaca"
onClick = "info()">Membaca<BR>
<INPUT TYPE = "RADIO" NAME = "hobi" VALUE = "olahraga"
onClick = "info()">Olah Raga<BR>
<INPUT TYPE = "RADIO" NAME = "hobi" VALUE = "menari"
onClick = "info()">Menari<BR>
<INPUT TYPE = "RADIO" NAME = "hobi" VALUE = "memasak"
onClick = "info()">Memasak<BR>
<HR>
Info:
<INPUT TYPE = "TEXT" NAME = "fieldhobi" SIZE = "40">
</FORM>
<SCRIPT LANGUAGE = "JavaScript">
<!--
function info() {
for (var i = 0; i < 4; i++)
if (document.form1.hobi[i].checked)
document.form1.fieldhobi.value =
document.form1.hobi[i].value;
}
//-->
</SCRIPT>
</BODY>
</HTML>

Gambar 11. Hasil skrip 13-7htm

6. Objek Password
Ciri dari objek password adalah apa yang diinput akan tercetak tanda asterik atau
bullet. Objek ini juga dapat diproses dengan menggunakan JavaScript. Perhatikan contoh
berikut ini :
FILE : skrip13-8.htm
<HTML>
<HEAD>
<TITLE>Objek password</TITLE>
</HEAD>
<BODY>
<FORM NAME = "form1" ACTION = "skrip13-2.htm" METHOD = "POST">
<PRE>
Masukkan Password 1: <INPUT TYPE = "PASSWORD" NAME = "pass1">
Masukkan Password 2: <INPUT TYPE = "PASSWORD" NAME = "pass2">
</PRE>
<INPUT TYPE = "BUTTON" NAME = "proses"
VALUE = "Proses"
onClick = "cekPass()">
</FORM>
<SCRIPT LANGUAGE = "JavaScript">
<!--
function cekPass() {
if (document.form1.pass1.value !=
document.form1.pass2.value)
alert("password1 dan password2 yang dimasukkan tidak sama");
else
window.location.href = "skrip13-2.htm";
}
//-->
</SCRIPT>
</BODY>
</HTML>

Gambar 12. Hasil skrip 13-8.htm

Setelah program skrip13-8.htm dijalankan, maka akan tampil seperti yang terlihat pada
gambar 12. Misalnya akan dimasukkan passwor 1 dan password 2 dengan karakter yang
berlainan, kemudian klik tombol proses maka jendela browser akan menampilkan sebuah
jendela alert sebagai berikut

Gambar 13. Password tidak sama

Sebaliknya, jika password keduanya benar, maka jendela browser akan menampilkan file
skrip13-2.htm.

7. Upload Berkas
Pada tag <FORM> dapat menggunakan tag <INPUT> dengan TYPE berupa ”FILE”
yang berguna untuk mengirim berkas ke server. Perhatikan contoh berikut ini :
FILE : skrip13-9.htm:
<HTML>
<HEAD>
<TITLE>Upload Berkas</TITLE>
</HEAD>
<BODY>
<FORM NAME = "form1" METHOD = "POST">
Pilih berkas yang akan di-uplopad:
<INPUT TYPE = "FILE" NAME = "upload" onChange = "komentar()">
</FORM>
<SCRIPT LANGUAGE = "JavaScript">
<!--
function komentar() {
alert("Pilihan berkas: " +
document.form1.upload.value);
}
//-->
</SCRIPT>
</BODY>
</HTML>
 Gambar 14. Hasil skrip13-9.htm
Jika tombol browse diklik, maka akan muncul kotak dialog sebagai berikut :

Gambar 15. Kotak dialog memilih berkas

Pada gambar 15, pilihlah file yang akan diupload (misalnya skrip13-8.htm) dan klik tombol
open, maka akan browser akan menampilkan jendela alert sebagai berikut :
 Gambar 16 Pesan bahwa memilih skrip13-8.htm

Latihan Untuk Dikerjakan Di Laboratorium Komputer

Buatlah program JavaScript dengan file-file yang ada di dalam BAB 13

Latihan Untuk Dikerjakan Di Rumah

Buat sebuah formulir yang terdiri atas Nama, Alamat, Kota dan Gaji. Validasi input field gaji,
tidak boleh kurang dari 200000 dan tidak boleh lebih dari 1000000. Jika kedua kondisi
tersebut tidak terpenuhi maka browser akan menampilikan sebuah jendela peringatan yang
isinya bahwa harus diinput gaji antara 200000-1000000
 OBJEK-2

Tujuan Instruksional Umum :

Agar mahasiswa dapat mengenal dan memahami pembuatan objek bawaan dan objek browser pada
JavaScript

Tujuan Instruksional Khusus :

- Mahasiswa dapat membuat objek-objek bawaan pada JavaScript
- Mahasiswa dapat membuat objek-objek browser pada JavaScript

Pokok Bahasan :
- Objek bawaan (objek boolean, objek date, objek function)
- Objek browser (objek window, objek document, objek location, objek navigator,

Daftar Pustaka :
- Abdul Kadir, P em rogram an W eb M encakup : HTM L, CSS, JavaScript & P HP , Penerbit
Andi, Yogyakarta, 2002
- Anthony Pranata, P anduan P em rogram an JavaScript, Penerbit Andi, Ypgyakarta, 2002
- Betha Sidik, etc, P em rogram an W eb dengan HTM L, Penerbit Informatika, Bandung, 2002

A. Objek Bawaan
Selain objek array yang telah dibahas pada bab-bab sebelumnya, objek bawaan
lainnya yang terdapat di dalam JavaScript antara lain boolean, date, function, dan lain
sebagainya.

1. Objek Boolean
Objek boolean adalah objek yang digunakan untuk menangani pembuatan tipe
boolean atau logika. Tipe Boolean memiliki dua buah nilai, yaitu nilai true atau nilai false.
Perhatikan contoh berikut ini :

FILE : skrip14-1.htm
<HTML>
<HEAD>
<TITLE>Objek Boolean</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE ="JavaScript">
<!--
 var x = new Boolean(true);
var y = new Boolean(false);
if (x)
document.write("Sarwati Rahayu" + "<BR>");
document.write("<HR>");
document.write(x + "<BR>");
document.write(y + "<BR>");
//-->
</SCRIPT>
</BODY>
</HTML>

Gambar 1. Hasil skrip14-1.htm

2. Objek Date
Objek ini memiliki sejumlah metode yang berhubungan dengan pengaksesan tanggal
dan jam yang ditentukan oleh sistem yang sedang berjalan. Metode-metode yang tedapat
pada objek Date adalah :
o getDate()  Mengembalikan tanggal antara 1 sampai dengan 31
o getMonth()Mengembalikan kode bulan dengan nilai antar 0 sampai dengan 11. 0
berarti Januari, .....dan seterusnya
o getYear() Mengembalikan tahun
o getHours() Mengembalikan bagian jam
o getMinutes()Mengembalikan bagian menit
o getSeconds  Mengembalikan bagian detik
o getTime() Mengembalikan nilai numerik yang menyatakan waktu
o getTimezoneOffset() Mengembalikan offset daerah waktu dalam satuan menit
 o Date.parse() Mengembalikan jumlah milidetik dihitung mulai dari 1 Januari 1970,
00:00:00 berdasarkan string objek Date
o setDate(integer)  Menyetel tanggal (antara 0 sampai dengan 31)
o setMonth(integer)  Menyetel bulan (antara 0 samapi dengan 11)
o setYear(integer)  Menyetel tahun
o setHours(integer)  Menyetel jam
o setMinutes(integer)  Menyetel menit
o setSeconds(integer)  Menyetel detik
o setTime(integer)  Menyetel nilai objek Date
o toGMTString() Mengkonversi objek Date ke string, dengan menggunakan konvensi
GMT internet
o toLocaleString() Mengkonversi objek Date ke string, dengan menggunakan
konvensi lokal
o UTC() Mengembalikan jumlah waktu dalam satuan milidetik semenjak tanggal 1
Januari 1970, 00:00:00, GMT

Perhatikan contoh berikut ini :

FILE : skrip14-2.htm

<HEAD>
<TITLE>Objek Date</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE ="JavaScript">
<!--
function hitungusia() {
var sekarang = new Date();
var tanggal = parseInt(document.forms[0].tanggal.value);
var bulan = parseInt(document.forms[0].bulan.value) - 1;
var tahun = parseInt(document.forms[0].tahun.value);
var tgl_lahir= new Date(tahun, bulan, tanggal);
var selisih = (Date.parse(sekarang.toGMTString()) -
Date.parse(tgl_lahir.toGMTString())) /
(1000 * 60 * 60 * 24);
document.forms[0].usia.value =
Math.floor(selisih);
var kode_hari = tgl_lahir.getDay();
var nama_hari;
switch (kode_hari) {
case 0 : nama_hari = "Minggu"; break;
case 1 : 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"; break;
}
document.forms[0].hari.value = nama_hari;
}
//-->
</SCRIPT>
<FORM>
<PRE>
Masukkan tanggal lahir (1-31) :<INPUT TYPE =" TEXT" NAME ="tanggal"
SIZE ="2">
Masukkan bulan lahir (1-12) :<INPUT TYPE =" TEXT" NAME ="bulan" SIZE
="2">
Masukkan tahun lahir :<INPUT TYPE =" TEXT" NAME ="tahun" SIZE ="4">
<INPUT TYPE ="BUTTON" NAME ="proses" VALUE ="proses" onClick
="hitungusia()">
<HR>
Anda lahir hari:<INPUT TYPE ="TEXT" NAME ="hari" SIZE ="6">
Anda berusia :<INPUT TYPE ="TEXT" NAME ="usia" SIZE ="6"> hari
</PRE>
</FORM>
</BODY>
</HTML>

Gambar 2. Hasil skrip14-2.htm

3. Objek Function
Suatu fungsi dapat dibuat dengan objek function. Bentuk umumnya adalah :
namaObjekFungsi = new Function([arg1,.....,arg2,] ”isi fungsi”);
Perhatikan contoh berikut ini :

FILE : skrip14-3.htm
<HTML>
<HEAD>
<TITLE>Objek Function</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
var kali = new Function("a", "b", "return(a*b);");
var perkalian = new Function("document.write('Operasi
perkalian<BR>'); return;");
// Menggunakan fungsi
document.write("2 * 3 = <BR>");
document.write(kali(2,3) + "<BR>");
perkalian();
//-->
</SCRIPT>
</BODY>
</HTML>

Gambar 3. Hasil skrip14-3

B. Objek Browser
Ada beberapa objek browser yang diketahui yaitu objek window, objek document,
objek history, objek location dan objek navigator.

1. Objek Window
Objek window merupakan objek yang mempunyai posisi paling tinggi dalam hirarki.
Properti yang dimiliki oleh objek window adalah :
• defaultStatus, Menyatakn isi baris status pada browser yang digunakan untuk
menampilkan pesan.
 • document, Menyatakan suatu objek document
• frames, Menyatakan array yang berisi seluruh frame
• history, Menyatakan array yang berisi data-data URL yang pernah dikunjungi dalam
sebuah sesi
• length, Menyatakan jumlah frame
• location, Menyatakan informasi tentang URL sekarang
• parent, Menyatakan jendela frameset yang berisi frame sekarang
• self, Menyatakan jendela sekarang
• status, Menyatakan isi baris status, tetapi digunakan untuk menangani kejadian
• window, Menyatakan jendela sekarang

Dan beberapa metode pada window :

• back() Memuat URL sebelum URL sekarang yang berada dalam jendela pada level
teratas
• forward() Memuat URL sesudah URL sekarang yang berada dalam jendela pada
level teratas
• close() Menutup jendela
• home() Memuat URL bagi home page yang ditentukan oleh pemakai dalam
preferences browser
• print() Mencetak isi jendela sekarang atau isi frame yang sedang terfokus

Fitur untuk jendela baru :

o toolbar, Manmpilkan toolbar
o location, Baris yang berisi field teks untuk memasukkan URL
o status, Baris status
o menubar, Baris yang berisi menu pull-down
o scrollbars, Menmpilkan scrollbar
o resizeable, Menampilkan tombol pengatur ukuran jendela yang terletak di pojok
kanan atas jendela
o width, Menentukan lebar jendela
o height, Menentukan tinggi jendela
2. Objek Document
Objek dokumen adalah objek yang berhubungan dengan dokumen pada suatu
jendela. Penggunaan properti yang terdapat dalam objek ini adalah :
o bgColor  String yang berisi nilai atribut BGCOLOR
o fgColor  String yang berisi nilai atribut TEXT
o LastModified  String yang berisi tanggal terakhir dokumen dimodifikasi
o title  String yang berisi tag <TITLE>....</TITLE>

Perhatikan contoh berikut ini :

FILE : skrip14-4.htm
<HTML>
<HEAD>
<TITLE>Objek document</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
function ubahWarnaLB(warna) {
document.bgColor = warna;
}
function ubahWarnaLD(warna) {
document.fgColor = warna;
}
//-->
</SCRIPT>
<H3>WARNA BACKGROUND DAN WARNA TEKS</H3>
<FORM>
<INPUT TYPE = "BUTTON" VALUE = "BackGround Merah Muda"
onClick = "ubahWarnaLB('PINK')">
<INPUT TYPE = "BUTTON" VALUE = "BackGround Magenta"
onClick = "ubahWarnaLB('MAGENTA')">
<INPUT TYPE = "BUTTON" VALUE = "Teks Biru"
onClick = "ubahWarnaLD('BLUE')">
<INPUT TYPE = "BUTTON" VALUE = "Teks Putih"
onClick = "ubahWarnaLD('WHITE')">
</FORM>
<SCRIPT LANGUAGE = "JavaScript">
<!--
document.write("Last modified " +document.lastModified);
//-->
</SCRIPT>
</BODY>
</HTML>
 Gambar 4.Hasil skrip14-4.htm

Jika tombol BackGround Magenta diklik dan tombol Teks Biru diklik, maka browser akan
menampilkan seperi gambar di bawah ini :

Gambar 5. Tampilan setelah salah satu tombol BackGround dan Teks diklik

3. Objek Location
Objek ini digunakan untuk memuat halaman baru. Contoh :
window.location.href = ”http;//www.detik.com”
Pada contoh di atas akan membuat ”http;//www.detik.com” dimuat

4. Objek Navigator
Objek ini akan menampilkan informasi mengenai browser yang sedang digunakan.
Propertiproperti yang biasa digunakan adalah :
1. appCodeName, Menyatakan kode browser
2. appName, Menyatakan nama browser
3. appVersion, Menyatakan versi browser
4. language, Menyatakan bahasa yang digunakan pada browser
5. platform, Tipe Mesin tempat browser dikompilasi
6. userAgent, Judul user agent

Berikut ini contoh pemakaian objek navigator :

FILE : skrip14-5.htm
<HTML>
<HEAD>
<TITLE>Objek navigator</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
document.write("<H1>Informasi browser: </H1><BR>");
document.write("Kode : " + navigator.appCodeName + "<BR>");
document.write("Nama : " + navigator.appName + "<BR>");
document.write("Versi : " + navigator.appVersion + "<BR>");
document.write("Bahasa : " + navigator.language + "<BR>");
document.write("Platform : " + navigator.platform + "<BR>");
document.write("User Agent : " + navigator.userAgent + "<BR>");
//-->
</SCRIPT>
</BODY>
</HTML>
 Gambar 6. Hasil skrip14-5.htm

Latihan Untuk Dikerjakan Di Laboratorium Komputer

Buatlah program JavaScript dengan file-file yang ada di dalam BAB 14

Latihan Untuk Dikerjakan Di Rumah

Perhatikan program skrip14-4.htm. Setelah program dijalankan, pengguna akan memilih
warna latar belakang dengan menekan salah satu tombil yang telah disediakan. Buatlah
program untuk menampilkan warna latar belakang secara otomatis. (Misalnya tersedia warna
magenta, purple, blue, cyan, dan orange) dengan interval penrgantian warna selama 5 detik.