Source Code Kalkulator Sederhana dengan JavaScript Versi 2

Source Code Kalkulator Sederhana dengan JavaScript Versi 2 – Saya sebelumnya minta maaf karena belum sempat untuk memenuhi janji saya pada postingan sebelumnya yakni untuk membahas fungsi function.eval() pada JavaScript.

Source Code Kalkulator Sederhana dengan JavaScript Versi 2

Sedikit bocoran tentang fungsi function.eval() ini yakni merupakan fungsi standar Javascript 1.0+, JScript 1.0+, ECMAScript 1.0+ dan didukung oleh Google Chrome Beta+, Fire Fox 1.0, Internet Explore 3+, Nescape Navigator 2.0+, Opera 3.0+, dan Safari 1.0+.

Jadi kalkulator yang telah kita sebelumnya bisa dibilang kalkulator yang dibuat secara instant karena menggunakan fungsi function.eval(). Oleh karena itu saya akan mencoba share kembali cara membuat kalkulator secara manual yakni dengan membuat masing-masing fungsi atau method setiap tombol.

Untuk lebih jelasnya tentang kalkulator versi ke 2 ini, alangkah lebih baiknya perhatikan source code program di bawah ini.

<html>
<head>
<title>Kalkulator Sederhana</title>
<style type="text/css">
/*code css*/
#tbl{
    background:#CCC -moz-linear-gradient(top,#FC9,#F60);
    -moz-box-shadow:2px 2px 15px; #000;
    margin-top:20px;
}
.btn{
    background-color:#000;
    width:50px;
    height:30px;
    font-size:5mm;
    font-family:tahoma;
    display:block;
    color:#FFF;
    text-decoration:none;
    border-style:outset;
}
.btn:hover{
    border-style: inset;
    background-color:#666;
}
.tmpl{
    width:240px;
    height:30px;
    font-size:5mm;
    font-family:tahoma;
    border-style: inset;
    -moz-border-radius:10px 0px 10px 0px;
}
</style>
<script language="javascript">
var angka="";
var bil1,bil2,ttl;
var op,pil;
function nol(){
    angka = angka+"0";
    document.form1.hsl.value = angka;
}
function satu(){
    angka = angka+"1";
    document.form1.hsl.value = angka;
}
function dua(){
    angka = angka+"2";
    document.form1.hsl.value = angka;
    
}
function tiga(){
    angka = angka+"3";
    document.form1.hsl.value = angka;
    
}
function empat(){
    angka = angka+"4";
    document.form1.hsl.value = angka;
    
}
function lima(){
    angka = angka+"5";
    document.form1.hsl.value = angka;
    
}
function enam(){
    angka = angka+"6";
    document.form1.hsl.value = angka;
}
function tujuh(){
    angka = angka+"7";
    document.form1.hsl.value = angka;
}
function delapan(){
    angka = angka+"8";
    document.form1.hsl.value = angka;
}
function sembilan(){
    angka = angka+"9";
    document.form1.hsl.value = angka;
}
function hps(){
    angka ="";
    document.form1.hsl.value = angka;
}
function tambah(){
    bil1 = angka;
    op   = "+";
    document.form1.hsl.value = op;
    angka = "";
    pil  = 1;
}
function krg(){
    bil1 = angka;
    op   = "-";
    document.form1.hsl.value = op;
    angka = "";
    pil  = 2;
}
function kali(){
    bil1 = angka;
    op   = "x";
    document.form1.hsl.value = op;
    angka = "";
    pil  = 3;
}
function bagi(){
    bil1 = angka;
    op   = "/";
    document.form1.hsl.value = op;
    angka = "";
    pil  = 4;
}
function sama_dengan(){
    if(pil==1){
        bil2 = angka
        ttl  = parseFloat(bil1)+parseFloat(bil2);
        angka= parseFloat(ttl);
        document.form1.hsl.value = angka;
    }
    else if(pil==2){
        bil2 = angka
        ttl  = parseFloat(bil1)-parseFloat(bil2);
        angka= parseFloat(ttl);
        document.form1.hsl.value = angka;
    }
    else if(pil==3){
        bil2 = angka
        ttl  = parseFloat(bil1)*parseFloat(bil2);
        angka= parseFloat(ttl);
        document.form1.hsl.value = angka;
    }
    else if(pil==4){
        bil2 = angka
        ttl  = parseFloat(bil1)/parseFloat(bil2);
        angka= parseFloat(ttl);
        document.form1.hsl.value = angka;
    }
}
</script>
</head>
<body bgcolor="#FFFFCC">
<p><h1 align="center">KALKULATOR SEDERHANA</h1></p><hr size="10" noshade="noshade"/>
<form name="form1">
<table align="center" cellpadding="2" cellspacing="2" id="tbl">
  <tr>
    <td height="60" colspan="4" valign="middle"><input name="hsl" type="text" class="tmpl" id="hsl" /></td>
  </tr>
  <tr align="center">
    <td><a href="javascript:tujuh();" class="btn">7</a></td>
    <td><a href="javascript:delapan();" class="btn">8</a></td>
    <td><a href="javascript:sembilan();" class="btn">9</a></td>
    <td><a href="javascript:hps();" class="btn">C</a></td>
    </tr>
  <tr align="center">
    <td><a href="javascript:empat();" class="btn">4</a></td>
    <td><a href="javascript:lima();" class="btn">5</a></td>
    <td><a href="javascript:enam();" class="btn">6</a></td>
    <td><a href="javascript:bagi();" class="btn">/</a></td>
    </tr>
  <tr align="center">
    <td><a href="javascript:satu();" class="btn">1</a></td>
    <td><a href="javascript:dua();" class="btn">2</a></td>
    <td><a href="javascript:tiga();" class="btn">3</a></td>
    <td><a href="javascript:kali();" class="btn">x</a></td>
    </tr>
  <tr align="center">
    <td><a href="javascript:nol();" class="btn">0</a></td>
    <td><a href="javascript:sama_dengan();" class="btn">=</a></td>
    <td><a href="javascript:tambah();" class="btn">+</a></td>
    <td><a href="javascript:krg();" class="btn">-</a></td>
    </tr>
  <tr align="center">
    <td colspan="4">&nbsp;</td>
    </tr>
</table>
</form>
<p>&nbsp;</p>
<hr size="10" noshade="noshade"/>
</body>
</html>

Silahkan di coba source code di atas, dan apabila ada yang ditanyakan tentang source di atas silahkan ditanyakan pada kolom komentar.

Selamat belajar, Happy Blogging…

2 komentar:

  1. Om cara membuat kolom buat koding php yang bisa d scroll gmna om

    BalasHapus
    Balasan
    1. untuk membuat efek scroll tinggal tambahkan code di bawah ini
      overflow: scroll

      Hapus
Catatan:
Untuk menyisipkan video, gunakan tag <i rel="youtube">URL YOUTUBE ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA...</i>
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Untuk menyisipkan kode panjang, gunakan tag <i rel="pre">KODE ANDA...</i>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA...</strong>

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!"

Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (out of topic) dengan menekan tombol OOT di bawah ini.

Konversi Kode di Sini!OOT

 
Design by Juned al~Bughisy Copyright © 2012 ~ 2013 Powered by Blogger
Back to Top