Halaman

Selasa, 31 Desember 2013

Kesalahan Input Nilai dari Halaman HTML ke JavaScript

Berikut ini saya akan menjelaskan salah satu kesalahan yang umum terjadi saat proses input dari tag HTML misal textbox ke dalam variabel JavaScript. Kesalahan ini termasuk ke dalam kesalahan logic sehingga kadang sulit untuk ditemukan letak kesalahannya namun sebenarnya kesalahan ini bisa diatasi dengan mudah jika kita tahu caranya.

Dalam pengkodeannya saya menggunakan jQuery untuk memudahkan penulisan sintaksnya. Sehingga jika Anda ingin mencoba script yang ada di tulisan ini maka pastikan Anda telah mendownload file jQuery yang telah disediakan secara gratis di jquery.com

Oke kita langsung ke inti permasalahannya. Kesalahan input data yang dimaksud adalah mengenai perbedaan tipe data yang dipakai oleh tag HTML dalam hal ini tag textbox: <input type="text" ... /> dan variabel atau statemen yang dipakai oleh JavaScript.

Pada tag HTML jenis textbox meski yang diinputkan adalah nilai numerik misal 1, 2, 3 atau 0.5 dan 3.14 namun akan dibaca oleh JavaScript sebagai tipe data string. Mungkin Anda bingung maksud dari penjelasan saya ini, baik kita langsung ke kode programnya:
<script>
  $(function() {
    var nilai1 = $('#txtNilai1').val();
  });
</script>

Berdasarkan kode di atas, mungkin Anda akan mengira bahwa variabel nilai1 bernilai sesuai dengan apa yang ada pada tag HTML dengan id txtNilai1. Jika Anda berpikir seperti itu maka... Ya Anda benar! Tapi masalahnya bukan pada nilai yang "terlihat" oleh Anda tapi tipe data yang dihasilkan oleh method val() dan ini dilihat oleh JavaScript sebagai tipe data string.

Oke misalnya Anda memasukan nilai bilangan bulat 1 pada textbox yang ada, maka JavaScript akan membacanya dengan nilai "1". Perhatikan bahwa nilai 1 sama dengan "1" tapi tidak identik. Yang saya maksud dengan 1 tidak identik dengan "1" adalah dari sisi tipe datanya. Nilai 1 bertipe integer sedangkan "1" bertipe string.

Hal di atas akan sangat berpengaruh saat Anda mengolah nilainya untuk keperluan perhitungan matematis. Berikut contoh mudah dari permasalahan ini:
<script>
  $(function() {
    $('#btnJumlahkan').on('click', function() {
      var nilai1 = $('#txtNilai1').val();
      var nilai2 = $('#txtNilai2').val();
      var hasil = nilai1 + nilai2;
    
      alert(hasil);
    });
  });
</script>

Berdasarkan contoh script di atas maka misalnya:
1. $('#txtNilai1').val() bernilai: "1",
2. $('#txtNilai2').val() bernilai: "2",

Maka variabel hasil akan bernilai "12", padahal yang kita inginkan adalah nilai 3. Kenapa bisa demikian? Ya karena terjadi proses penggabungan string (string concatenation) "1" dan "2" oleh operator +.

Padahal yang kita tahu bahwa operasi perhitungan matematis membutuhkan suatu tipe data yang bisa diolah secara matematis pula yakni misalnya tipe data integer, float, dan double. Sehingga kita perlu suatu cara untuk mengonversi nilai "1" yang memiliki tipe data string ke nilai 1 yang bertipe integer.

Fungsi yang bisa Anda pakai untuk melakukan konversi dari tipe data string ke integer adalah fungsi parseInt(). Untuk itu jika Anda berniat melakukan perhitungan matematis yang diambil dari halaman HTML, sebaiknya gunakan fungsi ini. Untuk bilangan pecahan, gunakan fungsi parseFloat().

Untuk merevisi kode program di atas maka Anda hanya perlu merubah sedikit pada statemen berikut:
var nilai1 = parseInt($('#txtNilai1').val());
var nilai2 = parseInt($('#txtNilai2').val());

Sekarang jika Anda memasukan nilai "1" maka akan diubah ke nilai 1 oleh fungsi parseInt(). Tentu saja kode di atas masih sangat kurang untuk pengecekan terhadap kemungkinan user memasukan data non numerik misalnya alfabet. Namun intinya bahwa nilai numerik yang Anda masukan melalui halaman web sesungguhnya tidak bernilai numerik (tipe data integer atau float) tapi tipe data string. JavaScript perlu diberitahu secara spesifik nilai yang kita masukan itu benar-benar bernilai bilangan numerik ataukah hanya data alfabet-numerik.

Demikian artikel ini saya buat dan semoga bermanfaat bagi kita semua.

© 2013 husnanlabs.blogspot.com

Tidak ada komentar:

Posting Komentar