Often when you are writing a program you find that there is a series of statements that you need to repeat in multiple places in the program. Rather than write these lines multiple times making your program huge, we can extract the lines into a function and access it in each spot in the program where it is needed using a single statement.

Functions also allow us to break our program up into modules that are easier to understand.

Defining a Function

Unlike all of the Javascript statements that you have seen so far, functions are not run immediately when their code is reached in the program source. Instead the function acts as a definition for what to run when the function is called in your subsequent. In most cases you will want to pre-load the function code so that it is available as and when needed by the Javascript code you include in your web page. For this reason you will probably place the function code into the head section of your web page instead of into the body as you have done for all of the Javascript that we have looked at so far. You can of course place the functions in the body if you prefer, the important thing is that the function be defined before you call it from your program.

So what difference does it make whether you place the function in the head or body section of the page? Well, anything placed into the head section of the page will be loaded before the page content is loaded and will therefore be available for use by the entire page. Anything you place into the body section of the page will be loaded at the time that that particular part of the code is reached during the loading of the actual page and will therefore not be available to any part of the page that is loaded before that point. The other point to consider when deciding whether to place your Javascript in the head or body section of the page is that if your code writes to the web page or affects the web page in any way then the statements to do that processing may only be included in the body section of the page or in functions within the head section of the page which are called from within the body of the page.

So now that we know where we can define our function, let's take a look at how we define it. The following is an example:

Of course you can name your function whatever you want as long as you don't give it the same name as one of the Javascript reserved words. The best name to choose for your function is one that describes what the function does.

Calling the Function

Defining a function in our web page does nothing unless we actually call the function from somewhere else within the web page. In most cases a function will be called either from within a Javascript in the body section of your page or from within another function.

Here is an example of how we might call the above function:

This simple statement to call the function represents all of the lines of code contained within the function. Without using a function we would need to repeat the entire content of the function at each place where the function is called.

Using What You Know

Using a function doesn't just make it easier if you have multiple occurrences of the same code, it can also help you with modularizing the program. In several of our previous examples we have looked at a section of code consisting of one line that we will need to update at various times followed by several lines that should not be touched. By placing all of the lines except for that first one into a function we separate the updatable code from the rest, reducing the chances of accidentally changing the wrong part of the code.

Here's our sample script from the last tutorial rewritten to use a function. This part goes in the head section of the page:

and this is how the updated script in the body section of our page looks:

See if you can figure out how to apply similar changes to the other scripts we have looked at so far in this tutorial series.