Writing Your Own JavaScript Functions
By thau!
Next, notice that I've put the JavaScript declaring the function in the head of the page. You can declare functions in either the head or the body of an HTML page, but I like to declare my functions in the head because that way I don't have to search for them all over the page.
Finally, it's important to remember that the browser reads the page from the top down. When it sees the word function, it remembers the function name and the lines of JavaScript you've associated with that name. However, the JavaScript between the curly brackets doesn't actually execute until the onClick in the link calls the function. When we start putting more than one function on a web page, you'll see why it's important to keep this in mind.
Writing Flexible Functions
The code in Figure 6-3 does a good job of opening and centering a window containing No Starch Press's home page. But what if you wanted another link to open and center a different window with a different URL in it-- Webmonkey's, for example?
One approach would be to write a second function that looks just like the first one, the only difference being that you'd replace the line
_______________________________________________________________________________________
var the_window =
window.open('http://www.nostarch.com','the_window','height=200,
width=200');
_______________________________________________________________________________________
with the line
_______________________________________________________________________________________
var the_window =
window.open('http://www.webmonkey.com','the_window','height=200,
width=200');
_______________________________________________________________________________________
This would work fine, but it's not a good idea to have two functions that do almost exactly the same thing. First of all, it's wasteful. If you could write one function that worked regardless of the URL, you'd save both typing and download time. Even more important, if you want to change how you're doing the centering, you'll have to change two functions instead of just one.
Using ParametersLuckily, there's a way to make your function more flexible. The trick is to add a parameter. Remember, the alert() function takes one parameter--the words you want to appear in the alert box.
You can write the openAndCenterWindow() function to take a parameter, too. In this case, the parameter would be the URL of the web page you want to appear in the window. In general, a function'sparameter is whatever item of information the function needs in order to do its job--text to be displayed, a URL to link to, or whatever. Many functions use multiple parameters.
The code in Figure 6-4 shows how to add a parameter to your function and how to call the function with this parameter.
________________________________________________________________________________________
< html >
< head >
< title >Getting Centered Functionally< /title >
< script type = "text/javascript" >
< !-- hide me from older browsers
function openAndCenterWindow(the_url){
if ((parseInt(navigator.appVersion) > 3) &&
(navigator.appName == "Netscape")) {
var the_window = window.open(the_url,'the_window',
'height=200,width=200');
var screen_height = window.screen.availHeight;
var screen_width = window.screen.availWidth;
var left_point = parseInt(screen_width / 2) - 100;
var top_point = parseInt(screen_height / 2) - 100;
the_window.moveTo(left_point, top_point);}}
Writing Your Own JavaScript Functions 87
// show me -->
< /script>
< /head>
< body >
< a href= "#"
onClick="openAndCenterWindow('http://www.webmonkey.com/');
return false;">
Click me to put the Webmonkey home page in a small centered
window< /a >
< a href = "#"
onClick = "openAndCenterWindow('http://www.nostarch.com/');
return false;">
Click me to put the No Starch Press home page in a small
centered
window< /a>
< /body>
< /html>
_______________________________________________________________________________________
Figure 6-4: Opening and centering a window with a parameter
Line-by-Line Analysis of Figure 6-4The tag for Webmonkey,
< a href = "#"
onClick = "openAndCenterWindow('http://www.webmonkey.com/');
return false;">
Click me to put the Webmonkey home page in a small
centered window< /a>
calls the function with the URL for Webmonkey in parentheses
(see the result in Figure 6-5). Here Webmonkey's URL goes into
the function just as the words go into the alert() function,
but instead of any random string, it's a URL.
Similarly, the tag
< a href = "#"
onClick = "openAndCenterWindow('http://www.nostarch.com/');
return false;"> Click me to put the No Starch Press home page
in a small centered window< /a>
calls the function with the URL for No Starch Press.
Now let's look at the function itself. Only two lines differ
from those in Figure 6-3. The first line of the function now looks like this:
function openAndCenterWindow(the_url)
Notice that a word appears inside the parentheses now.
This term is a variable, storing whatever value you'll use
when you call the function. So if the line
openAndCenterWindow("happy happy!");
calls the function, the variable the_url holds the value "happy happy!".
When we call the function in Figure 6-4 as follows, the variable
the_url holds the value "http://www.nostarch.com/":
< a href = "#"
onClick = "openAndCenterWindow('http://www.nostarch.com/');
return false;"> Click me to put the No Starch Press
home page in a small centered window< /a>
The second line in the function that differs from Figure 6-3 is Y,
which opens the window. In Figure 6-3 we opened the window with
a web page:
var the_window = window.open('http://www.nostarch.com/', 'the_window', 'height=200,width=200');
In Figure 6-4 we open the window with the variable that was set when
the function was called:
var the_window =
window.open(the_url, 'the_window', 'height=200,width=200');
JavaScript sees the variable the_url and knows it's a variable
because no quotes surround it. If the function has 'http://www.nostarch.com/'
inside the parentheses, like this
openAndCenterWindow('http://www.nostarch.com/');
the variable the_url has the value http://www.nostarch.com/, so the window opens with the No Starch Press home page. Figure 6-6 shows you graphically what's going on here.
Function Definition
function openAndCenterWindow(the_url)
{
var the_window=
window.open(the_url, ", 'height=200,width=200');
}
Function Call
openAndCenterWindow('http://www.nostarch.com/');
Figure 6-6: Passing parameters
