Interaksi dengan Objek HTML Aud Solehuddin Februari 2012

Interaksi dengan Objek HTML A’ud Solehuddin: : Februari 2012

Materi n n n Objek Form Objek button Objek text Objek checkbox Objek radio Objek password Objek hidden Objek textarea Objek select Upload berkas Objek image

Objek Form <FORM NAME = "form. Tes" ACTION = "tes. html" METHOD = "POST"> </FORM> <SCRIPT LANGUAGE = "Java. Script"> <!-document. write("Info formulir dari Java. Script: <BR>"); document. write("NAME : " + document. form. Tes. name + "<BR>"); document. write("ACTION : " + document. form. Tes. action + "<BR>"); document. write("METHOD : " + document. form. Tes. method + "<BR>"); //--> </SCRIPT>

<FORM NAME = "form. Tes" ACTION = "tesform. htm" METHOD = "POST" on. Submit = "alert('Anda mengklik Submit')" on. Reset = "alert('Anda mengklik Reset')"> <INPUT TYPE = "TEXT" NAME = "field 1" ><BR> <INPUT TYPE = "SUBMIT"> <INPUT TYPE = "RESET"> </FORM> <SCRIPT LANGUAGE = "Java. Script"> <!-document. write("Formulir akan menjalankan "); document. write(document. forms[0]. action + "<BR>"); document. write("kalau Anda mengklik Submit"); //--> </SCRIPT>

Objek button Kliklah pada tombol berikut untuk membuat keadaan On ke Off atau sebaliknya<BR> <FORM NAME = "form. Tes" METHOD = "POST"> <INPUT TYPE = "BUTTON" NAME = "tombol. On. Off" VALUE = "On" on. Click = "beri. Komentar()"> </FORM>

beri. Komentar() <SCRIPT LANGUAGE = "Java. Script"> <!-function beri. Komentar() { if (document. form. Tes. tombol. On. Off. value == "On") { alert("Tombol akan menjadi Off"); document. form. Tes. tombol. On. Off. value = "Off"; } else { alert("Tombol akan menjadi On"); document. form. Tes. tombol. On. Off. value = "On"; } }

Objek text <FORM NAME = "form. Tes" METHOD = "POST"> Nama: <INPUT TYPE = "TEXT" NAME = "nama" on. Blur = "alert('on. Blur!')“ on. Focus = "alert('on. Focus!')"> <BR> e-mail: <INPUT TYPE = "TEXT" NAME = "email"> </FORM>

<FORM NAME = "form. Tes" METHOD = "POST" ACTION = "tesform. htm"> Nama: <INPUT TYPE = "TEXT" NAME = "nama"> <BR> e-mail: <INPUT TYPE = "TEXT" NAME = "email"> <BR> <INPUT TYPE = "BUTTON" NAME = "tombol. Kirim" VALUE = "Kirim" on. Click = "cek. Isi. Field()"> </FORM>

cek. Isi. Field() function cek. Isi. Field() { if (document. form. Tes. elements[0]. value == "") { alert("Nama harap diisi"); document. form. Tes. elements[0]. focus(); return; } if (document. form. Tes. elements[1]. value == "") { alert("e-mail harap diisi"); document. form. Tes. elements[1]. focus(); return; } window. location. href = "tesform. htm"; }

Objek checkbox <FORM NAME = "form. Tes" ACTION = "tesform. htm" METHOD = "POST">. . <INPUT TYPE = "BUTTON" NAME = "tombol. Kirim" VALUE = "Kirim" on. Click = "cek. Kirim()"> </FORM>

Array 2 dimensi var matakuliah = [ ["TI 201", ["TI 202", ["TI 203", ["TI 204", ["TI 205", ["IN 201", ["FI 201", ]; "Pemrograman Tertruktur", "Pengenalan Basis Data", "Komunikasi Data", "Teknologi Informasi", "Sistem Berkas", "Bahasa Inggris II", "Fisika Dasar II", 3], 3], 3], 2], 3]

Judul Tabel document. write("<TABLE BORDER = '2'>"); document. write("<TR><TH>Kode</TH>"); document. write("<TH>Matakuliah</TH>"); document. write("<TH>SKS</TH>"); document. write("<TH>Pilihan</TH></TR>");

Isi Tabel 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] + "'" + " on. Click = 'cek. KRS()'></TD></TR>"); }

Akhir Tabel 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 = 'field. Jumlah'</TD></TR>"); document. write("</TABLE>");

cek. KRS() function cek. KRS() { var jum_sks = 0; for (var i = 0; i < matakuliah. length; i++) { if (document. form. Tes. elements[i]. checked) jum_sks += matakuliah[i][2]; } document. form. Tes. field. Jumlah. value = jum_sks; if (jum_sks > 15) alert("Anda harus mengurangi SKSn" + "karena melebihi 15 SKS"); }

cek. Kirim() function cek. Kirim() { if (document. form. Tes. field. Jumlah. value > 15) alert("Anda harus mengurangi SKSn" + "karena melebihi 15 SKS"); else window. location. href = "tesform. htm"; }

Objek radio Klik pada musik yang paling Anda sukai<BR> <FORM NAME = "form. Tes" METHOD = "GET"> <INPUT TYPE = "RADIO" NAME = "radio. Musik" VALUE = "Jazz" on. Click = "info()">Jazz<BR> <INPUT TYPE = "RADIO" NAME = "radio. Musik" VALUE = "Keroncong" on. Click = "info()">Keroncong<BR> <INPUT TYPE = "RADIO" NAME = "radio. Musik" VALUE = "Dangdut" on. Click = "info()">Dangdut<BR> <INPUT TYPE = "RADIO" NAME = "radio. Musik" VALUE = "Lainnya" on. Click = "info()">Lainnya<BR> <HR> Info: <INPUT TYPE = "TEXT" NAME = "field. Musik" SIZE = "40"> </FORM>

info() function info() { for (var i = 0; i < 4; i++) if (document. form. Tes. radio. Musik[i]. checked) document. form. Tes. field. Musik. value = document. form. Tes. radio. Musik[i]. value; }

Objek password <FORM NAME = "form. Tes" ACTION = "tesform. htm" METHOD = "POST"> <PRE> Password Pengganti : <INPUT TYPE = "PASSWORD" NAME = "password_1"> Password Sekali Lagi: <INPUT TYPE = "PASSWORD" NAME = "password_2"> </PRE> <INPUT TYPE = "BUTTON" NAME = "tombol. Proses" VALUE = "Proses" on. Click = "cek. Password()"> </FORM>

cek. Password() function cek. Password() { if (document. form. Tes. password_1. value != document. form. Tes. password_2. value) alert("Dua password yang Anda masukkan tidak sama"); else window. location. href = "tesform. htm"; }

Objek hidden <FORM> <INPUT TYPE = "HIDDEN" NAME = "variabel. X" VALUE = "Ada deh!"> </FORM> <SCRIPT LANGUAGE = "Java. Script"> <!-document. write("variabel. X = " + document. forms[0]. variabel. X. value); //--> </SCRIPT>

Objek textarea <FORM> <TABLE BORDER = "1"> <TR><TH>Sumber: </TH><TH>Target: </TH></TR> <TR><TD> <TEXTAREA NAME = "sumber" ROWS = "6" COLS = "20"> Tes 123 Tes 456</TEXTAREA> </TD><TD> <TEXTAREA NAME = "target" ROWS = "6" COLS = "20"></TEXTAREA> </TD><TR><TD ALIGN = "CENTER"> <INPUT TYPE = "BUTTON" NAME = "tombol. Salin" VALUE = "Salin" on. Click = "salin. Teks()"> </TD><TD ALIGN = "CENTER"> <INPUT TYPE = "BUTTON" NAME = "tombol. Hapus" VALUE = "Hapus" on. Click = "hapus. Teks()"> </TD></TR> </FORM>

salin. Teks() dan hapus. Teks() function salin. Teks() { document. forms[0]. target. value = document. forms[0]. sumber. value; } function hapus. Teks() { document. forms[0]. target. value = ""; }

Objek select <FORM> Musik yang paling Anda sukai: <BR> <SELECT NAME = "select. Musik" on. Change = "info. Select()"> <OPTION VALUE = "Jazz">Jazz <OPTION VALUE = "Rock">Rock <OPTION VALUE = "Keroncong">Keroncong <OPTION VALUE = "Dangdut">Dangdut <OPTION VALUE = "Lain-lain" SELECTED>Lain-lain </SELECT> <BR> <HR> Info: <INPUT TYPE = "TEXT" NAME = "field. Info" SIZE = "30"> </FORM>

info. Select() function info. Select() { var indeks = document. forms[0]. select. Musik. selected. Index; document. forms[0]. field. Info. value = "Yang Anda pilih: " + document. forms[0]. select. Musik. options[indeks]. value; }

select multiple <FORM> Musik yang paling Anda sukai: <BR> <SELECT NAME = "select. Musik" MULTIPLE on. Change = "info. Select()"> <OPTION VALUE = "Jazz">Jazz <OPTION VALUE = "Rock">Rock <OPTION VALUE = "Keroncong">Keroncong <OPTION VALUE = "Dangdut">Dangdut <OPTION VALUE = "Lain-lain" SELECTED>Lain-lain </SELECT> <BR> <HR> Info: <TEXTAREA NAME = "teks. Info" ROWS = "6" COLS = "20"> </TEXTAREA> </FORM>

info. Select() function info. Select() { var str = "Yang Anda pilih: n"; for (var i = 0; i < document. forms[0]. select. Musik. options. length; i++) if (document. forms[0]. select. Musik. options[i]. selected) str = str + document. forms[0]. select. Musik. options[i]. value + "n"; document. forms[0]. teks. Info. value = str; }

Upload berkas <FORM NAME = "form. Tes" METHOD = "POST"> Berkas yang akan di-uplopad: <INPUT TYPE = "FILE" NAME = "upload" on. Change = "beri. Komentar()"> </FORM>

beri. Komentar() function beri. Komentar() { alert("Anda memilih: " + document. form. Tes. upload. value); }

Objek image <BODY on. Load="window. set. Timeout('jam()', 0)"> <IMG SRC ="0. gif"> <IMG SRC ="titik_dua. gif"> <IMG SRC ="0. gif"> </BODY>

function var var jam() { D = new Date(); jj = D. get. Hours(); mm = D. get. Minutes(); dd = D. get. Seconds(); // Ubah gambar document. images[0]. src document. images[1]. src document. images[3]. src document. images[4]. src document. images[6]. src document. images[7]. src = = = url(jj url(mm url(dd / % / % 10); 10); // Atur waktu berikutnya window. set. Timeout("jam()", 500); } // Mengubah angka menjadi angka. gif function url(angka) { var bil = Math. floor(angka); return(". . /citra/" + bil + ". gif"); }