Home

JavaScript Tutorial

8. Functions

Functions are one of the fundamental building blocks in JavaScript. A function is a JavaScript procedure -- a set of statements that performs a specific task. A function definition has these basic parts:

  • The function keyword
  • A function name
  • A comma-separated list of arguments to the function in parentheses
  • The statements in the function in curly braces: { }

8.1. Defining a Function

When defining a function, it is very important that you pay close attention to the syntax. Unlike HTML, JavaScript is case sensitive, and it is very important to remember to enclose a function within curly braces { }, separate parameters with commas, and use a semi-colon at the end of your line of code.

It's important to understand the difference between defining and calling a function.

Defining the function names the function and specifies what to do when the function is called. You define a function within the <SCRIPT>...</SCRIPT> tags within the >HEAD>...>/HEAD> tags. In defining a function, you must also declare the variables which you will be calling in that function.

Here's an example of defining a function:

function popupalert() { alert('This is an alert box.'); }

Notice the parentheses after the function name. It is imperative that you include these parentheses, even if they are empty. If you want to pass a parameter into the function, you would include that parameter inside of the parentheses. A parameter is a bit of extra information that cn be different each time the function is run. It is stored in a variable and can be accessed just like any other variable. Here's an example of a function that takes a parameter:

function anotherAlert(word) { alert(word + ' is the word that you clicked on'); }

When you call this function, you need to pass a parameter (such as the word that the user clicked on) into the function. Then the function can use this information. You can pass in a different word as a parameter each time you call the function, and the alert box will change appropriately. You'll see how to pass a parameter a little later on.

You can pass in multiple parameters, by separating them with a comma. You would want to pass in a few parameters if you have more than one variable that you either want to change or use in your function. Here are two examples of passing in multiple parameters when you are defining the function:

function secondAlert(word,password) { confirm(word + ' is the word that you clicked on. The secret password is ' + password); } function thirdAlert(word,password) { confirm(word + ' is the word you clicked on. Please take note of the password, ' + password); }

You'll notice that the same parameters are passed into both of these functions. However, you can pass in whatever values you want to use (see this same example below in calling the function).

8.2. Calling a Function

Calling the function actually performs the specified actions. When you call a function, this is usually within the BODY of the HTML page, and you usually pass a parameter into the function. A parameter is a variable from outside of the defined function on which the function will act.

Here's an example of calling the same function:

popupalert();

For the other example, this is how you may call it:

<A HREF="#top" onClick="anotherAlert('top')">top</A>

This would bring you to the top of the page, and bring up an alert box that said: "top is the word you clicked on" Try it for yourself: top

Here is the same example with multiple parameters that was shown above:

<A HREF="#top" onClick="secondAlert('awesome','pandas')">awesome</A> <A HREF="#top" onClick="thirdAlert('computers','insert')">computers</A>

You'll notice in the code that different values for the variables word and password are passed in. These values here are what the function will need to perform the actions in the function. Make sure that the values you pass in are in the correct order because the function will take them in and assign these values to the parameters in the parentheses of the function declaration. Once you pass values into your function, you can use them however you want within your function.