Lab 13: JavaScript Objects

In this lab, you will work with JavaScript objects.

Objectives:

• To use create objects and add/delete properties
• To use constructor methods

Part 1: JavaScript Objects

Steps:

1. Use File - Close All to close all open editing windows.

2. In RAD, create a new Dynamic Web Project named Lab13Web associated with Lab13EAR.

3. In the WebContent folder, create a new HTML file, create-objects-literal.html and a JavaScript that uses a literal object syntax to create an object named person with the following properties and values of your choice (address has nested properties):

   firstname
   lastname
   age
   address
       street
       city
       state
       zip        
           

   The script should build and then write a string containing the object's property values to the page.

4. Copy create-objects-literal.html to a new file, create-objects-new.html. Rewrite the script to use "new" operator instead of literal syntax. Use a mixture of dot notation and [] notation to add the properties.

5. Copy either of the two pages to a new file, delete-properties.html. At the end of the script, delete the "address" property from the person object. Then print out the object's string again.

6. Copy either of the first two pages to a new file, enumerate.html.

   Add code so that it loops and enumerates all properties to display the property name and value to the page. Use a nested loop to display the nested "address" property.

7. Create a new JavaScript Source File named Account.js. In it, create a constructor function for an Account "class". Account objects should have the following "simple" properties:

   holderName
   balance
   accountNumber
           

   And the following methods:

   withdraw(amount)
   deposit(amount)
   accrueInterest(percentageRate)
           

   Code the methods as you see fit. Note: , you should separate each method definition except for the last with a comma, i.e. after the closing brace for withdraw.

   The create an HTML file named test-account.html, and in it write a script that creates a couple of account objects, then calls their methods, then prints each account's balance to the page.

Part 2: More Practice

Steps:

1. Create a new file, doc-properties.html and a script that enumerates all of the document object properties, displaying each property name and its value. See if you can make sense of them and figure which properties are for data and which are for methods.

2. Repeat the above for the window object.

3. Create a new HTML file named test-delete-props.html and enter this script:

   var x = 1;
   
   var result1 = delete this.x;
   document.writeln("Result1: " + result1 + "<br>");
   
   var result2 = delete x;
   document.writeln("Result2: " + result2 + "<br>");
   
   this.y = 2;
   var result3 = delete y;   
   document.writeln("Result3: " + result3 + "<br>");
   
           

   Run the script and see if you can figure out the results.