Java Reference
In-Depth Information
<body>
<script>
function writeTimesTable(timesTable) {
var writeString;
for (var counter = 1; counter < 12; counter++) {
writeString = counter + " * " + timesTable + " = ";
writeString = writeString + (timesTable * counter);
writeString = writeString + "<br />";
document.write(writeString);
}
}
for (var timesTable = 1; timesTable <= 12; timesTable++) {
document.write("<p>");
writeTimesTable(timesTable);
document.write("</p>");
}
</script>
</body>
</html>
Save this as
ch18 _ example4.html
and open it in your browser. The following instructions walk you
through the process of stepping through code:
1.
Set a breakpoint in line 19, the
for
loop in the body of the page, and reload the page.
2.
Click the Step Into icon and code execution moves to the next statement. Now the first
statement inside the
for
loop,
document.write("<p>")
, is up for execution.
3.
When you click the Step Into icon again, it takes you to the next line (the first calling of the
writeTimesTable()
function).
4.
You want to see what's happening inside that function, so click Step Into again to step into
the function. Your screen should look similar to Figure 18-9.
5.
Click the Step Into icon a few times to get the gist of the flow of execution of the function. In
fact, stepping through code line by line can get a little tedious. So let's imagine you're happy
with this function and want to run the rest of it.
6.
Use Step Out to run the rest of the function's code. You're back to the original
for
loop, and
the debugger is paused on line 22, as you can see from Figure 18-10.
7.
Click the Step Into icon to execute
document.write()
(it won't be visible because it's a
closing tag).
8.
Click Step Into four more times. Execution continues through the condition and increments
parts of the
for
loop, ending back at the line that calls
writeTimesTable()
.
9.
You've already seen this code in action, so you want to step over this function.
Well, no prizes for guessing that Step Over is what you need to do. Click the
Step Over icon (or press the F10 key) and the function executes, but without
stepping through it statement by statement. You should find yourself back at the
document.write("</p>")
line.
