JavaScript Language Essentials | Page 3

JavaScript Language Essentials

Passing a Value to a Function

You'll often want to take some information and give it to a function to use. This is called passing the information to the function. For example, look at this function definition:

The variable batterup is a parameter of the function. When a function is called, data can be passed into the function. Then, when you're inside the function, that data is in the batterup variable. Functions can be passed just about any data you want to use, including text strings, numbers, or even other JavaScript objects. For example, the batterup variable could be passed a player's name as a text string ("Mantle"), or his number in the lineup (7) (although mixing the two can be a very bad idea until you really know what you're doing). Like all variables, you should give the ones you use as function parameters names that remind you what the variable is being used for.

You can have more than one parameter in a function. Just separate them inside the parentheses with commas, like this:

We would like to underscore that parameters are variables, and so they can be passed a variety of different values when the function is called. So these code fragments are all equivalent:

For all three examples, once we're inside currentScore(), the value of hometeam is 6, and the value of visitors is 4 (which is great news for the home team).

In this example, we'll clean up some of the calculations from Script 3.3 by taking them out of the newCard() function, restating them a bit, and putting them into a function with passed values, in order to make it more obvious what's going on. It all happens in Script 3.4.

Script 3.4. By passing values to the `setSquare()` function, the script becomes easier to read and understand.

To pass a value to a function:

setSquare(i);
This is inside the newCard() function. We're passing the value of i into the setSquare() function.
function setSquare(thisSquare) {
This defines the setSquare() function, and it's being passed the current square number that we want to update. When we pass it in, it's the loop variable i. When the function receives it, it's the parameter thisSquare. What is a little tricky to understand is that this function is passed i, and does stuff with it, but doesn't actually see i. Inside the function, all it knows about is thisSquare.
var currSquare = "square" + thisSquare;
In order to make the getElementById() call later in the script clearer, we're creating and setting a new variable: currSquare. This is the current square that we're working on. It takes the text string "square" and concatenates it with the thisSquare variable.
document.getElementById(currSquare). innerHTML = newNum;
This line gets the element with the name specified by currSquare and changes it to display newNum.

Detecting Objects

When you're scripting, you may want to check to see if the browser is smart enough to understand the objects you want to use. There is a way to do this check, which is called object detection.

What you do is pose a conditional for the object you're looking for, like this:

If the object exists, the if statement is true, and the script continues on its merry way. But if the browser doesn't understand the object, the test returns false, and the else portion of the conditional executes. Script 3.5 gives you the JavaScript you need, and Figure 3.3 shows you the result in an obsolete browser.

Script 3.5. Object detection is an important tool for scripters.

Figure 3.3 Object detection rejected this ancient browser (Netscape 4 for Mac) and displayed this error message.

To detect an object:

if (document.getElementById) {
This line begins the conditional. If the object inside the parentheses exists, the test returns true, and the rest of this block in the newCard() function runs.
else { alert("Sorry, your browser doesn't support this script"); }
If the test in step 1 returns false, this line pops up an alert, and the script ends.

Tips

In a production environment, it's better to give users something else to do, or at least some version of the page that doesn't require this capability. Here, though, there's nothing to be done.
It's important to understand that you won't always check for document.getElementById. What objects you check for depends on what objects your script uses. If your scripts use objects with less than 100% support, always check first if the browser can handle it—never assume that it can. We aren't showing object detection throughout this book to save space, but in the real world, it's vital.

Washed-Up Detectives

An alternate way to try to figure which objects a browser supports is to do a browser detect, which tries to identify the browser being used to view the page. It gets this by requesting the user agent string from the browser, which reports the browser name and version. The idea is that you would then write your scripts to work one way with particular browsers and another way for other browsers. This is an obsolete approach to scripting, because it doesn't work well.

Browser detection relies on the fact that you know that a particular browser supports the script you're writing, and another browser doesn't. But what about obscure browsers that you've never used? Or browsers that are released after your script is done?

Worse, many browsers try to get around browser detection by intentionally misrepresenting themselves. For example, Apple's Safari browser claims that it is a Mozilla browser, even though it is not. And some browsers, such as Safari and Opera, allow you to set which browser you want it to report itself as.

There's just no way that you can retrofit your script fast enough to keep up with all of the possible browser permutations. It's a losing game.

The same goes for attempting to detect which version of JavaScript a browser supports. We strongly suggest that you do not use these detection methods, and use object detection instead.

[previous] [next]

URL:

JavaScript Language Essentials | Page 3