MODUL PEMROGRAMAN WEB -...

23
MODUL PEMROGRAMAN WEB JAVASCRIPT Rajif Agung Yunmar, S.Kom STMIK “AMIKOM” Yogyakarta 2011

Transcript of MODUL PEMROGRAMAN WEB -...

Page 1: MODUL PEMROGRAMAN WEB - E-Learningelearning.amikom.ac.id/index.php/download/materi/555149-DT066-22/... · JavaScript adalah bahasa pemrograman berbasiskan client side scripting. ...

MODUL PEMROGRAMAN WEB

JAVASCRIPT

Rajif Agung Yunmar, S.Kom

STMIK “AMIKOM” Yogyakarta

2011

Page 2: MODUL PEMROGRAMAN WEB - E-Learningelearning.amikom.ac.id/index.php/download/materi/555149-DT066-22/... · JavaScript adalah bahasa pemrograman berbasiskan client side scripting. ...

DAFTAR ISI

JavaScript .................................................................................................................... 1

1. Memasukkan JavaScript ........................................................................................ 1

1.1 Embedded Script .............................................................................................. 1

1.2 Inline Script ....................................................................................................... 2

1.3 External Script .................................................................................................. 3

2. JavaScript Object .................................................................................................... 3

2.1 Direct Object Operation .................................................................................... 4

2.2 Object Lainnya .................................................................................................. 6

3. Variabel ................................................................................................................... 6

3.1 Deklarasi Variabel ............................................................................................. 6

3.2 Type Casting ..................................................................................................... 8

4. Konstanta ................................................................................................................ 9

5. Event ....................................................................................................................... 10

5.1 Event dan Object .............................................................................................. 12

6. Percabangan .......................................................................................................... 13

7. Fungsi ..................................................................................................................... 14

8. Kotak Dialog ........................................................................................................... 16

8.1 Alert ................................................................................................................... 16

8.2 Confirm ............................................................................................................. 17

8.3 Prompt .............................................................................................................. 18

9. Validasi .................................................................................................................... 19

Daftar Pustaka ............................................................................................................. 21

Page 3: MODUL PEMROGRAMAN WEB - E-Learningelearning.amikom.ac.id/index.php/download/materi/555149-DT066-22/... · JavaScript adalah bahasa pemrograman berbasiskan client side scripting. ...

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 1995. 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 1995. Pada saat

yang bersamaan Microsoft sendiri mencoba untuk mengadaptasikan teknologi ini yang

mereka sebut sebagai "Jscript" di browser Internet Explorer 3.

1. Memasukkan JavaScript

1.1 Embedded Script

Kode program JavScript ditanamkan langsung didalam halaman HTML. Kode program

disisipkan diatara tag <script type="JavaScript"> ... </script>.

0 8 .latihan_ 0 1 . php

<html> <head> <title>Embedded Script</title> <head> <body> <p>Program JavaScript Pertama Saya!</p> <script type="JavaScript"> alert("Hello Dab!"); </script> </body></html>

1

Page 4: MODUL PEMROGRAMAN WEB - E-Learningelearning.amikom.ac.id/index.php/download/materi/555149-DT066-22/... · JavaScript adalah bahasa pemrograman berbasiskan client side scripting. ...

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.

0 8 .latihan_ 0 2 . php

<html> <head> <title>Inline Script</title> <head> <body> <a href="#" onClick="alert('Terima Kasih.');">Klik Dong!</a> </body></html>

2

Page 5: MODUL PEMROGRAMAN WEB - E-Learningelearning.amikom.ac.id/index.php/download/materi/555149-DT066-22/... · JavaScript adalah bahasa pemrograman berbasiskan client side scripting. ...

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.

0 8 .latihan_ 0 3 . js

function sayHello(){ alert("Hello Dab!");}

0 8 .latihan_ 0 4 . html

<html> <head> <title>External Script</title> <script language="JavaScript" src="08.latihan_03.js"></script> <head> <body> <a href="#" onClick="sayHello();">Klik Dong!</a> </body></html>

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

Page 6: MODUL PEMROGRAMAN WEB - E-Learningelearning.amikom.ac.id/index.php/download/materi/555149-DT066-22/... · JavaScript adalah bahasa pemrograman berbasiskan client side scripting. ...

0 8 .latihan_ 0 5 . html

<html> <head> <title>Object Example</title> <head> <body> <a href="#" onClick="window.document.title='Mengubah Object Document Title'">

Klik Dong! </a> </body></html>

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

Page 7: MODUL PEMROGRAMAN WEB - E-Learningelearning.amikom.ac.id/index.php/download/materi/555149-DT066-22/... · JavaScript adalah bahasa pemrograman berbasiskan client side scripting. ...

JavaScript menggunakan fungsi getElementById() untuk mengakses suatu object

dibawah object document secara langsung.

Untuk pengaksesan secara langsung, sebuah element harus mempunyai identifier unik

yang didefinisikan melalui sebuah atribut element yang bernama id. Perhatikan contoh

berikut:

0 8 .latihan_ 0 6 . html

<html> <head> <title>Direct Object Operation</title> <head> <body> <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> </body></html>

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, isi atribut name adalah txtNama.

Sedangkan jika menggunakan cara kedua (direct access), sebuah properti diakses dan

5

Page 8: MODUL PEMROGRAMAN WEB - E-Learningelearning.amikom.ac.id/index.php/download/materi/555149-DT066-22/... · JavaScript adalah bahasa pemrograman berbasiskan client side scripting. ...

diubah nilainya berdasarkan atribut id. Dari contoh latihan diatas, isi dari atribut id adalah

txtNama_Depan. Dengan demikian paramenter yang digunakan oleh fungsi

getElementById() adalah isi 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 Keterangan

Array 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.

Boolean Object ini memungkinkan kita untuk membuat nilai boolean.

Date Object yang memungkinkan kita untuk membuat dan memanipulasi tanggal dan juga durasi waktu.

Function Memungkinkan kita untuk membuat fungsi yang dapat kita definisikan sendiri menurut kebutuhan yang diinginkan.

Math Object math memungkinkan kita untuk menggunakan fungsi-fungsi matematika. Contohnya : sqrt, round, max, dll.

Number Object ini memungkinkan kita untuk melakukan operasi dasar terhadap sebuah bilangan.

RegExp Memungkinkan kita untuk melakukan operasi pencarian string menggunakan teknik-teknik regular expression.

String 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:

6

Page 9: MODUL PEMROGRAMAN WEB - E-Learningelearning.amikom.ac.id/index.php/download/materi/555149-DT066-22/... · JavaScript adalah bahasa pemrograman berbasiskan client side scripting. ...

var test = "Sesuatu";var bil_1, bil_2, total;

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.

0 8 .latihan_ 0 7 . html

<html> <head> <title>JavaScript Variable</title> <head> <body> <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> </body></html>

7

Page 10: MODUL PEMROGRAMAN WEB - E-Learningelearning.amikom.ac.id/index.php/download/materi/555149-DT066-22/... · JavaScript adalah bahasa pemrograman berbasiskan client side scripting. ...

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.

0 8 .latihan_ 0 8 . html

<html> <head> <title>JavaScript Variable</title> <head> <body> <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> </body></html>

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.

3.2 Type Casting

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,

8

Page 11: MODUL PEMROGRAMAN WEB - E-Learningelearning.amikom.ac.id/index.php/download/materi/555149-DT066-22/... · JavaScript adalah bahasa pemrograman berbasiskan client side scripting. ...

berikut ini adalah beberapa fungsi yang dapat digunakan:

• Number()

• String()

• Boolean()

• parseInt()

• ParseFloat()

0 8 .latihan_ 0 9 . html

<html> <head> <title>JavaScript Type Casting</title> <head> <body> <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> </body></html>

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

9

Page 12: MODUL PEMROGRAMAN WEB - E-Learningelearning.amikom.ac.id/index.php/download/materi/555149-DT066-22/... · JavaScript adalah bahasa pemrograman berbasiskan client side scripting. ...

dengan nama konstanta dan nilai dari konstanta tersebut.

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.

0 8 .latihan_ 1 0 . html

<html> <head> <title>JavaScript Constant</title> <head> <body> <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> </body></html>

5. Event

Event adalah aksi yang dilakukan oleh seorang user berkaitan dengan object-object

halaman web yang dapat memicu berjalannya program JavaScript. Sebuah event

dituliskan sebagai atribut dari sebuah element HTML. Browser secara otomatis mengenali

10

Page 13: MODUL PEMROGRAMAN WEB - E-Learningelearning.amikom.ac.id/index.php/download/materi/555149-DT066-22/... · JavaScript adalah bahasa pemrograman berbasiskan client side scripting. ...

atribut-atribut tertentu sebagai sebuah event. Berikut ini adalah daftar atribut element yang

akan dikenali sebagai JavaScript event.

Event Keterangan

Abort (onAbort) Terjadi saat user menghentikan proses load image ke halaman web

Blur (onBlur) Terjadi ketika element kehilangan fokus, artinya user melakukan klik diluar element tersebut.

Change (onChange)

Terjadi saat user memodifikasi isi data dari sebuah element input.

Click (onClick) Terjadi ketika user melakukan klik mouse terhadap suatu element yang berhubungan dengan event.

Double Click(onDblclick)

Terjadi saat user melakukan klik dua kali pada suatu element yang berhubungan dengan event. Event jenis ini hanya didukung versi JavaScript 1.2 keatas.

Drag and Drop (onDragdrop)

Terjadi ketika user melakukan drag drop terhadap suatu element didalam sebuah browser. Event jenis hanya didukung oleh versi JavaScript 1.2 keatas.

Error (onError) 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)

Terjadi ketika user menekan satu tombol keyboard. Event ini hanya didukung oleh versi JavaScript 1.2 keatas.

Key Press (onKeypress)

Terjadi ketika user menekan dan tetap menahan tombol keyboard. Event ini hanya didukung oleh versi JavaScript 1.2 keatas.

Key Up (onKeyup)

Terjadi saat user melepas tombol keyboard. Event ini hanya didukung oleh versi JavaScript 1.2 keatas.

Load (onLoad) Terjadi pada saat browser memuat / memanggil suatu halaman web.

Mouse Over (onMouseover)

Terjadi ketika user meletakkan kursor mouse diatas sebuah element.

Mouse Out (onMouseout)

Terjadi saat kursor mouse meninggalkan posisinya dari atas sebuah element.

Reset (onReset) 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.

Submit (onSubmit)

Terjadi saat user ingin mengirimkan data yang telah diinputkan pada form.

Resize (onResize)

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

Page 14: MODUL PEMROGRAMAN WEB - E-Learningelearning.amikom.ac.id/index.php/download/materi/555149-DT066-22/... · JavaScript adalah bahasa pemrograman berbasiskan client side scripting. ...

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 Object

Abort Image

Blur FileUpload, Layer, Password, Button, Checkbox, Radio, Reset, Select, Submit, Textfield, Textarea, Window

Change FileUpload, Select, Submit, Textfield, Textarea.

Click Document, Link, Button, Checkbox, Radio, Reset, Select, Submit

Double Click Document, Link

Drag Drop Window

Error Image, Window

Focus FileUpload, Layer, Password, Button, Checkbox, Radio, Reset, Select, Submit, Textfield, Textarea, Window

Keydown Document, Image, Link, Textarea

Keypress Document, Image, Link, Textarea

Keyup Document, Image, Link, Textarea

Load Image, Layer, Window

Mouse Down Button, Document, Link

Mouse Move Not Spesified

Mouse Out Layer, Link

Mouse Over Area, Layer, Link

Mouse Up Button, Document, Link

Move Window

Reset Form

Submit Form

Resize Window

Select Textfield, Textarea

Unload Window

12

Page 15: MODUL PEMROGRAMAN WEB - E-Learningelearning.amikom.ac.id/index.php/download/materi/555149-DT066-22/... · JavaScript adalah bahasa pemrograman berbasiskan client side scripting. ...

0 8 .latihan_ 11 . html

<html> <head> <title>JavaScript Event</title> <head> <body> <a href="#" onMouseOver="alert('Kursor diatas link.');"

onMouseOut="alert('Kursor berpindah tempat.');"> Klik Donk! </a> </body></html>

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.

0 8 .latihan_ 1 2 . html

<html> <head> <title>Percabangan Pada JavaScript</title> <head> <body> <script language="JavaScript"> var nilai, index; nilai = 80; if(nilai >= 85 && nilai <= 100){ index = "A"; } else if(nilai >= 70){

13

Page 16: MODUL PEMROGRAMAN WEB - E-Learningelearning.amikom.ac.id/index.php/download/materi/555149-DT066-22/... · JavaScript adalah bahasa pemrograman berbasiskan client side scripting. ...

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> </body></html>

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

Page 17: MODUL PEMROGRAMAN WEB - E-Learningelearning.amikom.ac.id/index.php/download/materi/555149-DT066-22/... · JavaScript adalah bahasa pemrograman berbasiskan client side scripting. ...

0 8 .latihan_ 1 3 . html

<html> <head> <title>Fungsi JavaScript</title> <script language="JavaScript"> function ckMarital(status){ document.getElementById('txtStatus').innerHTML = status; } </script> <head> <body> <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> </body></html>

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

Page 18: MODUL PEMROGRAMAN WEB - E-Learningelearning.amikom.ac.id/index.php/download/materi/555149-DT066-22/... · JavaScript adalah bahasa pemrograman berbasiskan client side scripting. ...

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.

0 8 .latihan_ 1 4 . html

<html> <head> <title>Alert - Kotak Dialog</title> <head> <body> <script language="JavaScript"> alert("Perhatian!"); alert("Ini adalah contoh dari fungsi Alert."); </script> </body></html>

16

Page 19: MODUL PEMROGRAMAN WEB - E-Learningelearning.amikom.ac.id/index.php/download/materi/555149-DT066-22/... · JavaScript adalah bahasa pemrograman berbasiskan client side scripting. ...

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.

0 8 .latihan_ 1 5 . html

<html> <head> <title>Confirm - Kotak Dialog</title> <head> <body> <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> </body></html>

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

Page 20: MODUL PEMROGRAMAN WEB - E-Learningelearning.amikom.ac.id/index.php/download/materi/555149-DT066-22/... · JavaScript adalah bahasa pemrograman berbasiskan client side scripting. ...

Jika user menjawab OK, maka dialog konfirmasi akan mengembalikan nilai true yang

mengakibatkan element input checkbox akan diberi checklist ( ). Begitu pula jika user

menjawab Cancel, maka element checkbox tidak akan diberi checklist.

8.3 Prompt

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.

0 8 .latihan_ 1 6 . html

<html> <head> <title>Prompt - Kotak Dialog</title> <head> <body> <script language="JavaScript"> var nama; nama = prompt("Siapakah nama kekasih anda?",""); document.write("Nama kekasih anda adalah : " + nama); </script> </body></html>

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

Page 21: MODUL PEMROGRAMAN WEB - E-Learningelearning.amikom.ac.id/index.php/download/materi/555149-DT066-22/... · JavaScript adalah bahasa pemrograman berbasiskan client side scripting. ...

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.

0 8 .latihan_ 1 7 . html

<html> <head> <title>Validasi Form</title> <head> <body> <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

Page 22: MODUL PEMROGRAMAN WEB - E-Learningelearning.amikom.ac.id/index.php/download/materi/555149-DT066-22/... · JavaScript adalah bahasa pemrograman berbasiskan client side scripting. ...

<br /> <input type="submit" value="Submit" /> </form> </body></html>

0 8 .latihan_ 1 8 . php

<?php

echo "<pre>";print_r($_POST);echo "</pre>";

?>

20

Page 23: MODUL PEMROGRAMAN WEB - E-Learningelearning.amikom.ac.id/index.php/download/materi/555149-DT066-22/... · JavaScript adalah bahasa pemrograman berbasiskan client side scripting. ...

DAFTAR PUSTAKA

1. Alamsyah, Andry. 2003. Pengantar JavaScript. IlmuKomputer.Com.

2. Hartanto, Anggit Dwi. 2009. Modul Praktikum Pemrograman Web (Dasar). STMIK

AMIKOM Yogyakarta.

21