The JavaScript Diaries: Part 4

In this section of the JavaScript Diaries, we'll look at JavaScript functions. These help us to write more intricate programs, allowing us to accomplish more.

If you have any questions or suggestions, feel free to Remember, we're in this together. Also, be sure to visit the JavaScript forums. Looking over some of the posts and analyzing the different aspects of writing scripts helps to gain a better understanding, especially as you gain more knowledge of the language. Now, on to our next lesson ...

JavaScript Functions

A function is a set of statements used to perform a specific task. Whenever a function is needed, it's "called" from somewhere within the script or from within the page itself. Functions organize scripts into different sections — you can think of them as "subscripts" or "subroutines" — to be used within the overall script. Just as a variable is a "data container," a function is a "code container." It's actually a "self-contained process." When you create a function, you are in fact, creating a new JavaScript command that can be called from anywhere within the script.

Writing Functions

Like a variable, a function must be declared first in order to use it. This is done by using the reserved word function, followed by the name of the function and a pair of parentheses, for example function giveName(). (Do not end the line with a semi-colon.) This is then followed by a pair of curly brackets ( "{ }" ) which contain the actual code that will be executed when the function is called. (Do not put a semi-colon after the closing curly bracket either; each line within the curly brackets will end with a semi-colon.) The formatting of the curly brackets is really a matter of preference. The two formats used most are shown below (we'll be using the first one):

  function giveName() {
    code goes here;
    code goes here;
  }
  function giveName()
  {
    code goes here;
    code goes here;
  }

Naming Rules

Function names follow the same rules as variables:

Names can only begin with a letter or underscore ( "_" ) and cannot contain any spaces.
Names are case sensitive: newName, NewName, and NEWname are all different names to the JavaScript interpreter.
When a function is called, it must have the same case usage as the original declaration.
Reserved words cannot be used to name functions.

Calling a Function

Until it is "called," a function merely stores code. To call a function, list the function name followed by a pair of parentheses and a semi colon, such as giveName();.

A function call can be placed anywhere on the Web page — in the <head> section within the script or in the <body> section. It can also be placed in an external file. If it is called within the <body> tag, it must be enclosed within script tags just like a regular script; otherwise the JavaScript interpreter will see it as regular text and not execute it. A function can even be called from within another function, but the code must first be loaded into memory in order for it to be used.

Calling a function from within the <head>:

<script type="text/javascript">
<!--
  function readyMessage()
  {
    alert("Are you ready for this?");
  }
  readyMessage();
//-->
</script>

Calling a function from within the <body>:

<script type="text/javascript">
<!--
  readyMessage();
//-->
</script>

It's important to remember that no matter where the function itself is actually located, it will not execute until it is called. The function must be loaded into memory in order for it to be called so it must be located before the actual calling statement, even if it is run from within the function itself. It's like a software program on your computer. You already have the code loaded on your hard drive but in order for it to run it has to be "called," otherwise it just sits there and doesn't do anything.

[next]

Created: May 27, 2005

URL:

The JavaScript Diaries: Part 4