Contoh penerapan HTML DOM

Naskah Kuliah Teknologi Web 1-2012/2013-I

STMIK AKAKOM

Oleh : M. Guntara

Contoh penerapan HTML DOM Validasi isian (=medan, field, input-teks) kosong <script type="text/javascript"> 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) <script type="text/javascript"> function cek() {

1

Naskah Kuliah Teknologi Web 1-2012/2013-I

STMIK AKAKOM

Oleh : M. Guntara

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)

<script type="text/javascript">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 !";

2

Naskah Kuliah Teknologi Web 1-2012/2013-I

STMIK AKAKOM

Oleh : M. Guntara

} Nomor Mahasiswa <span id="pesen"> Output:

Pesan kesalahan muncul setelah isian (bukan di kotak pesan) , menggunakan <span id=”pesen”>

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 <script type="text/javascript"> 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=""; }



3

Naskah Kuliah Teknologi Web 1-2012/2013-I

STMIK AKAKOM

Oleh : M. Guntara

Nomor Mahasiswa Output :

Setelah cursor masuk diisian menjadi sbb

Bila diisi salah menjadi sbb

Bila cursor di klik di kotak isian menjadi

Kalkulator sederhana <script type="text/javascript"> function ngetung() { var a=document.getElementById("in_a").value; var b=document.getElementById("in_b").value; var c=parseInt(a)+parseInt(b); document.getElementById("o_c").value=c; } + 4

Naskah Kuliah Teknologi Web 1-2012/2013-I

STMIK AKAKOM

Oleh : M. Guntara

Output:

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

Pilihan menggunakan checkBox dengan perhitungan otomatis <script type="text/javascript"> 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

---

5

Naskah Kuliah Teknologi Web 1-2012/2013-I

Total

STMIK AKAKOM

Oleh : M. Guntara

Rp

Output :

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

6