MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Tradução em progresso.

Introdução

Enquanto o HTML é usado para armazenar o conteúdo e a formatação de uma página web e o CSS define a formatação e a aparência, o JavaScript é usado para adicionar interatividade a uma página web e criar aplicações web ricas.

No entanto, o termo genérico "JavaScript" tal como é entendido no contexto do  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

A 6ª edição principal do ECMAScript foi oficialmente aprovada e publicada como norma em 17 de junho de 2015 pela Assembléia Geral da ECMA. Desde então, as Edições ECMAScript são publicadas anualmente.

Internationalization API

A Especificação da Internationalization API do ECMASCRIPT é uma adição da Especificação de Linguagem ECMAScript, também padronizada pela Ecma TC39. A API de internacionalização fornece intercalação (comparação de string), formato numérico, e dados e tempo para aplicações, e permite que aplicativos escolham o idioma e adaptem a funcionalidade às suas necessidades. O padrão foi aprovado em dezembro de 2012; O status das implementações nos navegadores é rastreado na documentação do objeto Intl.

As APIs Web e o 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) é uma convenção cross-platform e language-independent para representar e interagir com objetos em documentos HTML, XHTML, e XML. Objetos no DOM tree podem ser adereçados e apontados utilizando métodos em objetos. O Core Document Object Model é padronizado pela W3C. Ela define inferfaces language-agnosticque abstraem documentos HTML e XML como objetos e mecanismos para manipular essa abstração. Entre as definições do DOM, podemos encontrar:

  • A estrutura do documento, um tree model, e o DOM Event architecture no DOM core: Node, Element, DocumentFragment, Document, DOMImplementation, Event, EventTarget, …
  • Uma definição menos rigorosa do DOM Event Architecture, assim como eventos específicos no DOM events.
  • Outras coisas como o DOM Traversal e o DOM Range.

Pela perspectiva do EXMScript, objetos definidos na especificação do DOM são chamados de "host objects".

HTML DOM

HTML, a linguagem de marcação da Web, é especificada nos termos do DOM. Situado além dos conceitos de abstração definidos no DOM Core, o HTML também define o significado dos elementos. O HTML DOM inclui coisas como a propriedade className em elementos HTML, ou APIs como document.body.

A especificação HTML também define restrições nos objetos; por exemplo, ele requer que todos os filhos de um elemento ul, que representa uma lista desordenada, a serem elementos li, que representam itens de lista. Em lihas gerais, ele também proíbe o uso de elementos e atributos que não estão definidos no padrão.

Procurando pelo Document object, Window object, e outros elementos DOM? Leia o Gecko DOM Documentation.

Outras APIs de destaque

  • As funções setTimeout e setInterval foram inicialmente especificadas na interface Window no Padrão HTML.
  • XMLHttpRequest. API que permite enviar requisições HTTP assíncronas.
  • CSS Object Model. O CSSOM é utilizado para abstrair regras CSS como objetos
  • WebWorkers. API que permite computação paralela.
  • WebSockets. API que permite comunicação bi-direcional de baixo-nível.
  • Canvas 2D Context. API de desenho para o elemento canvas.

Suporte de Navegadores

Todo desenvolvedor já percebeu que o DOM é uma bagunça. A uniformidade no suporte dos Navegadores varia muito de feature para feature. A principal razão para essa situação é o fato de que muitas features importantes do DOM possuem (quando possuem) especificações não muito claras. Além disso, diferentes Navegadores adicionaram features incompatíveis para a sobreposição de casos de uso (como o event model do Internet Explorer). A atual (Junho de 2011) tendência é que a W3C e particularmente a WHATWG estão definindo features mais antigas em detalhes, a fim de melhorar a interoperabilidade. Seguindo esta tendência, Navegadores estão melhorando suas implementações baseados nessas especificações.

Uma abordagem comum, porém não a mais confiável, para compatibilidade cross-browser é utilizar a biblioteca JavaScript. Essas bibliotecas abstrem as features do DOM e garantem que  suas API's funcionem de forma similar nos navegadores. Alguns dos frameworks mais utilizados são o jQuery, o prototype, e o YUI.

Etiquetas do documento e colaboradores

 Última atualização por: jessicamorim42,