Anda di halaman 1dari 41

http://blog.codingwear.

com
PHP Ajax Javascript jQuery utorial
!ponsored "y
"aju #aosnya Programmer
www.codingwear.com
http://blog.codingwear.com
PHP Ajax Javascript jQuery utorial
$a%tar &si
'. Pengenalan
javascript ............................................................
........................................ (
A. Apa itu
Javascript ............................................................
........................................ )
". *emulai
Javascript ............................................................
..................................... )
+. !inta,s
Javascript ............................................................
........................................ -
$.
.ariabel ..............................................................
..................................................... -
/.
0perator ..............................................................
.................................................... -
1.
!tatement .............................................................
................................................... '2
3.
1ungsi ................................................................
...................................................... '4
5. Penanganan
/vent .................................................................
....................................... '(
A. Apa &tu Penanganan
/vent .................................................................
..................... ')
". +ontoh6contoh Penanganan
/vent .................................................................
........ '7
4. 0bje,
!tring ................................................................
................................................... '8
A. *em%ormat te,s dengan
Javascript ............................................................
............ 52
". Penanganan 0bje,
!tring ................................................................
........................ 55
+. Parse !tring ,e &nteger dan
1loat .................................................................
........... 54
9. 0bje,
:indow ................................................................
............................................... 5(
A. *embu,a :indow di
Javascript ............................................................
................. 5)
". *ereload; *enutup; *eloading Halaman "aru;
Print ........................................... 5)
+. #omuni,asi Antar
:indow ................................................................
..................... 57
$. Alert ; +on%irm dan
Prompt.................................................................
..................... 5-
(.
Array .................................................................
............................................................. 42
A. Pengenalan
Array .................................................................
.................................. 4'
". *etode untu, *anipulasi
Array .................................................................
............ 45
). anggal dan
:a,tu .................................................................
...................................... 4-
A. *etode anggal dan
:a,tu .................................................................
................... 48
". Javascript
imer .................................................................
..................................... 48
+. *embuat Jam
$igital ...............................................................
............................... 92
7. $ynamic
H*< ..................................................................
............................................ 95
http://blog.codingwear.com
PHP Ajax Javascript jQuery utorial
A. *enga,ses dan *anipulasi 0bje,
H*< ................................................................
94
". *emanipulasi !tyle atau +!! 0bje,
H*< ............................................................. 9(
-. Penanganan
1orm ..................................................................
....................................... 97
A. Penanganan +hec,"ox di
Javascript ............................................................
........... 9-
". Penanganan &nput =adio di
Javascript ............................................................
........ 98
+. Penanganan !elect "ox di
Javacsript ............................................................
.......... 98
http://blog.codingwear.com
PHP Ajax Javascript jQuery utorial
Pengenalan Javascript
http://blog.codingwear.com
PHP Ajax Javascript jQuery utorial
A. Apa &tu Javascript
Javascript adalah bahasa script yang biasa jalan di browser; orang6
orang biasa bilang client side
programming. +lient di sini adalah browser; seperti: &nternet /xplorer;
1ire%ox; !a%ari dan
sebagainya. #ode javascript biasanya disisip,an diantara ,ode6,ode
H*<.
$i mana saya bisa menulis ,ode javascript> Anda bisa menulis ,ode
javascript di te,s editor
seperti notepad dan sebagainya.
Apa,ah saya butuh compiler untu, menjalan,an javascript> ida, perlu;
anda cu,up
menjalan,an javascript mengguna,an browser. !emua browser mempunyai
engine yang
menginterpretasi,an ,ode javascript ,ita.
". *emulai Javascript
0,e se,arang mari ,ita coba mulai menulis ,ode javascript ,ita. $i sini
,ita mengguna,an
notepad sebagai te,s editor.
#ode javascript ditulis diantara tag ?script@ dan ?/script@; bisa ,ita
sisip,an di ,ode6,ode H*<
,ita.
!e,arang mari ,ita simpan ,ode tersebut dengan 1ile Aame: tes.html;
jangan lupa !ave as type:
All 1iles; seperti gambar di bawah.
http://blog.codingwear.com
PHP Ajax Javascript jQuery utorial
Bntu, mengetesnya; anda tinggal double ,li, %ile tes.html yang ,ita
buat tadi; hasilnya a,an
seperti beri,ut:
http://blog.codingwear.com
PHP Ajax Javascript jQuery utorial
Javascript bisa juga ditulis terpisah; %ilenya diberi e,stension .js
+ontoh: nama%ile.js; nanti cara
menyisip,annya di %ile html adalah seperti beri,ut:
?script typeCDtext/javascriptD srcCDnama%ile.jsD@?/script@
+. !inta,s Javascript
!inta,s javascript mirip6mirip bahasa + atau java. Javascript bersi%at
case sensitive; artinya
huru% ,ecil dan huru% besar adalah berbeda.
!etiap baris ,ode javascript dipisah,an baris baru atau bisa juga titi,
,oma EFG
#omentar dalam javascript di awali dengan // atau ditulis diantara /H
dan H/
$. .ariabel
.ariabel di javascript bisa ditulis dengan diawalai huru% atau
underscore E I G atau tanda dollar
EG.
+ontoh : jumlahIhits ; Inama
$e,larasi variable

Anda bisa mende,larasi dengan mengguna,an var; contoh: var x C (; ini
bersi%at local
dan global Ebisa di a,ses oleh semua %ungsiG

Atau langsung de,larasi,an tanpa var; xC(
+ontoh:
?script@
var x C (F
var nama C $esriJalF
document.writeEnamaGF
?/script@
/. 0perator
0perator Aritmati,a
Kaitu operator untu, operasi matemati,a
0perator $e%inisi +ontoh
L Penambahan ( L ( C '2
6Pengurangan ) 5 C 9
http://blog.codingwear.com
PHP Ajax Javascript jQuery utorial
H Pengalian 9 H 9 C ')
/ Pembagian - / 5 C 9
M *odulus Esisa hasil
pembagianG
( M 5 C '
'2 M 9 C 5
+ontoh:
?script@
var x C 9F
var y C 5F
J C x L yF
alertEJGF
?/script@
0perator Assignment
!eperti ,ebanya,an bahasa pemograman lainnya; untu, memberi,an nilai
,epada suatu
variable mengguna,an tanda sama dengan C
"eri,ut adalah penying,atan penulisan operator
!horthand 0perator Artinya
x LC y x C x L y
x 6C y x C x 6y
x HC y x C x H y
x /C y x C x / y
+ontoh:
?script@
var x C 9F
var y C 5F
x 6C y
alertExGF
?/script@
0perator Pembanding
"erguna untu, membanding nilai suatu variable
0perator $e%inisi +ontoh
CC !ama dengan var' CC $esriJal
NC ida, sama dengan x NC y
http://blog.codingwear.com
PHP Ajax Javascript jQuery utorial
@ <ebih besar dari x @ y
? <ebih ,ecil dari x ? )
@C <ebih besar sama dengan x@C y
?C <ebih ,ecil sama dengan x ? (
+ontoh:
?html@
?head@
?script@
var x C 9F
var y C 5F
i%Ex @ yGO
alertEDx lebih besar dari yDGF
P
?/script@
?/head@
?body@
?/body@
?/html@
0perator <ogi,a
0perator $e%inisi +ontoh
QQ $AA x@C( QQ x?'2
RR AAB x CC ) RR x CC '5
N "B#AA Nexpression
+ontoh:
?script@
var x C 7)F
i%Ex @C -2GO
alertEDAilai C ADGF
Pelse i%Ex @C 72 QQ x ? -2GO
alertEDAilai C "DGF
Pelse i%Ex @C )2 QQ x ? 72GO
alertEDAilai C +DGF
PelseO
alertEDAilai C $DGF
P
?/script@
http://blog.codingwear.com
PHP Ajax Javascript jQuery utorial
1. !tatement
#ondisional
#ondisional berguna untu, mengece, suatu ,ondisi dan mela,u,an suatu
,ode ji,a ,ondisi
tersebut benar atau salah.
i%
!inta,s :
i%E,ondisiGO
,ode yang dijalan,an ji,a benar
P
+ontoh :
?script@
var x C '2F
i%Ex CC '2GO
alertEDHai Apa ,abarDGF
P
?/script@
i% 6else
!inta,s :
i%E,ondisiGO
,ode yang dijalan,an ji,a benar
PelseO
,ode yang dijalan,an ji,a salah
P
+ontoh :
?script@
var x C (F
i%Ex CC '2GO
alertEDHai Apa ,abarDGF
PelseO
alertEDS tida, sama dengan '2DGF
P
?/script@
i%6elsei% 6else
Ji,a anda membutuh,an ,ondisi yang banya,
http://blog.codingwear.com
PHP Ajax Javascript jQuery utorial
!inta,s :
i%E,ondisi 'GO
,ode yang dijalan,an ji,a ,ondisi ' benar
Pelse i%E,ondisi 5GO
,ode yang dijalan,an ji,a ,ondisi 5 benar
Pelse i%E,ondisi 4GO
,ode yang dijalan,an ji,a ,ondisi 4 benar
PelseO
,ode ji,a salah satu ,ondisi di atas tida, ada yang benar
P
+ontoh :
?script@
var nilai C -2F
i%Enilai @C -(GO
alertEDADGF
Pelse i%Enilai @C 72 QQ nilai ? -(GO
alertED"DGF
Pelse i%Enilai @C )2 QQ nilai ? 72GO
alertED+DGF
PelseO
alertED$DGF
P
?/script@
switch
!ama seperti i% 6else i% 6else; berguna ji,a membutuh,an ,ondisi yang
banya,
!inta,s :
switchEe,spresiGO
case ,ondisi' :
,ode yang dijalan,an ji,a ,ondisi' benarF
brea,F
case ,ondisi5 :
,ode yang dijalan,an ji,a ,ondisi5 benarF
brea,F
case ,ondisi4 :
,ode yang dijalan,an ji,a ,ondisi4 benarF
brea,F
P
+ontoh :
?script@
var buah C DmanggaDF
switch EbuahG O
case DappleD:
alertEDbuahnya adalah appleDGF
brea,F
http://blog.codingwear.com
PHP Ajax Javascript jQuery utorial
case DmanggaD:
alertEDbuahnya adalah manggaDGF
brea,F
case DjambuD:
alertEDbuahnya adalah jambuDGF
brea,F
P
?/script@
Pengulangan
%or
"erguna untu, pengulangan yang sudah ditentu,an terlebih dahulu awalnya
berapa; dijalan,an
sampai ,ondisi bagaimana.
!inta,s :
%orEawalF ,ondisiF penambahanGO
,ode untu, dijalan,an
P
+ontoh :
?script@
%or Ei C 'F i ?C '2F iLLG O
document.writeEiGF
P
?/script@
while
"erguna untu, menjalan,an suatu ,ode terus menerus selama ,ondisi
bernilai =B/
!inta,s :
whileE,ondisiGO
,ode untu, dijalan,anF
P
+ontoh :
?script@
var iC'F
whileEi?C(G
O
document.writeEAomor : DLi LD?br /@DGF
iLLF
P
?/script@
http://blog.codingwear.com
PHP Ajax Javascript jQuery utorial
3. 1ungsi
Apa itu %ungsi> 1ungsi adalah ,umpulan blo, ,ode yang membentu, %ungsi
tersendiri. #ita bisa
membuat sendiri %ungsi tersebut
!inta,s:
%unction namaI%ungsiEparameterGO
,ode6,ode javascript
P
+ontoh ':
?script@
%unction tesEGO
document.writeEDHello :orldNDGF
P
//untu, menjalan,an %ungsi; cu,up tulis nama%ungsi
tesEGF
?/script@
+ontoh 5:
?script@
%unction ,ali,anEx;yGO
J C x H yF
alertEDHasil ,ali DLxLD H DLyLD C DLJGF
P
,ali,anE(;4GF
?/script@
http://blog.codingwear.com
PHP Ajax Javascript jQuery utorial
Penanganan /vent
http://blog.codingwear.com
PHP Ajax Javascript jQuery utorial
A. Apa itu Penanganan /vent
Penanganan /vent atau /vent Handler adalah ,emampuan javascript untu,
mendete,si event
atau ,ejadian6,ejadian yang terjadi di halaman web; ,emudian menangani
atau mela,u,an
suatu proses ji,a terdete,si suatu event. /vent di web bisa macam6
macam; seperti ,li,; double
,li,; menggera,,an mouse; bila pointer mouse berada di atas suatu obje,
H*<; dan
sebagainya.
!inta,nya:
namaIeventC,ode javascript
+ontoh:
?html@
?body@
?a hre%Chttp://www.google.com onclic,CalertEhelloG@google?/a@
?/body@
?/html@
Pada contoh di atas ada sebuah lin, google; yang ji,a di,li, Eonclic,G
ma,a a,an die,se,usi ,ode
javascript alertEhelloG
Ada macam6macam event yang bisa terjadi pada halaman web atau obje,
H*<; yaitu sebagai
beri,ut:

onblur

onchange

onclic,

ondblclic,

onerror

on%ocus

on,eydown

on,eypress

on,eyup

onload

onmousedown

onmousemove

onmouseout

onmouseover

onmouseup

onreset

onresiJe

onselect

onsubmit

onunload
http://blog.codingwear.com
PHP Ajax Javascript jQuery utorial
". +ontoh6contoh Penanganan /vent
'. onclic,
Pada contoh dibawah ,ita membuat tombol; yang ,alau di,li, a,an muncul
window alert
?script@
%unction in%ormEGO
alertEDHai anda meng,li, sayaDG
P
?/script@
?%orm@
?input typeCDbuttonD nameCDtestD valueCD+lic, meD onclic,CDin%ormEGD@
?/%orm@
Pada contoh beri,ut ji,a ,ita meng,li, radio button a,an mengubah warna
latar halaman web
?html@
?body@
?%orm nameCDgoD@
?input typeCDradioD nameCD+'D onclic,CDdocument.bg+olorCTlightblueTD@
?input typeCDradioD nameCD+'D onclic,CDdocument.bg+olorCTlightyellowTD@
?input typeCDradioD nameCD+'D onclic,CDdocument.bg+olorCTlightgreenTD@
?/%orm@
?/body@
?/html@
5. onload
/vent onload a,an die,se,usi ji,a suatu obje, telah diload; pada contoh
beri,ut ,ita menaruh
event onload di tag ?body@; artinya ji,a halaman web sudah diload
semua; ma,a die,se,usi
,ode javascript
?html@
?head@?title@"ody onload example?/title@
?/head@
?body onloadCDalertETHalaman ini telah selesai di loadingTGD@
:elcome to my page
?/body@
?/html@
4. onmouseover dan onmouseout
0nmouseover berguna untu, mendete,si apa,ah pointer mouse berada di
atas suatu obje,
H*<; onmouseout berguna untu, mendete,si apa,ah pointer mouse ,eluar
dari obje, H*<;
contoh:
?html@
?body@
http://blog.codingwear.com
PHP Ajax Javascript jQuery utorial
?table@
?tr onmouseoverCDthis.bg+olorCTlightblueTD
onmouseoutCDthis.bg+olorCTUe%e%e%TD bgcolorCDUe%e%e%D@
?td@"aris pertama?/td@
?/tr@
?tr@
?td@"aris ,edua?/td@
?/tr@
?/body@
?/html@
9. onunload
"iasanya berguna untu, mendete,si ji,a user meninggal,an atau menutup
suatu halaman web
?html@
?body onunloadCDalertEThan, you. Please come bac, to this site and
visit us
soon; o,>TGD@
?h'@:elcome?/h'@
?/body@
?/html@
http://blog.codingwear.com
PHP Ajax Javascript jQuery utorial
0bje, !tring
http://blog.codingwear.com
PHP Ajax Javascript jQuery utorial
A. *em%ormat te,s dengan Javascript
Bntu, membantu mela,u,an %ormatting terhadap te,s secara programming;
javascript
menyedia,an beberapa metode %ormatting mengguna,an javascript.
Properti $es,ripsi
length *enghasil,an jumlah ,ara,ter dari suatu string atau te,s
*etode $es,ripsi
anchorEnamaG *enghasil,an string dengan diapit tag ?A nameCDnamaD@
bigEG *enghasil,an string dengan diapit tag ?"&3@.
blin,EG *enghasil,an string dengan diapit tag ?"<&A#@
boldEG *enghasil,an string dengan diapit tag ?"@
%ixedEG *enghasil,an string dengan diapit tag ?@ surrounding it.
%ontcolorEwarnaG *enghasil,an string dengan diapit tag ?10A
colorCDwarnaD@
%ontsiJeEsiJeG *enghasil,an string dengan diapit tag ?10A siJeCDsiJeD@
italicsEG *enghasil,an string dengan diapit tag ?&@
lin,EurlG *enghasil,an string dengan diapit tag ?A hre%CDurlD@
smallEG *enghasil,an string dengan diapit tag ?!*A<<@
stri,eEG *enghasil,an string dengan diapit tag ?!=&#/@
subEG *enghasil,an string dengan diapit tag ?!B"@
supEG *enghasil,an string dengan diapit tag ?!BP@
to<ower+aseEG *engubah string menjadi huru% ,ecil semua.
toBpper+aseEG *engubah string menjadu huru% besar semua
+ontoh ':
?script@
var te,s C D$esriJalD
panjang C te,s.lengthF
alertEpanjangGF
?/script@
http://blog.codingwear.com
PHP Ajax Javascript jQuery utorial
Hasilnya:
+ontoh 5:
?script@
var messageCD:elcome to our siteND
document.writeEmessageG
?/script@
0utput:
:elcome to our siteN
?script@
var messageCD:elcome to our siteND
document.writeEmessage.toBpper+aseEGG
?/script@
0utput:
:/<+0*/ 0 0B= !&/N
+ontoh 4:
?script@
var messageCD:elcome to our siteND
document.writeEmessage.toBpper+aseEG.boldEGG
?/script@
0utput:
:/<+0*/ 0 0B= !&/N
+ontoh 9:
?script@
var messageCD:elcome to our siteND
var %ormatCmessage.toBpper+aseEG
var siJeC'
%or EiC2Fi?message.lengthFiLLGO
document.writeE%ormat.charAtEiG.%ontsiJeEsiJeG.boldEGG
i% EsiJe?7GO
siJeLL
PelseO
siJeC'
http://blog.codingwear.com
PHP Ajax Javascript jQuery utorial
P
P
?/script@
0utput:
:/<+0*/0 0B=!&/N
". Penanganan 0bje, !tring
!etelah ,ita mempelajari metode string yang ber,aitan dengan %ormat
te,s. !e,arang ,ita lanjut
metode obje, string lainnya ayng bertugas menangani dan memanipulasi
obje, string dan
contoh6contohnya.
*etode $es,ripsi
charAtExG *enghasil,an ,ara,ter pada posisi x dari suatu string.
char+odeAtExG *enghasil,an nilai Bnicode value dari ,ara,ter pada
posisi x dari
suatu string.
concatEte,s'; te,s5;...G *enggabung,an satu atau lebih string6string
Ete,s'; te,s5; dan
sebagainyaG.
%rom+har+odeEc'; c5;...G *eghasil,an string yang dibuat mengguna,an
urutan dari nilai unicode
index0%Esubstr; VstartWG *encari dan Eji,a ditemu,anG menghasil,an
nomor index number dari
,ara,ter atau substring yang di dalam string. Ji,a tida, ditemu,an;
hasilnya 6'. D!tartD adalah argument opsional;posisi awal di string
untu, memulai pencarian ; de%aultnya adalah 2
matchEregexpG *enge,se,usi suatu pencarian untu, string berdasar,an
pola regular
expression. *enghasi,an suatu array in%ormasi; ji,a tida, ditemu,an
menghasil,an null.
replaceE regexp; replacetextG *encari dan menu,ar string yang dicari
berdasar,an pola regular
expression.
searchEregexpG *engetes apa,ah pola regular expression coco, pada suatu
string; ji,a
coco, a,an menghasil,an index dari yang coco,; ji,a tida, ada yang
coco, menghasil,an 6'.
sliceEstart; VendWG *enghasil,an substring dari suau string berdasar,an
start dan end
argument.
splitEdelimiter; VlimitWG *emotong6motong string berdasar,an pembatas
yang ditentu,an;
hasilnya dalam bentu, array.
substrEstart; VlengthWG *enghasil,an ,ara,ter atau substring dari suatu
string yang dimulai
dari start sampai panjang length yang ditentu,an.
http://blog.codingwear.com
PHP Ajax Javascript jQuery utorial
+ontoh6contoh:
'. .alidasi email; pada contoh beri,ut ,ita a,an mengece, apa,ah email
beri,ut valid atau
tida,. +ara mengece,nya adalah apa,ah string yang diinput mengandung
,ara,ter X atau titi,
E.G
?%orm nameCDtestD on!ubmitCDchec,emailEthis.test5.valueGFreturn %alseD@
?input typeCDtextD siJeC52 nameCDtest5D@ ?input typeCDsubmitD
valueCD!ubmitD@
?/%orm@
?script typeCDtext/javascriptD@
%unction chec,emailEemailGO
i% Eemail.index0%EDXDGNC6' QQ email.index0%ED.DGNC6'G
alertEDbagusNDG
else
alertED"u,an emailDG
P
?/script@
5. *enghitung ,ata; Pada contoh beri,ut ,ita a,an menghitung ,ata;
caranya adalah
mengambil isi suatu textarea; lalu memotong6motong isinya dengan metode
split.
?%orm nameCDwordcountD@
?textarea rowsCD'5D nameCDwordcount5D colsCD4-D
wrapCDvirtualD@?/textarea@?br@
?input typeCDbuttonD valueCDHitung ,ataD on+lic,CDhitungEGD@ ?input
typeCDtextD nameCDwordcount4D siJeCD52D@
?/%orm@
?script typeCDtext/javascriptD@
%unction hitungEGO
var %ormcontentCdocument.wordcount.wordcount5.value
isiC%ormcontent.splitED DG
document.wordcount.wordcount4.valueCisi.length
P
?/script@
http://blog.codingwear.com
PHP Ajax Javascript jQuery utorial
+. Parse !tring ,e &nteger dan 1loat
parse&nt; untu, mengubah string menjadi &nteger
parse1loat; untu, mengubah string menjadi 1loat
?script typeCDtext/javascriptD@
document.writeEparse&ntED'2DG L D?br /@DG
document.writeEparse&ntED'2.22DG L D?br /@DG
document.writeEparse&ntED'2.44DG L D?br /@DG
document.writeEparse&ntED49 9( ))DG L D?br /@DG
document.writeEparse&ntED )2 DG L D?br /@DG
document.writeEparse&ntED92 yearsDG L D?br /@DG
document.writeEparse&ntEDHe was 92DG L D?br /@DG
document.writeED?br /@DG
document.writeEparse&ntED'2DGL D?br /@DG
document.writeEparse&ntED'2D;'2GL D?br /@DG
document.writeEparse&ntED2'2DGL D?br /@DG
document.writeEparse&ntED'2D;-GL D?br /@DG
document.writeEparse&ntED2x'2DGL D?br /@DG
document.writeEparse&ntED'2D;')GL D?br /@DG
?/script@
http://blog.codingwear.com
PHP Ajax Javascript jQuery utorial
0bje, :indow
http://blog.codingwear.com
PHP Ajax Javascript jQuery utorial
A. *embu,a :indow di Javascript
Bntu, membu,a window di javascript adalah dengan metode openEG
!inta,s:
window.openEurl; namaIwindow; ,on%igurasiG
+ontoh:
window.openEhttp://www.google.com;window,u;widthC422;heightC522
GF
Bntu, ,on%igurasi yang bisa diset sebagai beri,ut:
#on%igurasi $es,ripsi Ailai
width <ebar window <ebar window dalam pixel
height inggi window inggi window dalam pixel
toolbar *enampil,an toolbar browser ' atau 2
menubar *enampil,an menubar browser ' atau 2
scrollbars Apa,ah menampil,an scrollbars ' atau 2
resiJable !et apa,ah bisa window diubah6ubah
u,urannya
' atau 2
+ontoh:
?html@
?body@
?script@
%unction bu,awindowEGO
window.openEDhttp://www.google.comD;DgoogleD;DwidthC922;heightC422;tool
barC'D
GF
P
?/script@
?input typeCDbuttonD onclic,CDbu,awindowEGD valueCDbu,aD@
?/body@
?/html@
". *ereload; *enutup; *eloading Halaman "aru; Print
Bntu, mereload window adalah dengan cara:
window.location.reloadEG
Bntu, menutup window adalah dengan cara:
http://blog.codingwear.com
PHP Ajax Javascript jQuery utorial
window.closeEG
Bntu, meloading halaman baru adalah:
window.locationCDurl,amu.comD
,ode di atas a,an sama ji,a anda meng,li, suatu lin,:
?a hre%Curl,amu.com@url,amu?/a@
Bntu, mengeprint halaman web
window.printEG
+. #omuni,asi Antar :indow
Ada,alanya ,eti,a ,ita membu,a window baru; ,ita bisa mela,u,an
,omuni,asi data ,e window
parent6nya; atau bisa menga,ses dan memanipulasi obje, di window
parent.
Bntu, menga,ses window parent guna,an window.opener
+ontoh:
&ndu,.html
?html@
?head@
?title@est?/title@
?script languageCDjavascriptD@
%unction bu,aEGO
var x C window.openETana,.htmlT; Tnew:indowT; TheightC422;widthC422TGF
P
?/script@
?/head@
?body@
?%orm nameC%ormulir@
?&APB typeCbutton valueCDbu,a windowD nameCsubmit' on+lic,CDbu,aEGFD@
?input typeCtext nameC,ota, idC,ota,@
?/%orm@
?/body@
?/html@
ana,.html
?html@
?head@
?title@testing?/title@
?script languageCjavascript@
%unction set&ndu,EGO
http://blog.codingwear.com
PHP Ajax Javascript jQuery utorial
window.opener.document.get/lement"y&dED,ota,DG.value C
document.get/lement"y&dEDinputanDG.valueF
P
?/script@
?/head@
?body@
?%orm nameCmy1orm@
?input typeCtext nameCDinputanD idCDinputanD@
?input typeCbutton valueCD+lic, *eD on+lic,CDset&ndu,EGFD@
?/%orm@
?/body@
?/html@
$. Alert; +on%irm dan Prompt
alert diguna,an untu, menampil,an window alert
+ontoh:
?script@
alertEHellow :orldNNGF
?/script@
Hasil:
co%irm; diguna,an untu, memuncul,an window ,on%irmasi atau semacam
pertanyaan yang
jawabannya antara 0# atau +ancel
+ontoh:
?script typeCDtext/javascriptD@
var xCwindow.con%irmEDApa,ah anda bai,6bai, saja>DG
i% ExG
window.alertED3oodNDG
else
window.alertEDoo badDG
?/script@
http://blog.codingwear.com
PHP Ajax Javascript jQuery utorial
prompt; diguna,an untu, meminta inputan melalui window
+ontoh:
?script typeCDtext/javascriptD@
var yCwindow.promptED*asu,,an nama andaDG
window.alertEyG
?/script@
Hasilnya
http://blog.codingwear.com
PHP Ajax Javascript jQuery utorial
Array
http://blog.codingwear.com
PHP Ajax Javascript jQuery utorial
A. Pengenalan Array
Apa sih array> Array adalah semacam variabel tunggal yang terindex
secara teratur; jadi cu,up
satu nama variabel tapi bisa punya banya, nilai. #arena terindex sacara
teratur ,ita jadi
gampang mengolah dan menampil,an nilai6nilai dari variabel tersebut.
+ontoh bentu, array:
"uahV'W C =ambutan
"uahV5W C $urian
"uahV4W C *anggis
"agaimana cara buat array di javascript>
Bntu, membuat array di javascript; ,ita perlu mende,larasi,an variabel
array dengan cara new
ArrayEG
+ontoh:
?html@
?body@
?script typeCDtext/javascriptD@
var mobil C new ArrayEG
mobilV2W C D!aabD
mobilV'W C D.olvoD
mobilV5W C D"*:D
%or EiC2Fi?mobil.lengthFiLLGO
document.writeEmobilViW L D?br /@DG
P
?/script@
?/body@
?/html@
!elain di atas ,ita juga bisa membuat array dengan cara menulis
langsung di dalam argument
ArrayEG. &ndex atau #ey array dimulai dari nol E2G
+ontoh:
?html@
?body@
?script typeCDtext/javascriptD@
var buah C new ArrayED*anggaD;D=ambutanD;D$urianDGF
document.writeEbuahV'WGF
?/script@
?/body@
?/html@
http://blog.codingwear.com
PHP Ajax Javascript jQuery utorial
Hasilnya adalah =ambutan
". *etode untu, *anipulasi Array
Javascript menyedia,an metode6metode untu, mela,u,an manipulasi
terhadap obje, array
Properti Array
Properti $es,ripsi
length *enghasil,an jumlah elemen dalam suatu array
*etode Array
concatEG
%ungsi:
*enggabung,an dua atau lebih array
!inta,s:
array0bject.concatEarrayS;arrayS;......;arraySG
+ontoh:
?script typeCDtext/javascriptD@
var arr C new ArrayE4G
arrV2W C DJaniD
arrV'W C DoveD
arrV5W C DHegeD
var arr5 C new ArrayE4G
arr5V2W C DJohnD
arr5V'W C DAndyD
arr5V5W C D:endyD
var arr4 C new ArrayE5G
arr4V2W C D!taleD
arr4V'W C D"orgeD
document.writeEarr.concatEarr5;arr4GG
?/script@
Hasilnya:
Jani;ove;Hege;John;Andy;:endy;!tale;"orge
http://blog.codingwear.com
PHP Ajax Javascript jQuery utorial
joinEG
1ungsi:
*enulis,an elemen6elemen array ,e dalam satu string dipisah,an oleh
,ara,ter yang ,ita set
!inta,s:
array0bject.joinEpemisahG
+ontoh:
?script typeCDtext/javascriptD@
var arr C new ArrayE4G
arrV2W C DJaniD
arrV'W C DHegeD
arrV5W C D!taleD
document.writeEarr.joinEG L D?br /@DG
document.writeEarr.joinED.DGG
?/script@
Hasilnya:
Jani;Hege;!tale
Jani.Hege.!tale
popEG
1ungsi:
Bntu, mendelete elemen tera,hir dari suatu array
!inta,s:
array0bject.popEG
+ontoh:
?script typeCDtext/javascriptD@
var arr C new ArrayE4G
arrV2W C DJaniD
arrV'W C DHegeD
arrV5W C D!taleD
document.writeEarr L D?br /@DG
document.writeEarr.popEG L D?br /@DG
document.writeEarrG
?/script@
http://blog.codingwear.com
PHP Ajax Javascript jQuery utorial
Hasilnya:
Jani;Hege;!tale
!tale
Jani;Hege
pushEG
1ungsi:
*enambah satu atau lebih elemen ,e bagian a,hir suatu array
!inta,s:
array0bject.pushEnewelement';newelement5;....;newelementSG
+ontoh:
?script typeCDtext/javascriptD@
var arr C new ArrayE4G
arrV2W C DJaniD
arrV'W C DHegeD
arrV5W C D!taleD
document.writeEarr L D?br /@DG
document.writeEarr.pushED#ai JimDG L D?br /@DG
document.writeEarrG
?/script@
Hasilnya:
Jani;Hege;!tale
9
Jani;Hege;!tale;#ai Jim
reverseEG
1ungsi:
*embali,,an urutan elemen dalam suatu array
!inta,:
array0bject.reverseEG
+ontoh:
http://blog.codingwear.com
PHP Ajax Javascript jQuery utorial
?script typeCDtext/javascriptD@
var arr C new ArrayE4G
arrV2W C DJaniD
arrV'W C DHegeD
arrV5W C D!taleD
document.writeEarr L D?br /@DG
document.writeEarr.reverseEGG
?/script@
Hasilnya:
Jani;Hege;!tale
!tale;Hege;Jani
shi%tEG
1ungsi:
Bntu, mendelete elemen pertama dari suatu array
!inta,s:
array0bject.shi%tEG
+ontoh:
?script typeCDtext/javascriptD@
var arr C new ArrayE4G
arrV2W C DJaniD
arrV'W C DHegeD
arrV5W C D!taleD
document.writeEarr L D?br /@DG
document.writeEarr.shi%tEG L D?br /@DG
document.writeEarrG
?/script@
Hasilnya:
Jani;Hege;!tale
Jani
Hege;!tale
http://blog.codingwear.com
PHP Ajax Javascript jQuery utorial
unshi%tEG
1ungsi:
Bntu, menambah,an satu atau lebih elemen pada awal array
!inta,s:
array0bject.unshi%tEnewelement';newelement5;....;newelementSG
+ontoh:
?script typeCDtext/javascriptD@
var arr C new ArrayEG
arrV2W C DJaniD
arrV'W C DHegeD
arrV5W C D!taleD
document.writeEarr L D?br /@DG
arr.unshi%tED#ai JimDG
document.writeEarrG
?/script@
Hasilnya:
Jani;Hege;!tale
#ai Jim;Jani;Hege;!tale
sortEG
1ungsi:
Bntu, mengurut,an elemen array
!inta,s:
array0bject.sortEsortbyG
+ontoh:
?script typeCDtext/javascriptD@
var arr C new ArrayE)G
arrV2W C DJaniD
arrV'W C DHegeD
arrV5W C D!taleD
arrV4W C D#ai JimD
arrV9W C D"orgeD
http://blog.codingwear.com
PHP Ajax Javascript jQuery utorial
arrV(W C DoveD
document.writeEarr L D?br /@DG
document.writeEarr.sortEGG
?/script@
Hasilnya:
Jani;Hege;!tale;#ai Jim;"orge;ove
"orge;Hege;Jani;#ai Jim;!tale;ove
http://blog.codingwear.com
PHP Ajax Javascript jQuery utorial
anggal dan :a,tu
http://blog.codingwear.com
PHP Ajax Javascript jQuery utorial
A. *etode anggal dan :a,tu
Bntu, membuat obje, tanggal dan wa,tu terlebih dahulu anda
mende,larasi,an variabel/obje,
tanggal dan wa,tu tersebut
var mydateC new $ateEG
"eri,ut adalah beberapa metode tanggal dan wa,tu di javascript
*etode $es,ripsi
get$ateEG *enghasil,an tanggal dalam suatu bulan
get$ayEG *eghasil,an nama hari
getHoursEG *enghasil,an jam Edimulai dari 2654GN
get*inutesEG *enghasil,an menit
get!econdsEG *enghasil,an deti,
get*onthEG *enghasil,an bulan. Edimulai dari 26''GN
getKearEG *enghasil,an tahun
getimeEG *enghasil,an wa,tu yang leng,ap
+ontoh:
?script typeCDtext/javascriptD@
var hariIiniC new $ateEG
var tahun C hariIini.getKearEG
var bulan C hariIini.get*onthEGL'
var tanggal C hariIini.get$ateEG
document.writeEDanggal hari ini: DG
document.writeEtanggalLD/DLbulanLD/DLtahunG
?/script@
Hasilnya:
anggal hari ini: 9/'5/''2
". Javacsript imer
Pada javascript terdapat %ungsi timer; yaitu seimeoutEG; yang
ber%ungsi untu, mengatur timer
untu, menge,se,usi suatu %ungsi atau ,ode tertentu
http://blog.codingwear.com
PHP Ajax Javascript jQuery utorial
!inta,s:
setimeoutEDexpressionD; delaytimeG
expression bisa berupa ,ode javascript atau suatu %ungsi
delaytime; adalah setiap berapa milideti, suatu expression die,se,usi
+ontoh:
?html@
?body@
?input typeCDtextD idCDtimerD siJeCD'5D@
?input typeCDbuttonD valueCD!tartD on+lic,CDcountEGD@
?script typeCDtext/javascriptD@
var cC2
document.get/lement"y&dEDtimerDG.value C DD
%unction countEGO
document.get/lement"y&dEDtimerDG.valueCc
cCcL'
setimeoutEDcountEGD;'222G
P
?/script@
?/body@
?/html@
+. *embuat Jam $igital
?%orm nameCDic,D@
?input typeCDtextD siJeCD'5D nameCD+loc,D@
?/%orm@
?script typeCDtext/javascriptD@
%unction showEG
O
var $igitalCnew $ateEG
var hoursC$igital.getHoursEG
var minutesC$igital.get*inutesEG
var secondsC$igital.get!econdsEG
var dnCDA*D
i% Ehours@'5GO
dnCDP*D
hoursChours6'5
P
i% EhoursCC2G
hoursC'5
i% Eminutes?C8G
minutesCD2DLminutes
i% Eseconds?C8G
secondsCD2DLseconds
document.ic,.+loc,.valueC
hoursLD:DLminutesLD:DLsecondsLD DLdn
setimeoutEDshowEGD;'222G
http://blog.codingwear.com
PHP Ajax Javascript jQuery utorial
P
showEG
?/script@
http://blog.codingwear.com
PHP Ajax Javascript jQuery utorial
$ynamic H*<
http://blog.codingwear.com
PHP Ajax Javascript jQuery utorial
A. *enga,ses dan *anipulasi 0bje, H*<
Bntu, menga,ses obje, H*<; ,ita bisa mengguna,an
document.get/lement"y&dEidIobje,G
atau document.get/lements"yAameEnamaIobje,G
+ontoh:
?html@
?head@
?script typeCDtext/javascriptD@
%unction get/lementEGO
var xCdocument.get/lement"y&dEDmyHeaderDG
alertED&ni adalah elemen D L x.tagAameG
P
?/script@
?/head@
?body@
?h' idCDmyHeaderD onclic,CDget/lementEGD@
#li, saya untu, lihat nama tag saya?/h'@
?/body@
?/html@
"eri,ut metode6metode untu, memanipulasi obje, H*<
innerH*<
1ungsi: untu, mendapat,an isi te,s atau html suatu obje, atau tag H*<
+ontoh:
?html@
?head@
?script typeCDtext/javascriptD@
%unction lihatisiEGO
isi C document.get/lement"y&dED,epalaDG.innerH*<F
alertEisiGF
P
%unction tu,arisiEGO
document.get/lement"y&dED,epalaDG.innerH*< C Dulisan &ni digantiDF
P
?/script@
?/head@
?body@
?h' idCD,epalaD@!elamat $atang userNN?/h'@
?input typeCDbuttonD onclic,CDlihatisiEGD valueCD<ihat isi H'D@
?input typeCDbuttonD onclic,CDtu,arisiEGD valueCDu,ar isi H'D@
?/body@
?/html@
http://blog.codingwear.com
PHP Ajax Javascript jQuery utorial
value
1ungsi: untu, mengambil atau memanipulasi nilai suatu input %orm
+ontoh:
?html@
?head@
?script typeCDtext/javascriptD@
%unction lihatisiEGO
isi C document.get/lement"y&dEDte,sDG.valueF
alertEisiGF
P
%unction tu,arisiEGO
document.get/lement"y&dEDte,sDG.value C Dulisan &ni digantiDF
P
?/script@
?/head@
?body@
#eti, tulisan di %orm di bawah:?br@
?input typeCtext nameCDte,sD idCDte,sD@
?input typeCDbuttonD onclic,CDlihatisiEGD valueCD<ihatD@
?input typeCDbuttonD onclic,CDtu,arisiEGD valueCDu,arD@
?/body@
?/html@
". *emanipulasi !tyle atau +!! 0bje, H*<
Bntu, memanipulasi style atau +!! suatu obje,; adalah dengan cara:
obje,H*<.style.nama!tyle C style yang diset
obje,H*<.nama!tyle C style yang diset
atau
document.get/lement"y&dEnamaidG.style.nama!tyle C style yang
diset
document.get/lement"y&dEnamaidG.nama!tyle C style yang diset
*engubah warna latar $
?html@
?head@
?/head@
?body@
?table borderC' widthC(22 bgcolorCDyellowD@
?tr@
?td onmouseoverCDthis.bg+olorCTredTD
onmouseoutCDthis.bg+olorCTyellowTD@$esriJal?/td@
?/tr@
?tr@
http://blog.codingwear.com
PHP Ajax Javascript jQuery utorial
?td onmouseoverCDthis.bg+olorCTredTD
onmouseoutCDthis.bg+olorCTyellowTD@Aurmi
Kulita rahmi?/td@
?/tr@
?/body@
?/html@
*engubah warna latar halaman web
?html@
?head@
?script@
%unction ubahEGO
document.bg+olor C DlightblueDF
P
?/script@
?/head@
?body@
?input typeCDbuttonD onclic,CDubahEGD valueCDubahD@
?/body@
?/html@
*engubah posisi obje,
?html@
?head@
?script@
%unction ubahEGO
document.get/lement"y&dED,ota,DG.style.top C 422F
document.get/lement"y&dED,ota,DG.style.le%t C 422F
P
?/script@
?/head@
?body@
?input typeCDbuttonD onclic,CDubahEGD valueCDubahD@
?div idCD,ota,D styleCDposition:absoluteFtop:(2Fle%t:(2Fbac,ground
color:yellowFwidth:(2Fheight:(2D@
?/div@
?/body@
?/html@
http://blog.codingwear.com
PHP Ajax Javascript jQuery utorial
Penanganan 1orm
http://blog.codingwear.com
PHP Ajax Javascript jQuery utorial
A. Penanganan +hec,"ox di javascript
$ete,si apa,ah chec,box sudah dice,
chec,box0bject.chec,edCtrueR%alse
+ontoh:
?html@
?head@
?script typeCDtext/javascriptD@
%unction chec,EGO
document.get/lement"y&dEDmy+hec,DG.chec,edCtrue
P
%unction unchec,EGO
document.get/lement"y&dEDmy+hec,DG.chec,edC%alse
P
?/script@
?/head@
?body@
?%orm@
?input typeCDchec,boxD idCDmy+hec,D /@
?input typeCDbuttonD onclic,CDchec,EGD
valueCD+hec, +hec,boxD /@
?input typeCDbuttonD onclic,CDunchec,EGD
valueCDBnchec, +hec,boxD /@
?/%orm@
?/body@
?/html@
*engambil Ailai chec,box
?html@
?head@
?script typeCDtext/javascriptD@
%unction create0rderEGO
co%%eeCdocument.%ormsV2W.co%%ee
txtCDD
%or EiC2Fi?co%%ee.lengthFLL iGO
i% Eco%%eeViW.chec,edGO
txtCtxt L co%%eeViW.value L D D
P
P
document.get/lement"y&dEDorderDG.valueCDKou ordered a co%%ee with D L
txt
P
?/script@
?/head@
?body@
?p@How would you li,e your co%%ee>?/p@
?%orm@
?input typeCDchec,boxD nameCDco%%eeD valueCDcreamD@:ith cream?br /@
?input typeCDchec,boxD nameCDco%%eeD valueCDsugarD@:ith sugar?br /@
http://blog.codingwear.com
PHP Ajax Javascript jQuery utorial
?br /@
?input typeCDbuttonD onclic,CDcreate0rderEGD valueCD!end orderD@
?br /@?br /@
?input typeCDtextD idCDorderD siJeCD(2D@
?/%orm@
?/body@
?/html@
". Penanganan &nput =adio di Javascript
?html@
?head@
?script typeCDtext/javascriptD@
%unction set,elaminEjenisGO
document.get/lement"y&dED,elaminmuDG.value C jenisF
P
?/script@
?/head@
?body@
jenis #elamin:
?br@
?input typeCradio valueCD<a,i6la,iD nameCD,elaminD
onclic,CDset,elaminEthis.valueGD@<a,i6la,i?br@
?input typeCradio valueCDPerempuanD nameCD,elaminD
onclic,CDset,elaminEthis.valueGD@Perempuan?br@
?input typeCtext idCD,elaminmuD@
?/body@
?/html@
+. Penanganan !elect "ox di Javacsript
*engambil nilai select box
?html@
?head@
?script typeCDtext/javascriptD@
%unction %av"rowserEGO
var mylistCdocument.get/lement"y&dEDmy<istDG
document.get/lement"y&dED%avoriteDG.valueCmylist.optionsVmylist.selecte
d&ndex
W.text
P
?/script@
?/head@
?body@
?%orm@
!elect your %avorite browser:
?select idCDmy<istD onchangeCD%av"rowserEGD@
?option@&nternet /xplorer?/option@
?option@Aetscape?/option@
http://blog.codingwear.com
PHP Ajax Javascript jQuery utorial
?option@0pera?/option@
?/select@
?p@Kour %avorite browser is: ?input typeCDtextD idCD%avoriteD
siJeCD52D@?/p@
?/%orm@
?/body@
?/html@
*endelete option dari dropdown list
?html@
?head@
?script typeCDtext/javascriptD@
%unction remove0ptionEGO
var xCdocument.get/lement"y&dEDmy!electDG
x.removeEx.selected&ndexG
P
?/script@
?/head@
?body@
?%orm@
?select idCDmy!electD@
?option@Apple?/option@
?option@Pear?/option@
?option@"anana?/option@
?option@0range?/option@
?option@*elon?/option@
?/select@
?input typeCDbuttonD onclic,CDremove0ptionEGD valueCD=emove optionD@
?/%orm@
?/body@
?/html@