path: root/files/pt-br/web/javascript/javascript_technologies_overview/index.html

---
title: Visão geral das tecnologias JavaScript
slug: Web/JavaScript/JavaScript_technologies_overview
translation_of: Web/JavaScript/JavaScript_technologies_overview
---
<h2 id="Introdução">Introdução</h2>

<p><span id="result_box" lang="pt"><span class="hps">Enquanto o <a href="/en-US/docs/Web/HTML">HTML</a></span> <span class="hps">é usado para armazenar</span> <span class="alt-edited hps">o conteúdo e a formatação</span> <span class="hps">de uma página</span> <span class="hps">web</span> e <span class="alt-edited hps">o</span> <a href="/en-US/docs/Web/CSS">CSS</a> <span class="hps">define a formatação e a aparência</span><span>, o</span><a href="/en-US/docs/Web/JavaScript"> JavaScript</a> <span class="hps">é usado para</span> <span class="hps">adicionar interatividade a</span> <span class="hps">uma página web</span> e <span class="hps">criar aplicações web</span> <span class="hps">ricas</span><span>.</span></span></p>

<p><span lang="pt"><span class="hps">No entanto</span><span>,</span> <span class="hps">o</span> <span class="hps">termo genérico</span> <span class="atn hps">"</span><span>JavaScript</span><span>"</span> <span class="hps">tal como é entendido</span> <span class="hps">no contexto</span> do <span class="hps">navegador</span> <span class="hps">contém</span> <span class="hps">vários</span> <span class="hps">elementos</span> bem <span class="hps">diferentes</span><span>.</span> <span class="hps">Um deles é</span> <span class="hps">a linguagem principal</span> <span class="atn hps">(</span><span>ECMAScript</span><span>), outra</span> <span class="hps">é a coleção</span> <span class="hps">das <a href="/en-US/docs/Web/Reference/API">Web APIs</a></span><span class="hps">, incluindo</span> <span class="hps">o</span> <span class="hps">DOM</span> <span class="atn hps">(</span><span>Document Object Model)</span><span>.</span></span></p>

<h2 id="JavaScript_a_linguagem_principal_(ECMAScript)"><span class="short_text" id="result_box" lang="pt"><span class="hps">JavaScript,</span> <span class="hps">a linguagem principal</span> <span class="atn hps">(</span><span>ECMAScript</span><span>)</span></span></h2>

<div class="almost_half_cell" id="gt-res-content">
<div dir="ltr" style="zoom: 1;"><span id="result_box" lang="pt"><span class="hps">O núcleo da linguagem</span> <span class="hps">JavaScript</span> <span class="hps">é padronizado</span> <span class="hps">pelo comitê</span> <span class="hps">ECMA</span> <span class="hps">TC39</span> <span class="hps">como uma linguagem</span> <span class="hps">chamada</span> <a href="/en-US/docs/JavaScript/Language_Resources" title="en-US/docs/JavaScript/Language_Resources">ECMAScript</a><span>.</span> <span class="hps">A última versão</span> <span class="hps">da especificação é</span> <a class="external" href="http://ecma-international.org/ecma-262/5.1/">ECMAScript 5.1</a><span class="hps">.</span></span></div>

<div dir="ltr" style="zoom: 1;"> </div>
</div>

<p>Este núcleo da linguagem é também usado em ambientes fora do navegador, por exemplo em <a href="http://nodejs.org/">node.js</a>.</p>

<h3 id="O_que_se_enquadra_no_escopo_ECMAScript"><span class="short_text" id="result_box" lang="pt"><span class="hps">O que</span> <span class="alt-edited hps">se enquadra no escopo</span> <span class="hps">ECMAScript</span><span>?</span></span></h3>

<p>Entre outras coisas, o ECMAScript define:</p>

<ul>
 <li>A sintaxe da linguagem (regras de análise, palavras-chave, controle de fluxo, inicialização de objetos literais...)</li>
 <li>Mecanismos para manuseio de erros (<em>throw</em>, <em>try/catch</em>, habilidade para criar tipos de erros definido pelo usuário)</li>
 <li>Tipos (<em>boolean</em>, <em>number</em>, <em>string</em>, <em>function</em>, <em>object</em>...)</li>
 <li>O objeto global. Num navegador esse objeto global é o objeto <em>window</em>, mas o ECMAScript apenas define as APIs, não especificamente para navegadores, por exemplo: <em>parseInt</em>, <em>parseFloat</em>, <em>decodeURI</em>, <em>encodeURI</em>...</li>
 <li>Um mecanismo de herança baseado em protótipo</li>
 <li>Objetos e funções embutidas (<em>JSON</em>, <em>Math</em>, <em>Array.prototype</em>, <em>Object introspection</em>...)</li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode">Modo estrito</a> (rigoroso)</li>
</ul>

<h3 id="Suporte_do_navegador">Suporte do navegador</h3>

<p>Desde Agosto de 2014, as atuais versões dos principais navegadores implementaram o <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_5_support_in_Mozilla">ECMAScript 5.1</a> e o <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_2015_support_in_Mozilla">ECMAScript 2015</a>, 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 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla">ECMAScript 6</a>.</p>

<h3 id="Futuro">Futuro</h3>

<p><span id="result_box" lang="pt"><span>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.</span> <span>Desde então, as Edições ECMAScript são publicadas anualmente.</span></span></p>

<h3 id="API_de_Internacionalização">API de Internacionalização</h3>

<p><span id="result_box" lang="pt"><span>A <a href="http://ecma-international.org/ecma-402/1.0/">API de Especificação de Internacionalização do ECMASCRIPT</a> é uma adição para a Especificação de Linguagem ECMAScript, também padronizada pela Ecma TC39.</span> <span>A API de internacionalização fornece intercalação (comparação de string), formatação numérica, formatação de data e tempo para aplicações JavaScript, permitindo que aplicativos escolham o idioma e adaptem a funcionalidade às suas necessidades.</span> <span>O padrão foi aprovado em dezembro de 2012;</span> <span>O status das implementações nos navegadores é rastreado na documentação do objeto Intl. A especificação de </span></span>Internacionalização hoje em dia também é ratificada anualmente e os navegadores aprimoram as suas implementações constantemente.</p>

<h2 id="As_APIs_Web_e_o_DOM">As APIs Web e o DOM</h2>

<h3 id="WebIDL">WebIDL</h3>

<p>A <a class="external" href="http://dev.w3.org/2006/webapi/WebIDL/">Especificação da WebIDL </a>provê a junção entre as tecnologias DOM e o ECMAScript.</p>

<h3 id="O_núcleo_do_DOM">O núcleo do DOM</h3>

<p>O Document Object Model (DOM) é uma <strong>convenção multiplataforma</strong> e <strong>lndependente de linguagem </strong>para representação e interação com objetos em documentos HTML, XHTML, e XML. Objetos no <strong>DOM tree</strong> (árvore do DOM) podem ser adereçados e manipulados utilizando métodos em objetos. A W3C padroniza o Core Document Object Model (Núcleo do Documento do Modelo de Objeto), o qual define interfaces de agnóstico de linguagem que abstraem documentos HTML e XML como objetos, e também define mecanismos para manipular essa abstração. Entre as definições do DOM, podemos encontrar:</p>

<ul>
 <li>A estrutura do documento, um tree model (modelo de árvore), e a arquitetura do DOM Event (Evento do DOM) no <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html">DOM core</a> (núceo do DOM): Node, Element, DocumentFragment, Document, DOMImplementation, Event, EventTarget, …</li>
 <li>Uma definição menos rigorosa do DOM Event Architecture, assim como eventos específicos no <a class="external" href="http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html">DOM events</a>.</li>
 <li>Outras coisas como o <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html">DOM Traversal</a> e o <a class="external" href="http://html5.org/specs/dom-range.html">DOM Range</a>.</li>
</ul>

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

<h3 id="HTML_DOM">HTML DOM</h3>

<p><a class="external" href="http://www.whatwg.org/html">HTML</a>, 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 <em>significado</em> dos elementos. O HTML DOM inclui coisas como a propriedade <code>className</code> em elementos HTML, ou APIs como {{ domxref("document.body") }}.</p>

<p>A especificação HTML também define restrições nos objetos; por exemplo, ela requer que todos os filhos de um elemento <code>ul</code>, que representam uma lista desordenada, sejam elementos <code>li</code>, que representem itens de lista. Em linhas gerais, ele também proíbe o uso de elementos e atributos que não estão definidos em um padrão.</p>

<p>Procurando pelo <a href="/en-US/docs/DOM/document" title="https://developer.mozilla.org/en-US/docs/DOM/document">Document object</a>, <a href="/en-US/docs/DOM/window" title="/en-US/docs/DOM/window">Window object</a>, e outros elementos DOM? Leia a<a href="/en-US/docs/Gecko_DOM_Reference" title="/en-US/docs/Gecko_DOM_Reference"> Documentação do DOM</a>.</p>

<h2 id="Outras_APIs_de_destaque">Outras APIs de destaque</h2>

<ul>
 <li>As funções setTimeout e setInterval foram inicialmente especificadas na interface <a class="external" href="http://www.whatwg.org/html/#window">Window</a> no Padrão HTML.</li>
 <li><a class="external" href="http://dev.w3.org/2006/webapi/XMLHttpRequest-2/">XMLHttpRequest.</a> Possibilita enviar requisições HTTP assíncronas.</li>
 <li><a class="external" href="http://dev.w3.org/csswg/cssom/">CSS Object Model.</a> O CSSOM é utilizado para abstrair regras CSS como objetos</li>
 <li><a class="external" href="http://www.whatwg.org/specs/web-workers/current-work/">WebWorkers.</a> API que permite computação paralela.</li>
 <li><a class="external" href="http://www.whatwg.org/C/#network">WebSockets.</a> API que permite comunicação bi-direcional de baixo-nível.</li>
 <li><a class="external" href="http://www.whatwg.org/html/#2dcontext">Canvas 2D Context.</a> API de ilustração (desenho) para o elemento canvas.</li>
</ul>

<h3 id="Suporte_de_Navegadores">Suporte de Navegadores</h3>

<p>Todo desenvolvedor já percebeu que <a class="external" href="http://ejohn.org/blog/the-dom-is-a-mess/">o DOM é uma bagunça</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.</p>

<p>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 <a class="external" href="http://jquery.com/">jQuery</a>, o <a class="external" href="http://www.prototypejs.org/">prototype</a>, e o <a class="external" href="http://developer.yahoo.com/yui/">YUI</a>.</p>