Most of us are familiar with to-do lists. New tasks are placed at the bottom of the list and eventually move to the top when all the other tasks ahead of it are com-pleted and removed from the list. An array can be used as a to-do list. Here’s how:
var ToDoList = new Array()
ToDoList[0] = "Book the Waldorf for your birthday party."
ToDoList[1] = "Give the Donald a call and invite him to your party."
ToDoList[2] = "Leave word at the White House
that you won't be available for dinner."
Suppose that you have booked the Waldorf, so you need to remove the fi rst task from the list. You do this by calling the shift() method of the array object. The shift() method removes and returns the fi rst element of the array and then moves the other tasks up on the list. Here’s how to call the shift() method:
var task = ToDoList.shift()
Here’s the ToDoList array after the shift() method is called:
ToDoList[0] = "Give the Donald a call and invite him to your party."
ToDoList[1] = "Leave word at the White House
that you won't be available for dinner."
You call the push() method of the array object to place a new task at the end of the to-do list. You place the task that you want placed on the to-do list between the parentheses of the push() method, as shown here:
ToDoList.push("Wake up from your dream.")
The push() method creates a new element at the end of the array and assigns the value that you place between the parentheses of the new element. Here’s what the array looks like after calling the push() method:
ToDoList[0] = "Give the Donald a call and invite him to your party."
ToDoList[1] = "Leave word at the White House
that you won't be available for dinner."
ToDoList[2] = "Wake up from your dream."
There are times when we feel like working from the bottom of our to-do list, starting with the last task and working our way back to the fi rst task. This is easily
ch04.indd 90
ch04.indd 90 4/26/2005 9:24:52 AM4/26/2005 9:24:52 AM
done using an array by using the reverse() method to reverse the order of val-ues in the array. Here’s how you call the reverse() method:
ToDoList.reverse()
And here’s how the ToDoList array looks after the reverse() method is called:
ToDoList[0] = "Wake up from your dream."
ToDoList[1] = "Leave word at the White House
that you won't be available for dinner."
ToDoList[2] = "Give the Donald a call and invite him to your party."
Some of us prefer to jump to the last task rather than work our way through a long list of things to do. This, too, can be accomplished with an array by using the pop() method. The pop() method returns and removes the last element of the array. Here’s how this is done:
var task = ToDoList.pop()
Here’s the array after the pop() method is called:
ToDoList[0] = "Wake up from your dream."
ToDoList[1] = "Leave word at the White House
that you won't be available for dinner."
Looking Ahead
In this chapter, you learned how to group together values by using an array. An ar-ray has a name and one or more elements. Elements are used similarly to how variables are used in a JavaScript. Each element is identifi ed by an index. The fi rst element is index 0, the second element is index 1, and so on.
A value can be assigned to an element in two ways: by placing values between the parentheses of the Array() constructor when the array is declared or by using the assignment operator in a JavaScript statement.
You can determine the number of elements in an array by using the length property of the array object. The length property is accessed by specifying the name of the array followed by a dot and the word length.
You can access the value of an element by specifying the name of the array fol-lowed by the index of the element within square brackets. If you need to access all elements of the array, then use a for loop. The initializer of a for loop (see Chapter 3) is used as the index for the array elements.
ch04.indd 91
ch04.indd 91 4/26/2005 9:24:52 AM4/26/2005 9:24:52 AM
The array object has several methods that you can use to manipulate elements of the array. For example, the sort() method places elements in sorted order. The slice() method takes a sequence of elements and uses them to create a new ar-ray. The concat() method and join() method transform elements into a string.
And you can remove, insert, and reorganize elements by using the shift(), push(), reverse(), and pop() methods.
You now have a good working knowledge of how to store and use information within a JavaScript. In the next chapter, you’ll use this knowledge to create sophis-ticated forms that are used to retrieve and display information on the user’s screen.
Quiz
1. True or False. This is the fi rst element of the products array:
products[1].
a. True b. False
2. How many elements are there in this array?
Products = new Array('Soda','Beer','Pizza') a. 2
b. 3 c. 4 d. None
3. What method would you use to create a string from array elements and separate those elements with a hyphen?
a. shift() b. join() c. concat() d. strjoin()
4. What method is used to remove an element from the bottom of an array?
a. push() b. pop() c. reverse() d. shift()
ch04.indd 92
ch04.indd 92 4/26/2005 9:24:52 AM4/26/2005 9:24:52 AM
5. What method is used to remove the fi rst element from an array?
a. push() b. pop() c. reverse() d. shift()
6. What method is used to place a new element at the end of an array?
a. push() b. pop() c. reverse() d. shift()
7. True or False. The sort() method only places text in sorted order?
a. True b. False
8. True or False. The length of an array is equal to the index of the last element of the array.
a. True b. False
9. True or False. An array element can be used the same way as a variable is used in a JavaScript.
a. True b. False
10. What method is used to create a new array using elements of another array?
a. slice() b. div() c. splice() d. shift()
ch04.indd 93
ch04.indd 93 4/26/2005 9:24:53 AM4/26/2005 9:24:53 AM
ch04.indd 94
ch04.indd 94 4/26/2005 9:24:53 AM4/26/2005 9:24:53 AM
95
CHAPTER
Functions
When you order a pizza, you simply say, “Pizza, please,” and the chef performs all the tasks that are necessary to make your pizza. You don’t have to perform those tasks; you simply use words the chef equates with steps to make a pizza. The chef delivers the completed pizza, and you get to enjoy it.
Throughout this book, you’ll learn to use words that tell the browser to perform tasks that interact with a web page; like a chef, the browser performs these tasks so you don’t have to. Then the browser delivers the goods. You’ll recall that when the browser sees the words document.write() in a JavaScript, the browser performs tasks necessary to display something on the screen. You don’t concern yourself with those tasks, because the browser knows how to perform them. You simply need to know the proper words to include in your JavaScript to cause the browser to display something on the screen or perform some task.
It would be great if you could defi ne your own words to have the browser per-form your own specifi c tasks. Imagine that you could defi ne the words Increase Salary as a series of tasks to give you a raise—every time the browser sees these words, the browser gives you a pay raise. Though even a well-written JavaScript probably can’t get you a raise, you can defi ne your own words to tell the browser
ch05.indd 95
ch05.indd 95 4/26/2005 9:35:41 AM4/26/2005 9:35:41 AM
Copyright © 2005 by The McGraw-Hill Companies, Inc. Click here for terms of use.
what to do. This is called defi ning a function. You’ll learn how to defi ne a function and tell the browser to use the function in this chapter.