Visão geral da tecnologia JavaScript

Introdução

Enquanto o HTML é usado para armazenar o conteúdo e a formatação de uma página web o CSS codifica o estilo de como o conteúdo formatado deve ser exibido graficamente, JavaScript é usado para adicionar interatividade a uma página web ou criar aplicações web ricas.

No entanto, o termo genérico "JavaScript" tal como é entendido no contexto navegador contém vários elementos diferentes. Um deles é a linguagem principal (ECMAScript), outra é a coleção das Web APIs, incluindo o DOM (Document Object Model).

JavaScript, a linguagem principal (ECMAScript)

O core da linguagem JavaScript é padronizado pelo comitê ECMA TC39 como uma linguagem chamada ECMAScript. A última versão da especificação é ECMAScript 5.1.

Esta linguagem core é também usada em ambientes não-browser, por exemplo em node.js.

O que se enquadra no escopo ECMAScript?

Entre outras coisas, o ECMAScript define:

A sintaxe da linguagem (regras de análise, palavras-chave, controle de fluxo, inicialização de objetos literais...)
Mecanismos para manuseio de erros (throw, try/catch, habilidade para criar tipos de erros definido pelo usuário)
Tipo (boolean, number, string, function, object...)
O objeto global. Num browser esse objeto global é o objeto window, mas o ECMAScript apenas define as APIs, não especificamente para navegadores, por exemplo: parseInt, parseFloat, decodeURI, encodeURI...
Um mecanismo de herança prototype-based
Objetos e funções embutidas (JSON, Math, Array.prototype, Object introspection...)
Strict mode

Suporte do Browser

Desde Agosto de 2014, as atuais versões dos principais navegadores implementaram o ECMAScript 5.1, mas versões mais antigas continuam usando a implementação do ECMAScript 3 e apenas partes do ECMAScript 5. Navegadores mais modernos já implementaram grande parte do ECMAScript 6.

Futuro

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.

Internationalization API

A Especificação da Internationalization API do ECAMSCRIPT is an addition to the ECMAScript Language Specification, also standardized by Ecma TC39. The internationalization API provides collation (string comparison), number formatting, and date and time formatting for JavaScript applications, and lets applications choose the language and tailor the functionality to their needs. The standard was approved in December 2012; the status of implementations in browsers is tracked in the documentation of the Intl object.

The Web APIs and the DOM

WebIDL

A Especificação da WebIDL provê a junção entre as tecnologias DOM e o ECMAScript.

O núcleo do DOM

O Document Object Model (DOM) is a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML and XML documents. Objects in the DOM tree may be addressed and manipulated by using methods on the objects. 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.

Looking for the Document object, Window object, and the other DOM elements? Read the Gecko DOM Documentation.

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.