ptg16476052534 LESSON 19: Using JavaScript in Your Pages
The blue arrow next to the line number for line 3 indicates that it is the where the debug-
ger is stopped. The buttons above the right pane allow you to control execution from
there. The buttons, from left to right, are Resume, Step Over, Step Into, Step Out, and
Deactivate Breakpoints. The Deactivate button causes subsequent breakpoints to be
ignored. The Resume button continues execution until the script finishes or it hits another
breakpoint. Step Over moves to the next statement in the current function, and Step Into
debugs whatever function is being called from the current line (if there is a function call
on that line). Step Out executes the remainder of the current function and resumes debug-
ging in the calling function. You should experiment with all of these to get a feel for how
the debugger works.
You’ll find three pieces of information in the right pane useful immediately. The first is
the Call Stack. It shows which function calls led to the current statement being called.
When you click Step Out, the debugger moves up to the next statement in the call stack.
The next is Scope Variables, which enables you to inspect any variables that are cur-
rently in scope. In this case, there’s event, which is the parameter of your event handler,
and this, which is set to the element that the event handler is bound to. If you inspect
it, you’ll see that in this context, this is the form that’s been submitted. You’ll need to
access it to validate the user input in the form. Finally, the Breakpoints section shows
all of the breakpoints that have been set. Sometimes it’s hard to remember which break-
points you’ve set and where you set them. You can use the Breakpoints list to unset
them. You should definitely experiment with the debugger. Being able to use it effec-
tively makes it very easy to track down many kinds of bugs.
The Completed Registration Form with JavaScript Validation When the
JavaScript script that you just created is integrated with the original registration form
document from Lesson 12, the result is a web form that tests its contents before they’re
transmitted to the server for further processing. This way, no data is sent to the server
until everything is correct. If a problem occurs, the browser informs the user (see Figure
19.4).FIGURE 19.4
An alert message.▼▼