Section 4: Functions


A function is a block of commands which is given a single name. The Methods of an object are examples of functions. Some functions have Arguments which affect the things it does. For example, the write method of the document object has one argument, an this argument determines exactly what Javascript should write.

A function is defined as follows:

<script>

function MyFun(arg1,arg2) {
  some javascript commands;
}

</script>

Then, to use the function, we would issue a single javascript command, as follows:

<script>

MyFun(arg1,arg2) 

</script>

The instructions inside MyFun will not be done until we actually issue the MyFun command. Consider this example:

<script>

function WriteSomething() {
  document.bgColor = "red" ; /* Change to Red */
  document.bgColor = "green" ; /* Change to Green */
  document.bgColor = "blue" ; /* Change to Blue */
  document.bgColor = "yellow" ; /* Change to Yellow */
  document.write("<br>I'm <b>Inside</b> The Function!!");
}

</script>

<p> Thanks for coming! </p>

<script>
 WriteSomething();
 WriteSomething();
 WriteSomething();
 WriteSomething();
 WriteSomething();
</script> 

Notice here that even though the function WriteSomething was defined before the text "Thanks for Coming!" appears, the commands were only executed afterwards, when we "called" the function (five times). Follow this link to see this example in action.

Notice also, that our function does exactly the same thing every time, since it was given no "arguments". Below, we see an example of a function with two arguments, and the function will do different things depending on what arguments are given when the function is called.

<script>
function PrintMaths(x,y) {
   SumString = x + " plus " + y ;
   ProdString = x + " times " + y ;
   SumValue = x + y ;
   ProdValue = x * y ;
   SumAll = SumString + " equals " + SumValue ;
   ProdAll = ProdString + " equals " + ProdValue ;
   document.write("<br><i>");
   document.write(SumAll);
   document.write("</i>, and <b>");
   document.write(ProdAll);
   document.write("</b>");
}
</script>

This function doesn't do anything visible until it gets to the document.write commands. But then, the exact things it will write depend on what x and y are. How does the function know what values to use? It is told when we "call" the function. The commands below will call this function three times with different arguments.

<script>
  PrintMaths(2,3);
  PrintMaths(12,-7);
  PrintMaths(3783,4032);
</script>

Follow this link to see this example in action.

Giving a direct command within the <SCRIPT> tag is not the only way to call a javascript function, or give a javascript command. Javascript commands can also be issued within the <A> tag. For example:

  <A HREF="javascript:MyFunction(1,2,3)">Try!</A>

will create a link, but when we click on the link, instead of going to a new web page, the browser will call the function MyFunction, with arguments 1, 2 and 3. For example, examine the code below:

<script>
function Paint(MyColour) {
  document.bgColor = MyColour ; /* Change the Background Colour */
}
</script>

<p>
<center>
<h3>Choose A Background Colour: 
<a href = "javascript:Paint('red')">Fire</a>
<a href = "javascript:Paint('blue')">Deep</a>
<a href = "javascript:Paint('green')">Keroppi</a>
<a href = "javascript:Paint('white')">Snow</a>
<a href = "javascript:Paint('black')">Soot</a>
<a href = "javascript:Paint('yellow')">Sun</a>
</h3>
</center>

This will put a set of six links onto the screen, allowing the user to choose what colour background screen he or she wants. Follow This Link to see this example in action.

Notice that we have single quotes instead of double quotes ('red' instead of "red") around the names of the colours given as arguments to the functions. This is because the whole javascript:Paint(...) is already inside a set of double quotes. If we said

<a href = "javascript:Paint("red")">Fire</a>

Then the computer would think we meant

<a href = "javascript:Paint("
red")" >Fire</a>

And it wouldn't know what to do! First of all,

Paint(

is not a valid javascript command, so the computer would not know what to do if we clicked on the link. Worse still, things like

red")"

are not allowed in the <A> tag. They don't make sense! The computer would not know what to do. Certainly, it wouldn't do what we wanted it to.