Kalkulator Sederhana dengan Javascript


Pada kuliah Pemrograman Web dengan materi Javascript yang baru saja selesai, selain menjelaskan materi yang ada di slide, saya juga men-demo-kan bagaimana penggunaan nyata dari Javascript dengan membuat program Kalkulator sederhana yang saya coding secara on the fly sembari menjelaskan bagian per bagian.

Berikut hasil kode program kalkulator yang saya buat. Untuk mencobanya, silakan copy kode tersebut ke notepad dan save sebagai HTML. Belum saya cek secara seksama apakah masih ada bug atau tidak. Maaf apabila masih ada bug atau solusinya kurang efisien. Yah namanya juga on the fly😀

</pre>
<html>
 <head>
 <title>Calculator</title>
 </head>
 <style type="text/css">
 .calcbtn{
 width: 100px;
 height: 100px;
 }

</style>
 <script type="text/javascript">
 var currentToken = "";
 var resInt = 0;
 var resStr = "";
 var currentOp = "";
 var prevToken = "";

function btnAction(btn){
 var result = document.getElementById("result");
 var currentToken = btn.value;
 if(isOpt(currentToken) || currentToken == "="){
 if(!isOpt(prevToken)){
 if(currentToken == "+"){
 resInt += parseInt(result.value);
 if(currentOp != ""){
 result.value=resInt;
 resStr = resInt;
 currentOp = "";
 }
 resStr = "";
 currentOp = "+";
 }
 else if(currentToken == "="){
 if(currentOp == "+"){
 resInt += parseInt(result.value);
 result.value=resInt;
 resStr = resInt;
 currentOp = "";
 resInt = 0;
 }
 }
 }
 }
 else{
 if(currentToken != 'c'){
 if(result.value == "0") resStr = currentToken;
 else resStr += currentToken;
 result.value = resStr;
 }
 else{
 resInt = 0;
 currentToken = "";
 resStr = "";
 currentOp = "";
 result.value = '0';
 }
 }
 prevToken = currentToken;
 document.getElementById("restemp").innerHTML += currentToken;
 }

function isOpt(token){

if(token == "*" || token=="/" || token=="+" || token=="-"){
 return true;
 }
 else{
 return false;
 }
 }
 </script>
 <body>
 <p id="restemp"></p>
 <table border="0">
 <tr>
 <td colspan="4">
 <input type="text" size="70" value="0" name="result" id="result"/>
 </td>
 </tr>
 <tr>
 <td><input type="button" id="b7" value="7" onclick="btnAction(this)"></td>
 <td><input type="button" id="b8" value="8" onclick="btnAction(this)"></td>
 <td><input type="button" id="b9" value="9" onclick="btnAction(this)"></td>
 <td><input type="button" id="bdiv" value="/" onclick="btnAction(this)"></td>
 </tr>
 <tr>
 <td><input type="button" id="b4" value="4" onclick="btnAction(this)"></td>
 <td><input type="button" id="b5" value="5" onclick="btnAction(this)"></td>
 <td><input type="button" id="b6" value="6" onclick="btnAction(this)"></td>
 <td><input type="button" id="bmul" value="*" onclick="btnAction(this)"></td>
 </tr>
 <tr>
 <td><input type="button" id="b1" value="1" onclick="btnAction(this)"></td>
 <td><input type="button" id="b2" value="2" onclick="btnAction(this)"></td>
 <td><input type="button" id="b3" value="3" onclick="btnAction(this)"></td>
 <td><input type="button" id="bsubs" value="-" onclick="btnAction(this)"></td>
 </tr>
 <tr>
 <td><input type="button" id="b0" value="0" onclick="btnAction(this)"></td>
 <td><input type="button" id="bclear" value="c" onclick="btnAction(this)"></td>
 <td><input type="button" id="bequal" value="=" onclick="btnAction(this)"></td>
 <td><input type="button" id="badd" value="+" onclick="btnAction(this)"></td>
 </tr>
 </table>
 </body>
 </html>

One thought on “Kalkulator Sederhana dengan Javascript

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s