JavaScript technologies overview

  • Revision slug: JavaScript_technologies_overview
  • Revision title: JavaScript technologies overview
  • Revision id: 6409
  • Created:
  • Creator: dbruant
  • Is current revision? No
  • Comment one or more formatting changes

Revision Content

Introduction

While HTML is used to store the content and formatting of a web page and CSS encodes the style of how the formatted content should be graphically displayed, JavaScript is used to create rich effects or rich web applications. However, the umbrella term "JavaScript" as understood in the web browser context contains several very different elements. One of them is the core language (ECMAScript), another is the DOM (Document Object Model).

JavaScript, the core language (ECMAScript)

The core language of JavaScript is standardized by the ECMA TC-39 committee as a language named ECMAScript. As of March 2011, the latest version of the specification is ECMAScript 5, most modern web browsers implement ECMAScript 3 and parts of ECMAScript 5.

What falls under the ECMAScript scope?

Among other things, ECMAScript defines:

  • The language syntax (parsing rules, keywords, control flow, object literal initialization...)
  • Error handling mecanisms (throw, try/catch, ability to create user-defined Error types)
  • Types (boolean, number, string, function, object...)
  • The global object. In a browser environment, this global object is the window object. A couple of functions are attached to this object (parseInt, parseFloat, decodeURI, encodeURI...)
  • A prototype-based inheritance mechanism
  • Built-in objects and functions (JSON, Math, Array.prototype methods, Object introspection methods...)
  • Strict mode

Browser support

Historically, ECMAScript features were supported well and in an interoperable manner. As of June 2011, differences between implementations can be found in ECMAScript 5 support. Some resources document ECMAScript 5 browser support.

Future

The next version of ECMAScript is named "Harmony". It defines things like Proxies or the const keyword. Progress can be followed here.

The DOM (Document Object Model)

WebIDL

The WebIDL specification provides the glue between the DOM technologies and ECMAScript.

The Core of the DOM

The Core Document Object Model is standardized by the W3C. It defines language-agnostic interfaces which abstract HTML and XML documents as objects and mechanisms to manipulate this abstraction. Among the things defined by the DOM, we can find:

  • The document structure, a tree model, and the DOM Event architecture in DOM core: Node, Element, DocumentFragment, Document, DOMImplementation, Event, EventTarget, …
  • A less rigorous definition of the DOM Event Architecture, as well as specific events in DOM events.
  • Other things such as DOM Traversal and DOM Range.

From the ECMAScript point of view, objects defined in the DOM specification are called "host objects".

HTML DOM

HTML, the Web's markup language, is specified in terms of the DOM. Layered above the abstract concepts defined in DOM Core, HTML also defines the meaning of elements. The HTML DOM includes such things as the className property on HTML elements, or APIs such as {{ domxref("document.body") }}.

The HTML specification also defines restrictions on documents; for example, it requires all children of a ul element, which represents an unordered list, to be li elements, as those represent list items. In general, it also forbids using elements and attributes that aren't defined in a standard.

Other notable APIs

  • The setTimeout and setInterval functions have been first specified on the Window interface in HTML Standard.
  • XMLHttpRequest. API allowing to send asynchronous HTTP request.
  • CSS Object Model. The CSSOM is used to abstract CSS rules as objects
  • WebWorkers. API that allows parallel computation.
  • WebSockets. API that allows low-level bidirectional communication.
  • Canvas 2D Context. Drawing API for the canvas element.

Browser support

Every web developer has experienced that the DOM is a mess. Browser support uniformity varies a lot from feature to feature. The main reason for this situation is the fact that many important DOM features have had very unclear, if any, specifications. Also, different web browsers have added incompatible features for overlapping use cases (like the Internet Explorer event model). The current (as of June 2011) trend is that the W3C and particularly the WHATWG are defining older features in detail, in order to improve interoperability. Following this trend, browsers are improving their implementations based on these specifications.

One common, though perhaps not the most reliable, approach to cross-browser compatibility is to use a JavaScript library. These libraries abstract DOM features and ensure their APIs work similarly in different browsers. Some of the most widely used frameworks are jQuery, prototype, and YUI.

Revision Source

<h2>Introduction</h2>
<p>While HTML is used to store the content and formatting of a web page and CSS encodes the style of how the formatted content should be graphically displayed, JavaScript is used to create rich effects or rich web applications. However, the umbrella term "JavaScript" as understood in the web browser context contains several very different elements. One of them is the core language (ECMAScript), another is the DOM (Document Object Model).</p>
<h2>JavaScript, the core language (ECMAScript)</h2>
<p>The core language of JavaScript is standardized by the ECMA TC-39 committee as a language named <a href="/en/JavaScript/Language_Resources" title="en/JavaScript/Language_Resources">ECMAScript</a>. As of March 2011, the latest version of the specification is <a class=" external" href="http://wiki.ecmascript.org/lib/exe/fetch.php?id=start&amp;cache=cache&amp;media=resources:tc39-2010-062-rev5p.pdf">ECMAScript 5</a>, most modern web browsers implement ECMAScript 3 and parts of ECMAScript 5.</p>
<h3>What falls under the ECMAScript scope?</h3>
<p>Among other things, <a href="/en/JavaScript/Language_Resources" title="en/JavaScript/Language_Resources">ECMAScript</a> defines:</p>
<ul> <li>The language syntax (parsing rules, keywords, control flow, object literal initialization...)</li> <li>Error handling mecanisms (throw, try/catch, ability to create user-defined Error types)</li> <li>Types (boolean, number, string, function, object...)</li> <li>The global object. In a browser environment, this global object is the window object. A couple of functions are attached to this object (parseInt, parseFloat, decodeURI, encodeURI...)</li> <li>A prototype-based inheritance mechanism</li> <li>Built-in objects and functions (JSON, Math, Array.prototype methods, Object introspection methods...)</li> <li>Strict mode</li>
</ul>
<h3>Browser support</h3>
<p>Historically, ECMAScript features were supported well and in an interoperable manner. As of June 2011, differences between implementations can be found in ECMAScript 5 support. <a class=" external" href="http://kangax.github.com/es5-compat-table/">Some resources</a> document ECMAScript 5 browser support.</p>
<h3>Future</h3>
<p>The next version of ECMAScript is named "Harmony". It defines things like Proxies or the <code>const</code> keyword. Progress can be followed <a class=" external" href="http://wiki.ecmascript.org/doku.php">here</a>.</p>
<h2>The DOM (Document Object Model)</h2>
<h3>WebIDL</h3>
<p>The <a class=" external" href="http://dev.w3.org/2006/webapi/WebIDL/" title="http://dev.w3.org/2006/webapi/WebIDL/">WebIDL specification</a> provides the glue between the DOM technologies and ECMAScript.</p>
<h3>The Core of the DOM</h3>
<p>The Core Document Object Model is standardized by the W3C. It defines language-agnostic interfaces which abstract HTML and XML documents as objects and mechanisms to manipulate this abstraction. Among the things defined by the DOM, we can find:</p>
<ul> <li>The document structure, a tree model, and the DOM Event architecture in <a class=" external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html" title="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html">DOM core</a>: Node, Element, DocumentFragment, Document, DOMImplementation, Event, EventTarget, …</li> <li>A less rigorous definition of the DOM Event Architecture, as well as specific events in <a class=" external" href="http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html" title="http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html">DOM events</a>.</li> <li>Other things such as <a class=" external" href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html">DOM Traversal</a> and <a class=" external" href="http://html5.org/specs/dom-range.html" title="http://html5.org/specs/dom-range.html">DOM Range</a>.</li>
</ul>
<p>From the ECMAScript point of view, objects defined in the DOM specification are called "host objects".</p>
<h3>HTML DOM</h3>
<p><a class=" external" href="http://www.whatwg.org/html" title="http://www.whatwg.org/html">HTML</a>, the Web's markup language, is specified in terms of the DOM. Layered above the abstract concepts defined in DOM Core, HTML also defines the <em>meaning</em> of elements. The HTML DOM includes such things as the <code>className</code> property on HTML elements, or APIs such as {{ domxref("document.body") }}.</p>
<p>The HTML specification also defines restrictions on documents; for example, it requires all children of a <code>ul</code> element, which represents an unordered list, to be <code>li</code> elements, as those represent list items. In general, it also forbids using elements and attributes that aren't defined in a standard.</p>
<h2>Other notable APIs</h2>
<ul> <li>The setTimeout and setInterval functions have been first specified on the <a class=" external" href="http://www.whatwg.org/html/#window" title="http://www.whatwg.org/html/#window">Window</a> interface in HTML Standard.</li> <li><a class=" external" href="http://dev.w3.org/2006/webapi/XMLHttpRequest-2/" title="http://dev.w3.org/2006/webapi/XMLHttpRequest-2/">XMLHttpRequest.</a> API allowing to send asynchronous HTTP request.</li> <li><a class=" external" href="http://dev.w3.org/csswg/cssom/">CSS Object Model.</a> The CSSOM is used to abstract CSS rules as objects</li> <li><a class=" external" href="http://www.whatwg.org/specs/web-workers/current-work/">WebWorkers.</a> API that allows parallel computation.</li> <li><a class=" external" href="http://www.whatwg.org/C/#network">WebSockets.</a> API that allows low-level bidirectional communication.</li> <li><a class=" external" href="http://www.whatwg.org/html/#2dcontext" title="http://www.whatwg.org/html/#2dcontext">Canvas 2D Context.</a> Drawing API for the canvas element.</li>
</ul><h2>Browser support</h2>
<p>Every web developer has experienced that <a class="external" href="http://ejohn.org/blog/the-dom-is-a-mess/">the DOM is a mess</a>. Browser support uniformity varies a lot from feature to feature. The main reason for this situation is the fact that many important DOM features have had very unclear, if any, specifications. Also, different web browsers have added incompatible features for overlapping use cases (like the Internet Explorer event model). The current (as of June 2011) trend is that the W3C and particularly the WHATWG are defining older features in detail, in order to improve interoperability. Following this trend, browsers are improving their implementations based on these specifications.</p>
<p>One common, though perhaps not the most reliable, approach to cross-browser compatibility is to use a JavaScript library. These libraries abstract DOM features and ensure their APIs work similarly in different browsers. Some of the most widely used frameworks are <a class=" external" href="http://jquery.com/">jQuery</a>, <a class=" external" href="http://www.prototypejs.org/">prototype</a>, and <a class=" external" href="http://developer.yahoo.com/yui/">YUI</a>.</p>
Revert to this revision