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.
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.
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:
For this lesson, we'll add to the preceding rule:
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.
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:
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].
Get it? Good.
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.
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.