Objects are things. In the real world, as opposed to the virtual and sometimes surreal world of computer programming, a ball, a desk, and a car are all objects. An object is something that has describable characteristics, that you can do things to, and that behaves in a particular way. An object in the object-oriented programming paradigm is a combination of code and data that similarly exhibits characteristics and behavior.

Objects have properties—things defined as attributes about them. Going back to the real world again, a ball has a color property—perhaps red, white, or multicolored. It also has a size property—perhaps it is small like a baseball or bigger like a basketball, or something else entirely. These properties might be represented like this:

ball.color

ball.size

Just as objects can have properties, they also can have methods. Methods define the way an object behaves. A ball might have a roll method, which would calculate how far the ball will roll. In theory, not all objects have methods and not all objects have properties, though in practice all objects have at least one method or one property.

Remember from Chapter 7, that a method is just a function that belongs to an object. A method definition that uses a function literal for the roll method might look like this:

ball.roll = function() {
    var distance = this.size * this.forceApplied;
}

Classes define sets of objects that share the same properties and methods. Classes simplify the creation of multiple objects of the same type. Consider this example. Throughout previous chapters, I've used a star object in some examples. Example 8-1 shows what we'd need for a comprehensive Web page with information about 14 important stars.

var star = {};

star["Polaris"] = new Object;
star["Mizar"] = new Object;
star["Aldebaran"] = new Object;
star["Rigel"] = new Object;
star["Castor"] = new Object;
star["Albireo"] = new Object;
star["Acrux"] = new Object;
star["Gemma"] = new Object;
star["Procyon"] = new Object;
star["Sirius"] = new Object;
star["Rigil Kentaurus"] = new Object;
star["Deneb"] = new Object;
star["Vega"] = new Object;
star["Altair"] = new Object;

star["Polaris"].constellation = "Ursa Minor";
star["Mizar"].constellation = "Ursa Major";
star["Aldebaran"].constellation = "Taurus";
star["Rigel"].constellation = "Orion";
star["Castor"].constellation = "Gemini";
star["Albireo"].constellation = "Cygnus";
star["Acrux"].constellation = "Crux";
star["Gemma"].constellation = "Corona Borealis";
star["Procyon"].constellation = "Canis Minor";
star["Sirius"].constellation = "Canis Major";
star["Rigil Kentaurus"].constellation = "Centaurus";
star["Deneb"].constellation = "Cygnus";
star["Vega"].constellation = "Lyra";
star["Altair"].constellation = "Aquila";

star["Polaris"].type = "Double/Cepheid";
star["Mizar"].type = "Spectroscopic Binary";
star["Aldebaran"].type = "Irregular Variable";
star["Rigel"].type = "Supergiant with Companion";
star["Castor"].type = "Multiple/Spectroscopic";
star["Albireo"].type = "Double";
star["Acrux"].type = "Double";
star["Gemma"].type = "Eclipsing Binary";
star["Procyon"].type = "Double";
star["Sirius"].type = "Double";
star["Rigil Kentaurus"].type = "Double";
star["Deneb"].type = "Supergiant";
star["Vega"].type = "White Dwarf";
star["Altair"].type = "White Dwarf";

star["Polaris"].spectralClass = "F7";
star["Mizar"].spectralClass = "A1 V";
star["Aldebaran"].spectralClass = "K5 III";
star["Rigel"].spectralClass = "B8 Ia";
star["Castor"].spectralClass = "A1 V";
star["Albireo"].spectralClass = "K3 II";
star["Acrux"].spectralClass = "B1 IV";
star["Gemma"].spectralClass = "A0 V";
star["Procyon"].spectralClass = "F5 IV";
star["Sirius"].spectralClass = "A1 V";
star["Rigil Kentaurus"].spectralClass = "G2 V";
star["Deneb"].spectralClass = "A2 Ia";
star["Vega"].spectralClass = "A0 V";
star["Altair"].spectralClass = "A7 V";

star["Polaris"].mag = 2.0;
star["Mizar"].mag = 2.3;
star["Aldebaran"].mag = 0.85;
star["Rigel"].mag = 0.12;
star["Castor"].mag = 1.58;
star["Albireo"].mag = 3.1;
star["Acrux"].mag = 0.8;
star["Gemma"].mag = 2.23;
star["Procyon"].mag = 0.38;
star["Sirius"].mag = -1.46;
star["Rigil Kentaurus"].mag = -0.01;
star["Deneb"].mag = 1.25;
star["Vega"].mag = 0.03;
star["Altair"].mag = 0.77;

As you can see, there's a lot of repeated code in Example 8-1. Each star is defined and then given four properties: the constellation in which it appears, its type, its spectral class, and its magnitude (represented by the word mag in the code listing).

Now consider the code in Example 8-2. It accomplishes the same thing as the code in Example 8-1, but with the help of a class.

var star = {};

function Star(constell,type,specclass,magnitude) {
    this.constellation = constell;
    this.type = type;
    this.spectralClass = specclass;
    this.mag = magnitude;
}

star["Polaris"] = new Star("Ursa Minor","Double/Cepheid","F7",2.0);
star["Mizar"] = new Star("Ursa Major","Spectroscopic Binary","A1 V",2.3);
star["Aldebaran"] = new Star("Taurus","Irregular Variable","K5 III",0.85);
star["Rigel"] = new Star("Orion","Supergiant with Companion","B8 Ia",0.12);
star["Castor"] = new Star("Gemini","Multiple/Spectroscopic","A1 V",1.58);
star["Albireo"] = new Star("Cygnus","Double","K3 II",3.1);
star["Acrux"] = new Star("Crux","Double","B1 IV",0.8);
star["Gemma"] = new Star("Corona Borealis","Eclipsing Binary","A0 V",2.23);
star["Procyon"] = new Star("Canis Minor","Double","F5 IV",0.38);
star["Sirius"] = new Star("Canis Major","Double","A1 V",-1.46);
star["Rigil Kentaurus"] = new Star("Centaurus","Double","G2 V",-0.01);
star["Deneb"] = new Star("Cygnus","Supergiant","A2 Ia",1.25);
star["Vega"] = new Star("Lyra","White Dwarf","A0 V",0.03);
star["Altair"] = new Star("Aquila","White Dwarf","A7 V",0.77);

The function, shown here, creates a class for stars as shown in bold in Example 8-2.

When called, the end result is a new star object:

star["Polaris"] = new Star("Ursa Minor","Double/Cepheid","F7",2.0);

As you can see, even though the two code listings are functionally equivalent, the code in Example 8-2 is much shorter and easier to understand. Carrying this forward, imagine an object that had nine properties instead of just the four shown here.

Once an object has been created, you can start assigning to it the properties and methods that it will contain. If you have just one star object, then you could assign properties directly to it, like this:

star.name = "Polaris";
star.constellation = "Ursa Minor";

The previous section showed how to create multiple related objects with multiple properties and how to use a class to assign those properties efficiently.

var star = {};

star["Polaris"] = new Star("Ursa Minor","Double/Cepheid","F7",2.0);

for (var propt in star) {
    alert(propt);
}

if (property in object) {
    // do something here
}

var star = {};

function Star(constell,type,specclass,magnitude) {
    this.constellation = constell;
    this.type = type;
    this.spectralClass = specclass;
    this.mag = magnitude;
}

star["Polaris"] = new Star("Ursa Minor","Double/Cepheid","F7",2.0);
star["Mizar"] = new Star("Ursa Major","Spectroscopic Binary","A1 V",2.3);
star["Aldebaran"] = new Star("Taurus","Irregular Variable","K5 III",0.85);
star["Rigel"] = new Star("Orion","Supergiant with Companion","B8 Ia",0.12);
star["Castor"] = new Star("Gemini","Multiple/Spectroscopic","A1 V",1.58);
star["Albireo"] = new Star("Cygnus","Double","K3 II",3.1);
star["Acrux"] = new Star("Crux","Double","B1 IV",0.8);
star["Gemma"] = new Star("Corona Borealis","Eclipsing Binary","A0 V",2.23);
star["Procyon"] = new Star("Canis Minor","Double","F5 IV",0.38);
star["Sirius"] = new Star("Canis Major","Double","A1 V",-1.46);
star["Rigil Kentaurus"] = new Star("Centaurus","Double","G2 V",-0.01);
star["Deneb"] = new Star("Cygnus","Supergiant","A2 Ia",1.25);
star["Vega"] = new Star("Lyra","White Dwarf","A0 V",0.03);
star["Altair"] = new Star("Aquila","White Dwarf","A7 V",0.77);

if ("Polaris" in star) {
    star["Polaris"].aka = "The North Star";
    alert("Polaris found and is also known as " + star["Polaris"].aka);
}

Just as properties were added to self-defined objects, methods also can be added. For example, the class used in earlier examples can be extended to include a method called show(), which just presents an alert() dialog box. This method could be extended to do whatever you need it to do. For example, look at this code:

function Star(constell,type,specclass,magnitude) {
    this.constellation = constell;
    this.type = type;
    this.spectralClass = specclass;
    this.mag = magnitude;
    this.show = function show() {
        alert("hello, this is a method.");
    }
}

Calling or invoking that method looks like this:

star["Polaris"].show();

Object-oriented programming in JavaScript doesn't end here. More advanced features of the object-oriented programming paradigm like inheritance, superclassing, and prototypes are all possible with JavaScript, but they are beyond the scope of this book. MSDN Magazine published an article about some of the more advanced concepts and that article can be found at http://msdn.microsoft.com/msdnmag/issues/07/05/JavaScript/default.aspx.

The length property of an array returns the number of elements in the array. There's an important distinction to be made between how many elements the array contains and how many have been defined. Here's a simple example. Take the implicit star array definition shown just previously. You can count four star names: Polaris, Deneb, Vega, and Altair. The length property returns the same thing:

var numStars = star.length; // star.length is 4.

To introduce you to some of the methods of the array object, this section looks at a few of those methods. More information can be found within the ECMA-262 specification at http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf.

Adding and Removing Elements

Elements can be added to an array, either prepended or appended using a few different methods.

Using concat() to add elements

The concat() method appends elements to the end of the array on which it is invoked. The arguments supplied to concat() are appended and a new array is returned, as follows:

var myArray = new Array( );

myArray[0] = "first";

myArray[1] = "second";

var newArray = myArray.concat("third");

// newArray is now [first,second,third]

You can also concatenate another array, like this:

var myFirstArray = [51,67];
var mySecondArray = [18,"hello",125];
var newArray = myFirstArray.concat(mySecondArray)
// newArray is [51,67,18,"hello",125]

Adding elements with concat()

1. Using Visual Studio, Eclipse, or another editor, edit the file concat.htm in the Chapter 8 sample files folder.

2. Within the page, add the code shown below in bold type:

   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
   <html>
   <head>
       <title>Concat</title>
       <script type = "text/javascript">
       var star = ["Polaris", "Deneb", "Vega", "Altair"];
   
       for (var i = 0; i < star.length; i++) {
           alert(star[i]);
   
       }
   
       </script>
   </head>
   <body>
   
   </body>
   </html>

3. Save the page and view it in a Web browser. You'll receive an alert() dialog box (like the one shown here) for each of the four star names defined in the star array.

   

4. Now alter the code to concatenate some additional stars onto the star array. (Yes, I realize that you could just add them directly to the star array, but that's cheating.) Here's the code (the changes are highlighted):

   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
   <html>
   <head>
       <title>Concat</title>
       <script type = "text/javascript">
   
       var star = ["Polaris", "Deneb", "Vega", "Altair"];
       var newstars = ["Aldebaran", "Rigel"];
       var morestars = star.concat(newstars);
   
       for (var i = 0; i < morestars.length; i++) {
           alert(morestars[i]);
       }
   
       </script>
   </head>
   <body>
   
   </body>
   </html>

5. Save and view the page in a Web browser. You'll now receive six alert() dialog boxes (sorry!), one for each star, like this one for Aldebaran:

   

Joining and concatenating with join

The join() method converts all the elements of an array to a joined string. This method is unlike the concat() method, which concatenates but does not perform any type conversions. Here's the code:

var star = ["Polaris", "Deneb", "Vega", "Altair"];
var starString = star.join();

The starString variable would contain Polaris,Deneb,Vega,Altair, as shown in Figure 8-1.

Figure 8-1. Using join() to join an array.

The join() method enables you to specify the join delimiter as well. Instead of just using a comma, you might want to use an asterisk, like this:

var star = ["Polaris", "Deneb", "Vega", "Altair"];
var starString = star.join("*");

The result would be Polaris*Deneb*Vega*Altair, as shown in Figure 8-2.

Figure 8-2. Joining with a different delimiter

Tip

The join() method is a quick way to see the contents of an array without creating an entire for loop structure.

Using push and pop to add and remove elements

Where concat() returns the newly concatenated array, push() and pop() add and remove elements, but also return the new length of the array to which the method is applied. The methods push() and pop() operate on the end of the array:

var star = ["Polaris", "Deneb", "Vega", "Altair"];
star.push("Aldebaran");

This code would result in the star object containing five elements: Polaris, Deneb, Vega, Altair, and Aldebaran.

The pop() method removes the last element and returns the element that is removed:

var star = ["Polaris", "Deneb", "Vega", "Altair"];
var removedElement = star.pop();

The removedElement variable would contain the string "Altair" because that was the last element of the array. The length of the array would also be shortened (or decremented) by 1.

Using shift and unshift to add and remove elements

The push() and pop() methods operate on the end of the array. The shift() and unshift() methods perform the same function as push() and pop(), except in reverse. The unshift() method adds an element to the beginning of an array:

var star = ["Polaris", "Deneb", "Vega", "Altair"];
star.unshift("Aldebaran");

The star array would now be:

["Aldebaran", "Polaris", "Deneb", "Vega", "Altair"]

Now use shift() to remove an element from the beginning of an array:

var star = ["Polaris", "Deneb", "Vega", "Altair"];

var removedElement = star.shift();

The star array would now contain:

["Deneb", "Vega", "Altair"]

Using slice to return parts of an array

The slice() method is useful if you need to return specific portions of an array, though care must be taken because unless a copy of the array is made, slice() will change the original array. For instance, this code would return and place into the cutStars variable the value "Vega,Altair" because Vega and Altair are the third and fourth elements of the star array (remember that arrays start counting from zero). The code is as follows:

var star = ["Polaris", "Deneb", "Vega", "Altair"];
var cutStars = star.slice(2,3);

Sorting elements with sort It's sometimes helpful to sort the elements of an array. Look at this code:

var star = ["Polaris", "Deneb", "Vega", "Altair"];
var sortedStars = star.sort();

The result is shown in Figure 8-3 and as you can see, the elements of the star array are now sorted alphabetically, even though they weren't given alphabetically in the code. Note that both the original star array and the sortedStars variable contain sorted lists.

Figure 8-3. The result of a sorted array using the sort() method.

Be careful not to use the sort() method to sort numbers. Consider this code:

var nums = [11,543,22,111];
var sortedNums = nums.sort();

One might expect that the sortedNums variable would contain 11,22,111,543, but instead it sorts the values alphabetically, as shown in Figure 8-4.

Figure 8-4. Attempting to sort numbers with sort() doesn't work—at least not if you want them sorted in numerical order.

The array object has other methods that you should know about, but you might not use them much, depending on the requirements of your Web site. Refer to the ECMA-262 standard for more information. Two such methods that you might encounter are listed in Table 8-1.

Table 8-1. Select Methods of the Array Object

Method	Description
reverse()	Reverses the order of the elements
splice()	Inserts or removes elements from an array

The Date object includes many methods that are helpful when working with dates in JavaScript—too many, in fact, to attempt to examine in any depth in a beginner-level book such as this, but I'll show you some examples that you'll likely want to incorporate in your projects.

Here's some simple code to return a date for the current time, adjusted for the local time zone and formatted automatically by the toLocaleDateString() method:

var myDate = new Date( );
alert(myDate.toLocaleDateString());

When run, this code might result in a date like that shown in Figure 8-5.

Figure 8-5. The Date object returns a date string, which can be localized using the toLocaleDateString method of the Date object.

By itself, the Date object can be handed a number of arguments ranging from zero arguments up to seven arguments. When the Date object constructor is passed a single string argument, the string is assumed to contain the date. When it is passed a number type of argument, the argument is assumed to be the date in milliseconds since January 1, 1970, and when it is passed seven arguments, they're assumed to be:

new Date(year, month, day, hours, minutes, seconds, milliseconds)

Remember the following points when using a Date object:

Although this step-by-step exercise uses some items that won't be covered until later chapters, because we're looking at the Date object now, it's a good time to show you how to write the date and time to a Web page. This seems like a fairly popular thing to do. This exercise shows the whole process, including things that I won't explain right now, but I will later.

Writing the date and time to a Web page

The relevant JavaScript from this exercise is repeated here:

var myDate = new Date();
var dateString = myDate.toLocaleDateString() + " " + myDate.toLocaleTimeString();
var dateLoc = document.getElementById("dateField");
dateLoc.innerHTML = "Hello - Page Rendered on " + dateString;

The JavaScript related to the Date object is really rather simple. It takes advantage of the toLocaleDateString() method, which you've already seen, and its cousin, toLocateTimeString(), which returns the local time. These two methods are concatenated together with a single space and placed into the dateString variable, like this:

var dateString = myDate.toLocaleDateString() + " " + myDate.toLocaleTimeString();

The remainder of the code writes the contents of the dateString variable to the Web page. More information on that aspect of JavaScript is described in Chapter 10.

Other Date-Writing Procedures

The procedure shown in the "Writing the date and time to a Web page" exercise isn't the only way to write the date to the page. There are several others, many of which depend solely on developer preference (in other words, there's no "best" way). One other way to do it is to call Date() as a function rather than creating a new Date object as was done in the exercise. The key difference is the use of the new statement. When called with the word new, as in new Date(), an object is constructed, whereas when Date() is called without the word new, it's called as a function. Here is relevant JavaScript for using Date as a function:

var myDate = Date();
var dateLoc = document.getElementById("dateField");
dateLoc.innerHTML = "Hello - Page Rendered on " + myDate;

However, if you call this, you'll notice a subtle difference in the output, as shown here:

Notice in this screenshot that the word Saturday is abbreviated to Sat, where the previous screenshot displayed the entire word. The subtle differences in formatting can be important if you are processing the result rather than just displaying it.

Counting down to a certain date in the future

The exercise you just completed used some additional functions of both the Math and Date objects, namely floor() and getTime(). While this book does cover a lot of ground, it's not a complete JavaScript language reference. For that and even more information, refer to MSDN, including this article, http://msdn2.microsoft.com/en-us/office/aa905433.aspx, which contains many helpful links to other JavaScript resources.

One final exercise shows how to calculate (or better yet, roughly estimate) the time it takes for a Web page to load in a person's browser.

Calculating render time

You've now seen just a few of the more than 40 methods of the Date object. Many of these have UTC (Coordinated Universal Time) counterparts, meaning that they will get or set the date and time in UTC rather than local time. Table 8-2 lists the methods that return dates. With the exception of getTime() and getTimezoneOffset(), all these methods have UTC counterparts that are called using the format getUTCDate(), getUTCDay(), and so on.

Many of the get…() methods have siblings prefixed with set, as shown in Table 8-3. And like their get brethren, most of the set…() methods have UTC counterparts, except for setTime().

Some other methods include one you've already seen, toLocaleDateString(), and others related to it like toLocaleString(), toGMTString(), toLocaleTimeString(), toString(), toDateString(), toUTCString(), and toTimeString(). Experiment with these as you see fit. These simple code examples will get you started. Try typing them in the address bar of your browser: