Tutorial JavaScript Indonesia

E
k
o
K
u
r
n
i
a
w
a
n
K
h
a
n
n
e
d
y
2
0
0
7
T
u
t
o
r
i
a
l
J
a
v
a
S
c
r
i
p
t
TutorialJavaScript
UniversitasKomputerIndonesia
Bandung
Hal.2

Pendahuluan

1.1 Pengantar
J avascript diperkenalkan pertama kali oleh Netscape pada tahun 1995. Pada awalnya
bahasa ini dinamakan LiveScript yang berfungsi sebagai bahasa sederhana untuk
browser Netscape Navigator 2. Pada masa itu bahasa ini banyak di kritik karena
kurang aman, pengembangannya yang terkesan buru buru dan tidak ada pesan
kesalahan yang di tampilkan setiap kali kita membuat kesalahan pada saat menyusun
suatu program. Kemudian sejalan dengan sedang giatnya kerjasama antara Netscape
dan Sun (pengembang bahasa pemrograman Java ) pada masa itu, maka Netscape
memberikan nama JavaScript kepada bahasa tersebut pada tanggal 4 desember
1995. Pada saat yang bersamaan Microsoft sendiri mencoba untuk mengadaptasikan
teknologi ini yang mereka sebut sebagai Jscript di browser Internet Explorer 3.

J avascript adalah bahasa yang berbentuk kumpulan skrip yang pada fungsinya
berjalan pada suatu dokumen HTML, sepanjang sejarah internet bahasa ini adalah
bahasa skrip pertama untuk web. Bahasa ini adalah bahasa pemrograman untuk
memberikan kemampuan tambahan terhadap bahasa HTML dengan mengijinkan
pengeksekusian perintah perintah di sisi user, yang artinya di sisi browser bukan di
sisi server web.

J avascript bergantung kepada browser(navigator) yang memanggil halaman web yang
berisi skrip skrip dari J avascript dan tentu saja terselip di dalam dokumen HTML.
J avascript juga tidak memerlukan kompilator atau penterjemah khusus untuk
menjalankannya (pada kenyataannya kompilator J avascript sendiri sudah termasuk di
dalam browser tersebut). Lain halnya dengan bahasa J ava (dengan mana J avaScript
selalu di banding bandingkan) yang memerlukan kompilator khusus untuk
menterjemahkannya di sisi user/klien.

1.2 Keperluan Java Script
Untuk mempelajari pemrograman J ava Script, ada dua piranti yang diperlukan, yaitu :
Teks Editor
Digunakan untuk menuliskan kode-kode J ava Script, teks editor yang dapat
digunakan antara lain notepad dan ultra edit.
Web Browser
Digunakan untuk menampilkan halaman web yang mengandung kode-kode
J ava Script. Web browser yang digunakan harus mendukung J ava Srcipt.
Browser yang dapat digunakan adalah internet explorer dan Netscape
Navigator.

1.3 Penulisan Java Script
Kode J ava Script dituliskan pada file HTML.Terdapat dua cara untuk menuliskan
kode-kode J ava Script agar dapat ditampilkan pada halaman HTML, yaitu :
MODUL
1
Hal.3

a) Java script ditulis pada file yang sama
Untuk penulisan dengan cara ini, perintah yang digunakan adalah
<SCRIPT LANGUANGE =JavaScript >program java script disini</SCRIPT>.
Perintah tersebut biasanya diletakkan diantara Tag <BODY></BODY>
Contoh Penulisan :

<HTML>
<HEAD><TI TLE>. </ TI TLE>
</ HEAD>
<BODY>
<SCRI PT LANGUAGE=J avascr i pt >
kode j avascr i pt di si ni
</ SCRI PT>
kode HTML di si ni
</ BODY>
</ HTML>

b) Javascript ditulis pada file terpisah
Kode J avascript bisa juga kita buat dalam file terpisah dengan tujuan agar dokumen
HTML isinya tidak terlalu panjang. Atribut yang digunakan adalah

<SCRIPT SRC=namafile.js></SCRIPT>

Diantara tag <SCRIPT> dan <SCRIPT> tidak diperlukan lagi kode
J avascriptnya karena sudah dibuat dalam file erpisah. File yang mengandung kode
J avascript berekstensi .js

1.4 Program Pertama Javascript
Pada bagian ini kita akan membuat program dengan menggunakan J avascript.
Program ini akan menampilkan teks Belajar Pemrograman J avascript

<HTML>
<BODY>
<SCRI PT l anguage=" J avaScr i pt " >
<! - -
document . wr i t e( "Bel aj ar Pemr ogr aman J avascr i pt ! " ) ;
/ / - - >
</ SCRI PT>
</ BODY>
</ HTML>

Hal.4
Berikut diberikan beberapa contoh program sederhana dengan menggunakan
J avascript

<HTML>
<BODY>
<B>Bagi an Per t ama i ni di t ul i s dengan HTML! </ B>
<P>
<! - -
document . wr i t e( "Bagi an i ni di t ul i s dengan J avascr i pt ! " ) ;
/ / - - >
</ SCRI PT>
<P>
<B>Bagi an Ter akhi r dar i dokumen HTML, di t ul i s set el ah Scr i pt ! </ B>
</ BODY>
</ HTML>

<HTML>
<HEAD><TI TLE>BEl aj ar J avascr i pt Yuuuuuu</ TI TLE>
</ HEAD>
<BODY BGCOLOR=" gr ay" >
<! - -
document . wr i t el n( " <PRE>" ) ;
document . wr i t e( "<B><FONT SI ZE=5>" ) ;
document . wr i t el n( " SELAMAT DATANG DI J AVASCRI PT" ) ;
document . wr i t e( "</ B></ FONT>") ;
document . wr i t e( "<I >" ) ;
document . wr i t el n( " Pr ogr ami ni mer upakan cont oh seder hana menampi l kan
Teks! ") ;
document . wr i t e( "</ I >" ) ;
document . wr i t el n( " Dengan J avascr i pt ! ! ! ! ! ! ! ! " ) ;
/ / - - >
</ SCRI PT>
</ BODY>
</ HTML>

Hal.5

Objek document mempunyai dua metode untuk menuliskan teks, yaitu write dan
writeln. Metode write digunakan untuk menuliskan teks tanpa ganti baris, sedangkan
metode writeln digunakan untuk menuliskan teks dengan ganti baris.

Berikut diberikan contoh Program J avascript yang diletakkan di file lain dan dipanggil
melalui suatu file HTML

File isi.js
document . wr i t el n( " <CENTER>" ) ;
document . wr i t el n( " <HR WI DTH=600 COLOR=Bl ack>" ) ;
document . wr i t el n( " <H1>UNI VERSI TAS KOMPUTER I NDONESI A</ H1>" ) ;
document . wr i t el n( " <H2>FAKULTAS TEKNI K dan I LMU KOMPUTER<H2>" ) ;
document . wr i t el n( " <H3>J URUSAN TEKNI K I NFORMATI KA<H3>") ;
document . wr i t el n( " <HR WI DTH=600 COLOR=Bl ack>" ) ;
document . wr i t el n( " </ CENTER>") ;

File HTML
<HTML>
<BODY>
<B>Cont oh i ni menggunakan J avascr i pt yang di ambi l dar i Fi l e l ai n. . </ B>
<P>
<SCRI PT l anguage=" J avaScr i pt " SRC=" i si . j s" ></ SCRI PT>
</ BODY>
</ HTML>

Hal.6
1.5 Komentar
Sama seperti bahasa pemrograman lain. J avascript juga menyediakan fasilitas untuk
menuliskan komentar, komentar ini berguna bila nantinya anda atau orang lain
membaca program.
Pemberian komentar dalam J avascript dapat dilakukan dengan dua cara yaitu dengan
menuliskan komentar setelah tanda garis miring dua kali, contoh :

/ / i ni koment ar

atau

/ *i ni j uga koment ar */

Hal.7

Variabel J avaScript

2.1 Variabel Dalam JavaScript
Variabel adalah empat dimana kita menyimpan nilai-nilai atau informasi-informasi
pada J avaScript. Variabel yang dideklarasikan dapat di isi dengan nilai apa saja.
Dalam J avaScript pendeklarasian sebuah variabel sifatnya opsional, artinya anda
boleh mendeklarasikan atau tidak hal tersebut tidak menjadi masalah. J ika anda
memberi nilai pada variabel, maka dalam J avaScript dianggap bahwa anda telah
mendeklarasikan variabel tersebut.
Aturan penamaan variabel :
Harus diawalai dengan karakter (huruf atau baris bawah)
Tidak boleh menggunakan spasi
Huruf Kapital dan kecil memiliki arti yang berbeda
Tidak boleh menggunakan kata-kata yang merupakan perintah dalam
J avaScript.
Deklarasi Variabel
Var nama_variabel = nilai
Atau
Nama_variabel = nilai

Contoh :
var nama;
var nama = Zaskia Mecca
var X =1998;
var Y;
Nama =Bunga Lestari
X =1990;
Y =08170223513

2.2 Tipe Data
Tidak seperti bahasa pemrograman lainnya, J avaScript tidak memiliki tipe data secara
explisit. Hal ini dapat dilihat dari beberapa contoh variabel diatas. Anda
mendeklarasikan variabel tapi tidak menentukan tipenya.
Meskipun J avaScript tidak memiliki tipe data secara explisit. J avaScript mempunyai
tipe data implisit. Terdapat empat macam tipe data implisit yang dimiliki oleh
J avaScript yaitu :
Numerik, seperti : 0222532531, 1000, 45, 3.146789 dsb
String, seperti : Hallo, April, J l. Setiabudi No 17A, Cece Kirani dsb
Boolean, bernilai true atau false
Null, variabel yang tidak diinisilisasi

2.3 Tipe Numerik
Pada dasarnya J avaScript hanya mengenal dua macam tipe numerik, yaitu bilangan
bulat (integer) dan bilangan pecahan(real/float).
Untuk bilangan bulat, kita dapat merepresentasikan dengan basis desimal, oktal atau
heksadesimal.
Contoh :
MODUL
2
Hal.8
var A =100;
var B =0x2F;
untuk pendeklarasian tipe bilangan real, dapat menggunakan tanda titik atau notasi
ilmiah (notasi E).
Contoh :
var a =3.14533567;
var b =1.23456E+3;

2.4 Tipe String
Untuk mendeklarasikan tipe string dapat dilakukan dengan cara menuliskan string
diantara tanda petik tunggal () atau tanda petik ganda ()
Contoh :
var str =Contoh deklarasi string;
var str1 =cara ini juga bisa untuk menulis string;

2.5 Tipe Boolean
Tipe boolean hanya mempunyai nilai True atau False. Tipe ini biasanya digunakan
untuk mengecek suatu kondisi atau keadaan.
Contoh :
var X =(Y >90);
contoh diatas menunjukkan bahwa jika Y lebih besar dari 90 maka X akan bernilai
True.

2.6 Tipe Null
Tipe Null digunakan untuk merepresentasikan variabel yang tidak diberi nilai awal
(inisialisasi).

2.7 Operator
Operator pada J avaScript terbagi menjadi enam, yaitu :
Aritmatika
Pemberian nilai (Assign)
Pemanipulasian bit (bitwise)
Pembanding
Logika
String

a. Operator Aritmatika
Digunakan untuk operan beripe numerik. Ada dua macam operator aritmatik, yaitu
operator numerik tunggal dan operator aritmatik biner. Perbedaan kedua operator
terletak pada jumlah operan yang harus dioperasikan.

Operator Tunggal/Biner Keterangan
+ Biner Penjumlahan
- Biner Pengurangan
* Biner Perkalian
/ Biner Pembagian
% Biner Modulus
- Tunggal Negasi
++ Tunggal Penambahan dengan satu
Hal.9
-- Tunggal Pengurangan dengan satu

b. Operator Pemberian Nilai
Digunakan untuk memberikan nilai ke suatu operan atau mengubah nilai suatu
operan.
Operator keterangan Contoh Ekuivalen
= Sama dengan X=Y
+= Ditambah dengan X+=Y X=X+Y
-= Dikurangi dengan X-=Y X=X-Y
*= Dikali dengan X*=Y X=X*Y
/= Dibagi dengan X/=Y X=X/Y
%= Modulus dengan X%=Y X=X%Y
&= Bit AND dengan X&Y X=X&Y
|= Bit OR X|=Y X=X|Y

c. Operator Manipulasi Bit
Operasi ini berhubungan dengan pemanipulasian bit pada operan bertipe bilangan
bulat.
Operator Keterangan
& Bit AND
| Bit OR
^ Bit XOR
~ Bit NOT
<< Geser ke kiri
>> Geser ke Kanan
>>> Geser ke kanan dengan diisi nol
Contoh :
var A =12; // A =1100b
var B =10; // B =1010b
var C =A & B
maka akan dihasilkan bilangan seperti berikut :
1100b
1010b AND
1000b
var A =12;
var C =A<<2
var D =A >>1

maka variabel C akan bernilai 48(0011 0000b)
variabel D akan bernilai 6 (0110b)

d. Operator Pembanding
Digunakan untuk membandingkan dua buah operan. Operan yang dikenal operator ini
dapat bertipe string, numerik, maupun ekspresi lain.
Operator Keterangan
== Sama dengan
!= Tidak sama dengan
Hal.10
> Lebih besar
< Lebih kecil
>= Lebih besar atau sama dengan
<= Lebih kecil atau sama dengan

e. Operator Logika
Digunakan untuk mengoperasikan operan yang bertipe boolean.
Operator Keterangan
&& Operator logika AND
|| Operator Logika OR
! Operator logika NOT

Contoh :
var A = true;
var B =false;
var C =A && B; //menghasilkan false
var D =A || B ; // false
var E =!A; //false

f. Operator String
Selain operator pembanding, operator string pada J avaScript juga mengenal satu
operator lagi yang bernama PENGGABUNGAN. Operator ini digunakan untuk
menggabungkan beberapa string menjadi sebuah string yang lebih panjang.
Contoh :
nama =J ava +Script;
akan menghasilkan J avaScript pada variabel nama

Contoh Program JavaScript
<HTML>
<HEAD><TI TLE>Oper asi Ar i t mat i ka</ TI TLE></ HEAD>
<BODY>
<P><SCRI PT l anguage=" J avaScr i pt " >
<! - -
document . wr i t el n( " <H1>Oper asi Ar i t mat i k</ H1>" ) ;
var A = " 100" ;
var B = " 200" ;
var C = 300;
var D = 400;
var E = A + B;
document . wr i t el n( ' " 100" + " 200" = ' + E) ;
E = B + C;
document . wr i t el n( ' " 200" + 300 = ' + E) ;
E = C + D;
document . wr i t el n( ' 300 + 400 = ' + E) ;
/ / - - >
</ SCRI PT></ P>
</ BODY>
</ HTML>

Hal.11

2. 8 Memasukkan Data
Untuk memasukkan data dari keyboard dapat dilakukan dengan menggunakan
perintah input.

<HTML>
<HEAD><TI TLE>Memasukkan Bi l angan</ TI TLE></ HEAD>
<BODY>
<P><SCRI PT l anguage=" J avaScr i pt " >
<! - -
f unct i on j uml ah( )
{
var bi l 1 = par seFl oat ( document . f f or m. bi l angan1. val ue) ;
i f ( i sNaN ( bi l 1) )
bi l 1=0. 0;
var bi l 2 = par seFl oat ( document . f f or m. bi l angan2. val ue) ;
i f ( i sNaN ( bi l 2) )
bi l 2=0. 0;
var hasi l = bi l 1 + bi l 2;
al er t ( " Hasi l Penj uml ahan = " + hasi l ) ;
}
/ / - - ></ SCRI PT></ P>
<FORM NAME =" f f or m" >
<H1><BR>Memasukkan Dat a Lewat Keyboar d</ H1>
<PRE>
Bi l angan Per t ama : <i nput t ype=" t ext " si ze=" 11" name=" bi l angan1" >
Bi l angan Kedua : <i nput t ype=" t ext " si ze=" 11" name=" bi l angan2" >
</ PRE>
<P>
<I NPUT TYPE=" but t on" val ue=" J uml ahkan" oncl i ck=" j uml ah( ) " >
<I NPUT TYPE=" r eset " val ue=" Ul ang" >
</ FORM>
</ BODY>
</ HTML>

Hal.12

latihan :
Modifikasi program sebelumnya agar dapat melakukan operasi pengurangan,
perkalian dan pembagian !!

Hal.13

Objek J avaScript (1)

3.1 Objek Untuk memasukkan Data
Terdapat beberapa objek yang dapat digunakan untuk memeasukkan data. Objek-
objek tersebut biasanya terdapat dalam suatu form. Adapun objek-objek tersebut
meliputi Objek Text, Objek Radio, Objek Checkbox, Objek Textarea, dan Objek
Select.

3.2 Objek Text
Untuk menginputkan data kita dapat menggunakan komponen/objek text. Contoh
penggunaannya dapat kita lihat pada contoh berikut :

<ht ml >
<head><t i t l e>Lat i han Dengan Obj ek Text </ t i t l e></ head>
<body>
<scr i pt l anguange =" J avaScr i pt " >
<! - -
f unct i on t ekan( )
{
var namast r = ( document . f f or m. nama. val ue) ;
var al amat st r = ( document . f f or m. al amat . val ue) ;
document . f f or m. onama. val ue = namast r ;
document . f f or m. oal amat . val ue = al amat st r ;
}
/ / - - >
</ scr i pt >
<f or mname =" f f or m" >
<H1> Memasukkan Dat a Dengan Obj ek Teks</ H1><hr >
<PRE>
Nama Anda : <i nput t ype=" t ext " si ze=" 11" name=" nama" >
Al amat : <i nput t ype=" t ext " si ze=" 25" name=" al amat " >
</ PRE>
<BR>
<i nput t ype=" but t on" val ue=" ki r i m" oncl i ck=" t ekan( ) " >
<i nput t ype=" r eset " val ue=" ul ang" >
<H3>Out put </ H3>
<PRE>
J adi Nama Anda adal ah : <i nput t ype=" t ext " si ze=" 11" name=" onama" >
Al amat Anda di : <i nput t ype=" t ext " si ze=" 25" name=" oal amat " >
</ f or m>
</ body>
</ ht ml >
MODUL
3
Hal.14

3.3 Objek Radio
Objek radio adalah komponen yang digunakan untuk melakukan suatu pemilihan data.
Karena selalu berupa Array , untuk mengakses satu tombol radio digunakan
radio[indeks]. Disamping itu objek radio juga mempunyai nili True jika dipilih dan
False jika tidak. Untuk memilih suatu objek radio menggunakan properti Checked.

<ht ml >
<head><t i t l e>Lat i han Dengan Obj ek Radi o</ t i t l e></ head>
<body>
<! - -
f unct i on r adi o_box( f or m)
{
var ket = " " ;
i f ( f or m. wani t a. checked == t r ue)
{
ket = " Wani t a" ;
}
el se
{
ket = " Pr i a" ;
}
al er t ( ' Anda adal ah seor ang ' +ket ) ;
}
/ / - - >
</ scr i pt >
<f or m>
<H1> Memasukkan Dat a Dengan Obj ek Radi o</ H1><hr >
<p><i nput t ype=" r adi o" val ue=" wani t a" name=" wani t a" >Wani t a</ p>
<hr >
<p><i nput t ype=" but t on" val ue=" CONFI RM" oncl i ck=" r adi o_box( t hi s. f or m) " >
<i nput t ype=" r eset " val ue=" RESET" ></ p>
</ f or m>
</ body>
</ ht ml
Hal.15

3.4 Objek Checkbox
Objek checkbox menyimpan informasi tentang elemen form yang berupa kotak cek.
Penggunaannya hampir sama seperti objek radio.

<ht ml >
<head><t i t l e>Lat i han Dengan Obj ek Checkbox</ t i t l e></ head>
<body>
<! - -
f unct i on r adi o_box( f or m)
{
var ket = " " ;
var ket 1 =" " ;
i f ( f or m. bol a. checked == t r ue)
{
ket = " Nont on Bol a" ;
}

i f ( f or m. t v. checked == t r ue)
{
ket 1 = " Nont on Tv" ;
}
al er t ( ' Hobby anda ' +ket +' ' +ket 1) ;
}
/ / - - >
</ scr i pt >
<f or m>
<H1> Memasukkan Dat a Dengan Obj ek Checkbox</ H1><hr >
<p>Hobby anda :
<i nput t ype=" checkbox" val ue=" ON" name=" bol a" >Nont on Sepak Bol a
<i nput t ype=" checkbox" val ue=" ON" name=" t v" >Nont on t el evi si </ p>
<hr >
<p><i nput t ype=" but t on" val ue=" CONFI RM"
oncl i ck=" r adi o_box( t hi s. f or m) " >
<i nput t ype=" r eset " val ue=" RESET" ></ p>
</ f or m>
</ body>
</ ht ml >

Hal.16

3.5 Objek TextArea
Objek textarea menyimpan informasi tentang elemen form yang berupa kotak teks
dengan banyak baris.

<ht ml >
<head><t i t l e>Lat i han Dengan Obj ek Text Ar ea</ t i t l e></ head>
<body>
<! - -
{
var ket st r = ( document . f f or m. Ket . val ue) ;
document . f f or m. Oket . val ue = ket st r ;
}
/ / - - >
</ scr i pt >
<H1> Memasukkan Dat a Dengan Obj ek Text Ar ea</ H1><hr >
<h3>Ket er angan : <h3><br >
<t ext ar ea name=" Ket " r ows=" 3" col s=" 30" ></ t ext ar ea>
<BR><BR>
<i nput t ype=" but t on" val ue=" ki r i m" oncl i ck=" t ekan( ) " >
<H3>Out put Ket er angan : </ H3>
<t ext ar ea name=" Oket " r ows=" 3" col s=" 30" ></ t ext ar ea>
</ f or m>
</ body>
</ ht ml >

Hal.17
3.6 Objek Select
Objek Select menyimpan informasi tentang elemen form yang berupa kotak daftar.
Objek select berguna apabila di dalam form terdapat banyak pilihan yang telas
mempunyai nilai tertentu.
<ht ml >
<head><t i t l e>Lat i han Dengan Obj ek Sel ect </ t i t l e></ head>
<body>
<! - -
{
var j ur usanst r = ( document . f f or m. J ur usan. val ue) ;
document . f f or m. Oj ur usan. val ue = j ur usanst r ;
}
/ / - - >
</ scr i pt >
<H1> Penggunaan Obj ek Sel ect </ H1><hr >
<h3>Masukan : <h3>
J ur usan Di UNI KOM : <sel ect name=" J ur usan" Si ze=" 1" >
<opt i on val ue =" Tekni k I nf or mat i ka" > Tekni k
I nf or mat i ka </ opt i on>
<opt i on val ue =" Manaj emen I nf or mat i ka" > Manaj emen
I nf or mat i ka </ opt i on>
<opt i on val ue =" Tekni k Komput er " > Tekni k Komput er
</ opt i on>
<opt i on val ue =" Tekni k I ndust r i " > Tekni k I ndust r i
</ opt i on>
<opt i on val ue =" Tekni k El ekt r o" > Tekni k El ekt r o
</ opt i on>
<opt i on val ue =" Tekni k Si pi l " > Tekni k Si pi l </ opt i on>
<opt i on val ue =" Tekni k Ar si t ekt ur " > Tekni k Ar si t ekt ur
</ opt i on>
<opt i on val ue =" Tekni k Per encanaan Wi l . Kot a " >
Per encanaan Wi l . Kot a </ opt i on>
</ sel ect >
<p><i nput t ype=" but t on" val ue=" ki r i m" oncl i ck=" t ekan( ) " >
<H3>Out put j ur usan : </ H3>
<i nput t ype=" t ext " name=" Oj ur usan" si ze=" 30" >
</ f or m>
</ body>
</ ht ml >

Hal.18
Latihan :
Buatlah halaman seperti berikut, yang mencakup semua materi yang terdapat pada
modul ini.
1. Input berupa : NIM, NAMA, J ENIS KELAMIN, AGAMA, STATUS,
J URUSAN, KOMENTAR. (SESUAIKAN OBJ EK YANG DIPAKAI)
Gambar 1
2. Proses terjadi ditombol KIRIM
3. Output : lihat pada gambar 2
4. Isi dengan NIM, NAMA ANDA
5. Tugas individu, dikumpulkan minggu ke 5, dalam bentuk print out KODE
HTMLnya serta Tampilannya

gambar 1

gambar 2

Hal.19

Percabangan

4.1 Percabangan
Untuk membuat suatu halaman yang dinamis dan interaktif, perancang halaman Web
membutuhkan perintah-perintah yang dapat mengatur aliran dari informasi.
Berdasarkan hasil komputasi yang telah dilakukan, J avaScript akan membuat
keputusan jalur mana yang akan dieksekusi.
Pada dasarnya dalam J avaScript terdapat dua macam pernyataan percabangan yaitu
if..else dan switch

4.2 If..Else
Pernyataan ini digunakan untuk menguji sebuah kondisi dan kemudian mengeksekusi
pernyataan tertentu bila kondisi tersebut terpenuhi, dan mengeksekusi pernyataan lain
bila kondisi tersebut tidak terpenuhi.
i f ( kondi si )
{
/ / per nyat aan1 di eksekusi
/ / bi l a kondi si t er penuhi
}
el se
{
/ / bi l a kodi si t i dak t er penuhi
}

kondisi adalah ekspresi J avaScript yang mana hasil evaluasinya memiliki nilai
Boolean true atau false
Untuk kasus yang melibatkan lebih banyak kondisi, maka kita dapat meletakkan
pernyataan if lain setelah else
i f ( kondi si 1)
{
/ / bi l a kondi si 1 t er penuhi
}
el se i f ( kondi si 2)
{
/ / bi l a kodi si 1 t i dak t er penuhi
}
el se
{
/ / bi l a kodi si 2 t i dak t er penuhi
}

MODUL
4
Hal.20
<HTML>
<HEAD><TI TLE>Per cabangan I F- ELSE</ TI TLE></ HEAD>
<BODY>
<! - -
f unct i on t anyabi l angan( )
{
var bi l = par seFl oat ( document . f f or m. bi l angan. val ue) ;
var j eni s = " " ;
i f ( i sNaN( bi l ) )
{
al er t ( " Anda Bel ummemasukkan Bi l angan" ) ;
}
el se
{
i f ( bi l > 0)
{
j eni s = " Adal ah bi l angan Posi t i f " ;
}
el se i f ( bi l < 0)
{
j eni s = " Adal ah bi l angan Negat i f " ;
}
el se
{
j eni s = " Adal ah Nol " ;
}
al er t ( bi l +" " +j eni s) ;
}
}
/ / - - ></ SCRI PT>
<H2><BR>Bi l angan Negat i f , Nol , At au Posi t i f ???</ H2>
Masukkan Bi l angan : <i nput t ype=" t ext " si ze=" 11" name=" bi l angan" >
<P>
<I NPUT TYPE=" but t on" val ue=" Tanya" oncl i ck=" t anyabi l angan( ) " >
<I NPUT TYPE=" r eset " val ue=" Ul ang" > </ p>
</ FORM>
</ BODY>
</ HTML>

Hal.21

4.3 Contoh Kasus
Perusahaan Travel Bintang Abadi mempunyai armada dengan tujuan :
Tujuan Harga Tiket
J akarta 100000
Cirebon 150000
Tasikmalaya 200000

Apabila seorang pemesan sudah menjadi anggota/member Travel Bintang Abadi
maka akan mendapatkan diskon 10 %.
Subtotal : Harga tiket X J umlah tiket
Diskon : 0.10 X Subtotal
Total : Subtotal - Diskon
Buat Program dengan menggunakan J avascript untuk menyelesaikan masalah
tersebut. Dengan ketentuan sebagai berikut :

Input : Nama pemesan
Tujuan
J umlah Tiket
Member
Output : Harga Tiket
Sub Total
Diskon
Total Bayar

<HTML>
<HEAD><TI TLE>Per cabangan I F- ELSE 2</ TI TLE></ HEAD>
<BODY>
<! - -
f unct i on hi t ungt ot al ( )
{
var nama = ( document . f f or m. i nama. val ue) ;
var t uj uan = ( document . f f or m. i t uj uan. val ue) ;
var j uml aht i ket = par seFl oat ( document . f f or m. i j uml ah. val ue) ;
var ht = 0. 0;
var sub = 0. 0;
var di skon =0. 0;
var t ot al =0. 0;

i f ( t uj uan==" J akar t a" )
{
ht =100000;
}
el se i f ( t uj uan==" Ci r ebon" )
Hal.22
{
ht =150000;
}
el se
{
ht =200000;
}
sub = j uml aht i ket *ht ;

i f ( document . f f or m. i member . checked==t r ue)
{
di skon =0. 10*sub;
}
el se
{
di skon=0. 0;
}

t ot al = sub- di skon;
document . f f or m. ot i ket . val ue=eval ( ht ) ;
document . f f or m. osub. val ue=eval ( sub) ;
document . f f or m. odi skon. val ue=eval ( di skon) ;
document . f f or m. ot ot al . val ue=eval ( t ot al ) ;
/ / gunakan unt uk mengecek ! ! ! al er t ( t ot al ) ;
}
/ / - - ></ SCRI PT>
<t abl e bor der =" 1" al i gn=" cent er " wi dt h=" 70%" >
<t r >
<t d wi dt h=" 100%" col span=" 2" ><H2 ALI GN=" cent er " >Tr avel Bi nt ang
Abadi </ H2></ t d>
</ t r >
<t r >
<t d wi dt h=" 50%" ><PRE>
Nama : <i nput t ype=" t ext " si ze=" 20" name=" i nama" >
Tuj uan : <sel ect name=" i t uj uan" si ze=1>
<opt i on val ue=" J akar t a" >J akar t a</ opt i on>
<opt i on val ue=" Ci r ebon" >Ci r ebon</ opt i on>
<opt i on val ue=" Tasi kmal aya" >Tasi kmal aya</ opt i on>
</ sel ect >
J uml ah Ti ket : <i nput t ype=" t ext " si ze=" 11" name=" i j uml ah" >
Member : <i nput t ype=" checkbox" name=" i member " >Ya</ t d></ pr e>
<t d wi dt h=" 50%" ><pr e>
Har ga Ti ket : <i nput t ype=" t ext " si ze=" 10" name=" ot i ket " >
Sub Tot al : <i nput t ype=" t ext " si ze=" 10" name=" osub" >
Di skon : <i nput t ype=" t ext " si ze=" 10" name=" odi skon" >
Tot al Bayar : <i nput t ype=" t ext " si ze=" 10" name=" ot ot al " ></ t d><pr e>
</ t r >
<t r >
<t d wi dt h=" 100%" col span=" 2" >
<cent er >
<I NPUT TYPE=" but t on" val ue=" Hi t ung" oncl i ck=" hi t ungt ot al ( ) " >
<I NPUT TYPE=" r eset " val ue=" Ul ang" >
</ cent er ></ t d>
</ t r >
</ t abl e>
</ FORM>
</ BODY>
</ HTML>

Hal.23

Hal.24
4.4 Percabangan Majemuk
Percabangan majemuk adalah suatu percabangan yang dapat melibatkan lebih dari 1
kondisi di dalam percabangannya. Biasanya percabangan sepert ini menggunakan
operator tambahan seperti AND, OR dan sebagainya.

<HTML>
<HEAD><TI TLE>Per cabangan I F- ELSE 3</ TI TLE></ HEAD>
<BODY>
<! - -
f unct i on hi t ungi p( )
{
var qui s = par seFl oat ( document . f f or m. i qui s. val ue) ;
var t ugas = par seFl oat ( document . f f or m. i t ugas. val ue) ;
var ut s = par seFl oat ( document . f f or m. i ut s. val ue) ;
var uas = par seFl oat ( document . f f or m. i uas. val ue) ;
var i p =" " ;
var ket =" " ;

var na = ( 0. 10*qui s) +( 0. 20*t ugas) +( 0. 30*ut s) +( 0. 40*uas) ;

i f ( ( na > 80) && ( na <=100) )
{
i p =" A" ;
ket =" Lul us dengan Sangat Bai k" ;
}
el se i f ( ( na > 68) && ( na <=80) )
{
i p =" B" ;
ket =" Lul us dengan Bai k" ;
}
el se i f ( ( na > 55) && ( na <=68) )
{
i p =" C" ;
ket =" Lul us dengan Cukup" ;
}
el se i f ( ( na > 38) && ( na <=55) )
{
i p =" D" ;
ket =" Lul us dengan Kur ang" ;
}
el se
{
i p =" E" ;
ket =" Ti dak Lul us" ;
}

document . f f or m. oi p. val ue=i p;
document . f f or m. oket . val ue=ket ;
/ / gunakan unt uk mengecek al er t ( i p+" " +na) ;
}
/ / - - ></ SCRI PT>
<t abl e bor der =" 1" wi dt h=" 100%" ALI GN=" cent er " >
<t r >
<t d wi dt h=" 100%" col span=" 4" ><H2 ALI GN=" cent er " >Menghi t ung I ndeks
Pr est asi </ H2></ t d>
</ t r >
Hal.25
<t r >
<t d wi dt h=" 25%" >Qui s ( 10%) : <i nput t ype=" t ext " si ze=" 10"
name=" i qui s" > </ t d>
<t d wi dt h=" 25%" >Tugas ( 20%) : <i nput t ype=" t ext " si ze=" 10"
name=" i t ugas" > </ t d>
<t d wi dt h=" 25%" >UTS ( 30%) : <i nput t ype=" t ext " si ze=" 10"
name=" i ut s" > </ t d>
<t d wi dt h=" 25%" >UAS ( 40%) : <i nput t ype=" t ext " si ze=" 10"
name=" i uas" > </ t d>
</ t r >
<t r >
<t d wi dt h=" 100%" col span=" 4" ><P Al i gn=" cent er " >
<I NPUT TYPE=" but t on" val ue=" Hi t ung" oncl i ck=" hi t ungi p( ) " >
<I NPUT TYPE=" r eset " val ue=" Ul ang" > </ p></ t d>
</ t r >
<t r >
<t d wi dt h=" 100%" col span=" 4" al i gn=" cent er " >
I ndeks Pr est asi : <i nput t ype=" t ext " si ze=" 5" name=" oi p" >
Ket er angan : <i nput t ype=" t ext " si ze=" 25" name=" oket " ></ t d>
</ t r >
</ t abl e>
</ FORM>
</ BODY>
</ HTML>

Hal.26

4.5 Switch
Selain menggunakan if..else, percabangan juga dapat ditangani dengan perintah
switch. Dengn kata lain pernyataan switch digunakan untuk menyederhanakan
pernyataan if..else yang terlalu banyak.

<HTML>
<HEAD><TI TLE>Per cabangan Swi t ch</ TI TLE></ HEAD>
<BODY>
<! - -
f unct i on t anyabul an( )
{
var bul an = par seFl oat ( document . f f or m. i bul an. val ue) ;
var namabul an=" " ;
swi t ch ( bul an)
{
case 1 : namabul an=" Bul an ke 1 adal ah = J anuar i " ; br eak;
case 2 : namabul an=" Bul an ke 2 adal ah = Febr uar i " ; br eak;
case 3 : namabul an=" Bul an ke 3 adal ah = Mar et " ; br eak;
case 4 : namabul an=" Bul an ke 4 adal ah = Apr i l " ; br eak;
case 5 : namabul an=" Bul an ke 5 adal ah = Mei " ; br eak;
case 6 : namabul an=" Bul an ke 6 adal ah = J uni " ; br eak;
case 7 : namabul an=" Bul an ke 7 adal ah = J ul i " ; br eak;
case 8 : namabul an=" Bul an ke 8 adal ah = Agust us" ; br eak;
case 9 : namabul an=" Bul an ke 9 adal ah = Sept ember " ; br eak;
case 10 : namabul an=" Bul an ke 10 adal ah = Okt ober " ; br eak;
case 11 : namabul an=" Bul an ke 11 adal ah = November " ; br eak;
case 12 : namabul an=" Bul an ke 12 adal ah = Desember " ; br eak;
def aul t : namabul an=" Anda sal ah mengi si " ;
}
al er t ( namabul an) ;
}
/ / - - ></ SCRI PT>
<H2>Penggunaan Per cabangan Swi t ch</ H2><HR>
<PRE>
Masukkan Nomor Bul an [ 1- 12] : <i nput t ype=" t ext " si ze=" 2"
name=" i bul an" >
<I NPUT TYPE=" but t on" val ue=" Hi t ung" oncl i ck=" t anyabul an( ) " ><I NPUT
TYPE=" r eset " val ue=" Ul ang" >
</ PRE>
</ FORM>
</ BODY>
</ HTML>

Hal.27

Hal.28
Latihan :
Buatlah halaman seperti berikut, yang mencakup semua materi yang terdapat pada
modul ini.
Perusahaan Travel Bintang Abadi memiliki armada dengan tujuan J akarta, Solo dan
Surabaya. Setiap tujuan memiliki kelas Eksekutif, Bisnis dan Ekonomi.
Eksekutif Bisnis Ekonomi
Jakarta 70000 40000 10000
Solo 80000 50000 20000
Surabaya 90000 60000 30000
Diskon 10% diberikan apabila pemesan tiket merupakan anggota Travel Bintang
Abadi.
Input : Nama Pemesan, Tujuan, Kelas, Banyak Tiket dan Status Member/Bukan
Output : Harga Tiket, Subtotal, Diskon dan Total Bayar
Tampilan :

Hal.29

Perulangan

5.1 Perulangan
Untuk mengulang kejadian beberapa kali maka kita membutuhkan proses perulangan.
Pada J avaScript dikenal beberapa metode/cara perulangan.

5.2 Perulangan For
Digunakan untuk mengeksekusi pernyataan-pernyataan beberapa kali. Perulangan For
paling sering dipakai, jika anda sudah tahu akhir dari perulangan tersebut. . Perintah
for mengulang suatu loop sampai kondisi menghasilkan evaluasi true atau loop keluar
dengan perintah break .
Contoh :

f or ( ni l ai awal ; kondi si ; penambahan)
{
ul ang per nyat aan i ni ;
}

Contoh dalam program :

For ( x=1; x<=10; x++)
{
document . wr i t el n( Bel aj ar J avaScr i pt Yuuuuu. . ) ;
}

<HTML>
<HEAD><TI TLE>Lat i han Per ul angan I </ TI TLE></ HEAD>
<SCRI PT LANGUAGE=" J avaScr i pt " >
<! - - menyembunyi kan scr i pt dan br owser non- J S
document . wr i t el n( " <H2>Lat i han Per ul angan For </ H2>" ) ;
document . wr i t el n( " - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - " ) ;
f or ( i =1; i <=10; i ++)
{
sq=i *i ;
document . wr i t e( " Angka: " + i + " - - - - - > Kuadr at : " + sq + " <BR>" ) ;
document . wr i t el n( " </ PRE>" ) ;
}
/ / akhi r dar i penyembunyi an - - >
</ SCRI PT>
</ HEAD>
<BODY>
</ BODY>
</ HTML>

MODUL
5
Hal.30

5.3 Perulangan While
Perulangan lain yang dapat digunakan adalah dengan menggunakan perintah While.
Perintah while digunakan untuk perulangan yang tidak diketahui berapa kali proses
perulangannya. Perintah while terus mengulangi loop selama kondisi memiliki nilai
true. Syntax untuk perintah while adalah sebagai berikut :
whi l e ( kondi si )
{
ul ang per nyat aan i ni ;
}

<HTML>
<HEAD><TI TLE>Lat i han Per ul angan I I </ TI TLE></ HEAD>
var der et = pr ompt ( ' Masukkan J uml ah Der et : ' , ' ' ) ;
document . wr i t el n( " <H2>Lat i han Per ul angan Whi l e</ H2>" ) ;
document . wr i t el n( " <BR>" ) ;
var j ml = 0. 0;
var angka = 1;
whi l e ( angka <= der et )
{
j ml = j ml +angka;
angka++
}
document . wr i t el n( " J uml ah Der et dar i 1 sampai " +der et +" adal ah =
+j ml ) ;
Hal.31
</ SCRI PT>
</ HEAD>
<BODY>
</ BODY>
</ HTML>

5.4 Perulangan Do While
Perulangan ini hampir sama seperti while, digunakan apabila kita belum tahu berapa
kali perulangan harus dilakukan. Bedanya pernyataan do..while pengujiannya
dilakukan di akhir pernyataan.

Do
{
}
whi l e ( kondi si ) ;

<HTML>
<HEAD><TI TLE>Lat i han Per ul angan I I I ( Do- Whi l e) </ TI TLE></ HEAD>
<BODY>
Hal.32
f unct i on pass( )
{
var coba = 1;
do
{
p = pr ompt ( " Tul i skan passwor d dengan benar " , " " ) ;
i f ( p==" UNI KOM" )
{
al er t ( " Sel amat Dat ang Fr i ends" ) ;
wi ndow. open( " wel come. ht ml " ) ;
br eak;
}
el se
{
al er t ( " Passwor d Sal ah ! ! ! Ul angi l agi . " ) ;
}
i f ( coba==3)
{
al er t ( " maaf , kesempat an anda hanya 3 kal i " ) ;
hi st or y. go( - 1) ;
}
coba=coba+1;
}
whi l e ( coba<=3)
}
</ SCRI PT>
<FORM METHOD=" post " >
<I NPUT TYPE=" but t on" VALUE=" Passwor d" ONCLI CK=" pass( ) " >
</ FORM>
</ BODY>
</ HTML>

Adapun hasil yang diperoleh adalah sebagai berikut :
1. Tampilan awal

Hal.33
2. Prompt password

3. Alert apabila terjadi kesalahan password

4. Alert apabila telah terjadi 3 kali kesalahan

5. Apabila password benar

6. Halaman utama

Hal.34
Latihan :
1. Buat program untuk menentukan faktorial dan jumlah deret sampai ke N.

2. Buat program untuk menghitung saldo akhir dari suatu tabungan dengan bunga dan
jangka waktu tertentu :
Input :
Saldo : 100000
Bunga : 10
Waktu : 3
Ketika user menekan tombol Hitung maka akan muncul hasil seperti berikut :
Saldo Bulan 1 =Rp. 110000

Hal.35


6.1 Objek Array (Array Object)
Array adalah suatu variable yang dapat memuat beberapa nilai secara berurutan atau
seri. Artinya variable yang dideklarasikan sebagai array isinya tidak satu. Berikut
adalah pendeklarasian untuk array.

nama =new Array(3)

Pernyataan diatas menunjukan bahwa variabel nama memiliki 3 elemen. Ketiga
elemen tersebut akan memiliki nilai masing-masing 0, 1, 2. Nilai pertama =0. Untuk
mengisikan ketiga elemen tersebut kita dapat melakukan dengan cara :

nama[0] =Dian
nama[1] =Andri
nama[2]=Irawan

Selain cara diatas kita juga bisa mendeklarasikan array sekaligus dengan mengisikan
elemen-elemennya.

nama =new Array(Dian,Andri,Irawan)

Maka hasilnya seperti dibawah ini :
nama yang ke 1 [0] isinya adalah Dian
nama yang ke 2 [1] isinya adalah Andri
nama yang ke 3 [2] isinya adalah Irawan
<HTML>
<HEAD>
<TI TLE> LAt i han Obj ek Ar r ay</ TI TLE>
<BODY>
<h3>Lat i han Obj ek Ar r ay I </ H3>
Nama pada dat a ke 3 adal ah :
<! - - Memyembunyi kan kode dar i br owser non- j s
f unct i on cobaar r ay( )
{
nama = new Ar r ay( " Di an" , " Andr i " , " I r awan" ) ;
document . wr i t e( nama[ 2] ) ;
}
</ SCRI PT>
cobaar r ay( ) ;
</ SCRI PT>
</ BODY>
</ HTML>
MODUL
6
Hal.36
<HTML>
<HEAD>
<TI TLE> LAt i han Obj ek Ar r ay</ TI TLE>
<BODY>
<h3>Lat i han Obj ek Ar r ay I I </ H3>
Pemanggi l an dat a Ar r ay dengan Per i nt ah Per ul angan For <BR>
var ni l ai = new Ar r ay( 3) ;
ni l ai [ 0] =" A" ;
ni l ai [ 1] =" B" ;
ni l ai [ 2] =" C" ;
f or ( a=0; a<3; ++a)
{
document . wr i t el n( " <B>Ni l ai ke " + [ a+1] +" : " +ni l ai [ a] +" <BR>" ) ;
}
</ SCRI PT>
</ SCRI PT>
</ BODY>
</ HTML>

6.2 Objek Tanggal ( Date Object)
Objek ini digunakan untuk memanipulasi tanggal dan waktu pada J avaScript. Untuk
pendeklarasiannya adalah sebagi berikut :

lama =new Date()

pernyataan diatas menyatakan bahwa variabel lama mengandung unsur tanggal dan
waktu.
Metode-metode untuk Objek Date
Metode Kegunaan
getDate() Menghasilkan tanggal (integer) mulai 1 31.
getDay() Menghasilkan hari(integer) mulai 0-6.
Minggu =0, Senin =1,...............
getMonth() Menghasilkan bulan(integer) mulai 0-11.
J anuari=0, Feb=1,......
getFullYear() Menampilkan tahun menjadi 4 digit
getHours() Menghasilkan jam mulai 0-23
getMinutes() Menghasilkan menit mulai 0-59
getSeconds() Menghasilkan detik mulai 0-59

Hal.37
<HTML>
<HEAD>
<TI TLE> LAt i han Obj ek Dat e</ TI TLE>
<BODY bgcol or =" l i ght bl ue" >
<h3 al i gn=" cent er " >Lat i han Obj ek Dat e/ Tanggal </ H3>
var har i = new Ar r ay( " Seni n" , " Sel asa" , " Rabu" , " Kami s" ,
" J umat " , " Sabt u" , " Mi nggu" ) ;
var bul an = new Ar r ay( " J anuar i " , " Febr uar i " , " Mar et " , " Apr i l " ,
" Mei " , " J uni " , " J ul i " , " Agust us" ,
" Sept ember " , " Okt ober " , " November " , " Desember " ) ;
var t = new Dat e( ) ;
var har i _i ni =har i [ t . get Day( ) - 1] ;
var t anggal =t . get Dat e( ) ;
var bul an_i ni =bul an[ t . get Mont h( ) ] ;
var t ahun=t . get Year ( ) ;
var j am=t . get Hour s( ) ;
var meni t =t . get Mi nut es( ) ;
var det i k =t . get Seconds( ) ;
document . wr i t e( " <f ont si ze=5 f ace=ar i al >" ) ;
document . wr i t e( " <b><cent er >Sekar ang adal ah har i : " +har i _i ni +" , t anggal
: " + t anggal +" " + bul an_i ni +" " +t ahun) ;
document . wr i t e( " <hr wi dt h=700>" ) ;
document . wr i t e( " </ f ont >" ) ;
document . wr i t e( " <f ont si ze=3 f ace=ar i al >" ) ;
document . wr i t e( " <b><cent er >J amsekar ang = " + j am+" : " +
meni t +" : " +det i k) ;
document . wr i t e( " </ f ont >" ) ;
</ SCRI PT>
</ SCRI PT>
</ BODY>
</ HTML>

6.3 Objek Math
Math digunakan untuk menangani perhitungan matematis yang rumit. Bentuk
penulisan :

Math.metode(nilai)

Hal.38
Metode Untuk Objek Math
Metode Keterangan
abs(a) Nilai absolut dari a
acos(a) Nilai arc-kosinus dari a
asin(a) Nilai arc-sinus dari a
atan(a) Nilai arc-tan dari a
ceil(a) Membulatkan nilai ke integer diatasnya
cos(a) Nilai kosinus dari a
exp(a) Nilai E pangkat a
log(a) Nilai logaritma dari a
max(a,d) Nilai terbesar dari a dan d
min(a,d) Nilai terkecil dari a dan d
pow(a,d) Nilai dari a pangkat d
random(a) Nilai acak antara 0 dan 1
round(a) Membulatkan nilai a ke integer terdekat
sqrt(a) Nilai akar dari kuadrat a
sin(a) Nilai sinus dari a
tan(a) Nilai tangen dari a

<HTML>
<HEAD>
<TI TLE> LAt i han Obj ek Mat h></ TI TLE>
<BODY>
<h3>Lat i han Dengan Obj ek Mat h</ h3>
<! - - Begi n
var a=10;
var b=5;
besar =Mat h. max( a, b) ;
document . wr i t e( " ant ar a " + a + " dan " + b +" l ebi h besar
" +besar +" <br >" ) ;
pangkat =Mat h. pow( b, a) ;
document . wr i t e( b+ " pangkat " + a +" adal ah " +pangkat +" <br >" ) ;
var r an;
r an = Mat h. r ound( Mat h. r andom( ) *50000) ;
document . wr i t e( " Anda adal ah pengunj ung yang ke " + r an + " . <br >" ) ;
var akar ;
akar =Mat h. sqr t ( r an) ;
document . wr i t e ( " Akar dar i " + r an + " adal ah " +akar ) ;
/ / End - - >
</ SCRI PT>
</ BODY>
</ HTML>

Hal.39

Latihan :
1. Buatlah program dengan javascript untuk memunculkan alert/marquee
Selamat Pagi, Selamat Siang dan Selamat Malam. Sesuai dengan waktu yang
tertera di komputer !!!!!

2. Buat program untuk menghitung/mencari akar-akar dari suatu persamaan
F(x) =ax
2
+bx+c
Rumus mencari akar x1 dan x2 adalah :

Hal.40


7.1 Objek String
String adalah suatu objek yang merupakan kumpulan dari elemen karakter-karakter.
Dalam J avascript string atau karakter harus diapit dengan tanda petik ganda() atau
tanda petik tunggal().
Contoh pendeklarasian Objek String :

Nama =Shafana Vevica
Panjang =Nama,length; // Panjang akan berisi 14

Length adalah property yang sering digunakan dalam objek string yang digunakan
Untuk mengetahui banyaknya karakter dalam suatu string.
Objek String juga memiliki method yang dapat digunakan untuk memanipulasi string
tersebut. Adapun Method yang dapat digunakan meliputi :
Method Fungsi
big() Tercetak lebih besar
blink() Efek berkedip aktif pada browerNetscape
bold() Tercetak tebal
charAt(n) Mengambil karakter ke n dari string. Index string
dimulai dari 0
fixed() Tercetak fixed-pitch
fontcolor(warna) Tercetak sesuai warna yang didefinisikan
indexOf(char) Mengambil nilai indeks dari suatu karakter
italic() Tercetak miring
link(url) Menjadikan string hyperlink
small() Tercetak lebih kecil
strike() Tercetak dengan coretan
sub() Tercetak subscript
substring(a,b) Mengambil karakter dari posisi a sampai b-1
sup() Tercetak superscript
toLowerCase() Tercetak huruf kecil
toUpperCase() Tercetak huruf besar
split() Menjadikan string diuraikan/dipisahkan
berdasarkan tanda (). Hasil dari split akan
dihasilkan sebuah array dengan indeks 0 untuk
string ke 1 dan seterusnya.

<HTML>
<BODY BGCOLOR=" l i ght bl ue" >
<H3>Lat i han Obj ek St r i ng</ H3>
<SCRI PT LANGUAGE=" J avascr i pt " >
nama =" Shaf ana Vevi ca" ;
MODUL
7
Hal.41
panj ang=nama. l engt h;
n=nama. subst r i ng( 1, 4) ;
besar =nama. t oUpper Case( )
namakul i nk=nama. l i nk( ' shaf a. ht ml ' ) ;
document . wr i t el n( ' Namaku adal ah = ' + nama +' <BR>' ) ;
document . wr i t el n( ' Panj ang namaku adal ah ' + panj ang + ' kar akt er
<BR>' ) ;
document . wr i t el n( ' met hod BI G = ' + nama. bi g( ) +' <BR>' ) ;
document . wr i t el n( ' met hod SMALL = ' + nama. smal l ( ) +' <BR>' ) ;
document . wr i t el n( ' met hod SUB = ' + nama. sub( ) +' <BR>' ) ;
document . wr i t el n( ' met hod SUP = ' + nama. sup( ) +' <BR>' ) ;
document . wr i t el n( ' met hod BOLD = ' + nama. bol d( ) +' <BR>' ) ;
document . wr i t el n( ' met hod I TALI C = ' + nama. i t al i cs( ) +' <BR>' ) ;
document . wr i t el n( ' met hod FONTCOLOR = ' + nama. f ont col or ( ' r ed' )
+' <BR>' ) ;
document . wr i t el n( ' met hod LOWERCASE = ' +nama. t oLower Case( ) +' <BR>' ) ;
document . wr i t el n( ' met hod UPPERCASE = ' + besar +' <BR>' ) ;
document . wr i t el n( ' met hod SUBSTRI NG = ' + n +' <BR>' ) ;
document . wr i t el n( ' met hod STRI KE = ' + nama. st r i ke( ) +' <BR>' ) ;
document . wr i t el n( ' met hod Char AT = ' + nama. char At ( 3) +' <BR>' ) ;
document . wr i t el n( ' met hod Li nk = ' + namakul i nk +' <BR>' ) ;
document . wr i t el n( ' I ndex Hur uf c = ' + nama. i ndexOf ( " c" ) +' <BR>' ) ;
awal =nama. i ndexOf ( ' V' ) ;
akhi r =nama. l engt h;
document . wr i t el n( ' Kat a Yang Ter si sa = ' + nama. subst r i ng( awal , akhi r )
+' <BR>' ) ;
</ SCRI PT>
</ BODY>
</ HTML>

7.2 Objek Document
Hal.42
Objek ini digunakan untuk mengakses informasi mengenai dokumen HTML, tampilan
output dan memanipulasinya.
Property dari objek document meliputi :
Property Fungsi
bgColor Memberikan warna latar belakang
fgColor Memberikan warna foreground atau warna huruf
link[] Mengakses objek anchor/link(dapat digunakan
nama objek anchor/link)
linkColor=warna Memberikan warna link
alinkColor=warna Memberikan warna pada active link
vlinkColor=warna Memberikan warna pada visited link
title=judul window Memberikan judul/title window
image[] Mengakses objek image(dapat digunakan nama
objek anchor/link)
forms[] Mengakses objek form(dapat digunakan nama
objek form)
Method dari objek document meliputi :
Method Fungsi
open() Menciptakan/membuka document HTML
close() Mengakhiri document HTML
write(output) Memberikan output ke browser
writeln(output) Memberikan output ke browser dengan
menyertakan perpindahan baris

Khusus untuk output ke browser ada beberapa hal yang perlu diperhatikan :
Diisi dengan string() atau ()
Dapat diberikan tag HTML
Dapat digunakan untuk menampilkan isi dari variable
Terdapat karakter spesial :
\b =untuk backspace
\f =untuk form feed
\n =untuk baris baru
\r =untuk carriage return
\t =untuk tab

<HTML>
<BODY>
<H3>Lat i han Obj ek Document </ H3><hr >
Dengan per i nt ah i ni maka t eks dal amdokumen i ni akan ber war na
put i h<BR>
nama=" i r awan" ;
document . bgCol or =" bl ue" ;
document . f gCol or =" whi t e" ;
document . t i t l e=" Bel aj ar obj ek Document " ;
document . l i nkCol or =" r ed" ;
document . vl i nkCol or =" gr een" ;
document . al i nkCol or =" whi t e" ;
namakul i nk=nama. l i nk( ' i r . ht ml ' ) ;
document . wr i t el n( ' War na Li nk = ' + namakul i nk +' <BR>' ) ;
</ SCRI PT>
Hal.43
</ BODY>
</ HTML>

7.3 Objek Window
Objek window merupakan objek tertinggi dalam objek J avascript. Objek ini
digunakan untuk memanipulasi tampilan jendela dari document HTML.

Property pada Objek window
Property Fungsi
length Mengetahui jumlah frame pada window
location.href Mengakses objek location untuk melakukan
redirect atau berpindah ke alamat tertentu.
Status=nilai_status Memberikan nilai status window

Metode-metode untuk Objek window
Method Fungsi
alert(pesan) Memunculkan messagebox sebuah pesan
kesalahan
confirm(pesan) Memunculkan pesan konfirmasi. Method
ini akan menghasilkan dua nilai kembalian
yaitu true untuk Ok dan false untuk Cancel
prompt(pesan,nilai default) Memunculkan pesan yang menunggu
sebuah input
close() Menutup jendela aktif
open(url|file,windowname
,feature)
Membuka jendela baru dengan feature
meliputi :
toolbar=yes|no mengaktifkan toolbar
status=yes|no mengaktifkan window
status
menubar=yes|no mengaktifkan menubar
scrollbars=yes|no mengaktifkan scrollbar
resizable=yes|no jendela resizeable
width =ukuran lebar jendela
height =ukuran tinggi jendela
Hal.44
print() Membuka jendela dialog print

<HTML>
<BODY>
<H3>Lat i han Obj ek Wi ndow</ H3><hr >
wi ndow. st at us=" Wel come" ;
wi ndow. al er t =( " Sel amat Dat ang" ) ;
angka=wi ndow. pr ompt ( " I nput kan Angka ?" , 0) ;
document . wr i t e( " Angka vaf or i t anda adal ah =<st r ong>" +angka+
" </ st r ong><br >" ) ;
t ampung=wi ndow. conf i r m( " j eni s kel ami n anda Pr i a ?" ) ;
i f ( t ampung)
{
document . wr i t e( " Bol eh Kenal an donk" ) ;
}
el se
{
document . wr i t e( " Ok dech" ) ;
}
wi ndow. cl ose( ) ;
</ SCRI PT>
</ BODY>
</ HTML>

Contoh penggunaan perintah window.open dan window.location untuk membuka
halaman web lain.

<HTML>
<BODY>
<CENTER><H3>Lat i han Obj ek Document </ H3><hr >
Membuka Web Page dengan Per i nt ah Wi ndow. Open dan Wi ndow. Locat i on
</ CENTER>
f unct i on konek1( )
{
wi ndow. open( " ut sb. HTML" ) ;
}
{
wi ndow. l ocat i on=" kunci _j awaban UTS. HTML" ;
}
</ SCRI PT>
<FORM METHOD=" post " >
<P><CENTER>
<I NPUT TYPE=" but t on" VALUE=" Kunci J awaban UTS A"
ONCLI CK=" konek1( ) " >
<I NPUT TYPE=" but t on" VALUE=" Kunci J awaban UTS B"
</ FORM></ CENTER>
</ BODY>
</ HTML>

Contoh penggunaan objek window.location.href untuk membuka halaman web yang
lain.

Hal.45
<HTML>
<BODY>
<CENTER><H3>Lat i han Obj ek Document </ H3><hr >
Membuka Web Page dengan Per i nt ah Wi ndow. Locat i on. hr ef
</ CENTER>
{
i f ( document . pi l i han. pi l i h. opt i ons[ 0] . sel ect ed)
{
wi ndow. l ocat i on. hr ef =" l at obj ekr adi o. HTML" ;
}
el se i f ( document . pi l i han. pi l i h. opt i ons[ 1] . sel ect ed)
{
wi ndow. l ocat i on. hr ef =" l at obj eksel ect . HTML" ;
}
el se i f ( document . pi l i han. pi l i h. opt i ons[ 2] . sel ect ed)
{
wi ndow. l ocat i on. hr ef =" l at obj ekt eksar ea. HTML" ;
}
r et ur n t r ue;
}
{
var pi l i hi nt ;
var pi l i hst r ;
pi l i hi nt =document . pi l i han. pi l i h. sel ect edI ndex;
pi l i hst r =document . pi l i han. pi l i h. opt i ons[ pi l i hi nt ] . t ext ;
document . pi l i han. pi l i ht eks. val ue=" Go To " + pi l i hst r + " ! " ;
}
</ SCRI PT>
<CENTER>
<FORM NAME=" pi l i han" >
<B>MENU PI LI HAN DENGAN TOMBOL</ B>
<P><SELECT NAME=" pi l i h" ONCHANGE=" konek2( ) " MULTI PLE SI ZE=" 3" >
<OPTI ON>Lat i han Obj ek Radi o</ OPTI ON>
<OPTI ON>Lat i han Obj ek Sel ect </ OPTI ON>
<OPTI ON>Lat i han Obj ek Teks Ar ea</ OPTI ON>
</ SELECT>
</ P>
<P><BR>
<I NPUT TYPE=" but t on" name=" pi l i ht eks" val ue" " si ze=" 40"
maxl engt h=" 40" >
</ P>
<P>
<I NPUT TYPE=" but t on" NAME=" Gobut t on" VALUE=" Goo! ! "
</ P>
</ FORM></ CENTER>
</ BODY>
</ HTML>

Hal.46

Hal.47

Kejadian (Event) - 1

8.1 Kejadian (Event)
Even adalah sesuatu yang terjadi pada halaman HTML. Berikut ini terdapat beberapa
bentuk kejadian yaitu jika pengguna memuat dokumen, pengguna memasukkan data,
pengguna mengklik tombol dan sebagainya. Hal-hal tersebut diatur oleh even.
Semua kejadian pada J avascript dapat anda tangani dengan menentukan kejadiannya.
Biasanya kejadian(even) adalah sebuah fungsi, tetapi pada beberapa kasus, kita dapat
menuliskan pernyataan-pernyataannya secara langsung.
Berikut ini adalah daftar kejadian(even) pada J avaScript :

Kejadian Keterangan
onClick Kejadian yang dibangkitkan bila pengguna
mengklik sebuah elemen form atau link.
onChange Dibangkitkan bila informasi masukan pada sebuah
elemen form (text, textarea, select) diubah oleh
pengguna.
onBlur Dibangkitkan ketika suatu elemen kehilangan focus
masukan, yaitu ketika pengguna menekan tombol
<tab>atau mengklik elemen lain form lainnya.
onFocus Dibangkitkan bila sebuah elemen form menerima
focus masukan; yaitu bila pengguna mengklik
elemen form tersebut atau menekan tombol <tab>
sehingga focus masukan berpindah ke elemen ini.
onAbort Dibangkitkan bila pengguna menghentikan
pemuatan citra (tag<img>) yaitu bila pengguna
menekan tombol stop atau mengklik link.
onError Dibangkitkan bila terjadi kesalahan saat browser
memuat dokumen atau citra.
onLoad Dibangkitkan bila browser selesai memuat
document
onUnload Dibangkitkan bila pengguna keluar dari dokumen
onMouseOver Dibangkitkan bila kursor mouse berada di atas
sebuah link.
onMouseOut Dibangkitkan bila kursor mouse keluar dari daerah
link atau peta citra.
onReset Dibangkitkan bila pengguna menekan tombol reset
onSelect Kejadian yang dibangkitkan bila pengguna memilih
sebagian atau seluruh teks pada elemen form yang
berupa kotak teks.
onSubmit Dibangkitkan ketika pengguna menekan tombol
submit.

MODUL
8
Hal.48
8.2 Penanganan Kejadian (Event)
Berikut ini akan diberikan beberapa contoh program-program yang menggunakan
kejadian-kejadian dalam aplikasinya.
Contoh program yang menggunakan even OnClick :

<HTML>
<BODY>
f unct i on war na( pi l i han)
{
al er t ( " Anda Memi l i h War na " + pi l i han) ;
document . bgCol or =pi l i han;
}
</ SCRI PT>
<h1 al i gn=" cent er " >Lat i han Event OnCl i ck</ h1>
<hr wi dt h=" 500" col or =" bl ack" noshade>
<h3 al i gn=" cent er " >Pi l i h war na f avor i t anda. </ h3>
<CENTER>
<FORM>
<I NPUT TYPE=" but t on" VALUE=" Bi r u" onCl i ck=" war na( ' l i ght bl ue' ) " >
<I NPUT TYPE=" but t on" VALUE=" Pi nk" onCl i ck=" war na( ' pi nk' ) " >
<I NPUT TYPE=" but t on" VALUE=" Cokl at " onCl i ck=" war na( ' bur l ywood' ) " >
<I NPUT TYPE=" but t on" VALUE=" Kel abu" onCl i ck=" war na( ' dar kgr ay' ) " >
<I NPUT TYPE=" but t on" VALUE=" Or anye" onCl i ck=" war na( ' peachpuf f ' ) " >
<I NPUT TYPE=" but t on" VALUE=" Put i h" onCl i ck=" war na( ' whi t e' ) " >
</ FORM>
<FORM>
<I MG NAME=" cool f an" SRC=" f anof f . gi f " wi dt h=61 hei ght =72><BR><BR>
<I NPUT TYPE=BUTTON VALUE=" Of f " onCl i ck=" cool f an. sr c =
' f anof f . gi f ' " >
<I NPUT TYPE=BUTTON VALUE=" On " onCl i ck=" cool f an. sr c =
' f anon. gi f ' " >
</ FORM>
</ CENTER>
<hr wi dt h=" 500" col or =" bl ack" noshade>
</ BODY>
</ HTML>

Contoh program yang menggunakan even OnBlur dan onFocus :
Hal.49
<HTML>
<BODY>
f unct i on masukanni m( )
{
i f ( document . f . i ni m. val ue==" " )
{
al er t ( " anda bel ummemasukkan ni m" ) ;
}
}
f unct i on masukannama( )
{
i f ( document . f . i nama. val ue==" " )
{
al er t ( " anda bel ummemasukkan nama" ) ;
}
}
f unct i on masukanal amat ( )
{
i f ( document . f . i al amat . val ue==" " )
{
al er t ( " anda bel ummemasukkan al amat " ) ;
}
}
f unct i on t er i makasi h( )
{
i f ( ( document . f . i ni m. val ue! =" " ) &&( document . f . i nama. val ue! =" " ) &&
( document . f . i al amat . val ue! =" " ) )
{
al er t ( " Ter i ma Kasi h Tel ah mengi si Dat a" ) ;
}
el se
al er t ( " Mohon Dat a Di l engkapi " ) ;
}
</ SCRI PT>
<h1 al i gn=" cent er " >Lat i han Event OnFocus dan OnBl ur </ h1>
<hr wi dt h=" 600" col or =" bl ack" noshade si ze=" 10" >
<f ont f ace=" ar i al " >
<h3 al i gn=" cent er " >R E G I S T R A S I </ h3>
<CENTER>
<f or mname=" f " met hod=" get " >
<TABLE>
<t r >
<t d wi dt h=" 31%" >NI M</ t d>
<t d wi dt h=" 7%" >: </ t d>
<t d wi dt h=" 62%" ><i nput t ype=" t ext " name=" i ni m" si ze=" 9"
onFocus=" wi ndow. st at us=' Si l ahkan Mengi si NI M Anda' ; "
onBl ur =" masukanni m( ) " ></ t d>
</ t r >
<t r >
<t d wi dt h=" 31%" >NAMA</ t d>
<t d wi dt h=" 7%" >: </ t d>
<t d wi dt h=" 62%" ><i nput t ype=" t ext " name=" i nama" si ze=" 23"
onFocus=" wi ndow. st at us=' Si l ahkan Mengi si Nama Anda' ; "
onBl ur =" masukannama( ) " ></ t d>
</ t r >
<t r >
<t d wi dt h=" 31%" >ALAMAT</ t d>
<t d wi dt h=" 7%" >: </ t d>
Hal.50
<t d wi dt h=" 62%" ><i nput t ype=" t ext " name=" i al amat " si ze=" 34"
onFocus=" wi ndow. st at us=' Si l ahkan Mengi si Al amat Anda' ; "
onBl ur =" masukanal amat ( ) " ></ t d>
</ t r >
</ t abl e>
<p><i nput t ype=" BUTTON" val ue=" Ki r i m" Oncl i ck=" t er i makasi h( ) " >
<i nput t ype=" r eset " val ue=" Reset " ></ p>
</ f or m>
</ cent er >
</ BODY>
</ HTML>

Contoh program yang menggunakan even onLoad dan onUnload
<HTML>
<BODY Onl oad=" t anggal ( ) " OnUnl oad=" t ut up( ) " >
<! - - Hi de f r ombr owser s t hat do not under st and J avascr i pt
f unct i on t anggal ( )
{
var d = new Dat e( ) ;
var y = d. get Ful l Year ( ) ;
var m= d. get Mont h( ) + 1;
var d = d. get Dat e( ) ;
var t = d + ' / ' + m+ ' / ' + y + ' ' ;
def aul t St at us = " Anda dat ang pada t anggal " + t + " . " ;
al er t ( " Sel amat Dat ang Teman \ n Si l ahkan Masuk Ke Websi t eku" ) ;
}
f unct i on t i mer ( )
{
var d = new Dat e( ) ;
var j am= d. get Hour s( ) ;
var meni t = d. get Mi nut es( ) ;
Hal.51
var det i k = d. get Seconds( ) ;
var st r wakt u = ( j am<10) ?" 0" +j am: j am;
st r wakt u +=( meni t <10) ?" 0" +meni t : " : " +meni t ;
st r wakt u +=( det i k<10) ?" 0" +det i k: " : " +det i k;
document . f . t xt wakt u. val ue=" " +st r wakt u;
set Ti meout ( " t i mer ( ) " , 200) ;
}
f unct i on t ut up( )
{
wi ndow. al er t ( " Ter i makasi h Tel ah Ber kunj ung\ nJ angan l upa Dat ang
kembal i Ya. . " ) ;
}
/ / end hi di ng - - >
</ SCRI PT>
<h1 al i gn=" cent er " >Lat i han Event OnLoad dan OnUnLoad</ h1>
<h3 al i gn=" cent er " >SELAMAT DATANG</ h3>
<CENTER>
<f or mname=" f " >
<h4 al i gn=" cent er " >Sekar ang Menunj ukkan J am</ h4>
<i nput t ype=" Text " si ze=" 16" name=" t xt wakt u" >
</ f or m>
<SCRI PT LANGUAGE=" J avaScr i pt " >t i mer ( ) </ SCRI PT>
</ cent er >
</ BODY>
</ HTML>

Hal.52
Contoh program yang menggunakan even onMouseOut dan onMouseOver

<HTML>
<BODY>

f unct i on g1( )
{
document . f . i mgf an. sr c=" f anon. gi f "
}
f unct i on g2( )
{
document . f . i mgf an. sr c=" f anof f . gi f "
}
</ SCRI PT>
</ SCRI PT>
<h1 al i gn=" cent er " >Lat i han Event OnMouseOver dan OnMouseOut </ h1>
<h3 al i gn=" cent er " >SELAMAT DATANG</ h3>
<CENTER>
<f or mname=" f " >
<I mg Name=" l ogo" sr c=" l ogo1. gi f "
onmouseover =" document . l ogo. sr c=' l ogo2. gi f ' ; wi ndow. st at us=' Mot t o J awa
Bar at ' "
onmouseout =" document . l ogo. sr c=' l ogo1. gi f ' ; wi ndow. st at us=' Gemah Ri pah
Repeh Rapi h' " >
<h4 al i gn=" cent er " >Kal o Kepanasan Tunj uk Ki pas Angi n Saj a</ h4>
<A HREF=" l at evenoncl i ck. ht ml " onMouseOver =" g1( ) " onMouseOut =" g2( ) " >
<I MAGE NAME=" i mgf an" SRC=" f anof f . gi f " WI DTH=61 HEI GHT=72 BORDER=0>
</ A>
<p>
Cont oh Li nk Dengan Even
</ p>
<A HREF=" ht t p: / / www. googl e. com"
onMouseOver =" document . bgCol or =' #f f cc00' ;
onMouseOver =wi ndow. st at us=' Ke Websi t e Googl e. Com' ; r et ur n
t r ue" >Googl e. Com</ A><BR>
<A HREF=" ht t p: / / i f . uni kom. ac. i d" onMouseOver =" wi ndow. st at us=' Oh,
j angan deket - deket . . ' ;
r et ur n t r ue" onMouseOut =" al er t ( ' Nah gi t u dong' ) ; r et ur n t r ue" >Tekni k
I nf or mat i ka UNI KOM </ A>
</ f or m>
</ cent er >
</ BODY>
</ HTML>

Hal.53

Hal.54

Kejadian (Event) - 2

9.1 Event On Submit
Event on submit akan dibangkitkan apabila seorang user menekan tombol submit.
Dengan event ini data yang diinputkan akan dikirimkan ke tempat lain (email, file
teks atau ke dalam suatu tabel).

<Ht ml >
<Body>
f unct i on car i ( )
{
var kat a = document . f or mcar i . keywor d. val ue;
var hasi l = " ht t p: / / www. googl e. com/ sear ch?q=" + kat a ;
wi ndow. open( hasi l , ' googl e' , conf i g=' hei ght =500, wi dt h=750
scr ol l bar s=yes l ocat i on=yes' )
}
</ SCRI PT>
<FORM NAME=" f or mcar i " onSubmi t =" car i ( ) " >
<cent er >
<t abl e>
<t r >
<t d col span=" 4" bgcol or =" or ange" ><h1 al i gn=" cent er " >S e a r c h -
E n g i n e</ h1><hr col or =" bl ack" si ze=" 4" ></ t d>
</ t r >
<t r >
<t d><b>Car i pakai </ b></ t d>
<t d><i mg sr c=" l ogoogl e. gi f " ></ t d>
<t d><I NPUT NAME=" keywor d" SI ZE=" 40" TYPE=" t ext " ></ t d>
<t d><I NPUT TYPE=" submi t " VALUE=" Car i . . ! ! " ><i nput t ype=" r eset "
Val ue=" Ul ang" ></ t d>
</ t r >
<t r >
<t d col span=" 4" bgcol or =" or ange" ><hr col or =" bl ack" si ze=" 4"
></ t d>
</ t r >
</ t abl e>
</ cent er >
</ FORM>
</ body>
</ ht ml >

MODUL
9
Hal.55

Berikut diberikan contoh event submit yang terjadi pada form pengisian data
guestbook yang hasilnya akan dikirim ke suatu email.

<Ht ml >
<Body>
f unct i on i si f or m( f or m)
{
i si nama( f or m) ;
i si emai l ( f or m) ;
i si koment ar ( f or m) ;
kosongkan( f or m) ;
}
f unct i on kosongkan( f or m)
{
i f ( ( i si nama( f or m) && i si emai l ( f or m) && i si koment ar ( f or m) ) )
{
f or m. submi t ;
}
i f ( ( i si nama( f or m) == f al se | | i si emai l ( f or m) == f al se | |
i si koment ar ( f or m) == f al se) )
{
sal ahi si ( f or m) ;
}
}
f unct i on sal ahi si ( f or m)
{
var t eks =" Ada Kesal ahan I si an : " ;
i f ( i si nama( f or m) == f al se)
{t eks +=" \ nNama Anda" ; }
i f ( i si emai l ( f or m) ==f al se)
{t eks +=" \ nEmai l Anda" ; }
i f ( i si koment ar ( f or m) ==f al se)
{t eks +=" \ nKoment ar Anda" ; }
al er t ( t eks) ;
}
f unct i on i si nama( f or m)
{
i f ( f or m. nama. val ue==" " )
{r et ur n f al se; }
el se
{r et ur n t r ue; }
Hal.56
}
f unct i on i si emai l ( f or m)
{
i f ( ( f or m. emai l . val ue==" " | | f or m. emai l . val ue. i ndexOf ( ' @' , 0) ==- 1) | |
f or m. emai l . val ue. i ndexOf ( ' . ' ) ==- 1)
el se
}
f unct i on i si koment ar ( f or m)
{
i f ( f or m. cs. val ue==" " )
el se
}
</ scr i pt >
<f or mname=" f " met hod=" post "
act i on=" mai l t o: i r awan@uni kom. ac. i d?subj ect =For m" >
<f ont f ace=" Ar i al " >
<t abl e al i gn=" cent er " >
<t r bgcol or =" gr ay" >
<t d col span=" 2" al i gn=" cent er " ><h1>G u e s t B o o k</ h1></ t d>
</ t r >
<t r bgcol or =" peachpuf f " >
<t d>Nama Anda : </ t d>
<t d><i nput t ype=" t ext " val ue=" " name=" nama" si ze=" 30" </ t d>
</ t r >
<t d>Emai l Anda : </ t d>
<t d><i nput t ype=" t ext " val ue=" " name=" emai l " si ze=" 30" </ t d>
</ t r >
<t d>Koment ar Anda : </ t d>
<t d><t ext ar ea name=" cs" r ows=" 5" col s=" 50" ></ t ext ar ea></ t d>
</ t r >
<t r bgcol or =" or ange" >
<t d col span=" 2" al i gn=" cent er " >
<i nput t ype=" but t on" name=" t hesubmi t " val ue=" ki r i m"
onCl i ck=" i si f or m( t hi s. f or m) " >
<i nput t ype=" r eset " val ue=" hapus" >
</ t d>
</ t r >
<t r bgcol or =" gr ay" >
<t d col span=" 2" al i gn=" cent er " ><b>Ter i ma Kasi h Tel ah Mengi si
Guest Book</ b> </ t d>
</ t r >
</ t abl e>
</ f ont >
</ f or m>
</ body>
</ ht ml >

Hal.57

9.2 Manipulasi Gambar
Untuk memuat suatu image, pada J avascript terdapat objek Image. Untuk membuat
objek tersebut pendeklarasiannya adalah sebagai berikut :
img1 =new Image ()
img1.src ="pic1.gif"
artinya membuat objek image dengan isinya adalah image pic1.gif
berikut akan diberikan contoh mengenai objek image :

<HTML>
<BODY>
var num=1
i mg1 = new I mage ( )
i mg1. sr c = " pi c1. gi f "
f unct i on sl i deshow( x)
{
num=num+x
i f ( num==7)
{num=1}
i f ( num==0)
{num=6}
document . mypi c. sr c=eval ( " i mg" +num+" . sr c" )
}
Hal.58
</ SCRI PT>
<CENTER>
<I MG SRC=" pi c1. gi f " NAME=" mypi c" BORDER=0 hei ght =" 200"
wi dt h=" 150" ><p>
<A HREF=" J avaScr i pt : sl i deshow( - 1) " >Pr evi ous</ A>
<A HREF=" J avaScr i pt : sl i deshow( 1) " >Next </ A>
</ CENTER>
</ BODY>
</ HTML>

<ht ml >
<head>
<scr i pt l anguage=" j avascr i pt " >
<! - -
var i mage1=new I mage( )
i mage1. sr c=" 1. gi f "
/ / - - >
</ scr i pt >
</ head>
<body>
<cent er >
<h2>Penggunaan Obj ek I mage Unt uk Membuat Sl i deShow</ H2><hr si ze=5
col or =" bl ack" >
<i mg sr c=" 1. gi f " name=" sl i de" wi dt h=" 100" hei ght =" 100" >
<scr i pt >
<! - -
/ / var i abl e yang akan menai kan hi t ungan gambar
var st ep=1

f unct i on sl i dei t ( ) {
Hal.59
/ / j i ka br owser t i dak mendukung met ode dokumen. i mage maka kel uar .
i f ( ! document . i mages)
r et ur n
document . i mages. sl i de. sr c=eval ( " i mage" +st ep+" . sr c" )
i f ( st ep<3)
st ep++
el se
st ep=1
/ / memanggi l f unct i on " sl i dei t ( ) " set i ap 1 det i k
set Ti meout ( " sl i dei t ( ) " , 1000)
}
sl i dei t ( )
/ / - - >
</ scr i pt >
<hr si ze=5 col or =" bl ack" >
</ body>
</ ht ml >

Hal.60

Marquee dan Frame

10.1 Membuat Marquee
Marquee berarti teks yang dapat berjalan pada halaman website. Terdapat 2 macam
jenis marquee yaitu marquee pada halaman web dan marquee pada status bar. Berikut
ini adalah contoh program marquee dengan menggunakan J avaScript.

<ht ml >
<Head>
<Ti t l e>membuat
Mar quee Pada St at us bar </ Ti t l e>
</ head>
<body bgcol or =" l i ght bl ue" ><cent er >
<p><f ont col or =" or ange" si ze=" 5" >Lat i han Mar quee Dengan
J avaScr i pt </ p>
<body onl oad=" p( ) " >
<scr i pt l anguange=" J avaScr i pt " >
var pesan =" Hal l o Fr i end. . . Apa Khabar ? " ;
var pesan2 =" Wel come To My websi t e " ;
f unct i on p( )
{
document . basi s. kot ak. val ue=pesan;
pesan=pesan. subst r ( 1, pesan. l engt h) +pesan. subst r ( 0, 1) ;
pesan2=pesan2. subst r ( 1, pesan2. l engt h) +pesan2. subst r ( 0, 1) ;
wi ndow. st at us=pesan2;
set Ti meout ( " p( ) " , 100) ;
}
</ scr i pt >
<f or mmet hod=" post " name=" basi s" >
<i nput t ype=" t ext " name=" kot ak" si ze=20>
</ f or m>
</ body>
</ ht ml >

Dengan program tersebut marquee dapat dibuat didalam halaman web maupun pada
status bar yang terletak dibawah halaman web.

MODUL
10
Hal.61

10.2 Membuat Frame
Frame digunakan untuk memisahkan beberapa halaman web yang ditampilkan dalam
suatu halaman web. Penggunaan frame biasa diperuntukkan untuk memuat halaman
yang selalu diakses misal halaman menu. Berikut adalah contoh program yang
menggunakan frame.

Halaman UTAMA.HTML
<ht ml >
<Head>
<Ti t l e>Lat i han Fr ame</ Ti t l e>
</ head>
<Fr ameset col s=" 30%, *" >
<f r ame sr c=" menu. ht ml " name=" f r 1" >
<f r ame sr c=" awal . ht ml " name=" f r 2" >
</ f r ameset >
</ ht ml >

Halaman MENU.HTML
<ht ml >
<Head>
<Ti t l e>Lat i han Fr ame- Menu</ Ti t l e>
</ head>
<body bgcol or =" l i ght gr een" >
<scr i pt l anguage=" J avaScr i pt " >
f unct i on menu( )
{

st r =" l at mat h. HTML" ;
i f ( document . f f or m. r bmenu[ 1] . checked)
st r =" l at obj ekt eks. HTML" ;
el se i f ( document . f f or m. r bmenu[ 2] . checked)
st r =" l at obj eksel ect . HTML" ;
el se i f ( document . f f or m. r bmenu[ 3] . checked)
st r =" l at obj ekcheck. HTML" ;
Hal.62
par ent . f r 2. l ocat i on. hr ef =st r ;
}
</ scr i pt >
<p>Pi l i h l at i han Di bawah I ni </ p>
<f or mname=" f f or m" >
<p><i nput t ype=" r adi o" checked name=" r bmenu" val ue=" 1" >Mat emat i ka</ p>
<p><i nput t ype=" r adi o" name=" r bmenu" val ue=" 2" >Obj ek t eks</ p>
<p><i nput t ype=" r adi o" name=" r bmenu" val ue=" 3" >Obj ek Sel ect </ p>
<p><i nput t ype=" r adi o" name=" r bmenu" val ue=" 4" >Obj ek Check</ p>
<p><i nput t ype=" but t on" oncl i ck=" menu( ) " val ue=" t ampi l kan" >
</ f or m>
</ body>
</ ht ml >

Halaman AWAL.HTML
<ht ml >
<body bgcol or =" pi nk" >
<cent er >
<h1>Hal aman i ni dengan menggunakan</ h1>
<h1>Fr ame</ h1>
<p><st r ong>Desi gn By I r awan Af r i ant o</ st r ong></ p>
<p><st r ong>Emai l : <a hr ef =" mai l t o: i r awan@uni kom. ac. i d" >
i r awan@uni kom. ac. i d
</ st r ong></ p>
</ cent er >
</ body>
</ ht ml >

Hal.63

Tutorial JavaScript Indonesia

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Tutorial JavaScript Indonesia

Diunggah oleh

Hak Cipta:

Format Tersedia

E

Anda mungkin juga menyukai