modul6teori Javascript

(1)

Dikta t

Ja va sc rip t

Ja nua ry 1

2014

Ja va sc rip t sa la h sa tu b a ha sa we b sta nd a r ya ng

d ire ko me nd a sika n o le h EC MA Inte rna tio na l. Fung si b a ha sa sc rip t ini untuk me na mb a h sifa t inte ra ktif p a d a ha la ma n we b d a n me mb ua t situs me nja d i d ina mis

Pe mro g ra ma n

We b

L.

Erawan

(2)

L. Era wa n

DAFTAR ISI

Pe ng e na la n ... 7

C a ra Me ng g una ka n Ja vsc rip t ... 8

Bro wse r Ya ng Tid a k Me nd ukung Ja va sc rip t ... 9

Lo ka si Pe nulisa n Ko d e Ja va sc rip t d a la m Do kume n HTML ... 9

Di Ba g ia n HEAD ... 9

Di Ba g ia n BO DY ... 10

Di Ba g ia n HEAD d a n BO DY ... 10

Me ng g una ka n File Ja va sc rip t Ekste rna l ... 11

Sta te me nt Ja va sc rip t ... 12

C a se Se nsitive d a la m Sta te me nt ... 12

Ta nd a Akhir Sua tu Sta te me nt ... 12

Ko d e Ja va sc rip t ... 12

Blo k Ja va sc rip t ... 12

Me nyisip ka n Ko me nta r... 13

Tip e Da ta ... 14

Flo a t d a n Inte g e r ... 14

Bo o le a n ... 14

String ... 14

Arra y ... 15

O b je c t ... 16

Me nd e kla ra sika n va ria b e l ... 17

O p e ra to r Aritme tika ... 18

O p e ra to r Assig nme nt ... 18

O p e ra to r + Untuk String ... 19

O p e ra to r Pe mb a nd ing a n d a n Lo g ika ... 19

(3)

L. Era wa n

O p e ra to r Lo g ika ... 20

Pe rc a b a ng a n if, ... 21

Pe rc a b a ng a n if...e lse , ... 21

Pe rc a b a ng a n if...e lse if..e lse ... 22

Pe rc a b a ng a n switc h ... 23

Ale rt ... 25

C O NFIRM ... 25

Pro mp t ... 26

Pe nting ! ... 28

Pe rnya ta a n re turn ... 29

Va ria b e l Lo ka l ... 30

Fo r ... 31

While ... 32

Do ...while ... 33

Bre a k ... 34

C o ntinue ... 34

o nLo a d d a n o nUnlo a d ... 37

o nFo c us, o nBlur d a n o nC ha ng e ... 37

o nSub mit ... 38

o nMo use O ve r d a n o nMo use O ut ... 38

Be b e ra p a C o nto h Pe ng g una a n ... 39

Eve nt c lic k ... 45

Eve nt o nmo use d o wn d a n o nmo use up ... 46

O b je k String ... 48

Pro p e rti ... 48

Me tho d ... 48

PRO PERTY ... 49

(4)

L. Era wa n

Pro p e rti Le ng th ... 50

Pro p e rti Pro to typ e ... 50

METHO D ... 51

Me tho d c ha rAt() ... 51

Me tho d c ha rC o d e At() ... 51

Me tho d c o nc a t() ... 52

Me tho d fro mC ha rC o d e ()... 52

Me tho d ind e xO f() ... 52

Pe rb e d a a n a nta ra ind e xO f d a n la stInd e xO f: ... 53

Me tho d la stInd e xO f() ... 54

Me tho d ma tc h() ... 54

Me tho d re p la c e () ... 55

Cont oh: ... 55

Keluar an: ... 55

Se a rc h() ... 55

Cont oh 1: ... 55

Keluar an: ... 55

Cont oh 2: ... 55

Keluar an: ... 56

Slic e () ... 56

Cont oh: ... 56

Keluar an: ... 56

Sp lit() ... 56

Cont oh: ... 57

Keluar an: ... 57

Sub str() ... 57

Cont oh: ... 57

(5)

L. Era wa n

Sub string () ... 57

Cont oh: ... 58

Keluar an: ... 58

To Lo we rC a se () ... 58

Cont oh: ... 58

To Up p e rC a se () ... 58

Cont oh: ... 58

Va lue O f() ... 58

Cont oh: ... 58

Keluar an: ... 59

PRO PERTI ... 60

c o nstruc to r()... 61

Cont oh: ... 61

Keluar an: ... 61

p ro to typ e () ... 61

Cont oh: ... 61

Keluar an: ... 61

METHO D ... 62

g e tDa te () ... 62

Cont oh 1: ... 62

Cont oh 2: ... 62

g e tDa y()... 63

Cont oh 1: ... 63

Cont oh 2: ... 63

g e tFullYe a r() ... 63

Cont oh 1: ... 64

Cont oh 2: ... 64

(6)

L. Era wa n

Cont oh 1: ... 64

Cont oh 2: ... 65

g e tMillise c o nd s() ... 65

Cont oh 1: ... 65

(7)

L. Era wa n

JAVASCRIPT

PENGENALAN

Bahasa script Javascript paling populer di Internet dan dapat bekerja pada semua browser utama seperti Internet Explorer, Firefox, Google Chrome, Safari, dan Opera.

Untuk mempelajari Javascript dibutuhkan penguasaan terhadap bahasa utama web yaitu HTML atau XHTML.

Sebelum mengenali lebih jauh, berikut beberapa hal yang perlu diketahui tentang javascript: • Javascript dirancang untuk memberikan unsur interaktif kepada halaman HTML

• Javascript merupakan bahasa script. Bahasa script adalah bahasa pemrograman yang ringan, dalam arti aturan pemrogramannya tidak serumit bahasa pemrograman murni

• Javascript biasanya digunakan dengan cara menuliskannya secara langsung pada halaman HTML

• Javascript merupakan bahasa interpreter, yang berarti script Javascript tidak perlu dikompilasi sebelum dieksekusi.

• Javascript bersifat gratis

Javascript dapat digunakan untuk melakukan hal-hal berikut:

• Javascript dapat membuat teks dinamis dalam halaman HTML. Javascript dapat menulis teks atau isi suatu variabel pada halaman HTML.

• Javascript dapat menangani event. Kejadian-kejadian seperti tindakan mengklik mouse, atau ketika halaman HTML telah selesai dimuat ke browser dapat dikenali oleh javascript dan dapat mengatur tindakan tertentu ketika event itu terjadi.

• Javascript dapat membaca dan menulis elemen-elemen HTML, yang berarti dapat digunakan untuk mengubah konten suatu elemen HTML.

• Javascript dapat memvalidasi data, misalnya data form sebelum dikirim ke server sehingga dapat meringankan server.

• Javascript dapat mendeteksi browser pengunjung

(8)

L. Era wa n

CARA MENGGUNAKAN JAVSCRIPT

Kode-kode Javascript disisipkan kedalam dokumen HTML menggunakan elemen SCRIPT. Elemen ini akan mengawali dan mengakhiri kode-kode javascript. Browser akan melihat elemen ini sebagai perintah kepadanya untuk menterjemahkan kode-kode yang berada didalam elemen SCRIPT sebagai script Javascript.

Contoh berikut akan memberikan gambaran bagaimana penulisan kode javascript kedalam dokumen HTML:

Dalam contoh diatas, elemen SCRIPT menggunakan atribut type untuk mendefinisikan bahasa script yang digunakan (perintah ini diperlukan karena didalam web, bahasa script tidak hanya Javascript saja)

Jika akan menggunakan elemen HTML untuk memformat tampilan hasil kode Javascript, maka elemen HTML yang akan digunakan ditulis sebagai parameter dari perintah document.write():

Perintah document.write() adalah perintah standar yang umum di Javascript untuk menampilkan keluaran ke halaman HTML.

<sc rip t typ e =” te xt/ ja va sc rip t” > d o c ume nt.write (“ He llo wo rld !!” ); </ sc rip t>

</ b o d y> </ html>

d o c ume nt.write(“<h1>He llo wo rld !!</h1>” ); </ sc rip t>

(9)

L. Era wa n

BROWSER YANG TIDAK MENDUKUNG JAVASCRIPT

Suatu dokumen HTML yang terdapat kode javascript didalamnya dijalankan pada browser yang tidak mendukung Javascript, maka kode Javascript tidak akan dieksekusi malahan seluruh kodenya akan ditampilkan apa adanya ke halaman.

Saat ini, hampir seluruh browser mendukung Javascript. Meskipun demikian, untuk tindakan pencegahan, maka kode Javascript tersebut dapat diapit dengan elemen komentar HTML agar tidak ditampilkan kodenya oleh browser yang tidak mendukung Javascript. Berikut penulisannya:

Dua slash pada tag penutup komentar merupakan simbol komentar Javascript yang akan mencegah Javascript untuk mengeksekusi tag ‘-->’.

LOKASI PENULISAN KODE JAVASCRIPT DALAM DOKUMEN HTML

Kode Javascript yang terdapat dalam suatu dokumen HTML akan dieksekusi segera ketika halaman dimuat ke browser. Jika diinginkan agar kode Javascript dijalankan hanya ketika halaman selesai dimuat, atau ketika pengunjung mengklik tombol kiri mouse, maka kode Javascript perlu ditulis sebagai sebuah fungsi.

DI BA G IA N HEA D

Penulisan kode Javascript di bagian HEAD dokumen HTML akan membuat kode tersebut tidak akan dieksekusi segera ketika halaman dimuat ke browser. Kode tersebut hanya akan dieksekusi ketika dipanggil atau ketika terjadi event tertentu.

Penulisan kode Javascript pada bagian HEAD ini merupakan cara yang baik untuk menggunakan Javascript sebab kode-kode Javascript terkumpul dalam satu lokasi penulisan dan tidak akan bercampur dengan kode konten halaman.

<sc rip t typ e =” te xt/ ja va sc rip t” > <!--

d o c ume nt.write(“He llo wo rld !!” ); //-->

(10)

L. Era wa n

DI BA G IA N BO DY

Javascript yang diletakkan pada bagian body biasanya ditujukan untuk menampilkan konten saat halaman dimuat ke browser.

DI BA G IA N HEA D D A N BO DY

Jumlah script yang dapat disisipkan pada dokumen HTML tidak terbatas. Script Javascript juga dapat ditulis pada bagian HEAD dan BODY berbarengan.

<sc rip t te xt=” te xt/ ja va sc rip t” > func tio n p e sa n()

{

a le rt(“ Ko ta k p e sa n ini d ip a ng g il d e ng a n e ve nt o nlo a d ” );

} </ sc rip t> </ he a d >

</html>

d o c ume nt.write (“ Pe sa n ini d ib ua t d e ng a n Ja va sc rip t” ); </ sc rip t>

(11)

L. Era wa n

M ENG G UNA KA N FILE JA V A SC RIPT EKSTERNA L

Selain menuliskan secara langsung pada dokumen HTML, penerapan Javascript juga dapat menggunakan file eksternal. Kode-kode Javascript disimpan pada sebuah file dengan ekstension ‘.js’. Kemudian file eksternal ini dapat dipanggil dari dokumen HTML dengan menggunakan atribut ‘src’ dari tag <SCRIPT>. File eksternal ini dapat digunakan oleh banyak dokumen HTML.

Perlu dicatat, bahwa kode-kode Javascript yang ditulis pada file eksternal tidak boleh menggunakan elemen <SCRIPT>!

dokumen.html

</ html>

file_eksternal.js

func tio n p e sa n() {

a le rt(‘ Ko d e ko ta k p e sa n ini d isimp a n d a la m file e kste rna l’ ); }

<sc rip t te xt=” te xt/ ja va sc rip t” > func tio n p e sa n()

{

a le rt(“ Ko ta k p e sa n ini d ip a ng g il d e ng a n e ve nt o nlo a d ” );

} </ sc rip t> </ he a d >

d o c ume nt.write (“ Pe sa n ini d ib ua t d e ng a n Ja va sc rip t” );

(12)

L. Era wa n

Pada contoh diatas, dokumen HTML dan file eksternal Javascript diletakkan pada direktori yang sama. Jika tidak, maka pada atribut ‘src’ harus dilengkapi path lokasi penyimpanan file eksternal javascript relatif terhadap dokumen HTML. Misalnya, jika dokumen HTML diletakkan pada direktori root dan file eksternal Javascript pada direktori javascript maka nilai ‘src’ menjadi ‘javascript/file_eksternal.js’.

STATEMENT JAVASCRIPT

C A SE SENSITIV E DA LA M STA TEM ENT

Javascript memiliki statement-statement. Rangkaian statement Javascript akan dieksekusi oleh browser. Berbeda dengan HTML, statement Javascript bersifat case sensitive. Oleh karena itu, penulisan statement perlu diperhatikan benar. Hal ini berlaku ketika membuat statement Javascript, membuat atau memanggil variabel, objek, dan fungsi.

Sebuah statement Javascript merupakan suatu perintah kepada browser yang bertujuan untuk memberitahu browser apa yang harus dilakukannya. Misalnya, suatu statement Javascript yang menyampaikan kepada browser untuk menampilkan kalimat ‘Hello world’ akan berupa seperti berikut ini:

TA ND A A KHIR SUA TU STA TEM ENT

Setiap statement Javascript akan diakhiri dengan tanda semicolon. Sebagian orang berpendapat bahwa hal ini merupakan suatu praktek pemrograman yang baik. Tetapi aturan ini bersifat opsional dalam Javascript. Jika tidak menggunakannya, maka browser akan menganggap bahwa akhir dari sebuah baris adalah akhir dari satu statement. Maka jika akan menulis beberapa statement dalam satu baris, gunakanlah tanda semicolon ini.

KO DE JA V A SC RIPT

Kode javascript adalah sebuah rangkaian statement-statement Javascript. Setiap statement dieksekusi oleh browser dalam urutan sesuai penulisannya.

BLO K JA V A SC RIPT

Statement-statement Javascript dapat dikelompokkan dalam satu kelompok. Awal blok dimulai dengan tanda kurung kurawal, demikian juga akhir blok. Kegunaan dari blok adalah untuk membuat rangkaian statement supaya dieksekusi bersama.

(13)

L. Era wa n

MENYISIPKAN KOMENTAR

Suatu komentar biasanya disisipkan oleh programmer untuk menjelaskan kode program. Javascript menggunakan tanda dua buah backslash untuk menandai komentar. Contoh:

Untuk menyisipkan komentar yang panjangnya melebihi satu baris, dapat menggunakan tanda ‘/*’ untuk awalan dan sebagai akhiran ‘*/’. Contoh:

Komentar juga dapat ditulis di akhir statement, contoh: <sc rip t typ e ="te xt/ ja va sc rip t">

// Buat Heading

d o c ume nt.write ("<h1>This is a he a d ing </ h1>");

// Tulis 2 paragrap

d o c ume nt.write ("<p >This is a p a ra g ra p h.</ p >"); d o c ume nt.write ("<p >This is a no the r p a ra g ra p h.</ p >"); </ sc rip t>

<sc rip t typ e ="te xt/ ja va sc rip t"> /*

Kode dibawah ini akan membuat heading dan dua buah paragrap */

d o c ume nt.write ("<h1>This is a he a d ing </ h1>"); d o c ume nt.write ("<p >This is a p a ra g ra p h.</ p >"); d o c ume nt.write ("<p >This is a no the r p a ra g ra p h.</ p >"); </ sc rip t>

d o c ume nt.write ("He llo "); // mencetak "Hello"

d o c ume nt.write (" Na filla !"); // mencetak " Nafilla!"

(14)

L. Era wa n

TIPE DA TA

TIPE DATA

Javascript mengenal 6 jenis tipe data. Dalam hal tipe data, Javascript disebut ‘loosely typed’ language yang berarti tipe data dalam suatu variabel tidak perlu didefinisikan secara eksplisit. Cukup dengan mendeklarasikan variabel menggunakan kata kunci var dan browser akan menentukan jenis tipe data variabel tersebut berdasarkan nilai yang dimasukkan kedalamnya.

FLO A T D A N INTEG ER

Integer mewakili bilangan bulat sedangkan float mewakili nilai-nilai pecahan. Tipe ini dapat dimodifikasi dengan operator matematika.

BO O LEA N

Tipe data boolean hanya terdiri dari dua nilai yaitu true dan false. Untuk membuat tipe data boolean cukup dengan menggunakan kata kunci true atau false.

STRING

String adalah rangkaian teks yang dapat berupa sembarang karakter. Untuk menuliskan tipe data string ini menggunakan tanda kutip tunggal atau ganda.

va r kurus=true ; va r mud a =fa lse ; </ sc rip t>

<sc rip t typ e =” te xt/ ja va sc rip t” > va r usia =20;

(15)

L. Era wa n

String dapat digabungkan (concatenate) menggunakan operator ‘+’. Contoh:

A RRA Y

Array adalah kumpulan dari nilai-nilai. Masing-masing nilai dapat berupa variabel atau suatu nilai. Untuk membuat sebuah array menggunakan statement new Array(). Contoh:

Untuk mengakses setiap nilai array menggunakan indeks array dengan sintaks namaarray[indeks]. Indeks array dimulai dari 0 bukan 1. Jadi untuk mengakses nilai pertama array menggunakan statement orang[0] yang akan menghasilkan nilai ‘Javas’.

Array secara otomatis akan memberikan informasi khusus yaitu panjang dari array. Informasi ini dapat diakses menggunakan properti length. Jadi, jika diberikan perintah hewan.length, maka akan dihasilkan nilai 5.

Array sangat tepat jika digunakan untuk merepresentasikan kumpulan nilai-nilai yang memiliki suatu kesamaan dan Javascript menyediakan berbagai fungsi untuk memanipulasi array seperti sorting, filtering, searching, dan sebagainya.

va r o ra ng =ne w Arra y(‘ Ja va s’ ,’ Ind ra sta ’ ,20,185,80); </ sc rip t>

<sc rip t typ e =” te xt/ ja va sc rip t” > va r na ma De p a n=’ Ja va s’ ; va r na ma Be la ka ng =’ Ind ra sta ’ ; va r usia =’ 20’ ;

va r ting g iBa d a n=’ 185’ ; va r b e ra tBa d a n=’ 80’ ; </ sc rip t>

<sc rip t typ e =” te xt/ ja va sc rip t” > va r na ma De p a n=’ Ja va s’ ; va r na ma Be la ka ng =’ Ind ra sta ’ ; va r usia =’ 20’ ;

va r ting g iBa d a n=’ 185’ ; va r b e ra tBa d a n=’ 80’ ;

va r p e sa n=’ Ha llo sa ya ‘ + na ma De p a n + ‘ ‘ + na ma Be la ka ng + ‘ .’ ; p e sa n+=’ Sa ya b e rusia ‘ + usia + ‘ ta hun’ + ‘ d e ng a n ting g i b a d a n ‘ ; p e sa n+=ting g iBa d a n + ‘ c m’ ;

(16)

L. Era wa n

O BJEC T

Object adalah suatu konstruksi didalam pemrograman yang menggambarkan atau memodelkan sesuatu hal yang nyata, misalnya manusia. Object memiliki properti dan metode. Properti menjelaskan karakteristik object sedangkan metode merupakan aksi yang dapat dilakukan object. Untuk membuat suatu object menggunakan statement new Object(). Contoh berikut ini memberikan gambaran tentang tipe data object dalam javascript.

Untuk mengakses properti object menggunakan tanda titik seperti orang.tinggiBadan yang akan memberikan nilai 185 atau tanda kurung siku seperti orang[‘namaDepan’] yang akan memberikan nilai ‘Javas’.

<sc rip t typ e =” te xt/ ja va sc rip t” > va r o ra ng =ne w O b je c t(); o ra ng .na ma De p a n=’ Ja va s’ ; o ra ng .na ma Be la ka ng =’ Ind ra sta ’ ; o ra ng .usia =20;

(17)

L. Era wa n

VA RIABEL

Dalam pemrograman variabel dipakai untuk menampung nilai data. Nilai yang disimpan dalam variabel ini dapat berubah sepanjang eksekusi program.

Aturan dalam pembuatan variabel di Javascript cukup sederhana, yaitu:

• Nama variabel bersifat case sensitive (variabel Y berbeda dengan variabel y) • Nama variabel harus dimulai dengan huruf atau garis bawah (underscore)

MENDEKLARASIKAN VARIABEL

Pembuatan variabel di Javascript sering disebut sebagai mendeklarasikan variabel. Keyword yang diperlukan untuk mendeklarasikan variabel adalah var. Contoh:

Pendeklarasian diatas akan membuat variabel kosong. Variabel juga dapat dideklarasikan berikut nilainya seperti statement berikut:

Kalau nilai yang akan dimasukkan kedalam variabel berupa string, maka tanda petik diperlukan untuk mengurung nilai, seperti contoh nilai string ‘Javas’ diatas (tanda petik tunggal dan ganda dapat digunakan secara bergantian).

Pendeklarasian kembali suatu variabel tidak akan menghilangkan nilai data yang telah tersimpan didalamnya, contoh:

nilai data ‘5’ dalam variabel x tidak akan hilang setelah statement baris dibawahnya dieksekusi. va r x;

va r x=10;

(18)

L. Era wa n

O PERA TO R

OPERATOR ARITMETIKA

Misalkan nilai y=5

Operator Description Example Result

+ pertambahan x=y+2 x=7 y=5

- pengurangan x=y-2 x=3 y=5

* perkalian x=y*2 x=10 y=5

/ pembagian x=y/2 x=2.5 y=5

% Modulus (sisa hasil bagi) x=y%2 x=1 y=5

++ Increment x=++y x=6 y=6

x=y++ x=5 y=6

-- Decrement x=--y x=4 y=4

x=y-- x=5 y=4

OPERATOR ASSIGNMENT

Misalkan nilai y=5

Operator Example Same As Result

= x=y x=5

+= x+=y x=x+y x=15

-= x-=y x=x-y x=5

*= x*=y x=x*y x=50

/= x/=y x=x/y x=2

(19)

L. Era wa n

OPERATOR + UNTUK STRING

Operator + digunakan juga untuk menggabungkan 2 atau lebih string menjadi satu.

Setelah diekseksusi variabel txt3 berisi “What a very nice day”.

Untuk menambahkan spasi diantara dua string dapat dilakukan dengan cara menambahkan pada salah satu string:

atau tambahkan pada ekspresi:

Setelah dieksekusi pernyataan diatas, maka variabel txt3 berisi “What a very nice day”. Jika yang akan ditambahkan adalah string dan bilangan maka hasilnya berupa string.

OPERATOR PEMBANDINGAN DAN LOGIKA

Operator logika dan pembandingan digunakan untuk menguji suatu ekspresi dengan hasil pengujian berupa nilai true atau false.

O PERA TO R PEM BA NDING A N

Operator ini digunakan dalam pernyataan-pernyataan logik untuk menentukan persamaan atau perbedaan diantara variabel-variabel atau nilai-nilai. Tabel dibawah ini berdasarkan nilai x=5.

Operator Description Example

== is equal to x==8 is false

=== is exactly equal to (value and type) x===5 is true txt1="Wha t a ve ry";

txt2="nic e d a y";

txt1="Wha t a ve ry "; txt2="nic e d a y";

(20)

L. Era wa n

x==="5" is false

!= is not equal x!=8 is true

> is greater than x>8 is false

< is less than x<8 is true

>= is greater than or equal to x>=8 is false

<= is less than or equal to x<=8 is true

Operator pembandingan dalam penerapannya juga digunakan dalam pernyataan-pernyataan kondisional untuk membandingkan nilai dan aksi berikutnya tergantung pada hasil pembandingan. Contoh:

OPERATOR LOGIKA

Operator yang digunakan untuk menentukan nilai logika diantara dua variabel atau nilai. Tabel dibawah ini berdasarkan nilai x=6 dan y=3.

Operator Description Example

&& and (x < 10 && y > 1) is true

|| or (x==5 || y==5) is false

! not !(x==y) is true

Javascript juga mempunyai operator kondisional yang berguna untuk menempatkan suatu nilai ke suatu variabel berdasarkan suatu kondisi. Sintaks penggunaan operator ini adalah:

namaVar=(kondisi)?nilai1:nilai2;

Contoh:

salam=(waktu==”PAGI”)?”Selamat pagi ”:”Selamat datang ”;

(21)

L. Era wa n

KO NDISI PERC A BANG A N

Pada saat membuat program, acapkali kita menginginkan kode program melakukan operasi yang berbeda berdasarkan keputusan yang berbeda. Disini kita dapat menggunakan kondisi percabangan untuk melakukannya.

Javascript menyediakan beberapa jenis kondisi percabangan:

PERCABANGAN IF,

Dipakai untuk menjalankan kode tertentu hanya jika kondisi true terpenuhi. Sintaksnya adalah:

if (condition) {

Kode yang akan dieksekusi bila kondisi bernilai true }

Contoh:

PERCABANGAN IF...ELSE,

Dipakai jika terdapat dua kode yang akan dijalankan untuk kondisi true terpenuhi dan tidak terpenuhi. Sintaksnya:

if (condition) {

/ / C e ta k sa la m "G o o d mo rning " jika wa ktu kura ng d a ri p ukul 10 va r d =ne w Da te ();

va r time =d .g e tHo urs(); if (time <10)

{

d o c ume nt.write ("<b >G o o d mo rning </ b >"); }

(22)

L. Era wa n

code to be executed if condition is true }

else {

code to be executed if condition is not true }

Contoh:

PERCABANGAN IF...ELSE IF..ELSE

Dipakai jika terdapat banyak pilihan blok kode yang akan dijalankan Sintaks:

if (kondisi1) {

Kode yang akan dieksekusi bila kondisi1 bernilai true }

else if (kondisi2) {

Kode yang akan dieksekusi bila kondisi2 bernilai true }

/ / Jika wa ktu kura ng d a ri p ukul 10, c e ta k sa la m "G o o d mo rning " / / Se la in itu c e ta k sa la m "G o o d d a y"

va r d = ne w Da te (); va r time = d .g e tHo urs(); if (time < 10)

{

d o c ume nt.write ("G o o d mo rning !"); }

e lse {

d o c ume nt.write ("G o o d d a y!"); }

(23)

L. Era wa n else {

Kode yang akan dieksekusi bila baik kondisi1 maupun kondisi2 tidak bernilai true }

Contoh:

PERCABANGAN SWITCH

Dipakai bila akan memilih salah satu dari sekian banyak blok kode untuk dijalankan Sintaks:

switch(n) {

case 1: blok kode 1 break; case 2:

<sc rip t typ e ="te xt/ ja va sc rip t"> va r d = ne w Da te ()

va r time = d .g e tHo urs() if (time <10)

{

d o c ume nt.write ("<b >G o o d mo rning </ b >"); }

e lse if (time >10 && time <16) {

(24)

L. Era wa n blok kode 2 break; default:

kode yang akan dieksekusi bila nilai n tidak bernilai dalam case 1 maupun case 2 }

Switch bekerja sebagai berikut, ekspresi n yang biasanya berupa variabel, dievaluasi sekali. Kemudian nilai ekspresi tersebut akan dibandingkan dengan nilai dari setiap case pada struktur. Jika nilai salah satu case cocok dengan nilai ekspresi, maka kode dari case tersebut akan dieksekusi. Pernyataan break berfungsi untuk mencegah kode-kode pada case selanjutnya dieksekusi.

Contoh:

/ / C e ta k b e rb a g a i sa la m b e rd a sa rka n ha ri.

/ / Untuk ha ri Sund a y=0, Mo nd a y=1,Tue sd a y=2, d st. va r d =ne w Da te ();

va r ha ri=d .g e tDa y(); switc h (ha ri)

{ c a se 5:

d o c ume nt.write ("Fina lly Frid a y"); b re a k;

c a se 6:

d o c ume nt.write ("Sup e r Sa turd a y"); b re a k;

c a se 0:

d o c ume nt.write ("Sle e p y Sund a y"); b re a k;

d e fa ult:

d o c ume nt.write ("I'm lo o king fo rwa rd to this we e ke nd !");

}

(25)

L. Era wa n

PO PUP BO XES

Javascript memiliki 3 jenis kotak dialog popup:

ALERT

Kotak dialog alert sering digunakan untuk menyampaikan informasi kepada user. Kotak dialog memiliki sebuah tombol, yaitu OK.

Sintaks: alert(“teks”); Contoh:

CONFIRM

Kotak dialog confirm biasanya digunakan jika kita menghendaki user memverifikasi atau menerima sesuatu. Kotak dialog memiliki 2 tombol, yaitu OK dan Cancel. Jika user mengklik tombol OK, maka kotak dialog akan mengembalikan nilai true, dan jika tombol Cancel yang diklik, maka nilai yang dikembalikan false.

Sintaks: <html> <he a d >

<sc rip t typ e ="te xt/ ja va sc rip t"> func tio n sho w_a le rt()

{

a le rt("I a m a n a le rt b o x!"); }

(26)

L. Era wa n

confirm(“teks”);

Contoh:

PROMPT

Kotak dialog digunakan untuk meminta user memasukkan sebuah nilai sebelum masuk ke sebuah halaman. Kotak dialog memiliki 2 tombol, yaitu OK dan Cancel. Jika tombol OK diklik, maka nilai yang diinputkan akan dikembalikan oleh kotak dialog. Jika user mengklik tombol Cancel, maka niai null akan dikembalikan.

Sintaks:

prompt(“teks”,”nilai_default”);

Contoh: <html> <he a d >

<sc rip t typ e ="te xt/ ja va sc rip t"> func tio n sho w_c o nfirm() {

va r r=c o nfirm("Pre ss a b utto n"); if (r==true )

{

a le rt("Yo u p re sse d O K!"); }

e lse {

a le rt("Yo u p re sse d C a nc e l!"); }

}

</ sc rip t> </ he a d > <b o d y>

(27)

L. Era wa n <html> <he a d >

<sc rip t typ e ="te xt/ ja va sc rip t"> func tio n sho w_p ro mp t() {

va r na me =p ro mp t("Ple a se e nte r yo ur na me ","Ha rry Po tte r"); if (na me !=null && na me !="")

{

d o c ume nt.write ("He llo " + na me + "! Ho w a re yo u to d a y? ");

} }

(28)

L. Era wa n

FUNG SI

Kode javascript pada suatu halaman secara normal akan dieksekusi segera setelah halaman tersebut dimuat ke browser. Untuk mencegah hal ini, kode dapat dimasukkan kedalam sebuah fungsi. Fungsi adalah sekelompok kode yang dapat dieksekusi dengan pemanggilan fungsi atau even tertentu. Pemanggila fungsi dapat dilakukan darimana saja didalam halaman. Bahkan fungsi dapat dipanggil oleh halaman lain jika fungsi tersebut ditempatkan dalam suatu file eksternal .js.

Fungsi dapat diletakkan pada bagian head maupun body. Tetapi, untuk memastikan bahwa fungsi sudah siap atau sudah dimuat oleh browser saat akan dipanggil, sebaiknya fungsi diletakkan pada bagian head.

Untuk mendefinisikan sebuah fungsi, sintaks yang digunakan: function functionname(var1,var2,...,varX)

{

pernyataan-pernyataan fungsi;

}

Parameter var1, var2, adalah variabel atau nilai yang dilewatkan kedalam fungsi. Simbol kurung kurawal buka dan tutup menandakan awal dan akhir dari fungsi.

PENTING!

Sebuah fungsi dengan tanpa parameter tetap harus menyertakan kurung buka dan tutup setelah nama fungsi. Dan seperti seharusnya, tulisan function menggunakan huruf kecil serta saat pemanggilan fungsi perhatikan penulisan nama fungsi harus sama dengan nama fungsi saat didefinisikan.

(29)

L. Era wa n

PERNYATAAN RETURN

Sebuah fungsi jika dikehendaki dapat dibuat agar mengembalikan sebuah nilai. Untuk membuat fungsi seperti ini, maka pernyataan return dapat digunakan didalam tubuh fungsi. Sebagai contoh, fungsi dibawah ini akan mengembalikan nilai berupa perkalian nilai parameter-parameternya:

<sc rip t typ e ="te xt/ ja va sc rip t"> func tio n d isp la yme ssa g e () {

a le rt("He llo Wo rld !"); }

</ sc rip t> </ he a d > <b o d y> <fo rm>

<sc rip t typ e ="te xt/ ja va sc rip t"> func tio n p ro d uc t(a ,b )

{

re turn a *b ; }

<sc rip t typ e ="te xt/ ja va sc rip t"> d o c ume nt.write (p ro d uc t(4,3)); </ sc rip t>

(30)

L. Era wa n

VARIABEL LOKAL

Jika suatu variabel dideklarasikan dengan menggunakan pernyataan var didalam sebuah fungsi, variabel tersebut hanya dapat diakses didalam fungsi. Jika keluar dari fungsi, variabel tersebut akan dihapus. Variabel ini disebut variabel lokal. Variabel lokal dengan nama yang sama dapat dibuat pada dua fungsi yang berbeda, sebab variabel-variabel tersebut hanya dikenali didalam fungsi dimana mereka dideklarasikan.

(31)

L. Era wa n

PERULA NG A N

Struktur perulangan diperlukan manakala suatu blok kode tertentu ingin supaya dieksekusi berulangkali. Dalam bahasa Javascript tersedia 2 jenis bentuk perulangan yang dapat digunakan untuk memenuhi keperluan tersebut.

FOR

Perulangan for digunakan jika jumlah perulangan yang diinginkan diketahui. Sintaks: for (variable=startvalue;variable<=endvalue;variable=variable+increment)

{

pernyataan-pernyataan for

}

Contoh:

<sc rip t typ e ="te xt/ ja va sc rip t"> va r i=0;

fo r (i=0;i<=5;i++) {

(32)

L. Era wa n

Contoh diatas menentukan perulangan yang dimulai dengan nilai i=0. Perulangan akan terus dilakukan selama nilai i kurang dari atau sama dengan 5. Setiap satu iterasi selesai dilakukan, nilai i akan ditambah 1.

WHILE

Perulangan while akan mengulang blok kode selama kondisi perulangan terpenuhi. Sintaks: while (variable<=endvalue)

{

pernyataan-pernyataan while

}

Contoh:

<sc rip t typ e ="te xt/ ja va sc rip t"> va r i=0;

while (i<=5) {

(33)

L. Era wa n

Program diatas akan melakukan perulangan selama nilai variabel i kurang dari sama dengan 5. Perulangan diawali dengan pemberian nilai 0 ke variabel i. Nilai i akan bertambah 1 setiap satu perulangan berjalan.

DO...WHILE

Do...while, merupakan varian dari perulangan while. Keunikan perulangan ini yaitu perulangan pasti akan melakukan perulangan minimal 1 kali apapun kondisinya kemudian perulangan berikutnya berlangsung hingga kondisi terpenuhi. Sintaks:

do {

code to be executed

}

while (variable<=endvalue);

Contoh:

do {

document.write("The number is " + i); document.write("<br />");

(34)

L. Era wa n

PERNYA TAA N BREAK DA N

C O NTINUE

BREAK

Suatu perulangan dapat dihentikan sebelum selesai melakukan seluruh perulangannya dengan suatu pernyataan break. Jika pada saat dieksekusi program menemui pernyataan break ini, maka perulangan pada saat itu akan dihentikan dan program akan mengeksekusi baris-baris kode setelah blok perulangan jika ada. Pernyataan ini akan menyebabkan kode-kode perulangan yang berada dibawah pernyataan break tidak akan dieksekusi. Contoh:

for (i=0;i<=10;i++) {

if (i==3) { break; }

} </script> </body> </html>

CONTINUE

Hampir sama seperti break, pernyataan continue akan menghentikan perulangan, tetapi bedanya setelah itu program akan mengeksekusi perulangan berikutnya. Seperti break, baris kode setelah continue dalam blok perulangan juga tidak akan dieksekusi. Contoh:

for (i=0;i<=10;i++) {

(35)

L. Era wa n

{

continue; }

(36)

L. Era wa n

PERNYA TAA N FO R...IN

Perulangan ini digunakan untuk melakukan suatu perulangan berdasarkan elemen-elemen suatu array atau properti-properti suatu objek. Sintaks:

for (variable in object) {

code to be executed

}

Kode dalam tubuh perulangan akan dieksekusi untuk setiap elemen atau properti. Argumen variable dapat berupa sebuah variabel, elemen array, atau properti objek. Contoh:

var mycars = new Array(); mycars[0] = "Saab"; mycars[1] = "Volvo"; mycars[2] = "BMW"; for (x in mycars)

{

document.write(mycars[x] + "<br />"); }

(37)

L. Era wa n

EVEN

Pengertian even ini adalah suatu aksi yang dapat dideteksi oleh Javascript. Setiap elemen dalam sebuah halaman web mempunyai even tertentu yang dapat memicu Javascript. Misalnya, dengan even onClick, kita dapat menetapkan suatu fungsi supaya dieksekusi jika suatu tombol diklik oleh user. Even didefinisikan di dalam tag HTML. Even-even tersebut contohnya:

• Klik mouse

• Loading halaman web atau gambar.

• Pergerakan mouse melewati sebuah hotspot pada halaman web • Pemilihan sebuah input di dalam sebuah form HTML.

• Submit sebuah form HTML

• Penekanan sebuah tombol keyboard.

Secara normal penggunaan even dikombinasikan dengan sebuah fungsi yang tidak akan dieksekusi sebelum even terjadi.

ONLOAD DAN ONUNLOAD

Even onLoad akan terpicu jika terjadi user masuk ke sebuah halaman, sedangkan onUnload akan terjadi jika user meninggalkan sebuah halaman.

Even onLoad biasanya digunakan untuk mendeteksi jenis dan versi browser pengunjung dan memuat versi halaman web tepat berdasarkan informasi tersebut.

Baik even onLoad maupun onUnload juga kerap digunakan untuk menyimpan suatu cookie yang diset ketika pengunjung masuk atau meninggalkan halaman. Ketika pertama kali berkunjung, seorang pengunjung akan ditampilkan sebuah popup yang menanyakan namanya. Kemudian nama tersebut disimpan dalam sebuah cookie. Kemudian ketika suatu saat pengunjung kembali, maka suatu popup dapat ditampilkan yang menampilkan ucapan selamat datang misalnya.

ONFOCUS, ONBLUR DAN ONCHANGE

Even-even ini biasanya digunakan dalam suatu kombinasi untuk memvalidasi suatu inputan form. Sebagai contoh, di bawah ini penggunaan even onChange pada suatu inputan form yang akan mengeksekusi suatu fungsi checkmal() jika isi inputan mengalami perubahan.

(38)

L. Era wa n

ONSUBMIT

Even ini biasanya digunakan untuk memvalidasi semua inputan form saat akan disubmit.

Contoh berikut ini tentang bagaimana penggunaan even ini. Ketika user mengklik tombol submit form, maka suatu fungsi yang bernama checkForm() akan dipanggil. Fungsi ini akan memeriksa isi inputan form. Fungsi ini akan mengembalikan nilai false jika isian tidak diterima dan nilai true jika isian diterima. Jika nilai true yang dikembalikan, form akan disubmit, sebaliknya form akan dibatalkan.

ONMOUSEOVER DAN ONMOUSEOUT

Even ini biasanya digunakan untuk membuat suatu tombol animasi.

Contoh dibawah ini akan menampilkan kotak alert jika sebuah even onMouseOver terdeteksi.

(39)

L. Era wa n

TRY DA N C A TC H

Try dan catch digunakan untuk menguji suatu blok kode terhadap suatu kesalahan. Ketika Anda browsing halaman-halaman web di Internet, suatu saat mungkin Anda akan menjumpai suatu halaman web yang menampilkan suatu kotak peringatan Javascript yang menyatakan bahwa ada suatu kesalahan runtime dan menanyakan “Do you wish to debug?”. Pesan kesalahan semacam ini mungkin berguna bagi para pengembang website, tetapi tidak untuk pengunjung. Ketika pengunjung melihat kesalahan ini ketika mengunjungi salah satu halaman web Anda, mereka biasanya akan meninggalkan website Anda. Hal ini tentunya tidak diharapkan oleh kita.

Pernyataan try dan catch memungkinkan kita untuk menguji blok kode terhadap kesalahan. Blok try berisi kode yang akan dijalankan, dan blok catch berisi kode yang akan dijalankan jika suatu kesalahan terjadi. Sintaks:

try {

//Run some code here }

catch(err) {

//Handle errors here }

Perhatikan bahwa penulisan pernyataan try dan catch dalam huruf kecil. Penulisan dengan huruf besar akan menyebabkan kesalahan.

BEBERAPA CONTOH PENGGUNAAN

Contoh dibawah ini akan menampilkan “Welcome Guest!” ketika tombol diklik. Disini sengaja diberikan suatu kesalahan dalam fungsi message(), yaitu penulisan pernyataan alert yang tertulis adddalert. Maka ketika terjadi kesalahan ini, blok catch akan menangkap kesalahan dan mengeksekusi kode yang sudah disiapkan. Kode akan menampilkan pesan kesalahan yang sudah disiapkan yang menyampaikan kepada user apa yang terjadi.

(40)

L. Era wa n { try { adddlert("Welcome guest!"); } catch(err) {

txt="There was an error on this page.\n\n";

txt+="Error description: " + err.description + "\n\n"; txt+="Click OK to continue.\n\n";

alert(txt); } } </script> </head> <body>

</html>

Contoh berikutnya menggunakan kotak confirm yang memberitahukan kepada user dapat mengklik tombol OK untuk melanjutkan melihat halaman atau Cancel yang akan membawa user menuju halaman homepage. Jika metode confirm mengembalikan nilai false, yang berarti user mengklik tombol Cancel, maka user akan di-redirect. Jika metode confirm mengembalikan nilai true, kode tidak akan melakukan apa-apa.

<html> <head> <script type="text/javascript"> var txt=""; function message() { try { adddlert("Welcome guest!"); } catch(err) {

(41)

L. Era wa n

</head> <body>

(42)

L. Era wa n

THRO W

Pada struktur try...catch, ketika terjadi suatu kesalahan maka blok kode dalam catch akan dieksekusi. Kode untuk menangani kesalahan didalam blok catch dapat dibuat terdiri dari beberapa kelompok kode yang akan menangani kesalahan yang berbeda-beda. Disini kesalahan yang mungkin terjadi harus sudah diketahui terlebih dahulu. Untuk lebih jelasnya lihat contoh dibawah ini:

<!DOCTYPE html> <html>

<body>

var x=prompt("Enter a number between 5 and 10:",""); try { if(x>10) { throw "Err1"; } else if(x<5) { throw "Err2"; } else if(isNaN(x)) { throw "Err3"; } } catch(err) { if(err=="Err1") {

document.write("Error! The value is too high."); }

if(err=="Err2") {

document.write("Error! The value is too low."); }

if(err=="Err3") {

document.write("Error! The value is not a number."); }

}

(43)

L. Era wa n

</body> </html>

Pada contoh, terdapat suatu variabel x berisi nilai yang dimasukkan oleh user. Nilai tersebut harus lebih besar dari sama dengan 5, kurang dari sama dengan 10, dan harus berupa angka. Jika tidak sesuai dengan ketentuan tersebut maka akan tampil pesan kesalahan yang tergantung dari kesalahan yang terjadi.

Untuk menampilkan pesan kesalahan yang tepat sesuai dengan kesalahan yang terjadi disini menggunakan pernyataan throw. Sintaks pernyataan ini:

throw exception

(44)

L. Era wa n

KA RAKTER KHUSUS

Didalam javascript suatu teks string dapat dimasukkan karakter khusus menggunakan tanda backslash. Backslash ini dapat digunakan untuk menyisipkan karakter apostrophes, new lines, quotes, dan karakter khusus lainnya. Supaya lebih jelas lihat contoh berikut:

var txt="We are the so-called "Vikings" from the north."; document.write(txt);

Suatu string dalam javascript diapit oleh tanda petik tunggal atau ganda. Maka kode diatas akan menghasilkan: We are so-called. Disini terdapat karakter khusus dalam string, yaitu double quotes atau tanda petik ganda. Agar seluruh teks dapat dicetak perlu menggunakan backslash didepan setiap tanda petik ganda sehingga kode diatas akan menjadi:

var txt="We are the so-called \"Vikings\" from the north."; document.write(txt);

Tabel dibawah ini berisi daftar karakter khusus yang dapat disisipkan kedalam string menggunakan backslash.

Kode Keluaran

\’ tanda petik tunggal

\” tanda petik ganda

\\ garis miring

\n baris baru

\r carriage return

\t tab

\b backspace

[image:44.595.75.526.477.681.2]

(45)

L. Era wa n

LEBIH LA NJUT TENTANG EVENT

Event-event javascript berhubungan dengan DOM HTML. Sebenarnya, event-event pada javascript adalah atribut-atribut yang dideskripsikan pada DOM HTML. Event-event ini dikombinasikan dengan javascript yang berfungsi menyediakan kode-kode untuk dieksekusi bila suatu event terjadi.

Selanjutnya akan dibahas satu persatu even-even tersebut secara lebih detail.

EVENT CLICK

Event ini akan tejadi bila tombol mouse kiri diklik pada sebuah elemen. Disini ada dua sintaks. Sintaks pertama jika digunakan dalam suatu elemen HTML, yang kedua jika digunakan pada script Javascript.

Dalam HTML:

Dalam Javascript:

object.onclick=”kodejavascript”;

kodejavascript adalah kode javascript yang akan dieksekusi manakala event terjadi.

onclick dapat digunakan pada tag-tag HTML dibawah ini:

Dan object javascript yang dapat menggunakan event ini:

Document, Window

Contoh berikut ini akan menampilkan data tanggal pada elemen paragrap bernama demo jika tombol Display Date diklik.

{

(46)

L. Era wa n

} </script> </head> <body>

<h1>My First Web Page</h1>

<p id="demo">This is a paragraph.</p>

<button type="button" onclick="displayDate()">Display Date</button> </body>

</html>

EVENT ONMOUSEDOWN DAN ONMOUSEUP

Event onmousedown terjadi jika tombol mouse diklik pada suatu elemen sedangkan event onmouseup terjadi jika tombol mouse dilepas setelah diklik sebelumnya.

Sintaks keduanya: Pada elemen HTML:

Pada script javascript:

Sementara, kodejavascript adalah kode javascript yang akan dieksekusi bila event terjadi. onmousedown dan onmouseup support pada tag-tag HTML:

object javascript yang support: Document, Window Contoh:

<!DOCTYPE html> <html>

<head>

(47)

L. Era wa n

document.getElementById("p1").style.color="red"; }

function mouseUp() {

document.getElementById("p1").style.color="green"; }

</script> </head> <body>

<p id="p1" onmousedown="mouseDown()" onmouseup="mouseUp()">Click the text! The mouseDown() function is triggered when the mouse button is pressed down over this paragraph. The function sets the color of the text to red.

The mouseUp() function is triggered when the mouse button is released. That function sets the color of the text to green.</p>

</body> </html>

(48)

L. Era wa n

O BJEK JA VA SC RIPT

Ja va sc rip t a d a la h b a ha sa p e mro g ra ma n b e rb a sis o b je k. Sua tu b a ha sa p e mro g ra ma n b e rb a sis o b je k me ng ijinka n kita me nd e finisika n o b je k d a n tip e d a ta milik kita se nd iri. Pe rlu d ic a ta t, o b je k ha nya la h sua tu je nis khusus d a ri d a ta .

Ja va sc rip t me miliki o b je k-o b je k ya ng sia p untuk d ig una ka n, d ise b ut b uilt-in o b je k. Be rikut ini re fe re nsi le ng ka p o b je k ya ng d ima ksud .

OBJEK STRING

O b je k string b e rg una untuk me ma nip ula si te ks, d ib ua t d e ng a n me ng g una ka n p e rinta h: ne w String ()

C o nto h:

va r txt=ne w String (“ string ” ); a ta u d a p a t jug a la ng sung se p e rti ini:

va r txt=” string ” ;

PRO PERTI

Properti Penjelasan

c o nstruc to r Me ng e mb a lika n fung si ya ng me mb ua t p ro to typ e d a ri o b je k string

le ng th Me ng e mb a lika n p a nja ng string

p ro to typ e Me mp e rb o le hka n kita me na mb a hka n p ro p e rti d a n me tho d ke se b ua h o b je k

M ETHO D

Properti Penjalasan

(49)

L. Era wa n

c ha rC o d e At() Me ng e mb a lika n Unic o d e d a ri ka ra kte r p a d a ind e ks sp e sifik

c o nc a t() Me ng g a b ung ka n d ua a ta u le b ih string d a n me ng e mb a lika n

sa lina n d a ri string ya ng te la h d ig a b ung fro mC ha rC o d e () Me ng ko nve rsi nila i Unic o d e ke ka ra kte r

ind e xO f() Me ng e mb a lika n p o sisi d a ri nila i te rte ntu ya ng d ite muka n p e rta ma ka li p a d a se b ua h string

la stInd e xO f() Me ng e mb a lika n p o sisi d a ri nila i te rte ntu ya ng d ite muka n te ra khir ka li p a d a se b ua h string

ma tc h() Me nc a ri se b ua h ke sa ma a n d ia nta ra se b ua h e ksp re si re g ule r

d a n se b ua h string , d a n me ng e mb a lika n nila i ke c o c o ka nnya re p la c e () Me nc a ri ke sa ma a n a nta ra se b ua h sub string (a ta u e ksp re si re g ule r) d a n se b ua h string , d a n me ng g a ntika n sub string te rse b ut d e ng a n sub string ya ng b a ru

se a rc h() Me nc a ri ke sa ma a n a nta ra se b ua h e ksp re si re g ule r d a n

se b ua h string , d a n me ng e mb a lika n nila i p o sisi ke sa ma a nnya

slic e () Me ng e kstra k sua tu b a g ia n d a ri se b ua h string d a n

me ng e mb a lika n se b ua h string b a ru

sp lit() Me mb a g i se b ua h string ke d a la m se b ua h a rra y d a ri sub tring

sub str() Me ng e kstra k ka ra kte r d a ri se b ua h string , d imula i d a ri p o sisi sta rt te rte ntu se jumla h ka ra kte r te rte ntu

sub string () Me ng e kstra k ka ra kte r d a ri se b ua h string a nta ra d ua ind e ks te rte ntu

to Lo we rC a se () Me ng ko nve rsi se b ua h string ke huruf ke c il

to Up p e rC a se () Me ng ko nve rsi se b ua h string ke huruf b e sa r

va lue O f() Me ng e mb a lika n nila i p rimitif d a ri se b ua h o b je k string

PROPERTY

PRO PERTI C O NSTRUC TO R

Sinta ks:

(50)

L. Era wa n

<sc rip t typ e ="te xt/ ja va sc rip t"> va r txt = "He llo Wo rld !";

d o c ume nt.write (txt.c o nstruc to r); </ sc rip t>

O utp ut:

func tio n String () { [na tive c o d e ] }

PRO PERTI LENG TH

Sinta ks:

string .le ng th C o nto h:

<sc rip t typ e ="te xt/ ja va sc rip t"> va r txt = "He llo Wo rld !";

d o c ume nt.write (txt.le ng th); </ sc rip t>

O utp ut: 12

PRO PERTI PRO TO TYPE

Me rup a ka n p ro p e rti. g lo b a l Sinta ks:

o b je c t.p ro to typ e .na me =va lue C o nto h:

func tio n e mp lo ye e (na me ,jo b title ,b o rn) {

this.na me =na me ; this.jo b title =jo b title ; this.b o rn=b o rn; }

va r fre d =ne w e mp lo ye e ("Fre d Flintsto ne ","C a ve ma n",1970); e mp lo ye e .p ro to typ e .sa la ry=null;

(51)

L. Era wa n

d o c ume nt.write (fre d .sa la ry); </ sc rip t>

O utp ut: 20000

METHOD

M ETHO D C HA RA T( )

Ind e ks d a ri ka ra kte r p e rta ma a d a la h 0 d a n ind e ks ka ra kte r te ra khir d a ri string b e rna ma “ txt” a d a la h txt.le ng th-1

Sinta ks:

string .c ha rAt(ind e x)

Pa ra me te r ind e ks d ip e rluka n ya ng b e rnila i inte g e r 0 sa mp a i d e ng a n string.le ng th-1 C o nto h:

<sc rip t typ e ="te xt/ ja va sc rip t"> va r str = "He llo wo rld !";

d o c ume nt.write ("First c ha ra c te r: " + str.c ha rAt(0) + "<b r / >"); d o c ume nt.write ("La st c ha ra c te r: " + str.c ha rAt(str.le ng th-1)); </ sc rip t>

O utp ut:

First c ha ra c te r: H La st c ha ra c te r: !

M ETHO D C HA RC O DEA T( )

Sinta ks:

string .c ha rC o d e At(ind e x) C o nto h:

<sc rip t typ e ="te xt/ ja va sc rip t"> va r str = "He llo wo rld !";

(52)

L. Era wa n O utp ut:

First c ha ra c te r: 72 La st c ha ra c te r: 33

M ETHO D C O NC A T( )

Sinta ks:

string .c o nc a t(string 2, string 3, ..., string X) C o nto h:

<sc rip t typ e ="te xt/ ja va sc rip t"> va r str1="He llo ";

va r str2="wo rld !";

va r str3=" Ha ve a nic e d a y!";

d o c ume nt.write (str1.c o nc a t(str2,str3)); </ sc rip t>

O utp ut:

He llo wo rld ! Ha ve a nic e d a y!

M ETHO D FRO M C HA RC O DE( )

Sinta ks:

String .fro mC ha rC o d e (n1, n2, ..., nX) C o nto h:

d o c ume nt.write (String .fro mC ha rC o d e (72,69,76,76,79)); </ sc rip t>

O utp ut: He llo

M ETHO D INDEXO F( )

(53)

L. Era wa n

string .ind e xO f(se a rc hstring , [sta rt]) C o nto h:

<sc rip t typ e ="te xt/ ja va sc rip t"> va r str="He llo wo rld !";

d o c ume nt.write (str.ind e xO f("d ") + "<b r / >"); d o c ume nt.write (str.ind e xO f("WO RLD") + "<b r / >"); d o c ume nt.write (str.ind e xO f("wo rld "));

</ sc rip t> O utp ut:

10 -1 6

PERBEDA A N A NTA RA INDEXO F DA N LA STINDEXO F:

va r str="I lo ve W3Sc ho o ls!"

d o c ume nt.write ("Ind e x o f first o : " + str.ind e xO f("o ")) d o c ume nt.write ("<b r / >")

d o c ume nt.write ("Ind e x o f la st o : " + str.la stInd e xO f("o ")) d o c ume nt.write ("<b r / >")

d o c ume nt.write ("Ind e x o f first 'lo ve ': " + str.ind e xO f("lo ve ")) d o c ume nt.write ("<b r / >")

d o c ume nt.write ("Ind e x o f la st 'lo ve ': " + str.la stInd e xO f("lo ve "))

(54)

L. Era wa n

M ETHO D LA STINDEXO F( )

String d ic a ri mula i d a ri b e la ka ng , te ta p i ind e ks ya ng d ike mb a lika n a d a la h p o sisi ka ra kte r d a ri kiri ke ka na n (mula i d a ri 0).

Sinta ks:

string .la stInd e xO f(se a rc hstring , sta rt) C o nto h:

<sc rip t typ e ="te xt/ ja va sc rip t"> va r str="He llo wo rld !";

d o c ume nt.write (str.la stInd e xO f("d ") + "<b r / >"); d o c ume nt.write (str.la stInd e xO f("WO RLD") + "<b r / >"); d o c ume nt.write (str.la stInd e xO f("wo rld "));

10 -1 6

M ETHO D M A TC H( )

Me ng e mb a lika n nila i d a la m b e ntuk a rra y, null jika tid a k a d a ya ng c o c o k. Sinta ks:

string .ma tc h(re g e xp ) C o nto h:

va r str="The ra in in SPAIN sta ys ma inly in the p la in"; va r p a tt1=/ a in/ g i;

d o c ume nt.write (str.ma tc h(p a tt1)); </ sc rip t>

O utp ut:

(55)

L. Era wa n

M ETHO D REPLA C E( )

Sinta ks: string.replace(regexp/substr,newstring)

CON TOH :

Pencarian case sensitive:

document.write(str.replace("Microsoft", "W3Schools")); </script>

KELUARAN :

Visit W3Schools!

SEA RC H( )

Aka n me nc a ri ke c o c o ka n a nta ra e ksp re si re g ule r d e ng a n string . Me ng e mb a lika n nila i b e rup a p o sisi ke c o c o ka n d ite muka n. Jika tid a k a d a ke c o c o ka n a ka n me ng e mb a lika n nila i -1

Sinta ks: string.search(regexp)

CON TOH 1 :

Pencarian case sensit ive:

document.write(str.search("W3SCHOOLS")); </script>

KELUARAN :

-1

CON TOH 2 :

Pencarian case- insensit ive:

(56)

L. Era wa n KELUARAN :

6

SLIC E( )

Aka n me ng e kstra k b a g ia n d a ri sua tu string d a n me ng e mb a lika n ha sil e kstra k te rse b ut se b a g a i se b ua h string b a ru.

Sinta ks: string.slice(begin,end)

CON TOH :

// extract all characters, start at position 0: document.write(str.slice(0)+"<br />");

// extract all characters, start at position 6: document.write(str.slice(6)+"<br />");

// extract from the end of the string, and to position -6: document.write(str.slice(-6)+"<br />");

// extract only the first character: document.write(str.slice(0,1)+"<br />");

// extract the characters from position 6 to position 11: document.write(str.slice(6,11)+"<br />");

</script>

KELUARAN :

Hello happy world! happy world!

world! H happy

SPLIT( )

Aka n me mb a g i se b ua h string me nja d i a rra y d a ri sub -sub string .

(57)

L. Era wa n CON TOH :

document.write(str.split() + "<br />"); document.write(str.split(" ") + "<br />"); document.write(str.split("") + "<br />"); document.write(str.split(" ",3));

</script>

KELUARAN :

How are you doing today? How,are,you,doing,today?

H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,? How,are,you

SUBSTR( )

Aka n me ng a mb il ka ra kte r-ka ra kte r d a ri se b ua h string d imula i d a ri “ sta rt” sa mp a i se jumla h te rte ntu ka ra kte r d a n me ng e mb a lika n nila i b e rup a sub string b a ru.

Sinta ks: string.substr(start,length)

CON TOH :

document.write(str.substr(3)+"<br />"); document.write(str.substr(3,4));

</script>

KELUARAN :

lo world! lo w

SUBSTRING ( )

Aka n me ng a mb il ka ra kte r-ka ra kte r d a ri se b ua h string d ia nta ra d ua ind e ks ya ng d ite ntuka n d a n me ng e mb a lika n sub string b a ru. Me to d e ini a ka n me ng a mb il ka ra kte r d ia nta ra “ fro m” d a n “ to ” tid a k te rma suk “ to ” itu se nd iri.

(58)

L. Era wa n CON TOH :

document.write(str.substring(3)+"<br />"); document.write(str.substring(3,7));

</script>

KELUARAN :

lo world! lo w

TO LO WERC A SE( )

Sinta ks: string.toLowerCase()

CON TOH :

document.write(str.toLowerCase()); </script>

TO UPPERC A SE( )

Sinta ks: string.toUpperCase()

CON TOH :

document.write(str.toUpperCase()); </script>

V A LUEO F( )

Me tho d ini b ia sa nya a ka n d ip a ng g il se c a ra o to ma tis o le h Ja va sc rip t, tid a k se c a ra e xp lisit d a la m ko d e .

Sinta ks: string.valueOf()

(59)

L. Era wa n

document.write(str.valueOf()); </script>

KELUARAN :

(60)

L. Era wa n

O BJEK DA TE

O b je k Da te d ig una ka n untuk b e ke rja d e ng a n ta ng g a l d a n wa ktu. O b je k Da te d ib ua t d e ng a n p e rinta h: ne w Da te ().

Ad a 4 c a ra untuk me ng g una ka n p e rinta h d ia ta s : var d = new Date();

var d = new Date(milliseconds); var d = new Date(dateString);

var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);

Se b a g ia n b e sa r p a ra me te r d ia ta s b e rsifa t o p sio na l, jika tid a k d ite ntuka n ma ka nila i 0 ya ng a ka n d ile wa tka n. Siste m wa ktu ya ng d ig una ka n b isa b e rup a wa ktu lo ka l(lo c a l time ) a ta u UTC (Unive rsa l, G MT). Ta ng g a l d ihitung d a la m milid e tik d a ri 1 Ja nua ri 1970 00:00:00 Unive rsa l Time (UTC ), se hing g a sa tu ha ri b e risi 86.400.000 milid e tik.

Be b e ra p a c o nto h d e kla ra si o b je k ta ng g a l: var today = new Date()

var d1 = new Date("October 13, 1975 11:13:00") var d2 = new Date(79,5,24)

var d3 = new Date(79,5,24,11,33,0)

O b je k ta ng g a l d a p a t d ima nip ula si d e ng a n mud a h me ng g una ka n me tho d ya ng te rse d ia untuk o b je k ta ng g a l. Se b a g a i c o nto h, d ib a wa h ini a ka n d ise t o b je k ta ng g a l ke ta ng g a l 14 Ja nua ri 2012:

var myDate=new Date();

yDate.setFullYear(2012,0,14);

se d a ng ka n d ib a wa h ini o b je k ta ng g a l d ise t se b a g a i ta ng g a l 5 ha ri ke d e p a n: var myDate=new Date();

myDate.setDate(myDate.getDate()+5);

PROPERTI

Properti Penjelasan

c o nstruc to r Me ng e mb a lika n fung si ya ng me mb ua t p ro to typ e o b je k ta ng g a l p ro to typ e Da p a t d ig una ka n untuk me na mb a h me tho d d a n p ro p e rti ke se b ua h

(61)

L. Era wa n

C O NSTRUC TO R( )

Sinta ks: object.prototype.name=value

CON TOH :

function employee(name,jobtitle,born) {

this.name=name;

this.jobtitle=jobtitle; this.born=born;

}

var fred=new employee("Fred Flintstone","Caveman",1970); employee.prototype.salary=null;

fred.salary=20000;

document.write(fred.salary); </script>

KELUARAN :

20000

PRO TO TYPE( )

Sinta ks: object.prototype.name=value

CON TOH :

function employee(name,jobtitle,born) {

this.name=name;

this.jobtitle=jobtitle; this.born=born;

}

var fred=new employee("Fred Flintstone","Caveman",1970); employee.prototype.salary=null;

fred.salary=20000;

document.write(fred.salary); </script>

(62)

L. Era wa n 20000

METHOD

G ETD A TE( )

Me ng e mb a lika n nila i b e rup a ta ng g a l d a la m sa tu b ula n (1 s/ d 31), se sua i d e ng a n wa ktu lo ka l.

Sinta ks: Date.getDate()

CON TOH 1 :

Mengem balikan nilai tanggal:

var d = new Date();

document.write(d.getDate());

</script>

Keluaran:

31

CON TOH 2 :

Mengem balikan tanggal dari tanggal t ertent u:

var d = new Date("July 21, 1983 01:15:00"); document.write(d.getDate());

</script>

Keluaran:

(63)

L. Era wa n

G ETD A Y( )

Me ng e mb a lika n nila i ta ng g a l d a la m se ming g u(0 s/ d 6) se sua i wa ktu lo ka l. Ha ri Ming g u d ihitung se b a g a i 0, Se nin 1, d a n se te rusnya .

Sinta ks: Date.getDay()

CON TOH 1 :

Mengem balikan nilai hari dalam sem inggu:

document.write(d.getDay()); </script>

Keluaran:

2

CON TOH 2 :

Mengem balikan nam a hari dalam sem inggu:

var weekday=new Array(7); weekday[0]="Sunday"; weekday[1]="Monday"; weekday[2]="Tuesday"; weekday[3]="Wednesday"; weekday[4]="Thursday"; weekday[5]="Friday"; weekday[6]="Saturday";

document.write("Today is " + weekday[d.getDay()]); </script>

Keluaran:

Today is Tuesday

G ETFULLYEA R( )

(64)

L. Era wa n

Sinta ks: Date.getFullYear()

CON TOH 1 :

Mengem balikan 4 digit tahun:

document.write(d.getFullYear()); </script>

Keluaran:

2012

CON TOH 2 :

Mengem balikan 4 digit tahun dari tanggal t ertentu:

var d = new Date("July 21, 1983 01:15:00");

document.write("I was born in " + d.getFullYear()); </script>

Keluaran:

I was born in 1983

G ETHO URS( )

Me ng e mb a lika n nila i ja m (0 s/ d 23) b e rd a sa rka n wa ktu lo ka l. Sinta ks: Date.getHours()

CON TOH 1 :

Mengem balikan jam :

document.write(d.getHours()); </script>

Keluaran:

(65)

L. Era wa n CON TOH 2 :

Mengem balikan j am dari t anggal tertent u:

var d = new Date("July 21, 1983 01:15:00"); document.write(d.getHours());

</script>

Keluaran:

1

G ETM ILLISEC O NDS( )

Me ng e mb a lika n nila i milid e tik (0 s/ d 999) d a ri o b je k Da te b e rd a sa rka n wa ktu lo ka l.

Sinta ks: Date.getMilliseconds()

CON TOH 1 :

Mengem balikan nilai m ilidet ik:

document.write(d.getMilliseconds()); </script>

Keluaran:

263

CON TOH 2 :

Mengem balikan nilai m ilidet ik dari objek Date:

var d = new Date("July 21, 1983 01:15:00"); document.write(d.getMilliseconds());

</script>

The output of t he code above will be: