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">
<script>
	//Pop up an alert
	window.alert("The page is loading");
</script>
</head>
<body>
<p>
	<span onclick="document.body.style.backgroundColor = 'red';">Red</span> |
	<span onclick="document.body.style.backgroundColor = 'white';">White</span> |
	<span onclick="document.body.style.backgroundColor = 'green';">Green</span> |
	<span onclick="document.body.style.backgroundColor = 'blue';">Blue</span>
</p>
<script src="script-2.js"></script>
</body>
</html>

Code Explanation

Code Sample:

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

Code Explanation

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.body.style.backgroundColor

The style 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 set the style of the body to a new color, in the same way that we might use CSS to style the page with background-color:red or background-color:white.

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