JavaScript technologies overview

  • Revision slug: JavaScript_technologies_overview
  • Revision title: JavaScript technologies overview
  • Revision id: 6404
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment 2 words added, 2 words removed; page display name reset to default

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 all the DOM (Document Object Model) interfaces and another one is all the other JavaScript interfaces or objects which are in the web browsers but have nothing to do with the DOM which in this article will be defined under the BOM (Browser Object Model) umbrella term.

Historical note

Here is how JavaScript came to life, blablabla... As some point, it was called DHTML... Refer to this page

JavaScript, the core langage (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 March 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)

The 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 in DOM core: Node, Element, DocumentFragment, Document, DOMImplementation... This specification defines a document called ECMAScript language binding which describes how ECMAScript (JavaScript) implementations should implement the interfaces.
  • DOM events with the DOM Event Architecture and interfaces such as Event, EventTarget, DocumentEvent...
  • Other things such as DOM traversal

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

Other JavaScript technologies

Other features are defined outside of the DOM and ECMAScript. Some weren't standardized until the WHATWG started to list these features and add them to the HTML5 spec. They are now standardized by the WHATWG, W3C or both.

setTimeout, setInterval

These functions which really aren't browser specific have been first specified in HTML Standard as part of WindowTimers.

HTML DOM

DOM is an abstraction that is common to XML and HTML documents. However, HTML has some rules, restrictions and semantics that aren't true with XML (limited number of element names, limited number of attributes, rules of element inclusion like the fact that within a <ul> element, there can only be <ul> elements). HTML DOM abstracts these specificities. Most of this document content is being redefined in the HTML Standard specification in order to standardize what is actually in web browsers.

Other notable APIs

DOM and BOM browser support

Every web developer has experienced that the DOM is a mess. It is roughly the same for the BOM. Browser support uniformity varies a lot form feature to feature. This is mostly due to the fact that DOM and BOM features haven't been standardized right away and web browsers have added features for overlapping use cases (like the Internet Explorer event model). The current (March 2011) trend is, from the specification point of view (WHATWG, W3C) to catch up on features which are in browsers and from the browser point of view to catch up on specifications and good ideas of other browsers.

In order to face cross-browser issues, one of the most common solution is to use a JavaScript library. These libraries abstract DOM and BOM features and take care of cross-browser support. Some of the most famous and widely used are: jQuery, prototype, YUI.

WebIDL

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 all the DOM (Document Object Model) interfaces and another one is all the other JavaScript interfaces or objects which are in the web browsers but have nothing to do with the DOM which in this article will be defined under the BOM (Browser Object Model) umbrella term.</p>
<h3>Historical note</h3>
<p><small>Here is how JavaScript came to life, blablabla... As some point, it was called DHTML... Refer to <a href="/en/The_DOM_and_JavaScript" title="en/The_DOM_and_JavaScript">this page</a></small></p>
<h2>JavaScript, the core langage (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 March 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>
<p>The 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 in <a class=" external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html">DOM core</a>: Node, Element, DocumentFragment, Document, DOMImplementation... This specification defines a document called <a class=" external" href="http://www.w3.org/TR/DOM-Level-3-Core/ecma-script-binding.html">ECMAScript language binding</a> which describes how ECMAScript (JavaScript) implementations should implement the interfaces.</li> <li><a class=" external" href="http://www.w3.org/TR/DOM-Level-3-Events/">DOM events</a> with the DOM Event Architecture and interfaces such as Event, EventTarget, DocumentEvent...</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></li>
</ul>
<p>From the ECMAScript point of view, objects defined in the DOM specification are called "host objects".</p>
<h2>Other JavaScript technologies</h2>
<p>Other features are defined outside of the DOM and ECMAScript. Some weren't standardized until the WHATWG started to list these features and add them to the HTML5 spec. They are now standardized by the WHATWG, W3C or both.</p>
<h3>setTimeout, setInterval</h3>
<p>These functions which really aren't browser specific have been first specified in HTML Standard as part of <a class=" external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/timers.html#timers">WindowTimers</a>.</p>
<h3>HTML DOM</h3>
<p>DOM is an abstraction that is common to XML and HTML documents. However, HTML has some rules, restrictions and semantics that aren't true with XML (limited number of element names, limited number of attributes, rules of element inclusion like the fact that within a &lt;ul&gt; element, there can only be &lt;ul&gt; elements). <a class=" external" href="http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/html.html">HTML DOM</a> abstracts these specificities. Most of this document content is being redefined in the HTML Standard specification in order to standardize what is actually in web browsers.</p>
<h3>Other notable APIs</h3>
<ul> <li>XMLHttpRequest. API allowing to send asynchronous HTTP request.<a class=" external" href="http://www.w3.org/TR/XMLHttpRequest2/">Standardized by the W3C</a>.</li> <li>CSS Object Model. The CSSOM is used to abstract CSS rules as objects. <a class=" external" href="http://dev.w3.org/csswg/cssom/">Standardized by the W3C</a>.</li> <li>WebWorkers. API that allows parallel computation. <a class=" external" href="http://www.whatwg.org/specs/web-workers/current-work/">Standardized by the WHATWG</a></li> <li>WebSockets. API that allow low-level bidirectional communication. <a class=" external" href="http://dev.w3.org/html5/websockets/">Standardized by the W3C</a></li> <li>Canvas 2D Context. Drawing API for the canvas element. <a class=" external" href="http://dev.w3.org/html5/2dcontext/">Standardized by the W3C</a>.</li>
</ul>
<h2>DOM and BOM 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>. It is roughly the same for the BOM. Browser support uniformity varies a lot form feature to feature. This is mostly due to the fact that DOM and BOM features haven't been standardized right away and web browsers have added features for overlapping use cases (like the Internet Explorer event model). The current (March 2011) trend is, from the specification point of view (WHATWG, W3C) to catch up on features which are in browsers and from the browser point of view to catch up on specifications and good ideas of other browsers.</p>
<p>In order to face cross-browser issues, one of the most common solution is to use a JavaScript library. These libraries abstract DOM and BOM features and take care of cross-browser support. Some of the most famous and widely used are: <a class=" external" href="http://jquery.com/">jQuery</a>, <a class=" external" href="http://www.prototypejs.org/">prototype</a>, <a class=" external" href="http://developer.yahoo.com/yui/">YUI</a>.</p>
<p>WebIDL</p>
Revert to this revision