By itself, HTML doesn’t have any smarts: It can’t do math, it can’t figure out if someone has correctly filled out a form, and it can’t make decisions based on how a web visitor interacts with it. Basically, HTML lets people read text, look at pictures, watch videos, and click links to move to other web pages with more text, pictures, and videos. In order to add intelligence to your web pages so they can respond to your site’s visitors, you need JavaScript.
JavaScript lets a web page react intelligently. With it, you can create smart web forms that let visitors know when they’ve forgotten to include necessary information. You can make elements appear, disappear, or move around a web page (see Figure 1-1). You can even update the contents of a web page with information retrieved from a web server—without having to load a new web page. In short, JavaScript lets you make your websites more engaging, effective, and useful.
Note
Actually, HTML5 does add some smarts to HTML—including basic form validation. But because not all browsers support these nifty additions (and because you can do a whole lot more with forms and JavaScript), you still need JavaScript to build the best, most user-friendly and interactive forms. You can learn more about HTML5 and web forms in Ben Henick’s HTML5 Forms (O’Reilly) and Gaurav Gupta’s Mastering HTML5 Forms (Packt Publishing).
Figure 1-1. The Interactive Ear (http://www.amplifon.co.uk/interactive-ear/), an interactive guide to human hearing, lets visitors learn about and explore the different parts of the human ear. New information appears in response to mouse movements and clicks. With JavaScript, you can create your own interactive effects.
For a lot of people, the term “computer programming” conjures up visions of super-intelligent nerds hunched over keyboards, typing nearly unintelligible gibberish for hours on end. And, honestly, some programming is like that. Programming can seem like complex magic that’s well beyond the average mortal. But many programming concepts aren’t difficult to grasp, and as programming languages go, JavaScript is a good first language for someone new to programming.
Still, JavaScript is more complex than either HTML or CSS, and programming often is a foreign world to web designers; so one goal of this book is to help you think more like a programmer. Throughout this book, you’ll learn fundamental programming concepts that apply whether you’re writing JavaScript, ActionScript, or even writing a desktop program using C++. More importantly, you’ll learn how to approach a programming task so you’ll know exactly what you want to do before you start adding JavaScript to a web page.
Many web designers are immediately struck by the strange symbols and words used in JavaScript. An average JavaScript program is sprinkled with symbols ({ } [ ] ; , () !=) and full of unfamiliar words (var, null, else if). In many ways, learning a programming language is a lot like learning another language. You need to learn new words, new punctuation, and understand how to put them together so you can communicate successfully.
Every programming language has its own set of keywords and characters, and its own set of rules for putting those words and characters together—the language’s syntax. You’ll need to memorize the words and rules of the JavaScript language (or at least keep this book handy as a reference). When learning to speak a new language, you quickly realize that placing an accent on the wrong syllable can make a word unintelligible. Likewise, a simple typo or even a missing punctuation mark can prevent a JavaScript program from working, or trigger an error in a web browser. You’ll make plenty of mistakes as you start to learn to program—that’s just the nature of programming.
At first, you’ll probably find JavaScript programming frustrating—you’ll spend a lot of your time tracking down errors you made when typing the script. Also, you might find some of the concepts related to programming a bit hard to follow at first. But don’t worry: If you’ve tried to learn JavaScript in the past and gave up because you thought it was too hard, this book will help you get past the hurdles that often trip up folks new to programming. (And if you do have programming experience, this book will teach you JavaScript’s idiosyncrasies and the unique concepts involved in programming for web browsers.)
In addition, this book isn’t just about JavaScript—it’s also about jQuery, the world’s most popular JavaScript library. jQuery makes complex JavaScript programming easier…much easier. So with a little bit of JavaScript knowledge and the help of jQuery, you’ll be creating sophisticated, interactive websites in no time.
When you add JavaScript to a web page, you’re writing a computer program. Granted, most JavaScript programs are much simpler than the programs you use to read email, retouch photographs, and build web pages. But even though JavaScript programs (also called scripts) are simpler and shorter, they share many of the same properties of more complicated programs.
In a nutshell, any computer program is a series of steps that are completed in a designated order. Say you want to display a welcome message using the web-page visitor’s name: “Welcome, Bob!” There are several things you’d need to do to accomplish this task:
Ask the visitor’s name.
Get the visitor’s response.
Print (that is, display) the message on the web page.
While you may never want to print a welcome message on a web page, this example demonstrates the fundamental process of programming: Determine what you want to do, then break that task down into individual steps. Every time you want to create a JavaScript program, you must go through the process of determining the steps needed to achieve your goal. Once you know the steps, you’ll translate your ideas into programming code—the words and characters that make the web browser behave how you want it to.
Web browsers are built to understand HTML and CSS and convert those languages into a visual display on the screen. The part of the web browser that understands HTML and CSS is called the layout or rendering engine. But most browsers also have something called a JavaScript interpreter. That’s the part of the browser that understands JavaScript and can execute the steps of a JavaScript program. The web browser is usually expecting HTML, so you must specifically tell the browser when JavaScript is coming by using the <script> tag.
The <script> tag is regular HTML. It acts like a switch that in effect says “Hey, web browser, here comes some JavaScript code; you don’t know what to do with it, so hand it off to the JavaScript interpreter.” When the web browser encounters the closing </script> tag, it knows it’s reached the end of the JavaScript program and can get back to its normal duties.
Much of the time, you’ll add the <script> tag in the web page’s <head> section, like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/ html4/strict.dtd"> <html> <head> <title>My Web Page</title><script type="text/javascript"></script></head>
The <script> tag’s type attribute indicates the format and the type of script that follows. In this case, type=“text/javascript” means the script is regular text (just like HTML) and that it’s written in JavaScript.
If you’re using HTML5, life is even simpler. You can skip the type attribute entirely:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>My Web Page</title><script></script></head>
In fact, web browsers let you leave out the type attribute in HTML 4.01 and XHTML 1.0 files as well—the script will run the same; however, your page won’t validate correctly without the type attribute (see the box on Validating Web Pages for more on validation). This book uses HTML5 for the doctype, but the JavaScript code will be the same and work the same for HTML 4.01, and XHTML 1.
You then add your JavaScript code between the opening and closing <script> tags:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script>
alert('hello world!');
</script>
</head>You’ll find out what this JavaScript does in a moment. For now, turn your attention to the opening and closing <script> tags. To add a script to your page, start by inserting these tags. In many cases, you’ll put the <script> tags in the page’s <head> in order to keep your JavaScript code neatly organized in one area of the web page.
However, it’s perfectly valid to put <script> tags anywhere inside the page’s HTML. In fact, as you’ll see later in this chapter, there’s a JavaScript command that lets you write information directly into a web page. Using that command, you place the <script> tags in the location on the page (somewhere inside the body) where you want the script to write its message. In fact, it’s common to put <script> tags just below the closing </body> tag—this approach makes sure the page is loaded and the visitor sees it before running any JavaScript.
Using the <script> tag as discussed in the previous section lets you add JavaScript to a single web page. But many times you’ll create scripts that you want to share with all of the pages on your site. For example, you might add a panel of additional navigation options that slides onto the page in response to a visitor’s mouse movements (see Figure 1-2). You’ll want that same fancy slide-in panel on every page of your site, but copying and pasting the same JavaScript code into each page is a really bad idea for several reasons.
First, it’s a lot of work copying and pasting the same code over and over again, especially if you have a site with hundreds of pages. Second, if you ever decide to change or enhance the JavaScript code, you’ll need to locate every page using that JavaScript and update the code. Finally, because all of the code for the JavaScript program would be located in every web page, each page will be that much larger and slower to download.
A better approach is to use an external JavaScript file. If you’ve used external CSS files for your web pages, this technique should feel familiar. An external JavaScript file is a text file containing JavaScript code and ending with the file extension .js—navigation.js, for example. The file is linked to a web page using the <script> tag. For example, to add this JavaScript file to your home page, you might write the following:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script src="navigation.js"></script>
</head>The src attribute of the <script> tag works just like the src attribute of an <img> tag, or an <a> tag’s href attribute. In other words, it points to a file either in your website or on another website (see the box on URL Types).
Note
When adding the src attribute to link to an external JavaScript file, don’t add any JavaScript code between the opening and closing <script> tags. If you want to link to an external JavaScript file and add custom JavaScript code to a page, use a second set of <script> tags. For example:
<script src="navigation.js"></script>
<script>
alert('Hello world!');
</script>You can (and often will) attach multiple external JavaScript files to a single web page. For example, you might have created one external JavaScript file that controls a drop-down navigation panel, and another that lets you add a nifty slideshow to a page of photos. On your photo gallery page, you’d want to have both JavaScript programs, so you’d attach both files.
In addition, you can attach external JavaScript files and add a JavaScript program to the same page like this:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>My Web Page</title><script src="navigation.js"></script><script src="slideshow.js"></script><script>alert('hello world!');</script></head>
Figure 1-2. Nike.com’s website uses JavaScript extensively to create a compelling showcase for their products. The home page (top) includes a row of navigation buttons along the top—Men, Women, Kids, and so on—that, when moused over, reveal a panel of additional navigation options. For example, mousing over the Sports button (circled in bottom image) reveals a panel listing different sports that Nike makes products for.
Just remember that you must use one set of opening and closing <script> tags for each external JavaScript file. You’ll create an external JavaScript file in the tutorial that starts on Attaching an External JavaScript File.
You can keep external JavaScript files anywhere inside your website’s root folder (or any subfolder inside the root). Many web developers create a special directory for external JavaScript files in the site’s root folder: common names are js (meaning JavaScript) or libs (meaning libraries).
Note
Sometimes the order in which you attach external JavaScript files matters. As you’ll see later in this book, sometimes scripts you write depend upon code that comes from an external file. That’s often the case when using JavaScript libraries (JavaScript code that simplifies complex programming tasks). You’ll see an example of a JavaScript library in action in the tutorial on Attaching an External JavaScript File.
The best way to learn JavaScript programming is by actually programming. Throughout this book, you’ll find hands-on tutorials that take you step by step through the process of creating JavaScript programs. To get started, you’ll need a text editor (see Software for JavaScript Programming for recommendations), a web browser, and the exercise files located at https://github.com/sawmac/js3e (see the following Note for complete instructions).
Note
The tutorials in this chapter require the example files from this book’s website, www.missingmanuals.com/cds/jsjq3emm. (The tutorial files are stored as a single Zip file.)
In Windows, download the Zip file and double-click it to open the archive. Click the Extract All Files option, and then follow the instructions of the Extraction Wizard to unzip the files and place them on your computer. If you have trouble opening the Zip file, the free 7-Zip utility can help: www.7-zip.org.
On a Mac, simply double-click the file to decompress it. After you’ve downloaded and decompressed the files, you should have a folder named MM_JAVASCRIPT3E on your computer, containing all of the tutorial files for this book.
To get your feet wet and provide a gentle introduction to JavaScript, your first program will be very simple:
In your favorite text editor, open the file hello.html.
This file is located in the chapter01 folder in the MM_JAVASCRIPT3E folder you downloaded as described in the note above. It’s a very simple HTML page, with an external cascading style sheet to add a little visual excitement.
Click in the empty line just before the closing
</head>tag and type:<script>
This code is actually HTML, not JavaScript. It informs the web browser that the stuff following this tag is JavaScript.
Press the Return key to create a new blank line, and type:
alert('hello world');You’ve just typed your first line of JavaScript code. The JavaScript
alert()function is a command that pops open an Alert box and displays the message that appears inside the parentheses—in this case, hello world. Don’t worry about all of the punctuation (the parentheses, quotes, and semicolon) just yet. You’ll learn what they do in the next chapter.Press the Return key once more, and type
</script>. The code should now look like this:<link href="../_css/site.css" rel="stylesheet">
<script>alert('hello world');</script></head>In this example, the stuff you just typed is shown in boldface. The two HTML tags are already in the file; make sure you type the code exactly where shown.
Launch a web browser and open the hello.html file to preview it.
A JavaScript Alert box appears (see Figure 1-3). Notice that the page is blank when the alert appears. (If you don’t see the Alert box, you probably mistyped the code listed in the previous steps. Double-check your typing and read the following Tip.)
Tip
When you first start programming, you’ll be shocked at how often your JavaScript programs don’t seem to work…at all. For new programmers, the most common cause of nonfunctioning programs is simple typing mistakes. Always double-check to make sure you spelled commands (like
alertin the first script) correctly. Also, notice that punctuation frequently comes in pairs (the opening and closing parentheses, and single-quote marks from your first script, for example). Make sure you include both opening and closing punctuation marks when they’re required.Click the Alert box’s OK button to close it.
When the Alert box disappears, the web page appears in the browser window.
Although this first program isn’t earth-shatteringly complex (or even that interesting), it does demonstrate an important concept: A web browser will run a JavaScript program the moment it reads in the JavaScript code. In this example, the
alert()command appeared before the web browser displayed the web page, because the JavaScript code appeared before the HTML in the <body> tag. This concept comes into play when you start writing programs that manipulate the HTML of the web page—as you’ll learn in Chapter 3.
Figure 1-3. The JavaScript Alert box is a quick way to grab someone’s attention. It’s one of the simplest JavaScript commands to learn and use.
Note
Some versions of Internet Explorer (IE) don’t like to run JavaScript programs in web pages that you open directly off your hard drive, for fear that the code might do something harmful. So when you try to preview the tutorial files for this book in Internet Explorer, you might see a message saying that IE has blocked the script. Click “Allow blocked content.”
This annoying behavior only applies to web pages you preview from your computer, not to files you put up on a web server. To avoid hitting the “Allow blocked content” button over and over, preview pages in a different web browser, like Chrome or Firefox.
The script in the previous section popped up a dialog box in the middle of your monitor. What if you want to print a message directly onto a web page using JavaScript? There are many ways to do so, and you’ll learn some sophisticated techniques later in this book. However, you can achieve this simple goal with a built-in JavaScript command, and that’s what you’ll do in your second script:
In your text editor, open the file hello2.html.
While
<script>tags usually appear in a web page’s<head>, you can put them and JavaScript programs directly in the page’s body.Directly below
<h1>Writing to the document window</h1>, type the following code:<script> document.write('<p>Hello world!</p>'); </script>Like the
alert()function,document.write()is a JavaScript command that literally writes out whatever you place between the opening and closing parentheses. In this case, the HTML<p>Hello world!</p>is added to the page: a paragraph tag and two words.Save the page and open it in a web browser.
The page opens and the words “Hello world!” appear below the headline (see Figure 1-4).
Note
The tutorial files you downloaded also include the completed version of each tutorial. If you can’t seem to get your JavaScript working, compare your work with the file that begins with complete_ in the same folder as the tutorial file. For example, the file complete_hello2.html contains a working version of the script you added to file hello2.html.
The two scripts you just created may leave you feeling a little underwhelmed with JavaScript…or this book. Don’t worry—this is only the beginning. It’s important to start out with a full understanding of the basics. You’ll be doing some very useful and complicated things using JavaScript in just a few chapters. In fact, in the remainder of this chapter you’ll get a taste of some of the advanced features you’ll be able to add to your web pages after you’ve worked your way through the first two parts of this book.
As discussed on External JavaScript Files, you’ll usually put JavaScript code in a separate file if you want to use the same scripts on more than one web page. You then instruct your web pages to load that file and use the JavaScript inside it. External JavaScript files also come in handy when you’re using someone else’s JavaScript code. In particular, there are collections of JavaScript code called libraries, which provide useful JavaScript programming. Usually, these libraries make it easy to do something that’s normally quite difficult. You’ll learn more about JavaScript libraries on About JavaScript Libraries, and, in particular, the JavaScript library this book (and much of the Web) uses—jQuery.
Figure 1-4. Wow. This script may not be something to “document.write” home about—ha, ha, JavaScript humor—but it does demonstrate that you can use JavaScript to add content to a web page, a trick that comes in handy when you want to display messages (like “Welcome back to the site, Dave”) after a web page has downloaded.
But for now, you’ll get experience attaching an external JavaScript file to a page, and writing a short program that does something cool:
In your text editor, open the file fadeIn.html.
This page contains just some simple HTML—a few
<div>tags, a headline, and a couple of paragraphs. You’ll be adding a simple visual effect to the page, which causes all of the content to slowly fade into view.Click in the blank line between the
<link>and closing</head>tags near the top of the page, and type:<script src="../_js/jquery.min.js"></script>
This code links a file named jquery.min.js, which is contained in a folder named _js, to this web page. When a web browser loads this web page, it also downloads the jquery.min.js JavaScript file and runs the code inside it.
Next, you’ll add your own JavaScript programming to this page.
Press Return to create a new blank line, and then type:
<script>
HTML tags usually travel in pairs—an opening and closing tag. To make sure you don’t forget to close a tag, it helps to close the tag immediately after typing the opening tag, and then fill in the stuff that goes between the tags.
Press Return twice to create two blank lines, and then type:
</script>
This ends the block of JavaScript code. Now you’ll add some programming.
Click the empty line between the opening and closing script tags and type:
$(document).ready(function() {You’re probably wondering what the heck that is. You’ll find out all the details of this code on Adding jQuery to a Page, but in a nutshell, this line takes advantage of the programming that’s inside the jquery.min.js file to make sure that the browser executes the next line of code at the right time.
Hit return to create a new line, and then type:
$('header').hide().slideDown(3000);This line does something magical: It makes the “JavaScript & jQuery The Missing Manual” header first disappear and then slowly slide down onto the page over the course of 3 seconds (or 3,000 milliseconds). How does it do that? Well, that’s part of the magic of jQuery, which makes complex effects possible with just a single line of code.
Hit Return one last time, and then type:
});
This code closes up the JavaScript code, much as a closing
</script>tag indicates the end of a JavaScript program. Don’t worry too much about all those weird punctuation marks—you’ll learn how they work in detail later in the book. The main thing you need to make sure of is to type the code exactly as it’s listed here. One typo, and the program may not work.The final code you added to the page should look like the bolded text in the following:
<link href="../_css/site.css" rel="stylesheet">
<script src="../_js/jquery.min.js"></script><script>$(document).ready(function() {$('header').hide().slideDown(3000);});</script></head>Tip
To make your programming easier to read, it’s a good idea to indent code. Much as you indent HTML tags to show which tags are nested inside of other tags, you can indent lines of code that are inside another block of code. For example, the line of code you added in step 6 is nested inside the code for steps 5 and 7, so hitting Tab or pressing the spacebar a couple of times before typing the code for step 6 can make your code easier to understand (as pictured in the final code listed at the end of step 7).
Save the HTML file, and open it in a web browser.
You should see the headline—Sliding Down—plus a paragraph and the footer at the bottom of the browser window, followed by the boxes containing “JavaScript & jQuery: The Missing Manual” slowly slide down into place. Change the number 3000 to different values (like 250 and 10000) to see how that changes the way the page works.
Note
If you try to preview this page in Internet Explorer and it doesn’t seem to do anything, you’ll need to click the “Enable blocked content” box that appears at the bottom of the page (see the Note on Note).
As you can see, it doesn’t take a whole lot of JavaScript to do some amazing things to your web pages. Thanks to jQuery, you’ll be able to create sophisticated, interactive websites even if you’re not a programming wizard. However, you’ll find it helps to know the basics of JavaScript and programming. Chapters Chapter 2 and Chapter 3 will cover the basics of JavaScript to get you comfortable with the fundamental concepts and syntax that make up the language.
The most frustrating moment in JavaScript programming comes when you try to view your JavaScript-powered page in a web browser…and nothing happens. It’s one of the most common experiences for programmers. Even experienced programmers often don’t get it right the first time they write a program, so figuring out what went wrong is just part of the game.
Most web browsers are set up to silently ignore JavaScript errors, so you usually won’t even see a “Hey, this program doesn’t work!” dialog box. (Generally, that’s a good thing, as you don’t want a JavaScript error to interrupt the experience of viewing your web pages.)
So how do you figure out what’s gone wrong? There are many ways to track errors in a JavaScript program. You’ll learn some advanced debugging techniques in Chapter 17, but the most basic method is to consult the web browser. Most web browsers keep track of JavaScript errors and record them in a separate window called an error console. When you load a web page that contains an error, you can then view the console to get helpful information about the error, like which line of the web page it occurred in and a description of the error.
Often, you can find the answer to the problem in the error console, fix the JavaScript, and then the page will work. The console helps you weed out the basic typos you make when you first start programming, like forgetting closing punctuation, or mistyping the name of a JavaScript command. You can use the error console in your favorite browser, but because scripts sometimes work in one browser and not another, this section shows you how to turn on the JavaScript console in all major browsers, so you can track down problems in each.
Google’s Chrome browser is beloved by many a web developer. Its DevTools feature gives you many ways to troubleshoot HTML, CSS, and JavaScript problems. Also, its JavaScript console is a great place to begin tracking down errors in your code. It not only describes the errors it finds, it also identifies the line in your code where each error occurred.
To open the JavaScript console, click the Customize menu button (circled in Figure 1-5) and choose Tools→JavaScript Console. Or use the keyboard shortcut Ctrl+Shift+J (Windows) or ⌘-Option-J (Mac).
Figure 1-5. Click the Customize menu (circled) to access the JavaScript console as well as other helpful tools. Choosing the Developer Tools option is another way to get to the console, as the JavaScript console is part of a larger set of Chrome tools called the Developer Tools (DevTools for short). You’ll learn more about those tools in Chapter 17.
After you open the console, you can examine any errors that appear in the current page. For example, in Figure 1-6, the console identifies the error as an “Uncaught SyntaxError: Unexpected token ILLEGAL.” OK, it may not be immediately obvious what that means, but as you encounter (and fix) more errors you’ll get used to these terse descriptions. Basically, a syntax error points to some kind of typographical error—an error with the syntax or language of the program. The “Unexpected token ILLEGAL” part just means that the browser has encountered an illegal character, or (and here’s the tricky part) that there’s a missing character. In this case, looking closely at the code you can see there’s an opening single quote mark before “slow” but no final quote mark.
The console also identifies the name of the file the error is in (complete_slide.html, in this case) and the line number the error occurs (line 10). Click the filename, and Chrome opens the file above the console and briefly highlights the line (see Figure 1-5).
Tip
Because the error console displays the line number where the error occurred, you may want to use a text editor that can show line numbers. That way, you can easily jump from the error console to your text editor and identify the line of code you need to fix.
Figure 1-6. Chrome’s JavaScript console identifies errors in your programs. Click the filename listed to the right of the error, and Chrome briefly highlights the page with the error (circled).
Unfortunately, there’s a long list of things that can go wrong in a script, from simple typos to complex errors in logic. When you’re just starting out with JavaScript programming, many of your errors will be the simple typographic sort. For example, you might forget a semicolon, quote mark, or parenthesis, or misspell a JavaScript command. You’re especially prone to typos when following examples from a book (like this one). Here are a few common mistakes you might make and the (not-so obvious) error messages you may encounter:
Missing punctuation. As mentioned earlier, JavaScript programming often involves lots of symbol pairs like opening and closing parentheses and brackets. For example, if you type
alert(‘hellO’;—leaving off the closing parenthesis—you’ll probably get the: “Unexpected token;” message, meaning that Chrome was expecting something other than the character it’s showing. In this case, it encountered the semicolon instead of the closing parenthesis.Missing quote marks. A string is a series of characters enclosed by quote marks (you’ll learn about these in greater detail on Types of Data). For example, ‘hello’ is a string in the code
alert(‘hellO’);. It’s easy to forget either the opening or closing quote mark. It’s also easy to mix up those quote marks; for instance, by pairing a single-quote with a double quote like this:alert(‘hello”);. In either case, you’ll probably see an “Uncaught SyntaxError: Unexpected token ILLEGAL” error.Misspelling commands. If you misspell a JavaScript command—
aler(‘hellO’);—you’ll get an error saying that the misspelled command isn’t defined: for example, “Uncaught ReferenceError: aler is not defined,” if you misspell thealertcommand. You’ll also encounter problems when you misspell jQuery functions (like the.hide()and.slideDown()functions in the previous tutorial). In this case, you’ll get a different error. For example, if you mistyped “hide” as “hid” in step 6 on Attaching an External JavaScript File, Chrome will give you this error: “Uncaught TypeError: Object [object Object] has no method ‘hid’”.Syntax error. Occasionally, Chrome has no idea what you were trying to do and provides this generic error message. A syntax error represents some mistake in your code. It may not be a typo, but you may have put together one or more statements of JavaScript in a way that isn’t allowed. In this case, you need to look closely at the line where the error was found and try to figure out what mistake you made. Unfortunately, these types of errors often require experience with and understanding of the JavaScript language to fix.
As you can see from the preceding list, many errors you’ll make simply involve forgetting to type one of a pair of punctuation marks—like quote marks or parentheses. Fortunately, these are easy to fix, and as you get more experience programming, you’ll eventually stop making them almost completely (no programmer is perfect).
Internet Explorer provides a sophisticated set of developer tools for not only viewing JavaScript errors, but also analyzing CSS, HTML, and transfers of information over the network. When open, the developer tool window appears in the bottom half of the browser window. Press the F12 key to open the developer tools, and press it again to close them. You’ll find JavaScript errors listed under the Console tab (circled in Figure 1-7).
Note
If you first open a web page and then open the Internet Explorer console, you won’t see any errors (even if there are some). You need to reload the page to see any errors. Once the console is open, you’ll see errors on the pages you visit as they load.
IE’s Console displays error messages similar to those described earlier for Chrome. However, sometimes they’re very different. For example, IE’s “Unterminated string constant” is an “Unexpected token ILLEGAL” error in Chrome. Like Chrome, Internet Explorer identifies the line of code in the HTML file where the error occurred, which you can click to see the actual code where the error occurs.
Mozilla’s Firefox browser also gives you a console to view JavaScript errors. To open the JavaScript console, on Windows click the Firefox tab in the top left of the browser window and choose Web Developer→Web Console. On a Mac, select Tools→Web Developer→Web Console. Or use the keyboard shortcuts Ctrl+Shift+I (Windows) or ⌘-Option-K (Mac).
Once the console opens, you’ll see any JavaScript errors on the page. Unfortunately, Firefox’s Web Console is more like a fire hose of data than a simple JavaScript error reporter (Figure 1-8). That’s because it provides information on all sorts of things: files downloaded, CSS and HTML errors, and more.
Note
The Firebug plug-in (http://getfirebug.com) greatly expands on Firefox’s Error Console. In fact, it provided the model for the developer tools in Internet Explorer, Chrome, and Safari (discussed next).
Figure 1-8. If you don’t want to see all of the messages in Firefox’s Web Console, just click the button for the type of message you wish to hide. For example, click the CSS button to hide CSS error messages, the Security button to hide security warnings, and so on. You’ll know if the button is disabled because it looks lighter gray, like the CSS and Security buttons here. A button is enabled when it’s darker and looks like it has been pressed “in,” like the Net, JS (short for JavaScript), and Logging buttons here.
Safari’s error console is available from the Develop menu: Develop→Show Error Console (or, if you’re on a Mac, use the Option-⌘-C keyboard shortcut). However, the Develop menu isn’t normally turned on when Safari is installed, so there are a couple of steps to get to the JavaScript console.
To turn on the Develop menu, you need to first access the Preferences window. Choose Safari→Preferences. Once the Preferences window opens, click the Advanced button. Turn on the “Show Develop menu in menu bar” box and close the Preferences window.
When you restart Safari, the Develop menu will appear between the Bookmarks and Window menus in the menu bar at the top of the screen. Select Develop→Show Error Console to open the console (see Figure 1-9).
Figure 1-9. The Safari Error Console displays the name of the JavaScript error, the filename (and location), and the line on which Safari encountered the error. Each tab or browser window has its own error console, so if you’ve already opened the console for one tab, you need to choose Develop→Show Error Console again if you wish to see an error for another tab or window. In addition, if you reload a page, Safari doesn’t clear any prior errors on that page, so you can end up with a long list of old, fixed errors as you work on a page and reload it. The answer: click the Trash icon (circled) to remove the list of old errors, and then reload the page.
Get JavaScript & jQuery: The Missing Manual, 3rd Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
