My First Use of JavaScript : A Basic Calculator.



Well, I found it that whenever I learn a language the first code I write is always a calculator. I have started taking tutorials on JavaScript few weeks ago to create my own blog, just for fun as I do software engineering on VB.NET platform mainly, that is my site of interest. However, web developing is always interesting to me and I also know that it has a very high level of hard-work and creativity included with it. I don't want to get to that much of details.


On the first day I learnt about using Textboxes, using their values, creating and using functions. Well after that our tutor asked us to do something with what we just learned. Then I wrote the very common 4 functions to do additions, subtractions, multiplications and divisions. Then took two textboxes to take input and another to show result. I also used 4 buttons for the previously mentioned 4 mathematical operations, clicking on each of them the corresponding function will be called. I know its very simple, but I enjoyed.


What I did is a following,









JavaScript Calculator By Tanmay






X =
Y =





Result =


The code for the above calculator is as follows, I think there is nothing to explain here.



<html>
<head>
<title>JS Calc by Tanmay</title>
<script type="text/javascript">
function add(form)
{
form.result.value=parseFloat(form.a.value) + parseFloat(form.b.value)
}
function sub(form)
{
form.result.value=parseFloat(form.a.value) - parseFloat(form.b.value)
}
function multi(form)
{
form.result.value=parseFloat(form.a.value) * parseFloat(form.b.value)
}
function div(form)
{
form.result.value=parseFloat(form.a.value) / parseFloat(form.b.value)
}
</script>
</head>


<body>
<CENTER>
<TABLE WIDTH=600 BORDER=1 BORDERCOLOR=CORNSILK>
<TR><TD BGCOLOR=CORNSILK><center><h1><FONT COLOR=Orange>JavaScript Calculator</FONT> <sub><FONT COLOR=GREEN>By Tanmay</FONT></sub></h1></CENTER></TD></TR>
<TR><TD><CENTER>
<form name="form1" action="" method="get">
X = <input type="text" name="a" value="" align="right"><br>
Y = <input type="text" name="b" value="" align="center"><br><br><br>
<input type="button" name="acc_add" value="Addition" onclick="add(this.form)">
<input type="button" name="acc_sub" value="Subtract" onclick="sub(this.form)">
<input type="button" name="acc_multi" value="Multiply" onclick="multi(this.form)">
<input type="button" name="acc_div" value="Division" onclick="div(this.form)"><br><br><br>
Result = <input type="text" name="result" value="" align="center" ><br>
</form>
</CENTER></TD></TR>
</TABLE>
</CENTER>
</body>
</html>


Recommended Recommends

Comments

Contact Us