This chapter is from the book
This chapter is from the book
This chapter is from the book
Arguments
It would be rather limiting if your functions could only behave in an identical fashion each and every time they were called, as would be the case in the preceding example.
Fortunately, you can extend the capabilities of functions a great deal by passing data to them. You do this when the function is called, by passing to it one or more arguments:
functionName(arguments)
Let’s write a simple function to calculate the cube of a number and display the result:
function cube(x) {
alert(x * x * x);
}
Now we can call our function, replacing the variable x with a number. Calling the function like this
cube(3);
results in a dialog box being displayed that contains the result of the calculation, in this case 27.
Of course, you could equally pass a variable name as an argument. The following code would also generate a dialog containing the number 27:
var length = 3; cube(length);
Multiple Arguments
Functions are not limited to a single argument. When you want to send multiple arguments to a function, all you need to do is separate them with commas:
function times(a, b) {
alert(a * b);
}
times(3, 4); // alerts '12'
You can use as many arguments as you want.
It’s important to note that the names given to arguments in the definition of your function have nothing to do with the names of any variables whose values are passed to the function. The variable names in the argument list act like placeholders for the actual values that will be passed when the function is called. The names that you give to arguments are only used inside the function definition to specify how it works.
We talk about this in more detail later in the hour when we discuss variable scope.
Try It Yourself: A Function to Output User Messages
Let’s use what we’ve learned so far in this hour by creating a function that can send the user a message about a button he or she has just clicked. We place the function definition in the <head> section of the page and call it with multiple arguments.
Here’s our function:
function buttonReport(buttonId, buttonName, buttonValue) {
// information about the id of the button
var userMessage1 = "Button id: " + buttonId + "\n";
// then about the button name
var userMessage2 = "Button name: " + buttonName + "\n";
// and the button value
var userMessage3 = "Button value: " + buttonValue;
// alert the user
alert(userMessage1 + userMessage2 + userMessage3);
}
The function buttonReport takes three arguments, those being the id, name, and value of the button element that has been clicked. With each of these three pieces of information, a short message is constructed. These three messages are then concatenated into a single string, which is passed to the alert() method to pop open a dialog containing the information.
To call our function, we put a button element on our HTML page, with its id, name, and value defined:
<input type="button" id="id1" name="Button 1" value="Something" />
We need to add an onClick event handler to this button from which to call our function. We’re going to use the this keyword, as discussed in Hour 2, “Writing Simple Scripts”:
onclick = "buttonReport(this.id, this.name, this.value)"
The complete listing is shown in Listing 3.2.
Listing 3.2. Calling a Function with Multiple Arguments
<!DOCTYPE html>
<html>
<head>
<title>Calling Functions</title>
<script>
function buttonReport(buttonId, buttonName, buttonValue) {
// information about the id of the button
var userMessage1 = "Button id: " + buttonId + "\n";
// then about the button name
var userMessage2 = "Button name: " + buttonName + "\n";
// and the button value
var userMessage3 = "Button value: " + buttonValue;
// alert the user
alert(userMessage1 + userMessage2 + userMessage3);
}
</script>
</head>
<body>
<input type="button" id="id1" name="Left Hand Button" value="Left" onclick = "buttonReport(this.id, this.name, this.value)"/>
<input type="button" id="id2" name="Center Button" value="Center" onclick = "buttonReport(this.id, this.name, this.value)"/>
<input type="button" id="id3" name="Right Hand Button" value="Right" onclick = "buttonReport(this.id, this.name, this.value)"/>
</body>
</html>
Use your editor to create a file buttons.html and enter the preceding code. You should find that it generates output messages like the one shown in Figure 3.2, but with different message content depending on which button has been clicked.
)
Figure 3.2. Using a function to send messages