Chapter 2: How to code a JavaScript application

This chapter presents a subset of JavaScript and DOM scripting that will soon have you writing significant applications. If you don't have any programming experience, this chapter also makes a great aptitude test. If you read it and can do the exercises at the end of the chapter, you're ready for the rest of this book.

How to display error messages in Firefox

When you open a JavaScript application that has errors, the interface will still be displayed. When you try to use the application, however, it won't do anything because of the errors.

To see the error messages that Firefox produces, you have to open the Error Console window as described in figure 2-3. Here, the console shows the first error that's detected when the Sales Tax application is run with an error in it. In this case, the arrow under the message points to the character in the line that caused the error. In this case, the mistake is that a leading double quotation mark is matched by a single quotation mark, which is invalid.

To display the source code for the JavaScript file, you can click on the link in the error message. That opens the source code in a separate window with the error highlighted. You can't use that window to fix the code, though. Instead, you need to use your editor to fix and save the code and then reload the application in Firefox.

Often, the error messages are not as clear as in this example. Instead, an error in one line will be reported as an error somewhere else. Then, you start by looking for the error in the line indicated in the error message, but work your way to related portions of code until you find the error.

The buttons at the top of the Error Console let you select which types of messages you want displayed. If you have several pages open in tabs, all of their messages, warnings, and errors will be displayed in the same Error Console window. Then, you can show just the errors by clicking the Errors tab. You can also remove all messages from the Error Console by clicking the Clear button. Often, you will clear the Error Console after you've made changes to your code but before you reload your application.

The Firefox Error Console with an error displayed

The source code that's displayed when you click on the link

How to display the Error Console and source code

• To display the Error Console, use the ToolsError Console command or press Ctrl+Shift+J.
• To display the source code with the error highlighted, click on the link in the Error Console.

Description

• The Error Console in Firefox is used to display errors, warnings, and messages generated by web pages. That includes messages caused by errors in JavaScript code.
• The buttons at the top of the Error Console let you display all errors, just fatal errors, just warnings, or just messages. The Clear button removes all errors from the console.
• If you click the link to the file in the Error Console, Firefox will display the code and highlight the line at which the error occurred. You will not, however, be able to edit the file.

Figure 2-3 How to display error messages in Firefox