JavaScript Objects, Methods, and Properties

Welcome to our free JavaScript tutorial. This tutorial is based on Webucator's Introduction to JavaScript Training course.

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:

<meta charset="UTF-8">
<title>JavaScript Page</title>
<link href="style.css" rel="stylesheet">
	//Pop up an alert
	window.alert("The page is loading");
	<span onclick=" = 'red';">Red</span> |
	<span onclick=" = 'white';">White</span> |
	<span onclick=" = 'green';">Green</span> |
	<span onclick=" = 'blue';">Blue</span>
<script src="script-2.js"></script>

Code Explanation

Code Sample:

This script simply outputs
	"Hello, there!"
to the browser.
document.write("<p>Hello, there!</p>");

Code Explanation


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


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.


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.


Methods can take zero or more arguments separated by commas.


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 are the adjectives of JavaScript. They describe qualities of objects and, in some cases are writable (can be changed dynamically).

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().


This tutorial is based on Webucator's Introduction to JavaScript Training Course. We also offer many other JavaScript Training courses. Sign up today to get help from a live instructor.