Tujuan Instruksional Umum : Agar mahasiswa dapat mengenal dan memahami pembuatan objek sendiri pada JavaScript

(1)

Pemrograman Web : HTML & JavaScript/Sarwati Rahayu, ST., MMSI 1

O B J E K 1

Tujuan Instruksional Umum :

Agar mahasiswa dapat mengenal dan memahami pembuatan objek sendiri pada JavaScript

Tujuan Instruksional Khusus :

- Mahasiswa dapat membuat objek-objek yang diciptakan sendiri pada JavaScript - Mahasiswa dapat membuat objek-objek dengan notasi literal

- Mahasiswa dapat membuat objek yang dapat berinteraksi dengan objek HTML Pokok Bahasan :

- Definisi Objek - Objek buatan

- Objek dengan notasi literal

- Interaksi dengan objek HTML (objek form, objek button, objek text, objek checkbox, objek radio, objek password, upload berkas

Daftar Pustaka :

- Abdul Kadir, Pemrograman Web Mencakup : HTML, CSS, JavaScript & PHP, Penerbit Andi, Yogyakarta, 2002

- Anthony Pranata, Panduan Pemrograman JavaScript, Penerbit Andi, Ypgyakarta, 2002

- Betha Sidik, etc, Pemrograman Web dengan HTML, Penerbit Informatika, Bandung, 2002

- DR. Erhans A, Membuat Desain Web dengan JavaScript, Penerbit PT. Ercontara Rajawali,

Jakarta, 2002

- Inixindo, Pengembangan HomePage & Intranet, Jakarta 1998

(2)

Pemrograman Web : HTML & JavaScript/Sarwati Rahayu, ST., MMSI 2

13.1. Definisi Objek

Jika ingin membuat sebuah objek, ada beberapa hal yang harus dikerjakan. Pertama, mendefinisikan fungsi yang akan menjadi metode bagi objek, dan kedua membuat konstruktor objek. Konstruktor adalah fungsi yang berisi definisi properti dan menghubungkan metode-metode objek dengan definisi fungsi. Bentuk umum konstruktor adalah sebagai berikut :

Function namaObjek (arg1, …., arg2) {

// properti objek

this.nama_properti = arg2;

//Metode Objek

this.namaMetode = nmaFungsi; }

Selain dapat membuat objek sendiri, JavaScript menyediakan banyak objek yang dapat digunakan. Pada dasarnya tedapat tiga macam objek :

1. Objek bawaan

Objek yang tidak berhubungand dengan browser maupun halaman HTML. 2. Objek Browser

Objek yang berhubungan dengan browser pengguna

3. Objek HTML

Objek yang berhubungan dengan dokumen HTML yang dimuat di browser.

13.2. Objek Buatan

Untuk membuat objek buatan, bentuk umumnya adalah :

namaVariabel=new konstruktorObjek(daftarParameter); Perhatikan contoh berikut ini :

FILE : skrip13-1.htm <HTML> <HEAD> <TITLE>Membuat Objek</TITLE> </HEAD> <BODY>

<SCRIPT LANGUAGE = "JavaScript"> <!--

function perolehWarna () { return(this.warna); }

(3)

Pemrograman Web : HTML & JavaScript/Sarwati Rahayu, ST., MMSI 3 Lanjutan FILE : skrip13-1.htm

2. FILE : web9-2.htm

Gambar 13.1 Hasil skrip13-1.htm function ubahWarna (warna) {

this.warna = warna; } function tampilkanInfoMobil() { document.write("Tipe : " + this.tipe + "<BR>"); document.write("Merk : " + this.merk + "<BR>"); document.write("cc : " + this.cc + "<BR>"); document.write("Warna: " + this.warna + "<BR>"); }

function Mobil(tipe, merk, cc, warna) { // Properti this.tipe = tipe; this.merk = merk; this.cc = cc; this.warna = warna; // Metode this.perolehWarna = perolehWarna; this.ubahWarna = ubahWarna; this.tampilkanInfoMobil = tampilkanInfoMobil; }

// Membuat objek berdasarkan Mobil

var mobilku = new Mobil("Grand Extra", "Toyota", 1500, "Abu-abu Metalik"); mobilku.tampilkanInfoMobil(); document.write("<HR>"); mobilku.ubahWarna("Merah Metalik"); mobilku.tampilkanInfoMobil(); //--> </SCRIPT> </BODY> </HTML> //--> </SCRIPT> </BODY> </HTML>

(4)

Pemrograman Web : HTML & JavaScript/Sarwati Rahayu, ST., MMSI 4 13.3. Objek dengan Notasi Literal

Objek dapat dibuat dengan menggunakan notasi literal dengan bentuk umum sebagai berikut : namaObjek = { properti_1:nilai1, ...,properti_n : nilai_n};

Tanda kurung yang digunakan adalah tanda kurung kurawal {}. Perhatikan contoh di bawah ini :

FILE : skrip13-2.htm

Gambar 13.2 Hasil skrip13-2.htm

13.4. Interaksi dengan Objek HTML

Objek yang berhubungan dengan dokumen HTML yang dimuat di browser antara lain objek form, objek button, objek text, objek checkbox, objek radio, objek password, dan lain-lainnya.

<TITLE>Objek dengan Notasi Literal</TITLE> </HEAD>

<BODY>

// Membuat objek berdasarkan Mata Kuliah var kuliah = {matakuliah: "Pemrograman Web", dosen: "Sarwati Rahayu"}; document.write(kuliah.matakuliah + "<BR>"); document.write(kuliah.dosen + "<BR>"); //--> </SCRIPT> </BODY> </HTML>

(5)

Pemrograman Web : HTML & JavaScript/Sarwati Rahayu, ST., MMSI 5 13.4.1. Objek Form

Form yang pernah dipelajari pada bab-bab sebelumnya mempunyai dua buah atribut yaitu METHOD dan ACTION. Formulir beserta atribut-atributnya dapat diakses dengan menggunakan JavaScript.

Selain atribut-atribut di atas ada beberapa atribut lainnya yang menyertai formulir, diantaranya :

1. Atribut NAME

Menyatakan nama formulir.

2. Atribut ENCTYPE

Menentukan jenis data pada URL. Misalnya berisi ”text/ascii” . Pada Java Script, metode ini dinyatakan dengan properti encoding.

3. Atribut TARGET

Menentukan hasil formulir yang akan ditempatkan pada frame atau halaman. 4. onSubmit

Penanganan kejadian jika tombol submit diklik 5. onReset

Penanganan kejadian jika tombol reset diklik

Perhatikan contoh berikut ini :

FILE : skrip13-3.htm <HTML> <HEAD> <TITLE>Contoh FORM</TITLE> </HEAD> <BODY>

<FORM NAME = "form1" METHOD = "POST"

ACTION = "skrip13-2.htm"

onSubmit = "alert('Tombol OK diklik')" onReset = "alert('Tombol Batal diklik')">

Masukkan nama Anda : <INPUT TYPE = "TEXT" NAME = "nama" ><BR> <INPUT TYPE = "SUBMIT" VALUE=" OK " >

document.write("Formulir akan menjalankan "); document.write(document.forms[0].action); document.write(" jika tombol OK diklik"); //-->

</SCRIPT> </BODY> </HTML>

(6)

Pemrograman Web : HTML & JavaScript/Sarwati Rahayu, ST., MMSI 6 Jika file skrip13-3.htm dijalankan kemudian isikan nama Anda pada text box yang tersedia, maka hasilnya sebagai berikut :

Gambar 13.3 Hasil skrip13-3 Jika tombol OK diklik maka akan ada jendela pesan seperti dibawah ini :

Gambar 13.4 Jendela Alert

Pada jendela alert tersebut, klik OK maka browser kan menampilkan isi file skrip13-2.htm :

Gambar 13.5 Pemanggilan file skrip13-2.htm

13.4.2. Objek Button

Tipe input pada formulir digunakan untuk memasukkan sebuah input yang biasanya menggunakan beberpa atribut yang terdapat pada tag <INPUT>.

(7)

Pemrograman Web : HTML & JavaScript/Sarwati Rahayu, ST., MMSI 7 Beberapa atribut yang terdapat dalam tag <INPUT> dapat diproses dalam Java Script, diantaranya : 1. Atribut NAME

Menyatakan variabel dari sebuah masukkan

2. Atribut Value

Menyatakan judul pada tombol 3. onClick()

Penanganan kejadian jika tombol ini diklik

Perhatikan contoh berikut ini :

Gambar 13.6 Pemanggilan file skrip13-4.htm <HTML>

<HEAD>

<TITLE>Contoh FORM</TITLE> </HEAD>

<BODY>

<FORM NAME = "form1" METHOD = "POST"

ACTION = "skrip13-2.htm"

onSubmit = "alert('Tombol OK diklik')" onReset = "alert('Tombol Batal diklik')">

Masukkan nama Anda : <INPUT TYPE = "TEXT" NAME = "nama" ><BR> <INPUT TYPE = "SUBMIT" VALUE=" OK " >

document.write("Formulir akan menjalankan "); document.write(document.forms[0].action); document.write(" jika tombol OK diklik"); //-->

</SCRIPT> </BODY> </HTML>

(8)

Pemrograman Web : HTML & JavaScript/Sarwati Rahayu, ST., MMSI 8 Pada gambar 13.6 di atas, jika tombol on diklik maka jendela browser akan menampilkan jendela alert seperti di bawah ini :

Gambar 13.7Alert tampilan akan menjadi off

Jika pada jendela alert tombol OK diklik, maka tombol akan berubah menjadi Off dan begitu seterusnya.

13.4.3. Objek Text

Pada tag <INPUT> terdapat pula atribut text yang biasanya digunakan untuk memasukkan data dari keyboard. Text ini dapat diproses pada JavaScript dan dinamakan sebagai objek teks. Beberapayang berhubungan dengan text yang digunakan pada JavaScript :

1. TYPE

Menyatakan jenis atribut dari TYPE 2. NAME

Menyatakan variabel

3. VALUE

Menyatakan isi dari field teks 4. onBlur

Penanganan kejadian saat field teks tidak disorot lagi 5. onChange

Penanganan kejadian saat isi field teks ini berubah 6. onFocus

Penanganan kejadian saat field teks ini menjadi fokus 7. onSelect

Penanganan kejadian saat isi field teks ini dipilih (diblok 8. focus()

Identik kalau field teks ini diklik 9. blur()

Identik kalau field teks ini ditinggalkan 10. select()

(9)

Pemrograman Web : HTML & JavaScript/Sarwati Rahayu, ST., MMSI 9 Perhatikan contoh di berikut ini :

Lanjutan FILE : skrip13-5.htm

Jika program tersebut dijalankan, maka browser akan menampilkan sebagai berikut, kemudian isikan nama dan alamat pada kotak yang telah tersedia :

Gambar 13.8 Hasil skrip13-5.htm <HTML>

<HEAD>

<TITLE>Memeriksa Objek text</TITLE> </HEAD>

<BODY>

function cekIsiField() {

if (document.form1.elements[0].value == "") { alert("Nama harap diisi");

document.form1.elements[0].focus(); return;

}

if (document.form1.elements[1].value == "") { alert("alamat harap diisi");

document.form1.elements[1].focus(); return; } window.location.href = "skrip13-2.htm"; } //--> </SCRIPT>

Nama : <INPUT TYPE = "TEXT" NAME = "nama"><BR> Alamat: <INPUT TYPE = "TEXT" NAME = "alamat"> <BR>

</FORM> </BODY> </HTML>

(10)

Pemrograman Web : HTML & JavaScript/Sarwati Rahayu, ST., MMSI 10 Jika salah satu kotak tidak disi (nama atau alamat), kemudian tombol Kirim diklik, maka browser akan menampilkan sebuah pesan berbentuk jendela alert seperti di bawah ini :

Gambar 13.9 salah satu field tidak diisi

Tetapi jika semua field telah terisi, maka browser akan menjalankan file skrip13-2.htm.

13.4.4. Objek CheckBox

Kotak CheckBox berguna untuk melakukan pilihan yang kemungkinannya ada dua, yaitu bisa dipilih atau bisa juga tidak. Objek checkbox dapat diproses dengan JavaScript. Beberapa hal yang berhubungan dengan objek checkbox, diantaranya :

1. Atribut CHECKED

Digunakan untuk memberikan keadaan awal agar kotak check dalam keadaan dicentang. Pada JavaScript atribut ini identik dengan properti defaultChecked.

2. Properti Checked

Untuk mengetahui keadaan kotak check. Nilainya true jika kotak check dalam keadaan tercentang dan false untuk keadaan sebaliknya.

3. onClick

Menyatakan penanganan kejadian saat kotak check diklik. Perhatikan contoh berikut ini :

(11)

Pemrograman Web : HTML & JavaScript/Sarwati Rahayu, ST., MMSI 11 FILE : skrip13-6.htm <HTML> <HEAD> <TITLE>Kotak Cek</TITLE> </HEAD> <BODY> Pilihlah maksimal 15 SKS<BR>

<!--

function cekKRS() { var jum_sks = 0;

for (var i = 0; i < 7; i++) {

if (document.formTes.elements[i].checked) jum_sks += matakuliah[i][2];

}

document.formTes.fieldJumlah.value = jum_sks; if (jum_sks > 15)

alert("Anda harus mengurangi SKS\n" + "karena melebihi 15 SKS"); }

function cekKirim() {

if (document.formTes.fieldJumlah.value > 15) alert("Anda harus mengurangi SKS\n" + "karena melebihi 15 SKS"); else

window.location.href = "url"; }

var matakuliah =

[ ["TI201", "Pemrograman Tertruktur", 3], ["TI202", "Pengenalan Basis Data", 3], ["TI203", "Komunikasi Data", 3], ["TI204", "Teknologi Informasi", 3], ["TI205", "Sistem Berkas", 3], ["IN201", "Bahasa Inggris II", 2], ["FI201", "Fisika Dasar II", 3] ];

document.write("<TABLE BORDER = '2'>");

document.write("<TR><TH>Kode</TH><TH>Matakuliah</TH>"); document.write("<TH>SKS</TH><TH>Pilihan</TH></TR>"); for (var i = 0; i < 7; i++) {

document.write("<TR><TD>" + matakuliah[i][0] + "</TD><TD>" + matakuliah[i][1] + "</TD><TD>" + matakuliah[i][2] + "</TD><TD><INPUT TYPE = 'CHECKBOX'" + " NAME = 'mk" + matakuliah[i][0] + "'" + " onClick = 'cekKRS()'>"); } document.write("<TR><TD COLSPAN = '2' "); document.write("ALIGN = 'RIGHT'>Jumlah SKS</TD>"); document.write("<TD COLSPAN = '2'>");

document.write("<INPUT TYPE = 'TEXT' VALUE = '0' "); document.write("SIZE = '3'" ); document.write("NAME = 'fieldJumlah'</TD></TR>"); document.write("</TABLE>"); //--> </SCRIPT> <BR>

</FORM> </BODY>

(12)

Pemrograman Web : HTML & JavaScript/Sarwati Rahayu, ST., MMSI 12 Jika program tersebut dijalankan, maka browser akan menampilkan :

Gambar 13.10 Hasil skrip 13-6.htm

13.4.5. Objek Radio

Objek ini biasanya digunakan secara berpasangan, minimal dua buah. Objek ini dapat diproses pada JavaScript. Beberapa hal yang berhubungan dengan Radio Button, diantaranya :

1. Atribut radio

Digunakan untuk memberikan keadaan awal agar radio button dalam keadaan dipilih. Pada JavaScript atribut ini identik dengan properti defaultRadio.

2. Properti Radio

Untuk mengetahui keadaan radio button. Nilainya true jika radio button dalam keadaan terpilih dan false untuk keadaan sebaliknya.

3. onClick

Menyatakan penanganan kejadian saat radio button diklik.

(13)

Pemrograman Web : HTML & JavaScript/Sarwati Rahayu, ST., MMSI 13 FILE : skrip13-7.htm

Gambar 13.10 Hasil skrip 13-7htm <HTML>

<HEAD>

<TITLE>Objek radio</TITLE> </HEAD>

<BODY>

Pilih hobby Anda<BR>

<INPUT TYPE = "RADIO" NAME = "hobi" VALUE = "membaca" onClick = "info()">Membaca<BR>

<INPUT TYPE = "RADIO" NAME = "hobi" VALUE = "menari" onClick = "info()">Menari<BR>

<INPUT TYPE = "RADIO" NAME = "hobi" VALUE = "memasak" onClick = "info()">Memasak<BR>

<HR> Info:

function info() {

for (var i = 0; i < 4; i++)

if (document.form1.hobi[i].checked) document.form1.fieldhobi.value = document.form1.hobi[i].value; } //--> </SCRIPT> </BODY> </HTML>

(14)

Pemrograman Web : HTML & JavaScript/Sarwati Rahayu, ST., MMSI 14 13.4.6. Objek Password

Ciri dari objek password adalah apa yang diinput akan tercetak tanda asterik atau bullet. Objek ini juga dapat diproses dengan menggunakan JavaScript. Perhatikan contoh berikut ini :

Gambar 13.11 Hasil skrip 13-8.htm <HTML>

<HEAD>

<TITLE>Objek password</TITLE> </HEAD>

<BODY>

Masukkan Password 1: <INPUT TYPE = "PASSWORD" NAME = "pass1"> Masukkan Password 2: <INPUT TYPE = "PASSWORD" NAME = "pass2"> </PRE>

<INPUT TYPE = "BUTTON" NAME = "proses" VALUE = "Proses"

onClick = "cekPass()"> </FORM>

function cekPass() {

if (document.form1.pass1.value != document.form1.pass2.value)

alert("password1 dan password2 yang dimasukkan tidak sama"); else window.location.href = "skrip13-2.htm"; } //--> </SCRIPT> </BODY> </HTML>

(15)

Pemrograman Web : HTML & JavaScript/Sarwati Rahayu, ST., MMSI 15 Setelah program skrip8.htm dijalankan, maka akan tampil seperti yang terlihat pada gambar 13-11. Misalnya akan dimasukkan passwor 1 dan password 2 dengan karakter yang berlainan, kemudian klik tombol proses maka jendela browser akan menampilkan sebuah jendela alert sebagai berikut :

Gambar 13.12 Password tidak sama

Sebaliknya, jika password keduanya benar, maka jendela browser akan menampilkan file skrip13-2.htm.

13.4.7. Upload Berkas

Pada tag <FORM> dapat menggunakan tag <INPUT> dengan TYPE berupa ”FILE” yang berguna untuk mengirim berkas ke server. Perhatikan contoh berikut ini :

Jika skrip13-9.htm dijalankan, maka hasilnya akan tampak sebagai berikut : <HTML>

<HEAD>

<TITLE>Upload Berkas</TITLE> </HEAD>

<BODY>

<FORM NAME = "form1" METHOD = "POST"> Pilih berkas yang akan di-uplopad:

(16)

Pemrograman Web : HTML & JavaScript/Sarwati Rahayu, ST., MMSI 16 Gambar 13.13 Hasil skrip13-9.htm

Jika tombol browse diklik, maka akan muncul kotak dialog sebagai berikut :

Gambar 13.14 Kotak dialog memilih berkas

Pada gambar 13.14, pilihlah file yang akan diupload (misalnya skrip13-8.htm) dan klik tombol open, maka akan browser akan menampilkan jendela alert sebagai berikut :

(17)

Pemrograman Web : HTML & JavaScript/Sarwati Rahayu, ST., MMSI 17 Gambar 13.15 Pesan bahwa memilih skrip13-8.htm

---

Latihan Untuk Dikerjakan Di Laboratorium Komputer

Buatlah program JavaScript dengan file-file yang ada di dalam BAB 13

Latihan Untuk Dikerjakan Di Rumah

Buat sebuah formulir yang terdiri atas Nama, Alamat, Kota dan Gaji. Validasi input field gaji, tidak boleh kurang dari 200000 dan tidak boleh lebih dari 1000000. Jika kedua kondisi tersebut tidak terpenuhi maka browser akan menampilikan sebuah jendela peringatan yang isinya bahwa harus diinput gaji antara 200000-1000000