Jumat, 18 Februari 2011

Membuat kalkulator sederhana dengan javascript

Buat teman-teman yang lagi belajar bahasa pemrograman javascript sama seperti saya yang lagi belajar dikampus juga ,mungkin postingan yang satu ini bisa membantu pembaca untuk mengetahui lebih dalam tentang java script...seperti judul diatas,pada postingan ini saya akan mencoba menuliskan sedikit coding yang berfungsi untuk membuat kalkulator sederhana..langsung saja

silahkan copy coding berikut ke dalam html anda yaitu dibagian badan program yang telah anda buat


<body>
<center>
<form name="Keypad" action>
<table border="1"&nbsp; bgcolor="#838383">
<tr>
<td colspan="5" bgcolor="#DFDFDF">
 <input name="ReadOut" type="Text" size="30" value="0">
</td>
</tr>
<tr>
<td bgcolor="#DFDFDF">
<input name="btnSeven" type="Button" value="&nbsp; 7&nbsp; " onClick="NumPressed(7)">
</td>
<td bgcolor="#DFDFDF">
<input name="btnEight" type="Button" value="&nbsp; 8&nbsp; " onClick="NumPressed(8)">
</td>
<td bgcolor="#DFDFDF">
<input name="btnNine" type="Button" value="&nbsp; 9&nbsp; " onClick="NumPressed(9)">
</td>
<td bgcolor="#DFDFDF"><input name="btnNeg" type="Button" value=" +/- " onClick="Neg()"></td>
<td bgcolor="#DFDFDF"><input name="btnPercent" type="Button" value=" % " onClick="Percent()"></td>

</tr>
<tr>
<td bgcolor="#DFDFDF">
<input name="btnFour" type="Button" value="&nbsp; 4&nbsp; " onClick="NumPressed(4)">
</td>
<td bgcolor="#DFDFDF">
<input name="btnFive" type="Button" value="&nbsp; 5&nbsp; " onClick="NumPressed(5)">
</td>
<td bgcolor="#DFDFDF">
<input name="btnSix" type="Button" value="&nbsp; 6&nbsp; " onClick="NumPressed(6)">
</td>
<td bgcolor="#DFDFDF"><input name="btnPlus" type="Button" value="&nbsp; +&nbsp; "
 onClick="Operation('+')"></td>
<td bgcolor="#DFDFDF"><input name="btnMultiply" type="Button" value="&nbsp; *&nbsp; "
 onClick="Operation('*')"></td>

</tr>
<tr>
<td bgcolor="#DFDFDF">
<input name="btnOne" type="Button" value="&nbsp; 1&nbsp; " onClick="NumPressed(1)">
</td>
<td bgcolor="#DFDFDF">
<input name="btnTwo" type="Button" value="&nbsp; 2&nbsp; " onClick="NumPressed(2)">
</td>
<td bgcolor="#DFDFDF">
<input name="btnThree" type="Button" value="&nbsp; 3&nbsp; " onClick="NumPressed(3)">
</td>
<td bgcolor="#DFDFDF"><input name="btnMinus" type="Button" value="&nbsp; -&nbsp; "
 onClick="Operation('-')"></td>
<td bgcolor="#DFDFDF"><input name="btnDivide" type="Button" value="&nbsp; /&nbsp; "
 onClick="Operation('/')"></td>

</tr>
<tr>
<td bgcolor="#DFDFDF">
<input name="btnZero" type="Button" value="&nbsp; 0&nbsp; " onClick="NumPressed(0)">
</td>
<td bgcolor="#DFDFDF">
<input name="btnDecimal" type="Button" value="&nbsp; .&nbsp; " onClick="Decimal()">
</td>
<td colspan="3"&nbsp; bgcolor="#797979">
 <input name="btnClear" type="Button" value="&nbsp; C&nbsp; " onClick="Clear()">
 <input name="btnClearEntry" type="Button" value=" CE " onClick="ClearEntry()">
 <input name="btnEquals" type="Button" value="&nbsp; =&nbsp; " onClick="Operation('=')"></td>
</tr>
</table>
</form>
</center>
<font face="Verdana, Arial, Helvetica" size=2>
 <script LANGUAGE="JavaScript">

var FKeyPad = document.Keypad;
var Accum = 0;
var FlagNewNum = false;
var PendingOp = "";
function NumPressed (Num) {
if (FlagNewNum) {
FKeyPad.ReadOut.value = Num;
FlagNewNum = false;
}
else {
if (FKeyPad.ReadOut.value == "0")
FKeyPad.ReadOut.value = Num;
else
FKeyPad.ReadOut.value += Num;
}
}
function Operation (Op) {
var Readout = FKeyPad.ReadOut.value;
if (FlagNewNum && PendingOp != "=");
else
{
FlagNewNum = true;
if ( '+' == PendingOp )
Accum += parseFloat(Readout);
else if ( '-' == PendingOp )
Accum -= parseFloat(Readout);
else if ( '/' == PendingOp )
Accum /= parseFloat(Readout);
else if ( '*' == PendingOp )
Accum *= parseFloat(Readout);
else
Accum = parseFloat(Readout);
FKeyPad.ReadOut.value = Accum;
PendingOp = Op;
}
}
function Decimal () {
var curReadOut = FKeyPad.ReadOut.value;
if (FlagNewNum) {
curReadOut = "0.";
FlagNewNum = false;
}
else
{
if (curReadOut.indexOf(".") == -1)
curReadOut += ".";
}
FKeyPad.ReadOut.value = curReadOut;
}
function ClearEntry () {
FKeyPad.ReadOut.value = "0";
FlagNewNum = true;
}
function Clear () {
Accum = 0;
PendingOp = "";
ClearEntry();
}
function Neg () {
FKeyPad.ReadOut.value = parseFloat(FKeyPad.ReadOut.value) * -1;
}
function Percent () {
FKeyPad.ReadOut.value = (parseFloat(FKeyPad.ReadOut.value) / 100) * parseFloat(Accum);
}
</script>
</body>

contoh :



selamat mencoba kawan.

Tidak ada komentar:

Posting Komentar