JavaScript Implementation

The core ECMAScript of JavaScript describes the syntax and basic objects of the language;

DOM describes the methods and interfaces for handling web content;

BOM describes the methods and interfaces for interacting with the browser.

ECMAScript, DOM, and BOM

Although ECMAScript is an important standard, it is not the only part of JavaScript, of course, nor is it the only part that has been standardized. In fact, a complete JavaScript implementation is composed of the following 3 different parts:

JavaScript includes ECMAScript, DOM, and BOM

ECMAScript

ECMAScript is not bound to any specific browser, in fact, it does not mention any methods for user input/output (this is different from languages like C, which need to rely on external libraries to complete such tasks). So, what is ECMAScript? The description of ECMA-262 standard (Section 2) is as follows:

“ECMAScript can provide core script programming capabilities for different kinds of host environments, therefore, the core scripting language is defined separately from any specific host environment... ...”

Web browsers are a host environment for ECMAScript, but they are not the only host environment. In fact, there are countless other environments (such as Nombas' ScriptEase, and Macromedia's ActionScript used simultaneously in Flash and Director MX) that can accommodate ECMAScript implementations. So what does ECMAScript specify outside of the browser?

In simple terms, ECMAScript describes the following:

  • Syntax
  • Types
  • Statements
  • Keywords
  • Reserved words
  • Operators
  • Objects

ECMAScript is merely a description that defines all the properties, methods, and objects of the scripting language. Other languages can implement ECMAScript as a benchmark for functionality, with JavaScript being an example of this:

ECMAScript, JavaScript, ActionScript, ScriptEase

Each browser has its own implementation of the ECMAScript interface, which is then extended to include DOM and BOM (which will be discussed in the following sections). Of course, there are other languages that implement and extend ECMAScript, such as Windows Script Host (WSH), Macromedia's ActionScript in Flash and Director MX, and Nombas ScriptEase.

1. ECMAScript versions

ECMAScript is divided into several different versions, which are defined in a standard called ECMA-262. Like other standards, ECMA-262 is subject to editing and updates. When major updates are available, a new edition of the standard is released. The latest version of ECMA-262 is 5.1, released in June 2011.

The first edition of ECMA-262 is essentially the same as Netscape's JavaScript 1.1, with all browser-related code removed, as well as some minor adjustments. Firstly, ECMA-262 requires support for the Unicode standard (to support multilingualism). Secondly, it requires objects to be platform-independent (Netscape's JavaScript 1.1, in fact, has different object implementations, such as the Date object, which are dependent on the platform). This is the main reason why JavaScript 1.1 and 1.2 did not comply with the first edition of the ECMA-262 specification.

Most of the updates in the second edition of ECMA-262 were essentially editorial. This update of the standard was to ensure strict consistency with ISO/IEC-16262, and no special content was added, changed, or deleted. ECMAScript generally does not comply with the second edition.

The third edition of ECMA-262 was the first real update of the standard. It provided updates for string processing, error definition, and numerical output. It also added support for regular expressions, new control statements, try...catch exception handling, and some minor changes made for standard internationalization. Generally speaking, it marked ECMAScript as a true programming language.

2. What is ECMAScript conformance

In ECMA-262, there is a clear definition of ECMAScript conformance. A scripting language must meet the following four basic principles:

  • Compliant implementations must support all 'types, values, objects, properties, functions, and program language and semantics' described in ECMA-262, as described in ECMA-262 (first page).
  • Compliant implementations must support the Unicode character standard (UCS).
  • Compliant implementations can add 'additional types, values, objects, properties, and functions' not specified in ECMA-262. ECMA-262 describes these additions as new objects or new properties of objects not given in the specification.
  • Compliant implementations can support the 'program and regular expression syntax' not defined in ECMA-262 (meaning that it can replace or extend the built-in regular expression support).

All ECMAScript implementations must comply with the above standard.

3. Support for ECMAScript in web browsers

Netscape Navigator 3.0, which contained JavaScript 1.1, was released in 1996. Then, the JavaScript 1.1 specification was submitted as a draft of a new standard to ECMA. With the explosive popularity of JavaScript, Netscape was very happy to start developing version 1.2. However, there was a problem: ECMA did not accept Netscape's draft. Soon after the release of Netscape Navigator 3.0, Microsoft released IE 3.0. This version of IE contained JScript 1.0 (the name of Microsoft's own JavaScript implementation), which was originally planned to be comparable to JavaScript 1.1. However, due to incomplete documentation and some inappropriate duplicate features, JScript 1.0 was far from reaching the level of JavaScript 1.1.

Before the finalization of the first edition of ECMA-262, Netscape Navigator 4.0, which included JavaScript 1.2, was released in 1997. Later that year, the ECMA-262 standard was accepted and standardized. Therefore, JavaScript 1.2 is not compatible with the first edition of ECMAScript, although ECMAScript should be based on JavaScript 1.1.

The next step for JScript was the inclusion of JScript 3.0 in IE 4.0 (version 2.0 was released with IIS 3.0, but was not included in the browser). Microsoft heavily promoted JScript 3.0 as the world's first truly ECMA-compliant scripting language. At that time, ECMA-262 had not been finalized yet, so JScript 3.0 suffered the same fate as JavaScript 1.2 - it still did not meet the final ECMAScript standard.

Netscape chose to upgrade its JavaScript implementation in Netscape Navigator 4.06. JavaScript 1.3 finally made Netscape fully compliant with the first edition of ECMAScript. Netscape added support for the Unicode standard and achieved platform independence while retaining all the new features introduced in JavaScript 1.2.

When Netscape made its source code public as the Mozilla project, it was originally planned that JavaScript 1.4 would be embedded in Netscape Navigator 5.0. However, a bold decision - to redesign Netscape's code from scratch, destroyed this work. JavaScript 1.4 was only released as a server-side scripting language for Netscape Enterprise Server, and was never included in browsers thereafter.

Now, all mainstream web browsers comply with the third edition of ECMA-262.

The following table lists the ECMAScript support in most popular web browsers:

Browser DOM compatibility
Netscape Navigator 2.0 -
Netscape Navigator 3.0 -
Netscape Navigator 4.0 - 4.05 -
Netscape Navigator 4.06 - 4.79 Edition 1
Netscape 6.0+ (Mozilla 0.6.0+) Edition 3
Internet Explorer 3.0 -
Internet Explorer 4.0 -
Internet Explorer 5.0 Edition 1
Internet Explorer 5.5+ Edition 3
Opera 6.0 - 7.1 Edition 2
Opera 7.2+ Edition 3
Safari 1.0+/Konqueror ~ 2.0+ Edition 3

DOM

DOM (Document Object Model) is an application programming interface (API) for HTML and XML. DOM organizes the entire page into a document consisting of a hierarchy of nodes. Each part of an HTML or XML page is a derivative of a node. Consider the following HTML page:

<html>
  <head>
    <title>Sample Page</title>
  </head>
  <body>
    <p>hello world!</p>
  </body>
</html>

This code can be rendered as a node hierarchy diagram using DOM:

DOM node hierarchy diagram

DOM represents the document by creating a tree, thereby giving developers unprecedented control over the content and structure of the document. Nodes can be easily deleted, added, and replaced using the DOM API.

1. Why DOM is Indispensable

Since IE 4.0 and Netscape Navigator 4.0 began to support various forms of dynamic HTML (DHTML), developers were able for the first time to modify the appearance and content of a web page without reloading it. This was a major leap forward in Web technology, but it also brought about huge problems. Netscape and Microsoft each developed their own DHTML, thus ending the era when web developers could write a single HTML page that could be accessed by all browsers.

The industry decided that something must be done to maintain the cross-platform nature of the Web. They were worried that if Netscape and Microsoft were left to do as they pleased, the Web would inevitably be divided into two separate parts, each suitable only for specific browsers. Therefore, the group responsible for specifying Web communication standards, W3C (World Wide Web Consortium), began to develop DOM.

2. The Various Levels of DOM

DOM Level 1 was proposed by W3C in October 1998. It consists of two modules, namely DOM Core and DOM HTML. The former provides an XML-based document structure diagram for accessing and manipulating any part of the document; the latter adds some HTML-specific objects and methods, thereby extending DOM Core.

Note that DOM is not exclusive to JavaScript; in fact, many other languages have implemented it. However, the DOM in web browsers has been implemented with ECMAScript and is now a significant part of the JavaScript language.

DOM Level 1 is just a goal, that is, planning the structure of the document, while the goals of DOM Level 2 are much broader. The extension of the original DOM adds support for mouse and user interface events (DHTML has rich support for this), range, traversal (repeated execution of DOM document methods), and support for CSS (Cascading Style Sheets) through object interfaces. The original DOM Core introduced by Level 1 also adds support for XML namespaces.

DOM Level 2 introduces several new DOM modules to handle new interface types:

  • DOM Views - Describes tracking various views of the document (i.e., the document before and after CSS styling)
  • DOM Events - Describes the interfaces for events
  • DOM Styles - Describes the interfaces for handling CSS-based styles
  • DOM Traversal and Range - Describes the interfaces for traversing and manipulating the document tree

DOM Level 3 introduces methods for loading and maintaining documents in a unified way (included in the new module DOM Load and Save) and methods for validating documents (DOM Validation), thereby further expanding DOM. In Level 3, DOM Core is expanded to support all XML 1.0 features, including XML Infoset, XPath, and XML Base.

When learning DOM, you may encounter someone referring to DOM Level 0. Note that there is no such standard as DOM Level 0; it is just a historical reference point for DOM (DOM Level 0 refers to the original DHTML supported in IE 4.0 and Netscape Navigator 4.0).

3. Other DOM

In addition to DOM Core and DOM HTML, several other languages have published their own DOM standards. These languages are all based on XML, and each DOM adds unique methods and interfaces for the corresponding language:

  • Scalable Vector Graphics (SVG) 1.0
  • Digital Markup Language (MathML) 1.0
  • Synchronized Multimedia Integration Language (SMIL)

Note:If you wish to learn more about related content, please visit CodeW3C's SMIL Tutorial and SVG Tutorial.

In addition, other languages have also developed their own DOM implementations, such as Mozilla's XML User Interface Language (XUL). However, only the languages listed above are recommended standards by W3C.

4. DOM support in web browsers

DOM was a standard before it was implemented in web browsers. IE first tried DOM in version 5.0, but it was not until version 5.5 that it truly supported DOM, implementing DOM Level 1. Since then, IE has not introduced any new DOM features.

Netscape only introduced DOM support until Netscape 6 (Mozilla 0.6.0). Currently, Mozilla has the best DOM support, implementing complete Level 1, almost all Level 2, and some Level 3. (The goal of the Mozilla development team is to build a browser that is 100% compatible with the standard, and their work has paid off.)

Opera only added DOM support until version 7.0, and Safari has also implemented most of DOM Level 1. They are almost at the same level as IE 5.5, and in some cases, even surpass IE 5.5. However, when it comes to DOM support, all browsers are far behind Mozilla. The following table lists the support for DOM of commonly used browsers.

Browser DOM compatibility
Netscape Navigator 1.0 - 4.x -
Netscape 6.0+ (Mozilla 0.6.0+) Level 1, Level 2, Level 3 (part)
IE 2.0 - 4.x -
IE 5.0 Level 1 (minimum)
IE 5.5+ Level 1 (almost all)
Opera 1.0 - 6.0 -
Opera 7.0+ Level 1 (almost all), Level 2 (part)
Safari 1.0+/Konqueror ~ 2.0+ Level 1

Note:If you wish to further learn about DOM knowledge, please visit CodeW3C's HTML DOM Tutorial and XML DOM Tutorial.

BOM

IE 3.0 and Netscape Navigator 3.0 provided a feature - BOM (Browser Object Model), which can access and operate on browser windows. With BOM, developers can move windows, change the text in the status bar, and perform other actions not directly related to page content. What makes BOM unique and often suspect is that it is just a part of JavaScript, with no related standards.

BOM mainly handles browser windows and frames, but usually browser-specific JavaScript extensions are considered part of BOM. These extensions include:

  • Pop up a new browser window
  • Move, close the browser window, and adjust the window size
  • Location object providing detailed information about the Web browser
  • Screen object providing detailed information about the user's screen resolution
  • Support for cookies
  • IE expanded the BOM by adding the ActiveXObject class, which can instantiate ActiveX objects through JavaScript

Since there is no related BOM standard, each browser has its own BOM implementation. There are some de facto standards, such as having a window object and a navigation object, but each browser can define its own properties and methods for these objects or other objects.

See: