Creating A Webpage to Hold JavaScript on your Local Machine

         For simplicity thereís a simple html file on my website, open it in the browser to start with. Go there with Aurora and open it:
http://steamdroid.com/JavaScriptClass/BasicPage.html

         Now, to get to the development tools in the browser, click on the tools icon again and select the Tools→Developer→Debugger entry (CTRL SHIFT I).

         At the top of the new window thereís a toolbar, select the Debugger tab. That will show you the source of the open BasicPage.html file (you may have to refresh the page in the browser window the first time):

         Now the goal is to make a copy of this file on your own computer so you can play with it.

o   In the browser window, use the File→Save As entry to save the page on your local disk.

o   I saved it in a new directory I created under MyDocuments named JavaScript Group keeping the same name BasicPage.html

o   Now you can open that local file rather than the one on my website in your browser so you can edit it. To open a local file in Aurora, type CTRL O, then navigate to the file you just saved on your local disk and click on it. Youíll get a new page which looks exactly the same as the old one, which isnít actually a surprise since itís a copy of the original.

If you havenít worked with local files before, the URL may look a bit odd, but thatís what local files look like in a browser:

file:///C:/Users/rbrown/Documents/JavaScript%20Group/BasicPage.html

o   In the debugger, youíll now see the file but itís on your local disk where you can edit it.

Now on to JavaScript and the Debugger

 

This is the reference page for the debugger: https://developer.mozilla.org/en-US/docs/Tools/Debugger

Debugging

 

Letís look at some code and play with the debugger a bit. Consider the BasicFile file:


<!doctype html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <title>Basic Page</title>

</head>

<body>

    <h1 id="Head">Just a generic heading</h1>

    <script>

        "use strict"        // force safe javascript

        console.log("Hi There World");      // Output to the console

    </script>

</body>

</html>

 

Notice the <script>Ö..</script> tags above. Thatís where the javascript on this page goes. The only code there is:

        "use strict"        // force safe javascript

        console.log("Hi There World");      // Output to the console

         The first line is just a directive to JavaScript to prohibit very bug prone code practices. Iím not going to go any further into this, but itís quite important and doesnít cost anything.

         The second line puts out the text Hi There World to the console window. To actually see the console window, click on the split window icon in the debugger and the console will appear at the bottom of the debugger page.


If you donít have that split screen icon, click on the settings icon (the gear wheel in that toolbar) and check the ScratchPad entry in the Available Toolbar Buttons.

 

Notice that after you reload the page in the browser, the text appears in the Console window. Thatís because when the page was loaded by the browser, it found the JavaScript and executed it.

Editing Files

Unlike many development environments, Firefox uses a separate window for editing named Scratchpad. Itís not integrated into the debugger window so you have to access it from another icon in the top left toolbar

To create a new file you can start with an existing one by opening it in Scratchpad (just delete the text that Scratchpad puts in)

By default, Scratchpad opens JavaScript files, ones with the extension .js. In this case we want to open a file with the extension .html though, so down in the lower right corner of the window, change the file type to All

 

Here Iíve edited the file and will do a Save As from the Scratchpad to save it as IceCreamPage.html based on the Ice Cream example from page 18. Note that Iíve changed the output from document.write to console.log.

Use the Save As button and save the file as IceCreamPage.html in the same local directory where BaseFile.html is. You can leave the ScratchPad window open to make it easy to get back to IceCreamPage for more edits.

To see the results, just go back to the browser window and aim it at IceCreamPage.html. Youíll notice that now the Console window has more stuff in it and the debugger window has the changed code in it as well.

 

 

Thatís the output from the newly changed file. The Another Scoop line is shown only once, but if you look at the right end of the window (not shown above), The 5 in the circle on the second line just means that there were 5 repetitions of that line, it saves space. If the lines were different, theyíd be individually shown.

 

As the book says, this is a simple while loop example that starts with the scoops variable set to 5, then each time through the loop, it subtracts 1 from the value in scoops. The loop ends when scoops goes to zero because the while loop test is scoops > 0. When the test fails, the loops stops and execution continues on line 17 after the bracket that closes the while loop.

 

The debugger can show exactly how this works by setting breakpoints and single stepping. A breakpoint is a flag you can set on a line of code and when the computer gets to it, execution stops and you can see whatís going on. Single stepping just executes one statement at a time. (If youíre not clear on what a line of code or a statement is look at page 10).

 

NOTE: Currently breakpoints set in the debugger donít work very well, there seem to be several bugs in the debugger! To avoid them, Iím going to use a built in JavaScript statement debugger that will act like a breakpoint but avoid the bugs.

 

First Iím going to set a breakpoint on the var scoops statement by adding a debugger statement just before it on line 12 by editing the file in the Scratchpad window then resaving the file. 

 

Now if you use just refresh the page in the browser window, the debugger will stop execution on that line.

  

Now you can see whatís happening in your code and watch it execute. To let the code run, but just one line, go to the Execution toolbar at the top right of the DevTools screen and hit the Single Step icon once

 

 

The browser will execute the line the breakpoint is on and pause on the next line, which will be highlighted. Do this twice so the highlight will be on line 14. 

If you hover the cursor over a variable it will show the current value.

 

 

Itís very instructive to just keep single stepping to see what happens. The highlight will show you where the code execution goes, and you can see how the variable values change by hovering over them.

 

Below, Iíve run the code through the loop twice and am showing the current state of the scoops variable on the third iteration of the loop.

 

 

Notice that scoops = 3, not 2 which is the value it will have after the current statement is executed. Single Stepping pauses on a statement before it is executed so you can see the state of the program at that point.

 

To let the program run use the Run icon in the Execution Toolbar.

 

 

Back to First Page

Separate Code Files