Interaksi dengan Objek HTML A’ud Solehuddin::Februari2012.

Presentasi berjudul: "Interaksi dengan Objek HTML A’ud Solehuddin::Februari2012."— Transcript presentasi:

1 Interaksi dengan Objek HTML A’ud Solehuddin::Februari2012

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

3 Objek Form <FORM NAME = "formTes" ACTION = "tes.html" ACTION = "tes.html" METHOD = "POST"> METHOD = "POST"></FORM> <!-- document.write("Info formulir dari JavaScript: "); document.write("Info formulir dari JavaScript: "); document.write("NAME : " + document.formTes.name + document.write("NAME : " + document.formTes.name + " "); " "); document.write("ACTION : " + document.formTes.action + document.write("ACTION : " + document.formTes.action + " "); " "); document.write("METHOD : " + document.formTes.method + document.write("METHOD : " + document.formTes.method + " "); " ");//--></SCRIPT>

4 <FORM NAME = "formTes" ACTION = "tesform.htm" ACTION = "tesform.htm" METHOD = "POST" METHOD = "POST" onSubmit = "alert('Anda mengklik Submit')" onSubmit = "alert('Anda mengklik Submit')" onReset = "alert('Anda mengklik Reset')"> onReset = "alert('Anda mengklik Reset')"> </FORM> <!-- document.write("Formulir akan menjalankan "); document.write("Formulir akan menjalankan "); document.write(document.forms[0].action + " "); document.write(document.forms[0].action + " "); document.write("kalau Anda mengklik Submit"); document.write("kalau Anda mengklik Submit");//--></SCRIPT>

5 Objek button Kliklah pada tombol berikut untuk membuat keadaan On ke Off atau sebaliknya atau sebaliknya <FORM NAME = "formTes" METHOD = "POST"> METHOD = "POST"> <INPUT TYPE = "BUTTON" NAME = "tombolOnOff" NAME = "tombolOnOff" VALUE = "On" VALUE = "On" onClick = "beriKomentar()"> onClick = "beriKomentar()"></FORM>

6 beriKomentar() <!-- function beriKomentar() { function beriKomentar() { if (document.formTes.tombolOnOff.value == "On") { if (document.formTes.tombolOnOff.value == "On") { alert("Tombol akan menjadi Off"); alert("Tombol akan menjadi Off"); document.formTes.tombolOnOff.value = "Off"; document.formTes.tombolOnOff.value = "Off"; } else { else { alert("Tombol akan menjadi On"); alert("Tombol akan menjadi On"); document.formTes.tombolOnOff.value = "On"; document.formTes.tombolOnOff.value = "On"; } }

7 Objek text <FORM NAME = "formTes" METHOD = "POST"> METHOD = "POST"> Nama: <INPUT TYPE = "TEXT" NAME = "nama" NAME = "nama" onBlur = "alert('onBlur!')“ onBlur = "alert('onBlur!')“ onFocus = "alert('onFocus!')"> onFocus = "alert('onFocus!')"><BR> e-mail: <INPUT TYPE = "TEXT" NAME = "email"> NAME = "email"></FORM>

8 <FORM NAME = "formTes" METHOD = "POST" METHOD = "POST" ACTION = "tesform.htm"> ACTION = "tesform.htm"> Nama: <INPUT TYPE = "TEXT" NAME = "nama"> NAME = "nama"><BR> e-mail: <INPUT TYPE = "TEXT" NAME = "email"> NAME = "email"><BR> <INPUT TYPE = "BUTTON" NAME = "tombolKirim" NAME = "tombolKirim" VALUE = "Kirim" VALUE = "Kirim" onClick = "cekIsiField()"> onClick = "cekIsiField()"></FORM>

9 cekIsiField() function cekIsiField() { function cekIsiField() { if (document.formTes.elements[0].value == "") { if (document.formTes.elements[0].value == "") { alert("Nama harap diisi"); alert("Nama harap diisi"); document.formTes.elements[0].focus(); document.formTes.elements[0].focus(); return; return; } if (document.formTes.elements[1].value == "") { if (document.formTes.elements[1].value == "") { alert("e-mail harap diisi"); alert("e-mail harap diisi"); document.formTes.elements[1].focus(); document.formTes.elements[1].focus(); return; return; } window.location.href = "tesform.htm"; window.location.href = "tesform.htm"; }

10 Objek checkbox <FORM NAME = "formTes" ACTION = "tesform.htm" ACTION = "tesform.htm" METHOD = "POST"> METHOD = "POST">.... <INPUT TYPE = "BUTTON" NAME = "tombolKirim" NAME = "tombolKirim" VALUE = "Kirim" VALUE = "Kirim" onClick = "cekKirim()"> onClick = "cekKirim()"></FORM>

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

12 Judul Tabel document.write(" "); document.write(" Kode "); document.write(" Matakuliah "); document.write(" SKS "); document.write(" Pilihan ");

13 Isi Tabel for (var i = 0; i < 7; i++) { for (var i = 0; i < 7; i++) { document.write document.write (" " + matakuliah[i][0] + (" " + matakuliah[i][0] + " " + matakuliah[i][1] + " " + matakuliah[i][1] + " " + matakuliah[i][2] + " " + matakuliah[i][2] + " " <INPUT TYPE = 'CHECKBOX'" + <INPUT TYPE = 'CHECKBOX'" + " NAME = 'mk" + matakuliah[i][0] + "'" + " NAME = 'mk" + matakuliah[i][0] + "'" + " onClick = 'cekKRS()'> "); " onClick = 'cekKRS()'> "); }

14 Akhir Tabel document.write(" <TD COLSPAN = '2' "); document.write("ALIGN = 'RIGHT'>Jumlah SKS "); document.write(" "); document.write("<INPUT TYPE = 'TEXT' VALUE = '0' "); document.write("SIZE = '3'" ); document.write("NAME = 'fieldJumlah' "); document.write("</TABLE>");

15 cekKRS() function cekKRS() { var jum_sks = 0; var jum_sks = 0; for (var i = 0; i < matakuliah.length; i++) { for (var i = 0; i < matakuliah.length; i++) { if (document.formTes.elements[i].checked) if (document.formTes.elements[i].checked) jum_sks += matakuliah[i][2]; jum_sks += matakuliah[i][2]; } document.formTes.fieldJumlah.value = jum_sks; document.formTes.fieldJumlah.value = jum_sks; if (jum_sks > 15) if (jum_sks > 15) alert("Anda harus mengurangi SKS\n" + alert("Anda harus mengurangi SKS\n" + "karena melebihi 15 SKS"); "karena melebihi 15 SKS");}

16 cekKirim() function cekKirim() { function cekKirim() { if (document.formTes.fieldJumlah.value > 15) if (document.formTes.fieldJumlah.value > 15) alert("Anda harus mengurangi SKS\n" + alert("Anda harus mengurangi SKS\n" + "karena melebihi 15 SKS"); "karena melebihi 15 SKS"); else else window.location.href = "tesform.htm"; window.location.href = "tesform.htm"; }

17 Objek radio Klik pada musik yang paling Anda sukai Klik pada musik yang paling Anda sukai <FORM NAME = "formTes" METHOD = "GET"> METHOD = "GET"> <INPUT TYPE = "RADIO" NAME = "radioMusik" NAME = "radioMusik" VALUE = "Jazz" VALUE = "Jazz" onClick = "info()">Jazz onClick = "info()">Jazz <INPUT TYPE = "RADIO" NAME = "radioMusik" NAME = "radioMusik" VALUE = "Keroncong" VALUE = "Keroncong" onClick = "info()">Keroncong onClick = "info()">Keroncong <INPUT TYPE = "RADIO" NAME = "radioMusik" NAME = "radioMusik" VALUE = "Dangdut" VALUE = "Dangdut" onClick = "info()">Dangdut onClick = "info()">Dangdut <INPUT TYPE = "RADIO" NAME = "radioMusik" NAME = "radioMusik" VALUE = "Lainnya" VALUE = "Lainnya" onClick = "info()">Lainnya onClick = "info()">Lainnya <HR>Info: <INPUT TYPE = "TEXT" NAME = "fieldMusik" NAME = "fieldMusik" SIZE = "40"> SIZE = "40"></FORM>

18 info() function info() { function info() { for (var i = 0; i < 4; i++) for (var i = 0; i < 4; i++) if (document.formTes.radioMusik[i].checked) if (document.formTes.radioMusik[i].checked) document.formTes.fieldMusik.value = document.formTes.fieldMusik.value = document.formTes.radioMusik[i].value; document.formTes.radioMusik[i].value; }

19 Objek password <FORM NAME = "formTes" ACTION = "tesform.htm" ACTION = "tesform.htm" METHOD = "POST"> METHOD = "POST"><PRE> Password Pengganti : <INPUT TYPE = "PASSWORD" NAME = "password_1"> NAME = "password_1"> Password Sekali Lagi: <INPUT TYPE = "PASSWORD" NAME = "password_2"> NAME = "password_2"></PRE> <INPUT TYPE = "BUTTON" NAME = "tombolProses" NAME = "tombolProses" VALUE = "Proses" VALUE = "Proses" onClick = "cekPassword()"> onClick = "cekPassword()"></FORM>

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

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

22 Objek textarea <FORM> <TR><TH>Sumber:</TH><TH>Target:</TH></TR><TR><TD> <TEXTAREA NAME = "sumber" ROWS = "6" COLS = "20"> ROWS = "6" COLS = "20"> Tes 123 Tes 456 Tes 456 </TD><TD> <TEXTAREA NAME = "target" ROWS = "6" COLS = "20"> ROWS = "6" COLS = "20"> </TD><TR> <INPUT TYPE = "BUTTON" NAME = "tombolSalin" NAME = "tombolSalin" VALUE = "Salin" VALUE = "Salin" onClick = "salinTeks()"> onClick = "salinTeks()"> <INPUT TYPE = "BUTTON" NAME = "tombolHapus" NAME = "tombolHapus" VALUE = "Hapus" VALUE = "Hapus" onClick = "hapusTeks()"> onClick = "hapusTeks()"></TD></TR></FORM>

23 salinTeks() dan hapusTeks() function salinTeks() { document.forms[0].target.value = document.forms[0].sumber.value;} function hapusTeks() { document.forms[0].target.value = ""; }

24 Objek select <FORM> Musik yang paling Anda sukai: Musik yang paling Anda sukai: <SELECT NAME = "selectMusik" <SELECT NAME = "selectMusik" onChange = "infoSelect()"> onChange = "infoSelect()"> Jazz Jazz Rock Rock Keroncong Keroncong Dangdut Dangdut Lain-lain Lain-lain Info: Info: <INPUT TYPE = "TEXT" NAME = "fieldInfo" <INPUT TYPE = "TEXT" NAME = "fieldInfo" SIZE = "30"> SIZE = "30"></FORM>

25 infoSelect() function infoSelect() { var indeks = var indeks = document.forms[0].selectMusik.selectedIndex; document.forms[0].selectMusik.selectedIndex; document.forms[0].fieldInfo.value = document.forms[0].fieldInfo.value = "Yang Anda pilih: " + document.forms[0].selectMusik.options[indeks].value;}

26 select multiple <FORM> Musik yang paling Anda sukai: Musik yang paling Anda sukai: <SELECT NAME = "selectMusik" MULTIPLE <SELECT NAME = "selectMusik" MULTIPLE onChange = "infoSelect()"> onChange = "infoSelect()"> Jazz Jazz Rock Rock Keroncong Keroncong Dangdut Dangdut Lain-lain Lain-lain Info: Info: <TEXTAREA NAME = "teksInfo" <TEXTAREA NAME = "teksInfo" ROWS = "6" COLS = "20"> ROWS = "6" COLS = "20"> </FORM>

27 infoSelect() function infoSelect() { function infoSelect() { var str = "Yang Anda pilih:\n"; var str = "Yang Anda pilih:\n"; for (var i = 0; for (var i = 0; i < document.forms[0].selectMusik.options.length; i < document.forms[0].selectMusik.options.length; i++) i++) if (document.forms[0].selectMusik.options[i].selected) if (document.forms[0].selectMusik.options[i].selected) str = str + str = str + document.forms[0].selectMusik.options[i].value + document.forms[0].selectMusik.options[i].value + "\n"; "\n"; document.forms[0].teksInfo.value = str; document.forms[0].teksInfo.value = str; }

28 Upload berkas <FORM NAME = "formTes" METHOD = "POST"> METHOD = "POST"> Berkas yang akan di-uplopad: <INPUT TYPE = "FILE" NAME = "upload" NAME = "upload" onChange = "beriKomentar()"> onChange = "beriKomentar()"></FORM>

29 beriKomentar() function beriKomentar() { function beriKomentar() { alert("Anda memilih: " + alert("Anda memilih: " + document.formTes.upload.value); document.formTes.upload.value); }

30 Objek image </BODY>

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