This chapter is from the book
This chapter is from the book
This chapter is from the book
Lesson 15: An Introduction to Arrays
Let's return to Lesson 12. When you used any one of the getSomething() date or time methods, a number representing the Date object property was returned. In some cases, such as the hour and day of the month, that's fine, but for other Date returns it isn't so good. Take getDay(), for example. As you probably thought, it's not very helpful to have the days of the week returned as 0, 1, 2, 3, 4, 5, or 6.
The best approach is to take the number that's returned and change it into text. That makes more sense and is easier to read.
Here's how:
<SCRIPT LANGUAGE="JavaScript">
var dayName=new Array("Sunday","Monday","Tuesday",
"Wednesday","Thursday","Friday","Saturday")
var y=new Date();
document.write("Today is "+dayName[y.getDay()] + ".");
</SCRIPT>
Click Here!
Figure 3.7 shows the result of this script. You can also see this effect on your computer by clicking Lesson Fifteen Script's Effect, or see it online at http://www.htmlgoodies.com/JSBook/lesson15effect.html.
){kind=link}
Figure 3.7 The function displays the day of the week.
Deconstructing the Script
Let's start with the same rule that started Lesson 12:
JavaScript starts counting at 0.
That's why the month number is always returned one less than what the month actually is. JavaScript starts counting January at 0.
For this lesson, we'll add to the preceding rule:
JavaScript counts everything you give it and always starts counting at 0.
If you offer JavaScript a list of simple text items, such as a number of names or words (known in JavaScript as literals), the script will assign numbers to the items in that list. Guess what number it assigns to the first item? That's right: 0.
So let's give JavaScript a long list of things—the days of the week. But like everything else, you can't just throw a bunch of words in a script and hope the browser picks up what you mean. There is a method to offering a long list of items, such as the days of the week.
It's called creating an array.
Setting Up the Array
Here's the array line from the sample script:
var dayName=new Array("Sunday","Monday","Tuesday",
"Wednesday","Thursday","Friday","Saturday")
The format for creating an array is pretty simple:
You assign the array of literals a variable name. In this case, I called the array dayName.
You tell the browser that this is a new array by writing new Array. That makes sense. Note the capitalization pattern.
The array of literals is placed within parentheses.
Each new array item is surrounded with double quotation marks. Remember that each array item is text, and that requires double quotation marks.
Each array item is separated from the next by a comma, no spaces. You can have spaces if you want, but I feel this format looks a little cleaner.
The big question is in what order to put the array items. Here the answer is easy: You know that the days of the week are represented Sunday through to Saturday, 0–6. So, you list Sunday first because you know it will receive the 0 both from the getDay() method and from the JavaScript assigning numbers to the array. That makes it a pretty sure bet that a 0 will return Sunday to the page.
Later in the book, we'll discuss arrays that do not come with a 0 through whatever pattern is already set. That gets a little more complicated. For now, we'll stay with the rather easy-to-create arrays because JavaScript has set the order for us already.
Grabbing a Piece of the Array
Now that you've set up the seven-day text array, you need to create a method to return the numeric day of the week through the getDay() method, and then turn that number into the correct day from the array.
Here's the code that does it:
var y=new Date();
document.write("Today is "+dayName[y.getDay()] + ".");
The first line should be familiar by now. A variable, y, is set up that represents the new Date().
The document.write statement should also look familiar. The text within the double quotation marks writes to the page, whereas the text within the plus signs returns something to the page in its place.
Here's the magic in the script:
dayName[y.getDay()]
The code turns the attention of the return to the array, dayName.
The code in the brackets is the same format used to return the numeric day of the week number: variablename.getDay().
The y.getDay() is replaced by a number representing the day of the week, like it always is.
So what the command is actually saying is Go to this array[find this number].
If you were running this script on a Monday, the y.getDay() would return the number 1. The browser would see the command dayName[y.getDay()] as dayName[1] and would return the text in the array associated with the number 1. The number 1 is Monday because JavaScript counts up from 0.
Get it? Good.
Your Assignment
Use the previous instructions and array to create a script that prints this line to the page: Today is Day-Of-The-Week in the month of Month-Name.
You already know the format for the day of the week. Now create an array that returns the name of the month. Just follow the pattern shown earlier to create the array, and remember to give the new array a new variable name. You can't have two variables in the same script with the same name.
Remember, even in months, JavaScript starts counting at 0.
Click Here!
You can see a possible answer by clicking Lesson Fifteen Assignment in your download packet, or see it online at http://www.htmlgoodies.com/JSBook/assignment15.html.