• Tidak ada hasil yang ditemukan

MODUL PEMROGRAMAN WEB

N/A
N/A
Protected

Academic year: 2022

Membagikan "MODUL PEMROGRAMAN WEB"

Copied!
23
0
0

Teks penuh

(1)

MODUL PEMROGRAMAN WEB

JAVASCRIPT

Rajif Agung Yunmar, S.Kom

STMIK “AMIKOM” Yogyakarta

2011

(2)

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

(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 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>

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

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>

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

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.

(6)

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.

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

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

(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 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;

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

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>

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

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:

(11)

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.

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

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

(13)

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

(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 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

(15)

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){

(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>

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

(17)

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.

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

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>

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

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.

(20)

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.

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

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>

(22)

<br />

<input type="submit" value="Submit" />

</form>

</body>

</html>

0

8 .latihan_ 1 8 . php

<?php

echo "<pre>";

print_r($_POST);

echo "</pre>";

?>

(23)

DAFTAR PUSTAKA

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

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

Referensi

Dokumen terkait

rahmat serta karunia-Nya dapat terselesaikan skripsi yang berujudul “ Analisis Likuiditas, Profitabilitas, dan Leverage untuk Memprediksi Kondisi Financial Distress

Kendali optimal sistem suspensi mobil yang didesain secara off-line (K didesain pada massa mobil tertentu), jika massa mobil berubah dari muatan kosong ke muatan penuh, sistem

Hasil penelitian ini membuktikan bahwa metoda ceramah tanya jawab dapat memperjelas informasi yang terkandung dalam buklet secara bermakna sehingga efektif meningkatkan

Diharapkan penelitian ini akan dapat memberikan masukan berguna bagi investor muda Surabaya mengenai sejauh mana.. motivasi berinvestasi individu mempengaruhi

RPP dikembangkan dengan mengacu pada prinsip-prinsip pengembangan RPP yang baik menurut Peraturan Menteri Pendidikan Nasional Republik Indonesia Nomor 41 Tahun 2007

tanggal 20-3-1982 (dua puluh Maret seribu --- sembilan ratus delapan puluh dua), Warga Negara - Indonesia, karyawan swasta, bertempat tinggal di- Kota Bekasi, Jalan Pulau Bangka

Tren saat ini yaitu Value at Risk (VaR) merupakan suatu metode pengukuran risiko secara statistik yang memperkirakan kerugian maksimum yang mungkin terjadi atas suatu

Pada Gambar 6 merupakan grafik kecepatan angin dengan putaran turbin yang dilakukan dengan dibuat analisa grafik maka dapat dilihat kecenderungan pada