Howto Write a Javascript Function

A function has a purpose, so give it some math

A function is coded logic that can be used to change values on the page. In this case. Clicking the "Solve" button will trigger the function to start. A function can then read in values from elements on the page. The text boxes which you created in "Howto Setup A Form" are such elements. Another type of element that has readable values is a listbox. A listbox contains a list of options to choose from. In our "F=ma" case it would be nice to solve for "m=F/a" and "a=F/m" as well.

Code to setup the form as described;

<html>
<head>
<title>Solving F=ma</title>
</head>
<body>

<form name="fma">
<h2>F=ma</h2>
F: <input size="20" value="" name="F"> <br>
m: <input size="20" value="" name="m"> <br>
a: <input size="20" value="" name="a"> <br>
<select name="pullFMA" size="3" onclick="switchLabels(this.form)">
<option selected="selected" value="1">F=ma</option>
<option value="2">m=F/a </option>
<option value="3">a=F/m </option>
</select>
<input onclick="evalFMA(this.form, form.pullFMA.value)"
name="submit" value="Solve" type="button">
</form>

</body>
</html>

When placed into a web browser, the above code would look like this... Notice that it does nothing... It still needs a function

Notice the difference from this code to the last. A head tag had been added and the list box has been added. If you were really keen, you'd also notice that the equation for the button "onclick" event has changed to just a simple function call. Functions by them self are rather dormant; they reside, but don't act until called upon by a button's click.

In our case our function needs to know two things before it can run. First is which form it needs to run in. Since one can have multiple forms per page, if you pass (or tell) the function which form the click came from, it can then easily remember which data it needs to change. The second piece of information that it needs to know is which formula to use so that it can change the appropriate text box. The list box is setup so that it has a value associated with each line. This numbering needs to be keeped track of, since our function needs to be told how to deal with each case. In review, the onclick="evalFMA(this.form, form.pullFMA.value" sends both the "this.form" and the value from the listbox to a function that will be called "evalFMA".

A Javascript function is placed in the head of the document. The head of the document is loaded before the objects on the main body of the page. Commonly, it is placed after the <title> and <meta> data. A java script with an empty function looks like...

...
<head>
<title>Title</title>
<script language="JavaScript">

</script>
</head>
<body>
...

Notice that the function evalFMA(form, myswitch) looks slightly different than the bit of code for the onclick event. Since the objects "this.form" (the form which its currently between <form> and </form>) and "form.pullFMA.value" are passed to evalFMA, it needs to store the values in a location. When you create a function like "evalFMA(form, myswitch)" you reserve space in the computer's memory to hold the data. These are called variables. In the case of form, it creates space to hold the names and values of the form sent to it. The "myswitch" part just creates space to hold an integer. The Javascript is smart enough to tell which type of data was sent to it. So declaring "int", or "string" like other languages is not necessary.

We can assume our function knows two things. 1) the form, 2) which rearrangement of F=ma the user desires to use. We use these two assumptions to write the following code.

function evalFMA(form, myswitch) {
F=eval(form.F.value)
m=eval(form.m.value)
a=eval(form.a.value)
if (myswitch==1) {
F=m*a
form.F.value = F
}
if (myswitch==2) {
m=F/a
form.a.value = m
}
if (myswitch==3) {
a=m/F
form.a.value = a
}
}

All the values from the form as stored into a new variable. You'll see them now just as "F", "m" or "a". they could be left in the form of "eval(form.F.value)" rather than assigning it to "F", but doing so would prove hectic when trying to write out a 6 variable equation. Notice the logic switch. If value 1 is chosen in the listbox, then only the if statement from if (myswitch==1) will run. The code for the if statement is enclosed between the {} brackets. If the switch isn't set to 1, then it would just skip on by it, then checking to see if the switch is set to 2 and so forth. Pretty slick ehh?

I hope the above code works. Lets see what it looks like when we put it all together.

<html>
<head>
<title>Solving F=ma</title>
<script language="JavaScript">

</script>
</head>
<body>

<form name="fma">
<h2>F=ma</h2>
F: <input size="20" value="" name="F"> <br>
m: <input size="20" value="" name="m"> <br>
a: <input size="20" value="" name="a"> <br>
<select name="pullFMA" size="3" onclick="switchLabels(this.form)">
<option selected="selected" value="1">F=ma</option>
<option value="2">m=F/a </option>
<option value="3">a=F/m </option>
</select>
<input onclick="evalFMA(this.form, form.pullFMA.value)"
name="submit" value="Solve" type="button">
</form>

</body>
</html>

OK, so you might wonder, Why does the second one work, and the first one not when the same javascript was placed in the header... Well that is cause I wanted to walk you through this, and disabled the first one on purpose... Kudos to those who caught that!. Happy Scripting!

PhysicsFoO

Howto Write a Javascript Function

A function has a purpose, so give it some math

F=ma

F=ma