JavaScript Functions – Creating and Using – 1

JavaScript Functions – Creating and Using – 1 cover image
  1. Home
  2. JavaScript
  3. 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 javaScript 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

Some invalid function names

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 onclick() event handler.

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

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.

JavaScript