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.
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.
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>
type attribute indicates the format and the type of script that follows. In this case,
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>
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>My Web Page</title> <script>
alert('hello world!');</script> </head>
<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
However, it’s perfectly valid to put
<script> tags just below the closing
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>My Web Page</title> <script
src attribute of the
<script> tag works just like the
src attribute of an
<img> tag, or an
href attribute. In other words, it points to a file either in your website or on another website (see the box on URL Types).
When adding the
<script> tags. For example:
<script src="navigation.js"></script> <script> alert('Hello world!'); </script>
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>My Web Page</title>
Just remember that you must use one set of opening and closing
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.
In your favorite text editor, open the file hello.html.
Click in the empty line just before the closing
</head> tag and type:
Press the Return key to create a new blank line, and type:
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:
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.
alert in 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.
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.
In your text editor, open the file hello2.html.
<script> tags usually appear in a web page’s
<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).
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:
Press Return to create a new blank line, and then type:
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:
Click the empty line between the opening and closing script tags and type:
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:
Hit Return one last time, and then type:
The final code you added to the page should look like the bolded text in the following:
<link href="../_css/site.css" rel="stylesheet">
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.
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).
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).
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.
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.
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 the
alert command. You’ll also encounter problems when you misspell jQuery functions (like the
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).
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.
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).
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).