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:
Gambar
saat tampilan awal program di jalankan
Gambar
saat angka pertama di masukan
Kemudian
angka saat dimasukan angka kedua, hasil pun langsung muncul tanpa harus
memencet tombol submit.
Nah disini jquery yang di masukan
adalah :
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:
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:
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 :)
