JavaScript Objects


An "object" in JavaScript is a single entity that ties together some data and the operations that act on that data. The data associated with an object are called properties or attributes. The operations, which are implemented as function calls, are called methods.

We can think of objects as nouns, properties as adjectives, and function calls, or methods, as verbs.

For example, we might have data about a person with the following properties and methods:


    person
        properties:  name
                     age
                     height
                     etc
        methods:    walk()
                    sleep()
                    study()

We can refer to an object's specific properties or call its methods using the . symbol: person.height, person.name, person.walk(), person.sleep().


Examples of objects

An HTML document is an object that contains many other objects. The <head> and <body> sections of the page are objects, as are the paragraphs, lists, tables, and other elements of the page.

Web page document

An HTML document (a web page) is an example of an object. It has many properties, including its address (URL) and the date and time when it was last modified. It also has a method called writeln that adds text to the page. For example, here is a JavaScript snippet that uses the document.writeln() method and the document.URL and document.lastModified properties.


<script>
document.writeln("This document's web address is " + document.URL + ".<br/>");
document.writeln("It was last modified on " + document.lastModified + ".<br/>");
</script>
Output:

HTML elements in a web page

The HTML elements within a web page (paragraphs, lists, buttons, and so forth) are also objects. You can refer to a specific object if you have given it an id attribute with a unique identifier. All the attributes that you can specify in a tag are represented as properties in a corresponding object.

Example 1:

This is a very short paragraph object ('parEx1'), followed by a button ('ex1button') that displays properties of both.

HTML code that produced the paragraph and button above:
<p id='parEx1'>This is a very short paragraph object ('parEx1'),
followed by a button ('ex1button') that displays properties of both.</p>

<input id="ex1button" type="button"
       value="Button to display paragraph and button properties"
       onclick="alert('paragraph id = ' + parEx1.id + '\n' +
            'button id = ' + ex1button.id + '; type = ' + ex1button.type +
                '; value = ' + ex1button.value);">
Output in alert message:
paragraph id = parEx1
button id = ex1button; type = button; value = Button to display paragraph and button properties

The innerHTML property

HTML objects created with begin/end tags that have text or other objects inside them (such as <h1>Heading</h1>, <p>very short paragraph</p>, or <em>text</em>) have an innerHTML property that refers to the text or objects between the tags.

Example 2:

This is a paragraph object ('parEx2') that contains some italicized text (object 'emObj'). The paragraph is followed by three button objects that display some of the properties of the paragraph, the text phrase, and the third button ('button3').

HTML code that produced the paragraph and buttons above:
<p id='parEx2'>This is a paragraph object ('parEx2') that contains some
<em id='emObj'>italicized text</em> (object 'emObj').  The paragraph is
followed by three button objects that display properties of the paragraph,
the text phrase, and the third button ('button3').</p>

<input id="button1" type="button" value="Display paragraph id"
        onclick="alert('paragraph id = ' + parEx2.id);">
<input id="button2" type="button" value="Display id and contents properties"
        onclick="alert('em text phrase id = ' + emObj.id +
            '; inner html = ' + emObj.innerHTML);">
<input id="button3" type="button" value="Display button3 properties"
        onclick="alert('button id = ' + button3.id +
            '; type = ' + button3.type +
            '; value = ' + button3.value);">
Output:

Each button produces a different alert message:

  1. paragraph id = parEx2
  2. em text phrase id = emObj; inner html = italicized text
  3. button id = button3; type = button; value = Display button3 properties


Modifying HTML elements from code

Just as you can look at or modify variables, you can look at or modify objects or their properties, including the innerHTML property. In the example below, clicking the button changes the contents of the second paragraph.
Example 3:

This is the contents of a paragraph whose id is 'par1'.

This is the contents of a paragraph whose id is 'par2'.

HTML code that produced the paragraph and button above:
<p id='par1'>This is the contents of a paragraph whose id is 'par1'.</p>
<p id='par2'>This is the contents of a paragraph whose id is 'par2'.</p>
<input type="button" value="Change paragraph par2" onclick='changePar2()'>
The script in the <head> section of this document that contains the changePar2 function:
<script>
function changePar2()
{
    par2.innerHTML = "The contents have changed!  ";
    par2.innerHTML = par2.innerHTML + 
        "Here is the first paragraph repeated: " + par1.innerHTML;
}
</script>

Strings

JavaScript strings are a third type of object with properties and methods, some of which you have seen already.


<script>
var vowels = "aeiou";
document.writeln("The variable vowels contains " + vowels + ". ");
document.writeln("It contains " + vowels.length + " characters.<br/>");
document.writeln("The first character is " + vowels.charAt(0) + "."<br/>);
document.writeln("The last character is " + vowels.charAt(4) + "."<br/>);
document.writeln("The last character is " +
    vowels.charAt(vowels.length-1) + "."<br/>);
document.writeln("Uppercase: " + vowels.toUpperCase());
</script>
Output: