MODUL PEMROGRAMAN WEB
JAVASCRIPT
Rajif Agung Yunmar, S.Kom
STMIK “AMIKOM” Yogyakarta
2011
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
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 language="JavaScript"> ... </script>.
0 8 .latihan_ 0 1 . php
<html> <head> <title>Embedded Script</title> <head> <body> <p>Program JavaScript Pertama Saya!</p> <script language="JavaScript"> alert("Hello Dab!"); </script> </body></html>
1
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
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
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
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 :
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, 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
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 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:
var test = "Sesuatu";var bil_1, bil_2, total;
6
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
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.
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.
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
• 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
dengan nama konstanta dan nilai dari konstanta tersebut.
9
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 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 atribut-
atribut tertentu sebagai sebuah event. Berikut ini adalah daftar atribut element yang akan
10
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
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
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
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
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
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
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
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
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
<br /> <input type="submit" value="Submit" /> </form> </body></html>
0 8 .latihan_ 1 8 . php
<?php
echo "<pre>";print_r($_POST);echo "</pre>";
?>
20
DAFTAR PUSTAKA
1. Alamsyah, Andry. 2003. Pengantar JavaScript. IlmuKomputer.Com.
2. Hartanto, Anggit Dwi. 2009. Modul Praktikum Pemrograman Web (Dasar). STMIK
AMIKOM Yogyakarta.
21