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>
