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.
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.
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
</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
alertcommand. 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).