1906 - Paling Dicari! JavaScript Source Code
1906 - Paling Dicari! JavaScript Source Code
\RSIPAN
I.\\\.\TIMUR
376 2
AL
3
Paling Dicari!
+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 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).
Baftar'Es,i
KATA PENGANTAR I
VII
JAVASCRIPT DASAR 1
Window........ 12
Document.... 17
E|emen......... 22
Atribute E\emen......... 31
Print ............ 45
VARIABEL DAN OPERATOR............ 47
Operator Assignment 50
Operator Aritmatik........... 52
Operator Logika................ 54
Operator Conditional ? :................. 59
Operator String........... 62
ValidasiEnai1........... ...........223
Mendapatkan Elemen THead.......... .......... 225
....242
Iava$cript Dasar
Margin/Paddinq................. ....................... 245
Layout/Positioning.......... ..... 247
Text.............. ....249
Cttrsor .............251
JovoScript Source Code Poling Dicoril JovoScriPt Dosor
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
) <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] ;
- file : statemen.html
- dir : JScripUbabl
- by: ZiDjho
JovoScript Source Code Poling Dicoril JovoScript Dosor
</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
irt I : lebar
f,ptmf
int i l$as
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
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Source Code</tifle>
<scri pt type="texUjavascript">
Gambar 1.8 Dokumen tujuan.html
Keterangan: //menampilkan URL penuh
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
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.
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
<body> <!--
</body> <head>
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 ;
)
</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');
)
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' );
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.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
<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
</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
//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>
<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.
<!--
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
)
)
</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$ .
-.-,,',,,,.....-.-:k-ji.-...,;
'S
tsti*liffiX
Sourre Code laaScript
- 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">
</script> if(awab){
<body> )else{
</html> )
</script>
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
<IDOCTYPE html>
<html>
<head> Gambar 1.29 Jendela Alert
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
<body> <html>
</body> <head> l
window.print0;
)
</script>
</head>
<body>
<span onclick="cetak0">Print<lspan>
</body>
</html>
V'arlfrhel dan
Gambar 1.32 Halaman Print
Sferater
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' );
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
= > 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
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 );
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">
</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
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/>===== == ======');
rdail : truc
document.write('<br/>nil ai2 :' +nilai2); nilaif : false
document.write('<br/>============='); ldlail = 15;o
i
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
<!DOCTYPE html>
Gambar 2.8 Operator conditional kalender
<html>
<head>
<title>Source Code JavaScript</title>
<scri pt type="texVjavascri pt">
{
<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
<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 <!--
<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>');
<IDOCTYPE html>
<html>
fi
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
<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');
) <!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
- 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
<!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> <!--
jam=waktu.getHours0; <html>
console.info(jam); <head>
)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
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
<IDOCWpE htmt>
<html>
<head>
<title>Source Code JavaScript</tifl
e>
Gambar 3.3 Hasil eksekusi blok lf Else lf
<script type="texUja vascript,,>
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 :
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>
<!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 )');
:
<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': <!--
- 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>
)while(nilai<5) ;
</scriPt>
</head> 1
<body>
</body>
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> ;
<!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
<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+"<sup>"+pangkat+,'</sup> :,'+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";
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
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> <!--
function fungsi0{
<IDOCTYPE html>
alert('Pesan ini muncul saat tombol di klik');
<html>
)
</script> <head>
<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
<!--
- 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
<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
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
<html>
<head>
<title>Source Code JavaScript</tifle>
<scri pt type="texVjavascri pt">
<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;
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[>
JovoScript Source Code Poling Dicori! Fungsi, Object don RegExP 127
126
docu ment.write('<br/>') ;
- 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> <!--
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,'>
<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
</script> <l--
132
JovoScript Source Code Poling Dicori! Fungsi, Object don RegExp 133
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..
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:' );
document.write('waktu.getUTCFullYearQ\t:' );
<html>
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
_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">
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");
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'); <!--
<!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'] ;
) docu ment.write(varArr);
<lscript> varArr.push('Abdillah','Muhammad','Abu Bakar');
</head> document.write("<br/>Setelah Push<br/>");
<body> docu ment.write(varArr) ;
- 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> <!--
v ar ar=13,4,2,5,6,8,23,54,231; - by :ZiDjho
</head> <html>
<body> <head>
</script>
</head>
Gambar 4.27 Pengurutan array
<body>
</body>
</html>
JovoScript Source Code Poling Dicori! Fungsi, Object don RegExp 153
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
<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+"<sup>"+varPangkat+'</sup> =
</head>
"+varHasil +'<br/>")i
<body>
document.write('X = Math.sqrt('+rsrHasil+')<br/>');
</body>
document.write('X ='+Math.sqrt(varHasil));
</html> </script>
</head>
<body>
</body>
</html>
.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
<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
- 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
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> <!--
<!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
") ;
document.write("/java/i.test(avaScript)\t\t:
Gambar 4.37 Penggunaan Method Exec
docu ment.writel n (/java/i.test(avaScri pt)) ;
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.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';
</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
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
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*@
*{:
:
. 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
<!-- </body>
- 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">
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
<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>
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> document.getElementByld('nama').onkeydown=function(e){
)
)
)
</script>
</head>
<body>
Gambar 5.15 Event OnChange
<input type="text" id="nama"/> </bodp </html>
<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>
<!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;
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
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>
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
<IDOCWPE html>
<html>
<head>
JovoScript Source Code Poling Dicoril
210
COOKIH - by:ZiDjho
)
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
)
//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"
return unescape(zkuki[nama]); )
)else{ )
f
JovoScript Source Code Poling Dicori! Cookie, Ajox,Tobel Volidosi 217
2',t6
)elsei
zcookie.ta m ba h (txtN a ma. va I u e, txtN iI a i. va I ue );
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
)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;
- 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">
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
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
var tabel=document.getElementByld('tabel');
var thead=tabel.tHead ;
var hasil=document.getElementByld('hasil');
Cookie, Ajox,Tobel Volidosi
JovoScript Source Code Poling Dicori!
226
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&
</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">
<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>
<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" ;
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
p6=document. getElementByld('s6');
p6.style.width="2 1 0px";
p6.style. borderleftWidth="3px" ;
<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. position="absolute";
d ivAtas.style.top="gr*''
var divKanan=document.getElementByld('kanan');
[,
$
divKanan.style.width="30Px";
divKanan.style. height=" 1 00o/o" ;
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";
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.