We have so far ignored the details of Functions, so now let us formally discuss them. Functions are rather like mini programs. And so far we have run them as if they were isolated programs that don't communicate with each other or the main page. But now, we want to look at how to give information to a function and get information out. A piece of information sent to a function is called a parameter. Let's look at an example.

<HTML>
<HEAD>
<SCRIPT TYPE="text/javascript">
var radius
function getRadius()
  {
  radius=prompt("Please enter your radius:",1)
  }
function getArea(radius)
  {
  alert("Your area is " + Math.pow(radius,2)*Math.PI)
  }
function getCircumference(radius)
  {
  alert("Your circumference is " + 2 * Math.PI * radius)
  }
</SCRIPT>
</HEAD>
<BODY>
<INPUT TYPE="button" ONCLICK="getRadius()" VALUE="Radius"
<INPUT TYPE="button" ONCLICK="getArea(radius)" VALUE="Area"
<INPUT TYPE="button" ONCLICK="getCircumference(radius)" VALUE="Circumference"
</BODY>
</HTML>

Code

The above example brought out a point that we need to touch upon and that is Scope. Variables declared in functions last only until the end of the function. Variables declared outside of a function last until the page is closed. Do you see the variable declaration on the first line of the script section? It is all by itself and not in a function. The reason is that I want to be able to use it in both functions without having to ask each time. The scope of such a variable is "Global". If I had declared the radius variable within the getRadius function it would have been erased at the end of that function and the other two functions which require the radius would not work. Try it here:

Code

Another thing is that I don't even need a variable, I can use actual values as parameters. Like in this example:

<HTML>
<HEAD>
<SCRIPT TYPE="text/javascript">
function changeColor(myId,myType)
  {
  if (myType=="OVER")
    {
    myColor=myId
    }
  else
    {
    myColor="Black"
    }
  document.getElementById(myId).style.color = myColor
  }</SCRIPT>
</HEAD>
<BODY>
<P ID="Red" ONMOUSEOVER="changeColor('Red','OVER')" ONMOUSEOUT="changeColor('Red','OUT')">Red</P>
<P ID="Blue" ONMOUSEOVER="changeColor('Blue','OVER')" ONMOUSEOUT="changeColor('Blue','OUT')">Blue</P>
</BODY>
</HTML>

Code

These examples do tend to be trivial, I should look for better examples. However, I can rewrite the first program in a more sensible manner as I introduce how functions can give back a value. This uses the keyword return.

<HTML>
<HEAD>
<SCRIPT TYPE="text/javascript">
function showCircle()
  {
  var myRadius=prompt("What is the radius?",1);
  document.getElementById("textRadius").value=myRadius;
  var myArea=getArea(myRadius);
  document.getElementById("textArea").value=myArea;
  var myCircumference=getCircumference(myRadius);
  document.getElementById("textCircumference").value=myCircumference;
  }
function getArea(radius)
  {
  return(Math.pow(radius,2)*Math.PI)
  }
function getCircumference(radius)
  {
  return(2 * Math.PI * radius)
  }
</SCRIPT>
</HEAD>
<BODY>
<INPUT TYPE="button" ONCLICK="showCircle()" VALUE="Start">
<INPUT TYPE="text" ID="textRadius">
<INPUT TYPE="text" ID="textArea">
<INPUT TYPE="text" ID="textCircumference">
</BODY>
</HTML>

Code

I pass the parameter myRadius to getArea and getCircumference

  var myArea=getArea(myRadius);
  var myCircumference=getCircumference(myRadius);

and get their computations back to showCircle.

  return(Math.pow(radius,2)*Math.PI)
  return(2 * Math.PI * radius)

Notice that myRadius is passed into radius?

  var myArea=getArea(myRadius);
function getArea(radius)

The names don't have to match since we are just copying the value from one variable into the other. Also see how the function names are used like they were variables. When we call the function getArea, we are at the same time assigning the value returned from that function into the variable myArea.

Look at the program below and notice the Math and String Functions I've used. Also note the comment block at the start of each function. This is a good practice to begin using in your programs. Single line comments begin with "//" and block comments start at "/*" and end with "*/" just like C++.

Program

Write a simple calculator with buttons for numbers 0-9, decimal point, operations +,-,*,/ and = with a text box to hold the button clicks and the answer. Don't worry about negative numbers. Use the function parseFloat instead of parseInt to convert the terms to real numbers. You can try my solution but again, don't view the source:

For a bigger challenge:
Add a negative toggle button (label it -/+) and deal with negative input.
Add a "clear" (C) and "clear entry" (CE) button and functionality.

Code 1