Friday, March 29, 2024

Writing Your Own JavaScript Functions Part 2

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.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured