tag (a little over half way down the file) and add the opening and closing This HTML should be familiar by now: It simply sets the page up for the script you’re about to write. Note: This page uses the HTML5 doctype. If you’re using XHTML 1.0 or HTML 4.01, add type=”javascript” to the 7. Preview the page in a web browser to enjoy the fruits of your labor (see Figure 2-2). The words “Cookie Monster” should appear below the headline “Using a Variable.” If you don’t see anything, there’s probably a typo in your code. Compare the script above with what you typed and check page 34 for tips on debugging a script using Firefox, Safari, Chrome, or IE 9. 8. Return to your text editor and change the second line of the script to read: var lastName = 'Jar'; Save the page and preview it in a web browser. Voila, the message now reads: Cookie Jar. (The file complete_use_variable.html has a working copy of this script.) 56 javascript & jquery: the missing manual www.it-ebooks.info Tutorial: Asking for Information Figure 2-2: While writing “Cookie Monster” may not be the reason you picked up a book on JavaScript, this script does demonstrate an important concept: how to create and use variables in JavaScript. Tutorial: Asking for Information In the last script, you saw how to create variables, but you didn’t get to experience how variables can respond to the user and produce unique, customized content. In this next tutorial, you’ll learn how to use the prompt() command to gather input from a user and change the display of the page based on that input. 1. In a text editor, open the file prompt.html in the chapter02 folder. To make your programming go faster, the The prompt() function produces a dialog box similar to the alert() function. However, instead of just displaying a message, the prompt() function can also retrieve an answer (see Figure 2-3). In addition, to use the prompt() function, chapter 2: the grammar of javascript www.it-ebooks.info 57 Tutorial: Asking for Information you supply two strings separated by a comma between the parentheses. Figure 2-3 shows what happens to those two strings: The first string appears as the dialog box’s question (“What is your name?” in this example). Note: IE7 won’t let you use the prompt() method without enabling it in the browser’s settings. Fortunately, IE7 is quickly disappearing from use. prompt('What is your name?', " ); Figure 2-3: The prompt() function is one way to retrieve user input. It works by providing two strings to the function—one to appear as the question, and another that pre-fills the prompt box with text. The second string appears in the field the visitor types into. This example uses what’s called an empty string, which is just two single quote marks ('') and results in a blank text field. However, you can supply a useful instruction like “Please type both your first and last names” for the second string, and it will appear in the field. Unfortunately, a visitor will need to first delete that text from the text field before entering his own information. The prompt() function returns a string containing whatever the visitor typed into the dialog box. In this line of JavaScript code, that result is stored into a new variable named name. Note: Many functions return a value. In plain English, that just means the function supplies some information after it’s done. You can choose to ignore this information or store it into a variable for later use. In this example, the prompt() function returns a string that you store in the variable name. 3. Save the page and preview it in a web browser. When the page loads, you’ll see a dialog box. Notice that nothing else happens— you don’t even see the web page—until you fill out the dialog box and click OK. You’ll also notice that nothing much happens after you click OK—that’s because, at this point, you’ve merely collected and stored the response; you haven’t used that response on the page. You’ll do that next. 58 javascript & jquery: the missing manual www.it-ebooks.info Arrays 4. Return to your text editor. Locate the second set of Here you take advantage of the information supplied by the visitor. As with the script on page 55, you’re combining several strings—an opening paragraph tag and text, the value of the variable, and a closing paragraph tag—and printing the results to the web page. 5. Save the page and preview it in a web browser. When the Prompt dialog box appears, type in a name and click OK. Notice that the name you type appears in the web page (Figure 2-4). Reload the web page and type a new name—it changes! Just like a good variable should. Figure 2-4: The power of variables: This page customizes its message based on a visitor’s response. Arrays Simple variables, like the ones you learned about in the previous section, only hold one piece of information, such as a number or a string value. They’re perfect when you only need to keep track of a single thing like a score, an age, or a total cost. However, if you need to keep track of a bunch of related items—like the names of all of the days in a week, or a list of all of the images on a web page—simple variables aren’t very convenient. For example, say you’ve created a JavaScript shopping cart system that tracks items a visitor intends to buy. If you wanted to keep track of all of the items the visitor adds to her cart using simple variables, you’d have to write code like this: chapter 2: the grammar of javascript www.it-ebooks.info 59 Arrays var item1 = 'Xbox 360'; var item2 = 'Tennis shoes'; var item3 = 'Gift certificate'; But what if she wanted to add more items than that? You’d have to create more variables—item4, item5, and so on. And, because you don’t know how many items the visitor might want to buy, you really don’t know how many variables you’ll have to create. Fortunately, JavaScript provides a better method of tracking a list of items, called an array. An array is a way of storing more than one value in a single place. Think of an array like a shopping list. When you need to go to the grocery store, you sit down and write a list of items to buy. If you just went shopping a few days earlier, the list might only contain a few items; but if your cupboard is bare, your shopping list might be quite long. Regardless of how many items are on the list, though, there’s still just a single list. Without an array, you have to create a new variable for each item in the list. Imagine, for example, that you couldn’t make a list of groceries on a single sheet of paper, but had to carry around individual slips of paper—one for each item that you’re shopping for. If you wanted to add another item to buy, you’d need a new slip of paper; then you’d need to keep track of each slip as you shopped (see Figure 2-5). That’s how simple variables work. But with an array, you can create a single list of items, and even add, remove, or change items at any time. an array simple variables potatoes milk potatoes Figure 2-5: An array provides a simple, organized way to track a list of related items. Adding another item to the list is just like writing a new item at the bottom of the list. eggs eggs bread cheese milk cheese bread Creating an Array To create and store items in an array, you first declare the array’s name (just as you would a variable) and then supply a list of comma-separated values: Each value represents one item in the list. As with variables, what you name your array is up to you, but you need to follow the same naming rules listed on page 46. To create an array, 60 javascript & jquery: the missing manual www.it-ebooks.info Arrays you put the list of items between opening and closing brackets—[ ]. For example, to create an array containing abbreviations for the seven days of the week, you could write this code: var days = ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat', 'Sun']; The brackets—[ ]—are very important; they tell the JavaScript interpreter that it’s dealing with an array. You can create an empty array without any elements like this: var playList = []; Creating an empty array is the equivalent of declaring a variable as described on page 45. You’ll create an empty array when you don’t add items to the array until the program is running. For example, the above array might be used to track songs that someone selects from a list on a web page—you don’t know ahead of time which songs the person will choose, so you declare an empty array and later fill it with items as the person selects music. (Adding items to an array is described on page 63.) Note: When looking through other people’s JavaScript programs (or other JavaScript books), you may encounter another way to create an array using the Array keyword, like this: var days = new Array('Mon', 'Tues', 'Wed'); This method is valid, but the method used in this book (called an array literal) is preferred by the pros because it requires less typing, less code, and is considered more “elegant.” You can store any mix of values in an array. In other words, numbers, strings, and Boolean values can all appear in the same array: var prefs = [1, 223, 'www.oreilly.com', false]; Note: You can even store arrays and other objects as elements inside an array. This technique can help store complex data. The array examples above show the array created on a single line. However, if you’ve got a lot of items to add, or the items are long strings, trying to type all of that on a single line can make your program difficult to read. Another option many programmers use is to create an array over several lines, like this: var authors = [ 'Ernest Hemingway', 'Charlotte Bronte', 'Dante Alighieri', 'Emily Dickinson' ]; As mentioned in the box on page 49, a JavaScript interpreter skips extra space and line breaks, so even though this code is displayed on five lines, it’s still just a single statement, as indicated by the final semicolon on the last line. chapter 2: the grammar of javascript www.it-ebooks.info 61 Arrays Tip: To make the names line up as above, you’d type the first line—var authors = [ ‘Ernest Hemingway’,— hit Return, then press the space key as many times as it takes to line up the next value, ‘Charlotte Bronte’,. Accessing Items in an Array You can access the contents of a simple variable just by using the variable’s name. For example, alert(lastName) opens an alert box with the value stored in the variable lastName. However, because an array can hold more than one value, you can’t just use its name alone to access the items it contains. A unique number, called an index, indicates the position of each item in an array. To access a particular item in an array, you use that item’s index number. For example, say you’ve created an array with abbreviations for the days of the week, and want to open an alert box that displayed the first item. You could write this: var days = ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat', 'Sun']; alert(days[0]); This code opens an alert box with ‘Mon’ in it. Arrays are zero-indexed, meaning that the first item in an array has an index value of 0, and the second item has an index value of 1: In other words, subtract one from the item’s spot in the list to get its index value—the fifth item’s index is 5 minus 1; that is, 4. Zero-indexing is pretty confusing when you first get started with programming, so Table 2-4 shows how the array days (from the above example) is indexed, as well as the values it contains and how to access each value. Table 2-4. Items in an array must be accessed using an index number that’s the equivalent to their place in the list minus 1 Index value Item To access item 0 Mon days[0] 1 Tues days[1] 2 Wed days[2] 3 Thurs days[3] 4 Fri days[4] 5 Sat days[5] 6 Sun days[6] You can change the value of an item in an array by assigning a new value to the index position. For example, to put a new value into the first item in the array days, you could write this: days[0] = 'Monday'; 62 javascript & jquery: the missing manual www.it-ebooks.info Arrays Because the index number of the last item in an array is always one less than the total number of items in an array, you only need to know how many items are in an array to access the last item. Fortunately, this is an easy task since every array has a length property, which contains the total number of items in the array. To access the length property, add a period followed by length after the array’s name: For example, days.length returns the number of items in the array named days (if you created a different array, playList, for example, you’d get its length like this: playList. length). So you can use this tricky bit of JavaScript to access the value stored in the last item in the array: days[days.length-1] This last snippet of code demonstrates that you don’t have to supply a literal number for an index (for example, the 0 in days[0]). You can also supply an equation that returns a valid number. In this case, days.length – 1 is a short equation: It first retrieves the number of items in the days array (that’s 7 in this example) and subtracts 1 from it. So, in this case, days[days.length-1] translates to days[6]. You can also use a variable containing a number as the index: var i = 0; alert(days[i]); The last line of code is the equivalent of alert(days[0]);. You’ll find this technique particularly useful when working with loops, as described in the next chapter (page 93). Adding Items to an Array Say you’ve created an array to track items that a user clicks on a web page. Each time the user clicks the page, an item is added to the array. JavaScript supplies several ways to add contents to an array. Adding an item to the end of an array To add an item to the end of an array, you can use the index notation from page 62, using an index value that’s one greater than the last item in the list. For example, say you’ve have created an array named properties: var properties = ['red', '14px', 'Arial']; At this point, the array has three items. Remember that the last item is accessed using an index that’s one less than the total number of items, so in this case, the last item in this array is properties[2]. To add another item, you could do this: properties[3] = 'bold'; This line of code inserts ‘bold’ into the fourth spot in the array, which creates an array with four elements: [‘red’, ‘14px’, ‘Arial’, ‘bold’]. Notice that when you add the new item, you use an index value that’s equal to the total number of elements currently in the array, so you can be sure you’re always adding an item to the end of an array by using the array’s length property as the index. For example, you can rewrite the last line of code like this: properties[properties.length] = 'bold'; chapter 2: the grammar of javascript www.it-ebooks.info 63 Arrays You can also use an array’s push() command, which adds whatever you supply between the parentheses to the end of the array. As with the length property, you apply push() by adding a period to the array’s name followed by push(). For example, here’s another way to add an item to the end of the properties array: properties.push('bold'); Whatever you supply inside the parentheses (in this example, the string ‘bold’) is added as a new item at the end of the array. You can use any type of value, like a string, number, Boolean, or even a variable. One advantage of the push() command is that it lets you add more than one item to the array. For example, say you want to add three values to the end of an array named properties, you could do that like this: properties.push('bold', 'italic', 'underlined'); Adding an item to the beginning of an array If you want to add an item to the beginning of an array, use the unshift() command. Here’s an example of adding the bold value to the beginning of the properties array: var properties = ['red', '14px', 'Arial']; properties.unshift('bold'); After this code runs, the array properties contains four elements: [‘bold’, ‘red’, ‘14px’, ‘Arial’]. As with push(), you can use unshift() to insert multiple items at the beginning of an array: properties.unshift('bold', 'italic', 'underlined'); Note: Make sure you use the name of the array followed by a period and the method you wish to use. In other words, push(‘new item’) won’t work. You must first use the array’s name (whatever name you gave the array when you created it) followed by a period, and then the method, like this: authors​ .push(‘Stephen King’);. Choosing how to add items to an array So far, this chapter has shown you three ways to add items to an array. Table 2-5 compares these techniques. Each of these commands accomplishes similar tasks, so the one you choose depends on the circumstances of your program. If the order that the items are stored in the array doesn’t matter, then any of these methods work. For example, say you have a page of product pictures, and clicking one picture adds the product to a shopping cart. You use an array to store the cart items. The order the items appear in the cart (or the array) doesn’t matter, so you can use any of these techniques. However, if you create an array that keeps track of the order in which something happens, then the method you choose does matter. For example, say you’ve created a page that lets visitors create a playlist of songs by clicking song names on the page. Since a playlist lists songs in the order they should be played, the order is important. 64 javascript & jquery: the missing manual www.it-ebooks.info Arrays So if each time the visitor clicks a song, the song’s name should go at the end of the playlist (so it will be the last song played), then use the push() method. Table 2-5. Various ways of adding elements to an array Method Original array Example code Resulting array .length property var p = [0,1,2,3] p[p.length]=4 [0,1,2,3,4] Adds one value to the end of an array. push() var p = [0,1,2,3] p.push(4,5,6) [0,1,2,3,4,5,6] Adds one or more items to the end of an array. unshift() var p = [0,1,2,3] p.unshift(4,5) [4,5,0,1,2,3] Adds one or more items to the beginning of an array. Explanation The push() and unshift() commands return a value. To be specific, once push() and unshift() complete their tasks, they supply the number of items that are in the array. Here’s an example: var p = [0,1,2,3]; var totalItems = p.push(4,5); After this code runs, the value stored in totalItems is 6, because there are six items in the p array. POWER USERS’ CLINIC Creating a Queue The methods used to add items to an array—push() and unshift()—and the methods used to remove items from an array—pop() and shift()—are often used together to provide a way of accessing items in the order they were created. A classic example is a musical playlist. You create the list by adding songs to it; then, as you play each song, it’s removed from the list. The songs are played in the order they appear in the list, so the first song is played and then removed from the list. This arrangement is similar to a line at the movies. When you arrive at the movie theater, you take your place at the end of the line; when the movie’s about to begin, the doors open and the first person in line is the first to get in. arrays and the push() and shift() commands. For example, say you had an array named playlist. To add a new song to the end of the list, you’d use push(), like this: playlist.push('Yellow Submarine'); To get the song that’s supposed to play next, you get the first item in the list like this: nowPlaying = playlist.shift(); This code removes the first item from the array and stores it in a variable named nowPlaying. The FIFO concept is useful for creating and managing queues such as a playlist, a to-do list, or a slideshow of images. In programming circles, this concept is called FIFO for “First In, First Out.” You can simulate this arrangement using chapter 2: the grammar of javascript www.it-ebooks.info 65 Tutorial: Writing to a Web Page Using Arrays Deleting Items from an Array If you want to remove an item from the end or beginning of an array, use the pop() or shift() commands. Both commands remove one item from the array: The pop() command removes the item from the end of the array, while shift() removes one item from the beginning. Table 2-6 compares the two methods. Table 2-6. Two ways of removing an item from an array Method Original array Example code Resulting array pop() var p = [0,1,2,3] p.pop() [0,1,2] Removes the last item from the array. shift() var p = [0,1,2,3] p.shift() [1,2,3] Removes the first item from the array. Explanation As with push() and unshift(), pop() and shift() return a value once they’ve completed their tasks of removing an item from an array. In fact, they return the value that they just removed. So, for example, this code removes a value and stores it in the variable removedItem: var p = [0,1,2,3]; var removedItem = p.pop(); The value of removedItem after this code runs is 3 and the array p now contains [0,1,2]. Note: This chapter’s files include a web page that lets you interactively test out the different array commands. It’s named array_methods.html and it’s in the testbed folder. Open the file in a web browser and click the various buttons on the web page to see how the array methods work. (By the way, all the cool interactivity of that page is thanks to JavaScript.) Tutorial: Writing to a Web Page Using Arrays You’ll use arrays in many of the scripts in this book, but to get a quick taste of creating and using arrays, try this short tutorial. Note: See the note on page 29 for information on how to download the tutorial files. 1. In a text editor, open the file arrays.html in the chapter02 folder. You’ll start by simply creating an array containing four strings. As with the previous tutorial, this file already contains This code comprises a single JavaScript statement, but it’s broken over five lines. To create it, type the first line—var authors = [ ‘Ernest Hemingway’,—hit Return, then press the Space bar until you line up under the ‘ (about 16 spaces), and then type ‘Charlotte Bronte’,. Note: Most HTML editors use a monospaced font like Courier or Courier New for your HTML and JavaScript code. In a monospaced font, each character is the same width as every other character, so it’s easy to line up columns (like all the author names in this example). If your text editor doesn’t use Courier or something similar, you may not be able to line up the names perfectly. As mentioned on page 61, when you create an array with lots of elements, you can make your code easier to read if you break it over several lines. You can tell it’s a single statement since there’s no semicolon until the end of line 5. This line of code creates an array named authors and stores the names of four authors (four string values) into the array. Next, you’ll access an element of the array. 3. Locate the second set of The first line starts a new paragraph with some text and an opening tag—just plain HTML. The next line prints the value stored in the first item of the authors array and prints the closing and

tags to create a complete HTML paragraph. To access the first item in an array, you use a 0 as the index—authors[0]—instead of 1. At this point, it’s a good idea to save your file and preview it in a web browser. You should see “The first author is Ernest Hemingway” printed on the screen. If you don’t, you may have made a typo when you created the array in either step 2 or 3. Note: Remember to use the error console in your browser (described on page 34) to help you locate the source of any JavaScript errors. chapter 2: the grammar of javascript www.it-ebooks.info 67 Tutorial: Writing to a Web Page Using Arrays 4. Return to your text editor and add these two lines of code below to your script: document.write('

The last author is '); document.write(authors[4] + '

'); This step is pretty much the same as the previous one, except that you’re printing a different array item. Save the page and preview it in a browser. You’ll see “undefined” in place of an author’s name (see Figure 2-6). Don’t worry; that’s intentional. Remember that an array’s index values begin at 0, so the last item is actually the total number of items in the array minus 1. In this case, there are four strings stored in the authors array, so that last item would actually be accessed with authors[3]. Note: If you try to read the value of an item using an index value that doesn’t exist, you’ll end up with the JavaScript “undefined” value. All that means is that there’s no value stored in that index position. Fortunately, there’s an easy technique for retrieving the last item in an array no matter how many items are stored in the array. Figure 2-6: If you try to access an array element that doesn’t exist, then you’ll end up with the value “undefined.” 68 javascript & jquery: the missing manual www.it-ebooks.info 5. Return to your text editor and edit the code you just entered. Erase the 4 and add the bolded code in its place: Tutorial: Writing to a Web Page Using Arrays document.write('

The last author is '); document.write(authors[authors.length-1] + '

'); As you’ll recall from “Adding Items to an Array,” an array’s length property stores the number of items in the array. So the total number of items in the authors array can be found with this code: authors.length. At this point in the script, that turns out to be 4. Knowing that the index value of the last item in an array is always 1 less than the total number of items in an array, you just subtract one from the total to get the index number of the last item: authors.length-1. You can provide that little equation as the index value when accessing the last item in an array: authors[authors.length-1]. You’ll finish up by adding one more item to the beginning of the array. 6. Add another line of code after the ones you added in step 5: authors.unshift('Stan Lee'); As you read on page 64, the unshift() method adds one or more items to the beginning of an array. After this line of code runs, the authors array will now be [‘Stan Lee’, ‘Ernest Hemingway’, ‘Charlotte Bronte’, ‘Dante Alighieri’, ‘Emily Dickinson’]. Finally, you’ll print out the newly added item on the page. 7. Add three more lines (bolded below) so that your final code looks like this: document.write('

The first author is '); document.write(authors[0] + '

'); document.write('

The last author is '); document.write(authors[authors.length-1] + '

'); authors.unshift('Stan Lee'); document.write('

I almost forgot '); document.write(authors[0]); document.write('

'); Save the file and preview it in a web browser. You should see something like Figure 2-7. If you don’t, remember that the error console in your web browser can help you locate the error (page 34). chapter 2: the grammar of javascript www.it-ebooks.info 69 A Quick Object Lesson Figure 2-7: OK, Stan Lee may not be your idea of a literary giant, but at least he’s helping you learn how arrays work. A Quick Object Lesson So far in this book, you’ve learned that you can write something to a web page with the document.write() command, and to determine how many items are in an array, you type the name of the array followed by a period and the word “length,” like so: days.length. You’re probably wondering what those periods are about. You’ve made it through three chapters without learning the particulars of this feature of JavaScript syntax, and it’s time to address them. You can conceptualize many of the elements of the JavaScript language, as well as elements of a web page, as objects. The real world, of course, is filled with objects too, such as a dog or a car. Most objects are made up of different parts: A dog has a tail, a head, and four legs; a car has doors, wheels, headlights, a horn; and so on. An object might also do something—a car can transport passengers, a dog can bark. In fact, even a part of an object can do something: For example, a tail can wag, and a horn can honk. Table 2-7 illustrates one way to show the relationships between objects, their parts, and actions. Table 2-7. A simplified view of the world Object Parts dog bark tail car wag transport horn 70 Actions javascript & jquery: the missing manual www.it-ebooks.info honk A Quick Object Lesson The world of JavaScript is also filled with objects: a browser window, a document, a string, a number, and a date are just a few examples. Like real-world objects, Java­ Script objects are also made up of different parts. In programming-speak, the parts of an object are called properties. The actions an object can perform are called methods, which are functions (like the built-in alert() function) that are specific to an object (see Table 2-8). Note: You can always tell a method from a property because methods end in parentheses: write(), ​ for example. Each object in JavaScript has its own set of properties and methods. For example, the array object has a property named length, and the document object has a method named write(). To access an object’s property or execute one of its methods, you use dot-syntax—those periods! The dot (period) connects the object with its property or method. For example, document.write() means “run the write() method of the document object.” If the real world worked like that, you’d have a dog wag his tail like this: dog.tail.wag(). (Of course, in the real world, a doggy treat works a lot better.) Table 2-8. Some methods and properties of two JavaScript objects: the document object and an array. Object Property document title Method url write() [‘Kate’,’Graham’,’Sam’] length push() pop() unshift() And just as you might own several dogs in the real world, your JavaScript programs can have multiple versions of the same kind of object. For example, say you create two simple variables like this: var first_name = 'Jack'; var last_name = 'Hearts'; You’ve actually created two different string objects. Strings have their own set of properties and methods, which are different from the methods and properties of other objects, like dates (you'll learn some of these properties and methods on page 450). When you create an object (also called creating an instance of that object), you can access all of the properties and methods for that object. chapter 2: the grammar of javascript www.it-ebooks.info 71 Comments Note: You’ve already encountered another object—called the window object—which represents the browser window itself. It’s basically the container object for a web page and everything else on the page. For example, alert() and prompt() are both methods of the window object and can be written like this: window.alert() and window.prompt(). However, since the window object is always present in a web page, you can leave its name out, so alert(‘hello’) and window.alert(‘hello’) do the same thing. Whenever you create a new variable and store a value into it, you’re really creating a new instance of a particular type of object. So each of these lines of JavaScript create different types of JavaScript objects: var first_name = 'Bob'; // a string object var age = 32; // a number object var valid = false; // a Boolean object In fact, when you change the type of information stored in a variable, you change the type of object it is as well. For example, if you create a variable named data that stores an array, then store a number in the variable, you’ve changed that variable’s type from an array to a number object: var data = false; // an Boolean object data = 32; //changes to number object The concepts of objects, properties, methods, and dot-syntax may seem a little weird at first glance. However, since they are fundamental parts of how JavaScript works, and integral to using jQuery as well, you’ll get used to them pretty quickly. Tip: JavaScript includes a special keyword for determining the type of an object (string, number, Boolean, and so on.) It’s called the typeof operator and is placed before a variable to determine the type of object inside that variable. For example: var data = 32; alert(typeof data); // "number" appears in alert window As you continue reading this book, keep these few facts in mind: • The world of JavaScript is populated with lots of different types of objects. • Each object has its own properties and methods. • You access an object’s property or activate an object’s method using dot-syntax: document.write(), for example. Comments There are times when you’re in the midst of programming and you feel like you understand everything that’s going on in your program. Every line of code makes sense, and better yet, it works! But a month or two later, when your boss or a client asks you to make a change or add a new feature to that cool script you wrote, you might find yourself scratching your head the moment you look at your once-familiar JavaScript: What’s that variable for? Why’d I program it like that? What’s going on in this section of the program? 72 javascript & jquery: the missing manual www.it-ebooks.info Comments It’s easy to forget how a program works and why you wrote your code the way you did. Fortunately, most programming languages provide a way for programmers to leave notes for themselves or other programmers who might look through their code. JavaScript lets you leave comments throughout your code. If you’ve used HTML or CSS comments, these should feel familiar. A comment is simply a line or more worth of notes: The JavaScript interpreter ignores them, but they can provide valuable information on how your program works. To create a single line comment, precede the comment with double forward slashes: // this is a comment You can also add a comment after a JavaScript statement: var price = 10; // set the initial cost of the widget The JavaScript interpreter executes everything on this line until it reaches the //, and then it skips to the beginning of the next line. You can also add several lines worth of comments by beginning the comments with /* and ending them with */. (These are the same type of comments CSS uses.) The ­JavaScript interpreter ignores all of the text between these two sets of symbols. For example, say you want to give a description of how a program works at the beginning of your code. You can do that like this: /* JavaScript Slideshow: This program automates the display of images in a pop-up window. */ You don’t need to leave the /* and */ on their own lines, either. In fact, you can create a single line JavaScript comment with them: /* this is a single line comment */ In general, if you want to just write a short, one-line comment, use //. For several lines of comments, use the /* and */ combination. When to Use Comments Comments are an invaluable tool for a program that’s moderately long or complex and that you want to keep using (and perhaps changing) in the future. While the simple scripts you’ve learned so far are only a line or two of code, you’ll eventually be creating longer and much more complex programs. To make sure you can quickly figure out what’s going on in a script, it’s a good idea to add comments to help you understand the overall logic of the program and to explain any particularly confusing or complex bits. Note: Adding lots of comments to a script makes the script larger (and slower to download). In general, the amount of comments you’ll add to a script won’t add significantly to the size of the file. But, if you want to squeeze every unnecessary byte out of your files, page 465 shows you ways to make JavaScript files smaller and faster. chapter 2: the grammar of javascript www.it-ebooks.info 73 Comments Many programmers add a block of comments at the beginning of an external Java­ Script file. These comments can explain what the script is supposed to do, identify the date the script was created, include a version number for frequently updated scripts, and provide copyright information. For example, at the beginning of the jQuery library’s JavaScript file, you’ll find this comment: /*! * jQuery JavaScript Library v1.6.3 * http://jquery.com/ * * Copyright 2011, John Resig * Dual licensed under the MIT or GPL Version 2 licenses. * http://jquery.org/license * * Includes Sizzle.js * http://sizzlejs.com/ * Copyright 2011, The Dojo Foundation * Released under the MIT, BSD, and GPL Licenses. * * Date: Wed Aug 31 10:35:15 2011 -0400 */ At the beginning of the script, you might also include instructions on how to use the script: variables that might need to be set, anything special you might need to do to your HTML to make the script work, and so on. You should also add a comment before a series of complex programming steps. For example, say you write a script that animates an image across a visitor’s browser window. One part of that script is determining the image’s current position in the browser window. This can take several lines of programming; it’s a good idea to place a comment before that section of the program, so when you look at the script later, you’ll know exactly what that part of the program does: // determine x and y positions of image in window The basic rule of thumb is to add comments anywhere you’ll find them helpful later. If a line of code is painfully obvious, you probably don’t need a comment. For example, there’s no reason to add a comment for simple code like alert(‘hello’), because it’s pretty obvious what it does (opens an alert box with the word “hello” in it). Comments in This Book Comments are also very helpful when explaining JavaScript. In this book, comments frequently explain what a line of programming does or indicate the results of a particular statement. For example, you might see a comment like the following to show the results of an alert statement: var a = 'Bob'; var b = 'Smith'; alert( a + ' ' + b); // 'Bob Smith'; 74 javascript & jquery: the missing manual www.it-ebooks.info Comments The third line ends with a comment that indicates what you should see when you preview this code in a web browser. If you want to test the code that you read in this book by adding it to a web page and viewing it in a web browser, you can leave out comments like these when typing the code into a web page. These types of comments are intended simply to help you understand what’s happening in the code as you read along with the book. Likewise, as you start to learn some of the more complex commands available in JavaScript, you’ll begin to manipulate the data in variables. You’ll often see comments in this book’s code to display what should be stored in the variable after the command is run. For example, the charAt() command lets you select a character at a specific point in a string. When you read about how to use that command in this book, you might see code like this: var x = "Now is the time for all good programmers."; alert(x.charAt(2)); // 'w' The comment // ‘w’ that appears at the end of the second line indicates what you should see in an alert dialog box if this code were actually run in a web browser. (And, yes, ‘w’ is correct. When counting the letters in a string, the first letter is counted as character 0. So charAt(2) retrieves the third character from the string. Sometimes programming just hurts your brain.) chapter 2: the grammar of javascript www.it-ebooks.info 75 www.it-ebooks.info chapter 3 Adding Logic and Control to Your Programs S o far you’ve learned about some of JavaScript’s basic building blocks. But simply creating a variable and storing a string or number in it doesn’t accomplish much. And building an array with a long list of items won’t be very useful unless there’s an easy way to work your way through the items in the array. In this chapter, you’ll learn how to make your programs react intelligently and work more efficiently by using conditional statements, loops, and functions. Making Programs React Intelligently Our lives are filled with choices: “What should I wear today?”, “What should I eat for lunch?”, “What should I do Friday night?”, and so on. Many choices you make depend on other circumstances. For example, say you decide you want to go to the movies on Friday night. You’ll probably ask yourself a bunch of questions like “Are there any good movies out?”, “Is there a movie playing at the right time?”, “Do I have enough money to go to the movies (and buy a $17 bag of popcorn)?” Suppose there is a movie that’s playing at just the time you want to go. You then ask yourself a simple question: “Do I have enough money?” If the answer is yes, you’ll head out to the movie. If the answer is no, you won’t go. But on another Friday, you do have enough money, so you go to the movies. This scenario is just a simple example of how the circumstances around us affect the decisions we make. JavaScript has the same kind of decision-making feature called conditional statements. At its most basic, a conditional statement is a simple yes or no question. If the answer to the question is yes, your program does one thing; if the answer is no, it does something else. Conditional statements are one of the most important programming concepts: They let your programs react to different situations and behave 77 www.it-ebooks.info Making Programs React Intelligently intelligently. You’ll use them countless times in your programming, but just to get a clear picture of their usefulness, here are a few examples of how they can come in handy: • Form validation. When you want to make sure someone filled out all of the required fields in a form (“Name,” “Address,” “Email,” and so on), you’ll use conditional statements. For example, if the Name field is empty, don’t submit the form. • Drag and drop. If you add the ability to drag elements around your web page, you might want to check where the visitor drops the element on the page. For example, if he drops a picture onto an image of a trash can, you make the photo disappear from the page. • Evaluating input. Suppose you pop-up a window to ask a visitor a question like, “Would you like to answer a few questions about how great this website is?” You’ll want your script to react differently depending on how the visitor answers the question. Figure 3-1 shows an example of an application that uses conditional statements. Figure 3-1: It takes a lot of work to have fun. A JavaScript-based game like Solitaire (http:// worldofsolitaire .com) demonstrates how a program has to react differently based on the conditions of the program. For example, when a player drags and drops a card, the program has to decide if the player dropped the card in a valid location or not, and then perform different actions in each case. 78 javascript & jquery: the missing manual www.it-ebooks.info Making Programs React Intelligently Conditional Statement Basics Conditional statements are also called “if/then” statements, because they perform a task only if the answer to a question is true: “If I have enough money, then I’ll go to the movies.” The basic structure of a conditional statement looks like this: if ( condition ) { // some action happens here } There are three parts to the statement: if indicates that the programming that follows is a conditional statement; the parentheses enclose the yes or no question, called the condition (more on that in a moment); and the curly braces ({ }) mark the beginning and end of the JavaScript code that should execute if the condition is true. Note: In the code listed above, the “// some action happens here” is a JavaScript comment. It’s not code that actually runs; it’s just a note left in the program, and, in this case, points out to you, the reader, what’s supposed to go in that part of the code. See page 72 for more on comments. In many cases, the condition is a comparison between two values. For example, say you create a game that the player wins when the score is over 100. In this program, you’ll need a variable to track the player’s score and, at some point, you need to check to see if that score is more than 100 points. In JavaScript, the code to check if the player won could look like this: if (score > 100) { alert('You won!'); } The important part is score > 100. That phrase is the condition, and it simply tests whether the value stored in the score variable is greater than 100. If it is, then a “You won!” dialog box appears; if the player’s score is less than or equal to 100, then the JavaScript interpreter skips the alert and moves onto the next part of the program. Figure 3-2 provides a visualization of this process. score > 100 yes no Figure 3-2: With a basic conditional statement, the code inside the braces only runs if the condition is true. If the condition is false, that code is skipped and the program continues. alert('You won!'); program continues chapter 3: adding logic and control to your programs www.it-ebooks.info 79 Making Programs React Intelligently In addition to > (greater than), there are several other operators used to compare numbers (see Table 3-1). Tip: Type two spaces (or press the Tab key once) before each line of JavaScript code contained within a pair of braces. The spaces (or tab) indent those lines and make it easier to see the beginning and ending brace, and to figure out what code belongs inside the conditional statement. Two spaces is a common technique, but if four spaces make your code easier for you to read, then use four spaces. The examples in this book always indent code inside braces. Table 3-1. Use these comparison operators to test values as part of a conditional statement Comparison operator What it means == Equal to. Compares two values to see if they’re the same. Can be used to compare numbers or strings. != Not equal to. Compares two values to see if they’re not the same. Can be used to compare numbers or strings. === Strict equal to. Compares not only the values but also the type of the value. In other words, the two values must also share the same type—string, number, or Boolean—in order for the condition to be true. For example, while ‘2’==2 is true, ‘2’ = = = 2 is not true, because the first value is inside quote marks (a string) and the second is a number. You should be careful with this operator, since values in forms—even numbers—are always strings, so using strict equality to compare a number retrieved from a form field to a number using strict equality (‘2’ = = = 2) will be false. != = Strict not equal to. Like strict equal to compare values and type. For example, while ‘2’ != 2 is false, ‘2’ != = 2 is true, because although the values are the same, the types are not. > Greater than. Compares two numbers and checks if the number on the left side is greater than the number on the right. For example, 2 > 1 is true, since 2 is a bigger number than 1, but 2 > 3 is false, since 2 isn’t bigger than 3. < Less than. Compares two numbers and checks if the number on the left side is less than the number on the right. For example, 2 < 3 is true, since 2 is a smaller number than 3, but 2 < 1 is false, since 2 isn’t less than 1. >= Greater than or equal to. Compares two numbers and checks if the number on the left side is greater than or the same value as the number on the right. For example, 2 >= 2 is true, since 2 is the same as 2, but 2 >= 3 is false, since 2 isn’t a bigger number 3, nor is it equal to 3. <= Less than or equal to. Compares two numbers and checks if the number on the left side is less than or the same value as the number on the right. For example, 2 <= 2 is true, since 2 is the same as 2, but 2 <= 1 is false, since 2 isn’t a smaller number than 1, nor is 2 equal to 1. More frequently, you’ll test to see if two values are equal or not. For example, say you create a JavaScript-based quiz, and one of the questions asks, “How many moons does Saturn have?” The person’s answer is stored in a variable named answer. You might then write a conditional statement like this: 80 javascript & jquery: the missing manual www.it-ebooks.info Making Programs React Intelligently if (answer == 31) { alert('Correct. Saturn has 31 moons.'); } The double set of equal signs (==) isn’t a typo; it instructs the JavaScript interpreter to compare two values and decide whether they’re equal. As you learned in the last chapter, in JavaScript, a single equal sign is the assignment operator that you use to store a value into a variable: var score = 0; //stores 0 into the variable score Because the JavaScript interpreter already assigns a special meaning to a single equal sign, you need to use two equal signs whenever you want to compare two values to determine if they’re equal or not. You can also use the == (called the equality operator) to check to see if two strings are the same. For example, say you let the user type a color into a form, and if he types red, then you change the background color of the page to red. You could use the conditional operator for that: if (enteredColor == 'red') { document.body.style.backgroundColor='red'; } Note: In the code above, don’t worry right now about how the page color is changed. You’ll learn how to dynamically control CSS properties using JavaScript on page 143. You can also test to see if two values aren’t the same using the inequality operator: if (answer != 31) { alert("Wrong! That's not how many moons Saturn has."); } The exclamation mark translates to “not”, so != means “not equal to.” In this example, if the value stored in answer is not 31, then the poor test taker would see the insulting alert message. The code that runs if the condition is true isn’t limited to just a single line of code as in the previous examples. You can have as many lines of JavaScript between the opening and closing curly braces as you’d like. For example, as part of the JavaScript quiz example, you might keep a running tally of how many correct answers the testtaker gets. So, when the Saturn question is answered correctly, you also want to add 1 to the test-taker’s total. You would do that as part of the conditional statement: if (answer == 31) { alert('Correct. Saturn has 31 moons.'); numCorrect += 1; } Note: As described on page 54, the line of code above—numCorrect += 1—simply adds 1 to the value currently in the variable numCorrect. chapter 3: adding logic and control to your programs www.it-ebooks.info 81 Making Programs React Intelligently And you could add additional lines of JavaScript code between the braces as well— any code that should run if the condition is true. Adding a Backup Plan But what if the condition is false? The basic conditional statement in the previous section doesn’t have a backup plan for a condition that turns out to be false. In the real world, as you’re deciding what to do Friday night and you don’t have enough money for the movies, you’d want to do something else. An if statement has its own kind of backup plan, called an else clause. For example, say as part of the JavaScript testing script, you want to notify the test-taker if he gets the answer right, or if he gets it wrong. Here’s how you can do that: POWER USERS’ CLINIC The Return of the Boolean On page 44, you learned about the Boolean values—true and false. Booleans may not seem very useful at first, but you’ll find out they’re essential when you start using conditional statements. In fact, since a condition is really just a yes or no question, the answer to that question is a Boolean value. For example, check out the following code: var x = 4; if ( x == 4 ) { //do something } The first line of code stores the number 4 into the variable x. The condition on the next line is a simple question: Is the value stored in x equal to 4? In this case, it is, so the JavaScript between the curly braces runs. But here’s what really happens in between the parentheses: The JavaScript interpreter converts the condition into a Boolean value; in programming-speak, the interpreter evaluates the condition. If the condition evaluates to true (meaning the answer to the question is yes), then the code between the braces runs. However, if the condition evaluates to false, then the code in the braces is skipped. example, when validating a form full of visitor-submitted information, you might start by creating a valid variable with a Boolean value of true—this means you’re assuming, at first, that they filled out the form correctly. Then, you’d run through each form field, and if any field is missing information or has the wrong type of information, you change the value in valid to false. After checking all of the form fields, you test what’s stored in valid, and if it’s still true, you submit the form. If it’s not true (meaning one or more form fields were left blank), you display some error messages and prevent the form from submitting: var valid = true; // lot of other programming gunk happens in here // if a field has a problem then you set valid to false if (valid) { //submit form } else { //print lots of error messages } One common use of Booleans is to create what’s called a flag—a variable that marks whether something is true. For 82 javascript & jquery: the missing manual www.it-ebooks.info Making Programs React Intelligently if (answer == 31) { alert('Correct. Saturn has 31 moons.'); numCorrect = numCorrect + 1; } else { alert("Wrong! That's not how many moons Saturn has."); } This code sets up an either/or situation; only one of the two messages will appear (see Figure 3-3). If the number 31 is stored in the variable answer, then the “correct” alert appears; otherwise, the “wrong” alert appears. To create an else clause, just add “else” after the closing brace for the conditional statement followed by another pair of braces. You add the code that should execute if the condition turns out to be false in between the braces. Again, you can have as many lines of code as you’d like as part of the else clause. answer==31 yes no alert('Correct.'); alert('Wrong!'); numCorrect += 1; Figure 3-3: When using an if else condition, you include two sets of code, but only one set will ever run. If the condition is true, then the code in the braces immediately following the condition runs (left); however, of the condition is false, then the code in the braces following the “else” runs (right). program continues Testing More Than One Condition Sometimes you’ll want to test several conditions and have several possible outcomes: Think of it like a game show where the host says, “Would you like the prize behind door #1, door #2, or door #3?” You can only pick one. In your day-to-day activities, you also are often faced with multiple choices like this one. For example, return to the “What should I do Friday night?” question. You could expand your entertainment options based on how much money you have and are willing to spend. For example, you could start off by saying, “If I have more than $50, I’ll go out to a nice dinner and a movie (and have some popcorn too).” If you don’t have $50, you might try another test: “If I have $35 or more, I’ll go to a nice dinner.” If you don’t have $35, then you’d say, “If I have $12 or more, I’ll go to the movies.” And finally, if you don’t have $12, you might say, “Then I’ll just stay at home and watch TV.” What a Friday night! chapter 3: adding logic and control to your programs www.it-ebooks.info 83 Making Programs React Intelligently JavaScript lets you perform the same kind of cascading logic using else if statements. It works like this: You start with an if statement, which is option number 1; you then add one or more else if statements to provide additional questions that can trigger additional options; and finally, you use the else clause as the fallback position. Here’s the basic structure in JavaScript: if (condition) { // door #1 } else if (condition2) { // door #2 } else { // door #3 } This structure is all you need to create a JavaScript “Friday night planner” program. It asks visitors how much money they have, and then determines what they should do on Friday (sound familiar?). You can use the prompt() command that you learned about on page 57 to collect the visitor’s response and a series of if/else if statements to determine what he should do: var fridayCash = prompt('How much money can you spend?', ''); if (fridayCash >= 50) { alert('You should go out to a dinner and a movie.'); } else if (fridayCash >= 35) { alert('You should go out to a fine meal.'); } else if (fridayCash >= 12) { alert('You should go see a movie.'); } else { alert('Looks like you will be watching TV.'); } Here’s how this program breaks down step-by-step: The first line opens a prompt dialog box asking the visitor how much he can spend. Whatever the visitor types is stored in a variable named fridayCash. The next line is a test: Is the value the visitor typed 50 or more? If the answer is yes, then an alert appears, telling him to go get a meal and see a movie. At this point, the entire conditional statement is done. The JavaScript interpreter skips the next else if statement, the following else if statement, and the final else clause. With a conditional statement, only one of the outcomes can happen, so once the JavaScript interpreter encounters a condition that evaluates to true, it runs the JavaScript code between the braces for that condition and skips everything else within the conditional statement (see Figure 3-4). 84 javascript & jquery: the missing manual www.it-ebooks.info Making Programs React Intelligently Figure 3-4: With a basic conditional statement, the code inside the braces only runs if the condition is true. If the condition is false, that code is skipped and the program continues fridayCash >= 50 yes no alert('You should go out to a dinner and a movie.'); fridayCash >= 35 yes no alert('You should go out to a fine meal.'); fridayCash >= 12 yes alert('You should go see a movie.'); no alert('Looks like you'll be watching TV.); program continues Suppose the visitor typed 25. The first condition, in this case, wouldn’t be true, since 25 is a smaller number than 50. So the JavaScript interpreter skips the code within the braces for that first condition and continues to the else if statement: “Is 25 greater than or equal to 35?” Since the answer is no, it skips the code associated with that condition and encounters the next else if. At this point, the condition asks if 25 is greater than or equal to 12; the answer is yes, so an alert box with the message, “You should go see a movie” appears and the program ends, skipping the final else clause. Tip: There’s another way to create a series of conditional statements that all test the same variable, as in the fridayCash example. Switch statements do the same thing, and you’ll learn about them on page 462. chapter 3: adding logic and control to your programs www.it-ebooks.info 85 Making Programs React Intelligently More Complex Conditions When you’re dealing with many different variables, you’ll often need even more complex conditional statements. For example, when validating a required email address field in a form, you’ll want to make sure both that the field isn’t empty and that the field contains an email address (and not just random typed letters). Fortunately, JavaScript lets you do these kinds of checks as well. Making sure more than one condition is true You’ll often need to make decisions based on a combination of factors. For example, you may only want to go to a movie if you have enough money and there’s a movie you want to see. In this case, you’ll go only if two conditions are true; if either one is false, then you won’t go to the movie. In JavaScript, you can combine conditions using what’s called the logical AND operator, which is represented by two ampersands (&&). You can use it between the two conditions within a single conditional statement. For example, if you want to check if a number is between 1 and 10, you can do this: if (a < 10 && a > 1) { //the value in a is between 1 and 10 alert("The value " + a + " is between 1 and 10"); } In this example, there are two conditions: a < 10 asks if the value stored in the variable a is less than 10; the second condition, a > 1, is the same as “Is the value in a greater than 1?” The JavaScript contained between the braces will run only if both conditions are true. So if the variable a has the number 0 stored in it, the first condition (a < 10) is true (0 is less than 10), but the second condition is false (0 is not greater than 1). You’re not limited to just two conditions. You can connect as many conditions as you need with the && operator: if (b>0 && a>0 && c>0) { // all three variables are greater than 0 } This code checks three variables to make sure all three have a value greater than 0. If just one has a value of 0 or less, then the code between the braces won’t run. Making sure at least one condition is true Other times you’ll want to check a series of conditions, but you only need one to be true. For example, say you’ve added a keyboard control for visitors to jump from picture to picture in a photo gallery. When the visitor presses the N key, the next photo appears. In this case, you want her to go to the next picture when she types either n (lowercase), or if she has the Caps Lock key pressed, N (uppercase). You’re looking for a kind of either/or logic: Either this key or that key was pressed. The logical OR operator, represented by two pipe characters (||), comes in handy: if (key == 'n' || key == 'N') { //move to the next photo } 86 javascript & jquery: the missing manual www.it-ebooks.info Making Programs React Intelligently Note: To type a pipe character, press Shift-\. The key that types both backslashes and pipe characters is usually located just above the Return key. With the OR operator, only one condition needs to be true for the JavaScript that follows between the braces to run. As with the AND operator, you can compare more than two conditions. For example, say you’ve created a JavaScript racing game. The player has a limited amount of time, a limited amount of gas, and a limited number of cars (each time he crashes, he loses one car). To make the game more challenging, you want it to come to an end when any of these three things runs out: if (gas <= 0 || time <= 0 || cars <= 0) { //game is over } When testing multiple conditions, it’s sometimes difficult to figure out the logic of the conditional statement. Some programmers group each condition in a set of parentheses to make the logic easier to grasp: if ((key == 'n') || (key == 'N')) { //move to the next photo } To read this code, simply treat each grouping as a separate test; the results of the operation between parentheses will always turn out to be either true or false. Negating a condition If you’re a Superman fan, you probably know about Bizarro, an anti-hero who lived on a cubical planet named Htrae (Earth spelled backwards), had a uniform with a backwards S, and was generally the opposite of Superman in every way. When Bizarro said “Yes,” he really meant “No,” and when he said “No,” he really meant “Yes.” JavaScript programming has an equivalent type of character called the NOT operator, which is represented by an exclamation mark (!). You’ve already seen the NOT operator used along with the equal sign to indicate “not equal to”: !=. But the NOT operator can be used by itself to completely reverse the results of a conditional statement; in other words, it can make false mean true, and true mean false. You use the NOT operator when you want to run some code based on a negative condition. For example, say you’ve created a variable named valid that contains a Boolean value of either true or false (see the box on page 82). You use this variable to track whether a visitor correctly filled out a form. When the visitor tries to submit the form, your JavaScript checks each form field to make sure it passes the requirements you set up (for example, the field can’t be empty and it has to have an email address in it). If there’s a problem, like the field is empty, you could then set valid to false (valid = false). Now if you want to do something like print out an error and prevent the form from being submitted, you can write a conditional statement like this: chapter 3: adding logic and control to your programs www.it-ebooks.info 87 Making Programs React Intelligently if (! valid) { //print errors and don't submit form } The condition ! valid can be translated as “if not valid,” which means if valid is false, then the condition is true. To figure out the results of a condition that uses the NOT operator, just evaluate the condition without the NOT operator, then reverse it. In other words, if the condition results to true, the ! operator changes it to false, so the conditional statement doesn’t run. As you can see, the NOT operator is very simple to understand (translated from Bizarro-speak: It’s very confusing, but if you use it long enough, you’ll get used to it). Nesting Conditional Statements In large part, computer programming entails making decisions based on information the visitor has supplied or on current conditions inside a program. The more decisions a program makes, the more possible outcomes and the “smarter” the program seems. In fact, you might find you need to make further decisions after you’ve gone through one conditional statement. Suppose, in the “What to do on Friday night?” example, you want to expand the program to include every night of the week. In that case, you need to first determine what day of the week it is, and then figure out what to do on that day. So you might have a conditional statement asking if it’s Friday, and if it is, you’d have another series of conditional statements to determine what to do on that day: if (dayOfWeek == 'Friday') { var fridayCash = prompt('How much money can you spend?', ''); if (fridayCash >= 50) { alert('You should go out to a dinner and a movie.'); } else if (fridayCash >= 35) { alert('You should go out to a fine meal.'); } else if (fridayCash >= 12) { alert('You should go see a movie.'); } else { alert('Looks like you will be watching TV.'); } } In this example, the first condition asks if the value stored in the variable dayOfWeek is the string ‘Friday’. If the answer is yes, then a prompt dialog box appears, gets some information from the visitor, and another conditional statement is run. In other words, the first condition (dayOfWeek == ‘Friday’) is the doorway to another series of conditional statements. However, if dayOfWeek isn’t ‘Friday’, then the condition is false and the nested conditional statements are skipped. Tips for Writing Conditional Statements The example of a nested conditional statement in the last section may look a little scary. There are lots of (), {}, elses, and ifs. And if you happen to mistype one of the 88 javascript & jquery: the missing manual www.it-ebooks.info crucial pieces of a conditional statement, your script won’t work. There are a few things you can do as you type your JavaScript that can make it easier to work with conditional statements. Tutorial: Using Conditional Statements • Type both of the curly braces before you type the code inside them. One of the most common mistakes programmers make is forgetting to add a final brace to a conditional statement. To avoid this mistake, type the condition and the braces first, then type the JavaScript code that executes when the condition is true. For example, start a conditional like this: if (dayOfWeek=='Friday') { } In other words, type the if clause and the first brace, hit Return twice, and then type the last brace. Now that the basic syntax is correct, you can click in the empty line between the braces and add JavaScript. • Indent code within braces. You can better visualize the structure of a conditional statement if you indent all of the JavaScript between a pair of braces: if (a < 10 && a > 1) { alert("The value " + a + " is between 1 and 10"); } By using several spaces (or pressing the Tab key) to indent lines within braces, it’s easier to identify which code will run as part of the conditional statement. If you have nested conditional statements, indent each nested statement: if (a < 10 && a > 1) { //first level indenting for first conditional alert("The value " + a + " is between 1 and 10"); if (a==5) { //second level indenting for 2nd conditional alert(a + " is half of ten."); } } • Use == for comparing equals. When checking whether two values are equal, don’t forget to use the equality operator, like this: if (name == 'Bob') { A common mistake is to use a single equal sign, like this: if (name = 'Bob') { A single equal sign stores a value into a variable, so in this case, the string “Bob” would be stored in the variable name. The JavaScript interpreter treats this step as true, so the code following the condition will always run. Tutorial: Using Conditional Statements Conditional statements will become part of your day-to-day JavaScript toolkit. In this tutorial, you’ll try out conditional statements to control how a script runs. Note: See the note on page 29 for information on how to download the tutorial files. chapter 3: adding logic and control to your programs www.it-ebooks.info 89 Tutorial: Using Conditional Statements 1. In a text editor, open the file conditional.html in the chapter03 folder. You’ll start by simply prompting the visitor for a number. This file already contains This line of code opens a JavaScript prompt dialog box, asks a question, and stores whatever the visitor typed into the luckyNumber variable. Next, you’ll add a conditional statement to check what the visitor typed into the prompt dialog box. 3. Locate the second set of Here’s the beginning of the conditional statement; it simply checks to see if the visitor typed 7. 4. Press Return twice and type the closing brace, so that the code looks like this: The closing brace ends the conditional statement. Any JavaScript you add between the two braces will only run if the condition is true. Note: As mentioned on page 89, it’s a good idea to add the closing brace before writing the code that runs as part of the conditional statement. 5. Click into the empty line above the closing brace. Hit the Space bar twice and type: document.write("

Hey, 7 is my lucky number too!

"); The two spaces before the code indent the line so you can easily see that this code is part of the conditional statement. The actual JavaScript here should feel familiar by now—it simply writes a message to the page. 6. Save the file and preview it in a web browser. Type 7 when the prompt dialog box appears. You should see the message “Hey, 7 is my lucky number too!” below the headline when the page loads. If you don’t, go over your code and make sure you typed it correctly (see page 34 for tips on dealing with a broken script). Reload the page, but this time type a different number. This time, nothing appears underneath the headline. You’ll add an else clause to print another message. 90 javascript & jquery: the missing manual www.it-ebooks.info Tutorial: Using Conditional Statements Note: Why two sets of script tags? When using the document.write() method to add content to a page, you have to place the document.write() code in the exact position on the page you want the message to appear—in this case, in the body below the