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()
.
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.
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:
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
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:
paragraph id = parEx2
em text phrase id = emObj; inner html = italicized text
button id = button3; type = button; value = Display button3 properties
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>
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: