...::Selamat datang pemirsa BLOGGER semoga apa yang dicantumkan berguna bagi yang membutuhkaN::...

Rabu, 03 Maret 2010

HTML Calculator

Lanjutan dari tulisan sebelumnya yang membahas tentang program sederhana desain web dengan CSS, saya sekarang akan membahas bagaimana cara membuat program kalkulator sederhana menggunakan javascript. Dan pada script yang saya buat ini juga membahas masalah desain kalkulator menggunakan HTML. bagi anda yang sedang belajar javascript (sama dengan saya). mungkin tutorial ini bisa bermanfaat.
-------source code HTML Calculator---------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
    <title>HTML_CALCULATOR</title>
    <body bgcolor="grey">
    <meta name="Programmer" content="nue" />
<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>
<h5><font color="white">Welcome to &quot;Kalkulator_Sederhana&quot;</h5></font><hr/>
    <body onload="alert('Silahkan memulai perhitungan dari agus.nue48@gmail.com')">
<style type="text/css">
    p {
      font-family:georgia;
      font-size:10px;
      line-height:1.6em;
      font-weight:bold;
      color:#727272
    }
    </style>
    </head>
    <body onload=kosong()>
    <center>
    <p style="padding:20px 0px 30px 0px"><font size="6" color="blue"><u>HTML Calculator</u></font></p>
<FORM NAME="sci-calc">
<TABLE CELLSPACING="0" CELLPADDING="1" border="3" bordercolor="green">
<TR>
<TD COLSPAN="5" ALIGN="center"><INPUT NAME="display" VALUE="0" SIZE="33" 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="c" 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="=" NAME="enter" ONCLICK="if (checkNum(this.form.display.value)) { compute(this.form) }"></TD>
</TR>
</TABLE>
</FORM>
<p align="center"><font face="arial" size="-2" color="yellow">The provided by</font><br>
<font face="arial, helvetica" size="-2" color="yellow">Nue.com</a></font></p><hr/>
<p><font color="white">2010 &copy; fakom.com</p></font>
</body>
</html>
-------------Finish Script---------------
copy code diatas kemudian buka program notepad.exe kemudian paste di program notepad tersebut. Simpan file dalam format html, caranya dibagian save as type diganti ke allfiles kemudian tambahkan .html pada nama file contohnya namafile.html kemudian buka file tersebut melalui browser.
Hasil dari program diatas seperti berikut ini:


Tidak ada komentar:

Gabung yuk!...