MODUL PEMROGRAMAN WEB

Transkripsi

1 MODUL PEMROGRAMAN WEB JAVASCRIPT Rajif Agung Yunmar, S.Kom STMIK AMIKOM Yogyakarta 2011

2 DAFTAR ISI JavaScript Memasukkan JavaScript Embedded Script Inline Script External Script JavaScript Object Direct Object Operation Object Lainnya Variabel Deklarasi Variabel Type Casting Konstanta Event Event dan Object Percabangan Fungsi Kotak Dialog Alert Confirm Prompt Validasi Daftar Pustaka... 21

3 JAVASCRIPT JavaScript adalah bahasa pemrograman berbasiskan client side scripting. Yang berarti program dieksekusi disisi (browser) client, client dapat melihat skrip dan mengetahui algoritma dari program yang ditulis. JavaScript tidak memerlukan compiler khusus untuk mengeksekusi programnya, biasanya browser-lah yang bertindak sebagai compiler kode program JavaScript. Itu sebabnya terdapat beberapa perbedaan (walaupun tidak banyak) penggunaan syntax program antara satu browser dengan yang lainnya. Javascript diperkenalkan pertama kali oleh Netscape pada tahun Pada awalnya bahasa ini dinamakan "LiveScript" yang berfungsi sebagai bahasa sederhana untuk browser Netscape Navigator 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 program. Kemudian sejalan dengan sedang giatnya kerjasama antara Netscape dan Sun (pengembang bahasa pemrograman "Java") pada masa itu, maka Netscape memberikan nama "JavaScript" kepada bahasa tersebut pada tanggal 4 desember Pada saat yang bersamaan Microsoft sendiri mencoba untuk mengadaptasikan teknologi ini yang mereka sebut sebagai "Jscript" di browser Internet Explorer Memasukkan JavaScript 1.1 Embedded Script Kode program JavScript ditanamkan langsung didalam halaman HTML. Kode program disisipkan diatara tag <script language="javascript">... </script>. 08.latihan_01.php <title>embedded Script</title> <p>program JavaScript Pertama Saya!</p> <script language="javascript"> alert("hello Dab!"); </script> 1

4 1.2 Inline Script Kode program JavaScript didefinisikan langsung didalam elemen HTML sebagai sebuah atribut. Atribut pada elemen HTML ini biasanya berkaitan dengan event, yaitu sebuah aksi yang dilakukan oleh seorang user. Misalnya seperti saat user menekan (klik) sebuah tombol. Lebih lengkap mengenai event akan dijelaskan pada sub-bab selanjutnya. 08.latihan_02.php <title>inline Script</title> <a href="#" onclick="alert('terima Kasih.');">Klik Dong!</a> 2

5 Pada contoh latihan diatas, program JavaScript didefinisikan secara langsung sebagai value dari atribut onclick. Browser secara otomatis mengenali atribut ini sebagai sebuah JavaScript event. Program JavaScript akan dieksekusi apabila user menekan (klik) tautan / link yang sudah diberikan event tersebut. Dalam hal ini program akan menampilkan sebuah kotak dialog yang bertuliskan Terima Kasih. 1.3 External Script Menempatkan kode program JavaScript secara terpisah, kode program terhubung dengan dokumen dengan meletakkanya pada elemen head. File JavaScript disimpan menggunakan ekstensi.js. 08.latihan_03.js function sayhello(){ alert("hello Dab!"); } 08.latihan_04.html <title>external Script</title> <script language="javascript" src="08.latihan_03.js"></script> <a href="#" onclick="sayhello();">klik Dong!</a> 2. JavaScript Object JavaScript memperlakukan setiap element pada browser / navigator sebagai sebuah object. Sebuah object akan memudahkan kita untuk mengakses dan memanipulasi sifat / properti dari object tersebut. Object ini diklasifikasikan berdasarkan hirarki / tingkatan khusus dan dapat diasosiasikan dengan kondisi dan sifat-sifat khusus (properti). Berikut ini adalah deskripsi dari tingkatan object yang ada didalam sebuah browser: Object yang terbesar adalah object window (jendela) dari browser. Didalam object window terdapat suatu object yang ditampilkan dalam bentuk halaman web yang disebut sebagai document. Object document memiliki banyak turunan. Contohnya : form, text, image, link, dll. 3

6 08.latihan_05.html <title>object Example</title> <a href="#" onclick="window.document.title='mengubah Object Document Title'"> Klik Dong! </a> Contoh latihan program diatas memperlihatkan kepada kita bagaimana cara mengubah properti dari sebuah object secara on the fly. Dimana pada saat event onclick dikenakan sebuah tautan, maka program JavaScript dengan segera mengubah title halaman web tersebut melalui hirarki object window.document.title. 2.1 Direct Object Operation Pada bagian sebelumnya telah dijelaskan bahwa sebuah object dapat diakses berdasarkan hirarki object itu didalam sebuah halaman web. Namun terdapat cara lain yang dapat digunakan untuk mengakses dan mengubah properti dari sebuah object. 4

7 JavaScript menggunakan fungsi getelementbyid() untuk mengakses suatu element tertentu berdasarkan identifier yang bersifat unik. Identifier ini didefinisikan melalui atribut element yang bernama id. Perhatikan contoh berikut : 08.latihan_06.html <title>direct Object Operation</title> <form action="" name="form1" method="post"> Nama : <input type="text" name="txtnama" id="txtnama_depan" /> </form> <a href="#" onclick="window.document.forms['form1'].txtnama.value='hierarchy'"> Hierarchy Way </a> - <a href="#" onclick="document.getelementbyid('txtnama_depan').value='direct'"> Direct Way </a> Program tersebut diatas digunakan untuk mengubah nilai (value) properti dari object textfield dengan perintah window.document.forms['form1'].txtnama.value yang kemudian digantikan dengan fungsi document.getelementbyid('txtnama_depan').value. Yang perlu dicermati adalah : jika menggunakan cara pertama (hirarki), sebuah properti dari element HTML dapat diakses dan diubah nilainya berdasarkan atribut name. Dari contoh program diatas, value dari atribut name adalah txtnama. Sedangkan jika menggunakan cara kedua (direct access), sebuah properti diakses dan diubah nilainya berdasarkan atribut id. Dari contoh latihan diatas, value dari atribut id adalah txtnama_depan. Dengan demikian paramenter yang digunakan oleh fungsi 5

8 getelementbyid() adalah value dari atribut id, yaitu txtnama_depan. 2.2 Object Lainnya Selain object window yang telah kita kenal sebelumnya, terdapat object-object standar JavaScript lainnya. Object-object ini distandarisasi oleh organisasi ECMA (European Computer Manufacturer Association). Diantaranya adalah sebagai berikut: Object Array Boolean Date Function Math Number RegExp String Keterangan Object ini memungkinkan kita untuk membuat sebuah array. Memeiliki berbagai Met ode yang memungkinkan kita untuk menambah, menghapus dan mengurutkan element-element yang terdapat didalamnya. Object ini memungkinkan kita untuk membuat nilai boolean. Object yang memungkinkan kita untuk membuat dan memanipulasi tanggal dan juga durasi waktu. Memungkinkan kita untuk membuat fungsi yang dapat kita definisikan sendiri menurut kebutuhan yang diinginkan. Object math memungkinkan kita untuk menggunakan fungsi-fungsi matematika. Contohnya : sqrt, round, max, dll. Object ini memungkinkan kita untuk melakukan operasi dasar terhadap sebuah bilangan. Memungkinkan kita untuk melakukan operasi pencarian string menggunakan teknik-teknik regular expression. Menyediakan metode untuk melakukan manipulasi terhadap sebuah string. 3. Variabel Variable adalah sebuah pengenal yang digunakan untuk menyimpan suatu nilai yang nilai tersebut dapat berubah-ubah selama dijalankannya program. 3.1 Deklarasi Variabel Terdapat dua cara yang digunakan untuk mendeklarasikan sebuah variabel pada JavaScript. Yaitu: a. Explisit Menuliskan variabel dengan diawali dengan keyword var kemudian diikuti nama variabel dan nilai yang dikandungnya. Contoh: var test = "Sesuatu"; var bil_1, bil_2, total; 6

9 b. Implisit Menuliskan variabel secara langsung diikuti dengan nilai yang dikandungnya. Contoh: test = "Sesuatu"; bil_1 = 5; bil_2 = 10; Sebagaimana bahasa pemrograman lain, terdapat aturan-aturan yang berkaitan dengan deklarasi sebuah variabel. Aturan-aturan itu adalah sebagai berikut: a. Terdiri dari huruf, angka dan karakter garis bawah ( _ ) atau kombinasi antara ketiganya. b. Tidak boleh mengandung spasi dan terdiri dari minimal satu karakter. c. Dimulai dengan huruf atau garis bawah, tidak boleh diawali dengan angka. d. Bersifat case sensitive, yaitu huruf besar dan kecil dibedakan. 08.latihan_07.html <title>javascript Variable</title> <script language="javascript"> var bil_1, bil_2, total; bil_1 = 5; bil_2 = 10; total = bil_1 * bil_2; document.writeln(bil_1 + " * " + bil_2 + " = " + total); </script> 7

10 3.2 Type Casting Seperti halnya PHP, JavaScript tidak mengenakan tipe data tertentu pada sebuah variabel atau bersifat variant. Dengan begitu, sebuah variabel dalam JavaScript dapat menampung jenis data yang berbeda-beda dalam satu siklus eksekusi program. Namun, JavaScript tetap menyediakan sebuah mekanisme untuk melihat tipe data dari sebuah variabel maupun konversi dari satu tipe data ke tipe data lainnya. 08.latihan_08.html <title>javascript Variable</title> <script language="javascript"> var sesuatu; sesuatu = 14; document.write("variabel sesuatu bertipe : " + typeof(sesuatu)); document.write("<br />"); sesuatu = "ada deh.."; document.write("variabel sesuatu bertipe : " + typeof(sesuatu)); </script> Dari contoh latihan diatas dapat kita lihat, bahwa variabel sesuatu dapat ditugasi untuk menampung dua nilai yang berbeda didalam satu siklus eksekusi program. Fungsi typeof() digunakan untuk melihat tipe data yang terkandung didalam variabel sesuatu. Type casting adalah mekanisme pengubahan / konversi sebuah variabel kepada tipe data tertentu. Sebagai contoh, kadangkala kita hanya ingin menggunakan bagian integer dari sebuah bilangan pecahan. Dalam JavaScript type casting ditangani oleh fungsi tertentu, berikut ini adalah beberapa fungsi yang dapat digunakan: 8

11 Number() String() Boolean() parseint() ParseFloat() 08.latihan_09.html <title>javascript Type Casting</title> <script language="javascript"> var sesuatu; sesuatu = 14; document.write("variabel sesuatu bertipe : " + typeof(sesuatu)); document.write("<br />"); sesuatu = String(sesuatu); document.write("variabel sesuatu bertipe : " + typeof(sesuatu)); document.write("<br />"); sesuatu = Boolean(sesuatu); document.write("variabel sesuatu bertipe : " + typeof(sesuatu)); </script> 4. Konstanta Konstanta adalah sebuah tetapan nilai dalam sebuah program. Nilai konstanta tidak dapat diubah selama program dijalankan dan jika dilakukan hanya akan menyebabkan error. Deklarasi konstanta dapat dilakukan dengan cara menuliskan keyword const diikuti dengan nama konstanta dan nilai dari konstanta tersebut. 9

12 Sebagaimana variabel, konstanta juga yang memiliki aturan yang harus diikuti. Aturan berikut memastikan kita untuk mendeklarasikan konstanta dengan benar: a. Hanya terdiri dari huruf, angka dan karakter garis bawah ( _ ) atau kombinasinya. b. Nama konstanta harus dimulai dengan huruf atau garis bawah ( _ ). c. Konstanta tidak dapat dideklarasikan ulang dan nilainya tetap. 08.latihan_10.html <title>javascript Constant</title> <script language="javascript"> const pi = 3.14; var radius = 100; var luas_lingkaran, keliling_lingkaran; luas_lingkaran = pi * (radius * radius); keliling_lingkaran = 2 * pi * radius; document.write("luas lingkaran : " + luas_lingkaran); document.write("<br />"); document.write("keliling lingkaran : " + keliling_lingkaran); </script> 5. Event Event adalah aksi yang dilakukan oleh seorang user terhadap object-object pada halaman web yang dapat memicu berjalannya program JavaScript. Sebuah event dituliskan sebagai atribut dari sebuah element HTML. Browser secara otomatis mengenali atributatribut tertentu sebagai sebuah event. Berikut ini adalah daftar atribut element yang akan 10

13 dikenali sebagai JavaScript event. Event Abort (onabort) Blur (onblur) Change (onchange) Click (onclick) Double Click (ondblclick) Drag and Drop (ondragdrop) Error (onerror) Keterangan Terjadi saat user menghentikan proses load image ke halaman web Terjadi ketika element kehilangan fokus, artinya user melakukan klik diluar element tersebut. Terjadi saat user memodifikasi isi data dari sebuah element input. Terjadi ketika user melakukan klik mouse terhadap suatu element yang berhubungan dengan event. Terjadi saat user melakukan klik dua kali pada suatu element yang berhubungan dengan event. Event jenis ini hanya didukung versi JavaScript 1.2 keatas. Terjadi ketika user melakukan drag drop terhadap suatu element didalam sebuah browser. Event jenis hanya didukung oleh versi JavaScript 1.2 keatas. Dijalankan ketika terdapat error pada saat memuat halaman. Event jenis hanya didukung oleh versi JavaScript 1.1 keatas. Focus (onfocus) Terjadi saat user memberikan fokus terhadap suatu element. Key Down (onkeydown) Key Press (onkeypress) Key Up (onkeyup) Load (onload) Mouse Over (onmouseover) Mouse Out (onmouseout) Reset (onreset) Submit (onsubmit) Resize (onresize) Terjadi ketika user menekan satu tombol keyboard. Event ini hanya didukung oleh versi JavaScript 1.2 keatas. Terjadi ketika user menekan dan tetap menahan tombol keyboard. Event ini hanya didukung oleh versi JavaScript 1.2 keatas. Terjadi saat user melepas tombol keyboard. Event ini hanya didukung oleh versi JavaScript 1.2 keatas. Terjadi pada saat browser memuat / memanggil suatu halaman web. Terjadi ketika user meletakkan kursor mouse diatas sebuah element. Terjadi saat kursor mouse meninggalkan posisinya dari atas sebuah element. Terjadi ketika user ingin menghapus (mengembalikan data keposisi awal) data pada suatu form. Pengahapusan data ini biasa dibantu melalui sebuah tombol input dengan tipe reset. Terjadi saat user ingin mengirimkan data yang telah diinputkan pada form. Terjadi ketika user mengubah ukuran dari jendela browser. Select (onselect) Terjadi saat user melakukan proses seleksi terhadap teks (sebagian atau semuanya) dari element textfield atau text area. Unload (onunload) Terjadi saat user hendak meninggalkan halaman yang sedang dimuat (diproses). 11

14 5.1 Event dan Object Tidak semua event dapat dihubungkan dengan sembarang object. Berikut ini adalah tabel hubungan antara event dan object yang dapat diasosiasikan. Event Abort Blur Change Click Double Click Drag Drop Error Focus Keydown Keypress Keyup Load Mouse Down Mouse Move Mouse Out Mouse Over Mouse Up Move Reset Submit Resize Select Unload Object Image FileUpload, Layer, Password, Button, Checkbox, Radio, Reset, Select, Submit, Textfield, Textarea, Window FileUpload, Select, Submit, Textfield, Textarea. Document, Link, Button, Checkbox, Radio, Reset, Select, Submit Document, Link Window Image, Window FileUpload, Layer, Password, Button, Checkbox, Radio, Reset, Select, Submit, Textfield, Textarea, Window Document, Image, Link, Textarea Document, Image, Link, Textarea Document, Image, Link, Textarea Image, Layer, Window Button, Document, Link Not Spesified Layer, Link Area, Layer, Link Button, Document, Link Window Form Form Window Textfield, Textarea Window 12

15 08.latihan_11.html <title>javascript Event</title> <a href="#" onmouseover="alert('kursor diatas link.');" onmouseout="alert('kursor berpindah tempat.');"> Klik Donk! </a> 6. Percabangan Pernyataan percabangan digunakan untuk membandingkan suatu kondisi. Jika kondisi itu bernilai benar, maka akan dijalankan ekspresi tertentu, tetapi jika kondisi itu bernilai salah akan dijalankan ekspresi yang lainnya. Percabangan yang digunakan pada sub-bab ini adalah if. 08.latihan_12.html <title>percabangan Pada JavaScript</title> <script language="javascript"> var nilai, index; nilai = 80; if(nilai >= 85 && nilai <= 100){ index = "A"; } else if(nilai >= 70){ 13

16 index = "B"; } else if(nilai >= 50){ index = "C"; } else if(nilai >= 30){ index = "D"; } else { index = "E"; } document.write("nilai anda adalah : " + nilai); document.write("<br />"); document.write("dengan index : " + index); </script> 7. Fungsi Fungsi adalah sebuah blok program yang merupakan sekumpulan statement yang bertujuan untuk menyelesaikan suatu tugas tertentu. Sebuah fungsi dibuat untuk membantu mengerjakan tugas yang kompleks secara efektif dan efisien. Karena setelah satu fungsi dibuat, ia dapat dipanggil dibagian program manapun untuk menyelesaikan suatu tugas secara-berulang ulang. Nama fungsi merupakan deklarasi nama fungsi yang akan kita buat. Dalam deklarasinya, fungsi harus memenuhi syarat-syarat sebagai berikut: Tidak boleh sama dengan fungsi yang sudah ada didalam JavaScript. Hanya terdiri dari huruf, angka dan garis bawah (underscore). Tidak boleh diawali dengan angka. Parameter bersifat optional. Namun tanda kurung harus tetap ditampilkan. 14

17 08.latihan_13.html <title>fungsi JavaScript</title> <script language="javascript"> function ckmarital(status){ document.getelementbyid('txtstatus').innerhtml = status; } </script> <form action="" method="post"> Sudah Menikah? : <input type="radio" name="rdmaritalstatus" value="sudah" onclick="ckmarital(this.value)" /> Sudah <input type="radio" name="rdmaritalstatus" value="belum" onclick="ckmarital(this.value)" /> Belum <br /> Status : <span id="txtstatus">tidak ditentukan</span> </form> Pada contoh program diatas, fungsi ckmarital() akan dijalankan jika element radio button mendapat event klik dari user. Jika kita perhatikan, kedua element radio button memanggil fungsi ckmarital() dengan parameter this.value. Jika diterjemahkan kedalam element radio button yang pertama, parameter this.value akan bernilai Sudah. Nilai ini berasal dari value atribut name yang didefinisikan pada element radio button yang pertama. Sedangkan untuk radio button yang kedua, paramer this.value akan bernilai Belum. Fungsi ckmerital() akan mengubah properti innerhtml pada object span dengan id txtstatus yang tadinya bernilai Tidak ditentukan dengan isi dari parameter fungsi. 15

18 8. Kotak Dialog Kotak dialog adalah satu element window yang tampil pada layer paling depan. Kotak dialog memungkinkan program untuk berinteraksi dengan user dengan cara : Memberikan peringatan kepada user. Memberikan pilihan kepada user. Meminta user untuk melengkapi isian pada suatu form field. 8.1 Alert Fungsi alert memungkinkan browser untuk menampilkan satu kotak dialog yang berisi satu tombol OK dan teks keterangan (sebagai satu satu parameter dari fungsi). Pada saat kotak dialog ini muncul, user tidak punya pilihan lain selain menekan tombol OK. 08.latihan_14.html <title>alert - Kotak Dialog</title> <script language="javascript"> alert("perhatian!"); alert("ini adalah contoh dari fungsi Alert."); </script> 16

19 8.2 Confirm Fungsi Confirm hampir sama seperti fungsi Alert, dengan tambahan kita bisa melakukan pilihan OK atau Cancel. Pada saat kita pilih OK maka fungsi ini akan mengirimkan nilai true dan mengirimkan nilai false jika kita memilih Cancel. 08.latihan_15.html <title>confirm - Kotak Dialog</title> <script language="javascript"> function ckmarital(){ if(confirm("apakah anda benar-benar sudah menikah?")){ document.getelementbyid("ckstatus").checked = true; } else { document.getelementbyid("ckstatus").checked = false; } } </script> <form action="" method="post"> Sudah Menikah? : <input type="checkbox" name="ckstatus" id="ckstatus" onclick="ckmarital()" /> Ya </form> Contoh program diatas dapat dijelaskan sebagai berikut : Program dijalankan ketika user menekan (event onclick) checkbox, kemudian fungsi ckmarital() segera dieksekusi. Program akan memberikan sebuah dialog konfirmasi untuk user melalui percabangan if. 17

20 Jika user menjawab OK, maka dialog konfirmasi akan mengembalikan nilai true yang mengakibatkan element input checkbox akan diberi checklist ( menjawab Cancel, maka element checkbox tidak akan diberi checklist. 8.3 Prompt ). Begitu pula jika user Fungsi ini sedikit berbeda dibandingkan kedua fungsi sebelumnya. Karena dilengkapi dengan satu cara untuk mendapatkan informasi yang diberikan oleh user. Fungsi ini terdiri dari 2 komponen: Pertama, teks untuk pertanyaan dan yang kedua adalah teks default dari field informasi yang akan diisi oleh user. 08.latihan_16.html <title>prompt - Kotak Dialog</title> <script language="javascript"> var nama; nama = prompt("siapakah nama kekasih anda?",""); document.write("nama kekasih anda adalah : " + nama); </script> Pada contoh program diatas, program melalui fungsi Prompt meminta user untuk menjawab sebuah pertanyaan. Jawaban user tersebut akan disimpan kedalam variabel nama untuk kemudian ditampilkan ke halaman web. 18

21 9. Validasi Form Pemanfaatan JavaScript yang sering dilakukan dalam operasi form adalah validasi. Validasi digunakan untuk memastikan user memberikan informasi sesuai yang programmer inginkan. Berikut ini adalah contoh dari pemanfaatan JavaScript untuk validasi form. 08.latihan_17.html <title>validasi Form</title> <script language="javascript"> function ckform(){ var str, error; str = ""; error = 0; if(document.getelementbyid("txtnama").value.length <= 0){ str += "- Nama tidak boleh kosong.\n"; error++; } if(document.getelementbyid("rdjeniskelamin_1").checked == false && document.getelementbyid("rdjeniskelamin_2").checked==false){ str += "- Jenis kelamin belum ditentukan.\n"; error++; } if(document.getelementbyid("txtalamat").value.length <= 0){ str += "- Alamat tidak boleh kosong.\n"; error++; } if(error > 0){ alert("terdapat kesalahan : \n" + str); return false; } else { return true; } } </script> <h2>formulir Biodata</h2> <form action="08.latihan_18.php" method="post" onsubmit="return ckform()"> Nama : <input type="text" name="txtnama" id="txtnama" /> <br /> Jenis Kelamin : <input type="radio" name="rdjeniskelamin" id="rdjeniskelamin_1" value="laki-laki" /> Laki-Laki <input type="radio" name="rdjeniskelamin" id="rdjeniskelamin_2" value="perempuan" /> Perempuan <br /> Alamat : <textarea name="txtalamat" id="txtalamat"></textarea> 19

22 <br /> <input type="submit" value="submit" /> </form> 08.latihan_18.php <?php echo "<pre>"; print_r($_post); echo "</pre>";?> 20

23 DAFTAR PUSTAKA 1. Alamsyah, Andry Pengantar JavaScript. IlmuKomputer.Com. 2. Hartanto, Anggit Dwi Modul Praktikum Pemrograman Web (Dasar). STMIK AMIKOM Yogyakarta. 21