Day 1JavaScript

Fundamental

54krpl@gmail.com©2010

1

Apa itu JavaScript?

JavaScript yaitu bahasa pemrograman yang dijalankan oleh

interpreter(javaScript engine) dengan kemampuan object-oriented. JavaScript

mengambil beberapa hal positif dari bahasa pemrograman lain. Secara syntax

JavaScript mengambil dari beberapa bahasa pemrograman lain yaitu C,C++,

dan Java, namun JavaScript bersifat loosely-typed/weakly-typed dimana

variabel tidak perlu dikaitkan dengan tipe data tertentu. Object di JavaScript

tidak seperti 'struct' di C atau 'object' di C++/Java, namun lebih mirip dengan

assosiatif array di Perl(atau PHP) yang memetakan nama atribut kesuatu nilai

tertentu, regular expresion dan operasi array mirip dengan Perl. JavaScript

menggunakan mekanisme prototype-based untuk OO inheritance seperti

bahasa pemrograman Self. JavaScript meniru bahasa pemrograman Scheme

untuk function model.

Kebanyakan JavaScript digunakan di Web browser dimana core-javascript

ditambahkan dengan object built-in web browser yang memungkinkan script

untuk berinteraksi dengan user, mengontrol web browser, dan mengubah isi

dokumen html. Hal ini sering disebut dengan client-side JavaScript.

Sejarah singkat JavaScript

JavaScript dibuat oleh Brendan Eich pada tahun 1995. Brendan Eich

merupakan merupakan software enginer baru di Netscape yang di tugaskan

untuk membuat bahasa pemrograman baru yang simple dan mudah digunakan

sebagai pengganti teknologi Java Applet di Web browser Netscape yaitu

Netscape Navigator.

Pada awalnya proyek ini bernama Mocha kemudian berubah menjadi

LiveScript, dan akhirnya menjadi JavaScript. Nama JavaScript merupakan hasil

kerjasama marketing antara Netscape dan Sun, Netscape membundle Sun Java

runtime di web browser Netscape Navigator, LiveScript berubah menjadi

JavaScript untuk meningkatkan popularitas. Nama "JavaScript" adalah

trademark dari Sun Microsystem.

Karena popularitas JavaScript, Microsoft mulai membuat bahasa yang

kompatible yang diberinama dengan JScript. Ketika terjadi perang web browser

antara Netscape dan Microsoft mulai muncul fitur-fitur yang berbeda antara

JavaScript dan JScript. Hal ini menyulitkan programmer untuk membuat script

yang dapat berjalan di Netscape Navigator maupun di Internet Explorer. Oleh

2

karenanya JavaScript distandarisasi oleh European Computer Manufacturer's

Association dengan nama ECMAScript.

JavaScript berbeda dengan Java

Terkadang ada kesalahpahaman tentang JavaScript bahwa JavaScript

merupakan versi simple dari Java. Selain aturan syntax yang hampir mirip dan

kedua-duanya bisa menyediakan content interaktif di web browser, kedua

bahasa ini benar-benar tidak ada keterkaitan. Kemiripan nama hanya untuk

marketing oleh kedua belah pihak Sun dan Netscape. Namun, sebenarnya

JavaScript bisa 'script' Java.

JavaScript tidak simple

JavaScript sering disebut sebagai bahasa scripting daripada bahasa

pemrograman karena JavaScript di jalankan oleh interpreter bukan dicompile

oleh compiler. Munculah anggapan bahwa bahasa scripting lebih simple dan

ditujukan untuk nonprogrammer. Sebenarnya JavaScript bersifat loosely-typed

yang memudahkan nonprogrammer (e.g web designer) untuk mengerjakan

fungsi-fungsi tertentu.

Namun dibalik 'bahasa scripting' JavaScript merupakan bahasa

pemrograman yang cukup komplek. Programmer yang mencoba untuk

menggunakan JavaScript untuk mengerjakan tugas-tugas yang tidak sepele

sering menemui kesulitan, jika mereka tidak mempuyai pemahaman yang kuat

dari bahasa ini.

JavaScript di lain konteks

JavaScript merupakan bahasa pemrograman general-purpose, dan tidak

digunakan sebatas di web browser. JavaScript dirancang untuk dapat di'embed'

dalam berbagai aplikasi untuk menyediakan fungsi scripting. JavaScript bisa

digunakan untuk web server(e.g Node.js), digunakan sebagai bahasa scripting

Widget, membuat view database(e.g couchdb), etc.

Berbagai perusahaan / organisasi IT ternama seperti Netscape/Mozilla

(SpiderMonkey [C], Rhino [Java]), Google (V8[C++]), Microsoft telah membuat

JavaScript engine / interpreter yang dapat digunakan oleh programmer yang

ingin meng-embed JavaScript kedalam aplikasi yang dibuat.

3

Bagaimana cara menjalankan client-side JavaScript?

Yang anda perlukan hanya web browser (yang akan mengeksekusi) dan

text-editor(untuk membuat script). Cara termudah untuk menjalankan perintah

JavaScript yaitu dengan menuliskant 'javascript: <statement JavaScript>' kedalam

address bar pada web browser. Contoh

javascript: 1 + 1javascript: 5 % 2 javascript: alert("hallo")javascript: var nama=prompt("nama anda?","isikan nama

anda");alert(nama);"<h1>selamat datang "+nama+"</h1>";

Selain itu kita dapat menjalankan JavaScript dengan mengembed kedalam HTML.

<html><head>

<title>Tes JavaScript</title><script type="text/javascript">

alert("Atas");</script>

</head><body>

<script type="text/javascript">alert("Tengah");

</script></body><script type="text/javascript">

alert("Bawah");</script>

</html>

Kita juga dapat menggunakan file script external dengan atribut src pada tag script, contoh :

<script type="text/javascript" scr="fileexternal.js" ></script>

contoh diatas akan meload file 'fileexternal.js' yang kemudian akan dieksekusi oleh web browser.

4

Struktur Tata Bahasa

Character SetJavaScript program ditulis menggunakan Unicode Character Set. Tidak

seperti encoding ASCII 7 bit yang dapat digunakan oleh bahasa inggris atau 8 bit encoding ISO Latin-1 yang dapat digunakan oleh bahasa inggris dan kebanyakan negara di eropa, 16 bit Unicode dapat merepresentasikan semua bahasa tertulis yang umum digunakan di bumi. Hal ini memungkinkan programmer yang non-english memakai karakter bahasa mereka(e.g kanji, romaja, sansekerta, etc). Namun pemakaian unicode masih terbatas untuk komentar dan String literal.

Case SensitivityJavaScript bersifat case sensitif. Dimana semua keyword, variabel, nama

fungsi dan identifier lainya harus diketik dengan kapitalisasi yang konsisten. Sebagai contoh 'for' keyword harus diketik 'for', bukan 'FOR' maupun 'For'. Untuk variabel, jabatan, Jabatan, jaBatan, dan JABATAN merupakan empat nama variabel yang berbeda.

Sebagai catatan HTML tidak case sensitif(meskipun XHTML case sensitif). Karena client-side JavaScript sangat berkaitan erat dengan HTML terkadang hal ini membingungkan. Contoh untuk nama event dalam html kita bisa menuliskan 'onClick' namun dalam JavaScript standar nama event berupa huruf kecil 'onclick'.

Whitespace(spasi, tab) dan line break(ganti baris)JavaScript tidak memperhatikan spasi, tab, baris baru yang berlebih pada

script. Anda dapat dengan bebas menggunakan spasi, tab dan baris baru di program anda. Anda dapat memformat script anda agar lebih mudah dibaca dan dimengerti. Namun anda harus berhati-hati untuk menempatkan baris baru.

5

Tanda titik koma(Semicolon)Statement sederhana dalam JavaScript diakhiri oleh tanda semicolon(;)

seperti C,C++,dan Java. Semicolons digunakan untuk memisahkan statement yang satu dengan yang lain. Namun, anda dapat menghilangkan semicolon jika tiap statement anda berada di baris yang berbeda, Contoh

a = 3;b = 5;

dapat ditulis tanpa semicolon :

a = 3b = 5

Namun kita harus memakai semicolon jika statement diatas ditulis seperti ini :

a =3;b=5;

Sebaiknya anda tidak menghilangkan semicolon walaupun statement anda berada di baris yang berbeda(good practice).

Meskipun JavaScript secara teori mengijinkan baris baru sebagai pemisah

statement, pada kenyataannya JavaScript secara otomatis menambahkan

semicolon untuk anda. Hal ini dapat menyebabkan hal yang tak terduga,

perhatikan script berikut.

return true;

JavaScript menginterpretasikan sebagai:

return;true;

Namun, mungkin anda bermaksud untuk:return true;

6

Komentar

JavaScript seperti Java. Kita dapat menggunakan gaya komentar C

maupun C++

//ini komentar sampai akhir baris ini

/*komentar lebih dari satu baris*/

Semua teks antara // sampai akhir baris akan dilihat sebagai sebagai

komentar oleh JavaScript engine. Semua teks antara karakter /* dan */ juga

dilihat sebagai komentar.

Literal

Literal yaitu nilai data yang langsung tertulis di program/script. Berikut ini

contoh literal:

82 // Angka delapanpuluh dua3.14 // Angka tiga poin empat belas /pecahan"halo" // teks/string literal 'apa kabar?' // teks/string literaltrue // nilai boolean literalfalse // nilai boolean literal/JavaScript/gi // regular expression literalnull // nilai kosong{ x:5,y:1} // Inisialisasi Object literal[2,3,5,7,11] // Inisialisasi Array literal

Literal merupakan bagian penting disemua bahasa pemrograman, karena kita tidak bisa membuat program tanpa literal.

Identifiersuatu Identifier merupakan suatu nama untuk mengenali sesuatu. Di

JavaScript identifier digunakan untuk memberi nama variabel, fungsi dan label. Aturan identifier yang legal pada JavaScript yaitu untuk karakter pertama harus berupa huruf(a-Z), underscore(_) atau tanda dollar ($). Untuk karakter selanjutnya dapat berupa huruf, angka, atau tanda dollar. Contoh:

nama_variabeljadwal32_temp$idI

7

Reserved KeywordReserved Keyword yaitu keyword yang sudah atau akan digunakan oleh

bahasa itu sendiri. JavaScript mempunyai beberapa keyword yang sebaiknya kita hindari sebagai identifier.Keyword yang digunakan:break, do, if, switch, typeof, case, else, in, this, var, catch, false, instanceof, throw, void, continue, finally, new, true, while, default, for, null, try, with, delete, function, return

Keyword yang dipesan untuk ECMAScript v4 draft proposal untuk versi JavaScript selanjutnya:abstract, double, goto, native, static, boolean, enum, implements, package, super, byte, export, import, private, synchronized, char, extends, int, protected, throws, class, final, interface, public, transient, const, float, long, short, volatile, debugger

Anda harus menghindari penggunaan identifier dari variabel dan fungsi global yang sudah didefinisikan oleh JavaScript. Jika anda membuat variabel atau fungsi dengan nama yang sama, anda akan mendapatkan pesan error(jika variabel/fungsi read-only) atau anda akan mendefinisikan ulang variabel atau fungsi tersebut. Tiap implementasi JavaScript mempunyai variabel dan fungsi global yang berbeda

Daftar keyword yang umum ada pada client-side JavaScript:arguments, encodeURI, Infinity, Object, String, Array, Error, isFinite, parseFloat, SyntaxError, Boolean, escape, isNaN, parseInt, TypeError, Date, eval, Math, RangeError, undefined, decodeURI, EvalError, NaN, ReferenceError, unescape, decodeURIComponent, Function, Number, RegExp, URIError

Nilai dan Tipe Data

Program komputer berjalan dengan memanipulasi nilai/value, seperti nilai 3.14 atau teks "selamat datang". Tipe nilai yang dapat direpresentasikan atau dimanipulasi dalam bahasa pemrograman disebut dengan Tipe data. Walaupun loosely-typed nilai/value di JavaScript masih mempunyai tipe data. JavaScript menyediakan tiga primitif tipe data yaitu Number(angka), String(teks), dan Boolean(true/false) selain itu JavaScript menyediakan tipe data primitif tambahan yaitu null dan undefined yang masing-masing hanya menyimpan satu nilai.

Selain tipe data primitif JavaScript menyediakan tipe data buatan yang disebut object. Suatu object merepresentasikan suatu koleksi nilai(bisa berupa tipe data primitif seperti Number,String,Boolean atau Object itu sendiri). Object di JavaScript mempunyai dua tipe yang yaitu object yang merepresentasikan koleksi tak terurut dan object yang merepresentasikan koleksi terurut(baca Array).

JavaScript mempunyai tipe object yang lain yaitu function. Function yaitu suatu object yang memiliki code executable didalamnya. JavaScript juga menyediakan beberapa class object yaitu Date untuk merepresentasikan tanggal, RegExp untuk mendefinisikan regular expression(akan dibahas nanti), dan Error untuk merepresentasikan syntax dan runtime error yang dapat terjadi di JavaScript program.

8

NumberJavaScript tidak membedakan antara nilai integer(bil. bulat) dengan

floating-point(bil. pecahan). Semua bilangan direpresentasikan sebagai nilai floating-point dengan ukuran 64 bit (IEEE 754 aka "double"). Number dapat langsung muncul di script sebagai numeric literal. JavaScript menyediakan beberapa format numeric literal.

Integer LiteralInteger/Bilangan bulat basis 10 dapat ditulis sebagai urutan digit.var a = 10;var b = 7;var c=d=5;

Hexadesimal & Octal literalJavaScript menyediakan format untuk Integer berbasis 16. Hexadesimal

literal dimulai dengan "0x" or "0X" diikuti dengan urutan digit hexadesimal mulai dari angka 0 sampai 9 dilanjutkan dengan huruf a(atau A) sampai f(atau F) yang merepresentasikan nilai 10 sampai 15.

Octal(basis 8) literal dimulai dengan angka 0 diikuti dengan angka 0 sampai angka 7. Contoh :

//hexadesimal var hexa=0x10; // 10 hexadesimal, 16 dalam desimalvar temp=0x2; // 2 dalam desimal//Octalvar nilai=010; // 10 hexadesimal, 8 dalam desimal

Octal literal bukan termasuk ECMAScript standard, terkadang beberapa implementasi support Octal literal dan beberapa tidak . Sebaiknya anda menghindari penggunaan octal literal.

Floating-point literalFloating-point atau pecahan dapat ditulis di JavaScript sebagai berikut:3.14var pi=3.14;var setengah=.5;4.3104e5 // 4.3104 x 105

45E-4 // 45 x 10-4

Nilai spesial JavaScript mempunyai beberapa nilai yang merepresentasikan bilangan

tertentu.

Infinity : Merepresentasikan nilai tak terhinggaNaN : Not – a Number , merepresentasikan nilai bukan

nomorNumber.MAX_VALUE : Nilai terbesar yang dapat direpresentasikanNumber.MIN_VALUE : Nilai terkecil yang dapat direpresentasikanNumber.NaN : Sama seperti NaNNumber.POSITIVE_INFINITY : nilai tak terbatas positifNumber.NEGATIVE_INFINITY : nilai tak terbatas negative

9

perlu di catata bahwa nilai NaN tidak sama dengan nilai NaN itu sendiri, begitu juga untuk nilai Infinity. Untuk melakukan test anda perlu menggunakan fungsi isNaN() dan isFinite()

String

String yaitu rangkaian huruf, angka, tanda baca, atau karakter. String digunakan di JavaScript untuk merepresentasikan teks. String literal dalam JavaScript diapit oleh tanda petik tunggal maupun ganda. Contoh :

var nama = 'nama anda';var kelas="A310",noAbsen='32';

Escape SequenceTidak semua tombol yang ada pada keyboard dapat direpresentasikan

oleh karakter biasa. Contohnya kita tidak bisa merepresentasikan tombol enter dengan karakter biasa . Blackslash karakter '\' mempunyai fungsi tersendiri di JavaScript. Backslash disebut juga sebagai escape karakter, karena karakter setelah blackslash akan diperlakukan secara berbeda. Tombol enter atau newline dapat direpresentasikan dengan kombinasi karakter '\n'.

\0 Nul karakter (\u0000)\b Backspace (\u0008)\t Horizontal Tab (\u0009)\n New line (\u000A)\r Carriage return (\u000D)\" tanda petik ganda (\u0022)\' tanda petik tunggal(\u0027)\\ Backslash(\u005C)\xXX Karakter latin-1 dengan nilai XX dalam hexadesimal\uXXXX Karakter unicode

Operasi StringDi JavaScript kita dapat dengan mudah menggabungkan string

menggunakan operator + , operator ini akan menjumlahkan jika anda menggunakannya pada nilai number.

msg="hallo "+"dunia\n";pesan="isi pesan\" "+ msg +"\"";

Untuk mengetahui jumlah karakter kita dapat mengakses properti length pada string.

alert(msg.length); //mengeluarkan nilai 12

untuk mengakses karakter pada index tertentu kita dapat menggunakan fungsi charAt, index dimulai dari 0,

alert(msg.charAt(1)); //mengeluarkan nilai a

untuk mengambil sebagian text kita gunakan fungsi substring,

alert(msg.substring(6,11)) // mengeluarkan nilai dunia

10

parameter pertama merupakan nilai index dimana string mulai diambil. Substring akan mengambil bagian string sampai sebelum parameter kedua. Untuk mencari bagian string dalam suatu string kita gunakan fungsi indexOf

var indx=msg.indexOf(" ");var indx2=msg.indexOf("dunia");

Konversi Number ke StringNumber akan otomatis dikonversikan ke string jika diperlukan. Jika

Number digunakan pada proses penggabungan string.

var pi=3.14;var str=pi +" adalah pembulatan 22/7 ";

Anda dapat secara explisit mengkonversi number ke string dengan menggunakan fungsi String().

var str2=String(3123);

atau menggunakan method dari object Number toString()

var nilai=300;var str_nilai=nilai.toString();

Kita dapat mengisikan parameter tambahan ke method toString() yang berupa basis bilangan yang kita inginkan

var str_biner=nilai.toString(2);var str_octal=nilai.toString(8);var str_hexa=nilai.toString(16);var str_basis36 = nilai.toString(36);

Untuk bilangan pecahan tersedia fungsi toFixed() mengkonversi dengan pembulatan tertentu, toExponential() mengkonversi ke notasi exponensial, dan toPrecision() mengkonversi ke sejumlah signifikan digit.

var pi = Math.PI;pi.toFixed(0);pi.toFixed(2);pi.toExponential(0);pi.toExponential(3); //jumlah angka dibelakang komapi.toPrecision(1);pi.toPrecision(10); //jumlah signifikan digit

Konfersi string ke numberKetika nilai yang diharapkan number bukan string JavaScript secara

otomatis mengkonversi string menjadi number

var luas_lingkaran = "3.14" * "10" * "10"

Anda dapat dengan mudah mengkonversi dengan mengurangi nilai string 11

dengan angka 0

var pi="3.14"- 0;

Atau anda bisa secara explisit menggunakan fungsi Number()

var pi=Number("3.14");

Cara diatas mempunyai satu kelemahan yaitu hanya mendukung bilangan basis 10. Untuk mengkonversi string dengan nilai angka bukan berbasiskan 10 kita dapat menggunakan fungsi parseInt() dan parseFloat()

var berat=parseInt("4 KG");var status=parseInt("10",2);var status2=parseInt("10",16);var jarak = parseFloat("4.32 KM");

Jika parameter yang dipass ke fungsi parseInt dan parseFloat dimulai selain angka dan tanda + atau -, parseInt dan parseFloat akan mengembalikan nilai NaN.

Nilai Boolean

Boolean hanya mempunyai dua nilai yaitu true atau false. Nilai ini merepresentasi nilai kebenaran dari suatu ekspresi.

var a=5;a==5; //menghasilkan nilai true yang menandakan expresi a==5 benar

Nilai boolean kebanyakan digunakan untuk struktur kontrol program.

if(a%2==0){alert(a+" bil. Genap");

}else{alert(a+" bil. Ganjil");

}

Nilai yang dianggap salah pada JavaScript : false, null, undefined, ""(string kosong), 0, NaN. Selain nilai tersebut dianggap benar.

Untuk menkonversi suatu variabel ke boolean secara explisit kita dapat menggunakan fungsi Boolean.

var a="salah";var b=Boolean(a);

atau menggunakan operator negasi dua kali.

var b=!!a;

12

Function

function atau fungsi yaitu kumpulan kode program yang dapat dijalankan yang sudah difenisikan sebelumnya oleh program JavaScript maupun built-in dari implementasi JavaScript. Meskipun fungsi hanya didefinisikan satu kali, JavaScript program dapat memanggil atau mengeksekusi fungsi berkali-kali atau mungkin sama sekali tidak memanggil fungsi. Kita dapat mengirimkan argument atau parameter ke fungsi yang kita panggil. Selanjutnya parameter atau argument ini dapat dipakai oleh fungsi yang kita panggil. Implementasi JavaScript menyediakan beberapa fungsi built-in seperti Math.pow() untuk menghitung nilai pangkat suatu bilangan.

Untuk mendefinisikan fungsi kita sendiri gunakan keyword function disertai nama fungsi, argument, dan kode program fungsi. Nama fungsi dan argument fungsi bersifat opsional.

function volumeKubus(sisi){return Math.pow(sisi,3);

}

Function LiteralDi JavaScript fungsi adalah object. Kita dapat mengisi/assign suatu fungsi

kedalam suatu variabel. Untuk proses assignment ini kita gunakan function literal.

var volumeKubus=function(sisi){return Math.pow(sisi,3);

}

deklarasi fungsi menggunakan cara seperti ini disebut dengan lambda function( istilah ini berasal dari pemrograman LISP). Ada satu cara lain untuk mendeklarasikan suatu fungsi yaitu menggunakan konstruktor Function().

var volumeKubus=new Function("sisi","return Math.pow(sisi,3)");

Object

Object merupakan kumpulan nilai yang diasosiasikan dengan suatu kunci. Nilai dari suatu object sering disebut dengan atribut. Untuk mengakses suatu atribut didalam object kita dapat menggunakan operator titik '.', sebagai contoh object balok

var balok= new Object();balok.panjang=4; //mengeset atribut/properti panjangbalok.lebar=2;balok.tinggi=5;alert(balok.panjang); //mengakses atribut/properti panjang

13

nilai atribut atau properti dari suatu object dapat berupa semua tipe data, termasuk array, function dan object.

Selain menggunakan operator '.' kita bisa menggunakan assosiatif array untuk mengakses atribut dari suatu object.

var volume= balok['panjang']*balok['lebar']*balok['tinggi'];alert("Volume balok = "+volume);

Membuat ObjectKita dapat membuat object dengan memanggil function constructor,

sepertivar obj = new Object();var tgl = new Date();var pola = new RegExp("\\sittelkom\\s","i");Kita dapat menambahkan properti baru secara langsung baik menggunakan operator '.'

atau assosiatif array.var mhs=new Object();mhs.nama="noname";mhs['nim']=111222333;mhs.cetakMhs=function(){

alert(this.nim+", "+this.nama);}mhs.cetakMhs();

Object literal.Selain cara diatas, kita dapat menggunakan object literal untuk membuat

object. var obj=new Object();

kita dapat menulisnya dengan object literal

var obj={};

Sebelumnya kita membuat object menggunakan cara berikut

var mhs = new Object();mhs.nama="noname";mhs.nim=111222333;mhs.cetakMhs=function(){

alert(this.nim+", "+this.nama);}

Jika menggunakan object literal kita gunakan tanda { dan }.

var mhs={nama:"noname",nim:111222333,cetakMhs:function(){

alert(this.nim+", "+this.nama);}

}

14

Konversi ObjectKetika object dikonversi menjadi tipe data boolean akan menghasilkan

nilai true. Mengembalikan nilai false jika object tersebut bernilai null. Untuk konversi ke string object menggunakan fungsi toString() dari object itu sendiri begitu juga untuk konversi ke number object menggunakan fungsi valueOf(). Fungsi toString() dan valueOf() merupakan fungsi turunan dari object Object.

Secara default fungsi valueOf() pada object akan mengembalikan object itu sendiri. Sehingga konversi ke number akan dilakukan dengan cara menkonversi object tersebut ke string kemudian dari string ke number. Anda bisa mengganti atau override baik fungsi toString maupun valueOf()

Array

Array seperti object berupa kumpulan nilai. Namun nama atribut dalam array berupa nomor index, berbeda dengan object yang kita dapat tentukan nama attributnya. Di JavaScript index dari suatu array mulai dari nilai 0. Untuk mengakses elemen dalam array kita gunakan tanda kurung siku '[' ']'. Tipe data dalam suatu array tidak harus sama.

Membuat arrayuntuk membuat array kita dapat gunakan fungsi Array().

var daftar = new Array();daftar[0] = "budi";daftar[1] = 3.14;daftar[2] = false;daftar[3] = {l:4,p:9,t:5};

Kita dapat menginisialisasi nilai array dengan mengirimkan parameter berupa elemen-elemen array ke fungsi Array().

var daftar2= new Array("budi",3.14,false,{l:4,p:9,t:5});

Jika parameter yang kita kirim hanya satu dan berupa number. Fungsi Array() akan menginisialisasi elemen sejumlah parameter dengan nilai awal undefined.

var arr_kosong = new Array(10);

Array literal

Kita dapat membuat array menggunakan array literal. Berikut ini array literal di JavaScript.

var daftar3=["budi",3.14,false,{l:4,p:9,t:5}];

nilai dari elemen suatu array dapat berupa array,

var duaDimensi=[[3,4],[5,2]];alert(duaDimensi[0][1]); //nilai 4

15

Untuk inisialisasi nilai kita bisa menggunakan expresi selain constant.

var x=4;var pangkat=[x,x*x,x*x*x,Math.pow(x,4)];alert(pangkat);

kita dapat tidak mengisi nilai suatu elemen yang secara default akan menjadi undefined.

var adaKosong=[5,,4,,,];

tanda koma terakhir yang berlebih akan dibiarkan.

null

Keyword null di JavaScript mempunyai arti tidak mempunyai nilai. Suatu variabel yang bernilai null berarti variabel tersebut tidak mempunyai suatu nilai valid. Jika dikonversi ke boolean null berubah menjadi false, berubah menjadi 0 jika dikonversi ke number dan berubah menjadi string "null" jika dikonversi menjadi string.

undefined

undefined merupakan nilai di JavaScript. Ketika kita mendeklarasikan suatu variabel namun kita tidak memberi nilai awal, variabel tersebut secara otomatis akan bernilai undefined. Selain itu ketika kita mencoba mengakses atribut dari object namun atribut tersebut tidak ada maka nilai undefined yang akan dikembalikan.

null dan undefined merupakan nilai yang berbeda, namun jika anda coba membandingkan dengan operator pembanding == ,

null == undefined

akan menghasilkan nilai true. Untuk benar-benar membandingkan tipe data antara null dan undefined anda bisa menggunakan identity operator ===,

null === undefined //menghasilkan nilai false

By Value , By Reference

Di JavaScript dan juga pada bahasa pemrogramman lainnya, anda bisa memanipulasi data dengan tiga cara. Pertama anda bisa menyalin/copy data, sebagai contoh anda melakukan proses assignment/pemberian nilai ke variabel baru. Kedua, anda bisa mengirimkannya ke fungsi sebagai argument atau parameter. Ketiga anda dapat membandingkan nilai data dengan operator pembanding. Untuk memahami bahasa pemrograman anda terlebih dahulu harus memahami bagaimana ketiga operasi diatas dijalankan.

16

Secara mendasar terdapat dua cara dalam memanipulasi data yaitu by value dan by reference. Ketika data varibel dimanipulasi by value. Nilai dari salinan nilai data tersebut yang digunakan. Misalnya jika anda melakukan assignment ke suatu variabel baru, maka variabel baru tersebut akan berisi copy nilai yang sama dengan variabel yang kita punya. Nilai variabel baru tersebut independen dengan nilai variabel sebelumnya. Jika kita mengirimkan variabel ke fungsi by value, maka operasi yang dilakukan di fungsi pada variabel tersebut tidak akan berpengaruh pada variabel yang sebenarnya.

By reference berbeda, by reference tidak mengcopy nilai data dari suatu variabel melainkan reference dari suatu variabel. Reference sering dapat disebut juga sebagai link atau pointer. Dengan teknik ini beberapa variabel bisa menunjuk nilai data yang sama. Sehingga perubahan pada suatu variabel dapat merubah variabel yang lain.

Tabel perbandinganOperasi By Value By Reference

Copy, assignment Nilai sebenarnya dari variabel yang dicopy ke variabel baru, tidak ada hubungan antara kedua variabel.

Hanya reference yang dicopy, kedua variabel saling terkait.

Pass, mengirimkan ke fungsi

Nilai yang dikirimkan merupakan copy nilai dari variabel. Tidak ada efek jika fungsi merubah nilai parameter.

Reference di kirim ke fungsi, jika fungsi mengubah nilai variabel variabel yang asli juga ikut berubah.

Compare, membandingkan nilai variabel

Nilai sebenarnya yang dibandingkan

Nilai reference yang dibandingkan

Dalam JavaScript tipe primitive dimanipulai by Value, sedangkan object dimanipulasi by Reference.

//by valuefunction tambah(id){

id=id+i;}var x=5;tambah(x);alert(x); //nilai x masih 5

//by referencefunction tambah2(id){

id[0]=id[0]+1;}var x=[5];tambah2(x);alert(x[0]); //nilai x[0] sekarang 6;

17

Variabel

Variabel yaitu suatu nama yang diasosiasikan dengan suatu nilai. Variabel berisi dan menyimpan suatu nilai. Dengan variabel anda bisa memanipulasi nilai di program anda.

JavaScript berbeda dengan beberapa bahasa pemrograman seperti Java dan C/C++. Di JavaScript kita tidak perlu menspesifikasikan tipe data suatu variabel. Setiap variabel di JavaScript bisa menyimpan nilai dengan dengan berbagai macam tipe data. Contoh:

index=1;index="kedua";

Statement diatas ilegal dalam bahasa pemrograman yang strongly-typed seperti C/C++ dan Java.

Deklarasi variabel Sebelum anda memakai variabel anda harus mendeklarasikannya. Untuk

mendeklarasikan variabel dalam JavaScript anda menggunakan keyword var.

var a;var rata2;

Jika anda tidak mendeklarasikan variabel terlebih dahulu JavaScript akan secara implisit mendeklarasikannya untuk anda. Anda dapat menggabungkan proses deklarasi dengan proses assignment.

var a=2,rata2=92.5;

Jika anda mendeklarasikan variabel lebih dari satu kali, JavaScript tidak akan menginisialisai variabel tersebut, kecuali jika ada proses assignment.

var a=2;var a;alert(a); //a masih bernilai duavar a=3;alert(a); //sekarang a bernilai tiga

Variabel scope

Variabel scope yaitu wilayah dimana variabel tersebut dikenali atau didefinisikan. Global variabel mempunyai scope global, sedangkan variabel (variabel lokal) yang dideklarasikan pada suatu fungsi hanya dapat diakses oleh fungsi itu sendiri. Parameter fungsi juga termasuk variabel lokal fungsi.

var cakupan="global";

function cekCakupan(){var cakupan="lokal";alert(cakupan); //menampilkan popup dengan nilai "lokal"

}

18

cekCakupan();alert(cakupan); //menampilkan popup dengan nilai "global"

Meskipun anda dapat tidak menggunakan var untuk deklarasi variabel, namun untuk variabel lokal anda harus menggunakan keyword var.

var cakupan="global";

function cekCakupan(){cakupan="lokal";alert(cakupan); //menampilkan popup dengan nilai "lokal"

}cekCakupan();alert(cakupan); //menampilkan popup dengan nilai "lokal"

Pada umumnya, function tidak mengetahui variabel apa yang ada pada scope global atau untuk apa variabel tersebut digunakan. Oleh karena itu jika suatu fungsi menggunakan variabel global melainkan variabel lokal untuk fungsi tersebut, hal ini meningkatkan resiko perubahan nilai variabel global yang mungkin variabel tersebut digunakan untuk keperluan tertentu. Sebaiknya anda menggunakan var untuk variabel lokal di fungsi.

Di JavaScript hanya ada scope function bukan block function. Jadi perbedaan scope hanya dapat dibuat oleh function bukan block.

i=5;function f(){

i=7;if(i==7){

var i=8;}alert(i); //nilai i=8;

}f();alert(i); //nilai i=5;

Garbage Collection

Tipe reference tidak mempunyai ukuran yang sama seperti string, object dan array. Cara penyimpanan tipe data seperti ini didalam memori harus dilakukan secara dinamis, yaitu ketika ukuran dari object tersebut diketahui. Setiap kali progam JavaScript membuat string,array atau object baru JavaScript engine harus mengalokasikan memori untuk menyimpan data tersebut.

Karena memory dialokasikan secara dinamis maka terdapat mekanisme untuk menghapus/merelokasi memory yang sebelumnya telah dipakai untuk digunakan kembali, jika tidak memory akan penuh dan program crash.

JavaScript menggunakan Garbage Collection untuk mendealokasi memori . JavaScript engine dapat mendeteksi kapan object tidak akan lagi digunakan.

19

var pesan="halo"; //alokasi memori untuk stringvar u=pesan.toUpperCase(); //membuat string barupesan=u; //menimpa referensi dengan referensi string baru

Tidak ada variabel yang memegang referensi ke string "halo". Oleh karena itu program tidak mungkin akan menggunakan string "halo". JavaScript engine mendeteksi dan merelokasi memori yang sebelumnya digunakan oleh string "halo"

JavaScript Operator

Sebagian besar operator JavaScript mirip persis dengan operator di Java dan C/C++. Berikut ini daftar operator pada JavaScript urut berdasarkan prioritas untuk dijalankan dari tinggi ke rendah.

Pr. As. Operator Tipe Operand Operasi yang dilakukan

15 Kr. . Object . identifier Mengakses properti atau atribut

Kr. [] array[integer] Mengakses elemen array

Kr. () function(argument) Menjalankan fungsi

Kn. new new function constructor

Membuat object baru

14 Kn. ++ variabel Pre atau post increment(unary)

Kn. -- variabel Pre atau post decrement(unary)

Kn. - number Minus (unary)

Kn. + number Plus (unary)

Kn. ~ integer Operasi bit complement(unary)

Kn. ! boolean Logical complement(unary)

Kn. delete variabel Menghapus properti atau variabel(unary)

Kn. typeof Semua tipe Mengembalikan string nama tipe data(unary)

Kn. void Semua tipe Mengembalikan nilai undefined(unary)

13 Kr. *,/,% number Kali, bagi, modulus

12 Kr. +,- number Penambahan, pengurangan

Kr. + string Menggabungkan string

11 Kr. << integer Menggeser bit kekiri

20

Kr. >> integer Menggeser bit kekanan dengan tanda.

Kr. >>> integer Menggeser bit kekanan diisi dengan bit 0.

10 Kr. <,<= Number atau string Kurang, kurang dari sama dengan

Kr. >,>= Number atau string Lebih, lebih dari sama dengan

Kr. instanceof Object instanceof constructor

Mengecek tipe object

Kr. in String in object Mengecek apakah suatu atribut/properti ada dalam object

9 Kr. == Semua tipe Tes kesamaan

Kr. != Semua tipe Tes perbedaan

Kr. === Semua tipe Tes identitas

Kr. !== Semua tipe Tes non-identitas

8 Kr. & integer Operasi bit AND

7 Kr. ^ integer Operasi bit XOR

6 Kr. | integer Operasi bit OR

5 Kr. && boolean Logika AND

4 Kr. || boolean Logika OR

3 Kn. ?: Boolean?semua tipe: semuatipe

Operator percabangan(ternary)

2 Kn. = variabel=semua tipe Assignment/pemberian nilai

Kn. *=,/=,%=,+=,-=,<<=,>>=,>>>=,&=,^=,|=

variabel(operator)semua tipe

Pemberian nilai dengan operasi

1 Kr. , Semua tipe Multiple evaluationKet:

Pr. = PrioritasAs. = Asosiatif

Semakin tinggi prioritas operator maka operator tersebut akan didahulukan dalam perhitungan. Untuk asosiatif operator ada dua macam yaitu kiri(Kr.) dan kanan(Kn.). Karena dimungkinkan dalam expresi muncul operator dengan prioritas yang sama, maka operator tersebut akan dievaluasi berbasarkan tipe asosiatif operator tersebut, contoh:

a=b=c=d=e=5;total= a + b + c + d +e;

21

sama seperti

a=(b=(c=(d=(e=5))));total= ((((a + b) + c) + d) +e);

Perintah/statement control

Statement control dalam JavaScript persis seperti C/C++ dan Java. Statement control yaitu peritah/code yang ada pada program JavaScript yang digunakan untuk mengendalikan alur eksekusi program.

Percabangan

Dalam percabangan terdapat pengetesan kondisi, jika kondisi terpenuhi kita bisa menspesifikasikan statement lain yang akan dijalankan, begitu juga jika kondisi tidak terpenuhi

if (kondisi){statement yang dijalankan ketika terpenuhi

}

if (kondisi){statement yang dijalankan ketika terpenuhi

}else{statement yang dijalankan ketika tidak terpenuhi

}

if (kondisi1){statement yang dijalankan ketika kondisi1 terpenuhi

}else if(kondisi2){statement yang dijalankan ketika kondisi2 terpenuhi

}else{statement yang dijalankan ketika kondisi1 dan kondisi2 tidak terpenuhi

}

switch(namaVariabel){case nilaiVariabel:

break;case nilaiVariabel:

break;case nilaiVariabel:

break;default:

statement yang dieksekusi ketia nilai namaVariabel tidak cocok dengan semua case}

22

PerulanganJavaScript menyediakan tiga macam perulangan yaitu while, do-while,

dan for.

var i=1;while(i<=10){

if(i%2==1)alert(i);

i++;}

i=1;do{

if(i%2==1)alert(i);

i++;}while(i<=10);

for(i=1;i<=10;i++){if(i%2==1)

alert(i);}

Perulangan for hampir sama dengan perulangan while, dan dapat ditulis sebagai berikut:

for(inisialisasi;konsisi;perubahan){statement;

}

inisialisasi;while(kondisi){

statement;perubahan;

}

Perulangan for dapat digunakan dengan dua cara. Selain cara diatas for dapat digunakan dengan syntax

for(variable in object){statement;

}

perulangan ini digunakan untuk melakukan traversal atribut/properti yang ada di object.

for (var prop in navigator) { document.write("nama: " + prop + "; nilai: " + navigator[prop]+ "<br>");

}

Untuk perulangan terdapat dua perintah control yaitu break dan continue.

23

Break digunakan untuk keluar dari perulangan dan continue digunakan untuk merestart perulangan berikutnya;

var i=0; while(i<10){

i++; if(i>5) break; if(i==3) continue; document.write("<h2>"+i+"</h2>");

}

kita dapat menambahkan label pada statement JavaScript dengan cara menambahkan nama label sebelum JavaScript statement.

var i=0; perulangan:while(i<10){ i++; for(var j=i;j>0;j--){ document.write(j+", "); if(j==4) break perulangan; } document.write("<hr>");

if(i>5) break; if(i==3) continue; document.write("<h2>"+i+"</h2>");

}

Exception handling

JavaScript menyediakan mekanisme exception handling menggunakan try/catch statement. JavaScript menyediakan object Error untuk merepresentasikan error. Object ini akan dilempar throw jika terjadi error. Ada beberapa turunan dari class Error yaitu EvalError,FileError, MediaError, URIError, TypeError, SyntaxError, dan sebagainya.

function factorial(x) { if (x < 0) throw new Error("x harus positif"); for(var f = 1; x > 1; f *= x, x--) /* tanpa body perulangan */ ; return f;

}

try { var n = prompt("Masukan bilangan bulat posifif", ""); var f = factorial(n); alert(n + "! = " + f); }catch (e) { alert(e); }

24

with Statementwith digunakan untuk merubah scope variabel yang kita gunakan,

contoh:

var dosen={ nama:"nama dosen", nip:123123123

} with(dosen){ alert(nama); nip=333; } alert(dosen['nip']);

25

Method dan atribut built-in

Object

Method/Atribut Penjelasan Contoh

Atribut: constructor Setiap object mempunyai properti/atribut constructor yang merefer ke function constructor yang dipakai

var tgl=new Date();

tgl.constructor==Date;//mengembalikan nilai true

__proto__ Properti yang berisi atribut, method warisan maupun built-in dari object

var tgl=new Date();tgl.__proto__;

toString(), toLocaleString()

Digunakan untuk mengkonversi object ke tipe data string

var x=[1,2,3];x.toString(); // mengembalikan nilai string 1,2,3

valueOf() Digunakan untuk mengkonversi object ke tipe data number

var tgl=new Date();tgl.valueOf() //mengembalikan nilai tgl dalam bentuk timestamp

hasOwnProperty() Melakukan pengecekan apakah object memunyai properti yang dimaksud.

var dosen={nip:1}dosen.hasOwnProperty("nip"); //true

propertyIsEnumerable() Melakukan pengecekan apakah properti yang dimaksud dapat di akses oleh perulangan for/in

var dosen={nip:1}dosen.propertyIsEnumerable("nip"); //truedosen.propertyIsEnumerable("valueOf")//false

isPrototypeOf() Untuk mengecek apakah object tersebut merupakan prototype dari object argument

var x={};Object.prototype.isPrototypeOf(x); //true;

Array

Method/Atribut Penjelasan Contoh

join() Menggabungkan semua elemen array menjadi string.

var x=[1,2,3];var s=x.join()//s == "1,2,3"var s=x.join(" ")// s =="1 2 3"

reverse() Membalik susunan array

var x=[1,2,3];x.reverse() // x ==[3,2,1]

sort() Menggurutkan elemen array

var y=[3,5,2,7,1,6,4];y.sort(); // y== [1, 2, 3, 4, 5, 6, 7]

concat() Menggabungkan array

var x=[1,2];var y=[3,4];x.concat(y); //mengembalikan nilai [1,2,3,4]

26

x.concat(6,7); //mengembalikan nilai [1,2,6,7]

slice() Mengambil sebagian elemen array

var a = [1,2,3,4,5];a.slice(0,3); // [1,2,3]a.slice(3); // [4,5]a.slice(1,-1); // [2,3,4]a.slice(-3,-2); // [3]

splice() Digunakan untuk menambah atau menghapus elemen array

var a = [1,2,3,4,5,6,7,8]; a.splice(4); // [5,6,7,8]; a sekarang bernilai [1,2,3,4] a.splice(1,2); // [2,3]; a sekarang bernilai [1,4] a.splice(1,1); // [4]; a sekarang bernilai [1]

a.splice(1,0,"a")// [], a sekarang bernilai [1,"a"]a.splice(0,1,"b")// [1], a sekarang bernilai ["b","a"]

push() pop()

Push digunakan untuk menambahkan data diakhir array, sedangkan pop digunakan untuk mengambil data diakhir array

var a = [];a.push(1,2); // 2, a:[1,2]a.pop(); //2, a:[1]a.push(4); //2, a:[1,4]a.pop(); //3 a:[1];a.pop(); //1 a:[];a.pop(); //undefined

unshift()shift()

Unshift digunakan untuk menambahkan data di awal array. Shift digunakan untuk mengambil data diawal array

var a = [];a.unshift(1,2); // 2, a:[1,2]a.shift(); //1, a:[2]a.unshift(4); //2, a:[4,2]a.shift(); //4 a:[2];a.shift(); //2 a:[];a.shift(); //undefined

27

Function

Method/Atribut Penjelasan Contoh

Atribut/properti: arguments

Berupa array dari parameter yang dikirim ke fungsi.

function jumlah(){ var jml=0; for(i=0;i<arguments.length;i++) jml+=arguments[i]; return jml; } alert(jumlah(2,3,4,1)); alert(jumlah(2,2,2));

length Jumlah parameter yang diharapkan

alert(Math.sin.length); // 1alert(Math.pow.length);//2

arguments.length Jumlah parameter yang dikirim oleh si pemanggil

-

arguments.callee Property yang merefer fungsi yang saat ini dipanggil

var nilai = function(x) { if (x <= 1) return 1; return x * arguments.callee(x-1); }(4); console.log(nilai);

prototype Property yang merefer ke prototype object yang sudah didefinisikan, digunakan untuk inheritance

var tgl=new Date(); tgl.__proto__==Date.prototype

call() Digunakan untuk mengeksekusi fungsi dengan konteks yang berbeda

//misalkan f=function , o=object dan m=properti sementara

f.call(o,1,2);

//sama seperti

o.m=f;o.m(1,2);delete o.m;

apply() Apply hampir sama dengan call, hanya parameter yang dipassing dalam bentuk array.

f.call(o,[1,2]);

28

Regular Expression

Regular Expression merupakan object yang merepresentasikan pola dari susunan karakter. JavaScript Regular Expression di representasikan dengan class RegExp. Class RegExp dan String menyediakan beberapa method yang dapat menggunakan regular expression untuk mencocokan pola, mencari dan mengganti teks.

RegExp object dapat dibuat dengan memanggil function constructor RexExp() atau menggunakan regular expression literal.

var pola=/s$/;//atauvar pola=new RegExp("s$");

Kita dapat dengan mudah membuat object RegExp, namun kita harus menspesifikasikan pola dari object tersebut. Pola pada RegExp terdiri dari rangkaian karakter. Kebanyakan karakter termasuk angka dan huruf merepresentasikan karakter yang harus cocok. Contoh regular expression /script/ cocok dengan semua string yang didalamnya terdapat substring 'script'. Regular expression juga memiliki karakter yang mempunyai arti tertentu. Pada contoh sebelumnya regular expresion /s$/ terdiri dari dua karakter yaitu s dan $. Karakter s cocok dengan karakter s, dan $ merupakan spesial metacharacter yang mempunyai arti cocok dengan akhir dari string.

Karakter LiteralKarakter Alphanumeric (huruf dan angka) cocok dengan nilainya sendiri.

JavaScript regex mensupport non-alphabetic melalui escape sequence(\).

Karakter Cocok

Alphanumeric Dengan nilainya sendiri

\t Tab (\u0009)

\n Baris baru (\u000A)

\v Tab vertikal (\u000B)

\f Form feed (\u000C)

\r Carriage Return(\u000D)

\xnn Karakter latin dengan nilai hexadesimal nn

\uXXXX Karakter Unicode dengan nilai hexadesimal XXXX

\cX Control karakter ^X, contoh \cJ untuk baris baru.

Kebanyakan tanda baca mempunyai arti tersendiri dalam regex. Yaitu ^ $ . * + ? = ! : | \ / ( ) [ ] { }

29

Untuk menggunakan tanda baca sebagai karakter literal anda harus menggunakan escape sequence(\). Tanda baca lain seperti tanda kutip dan @ tidak mempunyai arti tersendiri dan diperlakukan seperti alphanumeric.

Kelas karakterBeberapa karakter literal dapat digabung kedalam suatu kelas karakter

dengan menempatkannya kedalam kurung siku. Kelas karakter cocok jika suatu karakter cocok dengan salah satu karakter yang ada dalam kelas tersebut. Oleh karena itu regex /[123]/ cocok dengan karakter 1,2, atau 3. Negasi kelas karakter dapat didefinisikan dengan menambahkan tanda caret ^ sebagai karakter pertama kelas karakter. Contoh regex /[^123]/ cocok dengan karakter selain 1,2, dan 3. Kelas karakter dapat menggunakan tanda minus '-' untuk menspesifikasikan range karakter. Contoh regex /[A-Z]/ cocok dengan karakter huruf besar.

Kelas karakter Cocok

[...] Apapun karakter yang ada didalam kelas

[^...] Apapun karakter yang tidak ada didalam kelas

. Karakter apapun kecuali baris baru

\w Karakter ASCII word, sama dengan [a-zA-Z0-9_]

\W Karakter non ASCII word, sama dengan [^a-zA-Z0-9_]

\s Semua unicode whitespace karakter

\S Kebalikan dari \s

\d ASCII digit, sama dengan [0-9]

\D Bukan ASCII digit, sama dengan [^0-9]

[\b] Backspace literal

Pengulangan

Regex dapat menspesifikasikan jumlah karakter karakter yang cocok. Misalkan regex /\d\d/ cocok dengan angka dua digit, /\d\d\d\d/ cocok dengan angka empat digit. Pola regex /\d\d\d\d/ dapat ditulis dengan mudah jika kita menspesifikasikan pengulangan yang diharapkan, pola regex tersebut sama dengan pola /\d{4}/

Karakter Arti

{n,m} Cocok dengan karakter sebelumnya minimal n kali dan tidak lebih dari m kali

{n,} Cocok dengan karakter sebelumnya minimal n kali atau lebih

30

{n} Cocok dengan karakter sebelumnya tepat n kali

? Cocok 0 atau tepat 1 kali dengan karakter sebelumnya, sama dengan{0,1}

+ Cocok 1 kali atau lebih dengan karakter sebelumnya, sama dengan {1,}

* Cocok 0 kali atau lebih dengan karakter sebelumnya, sama dengan {0,}

Contoh:/\d{12}/ //cocok dengan digit berjumlah 12/\w{5}\d?/ //cocok dengan karakter word berjumlah 5 diikuti dengan 1

digit opsional

Alternatif, Pengelompokan, dan Referensi

Regular expression menyediakan mekanisme untuk menspesifikasikan alternatif, pengelompokan dan referensi ke sub ekspresi sebelumnya. Karakter | digunakan untuk memisahkan alternatif. Contoh, /ab|cd|ef/ cocok dengan string "ab" atau "cd" atau "ef". Alternatif dicari dengan urutan kari kiri ke kanan. Jika alternatif dibagian kiri cocok, alternatif selanjutnya dibiarkan. Seperti pola /a|ab/ hanya akan cocok untuk karakter a saja.

Tanda kurung '(' ')' mempunyai beberapa fungsi di regex. Salah satu fungsinya yaitu melakukan pengelompokan beberapa pola menjadi satu sub ekspresi sehingga pola-pola tersebut dapat dilihat sebagai satu kesatuan oleh karakter alternatif(|) maupun pengulangan(*,?,+). Sebagai contoh polah /java(script)?/ cocok dengan string "java" maupun "javascript"

Fungsi lain dari tanda kurung yaitu untuk mendefinisikan sub pola dari keseluruhan pola yang ada. Ketika regex cocok dengan string tertentu, kita dapat mengambil bagian tertentu dari string tersebut yang cocok dengan sub pola yang kita definisikan.

Sub pola dapat kita refer dengan menggunakan karakter \ diikuti dengan uruta sub pola dari kiri ke kanan dimulai dari 1. Contoh

/((institut)\steknologi)\s(telkom)?/

sub pola (telkom) dapat di refer menggunakan \3. Referensi ke pola sebelumnya tidak merefer ke sub pola tersebut

melainkan teks yang cocok dari pola tersebut. Oleh karena itu referensi dapat digunakan untuk membuat aturan pola karakter yang sama, perhatikan pola berikut.

31

/['"][^'"]*['"]/

pola ini cocok dengan string yang diapit oleh tanda ' atau ". Namun pola ini tidak mengharuskan tanda petik yang digunakan harus sama tunggal atau ganda. Kita dapat menggunakan referensi untuk melakukan aturan baru.

/(['"])[^'"]*\1/

referensi \1 akan bernilai sama dengan sub pola pertama yaitu (['"]).

PosisiAda beberapa karakter yang mempunyai posisi dalam suatu pola

Karakter Arti

^ Awal dari string, jika menggunakan mode multiline berarti awal baris

$ Akhir dari string, jika menggunakan mode multiline berarti akhir baris

\b Word boundary, cocok dengan batas kata yaitu posisi antara karakter \w dan \W atau antara karakter \w dengan awal atau akhir string. Namun jika digunakan dalam kelas karakter [\b] berarti backspace

\B Cocok dengan posisi yang bukan \b

(?=p) Positif lookahead assertion. Untuk pencocokan pola dengan terlebih dahulu mencocokan pola p.

(?!p) Negatif lookahead assertion. Kebalikan dari Positif.

Flag

Kita dapat mengatur mode pencarian dengan mengatur flag regular expression. Flag dispesifikasikan diluar karakter /. Contoh untuk mencari semua kemungkinan string yang cocok dan tidak memperhatikan kapitalisasi huruf.

/js/gi

JavaScript hanya mendukung 3 flag, yaitu i untuk pencarian case-insensitive, g untuk global-match mencari semua string yang cocok, m untuk multiline mode dimana ^ cocok dengan awal baris atau awal string dan $ cocok dengan akhir baris atau akhir string.

32

Penggunaan Regular Expression

String menyediakan empat fungsi yang menggunakan regular expression.

seach(regex) fungsi ini membutuhkan parameter dengan tipe regex, jika kita

mengirimkan parameter dengan tipe data selain regex. Tipe data tersebut akan dikonversi menjada regex dengan memanggil fungsi RegExp(). Fungsi search() tidak mensupport global flag.

"it telkom".seach(/telkom/i); //mengembalikan nilai 3

fungsi seach() mengembalikan nilai index pertama kali pola regex ditemukan. Mengembalikan nilai -1 jika tidak ditemukan.

replace(regex,string)fungsi replace digunakan untuk operasi penggantian substring. Substring

yang cocok dengan regex akan diganti dengan string.

var teks="pantang menyerah belajar javascript";teks.replace(/javascript/gi,"JavaScript"); //menghasilkan nilai "pantang menyerah belajar javascript" varibel teks tidak

berubah.

Dengan fungsi replace() anda dapat menggunakan referensi sub pola. Jika string terdapat karakter $ diikuti dengan angka, fungsi replace akan mengganti dua karakter tersebut dengan substring yang cocok dengan sub pola yang ditentukan.

var teks="dia berkata 'ya ya ya', mereka berkata 'tidak tidak tidak'";teks.replace(/'([^']*)'/g,"{$1}"); // hasil dia berkata {ya ya ya}, mereka

berkata {tidak tidak tidak}

match(regex)fungsi match merupakan fungsi yang paling umum digunakan untuk

pencocokan regex.

"1 itik 2 ayam 4 sapi".match(/\d+/g) // menghasilkan ["1","2","4"]

Jika regex tidak menggunakan global flag fungsi match() tidak akan mencari secara global dan mengembalikan sub pola yang cocok.

var nim="613081029";nim.match(/(\d{3})(\d{3})(\d{3})/); //menghasilkan ["613081029", "613", "081",

"029"]

split()fungsi split digunakan untuk memisahkan string menjadi beberapa

elemen array. Kita menspesifikasikan pola sebagai pemisah string. Contoh

"1, 2, 3, 4".split(",") // menghasilkan nilai ["1", " 2", " 3", " 4"]

33

"1, 2, 3, 4".split(/\s*,\s*/) // menghasilkan nilai ["1", "2", "3", "4"]

RegExp menyediakan dua fungsi untuk melakukan operasi pencarian regex yaitu exec() dan test().

exec(string)fungsi exec mengembalikan nilai berupa array baik menggunakan flag

global maupun tidak. Selain itu nilai yang dikembalikan mempunyai atribut index yaitu posisi dimana sub string cocok. Object RegExp mempunyai lastIndex yaitu posisi untuk memulai pencarian selanjutnya. Contoh

var pola = /itt/g; var teks = "itt berada di itt tepatnya"; var hasil; while((hasil = pola.exec(teks)) != null) { alert("Ditemukan '" + hasil[0] + "'" + " pada posisi " + hasil.index + ", pencarian selanjutnya dimulai dari index ke " + pola.lastIndex); }

test(string)fungsi test merupakan fungsi yang simple. Fungsi ini akan menembalikan

nilai true jika ditemukan dan false jika tidak.

var pola=/telkom/;pola.test("itt"); //falsepola.test("ittelkom"); //true

34

DOM (Document Object Model)

Client-side JavaScript memunyai beberapa object tambahan dan fungsionalitas tambahan. Salah satunya yaitu Document Object Model. DOM merupakan API yang mendefinisikan cara untuk mengakses object yang membuat document(dalam hal ini html).

Dengan DOM JavaScript dapat secara penuh mengatur content yang ditampilkan di web browser. Mulai dari mengatur warna, ukuran, menghapus, mengedit, menambahkan content sampai ke pengaturan event.

35

Day 2JavaScript Framework

(jQuery)

36