Since I've tried to keep this book short enough to read in a weekend (well, maybe a long weekend), many of the things we'll look at aren't exhaustively covered. This doesn't mean I'll skim over things. It just means that there are more advanced techniques that aren't important for you to learn at this time. Don't worry: you'll get a solid grounding in what you need to know to get you off the ground. Then, check out some of the resources in the Appendices for further study.
What Will I Learn?
How Do I Get Started?
You don't have to understand the code in the tags for now; just know that it works. When your browser encounters a script tag, it will interpret the code that you've written and execute it (if appropriate).
Two more notes about including scripts:
· For the most part, you'll want to include your script tags right before your closing body tag. Actually, you can put them anywhere you want, but it's best for performance reasons to put it at the end of the body … or write your code to wait until the page has completed loading before it begins executing. We'll see how to do this later on (and no, you can't jump ahead to "Another Short Rabbit-Trail on Script Loading").
After installing Firebug, you'll have a little bug icon in the lower right corner of the status bar of your Firefox window; if it's coloured, that means it's enabled for the website you're on; otherwise it will be black and white.
Fig. 1-1. Firebug activated indicator
At least, that's where it's been for a long time. If you're on Firefox 4, however, it's now on the toolbar:
Fig. 1-2. Firebug activated indicator in Firefox 4
To enable Firebug on a website, just click that icon. When you click on this, the Firebug panel will pop up. It'll look something like this:
Fig. 1-3. The Firebug panel
We could write a whole tutorial on Firebug, but the panel you'll find useful in this book is the console panel. You can find it by clicking the console tab (Firebug should open to it by default; it's pictured above).
Conventions Used in This Book
One more administrative note before we continue: many of the code examples in the book will look like this:
alert("Hello, reader"); // Hello, reader
See how there's a header on this code snippet: "Example 1.1"? All code snippets with headers have an accompanying file—called something like 'example_1_1.html'—that you can find in the 'code' folder which you've already downloaded with the book. I want you to run these, but even better, I want you to open them up and change the code, mess around, and learn why some things work and others don't.
If a snippet doesn't have a title, it's just a quick example that needs to be shown in code, but won't give you any result if you execute it by itself.
You won't fully understand this now, but I need to explain it, and you'll understand it soon: in the snippet above, I've used the alert function to show the result of the code; this function will pop up an alert box, with the text we give it. Notice the two backslashes at the end of the line: those denote a comment in the code (more on this soon); in our case, I've put the result you should see in the alert box in the comment, so you can compare results.
console.log("Hi there"); // Hi there
console.log(1 + 4); // 5
Open the 'example 1.2' file in Firefox, and open Firebug (actually you'll have to refresh the page after you open Firebug, because nothing will log if Firebug isn't enabled for that page). You should see two lines in the console, one saying "Hi there", and the other saying "5."