Membuat Kalkulator Scientific dengan HTML dan JavaScript

JavaScript memang sangat menakjubkan. Perkembangannya yang sangat pesat membuat website modern menjadi lebih dinamis. Website yang dinamis akan mempermudah interaksi pengguna internet dengan website yang dikunjunginya. JavaScript akan membuat website menjadi mudah di akses, namun JavaScript yang terlalu berlebihan justru akan memperlambat pemuatan halaman Web.

Ada yang berkata bahwa pemograman JavaScript mirip dengan bahasa Java. Ya, bahasa programnya memang sangat mirip, namun JavaScript bukanlah berasal dari Java. JavaScript tidak memiliki Class seperti yang dimiliki oleh bahasa Java.

Membuat Kalkulator Scientific

Sama seperti bahasa Java, pemograman berbasis web JavaScript telah dapat melakukan berbagai fungsi matematika. Dengan menggunakan fungsi matematika tersebut, kita dapat membuat sebuah aplikasi kalkulator berbasis web. Kalkulator ini juga dapat Anda pasang di Blog maupun di website dengan mudah karena hanya tinggal mengcopy paste saja:

1. Kode untuk header

Masukkan kode dibawah ini sebelum tanda </head> atau di header website Anda. Anda juga boleh memasukkan kode tersebut selain di header asalkan berada diatas kode Kalkulator dibawahnya.

<SCRIPT LANGUAGE="JavaScript">
 function addChar(input, character) {
 if(input.value == null || input.value == "0")
 input.value = character
 else
 input.value += character
 }

 function cos(form) {
 form.display.value = Math.cos(form.display.value);
 }

 function sin(form) {
 form.display.value = Math.sin(form.display.value);
 }

 function tan(form) {
 form.display.value = Math.tan(form.display.value);
 }

 function sqrt(form) {
 form.display.value = Math.sqrt(form.display.value);
 }

 function ln(form) {
 form.display.value = Math.log(form.display.value);
 }

 function exp(form) {
 form.display.value = Math.exp(form.display.value);
 }

 function deleteChar(input) {
 input.value = input.value.substring(0, input.value.length - 1)
 }

 function changeSign(input) {
 if(input.value.substring(0, 1) == "-")
 input.value = input.value.substring(1, input.value.length)
 else
 input.value = "-" + input.value
 }

 function compute(form) {
 form.display.value = eval(form.display.value)
 }

 function square(form) {
 form.display.value = eval(form.display.value) * eval(form.display.value)
 }

 function checkNum(str) {
 for (var i = 0; i< str.length; i++) {
 var ch = str.substring(i, i+1)
 if (ch < "0" || ch >"9") {
 if (ch != "/" && ch != "*" && ch != "+" && ch != "-" && ch != "."
 && ch != "(" && ch!= ")") {
 alert("invalid entry!")
 return false
 }
 }
 }
 return true
 }
</SCRIPT>

2. Kode untuk body

Setelah menuliskan kode di atas pada header halaman web, sekarang masukkan kode ini di body website atau di halaman blog Anda. Kode di bawah ini adalah kode button dan textarea yang menggunakan JavaScript sebagai pemicunya.

<FORM NAME="sci-calc">
<TABLE CELLSPACING="0" CELLPADDING="1">
<TR>
<TD COLSPAN="5" ALIGN="center">
<INPUT NAME="display" VALUE="0" SIZE="28" MAXLENGTH="25">
</TD>
</TR>
<TR>
<TD ALIGN="center">
<INPUT TYPE="button" VALUE=" exp " ONCLICK="if (checkNum(this.form.display.value)) { exp(this.form) }">
</TD>
<TD ALIGN="center">
<INPUT TYPE="button" VALUE=" 7 " ONCLICK="addChar(this.form.display, '7')">
</TD>
<TD ALIGN="center">
<INPUT TYPE="button" VALUE=" 8 " ONCLICK="addChar(this.form.display, '8')">
</TD>
<TD ALIGN="center">
<INPUT TYPE="button" VALUE=" 9 " ONCLICK="addChar(this.form.display, '9')">
</TD>
<TD ALIGN="center">
<INPUT TYPE="button" VALUE=" / " ONCLICK="addChar(this.form.display, '/')">
</TD>
</TR>
<TR>
<TD ALIGN="center">
<INPUT TYPE="button" VALUE=" ln " ONCLICK="if (checkNum(this.form.display.value)) { ln(this.form) }">
</TD>
<TD ALIGN="center">
<INPUT TYPE="button" VALUE=" 4 " ONCLICK="addChar(this.form.display, '4')">
</TD>
<TD ALIGN="center">
<INPUT TYPE="button" VALUE=" 5 " ONCLICK="addChar(this.form.display, '5')">
</TD>
<TD ALIGN="center">
<INPUT TYPE="button" VALUE=" 6 " ONCLICK="addChar(this.form.display, '6')">
</TD>
<TD ALIGN="center">
<INPUT TYPE="button" VALUE=" * " ONCLICK="addChar(this.form.display, '*')">
</TD>
</TR>
<TR>
<TD ALIGN="center">
<INPUT TYPE="button" VALUE=" sqrt " ONCLICK="if (checkNum(this.form.display.value)) { sqrt(this.form) }">
</TD>
<TD ALIGN="center">
<INPUT TYPE="button" VALUE=" 1 " ONCLICK="addChar(this.form.display, '1')">
</TD>
<TD ALIGN="center">
<INPUT TYPE="button" VALUE=" 2 " ONCLICK="addChar(this.form.display, '2')">
</TD>
<TD ALIGN="center">
<INPUT TYPE="button" VALUE=" 3 " ONCLICK="addChar(this.form.display, '3')">
</TD>
<TD ALIGN="center">
<INPUT TYPE="button" VALUE=" - " ONCLICK="addChar(this.form.display, '-')">
</TD>
</TR>
<TR>
<TD ALIGN="center">
<INPUT TYPE="button" VALUE=" sq " ONCLICK="if (checkNum(this.form.display.value)) { square(this.form) }">
</TD>
<TD ALIGN="center">
<INPUT TYPE="button" VALUE=" 0 " ONCLICK="addChar(this.form.display, '0')">
</TD>
<TD ALIGN="center">
<INPUT TYPE="button" VALUE=" . " ONCLICK="addChar(this.form.display, '.')">
</TD>
<TD ALIGN="center">
<INPUT TYPE="button" VALUE=" +/- " ONCLICK="changeSign(this.form.display)">
</TD>
<TD ALIGN="center">
<INPUT TYPE="button" VALUE=" + " ONCLICK="addChar(this.form.display, '+')">
</TD>
</TR>
<TR>
<TD ALIGN="center">
<INPUT TYPE="button" VALUE=" ( " ONCLICK="addChar(this.form.display, '(')">
</TD>
<TD ALIGN="center">
<INPUT TYPE="button" VALUE="cos" ONCLICK="if (checkNum(this.form.display.value)) { cos(this.form) }">
</TD>
<TD ALIGN="center">
<INPUT TYPE="button" VALUE=" sin" ONCLICK="if (checkNum(this.form.display.value)) { sin(this.form) }">
</TD>
<TD ALIGN="center">
<INPUT TYPE="button" VALUE=" tan" ONCLICK="if (checkNum(this.form.display.value)) { tan(this.form) }">
</TD>
<TD ALIGN="center">
<INPUT TYPE="button" VALUE=" ) " ONCLICK="addChar(this.form.display, ')')">
</TD>
</TR>
<TR>
<TD ALIGN="center">
<INPUT TYPE="button" VALUE="clear" ONCLICK="this.form.display.value = 0 ">
</TD>
<TD ALIGN="center" COLSPAN="3">
<INPUT TYPE="button" VALUE="backspace" ONCLICK="deleteChar(this.form.display)">
</TD>
<TD ALIGN="center">
<INPUT TYPE="button" VALUE="enter" NAME="enter" ONCLICK="if (checkNum(this.form.display.value)) { compute(this.form) }">
</TD>
</TR>
</TABLE>
</FORM>

3. Hasil Akhir

Setelah menulis kode di atas, maka Anda akan mendapatkan hasil akhir seperti Kalkulator di bawah ini.

Kode kalkulator ini berasal dari teman wapper Saya. Sayang sekali wapsite tersebut sudah tidak aktif lagi dan tidak dapat diakses.

Anda bisa mengembangkan lebih lanjut kode diatas dengan menambahkan beberapa CSS dan classnya. Atau dengan memberikan background yang juga berupa kode CSS.