ECMAScript, sometimes abbreviated as "ES", is a scripting language specification maintained and trademarked by Ecma International, a Europe-based industry association dedicated to technology and communications standards. The specification for the most-recent standard version of ECMAScript can be found at:
The HTML Document Object Model (DOM) is the browser's view of an HTML page as an object hierarchy, starting with the browser window itself and moving deeper into the page, including all of the elements on the page and their attributes. Below is a simplified version of the HTML DOM.
As shown, the top-level object is
document object is a child of
window and all the objects (i.e., elements) that appear on the page (e.g., forms, links, images, tables, etc.) are descendants of the
document object. These objects can have children of their own. For example,
form objects generally have several child objects, including text boxes, radio buttons, and select menus.
// This is a single-line comment. /* This is a multi-line comment. */
window). Objects can be referred to by name or id or by their position on the page. For example, if there is a form on the page named "loginform", using dot notation you could refer to the form as follows:
loginform is the first form on the page, you could also refer to it in this way:
document can have multiple
form elements as children. The number in the square brackets (
) indicates the specific
form in question. In programming speak, every
form on the page is referenced with the number zero (
0) as shown in the syntax example above.
Objects can also be referenced using square bracket notation as shown below:
window['document']['loginform'] // and window['document']['forms']
Dot notation and square bracket notation are completely interchangeable. Dot notation is much more common; however, as we will see later in the course, there are times when it is more convenient to use square bracket notation.
/* This script simply outputs "Hello, there!" to the browser. */ document.write("<p>Hello, there!</p>");
As this page loads, an alert will pop up that says "The page is loading" as shown below:
After the user clicks the OK button, the page will finish loading and will appear as follows:
When the user clicks on one of the buttons, the background color of the page changes:
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
window.alert() can be shortened to just
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.
Note that, because
window is the implicit top-level object, we could leave it off and just write
alert("The page is loading"). And, in fact, this is the way it is usually done.
write() method of the
document object is a child of
window, so we could write
window.document.write('some text'), but again,
window is implicit.
Methods can take zero or more arguments separated by commas.
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.
body object is a property of the
document object, the
style object is a property of the
body object, and
backgroundColor is a read-write property of the
style object. To understand what's going on, it can be useful to read the dot notation from right to left: "The
style of the
body of the
button elements use the
onclick on-event handler to catch click events. When the user clicks on a
clickhandlers to the two buttons to allow the user to change the background color of the page to red or to blue.
head, we use
window.alert()to generate the popup. We could have just used
document.write()to write to the screen at the bottom of the page.
onclick="document.body.style.backgroundColor = 'red'"and
onclick="document.body.style.backgroundColor = 'blue'"to add click handlers to the buttons.