Main Components of JavaScript

text zoom

Previous: The Prompt Function JavaScript Loops :Next

Lesson 9: The three main components of JavaScript

ECMAscript:

JavaScript, much like Jscript, is based on three main components. The first of which is the core of the language and is based on the ECMAscript 262 standard. This standard basically defines how variables are used and calculated, how objects are defined and how loops and functions work. What the ECMAscript 262 standard does not define is how JavaScript works with the browser and the webpage. Enter the BOM and the BOM.

The BOM and the DOM

The BOM and the DOM, otherwise known as the Browser Object Model and the Document Object Model, are both browser based objects. Object Models are basically descriptions of objects within a system. The Browser Object model is a description of the objects of the browser and the Document Object model is a description of the objects within a specific document.

The BOM:

Often confused with the DOM, the BOM is actually the group of objects that relate directly to each specific browser. The window object is at the top of the BOM hierarchy, just below the window object are, in no particular order, the navigator, screen, document, history and location objects.

The DOM:

The Document Object Model, or the DOM, is a W3C standard. It is what allows JavaScript and other scripts and programs to access, alter and add to the Content, structure and style of documents or web pages. The DOM actually resides within the BOM, but the BOM is not part of the DOM. The window object is NOT part of the DOM. I mention this because it is often believed to be.

Example of JavaScript code that works with the BOM and the DOM:

function popWindow() { var NewWin = window.open(); NewWin.document.write("Hello World!"); }

Now make a button to call your script from and put it after the body tag in your JavaScript template:

Go ahead, push the button and see what happens. As you can see this directly manipulates the browser object by opening an entirely new window, but it also manipulates the document object by writing something into the document.

Summary:

To sum it up, the three main components of JavaScript are the ECMAscript 262 standard, the BOM and the DOM. Each component is essential to how JavaScript works. The ECMAScript standard describes the Object. The BOM determines how the browser is manipulated and finally the DOM determines how to manipulate the webpage.