Membaca Data Objek Bertipe Text dari HTM ke Java Script

Read Time2 Minutes, 18 Seconds

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

Objek bertipe text dapat digunakan untuk memasukan dan Menampilkan Data dari HTML ke Java Script dan Java Script ke HTML.

Perintah Dasar:

Untuk membuat form masukan dengan tipe text dapat dilakukan dengan memberikan perintah dasar html berikut:

                <input type=text name=namaobjek size=5>

Untuk lebih jelasnya berikut akan dibuat form masukan untuk menghitung Luas Persegi Panjang, dengan Input Panjang dan lebar serta hasil keluarannya adalah Luas.

  1. Buatlah design form masukan seperti gambar 3.1.
GAmbar 3.1. Design Form Objek Text
  • Data contoh

Tabel 3.1 Berikut merupakan contoh Data Masukan dan Hasilnya

 Tabel 3.1. Data Masukan dan variabel

Variabel Data Masukan Keluaran
Panjang 100  
Lebar 50  
Luas Panjang*lebar 5000
  • Code Program

Berikut adalah code program untuk membuat form seperti gambar 3.1 diatas

Nama File:textbox.html

  1. <form name=form>
  2. <script>
  3. function proses()
  4. {
  5. var panjang=document.form.panjang.value;
  6. var lebar=document.form.lebar.value;
  7. var luas=panjang*lebar;
  8. document.form.luas.value=luas;
  9. }
  10. </script>
  11.  
  12. <html>
  13. <center>
  14. <font size=4>
  15. Menghitung Luas Persegi Panjang
  16. <hr>
  17. <table>
  18. <tr><td>Panjang<td><input name=panjang size=5>
  19. <tr><td>Lebar<td><input name=lebar size=5>
  20. <tr><td colspan=2><hr>
  21. <tr><td>Luas<td><input name=luas size=5>
  22. </table>
  23. <hr>
  24. <input type=button value="Proses" onclick="proses()">
  25. <input type=reset value="Reset">
  26. </html>
  • Skenario Pengujian

Untuk menguji Program apakah sesuai dengan yang diharapkan dapat dilakukan dengan cara pengujian sebagai berikut:

  1. Jalankan Program textbox.html
  2. Akan ditampilkan Form seperti gambar 3.2
  3. Isi Kolom Panjang dan Lebar, Panjang diisi angka 100 dan lebar diisi angka 50, kemudian click tombol Proses
  4. Program akan melakukan proses perkalian antara Panjang*Lebar, sehingga pada Kolom Luas akan ditampilkan angka 5000
  5. Jika Luas  yang ditampilkan sesuai dengan tabel 3.1 diatas, maka program sudah sesuai dengan yang diharapkan
  6. Jika Form masukan tidak di isi maka akan ditampilkan hasil seperti gambar 3.3
Gambar 3.2.Tampilan Layar Ketika di Isi Data
Gambar 3.3. Tampilan Layar Ketika Data Tidak di Isi

Latihan 3 Buat Program untuk menghitung Gaji Pegawai dengan Design  Form Seperti gambar 3.4 berikut:

Dengan Input Nama Pegawai, Jamkerja, upahperjam dan jumlah anak.

sedangkan outputnya Gaji Perbulan, Tunjangan Anak, Gaji Total sebulan, PPH10% dan Gaji Bersih diterima

Gambar 3.4.Design Form Program Gaji Pegawai

Note:

*1 minggu 5 hari kerja

*1 Bulan 4 Minggu

*Tunjangan Anak 10% Dari GajiPokok Per-Anak

Taryana Suryana M.Kom,
Teknik Informatika UNIKOM
taryanarx@email.unikom.ac.id
http://taryana.blog.unikom.ac.id

0 0
0 %
Happy
0 %
Sad
0 %
Excited
0 %
Angry
0 %
Surprise

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Close