PL STAKAAN

\RSIPAN
I.\\\.\TIMUR
376 2
AL
3
 Paling Dicari!

Diterbitkan Atas Kerj asama

+r*4db
i\V'f
r*:;---#;

WAHANA KOMPUTER
ffi
pENrRutANDI@
 'tb b4efu,V1*,?.
Poling Dicori! JovoScripl Source Code
Hok Cipto Q 2O12 podo WAHANA
Jl. MT. Horyono
KOMPUTER.
637 Semorong Telp. (O24) g3l 4727, g41323g, g413963
Kata Fensantar
Fox. (O2al 8413964
avascript merupakan salah satu bahasa pemrograman script sisi
Editor : Westriningsih browser atau client yang paling popular saat ini. Hampir seluruh
Setting : Elisoberh pipir website modern menggunakan Javascript untuk mempercantik
Desoin Cover : don_dut website mereka dan agar website lebih interaktif dan atraktif.
Korektor : Thomos Pribodi JavaScript memungkinkan programmer mengelola DOM (Document
Object Model) untuk menciptakan animasi-animasi, seperti mengubah
ukuran elemen dan menyembunyikan atau menampilkan elemen.
@,ffi 3i"";:x-fixlfff[sffir,,kT::[,il?y.svok.r,o Bahkan Anda dapat membangun sebuah aplikasi mirip dekstop dengan
JavaScript. Salah satu keunggulan JavaScript adalah Ajax, yaitu
pemanggilan halaman server melalui background client dan
Hok Cipto dilindungi undong-undong.
meletakkannya pada halaman utama sehingga menyingkat waktu
Dilorong memperbonyok otou memindohkon sebogion otou seluruh isi eksekusi website.
buku ini dolom
bentuk opopun, boik secoro erektronis moupun mekonis, termosuk memfotocopy,
merekom otou dengon sisrem penyimponon loinnyo, tonpo izin tertulis Lebih jauh lagi kini JavaScript mempunyai library-library siap pakai yang
dori penulis.
disebut Framework untuk lebih mempermudah pengelolaan DOM.
Penerbit: C.V ANDt OFFSET (penerbir ANDt) Framework JavaScript seperti JQuery, Mootools, Yui, dan banyak lagi
Jl. Beo 38-40,lelp. 10274) 56t 88l (Hunring), Fox. {02741 5BB2B2 akan lebih memudahkan pengembang web melakukan pemrograman
Yogyokorto 55281 website. Selain itu, Anda tidak perlu khawatir JavaScript yang dibangun
tidak bekerja. Hal ini dikarenakan semua browser yang berjalan pada
Percefokon: ANDI OFFSET
komputer telah terintegrasi dengan JavaScript.
Jl. Beo 38-40, Telp. 10274) 56t 8gt (Hunring), Fox. (02741 5BB2B2
Yogyokorto 55281 Dengan pembahasan source code pada buku ini diharapkan pembaca
yang ingin memulai belajar website memahami dasar-dasar
pemrograman JavaScript dan memahami sintaks dan struktur
n Nosionol: Kolol pemrograman JavaScript. Pembaca dapat menerapkan dan
mengembangkan sendiri sesuai kebutuhan website Anda.
Poling Dicori! JovoScript Source Code/
- Ed. l. - Yogyokorro: ANDI, Semorong: WAHANA KOMpUTER;
2t 20 t9 t8 t7 t5 15 t4 t3 t2 STRUKTUR PENULISAN BUKU
xii + 260 hlm.; 16 x 23 Cm. Buku Paling Dicari! JavaScript Source Code ini membahas source code
to9 8
7 6 5 4 3 2 I
dasar JavaScript secara luas. Agar lebih memudahkan dalam
ISBN:978 -979 - 29 - gg22- z
mempelajari source code, buku ini akan dibagi menjadi beberapa bab
sebagai berikut.
l. Web Progromming/Computer
I. WAHANA KOMPUTER Semorong

DDC'21: OO5.3O4
 IV JovoScript Source Code poling Dicoril Koto Pengontor

Bab 1 JavaScript Dasar

BAGI PARA PEMBACA
Bab ini menjeraskan tentang source code dasar Javascript,
seperti statemen, objek window, mendapatkan elemen, Dalam menyusun buku ini kami telah melakukan pengkajian dan
menambahkan elemen, dan menampilkan jendeia dialog. penelitian yang mendalam serta berusaha untuk menyampaikan materi
secara lengkap dan terstruktur. Akan tetapi, tentunya setiap karya
Bab 2 Variabel dan Operator tidaklah ada yang benar-benar sempurna sehingga mungkin buku ini
kurang dapat memenuhi kebutuhan para pembaca atau mungkin para
Bab ini akan membahas tentang source code variabre dan pembaca masih mengalami kesulitan atau masalah setelah mempelajari
operator yang biasa digunakan JavaScript. buku ini.

Bab 3 Struktur Kontrol Untuk itu, Wahana Komputer membuka lebar-lebar kesempatan bagi
para pembaca pada khususnya dan masyarakat pengguna komputer
Bab ini membahas source code kontrol alur program percabang_ pada umumnya untuk melakukan konsultasi mengenai berbagai kesulitan
an, perulangan, dan kesalahan seperti if, selecl, while, Oo, foi, yang dihadapi khususnya mengenai apa yang telah dijelaskan di dalam
dan try catch. buku ini melalui situs web kami atau via pos, fax, ataupun e-mail. Di
samping itu, Anda para pembaca dapat memanfaatkan pula layanan
Bab 4 Fungsi, Object, dan RegExp pelatihan komputer kami melalui Lembaga Pendidikan Komputer
Wahana untuk lebih mendalami materi-materi yang dipaparkan di dalam
Bab ini akan membahas source code pembuatan fungsi, objek, buku ini.
dan pemakaian regular expresion (RegExp).

Bab 5 Event Handling

Bab ini menjelaskan tentang source code tentang pembuatan
d3n penanganan. sebuah aksi pada elemen, ieierti event
elemen, event keyboard, event mouse, dan lainnya.

Bab 6 Cookie, Ajax, TabelValidasi

Bab ini menjeraskan tentang source code tentang operasi cookie,
validasi form input, pengeroraan DoM taber, Jan pengeroraan Wohono Komputer
style CSS. JL. MT Haryono 637 Semarang
Ip. (024) 8314727,8413238 fax. (024'18413964
APA YANG HARUS ANDA KUASAI? e-mail: [email protected]
Agar lebih cepat memahami source code Javascript yang dibahas pada web: www.wahanakom.com
buku ini, diharapkan pembaca terah memahami pemrogr"irrn HTML
dan
konsep pemrograman web serta memahami salah" satu IDE yang
digunakan untuk melakukan pemrograman JavaScript.
JovoScripi Source Code poling Dicori!

Baftar'Es,i
KATA PENGANTAR I
VII
JAVASCRIPT DASAR 1

Window........ 12

Document.... 17
E|emen......... 22
Atribute E\emen......... 31

Membual dan Menyis ipknn E lemen An ak ............ 39

A\ert............. 4t
Confirm 42
Prompt......... 43

Print ............ 45
VARIABEL DAN OPERATOR............ 47
Operator Assignment 50
Operator Aritmatik........... 52
Operator Logika................ 54
Operator Conditional ? :................. 59
Operator String........... 62

Operator P erbandingan ..... 63

STRUKTUR KONTROL .......... 77

vilt JovoScript Source Code poling Dicoril Doftor lsi
ix

For In .............. gg Jam.............. ....139

Jam Digital.. .... l4t
Lebih....
Menggabungkan Dua Array atau ..................... 145
Menggabungkan Elemen Array........... ...... 147
Push dan Pop Array.... ......... 148
Mengurutkan Array........... ........................ 149
Membalik Elemen Array.... ........................ l5l
Slice Splice Array........... ...... 152
Shift Unshift Array...........". ....................... 154
Perpangkatan................... .... 155

Mencari Akar dari Pangkat 2................. ........................ 156

Membuat Angka AcaMRandom ................. ISB
Mendefi nis ikan Fungs i Variabel Pembulatan Bilangan Real/Float.... .......... t|g
............ I 12
Objek...... ... ....14 Mencari Bilangan Terhesar dan Terkecil ...................... l6l
Object
Membuat Objek dari Kelas
............ I15 Mengetes Pola RegExp ........ 162
Membuat Kelas Sendiri.... RegExp Exec ............
.... I t 7 ............ 165
Properti ....... Parameter Regex.............
.... t t g ..... 166
Method........ .... l2l Pencarian String dengan RegExp ............. 169
Mendapatkan Jumlah Karakter dan Kata...... ................ 123 Mereplace String dengan RegExp..... ........ t7l
Mengubah Besar/Kecil String... .... ........ 124 EVENT HANDLING .......................173
Membuat Awal Kata Kapitat.."................. cooKIE, AJAX, TABEL VALIDAST.
...................... 126 2tt
Pencarian String ........... Menambah Cookie ............... 212
....... 127
Mengganti Sebagian String..... .. .. Mendapatkan Cookie ...........214
............ I2g
Mendapatkan Bagian String... .. .. Mengubah Cookie
........... I3I ................216
String Menjadi J\ON........... Menghapus Cookie.......... .....218
..................... 132
Membuat Array JSON dari String . . ... Validasi Input Tidak Boleh Kosong......... .......................220
....................... 134
UkL Parameter Menjadi JSON. Validasi Input Hanya Angka ..................... 221
................ t35
Tanggal ....... Yalidasi Input Hanya Huruf.
.... 137 .....................222
 JovoScript Source Code Poling Dicori!

ValidasiEnai1........... ...........223
Mendapatkan Elemen THead.......... .......... 225

Mendapatkan Semua Elemen TBodies ...... 227

Mendapatkan Elemen TFoot........... ..........229

Menambah Baris Data... ...... 231

Menghaptts Baris Data ........ 233

Mengrbah Baris Data... ....... 234

Menambah Baris Data dari Form Input ............ ............236

Event Tabel ..... 238
Background.
Border .........
.... 240

....242
Iava$cript Dasar
Margin/Paddinq................. ....................... 245
Layout/Positioning.......... ..... 247

Text.............. ....249
Cttrsor .............251
 JovoScript Source Code Poling Dicoril JovoScriPt Dosor

avascript merupakan salah satu bahasa script website yang paling

banyak digunakan untuk menambah manipulasi script HTML dan HELLO JAVASCRIPT
CSS pada sisi clienUbrowser. JavaScript mampu memberikan SebagailangkahawaluntukmenulisJavaScript,berikutpenulisan
fungsionalitas lebih pada website, seperti validasi form, berkomunikasi
dengan seryer, serta membuat website lebih interaktif dan animatif.
Jrr"S"iipt fiaoa dokumen HTML yang menampilkan teks Hello
JavaScript pada halaman dan title bar website'
JavaScript digunakan pada banyak browser, seperti lnternet Explorer, <!--
Firefox, Chrome, Opera, Safari, dan lain sebagainya. Hampir seluruh
browser mendukung JavaScript sehingga tidak perlu khawatir kode - file : helto.html
JavaScript yang digunakan pada website tidak berfungsi. - dir : JScriPUbabl
- by:ZiDjho
TAG JAVASCRIPT
Perintah JavaScript dapat dituliskan bersama dengan file HTML secara
<!DOCTYPE html>
langsung atau dituliskan pada file tersendiri dengan ekstensi *.js. Saat
Anda menuliskan JavaScript pada dokumen HTML atau PHP maka Anda <html>
harus menggunakan Tag script untuk memulai penulisan perintah <head>
JavaScript.
<title></title>
Di bawah ini adalah deklarasi tag script.
<scriPt tYPe="texUjavascri Pt'>
<script>
document.write("<h 1 >Hello JavaScript</h 1 >");
llKode JavaScript...
document.title="Hello JavaScript";
</script>
</scriPt>
Atau </head>
<scri pt type="texUjavascri pt">
<bodY>
llKode JavaScript... </bodY>
</script>
</html>

Apabila Anda menuliskan perintah JavaScript pada dokumen khusus,

yaitu *.js. maka untuk menggunakannya Anda harus memanggil Keterangan:
dokumen JavaScript tersebut dengan perintah berikut. document.write("<h 1 >Hello JavaScript</h 1 >");

<script type="texVjavascript" src="nama_file.js"></script> document.title="Hello JavaScript";

e Documentadalahobjekyangmewakilihalamanwebsiteyang
ditampilkan oleh browser.
Writeadalahmethodyangdigunakanuntukmenuliskantekske
dalam halaman web.
 JovoScrlpt Source Code Poling Dicori! JovoScriPt Dosor 5

t11t"T^?i^ltatemen
Title adalah properti yang digunakan untuk mendapatkan atau Kode JavaScript merupakan rangkaian .dari sesuai dengan
JavaScript. setiap .;L#; akan di-eksekusi browser
mengatur teks pada tag title. Teks ini ditampilkan pada titlebar di dalam
urutan statemen. il;; ;;prt menuliskan kode JavaScript
browser. blok' Tujuan da.ri penulisan
sebuah blok tnruprn* t n'p' sebuah .
Perintah pertama digunakan untuk menuliskan perintah HTML JavaScript datam Uf* adalah untuk mengklasifikasikan
<h1 >Hello JavaScript<1hl > pada halaman website. i*Jrurlritas xooe ""Ou,ft'
lrras"tipt yang berbeda dan agar suatu rangkaian

Perintah kedua digunakan untuk memberikan title halaman statemen dieksekusi secara bersamaan'
website. Blokkodedapatdituliskandidalamkurungkurawa-|.{..'}ataupada
statemen perutanganl" p"i"'O'ngan' fungsi'
dan method pada suatu
kelas.
<!--
- file : blockjs.html
- dir : JScriPUbabl

-by: ZiDjho

<html>
Gambar 1.1 Hello JavaScript
<head>
<title>Source Code JavaScript</title>
MENULIS STATEMEN
</head>
Statemen JavaScript adalah sebuah perintah yang ditujukan pada
browser. Statemen akan memberitahukan pada browser apa yang harus <body>
dilakukan. Statemen berupa satu baris perintah, misalnya pada source <div>belajar</div>
code di atas.
<script type="texUjavascript">
document.write("<h 1 >Hello JavaScript</h 1 >");
t
Statemen di atas berarti memerintahkan browser untuk menuliskan Hello document.title="Hello JavaScript",
JavaScript dengan tag h1 pada halaman web.
var d=document. getElementsByTagName('div')[0];
Perintah-perintah JavaScript bersifat case sensitive yang berarti
membedakan huruf besar dan huruf kecil, misalnya write dengan Write d.innerHTML="Semangat Belajar JavaScript";
merupakan perintah yang berbeda. Hal ini berbeda dengan perintah var p=document'createElement('p');
HTML yang bersifat case insensitive, misalnya <h1> dengan <H1>
adalah perintah yang sama. p.innerText="Bersama Wahana Komputer Semarang";
var h1 =document.createElement('h1')
h f .innerHTML="Hello JavaScript";
document.body.insertBefore(h 1,d);
 JovoScript Source Code poling Dicori! JovoScript Dosor

document. body.appendChitd(p); <html>

) <head>
</script> <title>Source Code JavaScript</title>
</body> <script type="texVjavascri pt">
</html> window.onload=function(X
document.title="Hello JavaScript";
var d=document. getElementsByTagName('div')[0] ;

d. innerHTM L="Semangat Belajar JavaScript";

var p=document.createElement('p');
Hello J*va$cript p. innerText="Bersama Wahana Komputer Semarang";
Semangat Bclajar JavaSaript var h1 =document.createElement('h 1')
Bersama Vfalsna Komputsf Sernarang h f innerHTML="Hello JavaScript";
.

document.body. insertBefore(h 1,d);

Gambar 1.2 Blok JavaScript
document. body.appendChild(p);
statemen Javascript dapat ditulis di dalam tag head maupun tag body
halaman web. seperti terlihat pada source code blokjs.html oi atas, )
Javascript dituliskan di dalam tag body. Kapan Rnda boleh menuliskan </script>
statemen JavaScript pada tag head?
</head>
Anda dapat menuliskan Javascript pada tag head dengan syarat kode
<body>
Javascript tidak mengakses kode HTML pada tag body atau dituliskan
sebagai anonymous function pada event window.onlold atau sebuah <div>belajar</div>
blok kode yang tidak dieksekusi secara langsung. Apabila syarat tersebut
</body>
tidak terpenuhi maka Javascript akan melemparkan kesalahan dan
Javascript tidak akan dieksekusi oleh browser. Kesalahan terjadi karena </html>
Javascript mengakses DoM HTML yang belum dieksekusi atau tidak
ada.
Kode diatas apabila dituliskan pada tag head menjadi seperti berikut. Hasil eksekusi file statemen.html di atas akan terlihat sama dengan
<!-- Gambar 1.2.

- file : statemen.html
- dir : JScripUbabl
- by: ZiDjho
 JovoScript Source Code Poling Dicoril JovoScript Dosor

MENULIS KOMENTAR " @param int p : panjang

*
Komentar adalah bag_ian dari kode yang digunakan untuk menjelaskan @param int I : lebar
suatu statemen Javascript. Terdapat 3 jenis komentar Javascript, yaitu * int: luas
@return
ll, l**..* l, dan l*..*1.
C Komentar //
function luas(p,l){
Komentar jenis ini digunakan untuk menuliskan komentar satu
return p*l;
baris, biasanya digunakan untuk menjelaskan suatu statemen.
O Komentar /*..*/ )

Komentar ini digunakan untuk menuliskan komentar lebih dari

satu baris tetapi tidak terbaca sebagai keterangan saat suatu Menghitung keliling persegi
deklarasi dipanggil. Komentar jenis inibiasanya digunakan untuk
menjelaskan suatu deklarasivariabel, fungsi, ietas, dan method. @paramintp:panjang
O Komentar l**.. *l @paramintl:lebar
Komentar ini digunakan untuk menuliskan komentar lebih dari @return int: keliling
satu baris dan komentar ditampilkan saat deklarasi dipanggil.
sama seperti jenis kedua di atas, komentar jenis ini digunaikin
function keliling(p,l){
untuk menjelaskan pada deklarasi variabel, fungsi, kelas, dan
method. return 2.(p+l);
Perhatikan source code penggunaan komentar Javascript pada file )
komentar. html berikut.
llPafiang persegi
<!--
var panjang=10;
- file : komentar.html
llLebar persegi
- dir: JScripVbabl var lebar=S;
//menghitung LUAS dan menampilkan hasilnya
_:j''''o'no document.write('<h2>Luas 10x5 : '+luas(panjang,lebar)+
<IDOCTYPE html>
"<lh2>");
<html>
//menghitung KELILING dan menampilkan hasilnya
<head>
document.write('<h2>Keliling 10x5 :'+keliling(panjang,lebar)+
<title>JavaScript Source Code</tifl e>
"<lh2>");
<script type="texVjavascript',>
</script>
</head>
* Menghitung
luas persegi panjang <body>
 JovoScript Source Code Poling Dicori! JovoScript Dosor
10

</body>
</html>

Perbedaan dari ketiga macam komentar di atas terlihat pada saat Anda
memanggil statemen yang diberikan komentar. Pada saat fungsi luas
dipanggil maka akan tampak keterangan berkaitan dengan fungsi
tersebut, seperti Gambar 1.3 di bawah. Sedangkan saat Anda memanggil
fungsi keliling maka komentar yang Anda berikan tidak ditampilkan
seperti pada Gambar 1.4 di bawah. Lihat juga saat Anda memanggil
variabel p dan I pada Gambar 1.5 di bawah. Gambar 1.5 Komentar Model /i

lnformasi di atas hanya muncul saat Anda menuliskan JavaScript pada

editor yang mempunyai kemampuan sintaks completation sehingga
perbedianlang terlihat pada gambar di atas tidak akan terlihat pada
notepad atau wordpad sebagai editor.
Hasil dari eksekusifile komentar.htmt di atas akan terlihat seperti gambar
From b@encar . hEe]
berikut.
Sstrary
Meftglritung tu6 persgi pani6*g
ParEmetqrs
*rt p: paRjarg

irt I : lebar
f,ptmf
int i l$as

Gambar 1.3 Komentar Model /"*.. */

[t]i ] ) +'{ /i*}* } ,

kE].ilins(S, t) iadex.
Gambar 1.6 Hasil eksekusi komentar.html
kefttg(p, l)
From koGaiar . h[o].
ilaMeflrfaMd

Gambar 1.4 Komentar Model /*..*/ Document object Model (DoM) adalah representasi dari HTML yang
telah dimuaVdieksekusi oleh browser. Hirarki tertinggi dari sebuah DOM
adalah objek window yang mempresentasikan sebuah jendela browser
yang terbuka.
12 JovoScript Source Code poling Dicoril JovoScript Dosor
13

Wrr'rpcnru )
Object window merupakan hirarki tertinggi dari object DOM yang
mempresentasikan jendela browser yang sedang terbuka. Dari objek function goReload(X
window ini dapat dipanggit objek-objek lain seperti document, location,
history. //refresh/membuka kembali halamannya sendiri
objek window boleh tidak ditulis secara langsung tetapi cukup
location.reload0;
memanggil objek yang dimitiki oteh window. sebagai conioh adatah obje'k
)
document. objek document dapat dipanggil window.document atau
dipanggil secara langsung document. </script>
</head>
MengalihkanRedircd URL <body>
Redirecvmengalihkan URL adalah membuka URL lain pada window yang <input type="button" value="Location,' onclicp="go7an0',/>
terbuka. Pengalihan URL banyak digunakan pada saat proses login. -saa-t
login berhasil, halaman akan dialihkan pada halaman yang diminta. <input type="button" value="Assign" onclick="goAssign0"/>
Untuk mengalihkan halaman, digunakan objek rocation dariwiniow. <input type="button" value="Reload" onclick=',goReload0"/>
<!-- </body>
- file : redirect.html </html>
- dir: JScriptlbabl <!--
- by: ZiDjho - file : tujuan.html
- dir: JScripUbabl
<!DOCTYPE htmt>
- by:ZiDjho
<html>
<head> <IDOCTYPE html>
<title>Source Code JavaScript</tifle> <html>
<scri pt type="texVjavascript">
<head>
function goTan0i <title>Tujua n</title>
//Membuka halaman tujuan.html </head>
window. location="tujuan. html',; <body>
) <h2>Halaman tujuan redirect</h2>
function goAssign0{ </body>
//Membuka halaman tujuan.html </html>
window. location.assign(',tujuan.html");
 JovoScript Source Code Poling Dicoril lovoScript Dosor
15

Hasil eksekusi pada browser akan terlihat seperti gambar berikut.

Mendapatkan URL
URL adalah alamat yang dituliskan pada address bar jendela browser.
Javascript menyediakan objek location pada objek' window untuk
mendapatkan URL tersebut. Berikut source code penggunaan objek
window.location untuk mendapatkan nilai URL.
<!--
- file : URL.htmt
Gambar 1.7 Dokumen redirect.html - dir: JScript/babl

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Source Code</tifle>
<scri pt type="texUjavascript">
Gambar 1.8 Dokumen tujuan.html
Keterangan: //menampilkan URL penuh

0 Window.location document.writeln('<p>href :'+window. location. href+'</p>');

Digunakan untuk mengalihkan/membuka halaman web lain pada //Menampilkan lokasi file pada host
jendela browser yang terbuka. Jika tombol Location diklik maka document.writeln('<p>pathname
halaman akan dialihkan membuka dokumen tujuan.html (Gambar
'+window. location.pathname+'</p>');
1.8).
e Window.location.assign0 //Menampilkan nama host(nama website) dan port

Method assignQ juga digunakan untuk mengalihkan/membuka document.writeln('<p>host :'+window. Iocation.host+'</p>,);

halaman web lain pada jendela browser yang terbuka. Jika //Menampilkan nama host
tombol Assign diklik maka halaman akan dialihkan membuka
docu ment.writeln('<p>hostname
dokumen tujuan.html (Gambar 1.8).
'+window. location. hostname+,</p>');
0 Window.location.reload0
//menampilkan porl yang digunakan
Method reload digunakan untuk memuat ulang halaman web
yang terbuka. document.writeln('<p>port :'+window. location. port+'</p>');
//menampilkan protokol yang digunakan (http, https,ftp, udp)
 JovoScript Source Code Poling Dicori! l<rvoScript Dosor
16 17

document.writeln('<p>protocol :
Docuurrur
'+window.location. protocol+'</p>');
Setiap dokumen HTML dimuat ke dalam jendela browser akan menjadi
//Menampilkan anchor yang digunakan pada URL objek dokumen. Objek dokumen menyediakan akses untuk SEMUA
document.writeln('<p>hash :'+window.location.hash+'</p>'); elemen pada halaman daridalam script.

//Menampilkan parameter URL

Mendapatkan Semua Link Halaman
document.writeln('<p>search :
Untuk mendapatkan semua link (tag a) pada halaman web, JavaScript
'+window. location.search+'</p>'); menyediakan properti document.links yang mengembalikan array dari
</script> objek link yang ada pada halaman. Berikut source code untuk membaca
semua link pada halaman web.
</head>
<!--
<body>
- file : semualink.html
</body>
- dir: JScripllbabl
</html>
- by :ZiDjho
Hasil dari source code di atas tampak seperti gambar berikut.
<IDOCTYPE html>
<html>
<head>
<title>Source Code JavaScript</title>
<scri pt type="text/javascri pt">

window.onload=function0i
var pJmlLink=document.createElement('p');
var link=new Array(document.links.length);
for(var i=0; icdocument. links. length ; i++;i
link[i]=(i+1 )t"."+document.links[i];

)
Gambar 1.9 lnformasi URL pJmlLink.innerHTML="Jumlah Link = "+document.links.length
+" Buah, yaitu :"; . , .
-
var plink=document.createElement('p');
,''-"
.,

plink.innerHTMl=link.join("<brl>")' ; '

li
 JovoScript Source Code Poling Dicori! lovoScript Dosor
18 19

document.body.appendChild(pJmlLink); Mendapatkan Semua Gambar Halaman

document.body.appendChild(plink); JavaScript menyediakan objek document.images untuk mendapatkan
semua elemen img yang digunakan untuk menampilkan gambar. Objek
)
document.images mengembalikan sebuah array yang berisikan objek
</script> dari tag img. Berikut source code untuk membaca seluruh gambar pada
</head> halaman web.

<body> <!--

<div>Aku Div</div> - file : semuagbr.html

<a href="#link1 ">Link 1 <l a><brl> - dir: JScripUbabl

<a href="#link2">Link 2<l a> - by :ZiDjho
<p>Aku Paragraf</p>
<a href="#link3">Link 3<l a><br l> <!DOCTYPE html>

<a href="#link4">Link 4<l a> <html>

</body> <head>

</html> <title>Source Code JavaScript</title>

<scri pt type="texVjavascript">

window.onload=function(X
var pJmlGbr=document.createElement('p');
,{ku Div
var gbr=new Array(document.images. length);
LfoK 1
tirft2 for(var i=0;i<document. images. length i++)1 ;

Aku Paragraf gbr[i]=(i+ 1 )+"."+document. imagesIi]. getAttribute('src');

Link 3
)
Link4
pJmlGbr.innerHTMl="Jumlah Gambar
Jumlah Link:4 Bua.h" yaitu:
"+document.images.length +" Buah, yaitu :";
I .http:/d,ocalhosbjrcript"&ab llsernualink"hto,tl#link I
2.httpJ"localhostrjscriptrbab 1, semualink. htnt#link2 var pGbr=document.createElement('p');
3.btp:r,localhost jscript'bab 1 lsemualink.hbnl#link3
4.http:ir'localhost j scripubab l,'semualink.html#tif,k4
pGbr.innerHlpl1=gbr.join("<br/>");
document.body.appendChild(pJmlGbQ;
Gambar 1.10 Mendapatkan semua link document. body.appendChild(pGbr);

)
</script>
 JovoScript Source Code Poling Dicori! JovoScript Dosor
20 21

</head> <!--
<body> - file : semuaform.html
<div>Aku Div</div> - dir : JScripVbabl
<img src="gambarl .jpg"/><br/> - by:ZiDjho
<img src="gambar2.png'i>
<p>Aku Paragraf</p> <!DOCTYPE html>
<img src="gambar3.gif'/> <html>
</body> <head>
</html> <title>Source Code JavaScript</title>
<scri pt type="texUjavascript">

window.onload=function(X
& localha#jsrripgbahlllerxueqhr"trtn":l $ var pJml Form=document.createElement('p');
var form=new Array(document.forms. length);
var n=1;
for(var i in document.forms)i
if(isFinite(i)){
AkuParagraf
var nama=document.forms[i]. getAttribute('name');
ffii var aksi=document.formsIi].getAttribute('action');

}uilrhh Gambar: 3 Buah, yaihr : var method=document.formsIi].getAttribute('method');

fofm[i]=(n++)*". "+nama+" => "+aksi+" => "+1.ngf[66['
l"garabarl jpg
2"ga:nbar2,prg )
3"gombar3-gif )
pJmlForm.innerHTMl="Jumlah Form
Gambar 1.11 Mendapatkan semua gambar "+document.forms.length +" Buah, yaitu :";
var pForm=document.createElement('p');
Mendapatkan Semua Form Halaman
pForm. innerHTML=form.join("<br/>")'
JavaScript menyediakan objek document.forms untuk mendapatkan
document.body.appendChild(pJmlForm);
seluruh objek form yang ada pada suatu halaman. Berikut source code
untuk mendapatkan semua form. document.body.appendChild(pForm);

)
 JovoScript Source Code Poling Dicori! JovoScript Dosor
22 23

</script> <!--
</head> - file : bytag.html
<body> - dir : JScripUbabl
<form name="login" action="aksi. php" method="G ET"></form> - by : ZiDjho
<form 6gry1g="post datd" action="aksi.php"
method =" POST"></form > <!DOCTYPE html>
<form 63;pg="posffile" action="aksi.php" method="POST" <html>
enctype="m u lti parUform-data"></form> <head>
</body> <title>Source Code JavaScript</title>
</html> <scri pt type="texVjavascri pt">

window.onload=function(X
var arrayDiv=docu ment.getElementsByTagName('div');
. {} localhosti':rrrlrri,Jlnl:jsB:'rrninr.,r,ti'ir! *
''' '' '''::': il::::_-:'::-:_.'"'::_-:_rr: i ::: v ar arr ay P =docu m e n t. g etE I eme nts ByTa g N a me(' p' );

Jumtrah Form = 3 Buah. -3-aitu : var arraySpan=document.getElementsByTagName('span');

i. logilr =5 aksi.php:> GET var pHasil=document.createElement('p');
!, post*data => alcsi.php => POST
3. p*tt_fib => slsi.php:> POST pHasil.innerHTML='Jumlah Tag Div :'+ arrayDiv.length;
pHasil.innerHTML+='<br/>Jumlah Tag P :'+arrayP.length;
Gambar 1.12 Mendapatkan semua form pHasil.innerHTML+='<br/>Jumlah Tag Span
'+arraySpan.length;
document.body.appendChild(pHasil);
Elemen adalah setiap tag HTML yang berada pada halaman web.
Elemen-elemen tersebut akan diubah menjadi objek DoM setelah kode
HTML selesai dieksekusi oleh web browser. Untuk mendapatkan sebuah </script>
elemen dapat dilakukan melalui 3 cara, yaitu melalui nama tag elemen, </head>
atribut name elemen, dan atribute id elemen.
<body>
Mendapafl<an Elemen dengan Nama Tag <div>Div 1</div>

Cara pertama untuk mendapatkan elemen adalah melalui nama tag, yaitu <span>Span 1</span>
menggunakan method document.getElementsByTagName0. Method <div>Div 2<ldiv>
tersebut akan mengembalikan seluruh elemen dalam bentuk array sesuai
nama tag yang diinginkan. <p>Paragraf 1<lp>
<span>Span 2<lspan>
 24 JovoScript Source Code poling Dicoril ItrvoScript Dosor

<p>Paragraf 2<lp> - by :ZiDjho

<span>Span 3</span>
</body> <!DOCTYPE html>
</html> <html>
<head>
<title>Source Code JavaScript</title>
ffi lccalhostrlsrrlilt/tu*i:t/byrag.hfr::t </head>
*ii;aia;'|:::1:li:ltii::ii:I",:i::;:I:;;:I::I:_rifi:::il;:;:f:::i:1if_;;:i::t::::i:::::
Div I <body>
Span I <input name="nama" value="Mr.Z" type="text"/><br/>
Div 3 <button name="nama">Tombol</button><br/>
Paragraf I <img name="nama" gr6="gambor1.png" width="50" height="50"
alt="GAMBAR"/><br/>
Span I
<input name="alamat" value="Alamat" type="text"/>
Paragraf 2
<scri pt type="texUjavascri pt">

Span 3 var p=document.createElement('p');

var elemen=document. getElementsByName('nama');
"Iuildah TagDiv: !
Jurnlah TagP :2 p.innerHTML='Jumlah :'+elemen.length;
Junlah Tag Span:3 for(var i=0;i<elemen.length i++)
;

p.innerHTML+='<br/>Type :'+elemen[i].nodeName;
Cambdr 1.13 Mendapatkan elemen berdasarkan nama tag document. body.appendChild(p);
</script>
Mendapat<an Elenren dengan Nama Elemen
</body>
sebuah elemen mempunyai atribut-atribut, di antara adalah name. Untuk
mendapatkan elemen berdasarkan atribut name dapat digunakan </html>
perintah document.getElementsByName0. Method ini akan
mengembalikan seluruh elemen yang mempunyai name yang sesuai
dalam bentuk array.
<!--
- flle : byname.html
- dir: JScripUbabl
 26 JovoScripi Source Code poling Dicori!
lovoScript Dosor

//Mendapatkan elemen inPut

var txtNama=document.getElementByld('nama');
//saat input dituliskan
txtNama.on keyu p=fu 6s1;..,r,
f.a
lYr
document.getElementByld('hasil'). innerText=this.value;
i
)
,gff**t )
Juurlair : 3 </script>
Type: iNPUT </head>
Tlpc: BUTTON
T3pe : IIr{G <body>
<i n put name="nama" type="text" value=" M r .Zx" l > <br l >

<input id="nama" type="text" value="Mr.Z"/>

Gambar 1'14 Mendapatkan eremen berdasarkan
narna eremen
<div id="hasil"></div>
Mendapat<an Elemen dengan lD Elemen </body>
cara ketiga adarah mendapatkan eremen
berdasarkan atribut id yang </html>
dimiliki oleh elemen. Method yang digunakan adalah
document'getEremenByrd0 yang mengemolti6n oniei tunglrr
<!-- "r"r"n.
- file : byid.htmt. , (;:l?ffi1!:sltr,;y1*ri11y:,*i;i1'rlur *ffi
- dir : JScripVbabl MrZ
-by:ZiD)ho ,h!1,Jam S91
Mr.Java Scr

<IDOCTYpE htmt>
Gambar 1.15 Mendapatkan elemen berdasarkan lD elemen
<html>
<head> Mendapat<an Elemen dengan Nama Kelas Elemen
<title>Source Code JavaScript</tifle> Perintah yang digunakan untuk mendapatkan elemen berdasarkan nama
kelas adalah document.getElementsByClassNamefl. Method tersebut
<script type="texUjavascript">
mengembalikan array dari elemen yang sesuai dengan nama kelas.
window.onload=function Source code berikut melakukan pencarian elemen berdasarkan nama
0i
kelas kemudian menampilkan informasinya pada sebuah alert.
28 JovoScript Source Code poling Dicoril JovoScript Dosor

<l-- <div class="huruf'>Div Class : huruf</div>

- file : byClassName.html <div class="lain">Div Class : lain</div>
- dir: JScripVbabl <input class="huruf' value="Class : Huruf'/>
- by:ZiDjho <input class="lain" value="Class : lain"/>
</body>
,..

</html>
<IDOCTYPE htmt>
<html>
<head>
<title>Source Code JavaScript</tifle>
<script type="text/javascri pt">
onload=function0{
var kelas=document. getElementsByClassName(,huruf
);
var namatag=new Array(kelas.length);
for(var i=0; i<kelas. len gth ; i++
;i
namatagIi]=kelas[i].tagName+'=>'.
if(!/inpuVi.test(ketasIi].tagName)X
namatag[i]+=kelas[i]. innerHTML;
Gambar 1.1 6 getElementsByClassName
)elsei
namatagIi]+=kelas[i].value; Mendapafl<an Elenen Form
) Untuk mendapatkan elemen Form, seperti input atau select Anda dapat
menggunakan nama form diikuti nama atau id elemen input. Perhatikan
)
source code berikut.
alert('Elemen Class Huruf\n,
<!--
+'Jumlah :'+namatag.length
- file : elemenForm.html
+'\n'+namatag.join('\n,));
- dir : JScripUbabl
)
- by: ZiDjho
</script>
</head>
<IDOCTYPE html>
<body>
 JovoScript Source Code Poling Dicoril
30 .lovoScript Dosor
31

<html>
<input id="user" type="text"/>
<head>
<input ;6="pass" type="text"/>
<title>Source Code JavaScript</title>
</form>
<scri pt type="texUjavascript">
</body>
window.onload=fu nction(X
</html>
l*
login : Nama form
username : nama elemen input
pass : nama elemen input
*l

var username=document.login. username;

var pass=document. login. pass;
username. onkeyup=fu 6ction0{
Gambar 1.17 Mendapatkan elemen form
//hasil : nama form
//user: id elemen
ArRaurE Euruenr
document.hasil. user.value=username.value;
Sebuah elemen tag mempunyai atribute yang dapat digunakan untuk
) mendapatkan nilai dari atribut tersebut atau mengeseVmemberikan nilai
pass.onkeyup=function 0{ atribut tersebut.

//pass : id elemen
Mendapatkan dan Memberikan Nilaidari Elemen Form
document. hasil.pass.value=pass.value;
Sebuah elemen form mempunyai atribut value yang digunakan untuk
), mengeset dan mendapatkan nilai dari input yang ditampilkan.
</script> Berikut source code yang digunakan untuk mendapatkan nilai input nama
</head> dan mengubah nilai dari input tersebut.

<body> <!--

<form name="login"> - file : atributeNilai.html

<input name="username" type="text"/> - dir: JScriptlbabl

<input n"6g="pasS" type="password"/> - by:ZiDjho

</form>
<form name="hasil"> <!DOCTYPE html>
 JovoScript Source Code Poling Dicori! lovoScript Dosor
33

<html>
<head>
<title>Source Code JavaScript</title>
</head>
<body> Gambar 1.19 Nilai elemen input diubah melalui JavaScript
<input type="text" id="nama" name="nama', value="Abu Asiah,'
l> Mendapafl<an dan Memberikan Teks dari Elemen Tag
<scri pt type="texVjavascri pt"> Berbeda dengan elemen input, elemen selain input, baik div, p, h1-h6,
span, dan lainnya untuk mendapatkan teks di dalamnya digunakan
var txtNama=document.getElementByld('nama'); atribute innerHTML atau innerText. Properti innerHTML akan
mengembalikan teks dan elemen anak yang dimiliki oleh elemen
tersebut. Sedangkan innerText akan mengembalikan teks yang
// Mendapatkan nilai elemen input dikandung dengan membuat tagtag yang ada.
var nama=txtNama.value; Source code berikut menunjukkan perbedaan innerText dan innerHTML
txtNama.onblur=alert('Nama Anda adalah :'+nama); yang dimiliki elemen div dan menampilkannya pada sebuah alert.
<!--

// Mengeset elemen input - file : atributeTeks.html

txtNama.value="Java Script"; - dir: JScripVbabl

</script> - by:ZiDjho
</body>
</html> <IDOCTYPE html>
<html>
<head>
<title>Source Code JavaScript</title>
<script type="texVjavascri pt">
onload=function(X
var div=document.getElementByld('isi');
d iv.onclick=fu nction0{

Gambar 1.18 Alert menampilkan nilai elemen input //mendapatkan seluruh elemen dan teks didalam tag div
var elemen=div. innerHTML;
//Mendapatkan teks dari elemen div,
 JovoScript Source Code Poling Dicori! l<rvoScript Dosor

. :., , t?qtrei-q*S[il
//sebuah elemen akan diabaikan . !sour(.(odcJeas(rirt ' 1.'
' L: .__ _-
var teks=div.innerText; d-dlr*:::n:::,::r,:"i:.:::,,1:.* :.i
t
1,, :,., -1-.9,,
,,-
//menampilkan jendela alert i Ini adalah tcks pada tag div id isi i
I

alert('tag div\nelemen : '+elemen+" \nteks : "+teks);

t.g di,
// mengubah teks div
lni add.h td6 pada tag dh A k"t
// dengan membungkus teks dengan tag h2 <dr> a*s & di dtban die</div>

tltt r hidatahtrt5 sa& try dry id lei

div. in nerHTM L="<h2>"+elemen+"</h2>"' .ku diY di ddan &.

)
)
</script> Gambar 1.21 Alert menampilkan lnnerText dan innerHTML Dari Div saat diklik
</head>
*asrrl* .l{#ffi _*
<body> {&sowacoae
; "i: 'ii 6 S lo{alhostlj5.ripi./h,*h1/atrihi:teTekrhtn:i f
<div id="isi">
lni adalah teks pada tag div id isi
Ini adalah teks pada tag div id isi
<div> aku div di dalam div</div> * tffidttdtostsy$ .

</div> tig diY

lbmm: {tC>{/hlr<l2t
}ti rdrt$t k pda taq div id ki
</body> rdie| rlE div di ddarlt dry{ldiv>
{/lG}
</html> tctri Ini.ddrh r!&r Fadc t dlv id iri
atudru di drbm div

-.-,,',,,,.....-.-:k-ji.-...,;
'S
tsti*liffiX
Sourre Code laaScript

, '. & *limltrcslill,iff11.,:;d,:ll.i"l*,ix1:r * \

Ini adalah teks pada tag div id isi
Gambar 1.22 Alerl menampilkan innerText dan innerHTML baru
aku div di dalam div I

Mendapafl<an ld dan Class Elemen

Gambar 1.20 Kondisi awal elemen Untuk mendapatkan nama tag dapat digunakan atribut tagName. Untuk
nam lD, digunakan atribut id. Sedangkan untuk nama CLASS, digunakan
atribut className. Selengkapnya perhatikan source code berikut.
<!--
atributeldClass.htm
I
36
JovoScript Source Code Poling Dicori!
37

- dir: JScripUbab3
- by:ZiDjho

<!DOCTYPE html>
<html>
<head>
<title>Source Code JavaScript</title>
<script type="texUjavascri pt">
onload=function(X Gambar 1.23 Alert Nama Tag, ld, dan Class awal

var div=document.getElementByld('isi');
div.onclick=function0{
alert('Nama Tag : '+this.tagName
+'\nlD Elemen : '+ this.id
+"\nClass Elemen : "+this.className);
this.className="nama-kelas-baru";

)
)
Gambar 1.24 Alerl setelah Class diubah JavaScript
</script>
</head> Mendapafl<an Elemen Child
<body> Elemen child adalah elemen yang berada di dalam elemen lainnya.
,,
<div id="isi" class="konten border">TagtDiv</div> Untuk mendapatkan elemen child dapat digunakan atribut children atau
childNodes. Atribut children akan mengembalikann array dari objek
</body>
(DOM) elemen. Sedangkan childNodes akan mengembalikan objek
</html> elemen dan teks ada.
Source code di bawah digunakan untuk memanipulasi elemen label dan
paragraf. Dimana elemen label dan p akan ditambahkan class 'pilih'
kemudian pada div id hasilakan menampilkan nama tag elemen anak.
<!--
- file : atributeElemenChild.html
- dir: JScripUbab3
38 JovoScript Source Code Poling Dicorit
39

- by:ZiDjho <label>Label</label>
<span>Span</span>
<IDOCTYPE html>
<p>Paragraf</p>
<html>
<div>Div</div>
<head>
</div>
<title>Source Code JavaScript</tifl e>
<div id="hasil">Elemen Anak Div lnduk = </div>
<scri pt type="texUjavascript">
</body>
onload=function0{ </html>
var divlnduk=document. getElementByld('divlnduk');
for(var i=0; i<divlnduk.children. length; i++y1

document.getElementByld('hasil').innerHTML+=divlnduk.childrenI
i].tagName+", ";
if(/labell^p/i.test(divl nduk.chitdren[i].tagName)){
ffi*o*
divlnduk.children[i].class11",n6='pilih'i

) I
J
Div
) I
l
I
) I
t
</script> 1
t

<style>
Gambar 1.25 Atribute Children
.pilih{
border: 1px solid #999; MEnltnuRT DAnI MHIMSIPI<nII ELTMEN AI{nx
background: #999; Untuk membuat elemen baru JavaScript menyediakan method
padding: Spx;
document.createElement0. Sedangkan untuk menyisipkan elemen
sebagai elemen anak digunakan perintah objek.appendChildQ. Berikut
) source code yang digunakan untuk membuat elemen baru (p,input dan
</style> button) dan menyisipkannya sebagai elemen anak dari body.
<!--
</head>
- file : elemenBaru.html
<body>
<div id="divlnduk"> - dir: JScripVbab3
40 JovoScript Source Code Poling Dicori! lovoScript Dosor

- by:ZiDjho
,.^---*.."""-i:liEiitrffiiin--***.-,.-.-., ..

;' SsourceCodeJavaftript \-
<IDOCTYPE html> i '+ "i' G :m bcalhostljscriiltlb*l:rLJe!*nr*n**ru.lrr*i *l {,
<html> i
J
raragraf
<head>
<title>Source Code JavaScript</tifle> L__:__-::"_:-iM
<scri pt type="texUjavascri pt">

onload=function0i Gambar 1.26 Hasil pembuatan elemen dan menyisipkan elemen

v?r p=6s.rrent.createElement('p');
p.innerHTML="Paragraf'; JENDHLA DIALOG
var text=document.createElement('input,); Terdapat beberapa jenis jendela dialog yang disediakan JavaScript, yaitu
alert, confirm, prompt, dan print.
text.setAttribute('type','text');
var button=document.createElement('input');
Amnr
button.setAttribute('type','button');
Jendela alert digunakan untuk menampilkan pesan tunggal dalam bentuk
button.setAttribute('value','Button'); jendela modal. Jendela alert hanya mempunyai satu buah tombol, yaitu
button.onclick=fu nction0{ OK untuk menutup jendela alert tersebut. Berikut source code
penggunaan alert.
alert('Hello Button');
<!--
)
- file : alert.html
document.body.appendChitd(p);
- dir: JScripllbabl
document.body.appendChild(text);
- by:ZiDjho
document.body.appendChild(button);
) <IDOCTYPE html>
</script>
<html>
</head>
<head>
<body>
<title>Source Code JavaScript</title>
</body>
<scri pt lype="texVjavascri pt">
</html>
window.alert('Hello Aku Jendela Alert....');
alert('Aku alert kedua');
 JovoScript Dosor
JovoScript Source Code Poling Dicoril 43
42

</script> if(awab){

</head> alert("Tentu Saja...");

<body> )else{

</body> alert('Sulit kale...');

</html> )
</script>

S Uman di [acalhoet says: </head>

<body>
Ftelte Aleu Jendeta Ahrt".".
</body>
</html>

Gambar 1.27 Jendela Alert $ tanran di localhost nrenyatakan

Apaftehh$c*pt ku Mudah ?
Cor{rrRru
Jendela konfirmasi digunakan untuk melakukan konfirmasi kepada
pengunjung web. Jendela ini mempunyai 2 buah tombol, yaitu OK dan
Batal (Cancel). Saat jendela confirm ditutup, jendeta ini a(an
mengembalikan sebuah nilai boolean. Tombol OK untuk true dan torhbol
Batal untuk false. Gambar 1.28 Jendela dialog Confirm
<l--
$, t^enran di hcdhcst sqps:
- file : confirm.html i

- dir: JScripVbabl Tentu SaF..,

- by: ZiDjho ffI Ctgeh dbloq tain dari [cn"r*n ]ni.

<IDOCTYPE html>
<html>
<head> Gambar 1.29 Jendela Alert

<title>Source Code JavaScript</title>

<scri pt type="texUjavascript">
houpr
Jendela dialog prompt digunakan untuk menampilkan TextBox tunggal.
var jawab=confirm('Apakah JavaScript itu Mudah ?');
Nilai dari TextBox akan dikembalikan saat jendela prompt ditutup. Saat
 JovoScript Source Code Poling Dicori! l, rvrrScript Dosor

tombol OK ditekan akan mengembalikan nilai TextBox yang diinputkan

oleh user. Apabila tombol Batal yang ditekan, prompt akan
mengembalikan nilai NULL. * localhostli:tr,*trhai-)l.iprrjt.rltit fil:*1i {h
<!--
IIeILo Mr. JavaScript
- file : prompt.html
- dir: JScripVbabl
- by :ZiDjho Gambar 1.31 Pembacaan nilai Prompt

PruruT
<IDOCTYPE html>
Jendela dialog print digunakan untuk menampilkan jendela untuk
<html>
rnencetak halaman web. Berikut source code untuk mencetak sebuah
<head> halaman web.
<title>Source Code JavaScript</title> <!--
<script type="text/javascri pt"> - file : print.html

var nama=prompt('Masukkan nama Anda !'); - dir: JScripVbabl

docu ment.write(' <h2>Hello'+nama+' <lh2>'); - by :ZiDjho
</script>
</head> <IDOCTYPE html> 1

<body> <html>
</body> <head> l

</html> <title>Source Code JavaScript</title>

<style>
span{
padding: 1Opx 50px;
background: #999;
border-radius:5px;
)
</style>
<script type="texUjavascript">
Gambar 1.30 Jendela Prompt
function cetakQ{
h{i.;')
It1.,t111 (;1; , "-., '.'.
,1 ).rr i ', , :.
- I
' ,trr.rl :'
 JovoScript Source Code Poling Dicori.

window.print0;
)
</script>
</head>
<body>
<span onclick="cetak0">Print<lspan>
</body>
</html>

V'arlfrhel dan
Gambar 1.32 Halaman Print
Sferater

Gambar 1.33 Jendela dialog Print

 JovoScript Source Code Poling Dicori! Vrrriobel don Operotor
48 49

ariabel adalah sebuah identifier/pengenal/nama yang mempunyai var varStr="18";

nilaiyang dapat berubah-ubah. Variabel merupakan bagian dalam
document.write("varlnt = 1 985")i
sebuah bahasa pemrograman yang digunakan untuk menyimpan
data sementara waktu. document.write("<brl>varBool = true");
Dalam JavaScript pendeklarasian variabel dilakukan tanpa menentukan document.write("<br/>varFloat = 1 8.67");
tipe secara explicit. Tipe data variabel akan menyesuaikan dengan nilai
document.write("<brl>varStr ='1 8"');
dari variabel tersebut.
document.write("<br/>varlnt+5 = " + (varlnt+s));
VARIABEL document.write("<br/>varlnt+varFloat = " + (varlnt+varFloat));

Variabel dapat dideklarasikan dengan keyword var atau tanpa keyword. document.write("<br/>varlnt+varBool = " + (varlnt+varBool));
Pendeklarasian variabel dengan keyword var pada suatu blok akan document.write("<br/>varlnt+varStr = " + (varlnt+varStr));
menyebabkan variabel itu hanya dapat diakses pada blok itu atau disebut
variabel local. Sedangkan pendeklarasian variabel tanpa var di mana pun function fungsi0{
akan dianggap sebagai variabel global sehingga dapat diakses di mar(a var varlntlokal=2000;
pun.
varlntGlobal=1000;
<!--
document.write("<br/>==--FU NGSI-===r')'
- file : variabel.html
document.write("<br/>varlntlokal = " + (varlntLokal));
- dir: JScripVbab2
document.write("<br/>varlntGlobal = " + (varlntGlobal));
- by:ZiDjho
document.write("<br/>varlnt = " + (varlnt));
document.write("<br/>====AKH lR pl,f NQgl====").
<!DOCTYPE html>
)
<html>
fungsi0;
<head>
document.write("<br/>varlntGlobal = " + varlntGlobal);
<title>Source Code JavaScript</title>
document.write("<br/>varlntlokal = " + varlntlokal);
<scri pt type="texUjavascript">
</script>
// integer
</head>
var varlnt=1985;
<body>
// boolean
</body>
var varBool=true;
</html>
llfloal
var varFloat=18.67;
// string
 JovoScript Source Code Poling Dicoril Vr rriobel don Operotor
51

Anda akan melihat pada browser statemen terakhir JavaScript tidak <!--
ditampilkan (lihat gambar di bawah). Hal ini karenakan variabel tersebut
- file : assigment.html
belum didefinisikan sehingga menimbulkan kesalahan. Hal tersebut
menunjukkan variabel lokal tidak terbaca di luar blok variabel tersebut. - dir: JScriptlbab2
- by : ZiDjho

<!DOCTYPE html>
<html>
varBo*l : trur <head>
va:Flcat: L8.6?
<title>Source Code JavaScript</title>
lnafSb: 'trfi'
varlnt+S: 1990 <scri pt type="texVjavascri pt">
varlut+varFloat :
3003 - 57
var nilaiX=10;
va.rlnu-rnsr8*ril :
I 9Sd
:
xarlnt*varSk 1 985 1 *
var nilaiZ=Z9;
_-FLTNGSI: document.write('var nilaiX ='+nilaiX);
vaf,irtlokal: f,S00
docu ment.write('< br/>va r nilaiZ ='+n i laiZ) i
var,IntGlobatr: 10*S
varlnt: 19E5 d ocu me n t.write (' < b r/> n iI aiZ = 3
+ <= : : = > nilaiZ= nilaiZ+ 3' );

docu ment.write('<br/>n il aiZ =' + (n i laiZ+ =3;;;

r.arlntGtrCIhal: iS#S
document.write('<br/>nilaiZ -= nilaiX <=::=> nilaiZ=nilaiZ-
nilaiX');
Gambar 2.1 Deklarasi variabel docu ment.write('<br/>n i aiZ =' + (n ilaiZ-=n ilaiX));
I

d ocu m e nt. write (' < b r/> n iI aiZ * = 2 <= :' => nilaiZ=nilaiZ* 2' );
OPERATOR d ocu m e n t.write (' < b r/> n iI aiZ =' + (nilaiZ* =2));
Operator adalah simbol yang digunakan untuk melakukan operasi dua
nilai atau lebih. Operator berdasarkan fungsinya dapat dikelbmpokkan
document.write('<brl>nilaiZ l- nilaiX <=::=>
menjadi beberapa jenis, yaitu operator assignment, aritmatik, logika, nil aiZ= nil aiZln iI a X' ) ;
i

kondisional, string, dan operator perbandingan.

d o c u m e n t. w ri te (' < b r/> n i I aiZ =' + (nil aiZ I = nil aiX)) ;

= > nilaiZ=nilaiZ%
o/o=
d ocu m e n t.write (' < b r/> n iI aiZ 5 <= :: n i I a iX'
OpTRnToRASSGNMENT );

d ocu m e nt.write (' < b r/> n iI aiZ =' + (nil aiZ%= 5));
Operator assignment adalah operator yang digunakan untuk memberikan
nilai pada suatu variabel. Operator assignment asli disimbolkan dengan </script>
karakter = (sama dengan). Operator tersebut dapat digabungkan dengan </head>
operator aritmatik sehingga dapat melakukan operasi aritmatik.
<body>
 JovoScript Source Code Poling Dicori! Voriobel don Operotor

</body> <title>Source Code JavaScript</title>

</html> <scri pt type="texUjavascript">

Statemen var nilaix=10, berarti memberikan nilai 10 pada variabel nilai X. var nilail=2000;
Berikut hasil penggunaan operator assignment dan penggabungan var nilai2=1985;
dengan operator aritmatik.
document.write('n ilai 1 =2000<br/>');
document.write('nilai2= 1 985<br/>');
ffi localhost/J sdr jf l,rhBk;lopcr.31*rArsiS*rent. *trr: | *
document.write('Penambahan : nilail+nilai2 ='+ (nilail+nilai2)
var nilal( = l0
+,,<br/),,),
var rulaiZ: ?0
nilaiZ r:3
<::=> nilaZ=n'laiZ+3
document.write('Pengurangan : nilail-nilai2 ='+ (nilail-nilai2)
a$aiZ = 33
rdhiZ : nfraiX <=:::> nilaZ=rdlaiz-dlaIK +,,<br/>,,)i
nilaiT= t3
nilaiZ *= 2 <=:r=> nilaiz:rrilaZ*f document.write('Pembagian : nilail/nilai2 --'+ (nilail/nilai2)
rtraiz: ?5
ri,itaiz l: nilaX <::::> nilaZ:oilai?aikiX +"<br/>"),
nilaiz ::.6
nilaZ olo:5 <::r=> rrilaiZ=ullaZ"y'onilail( document.write('Perkalian : nilail*nilai2 ='+ (nilail*nilai2)
flI{iz: l-6 +,,<br/),,)i I

Gambar 2.2 Operator Assignment document.write('Modulo (Sisa Bagi) : nilail o/onilai2 = '+
(nilail %nilai2) +"<br/>");
OprnnroRARrrhIAnK document.write('lncrement : nilail++ = '+ (nilail++) +"<brl>");
Operator aritmatik adalah operator yang digunakan untuk melakukan document.wdte('lncrement : ++nilai2 = '+ (++nilai2) +"<brl>");
operasi matematika, baik penjumlahan, pengurangan, perkalian,
pembagian, dan modulo. Berikut contoh source code penggunaan document.write('Decrement : nilail: ='+ (nilail ++) +"<brl>");
operator aritmatik. document.write('Decrement : -nilai2 ='+ (++nilai2));
<!-- </script>
- file : aritmatik.html </head>
- dir: JScripllbab2 <body>
- by :ZiDjho </body>
</html>
<IDOCWPE html>
Source code di atas jika dijalankan pada browser akan tampak seperti
<html> gambar berikut.
<head>
 r
Voriobel don Operotor
JovoScript Source Code Poling Dicoril 55
54

var nilai2=false;

S io(alhostlis{"*fiV*nh:Jarltff alin!]'rfl:i *
document.write('nilail :'+nilail );

nilqil:2000 document.write('<br/>nil ai2 :' +nilai2);

nihi2=1985
Pcsambahm: aikit+nitaD = 3985 document.write('<br/>==-=$$====')'
Pcagurangm: nihil-nila2 = 15
Pembagian: nilail niai2 = 1,0075566?50629723 document.write('<br/>nilail && nilail '+ (nilail && nilail));
Pe*alian: nilail*niai2 = 3970000
Modulo (Sim Bagi) : nitail%nihi? = l5 document.write('<br/>nilail && nilai2 '+ (nilail && nilai2));
Iacremmt: rilail++ = 3666
lacrcmeot: *rt[aD = 1986 document.write('<br/>nilai2 && nilai 1 '+ (nilai2 && nilail));
Dccrement : niail- = 2S0l
Decremmt : -nilai2 : 1987 document.write('<br/>nilai2 && nilai2 '+ (nilai2 && nilai2));
document.wdte('<br/>====$-===');
Gambar 2.3 Operator aritmatik
document.write('<br/>nilail & nilail '+ (nilail & nilail));
document.write('<br/>nilail & nilai2 '+ (nilail & nilai2));
Operator logika adalah operator yang digunakan untuk melakukan document.write('<br/>nilai2 & nilail '+ (nilai2 & nilail ));
operasi boolean (true dan false) atau (1 dan 0). Pada JavaScript terdapat document.write('<brl>nil ai2 & nilai2 '+ (nilai2 & nilai2));
3 buah operator logika, yaitu AND (&& dan &), OR (ll dan l), adn NOT(!).
</script>

Logika AND (&& dan &) </head>

Operator AND akan menghasilkan nilai true atau t hanya jika kedua <body>
operand bernilai true. Sedangkan selainnya akan menghasilkan nilai </body>
false. Untuk lebih memahami perhatikan source code tabel kebenaran
operasiAND berikut. </html>

<!--
- file : logikaAnd.html t:) localhoslJlj( r!pLl!]:al,l?;1{i;!tnllr-ri.tli{!r d}

niLail : tnrc
- dir : JScriptlbab2 nilai]
:&&:; false
- by:ZiDjho nitrai1&& nilail : true
nilail && aitrai2: falre
oilai2 && riail : falx
lilaif, && oiiai2: fal*
<!DOCTYPE html> rilail &ailail :1
nilail & oilai2: O

<html> ollai2&rdait rO
oilaiS&nilaiZ:O
<head>
Gambar 2.4 Logika And
<title>Source Code JavaScript</title>
<scri pt type="texUjavascript">

var nilail =true;

 JovoScript Source Code Poling Dicoril V( nobel don Operotor
57

</head>
Logika oR (lldanl)
<body>
Logika oR akan menghasilkan nilai true apabila nilai operand true lebih
banyak atau sama dengan nilai operand false. Berikut source tabel </body>
kebenaran operasi logika OR.
</html>
<!--
- file : logikaOr.html
- dir: JScriptlbab2
- by:ZiDjho

nilail il nilail : tnp

<!DOCTYPE html> ndail il nilail: tuc
ndai? jl rnlail = rue
<html> niai2 il nilai?: falsc

<head> 'ln,il I nilail:1

nilaillrdlai:=l
<title>Source Code JavaScript</title> ndsi2lnilail-I
nnai2 i nnaD:0
<script type="texVjavascript">
var nilail=true; Gambar 2.5 Logika OR

var nilai2=false;
Logika Not (!)
document.write('nilail :'+nilail);
operator Not digunakan untuk membalikkan suatu nilai boolean. Apabila
document.write('<br/>n il ai2 :' +ni12i2} operand bernilai true maka hasilnya adalah false dan sebaliknya jika
operand bernilai false maka hasilnya adalah true. Berikut source code
docu ment.write('< br/>====== == == ===');
tabel kebenaran logika Not.
document.write('<br/>nilail ll nilail ='+ (nilail ll nitail));
<!--
document.write('<br/>nilail ll nilai2 ='+ (nilail ll nitai2)); .
- file : logikaNot.html
document.write('<br/>nilai2 ll nilail ='+ (nitai2 ll nitail));
- dir: JScriptlbab2
document.write('<br/>nilai2 ll nilai2 ='+ (nilai2 ll nilai2));
- by:ZiDjho
docu ment.wdte('< br/>===== == ======');

document.write('<br/>nilail I nilail ='+ (nilail I nilail));

<!DOCTYPE html>
document.write('<brl>nilail I nilai2 ='+ (nilail I nilai2));
<html>
document.write('<br/>nilai2 | nilail = '+ (nitai2 | nilail ));
<head>
document.write('<br/>nilaiZ I nilai2 ='+ (nilai2 | nilai2)); <title>Source Code JavaScript</title>
</script>
<scri pt type="texUjavascri pt">
 T

JovoScript Source Code Poling Dicori!

58
Voriobel don Operotor
59
var nilail =true;
var nilai2=false;
S localhorl is{, $:j h.rr,;. ,+o:r.,}1i. : ^l nr *
document.write('nilail :'+nilail ); 'il

rdail : truc
document.write('<br/>nil ai2 :' +nilai2); nilaif : false
document.write('<br/>============='); ldlail = 15;o
i

document.write('<br/>!nilail ='+ (!nilail )); lnilaG = true l

'l

docu ment.write('<br/> ! n i lai2 =' + (! n ilai2)); rl4 dan 1-l8 => x tiilak lebilr besar dari y l

var x=14,y=18;
Gambar 2.6 Logika Not
document.write('<br/>=-===========<br/>'),
document.write('x=14 dan y='l$ =2'1' Oprn*ronCoNnmorunr-? :
if(!(x>y)){ Operator Conditional merupakan operator yang mempunyai 3 buah
document.write('x tidak lebih besar dari y'); ekspresi. Ekspresi pertama adalah nilai boolean. Ekspresi kedua
dijalankan apabila ekspresi pertama bernilai true. Ekspresi ketiga akan
)else{ dijalankan apabila ekspresi pertama bernilai false.
document.write('x lebih besar dari y'); Dapat dikatakan operator ini merupakan bentuk singkat dari penulisan if
else. Operator ini biasanya digunakan untuk memberikan nilai pada suatu
)
variabel yang mempunyai 2 kemungkinan nilai.
</script>
Bentuk operator ternary:
</head>
(ekspresi boolean) ? (ekspresi jika benar) : (ekspresi jika salah)
<body>
Untuk lebih jelasnya, perhatikan source code berikut.
</body>
<!--
</html>
- file : kondisional.html
- dir: JScriptlbab2
- by: ZiDjho

<!DOCTYPE html>
<html>
<head>
<title>Source Code JavaScript</title>
<script type="texUjavascript">
var kelamin="L";
 t-
JovoScript Source Code Poling Dicoril Voriobel don Operotor
61

kelamin= kelamin=="L"?"Laki-Laki":"perempuan,'; docu ment.write('<pre>');

docu ment.write('kelami n ="L"<br/>') i for(var t=1't<=31 ;t++X
document.write('kelamin-kelamin--"L"?"Laki- // mencetak angka 1 - 31
Laki":"Perempuan"<br/>'); // jika angka kurang dari 10 tambahkan 0 di depannya
document.write('kelamin ='+kelamin)i docu ment.write(t<=9?'0'+t:t);
</script> ll Jika nilai modulo 7 darit = 0
</head> llmaka pindah baris baru
<body> lllainnya berikan tab
</body> document.write(t%7==Q?'\n' :'\t');
</html>
)
docu ment.write('</pre>');
</script>
</head>
<body>
</body>
</html>
Gambar 2.7 Operalor Conditional
Hasil dari pembuatan kalendar di atas tampak seperti gambar berikut.
Contoh kedua adalah menuliskan kalender dari angka 1 - 31 sebagai
berikut.
<!--
- file : kondisional2.html
- dir: JScriptlbab2 s3 u3 04 fi5 0 fl?
frg L0 i,3. tre L3 34
- by :ZiDjho 15 16 17 1.8 19 20 27
44 23 24 25 26 2.7 28
gg

<!DOCTYPE html>
Gambar 2.8 Operator conditional kalender
<html>
<head>
<title>Source Code JavaScript</title>
<scri pt type="texVjavascri pt">
 {

JovoScript Source Code Poling d(coril

62
Voriobel don Operotor
63

Openeron$mlrrtrG docu ment.write(varl nt+varAngkaStr);

Operator string adalah operator yang digunakan untuk melakukan </script>
penggabungan string. Hanya ada satu operator, yaitu +. Apabila terjadi
operasi antara tipe int dengan string maka akan dilakukan operasi string </head>
dan hasilnya dalam bentuk string. <body>
<!-- </body>
- file : string.html </html>
- dir: JScriptlbab2
- by:ZiDjho

<IDOCTYPE html>
<html>
var$tr:nTahw "
<head> varAngk*Str -!'15u
<title>Source Code JavaScript</title> vsrStrtuarlnt : Tahun 1985
varStr.concat(varlnt) = Tahrur 1 985
<script type="texUjavascript">
varlnt+varAngkastr = I 985 15
var varlnt=1985;
var varStr='Tahun ';
Gambar 2.9 Operator String
var varAngkaStr="15";
document.write('varlnt = 1 985'); Oprnaron PEnnnunNcaAN
document.write('<br/>varStr ="Tahun "'); Operator perbandingan adalah operator yang digunakan untuk
docu ment.write('<br/>varAngkaStr =" 1 5"') i
membandingkan sebuah nilai. Jika dua buah nilai memenuhi operasi
perbandingan maka akan menghasilkan nilai true. sebaliknya, jika tidak
document.write('<br/>varStr+varlnt ='); memenuhi akan menghasilkan nilai false.
// Operasi String Huruf dengan lnteger
docu ment.write(varStr+varl nt); Perbandingan Sama fungan (==;
// bentuk lain operasi string operator ini akan membandingkan nilai dari kedua operand (nilai yang
dibandingkan) dengan mengabaikan tipe data yang dimiliki. operator in1
document.write('<br/>varStr. concat(varl nt) =')' dapat digunakan untuk membandingkan nilai string dengan nilai integer.
docu ment.write(varStr.concat(varl nt)); <!--
// Operasi lnt dengan String angka - flle : samadengan.html
docu ment.write('<br/>varl nt+varAngkaStr ='); - dir: JScriptJbab2
- by: ZiDjho
 ry

Voriobel don Operotor

JovoScript Source Code Poling Dicoril 65
64

<IDOCTYPE html>
S laca I hosV: sc ri plllra btlr a madenqa n.hir* { S
<html>
vErIBt = 1985
<head>
<title>Source Code JavaScript</title>
Ilarlllt:1985 =trre
varlEt == 2000 = false
<script type="texUjavascript"> rarl t":*L989"=t!-de
!|arxnt:"2900*=faj.se
var varlnt=1985;
document.write('<pre>'); Gambar 2.10 Perbandingan sama dengan
document.write('varlnt ='+varlnt);
Perbandingan Tidak Sarna Dengn (!=)
document.write('<br/>=============='),
Perbandingan tidak sama dengan (!=) merupakan kebalikan dari
document.write('<br/>varlnt == 1985 ='+ (varlnt==1985)); perbandingan sama dengan (==) sehingga perbandingan ini akan
document.write('<br/>varlnt == 2000 ='+ (varlnt==2000)); menghasilkan nilai true jika kedua nilai operand berbeda.
document.write('<br/>varlnt == "1985" ='+ (varlnt=="1985"))i <!--

document.write('<br/>varlnt == "2000" ='+ (varlnt=="2000")), - file : tidaksamadg.html

document.write('</pre>')' - dir: JScripVbab2

</script> - by: ZiDjho
</head>
<body> <IDOCTYPE html>
</body> <html>
</html> <head>
<title>Source Code JavaScript</title>
<script type="texVjavascript">
var varlnt=1985;
document.write('<pre>');
document.write('varlnt ='+varlnt);
document.write('<br/>==================r);
document.write('<br/>varlnt != 1985 ='+ (varlnt!=1985));
document.write('<brFvarlnt != 2000 ='+ (varlnt!=2000));
 Y
Voriobel don Operotor
JovoScript Source Code Poling Dicori.
66

<head>
document.write('<brFvarlnt != "1985" ='+ (varlnt!="1 985"));
<title>Source Code JavaScript</tifl e>
document.write('<br/>varlnt != "2000" ='+ (varlDt!="2000"));
<script lype="texVjavascript">
docu ment.write('</pre>');
</script> var varlnt=1985;

</head> document.write('<pre>');

<body> document.write('varlnt ='+varlnt),

</body> documgnt.wdte('\n ===--=========r)i

document.write('\nvarlnt .lggg
</html> === ='+ (varlnt===1gg5))i
document.write('\nvarlnt === lQee ='+ (varlnt===2000))l
document.write(\nvarlnt === t'.t ggg" ='+ (varlnt==="1 9g5"))l
document.write('\nvarlnt ===,'!Qee" =,+ (varlnt==="2000,,)),
ffi lacalhost.r'tsrrtpt/i:ah],rrrc{*kmr:rad*.ittr.r:i db
document.write('</pre>');
qErlat = LEtss
:-=:=:=:= </script>
trerlst. 1= 19EE = false </head>
varfut. l= 2000 = krue
varlDt != "L995" = faLse <body>
varlnt != "2000' = trrle
</body>
</html>
Gambar 2.11 Perbandingan tidak sama dengan
Hasil dari source code p.erbandingan identik di atas terlihat pada gambar
Perbandingan ldentik (==-) berikut. Anda dapat melihat perb-edaannya dengan peroaniNlan sama
Perbandingan identik adalah perbandingan untuk membandingkan nilai dengan Gambar 2.10.
dan tipe data yang dimiliki oleh suatu operand. Perbandingan ini hanya
menghasilkan nilai true jika kedua nilai operand adalah sama dan
mempunyai tipe yang sama.
<!--
- file : identik.html
- dir: JScripllbab2
- by: ZiDjho

<IDOCTYPE html>
<html>
 fi

JovoScript Source Code Poling Dicori! Voriobel don Operotor

68 69
l

document.write('\nvarlnt !== "1985" ='+ (varlnt !== "1985"));

document.write('\nvarlnt !== "2000" ='+ (varlnt !== "2000")); 1

S localhost4rrip$hxhI/irl*ntik.htr*l * docu ment.write('</pre>') ;

varlnt = LSE5 </script> i

i
verlat := LgE5 5 t4.re </head>
rrarlat...-:?00S =fe.l,se <body>
I
'I
?arlat: 6!$$$, = falge
rdrlat: *?06flf = false </body> I

</html>
Gambar 2.12 Perbandingan identik

Pelbandingan Tidak ldentik (!==)

Perbandingan tidak identik adalah kebalikan dari perbandingan identik, ffi toca I host{scri plti:r* *};'ti C * ki *e*i ! k.ilt!* i *
dimana perbandingan akan menghasilkan nilai true jika kedua operand cartrnt = L9S5
tidak mempunyai nilai atau tipe yang sama.
?arfat !: lEEs = fal"se
<!-- sarItst l: 2000 true
=
varlnt !- "1965" = true
- file : tidakidentik.html vasIBt r: *10sil" = true
- dir : JScriptlbab2
- by: ZiDjho Gambar 2.13 Perbandingan tidak identik

Pebandingan Lebih Kecil (<)

<!DOCTYPE html>
Perbandingan ini akan menghasilkan nilai true jika operand pertama
<html> mempunyai nilai lebih kecil daripada operand kedua.
<head> <!--
<title>Source Code JavaScript</title> - file : lebihkecil.html
<scri pt type="texUjavascript"> - dir : JScriptlbab2
var varlnt=1985; - by:ZiDjho
docu ment.write('<pre>');

document.write('varlnt ='+varlnt); <IDOCWPE html>

document.write('\n=============='); <html>
document.write('\nvarlnt !== 1985 ='+ (varlnt !== 1985))i <head>
document.write('\nvarlnt !== 2000 ='+ (varlnt !== 2000))i <title>Source Code JavaScript</title>
 JovoScript Source Code Poling Dicori!
Voriobel don Operotor
71

<script type="texUjavascript">
var varx=14;
vat vatz=17; S localtrnstljsrriptlg:ah?/ieh$hk*cil.htrni ft
var vars="15";
varX = 14
document.write('varX ='+varX)i varZ = 17
document.write('<br/>va rZ =' +v arZ), vaf,S: t'15"
document.write('<brFvarS =
varX < varZ: Benar
"1 5"');
vars < rrarZ: Benar
document.write('<br/>va rX < varZ =');
if(varX <varZ){
Gambar 2.14 Perbandingan lebih kecil
document.write('Benar');

)else{ Perbandirygan Lebih KecilSama Dengan (<=;

document.write('Salah'); Perbandingan lebih kecil sama dengan adalah perbandingan yang
menghasilkan nilai true jika nilai operand pertama lebih kecil atau sama
) dengan daripada nilai operand kedua.
document.write('<br/>varS < varZ ='); <!--
if(varS <varZ){
- file : lebihkecilSmDg.html
document.write('Benar');
- dir: JScriptlbab?
)else{ - by:ZiDjho
document.write('Salah');

) <!DOCTYPE html>
</script>
<html>
</head>
<head>
<body>
<title>Source Code JavaScript</title>
</body>
<script type="texVjavascript">
</html>
var varX=14i
var varZ=17;
var varS="17";
document.write('<pre>');
document.write('varX ='+varX + " (int)");
document.write('\nvarZ ='+ varZ + " (int)");
 Jovoscript Source Code Poling Dicoril
72 Voriobel don Operoior
73

document.write('\nvarS = "' +' 17" (String)');

<head>
document.write('\nvarX <= varZ = '+ (varX <= varZ))i <title>Source Code JavaScript</title>
document.write('\nvarX <= varZ = '+ (varZ <= varX))l <script type="texVjavascript">
document.write('\nvarX <= varS ='+ (varZ <= varS))i
var varX=14;
document.write('</pre>')'
var varZ=17i
</script>
var vars="15";
</head>
document.write('varX ='+varx);
<body>
document.write('<br/>va rZ =' +varz);
</body>
document.write('<br/>va rZ = "1 5"' );
</html>
document.write('<br/>varX > varZ =');
if(varX > varZ){
document.write('Benar');
S localho.*{Etnplitrail:/iei}ihkecriSn:Dcl,irtmi $
)else{
varx = l.{ (int}
v8ra = 17 {int} docu ment.wdte('Salah');
vaEs = r1?' {str5"ng}
verx <= ?a!Z = true )
varx <= varz = false
varx <= va-s = true document.write('<br/>varZ > varS =');
if(varZ > varS ){
Gambar 2.15 Perbandingan lebih kecil sama dengan docu ment.write('Benar');

Perbandingan Lebih Besar (>) )else{

document.write('Salah');
Perbandingan lebih besar akan menghasilkan nilai true jika nilai operand
pertama lebih besar daripada operand kedua. )
<!-- <iscript>

- file : lebihbesar.html </head>

- dir: JScripllbab2 <body>

- by:ZiDjho </body>
</html>
<IDOCTYPE html>
<html>
 Voriobel don Operotor
JovoScript Source Code Poling Dicori! 75
74
document.write('\nvarX >= varZ = '+ (varX >= varZ));
document.write(\nvarX >= v arZ =' + (varZ >= varX))l

ffi localhosUjscri pt,ri:ahi./l*tiihhes*r.htrnl S document.write('\nvarX >= varS ='+ (varZ >= varS))l
document.write('<ipre>');
varX: 14
YAIL: a-
tt </script>
TarZ: "15" </head>
varX > vaxZ: Salah
<body>
varZ> varS: Benar
</body>
</html>
Gambar 2.16 Perbandingan lebih besar

Perbandingan Lebih Besar Sama Dengan (>=;

Perbandingan lebih besar akan menghasilkan nilai true jika operand & locathos+]scripfhabiliebihbe**rSm*q.htn:i *
pertama mempunyai nilai yang lebih besar daripada nilai operand kedua.
varlt = 14 {int}
<!-- vBrz = 17 {trt}
vars = "L?o {$trlnE}
- file : lebihbesarSmDg.html varx >= varz = f,alse
v&rx >= qarz = tEue
- dir : JScriptlbab2 vaixFvars=true
- by:ZiDjho
Gambar 2.17 Perbandingan lebih besar sama dengan

<!DOCTYPE html>
<html>
<head>
<title>Source Code JavaScript</title>
<script type="texVjavascri pt">
var varX=14;
var varZ=17;
var varS="17";
document.write('<pre>');
document.write('varX ='+varX + " (int)");
document.write('\nvarZ ='+ varZ + " (int)");
document.write('\nvarS = "'*' 17" (String)');
 JovoScript Source Code Poling Dicori!
76

Strt*netn*r Kt**rtre*
 Struktur Kontrol
JovoScript Source Code Poling Dicori!

)
truktur kontrol merupakan blok kode atau statemen yang
</script>
digunakan untuk jalannya suatu script. Struktur kontrol dapat
dikategorikan menjadi 3 buah bahasan, yaitu struktur kontrol </head>
percabangan, perulangan, dan struktur kontrol kesalahan.
<body>
</body>
</html>
Struktur kontrol percabangan merupakan suatu perintah yang digunakan
untuk membuat suatu keputusan dari beberapa kemungkinan. Terdapat Berikut hasil eksekusi.dari source code penggunaan ff tunggal di
atas.
dua perintah dasar yang digunakan untuk membuat percabangan, yaitu ff Jika script di atas dieksekusi pada jam -g-12 malam Jiaka akan
dan st,lrffch. menghasilkan output seperti berikut.

lr
Struktur kontrol ff merupakan perintah yang paling sederhana untuk
menyeleksi suatu hasil. Source code di bawah merupakan contoh
penggunaan fftunggal, dimana kemungkinan keputusan hanya ada satu.
Statemen kemungkinan hanya akan dijalankan jika ekspresi if
menghasilkan nilai true. Gambar 3.1 Hasil eksekusi lf tunggal
<!--
- file : if.html lr Elsr
- dir: JScripUbab3 Bentuk kedua dari ifadalah if etse, yaitu adany a 2 buah blok statemen
kemungkinan yang dijalankan. Blok ri'akan dijalankan apabila ekspresi
- by:ZiDjho -apabila ff
bernilai true dan blok e/se akan dijalankan ekspresi lf bernilai
false. Berikut source code penggunaan blok ffelse.
<!DOCTYPE html> <!--

<html> - file : ifelse.html

<head> - dir: JScripUbab3

<title>Source Code JavaScript</title> - by:ZiDjho
<script type="texVjavascript">
var waktu=new Date0; <!DOCTYPE htmt>

jam=waktu.getHours0; <html>

console.info(jam); <head>

if(am>=20){ <title>Source Code JavaScript</tifle>

document.write('Waktunya tidur....'); <script type="texVjavascri pt">

 JovoScript Source Code Poling Dicori!
Struktur Kontrol
81
var waktu=new Date0;
jam=waktu.getHours0;
lrEse lr
Bentuk ketiga dari brok
if(am>=18){ .if adarah brok if erse if. pada bentuk ketiga ini,
Anda dapat mendefinisikan banyar. k"rrngr.inan dari suatu nirai
document.write('Malam....'); hanya satu blok yang dieksekusi. dan

)else{ <!--
document.write('Siang...'); - file : ifelseif.html

) - dir : JScripUbab3
</script> - by:ZiDjho
</head>
<bodY> <!DOCTypE htmt>
</bodY> <html>
</html> <head>
<tifle>Source Code JavaScript</tiile>
Berikut hasil eksekusi dari blok ff e/se di atas, dimana blok if akan
dijalankan ketika script di atas dieksekusi pada jam 6 sore sampai 12 <script type="texUjavascript,,>
malam. Sedangkan yang lainnya akan mengeksekusi blok e/se.
var waktu=new DateO;
jam=waktu.getHours0;
I

iffiam<4){ ;ilr

document.wrlte(,Malam...,);
)else iffiam<l0 && jam >=4;1
document.write(,pagi...,); l

Gambar 3.2 Hasil eksekusi blok lf Else )else if(jam<14 && jam >=10)i
document.write(,Siang...,); IL

)else if(jam<19 && jam >=14){ r

document.write('Sore...,);
)else if(am<24 &&jam >=19)i
document.write('Waktunya Tidur...,);
)else{
document.write('Tahajjud...,);
)
 JovoScript Source Code Poling Dicoril
Struklur Kontrol
83
</script>
S^/itch dengan Case Angl
</head>
Bentuk pertama dari brok switch adarah nirai
<body> case yang berupa angka.
Berikut source code switch dengan
O"rrp, angka.
</body>
<!-- "r",
</html>
- fite : switchAngka.html

Berikut hasil eksekusi dari source code di atas. -dir: JScripUbab3

- by:ZiDjho

<IDOCWpE htmt>
<html>
<head>
<title>Source Code JavaScript</tifl
e>
Gambar 3.3 Hasil eksekusi blok lf Else lf
<script type="texUja vascript,,>

SwncH var angka=new DateQ.getDayfl;

switch(angka){
Bentuk kedua dari struktur percabangan adalah blok switch. Berbeda
dengan blok if yang hanya mengeksekusi satu blok maka blok swfch case 0 :
dapat mengeksekusi lebih dari blok pilihan/kemungkinan yang ada. Blok
pilihan/kemungkinan pada switch ini disebut blok case. docu ment.write(Ahafl ,);

break;
Blok case yang tidak diberikan statemen break akan meneruskan
pembacaan pada blok case selanjutnya dan menjalankan blok yang case 1 :
memenuhi persyaratan. Apabila blok case memiliki statemen break maka
document.write('Senin,);
saat blok case dijalankan langsung keluar dari surffch.
break;
Cara kerja dari switch adalah membandingkan nilai parameter switch
dengan nilai blok case yang sesuai. Jika sesuai maka blok case akan case 2 :

dijalankan.
document.write('Selasa');
break;
case 3 :

docu ment.write('Rabu');

break;
case 4 :

document. write(,Kamis');
 Jovoscript Source Code Poling Dicoril Struktur Kontrol
84 85

<html>
break;
<head>
case 5 :

<title>Source Code JavaScript</tifle>

document.write('Hari Special Buatku');
<script type="texVjavascript">
break;
case 6 :
var param='L';

docu ment.write('Sabtu' ); switch(param){

break; case'L':
document.write('Laki-Laki');
)
</script> break;

</head> case'P':
<body> document.write('Perempuan');

</body> break;

</html> default:
document.write('Kelainan )');
:

)
</script>
</head>
<body>
</body>
Gambar 3.4 Hasil eksekusi Switch dengan case angka </html>

S\ /ibh dengan Case Huruf

Bentuk kedua dari switch adalah parameter switch dan case berupa
huruf. Berikut source code Sr,vifch dengan Case berupa huruf.
<!--
- file : switchHuruf.html
Gambar 3.5 Hasil eksekusi Switch dengan case huruf
- dir : JScripUbab3
- by : ZiDjho

<!DOCTYPE html>
 Struktur Kontrol
JovoScript Source Code Poling Dicoril

break;
S\ /itch dengan Banyak Case default:
Pada blok switch di atas, sebuah case hanya menjalankan satu blok document.write('Kelainan )');
:

case. Sedangkan pada source code di bawah, banyak case hanya

menjalankan satu buah blok. Berikut source code syvffch dengan banyak )
case. </script>
<!-- </head>
- file : switchBykCase.html <body>
- dir : JScripVbab3 </body>
- by : ZiDjho </html>

<IDOCTYPE html>
<html>
<head>
<title>Source Code JavaScript</title>
<scri pt type="texUjavascript">
Gambar 3.6 Hasil eksekusi blok switch banyak case
var param='pa';
switch(param){ PERUIANGAN
case'L': Struktur kontrol perulangan merupakan blok yang digunakan untuk
case'l': mengulang-ulang suatu kode/statemen. Struktur kontrol ini sangat
berguna untuk membaca atau menuliskan suatu nilai yang sangat
case'pa': banyak sehingga dapat menghemat kode yang dituliskan.
case'PA': Terdapat dua perintah dasar yang dapat digunakan pada JavaScript,
docu ment.write('Laki-Laki' );
yaitu for dan while.

break;
Fon
case'P':
Bentuk pertama dari perulangan adalah blok for. Blok /lcr mempunyai 3
case'p': buah parameter, yaitu nilai awal, nilai akhir, dan pencacah. Lebih
case'pi': jelasnya perhatikan source code berikut.

case'Pl': <!--

case'w': - file : for.html

document.write('Perempuan'); - dir: JScripVbab3

88 JovoScript Source Code Poling Dicoril Struktur Kontrol
B9

- by: ZiDjho

$ localhostdsrripr,lhahl,if*r.htnii *
<!DOCTYPE htmt>
Ahad
<html>
Sedn
<head>
Selasa
<title>Source Code JavaScript</tifle>
Rabu
<scri pt type="texUjavascri pt">

Var hari=new
Karris

Jumat
Array('Ahad','Senin','Selasa','Rabu','Kamis','J umat','Sabtu');
for(var i=0;i<hari. length; i++X Sabtn

document.write('<p>'+hsriIi]+'</p>';'
Gambar 3.7 Hasil eksekusi blok For
)
</script>
</head> For in digunakan untuk membaca elemen array dan objek. Berbeda
<body> dengan statemen for yang membutuhkan nilai pencacah, for in akan
mengembalikan properti pada objek atau index pada array.
</body>
Statemen:
</html>
for(var index/properti in arraylobjek){
Perulangan di atas digunakan untuk membaca sebuah aray yang objek[properti] ; //mengakses elemen objek
berisikan nama hari. Parameter perulangan i yang dimulai dari 0 selalu
bertambah 1 sehingga mencapai index terakhir array dan berhenti. Nilai array[index] ;//mengakses elemen array
yang dihasilkan oleh perulangan tersebut digunakan untuk mengakses
)
elemen array.
<!--
- file : forin.html
- dir: JScripUbab3
- by:ZiDjho

<!DOCTYPE html>
<html>
<head>
 JovoScript Source Code Poling Dicori!
90
Struktur Kontrol
91
<title>Source Code JavaScript</title>
<scri pt type="texUjavascri pt">

onload=function0{
var objek=document.getElementsByTagName('div');
for(var idx in objek){
objekIidx]. setAttri bute('class','tombol') ;
Gambar 3.8 Hasil eksekusi For ln
objek[idx].innerHTML="Tombol "+idx;
i Wnue
) Perulangan bentuk kedua adalah while. Perulangan while hanya
</script> membutuhkan sebuah parameter yang membatasi perulangan berakhir
dan pencacah berada pada bagian body while.
<style>
Statemen:
.tombol{
Var idx=0;
float: left;
while(idx<=10){
width: 100px;
idx++;
padding: 5px;
)
text-align: center; <!--
border-radius:5px;
- file :while.html
background-color: #999;
- dir: JScripVbab3
margin: 1Opx;
- by: ZiDjho
cursor: pointer;
) <IDOCTYPE html>
</style>
<html>
</head>
<head>
<body>
<title>Source Code JavaScript</title>
<div>Div 't</div>
<scri pt type="texVjavascri pt">
<div>Div 2<ldiv>
cacah=0
<div>Div 3</div>
while(cacah<=5){
</body> </html>
document.write(++s66661'
document.write("<br/>")'
 JovoScript Source Code Poling Dicoril Struktur Kontrol

) - by : ZiDjho
</script>
</head> <!DOCTYPE html>
<body> <html>

</body> <head>

</html> <title>Source Code JavaScript</title>

<script type="texUjavascript">
Perulangan di atas akan berlangsung selama nilai cacah kurang atau
sama dengan 5 (cacah<=S) dan pada body while nilai pencacah selalu nilai=0;
bertambah 1 (++6s926;. do{
document.write(nilai++);
docu ment.write('<br/>');

)while(nilai<5) ;

</scriPt>
</head> 1

<body>
</body>

Gambar 3.9 Hasil eksekusi While </html>

Perulangan di atas akan terus dilakukan selama pencacah (nilai) bernilai

DoWHn-r kurang dari 5 (nilai<S). Perulangan akan menuliskan pencacah tersebut l,

Bentuk kedua dari while adalah do while. Perulangan do while minimal pada browser, seperti gambar berikut.
dieksekusi 1 kali, berbeda dengan whileyang mungkin tidak akan pernah
dieksekusi.
Statemen:
do{

)wh ile(ekspresi_boolean );
<!--
- file : dowhile.html
- dir: JScripVbab3
 JovoScript Source Code Poling Dicori!
Struktur Kontrol

document.write('(berhenti)');
break;

)
)
.
</script> I

</head> ;

Gambar 3.10 Hasil eksekusi Do While <body>

</body>
Bnrnx </html>
statemen break digunakan untuk menghentikan blok perulangan
walaupun nilai pencacah masih memenuhi ekspresi perulangan. Break Script di atas digunakan untuk mencari elemen array dan menghentikan
akan bermanfaat saat melakukan pencarian pada sebuah array dimana peru langan den gan b re a k ketika elemen d itemu kan.
perulangan dapat dihentikan saat elemen telah ditemukan.
<!--
- file : break.html
- dir: JScripUbab3
- by: ZiDjho

<!DOCTYPE html>
<html> Gambar 3.11 Hasil eksekusi break
<head>
<title>Source Code JavaScript</tifl e>
<script type="texVjavascript"> Berbeda dengan break, continue akan melanjutkan perulangan dan
mengabaikan blok statemen di bawah continue. Blok continue akan
var varArray=new Array('agus','redi', Jono','budi', Joko'); melaksanakan perulangan hingga selesai.
document.write("Panjang perulangap ; "+ (varArray.length-1 )); <!--
for(var i=0; i<varArray. length ; i++X - file : continue.html
document.write("<brl>Pencarian index ke-"+i); - dir: JScripUbab3
if(va rArrayIi]-=1ono'X - by:ZiDjho
document.write('. Ditemukan :'+varArray[i]);
<!DOCTYPE html>
 -=..-_-
t

llli JovoScript Source Code poling Dicoril Struktur Kontrol

<html> <body>
<head> <span >5</spa n>-<span>B</span>-
<title>Source Code JavaScript</tifle> <span>B</span>-<span>5</span>-
<scri pt type="texVjavascri pt"> <span>3</span>-<span>7</span>-
onload=function0{ <span>5</span>-<span>2</span>
var span=document.getElementsByTagName('span,); <p id="step"></p>
var div=document.createElement(,div'); </body>
div.innerHTML="Panjang data : "+span.length; </html>
step.appendChild(div);
Script di atas membaca elemen span yang dimiliki halaman web
for(var i=0;icspan.length i++X ;
kemudian mencari span yang mengandung string 5. Span yang
mempunyai string 5 akan ditandai, seperti gambar di bawah. Anda dapat
var div=document.createElement('div,);
melihat pada gambar tersebut langkah perulangan dan span yang
div.innerHTML="Perulangan ke : "+i; ditandai.
step.appendChild(div);
if(spanIi]. innerHTML!='5'X
continue;

)
span[i].setAttribute('class','pil ih');
span[i].setAttribute('title','Ditemukan indeks ke-'+i);
)
)
</script>
<style>
.pilih{
background-color: darkcyan ;
Gambar 3.12 Hasil eksekusi continue
padding: 5px;
color: darkblue;
)
</style>
</head>
 Struktur Kontrol
JovoScript Source Code Poling Dicoril
98

var nilai=document.getElementByld('nilai').value;
var pangkat=document.getElementByld('pangkat').value;
Kontrol kesalahan adalah sebuah cara untuk menangkap kesalahan- nilai=parsel nt(nilai);
kesalahan yang terjadi pada statemen. Misalnya saja variabel belum
pangkat=parselnt(pangkatl
didefinisikan, pembagian nol, pembacaan index array salah, dan lainnya. );
Statemen yang digunakan adalah blok try catch dan bisa juga document.getElementByld('hasil'). innerHTML=
dikombinasikan dengan throw.
nilai+"^"+pangkat+,' :,'+Math.pow(nilai,pangkat);

TnyCnrcH )catch(err){
console.info(err);
Blok try digunakan untuk menuliskan statemen yang akan diuji dan
kemungkinan mengandung kesalahan. Sedangkan blok cafch digunakan document.getElementByld('hasil'). innerHTML=
untuk menangkap kesalahan dan melakukan penanganan bila terjadi "error : "+err.arguments[0]+" : "+err.description;
kesalahan.
)
Statemen:
)
try{
//statemen yang diuji
i
</script>
)catch(err)i
</head>
//penanganan kesalahan
<body>
)
<label>Nilai : </label>
<!--
<input type="text" id="nilai" value="S, l><brl>
- file : trycatch.html
<label>Pangkat : </label>
- dir : JScripVbab3
<input type="text" id="pangkat" value=,'S" l><brl>
- by:ZiDjho
<button id="ok">=</button>
<h4 id="hasil"></h4>
<!DOCTYPE html>
</body>
<html>
</html>
<head>
<title>Source Code JavaScript</title> script di atas akan melemparkan kesalahan bahwa variabel pangkatl
belum dideflnisikan kemudian menampilkan kesalahan yang terjadi pada
<scri pt type="texUjavascript">
elemen DOM.
onload=function0{
document.getElementByld('ok').onclick=function0i
trv{
100
JovoScript Source Code Poling Dicoril Struktur Kontrol
101

Anda dapat menggunakan err.arguments[0] untuk mendapatkan nama ,r1, nilsl=prompt('Masukkan nilai kelipatan 10 kurang dari 100
objek sumber kesalahan dan err.description untuk mendapatkan
keterangan kesalahan. !');

trvi
if(nilai%10!=0)i
throw "tidak";;

)else if(nilai>100){
throw "lebih";

)else if(nilai<10){
throw "kurang";

Gambar 3.13 Hasil eksekusi Try Catch )else if(isNaN(nilai)){

throw "nan";
THnow )else{
Throwdigunakan untuk melemparkan tesatanan yang terjadi pada catch. alert('Anda benar !');
Catch kemudian yang menangkap dan melakukan penanganan
)
kesalahan.
)catch(err){
Throw dituliskan pada bagian fiy untuk menangkap kesalahan yang
terjadi pada statemen. Parameter throw dapat berupa angka, string, var hasil=document.getElementByld('hasil');
ataupun sebuah object. if(err=="error"){
<!--
hasil.innerHTML="Error: Nilai "+nilai+" bukan kelipatan 10 !";
- file : throw.html
)else if(err=="lebih"){
- dir: JScripVbab3 hasil.innerHTML="Error : Nilai "+nilai+" lebih besar dari 100 !";
- by:ZiDjho
)else if(err=="kurang"){
hasil.innerHTML="Error: Nilai "+nilai+" kurang dari 10 !";
<!DOCTYPE html>
)else if(err=="nan"){
<html> hasil.innerHTML="Error : Nilai "+nilai+" bukan angka!";
<head>
)else{
<title>Source Code JavaScript</title> hasil.innerHTML="Error : Tidak diketahui penyebabnya";
< scri pt type="texVjavascri pt">
)
ontoad=function0i
)
)
102 JovoScript Source Code Poling Dicori!
Struktur Kontrol
103
</script>
</head>
<body>
<h4 id="hasil"></h4>
</body>
</html>

script di atas akan menampilkan sebuah prompt yang meminta sebuah

nilai dengan syarat tertentu. Nilai tersebut kemudian dibaca oleh blok fiy
dan melemparkan kesalahan yang mungkin terjadi kemudian catch
menangkapnya dan memberikan pilihan penanganan kesalahan. Berikut Gambar 3.16 Memasukkan nilai 110
contoh eksekusi penggunaan throw dan penanganan kesalahan yang
dilakukan.

Gambar 3.17 Kesalahan yang ditangkap Blok Catch

Cusrmr EnnonF{nnn-ruc
Selain dengan cara di atas, Anda dapat membuat sendiri sebuah kelas
Gambar 3.14 Memasukkan nilai 25
untuk menangani kesalahan sesuai keinginan. Cara penggunaan kelas
tersebut adalah melemparkan (throw) kesalahan dengan membuat objek
dari kelas penanganan kesalahan tersebut.
Lebih jelasnya, perhatikan source code berikut.

<!--
Gambar 3.15 Kesalahan yang ditangkap Blok Catch - file : errorHandling.html
- dir: JScripUbab3
- by: ZiDjho

<IDOCTYPE html>
<html>
 JovoScript Source Code Poling Dicori.
Struktur Kontrol
105

<head>
)catch(err){
<title>Source Code JavaScript</title>
var hasil=document.getElementByld('hasil');
<script type="texUjavascript">
hasil. innerHTML=err. pesan ;

onload=function0{
)
var nilai=prompt('Masukkan nilai kelipatan 10 kurang dari 100
)
!'); </script>
//Kelas penanganan kesalahan </head>
function error(jenis, nilai ){ <body>
var p={ <h4 id="hasil"></h4>
"tidak":"Error: Nilai "+nilai+" bukan kelipatan 10 !", </body>
"lebih":"Error: Nilai "+nilai+" Iebih besar dari 100!", </html>
"kurang":"Error : Nilai "+nilai+" kurang dari 10 !",
Pada script di atas, didefinisikan kelas penanganan kesalahan dengan
"nan":"Error: Nilai "+nilai+" bukan angka !" nama error yang berisikan pesan-pesan kesalahan yang terjadi. Pada
); bagian try, kesalahan akan dilemparkan dengan perintah throw dengan
membuat objek dari kelas error.
this.pesan=p[ienis];
Pada bagian catch, parameter err adalah objek yang dilemparkan throw
this.nilai=nilai;
sehingga untuk menampilkan kesalahan hanya dengan memanggil
) properti pesan err.pesan.
try{
if(nilai%10!=0){
throw new error("tidak", nilai);
)else if(nilai>100){
throw new error("lebih", nilai);
)else if(nilai<10){
throw new error("kurang", nilai);
)else if(isNaN(nilai)){
throw new error("nan", nilai); Gambar 3.18 Memasukkan nilai 70

)else{
alert('Anda benar !');
)
 JovoScript Source Code Poling Dicori!

Ande benar I

lJ CeEah diat*g lain dari laman ini.

Gambar 3.19 Tidak ada kesalahan terjadi

Fungsi, Ohjectr dan,
ReSHxp
 JovoScript Source Code Poling Dicori! Fungsi, Object don RegExp
108 109

ungsi merupakan sebuah blok yang berisikan statemen-statemen <button onclick="fungsi0">Tombol</button>

F yang digunakan untuk tugas tertentu. Fungsi sangat bermanfaat

saat blok statemen akan dipanggil berulang-ulang. Anda tidak
perlu menuliskan script yang sama namun cukup memanggil fungsi
</body>
</html>
tersebut. Selain fungsi, JavaScript juga menyediakan blok kelas dan
objek untuk membangun aplikasi.

MEMBUffi..FUNGSI
Pembuatan fungsi dapat dilakukan dengan beberapa cara, yaitu dengan
keyword function. sebuah fungsi dapat dibuat secara eksplisit dengan
nama tertentu maupun membuat fungsi tanpa nama.

FL'NICSI
Berikut source code pembuatan fungsi secara eksplisit dengan nama
tertentu. Saat fungsi dipanggil, alert akan ditampilkan' Selengkapnya,
perhatikan source code berikut.
Gambar 4.1 Eksekusi fungsi
<!--
- file : fungsi.html FuNcsrTeNpAf{661g
- dir: JScripVbab4 Selain fungsi dengan nama tertentu, sebuah fungsi dapat dibuat dengan
- by:ZiDjho tanpa nama. Fungsi ini dapat dijadikan nilai dari sebuah variabel
sehingga variabel tersebut berubah menjadi sebuah fungsi. source code
di bawah adalah pembuatan fungsi tanpa nama dimina fungsi akan
<IDOCTYPE html> dieksekusi setelah halaman/dokumen selesai dimuat.

<html> <!--

<head> - file : fungsiTanpaNama.html

<title>Source Code JavaScript</title> - dir: JScriptlbab4

<script type="texUjavascript"> - by: ZiDjho

function fungsi0{
<IDOCTYPE html>
alert('Pesan ini muncul saat tombol di klik');
<html>
)
</script> <head>

</head> <title>Source Code JavaScript</tifle>

<body> <script type="texUjavascript">

 Fungsi, Object don RegExp
JovoScript Source Code Poling Dicori!

<html>
onload=function(X
<head>
document.write('Fungsi tanpa namacbr/>');
<title>Source Code JavaScript</tifle>
document.write('Dokumen telah diload !');
<scri pt type="text/javascri pt">
)
function luas(p,l){
</script>
return p*l;
</head>
)
<body>
function hitung0{
</body>
alert(luas(document. persegi. panjang.value,
</html>
document.persegi. lebar.value))

i
</script>
</head>
<body>
<form name=',persegi',)
<input n"rng="part.iang"/>
Gambar 4.2 Hasil pembuatan fungsi tanpa nama
<input name="lebar"/>
FutrcsrRErunr.t </form>
Berbeda dengan fungsi di atas yang hanya melakukan tugas tertentu, <button onclick="hitung0">Hitung</button>
sebuah fungsidapat memiliki nilai kembalian (return). Fungsi dengan nilai
</body>
kembalian bisa digunakan untuk menghitung suatu rumus matematika
atau mendapatkan data lain. </html>
Source code di bawah mempunyai fungsi luas yang digunakan untuk l

menghitung luas persegi dan mengembalikan hasil perhitungan luas saat

fungsi tersebut dipanggil. r

<!--
- file : fungsiReturn.html
- dir: JScripllbabA
- by :ZiDjho

<IDOCTYPE html>
 JovoScript Source Code Poling Dicori! Fungsi, Object don RegExp
113

alert(hitung(15,3));

)
)
</script>
</head>
<body>
<button id="klik">Hitung</button>
<lbody>
</html>
Gambar 4.3 Fungsi Return

Mrmnertt.ttsn(Al-t F.uNeg VnRtnnru

Memanfaatkan fungsi tanpa nama, sebuah variabel dapat difungsikan
menjadi sebuah fungsi. source code di bawah mendemonstrasikan
bagiimana membuat variabel menjadi sebuah fungsi.
<!--
- file : fungsiVariabel.html
- dir: JScriPtlbab4
- by : ZiDjho
Gambar 4.4 Hasil eksekusi fungsi variabel

<IDOCTYPE html>
<html>
MEMBUAT OBJEK
<head>
Objek merupakan segala sesuatu yang mempunyai properti dan method.
<title>Source Code JavaScript</title> Seluruh label atau nilai dapat dianggap sebagai objek. Objek merupakan
<script type="texUjavascript"> variabel yang dibuat dari suatu kelas. Berbeda dengan pemrograman
desktop, pemrograman web sangat dinamis dimana sebuah variabel atau
var hitung = function(p,l)i method dapat dideklarasikan hanya jika dibutuhkan.
return P*l;

)
onload=function0{
document.getElementByld('klik').onclick=function(X
 JovoScript Source Code Poling Dicoril
114
Fungsi, Object don RegExp
115

Ozuex </body>
Source code di bawah merupakan contoh pembuatan objek yang </html>
memiliki properti-properti dapat juga sebuah method.
Statemen:
Objek={propefti:"Nilai Propertiimethod:function(X},...}
Statemen di atas merupakan cara untuk mendefinisikan objek secara
ringkas, dimana properti dan method dibungkus dengan kurung kurawal
{}. Nilai properti dapat diakses dengan namaObjek(titik)namaProperti.
Lebih jelasnya, perhatikan source code di bawah.
<!-- Gambar 4.5 Hasil eksekusi pembuatan objek

- file : objek.html
Menmusrozus( mffi lGr*s Orurcr
- dir : JScriptlbab4
Selain dengan cara di atas, Anda juga dapat membuat objek dengan
- by:ZiDjho membuat instans dari kelas Object. Saat Anda membuat objek dengan
instans kelas Object, Anda harus mendefinisikan properti dan method
yang dibutuhkan setelah objek tercipta.
<!DOCTYPE html>
Agar lebih jelas, perhatikan source code di bawah ini.
<html>
<!--
<head>
- file : objekNew.html
<title>Source Code JavaScript</title>
- dir: JScripllbab4
<scri pt type="texUjavascript">
- by:ZiDjho
var anggota={nama:"Abu Asiah",alamat:"Semarang"};
anggota.agama="lslam";
<IDOCTYPE html>
document.write('Nama :'+anggota.nama);
<html>
document.write('<br/>');
<head>
document.write('Alamat :'+anggota["alamat"]);
<title>Source Code JavaScript</title>
document.write('<br/>' )'
<scri pt type="texUjavascri pt">
document.write('Agama :'+anggota.agama);
//membuat objek dari kelas Object
</script>
var objek=new ObjectQ;
</head>
<body>
//mendeklarasikan properti
objek. nama="Properti Nama";
 JovoScript Source Code Poling Dicori, Fungsi, Object don RegExp
116 117

objek.alamat="Properti Alamat"; Menaaunr ]GLAS Seruonl

//mendeklarasikan method JavaScript merupakan pemrograman script yang mendukung OOP atau
objek.tul is=fu nction0{ pemrograman berbasis objek. Basis dari pemrograman OOP adalah
kelas. Dari kelas tersebut dibuat sebuah objek.
document.write('<br/>kelas.tulisQ : Method Tulis');
Sebuah kelas pada JavaScript dibangun juga menggunakan keyword
) function, sebagaimana pembuatan fungsi. Akan tetapi dalam pembuatan
variabel agar dapat diakses oleh objek, digunakan keyword this. Keyruord
this digunakan untuk membuat propertidan method.
//pemanggilan properti dan method objek
Perhatikan bagaimana pembuatan kelas sederhana yang hanya terdiri
document.write('kelas.nama :'+objek.nama); dari properti pada source code di bawah.
document.write('<br/>kelas.alamat :'+objek.alamat); <!--
objek.tulis0; - file : kelasSimple.html
</script>
- dir: JScripllbab4
</head>
- by: ZiDjho
<body>
<div>lsi</div>
<IDOCTYPE html>
</body>
<html>
</html>
<head>
<title>Source Code JavaScript</title>
<scri pt type="texVjavascri pt">

function pegawai(nama,alamat,agama){
this.nama=nama;
this.alamat=alamat;
this.agama=agama;

)
Gambar 4.6 Pembuatan objek dari kelas Object
peg=new pegawai('abu asiah','Semarang','lslam');
document.write(peg. nama);
document.write('<br/>'+peg.alamat);
docu ment.write('<br/>'+peg.agama);
</script>
 JovoScript Source Code Poling Dicori! Fungsi, Object don RegExp
119

</head>
)
<body> obj =ns\ / kelaso;
</body> document.write(obj. nama);
</html> document.write(obj.alamat);
document.write(obj.agama );

obj.hapus0;
</script>
</head>
<body>
</body>
I
Gambar 4.7 Membuat kelas sederhana
</html>
Source code di bawah mendemonstrasikan pembuatan method pada
pembuatan suatu kelas.
I
<!-- S localhosvis{d!,Ybair41i';B!}ritl$rl db

- file : kelas.html Trnjho

- dir : JScriptlbab4 mdefined

- by:ZiDjho Method llapus

<!DOCTYPE html> Gambar 4.8 Hasil pembuatan method pada kelas

<html>
<head> PROFERTI
<title>Source Code JavaScript</title> Sebuah objek terdiri dari properti dan method. Source code di bawah
mendemonstrasikan pembuatan properti pada saat deklarasi pembuatan
<scri pt type="texVjavascript">
kelas atau objek dan setelah sebuah objek tercipta.
function kelas0{ <!--
this.nama="ZiDjho";
- file : properti.html
this.alamat="Semarang";
- dir: JScripllbab4
this. hapus=fu nction0{
- by: ZiDjho
document.write("<h2>Method Hapus</h2>");
i <IDOCTYPE html>
 t
120 JovoScript Source Code poling Dicoril Fungsi, Object don RegExp
121

<html>
<head>
<title>Source Code JavaScript</tifle>
<scri pt type="texVjavascri pt">

//pembuatan kelas kosong

function KelasQ{} Gambar 4.9 Pembuatan Properti
// membuat objek
kelas=new KelasQ; Mrmoo
//Penambahan Properti Method adalah fungsi yang berada di dalam kelas. Berikut source code
yang digunakan untuk membuat method pada sebuah objek.
kelas.propl ="Properti 1 ";
<!--
kelas. prop2="Properti 2";
- file : method.html
kelas.propN="Properti N";
- dir : JScriptlbab4
- by :ZiDjho
var obj={propObjl :"Properti Objek 1",propObj2:"properti Objek
2"1;
<!DOCTYPE html>
//Penambahan properti baru
<html>
obj. propObj3="Properti Objek N";
<head>
document.write(kelas. propN );
<title>Source Code JavaScript</title>
docu ment.write('< br/>'+obj. propObj 1 );
<script type="texVjavascript">
docu ment.write('<br/>'+obj. propObj3) ;
function pegawai0{
</script>
</head>
//Method asli

<body>
this.tugas=function0{
document.write('Method Tugas<br/>');
</body>
</html> )
)
var peg=new pegawai0;
peg.tugas0;
//Method override
122 JovoScript Source Code poling Dicori! Fungsi, Object don RegExp 123

peg.tugas=function(X
docu ment.write('Method Override<br/>') ;

)
peg.tugas0;

// Method tambahan pegawai

peg.jalan=function0{ Gambar 4.10 Pembuatan Method

document.write("Method Jalancbr/>");

)
peg.jalan0; String merupakan sebuah objek dimana penulisan nilai di dalam tanda
petik ganda atau tunggal. Semua variabel pada asalnya merupakan
objek dari string, kecuali Anda mem-parsing atau melakukan operasi
var objek={objekpropl:"properti karakter digit dengan operator aritmatik. Pada bab ini akan dibahas
Objek penggunaan properti dan method yang dimiliki oleh objek string.
1",objekProp1:"Properti Objek
2", methodObjek:fu nction 0{docu ment.write('Method tylgxp4p41641r1 JuHauqH tfip41r66R DAl.l Knrn
Objek');)); Properti yang digunakan untuk mengitung jumlah karakter adalah length
//Penambahan Method dan untuk menghitung banyak kata dapat dimanfaatkan method split
yang dimiliki objek string.
objek. method=function0{
Penghitungan jumlah kata dilakukan dengan memisah sebuah string
document.write('<br/>Tambahan Method Objek'); dengan method split dengan parameter spasi kosong. Pemisahan string
) akan mengembalikan sebuah array, dimana elemen array adalah setiap
kata pada sebuah string. Langkah terakhir adalah menghitung panjang
objek.methodObjek0; array dengan properti length. Agar lebih jelas, perhatikan source code
objek.method0; untuk mendapatkan jumlah karakter dan jumlah kata dari suatu kalimat
berikut.
</script>
<!--
</head>
- file : panjangString.html
<body>
- dir: JScriptlbab4
</body>
- by:ZiDjho
</html>

<!DOCTYPE html>
<html>
 JovoScript Source Code Poling Dicoril
124 Fungsi. Object don RegExP 125

<head>
Untuk lebih jelasnya, perhatikan source code berikut'
<title>Source Code JavaScript</title>
<l--
<script type="texVjavascript">
- file : changeCaseString.html
var varStr="Belaiar JavaScript 1 .6";
- dir: JScripUbab4
var jml Karakter=varStr. length ;
- by:ZiDjho
document.write("Kata : "+varStr);
document.write("<br/>Jumlah Karaktsl ; "+jmlKarakter);
<IDOCTYPE html>
<html>
var jumlahKata=varStr.split(" "). length ;
<head>
document.write("<br/>Jumlah Kata : "+jumlahKata);
<title>Source Code JavaScript</title>
</script>
<scri pt type="texUjavascript">
</head>
var varStr="Java Script 1.6";
<body>
document.write("varStr : "+varStr);
</body>
document.write('<br/>toUpperCase0 :');
</html>
document.write(varStr.toU pperCase0);
document.write('<br/>tolowerCase0 :');
docu ment.write(varStr.toLowerCase0);
</script>
</head>
<body>
</body>
Gambar 4.11 Hasil eksekusi perhitungan karakter dan kata </htm[>

MeNcuaAFr Besnnfl(ecL SrRNG

Sebuah huruf dapat diubah menjadi kapital semua atau kecil semua.
JavaScript hanya menyediakan method untuk mengubah sebuah huruf
rrrenjadi huruf kapital atau kecil saja. Method toUpperCaseQ pada objek
:rlring digunakan untuk membuat huruf menjadi kapital semua.
iirrrl;rngkan untuk membuat huruf kecil, method yang digunakan adalah
krl rrwcrCaseQ.
 T

JovoScript Source Code Poling Dicori! Fungsi, Object don RegExP 127
126

docu ment.write('<br/>') ;

document.write('teks hasil :'+changeCase(teks));

ffi *,locaffest 1.:l:'ir;lul*.,:*,11 :;,1:,,olt-:llLiy;,,* ry </scriPt>
rarStr: lava Script 1.6
toUpperCase$: IA\? SCRIPT 1.6 <lhead>
toI"os,'erCase() : jara script 1"6 <body>
</body>
Gambar 4.12 Membuat huruf kapital dan huruf kecil
</html>

MrNlteunr Awru- l(nrn l(nprn-

JavaScript tidak menyediakan method untuk membuat setiap kata
menjadi huruf besar, sebagaimana sebuah string yang biasa digunakan
pada sebuah judul. Akan tetapi, dengan memanfaatkan method replace$
dan method toUpperCase$ pada objek string dan regex akan dengan
mudah membuat setiap kata pada kalimat dimulai huruf besar.
Untuk lebih jelasnya, perhatikan source code berikut ini.
<!-- Gambar 4.13 Pembuatan setiap kata diawali huruf kapital

- file : awalKataBesar.html
Prrucnnnru Srmuc
- dir: JScriptlbab4
pencarian sebuah string dapat dilakukan dengan method search0.
- by : ZiDjho Method search akan meigem'balikan index karakter paling awal apabila
tidak ditemukan akan
fenca.ian d1emukan. Nimun bila pencarian kumpulan karakter
h"ng"rorrikan nilai -1. Sebuah string merupakan
<!DOCTYPE html> 0. jetasnya, perhatikan source code
;r;;;i;ri;i dari index Untuk tebih
<html> berikut.
<head> <!--

<title>Source Code JavaScript</title> - fite : cariString.html

<script type="texVjavascri pt"> - dir: JScripUbab4

var teks="paling dicari! source code java script"; - by:ZiDjho
function changeCase(str){
return str.replace(/^\wl\s[a-z]/g,function(a){return <IDOCTYPE htmt>

a.toUpperCase0)); <html>
<head>
)
rlocument.write('teks :'+teks); <title>Source Code JavaScript</title>
 l

128 JovoScript Source Code poling Dicori! Fungsi, Object don RegExp '129

<scri pt type="texUjavascript,'>

var varstr="Belajar JavaScri pt,' ;

var varstrl ="Bersama wahana komputer,';

if(varStr. search ("Script")>- 1 ){

document.write('Ketem u <br/>'); Gambar 4.14 Pencarian string
)else{
document.write('Tidak Ketemucbr/>'); MEIrcGAI'rn $EgSGlAhr $rlH_N
) JavaScript menyediakan method replaceQ dari objek string untuk
mengganti bagian dari string. Method replace mempunyai 3 buah
parameter, yaitu str_lama, str_baru, dan flag.
if(varStrl .search("Script")!=-1 )i Statemen:
document.write('Ketemu'); Str. replace(str_lama,str_baru,fl ag)
)else{ 0 str_lama adalah string yang akan diganti.
document.write('Tidak Ketemu'); O str_baru adalah string pengganti.
) 0 flag adalah salah satu atau gabungan berikut.
</script>
@ i : (ignore case) mengabaikan huruf kecil besar.
</head>
@ g : (global) mengganti semua str_lama. Tanpa parameter ini
<body> hanya str_lama yang pertama saja yang ditemukan.
</body> @ m : (multiline) mencaripada semua baris (\n).
</html> Source code di bawah mendemonstrasikan penggunaan method replace
tetapi parameter flag tidak memengaruhi perubahan string. Lebih
jelasnya, perhatikan source code dan hasilnya pada browser sebagai
berikut.
<!--
- file : replaceString.html
- dir: JScripUbab4
- by: ZiDjho

<IDOCTYPE html>
<html>
 JovoScript Source Code poling Dicori! Fungsi, Object don RegExp
131

<head>
<title>Source Code JavaScript</tifle> * lryllll9l1'r:,'al.t:r:lliilllilf :;r:i:itioir.!ii'i
ffi :r M

<scri pt type="texVjavascri pt"> rtrlag = EBLu brha! 5, 5 btrkan Satr. sa:s !B sBtsu 5 l,a 5, eGnq .rganisasl salu rBG baalak oknw
Bt!!Eq.reFlace i' 5','!I&' l
satu brkaa Lm. 5 bakes satn, 3aaa ya BaiE 5 l-a 5. e*anE ctgasi.asi satE rak j]aEtak okr&
docu ment.write('< pre>'); sErinq.:eFlECe ( rearu',' :' i
1 bukai 5, 5 bukaR 5ai,, EaT! yE s6ELr 5 ya 5. eEnq D:garriEas: sat, nae bstyk .kew
:','qr'
var string="satu bukan 5, 5 bukan Satu, saTu ya satu 5 ya 5, stE:rq.rep:ace('sar:',' I :
sa"u bukan 5, 5 buker, sat-., 1 y& saiU 5 Ia 5, e@ug org&isasi saee riffi beyak skle

emang organisasi satu nama banyak oknum";

Gambar 4.15 Hasil penggantian string
document.writeln("string = "+string)i
document.writeln("string. replace('5','LIMA')\t: ");
Mrruonpnrxnrt Bncuqru SrmNo
document.writeln(string. replace('5','<strong>Ll MA</strong>,));
JavaScript menyediakan dua fungsi untuk mendapatkan bagian dari
document.writeln("string. replace('satu',' 1')\t: ") string, yaitu substrQ dan substring0. Method substr$ mempunyai
document.writeln(string. replace('satu','<strong> parameter index_awal dan panjang string yang akan diambil. Sedangkan
1 </strong>'));
method substring0 mempunyai parameter index_awal dan index_akhir
document.writeln("string. replace('saTu','1','gi')\t: "); daristring yang akan diambil.
document.writeln(string.replace("saTu","<strong>1</strong>",,'gi,'); Berikut source code yang digunakan untuk mendapatkan bagian dari
docu ment.write('</pre>') string.
;

</script> <l--

</head> - file : stringSubString.html

<body> - dir: JScripUbab3

</body> - by :ZiDjho
</html>
<!DOCTYPE html>
<html>
<head>
<title>Source Code JavaScript</title>
</head>
<body>
<scri pt type="texVjavascri pt">

var str="Source Code Java Script Dasar";

// Parameter index_awal, panjang_substr
// index_awal=7 panjang 9 karakter
 rt

132
JovoScript Source Code Poling Dicori! Fungsi, Object don RegExp 133

var substr=str.substr(7,9); <!-

- file :json.html
// Parameter index_awal dan index_akhir - dir : JScripVbab4
// index_awal=7 dan index_akhir=1 7 - by :ZiDjho
var substring=str.substring(7,17);
<IDOCTYPE html>
document.write('str :'+str); <html>
document.write('<br/>str.substr(7,9) :'+substr); <head>
document.write('<br/>str.substr(7, 1 7) :'+subString); <title>Source Code JavaScript</title>
</script> <scri pt type="texUjavascri pt">
</body> docu ment.writeln ("<pre>");
</html> // Format String
91p"({'naffi o':'abu asiah','asli':'boyolali'})";
document.writeln("str : "+str);
ff localhostlirrr!pCha**/r1r;rfi 5r;hstfi :ta.irt*li *
//Membuat Objek JSON
str : Souree Code Jala Scrbt Dasar
etr-subsh{7,9} : Codc Java str=eval(str);
sh.substr{7,17) : Ccde Java
//Pemakaian objek JSON
Gambar 4.16 Hasil pengambilan substring document.writeln("str.nama : "+str. nama);

$rrurr,te MENJADIJSON ;;,,; : :"' ,:.

document.writeln("str.asli : "+str.asli);
docu ment.writel n ("</Pre>");
JSON merupakan sebuah mekanisme yang digunakan untuk mengubah </script>
sebuah string dengan format tertentu menjadi format objek. JSON
banyak digunakan untuk melakukan komunikasi data antara Javascript </head>
dengan server. Penggunaan JSON lebih mudah dibandingkan dengan <bodY>
penggunaan XML sebagai komunikasi data dengan server.
</body>
Format string JSON:
</html>
string='({properti : hilai',propefti:'nilai', ... })" i
Sotelah string diubah ke dalam JSON, Anda dapat memanggil properti
luyaknya sebuah objek dengan properti. Fungsi yang digunakan untuk
rrrongubah string menjadi JSON adalah eval$. Untuk lebih jelasnya,
porhatikan source code berikut.
134
JovoScript Source Code Poling Dicoril Fungsi, Object don RegExp
135

json=eval(str);
document.writefison);
document.write('<br/> json[0]. nama :'+json[0]. nama);
document.write('<br/> json[1 ]. nams ;'+json[1 ]. nama);
</script>
</head>
<bodY>
Gambar 4.17 Pembuatan JSON dari string </body>
</html>
MrHasuAr ffipsy JSON DARI Srruruo
Di atas telah dibawakan source code untuk membuat JSON tunggal.
Pada source code di bawah akan mendemonstrasikan pembuatan
sebuah array yang berisikan elemen JSON dari sebuah string.
Format pembuatan array json:
([!'properti':'nilai,'propefti':nilai'S'properti':'nilai','properti':'nilai'[])
Perhatikan format string array json tersebut. Di sana ada penambahan
kurung kotak [ ] yang mengapit kurung kurawal sebagai elemen JSON.
Lebih jelasnya, perhatikan source code di bawah ini.
<!-- Gambar 4.18 Pembuatan array JSON

- file :jsonArray.html
- dir: JScripVbab3
URL P4n414E6R MENJADI JSON
Parameter URL adalah bagian URL yang ditulis setelah tanda tanya (?),
- by :ZiDjho
misalnya:
http ://abuasiah.com/?nama =asiah&alamat=semarang
<IDOCTYPE html>
Bagian "nama=asiah&alamat=semarang" adalah parameter URL dari
<html> contoh URL di atas. Untuk membuat menjadi JSON, yang pertama
<head> dilakukan adalah mengubahnya menjadi format string JSON sebagai
berikut.
<title>Source Code JavaScdpt</title>
stljson="({nama :'asiah',alamat:'sema rang})" i
< scri pt type="texUjavascript">
Pertama Anda dapat mengubah karakter = menjadi :' atau :" kemudian
1;1p=,,([{'nama,:'obU mengubah tanda & menjadi ', atau ", sehingga didapatkan string sebagai
ruiti rlr','asli':'boyolali'),{'nama':'Djono,,,asli':,Semarang'}])',; berikut.
tt6 JovoScript Source Code Poling Dicoril
Fungsi, Object don RegExp
137

I t,1nla :"asiah"ralamatl"semarang
:,nt,lah terbentuk demikian, tambahkan di depan shing ({ sedangkan
;,rrrIr akhir string tambahkan string ")). string akan sesuai dengan format S localhostljscn ptlbab4/j:anF*ra n:*1er. htm t $
y,rrrg diinginkan:
gtrParu : rc=esi.ah&aLa$at=Ee*axEsg
( { nama : "asia h "ralamat: "semarang',}) stfFdxae. naila ; asiah
gtrParu.alamt : sffiraDg
t.lntuk lebih jelasnya, perhatikan source code berikut.
<!--
- file : jsonParameter.html Gambar 4.19 URL Parameter menjadi JSON

- dir: JScriptlbab4
- by:ZiDjho
WAKTU it:,:1 .,:. !i. . i_,-... .i I :..rr !i.i,..:r:.i:.i, ::.r.,, - i..1:i: j..

JavaScript menyediakan kelas DateQ untuk membuat sebuah objek

untuk mengakses waktu tanggal dan jam. Bisa juga menggunakan static
<IDOCTYPE html> method dari date untuk mendapatkan waktu sekarang, yaitu Date.nowQ.
Selain itu, date juga dapat digunakan untuk mem-parsing string dengan
<html>
format tertentu menjadi format waktu.
<head>
Pada JavaScript menyediakan dua buah sistem Date, yaitu lokal dan
<title>Source Code JavaScript</tifle> internasional. Pada sistem lokal, misalnya di lndonesia adalah +7 dari
<script type="texUjavascript">
system Date internatonal (UTC). Hal ini menyebabkan terjadinya
perbedaan jam pada sistem lokal dan UTC dengan selisih 7 jam.
strParam="nama=asiah&alamat=semarang";
docu ment.writel n("<pre>"); f4N6gql
document.writeln("strParam : "+strparam); Source code di bawah mendemonstrasikan bagaimana memanggil
StrParam="({"+strPara method-method objek Date yang berhubungan dengan kalenderi
m. replace(A=/g,':"'). replace(A&/g, "',')+,"};';
penanggalan masehi.
strParam=eval(strparam);
<!--
document.writeln('strParam. nama :'+strparam. nama);
- file : tanggal.html
document.writeln('strParam.alamat :'+strparam.alamat);
- dir: JScripllbab4
document.writeln("</pre>");
- by:ZiDjho
</script>
</head>
<IDOCTYPE html>
<body>
<html>
</body>
<head>
- /hlrnl>
<title>Sou rce Code JavaScript</title>
 JovoScript Source Code Poling Dicoril Fungsi, Object don RegExp
139

<scri pt type="texVjavascri pt"> </head>

var waktu=new Date0; <body>
document.write('<pre>'); </body>
document.write('waktu\t\t\t:' ); </html>
document.writeln( waktu );

document.write('waktu.getYear0\t\t:' );
docu ment.writeln( waktu.getYeaO);
6akta : Iae t ay 0E 2t:2 1i:35:a5 m4a?rt {Sg Asla SiBndarC !*e}
uBkLtr,getlear{} 1 )-":2
document.write('waktu.getFullYear0\t:' ); 6aLlu.qethftrYearlI | 2t12
saktu.qetlronth(l :4
document.writeln( waktu.getFullYeaO); wak_'!.getDatell : B
uakiu"ge*eyii | 2
tsak'-u.get?ameli : :.33645i148461
document.write('waktu.getMonth0\t:'); ,aktn,9et:ire?seecffset{} :-4.21
wBhr,u,gtu?mate {l : I
document.writeln(waktu.getMonth0); sEktu.ryet$*ray{t t 2
saktu.qelffiru:.3.Year(i I !t12
*ahtu,qetETcucrthi, : 4
document.write('waktu. getDateQ\t\t:' );

docu ment.writeln( waktu.getDateQ);

Gambar 4.20 Fungsi penanggalan JavaScript
document.write('waktu.getDayQ\t\t:' );

document.writeln( waktu. getDayQ); Jnu

document.write('waktu.getTime0\t\t:' ); Source code di bawah digunakan untuk menampilkan fungsi/method
document.writeln( waktu.getTime0); yang berhubungan dengan waktu jam dari objek Date.
document.write('waktu.getTimezoneOffsetQ\t:' );
<!--

d ocu me nt.write I n ( wa ktu. g etTi m ezo n eOffset( )) ; - file :jam.html

document.write('waktu.getUTCDate0\t:' ); - dir: JScriptlbab4

document.writeln( waktu. getUTCDate0); - by:ZiDjho
document.write('waktu. getUTCDay$\t:' );
document.writel n( waktu. getUTCDayQ); <!DOCTYPE html>

document.write('waktu.getUTCFullYearQ\t:' );
<html>

docu ment.writeln( waktu. getUTCFullYeaO); <head>

docu ment.write('waktu. getUTCMonth0\t:' ); <title>Source Code JavaScript</title>

document.writeln( waktu. getUTCMonth0); <script type="texVjavascript">

r locument.write('</pre>'); var waktu=new Date0;

. /:;cript> document.write('<pre>');
 Fungsi, Object don RegExp
JovoScript Source Code Poling Dicori! 141
140

document.write('waktu\t\t\t:' );
document.writeln( waktu); $ localhosfjscript/bab4ljar*.Etnl *
watls : ?ue HE!. OE 2OL2 11:36:5{ @,f;t+S?flo tsa -}3ia staada.d Tie)
document.write('waktu.getHoursQ\t:' ); uEttu.getgoqr8{} r :-1
*aktu.qetMiEuteq{} : 36
document.writeln( waktu.getHours$); saktsu.geise@ads{} : 54
saktu-Eet!.li.l1lrecoads { } : 895
document.write('waktu.getMinutes0\t:' ); wakcu.getmcttourel) : I
waktu.getlit(}liautes{) : 36
document.writeln( waktu. getMinutes0); *akgu-getlIlcsecold!(] : 5{
F6ttu.getlr:E nj.lLiseessds{} :895
document.write('waktu.getSecondsQ\t:' );
document.writeln( waktu.getSeconds0); Gambar 4.21 Fungsi jam pada JavaScript

document.write('waktu.getMillisecondsQ\t:' );
document.writeln( waktu.getMilliseconds0);
JnHlt Drcrru-
Dengan memanfaatkan sebuah fungsi dan objek DateQ dapat digunakan
document.write('waktu.getUTCHours0\t:' ); untuk membuat jam digital yang realtime. Fungsi akan dipanggil secara
document.writeln( waktu.getUTCHoursQ); rekursif pada sebuah fungsi setTimeOut. Berikut source code untuk
membuat jam digital.
document.write('waktu.getUTCMinutesQ\t:' );
<!--
document.writeln( waktu.getUTCMinutesQ);
- file : jamDigital.html
document.write('waktu.getUTCSeconds0\t:' );
- dir: JScripllbab4
document.writeln( waktu. getUTCSeconds0);
- by:ZiDjho
document.write('waktu. getUTCMillisecondsQ\t:' );
document.writeln( waktu.getUTCMillisecondsQ);
<IDOCTYPE html>
document.write('</pre>');
<html>
</script>
<head>
</head>
<title>Source Code JavaScript</title>
<body>
<script type="texVjavascri pt">
</body>
</html> function jam(o){
var w=new Date0;
var jam=w.getHoursQ;
var _mnt=w. getMinutes0;
var _dtk=w.getSeconds0;
jam=!ama=gf 'Q'+jdm :jam);
 JovoScript Source Code Poling Dicori! Fungsi, Object don RegExp
142 143

_m nt=(_mn1q=9?'0r+_m nt:_m nt); '

BOOLHAI{, ,

_611= fdtk<-9?'0'+_dtk:_dtk) ;
Boolean merupakan objek yang hanya menghasilkan nilai true dan false.
o.innerHTMl_=jam+" : "+_mnt+" : "+_dtk; Pada source code di bawah ini hanya mendemonstrasikan semua nilai
setTimeout(function0{iam(o);}, 1 000); yang menghasilkan nilai false, yaitu angka 0, string kosong (""), null,
NaN, dan lainnya. Lebih jelasnya, perhatikan source code hasilnya pada
) browser berikut.
onload=function0{ <!--
jam(document.getElementByld(Jam'));
- file : boolean.html
) - dir : JScriptlbab4
</script>
- by:ZiDjho
</head>
<body> <IDOCTYPE html>
.62 16="jam">Jam</h2> <html>
</body> <head>
</html> <title>Sou rce Code JavaScri pt</title>
<scri pt type="texVjavascri pt">

//Menghasilkan Boolean False

var varNol=0;
var varMinNol=-0;
var varNull=null;
var varNan=,Js1.6,,;
Gambar 4.22 Hasil pembuatan jam digital var varstr="";
var varBool=false;

if(parsel nt(varNan )){

document.write("<br/>Variabel Nan True");
)else{
document.write("<brl>Variabel Nan False");
)
 JovoScript Source Code Poling Dicori! Fungsi, Object don RegExp
144 145

if(varNol){ </script>
document.write("<br/>Variabel Nol True"); </head>
)elsei <body>
document.write("<br/>Variabel Nol False"); </body>
i </html>

if(varMinNol){
document.write("<brl>Variabel Min Nol True");
)elsei
document.write("<br/>Variabel Min Nol False");
)

if(varNull){
document.write("<br/>Variabel NU LL True");

)else{ Gambar 4.23 Boolean False

document.write("<br/>Variabel NU LL False");
)
ARRAY
Array merupakan list atau objek yang dapat menampung elemen-elemen.
Elemen yang ditampung bisa apapun, baik objek, string, angka, boolean,
if(varStr){ dan lainnya. Terdapat operasi-operasi array yang sering digunakan yaitu
document.write('<br/>Variabel "" True'); penggabungan affay, penggabungan elemen array, penambahan,
penghapusan affay, dan lainnya.
)else{
document.write('<br/>Variabel "" False'); MCNCEaEUNGI(AI\I DUA ARRAY ATAU L=eH
) Untuk menggabungkan 2 buah array JavaScript menyediakan fungsi
concat$. Untuk lebih jelasnya, perhatikan source code di bawah.
rl(varBool){
rlocument.write('<br/>Variabel Bool False : True'); <!--

)clse{ - file : gabungArray.html

tkrr;ument.write('<br/>Variabel Bool False : False'); - dir: JScriptlbab4

) - by : ZiDjho
 JovoScript Source Code Poling Dicoril Fungsi, Object don RegExp
146 147

<!DOCTYPE html>
<html>
<head>
<title>Source Code JavaScript</title>
<script type="texVjavascri pt">
var arrl =new Array('Senin','Selasa');
,rt Gambar 4.24 Penggabungan array
"rr2=[,JUmat','Sabtu'];
//penggabungan
MeNccneUNG}GI.I Eunneru ARRAY
var arr3=arrl .concat(arr2);
Elemen di atas digunakan untuk menggabungkan array. Sedangkan
document.write('arr1 :'+arr1 ); source code di bawah digunakan untuk menggabungkan elemen-elemen
document.write('<br/>ar12 :' +arr2)i pada satu array. Perintah yang digunakan adalah join0 dengan
parameter string pembatas antarelemen yang digabungkan.
document.write('<br/>arrl .concat(arr2) :'+arr3);
Untuk lebih jelasnya, perhatikan source code dan hasilnya pada gambar
document.write('<br/>arr1 :'+arr1 ); dan source code di bawah.
</script> <!--
</head>
- file :joinArray.html
<body>
- dir:JScripllbab4
</body>
- by:ZiDjho
</html>

<!DOCTYPE html>
<html>
<head>
<title>Source Code JavaScript</title>
<script type="texUjavascript">
onload=function(X
varArr=['Semarang','Boyolali','Salatiga','Surakarta','Su koharjo'] ;

document.getElementByld('hasilArray'). innerHTM L=varArr.join(',

');
 JovoScript Source Code Poling Dicori! Fungsi. Object don RegExp

) docu ment.write(varArr);
<lscript> varArr.push('Abdillah','Muhammad','Abu Bakar');
</head> document.write("<br/>Setelah Push<br/>");
<body> docu ment.write(varArr) ;

<div id="hasilArray"></div> document.write("<br/>Setelah Popcbr/>");

</body> varArr.pop0;
</html> docu ment.write(varArr);
</script>
</head>
<body>
*3 localhost/jsrri$:tJhah4,**ir:Arr*y.*tn:l *
rf,lns;x;:nx::g;J::rii;i!:I:i:1]:i3$:*Lil:::rxlli:i:-11::;;.;;1n::::;:Iillll'.;-:Li:l:-i:
</body>
Smmsang. Boyolali" Salatiga, $r:rakmta, Sukohar-jo </html>

Gambar 4.25 Penggabungan elemen array

PuSn DAI{ POPARRAY

PUSH adalah menambahkan elemen afiay pada akhir elemen
sedangkan POP adalah menghapus elemen terakhir dari array. Source
code berikut mendemonstrasikan penggunaan fungsi push dan pop pada
sebuah array.
<!--
- file : popPushArray.html
Gambar 4.26 PUSH dan POP Array
- dir: JScripllbab4
- by :ZiDjho Meruourum<nruAnnnv
Sebuah elemen array dapat diurutkan berdasarkan nilai (unicode)
<!DOCTYPE html> karakter pertama dari elemen array. Tanpa sebuah parameter tambahan,
sebuah array akan mendahulukan 23, dibandingkan 3, karena 2 sebagai
<html> karakter pertama dari 23lebih kecil daripada 3.
<head> Untuk mengurutkan array dapat digunakan fungsi sort$, seperti source
<title>Source Code JavaScript</title> code berikut.
. r;r;ript type="texVjavascript"> <!--

viu varArr=['Jono','Abu Asiah','Ummu Asiah','Asiah']; - file : urutArray.html

150 JovoScript Source Code poling Dicoril
Fungsi, Object don RegExp 151

- dir: JScripVbab4
- by: ZiDjho Mrruaru-K ELEtvlEs ffipav
JavaScript menyediakan perintah reverse0 untuk membalik urutan
elemen array. Method ini akan menjadikan elemen terakhir menjadi
<!DOCTYPE html> elemen pertama diikuti elemen sebelum elemen terakhir. Berikut source
<html> code untuk membalik elemen array.
<head> <!--

<title>Source Code JavaScript</tifle> - file : reverseArray.html

<scri pt type="texUjavascript"> - dir : JScriptlbab4

v ar ar=13,4,2,5,6,8,23,54,231; - by :ZiDjho

docu ment.write(arr. sortQ);

</script> <!DOCTYPE html>

</head> <html>

<body> <head>

<div>lsi</div> <title>Source Code JavaScript</title>

</body> <scri pt type="texVjavascri pt">

</html> var varArr=[4,5,3,6,7,1,3];

document.write("varArr : "+varArr);
document.write("<br/>varArr.reverseQ : "+varArr.reverse0);

docu ment.write("<br/>varArr. sort$ : "+va rArr.sortQ);

document.write("<br/>varArr.reverseQ : "+varArr. reverse0);

</script>
</head>
Gambar 4.27 Pengurutan array
<body>
</body>
</html>
 JovoScript Source Code Poling Dicori! Fungsi, Object don RegExp 153

<scri pt type="texVjavascri pt">

var varArr=[4,5,3,6,7, 1,3];

document.write("varArr = "+varArr);
document.write("<br/>varArr.slice(2,4) = ");
document.write(varArr.slice(2,4));
document.write("<br/>varArr = "+varArr);
Gambar 4.28 Membalik elemen array docu ment.write("<br/>varArr.splice(2, 2,'splice','sPlice n') = ";'
document.write(varArr.splice(2, 2,'<b>splice</b>','<b>splice
SIceSPLcEARRAy n</b>'));
slice digunakan untuk mendapatkan elemen array tanpa menghapus document.write("<br/>varArr = "+varArr);
elemen aray yang asli. Sedangkan splice digunakan untuk
menambahkan dan atau menghapus elemen array. </script>
Statemen: </head>

slice(index_awa l, index_a kh ir) <body>

splice(indexjumlah_elemen_dihapus,elemen 1,elemen2,elemenN...) </body>

O index_awaldimulaidari0. </html>

O index dimulaidari0.
0 jumlah_elemen_dihapus : jumlah elemen yang akan dihapus,
dimulai dari index. Nilai 0 tidak akan menghapus elemen tetapi
menyisipkan elemen'1, elemen2, dan seterusnya pada index dan
menggeser elemen lama.
<!--
- file : sliceSpliceArray.html
- dir: JScriptlbab4
- by: ZiDjho
Gambar 4.29 Slice dan Splice ArraY
<!DOCTYPE html>
<html>
<head>
.-title>Source Code JavaScript</tifl e>
154 JovoScript Source Code Poling Dicoril Fungsi, Object don RegExP

Smr,rUxsHrr Ayr, ,,,r- l

<bodY>
</body>
Shift digunakan untuk menghapus elemen pertama dari array dan
mengembalikan elemen yang dihapus. sedangkan unshift digunakan </html>
untuk menambahkan elemen pada awal array dan mengembalikan
panjang array yang baru. Kedua method ini merupakan kebalikan dari
method push dan pop yang bekerja pada akhir array.
Statemen:
array.shift(
array.unshift(elemen l,elemenN)
Lebih jelasnya perhatikan source code berikut.
<!--
- file : shiftUnshiftArray.html
Gambar 4.30 Shift dan Unshift ArraY
- dir: JScripVbab4
- by :ZiDjho
MATEMATIKA
JavaScript menyediakan fungsi objek Math yang digunakan untuk
<!DOCTYPE html> melakukan operasi aritmatik lebih jauh. operasi yang dilakukan dapat
<html> berupa perpangkatan, pencarian akar, membuat angka acak, dan lain-
lain.
<head>
<title>Source Code JavaScript</tifle> PTNPNNOKATANI
<scri pt type="texVjavascript"> Kelas Math menyediakan method powO (power) untuk melakukan
var varArr=['Nama',5,3,6,7,1,3]; perpangkatan. Method pow0 membutuhkan 2 parameter, yaitu nilai-base
ban nilai_pangkat. Lebih jelasnya, perhatikan source code beserta
document.write("varArr = "+varArI), hasilnya pada browser sebagai berikut.
document.write("<br/>varArr.shift 0 =',+varArr.shift <!--
0);
document.write("<br/>varArr =,'+varArr); - file : mathPangkat.html
varArr.unshift('unshift 1','unshift N'); - dir:JScripllbab4
docu ment.write(!'<br/>varArr. unshift ('unshift 1','unshift N,),'); - by:ZiDjho
<locu ment.write("<br/>varArr = "+varArr);
- /script> <!DOCTYPE html>
- /lrcad> <html>
 156 JovoScript Source Code poling Dicoril Fungsi, Object don RegExp 157

<head> <html>
<title>Source Code JavaScript</tifle> <head>
<script type="texUjavascript,'> <title>Source Code JavaScript</title>
var varAngka=17; <scri pt type="texVjavascri pt">
var varPangkat=2; var varAkar='X';
document.write(varAngka+"<Sup)"rvarPangkat+"</Sup> = ";. var varPangkat='2';
document.write(Math. pow(varAngka,varpangkat)); var varHasil=289;
</script>
document.write(varAkar+"^{"+varPangkat+'} =
</head>
"+varHasil +'<br/>")i
<body>
document.write('X&nbsp;&nbsp;= Math.sqrt('+rsrHasil+')<br/>');
</body>
document.write('X&nbsp;&nbsp;='+Math.sqrt(varHasil));
</html> </script>
</head>
<body>
</body>
</html>

Gambar 4.31 Perpangkatan JavaScript

Merucnnt AKAR DARI pnruernr 2

Kelas Math menyediakan method sqrt untuk mencari nilai akar dari
sebuah nilai berpangkat 2. Berikut source code yang digunakan untuk
pencarian pangkat.
<!--
Gambar 4.32 Pencarian akar JavaScript
- file : mathSqrt.html
- dir : JScriptlbab4
- by:ZiDjho

.IDOCTYPE html>
 JovoScript Source Code Poling Dicoril Fungsi, Object don RegExp 159
't 58

</body>
</html>
Math.randomO digunakan untuk membuat sebuah angka acak antara 0
dan 1. Dari angka acak tersebut dapat dikembangkan sebuah angka
acak dengan batasan minimal dan maksimal angka. Lebih jelasnya
perhatikan pembuatan angka acak dan fungsi buatan pada source code
di bawah.
<!--
- file : mathRandom.html
- dir: JScriptlbab4
- by:ZiDjho Gambar 4.33 Angka acak JavaScriPt

<!DOCTYPE html>
PTMeuLATAt',t $lLq1r1G'AI! RreUFlonr
<html>
Terdapat 3
buah Method Math yang digunakan untuk melakukan
pembulatan Float, yaitu roundQ, ceilQ, floo(. Math.roundQ digunakan
<head> lebih fleksibel. Method ini akan membulatkan pada nilai bulat yang
<title>Source Code JavaScript</tifl e> terdekat dengan nilai float.

<scri pt type="texUjavascript">
Method Math.ceil0 digunakan untuk membulatkan nilai ke atas.
Sedangkan Math.floorQ akan membulatkan nilai ke bawah. Untuk lebih
ll Huruf acak 0-1 jelasnya, perhatikan source code dan hasilnya sebagai berikut.
var acak=Math.random0; <!--
document.write("Angka acak murni0-1 : ,'); - file : mathRoundFloor.html
docu ment.write(acak); - dir: JScripllbab4
- by:ZiDjho
llhuruf acak min-max
function getAngkaAcak(min, max){ <!DOCTYPE html>
return Math.randomO*(max-min)+6in; <html>

i <head>
document.write('<br/>Angka acak buatan 4-g : '); <title>Source Code JavaScript</title>
docu ment.write(getAn gkaAcak(4, 9 ));
<script type="texVjavascri pt">
</script> // Huruf acak 0-1
</head> //huruf acak min-max
<body>
 -T

JovoScript Source Code poling Dicoril Fungsi, Object don RegExp 161

function getAngkaAcak(min, max){

ffiE11OARI BI-qNGAI-I TENNESNN DAN TERKrcL
return Math. random0.(max-min)+min ;
Method Math.minQ digunakan untuk mencari nilai terkecil elemen dari
) parameter yang diberikan. Sedangkan Math.maxQ digunakan untuk
var acak=getAngkaAcak(4, 9); mencari nilai terbesar elemen dari parameter yang diberikan'
document.write('Angka Acak Float : '+acak); Perhatikan source code penggunaan method min dan max berikut.

document.write('<br/>Round :'); <!--

document.write(Math. round(acak)); - file : mathMinMax.html

document.write('<br/> Floor :'); - dir: JScriptlbab4

document.write(Math.fl oo(acak)); - by : ZiDjho

document.write('<br/> Ceil : ');
document.write(Math.ceil(acak)); <!DOCTYPE html>
</script> <html>
</head> <head>
<body> <title>Source Code JavaScript</title>

</body> <scri pt type="texVjavascri pt">

</html> var max= Math.max(27,1 8,5,24);

var min=Math.min(20, 1 8,5,67);
document.write("Max(27,1 8,5,24) : "+max);
document.write("<br/>Min(20, 1 8,5,67) : "+min);
</script>
</head>
<body>
</body>

Gambar 4.34 Pembulatan JavaScript </html>

 JovoScript Source Code Poling Dicoril Fungsi, Object don RegExP 163
162

<scri Pt tYPe="texUjavascriPt">

document.write('<Pre>');
var javaScript="Belajar JavaScript Langsung Latihan Dengan
Source Code Dasar";
document.write('JavaScriPt = ";'
docu ment.writetn (javaScriPt);
Gambar 4.35 Nilai terbesar dan terkecil elemen

REGEXP ll Cara 1

// Membuat pola regex dengan kelas RegExp(pola,flag)

Regular Expression adalah sebuah pola yang digunakan hampir seluruh
pemrograman yang memudahkan programmer untuk mencari pola tt pola RegEx dengan j kecil
tertentu dari suatu string. Regex dapat digunakan untuk membatasi
var regexobj=new RegExP(Java');
karakter apa saja yang diijinkan pada input, melakukan pencarian,
perbandingan, dan lain sebagainya. Objek RegExp dapat dibuat dari document.writeln("regexobj= n"* RegExp(lava')");
kelas RegExpQ atau dituliskan secara langsung dengan menuliskan pola
document.write("regexObj.test(avaScript) : ");
di antara tanda slash lpolal.
document.writeln( regexObj.test(javaScript));
MEruerres PomReoDo,
Terdapat 2 method yang digunakan untuk melakukan pengetesan /lpola RegEx dengan J besar
dengan regex yaitu test dan exec. Method testQ akan mengembalikan regexObj=new RegExP('Java');
nilai boolean true atau false. Sedangkan method exec mengembalikan
pola regex atau null. document.writeln0;
Berikut source code yang mendemonstrasikan penggunaan method testQ document.writeln("regexobj= n"* RegExp('Java')");
dan pembuatan objek regex. document.write("regexObj.test(avaScript) : ");
<!-- ( reg exO bj. test(j ava Scri pt)
d ocu m e nt.write I n );

- file : regexTest.html
- dir : JScriptlbab4 llCara2
- by:ZiDjho // Membuat pola regex secara langsung
llCaral=Cara2
<IDOCWPE html> llPola dengan j kecil
<html>
var regex=/java/;
<head>
document.writeln0;
<title> Source Code JavaScript</title>
docu ment.writel n("regex= liav al" )i
 JovoScript Source Code Poling Dicoril Fungsi, Object don RegExP 165

document.write("regex.test(iavascript) : ");
document.writeln( regex.test(avaScript)); ffiWH i) ltralhosl r:i.: . ;:\ i' t''' 'tiilr i "r
lagascripi = SeLaJar Javascripts Langsuug ktil,an teEgan sourc
rcgexobj= 6ew RegExF {' java' }
//Pola dengan J besar .egeecbj.test{:E?ascript} : f815e

regerDbj= &e{ RegEEP {',Java'}

var regex=/Java/; Fgerfb:.test llsvascriptl, Lro

document.writeln0; regex=/iaa/
rger.iesb{javascrll}t} : fa13e

document.writeln("regex = I Javal"):
regex.eEst{Jares*ript} : !!3e
document.write("regex.test(javaScript) : "); : false
/lETaJ.tE6LllBEascrj,tr)Ll
document.writeln( regex.test(avaScript));
Gambar 4.36 Penggunaan Regex

llCara3
REoDEDCC
document.writeln0;
Method kedua adalah exec. Method ini akan mengembalikan nilai dari
document.write("/javal.test(avaScript) : "); pola yang diberikan apabila pola ditemukan pada string. Jika pola tidak
document.writeln( /javal.test(javaScript)); ditemukan akan mengembalikan nilai null.
docu ment.write('</pre>')' selengkapnya, perhatikan penggunaan method exec di bawah untuk
menciri string eiemen array yang dimulai dengan karakter i. Anda dapat
</script> melihat hasilnya di bawah source code bahwa hanya elemen array yang
</head> sesuai dengan pola yang ditampilkan.
<body> <!--

</body> - file : regexExec.html

</html> - dir : JScriptlbab4

- by:ZiDjho

<!DOCTYPE html>
<html>
<head>
<title>Source Code JavaScript</title>
<script type="texUjavascript">
 1

il
i
Fungsi. Object don RegExP 167
'166 JovoScript Source Code Poling Dicoril

<!--
Var nabi = [,,Adam,,,
- file : regexFlag.html
"Nuh",'l brahim','lshaq','lsmail',"Yaqub",'Yusuf ,"Musa",'Daud','Sula
- dir : JScriPVbab4
iman',"lsa", "Muhammad"];
document.write(nabi); - bY :ZiDjho

for(var idx in nabi){

<!DOCTYPE html>
nama=/^i[a-z]+ig i. exec(nabiIidx]);
<html>
if(nama!=null)
<head>
document.write("<br/>"+nama);
<title>Source Code JavaScript</title>
)
<scri pt type="texUjavascri pt">
</script>
</head> document.write('<Pre>');

<body> var javaScript="Belajar JavaScript Langsung Latihan Dengan

</body> Source Code Dasar ++";

</html> document.writeln('JavaScript = "+javaScript);

document.writeln0;

// mengabaikan huruf besar/kecil (i:lgnore case)

var regexl gnore=new RegExp(Java','i');
document.writeln("regexlgnore=new RegExp('java','i')");
document.write("regexlgnore.test(avaScript)\t\t: ");
docu ment.writel n(regexl gnore.test(javaScript)) ;

") ;
document.write("/java/i.test(avaScript)\t\t:
Gambar 4.37 Penggunaan Method Exec
docu ment.writel n (/java/i.test(avaScri pt)) ;

PnnnnarreR REGE( document.writeln0;

lorrlrrp;rl 3 jenis parameter sebuah regex, yaitu i, g, dan m. Parameter i

(lgnorr r:rrse) digunakan untuk pencarian string dengan mengabaikan // mencari dalam kata (global)
Irurrrl lx,,;:rr dan kecil. g (global) digunakan untuk mencari pola pada
var regexGlobal=new RegExp(lava','g');
lncolrrrrrlrrrrr string dalam satu baris (baris dalam JavaScript adalah
Inmllor \r) rrr (multiline) digunakan untuk mencari pola pada semua docu ment.writeln("regexGlobal=new RegExp('java"'g')" );
Itatlr rltlnt, ");
docu ment.write("regexGlobal.test(avaScript)\t\t:
168 JovoScript Source Code poling Dicoril Fungsi, Objeci don RegExP

document.writeln(regexGlobal.test(avaScript)); document.write('</Pre>');
docu ment.write("/java/g.testfi avaScript)\t\t: ") ; </scriPt>
docu ment.writel n (/javalg.testfi avaScript)); </head>
<body>
// mencaridalam kata (global) </body>
regexGlobal=new RegExp('Java','g,); </html>
document.writeln("regexGlobal=new RegExp(,Java',,g,),');
document.write("regexGlobal.test(javaScript)\t\t: ");
docu ment.writeln(regexG Iobal.test(javaScript)) ;
jnsascr:pt = Belalat Jarass.iFt kiEseg ktihaB aenge see-'E cod DaBar
'+
docu ment.write("/Java/g.test(javaScri pt)\t\t: ");
regexlgnEre=Beu ReqSxP{'java'.'i" }
iEgex:gaore. test i javasctlpt) , true
docu me nt.writel n (/Java/g.test(javaScri pt)); /lEva/1, te3t 1la?ascript)

document.writeln0; :egexclobal=Eew RegexF (' -lava',' g' )

legexglEbal, les: I jBraSeEiElti : false
/leva/g, lesr (javascxiFt l : Ialse
regexa:obal-ae* aegExFt' Jata',' g' )
.egexclobal. tseei { I ataserapt }
// gabungan i dan g /;ara,r g . ie st { J a?as cripi }

iege*ElobalIgoc.e=ne, RegExp i' iaYa'

var regexGlobal lgnore=new RegExp(Java',,gi'); rege*Globa!:gucrE, te3t {i a{Esctlpt}
/ ja{a/gi. tesl {in?asc.iPt}
document.writeln("regexGlobal I gnore=new RegExp(java','gi,)"); ,eqE*alch=DeE RegiExF 1':a{a'.'E' }
.ege#tsch. bEst ( jarasc!iFll : fafse
document.write("regexGloball gnore.testfi avaScript)\t: "); lj avaJe. teBt { I EvEsittptl r fa1:e

document.writeln(regexGlobal lgnore.testfi avaScript));

Gambar 4.38 Penggunaan parameter Regex
docu ment.write("/java/g i.test(avaScript)\t\t:',);

document.writeln(/java/gi.testfi avaScript));
PENgnruqN $rnlruc DENCTAN Ree$,P
document.writeln0;
Source code berikut merupakan bentuk pencarian dengan sebuah pola
regex. Anda dapat memanfaatkan karakter vertikal I untuk mencari
// mencari banyak baris (m : multiline) beberapa alternatif pencarian. Dengan demikian akan menghemat kode
jika menggunakan if else sebagai statemen pencarian tetapi cukup 1 if
var regexMatch=new RegExp(Java','m'); saja.
document.writeln("regexMatch=new RegExpfi ava',,m,),'); <!--
rtocument.write("regexMatch.test(javaScript)\t\t:,'); - file : regexCari.html
r lor :rr ment.writeln(regexMatch.test(avaScript)); - dir : JScriptlbab4
r k rr r tlnont.write("/javalm.test(avaScript)\t\t: ',); - by :ZiDjho
r lr rr I lr I rr!r rl writeln(/javalm.test(iavaScript));
170
JovoScript Source Code Poling Dicori! Fungsi, Object don RegExp 171

<!DOCTYPE html>
<html>
* localho:Virtri$fbih{Jreg*x{ar!}{*1 *
<head>
Jrvascri[f = EelEldt JaqascrilrL kegs&g llatiiah DeagaD Sdurce csde DasE! ++
./{ehuali.test{javascti.pt} : E:dak ada
<title>Source Code JavaScript</title> /la{al sc.iFtlwdtrala/i.test{lav&Script} I xet@
<scri pt type="text/javascri pt">
Gambar 4.39 Pencarian Regex
document.write('<pre>');
var javaScript="Belajar JavaScript Langsung Latihan Dengan MerenrcE $TING DENciAr{ REqExP
Source Code Dasar ++";
Method string replaceQ dapat menerima parameter regex sehingga
document.writeln('JavaScript = "+javaScript); pencarian lebih dinamis. Berikut source code untuk me-
replace/mengganti bagian string dengan regex.
document.write("/wahana/i.test(avaScript)");
<!--
if(/wahana/i.test(avaScri pt)){
- file : regexReplaceString.html
document.writeln("\t\t: Ketemu");
- dir: JScripVbab4
ielsei
- by:ZiDjho
document.writeln("\t\t: Tidak ada");

)
document.write('Tjavalscriptlwahana/i.test(iavascript),,): <lDocryPE html>
<html>
if(4avalscriptlwahana/i.test(i6vascript)X
<head>
document.writetn(lt Ketemu");
<titl6>Source Code Javascript<^ide>
)elso{
<script type="texvjavascript'>
document.witetn("\t ridak ada');
document write('<Pre>');
)
document.writo(,</pre>);varstring=,'satubukan5,5bukansatu,saTuyasatu5ya5,
</sdipF emang organisasi satu nama banyak oknum';

</head> document.Miteln("st ing = ");

<bodf> document writeln(string):

</body> </html>
document.writeln('string.replace(/5/,'LIMA'It');
document.writeln(string.replace(/s/,'<strong>LIMA</strong>'));
document.writeln("sting.replace(/satu/gi,''l'It ");
 JovoScript Source Code Poling Dicori!

document.writeln(string.replace(/satu/gi,'<strong> 1 </strong>'));
document.writeln("string.replace(/5/9,'LIMA')\t: ");
document.writeln(string. replace(/5/9,'<strong>Ll MA</strong>'));
docu ment.write('</pre>')'
</script>
</head>
<body>
</body>
</html>

* Hvemt Hmmdllmg
3ai! b.tE! 5, 5 bukai Sat!, !a!, ya 3aEU 5 ya 5. E@trg o.ge1s{!i 3ara 4e. b.E?qk 6kne
strlEq,repla.i{/:lttue') :
,atu bukn LB, 5 bukaB saru. sa:r ya sabq 5 ya 5, aeag ..rar!Bae! saEu dffi b&yit .be
scriag.:eF1ac. (/Eatr/gi. '1' I
l bSan 5, 5 baia! 1. : I. 1 5 !a 5, eenq..geirnsr 1 se hsy.t 6kEE
ttr:as,.ap1.;e (lsls, rlIE' l
r.* bukan I,m7 L@ bukan sate, sas! Tr r.!s L@ ya 1.m, eenE .rgeires: sai! !]l'@ bsnrrk .kDe

Gambar 4.40 Replace dengan regex

 JovoScript Source Code Poling Dicori! Event Hondling
174

vent adalah sebuah aksi yang dapat dideteksi oleh JavaScript. document.getElementByld('load'). innerHTM L='Halaman
Setiap elemen pada halaman web pasti mempunyai event yang
dapat dipicu JavaScript. Sebagai contoh event adalah atribut selesai dimuat (diload) dalam waktu : '+new
onClick dari sebuah elemen button untuk mengindikasikan bahwa Date0. getMilliseconds0+" Milidetik";
sebuah fungsi akan dijalankan ketika user mengeklik button tersebut.
i
Event dapat didefinisikan pada seluruh tag HTML. Secara umum, event
docu ment.getElementByld('load-error').innerHTML="Hello
digunakan bersama dengan fungsi dan fungsi tidak akan dieksekusi
sebelum sebuah event terjadi. Error";
</script>
ONLOAD </head>
Event onload adalah event ketika suatu objek selesai dimuat (di-load) <body>
dan menampilkan seluruh elemen HTML pada browser. Event ini dapat
terjadi pada objek window, image, dan layer. Sedangkan tag yang <p id="load-error"></p>
mendukung event ini adalah <body>, <frame>, <frameset>, <iframe>, <p id="load"r./p>
<img>, <link> dan <script>.
</body>
Event ini dapat digunakan apabila JavaScript didefinisikan pada tag head
dan mengakses elemen-elemen di dalam body. Hal ini disebabkan </html>
JavaScript akan dieksekusi terlebih dahulu daripada elemen-elemen
pada body sehingga JavaScript akan mengakses DOM yang belum -:,P,:,,. x
_ (.1 Source Code jeasenpt
didefinisikan. Hal tersebut akan menghasilkan suatu kesalahan, seperti
terlihat pada gambar di bawah.
i f :' g,{J localhostjj:rrliir:r;;:/cr!.rad.ri:"ti *{
<!-- I ffalarnan selesai dimuat {diload} dalam wakfu : 8? Milidetrl<
1

- file : onLoad.html #,tu*u. rlnewree &**** D .q. *

..gv
- dir : JScripVbab5 I SUnaauCht TyFei.r?r: {nfrfrot 5et pr{pert!, 'interHlqi' ai n{11 anl4Bd,hts1r!4 :
)
- by : ZiDjho <rspf{ffit;:ffii LoEs gr: #:l
; 33 lq.i& Er.ors u&m*rEs

Gambar 5.1 Event Onload Window

<!DOCTYPE html>
<html>
ONUNLOAD
<head>
Event onunload adalah event yang terjadi ketika suatu objek selesai
<title>Source Code JavaScript</title> ditutup dan melepaskan seluruh resource yang berkaitan dengan
<scri pt type="texUjavascri pt"> halaman web. Objek yang didukung hanya window dan tag yang
didukung adalah body dan frameset.
wi ndow.onload=function(X
Berikut source code untuk mendemonstrasikan penggunaan event
onunload. File onUnload.html saat dijalankan otomatis akan membuka
jendela baru file jendela.html. Pada halaman jendela.html event onload
 r
JovoScripi Source Code Poling Dicori! Event Hondling
176 177

dan event onunload akan diberikan dan notifikasi akan diberikan pada <html>
halaman onUnload.html. <head>
Berikut file onUnload.htnrl yang akan membuka jendela.html pada <title>Source Code JavaScript - Jendela Baru</title>
jendela yang baru. Saat dieksekusi akan terlihat seperti Gambar 5.2.
<scri pt type="text/javascript">
<!--
onload=function0{
- file : onUnload.html
window.opener.document.write('<h2>Jendela Baru
- dir: JScripVbab5
Diload</h2>');
- by :ZiDjho
onunload=function0{
window.opener.document.write('<h2>Jendela Baru
<!DOCTYPE html>
Ditutup</h2>');
<html>
<head> i)
</script>
<title>Source Code JavaScript</title>
</head>
</head>
<body>
<body>
<div>Jendela baru</d iv>
<scri pt type="texVjavascri pt">
</body>
jendela=window.open(lendela.html','Jendela Baru');
</html>
</scriPt>
</bodY> '*tur.e&Jra*@
*{:
:

+ g r:; rsda*\-,. .r.,

'
</html> Jeftdcls lt*ru llil0fld
Sk.a**6S-r#k q-i*i
File kedua berisikan penanganan event load dan unload. Saat event !r
:
I l-: kjN -:1r'.{i,'-'n !,-,.

tersebut dipanggil, halaman ini akan mengirimkan notifikasi pada jendela

induk onUnload.html. Saat jendela ini ditutup akan terlihat pada jendela
i

induk seperti pada Gambar 5.3.

<!--
- file :jendela.html Gambar 5.2 Jendela induk onUnload saat dibuka
- dir : JScripVbab5
- by : ZiDjho

. tl)OCTYPE html>
 Event Hondling
JovoScript Source Code Poling Dicoril 179

)
*..'\' {, {i loiiihoi!i';?riiiia!1,:,!iiii, j. +t( 111+ var x=1;
Jendola Bltru Dllold function onKlik0{
derdela Saru Dltutup var div=document.createElement('div');
div.innerHTML='Klik tombol Attribute OnClick ke-'+(x++);
Gambar 5.3 Jendela induk setelah jendela baru ditutup document.getElementByld('hasil').appendChild(div);

i
</script>
Event onclick merupakan event yang terjadi ketika suatu elemen </head>
mendapat klik satu kali. Event ini dapat diberikan pada seluruh elemen <body>
tag dan objek halaman web.
<p id="hasil"></p>
Source code di bawah mendefinisikan event ketika halaman selesai di-
load dengan menuliskan event sebagai atribut pada tag button. <button onclick="onKlik0">Atribute OnClick</button>
<!-- <button id="klik">JavaScript</button>
- file : klik.html </body>
- dir : JScripUbab5 </html>
- by:ZiDjho

<IDOCTYPE html>
ffi localhostilsc r:plihsir:llklik.*trni *
<html>
<head> Klik tombol JavaScript ke-l
Klik tonrbol Atkibute OnClick ke-i
<title>Source Code JavaScript</title> KliL tonrb,sl Jarasedpt ke-?
<script type="texUjavascript"> Klik tornbol Atbibrte DuClick ke-2

onload=function(X ffiffi[.,qm*ffi;]
var y=1;
Gambar 5.4 Event OnClick
docu ment.getElementByld('klik').onclick=function0{
var div=document.createElement('div');
rliv. innerHTM L='Klik tombol JavaScript ke-'+(y++);
r loct rrnent.getElementByld('hasil').appendChild(div);

l
 JovoScript Source Code Poling Dicori! Event Hondling
180 181

border: 1px solid #999;

ONDBLCLICK
)
Event ondblclick adalah event yang terjadi ketika suatu elemen mendapat
klik 2 kali. Sama seperti klik event, ini dapat diberikan pada seluruh objek </style>
dan tag halaman web. </head>
Source code di bawah mendemonstrasikan penggunaan method pada <body>
sebuah tag div dan akan menampilkan sebuah alert saat div mendapat
event double klik. <div id="dblKlik">Double Klik Aku !</div>

<!-- </body>

- file : klikGanda.html </html>

- dir: JScripUbab5
- by:ZiDjho

<!DOCTYPE html>
<html>
<head>
<title>Source Code JavaScript</title>
<script type="texVjavascri pt">
onload=function(X
Gambar 5.5 Elemen Div mendapat Double Klik
var dbl=document.getElementByld('dblKlik');
var k=0; ONRHSHT
dbl.ondblclick=function(X
Event onreset adalah event yang terjadi ketika semua elemen input pada
alert(this. in nerHTML+' (s-'+(++k)); suatu form akan dikosongkan sesuai nilai awal. Event onreset hanya
dapat diberikan pada objek atau tag form. Event ini terjadi ketika sebuah
) input dengan type reset ditekan.
)
Source code di bawah saat dieksekusi akan menampilkan sebuah
</script> jendela konfirmasi, apakah yakin form akan direset. Jika ya form akan
<style> direset namun jika tidak form tidak akan direset.
<!--
r/dbrKrik{
- file : formOnReset.html
wirlth: 150px;
lk r.rl ktft: - dir: JScripUbab5
- by:ZiDjho

rl
 Event Hondling 183
Jovoscript Source Code Poling Dicoril
182

<IDOCTYPE html>
<html>
<head>
<title>Source Code JavaScript</title>
<scri pt type="texVjavascri pt">

onload=function0{ Gambar 5.6 Konfirmasi saat event reset dipicu

document.form 1 .onreset=function0i
var jwb=window.confirm('Anda yakin ingin mereset form ?');
if(ljwb)i
return false;

i
)
) Gambar 5.7 Elemen form direset
</script>
</head> ONSUBMIT
<body> Event onsubmit adalah event yang terjadi ketika suatu form akan akan
mengirimkan data-data elemen input. Event onreset hanya dapat
<form name="form1">
diberikan pada objek atau tag form. Event ini terjadi ketika sebuah input
<input name="nama" type="text"/><br/> dengan type submit ditekan atau pada saat tombol enter keyboard
ditekan.
<input name="alamat" type="text"/><br/>
source code di bawah saat dieksekusi akan menampilkan sebuah
<input name="agama" type="text"/><br/> jendela konfirmasi, apakah yakin nilai form akan dikirimkan. Jika ya nilai
<input type="reset" value="Reset"/> form akan dikirimkan. Pada gambar 5.9 di bawah terlihat ditambahkan
parameter URL yang merupakan nilaiform yang dikirimkan.
</form>
<!--
</body>
- file : formOnSubmit.html
</html>
- dir : JScripUbab5
- by:ZiDjho
 JovoScript Source Code Poling Dicori! Event Hondling 185

<IDOCTYPE html>
<html>
<head>
<title>Source Code JavaScript</title>
<scri pt type="texVjavascri pt">

onload=function0{
document.form l .onsubmit=function(X Gambar 5.8 Event submit diPicu
var jwb=window.confirm('Anda yakin ingin mengirim form ?');
if(!jwbX *
S localhost'jxrlljirii: tlior{10il-i:;:htrrii.}ilrilr#*ii'=rdfi+&Gi,isatrni}i};i&frijJmii:r:}i.'i&l
return false;

i
)
)
</script>
Gambar 5.9 Pengiriman nilai form
</head>
<body> ONFOCUS
<form name="form 1 " method="GET">
Event onFocus adalah event yang terjadi ketika suatu elemen
<input name="nama" type="text"/><brl> mendapatkan fokus. Hampir seluruh elemen mempunyai event ini'
<input name="alamat" type="text"/><br/> Berikut source code yang akan menampilkan pesan ketika elemen input
mendapatkan fokus.
<input name="agama" type="text" l><brl>
<input type="submit" value="Kirim"/>
<!--
</form>
- file : onFocus.html
</body>
- dir: JScripUbab5
</html>
- by:ZiDjho

<IDOCTYPE html>
<html>
<head>
 JovoScript Source Code Poling Dicoril
Event Hondling 187

<title>Source Code JavaScript</title>

<script type="texUjavascript">
onload=function0{
document.getElementByld('nama').onfocus=function0{
var pesan=document. getElementByld('pesan');
pesan.innerHTML="Masukkan nama dengan benar !

<br/>Hanya karakter a-z dan spasi yang diijinkan"; Gambar 5.11 lnPut mendaPat fokus

)
) ONtsLUR
</script> Event onblur adalah event yang terjadi ketika sebuah elemen kehilangan
</head> fokus. Event ini banyak digunakan pada sebuah form untuk melakukan
validasi input.
<body>
source code berikut akan menampilkan alert ketika elemen input
<input type="text" id="nama"/><span 16="pes?h"></span> kehilangan fokus, seperti terlihat pada Gambar 5.13 dan mengubah nilai
</body> input menjadi huruf kapital semua.
<!--
</html>
- file : formOnBlur.html
- dir: JScriPVbab5
- by:ZiDjho

<!DOCTYPE html>
<html>
<head>

Gambar 5.10 lnput belum mendapat focus <title>Source Code JavaScript</title>

<scri pt type="texUjavascript">

onload=function0{
document.form 1 . nama.onblur=function(X
alert('Nilai lnPut :'+this.value);
this.value=this.value.toUpperCase0;
)

)
 Event Hondling 189
188 Jovoscript Source Code poling Dicori!

</script>
</head>
<body>
<form name="form1">
<input id="nama" name="nama" type="text,'/> Gambar 5.14 Elemen input kehilangan fokus

</form>
</body>
</html> Event onChange adalah event yang terjadi ketika nilai suatu elemen input
berubah. Event ini hanya dimiliki oleh elemen text, select, textarea, dan
file upload.
Di bawah adalah source code yang mendeteksi perubahan nilai pada
select. Saat option berubah nilai, dari option akan ditampilkan pada
elemen tag h2.
<!--
- flle : formOnChange.html
- dir: JScripVbab5
Gambar 5.12 Elemen input mendapat fokus
- by:ZiDjho

<!DOCTYPE html>
<html>
<head>
<title>Source Code JavaScript</title>
<script type="texVjavascriPt">
onload=function0{
Gambar 5.13 Elemen input kehilangan focus
var h2=document.createElement('h2');
document.body.appendChild(h2);
document.getElementByld('pilih').onchange=function0{
h2. innerHTML='Bulan ke-'+this.value;

)
)
 JovoScript Source Code poling Dicori!
Event Hondling
191
</script>
</head> <IDOCTYPE html>

<body> <html>

<select 16=,,pilih,,> <head>

<option value=" 1 ">Januari</option> <title>Source Code JavaScript</title>

<option value="2">Pebruari</option> <script type="texUjavascript">

<option value="3">Maret</option> onload=function0{

</select> document.getElementByld('nama').onkeydown=function(e){

</body> if(Ad/.test(String.fromCharCode(e. keyCode)))t

</html> return false;

)
)
)
</script>
</head>
<body>
Gambar 5.15 Event OnChange
<input type="text" id="nama"/> </bodp </html>

Event onKeyDown adalah event yang terjadi ketika sebuah tombol

keyboard ditekan.
source code di bawah menunjukkan penggunaan keydown untuk
melakukan validasi terhadap suatu input. Validasi dilakukan dengan
memfilter/membatasi bahwa hanya input angka 0-9 yang diijinkan untuk
dimasukkan. selain karakter angka, input tidak akan menerima karakter
tersebut. Gambar 5.16 Event KeyDown
<!--
- file: onKeyDown.html
- dir : JScripVbab5
- by:ZiDjho
192 JovoScript Source Code poling Dicoril Event Hondling
193

<p id="p"></p>
</body>
mirip dengan event keydown, event keypress terjadi
J{"Tp'.r ketika
tombol keyboard ditekan dan ditahan. saat ditahan akan suatu </html>
perulangan penginputan karakter. terjadi
e:6 tg
Berikut source code yang memanfaatkan event keypress.
..'
$ So*..Coa"tu*"S..pt ',"

<!--
! ;- -;r. G # localhostiji{riptr,rhnir-1.io*(r';Fre;s.htm: *: a
- file : onKeypress.html
tAbu Asiah
- dir : JScripVbab5
- by:ZiDjho
Karakter : : Tidak diijinkan.
Karakter: : Tidak dnjinkan.
Karakter : I : Tidak diijinkan.
<!DOCTypE htmt> Karakter : 2 : Tidak diijinkan-
<html> Karakter : ! : Tidak diijin&aa.
Karaktcr : " : Tidak dnji*an.
<head> Kamkter : F : Tidak fiijil&an.
<title>Source Code JavaScript</tifle>
Karakter : ; : Tidak diijinkan-

<script type="texUjavascript,'>
Gambar 5.17 Event On Keypress
onload=function0{
document.getElementByld('huruf
).onkeydown=function(e){ ONKEYUP
if( !/[a-z\b\s]/i.test(String.fromCharCode(e. keyCode))){
Hampir mirip juga dengan kedua event di atas, yaitu event onkeyup.
var p=document.getElementByld('p'); Event onkeyup terjadi ketika tombol keyboard dilepas.
p. i n nerHTM L+="< br/> Kara kte r Source code di bawah menunjukkan penggunaan event onkeyup dengan
mengambil nilai dari elemen input kemudian menuliskannya pada elemen
"+String.fromCharCode(e.keyCode)+" : Tidak diijinkan.,,
lain. Dengan demikian, terlihat seperti menulis secara realtime pada
return false; elemen lain.
) <!--

) - file : formOnKeyup.html

) - dir: JScripUbab5
</script> - by: ZiDjho
</head>
<body> <IDOCTYPE html>
<input type="text" id="huruf7> <html>
 Event Hondling
Jovoscript Source Code Poling Dicoril
194

- dir : JScripUbab5
<head>
- by:ZiDjho
<title>Source Code JavaScript</title>
<script type="texUjavascript">
<IDOCTYPE html>
onload=function(X
<html>
document.getElementByld('nama').onkeyup=function0i
<head>
document.getElementByld('hasil').innerHTML=this.value;
<title>Source Code JavaScript</title>
)
<script type="texVjavascript">
)
onload=function(X
</script>
</head>
document.getElementByld('tombol').onmousemove=function(eX
<body>
this.innerHTML="Posisi Mouse ; "+9.1+","+g.y;
<input id="nama" tyrpe="text"/>
)
<h2 id="hasil"><lhz>
</body> </html>
i
</script>
<style>
fftombol{
position: absolute;
padding: 3px SPx;
border: 1px solid #999;
Gambar 5.18 Event OnKeyup
background-color: #988;
ONMOU$EMOVE width: 100px;
Event onmousemove adalah event yang terjadi ketika pointer mouse height: 100px;
bergerak pada suatu elemen. Source code berikut menunjukkan cursor: pointer;
pergerakan mouse, yaitu dengan menuliskan posisi pointer mouse
torhadap elemen div yang diberikan event mouse move. Sebuah fungsi text-align: center;
ovont mempunyai parameter e(objek Event). Parameter e ini mempunyai
)
proporli x yang menunjukkan posisi pointer secara horizontal dan y
qo(:itrn vertikal. </style>

<l-- </head>

filo : onMouseMove.html <body>

 JovoScript Source Code Poling Dicori! Event Hondling
196 197

<div id="tombol">Div</div> th is. setAttribute('style','backgrou nd-color:#F00 ;');

</body> )
</html> )
</script>
<style>
$ localhos$iuript/hail5l*+,s,!i:r.tieMr:vr.htmi $
#tombol{
position: absolute;
padding: 3px Spx;
border: 1px solid #999;
background-color: #988;
Gambar 5.19 Event Mouse Move width: 100px;
cursor: pointer;
ONMOUSEOUT text-align: center;
Event onmouseout adalah event yang terjadi ketika pointer mouse
border-radius:5px;
meninggalkan elemen yang mempunyai event ini. Source code berikut
menunjukkan penggunaan event mouse out pada sebuah elemen div, )
dimana elemen akan berubah warna menjadi merah apabila pointer
</style>
mouse meninggalkan elemen.
</head>
<!--
<body>
- file : onMouseOut.html
<div id="tombol">Div</div>
- dir: JScripUbab5
</body>
- by:ZiDjho
</html>

<!DOCTYPE html>
<html>
<head>
<title>Source Code JavaScript</title>
<script type="texUjavascript">
ontoad=function0{
document.getElementByld('tombol').onmouseout=function(eX
 JovoScript Source Code Poling Dicori!
198 Event Hondling

th is.setAttribute('style','backgrou nd-color:#999;');

)
docu ment.getElementByld('tombol').onmouseover=function(eX
this.setAttribute('style','backgrou nd-color:#00F ;');
Gambar 5.20 Pointer berada di atas elemen
)
)
</script>
<style>
#tombol{
Gambar 5.21 Pointer meninggalkan elemen position: absolute;
padding: 3px Spx;
ONMOUSECVER border: 1px solid #999;
Kebalikan dari mouseout, event onmouseover terjadi ketika sebuah background-color: #999;
pointer mouse memasukielemen yang mempunyaievent ini.
width: 100px;
Source code berikut menunjukkan penggunaan mouseover pada elemen
cursor: pointer;
div, dimana elemen akan berubah menjadiwarna biru saat pointer mouse
berada di atas elemen div. text-align: center;
<!-- border-radius:5px;
- file : onMouseOver.html )
- dir: JScripVbab5 </style>
- by :ZiDjho </head>
<body>
<IDOCTYPE html> <div id="tombol">Div</div>
<html> </body>
<head> </html>
<title>Source Code JavaScript</title>
<script type="texUjavascri pt">
onload=function(X
document.getElementByld('tombol').onmouseout=function(eX
 JovoScript Source Code Poling Dicoril Event Hondling
200

var jml=0;
document. getElementByld ('tombol').onmousedown=function (X
alert('Anda mengklik mouse'+(++iml)+' kali')
)
Gambar 5.22 Mouse di luar elemen )
</script>
<style>
#tombol{
position: absolute;
padding: 3px 5px;
Gambar 5.23 Mouse memasuki area elemen
border: 1px solid #999;

ONMOUSEDO\ tr-l background-color: #988;

border-radius:5px;
Event mousedown terjadi ketika tombol pada mouse (baik kanan atau
kiri) ditekan sehingga event ini mirip dengan event onclick pada suatu width: 100px;
elemen.
height: 100px;
Berikut source code penggunaan event onmousedown pada elemen div.
cursor: pointer;
Saat mouse berada pada elemen div dan sebuah tombol pada mouse
ditekan maka sebuah alert akan munculjumlah user mengklik elemen. )
<!-- <istyle>
- file : onMouseDown.html </head>
- dir: JScripUbab5 <body>
- by :ZiDjho <div id="tombol">Div</div>
</body>
<!DOCTYPE html> </html>
<html>
<head>
<title>Source Code JavaScript</title>
<scri pt type="texVjavascript">

onload=function(X
 Event Hondling
JovoScript Source Code Poling Dicori!
202
this.innerHTML="Mouse Out -Mouse keluar area";
)
document.getElementByld('area')'onmouseover=function(eX
this.setAttribute('style','background-color:#BBB;');
this.innerHTML="Mouse Over -Mouse masuk area"

)
document.getElementByld('area')'onmouseup=function(e){
this. setAttribute('style','backg round-color:#E EE ;' );
Gambar 5.24 Event OnMouseDown this.innerHTML="Mouse Up -klik tahan dan lepas";
)
ONMOUSgUP
)
Event onmouseup adalah event yang terjadi ketika penekanan tombol </script>
mouse dilepaskan. Untuk membedakan dengan mousedown dapat
dilakukan dengan menekan dan menahan tombol mouse. Saat itu yang <style>
terjadi hanyalah event mousedown sampai tombol dilepas, barulah event
#area{
mouseup dijalankan.
position: absolute;
Source code berikut menunjukkan event mouseup dan event lain
sehingga memberikan efek saat mouse memicu event-event pada padding: 3px 5px;
elemen div tersebut.
border: 1px solid #999;
<!--
background-color: #999;
- file : onMouseUp.html
width: 100px;
- dir: JScripVbab5 height:100px;
- by : ZiDjho
cursor: pointer;
text-align: center;
<!DOCTYPE html>
)
<html>
</style>
<head>
</head>
<title>Source Code JavaScript</title>
<body>
<script lyrpe="texUjavascript">
<div id="area">Area Mouse</div>
onload=function(X </body>
docu ment. getElementByld('area').on mouseout=fu nction(e){ </html>
th is. setAttri bute('style','backgrou nd-color:#999;') ;
 Jovoscript Source Code Poling Dicori!
204 Event Hondling
205

Gambar 5. 25 Posisi awal

Gambar 5.28 Event Mouse Up

Event OnSelect adalah event yang terjadi pada elemen input text dan
textarea saat nilai pada elemen tersebut diblok (diseleksi). Berikut source
code yang menampilkan alert saat user menyeleksi nilai pada elemen
textarea.
<!--
Gambar 5.26 Event Mouse Over - file : onSelect.html
- dir: JScripUbab5
- by :ZiDjho

<IDOCTYPE html>
<html>
<head>
<title>Source Code JavaScript</title>
Gambar 5,27 Event Mouse Out
<script type="texVjavascript">
onload=function0i
document.getElementByld('input').onselect=function(e){
alert("Anda telah menyeleksi teks !");
)
)
</script>
 Eveni Hondling
207
JovoScript Source Code Poling Dicori.
<html>
</head> <head>
<body>
<title>Source Code JavaScript</title>
<textarea id="input" name="input" rows="4" cols="20">Belajar <script type="texUjavascript">
JavaScript ltu Mudah !</textarea> wi ndow.on resize=fu nction0i
</body>
var a=document.getElementByld('a');
</html>
a.innerHTML=a.clientWidth+","+a.clientHeight;

)
</script>
</head>
<body>
<div id="a"></div>
</body>
</html>

Gambar 5.29 Event OnSelect

ONRESIZE
Event onresize adalah event yang terjadi ketika ukuran suatu elemen
atau objek berubah. Objek yang mempunyai event ini hanya window dan Gambar 5.30 Event OnResize
hampir seluruh tag mendukung event onresize.
Source code di bawah menunjukkan event onresize pada window dan
mendeteksi perubahan lebar tag div. Perubahan lebar tag div akan
ditampilkan pada tag itu sendiri. Event onabort terjadi ketika sebuah gambar yang di-load dihentikan.
<!-- Event ini hanya disuport oleh tag img. Berikut source code yang akan
menampilkan alert ketika loading gambar dihentikan.
- file : onResize.html
<!--
- dir : JScripVbab5
- file : onAbort.html
- by :ZiDjho
- dir : JScripVbab5
- by :ZiDjho
<!DOCTYPE html>
 JovoScript Source Code Poling Dicoril Event Hondling
?08
209

<title>Source Code JavaScript</tifle>

<IDOCTYPE html> <script>
<html> function enoO{
<head> alert('terjadi kesalahan memuat gambar');
<title>Source Code JavaScript</title> )
<script> </script>
function batal0{ </head>
alert('Gambar batal dimuat !'); <body>
) .img src="gambarl .jpg" id="gbr" onerror="error0"/>
</script> </bodp </html>
</head>
<body>
<img src="gambar1 jpg" onabort="batal0"/>
</body>
</html>

Event oneror terjadi ketika sebuah error/kesalahan muncul pada saat

halaman web atau gambar yang sedang dimuaUdi-load. Berikut source
code yang akan menampilkan alert ketika loading gambar mengalami
kesalahan/error.
<!--
- file : onError.html
- dir: JScripUbab5
- by: ZiDjho

<IDOCWPE html>
<html>
<head>
 JovoScript Source Code Poling Dicoril
210

Ctrt*'k*e* &*mx# Tmhen

\#a**dmc*
 r

JovoScript Source Code Poling Dicoril Cookie, Ajox,Tobel Volidosi 213

212
.

ewirausahaan atau entrepreneurship merupakan dunia yang )

mementingkan kecepatan, ketepatan, serta pengolahan data yang
Berikut source code untuk menambahkan cookie dengan fungsi di atas.
sangat intensif. Untuk itu ketika bekerja, seorang entrepreneurship
perlu menggunakan sebuah perangkat komputer beserta aplikasi <l--
pengolah Oiia yang andal sehingga semua pekerjaan yang dilakukan
- file : tambahCookie.html
berjalan dengan lancar.
- dir : JScripUbab6

COOKIH - by:ZiDjho

cookie adalah sebuah variabel yang disimpan pada komputer

pengunjung. setiap kali komputer yang sama melakukan permintaan <scri pt src="cookie.js"></scri pt>
irafamah wLb dengan browser, browser akan mengirim juga cookie yang
ada. Dengan JaviScript Anda dapat membuat dan mendapatkan nilai
<label>Nama</label><input tyrpe="text" id="nama"
dari cookie tersebut. value=""/><br/>
<label>Nilai</label><input type="text" id="nilai" value=""/><br/>
t1dEF,141v1gM cOOttE <button id="tambah">Tambah</button>
Untuk memudahkan penambahan cookie dengan JavaScript, Anda dapat <scri pt type="texUjavascript">
membuat sebuah objek dengan method yang digunakan untuk
menambahkan cookie. var button=document.getElementByld("tambah");
button.oncl ick=fu nction(X
* var txtNama=document. getElementByld('nama');
file : cookie.js
* dir: JScripUbab6 var txtN ilai=document.getElementByld('nilai');
*l zcookie.tambah(txtNama.value,txtNilai.value);
var zcookie={ alert("Cookie telah ditambahkan");

)
var basi=new DateQ, </script>
// Membuat string format untuk penambahan cookie
// format umum : keyCookie=nilaiCookie;
format=namg+"="+(nilai=="undefined"?"0" : nilai);

basi.setDate(basi.getDate0+lama);
1or,121+=((basi==null)?"":";expires="+basi.toLocaleString());
//Menambahkan cookie
docu ment.cookie=format;

)
 JovoScript Source Code Poling Dicori!
Cookie, Ajox,Tobel Volidosi 215

for (var i in zkuki) {

Hasil dari source code di atas sebagai berikut.
zkuki[i]=uPsscaPe(zkuki[i]);

)
//mengembalikan seluruh cookie dalam bentuk JSON
return zkuki;

)
i
Selanjutnya untuk menggunakan method get pada source code cookie.js
di atas, tuliskan source code berikut.
<!--
Gambar 6.1 Penambahan Cookie - file : getCookie.html
- dir : JScripUbab6
MeruoRpnrxnru Cocxce
- by : ZiDjho
Untuk mendapatkan cookie tambahkan method get pada file cookie.js di
atas dengan script sebagai berikut.
<scri pt src="cookie.js"></script>
get:function(nama){
// Mendapatkan seluruh cookie
<label>Nama </label> <input type="text" id="nama"

var zkuki=document.cookie; value=""/><brl>

<button 16="get">Get</button>
// Mengubah cookie menjadi objek JSON
<script type="texVjavascript">
zkuki="({"+zkuki. replace(A=/9,':"'). replace(A;\s/9,"',')+"'})';
zkuki=eval(zkuki); var button=document.getElementByld("get");
button.onclick=function(X

// Mengecek keberadaan cookie var txtNama=document.getElementByld('nama');

var ku ki=zcookie. get(txtN ama.val ue) ;
if(!zkuki[nama])i
return false; if(!kuki){
alert("Cookie "'+txtNama.value+"' belum Ada !");
)
if(typeof nama=='string'X )else{

//mengembalikan nilai cookie tertentu alert("Nilai Cookie "+txtNama.value+" : "+kuki);

return unescape(zkuki[nama]); )

)else{ )
 f
JovoScript Source Code Poling Dicori! Cookie, Ajox,Tobel Volidosi 217
2',t6

</script> var txtN ilai=document.getElementByld('nilai');

if(!zcookie. get(txtNama.value)){
Hasil dari source code di atas sebagai berikut.
alert("Cookie belum Ada");

)elsei
zcookie.ta m ba h (txtN a ma. va I u e, txtN iI a i. va I ue );

alert("Cookie telah diubah");

)
)
</script>

Hasil dari source code di atas pada browser terlihat sebagai berikut.
Gambar 6.2 Nilai Cookie buku

MrNcuaAH Coo<le
Untuk mengubah cookie dapat digunakan method tambah pada objek
zcookie. Berikut source code untuk mengubah nilai sebuah cookie.
<!--
t&*l
- file : ubahCookie.html
- dir: JScripVbab6
- by:ZiDjho
Gambar 6.3 Hasil pengubahan Cookie

<script src="cookie.js"></script>
<label>Nama </label> <input type="text" id="nama"
value=""/><br/>
<label>Nilai </label> <input type="text" id="nilai" value=""/><br/>
<button id="ubah">Ubah</button>
<scri pt type="texVjavascri pt">

var button=document.getElementByld("ubah");
button. oncl ick=fu nction (X

var txtNama=document.getElementByld ('nama');

 JovoScript Source Code Poling Dicori!
Cookie, Ajox,Tobel Volidosi
2',19

button.oncl ick=fu nction (X

ffi Sltrathost.i r:r'..1,t,,.i,rF:i 1!" \ :.'.:. *ffi
var txtNama=document.getElementByld('hapus');
Nama,usemare
Nnai var kuki=zcookie.get(txtNama.value);
i!&+;- ar"*.air"-u*"ffi if(!kuki){
alert("Cookie "'+txtNama.value+"' tidak Ada !");

)else{
zcookie. hapus(txtNama.val ue);
Gambar 6.4 Pengubahan Cookie gagal
alert("Cookie "+txtNama.value+" : telah dihapus l");
MerucnnpusCooffi )
Untuk menghapus cookie, tambahkan method hapus pada objek zcookie )
pada file cookie.js sebagai berikut. </script>
hapus:function(nama){
Hasil dari source code di atas sebagai berikut.
nama =nama+"=,,";

docu ment.cookie=nama;

Source code di bawah digunakan menghapus cookie dengan method

hapus pada objek zcookie. faran loalhst sys
G di

<!-- Coolb'b!rl& r tclah dilEp{s I

- file : hapusCookie.html
- dir: JScripVbab6
- by: ZiDjho
Gambar 6.5 Hasil penghapusan Cookie

<script src="cookie.js"></script>
VALTNASI
<label>Nama </label> <input type="text" id="nama"
JavaScript dapat digunakan untuk melakukan validasi data pada form
value=""/><brl> sebelum dikirimkan pada server. Pada subbab ini akan dibahas source
<button id="hapus">Hapus</button> code pembuatan validasiform saat sebuah form dikirim.
<scri pt type="texVjavascri pt">

var button=docu ment.getElementByld("hapus");

 JovoScript Source Code Poling Dicori! Cookie, Ajqx,Tobel Volidosi 221

Vru-nnsr lumr.Tpru<
t r ffi *H, l(osoto
Berikut source code untuk membatalkan pengiriman sebuah form apabila
sebuah input tidak berisikan nilai.
<!--
- file : validasiRequired.html
- dir: JScripUbab6
- by :ZiDjho
Gambar 6.6 Validasi input tidak boleh kosong

<script type="texUjavascri pt">

function butuh0{
Berikut source code untuk membatalkan pengiriman sebuah form apabila
var nilai=document.forms['required']['nama'].value; nilai input bukan sebuah karakter digit 0-9.
if(nilai==null ll nilai=="';1 <!--
alert('lnput tidak boleh kosong !'); - file : validasiAngka.html
/iMembatalkan pengiriman form - dir: JScripVbab6
return false; - by:ZiDjho
)
) <scri pt type="texUjavascript">
</script> function validasiAngka0{
<form name="required' method="POST" onsubmit="return var nilai=document.forms['angka']['nilai'].value;
butuh0"> if(AD/g.test(nilai)){
<input type="text" name="nama" value="" /> alert('lnput hanya menerima digit 0-9!');
<input type="submit" value="Kirim" /> //Membatalkan pengiriman form
</form> return false;

Hasil dari source code di atas pada browser terlihat seperti Gambar 6.6 )
di bawah ini.
)
</script>
I
<form name="angka" onsubmit="return validasiAngkaO">
<input type="text" name="nilai" value="" />
 JovoScript Source Code Poling Dicori!
Cookie. Ajox,Tobel Volidosi 223

<input type="submit" value="Kirim" />

</script>
</form>
<form name="huruf' onsubmit="return validasi Huruf0">
<input type="text" name="fhuruf' value="" />
<input type="submit" value="Kirim" />
</form>

Gambar 6.7 Input hanya sebuah digit

\{sp6sr INPUT: l{Ar{YA'HuRt F

Gambar 6.8 lnput hanya huruf
Berikut source code yang digunakan untuk melakukan validasi input saat
sebuah form dikirim. lnput yang diijinkan hanya berupa karakter huruf a-
zA-Z selain karakter tersebut pengiriman form akan dibatalkan. Vru:onsrEnnruu
<!-- Berikut adalah validasi sebuah input form yang akan mengecek format
- file : validasiHuruf.html sebuah email. Jika nilai input tidak sama dengan format email maka
pengiriman form akan dibatalkan.
- dir : JScripVbab6
<!--
- by :ZiDjho
- file : validasiEmail.html
- dir : JScripUbab6
<scri pt type="texVjavascript">
- by: ZiDjho
function validasiHuruf$i
var nilai=document.forms['huruf]['fhuruf].value;
<script type="texUjavascript">
if(/[^a-z]/g i.test(nilai ))i
function validasiEmail0{
alert('lnput hanya menerima huruf a-z!');
var nilai=document.forms['femail']['email'].value;
//Membatalkan pengiriman form
var at=nilai.indexOf("@");
return false;
var dot=nilai. lastl ndexOf('.');
) if(at<1 ll dotcat+2 ll dot+2>=nilai.length){
)
 JovoScript Source Code Poling Dicoril Cookie, A.jox,Tobel Volidosi

alert('Format email tidak benar !'); MrruBnpnncpru Effi Mm{ THrap

//Membatalkan pengiriman form Source code di bawah digunakan untuk mendapatkan elemen thead
return false; pada sebuah tabel dengan membaca jumlah tr/baris, jumlah kolom (th/td)
setiap baris, dan nilaidari masing-masing kolom.
)
<!--
)
- file : tabel-thead.html
</script>
- dir : JScripUbab6
<form name="femail" onsubmit="return validasiEmail0">
<input type="text" name="email" value="" />
<table id="tabel" border="1" width="30%">
<input type="submit" value="Kirim" />
<thead>
</form>
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
</tr>
<tr>
<td>1</td>
<td>Abu Asiah</td>
<td>Semarang</td>
</tr>
Gambar 6.9 Validasi Email </thead>
<tbody>
DOM TAtsEL </tbody>
Tabelsering digunakan untuk menampilkan data secara baris dan kolom.
</table>
Dengan JavaScript Anda dapat memanipulasi tabel, baik mendapatkan
elemen thead, tbody, tfoot, tr, td dan memberikan nilai padanya. <div id="hasil"></div>
<scri pt type="texUjavascript">

var tabel=document.getElementByld('tabel');
var thead=tabel.tHead ;

var hasil=document.getElementByld('hasil');
 Cookie, Ajox,Tobel Volidosi
JovoScript Source Code Poling Dicori!
226

hasil.innerHTML="<b>Pembacaan Thead</b><br/>"; Mel'tpsRnnwr-$qefA,qUpllBqeE$,'

hasil.innerHTML+="Jumlah Baris : "+thead.rows.length; TBodies mengembalikan array daritbody yang dimiliki tabel. Source code
for(var baris=0;baris<thead.rows. length; baris++){
di bawah mendemonstrasikan penggunaan tbodies untuk membaca
jumlah tbody dan jumlah baris (tr) masing-masing tbody.
var row=thead.rows[baris]; <!--
hasil.innerHTML+="<br/>Jumlah Kolom Baris "+(baris+1 )
- file : tabel-tbody.html
+" : "+row.cells.length;
- dir: JScripUbab6
for(var kolom=0;kolom<row.cells.length; kolom++X
- by:ZiDjho
var colums=row.cells[kolom];
hasil.innerHTML+="<br/>Nilai Baris "+(baris+1 )+" Kolom " <table id="tabel" border=" 1 " width="307o">
+(kolom+1 )+" : "+colums.innerHTML;
<thead>
) <tr>
) <th>No</th>
</script>
<th>Nama</th>
<th>Alamat</th>
<ltr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Muhammad</td>
<td>Madinah<itd>
</tr>
<tr>
<td>2</td>
<td>Abu Bakr</td>
Gambar 6.10 Pembacaan elemen thead
<td>Madinah</td>
</tr>
</tbody>
i

li
 JovoScript Source Code Poling Dicoril Cookie, Ajox,Tobel Volidosi
228 229

<tbody>
<tr> $ abuasiah.comils{ri}ut}a*6,rU}i]8}-tb*dy.llmi *
<td>3</td> ltlo Nau Alqt
I tffiatrcraal i{a&*
<td>Umar</td>
lbt Bds *{adr*
<td>Madinah</td> -Itw iMir&

<itr> Perbraa EkaocalBody

</tbody> Waltfoq,Z
Jimtrab Bais TBodl' ke-l : J
</table>
Jlulalr Bais TBody lce-2 : I
<div id="hasil"></div>
<script type="texUjavascript"> Gambar 6.11 Pembacaan TBodies
var tabel=document.getElementByld('tabel');
var hasil=document.getElementByld('hasil'); Menonpnn<nru Eueueru TFoor
hasil.innerHTML="<p>Pembacaan Elemen TBody</p>"; Elemen tfoot table selalu menjadi baris paling akhir dari tabel. Source
code di bawah digunakan untuk membaca jumlah baris dan nilai dari
var jmlBody=tabel.tBodies.length ; kolom yang dimilikioleh tfoot.
hasil. innerHTML+="<p>Jumlah TBody : "+jmlBody+"</p>"; <!--
for(var t=0;t<jmlBody;t++X - file : tabel-tfoot.html
var tbodY=ft bel.tBodies[t]; - dir: JScripUbab6
var jmlBaris=tbody.rows.length; - by:ZiDjho
hasil.innerHTML+="<p>Jumlah Baris TBody ke-"
+(t+1 )+" : "+jmlBaris+"./pr"; <table id="tabel" border="1 " width="307o">
) <tfoot>
</script> <tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
<itr>
</tfoot>
<tbody>
 JovoScript Source Code Poling Dicoril Cookie, Ajox,Tobel Volidosi 231

<tr>
<td>1</td>
<td>Abu Asiah</td>
<td>Semarang</td>
<ltr>
ldtr&Bris: I
</tbody> hml*KolomBark I :l
NdaiBds I Kolm 1:No
</table> NkiBnis lKohm?:Nma
I$ilriBEtrk I Kotrsr 1:Alaat
<div id="hasil">
</div> Gambar 6.12 Pembacaan Tfool
<scri pt type="texVjavascript">

var tabel=document.getElementByld('tabel'); [/shrAn'{Bql.l Bnrus Dnrn

var tfoot=tabel.tFoot; Source code di bawah mendemonstrasikan penambahan baris baru <tp,
beserta elemen <td> pada tbody sehingga menjadi penambahan baris
var hasil=document.getElementByld('hasil'); data baru pada tabel.
hasil.innerHTML="<b>Pembacaan TFOOT</b><br/>"; <!--
hasil.innerHTML+="Jumlah Baris : "+tfoot. rows.length ;
- file : tabel-addtr.html
for(var baris=0;baris<tfoot.rows. length ;baris++){ - dir: JScripVbab6
var row=tfoot. rows[baris] ; - by:ZiDjho
var colums=row.cells;
hasil.innerHTML+="<br/>Jumlah Kolom Baris "+(baris+1 ) <table id="tabel" border="1 " width="307o">
+" : "+colums.length; <thead>
for(var kolom=0;kolom<colums.length; kolom++){ <tr>
hasil.innerHTML+="<br/>Nilai Baris " <th>No</th>
+(baris+1 )+" Kolom "+(kolom+1 )+" : " <th>Nama</th>
+colums[kolom]. innerHTML; <th>Alamat</th>
) </tr>
) </thead>
</script> <tbody>
<tr>
 JovoScript Source Code Poling Dicori! Cookie, Ajox,Tobel Volidosi

<td>1</td>
<td>Abu Asiah</td>
MEh{GrrAPUs BarusDnr*
<td>Semarang</td>
Source code di bawah mendemonstrasikan penghapusan baris/elemen
<tr> yang ada pada suatu tabel.
</tr>
<!--
<tr>
- file : tabel-deltr.html
<td>2</td>
- dir: JScripUbab6
<td>ZiDjho</td>
- by: ZiDjho
<td>Boyolali</td>
</tr>
<table id="tabel" border="'t " width="307o">
</tbody>
<thead>
</table>
<tr>
<script type="texVjavascri pt">
<th>No</th>
var tabel=document.getElementByld('tabel');
<th>Nama</th>
var tbody=fabel.tBodies[0];
<th>Alamat</th>
var trbaru=tbody. insertRow(tbody.rows.length);
<ltr>
trbaru.insertCell(0). innerHTML=tbody. rows. length ;
</thead>
trbaru. insertCell( 1 ). innerHTM L="Nama Baru";
<tbody>
trbaru. insertCell(2). innerHTML="Alamat Barus";
<tr>
</script>
<td>1</td>
<td>Abu Asiah</td>
<td>Semarang</td>
</tr>
<tr>
<td>2</td>
<td>ZiDjho</td>
<td>Boyolali</td>
Gambar 6.13 Penambahan elemen baris data baru
</tr>
</tbody>
</table>
 Cookie, Ajox,Tobel Volidosi
JovoScript Source Code Poling Dicori! 235

<th>No</th>
<div id="hasil"></div>
<th>Nama</th>
<scri pt type="texVjavascri pt">
<th>Alamat</th>
var tabel=document.getElementByld('tabel');
<ltr>
var tbody=tabel.tBodies[O] ;
</thead>
// Menghapus baris Pertama
<tbody>
tbody.deleteRow(0);
<tr>
var divHasil=document. getElementByld('hasil');
<td>1</td>
divHasil.innerHTML="Baris Pertama dihapus !";
<td>Abu Asiah</td>
</script>
<td>Semarang</td>
</tr>
<tr>
<td>2</td>
<td>ZiDjho</td>
<td>Boyolali</td>
</tr>
Gambar 6.14 MenghaPus baris data </tbody>
</table>
fulrNeusAH BnnmDnrn
<script type="texUjavascri pt">
source code di bawah digunakan untuk mengubah nilai <td> pada suatu
baris <tr>. Pembacaan dilakukan dengan membaca objek td yang dimiliki var tabel=document.getElementByld('tabel');
suatu tr kemudian mengubah innerText yang dimiliki. var tbodY=fsbel.tBodies[0];
<!-- //Mendapatkan baris pertama
- file : tabel-ubah-data.html var tr=tbody.rows[0];
- dir : JScripUbab6 //Mendapatkan array kolom baris pertama
- by :ZiDjho var td=tr.cells;
td[0].innerHTML=" 1 00";
<table id="tabel" border="1 " width="300px"> td[1 ].innerHTML="Nama Diubah";
<thead> td[2].innerHTML="Alamat Diubah";
<tr> </script>
 JovoScript Source Code Poling Dicori!
236 Cookie, Ajox,Tobel Volidosi

</thead>
* abuasiatrcom,,'l${ritrllhah*jta,r*t -rit}ah-data^htrlri * <tbody>
ilto Naui *Lgrr </tbody>
l@ {eaDiub* llAhe*Dtub* </table>
) lQ&o }oyotali
<script>

Gambar 6.15 Pengubahan baris data var tabel=document. getElementByld('tabel');

var tbody=1sbel. tBodies[0];
M B*RrsD*rnnAHFoRMlrunn ,,' ',
tombol=document.getElementByld('tambah,);
Source code di bawah mendemonstrasikan penambahan baris tombol.oncl ick=fu nction(eX
secara dinamis dengan suatu form.
var baris=tbody. insertRow(tbody. rows. length);
<!--
baris.insertCell(0).innerHTML=tbody. rows.length;
- file : tabel-add-data.html
baris.insertceil( innerHTML=document.ftaber. nama.varue;
1 ).
- dir: JScripUbab6
baris. insertcell(2).innerHTML=document.ftaber.aramat.value;
- by: ZiDjho
)
</script>
<form name="ftabel" onsubmit="return false">
<label>Nama : </label><input type="text" name="nama" value=""
l><brl>
<label>Alamat : </label><input type="text" name="alamat"
value="" />
</form>
<button id="tambah">Tambah</button>
<table border="1 " id="tabel">
<thead>
Gambar 6.16 Menambah baris data dari form input
<tr>
<th width="1 0px">No</th>
<th width="1 00px">Nama</th>
<th width=" 1 50px">Alamat</th>
<ltr>
 Cookie. Ajox,Tobel Volidosi
JovoScript Source Code Poling Dicoril

<div id="hasil"></div>
EreNnTneel <scri pt type="texUjavascri pt">

Source code di bawah mendemonstrasikan penggunaan event click pada var tabel=document.getElementByld('tabel');
tabel untuk mendapatkan informasitabel, baik kolom maupun baris. var divHasil=document. getElementByld('hasil');
<!--
var jmlClick=O;
- file : tabel-event-click.html
tabel.tBodies[0].onclick=function(e)i
- dir: JScripUbab6 divHasil.innerHTML+=,,<br/>,,+(++jmlClick)+,. Anda memilih :
- by:ZiDjho
// Mendapatkan index baris
var indeksTr=e.target. parentNode. rowl ndex;
<table id="tabel" border="1 " width="307o">
divHasil. innerHTML+="<br/>Baris ["+indeksTr;
<thead>
// Mendapatkan index kolom
<tr>
var indeksTd=e.target.celllndex;
<th>No</th>
divHasil.innerHTML+="] Kolom [,,+indeksTd;
<th>Nama</th>
// Mendapatkan nilai kolom
<th>Alamat</th>
var nilaiTd=e.target. innerHTML;
</tr>
divHasil.innerHTML+="1 Nilai : "+nilaiTd;
</thead>
)
<tbody>
</script>
<tr>
<td>1</td>
<td>Abu Asiah</td>
<td>Semarang</td>
<ltr>
<tr>
<td>2</td>
<td>ZiDjho</td>
<td>Boyolali</td>
</tr>
</tbody>
</table>
 JovoScript Source Code Poling Dicoril Cookie, Ajox,Tobet Volidqsi
240
241

</div>
S lo(alhost/j5{tipl,i*ail6Jlehe;-Eye*l-rli.k J:?ff I* <script>
No Name AIemal // Pengaturan CSS Div pertama
tbu Asiah ;filafattg
divCoba=document.getElementByld('cssbg');
ziDjho lcyoiali
divCoba.style.background=',#FFF url(kalenderAtas.png)
t. Aada memilih:
Baris [1] I{olom [3] Nilai: Sernaiang repeat bottom";
1- Anda mandih :
Bais pl Kolocr [1] Nnai: ZDjho divCoba.style. height="1 50px",
l. A:rdammilih:
Ba.is I?l Kolom [2] Nilai: Boyolali divCoba.style.width="'t 40px";
4. Aada memilih:
Baris [l j Kolom [] Nilsi : Abu Asiah
J. Anda nrerrilih :
Baris [1] Kolorn [C] Niki r I // Pengaturan CSS Div kedua
5. Andsmffiilih:
Baris [2] Kolom [0] Niiei:2 div2=document. getElementByld('cssbg2');
d iv2. style. backg rou ndColep="#A,Ap,'.
Gambar 6.17 Hasil pembacaan Event Click pada tabel
div2.style. background lmage=',url(kalender.png)";
div2.style. background Repeat="no-repeat";
DOM CSSISTYLE
div2.style. backgroundPosition="top";
JavaScript menyediakan library yang dapat digunakan untuk mengubah
css/style elemen tertentu. Pengubahan style dilakukan secara langsung div2.style. height=" 1 50px";
(inline) pada elemen. Css dapat diterapkan pada semua elemen HTML div2.style.width=" 1 40px";
untuk mengatur style dari elemen tersebut.
</script>

BacxcRouruo
Source code berikut mendemonstrasikan pengubahan style background
yang dimilikioleh suatu elemen.
<!--
- file : css-background.html
- dir: JScripUbab6
- by:ZiDjho

<div id="cssbg">
</div>
<div id="cssbg2">
 JovoScript Source Code Poling Dicorl! Cookie, Ajox,Tobel Volidosi 243
242

pl .style.width="200px";
pl.style.border="1 px solid #999";
pl.innerHTML="border : 1px solid #999";

p2=document.getElementByld('s2');
p2.style.width="2 1 0px" ;

p2.style.borderTop="2p* solid #F00";

p2.style. borderRight="2px solid #0F0";
p2.style.borderBottom="2px solid #00F";
p2.style.borderleft="2px solid #F0F";
p2.innerHTMl="borderTop : 1px solid #F00";
Gambar 6.18 Pengaturan Style Background p2.innerHTML+="<br/>borderRight : 1 px solid #0F0";
p2.innerHTMl+="<br/>borderBottom : 1 px solid #00F";
Bonoen p2.innerHTML+="<br/>borderleft : 1 px solid #F0F";
penggunaan perintah
Source code di bawah mendemonstrasikan
JavaScript untuk mengelola border pada suatu elemen'
p3=document. getElementByld('s3');
<!--
p3.style.width="2 1 0px";
- file : css-border.html
p3. style. borderTopWidth="2px" ;
- dir: JScriPUbab6
p3.style. borderTopColor="#F0 F" ;
- by: ZiDjho
p3.style. borderTopStyle="sol id" ;

p3. innerHTML="borderTopWidth : 2px" ;

<p id="s1">a</p>
p3. innerHTML+="<brl>borderTopColor : #F0F";
<p id="s2">b</P>
p3. innerHTML+="<br/>borderTopStyle : solid";
<p id="s3">c</P>
<p id="s4">e</P>
p4=document.getElementByld('s4');
<p id="s5">f</P>
p4.style.width="2 1 0px";
<p id="s6">g</p>
p4.style. borderRig htWidth="3px" ;
<scri pt type="texUjavascri pt">
p4.style.borderRightColor="#5FF";
p1 =document.getElementByld('s1');
p4.style.borderRightStyle="solid";
 F

Jo.voScript Source Code Poling Dicori! Cookie, Ajox,Tobel Volidosi

p4.innerHTML="borderRightWidth : 2px" ;
p4.innerHTML+="<br/>borderRightColor : #F0F";
p4. innerHTML+="<br/>borderRightStyle : solid";

Try:1px salid#.Fffi
p5=document.getElementByld('s5'); ig$: lpx solid #0FS
: 1px sotrid#00F
p5.style.width="21 0px"; : lsxsotrid#FOF

p5.style. borderBottomWidth="3px" ;
borderTap\Iii&h : 3px
p5.style. borderBottomColor="#55 F" ; borderTnpCohr: #F0F
bufuTcps4,le: solid
p5.style. borderBottomStyle="sol id" ;
border$Jghtrltd&: lpx
p5. innerHTML="borderBottomWidth : 2px" ; buderRigkCohr: *F0F
p5.innerHTML+="<br/>borderBottomColor : #F0F"; borderRigk5tl'le : solid

p5. innerHTML+="<br/>borderBottomStyle : solid"; borderBotomWi&b:3pr

borderBoaonrCohr : 1,F05
bflrderBotroclSt]'IE : sslid

p6=document. getElementByld('s6');
p6.style.width="2 1 0px";
p6.style. borderleftWidth="3px" ;

p6.style. borderleft Color="#F0 F" ;

Gambar 6.19 Pengaturan Border
p6.style.borderleftStyle="solid";
p6. innerHTML="borderleftWidth : 2px" ; MnncNPnoDNG
p6. innerHTML+="<br/>borderleftColor : #F0F"; Source code di bawah digunakan untuk mengatur margin dan padding
p6. innerHTML+="<br/>borderleftStyle : solid"; yang dimiliki oleh suatu elemen. Margin adalah jarak border keluar dan
padding adalah jarak border ke dalam.
</script>
<!--
- file : css-margin-padding.html
- dir: JScripUbab6
- by:ZiDjho

<div id="div1 ">a</div>

<div id="div2">b</d iv>
 $l

JovoScript Source Code Poling Dicori! Cookie, Ajox,Tobel Volidosi

247

<div id="div3">c</div>
<script tyd ive="texVjavascript">
{3 abuasiafr"com*srriptliri}t?6lcss-*:argin-paridinel.htirri Cb
divl =document.getElementByld('div1');
divl .style.cssFloat="|eft";
divl.style.border="1 px solid #999";
divl .style.margin="1 0px";
Gambar 6.20 Margin dan Padding
divl .style. padding="5pr"'
divl.innerHTMl="Margin : 1 0px<br/>Padding :5px"; Lnvour/PosnxrNmc
Source code di bawah digunakan untuk mendemonstrasikan
div2=docu ment, getElementByld('div2'); penempatan elemen dengan posisi absolute. Elemen akan ditempatkan
pada atas, kiri, bawah, kanan, dan tengah dari layar browser.
div2.style.border='r1 px solid #999";
<!--
div2. style.cssFloat="1eft ";
- file : css-layout.html
div2.style, marginTop="'l $pv"'
- dir : JScripVbab6
div2.style.paddingBottom=" 1 0px";
- by:ZiDjho
div2.innerHTML="MarginTop : 1 Spx<br/>MarginBottom :1 0px";

<div id="kanan">kanan</div>
div3=document.getElementByld('div3');
<div id="kiri">Kiri</div>
div3.style.border="1 px solid #999";
<div id="atas">Atas</div>
div3.style. cssFloat="1eft" ;
<div id="bawah">bawah</div>
div3.style.marginLeft=" 1 Spx";
<div id="tengah">Tengah</div>
div3.style.paddingRight=" 1 5px";
<script type="texUjavascript">
div3.innerHTML="MarginLeft : 1 Spxcbr/>PaddingRight :1 Spx";
var divAtas=document.getElementByld('atas');
</script>
divAtas.style.height="30px";
d ivAtas. style.width=" 1 007o" ;

d ivAtas. style. backgrou nd Color="#F00" ;

d ivAtas.style. position="absolute";
d ivAtas.style.top="gr*''
var divKanan=document.getElementByld('kanan');

[,
 $

JovoScript Source Code Poling Dicori! Cookie, Ajox,Tobel Volidosi

divKanan.style.width="30Px";
divKanan.style. height=" 1 00o/o" ;

d ivKanan. style. backgrou ndColor="#F F0";

divKanan.style. right="Opx";
divKanan.styl.toP="gP*''
divKanan.style. position="absolute";

var divBawah=document.getElementByld('bawah');
d ivBawah. style.width=" 1 00o/o" ;
divBawah.style. height="30px"; Gambar 6.21 Layout Absolute
divBawah.style.backgroundColor="#00F";
d ivBawah.style. bottom="0" ; Tpn
divBawah.style. position="absolute"; Source code di bawah mendemonstrasikan pengaturan style teks dengan
JavaScript, baik warna teks, bayangan teks, alignment text, dan lainnya.
<!--
var divKiri=document.getElementByld('kiri');
- file : css-text.html
divKiri.style.width="30px";
divKi ri.style. hei g ht=" 1 007o"
- dir: JScripVbab6
;

- by :ZiDjho
divKiri.style. backgroundColor="#0FF";
divKiri.style. position="absolute";
<p id="teks1">
divKiri.style. left="0";
Teks Pertama
divKiri.style.toP="9"'
</p>
<p id="teks2">
var divTengah=document. getElementByld('tengah');
Teks Kedua
d ivTengah. style.width="307o" ;
</p>
d ivTengah.style. heig ht="307o" ;
<p id="teks3">
divTengah.style.backgroundColor="#0FF";
Teks Ketiga
d ivTengah.style. marg in=" 2oo/o auto 0 auto" ; </script>
<lp>
<p id="teks4">
 JovoScript Source Code Poling Dicori! Cookie, Ajox,Tobel Volidosi
250 251

teks ke empat
<ip>
<script type="texUjavascri pt">
var pl =document.getElementByld('teks1');
p l .style.fontSize="20px" ;

p 1 .style.fontFomily="Vs16ana, Arial";
p1 .style.fontStyle="italic" ;

p 1 .style.color="#F00";

Gambar 6.22 Pengaturan Style Teks

var p2=docu ment.getElementByld('teks2');

p2.style.fontFamily="[1131, Tahoma";
Cunson
p2.style.textShadow="2px 5px #0A[";
Source code di bawah mendemonstrasikan pengubahan
dengan JavaScript.
p2.style.color="#05F";
<!--
p2. style.fontWeight="bold";
- file : css-cursor.html
- dir: JScripUbab6
var p3=document.getElementByld('teks3');
- by :ZiDjho
p3.style.color="#A5A"'
p3.style.textTransform="uppercase" ;
<div id="cur1 ">Pointer</div>
p3.style.textAl ign="rigth" ;
<div id="cur2">Dari Gambar</div>
<div id="cur3">Progress</div>
var p4=document. getElementByld('teks4'); <div id="cur4">help</div>
p4. style.color="#8F8";
<div id="curS">wait</div>
p4.style.textTransform="capital ize" ;
<style>
p4.style.textDecoration="underline" ;
div{
</script>
width: 100px;
height: 50px;
float:left;
background-color: greenyellow;
252
JovoScript Source Code Poling Dicoril

margin: 5px;

)
</style>
Fenut$f
<script> etelah selesai membaca dan mempraktikkan source code yang
ada dalam buku ini, penulis yakin Anda akan dengan mudah
var divCl =document.getElementByld('cur1'); lVl menguasai sebagian besar dasar-dasar pemrograman JavaScript.
divC 1 .style."s1'ss1='pointer'; Setiap pembahasan diberikan penjelasan secara singkat kemudian Anda
akan dihadapkan pada contoh aplikasi secara sederhana.
var divC2=document. getElementByld('cu12');
Dengan pembahasan ini, kiranya menjadi bekal bagi pembaca dalam
divC2.style.cursor='url(kursor. png)'; mempelajari pemrograman JavaScript. Anda juga mampu membangun
var d ivC3=document. getElementByld('cur3'); aplikasi website yang memanfaatkan JavaScript secara luas, baik
dengan native JavaScript maupun dengan framework turunan.
d ivC3.style. 6s s'se1='prog ress',
Untuk mengembangkan keterampilan pemrograman JavaScript, Anda
var d ivC4=document. getElementByld('cu14'); dapat mengikuti milis-milis atau forum yang ada di internet. Selain itu,
divC4.style.cursor='help'; Anda dapat melihat referensi pada dokumentasi dan tutorial yang
diberikan oleh W3C secara langsung atau yang lain. Anda dapat
var divC5=document. getElementByld('cur5'); mengunjungi URL http://w3schools.com untuk mempelajari Java8oript
divC5.style.cursor='wait'; berdasarkan standar W3C.

</script> Kunci dalam menguasai pemrograman adalah terus mencoba dan

bereksplorasi dalam mempelajari serta membuat contoh yang didukung
referensi yang cukup. Selamat belajar dan sukses bagi pembaca.

Gambar 6.23 Style kursor