Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Ajax and JavaScript

  • Print
  • + Share This
This chapter is from the book

Functions

Before you get into the next example, you need to learn about functions, which you'll use often when writing JavaScript. A function is a set of JavaScript statements that performs a task. Every function must be given a name, and can be invoked, or called, by other parts of the script.

Functions can be called as many times as needed during the running of the script. For example, let's say that you've gotten some information that a user typed into a form and you've saved it using JavaScript (there's more about this sort of thing in Chapter 8, "Form Handling"). If you need to use that information again and again, you could repeat the same code over and over in your script. But it's better to write that code once as a function, and then call the function whenever you need it.

A function consists of the word function followed by the function name. There are always parentheses after the function name, followed by an opening brace. The statements that make up the function go on the following lines, then the function is closed by another brace. Here's what a function looks like:

function saySomething() {
    alert("Four score and seven years ago")
}

Notice that the line with alert is indented? That makes it easier to read your code. All of the statements between the first brace and the last one (and you probably noticed that those two lines are not indented) are part of the function.

Calling a function

It's common to use an event handler (see Chapter 1 for a refresher on event handlers if you need it) to call a function. If you wanted to call the saySomething function when the user clicked a button, you would use code like this:

<input type="button" value="Lincoln"
U2192.GIF onclick="saySomething()">

Passing information to a function

You'll often want to take some information and give it to a function to be processed. This is called passing the information. Using the previous function example, the function is changed like this (and in Script 3.7 ):

function saySomething(message) {
  alert(message)
}
03fig17.jpg

Script 3.7 You can call the same function again and again.

And the button code is also changed:

<input type="button" value="Lincoln"
U2192.GIF onclick="saySomething('Four score and
U2192.GIF seven years ago...')" />

In the function definition above, the variable message is a parameter of the function. When the function is called, the data 'Four score and seven years ago...' is passed into the message parameter. Function parameters can be just about any data you want to use, including text strings, numbers, or even other JavaScript objects. Like all variables, you should give the ones you use as function parameters names that remind you what the variable is being used for.

The nice part about using this kind of function is that you could have a bunch of buttons, and they could all call the same function, yet result in different alert messages, as seen in Figure 3.11 .

<input type="button" value="Lincoln"
U2192.GIF onclick="saySomething('Four score and
U2192.GIF seven years ago...')" />
<input type="button" value="Kennedy"
U2192.GIF onclick="saySomething('Ask not what
U2192.GIF your country can do for you...')" />
<input type="button" value="Nixon"
U2192.GIF onclick="saySomething('I am not a
U2192.GIF crook!')" />
03fig18.gif

Figure 3.11 Calling the function with each of the three buttons in the top window results in three different responses, as shown in the three dialog boxes.

  • + Share This
  • 🔖 Save To Your Account