Scribd
Unggah
32 tayangan5 halaman

Bab 4 Membaca Data Objek Bertipe Checkbox Dari HTML Ke Java Script

Diunggah oleh

erwinkosasi66
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
32 tayangan5 halaman

Bab 4 Membaca Data Objek Bertipe Checkbox Dari HTML Ke Java Script

Diunggah oleh

erwinkosasi66
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 5

MATERI 4

MEMBACA DATA OBJEK BERTIPE CHECKBOX DARI HTML KE JAVASCRIPT

Oleh:Taryana Suryana M.Kom


[email protected]
Bandung: 3/18/2019 12:12 PM

Pada pertemuan kali ini akan dibahas mengenai bagaimana cara membaca objek bertipe checkbox dari
html ke Java Script.

Objek bertipe checkbox dapat digunakan untuk memilih satu atau beberapa pilihan, dengan
ketentuan setiap name objek harus berbeda.

1. Buatlah design form masukan seperti gambar 4.1. Berikut

Gambar 4.1.Design Form Objek Checkbox

2. Data contoh
Tabel 4.1 Berikut merupakan contoh daftar harga dari tiap barang
Tabel 4.1. Daftar Harga

NAMABARANG HARGA SATUAN


Handphone 1200000
Laptop 5000000
Komputer 3000000

3. Code Program
Berikut adalah code program untuk membuat form seperti gambar 4.1 diatas

Nama File:checkbox.html
1. <form name=form>
2. <script>
3. function proses()
4. {
5. var harga_hp=0,harga_laptop=0, harga_komputer=0;
6. if(document.form.hp.checked) var harga_hp=1200000;
7. if(document.form.laptop.checked) var harga_laptop=5000000;
8. if(document.form.komputer.checked) var harga_komputer=3000000;
9. //Jumlahkan seluruh variabel harga
10. var total=harga_hp+harga_laptop+harga_komputer;
11. //Tampilkan ke Layar hasilnya
12. document.form.harga.value=total;
13. }
14. </script>
15. <html>
16. <center>
17. Membaca Objek tipe Checkbox
18. <hr>
19. Pilih Barang
20. <table>
21. <tr><td colspan=2><hr>
22. <tr><td><input type=checkbox name=hp>Handphone
23. <tr><td><input type=checkbox name=laptop>Laptop
24. <tr><td><input type=checkbox name=komputer>Komputer
25. <tr><td colspan=2><hr>
26. <tr><td>Harga<td><input type=text name=harga>
27. <tr><td colspan=2><hr>
28. </table>
29. <hr>
30. <input type=button value="Proses" onclick="proses()">
31. <input type=reset value="Reset">
32. </html>
4. Skenario Pengujian
Pengujian 1. Memilih Satu Barang
Untuk menguji Program apakah sesuai dengan yang diharapkan dapat dilakukan dengan cara
pengujian sebagai berikut:
1) Pilih Salah satu Barang yang akan di beli, misalnya Hanphone
2) Click Tombol Proses
3) Selanjutnya pada Objek Harga akan ditampilkan Harga Hanphone sebesar 1200000
4) Jika harga yang ditampilkan sesuai dengan tabel 4.1 diatas, maka program sudah sesuai dengan
yang diharapkan

Gambar 4.2.Output Memilih Handphone

Pengujian 2. Memilih lebih dari satu barang


1) Pilih Beberapa barang yang akan dibeli misalnya, HandPhone dan Laptop
2) Click Tomol Proses
3) Selanjutnya pada Objek Harga akan ditampilkan harga sebesar 6200000, yang merupakan Hasil
penjumlahan Harga Hanphone dan harga Laptop,
4) Jika harga yang ditampilkan sesuai dengan tabel 4.1 diatas, maka program sudah sesuai dengan
yang diharapkan
Gamar 4.3.Output Memilih Handphone dan Laptop

Pengujian 3.Tidak Memilih Apapun


1) Tidak Melakukan Pemilihan Barang
2) Click Tomol Proses
5) Selanjutnya pada Objek Harga akan ditampilkan harga sebesar 0, yang artinya tidak ada barang
yang dipilih

Gambar 4.4.Tidak Memilih Barang Apapun


Latihan 4 Buat Program untuk menghitung Total Penjualan Barang dengan Design Form Seperti
berikut:

Dengan Input Nama Barang menggunakan objek tipe checkbox dan Jumlah Beli menggunakan objek
text, sedangkan outputnya adalah berapa Total harga barang tersebut.

Gambar 4.5. Latihan Menggunakan Objek Checkbox dan Objek Text

Anda mungkin juga menyukai