JavaScript Functions

When you need to execute a series of actions that will work together or return a value, you need a way to group your statements together in a clean, readable format.

Enter functions. Like methods, functions allow scripters to manipulate an object and also like methods, have parentheses following a name that you give it. The difference is that a method is applied directly to an object and has a built-in, predefined action, while a function is a group of statements of your choosing that work together to perform a series of actions.

Another reason to use functions is to keep code from executing automatically. If code is not within a function body or event handler, it will execute as soon as the browser reads it as the page is loading. When code is placed within a function, it will not execute until that function is called.

A function body contains statements, and is opened with a forward curly brace ( { ) and closed with a backward curly brace ( } ). It's a good idea to close the function body immediately to avoid forgetting to close it later.

The syntax for creating a function is as follows:

<script language="JavaScript">

</script>

Function Names

Functions can be named whatever you wish as long as the name is not a reserved word, and as always, function names cannot contain spaces, begin with a number, and all punctuation symbols except for the underscore (_) are restricted.. A good rule of thumb is to come up with names that describe what is taking place within the function. Don't go overboard, keep it simple yet descriptive.

Invoking Functions

As I mentioned above, a function will not execute until it is explicity called. Calling a function is known as invoking a function. To invoke a function, just write its name and follow it with parenthesis. If a function includes an argument, you will include its value inside the parenthesis upon invocation, as explained in the arguments lesson.

Functions can be invoked from anywhere it is appropriate to place JavaScript including from within another function, outside a function, an event handler, or as the value of an <a> tag's href attribute. If you call it as the value of href, you'll need to precede the function name with "javascript:" as in the example below. Here is an example of a function that will change the source of an image and change the background color of the page:

function changeBoth() {
document.bgColor="#ffccff";
document.offImage.src="onImage.gif"
}

Invoking the function from within an event handler:

<body>
<a href="#" onClick="changeBoth()"><img src="offImage.gif" name="offImage"></a>
</body>

Invoking the function from within another function:

function changeBackground(){
document.bgColor="#ffccff"
}

function changeImageAndBG(){
document.offImage.src="onImage.gif"
changeBackground()
}

Invoking the function as the value of href (referred to as the "javascript: url" or "javascript: psuedo-protocol"):

<body>
<a href="javascript:changeBoth()"><img src="offImage.gif" name="offImage"></a>
</body>
NOTE: when calling functions as the value for the HTML href attribute, you may need to include the void operator after the javascript url and before the function name if the function returns or evaluates to a value. You'll know if you need to include the void operator if upon clicking the link, the page content is replaced with the returned value or the client's hard drive directory listing. If you aren't sure but want to be safe, include the void operator as it will not disrupt the function's operations.

>>Functions
>>JavaScript Variables
>>JavaScript Arguments
>>JavaScript Operators, Expressions and Evaluation
>>Special JavaScript Operators
>>Decision Making: If Statement, Else Clause