Equations

We can turn the script from the last lesson into a function by surrounding it with function showit(){ and } where showit() is a made up name of the function In fact, I have done so with part of that code. The function is between the script tags at the top of this document. It looks exactly like this:

function showit(){ if(confirm("do you want to \r go on")){ var say=prompt("what do you want to say");} var msg=open("","NewWindow"); msg.document.write("<html><head></head><body>"+say+"<FORM><INPUT TYPE=Button VALUE='OK' onClick='self.close()'></FORM>"); msg.document.close(); }else{alert("BYE")}; }the button that plays it looks like this <INPUT TYPE=Button VALUE="playit" onClick="showit()"> and appears below

We could also launch the function with the body tag <body onLoad="showit()">. Doing so would cause the function to run when the document was launched.
Let us investigate some simple functions:

Add two numbers:

The function included in the JavaScript code in the header which operates this operation is:
function add(obj){ obj.result.value=obj.uno.value+obj.duo.value }

The HTML code below is:
<FORM Name="addx"><INPUT NAME="uno" TYPE=Text>+<INPUT NAME="duo" TYPE=Text><BR> <INPUT TYPE=Button VALUE="+=" onClick="add(this.form)"><INPUT NAME="result" TYPE=Text> </FORM>

Clicking the (JavaScript) button activates the function add(), using "this.form" establishes that everything sent to and returned from the function refers to this form. The function statement "says" to take the value of the text field in the form named "uno" and add it to the value of the text field named "duo" and then deposit it in the field named "result".

TRY iT
The result is probably not what you expected and that is because JavaScript assumes you are talking about adding two text strings and appends the first to the second. To see how to do the arithmetic add check the following.

Add two numbers (for real):

The function included in the JavaScript code in the header which operates this operation is:
function add2(obj){ obj.result.value=eval(obj.uno.value)+eval(obj.duo.value) }

The HTML code below is:
<FORM Name="addx2"><INPUT NAME="uno" TYPE=Text>+<INPUT NAME="duo" TYPE=Text><BR> <INPUT TYPE=Button VALUE="+=" onClick="add2(this.form)"><INPUT NAME="result" TYPE=Text> </FORM>

The only difference here is that eval() has been includedto tell JavaScript to treat the text fields as numbers.

TRY iT
The result is probably what you expected .

Subtract two numbers :

The function included in the JavaScript code in the header which operates this operation is:
function sub(obj){ obj.result.value=obj.uno.value-obj.duo.value }

The HTML code below is:
<FORM Name=""><INPUT NAME="uno" TYPE=Text>-<INPUT NAME="duo" TYPE=Text><BR> <INPUT TYPE=Button VALUE="-=" onClick="sub(this.form)"><INPUT NAME="result" TYPE=Text> </FORM>

Notice that we did not have to use eval() since JavaScript assumes that minus means that you are dealing with numbers. Notice, also, for the first time the form is not named, that is because you normally do not need to do so. An example, where the name is used but is otherwise identical to this follows.

TRY iT
The result is probably what you expected .

Subtract two numbers (again) :

The function included in the JavaScript code in the header which operates this operation is:
function sub2(){ document.bozo.result.value=document.bozo.obj.uno.value-document.bozo.obj.duo.value }

The HTML code below is:
<FORM Name="bozo"><INPUT NAME="uno" TYPE=Text>-<INPUT NAME="duo" TYPE=Text><BR> <INPUT TYPE=Button VALUE="-=" onClick="sub()"><INPUT NAME="result" TYPE=Text> </FORM>

Here we did not pass the form information to the function but instead used absolute addresses in the function to tell iT what to do to what and where to put it.

TRY iT
The result is probably what you expected. However, the method is different. In this case we passed nothing to the function, that is we did not pass "this.form". So we used as mentioned absolute addresses, for example, document.bozo.duo.value can be thought of as country,state,city,street number. This can be a useful way of doing things if the output of a function spans inputs from several form inputs. Actually this can be done several ways:

document.FormName.FieldName.value
as we did here (probably not a good idea with MSIE).
document.bozo.elements[1].value
because duo is the second field in the form (counting 0 as the first-MSIE ?)
document.forms[4].duo.value
because we are referring to the fifth form in the document ( counting 0 as the first-MISE ?).
document.forms[4].elements[1].value
which I perfer.

There are many mathematical functions, for example:
Math.sqrt(x)->squareroot of x
Math.pow(x,n)-> raise x to the power n

Thus the Pythagorean Theorem

c=(a²+b²)^1/2

would look like:
<FORM > Base of the triangle= <INPUT NAME="a" TYPE=Text> Height of the triangle= <INPUT NAME="b" TYPE=Text><BR> <INPUT TYPE=Button VALUE="c=" onClick="hyp(this.form)"> <INPUT NAME="result" TYPE=Text> </FORM> note:   inserts a nonbeakihg space The associated function is function hyp(obj){ obj.result.value=Math.sqrt(Math.pow(obj.a.value,2)+Math.pow(obj.b.value,2)) }

If you try the above with numbers like "a=7" and "b=4" you will notice that the output contains a long string of ugly decimal digits. You can get around this by using Math.round, which, of course rounds the result.
Thus:
obj.result.value=Math.round(Math.sqrt(Math.pow(obj.a.value,2)+Math.pow(obj.b.value,2)))

If you want to round to two decimal places use:
obj.result.value=Math.round(Math.sqrt(Math.pow(obj.a.value,2)+Math.pow(obj.b.value,2))*100)/100

Next lesson: Text Manipulation

© Carl Adler 1997