HTML Goodies: Script Tip: Week 53

Fifty-Tree Tip…

Let’s get into the buttons you find past the top row. Each of these buttons will work in basically the same onClick way. It’s the format of the table that will probably be most confusing.

If you’ve looked at the code, you might wonder why the keypad numbers are not all in a row. This is because the author has opted for this calculator to sit inside a table, thus he had to set up all the buttons in the order that would display them in the table. If you follow it along, it goes something like this:

Numbers 7, 8, 9, plus, minus, reciprocal, power, sine.

Numbers 4, 5, 6, times, divide, absolute, exponent, cosine

Numbers 1, 2, 3, left par., right par., square, round, tangent

Zero, decimal, +|- sign, equals, square root, random, Pi

Let’s take that first line. It’s a good representation of the next two lines.

<TD BGCOLOR=BLUE>
<CENTER>

<INPUT TYPE=BUTTON VALUE=” 7 ” NAME=”but7″ onClick=”document.calculator.text.value+=’7′”>

</TD>

<TD BGCOLOR=BLUE>
<CENTER>

<INPUT TYPE=BUTTON VALUE=” 8 ” NAME=”but8″ onClick=”document.calculator.text.value+=’8′”>

</TD>

<TD BGCOLOR=BLUE>
<CENTER>

<INPUT TYPE=BUTTON VALUE=” 9 ” NAME=”but9″ onClick=”document.calculator.text.value+=’9′”>

</TD>

<TD BGCOLOR=YELLOW>
<CENTER>

<INPUT TYPE=BUTTON VALUE=” + ” NAME=”add” onClick=”document.calculator.text.value+=’+'”>

</TD>

<TD BGCOLOR=YELLOW>
<CENTER>

<INPUT TYPE=BUTTON VALUE=” – ” NAME=”subtract” onClick=”document.calculator.text.value+=’-‘”>

</TD>

<TD BGCOLOR=LIME>
<CENTER>

<INPUT TYPE=”BUTTON” VALUE=” 1/x ” NAME=”reciprocal” onClick=”recip(document.calculator.text.value)”>

</TD>

<TD BGCOLOR=LIME>
<CENTER>

<INPUT TYPE=”BUTTON” VALUE=” x^y ” NAME=”power” onClick=”raisePower(document.calculator.text.value)”>

</TD>

<TD BGCOLOR=LIME>
<CENTER>

<INPUT TYPE=BUTTON VALUE=” sin ” NAME=”sin” onClick=”document.calculator.text.value= Math.sin(document.calculator.text.value*3.141592653589793/180)”>

</TD>

It’s fairly obvious that the lines are a bit convoluted due to the space restrictions on this page. Please make a point of following the form shown in the code link for this script or you’re sure to get errors.

Let’s hit them one at a time, but let’s do it by only showing the button code. There’s no need to continue displaying all the table code. This is a JavaScript Script Tip, right? Right.

Seven

<INPUT TYPE=BUTTON VALUE=” 7 ” NAME=”but7″ onClick=”document.calculator.text.value+=’7′”>

The button represents the number seven. The Value
” 7 ” is on the face of the button and the Name given is “but7” (as in button seven). When the button is clicked, a 7 is placed into the
display window denoted by document.calculator.text.value. See that above in the onClick statement?

Please note: The operator += acts to add or “concatenate” two items. By using the +=, the display is not replaced with the number, but rather the number is added to the end of the display. So, when you click on 7, a 7 displays. If you then click again, the += places the next 7 after the first rather than simply replacing it. That way, every time you click, that value is added to the display rather than replacing what is already in the display. Got it? Good. Moving along…

Eight

<INPUT TYPE=BUTTON VALUE=” 8 ” NAME=”but8″ onClick=”document.calculator.text.value+=’8′”>

Same deal here for the number 8. An onClick puts the number 8 into the display window.

Nine

<INPUT TYPE=BUTTON VALUE=” 9 ” NAME=”but9″ onClick=”document.calculator.text.value+=’9′”>

Ditto buttons 7 and 8, except this time with 9.

Add

<INPUT TYPE=BUTTON VALUE=” + ” NAME=”add” onClick=”document.calculator.text.value+=’+'”>

Now we get into the actual format of how the calculator works. This is the addition button. Note the format is the same as the number buttons except this button will place a plus sign into the display window. This button simply sets a plus sign in place so that an addition can occur. It doesn’t actually do the addition. That will come when the “equal” button comes into play.

Subtract

<INPUT TYPE=BUTTON VALUE=” – ” NAME=”subtract” onClick=”document.calculator.text.value+=’-‘”>

Look familiar? Again, the button does not perform any subtraction. It simply places a minus so that later, when the equal button is pressed, a subtraction can occur.

Reciprocal

<INPUT TYPE=”BUTTON” VALUE=” 1/x ” NAME=”reciprocal” onClick=”recip(document.calculator.text.value)”>

Do you know what this is? Me neither, so I looked it up. It is a function that figures a pair of numbers that have 1 as their product. That is, what number, when divided into the number in the display, will produce the number 1?

Okay, I don’t really get it either, but if you’re a math person I’m sure it makes perfect sense to you. I’m only here to show you how to do it. This is the first button in this row that actually must have a number posted in the display in order to function.

When the onClick is enacted, it appears as if a JavaScript command called recip is enacted. Nope. “Recip” is actually the name of a function found between the HEAD commands. It looks like this:

function recip(x)

{document.calculator.text.value = (1/(x))}

function raisePower(x)

{

document.calculator.text.value = Math.pow(x,y)

}

When you click, the “x” is replaced with the value inside the display. See that in the onClick above: recip(document.calculator.text.value)? That value is then set into a fraction with 1 as the nominator.

Next, another function named raisePower() is brought into work. A variable “y” is set to 0. Then “y” gets a value from the user through a prompt. That value acts as the exponent or power. Finally, the display receives the number it originally had raised to the power the user offered through the use of the Math.pow(#,#) format. The first # is the number and the second # is the power it will be raised to.

If nothing is written inside the display then the math acts upon nothing and nothing is returned.

Power

<INPUT TYPE=”BUTTON” VALUE=” x^y ” NAME=”power” onClick=”raisePower(document.calculator.text.value)”>

Same format as above, except here the JavaScript command “raisePower” is set to act upon what is inside the display and raise it to the first power.

Sine

<INPUT TYPE=BUTTON VALUE=” sin ” NAME=”sin” onClick=”document.calculator.text.value= Math.sin(document.calculator.text.value*3.141592653589793/180)”>

Sine: The ratio of the side opposite the angle of the hypotenuse.

Now we get into another format of finding the answer. Again, a number must be shown in the display in order for this to work. When the button is clicked, the value of the display is created through the Math object setting a sine (Math.sin) by multiplying the number displayed by Pi (3.141592653589793), then dividing that by 180. Even though you might not understand the math, do you see how it works?

The Next Two Lines

The next two lines of code:

Numbers 4, 5, 6, times, divide, absolute, exponent, cosine

Numbers 1, 2, 3, left par., right par., square, round, tangent

…work exactly the same way. The numbers post to the display using the same formats as above. The multiply and divide do not perform the action, they simply place the correct character so that the math can be done later. The square, round, tangent, absolute, exponent, and cosine math is done basically the same way as above using JavaScript commands and short math equations just like above. You may not understand the math, but you can sure understand the format.

Absolute: Math.abs(document.calculator.text.value)”

Exponent: onClick=”document.calculator.text.value+=’E’

Next week we’ll get into actually how the calculator works and the final line of buttons. They get a little tricky.

Next Week: How it Works