JavaScript technologies overview

Table of Contents

  1. Introducción
  2. JavaScript, el lenguaje básico (ECMAScript)
    1. ¿Qué entra en el ámbito ECMAScript?
    2. Compatibilidad con navegadores
    3. Future
  3. The DOM (Document Object Model)
    1. WebIDL
    2. The Core of the DOM
    3. HTML DOM
  4. Other notable APIs
  5. Browser support
  • Tags
  • Files

Introducción

Mientras que HTML se utiliza para almacenar el contenido y el formato de una página web y CSS codifica el estilo de cómo el contenido con formato debe ser gráficamente, JavaScript se utiliza para crear efectos ricos o aplicaciones web enriquecidas. Sin embargo, el término general "JavaScript" como se entiende en el contexto navegador de web contiene varios elementos muy diferentes. Uno de ellos es el núcleo del lenguaje (ECMAScript), otro es el DOM (Document Object Model).

JavaScript, el lenguaje básico (ECMAScript)

El núcleo del lenguaje de javaScript está estandarizado por el comité ECMA TC-39 como un lenguaje llamado ECMAScript. En Marzo del 2011, la última versión de la especificación es ECMAScript 5, los navegadores web más modernos implementan ECMAScript 3 y parte de ECMAScript 5.

¿Qué entra en el ámbito ECMAScript?

Entre otras cosas, ECMAScript define:

  • La sintaxis del lenguaje (reglas de análisis, palabras clave, control de flujo, inicialización literal de objeto ...)
  • Mecanismos de subsanación de errores (lanzar try/catch, la capacidad de crear Tipos de error definidos por el usuario)
  • Tipos (boolean, number, string, function, object...)
  • El objeto global. En un entorno de explorador, este objeto global es el objeto window. Algunas  funciones se atribuyen a este objeto (parseInt, parseFloat, decodeURI, encodeURI ...)
  • Un mecanismo de herencia basado en prototipos
  • Objetos y funciones propias preconstruidas (JSON, Math, Array, métodos de introspección...)
  • Modo estricto

Compatibilidad con navegadores

Históricamente, las funciones de ECMAScript fueron apoyadas bién y de una manera interoperable. A Junio de 2011, las diferencias entre las implementaciones se pueden encontrar en la documentación de apoyo de ECMAScript 5. Algunos recursos en la documentación de ECMAScript sobre la compatibilidad entre navegadores.

Future

The proposed fourth edition of ECMA-262 (ECMAScript 4 or ES4) would have been the first major update to ECMAScript since the third edition was published in 1999. As of August 2008, the ECMAScript 4th edition proposal has been scaled back into a project codenamed ECMAScript Harmony, that defines among others, 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 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.