JavaScript Objects, Methods and Properties

Contact Us or call 1-877-932-8228
JavaScript Objects, Methods and Properties

JavaScript Objects, Methods and Properties

JavaScript is used to manipulate or get information about objects in the HTML DOM. Objects in an HTML page have methods (actions, such as opening a new window or submitting a form) and properties (attributes or qualities, such as color and size).

To illustrate objects, methods and properties, we will look at the code in JavaScriptBasics/Demos/javascript-2.html, a slightly modified version of JavaScriptBasics/Demos/javascript-1.html, which we looked at earlier, and at the code in JavaScriptBasics/Demos/script-2.js.

Code Sample:

JavaScriptBasics/Demos/javascript-2.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript Page</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
	//Pop up an alert
	window.alert("The page is loading");
</script>
</head>
<body>
<p>
	<span onclick="document.bgColor = 'red';">Red</span> |
	<span onclick="document.bgColor = 'white';">White</span> |
	<span onclick="document.bgColor = 'green';">Green</span> |
	<span onclick="document.bgColor = 'blue';">Blue</span>
</p>
<script type="text/javascript" src="script-2.js"></script>
</body>
</html>

Code Sample:

JavaScriptBasics/Demos/script-2.js
/*
This script simply outputs
	"Hello, there!"
to the browser.
*/
document.write("<p>Hello, there!</p>");

Methods

Methods are the verbs of JavaScript. They cause things to happen.

window.alert()

HTML pages are read and processed from top to bottom. The JavaScript code in the initial script block at the top of JavaScriptBasics/Demos/javascript-2.html calls the alert() method of the window object. When the browser reads that line of code, it will pop up an alert box and will not continue processing the page until the user presses the OK button. Once the user presses the button, the alert box disappears and the rest of the page loads.

document.write()

The write() method of the document object is used to write out code to the page as it loads. In JavaScriptBasics/Demos/script-2.js, it simply writes out "Hello, there!"; however, it is more often used to write out dynamic data, such as the date and time on the user's machine.

Arguments

Methods can take zero or more arguments separated by commas.

Syntax

object.method(argument1, argument2);

The alert() and write() methods shown in the example above each take only one argument: the message to show or the HTML to write out to the browser.

Properties

Properties are the adjectives of JavaScript. They describe qualities of objects and, in some cases are writable (can be changed dynamically).

document.bgColor

The bgColor property of the document object is read-write. Looking back at JavaScriptBasics/Demos/javascript-2.html, the four span elements use the onclick event handler to catch click events. When the user clicks on a span, JavaScript is used to change the value of the bgColor property to a new color.

The bgColor property of document is deprecated, meaning it should not be used anymore. Instead, document.body.style.backgroundColor should be used to change the background color of the page. However, we do not get to the style property in this course, so we use bgColor for learning purposes. In practice, you can substitute document.body.style.backgroundColor for document.bgColor.

The Implicit window Object

The window object is always the implicit top-level object and therefore does not have to be included in references to objects. For example, window.document.write() can be shortened to document.write(). Likewise, window.alert() can be shortened to just alert().

Next