Pengantar JavaScript Andry Alamsyah alamsyah@tiscali.fr Semenitpun Internet tidak akan berhenti berkembang, demikian juga dengan bahasa pemrgraman berbasis web yang akan selalu berkembang, termasuk juga JavaScript, yang merupakan bahasa pengenalan awal sebelum kita benar benar serius terjun dan berkecimpung di dalam pengembangan aplikasi web. Pada artikel Pengantar JavaScript ini kita akan belajar dasar dasar pengenalan struktur bahasa dan cara kerja JavaScript dalam suatu dkumen HTML 1. Pengenalan Javascript Javascript diperkenalkan pertama kali leh Netscape pada tahun 1995. Pada awalnya bahasa ini dinamakan LiveScript yang berfungsi sebagai bahasa sederhana untuk brwser Netscape Navigatr 2. Pada masa itu bahasa ini banyak di kritik karena kurang aman, pengembangannya yang terkesan buru buru dan tidak ada pesan kesalahan yang di tampilkan setiap kali kita membuat kesalahan pada saat menyusun suatu prgram. Kemudian sejalan dengan sedang giatnya kerjasama antara Netscape dan Sun (pengembang bahasa pemrgraman Java ) pada masa itu, maka Netscape memberikan nama JavaScript kepada bahasa tersebut pada tanggal 4 desember 1995. Pada saat yang bersamaan Micrsft sendiri mencba untuk mengadaptasikan teknlgi ini yang mereka sebut sebagai Jscript di brwser Internet Explrer 3. Javascript adalah bahasa yang berbentuk kumpulan skrip yang pada fungsinya berjalan pada suatu dkumen HTML, sepanjang sejarah internet bahasa ini adalah bahasa skrip pertama untuk web. Bahasa ini adalah bahasa pemrgraman untuk memberikan kemampuan tambahan terhadap bahasa HTML dengan mengijinkan pengeksekusian perintah perintah di sisi user, yang artinya di sisi brwser bukan di sisi server web. Javascript bergantung kepada brwser(navigatr) yang memanggil halaman web yang berisi skrip skrip dari Javascript dan tentu saja terselip di dalam dkumen HTML. Javascript juga tidak memerlukan kmpilatr atau penterjemah khusus untuk menjalankannya (pada kenyataannya kmpilatr Javascript sendiri sudah termasuk di dalam brwser tersebut). Lain halnya dengan bahasa Java (dengan mana JavaScript selalu di banding bandingkan) yang memerlukan kmpilatr khusus untuk menterjemahkannya di sisi user/klien. Tabel daftar navigatr dan versi dari Javascript : Versi Javascript Brwser Javascript 1.2 Netscape Navigatr 4.0/4.05, Internet Explrer 4.0 Javascript 1.1 Netscape Navigatr 3.0 Javascript 1.0 Netscape Navigatr 2.0, Internet Explrer 3.0 Javascript 1.5 Netscape Navigatr 6.0 Javascript 1.3 Netscape Navigatr 4.06, Internet Explrer 5.0 Javascript 1.4 Netscape Navigatr 6.0, Internet Explrer 5.5 1
Janganlah anda bingung dengan perbandingan antara Javascript dan Java, karena berdasarkan pengalaman yang saya perleh baik dari milist milist maupun frum frum banyak yang belum bisa menemukan perbedaan jelas antara keduanya, leh karena itu saya akan jelaskan berikut ini. Javascript merupakan suatu bahasa yang perkembangannya lambat di bandingkan dengan Java yang berkembang sangat cepat. Di Javascript kita tidak mungkin menyembunyikan kde skrip yang kita tulis, kde langsung di tulis di dalam dkumen HTML dan sangat mudah terlihat, sedangkan di Java, kde sudah berbentuk setengah terkmpilasi (dalam bentuk applet) dan tidak mungkin terlihat dari dalam dkumen HTML, satu mesin virtual di sisi user yang bertanggung jawab untuk menterjemahkan prgram di dalam applet tersebut setiap kali halaman HTML yang memuat applet tersebut dipanggil leh brwser. Dibandingkan dengan applet java yang cukup lambat dibuka leh brwser, bisa kita katakan bahwa Javascript cukup cepat di panggil(di lad) leh navigatr. JavaScript sendiri merupakan bahasa yang mudah dipahami, dalam artian diperlukan skill nvice atau dasar untuk mengerti bahasa ini, jika anda sudah terbiasa dan mengenal knsep bahasa pemrgraman visual, maupun Java ataupun C, akan sangat mudah untuk memahami knsep Javascript. Berikut ini satu tabel yang berisi beberapa perbandingan mendasar antara Java dan JavaScript : JavaScript Bahasa yang diintepretasikan langsung leh brwser Kde terintegrasi dengan HTML Bahasa dengan karakteristik yang terbatas Hubungan dinamis, referensi dari byek diverifikasi pada saat lading. Kde prgram bisa di akses Java Bahasa yang setengah terkmpilasi dan memerlukan Java Virtual Machine untuk menterjemahkannya Kde(applet) terpisah dari dkumen HTML, dipanggil pada saat membuka dkumen HTML Bahasa dengan karakteristik yang luas (pendeklarasian jenis variabel) Hubungan statis, byek harus ada pada saat prgram di lading (di kmpilasi) Kde prgram tersembunyi JavaScript adalah bahasa yang case sensitive artinya membedakan penamaan variabel dan fungsi yang menggunakan huruf besar dan huruf kecil, cnth variabel atau fungsi dengan nama TEST berbeda dengan variabel dengan nama test. Dan yang terakhir seperti bahasa Java ataupun C, setiap instruksi diakhiri dengan karakter titik kma (;). 1.1 Bentuk skrip dari Javascript Skrip dari JavaScript terletak di dalam dkumen HTML. Kde tersebut tidak akan terlihat dari dalam jendela navigatr anda, karena diantara tag (kalau anda mengerti HTML pasti tahu dengan istilah ini) tertentu yang memerintahkan navigatr untuk memperlakukan bahwa skrip tersebut adalah skrip dari JavaScript. Cnth dari skrip yang menunjukkan bahwa skrip tersebut adalah skrip dari JavaScript adalah sebagai berikut : <SCRIPT language="javascript"> letakkan script anda disini </SCRIPT> 2
1.2 Memberikan kmentar (dan membuat skrip tidak tereksekusi) Sering kali pada navigatr versi lama, sebelum adanya JavaScript, tidak mengenal tag tersebut dan akan melewatkannya untuk di baca. Cnth kde diatas tidak akan terlihat di navigatr kita, akan tetapi dia akan menampilkan jendela peringatan (berupa ktak dialg) karena skrip tersebut tidak lengkap dan akan merusak dkumen HTML yang sudah kita buat dengan bagusnya. Untuk itu maka kita tambahkan tag kmentar agar supaya skripnya tidak dibaca sebagai skrip, akan tetapi di baca sebagai kmentar dan tidak akan dieksekusi sebagai prgram. Cnthnya adalah sebagai berikut : <SCRIPT language="javascript"> <!-- letakkan script anda disini // --> </SCRIPT> Seperti dalam banyak bahasa pemrgraman lainnya, sangat dianjurkan untuk menambahkan kmentar kmentar di dalam skrip atau kde prgram yang kita bikin. kegunaannya antara lain adalah : Mengingatkan kita akan bagian bagian khusus di dalam skrip tersebut, jika kita ingin merubah sesuatu di dalamnya, mungkin beberapa bulan kemudian dan kita sudah lupa dengan detail dan alur dari skrip tersebut. Membuat rang yang tidak mengerti skrip anda, menjadi mengerti dengan petunjuk petunjuk yang anda bikin melalui kmentar kmentar, kecuali anda tidak mau mensharing prgram yang anda miliki.. Untuk menulis kmentar di JavaScript, kita bisa menggunakan cara yang sama dengan aturan yang ada di bahasa C/C++ ataupun Java. Untuk menulis kmentar dalam satu baris kita gunakan karakter dbel slash. // semua karakter di belakang // tidak akan di eksekusi Untuk menulis kmentar yang terdiri dari beberapa baris kita gunakan karakter /* dan */ /* Semua baris antara 2 tanda tersebut tidak akan di eksekusi leh kmpilatr */ Perhatikan perbedaan tag kmentar untuk bahasa HTML (diantaranya untuk menyembunyikan skrip dari beberapa brwser versi lama) dan tag kmentar JavaScript (untuk keperluan dkumentasi skrip). 1.3 Cnth prgram JavaScript Pada cnth berikut ini adalah cnth skrip JavaScript didalam suatu dkumen HTML, disini kita akan membuat satu prgram untuk menampilkan satu ktak dialg (dijelaskan lebih lanjut di bab 10) pada saat kita membuka dkumen HTML <HTML> <HEAD> <TITLE>Cnth Prgram Javascript</TITLE> 3
</HEAD> <BODY> <SCRIPT language="javascript"> <!-- alert("hall!"); // --> </SCRIPT> </BODY> </HTML> 1.4 Meletakkan JavaScript dalam dkumen HTML Ada beberapa cara untuk meletakkan kde JavaScript di dalam dkumen/halaman HTML Menggunakan tag <SCRIPT> Dengan menggunakan cara ini, pada saat mengakses satu halaman HTML kita harus menunggu sampai prses pemanggilan halaman itu selesai sepenuhnya, sebelum kita menjalankan prgram JavaScript tersebut. Prses eksekusi kde HTML untuk menampilkan satu halaman dilakukan dari atas ke bawah, semakin banyak user yang mengakses halaman ini (dan seringnya gak sabar...) dapat menganggu prses pemanggilan tersebut. Pada kasus dimana pemanggilan suatu fungsi JavaScript terjadi sebelum prses pemanggilan kde JavaScript selesai dilakukan leh navigatr, maka akan timbul pesan errr. Oleh karena itu untuk menghindari kejadian diatas, maka pada umumnya kita meletakkan tag <SCRIPT> diantara bagian kepala dari dkumen HTML, yaitu bagian antara tag <HEAD> dan </HEAD>. Pemanggilan fungsi JavaScript (atau disebut juga event) diletakkan di bagian badan dkumen HTML atau bisa kita sebut diantara tag <BODY> dan </BODY>. Keterangan tambahan di dalam tag <SCRIPT> menunjukkan jenis bahasa yang digunakan dan versinya, cnthnya JavaScript, JavaScript1.1, JavaScript1.2 untuk bahasa JavaScript atau bahasa lainnya, cnthnya VBScript. Jika kita ingin menggunakan beberapa versi JavaScript di dalam satu halaman HTML (untuk menyesuaikan dengan kmpatibilitas navigatr), maka kita hanya perlu meletakkan kde kde JavaScript tersebut (berdasarkan versinya) kedalam beberapa tag <SCRIPT> dengan mencantumkan versi JavaScriptnya. Menggunakan file ekstern Cara berikutnya adalah menuliskan kde prgram JavaScript dalam suatu file teks dan kemudian file teks yang berisi kde JavaScript di panggil dari dalam dkumen HTML (khusus Netscape mulai versi 3 keatas). Kde yang kita sisipkan kedalam dkumen HTML adalah sebagai berikut : <SCRIPT LANGUAGE="Javascript" SRC="url/file.js"> </SCRIPT> 4
dimana url/file.js adalah adalah lkasi dan nama file yang berisi kde JavaScript, jika perintah tambahan SRC tidak disertakan maka tag Script akan mencari kde yang terletak di dalam tag Script. Melalui event tertentu Event adalah sebutan dari satu actin yang dilakukan leh user, cnthnya seperti klik tmbl muse, pembahasan lebih lanjut ada di bab 5. Kdenya dapat di tulis sebagai berikut : <tag eventhandler="kde Javascript yang akan dimasukkan"> dimana eventhandler adalah nama dari event tersebut. 2. Obyek 2.1 Tentang Obyek Untuk selanjutnya mari kita masuk kebagian berikutnya, yaitu bagian yang berbicara tentang byek, tujuan dari bagian ini tidaklah muluk muluk sampai ke pengetahuan tentang pemrgraman rientasi byek akan tetapi sekedar pengenalan tentang byek, dan memberikan ide kepada anda apakah yang disebut byek itu?,yang merupakan knsep penting di dalam pembuatan kde JavaScript. JavaScript memperlakukan elemen elemen yang tampil di jendela navigatr kita sebagai suatu byek, yang artinya adalah elemen yang : Diklasifikasikan berdasarkan hirarki/tingkatan khusus sehingga kita bisa mengetahui dimana letak/lkasi byek itu sebenernya. Dimana kita mengassiasikan dengan kndisi atau sifat sifat khusus (prperti) Pengertian diatas mungkin sedikit membingungkan bagi anda, tapi marilah kita lihat cnth berikut ini untuk memperjelas. Misal kita bayangkan ada satu phn yang terletak di dalam satu kebun, dimana phn itu mempunyai banyak dahan, dan di salah satu dahannya terdapat sarang burung. Mari kita lihat hirarkinya sebagai berikut. Kebun Phn Dahan Batang Akar Klam Sangkar Ternak Ayam Bebek Gudang Pintu Daun Sarang Burung Panjang = 20 Warna = kuning Tinggi = 4 5
Atap Jendela Sarang Burung Panjang =15 Warna = cklat Tinggi = 6 Sarang burung yang berada di atas phn dapat di tuliskan sebagai berikut : Kebun.Phn.Dahan.Sarang Burung Sedangkan Sarang burung yang terletak diatas atap gudang, kita tuliskan sebagai berikut : Kebun.Gudang.Atap.Sarang Burung Bayangkan sekarang kita ingin mengecat atau mengganti warna sarang burung yang terletak di atas phn, maka kita cukup mengetik perintah berikut ini Kebun.Phn.Dahan.Sarang Burung.warna=hijau Nah begitulah ilustrasi tentang bagaimana kita memperlakukan byek di dalam JavaScript, perbedaanya adalah bukan kebun sebagai bentuk byek kita, akan tetapi navigatr kitalah sebagai byek utamanya. 2.2 Obyek dari navigatr (brwser) JavaScript membagi satu halaman Navigatr dalam berbagai byek byek, dengan tujuan untuk memudahkan kita untuk mengakses salah satu dari mereka dan memanipulasinya dengan cara merubah sifat/kndisi (prperti) mereka. Kita mulai dari byek yang paling besar diantara semuanya (yang berisi semua byek lainnya), kemudian kita turun berdasarkan tingkatan atau hirarkinya sampai kepada byek yang kita inginkan. Obyek paling besar adalah byek jendela (windw) dari navigatr. Di dalam byek jendela, ada satu byek yang ditampilkan dalam bentuk sebuah halaman, kita sebut byek dkumen atau dcument Halaman itu berisi banyak byek seperti, frmula, text, image dan lain lainya.. Untuk mengakses satu byek, kita harus mengakses terlebih dahulu byek yang paling besar( dalam hal ini byek windw ). ambil sebagai cnth satu byek (yang bernama checkbx) dan satu textfield berikut ini Frm untuk untuk cnth ini kita beri nama frm1 tujuannya adalah utuk membedakan dengan frm frm lainnya di dalam satu dkumen, dan dituliskan dalam kde berikut ini : windw.dcument.frms["frm1"] Tmbl checkbx, dan kita beri nama checkbx1 dituliskan dalam bentuk berikut ini : windw.dcument.frms["frm1"].checkbx1 TextField disini kita beri nama tetxfield1 dan dituliskan dalam bentuk berikut ini : windw.dcument.frms["frm1"].textfield1 6
Tmbl checkbx mempunyai nilai kndisi(prperti) checked, yang akan memberikan nilai 1 jika tmbl itu di pilih (checked), dan nilai 0 pada kasus sebaliknya. Sedangkan kde dari frm frm1 di dalam kde HTML adalah sebagai berikut : <frm name="frm1"> <br><input type="checkbx" name="check_bx" nclick="mdiffield();return true;"> <br><input type='text' name='text_field' value=test javascript' size='24'></frm> dan fungsi JavaScript yang berhubungan dengan checkbx tersebut adalah.. <script language="javascript"> <!-- functin MdifField() { if (dcument.frms["frm1"].check_bx.checked) {dcument.frms["frm1"].text_field.value="checkbx dipilih" else {dcument.frms["frm1"].text_field.value="checkbx tidak dipilih" // --> </script> 2.3 Obyek standart JavaScript Selain byek navigatr di subbab 2.2, kita juga mengenal byek standart dari JavaScript. Obyek byek ini distandarisasikan leh assiasi ECMA (Eurpean Cmputer Manufacturer Assciatin). Berikut ini adalah daftar byek standart JavaScript Nama Obyek Array Blean Date Functin Math Number RegExp String Keterangan byek array memungkinkan kita untuk membuat tabel. dia mempunyai berbagai metda untuk menambahkan, menghapus, atau juga mengambil elemen elemen dari suatu tabel dan juga mengurutkan elemen elemen tersebut. byek blean memungkinkan kita untuk membuat nilai blean, dalam artian elemen yang mempunyai dua kndisi : benar atau salah byek data memungkinkan kita untuk membuat dan memanipulasi tanggal dan juga durasi waktu. byek functin memungkinkan kita untuk membuat fungsi yang sesuai dengan kebutuhan (persnalized) byek math memungkinkan kita untuk memanipulasi fungsi fungsi matematika, seperti cnthnya fungsi trignmetri byek number memungkinkan kita untuk membuat perasi perasi dasar terhadap bilangan byek regexp memungkinkan kita untuk membuat satu ekspresi umum(regular expressin). ekspressi ini berguna untuk melakukan perasi perasi yang lebih canggih terhadap variabel jenis String byek string menyediakan banyak jenis metda yang memungkinkan kita untuk memanipulasi variabel jenis String 2.3.1 byek Array 7
byek array adalah satu byek yang memungkinkan kita untuk membuat dan memanipulasi tabel, berikut ini adalah sintaks untuk membuat tabel : var x = new Array(elemen1[, elemen2,...]); jika tidak ada elemen yang disebutkan dalam parameter, tabel itu akan menjadi tabel ksng pada saat pembuatannya, sebaliknya jika elemen diisi, maka isi tabel akan di inisialisasi leh nilai dari elemen tersebut. Sebagai tambahan byek array mempunyai dua karakteristik prperti yaitu prperti input dan length. Berikut ini adalah tabel daftar beberapa metda standart dari byek array Metda cncat(tab1,tab2[,tab3, ]) jin(table) atau Table.jin() pp(table) atau Table.pp() Table.push(nilai1[,nilai2,. ]) Table.reverse() Table.shift() Table.slice() Table.splice() Table.srt() Table.unshift(nilai1[,nilai2, ]) Table.tString() Table.unshift() Table.valueOf() Keterangan memungkinkan kita untuk menambahkan (cncatenate) banyak tabel, dalam artian membuat satu tabel dari beberapa tabel yang berbeda yang dilewatkan sebagai parameter metda. mengirimkan satu variabel string yang berisi semua elemen dari tabel menghapus elemen terakhir dari tabel. menambahkan satu atau beberapa elemen ke tabel membalikkan (inverse) urutan elemen di tabel menghapus elemen pertama dari tabel mengirimkan satu tabel yang berisi sebagian elemen dari tabel utama menambahkan dan mengurangi elemen elemen tabel mengurutkan elemen elemen tabel mengirimkan kembali kde sumber yang memungkinkan kita untuk membuat byek array. mengirimkan kembali variabel string yang berhubungan dengan instruksi pembuatan byek array menambahkan kembali satu atau beberapa elemen pada bagian awal dari tabel mengembalikan nilai dari byek array dimana byek array itu yang jadi referensi dari tabel tersebut. 2.3.2 byek blean byek blean adalah byek standart dari JavaScript yang memungkinkan kita untuk memanipulasi nilai nilai jenis blean. Berikut ini adalah sintaks yang digunakan untuk membuat byek belan : var x = new Blean(parameter) parameter bisa berupa bisa berupa satu nilai (True atau False) atau bisa juga satu ekspresi, yang mana ekspressi akan di perhitungkan sebagai nilai blean. Jika tidak ada nilai parameter yang dilewatkan atau nilai 0 atau string ksng atau null atau undefined atau juga NaN(Nt a Number), nilai blean akan diinisialisaikan ke False. Sebaliknya byek blean akan mempunyai nilai True 8
Berikut ini adalah tabel daftar beberapa metda standart dari byek blean Metda tsurce() tstring() valueof() Keterangan Metda ini mengirimkan kembali kde sumber yang memungkinkan kita untuk membuat byek blean Metda ini mengirimkan kembali string yang berhubungan dengan instruksi untuk membuat byek blean Metda ini mengembalikan nilai asal dari byek blean 2.3.3 byek date byek date memungkinkan kita untuk bekerja dengan semua variabel yang berhubungan dengan penanggalan dan juga manajemen waktu (durasi waktu). Sintaks sintaks untuk membuat byek date adalah berikut ini : Nama_dari_byek = new Date() sintaks ini memungkinkan kita untuk menyimpan tanggal dan jam saat ini. Nama_dari_byek = new Date( hari, bulan tanggal tahun jam:menit:detik ) parameter berbentuk string dengan batas batas pemisah sepeti frmat diatas. Nama_dari_byek = new Date(tahun, bulan, hari) parameter adalah 3 integer yang dipisahkan leh tanda kma Nama_dari_byek = new Date(tahun, bulan, hari, jam, menit, detik[,perseribudetik]) parameter adalah 6 integer yang dipisahkan leh tanda kma JavaScript menyimpan tanggal dalam bentuk string yang berisi hari, bulan, tahun, jam, menit, dan detik. Meskipun demikian sangat sulit bagi kita untuk bisa mengakses satu elemen waktu diatas dengan menggunakan byek string (sub bab 2.3.5), karena setiap elemen mempunyai ukuran yang berbeda beda.. Sebaliknya byek date memungkinkan kita untuk mengakses dan memdifikasi satu elemen tersebut. Berikut ini adalah tabel beberapa metda standart dari byek date Metda Keterangan Jenis nilai hasil getdate() getday() getfullyear() gethurs() getmillisecnds() untuk memperleh angka yang berkrespndensi dengan nmer hari dalam satu bulan. untuk memperleh angka yang berkrespndensi dengan nmer hari dalam satu minggunya untuk memperleh angka yang berkrespndensi dengan tahun dalam 4 bilangan penuh untuk memperleh angka yang berkrespndensi dengan satuan jam untuk memperleh angka yang berkrespndesi dengan hasilnya adalah satu integer dengan nilai antara 1 s/d 31 yang berkrespndensi dengan nmer hari dalam satu bulan hasil adalah integer yang berhubungan dengan nmer hari dalam seminggu 0 : minggu 1 : senin hasilnya adalah integer yang berhubungan dengan tahun yang ditanyakan dengan frmat XXXX hasilnya adalah integer dengan nilai antara 0 sampai 23 yang berhubungan dengan byek date byek hasil adalah integer antara 0 sampai 999 yang 9
getminutes() getmnth() getsecnds() gettime() satuan perseribu detik untuk memperleh angka yang berkrespndensi dengan satuan menit untuk memperleh angka yang berkrespndesi dengan nmer bulan dalam setahun untuk memperleh angka yang berkrespndensi dengan satuan detik untuk memperleh jumlah detik sejal tanggal 1 januari 1970 gettimezneoffset() untuk memperleh perbedaan waktu, antara waktu lkal dan GMT getyear() tgmtstring() tlcalstring() setdate(x) setday(x) untuk memperleh nilai tahun dalam 2 bilangan dari byek date untuk mengknversi satu tanggal menjadi satu string dengan frmat GMT untuk mengknversi satu tanggal menjadi satu string dengan frmat lcal untuk memberikan angka yang berkrespndesi dengan nmer hari dalam satu bulan untuk memberikan angka yang berkrespndensi dengan nmer hari dalam satu minggu berkrespndensi dengan perseribudetik dari byek yang dilewatkan di parameter. byek hasil adalah integer antara 0 sampai 59 yang berkrespndensi dengan menit dari byek yang dilewatkan di parameter hasil adalah integer yang berhubungan dengan nmer bulan dalam setahun 0 : januari 1 : februari.. hasil adalah integer antara 0 sampai 59 yang berkrespndensi dengan detik dari byek yang dilewatkan di parameter hasilnya adalah integer, metda ini sangat berguna untuk melewatkan satu tanggal ke tanggal yang lain, atau juga menambahkan dua tanggal, etc hasilnya adalah integer yang berkrespndensi berapa menit perbedaan dengan GMT hasilnya adalah integer yang berkresndesni dengan tahun XX hasilnya adalah string dengan frmat Wed, 3 dec 2003: 15:15:20 GMT hasilnya adalah string dengan frmat tergantung dari sistem lcal sebagai cnth : 3/12/03 15:15:20 parameter adalah integer antara 1 dan 31 yang berkrespndensi dengan nmer hari dalam satu bulan parameter adalah integer yang berkrespndensi dengan nmer hari dalam seminggu: 0 : minggu 1 : senin sethurs(x) untuk memberikan nilai jam parameter adalah integer antara 0 sampai 23 yang berkrespndensi dengan angka jam setmnth(x) untuk memberikan angka yang berkrespndesi dengan nmer bulan parameter adalah integer antara 0 sampai 11 yang berkrespndensi dengan nmer bulan 0 : januari 1 : februari. 10
settime(x) untuk menentukan tanggal parameter adalah integer yang berkrespndesi dengan jumlah detik sejak tanggal 1 januari 1970 2.3.4 byek math byek math adalah suatu byek yang mempunyai banyak metda dan prperti untuk memanipulasi bilangan bilangan dan juga fungsi fungsi matematika. Apapaun metda atau prperti yang digunakan kita harus memulainya dengan kata Math, cnthnya adalah sebagai berikut : Math.cs(1); Berikut ini adalah tabel beberapa metda standart dari byek math : Metda Keterangan Cnth abs() ceil() flr() rund() mengembalikan nilai abslut dari satu bilangan, kalau bilangan psitif dia akan mengirimkan kembali bilangan itu, sebaliknya kalau bilangan negatif, dia akan mengirimkan bentuk psitifnya mengembalikan nilai integer terkecil yang lebih besar sama dengan nilai parameter yang diberikan mengembalikan nilai integer terbesar yang lebih kecil sama dengan nilai parameter yang diberikan membulatkan bilangan di parameter ke integer yang terdekat, jika bilangan tersebut 0,5 maka akan dibulatkan keatas x = Math.abs(3.17); //hasilnya x = 3.17 x = Math.abs(-3.17); //hasilnya x = 3.17 x = Math.ceil(6.01); //hasilnya x = 7 x = Math.ceil(3.99); //hasilnya x = 4 x = Math.flr(6.01); //hasilnya x = 6 x = Math.flr(3.99); //hasilnya x = 3 x = Math.rund(6.01); //hasilnya x = 6 x = Math.rund(3.80); //hasilnya x = 4 max(bil1,bil2) min(bil1,bil2) mengembalikan nilai terbesar diantara dua parameter yang dibandingkan mengembalikan nilai terkecil diantara dua parameter yang di bandingkan x = Math.rund(3.50); //hasilnya x = 4 var x = Math.max(6,7.25); //hasilnya x = 7.25 var x = Math.max(-8.21,- 3.65); //hasilnya x = -3.65 x = Math.min(6,7.25); //hasilnya x = 6 x = Math.min(-8.21,-3.65); //hasilnya x = -8.21 11
pw(bil1,bil2) randm() sqrt(bil) mengembalikan nilai hasil parameter satu pangkat parameter dua Mengembalikan nilai acak antara 0 sampai 1, nilai di generate berdasarkan sistem jam dari kmputer Mengembalikan akar dari bilangan yang dilewatkan sebagai parameter x = Math.pw(3,3); //hasilnya x = 27 x = Math.pw(9,0.5); //hasilnya x = 3 x = Math.randm(); //hasilnya x = 0.6489534931546957 x = Math.sqrt(9); //hasilnya x = 3 2.3.5 byek string byek string adalah satu byek yang berisi beberapa metda dan prperti untuk memanipulasi data jenis string. Obyek string sendiri hanya mempunyai satu prperti yaitu prperti length untuk memperleh panjang dari variabel data string. Sintaks dari prperti ini adalah sebagai berikut : x = nama_variabel_string.length; x = ('sembarang teks').length; metda dari byek string memungkinkan kita untuk memperleh satu ptngan/bagian dari data string dan juga memdifikasinya. Berikut ini adalah tabel beberapa metda standard dari byek string : Metda string.big() string.small() string.blink() string.bld() string.charat(psisi) string.charcdeat(psisi) cncat(teks1,teks2, ) string.fntclr(warna) string.fntsize(ukuran) string.indexof(substring, psisi) string.lastindexof(substring, psisi) string.italics() Keterangan menaikkan ukuran huruf satu pint menurunkan ukuran huruf satu pint mentransfrmasi teks menjadi teks berkedip kedip memtransfrmasi huruf di teks teks menjadi huruf tebal (tag <b>) mengembalikan karakter di psisi ke parameter psisi mengembalikan kde Unicde di psisi ke parameter psisi menyambungkan teks teks yang dimasukkan sebagai parameter dari ujung ke ujung memdifikasi warna dari teks (parameter warna, bisa berupa teks ataupun bilangan heksadesimal) memdifikasi ukuran dari teks (parameter ukuran dalam bentuk integer) mengembalikan psisi dari substring (huruf atau kumpulan dari huruf huruf dari satu string), dengan pencarian dari arah kiri ke kanan, dimulai dari lkasi parameter psisi. fungsinya sama dengan metda indexof akan tetapi pencarian dari arah kanan ke kiri mentransfrmasi huruf di teks menjadi huruf miring (tag <i>) string.link(url) mentransfrmasikan teks menjadi hiperteks (tag <a href>) 12
string.strike() string.sub() string.sup() string.substr(psisi, panjang) string.substring(psisi1, psisi2) string.tlwercase() string.tuppercase() mentransfrmasi huruf di teks menjadi huruf dicret teks (tag <strike>) mentrasfrmasikan huruf di teks menjadi huruf teks (tag <sub>) mentrasfrmasikan huruf di teks menjadi huruf teks (tag <sup>) mengembalikan substring (beberapa huruf atau kata) yang dimulai dari parameter psisi ke berapa dan sepanjang parameter panjang unit mengembalikan substring (beberapa huruf atau kata) yang terletak diantara parameter psisi1 dan parameter psisi2 mentransfrmasi semua huruf dalam teks menjadi huruf kecil mentransfrmasi semua huruf dalam teks menjadi huruf besar Berikut ini adalah bebrapa cnth penggunaan metda byek string : var test= 'ilmu kmputer' ; var hasil = charat(test,6); //hasilnya 'k' var hasil = ("ilmu kmputer").charat(7); //hasilnya '' var hasil = charat(test,-1); //hasilnya '' var hasil = test.substring(1,5); //hasilnya 'lmu k' var hasil = test.tuppercase(); //hasilnya 'ILMU KOMPUTER' 3. Variable 3.1 Knsep Variabel Variable adalah suatu byek yang berisi data data, yang mana dapat di mdifikasi selama pengeksekusian prgram. Di JavaScript kita bisa memberikan nama variabel sepanjang yang kita suka, akan tetapi harus memenuhi kriteria berikut ini. Nama variabel harus dimulai leh satu huruf (huruf besar maupun huruf kecil) atau satu karakter ''_''. Nama variabel bisa terdiri dari huruf huruf, angka angka atau karakter _ dan & (spasi ksng tidak diperblehkan). Nama variabel tidak bleh memakai nama nama berikut ini (reserved leh prgram) abstract blean break byte case catch char class cnst cntinue debugger default delete d duble else exprt extends false final finally flat fr functin gt if, implements, imprt, in, infinity, instancef, int, interface label, lng 13
native, new, null package, private, prtected, public return shrt, static, super, switch, synchrnized this, thrw, thrws, transient, true, try, typef var, vid, vlatile while, with berikut ini adalah cnth pemberian nama variabel yang benar dan tidak benar : Nama variabel yang benar Nama variabel yang tidak benar Alasan Variabel Nama Dari Variabel Ada spasi ksng Nama_Dari_Variabel 123Nama_Dari_Variabel Dimulai dgn angka nama_dari_variabel andry@yah.cm Karakter @ nama_dari_variabel_123 Nama-Dari-Variabel Karakter - _707 transient Reserved wrd di JavaScript kita menggunakan sistem case sensitive yang artinya membedakan nama variabel dengan huruf besar dan huruf kecil, leh karena itu biasakanlah memberikan nama variabel dengan aturan yang sama, huruf besar semua atau huruf kecil semua (disarankan menggunakan selalu huruf kecil) 3.2 Mendeklarasikan Variabel Penulisan variabel JavaScript sangatlah fleksibel, dan tidaklah terlalu rumit dan ketat, sehingga kita tidaklah terlalu sering menerima pesan errr pada saat menjalankan prgram. Sebagai cnth deklarasi variabel di JavaScript dapat kita lakukan dengan dua cara : eksplisit : dengan menuliskan kata kunci var kemudian diikuti dengan nama variabel dan nilai dari variabel : var test = hal implisit : dengan menuliskan secara langsung nama dari variabel dan diikuti nilai dari variabel : test = hal navigatr secara tmatis akan memperlakukan pernyataan itu sebagai deklarasi dari sebuah variabel. Pada navigatr versi lama mungkin terjadi kasus di mana navigatr tidak mengenali pendeklarasian variabel secara implisit, maka disarankan untuk menggunakan cara eksplist dalam menulis prgram JavaScript. Berikut ini adalah cnth pendeklarasian variabel dengan kedua cara tersebut. <SCRIPT language="javascript"> <!-- 14
var VariabelKu; var VariabelKu2 = 3; VariabelKu = 2; dcument.write(variabelku*variabelku2); // --> </SCRIPT> 3.3 Peletakan variabel (glbal atau lkal) berdasarkan tempat dimana kita mendekalarasikan suatu variabel, variabel bisa diakses dari seluruh bagian prgram atau hanya di dalam bagian tertentu dari prgram. Pada saat suatu variabel di deklarasikan tanpa menggunakan kata kunci var, atau bisa kita sebut dengan cara implisit, maka variabel itu bisa di akses dari seluruh bagian prgram(semua fungsi di dalam prgram dapat memanggil dan memakai variabel ini), dan kita sebut variabel ini sebagai variabel glbal. Sebaliknya jika kita mendeklarasikan dengan cara eksplisit suatu variabel JavaScript (pendeklarasian variabel dengan menggunakan kata kunci var ), maka kemungkinan pengaksesan variabel tersebut bergantung lkasi dimana dia dideklarasikan : Jika dia dideklarasikan dibagian awal dari skrip prgram, yang artinya sebelum pendeklarasian semua fungsi, maka semua fungsi di dalam prgram bisa mengakses variabel ini, dan variabel ini menjadi variabel glbal. Jika dia deklarasikan dengan menggunakan kata kunci var di dalam suatu fungsi tertentu, maka variabel itu hanya bisa di akses dari dalam fungsi tersebut, dan artinya variabel ini tidak berguna bagi fungsi fungsi yang lain, dan kita sebut variabel ini menjadi variabel lkal Mari kita lihat cnth berikut ini : <SCRIPT language="javascript"> <!-- var a = 12; var b = 4; functin PerkalianDengan2(b) { var a = b * 2; return a; dcument.write("dua kali dari ",b," adalah ",PerkalianDengan2(b)); dcument.write("nilai dari a adalah",a); // --> </SCRIPT> Dari cnth diatas, variabel a dideklarasikan secara eksplisit di awal dari skrip prgram dan juga di deklarasikan di dalam fungsi. berikut ini hasil dari prgram diatas. Dua kali dari 4 adalah 8 Nilai dari a adalah 12 15
Berikut ini adalah cnth lain dimana variabel di deklarasikan secara implisit di dalam suatu fungsi : <SCRIPT language="javascript"> <!-- var a = 12; var b = 4; functin PerkalianDengan2(b) { a = b * 2; return a; dcument.write("dua kali dari ",b," adalah ",PerkalianDengan2(b)); dcument.write("nilai dari a adalah",a); // --> </SCRIPT> Berikut ini hasil dari prgram diatas. Dua kali dari 4 adalah 8 Nilai dari a adalah 8 Dari cnth diatas bisa kita lihat pentingnya kita membiasakan diri untuk menggunakan kata var pada saat membuat variabel baru. 3.4 Jenis jenis data dari variabel Di JavaScript, kita tidak perlu mendeklarasikan jenis variabel yang akan kita gunakan, sebaliknya di bahasa bahasa pemrgraman yang lain (yang lebih advanced) seperti bahasa C atau Java kita harus mendeklarasikan secara detail apakah variabel yang digunakan tersebut adalah merupakan suatu bilangan bulat (int ), bilangan desimal (flat), karakter (char), dan lainnya Sebenarnya di JavaScript sendiri, kita hanya bisa memanipulasi 4 jenis data yaitu : Bilangan : bulat atau desimal, yang kita sebut sebagai integer atau flat Kata (kumpulan huruf) : kita sebut string Blean : suatu variabel yang mempunyai dua nilai dan berfungsi untuk memeriksa suatu kndisi : true : jika kndisinya benar false : jika kndisinya salah variabel dengan jenis null : satu kata khusus (termasuk keywrd juga) untuk menjelaskan bahwa tidak ada data didalamnya. 3.4.1 Integer(bilangan bulat) bilangan bulat dapat ditampilan dalam beberapa basis berikut ini : 16
basis desimal : integer di tuliskan dalam urutan unit bilangan (dari 0 sampai dengan 9), permulaan bilangan tidak bleh dimulai leh angka 0 basis heksadesimal : dituliskan dalam urutan unit bilangan dari 0 sampai dengan 9 atau urutan huruf dari A sampai dengan F (atau a sampai dengan f), permulaan bilangan dimulai leh 0x atau 0X basis ktal : dituliskan dalam urutan unit angka dari 0 sampai dengan 7, permulaan bilangan dimulai dengan angka 0 3.4.2 Flat (bilangan desimal) bilangan desimal bisa kita sebut juga sebagai bilangan pecahan atau bilangan yang bisa kita tuliskan dalam bentuk menggunakan tanda kma. Bilangan ini juga bisa di tuliskan dengan beberapa cara berikut bilangan bulat desimal : 895 bilangan dengan tanda kma : 895,12 bilangan pembagian : 27/11 bilangan ekspnensial : bilangan dengan tanda kma, kemudian diikuti leh huruf e(atau E), kemudian diikuti leh bilangan bulat yang artinya pangkat dari bilangan 10 (+ atau -, pangkat pstitif atau negatif), cnth : 3.4.3 String var a = 2.75e-2; var b = 35.8E+10; var c =.25e-2; String adalah kumpulan dari karakter, kita deklarasikan variabel string menggunakan tanda (') atau ("), kedua tanda tersebut harus digunakan secara berpasangan dan tidak bisa digunakan secara sendiri sendiri atau bercampur. Berikut ini adalah beberapa cara untuk mendeklarasikan variabel string : var a = "Hall"; var b = 'Sampai Ketemu Lagi!'; Ada beberapa karakter spesial yang bisa kita gunakan untuk mensimulasikan bagian dari karakter yang tidak terlihat (nn visual) dan juga untuk menghindarkan kemungkinan navigatr "mengalami kebingungan" dalam membedakan antara string dan skripnya sendiri, karakter spesial ini menggunakan simbl antislash (\), beberapa cnth karakter spesial tersebut \n : kembali ke baris awal \r : menekan tmbl ENTER \t : tab \" : tanda petik ganda \' : tanda petik tunggal \\ : karakter antislash satu cnth lagi, misalnya kita ingin menyimpan variabel judul (string) berikut ini : Ada apa di dalam "c:\windws\" Kita harus menuliskannya dalam bentuk berikut ini di dalam JavaScript : 17
Judul = "Ada apa di dalam \"c:\\windws\\\""; Atau bisa juga dengan cara berikut ini (menggunakan tanda petik tunggal) : Judul = 'Ada apa di dalam "c:\\windws\\"'; Untuk memanipulasi variabel String, JavaScript mempunyai satu byek yang bernama byek String (lihat subbab 2.2.5), yang terdiri dari beberapa metde untuk membuat variabel string dan memanipulasinya. 3.4.4 Bleans blean adalah satu variabel khusus yang berguna untuk mengevaluasi suatu kndisi tertentu, leh karenanya blean mempunyai dua nilai : True : diwakili leh nilai 1 False : diwakili leh nilai 0 3.5 Knversi jenis variabel Meskipun JavaScript memungkinkan pengaturan perubahan jenis variabel secara transparan, kadang kadang kita perlu juga untuk melakukan knversi jenis variabel secara paksa. Ada 2 fungsi dasar yang memungkinkan merubah jenis variabel yang dilewatkan dengan parameter tertentu : parseint() Fungsi ini mungkinkan merubah satu variabel yang dilewatkan dengan parameter tertentu (bisa dalam bentuk string ataupun dalam bentuk bilangan dalam basis yang disebutkan di parameter kedua) menjadi bilangan bulat. Sintaksnya adalah sebagai berikut : parseint(string[, basis]); Agar supaya fungsi parseint() mengembalikan nilai bilangan bulat, maka parameter yang dilewatkan harus dimulai dengan karakter bilangan [0-9], prefiks hexadesimal 0x, dan/atau karakter +,-,e,dan E. Selain daripada itu maka fungsi parseint() akan mengembalikan nilai NaN (Nt a Number). Jika karakter berikutnya tidak valid, maka dia akan diabaikan leh fungsi parseint(), dan akan ditampilkan terptng jika di bagian depan karakter valid dan bagian belakang karakter tidak valid. Berikut ini salah satu cnth penggunaan fungsi parseint() : var a = "123"; var b = "456"; dcument.write(a+b,"<br>"); // hasil 123456 dcument.write(parseint(a)+parseint(b),"<br>"); // hasil 579 tabel berikut ini memberikan sedikit gambaran penggunaan dari fungsi parseint() : Cnth Hasil parseint("128.34"); 128 parseint("12.3e-6"); 12 18
parseint("12e+6"); 12 parseint("hal"); NaN parseint("24hal38"); 24 parseint("hal3824"); NaN parseint("af8bef"); NaN parseint("0284"); 284 parseint("0284",8); 2 parseint("af8bef",16); 11504623 parseint("ab882f",16); 11241519 parseint("0xab882f"); 11241519 parseint("0xab882f",16); 11241519 parseint("00100110"); 100110 parseint("00100110",2); 38 parseint("00100110",8); 32840 parseint("00100110",10); 100110 parseint("00100110",16); 1048848 parseflat() Adalah satu fungsi inti dari JavaScript yang memungkinkan merubah variabel yang dilewatkan dengan parameter tertentu menjadi bilangan desimal, Sintaks dari fungsi parseflat adalah sebagai berikut : parseflat(string); tabel cnth tentang penggunaan fungsi parseflat() Cnth Hasil parseflat("128.34"); 128.34 parseflat("128,34"); 128 parseflat("12.3e-6"); 0.0000123 parseflat("hal"); NaN parseflat("24.568hal38"); 24.568 parseflat("hal38.24"); NaN parseflat("af8bef"); NaN parseflat("0284"); 284 parseflat("0xab882f"); 11241519 4. Tabel 4.1 Pengenalan Tabel Variabel variabel di JavaScript hanya bisa menyimpan satu data pada suatu saat. Adanya kecenderungan yang sangat besar untuk memanipulasi banyak data dalam satu variabel membuat knsep variabel tersebut menjadi tidak cukup memenuhi kebutuhan itu. Untuk mengatasi hal tersebut, JavaScript menghadirkan slusi struktur data yang memungkinkan menyimpan himpunan/grup data dalam satu variabel khusus yang disebut : Tabel. 19
Tabel, di dalam javascript adalah satu variabel yang dapat berisi banyak data yang independent, dengan indeks berdasarkan nmer urut, dengan indeks ini pula memungkinkan kita untuk mengakses data yang disimpan di lkasi tertentu. 4.2 Tabel multidimensi Tabel yang hanya berisi variabel variabel kita sebut tabel mndimensi atau unidimensi, berikut ini ilustrasi tabel unidimensi : Indeks 0 1 2 3 Data Data1 Data2 Data3 Data4 Perhatikan bahwa element pertama dari tabel selalu mempunyai indeks 0. Dalam suatu tabel dengan n element, maka element ke n akan mempunyai indeks n-1. Jika suatu tabel berisi tabel yang lain, maka kita sebut tabel itu adalah tabel multidimensi, berikut ini ilustrasi tabel multidimensi : 0 1 2 3 Data 1 Data 3 (variabel) (variabel) Data 2 (tabel) 0 1 2 Data 1 Data 2 Data 3 Data 4 (tabel) 0 1 Data 1 Data 2 4.3 Tabel assiatif Kita juga bisa menggunakan indeks yang sudah kita mdifikasi, untuk memudahkan menandai indeks dari satu nilai data. Tabel yang menggunakan indeks seperti ini kta sebut tabel assiatif. JavaScript sendiri memungkinkan kita untuk menggunakan string ataupun bilangan yang sudah di definisikan sebagai indeks data dari suatu tabel, berikut ini adalah ilustrasi dari tabel assiatif Indeks Andry Indra Santi Sandra Data 10 24 77 47 4.4 Pembuatan tabel Ada beberapa cara untuk membuat tabel di dalam JavaScript : var TabelKu = ["data 1", "data 2", "data 3", "data 4"]; var TabelKu = new Array("data 1", "data 2", "data 3", "data 4"); 20
pada cara diatas tersebut tabel diinisialisasikan dengan nilai data pada saat pembuatannya. Untuk lebih jelasnya sebaiknya kita deklarasikan tabel sebelum kita isikan dengan data, cnth deklarasinya adalah sebagai berikut : var TabelKu = new Array(); 4.5 Pengaksesan data di dalam tabel Pengaksesan data atau elemen di dalam tabel dapat dilakukan dengan menuliskan nama tabel diikuti tanda kurung yang berisi indeks dari elemen. var TabelKu = ["Buaya", "Harimau", "Gajah", "Singa", "Jerapah", "Zebra"]; dcument.write("elemen ke 4 dari tabel adalah "+TabelKu[3]); //hasil "elemen ke 4 dari tabel adalah Singa" 4.6 Memasukan data pada tabel Untuk membuat tabel assiatif, cukup dengan mendeklarasikan variabel yang akan kita masukkan, kemudian menuliskan nama tabel, di ikuti dengan nama indeks dalam kurung, dan memasukkan nilai datanya : TabelKu[0] = "Hall"; TabelKu["Andry"] = 10; TabelKu["Sandra"] = 47; 4.7 Memanipulasi tabel Untuk memanipulasi tabel, JavaScript mempunyai satu byek yang bernama byek Array (lihat subbab 2.2.1), yang memungkinkan kita memanipulasi tabel, seperti insert (memasukkan), delete (menghapus) atau mengambil elemen tertentu (ekstrak) ke/dari suatu tabel. 5. Event Event adalah aksi dari user yang bisa menghasilkan interaktifitas, pada kenyataannya event di dalam JavaScript adalah klik dari tmbl muse (merupakan satu satunya aksi yang dapat diatur leh HTML). JavaScript memungkinkan mengassiasikan event dengan beberapa fungsi dari metde seperti lewatnya muse pinter diatas zna tertentu, perubahan nilai, dan lain sebagainya. 21
Event administratr adalah yang memperblehkan kita untuk mengassiasikan satu aksi ke dalam sebuah event. Sintaks dari event administratr tersebut adalah sebagai berikut : OnEvenement = "Aksi_Javascript_atau_Fungsi();" Untuk penggunaan link hiperteks, maka sintaksnya adalah sebagai berikut : <a href ="nevenement ='Aksi_Javascript_atau_Fungsi();'>Link</a> 5.1 Daftar event Berikut ini beberapa kde yang harus dimasukkan ke dalam tag event administratr untuk menghasilkan aksi tertentu. Event Abrt (nabrt) Blur (nblur) Change (nchange) Click (nclick) Dblclick (ndblclick) Dragdrp (ndragdrp) Errr (nerrr) Fcus (nfcus) Keydwn (nkeydwn) Keypress (nkeypress) Keyup (nkeyup) Lad (nlad) Musever (nmusever) Museut (nmuseut) Reset (nreset) Resize (nresize) Keterangan terjadi pada saat user mengagalkan prses dwnlad image terjadi ketika elemen kehilangan fkus, artinya user melakukan klik diluar elemen itu, terjadi pada saat user memdifikasi isi dari data dalam satu field data terjadi pada saat user melakukan klik muse terhadap satu elemen yang berhubungan dengan event terjadi pada saat user melakukan klik dua kali pada satu elemen yang berhubungan event, elemen bisa berupa satu hiperlink atau elemen dari satu frm. Event ini hanya mensupprt JavaScript ver 1.2 keatas terjadi pada saat user melakukan drag dan drp elemen di dalam navigatr. Hanya mensupprt JavaScriptver 1.2 keatas muncul ketika errr pada saat lading halaman. Hanya supprt JavaScript ver 1.1 keatas terjadi pada saat user memberikan fcus kepada satu elemen terjadi pada saat user menekan satu tmbl pada keybardnya. Hanya mensupprt JavaScript ver 1.2 keatas terjadi pada saat user menekan dan manahan tmbl di keybardnya tetap ditekan. Hanya mensupprt JavaScript ver 1.2 keatas terjadi pada saat user melepaskan tmbl pada keybardnya. Hanya mensupprt JavaScript versi 1.2 keatas terjadi pada saat navigatr user melad/memanggil suatu halaman terjadi pada saat user meletakkan kursr muse diatas suatu elemen terjadi pada saat kursr muse meninggalkan psisinya dari atas suatu elemen terjadi pada saat user menghapus data pada suatu frm dengan bantuan satu tmbl reset terjadi pada saat user merubah dimensi ukuran dari jendela navigatr 22
Select (nselect) Submit (nsubmit) Unlad (nunlad) terjadi pada saat user melakukan prses select terhadap suatu teks (sebagian atau semuanya) di dalam satu field bertjenis teks atau textarea terjadi pada saat user melakukan klik terhadap tmbl pengiriman suatu frm terjadi pada saat navigatr user meninggalkan halaman yang sedang diprses (atau di lad) 5.2 Hubungan event dengan byek Tidak semua elemen bisa berhubungan atau berassiasi dengan sembarang byek. Sangat jelas sekali, sebagai cnth event nchange tidak akan bisa diaplikasikan ke suatu hiperteks. Berikut ini adalah tabel rekapitulatif byek byek yang mana bisa berassiasi dengan suatu event. Event Abrt Blur Change Click Dblclick dragdrp Errr Fcus Keydwn Keypress Keyup Lad Musedwn Musemve Museut Musever Museup Mve Reset Resize Select Submit Unlad Obyek yang bisa berassiasi Image Buttn, Checkbx, FileUplad, Layer, Passwrd, Radi, Reset, Select, Submit, Text, TextArea, Windw FileUplad, Select, Submit, Text, TextArea Buttn, dcument, Checkbx, Link, Radi, Reset, Select, Submit Dcument, Link Windw Image, Windw Buttn, Checkbx, FileUplad, Layer, Passwrd, Radi, Reset, Select, Submit, Text, TextArea, Windw Dcument, Image, Link, TextArea Dcument, Image, Link, TextArea Dcument, Image, Link, TextArea Image, Layer, Windw Buttn, Dcument, Link Nt spesific Layer, Link Area, Layer, Link Buttn, Dcument, Link Windw Frm Windw Text, TextArea Frm Windw 5.3 Cnth penggunaan event cara terbaik untuk mengerti tentang penggunaan event adalah dengan cara berlatih menulis prgram kecil kecilan. Sebagai inspirasi anda, mungkin anda bisa mencba melihat surce cde dari beberapa halaman web, akan tetapi marilah kita tidak langsung melakukan cpy & paste 23
terhadap skrip itu dan membiasakan diri untuk menghrmati hasil kerja rang lain dengan meminta ijin terlebih dahulu kepada si pembuat skrip tersebut, kecuali memang skrip tersebut tersedia secara free, seperti banyak tersedia di beberapa site yang menyediakan surce cde dari JavaScript. Berikut ini kita akan mencba satu cnth sederhana cara menampilkan ktak dialg yang berisi tulisan teks anda (dengan tanda satu petik di depan dan di belakang kata) sesudah anda melakukan klik terhadap satu link yang mentrigger event untuk mengaktifkan ktak dialg tersebut. <html> <head> <title>membuka ktak dialg pada saat melalukan klik muse di satu link</title> </head> <bdy> <a href="javascript:;" nclick="windw.alert( \ teks anda\ );"> klik disini!</a> </bdy> </html> analisa skrip diatas : Event administratr nclick dimasukkan didalam tag links dari hiperteks <a href=.> Tujuan dari skrip ini adalah menampilkan satu ktak dialg, jadi kita tidak ingin kalau link tersebut akan membawa kita ke halaman yang lain, leh karena itu kita masukkan kde "javascript:;" didalam atribut href untuk memberi tahu navigatr kalau kita ingin tetap berada di halaman yang sedang di prses tersebut. Perhatikan penggunaan \ di dalam kalimat \ teks anda\. tanda antislash (\) di depan tanda petik untuk memperingatkan navigatr kal dianggap sebagai karakter biasa dan bukan di intepretasi sebagai pembatas string. Selanjutnya cnth kedua adalah cnth penggunaan event nmusever untuk membuat menu interaktif yang akan berubah tampilan imagenya pada saat kursr muse lewat diatasnya, kita bahkan bisa menambahkan event nmuseut untuk mengembalikan image ke asalnya pada saat kursr sudah tidak diatas image lagi. Karena di sini kita tidak bisa mencba secara live, anda bisa mencba sendiri di rumah dengan mengcpy paste skrip ini dan mengganti file image1.gif dan image2.gif dengan sembarang file yang anda punya. <html> <head> <title>memdifikasi image pada saat kursr muse bergerak diatas image tersebut</title> </head> <bdy> <a href="javascript:;" nmuseover="dcument.img_1.src='image2.gif';" nmuseout="dcument.img_1.src='image1.gif';"> <img name="img_1" src="image1.gif"> </a> </bdy> </html> 24
analisa skrip diatas : Untuk bisa mengassiasikan image dengan event tersebut, maka kita harus harus membuat image itu sebagai suatu link, sehingga kita memakai tag <img..> diantara tag <a > dan </a> Event nmusever dan nmuseut terbatas penggunaannya untuk JavaScript versi 1.1 keatas 6. Operatr Operatr adalah simbl yang memungkinkan kita untuk memanipulasi variabel, dengan kata lain melakukan perasi perasi, mengevaluasi, dan lain lainnya. Ada beberapa jenis peratr : 6.1 Operatr Penghitungan (Calculatin) Operatr penghitungan memungkinkan kita untuk memdifikasi nilai dari variabel secara matematika. Operatr Keterangan Fungsi Cnth Hasil (dgn x=7) + penjumlahan menjumlahkan dua nilai x+3 10 - pengurangan mengurangkan satu nilai dari nilai yang lain x-3 4 * perkalian mengalikan dua nilai x*3 21 / pembagian membagi satu nilai dengan nilai yang lain = afektasi nilai memberikan satu nilai terhadap satu variabel % mdul mengembalikan nilai sisa pembagian dari nilai sebelah kiri dibagi dengan nilai sebelah kanan x/3 2,3333 x=3 Memberikan nilai 3 terhadap variabel X x%2 1 6.2 Operatr Afektasi Operatr ini memungkinkan kita untuk menyederhanakan perasi penambahan nilai dalam satu variabel dan menyimpan hasilnya di dalam variabel itu sendiri. Operasi ini biasanya ditulis dengan cara berikut : x=x+2, dengan menggunakan peratr afektasi perasi tersebut bisa dituliskan menjadi x+=2, dan jika nilai awal x=7 maka nilai akhir x menjadi 9. Jenis jenis peratr seperti ini adalah sebagai berikut : Operatr Fungsi += menambahkan nilai sebelah kiri dengan nilai sebelah kanan, kemudian menyimpan hasilnya variabel sebelah kiri -= mengurangi nilai sebelah kiri dengan nilai sebelah kanan, kemudian 25
menyimpan hasilnya variabel sebelah kiri *= mengalikan nilai sebalah kiri dengan nilai sebelah kanan, kemudian menyimpan hasilnya variabel sebelah kiri /= membagi nilai sebelah kiri dengan nilai sebelah kanan, kemudian menyimpan hasilnya variabel sebelah kiri %= menghitung sisa pembagian nilai sebelah kiri leh nilai sebelah kanan, kemudian menyimpannya variabel sebelah kiri 6.3 Operatr Inkrementasi Operatr ini memungkinkan kita untuk menambahkan ataupun mengurangi per unit dari satu variabel. Operatr ini sangat berguna dalam struktur pemrgraman sistem Lp, yang membutuhkan penghitung (variabel yang nilainya naik/turun satu persatu ). Operatr dengan mdel x++ bisa mengantikan ntasi x=x+1 atau x+=1 Operatr Fungsi Sintaks Hasil (dgn x=7) ++ menambahkan nilai satu unit dari variabel -- mengurangi nilai satu unit dari variabel x++ 8 x-- 6 6.4 Operatr Pembanding Operatr Fungsi Sintaks Hasil ( dgn x=7) == (jgn bingung dengan peratr = )! membandingan dua nilai dan memverifikasi kesamaannya === memverifikasi apakah identitas dari dua nilai dan jenis dari kedua nilai tersebut sama!= memverifikasi apakah satu variabel berbeda dengan satu nilai!== memverifikasi apakah dua nilai tidak bernilai sama atau juga tidak berjenis sama < memverifikasi apakah satu nilai lebih kecil dari nilai yang lain x==3 a===b x!=3 a!==b mengembalikan nilai True, kalau x sama dengan 3, sebaliknya nilai False mengembalikan nilai True jika a sama dengan b, dan mempunyai jenis yang sama, sebaliknya nilai False mengembalikan nilai 1, jika x tidak sama (berbeda) dengan 3, sebaliknya nilai 0 mengembalikan nilai True, jika a berbeda dengan b atau berbeda jenis, sebaliknya nilai False x<3 mengembalikan nilai True, jika x lebih kecil dari 3, sebaliknya nilai False 26
<= memverifikasi apakah satu nilai lebih kecil atau sama dengan nilai yang lain > memverifikasi apakah satu nilai lebih besar dari nilai yang lain >= memverifikasi apakah satu nilai lebih besar atau sama dengan nilai yang lain x<=3 mengembalikan nilai True, jika x lebih kecil atau sama dengan 3, sebaliknya nilai False x>3 mengembalikan nilai True, jika x lebih besar dari 3, sebaliknya nilai False x>=3 mengembalikan nilai True, jika x lebih besar atau sama dengan 3, sebaliknya nilai False 6.5 Operatr Lgika (Bleans) Operatr jenis ini memungkinkan kita untuk memverifikasi apakah beberapa kndisi sudah benar Operatr Keterangan Fungsi Sintaks lgika OR (atau) memverifikasi apakah syarat satu kndisi sudah terpenuhi? && lgika AND (dan) memverifikasi apakah semua kndisi sudah memenuhi syarat?! lgika NON Membalikkan kndisi nilai (invers) dari variabel blean (mengembalikan nilai 1, jika variabel bernilai 0, dan mengembalikan nilai 0, jika variabel bernilai 1) ((kndisi1) (kndisi2)) ((kndisi1))&&((kndisi2)) (!kndisi) 6.6 Operatr untuk memanipulasi data string Operatr + yang digunakan untuk variabel jenis String memungkinkan kita untuk melakukan penggabungan (cncantenate) dua variabel String. Perlu dicatat juga bahwa var='a'+'b' adalah sama dengan var='ab' var1='a' var=var1+'b' -> var='ab' 6.7 Priritas Pada saat kita melibatkan banyak peratr dalam satu perasi, navigatr harus tahu dengan urutan mana perasi dilakukan berdasarkan priritas dari peratr. Berikut ini adalah tabel tingkat priritas dari seluruh peratr. 27
Priritas Operatr 1 () [] 2 -- ++! ~ - 3 * / % 4 + - 5 < <= >= > 6 ==!= 7 ^ 8 9 && 10? : 11 = += -= *= /= %= <<= >>= >>>= &= ^= = 12, 7. Struktur Kndisinal Struktur kndisinal adalah instruksi instruksi yang memungkinkan kita untuk melakukan test apakah satu kndisi adalah benar atau tidak, dan memungkinkan juga terjadinya prses interaksi di dalam skrip yang kita buat 7.1 Instruksi if Instruksi paling dasar, kita bisa temukan instruksi ini hampir dalam semua bahasa pemrgraman (mungkin dengan sedikit perbedaan sintaks). Instruksi ini memungkinkan kita untuk mengeksekusi satu blk instruksi jika kndisi syaratnya terpenuhi. Sintaks dari instruksi ini adalah sebagai berikut : if (kndisi syarat terpenuhi) { daftar instruksi atau blk instruksi beberapa catatan penting tentang instruksi ini kndisi harus terletak diantara dua tanda kurung kita bisa melatakkan beberapa kndisi dengan menggunakan peratr AND atau OR (&& atau ) cnth : if ((kndisi1)&&(kndisi2)) if ((kndisi1) (kndisi2)) Jika hanya ada satu instruksi di dalam blk instruksi, kita tidak perlu menggunakan tanda kurung, seperti cnth berikut ini : if (x==2) dcument.write("nilai x adalah 2"); 28
7.2 Instruksi if..else Instruksi If, adalah instruksi dasar yang hanya memungkinkan kita untuk melakukan pemeriksaan apakah satu kndisi terpenuhi atau tidak. Pada kenyataannya kita menginginkan lebih dari satu kndisi syarat untuk menjalankan prgram, untuk kebutuhan itu, kita bisa menggunakan instruksi If Else. Sintaks lengkap dari instruksi ini adalah : if (kndisi syarat1 terpenuhi) { daftar instruksi atau blk instruksi else { daftar instruksi/blk instruksi yang lain 7.3. Instruksi fr Sebelum berbicara tentang instruksi, kita bicarakan dulu tentang Lp. Lp adalah struktur instruksi instruksi yang dapat di eksekusi berulang umang selama kndisi syaratnya belum terpenuhi. Cara yang paling umum dalam melakukan Lp adalah dengan menambahkan variabel penghitung/cunter (variabel yang bertambah satu unit nilai selama satu kali Lp instruksi dijalankan (increment)), Lp akan berhenti jika variabel penghitung sudah melewati batas nilai tertentu yang dijadikan syarat. Fr adalah salah satu Instruksi yang menggunakan fasilitas Lp. Dalam sintaksnya kita hanya perlu memasukkan nama variabel sebagai penghitung (dan juga nilai awalnya, serta kndisi dimana lp akan berhenti (pada dasarnya, kndisi dimana nilai penghitung melewati angka tertetu)), dan yang terakhir instruksi mdifikasi penghitung, increment (naik per unit) atau decrement (turun per unit) Sintaks lengkap dari instruksi ini adalah : fr (penghitung; kndisi lp berhenti; mdfikasi penghitung) { daftar instruksi instruksi atau blk instruksi Sebagai cnth : fr (i=1; i<6; i++) { Alert(i) 29
Lp ini akan 5 kali menampilkan nilai dari i, mulai dari i=1,2,3,4,5. Lp dimulai dari i=1 dan akan selalu melakukan cek dan verifikasi apakah nilai i kurang dari 6. Sampai pada i=6, dimana kndisi syaratnya sudah tidak terpenuhi maka lp akan berhenti. 7.4 Instruksi while Instruksi while merupakan salah satu cara alternatif untuk menjalankan sekumpulan instruksi, seperti juga instruksi Fr.. Sintaks dari instruksi ini adalah sebagai berikut : while (kndisi syarat terpenuhi) { daftar instruksi instruksi atau blk instruksi Karena instruksi ini menjalankan prgram selama kndisi syarat terpenuhi, maka perlu diperhatikan baik baik syarat yang kita berikan, agar supaya instruksi tidak menjadi lp tanpa henti (infinity) dan membuat errr navigatr kita. 7.5 Instruksi cntinue Ada hal yang patut di perhatikan juga, ada kalanya kita perlu melakukan lmpatan (jump) terhadap satu atau beberapa nilai tertentu di dalam lp tanpa menghentikan lp itu sendiri. Sintaks yang digunakan disini adalah cntinue, dan di letakkan di dalam lp itu sendiri, pada umumnya kita tambahkan juga struktur kndisinal sebagai syarat supaya sintaks tersebut berjalan lancar. Cnth : kita akan mencetak hasil dari persamaan 1/(x-7) untuk nilai x = 1 sampai x= 10, cukup jelas untuk nilai x = 7 maka akan menghasilkan errr (pembagian dengan 0), berkat instruksi cntinue kita bisa memperlakukan secara terpisah nilai x = 7, dan meneruskan lp dari prgram tersebut. x=1; while (x<=10) { if (x == 7) { Alert('pembagian leh 0'); X++; cntinue; a = 1/(x-7); Alert(a); x++; 30
7.6. Instruksi break Sebaliknya kita juga bisa memaksa lp berhenti sebelum waktunya dengan alasan yang dikemukan di bagian awal dari lp. Instruksi Break memungkinkan menghentikan suatu lp (baik untuk fr ataupun while). Pemakaiannya sendiri seperti instruksi cntinue, yaitu penambahan struktur kndisinal agar supaya lp berhenti dan tidak berulang ulang lping. Cnth : fr (x=1; x<=10; x++) { a = x-7; if (a == 0) { Alert('pembagian leh 0'); break; Alert(1/a); 7.7 Instruksi switch. case Instruksi ini memungkinkan kita untuk melakukan test berbagai nilai dari variabel yang sama. Dengan cara ini kita bisa melakukan testing terhadap berbagai nilai variabel lebih sederhana daripada memakai instruksi if. Sintaksnya adalah sebagai berikut : switch (Variabel) { case Nilai1: blk instruksi; break; case Nilai2: blk instruksi; break; case NilaiX: blk instruksi; break; default: blk instruksi; break; Kata di dalam tanda kurung sesudah kata switch menunjukkan nama variabel yang akan di test pada kasus nilai yang berbeda. Pada saat nilai variabel yang akan di test sama dengan nilai kasusnya (case) maka blk instruksi di bawahnya akan dieksekusi. Kata break berarti berhentinya atau keluar dari struktur kndisi switch. Kata default berarti blk instruksi dibawahnya akan dieksekusi bila nilai variabel yang masuk tidak sama dengan semua kasus (case) yang ada. 31
8. Fungsi Fungsi adalah subprgram yang memungkinkan kita untuk menjalankan sekelmpk instruksi dengan satu pemanggilan sederhana nama fungsi tersebut dari satu atau beberapa bagian di dalam badan suatu prgram. Bentuk subprgram yang kita sebut fungsi ini sangat umum di pakai di banyak bahasa pemrgraman (tentu saja dengan cara yang sedikit berbeda antara satu dengan lainnya). Di lain pihk suatu fungsi, juga bisa memanggil dirinya sendiri, ini kita sebut dengan fungsi rekursif (akan tetapi jangan lupa untuk meletakkan kndisi khusus supaya fungsi bisa berhenti, kalau tidak bisa membahayakan kelangsungan prgram secara glbal). JavaScript sendiri mempunyai fungsi native (predefined) yang dapat diaplikasikan untuk satu atau banyak jenis byek spesifik, kita sebut fungsi ini sebagai metda (lihat bab 9) 8.1 Deklarasi fungsi Sebelum digunakan, suatu fungsi harus di definisikan terlebih dahulu karena untuk memanggil fungsi tersebut dari dalam prgram, navigatr harus mengenalinya terlebih dahulu, dalam artian mengenali namanya, argumennya, dan instruksi di dalamnya. Pendefinisian satu fungsi dinamakan deklarasi. Sintaks pendeklarasian suatu fungsi adalah sebagai berikut : functin Nama_dari_Fungsi(argumen1, argumen2,...) { daftar instruksi atau blk instruksi Catatan : Kata kunci functin diikuti nama dari fungsi tersebut. Penamaan dari fungsi mempunyai aturan yang sama dengan penamaan dari variabel Nama harus dimulai leh huruf. Nama dari fungsi bisa berisi huruf, angka atau karakter _ dan &, karakter ksng atau spasi tidak diperblehkan. Nama fungsi seperti juga nama variabel adalah case sensitive, jadi memperhatikan huruf besar dan huruf kecilnya. Argumen adalah ptinal, bleh ada dan bleh tidak ada, jika argumen tidak ada maka tanda kurung harus tetap ditampilkan. 8.2 Pemanggilan fungsi Untuk mengeksekusi satu fungsi, kita cukup memanggil nama dari fungsi tersebut yang diikuti dengan kurung buka, argumen(jika ada) dan di tutup dengan kurung tutup. Nama_dari_Fungsi() ; Catatan : Titik kma memberikan tanda kepada navigatr tentang akhir dari blk instruksi yang berbeda. Jika anda mendefinisikan suatu argumen untuk suatu fungsi, maka pada saat pemanggilannya anda harus memanggil fungsi tersebut lengkap dengan argumentnya. 32
Perlu diperhatikan untuk selalu mendeklarasikan suatu fungsi sebelum kita panggil, karena navigatr selalu membaca HTML dan skrip dari atas ke bawah, leh karena itu pada umumnya fungsi di dalam tag SCRIPT terlatak di bagian kepala dari dkumen HTML (diantara tag <HEAD>dan </HEAD> Berkat event administratr yang bernama nlad (di letakkan di dalam tag BODY), kita bisa memanggil fungsi pada saat lading halaman dkumen HTML, sebagai cnth inisialisasi nilai awal dari skrip anda atau melakukan test apakah navigatr dapat menjalankan fungsi dari skrip atau tidak. Cnthnya adalah sebagai berikut : <HTML> <HEAD> <SCRIPT language="javascript"> <!-- functin Pemanggilan() { blk instruksi //--> </SCRIPT> </HEAD> <BODY nlad="pemanggilan();" > </BODY> </HTML> 8.3 Parameter dari fungsi Kita bisa melewatkan parameter di dalam suatu fungsi, dalam artian kita berikan nilai atau nama variabel supaya fungsi itu bisa di eksekusi berdasarkan parameter tersebut. Pada saat kita melewatkan beberapa parameter ke dalam fungsi, parameter parameter tersebut dipisahkan leh tanda kma, baik pada saat deklarasi ataupun pada saat pemanggilan. Kalau anda melihat bab bab sebelumnya parameter ini kita sebut argumen fungsi secara umum. Kita lihat cnth di bawah ini : kita akan membuat prgram JavaScript yang menambilkan ktak dialg : <HTML> <HEAD> <SCRIPT language="javascript"> <!-- functin Tampilkan1() { alert('teks 1'); 33
functin Tampilkan2() { alert('teks 2'); //--> </SCRIPT> </HEAD> <BODY> <A href="javascript:;" nclick="tampilkan1();">teks1</a> <A href="javascript:;" nclick="tampilkan2();">teks2</a> </BODY> </HTML> atau cara kedua berikut akan memberikan hasil yang sama : <HTML> <HEAD> <SCRIPT language="javascript"> <!-- functin Tampilkan(Teks) { alert(teks); //--> </SCRIPT> </HEAD> <BODY> <A href="javascript:;" nclick="tampilkan('teks1');">teks1</a> <A href="javascript:;" nclick="tampilkan('teks2');">teks2</a> </BODY> </HTML> Hasil akhir dari kedua prgram itu sama saja, akan tetapi prgram kedua lebih fleksibel karena kita cuman punya satu fungsi yang bisa menampilkan sembarang teks. 8.4 Bekerja dengan variabel di dalam fungsi Secara lgika pada saat kita selesai memanipulasi variabel di dalam fungsi, dan kemudian kita keluar dari fungsi tersebut, maka nilai variabel itu akan kembali ke nilai asalnya, meskipun kita sudah merubahnya di dalam fungsi tersebut. 34
Akan tetapi ini semua bergantung dari jenis variabel itu sendiri, apakah dia variabel lkal atau variabel glbal : Variabel yang dideklarasikan secara implisit di dalam fungsi (tanpa kata kunci var) akan menjadi glbal, yang artinya variabel masih bisa di akses sesudah eksekusi dari fungsi. Variabel yang dideklarasikan secara eksplisit di dalam fungsi (menggunakan kata kunci var) akan menjadi lkal, yang artinya hanya dapat diakses dari dalam fungsi, semua referensi yang memakai variabel ini dari luar fungsi akan menyebabkan pesan errr (variabel tidak dikenal). Pada saat kita memanggil satu fungsi dari satu byek, sebagai cnth misalkan suatu frm, maka sebaiknya kita menggunakan kata kunci this untuk membuat satu referensi dengan byek yang sedang berjalan/sedang di kerjakan. Dengan kata kunci ini kita juga menghindarkan dari menulis frmat byek secara bertele tele seperti windws.bjet1.bjet2. dan juga pada saat ingin melewatkan byek yang sedang di prses ke satu fungsi, kita tinggal menulis Nama_dari_Fungsi(this). untuk bisa memanipulasi byek tersebut dari dalam fungsi. Sedangkan untuk memanipulasi kndisi dari byek itu sendiri, kita hanya tinggal mengetikan this.prperty 8.5 Mendefinisikan byek dengan fungsi Kita bisa membuat suatu byek dengan prperti yang kita definisikan. Sebagai cnth kita bayangkan kita akan membuat satu byek phn dengan prperti sebagai berikut : Jenis Tinggi Umur Kita bisa membuat byek phn dengan menggunakan satu fungsi yang kita beri nama fungsi phn, dimana prperti dari byek phn didefinisikan di fungsi tersebut. Kita juga menggunakan kata kunci this dalam cnth yang detailnya dapat anda lihat berikut ini : Umur functin Phn(Jenis, Tinggi, Umur) { this.jenis = Jenis; this.tinggi = Tinggi; this.umur = Umur; Selanjutnya kita gunakan kata kunci new kita bisa membuat instan dari byek phn (maksudnya satu byek yang lain dengan prperti sama dengan byek phn) : Phn1 = new Phn("cemara", 14, 20) Kita bisa membuat sebanyak mungkin instan yang kita inginkan. Selain itu di byek yang sudah ada kita bisa menambahkan prperti dari byek yang lain, mari kita lihat cnth berikut ini : functin Pemilik(Nama, Jenis_Kelamin) { this.nama = Nama; this.jenis_kelamin = Jenis_Kelamin; 35
seterusnya kita definisikan byek phn sebagai berikut : functin Phn(Jenis, Tinggi, Umur, Pemilik) { this.jenis = Jenis; this.tinggi = Tinggi; this.umur = Umur; this.pemilik = Pemilik; selanjutnya kita bisa tulis nama pemilik dari phn tersebut sebagai berikut : Phn.Pemilik.Nama dan juga merubah prpertinya seperti berikut ini : Phn.Pemilik.Nama = Andry; Phn.Pemilik.Jenis_Kelamin = Pria; 9. Metda Metda adalah suatu fungsi yang diassiasikan dengan satu byek, satu aksi yang bisa kita eksekusi pada satu byek. Metda pada byek dari navigatr adalah fungsi fungsi yang sudah di definisikan sebelumnya (predefined) berdasarkan aturan aturan HTML dan kita tidak bisa memdifikasinya. Akan tetapi bisa membuat metda yang persnalisasikan sendiri untuk setiap byek yang kita buat. Mari kita lihat cnth tentang dkumen HTML, yang terdiri dari byek yang bernama dcument, byek ini mempunyai metda yang bernama write() yang berguna untuk memdifikasi isi dari dkumen HTML dengan menampilkan teks tertentu. Maka metda itu akan di panggil dengan dengan cara berikut : windw.dcument.write() 9.1 Metda write Metda write() dari satu byek dkumen memungkinkan kita untuk memdifikasi secara dinamik isi dkumen HTML. Berikut ini adalah sintaks secara umum dari metda write : windw.dcument.write(ekspresi1, ekspresi2,...) secara praktisnya kita bisa tulis metda write() sebagai berikut : Menuliskan secara langsung teks ke dalam parameter : dcument.write("hall"); yang akan mempunyai hasil menambahkan (cncantenate) string bertuliskan hall ke tempat dimana kita meletakkan skrip tersebut. Bisa juga melewatkan teks tersebut melalui suatu variabel : test='hall'; 36
dcument.write(test); mempunyai efek yang sama dengan cara sebelumnya Atau dengan menggabungkan kedua cara diatas : test='hall'; dcument.write('dia berkata' + test); yang akan mempunyai hasil menambahkan kata hall di belakang kata dia berkata di dalam dkumen HTML Atau bisa juga dengan menyisipkan langsung satu ekspresi(ekspressin), yang akan di evaluasi dan di jalankan segera mungkin, dan hasilnya langsung ditampilkan test='akar dari bilangan 2 adalah : '; dcument.write(test+sqrt(2)); kita juga bisa memasukkan tag HTML kedalam metda write : dcument.write('<fnt clr="#ff0000">hall</fnt>'); 9.2 Metda writeln Metda writeln() berfungsi sama persis seperti metda write dengan penambahan pemindahan ke baris baru setiap kali usai menuliskan metdanya. Akan tetapi dkumen HTML tidak mengenal adanya penambahan baris baru dengan cara tradisinal, penambahan baris baru hanya bisa dilakukan dengan menggunakan tag <BR>, leh karena itu metda ini tidak terlalu berguna di dalam HTML, kecuali diantara tag <PRE> dan </PRE> dimana kita memperlakukan teks didalamnya seperti file teks biasa. 9.3 Mendefinisikan satu metda untuk sebuah byek Seperti disebutkan diatas kita bisa membuat satu metda untuk satu jenis byek yang kita buat sendiri, dengan menggunakan fungsi sebagai prperti dari satu byek, mari kita lihat kembali cnth tentang Phn : Pertama kita definisikan satu prperti : functin Pemilik(Nama, Jenis_Kelamin) { Pemilik.Nama = Nama; Pemilik.Jenis_Kelamin = Jenis_Kelamin; Kemudian kita buat satu fungsi yang akan menampilkan nama dan jenis kelamin dari pemilik phn beserta karakteristik lainnya : functin TampilkanInf() { alert(this.pemilik.nama+ 'berjenis kelamin' + this.pemilik.jenis_kelamin + 'mempunyai sebuah phn' + this.jenis); 37
Sekarang kita tinggal definisikan byek Phn sebagai berikut functin Phn(Jenis, Tinggi, Umur, Pemilik, TampilkanInf) { this.jenis = Jenis; this.tinggi = Tinggi; this.umur = Umur; this.pemilik = Pemilik; this.tampilkaninf = TampilkanInf; Secara singkat kita lihat hasilnya, misalkan kita ketik Phn1.TampilkanInf() maka kita akan mendapatkan hasil sebagai berikut (sekedar cnth) : Andry berjenis kelamin laki laki mempunyai sebuah phn cemara Kita lihat cnth tersebut metde TampilkanInf() diaplikasikan ke byek Phn1 10. Ktak Dialg Ktak dialg adalah satu jendela yang tampil di bagian depan (layer paling atas) menyusul satu event yang di jalankan, dan memungkinkan kita untuk : Memberikan peringatan kepada user Memberikan pilihan yang harus dipilih leh user Meminta user untuk mengisi atau melengkapi isian pada suatu frm field. JavaScript menawarkan 3 metda penggunaan ktak dialg berdasarkan ke tiga fungsi yang sudah disebut diatas. Metda metda itu adalah metda dari byek windw. 10.1 Metda alert() Metda alert() memungkinkan navigatr untuk menampilkan satu ktak dialg yang berisi satu tmbl OK dan teks keterangan (sebagai satu satunya parameter dari metda). Pada saat ktak ini muncul, user tidak punya pilihan lain selain menekan tmbl OK. Sintaksnya adalah sebagai berikut : alert(nama_dari_variabel); alert('teks'); alert('teks' + nama_dari_variabel); dan tampilan hasil dari metda alert() adalah sebagai berikut (cnth menggunakan navigatr Internet Explrer) 38
dalam hal ini sintaksnya adalah : alert('perhatian'); 10.2 Metda cnfirm() Metda cnfirm() sama seperti metda alert, dengan tambahan kita bisa melakukan pilihan OK atau Cancel. Pada saat kita pilih OK maka metda ini akan mengirimkan nilai true dan mengirimkan nilai false jika kita memilih Cancel Tampilan ktak dialg di navigatr internet explrer sedangkan sintaksnya sendiri sama seperti metda alert, dalam cnth ini sintaksnya adalah : cnfirm('anda Mau Meneruskan Prses?'); 10.3 Metda prmpt() Metda prmpt() agak sedikit lebih canggih dibandingkan kedua metda sebelumnya karena dia dilengkapi dengan satu cara untuk mendapatkan infrmasi yang diberikan leh user. Metda prmpt() terdiri dari 2 kmpnen, yang pertama teks untuk pertanyaan dan yang kedua adalah teks default dari field yang akan diisi infrmasi leh user. Berikut ini cnth dari metda prmpt() menggunakan navigatr Internet Explrer versi Prancis :D. Sintaksnya adalah sebagai berikut : prmpt('siapakah Nama Anda?', 'isi disini' ); 39
metda ini akan mengembalikan nilai teks yang diisi leh user, dan akan mengirimkan nilai null jika user tidak mengisi field itu. REFERENSI : 1. Buku : JavaScript Pcket Reference, 2 nd Editin, Pengarang David Flanagan, Penerbit O Reilly 2. Buku : JavaScript le pche, Pengarang Cedric Nilly, Jean Christphe Gigniac, Penerbit Eyrlles 3. Site Internet : http://www.javascript.cm 4. Site Internet : http://javascript.internet.cm BIOGRAFI PENULIS Andry Alamsyah. Lahir di Malang, Menamatkan SMU di SMUN 3 Malang. Setelah itu melanjutkan pendidikannya di Jurusan Matematika ITB Bandung dan lulus S1 pada tahun 1996. Setelah lulus bekerja di salah satu anak perusahaan Astra di bidang IT di Jakarta selama 5 tahun sebagai System Analyst. Pada Tahun 2001 meneruskan pendidikan S2 di Bidang Sistem Infrmasi Multimedia di Universitas Picardie, Amiens, Prancis. Saat ini sambil meneruskan kuliah, juga bekerja sebagai knsultan dan prgrammer spesialis aplikasi web di Bengkel Pengembangan Multimedia yang bergerak di bidang knsultasi dan pengembangan sistem belajar jarak jauh untuk beberapa universitas di Prancis, Hungaria, Aljazair, Tunisia dan Mark Infrmasi lebih lanjut tentang penulis ini bisa didapat melalui: Email: alamsyah@tiscali.fr URL: http://www.alamsyah.net 40