Figure 7.17 shows function errors displayed by the JavaScript Error Console in Firefox6. Figure 7.17 Function errors in the JavaScript Error Console Firefox.?. 7.2.2 Exception Handling w
Trang 17.1.6 Functions Are Objects
For a discussion on how functions behave as objects See “Classes and User-Defined
Functions” on page 182 in Chapter 8, “Objects.”
7.2 Debugging Techniques
Now that we have covered some of the fundamental JavaScript constructs, this is a good
time to introduce some debugging techniques As your programs grow, so do your
chances to create errors Getting to know how to deal with these problems will save you
much time and frustration
7.2.1 Function Syntax
When working with functions there are some simple syntax rules to watch for:
1 Did you use parentheses after the function name?
2 Did you use opening and closing curly braces to hold the function definition?
3 Did you define the function before you called it? Try using the typeof operator
to see if a function has been defined
4 Did you give the function a unique name?
5 When you called the function is your argument list separated by commas? If
you don’t have an argument list, did you forget to include the parentheses?
6 Do the number of arguments equal to the number of parameters?
7 Is the function supposed to return a value? Did you remember to provide a
vari-able or a place in the expression to hold the returned value?
8 Did you define and call the function from within a JavaScript program?
Figure 7.17 shows function errors displayed by the JavaScript Error Console in
Firefox This is a very useful debugging tool for immediate error checking Just click the
Tools menu and go to Error Console These error messages make troubleshooting your
scripts much easier Figures 7.18 through 7.20 show errors in other browsers
Figure 7.17 Function errors in the JavaScript Error Console (Firefox).
Trang 2Figure 7.18 Windows Internet Explorer—Look in the bottom left corner of the page.
Double-click the yellow icon A window will appear with the line and character
where the error was found.
Figure 7.19 Windows Internet Explorer Debug tool.
Trang 37.2.2 Exception Handling with try/catch and throw
An exception is a runtime error that the program might encounter during its execution,
such as an undefined variable, an index value that is referenced but doesn’t exist, a
func-tion that receives a bad parameter, and so on Excepfunc-tion handlers make it possible to
catch errors and resolve them gracefully By catching the exception and controlling the
error message, the program will be much nicer for an unwary user who is not used to
the kinds of error messages you see all the time As of JavaScript1.5 exception handling
is now supported
The try/catch Statements. You can enclose and test those parts of a program where
you expect potential problems in a try statement If an exception occurs within the try
block, control will shift to the catch block The catch block will contain statements to
clarify what went wrong If there were no errors, the catch block will be ignored See
Examples 7.12 and 7.13
When an exception is thrown in the try block, the variable shown as e in catch(e) holds
the value of the type of exception (Table 7.1) that was thrown in the try block You can
use this variable to get information about the exception that was thrown (The variable
e can have any name and is local to the catch block.) You can use the name and message
properties with the catch variable to get the name of the exception and a message
explaining what caused the exception
Figure 7.20 Opera’s Error Console.
Trang 4RangeError If a numeric variable or
parameter exceeds its allowed range
ReferenceError If an invalid reference is used;
e.g., the variable is undefined SyntaxError If a syntax error occurs while
parsing code in an eval()
TypeError If the type of a variable or
parameter is a valid type URIError Raised when encodeURI() or
decodeURI() are passed invalid parameters
E X A M P L E 7 1 2
<html>
<head><title>Try/Catch</title>
<script type="text/javascript">
{ alert("Current balance is $:" + get_balance());
}
{ alert("Something went wrong! \n"+
3 err.name + ": "+ err.message);
}
</script>
</head>
</html>
E X P L A N A T I O N
1 The try block contains the JavaScript that will be tested for errors.
2 If an error occurred in the try block, it would be caught in the catch block.
3 The argument, err, contains the reason for the error Without the try/catch
state-ments, this example would display a blank page and the error would show up in
the browser’s error console If the exception is caught in your program, it will not
Trang 5The throw Statement. The throw statement allows you to create your own
condi-tions for excepcondi-tions Used within in the try block, a specific error condition can be tested
and thrown to the catch block In the catch block you can create customized error
mes-sages to correspond to a particular error See Example 7.13
The finally Clause. You can use the finally clause to execute statements after the try
statement finishes, whether or not an exception occurred
You can use the finally clause to make your script fail gracefully when an exception
occurs; for example, you might need to release a resource that your script has tied up
The following example opens a file and then executes statements that use the file
(server-side JavaScript allows you to access files) If an exception is thrown while the file
is open, the finally clause closes the file before the script fails
Figure 7.21 An error was caught and its name and the reason for it are displayed.
E X A M P L E 7 1 3
<html>
<head><title>Catch me if you Can!</title></head>
<body>
<script type="text/javascript">
1 var age=eval(prompt("Enter your age:",""));
3 if(age>120 || age < 0){
throw "Error1"; }
else if(age == ""){
4 throw "Error2";
} else if(isNaN(age)){
throw "Error3";
} }
6 if(err=="Error1"){
alert("Error! The value is out of range");
}
Trang 6if(err=="Error3"){
alert("Error! The value is not a number");
} }
7 if (age < 13){
alert("You pay child's fare!");
} else if(age < 55 ){
alert("You pay adult fare.");
} else { alert("You pay senior fare.");
}
</script>
</body>
</html>
E X P L A N A T I O N
1 This simple example is here to show you how the try/catch/throw statements can
be used for handling errors For something like this, you will probably find it
eas-ier to test the program in the if conditionals, but we’ll use it to demonstrate how
to throw exceptions First, the user is prompted for his or her age
2 The try block is entered to test for the possible error conditions defined by the
programmer
3 If an invalid age is entered (i.e., an age less than 0 or greater than 120) An error
string, “Error1” is thrown and picked up in the catch block to be tested
4 If the user didn’t enter anything, the string “Error2” is thrown and picked up in
the catch block.
5 In the catch block, the errors will be handled based on the error string that was
thrown from the try block.
6 The err value being passed to the catch block is one of the values that was thrown
from the try block; for example, “Error1”, “Error2”, “Error3”.
7 Because all the testing and error handling was handled in the try/catch blocks, the
rest of the program can continue with no further testing of the age variable (see
Figure 7.22)
Trang 77.3 What You Should Know
Functions are fundamental to programming in any programming language There are
JavaScript built-in functions such as eval(), parseInt(), and Number(), among others, and
there are user-defined functions This chapter was all about defining and calling your
own functions We will be creating functions throughout the rest of this text to perform
tasks based on user-initiated events such as clicking a link, clicking a button, rolling a
mouse over an image, or submitting a form Functions will be defined within JavaScript
code or from another file They may be used to create objects, respond to HTTP requests,
validate data, perform calculations, customize output, and so on After reading this
chapter, you should know:
1 How to declare and define functions
2 Where to put functions in a JavaScript program
3 How to call a function with arguments and use parameters
4 What can be returned from a function
5 The difference between global and local variables
6 How to trigger a function call
7 How to assign a function to a variable
8 What closure is
9 What recursion is
10 How try and catch work.
11 How to debug programs with browser tools
Figure 7.22 Example of output for Example 7.13.
Trang 8<html>
<head><title>link</title>
<script type="text/javascript">
function addem(){
var n = 2;
var y = 3;
document.write( n + y , "<br />");
}
</script>
</head>
<body bgcolor="red">
<a href="JavaScript:addem()">Click here</a>
<h2>Hello</h2>
</body>
</html>
2 Write a function that will calculate and return the amount that should be paid
as a tip for a restaurant bill The tip will be 20 percent of the total bill
3 Create a function called changeColor() that will be called when the user presses
one of two buttons The first button will contain the text “Press here for a yellow
background” The second button will contain the text “Press here for a light green background” The function will take one parameter, a color Its function is to
change the background color of the current document; for example, bgColor=“yellow”
4 Write a function called isLeapYear() that will return true if this is a leap year
and false if it isn’t
5 Write an anonymous function that will calculate and return the distance you
have traveled using the formula, rate * time The function definition will be
assigned to a variable The function will be called using the variable
6 The following example is written in the C language It is a very common
recur-sive function call factorial Can you explain how this function works and can
you write it in JavaScript?
unsigned int factorial(unsigned int n){
if (n <= 1) { return 1;
Trang 9return n * factorial(n-1);
} }
7 Write a function that returns the total cost of any number of buckets of paint
Ask the user how many buckets he or she is going to buy and for the cost of one bucket Ask the user the color of the paint Calculate and return what he or she owes Change the color of the font to the color of the paint Use the
catch/try/throw statements to check for invalid input if the user doesn’t give you
a valid value for the number of buckets, such as a number less than 0, or gives you no input, or types in a string, and so on, check that the user doesn’t give you a color of paint that is the same color as the background of your document
or you will not be able to see the color of the font