Kalkulator adalah alat untuk menghitung dari perhitungan sederhana seperti penjumlahan, pengurangan, perkalian dan pembagian sampai kepada kalkulator sains yang dapat menghitung rumus matematika tertentu. Pada perkembangannya sekarang ini, kalkulator sering dimasukkan sebagai fungsi tambahan daripada komputer, handphone, bahkan sampai jam tangan.
Selain sebagai fungsi tambahan pada komputer, kalkulator juga bisa berfungsi secara online melalui HTML. Penggunaan JavaScript pada pembuatan aplikasi kalkulator merupakan salah satu cara agar kalkutator bisa digunakan pada sebuah halaman web.
JavaScript sendiri merupakan nama implementasi Netscape Communications Corporation untuk ECMAScript standar, suatu bahasa skrip yang didasarkan pada konsep pemrograman berbasis prototipe. Bahasa ini terutama terkenal karena penggunaannya di situsweb (sebagaiJavaScript sisi klien) dan juga digunakan untuk menyediakan akses skrip untuk objek yang dibenamkan (embedded) di aplikasi lain.
Walaupun memiliki nama serupa, JavaScript hanya sedikit berhubungan dengan bahasa pemrograman Java, dengan kesamaan utamanya adalah penggunaan sintaks C. Secara semantik, JavaScript memiliki lebih banyak kesamaan dengan bahasa pemrograman Self. Skrip JavaScript yang dimasukkan di dalam berkas HTML ataupun XHTML harus dimasukkan di antara tag <script>...</script>. Berikut ini adalah contohnya (yang akan menampilkan sebuah dialog box berisi Halo Dunia! ketika sebuah tombol diklik oleh pengguna):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-trasitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Simple Calculator</title>
</head>
<body>
<script language="JavaScript" type="text/javascript">
<!--
function hasil()
{
if (operator.value == '+')
{bil3.value = eval(bil1.value)+eval(bil2.value);}
else if (operator.value == '-')
{bil3.value = eval(bil1.value)-eval(bil2.value);}
else if (operator.value == 'x')
{bil3.value = eval(bil1.value)*eval(bil2.value);}
else if (operator.value == ':')
{bil3.value = eval(bil1.value)/eval(bil2.value);}
}
//-->
</script>
<form name=form1 action"#">
<input type="text" id="bil1" />
<select id="operator">
<option>+</option>
<option>-</option>
<option>x</option>
<option>:</option>
</select>
<input type="text" id="bil2" />
<input type="button" value="=" onClick="hasil()" />
<input type="text" id="bil3" />
</form>
</body>
</html>
Skrip di atas jika di-execute akan memiliki tampilan seperti berikut :
Contoh di atas merupakan salah satu contoh dasar dari kalkulator sederhana dengan menggunakan JavaScript. Dari contoh dasar tersebut dapat dikembangkan bermacam-macam kalkulator JavaScript yang lebih baik. Contoh di bawah ini merupakan salah satu entuk pengembangan kalkulator JavaScript dengan tampilan yang hampir sama dengan kalkulator sederhana yang beredar di pasaran.
Halaman HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Calculator</title>
</head>
<body>
<FORM name="Keypad">
<DIV align="left">
<BLOCKQUOTE>
<TABLE style="height: 60px;" width="50" bgcolor="#9fbad0" border="1" bordercolor="#9fbad0" cellpadding="2" cellspacing="0">
<TBODY>
<TR>
<TD colspan="3" align="middle"><INPUT name="ReadOut" size="24" value="0" type="text" width="100%"></TD>
<TD><INPUT name="btnClear" value=" C " onclick="Clear()" type="button"></TD>
<TD><INPUT name="btnClearEntry" value=" CE " onclick="ClearEntry()" type="button"></TD>
</TR>
<TR>
<TD><INPUT name="btnSeven" value=" 7 " onclick="NumPressed(7)" type="button"></TD>
<TD><INPUT name="btnEight" value=" 8 " onclick="NumPressed(8)" type="button"></TD>
<TD><INPUT name="btnNine" value=" 9 " onclick="NumPressed(9)" type="button"></TD>
<TD>
<TD><INPUT name="btnNeg" value=" +/- " onclick="Neg()" type="button"></TD>
<TD><INPUT name="btnPercent" value=" % " onclick="Percent()" type="button"></TD>
</TR>
<TR>
<TD><INPUT name="btnFour" value=" 4 " onclick="NumPressed(4)" type="button"></TD>
<TD><INPUT name="btnFive" value=" 5 " onclick="NumPressed(5)" type="button"></TD>
<TD><INPUT name="btnSix" value=" 6 " onclick="NumPressed(6)" type="button"></TD>
<TD>
<TD align="middle">
<P align="left"><INPUT name="btnPlus" value=" + " onclick="Operation('+')" type="button"></P>
</TD>
<TD align="middle"><INPUT name="btnMinus" value=" - " onclick="Operation('-')" type="button"></TD>
</TR>
<TR>
<TD><INPUT name="btnOne" value=" 1 " onclick="NumPressed(1)" type="button"></TD>
<TD><INPUT name="btnTwo" value=" 2 " onclick="NumPressed(2)" type="button"></TD>
<TD><INPUT name="btnThree" value=" 3 " onclick="NumPressed(3)" type="button"></TD>
<TD>
<TD align="middle">
<P align="left"><INPUT name="btnMultiply" value=" * " onclick="Operation('*')" type="button"></P>
</TD>
<TD align="middle"><INPUT name="btnDivide" value=" / " onclick="Operation('/')" type="button"></TD>
</TR>
<TR>
<TD><INPUT name="btnZero" value=" 0 " onclick="NumPressed(0)" type="button"></TD>
<TD><INPUT name="btnDecimal" value=" . " onclick="Decimal()" type="button"></TD>
<TD colspan="3">
<TD><INPUT name="btnEquals" value=" = " onclick="Operation('=')" type="button"></TD>
</TR>
</TBODY>
</TABLE>
</BLOCKQUOTE>
</DIV>
</FORM>
<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>
</html>
Dan hasil tampilannya adalah sebagai berikut :
Kedua contoh program kalkulator JavaScript di atas merupakan contoh kalkulator sederhana yang mungkin bermanfaat untuk pembelajaran pemograman web dengan JavaScript. Selain contoh-contoh tersebut, ada juga beberapa program kalkulator yang beredar di internet dengan berbagai variasi seperti kalkulator scientific, kalkulator dengan PHP, dan lain-lain yang dikembangkan oleh programer di belahan bumi ini. Pengembangan ini merupakan salah satu fakta bahwa bahasa pemograman akan terus berkembang.
1 komentar:
keren kaaa thx beforeeee
Posting Komentar