BIT 116 – Scripting
Exercise 6

JavaScript Objects, Arrays


Part 1: Create Your Own Object

In a script in the head section of the document, define a constructor function for an object that will be used to represent an employee of a company. Each Employee object should have the following properties:

In a script in the body of the document, create two Employee objects using the constructor function and the new operator. Just select random employee names and information to initialize the objects.

Use the dot operator to access the properties of each object and display them to the document using document.write() statements.

Be sure and save your solution to Part 1, because it will be used later on.

Part 2: Defining and Invoking an Object Method

Go back to Part 1 and alter it as follows.

Define a function named EmployeeDisplay() in the script in the head section. It is going to be a method of the Employee object. Inside this function, use the this keyword and document.write() statements to display the properties of an Employee object.

In the Employee constructor function, define a method named display, and assign to it the name of the EmployeeDisplay function, without the parentheses.

Alter the script in the body to use the display() method of the Employee object to display the values stored in the two Employee objects.

Part 3: Overriding the toString Method for Your Objects

If you were to directly write an object to the page without using the display() method from Part 2, you would see the text "[object][Object]" or something to that effect. JavaScript automatically converts all objects to this string when displaying them or adding them to strings. It would be better to have them automatically converted to some more meaningful string.

Create an object method named EmployeeToString. Use the this keyword to access the properties of the Employee object in order to generate a single string that contains all of the information about an employee in an html format that is meant to be written to the page.

You are going to use this method to redefine how your object is converted into a string by JavaScript. The process is slightly different from that used in Part 2.

Just beneath the Employee object constructor function in the script, add the following line exactly as it is:

        Employee.prototype.toString = EmployeeToString;

Now, whenever you add an object to a string or write an object to the page using document.write(), it will use your function to transform it into a string.

Directly write the two Employee objects to the page, without using the display() method from Part 2. Verify that the string that is displayed matches the format created by the EmployeeToString function.

Part 4: Using the for ... in Statement

Use a for ... in statement to display the values of all of the properties in one of the Employee objects to the page.

Next display the names of the properties themselves using a different for ... in statement.

Part 5: Accessing the navigator Object

Create two simple web pages. The first should only contain the text

        You opened this page in Internet Explorer

and the second should only contain the text

        You opened this page in FireFox

Create a third page. This page should test the navigator.appName property and then use the window.location property to load the correct page depending on which browser is being used. Test this page using both Internet Explorer and FireFox.

Part 6: An Array of Objects

Here is a constructor function for an Automobile object:

        function Automobile(make, model, year) {
           this.make = make;
           this.model = model;
           this.year = year;
        }

Declare an array named sportsCars, and initialize it with several types of fancy sports cars. This should get you started:

        var sportsCars = new Array();
        sportsCars[0] = new Automobile(...);

Use a for loop to display all of the details about each sports car to the page. You will need to combine array notation and object notation. Here is a sample:

        sportsCars[2].model

You may also find it useful to use the with statement here

Part 7: Making an Array a Property of an Object

Here is a modified version of the Automobile constructor function:

        function Automobile(make, model, year) {
           this.make = make;
           this.model = model;
           this.year = year;
           this.features = new Array();
        }

Notice that there is now a fourth property, named features, that is initialized to be an empty array. It can be used to append a list of features to an individual automobile. Look at the following script:

        var myCar = new Automobile("Honda", "Civic", "1987");

        myCar.features[0] = "AC";
        myCar.features[1] = "Anti-lock brakes";

Enhance this script by adding more features to the car. Use a for loop to display the list of features to the page.