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

Transkripsi

1 BAB 13 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, Anthony Pranata, Panduan Pemrograman JavaScript, Penerbit Andi, Ypgyakarta, Betha Sidik, etc, Pemrograman Web dengan HTML, Penerbit Informatika, Bandung, DR. Erhans A, Membuat Desain Web dengan JavaScript, Penerbit PT. Ercontara Rajawali, Jakarta, Inixindo, Pengembangan HomePage & Intranet, Jakarta 1998 Pemrograman Web : HTML & JavaScript/Sarwati Rahayu, ST., MMSI 1

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 Objek Buatan Untuk membuat objek buatan, bentuk umumnya adalah : namavariabel=new konstruktorobjek(daftarparameter); Perhatikan contoh berikut ini : FILE : skrip13-1.htm <TITLE>Membuat Objek</TITLE> function perolehwarna () { return(this.warna); Pemrograman Web : HTML & JavaScript/Sarwati Rahayu, ST., MMSI 2

3 Lanjutan FILE : 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(); 2. FILE : web9-2.htm Gambar 13.1 Hasil skrip13-1.htm Pemrograman Web : HTML & JavaScript/Sarwati Rahayu, ST., MMSI 3

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 <TITLE>Objek dengan Notasi Literal</TITLE> // Membuat objek berdasarkan Mata Kuliah var kuliah = {matakuliah: "Pemrograman Web", dosen: "Sarwati Rahayu"; document.write(kuliah.matakuliah + "<BR>"); document.write(kuliah.dosen + "<BR>"); Gambar 13.2 Hasil skrip13-2.htm 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. Pemrograman Web : HTML & JavaScript/Sarwati Rahayu, ST., MMSI 4

5 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 <TITLE>Contoh FORM</TITLE> <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 " > <INPUT TYPE = "RESET" VALUE="Batal"> </FORM> document.write("formulir akan menjalankan "); document.write(document.forms[0].action); document.write(" jika tombol OK diklik"); Pemrograman Web : HTML & JavaScript/Sarwati Rahayu, ST., MMSI 5

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 Objek Button Tipe input pada formulir digunakan untuk memasukkan sebuah input yang biasanya menggunakan beberpa atribut yang terdapat pada tag <INPUT>. Pemrograman Web : HTML & JavaScript/Sarwati Rahayu, ST., MMSI 6

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 : FILE : skrip13-4.htm <TITLE>Contoh FORM</TITLE> <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 " > <INPUT TYPE = "RESET" VALUE="Batal"> </FORM> document.write("formulir akan menjalankan "); document.write(document.forms[0].action); document.write(" jika tombol OK diklik"); Gambar 13.6 Pemanggilan file skrip13-4.htm Pemrograman Web : HTML & JavaScript/Sarwati Rahayu, ST., MMSI 7

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 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() Identik dengan memblok teks pada field teks ini. Pemrograman Web : HTML & JavaScript/Sarwati Rahayu, ST., MMSI 8

9 Perhatikan contoh di berikut ini : FILE : skrip13-5.htm <TITLE>Memeriksa Objek text</title> Lanjutan FILE : skrip13-5.htm 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"; <FORM NAME = "form1" METHOD = "POST"> Nama : <INPUT TYPE = "TEXT" NAME = "nama"><br> Alamat: <INPUT TYPE = "TEXT" NAME = "alamat"> <BR> <INPUT TYPE = "BUTTON" NAME = "tombolok" VALUE = "Kirim" onclick = "cekisifield()"> </FORM> 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 Pemrograman Web : HTML & JavaScript/Sarwati Rahayu, ST., MMSI 9

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 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 : Pemrograman Web : HTML & JavaScript/Sarwati Rahayu, ST., MMSI 10

11 FILE : skrip13-6.htm <TITLE>Kotak Cek</TITLE> Pilihlah maksimal 15 SKS<BR> <FORM NAME = "formtes" METHOD = "POST"> 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>"); <BR> <INPUT TYPE = "BUTTON" NAME = "tombolkirim" VALUE = "Kirim" onclick = "cekkirim()"> </FORM> Pemrograman Web : HTML & JavaScript/Sarwati Rahayu, ST., MMSI 11

12 Jika program tersebut dijalankan, maka browser akan menampilkan : Gambar Hasil skrip 13-6.htm 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. Perhatikan contoh berikut ini : Pemrograman Web : HTML & JavaScript/Sarwati Rahayu, ST., MMSI 12

13 FILE : skrip13-7.htm <TITLE>Objek radio</title> Pilih hobby Anda<BR> <FORM NAME = "form1" METHOD = "GET"> <INPUT TYPE = "RADIO" NAME = "hobi" VALUE = "membaca" onclick = "info()">membaca<br> <INPUT TYPE = "RADIO" NAME = "hobi" VALUE = "olahraga" onclick = "info()">olah Raga<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: <INPUT TYPE = "TEXT" NAME = "fieldhobi" SIZE = "40"> </FORM> function info() { for (var i = 0; i < 4; i++) if (document.form1.hobi[i].checked) document.form1.fieldhobi.value = document.form1.hobi[i].value; Gambar Hasil skrip 13-7htm Pemrograman Web : HTML & JavaScript/Sarwati Rahayu, ST., MMSI 13

14 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 : FILE : skrip13-8.htm <TITLE>Objek password</title> <FORM NAME = "form1" ACTION = "skrip13-2.htm" METHOD = "POST"> <PRE> 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"; Gambar Hasil skrip 13-8.htm Pemrograman Web : HTML & JavaScript/Sarwati Rahayu, ST., MMSI 14

15 Setelah program skrip13-8.htm dijalankan, maka akan tampil seperti yang terlihat pada gambar 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 Password tidak sama Sebaliknya, jika password keduanya benar, maka jendela browser akan menampilkan file skrip13-2.htm Upload Berkas Pada tag <FORM> dapat menggunakan tag <INPUT> dengan TYPE berupa FILE yang berguna untuk mengirim berkas ke server. Perhatikan contoh berikut ini : FILE : skrip13-9.htm <TITLE>Upload Berkas</TITLE> <FORM NAME = "form1" METHOD = "POST"> Pilih berkas yang akan di-uplopad: <INPUT TYPE = "FILE" NAME = "upload" onchange = "komentar()"> </FORM> function komentar() { alert("pilihan berkas: " + document.form1.upload.value); Jika skrip13-9.htm dijalankan, maka hasilnya akan tampak sebagai berikut : Pemrograman Web : HTML & JavaScript/Sarwati Rahayu, ST., MMSI 15

16 Gambar Hasil skrip13-9.htm Jika tombol browse diklik, maka akan muncul kotak dialog sebagai berikut : Gambar 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 : Pemrograman Web : HTML & JavaScript/Sarwati Rahayu, ST., MMSI 16

17 Gambar 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 dan tidak boleh lebih dari Jika kedua kondisi tersebut tidak terpenuhi maka browser akan menampilikan sebuah jendela peringatan yang isinya bahwa harus diinput gaji antara Pemrograman Web : HTML & JavaScript/Sarwati Rahayu, ST., MMSI 17