Using Objects and Object Methods

CHANGED on Jan 30, 2007: If you want to, you can work with a SINGLE PARTNER for this homework assignment. You may also do the assignment on your own, if you wish. If you work with a partner, then you will both get the same grade for this assignment, and for the revision to the assignment (if you two choose to submit a revision).

You are going to create a web page for an electronics store that displays information about the following products that they have for sale - televisions, computers, and speakers. The store carries 4 types of each product. (For example, the store carries 4 types of Television: maybe a Zenith, a Toshiba, a Sony, and a RadioShack). Your task is to create a page that effectively displays the information about each product according to the guidelines below.

Create an object constructor function for each type of product - one for televisions, one for computers, and one for speakers. The specific fields for each object are listed below (you can add more if you choose):

Television

Brand
Screen Size
Price

Computer

Brand
CPU Speed
RAM
Hard Drive Size
Price

Speaker

Brand
Power
Price

Use these constructor functions to create objects that represent each product for sale. Each object should represent only one item of the corresponding type - for example, you will need separate Television objects for each type of television. You will have to create fictitious information for the products on your page.

Create an object method for each type of object that will be used to return a single string that is generated from all of the fields in that object, including any formatting that is needed to make the product look good. Use the prototype property of the constructor function to assign this method to the toString method. Here is some sample code that does this:

        function TelevisionToString() {...}

        function Television(...) {...}

	Television.prototype.toString = TelevisionToString;

In this way, you can generate the html for each product by accessing its corresponding object directly, without having to repeat code.

You must store all the products in an array. In order to obtain the string for the web page, you will need to iterate through the array, and call toString on each object in the array.

You are free to decide the format of the page.

Restrictions and Requirements:

All of the content that is displayed on the page must be generated by a single call to the JavaScript document.write() statement. As in assignment 2, you will need to use the string + operator to create a single string that represents the entire page.
Hint: Use alert() boxes when you encounter problems with your script. You can alert the string of html that your script is generating to see whether or not it is being generated correctly. Use newlines ("\n") in the string to space it out so that it is readable inside the alert box.
By the time this assignment is due, you will have seen JavaScript functions, and so you are expected to make use of them in order to simplify and clarify your code. You need to demonstrate the use of functions to modularize, clarify, and (where possible) simplify your code. Having the separate classes & objects (with methods) will go a long way towards achieving this goal)
You are required to define all the code you'll need in a separate .JS file, and you must include that file via a <SCRIPT> element in the HEAD of the HTML document. You will then need to call the GenerateOutput() method in another <SCRIPT> element in the BODY of your HTML document.
Having a single function (GenerateOutput(), or whatever you want to name it) generate the web page is required. This should be the only JavaScript in the BODY of the document - everything else (defining your classes, instantiating objects, and storing those objects into the array) should all be in the external .JS file, which is imported into your .HTML page in the HEAD of your document.
Your .HTML file must work correctly in both Microsoft Internet Explorer (version 6 or higher) and Mozilla FireFox (Version 1.5 or higher)

What to hand in:

Your A3_Products.html file. You are not provided with a starting HTML template - you will have to make your own.
Make sure to place the program title, A3.0, into the <title> tag in the <head> of your document for each assignment. Follow it with a “ : ” and your full name. Example: <title>A3.0: Ian Bansenauer </title>
This is a required part of each submission!
The separate .JS file that contains your JavaScript code. As long as there's just one extra file it will be clear that you want me to grade, so you can name it whatever you want.

How To Hand In Your Homework:

This will be handed in via the Vault system. If you need help, we can cover this again in class, on the date that this assignment is due.