In the 2005 film adaptation of The Hitchhiker's Guide to the Galaxy by Douglas Adams, aliens demolish the earth to make way for a hyperspace expressway. Our demise could have been averted insofar as the demolition proposal had been on file at local planning offices worldwide for some time. However, no one complained during the public comment period.
Like construction proposals, no one ever bothers to read the preface to a programming book. Typically, that's mostly harmless, but not for this book. Though you won't be vaporized into star dust for jumping to Chapter 1 or later, you'll be befuddled for not having downloaded and familiarized yourself with Firebug, our tool for learning JavaScript.
JavaScript is a beginner-friendly programming language available in browsers such as Internet Explorer, Firefox, Safari, Opera, and Chrome. Those browsers contain a JavaScript interpreter to parse and run your JavaScript programs, which you write in plain text with a text editor. So, you can use the same text editor that you code your XHTML and CSS with.
JavaScript derives its syntax, which is to say its grammar, from the ECMAScript standard and its features for manipulating XHTML, CSS, and HTTP from the DOM standard. Typically, JavaScript interpreters implement ECMAScript and DOM in separate libraries. So, just as your brain has left and right lobes, a browser's JavaScript brain has ECMAScript and DOM lobes.
In the first six chapters, we'll converse with the ECMAScript lobe. Then we'll converse with the DOM lobe for a couple of chapters. I guess you could say we'll be picking a JavaScript's brain one lobe at a time—ECMAScript and then DOM, with Firebug. Finally, in the last two chapters, we'll hand-code an uber-cool JavaScript program with our preferred text editors. But we'll never make it through Chapters 1–8 without Firebug. So, our first order of business will be to have you download and familiarize yourself with Firebug, a free add-on to Firefox for Windows, Mac, or Linux.
Obviously, prior to installing a Firefox add-on like Firebug, you need to have Firefox. Note that Firefox is a free web browser for Windows, Mac OS X, or Linux. To download Firefox, go to www.mozilla.com, and click the Download Firefox – Free button, as displayed in Figure 1. Then follow the wizard to install Firefox on your computer.
Open Firefox, and then download the Firebug add-on from www.getfirebug.com. Simply click Install Firebug for Firefox button in the top-right corner, as shown in Figure 2. Then follow the wizard, granting permission to install the add-on if prompted by Firefox.
Now that you have Firefox and Firebug installed, let's run through how to work with Firebug. Firebug runs JavaScript code relative to whatever HTML document is loaded in Firefox. In other words, you need to have an HTML document open in Firefox for Firebug to work.
Insofar as ECMAScript provides no way to manipulate HTML or CSS, in Chapters 1–6 we will simply load the following blank HTML document, firebug.html in the downloads at www.apress.com, in Firefox:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Firebug</title> </head> <body> </body> </html>
Load firebug.html in Firefox, and then press F12 to open Firebug, as in Figure 3. Note that pressing F12 does the inverse, too. In other words, pressing F12 toggles Firebug from closed to open or from open to closed. Note that if F12 is a shortcut for something else on your computer, you can open Firebug by choosing Tools
The first time you open Firebug, you may have to enable it by choosing Enabled from the Console menu, as shown in Figure 5.
Firebug has a command line for running a single line of JavaScript with. This runs along the bottom of Firebug and is prefaced by >>>. Type the following sample on the command line, as in Figure 6:
alert("Don't Panic");
Now press Return on your keyboard to have JavaScript run the sample. As Figure 7 displays, this tells Firefox to open an alert dialog box.
Nearly all the JavaScript samples we will run in Firebug are more than one line of code. So, the command line won't do. Instead, we'll toggle the console from the command line to the command editor by clicking the upward-facing arrow icon in the bottom-right corner of Firebug. As Figure 8 displays, this divides Firebug into two panels. The one on the right is the command editor. This is where you will type all the code samples in this book.
Note that there are three menu options, Run, Clear, and Copy, on the bottom of the command editor. Clicking Run will run whatever code you typed into the command editor. Note that the keyboard shortcut for clicking Run is Ctrl+Return (Command+Return). That is to say, pressing Return runs your sample in the command line but not in the command editor. If it were otherwise and Return was for running code in the command editor, you wouldn't be able to enter more than one line of code. In other words, the command editor would run the first line of code you typed, because you'd hit Return after entering it; you'd never get a chance to enter a second line!
The other two, Clear and Copy, are aptly named. Clicking Clear will clear any code from the command editor, while clicking Copy will copy any code in the command editor to the clipboard. Note that to clear the left panel of Firebug, you must click Clear in its menu. So, there is a Clear option in both the left and right panels. Oftentimes in this book I will say "double-clear Firebug," which is your clue to click Clear in both menus.
OK, type in the previous sample in the command editor, and then click Run or press Ctrl+Return (Command+Return) to have JavaScript execute it:
alert("Don't Panic");As Figure 9 displays, Firefox will open an alert dialog box, same as before.
One thing to note is that the command editor and command line are under the Console tab in Firebug. So if you inadvertently toggle to the HTML, CSS, Script, DOM, or Net tab, the command editor will disappear. So, you will have to click the Console tab in the top-left corner to make the command editor reappear. Note that the keyboard shortcut for toggling to the Console tab is Ctrl+Shift+L (Command+Shift+L). Table 1 lists vital keyboard shortcuts for Firebug.
Table 1. Firebug Keyboard Shortcuts
Shortcut Description | Windows or Linux | Mac |
|---|---|---|
Open Firebug | F12 | F12 |
Close Firebug | F12 | F12 |
Toggle to Console tab | Ctrl+Shift+L | Command+Shift+L |
Run code in command editor | Ctrl+Return | Command+Return |
If you are a fallible typist, inevitably you will mistype a code sample. Consequently, when you click Run, JavaScript will print an error in the left panel of Firebug. Those are simply JavaScript's way of calling you a dummy.
Syntax and reference errors are the most common. JavaScript names those SyntaxError and ReferenceError, respectively. So, let's screw up in both ways now to get you off the schneid with errors. In Firebug, mistype alert as alrt in order to make a reference error, which is to say you mistyped the name of something:
alrt("Don't Panic");As Figure 10 displays, JavaScript prints a ReferenceError containing the message "alrt is not defined":
OK, fix that typo, reverting alrt to alert, and then delete the closing parentheses like so:
alert("Don't Panic";Now click Run. As Figure 11 displays, JavaScript prints a SyntaxError containing the message "missing) after argument list". Note that a syntax error in programming is like a grammar error in writing.
Don't panic if you get an error. It probably just means you need to fix a typo or two.
Now that you have installed and gained familiarity with Firebug, let's begin exploring ECMAScript!