JavaScript Functions - Creating and Using - 1

Functions pack JavaScript statements in a block that can be used over and over again. Any programming language worth its salt allows coders to define and call functions.

What are functions? - An example

<SCRIPT LANGUAGE="JavaScript" TYPE="TEXT/JAVASCRIPT">
<!--
function alert_box()
   {
   alert("I am displayed by a function"); 
   document.bgColor="#EEEEEE";
   }
//-->
</SCRIPT>

A function consists of the function keyword, the name of the function followed by a pair of parenthesis and lastly, the JavaScript statement/s enclosed by curly braces.

You can give any name to the function as long as it is not a JavaScript reserved keyword. (The list of reserved keywords can be found here.)
The function name can contain only alphanumeric characters (alphabet and digits) and the underscore. Also, the name cannot begin with a numeral.

Some valid function names
      display_alert_box
      calculate
      _make_love_not_war
      average1

Some invalid function names
      @whats_up_doc      (invalid character)
      123calc      (function name cannot begin with a numeral)

Remember, function names are case sensitive, thus, alert_box is not the same as Alert_box.

The function block can contain several JavaScript statements enclosed between the curly braces.

The function in itself does not do anything till we call it.

Calling functions
Calling a function is simple. You have to specify its name followed by the pair of parenthesis.

<SCRIPT LANGUAGE="JavaScript" TYPE="TEXT/JAVASCRIPT">
<!--

alert_box();

//-->
</SCRIPT>

It's good programming practice to place all functions in the HEAD section of the HTML document between the <SCRIPT> - </SCRIPT> tags. Function calls, on the other hand, can occur in any part of the document (where ever they are needed!), even inside event handler code.

Using a function call inside event handler code
The code below, calls the function we defined at the beginning of this session. This time we call it thru the onlclick() event handler.

<A HREF="javascript:void(0)" onclick="alert_box()">
Function called thru an event handler</A>

Here is how it works:

You'll notice that a function call looks very similar to calling a method. Now, wasn't that simple?

Opening a new window through a function
In the previous session, our event handler code for opening a new window had become very long. So instead of writing the code in the HTML tag, we shall place it inside a function and call this function from the event handler.

<SCRIPT LANGUAGE="JavaScript" TYPE="TEXT/JAVASCRIPT">
<!--

function open_win()
   {
   window.open('welcome.html','welcome','width=300,height=200,
   menubar=yes,status=yes,location=yes,
   toolbar=yes,scrollbars=yes');
   }

//-->
</SCRIPT>

Note: the entire JavaScript code should be placed on a single line. For clarity, I have put the code on multiple lines.

We name this function open_win and place it in the HTML head section.

<A HREF="javascript:void(0)" onclick="open_win()">
Get a welcome message</A>

Really appreciating functions
What if you had ten links on a page each opening a new 400X200 pixel window with a different url? Writing separate code for each link can become quite a pain. A simple solution would be to create a function that opens the new window and call it through an event handler. However, we are still left with a problem! How do we instruct the same function to load a different url in each new window? Before we delve deeper into functions let us have a look at variables.

1. How many times can you call a function?
2. Can function calls be used in event handler code?
3. Why are the curly braces needed in a function?
4. Why won't the following code work?

   function 3_alert_box
      {
      alert("Hi!, I am from a function');
      }
   

5. Construct a function that brings up an alert box, changes the message on the status bar, changes the background color and opens a new window 300X200 pixels in dimension.
6. Okay, you might not be prepared for this one... but take a guess anyway.
   Why do functions need a pair of parenthesis?

<HTML> <HEAD> <TITLE>JavaScript</TITLE> <SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT"> <!-- function alert_box() { alert("I am displayed from a function"); } //--> </script> </HEAD> <BODY> </BODY> </HTML>