Javascript Functions

Introduction

A function is basically a command or group of commands that you would 'call' from within your page, one major benefit is that you can create one function at the start of your page, then use the simple method of calling it any number of times you like. One downside is that they will only operate for people with Javascript enabled and although this is the majority it's usually a good idea to consider an alternative for people without javascript when implementing Javascript functions.

The basics

Firstly we need to tell the browser which type of scripting it's going to process, so we need to use <script type="text/javascript"> the comments () just inside the script tags will hide the code from older browsers that don't support Javascript, then functions are basically split up into three sections (function name, arguments, statements) in the following format:

<script type="text/javascript">
<!--
function fname(argument1,argument2,etc) {
         statements here
}
//-->
</script>

A function doesn't need to contain any arguments, they are basically optional values, we'll look at them a bit more detail further down, but when using a function with no arguments you still need to use the same format, including the brackets.

function fname() {
              statements here
}

A function can be included anywhere within your page before the point at which you want to call it, but it's best to use them within your <head></head> tags or in an external file so that you insure they have always been defined before you need them, it also means they don't get in the way so much.

Calling Functions

To call or make use of a function is quite simple, with arguments:

fname(argument1,argument2,etc)

or without:

fname()

This can be combined with various events that define certain actions on the page, for example, lets say you wanted to call a certain function when somebody clicks on a button, you could use something like:

<input name="button" type="button" value="click me!" onclick="fname()" />

Remember that when you want to call a function without the use of an event such as onclick or onload you need to do so within <script> tags like above.

Example

An example of a simple javascript function:

<script type="text/javascript">
<!--
function refresh()
{
alert("This page will refresh in 5 seconds");
       setTimeout('document.location=document.location',5000);
}
//-->
</script>

<input name="refresh" type="button" 
value="click me!" onclick="refresh()" style="cursor: hand" />

Which would work like this.

More Uses

Functions don't just have to popup boxes or perform a direct action, they have other uses, for example to return the results of something, in which case you would use the 'return' statement.

This will also show a little more about how the "arguments" work in functions:

function calc(x,y)
{
         result = x+y;
         return result
}

Here we get the function to add the sum of the arguments that we send later (x & y) and return the total. Now when we come to call the function, we need to send the two 'arguments' that we want it to process:

total = calc(3,4);

The function would then return the sum of the two arguments that we sent (3 & 4) and return the result (7) which would be stored as a variable named 'total'