Properties of Objects

Click Here!

Properties of Objects Sample Code

Name:	ObjectInfo
Level:	Beginner
Language:	JavaScript 1.2
Functionality:	Lets the user choose a JavaScript object from a select list, and find out what properties are associated with that object.
Use:	Demonstration of how to get the information given when an object is created.

Random Objects on the Page:
Mozilla at desk

This is a link - This is another link - Thisis yet another link

This sample code example demonstrates how to access all of the properties of an object. If you select an object from the preceeding form and click on the "Click for Properties" button, a window will appear that shows all of the properties associated with the given object. The following is a description of the code involved in this example.

<form name="propForm">
Please select an object from the list:
<select name = "objectList">
<option selected value="Window">Window
<option value="Date">Date
<option value="Document">Document
<option value="Form">Form
<option value="Image">Image
<option value="Link">Link
<option value="Navigator">Navigator
</select>
<input type=button value="click me" onClick=whichObject(this.form.objectList)>
</form>

The HTML code for the form is shown above. The form is named propForm, and contains a selection list with the names of different objects. When the button is clicked, the select list object is passed as a parameter to the whichObject function.

function whichObject(list) {
        var object = "";
        var listValue = getListValue(list);

        var newWindow = window.open("","","HEIGHT=400,WIDTH=350,status=1,resizable=1,scrollbars=1")
       newWindow.document.write("<HTML><HEAD><TITLE>"+listValue+"</TITLE></HEAD></HTML>")
        switch (listValue) {
                case "Window":
                        object = window;
                        break;
                case "Document":
                        object = window.document;
                        break;
                case "Form":
                        object = window.document.propForm;
                        break;
                case "Image":
                        object = window.document.someImage;
                        break;
                case "Link":
                        object = window.document.links;
                        break;
                case "Navigator":
                        object = navigator;
                        break;
        }
        newWindow.document.write(getProperties(object));
        newWindow.document.close();

}

The whichObject function is the main function of the script. It gets called after the user selects an object from the form and clicks on the submit button. The select list object is passed to the getListValue function which in turn returns the value of the object selected by the user. The function next creates a new window using window.open. A switch statement is used to determine which object we need to get property information for, and that object is then stored in the object variable. Passing this variable into the getProperties function, we are returned an HTML table containing the property names and corresponding values for that object. This table is then written to our new subwindow.

function getListValue(list)
{
   var listValue = "";

   if (list.selectedIndex != -1) {
      listValue = list.options[list.selectedIndex].value;
   }

return (listValue);
}

The list variable which is passed in is actually the select list from the form. Since there are multiple items on the list, and only one can be selected, we need to find out which one the user chose. We do this by checking the selectedIndex property which should be equal to something besides -1 if the item has been selected. We put the value of the selected item in a variable called listvalue, which is then returned to the calling function.

function getProperties(obj) {
    var properties = "";
    properties = '<HTML><BODY><TABLE BORDER="2" WIDTH="90%" COLS="2">';
    properties += '<TR ALIGN="left" BGCOLOR="lightgrey"><TH>Property</TH><TH>Value</TH></TR>';

    for (var propName in obj) {
   properties +="<TR><TD>"+propName+"</TD><TD>"+obj[propName]+" </TD></TR>";
    }
    properties +="</TABLE></BODY></HTML>";
    return properties;
}

The getProperties function actually gets and returns all the properties for an object(obj). We use HTML to format the property name and the corresponding value in a table. The main part of the function is the for...in loop. The for...in loop enables you to get the names and values of any property of an object that the browser currently knows about. The propName variable contains an array of property names in the object (creating using the for...in statement). By dereferencing the object property obj[propName] we get the actual value for the property. Note that the obj variable passed into the function is the actual object, and not the string name of the object.

For the latest technical information on Sun-Netscape Alliance products, go to: http://developer.iplanet.com

For more Internet development resources, try Netscape TechSearch.