Writing Your Own JavaScript Functions Part 2

Using More Than One Parameter
Function Definition
Function Call
Getting Information from Functions
Line-by-Line Analysis of Figure 6-9

Using More Than One Parameter

This article is excerpted from Chapter 6 of The Book of JavaScript with permission from No Starch Press

Sometimes you want to change more than one thing each time you call a function. The built-in JavaScript function prompt(), for example, can change two sets of words: the words that appear above the text box and those that appear within it. When we call prompt() as follows, we pass in two parameters, separated by a comma:

var the_answer = prompt(“What’s your favorite color?”,”yellow?”);

The method window.open(), discussed in the last chapter, provides an example of three parameters: the URL you want to open inside the window, the name of the window, and the window

’

s features.

The functions you write can also take more than one parameter. Let’s say you want to write a function to display a web page in a square window. You might write a function that finds the name of the page and the length of one of the sides of a window. Figure 6-7 shows you what this would look like.

<html>
<head>
<title>Square Windows</title>
<script type = “text/javascript”>
<!– hide me from older browsers
X function openSquareWindow(the_url, the_length)
{  var the_features = “width=” + the_length + “,height=” + the_length;  
var the_window = window.open(the_url, “”, the_features);
}// show me –>
</script>
</head>
<body>
Y <a href = “#” onClick = “openSquareWindow(‘http://www.webmonkey.com/’, 400); return false;”>
Open the Webmonkey home page in a big square window</a><br>
<a href = “#” onClick = “openSquareWindow(‘http://www.nostarch.com/’, 100); return false;”>
Open the No Starch Press home page in a small square window</a><br>
</body>
</html>

Figure 6-7: Writing functions that take more than one parameter

Notice that in X two variables now appear between the parentheses following the function name: the_url and the_length. In Y we’re calling the function as we would call prompt(), with two parameters separated by a comma. Calling the function sets the first variable in the function definition to the first parameter, so in the case of Y, the_url is set to http://www.webmonkey.com/. Similarly, the second variable in the function definition is set to the second parameter in the function call. If we call the function as in Y, the_length is set to 400. Figure 6-8 depicts the results of calling functions with two parameters.

Function Definition

function openSquareWindow(the_url, the_length){
var the_features = “width=” + the_length + “,height=” + the_length, var the_window = window.open(the_url, “”, the_features);
}

Function Call

openSquareWindow(‘http://www.webmonkey.com/’, 400);

Figure 6-8: Calling functions with two parameters

Getting Information from Functions

You can also write functions that give information back to you. Consider the prompt() function:

var the_answer = prompt(“What’s your name?”,”Ishmael”);

When a user types his or her name into the prompt box and clicks OK, the name goes into the variable the_answer. In programming parlance, you

’

d say that the function prompt() returns the words typed into the prompt box. The functions you write can return values as well. Figure 6-9 shows a very simple example of how to make a function return values.

<html>
<head>
<title>Date Printer</title>
<script type = “text/javascript”>
<!– hide me from older browsers
function getNiceDate()
Writing Your Own JavaScript Functions 91
{
var now = new Date();
var the_month = now.getMonth() + 1;
// remember, January is month 0
var the_day = now.getDate();
var the_year = now.getYear();
Xvar the_nice_date = the_month + “/” + the_day + “/” + the_year; Yreturn the_nice_date;
}
// show me –>
</script>
</head>
<body>
Hello! Today is
<script type = “text/javascript”>
<!– hide me from older browsers
Z var today = getNiceDate();
document.write(today);
// show me –>
</script>
</head>
</body>
</html>

Figure 6-9: A script with a simple function that returns a value

Line-by-Line Analysis of Figure 6-9

Most of the function should be familiar by now. The first four lines create a new Date object and carry out a few method calls to get information from that object. Line X takes the information gathered and creates a nicely formatted date. Notice that the line is

var the_nice_date = the_month + “/” + the_day + “/” + the_year;
and not
var the_nice_date = “the_month/the_day/the_year”;

The latter won

’

t work, because JavaScript won

’

t recognize the_month, the_day, or the_year as variables if they appear inside quotes. The correct version of this line takes the variables out of the quotes and puts them together with slashes using the plus (+) sign. In the incorrect version, the quotation marks stop JavaScript from interpreting the names as variables, so the web page would display Hello! Today is the_month/the_day/ the_year. Line Y tells JavaScript to exit the function and return the value of the_nice_date to whatever variable is waiting for it. In this case, the variable is today in Z. Whenever JavaScript sees the word return in a function, it exits the function and outputs whatever value comes after return.

Figure 6-10

Line Z calls the function getNiceDate(),
which returns a nicely formatted date.
The code document.write(today) then
puts the date on the web page, as shown
in Figure 6-10 above.

Writing Your Own JavaScript Functions Part 2

Using More Than One Parameter

Function Definition

Function Call

Getting Information from Functions

Line-by-Line Analysis of Figure 6-9

HTMLGoodies Staff

Recommended for you...

Company

Categories