Apr 022013
 

Tutorial Jquery Bagian 1 (Mini Kalkulator)

Assalamu’ alaikum wr wb

Bagi para programer web pasti sudah tidak asing lagi dengan JQuery, kali ini saya akan sedikti berbagi tentang bagaimana cara menggunakan Jquery untuk menghandle event pada tag Html kita.

Berikut adalah tampilan cupture dari hasil program yang akan kita buat.

kalkulator

Berikut adalah source code yang di gunakan :

<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title></title>
 <script type="text/javascript" src="/pweb/js/jquery-1.8.2.js"></script>
 <script type="text/javascript">
 $(document).ready(function(){
 $('#btnHitung').click(function(evt){
 var hasil = $('#txt1').val() + $('#operator').val() + $('#txt2').val()
 alert('Rumus = ' + hasil);
 $('#txt-hasil').val(eval(hasil));
 })
 $('#btnTampil').click(function(){
 if ($('#btnTampil').val()=="Hide"){
 $('table').hide(2000);
 $('#btnTampil').val("Show");
 }else{
 $('table').show(2000);
 $('#btnTampil').val("Hide");
 }
 })
 })
 </script>
 <style type="text/css">
 input[type=number]{
 text-align: right;
 width: 100px;
 background-color: beige;
 }
 input[type=number]:focus{
 background-color: yellowgreen;
 }
 </style>
 </head>
 <body>
 <input type="button" value="Hide" id="btnTampil" />
 <table border="0">
 <tr>
 <td>Angka 1</td>
 <td>:</td>
 <td><input type="number" id="txt1" name="txt1" /></td>
 </tr>
 <tr>
 <td>Angka 2</td>
 <td>:</td>
 <td><input type="number" id="txt2" name="txt2" /></td>
 </tr>
 <tr>
 <td>Operasi</td>
 <td>:</td>
 <td>
 <select name="operator" id="operator">
 <option value="+">Jumlah</option>
 <option value="-">Kurang</option>
 <option value="*">Kali</option>
 <option value="/">Bagi</option>
 </select>
 </td>
 </tr>
 <tr>
 <td>Hasil</td>
 <td>:</td>
 <td><input type="number" id="txt-hasil" name="txt-hasil" /></td>
 </tr>
 <tr>
 <td rowspan="3"> <input type="button" value="Hitung" id="btnHitung" /> </td>
 </tr>
 </table>
 </body>
</html>

Selamat ber kreasi untuk tutorials elanjutnya kit akanmembuat kalkulator/Calculator yang lebih komplek. selamat mencoba

Wassalamu’ alaikum wr wb

Facebook Comments

  One Response to “Tutorial Jquery Bagian 1 (Mini Kalkulator)”

  1. […] Tutorial sebelumnya Tutorial Jquery Bagian 1 (Mini Kalkulator) , Kita sudah belajar bagaimana membuat perhitungan sederhana dengan memanfaatkan JQuery dan […]

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

(required)

(required)