Naskah Kuliah Teknologi Web 1-2012/2013-I STMIK AKAKOM Oleh : M. Guntara

1

Contoh penerapan HTML DOM

Validasi isian (=medan, field, input-teks) kosong

function cek() { if(document.getElementById("id_nomhs").value=="") alert("Ora oleh kosong lho"); } Nomor Mahasiswa Output :

Bila isian , tidak diisi data apapun (kosong) , kemudian di klik akan muncul kotak pesan sbb

Bila nilai yang dimasukkan bukan angka dan cursor keluar isian, akan muncul kotak pesan

(font Bold penambahan/perubahan dari script sebelumnya) function cek() {

Naskah Kuliah Teknologi Web 1-2012/2013-I STMIK AKAKOM Oleh : M. Guntara

2

var idno=document.getElementById("id_nomhs").value; if(idno=="") alert("Ora oleh kosong lho"); else if (!(idno>=0)) alert("Ojo aneh2..ONGKO wae mesti jossss!"); } Nomor Mahasiswa

Output:

Bila diisi huruf atau kombinasi huruf dan angka, kemudaan cursor keluar isian (tanpa harus klok tombol OK) akan

muncul kotak pesan sbb

Bila nilai yang dimasukkan bukan angka dan cursor keluar isian, akan muncul pesan

berupa teks (bukan kotak pesan)

function cek() { var idno=document.getElementById("id_nomhs").value; if(idno=="") document.getElementById("pesen").innerHTML="Ojo dikosongi"; else if(!(idno>=0)) document.getElementById("pesen").innerHTML="Ojo aneh2..ongko wae !";

Naskah Kuliah Teknologi Web 1-2012/2013-I STMIK AKAKOM Oleh : M. Guntara

3

} Nomor Mahasiswa

Output:

Pesan kesalahan muncul setelah isian (bukan di kotak pesan) , menggunakan

Ada teks default (tekah terpasang) dan akan hilang bila cursor masuk di isian

Semua teks pesan akan hilang/dihapus saat cursor masuk kotak isian tersebut

Teks pesan berwarna merah

function cek() { var idno=document.getElementById("id_nomhs").value; if(idno=="") document.getElementById("pesen").innerHTML="Ojo dikosongi"; else if(!(idno>=0)) document.getElementById("pesen").innerHTML="Ojo aneh2..ongko wae !"; } function busak() { document.getElementById("id_nomhs").value=""; document.getElementById("pesen").innerHTML=""; }

Naskah Kuliah Teknologi Web 1-2012/2013-I STMIK AKAKOM Oleh : M. Guntara

4

Nomor Mahasiswa

Naskah Kuliah Teknologi Web 1-2012/2013-I STMIK AKAKOM Oleh : M. Guntara

5

Output:

Bila diisi isian pertama, dan kedua kemudia di klik tombol =, akan muncuk hasil seperti diatas

Pilihan menggunakan checkBox dengan perhitungan otomatis

function ngetung() { var jumlah=0; var harga; if(document.getElementById("menu1").checked) { harga=document.getElementById("menu1").value; jumlah=jumlah+parseInt(harga); } if(document.getElementById("menu2").checked) { harga=document.getElementById("menu2").value; jumlah=jumlah+parseInt(harga); } if(document.getElementById("menu3").checked) { harga=document.getElementById("menu3").value; jumlah=jumlah+parseInt(harga); } document.getElementById("total").value=jumlah; } Silahkan pilih menu sesuka perutmu Bakso Kepala Rp 5.000 Es Teh Goreng Rp 1.500 Tahu Goreng Rp. 500

Naskah Kuliah Teknologi Web 1-2012/2013-I STMIK AKAKOM Oleh : M. Guntara

6

Total Rp

Output :

Bila chekbox dipilih/tidak-dipilih, akan otomatis menghitung hasil