Cara menggunakan perhitungan otomatis dengan javascript

Pada kesempatan kali ini saya akan membahas mengenai penggunaan jquery dalam perhitungan secara otomatis di halaman html. Namun sebelum kita belajar mengenai menghitung otomatis menggunakan jquery alangkah lebih baiknya kita mengenal dulu apa itu jquery, karena jika tak kenal maka tak sayang.

Jadi Jquery adalah library didalam javascript yang menyimpan kumpulan kode-kode yang berguna untuk mempermudah pengguna membuat website HTML, dimana Jquery dapat mempersingkat kode-kode pembuatan web hanya dengan memanggil fungsi yang ada di dalam java script. Jquery hanyalah sebuah file yang berisi kode dalam javascript tetapi memiliki banyak fitur. Inilah alasan mengapa banyak pembuat web pemula atau pembuat web ahli lebih menyuai memakai jquery. Selain itu fungsi-fungsi serta contoh penggunaan jquery juga sangat mudah di pelajari karena disimpan di situs resminya sendiri yaitu jquery.com.

Adapun beberapa kelebihan apabila kita menggunakan jquery yaitu:

-          Jquery dapat menyederhanakan kode-kode rumit java script hanya dengan memanggil fungsi dari library javascript.

-          Jquery disupport oleh plugin yang lengkap

-          Filenya hanya satu dan berisi banyak fitur namun ukurannya kecil.

-          Sudah banyak tutorial dan cara belajar jquery di internet sehingga memudahkan penggunaanya.

Serta masih banyak lagi kelebihan-kelebihan dari jquery, nah karena kali ini kita akan berlajar menegenai menghitung otomatis menggunakan jquery maka saya akan memperkenalkan sedikit operator aritmatika yang di pakai di dalam javascript dan biasa di pakai dalam jquery juga berikut maca-macam operator aritmatika:

Operator

Definisi

+

Penjumlahan

-

Pengurangan

*

Perkalian

/

Pembagian

%

Modulus (Sisa hasil bagi)

++

Increment

--

Decrement

Pada artikel ini saya akan membuat perhitungan otomatis dengan aritmatika mengenai perkalian dan pengurangan. Dalam pembuatan program ini selain menggunakan jquery, ita juga menggunakan event onkeyup, apa itu event onkeyup? Onkeyup merupakan sebuah event pada jquery yang berguna untuk langsung menjalankan fungsi setelah kolom diisi atau di input tanpa harus mengkilk tombol submit. Baiklah langsung saja ini adalah program yang saya buat:

<html>

<head>

</head>

<body>

<div id="content">

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script>

function hitung2() {

var a = $(".a2").val();

var b = $(".b2").val();

c = a * b; //a kali b

$(".c2").val(c);

}

function isNumberKey(evt){

 var charCode = (evt.which) ? evt.which : event.keyCode;

 if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57))

 return false;

 return true;

}

</script>

 <table>

 <div id="inputa">

 <p>Angka 1 </p>

 <input type="text" name="angka1" id="angka1" class="a2" onkeyup="hitung2();" required="" size="40" onkeyup="return isNumberKey(event)" >

 </div>

 <div id="inputa">

 <p> Angka 2 </p>

 <input type="text" name="angka2" id="angka2" class="b2" onkeyup="hitung2();" required="" size="40" onkeyup="return isNumberKey(event)" >

 </div>

 <div id="inputa">

 <p> Hasil </p>

 <input type="text" name="hasil" id="hasil" class="c2" readonly size="40">

 </div>

 </div>

 </table>

</body>

</html>

Maka hasilnya akan seperti ini:

Cara menggunakan perhitungan otomatis dengan javascript

Gambar saat tampilan awal program di jalankan

Cara menggunakan perhitungan otomatis dengan javascript

Gambar saat angka pertama di masukan

Cara menggunakan perhitungan otomatis dengan javascript

Kemudian angka saat dimasukan angka kedua, hasil pun langsung muncul tanpa harus memencet tombol submit.

            Nah disini jquery yang di masukan adalah :

Cara menggunakan perhitungan otomatis dengan javascript

Jquery ini berfungsi untuk memanggil fungsi agar dapat berjalannya function yang telah di buat dan memperpendek kode-kode dalam javascript, berikut function yang di pakai dalam program diatas:

Cara menggunakan perhitungan otomatis dengan javascript

Diatas terlihat  c= a*b; ini merupakan kodingan atau rumus yang di pakai untuk mengalikan angka 1 dengan angka 2. Function ini akan di panggil di dalam <body> berikut source codenya:

Cara menggunakan perhitungan otomatis dengan javascript

Disitu tertulis onkeyup=”hitung2();”yang berarti event onkeyup digunakan untuk memanggil function hitung2() agar setelah angka 1 dan 2 di isi hasil akan langsung masuk kedalam kolom hasil tanpa harus mengklik tombol submit atau menekan enter.

      Lalu berikutnya adalah program menghitung pengurangan secara otomatis dengan source code sebagai berikut:

<html>

<head>

</head>

<body>

<div id="content">

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script>

function hitung2() {

var a = $(".a2").val();

var b = $(".b2").val();

c = a - b;

$(".c2").val(c);

}

function isNumberKey(evt){

 var charCode = (evt.which) ? evt.which : event.keyCode;

 if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57))

 return false;

 return true;

}

</script>

 <table>

 <div id="inputa">

 <p>Angka 1 </p>

 <input type="text" name="angka1" id="angka1" class="a2" onkeyup="hitung2();" required="" size="40" onkeyup="return isNumberKey(event)" >

 </div>

 <div id="inputa">

 <p> Angka 2 </p>

 <input type="text" name="angka2" id="angka2" class="b2" onkeyup="hitung2();" required="" size="40" onkeyup="return isNumberKey(event)" >

 </div>

 <div id="inputa">

 <p> Hasil </p>

 <input type="text" name="hasil" id="hasil" class="c2" readonly size="40">

 </div>

 </div>

 </table>

</div>

</div>

</body>

</html>

Dan hasilnya adalah sebagai berikut:

Perbedaannya hanya terletak pada function perhitunganya dimana operator aritmatika yang dipakai adalah tanda pengurangan c= a-b;

Didalam source code pengurangan ini juga tetap memakai jquery yang sama dan memakai event onkeyup agar hasil langsung muncul setelah kedua angka di inputkan.

Cukup mudah kan untuk memperlajari jquery? Itulah alasan kenapa banyak website-website besar yang menggunakan jquery selain mempersingkat kode-kode juga mempermudah dalam pengaplikaisannya karena fitur yang di berikan jquery membuat tampilan web semakin dinamis dan menarik. Selain menggunakan opertor aritmatika perkalian (*) perhitungan otomatis dengan jquery juga dapat menggunakan opertaor aritmatika yang lainnya.

Selamat mencoba dan semoga artikel ini bermanfaat. Apabila ada kritik dan saaran bisa langsung komen di bagian bawah. Terimakasih telah mengunjungi blog saya :)