JavaScript Validator
JavaScript Editor
|
|
Although our code has been fairly simple so far, it is still possible for us to make errors when typing it in. As we start to look at more complex and detailed code, this will become more and more of a problem. So, before we move on to look at how we can use the data stored in variables, it seems like a good point to discuss how to ensure that any errors that arise in our code are shown to us by the browser, so that we can go and correct them.
When you are surfing other people's websites, you probably won't be interested in seeing when there are errors in their code. In this situation, it's tempting to find a way of switching off the display of error dialog boxes in the browser. However, as JavaScript programmers, we want to know all the gory details about errors in our web pages; that way we can fix them before someone else spots them. It's important, therefore, to make sure the browsers we use to test our websites are configured correctly to show errors and their details. In this section, this is exactly what we're going to do.
Different ways of displaying errors exist in Netscape Navigator (NN) depending on the version that you have installed.
If you have NN 4.0 through 4.05, error messages are displayed in dialog boxes that pop up on your screen. This should be set up by default.
If you have NN 4.06+, you can use the JavaScript console. The console allows you to interact with the error—we leave further discussion of this functionality until Chapter 10. When an error occurs, you will first notice things didn't go as planned, and the results of your code probably won't match what you expected to see happen. Secondly, in the bottom of the browser window you'll see the message "JavaScript error: type 'JavaScript:' into Location for details." If we do that and type JavaScript: into where we normally type the web address, a pop-up console will appear showing where the error occurred.
To set up the JavaScript console to appear automatically whenever an error occurs, you need to set the preferences for displaying errors by modifying the preferences file, prefs.js.
Make sure Navigator is not running. If it is, it may overwrite your changes when you edit the preferences file.
Open prefs.js using a text editor such as NotePad. The preference file is in the user's own directory under the Netscape\Users directory. For example, for NN 4.7 on Windows NT, you may find prefs.js in
<Netscape path>\Users\<user name>
User name is either one you chose or sometimes it's just called default. Just in case things go wrong, it might be a good idea to save a backup version of the file elsewhere, before changing it.
Add the following line to the bottom of the prefs.js file.
user_pref("javascript.console.open_on_error", true);
Save and close the prefs.js file.
In Netscape 6.x this way of displaying errors won't work. On this browser you need to choose Tools from the Tasks menu, and select the JavaScript Console option. Note that Netscape 6.x gives no warning that an error occurred in the bottom of the browser window.
In Navigator 7 typing javascript: will bring up the JavaScript console, just as with Navigator 4.06+. We can also go to the Tools|Web Development|JavaScript Console menu to display the console. Again as with NN 6 no mention of the error is made in the browser window. However, Netscape has released a program called the Venkman JavaScript debugger, which works with NN 7 and is a big bonus in finding and fixing bugs; we'll see how to use this in Chapter 10.
Normally, IE will by default display JavaScript errors using dialog boxes. However, it is possible to turn off the displaying of such errors, in which case we need to follow a few simple steps to re-enable error displaying. First open up Internet Explorer and select the Internet Options menu from the Tools menu, as shown in Figure 2-3.
In the dialog box that appears, select the Advanced tab. Under Browsing, make sure the checkbox next to Disable script debugging is not checked and that the Display a notification about every script error box is checked, as shown in Figure 2-4. Note that IE 4 doesn't have a Display notification about every script error checkbox, so you just need to uncheck the Disable script debugging checkbox. Once you've done this you can click OK to close the dialog box.
OK, now that we have the display of error messages sorted out, we'll look at what happens when we have an error in our code. Note that as with NN 7 there is a program available from Microsoft to help us root out errors in our code; we'll see how to use this in Chapter 10.
As we mentioned in the previous section, the use of a reserved word in a variable name will result in a JavaScript error in the browser. However, the error message displayed may not be instantly helpful since it may not indicate that you've used a reserved word in declaring your variables. Let's look at the sort of error messages you might see in this situation. Note that these error messages can also be produced by other mistakes not related to variable naming, which can get confusing at times. We'll look at these other mistakes later in the book, and indeed, the whole of Chapter 10 is devoted to spotting and fixing errors.
Let's assume that we try to define a variable called with like this:
var with;
The word with is reserved in JavaScript. What errors will we see?
If you load the page in an early Netscape browser that is using dialog boxes to show errors, you'll see something like that shown in Figure 2-5.
In a later version of NN 4 using the JavaScript console to show the error, the same mistake will produce something like that shown in Figure 2-6.
In Netscape 6 and 7 we will unfortunately not be told of any errors unless we open the JavaScript console ourselves, in which case we'll see something like that shown in Figure 2-7.
When developing code, it's probably just easier to leave the console open. We'll see a more sophisticated way of solving code problems in Chapter 10 when we look at Venkman, a program released by Netscape to help with removing errors.
In Internet Explorer, the number of different dialog boxes that can be produced by the same error is more confusing. The messages depend on which version of Internet Explorer you have, and whether you have installed additional components such as the Microsoft Script Debugger, which we'll see in use in Chapter 10.
For example, using a reserved word for a variable name produces an error message telling you that an identifier was expected. On my machine, which has Microsoft's Visual Studio installed, the error message dialog box I get is shown in Figure 2-8.
You'll also get the dialog shown in Figure 2-8 if you have installed the script debugger component available from Microsoft. This message box will appear whether you're using IE 4, IE 5, or IE 6.
However, if you're using IE 5 or IE 6 and don't have Visual Studio or the script debugger installed, the error dialog you'll see will probably be similar to that shown in Figure 2-9.
If you don't see the full details of the error, click the Show Details button and you'll be told where and what the error is.
If you have IE 5 or IE 6 and didn't see either of the error messages in Figure 2-8 and Figure 2-9, don't panic. In the browser's status bar (usually at the bottom of the browser window), you'll notice a little yellow triangle with an exclamation mark inside it. Double-click the yellow triangle, and the error message dialog box appears. Make sure you check the Always display this message when a page error occurs checkbox.
Finally, if you have IE 4 installed and no script debugger, you'll see a plain dialog box pop up like that shown in Figure 2-10.
For the rest of the book, I'll show error dialog messages for Internet Explorer 6. Bear in mind, though, that it doesn't matter what your dialog box looks like, so long as you're getting an indication that an error has occurred and what caused it.
|
|
JavaScript Validator
JavaScript Editor
