JavaScript Objects &Arrays, Event handling

Part 1: An Array of Objects (from last lecture)

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 2: Making an Array a Property of an Object (from last lecture)

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.

Part 3: Debugging a Simple JavaScript document

Use the File>Save As command in NotePad to save your file from Part I as ex1part2.html. This way you can modify your solution to Part1 without losing a copy of it.

After reading the section below on how to get error messages from your web browser, you should change the JavaScript code so that you call the document.writeln() statement, instead of the .write() statement, and confirm that everything works the way you expect it to.  Next, you should enable script debuggin in your browser (see below), and then change your code to use the (non-existent) document.writeline() statement.  Make sure that you're clear on how you can use the error messages from your browser to find and fix errors in your scripts.

NOTE: Unlike BIT 115, this class won't be spending a lot of time on 'find and fix errors' sorts of in-class exercises.  You are expected to do this on your own, to the point where you might find a 'find, identify, and fix all errors' problem on your (paper-and-pencil exam).

Debugging Your Scripts You should enable JavaScript debugging in your web browser, if it isn't already.

For Internet Explorer: Go to Tools ð Internet Options, then select the Advanced tab, then scroll down to the Browsing part of the list.  You should UNcheck the options Disable script debugging (Internet Explorer) and Disable script Debugging (Other), and then make sure to check the Display A Notification About Every Error option.

For FireFox (Mozilla): Errors are automatically kept track of by default, but they're not shown to you unless you display the Error Console.  You can easily do this by selecting the Tools ð Error Console menu option.  The console will appear in a separate window.  It may be helpful to Clear the window before running a problematic script, so it's clear that all the error messages are coming from the current run of the program, rather than another, older run.

Part 4: Stepping through code, using Firebug

For this exercise, you should grab some of the code that you wrote in a prior exercise, around event handling.  Specifically, use the exercise wherein you defined a separate function to handle the onClick event.

You should open the page in Firefox, and then use the Tools/Firebug/Open Firebug menu item to open up Firebug in the same window.  Make sure that you're looking at the Script tab, and then find a line of code near the top of the function, and right-click on it.  Choose the 'Set Breakpoint' option, and then click on the button (in the browser).  Notice that you stop (in Firebug) on that line.  Use the control arrows in Firebug (on the right) to step through your code, line by line, and see what happens.  You should also notice that if you flip to the 'Watch' tab, Firebug will display the current values of the local variables for you.

Once you've gotten the hang of that, download the file Error.html, and use Firebug to figure out what the problem is.

Part 5: Defining the onClick Event Handler for a Button

Remember that to define an event handler, you assign a string containing the JavaScript statements that comprise the body of the handler, separated by semicolons, to the name of the event inside the html tag.

Part 6: Using the Value of a Text Box in an Event Handler

Part 7: Calling Your Own Function from an Event Handler

Use the form from Part II in the body of the page, except alter the onClick event handler to call your function, using the value field of the text box as its only argument.

Part 8: Generating a Button for Each Element of an Array

Use a for loop to write out the html for a button for each element in the array. In the onClick event handler for each button, pop up an alert box that displays the string stored in the corresponding array element. The captions (defined using the value attribute) of the buttons can just be "Button 1", "Button 2", etc.

This exercise requires you to write JavaScript statements (the onClick event handlers) from JavaScript statements (the for loop). This is a tricky concept. Remember to enclose the JavaScript statements inside the event handlers inside a different style of quotation mark than you use to enclose the string that you are writing to the document.

Part 9: 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.