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

BAB 13 OBJEK 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

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

1

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 <TITLE>Membuat Objek <SCRIPT LANGUAGE = "JavaScript">

2

Lanjutan FILE : skrip13-1.htm function ubahWarna (warna) { this.warna = warna; } function tampilkanInfoMobil() { document.write("Tipe : " + this.tipe + "
"); document.write("Merk : " + this.merk + "
"); document.write("cc : " + this.cc + "
"); document.write("Warna: " + this.warna + "
"); } 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("
"); 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

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 <SCRIPT LANGUAGE = "JavaScript"> "); document.write(kuliah.dosen + "
"); //-->

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.


4

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


FILE : skrip13-3.htm <TITLE>Contoh FORM
Masukkan nama Anda :

<SCRIPT LANGUAGE = "JavaScript">


5

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

6

Beberapa atribut yang terdapat dalam tag 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


FILE : skrip13-4.htm <TITLE>Contoh FORM
Masukkan nama Anda :


Gambar 13.6 Pemanggilan file skrip13-4.htm Pemrograman Web : HTML & JavaScript/Sarwati Rahayu, ST., MMSI

7

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


8

Perhatikan contoh di berikut ini :

FILE : skrip13-5.htm <TITLE>Memeriksa Objek text <SCRIPT LANGUAGE = "JavaScript">
Nama :
Alamat:

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



9

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 :


10

FILE : skrip13-6.htm <TITLE>Kotak Cek Pilihlah maksimal 15 SKS

<SCRIPT LANGUAGE = "JavaScript"> 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(""); document.write(""); document.write(""); for (var i = 0; i < 7; i++) { document.write(""); document.write(""); document.write("
Kode Matakuliah SKS Pilihan
" + matakuliah[i][0] + " " + matakuliah[i][1] + " " + matakuliah[i][2] + " "); } document.write("
Jumlah SKS "); document.write("
"); //-->


11

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.



12

FILE : skrip13-7.htm <TITLE>Objek radio Pilih hobby Anda

Membaca
Olah Raga
Menari
Memasak

Info:

Gambar 13.10 Hasil skrip 13-7htm


13

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 :

FILE : skrip13-8.htm <TITLE>Objek password

Masukkan Password 1: Masukkan Password 2:


Gambar 13.11 Hasil skrip 13-8.htm


14

Setelah program skrip13-8.htm dijalankan, maka akan tampil seperti yang terlihat pada gambar 1311. 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 skrip132.htm.

13.4.7. Upload Berkas Pada tag
dapat menggunakan tag dengan TYPE berupa ”FILE” yang berguna untuk mengirim berkas ke server. Perhatikan contoh berikut ini :

FILE : skrip13-9.htm <TITLE>Upload Berkas Pilih berkas yang akan di-uplopad:

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


15


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 :


16

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


17

Kode	Matakuliah	SKS	Pilihan
" + matakuliah[i][0] + "	" + matakuliah[i][1] + "	" + matakuliah[i][2] + "	"); } document.write("
Jumlah SKS		"); document.write("

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

Recommend Documents