Utilizando a função "alerta" - Acessibilidade

Utilizando a função "alerta"
============================

### Descrição

Esta técnica mostra como utilizar o atributo *role* alert e demonstra seu efeito em navegadores e tecnologias assistivas.

O atributo de alerta é utilizado para comunicar alguma mensagem importante e, frequentemente, urgente. Quando este atributo (*role*) estiver ligado a um elemento, o navegador vai enviar um evento acessível de alerta aos produtos de tecnologia assistiva que, então, poderão notificar seus utilizadores sobre o que estiver acontecendo. O atributo *alert* é mais útil para as informações que requerem a atenção imediata na tela. Por exemplo:

* Um valor inválido foi inserido em um campo de um formulário
* A sessão atual expirou
* a conexão com o servidor foi perdida, as mudanças locais não serão salvas.

Por causa da sua natureza intrusiva, o atributo de alerta deve ser usado moderadamente e, apenas, nas situações que exigirem atenção imediata. Mudanças dinâmicas que são menos urgentes devem receber um método menos agressivo, tal como a aria-live="polite", ou outros atributos (*roles*) para regiões dinâmicas.

### Efeitos possíveis sobre as tecnologias assistivas e seus utilizadores

Quando o atributo (*role*) alerta é adicionado a um elemento, ou este se torna visível, o identificador de navegação (*user agent*) deve fazer o seguinte:

* Exibir o elemento como tendo uma função de alerta (*alert role*) na API de acessibilidade do sistema operacional.
* Disparar um evento de alerta acessível, usando a API de acessibilidade do sistema operacional, se houver suporte para tal.

Os produtos de tecnologias assistivas devem atender tal evento e notificar seus utilizadores, em conformidade.

* Leitores de tela podem interromper a produção corrente (quer sejam a fala, ou o braille) e, imediatamente, anunciar, ou exibir, a mensagem de alerta.
* Ampliadores de tela podem, visualmente, indicar que houve um alerta e qual era o seu texto.

**Nota:** As opiniões podem divergir sobre como uma tecnologia assistiva deve gerenciar esta técnica. A informação oferecida acima é uma dessas opiniões e, portanto, não é normativa.

### Exemplos

#### Exemplo 1: Adicionando o atributo (*role*) no código HTML

O trecho abaixo mostra como o atributo *role alert* é inserido, diretamente, no código-fonte HTML. No momento em que o elemento termina de carregar, o leitor de tela deve ser notificado do alerta. Se o elemento já estiver no código-fonte original quando a página carregar, o leitor de tela vai anunciar o erro imediatamente após a apresentação do título da página.

```html
<h2 role="alert">
  Your form could not be submitted because of 3 validation errors.(Seu
  formulário não pode ser submetido devido a 3 erros de validação)
</h2>
```

#### Exemplo 2: Adicionando, dinamicamente, um elemento com a função de alerta

Esta parte mostra como criar, de forma dinâmica, um elemento com uma função de alerta e como adicioná-lo à estrutura do documento:

```js
var myAlert = document.createElement("p");
myAlert.setAttribute("role", "alert");
var myAlertText = document.createTextNode(
  "You must agree with our terms of service to create an account.(Você deve concordar com os nossos termos de serviço, a fim de criar uma conta)",
);
myAlert.appendChild(myAlertText);
document.body.appendChild(myAlertText);
```

**Nota:** O mesmo resultado pode ser obtido com menos código, quando se utiliza uma biblioteca de *script*, como jQuery:

```js
$(
  "<p role='alert'>You must agree with our terms of service to create an account.(Você deve concordar com os nossos termos de serviço para criar uma conta)</p>",
).appendTo(document.body);
```

#### Exemplo 3: Adicionando a função de alerta a um elemento existente

Às vezes é preferível adicionar uma função de alerta a um elemento que já está visível na página, a criar um novo elemento. Isto possibilita que os desenvolvedores reiterem a informação que virá a ser mais importante, ou urgente, para os utilizadores. Por exemplo, um controle de formulário pode ter uma instrução sobre o valor esperado. Caso um valor diferente seja inserido, o`role="alert"`pode ser adicionado ao texto de instrução e, então, o leitor de tela o anuncia como um alerta. O pseudo código, no fragmento abaixo, ilustra esta abordagem:

```html
<p id="formInstruction">You must select at least 3 options</p>
```

```js
// When the user tries to submit the form with less than 3 checkboxes selected (Quando houver a tentativa de submissão do formulário com menos de 3 caixas de seleção marcadas):
document.getElementById("formInstruction").setAttribute("role", "alert");
```

#### Exemplo 4: Construindo um elemento com uma função de alerta visível

Se um elemento já tem o atributo `role="alert"` e é, inicialmente, escondido pelo uso da CSS, torná-lo visível o faz disparar como se estivesse adicionado à página. Isto significa que um alerta existente pode ser "utilizado" múltiplas vezes.

**Nota:** Na maioria dos casos, esta abordagem não é recomendada, porque não é a ideal para esconder erro, ou alerta de texto, que não for aplicável no momento. Utilizadores de tecnologias assistivas antigas podem, ainda, perceber o texto de alerta, mesmo quando este não devesse ser aplicado, fazendo com que acreditem, incorretamente, que há um problema.

```css
.hidden {
  display: none;
}
```

```html
<p id="expirationWarning" role="alert" class="hidden">
  Your log in session will expire in 2 minutes(A sua sessão vai expirar em 2
  minutos)
</p>
```

```js
// removing the 'hidden' class makes the element visible, which will make the screen reader announce the alert:(Remover a classe "hidden" faz o leitor de tela anunciar o alerta)
document.getElementById("expirationWarning").className = "";
```

### Notas

* A utilização da função alerta em um elemento implica que ele tenha a `aria-live="assertive"`.
* O atributo *alert role* deve ser usado, apenas, para conteúdo com texto estático. O elemento no qual a função alerta for usada não deve ser passível de receber foco, então, um leitor de tela vai, automaticamente, anunciar o alerta, independentemente de onde o foco do teclado esteja localizado no momento.
* Se um alerta oferecer, também, controles interativos (tais como um controle de formulário que possibilite a sua correção, ou um botão "OK" que descarte o alerta), em seu lugar deve-se utilizar um *alertdialog* (diálogo de alerta).
### Atributos ARIA utilizados

* alert
### Técnicas ARIA relacionadas

* Utilizando a função alertdialog
* Utilizando a propriedade aria-invalid
### Compatibilidade

TBD: Adicionar informações de suporte para UA comum e combinações de produtos TA / AT

### Recursos Adicionais

* Melhores práticas ARIA - Alert Role: https://www.w3.org/TR/wai-aria-practices/#alert


Cache - APIs da Web

Cache
=====

**Experimental:** **Esta é uma tecnologia experimental (en-US)**
Verifique a tabela de compatibilidade entre Navegadores cuidadosamente antes de usar essa funcionalidade em produção.

A interface de **Cache** provê um mecanismo de pares de objeto Request / Response que estão cacheados, por exemplo, como parte do ciclo de vida de um `ServiceWorker` (en-US). Note que a interface do `Cache` é exposta a escopos de janela como também aos workers. Você não precisa utiliza-la em conjunto com os service workers em si, mesmo que ela esteja definida na especificação dos mesmos.

Uma origem pode ter múltiplos objetos de `cache` nomeados. Você é o responsável por implementar como seu script (por exemplo, em um `ServiceWorker` (en-US)) trata uma atualização deste `Cache`. Itens em um `Cache` não são atualizados a não ser que explicitamente comandados para fazer tal coisa, também não expiram a não ser quando são deletados. Use `CacheStorage.open(cacheName)` (en-US) para abrir um `Cache` nomeado específico e depois chame qualquer um dos métodos presentes no `Cache` para manter os objetos cacheados.

Você é também o responsavel por, periódicamente, limpar as entradas de cache. Cada browser tem um limite fixo do tamanho de armazenamento de cache que cada origem pode utilizar. O browser faz o melhor que pode para gerenciar o espaço em disco, mas ele pode deletar um cache que não devia. Ele também vai, geralmente, deletar todos os dados de uma origem ou nenhum dado da mesma, nunca haverá uma ocasião não atômica onde o browser delete parcialmente os dados.

Certifique-se de versionar seus caches por nome e usar somente os caches nas versões do script que eles podem seguramente operar. Veja também o artigo sobre remoção de caches antigos (en-US) para mais informações.

**Nota:** Implementações iniciais do Cache (tanto no Blink quando no Gecko) resolvem promises de `Cache.add` (en-US), `Cache.addAll` (en-US), e `Cache.put` (en-US) somente quando o corpo completo da resposta foi armazenado. Versões mais recentes desta especificação possuem uma melhora de linguagem informando que o browser pode resolver a promise assim que a entrada é registrada no banco de dados, mesmo que o corpo da resposta ainda esteja sendo enviado.

**Nota:** O algoritmo de comparação de chaves depende do cabeçalho VARY no valor. Então, comparar uma nova chave depende tanto de olhar para o valor e para a própria chave para novas entradas no cache.

**Nota:** A API de cache não segue os padrões HTTP de cabeçalhos de Cache.

Métodos
-------

`Cache.match(request, options)` (en-US)

Retorna uma `Promise` que resolve para a resposta associada com a primeira requisição encontrada no objeto `Cache`.

`Cache.matchAll(request, options)` (en-US)

Retorna uma `Promise` que resolve para um array com todas as referências encontradas de requisições presentes no objeto `Cache`.

`Cache.add(request)` (en-US)

Pega a URL, obtém o resultado da resposta e adiciona o mesmo no cache informado. Esta funcionalidade é equivalente a chamar `fetch()`, e depois utilizar `Cache.put()` para adicionar o resultado no cache.

`Cache.addAll(requests)` (en-US)

A partir de um array de URL's, obtém as respostas e adiciona todos os objetos resultantes no cache informado.

`Cache.put(request, response)` (en-US)

Dado uma requisição e uma resposta, adiciona ambas ao cache informado.

`Cache.delete(request, options)` (en-US)

Encontra a entrada do `Cache` na qual a chave é a requisição e, se encontrada, deleta a entrada do `Cache` e retorna uma `Promise` que se resolve para `true`. Se nenhuma entrada do `Cache` for encontrada, ela é resolvida para `false`.

`Cache.keys(request, options)` (en-US)

Retorna uma `Promise` que resolve em um array de chaves de `Cache`.

Exemplos
--------

Este trecho de código é da amostra de cache seletivo (veja seleção live de cache), ele utiliza `CacheStorage.open(cacheName)` (en-US) para abrir quaisquer objetos `Cache` com um cabeçalho `Content-Type` que inicie com `font/`.

Então, utilizamos `Cache.match(request, options)` (en-US) para verificar se já existe uma fonte encontrada no cache e, se existir, retorna-la. Caso contrário, o código busca a fonte da rede e utiliza `Cache.put(request, response)` (en-US) para adiciona-la ao cache.

O código gerencia as exceções disparadas pela operação `fetch()` (en-US). Note que uma resposta de erro HTTP (como o 404) não vai ativar uma exceção. Será retornado um objeto de resposta padrão que possui seu próprio código de erros.

O trecho também mostra as melhores práticas de versionamento de caches utilizadas pelo service worker. Mesmo que só estejamos utilizando um cache neste exemplo, a mesma aproximação pode ser utilizada para múltiplos caches. Mapeamos um identificador para um cache específico e versionado. Por fim, o código deleta todos os cache que não estão presentes em `CURRENT_CACHES`.

No exemplo, "Caches" é um atributo dos service workers no WorkerGlobalScope. Ele contém o CacheStorage, um objeto pelo qual podemos acessar a API de mesmo nome (en-US).

**Nota:** No Chrome, visite `chrome://inspect/#service-workers` e clique no link "inspect" abaixo do service worker registrado para analisar os logs das várias ações que o script "service-worker.js" está executando.

```js
var CACHE\_VERSION = 1;

// Identificador menor para uma versão específica do cache
var CURRENT\_CACHES = {
  font: "font-cache-v" + CACHE\_VERSION,
};

self.addEventListener("activate", function (event) {
  var expectedCacheNames = Object.keys(CURRENT\_CACHES).map(function (key) {
    return CURRENT\_CACHES[key];
  });

  // O worker não vai ser tratado como ativo até que a Promise se resolva.
  event.waitUntil(
    caches.keys().then(function (cacheNames) {
      return Promise.all(
        cacheNames.map(function (cacheName) {
          if (expectedCacheNames.indexOf(cacheName) == -1) {
            console.log("Deletando cache expirado:", cacheName);

            return caches.delete(cacheName);
          }
        }),
      );
    }),
  );
});

self.addEventListener("fetch", function (event) {
  console.log("Obtendo evento fetch para", event.request.url);

  event.respondWith(
    // Abre o objeto de cache que inicia com 'font'
    caches.open(CURRENT\_CACHES["font"]).then(function (cache) {
      return cache
        .match(event.request)
        .then(function (response) {
          if (response) {
            console.log(" Encontrou resposta em cache:", response);

            return response;
          }
        })
        .catch(function (error) {
          // Trata exceções que vem de match() ou fetch().
          console.error(" Erro na handler:", error);

          throw error;
        });
    }),
  );
});
```

Especificações
--------------

| Specification |
| --- |
| Service Workers # cache-interface |

Tabela de compatibilidade
-------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Ver também
----------

* Usando Service Workers (en-US)
* Exemplo básico de service workers
* Service workers estão prontos?
* `Promise`
* Usando Web Workers (en-US)


Geolocation - APIs da Web

Geolocation
===========

A interface **Geolocation** representa um objeto ábil de programaticamente obter a posição do aparelho. Dá ao conteúdo web acesso à localização do aparelho. Isto permite com que o website ou a aplicação ofereça resultados customizados baseados na localização do usuário.

Um objeto com tal interface é obtido utilizando a propriedade `NavigatorGeolocation.geolocation` (en-US) implementada pelo objeto `Navigator` (en-US).

**Nota:** Por questões de segurança, quando uma página tenta obter acesso às informações de localização o usuário é notificado e uma requisição é feita para o mesmo fornecesser a permissão. Saiba que cada navegaor possui suas próprias políticas e métodos para requisitar tal permissão.

Propriedades
------------

*A interface* Geolocation *não implementa nem herda qualquer propriedade.*

Métodos
-------

*A interface* Geolocation *não herda qualquer métodos.*

`Geolocation.getCurrentPosition()`

Determina a posição atual do aparelho e retorna um objeto `Position` com os dados.

`Geolocation.watchPosition()`

Retorna um valor long representando a nova função de callback estabelecida para ser invocada a qualquer momento que o localização do aparelho alterar-se.

`Geolocation.clearWatch()`

Remove qualquer encarregado previamente instalado usando *watchPosition()*.

Especificações
--------------

| Specification |
| --- |
| Geolocation API # geolocation\_interface |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja Também
-----------

* Usando Geolocation (en-US)


DeviceAcceleration - APIs da Web

DeviceAcceleration
==================

**Experimental:** **Esta é uma tecnologia experimental (en-US)**
Verifique a tabela de compatibilidade entre Navegadores cuidadosamente antes de usar essa funcionalidade em produção.

Um objeto `DeviceAcceleration` fornece informações sobre a quantidade de aceleração que o dispositivo desempenha ao longo dos três eixos.

Propriedades
------------

`DeviceAcceleration.x` (en-US) Somente leitura

A quantidade de aceleração ao longo do eixo X. **Somente leitura**.

`DeviceAcceleration.y` (en-US) Somente leitura

A quantidade de aceleração ao longo do eixo Y. **Somente leitura**.

`DeviceAcceleration.z` (en-US) Somente leitura

A quantidade de aceleração ao longo do eixo Z.**Somente leitura**.

Especificações
--------------

| Specification |
| --- |
| DeviceOrientation Event Specification # devicemotioneventacceleration |


Web Workers API - APIs da Web

Web Workers API
===============

**Web Workers** são mecanismos que permitem que uma operação de um dado script seja executado em uma thread diferente da thread principal da aplicação Web. Permitindo que cálculos laboriosos sejam processados sem que ocorra bloqueio da thread principal (geralmente associado à interface).

Web Workers: conceitos e uso
----------------------------

Um "worker" é um objeto criado através da utilização do construtor (ex `Worker()` (en-US)) que executa um dado arquivo Javascript — o código contido em tal arquivo é executado no thread do worker; e tais workers são executados em um contexto diferente do principal `window`. O contexto dos workers é representado pelo objeto `DedicatedWorkerGlobalScope` (en-US) no caso de workers dedicados (workers padrões são utilizados por um único script; workers compartilhados utilizam `SharedWorkerGlobalScope` (en-US)).

O thread do worker roda qualquer trecho de código, mas é importante ressaltar que esse trecho não poderá manipular o DOM, ou usar alguns métodos e propriedades do objeto `window`. Mas, é permitido usar um grande número de itens fornecidos pelo objeto window, incluindo WebSockets, mecanismos de data storage tais como IndexedDB, Firefox OS-only Data Store API. Para mais detalhes veja Funções e classes disponíveis para os workers (en-US).

O thread principal e os threads dos workers comunicam-se entre si enviando dados através do sistema de mensagens — ambos os lados enviam mensagens usando o método `postMessage()`, e respondem as mensagens via o manipulador de eventos `onmessage` (a mensagem está contida no atributo `data` do evento `Message`). É importante ressaltar que os dados são copiados, e não compartilhados.

Workers podem, por sua vez, gerar novos workers, desde que esses workers sejam hospedados na mesma origem que a página principal. Além disso, workers podem usar `XMLHttpRequest` para network I/O, com a exceção de que os atributos `responseXML` e `channel` do `XMLHttpRequest` sempre retornam nulo.

Além dos workers dedicados, existem outros tipos de workers:

* Shared Workers são workers que podem ser utilizados por diversos scripts que estão sendo executados em diferentes janelas, IFrames, etc., desde que eles estejam no mesmo domínio. Eles são ligeiramente mais complexos que workers dedicados — os scripts se comunicam através de uma porta ativa. Veja `SharedWorker` (en-US) para mais detalhes.
* ServiceWorkers (en-US) essencialmente atuam como servidores proxy enquadram entre aplicativos da web e o navegador e a rede (quando disponível). Eles destinam-se (entre outras coisas) a habilitar a criação de experiências off-line efetivas, interceptando solicitações de rede e tomando as ações adequadas com base na disponibilidade da rede e atualização de ativos no servidor. Eles também permitirão o acesso a notificações push e APIs de sincronização em background.
* Chrome Workers são um Firefox-only tipo de worker que você pode usar caso esteja desenvolvendo um add-ons e quer usar workers em extensão e ter acesso a js-ctypes na sua worker. Veja `ChromeWorker` para mais detalhes.
* Audio Workers fornecem a capacidade de processamento de áudio direcionado direto para ser feito dentro do contexto de um web worker.
Interfaces Web Worker
---------------------

`AbstractWorker` (en-US)

Propriedades Abstratas e métodos comuns a todos tipos de workers (i.e. `Worker` ou `SharedWorker` (en-US)).

`Worker`

Representa a worker thread em execução, permitindo que você passe mensagens para o código em execução.

`SharedWorker` (en-US)

Representa um tipo específico de worker que pode ser *acessado* a partir de vários contextos de navegação, sendo várias janelas, iframes ou mesmo workers.

`WorkerGlobalScope` (en-US)

Representa o escopo genérico de qualquer worker (fazendo o mesmo trabalho como `Window` para conteúdo normal da web). Diferentes tipos de workers têm objetos de escopo que herdam desta interface e adicionam recursos mais específicos.

`DedicatedWorkerGlobalScope` (en-US)

Representa o escopo de um dedicated worker, herdado de `WorkerGlobalScope` (en-US) e adicionam recursos mais específicos.

`SharedWorkerGlobalScope` (en-US)

Representa o escopo de um shared worker, herdado de `WorkerGlobalScope` (en-US) e adicionam recursos mais específicos.

`WorkerNavigator` (en-US)

Representa a identidade e estado do user agent (o cliente):

Exemplos
--------

Criamos algumas demonstrações simples para mostrar o uso básico:

* Exemplo básico de dedicated worker (executar dedicated worker).
* Exemplo básico de shared worker (executar shared worker).

Você pode descobrir mais informações sobre como essas demonstrações funcionam em Usando web workers (en-US).

Especificações
--------------

| Specification |
| --- |
| HTML Standard # workers |

Compatibilidade com navegadores
-------------------------------

{{Compat}}Veja também
-----------

* Using Web Workers (en-US)
* Worker Interface
* SharedWorker interface (en-US)
* ServiceWorker API (en-US)
* Functions and classes available to workers (en-US)
* Advanced concepts and examples (en-US)
* ChromeWorker: para usar workers em código privilegiado/chrome.


Fetch API - APIs da Web

Fetch API
=========

**Experimental:** **Esta é uma tecnologia experimental (en-US)**
Verifique a tabela de compatibilidade entre Navegadores cuidadosamente antes de usar essa funcionalidade em produção.

A Fetch API fornece uma interface para buscar recursos (por exemplo, em toda a rede). Parecerá familiar para qualquer pessoa que tenha usado XMLHttpRequest, porém a nova API oferece um conjunto de recursos mais poderoso e flexível.

Conceitos e uso
---------------

O Fetch fornece uma definição genérica de objetos de `Request` e `Response` (e outras coisas envolvidas com solicitações de rede). Isso permitirá que eles sejam usados onde quer que sejam necessários no futuro, seja para service workers, Cache API e outras coisas similares que manipulam ou modifiquem pedidos e respostas ou qualquer tipo de caso de uso que possa exigir que você gere suas próprias responses programaticamente.

Ele também fornece uma definição para conceitos relacionados como CORS e a semântica de cabeçalho de origem HTTP, suplantando suas definições separadas em outro lugar.

Para fazer uma solicitação e buscar um recurso, use o método `GlobalFetch.fetch` (en-US) . Ele é implementado em várias interfaces, especificamente `Window` e `WorkerGlobalScope` (en-US). Isso torna disponível em praticamente qualquer contexto em que você possa querer obter recursos.

O método fetch () tem um argumento obrigatório, o caminho para o recurso que deseja obter. Ele retorna uma promessa que resolve a `Response` para esta requisição, seja ele bem-sucedido ou não. Você também pode, opcionalmente, passar um objeto de opções de inicialização como o segundo argumento (consulte `Request`).

Uma vez que uma `Response` é recuperada, há uma série de métodos disponíveis para definir o conteúdo do corpo e como ele deve ser tratado (veja `Body`.)

Você pode criar um pedido e uma resposta diretamente usando os construtores `Request()` e `Response()` (en-US), mas é improvável que você faça isso diretamente. Em vez disso, é mais provável que sejam criados como resultados de outras ações da API (por exemplo, `FetchEvent.respondWith` (en-US) de service workers).

**Nota:** Encontre mais informações sobre os recursos do Fetch API em Using Fetch, e conceitos para estudos em Fetch basic concepts.

Fetch Interfaces
----------------

`GlobalFetch`

Contém o método `fetch()` usado para buscar um recurso.

`Headers` (en-US)

Representa cabeçalhos response/request, permitindo que você os consulte e faça diferentes ações dependendo dos resultados.

`Request`

Representa um pedido de recursos.

`Response`

Representa a resposta de uma requisição.

Fetch mixin
-----------

`Body`

Providencia métodos relacionados ao corpo da resposta/requisição, permitindo que você declare qual seu tipo de conteúdo e como ele deve ser tratado.

Especificações
--------------

| Specification |
| --- |
| Fetch Standard # fetch-method |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* ServiceWorker API (en-US)
* HTTP access control (CORS) (en-US)
* HTTP
* Fetch polyfill
* Fetch basic concepts


Location - APIs da Web

Location
========

Resumo
------

A interface `Location` representa a localização do objeto a qual ele está associado. Mudanças feitas na interface serão refletidas nos objetos relacionados a ela. Tanto a interface `Document`, como a interface `Window` , têm este vínculo com a inteface Location, acessível via `Document.location` e `Window.location` respectivamente.

Propriedades
------------

*A inteface `Location` não herda nenhuma propriedade, mas implementa as propriedades de* *`URLUtils`.*

`URLUtils.href`

É uma `DOMString` que contém toda URL.

`URLUtils.protocol`

É uma `DOMString` que contém o esquema de protocolo da URL, incluindo o final ':'.

`URLUtils.host`

É uma `DOMString` que contém o *host*, que é o *hostname* seguido de ':' e a *port* da URL.

`URLUtils.hostname`

É uma `DOMString` que contém o domínio da URL.

`URLUtils.port`

É uma `DOMString` que contém o número da porta da URL.

`URLUtils.pathname`

É uma `DOMString` que contém `'/'`, como caractere inicial, seguido do caminho da URL.

`URLUtils.search`

É uma `DOMString` que contém um `'?'` seguido dos parâmetros da URL.

`URLUtils.hash`

É uma `DOMString` que contém um `'#'` seguido do identificador de fragmento da URL.

`URLUtils.username`

É uma `DOMString` que contém o nome de usuário especificado antes do nome de domínio.

`URLUtils.password`

É uma `DOMString` que contém a senha especificada antes do nome de domínio.

`URLUtils.origin` Somente leitura

Retorna uma `DOMString` que contém a forma canônica da origem do local especificado.

Métodos
-------

*A inteface `Location` não herda nenhum método, mas implementa os métodos de `URLUtils`*

`Location.assign()`

Carrega o recurso na URL fornecida como parâmetro.

`Location.reload()`

Recarrega o recurso a partir da URL atual. Seu único parâmetro opcional é um `Boolean` (en-US), que, quando verdadeiro (`true)`, faz com que a página sempre seja recarregada a partir do servidor. Se for falso (`false)` ou não especificado, o navegador pode recarregar a página a partir de seu cache.

`Location.replace()` (en-US)

Substitui o recurso atual pelo recurso presente na URL fornecida. A diferença entre o método `assign()` é que após usar `replace()` a página atual não será salva na sessão `History` (en-US), ou seja, o usuário não será capaz de usar o botão *voltar* para navegar até a página.

`URLUtils.toString()`

Retorna uma `DOMString` que contém toda URL. O método é um sinônimo para `URLUtils.href`, embora não possa ser usado para modificar o valor.

Especificações
--------------

| Specification |
| --- |
| HTML Standard # the-location-interface |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* Dois métodos que criam um objeto Location: `Window.location` e `Document.location`.


Modelo de Objeto de Documento (DOM) - APIs da Web

Modelo de Objeto de Documento (DOM)
===================================

O **Modelo de Objeto de Documento (*DOM*)** é uma interface de programação para documentos HTML, XML e SVG . Ele fornece uma representação estruturada do documento como uma árvore. O DOM define métodos que permitem acesso à árvore, para que eles possam alterar a estrutura, estilo e conteúdo do documento. O DOM fornece uma representação do documento como um grupo estruturado de nós e objetos, possuindo várias propriedades e métodos. Os nós também podem ter manipuladores de eventos que lhe são inerentes, e uma vez que um evento é acionado, os manipuladores de eventos são executados. Essencialmente, ele conecta páginas web a scripts ou linguagens de programação.

Embora o DOM seja frequentemente acessado usando JavaScript, não é uma parte da linguagem JavaScript. Ele também pode ser acessado por outras linguagens.

Uma introdução (en-US) ao DOM está disponível.

DOM interfaces
--------------

* `Attr`
* `CharacterData`
* `ChildNode`
Experimental
* `Comment` (en-US)
* `CustomEvent` (en-US)
* `Document`
* `DocumentFragment`
* `DocumentType` (en-US)
* `DOMError` (en-US)
* `DOMException` (en-US)
* `DOMImplementation` (en-US)
* `DOMString`
* `DOMTimeStamp` (en-US)
* `DOMSettableTokenList`
* `DOMStringList`
* `DOMTokenList` (en-US)
* `Element`
* `Event`
* `EventTarget`
* `HTMLCollection`
* `MutationObserver`
* `MutationRecord` (en-US)
* `Node`
* `NodeFilter`
* `NodeIterator` (en-US)
* `NodeList`
* `ParentNode`
Experimental
* `ProcessingInstruction`
* `Range` (en-US)
* `Text` (en-US)
* `TreeWalker` (en-US)
* `URL`
* `Window`
* `Worker`
* `XMLDocument`
Experimental
Interfaces DOM obsoletas
------------------------

O Modelo de Objeto de Documento foi altamente simplificado. Para conseguir isso, as seguintes interfaces presentes na especificação DOM nível 3 ou especificação anterior foi removida. Ainda não está muito claro se alguns podem ser reintroduzidos ou não, mas por enquanto eles têm que ser considerados obsoletos e devem ser evitados:

* `CDATASection` (en-US)
* `DOMConfiguration`
* `DOMErrorHandler`
* `DOMImplementationList`
* `DOMImplementationRegistry`
* `DOMImplementationSource`
* `DOMLocator`
* `DOMObject`
* `DOMUserData`
* `Entity`
* `EntityReference`
* `NamedNodeMap` (en-US)
* `NameList`
* `Notation`
* `TypeInfo`
* `UserDataHandler`
*
Interfaces HTML
---------------

Um documento contendo HTML é descrito usando o `HTMLDocument` (en-US) interface. Nota-se que a especificação HTML também se extende a `Document` interface.

Um objeto `HTMLDocument` também da acesso á vários recursos de navegadores como a aba ou janela, em que uma página é desenhada usando `Window` interface, o `Style` associado a ele (normalmente CSS), a história do navegador relativa ao contexto, `History`. Eventualmente, `Selection` é feito no documento.

### HTML elemento interfaces

* `HTMLAnchorElement` (en-US)
* `HTMLAppletElement`
* `HTMLAreaElement` (en-US)
* `HTMLAudioElement` (en-US)
* `HTMLBaseElement` (en-US)
* `HTMLBodyElement` (en-US)
* `HTMLBRElement` (en-US)
* `HTMLButtonElement` (en-US)
* `HTMLCanvasElement` (en-US)
* `HTMLDataElement` (en-US)
* `HTMLDataListElement` (en-US)
* `HTMLDialogElement` (en-US)
* `HTMLDirectoryElement`
* `HTMLDivElement`
* `HTMLDListElement` (en-US)
* `HTMLElement` (en-US)
* `HTMLEmbedElement` (en-US)
* `HTMLFieldSetElement` (en-US)
* `HTMLFontElement` (en-US)
* `HTMLFormElement` (en-US)
* `HTMLFrameElement`
* `HTMLFrameSetElement` (en-US)
* `HTMLHeadElement` (en-US)
* `HTMLHeadingElement` (en-US)
* `HTMLHtmlElement` (en-US)
* `HTMLHRElement` (en-US)
* `HTMLIFrameElement` (en-US)
* `HTMLImageElement` (en-US)
* `HTMLInputElement`
* `HTMLLabelElement` (en-US)
* `HTMLLegendElement` (en-US)
* `HTMLLIElement` (en-US)
* `HTMLLinkElement` (en-US)
* `HTMLMapElement` (en-US)
* `HTMLMediaElement` (en-US)
* `HTMLMenuElement` (en-US)
* `HTMLMetaElement` (en-US)
* `HTMLMeterElement` (en-US)
* `HTMLModElement` (en-US)
* `HTMLObjectElement` (en-US)
* `HTMLOListElement` (en-US)
* `HTMLOptGroupElement` (en-US)
* `HTMLOptionElement` (en-US)
* `HTMLOutputElement` (en-US)
* `HTMLParagraphElement` (en-US)
* `HTMLParamElement` (en-US)
* `HTMLPreElement` (en-US)
* `HTMLProgressElement` (en-US)
* `HTMLQuoteElement` (en-US)
* `HTMLScriptElement` (en-US)
* `HTMLSelectElement` (en-US)
* `HTMLSourceElement` (en-US)
* `HTMLSpanElement`
* `HTMLStyleElement` (en-US)
* `HTMLTableElement` (en-US)
* `HTMLTableCaptionElement` (en-US)
* `HTMLTableCellElement` (en-US)
* `HTMLTableDataCellElement` (en-US)
* `HTMLTableHeaderCellElement` (en-US)
* `HTMLTableColElement` (en-US)
* `HTMLTableRowElement` (en-US)
* `HTMLTableSectionElement` (en-US)
* `HTMLTextAreaElement` (en-US)
* `HTMLTimeElement` (en-US)
* `HTMLTitleElement` (en-US)
* `HTMLTrackElement` (en-US)
* `HTMLUListElement` (en-US)
* `HTMLUnknownElement` (en-US)
* `HTMLVideoElement` (en-US)
### Outras interfaces

* `CanvasRenderingContext2D`
* `CanvasGradient` (en-US)
* `CanvasPattern` (en-US)
* `TextMetrics` (en-US)
* `ImageData` (en-US)
* `CanvasPixelArray` (en-US)
* `NotifyAudioAvailableEvent`
* `HTMLAllCollection` (en-US)
* `HTMLFormControlsCollection` (en-US)
* `HTMLOptionsCollection` (en-US)
* `HTMLPropertiesCollection`
* `DOMStringMap`
* `RadioNodeList` (en-US)
* `MediaError` (en-US)
### Obsoleto HTML interfaces

* `HTMLIsIndexElement`
SVG interfaces
--------------

### SVG elemento interfaces

* `SVGAElement`
* `SVGAltGlyphElement`
* `SVGAltGlyphDefElement`
* `SVGAltGlyphItemElement`
* `SVGAnimationElement` (en-US)
* `SVGAnimateElement` (en-US)
* `SVGAnimateColorElement` (en-US)
* `SVGAnimateMotionElement` (en-US)
* `SVGAnimateTransformElement`
* `SVGCircleElement` (en-US)
* `SVGClipPathElement` (en-US)
* `SVGColorProfileElement`
* `SVGComponentTransferFunctionElement` (en-US)
* `SVGCursorElement` (en-US)
* `SVGDefsElement` (en-US)
* `SVGDescElement` (en-US)
* `SVGElement` (en-US)
* `SVGEllipseElement` (en-US)
* `SVGFEBlendElement` (en-US)
* `SVGFEColorMatrixElement` (en-US)
* `SVGFEComponentTransferElement` (en-US)
* `SVGFECompositeElement` (en-US)
* `SVGFEConvolveMatrixElement` (en-US)
* `SVGFEDiffuseLightingElement` (en-US)
* `SVGFEDisplacementMapElement` (en-US)
* `SVGFEDistantLightElement` (en-US)
* `SVGFEFloodElement` (en-US)
* `SVGFEGaussianBlurElement` (en-US)
* `SVGFEImageElement` (en-US)
* `SVGFEMergeElement` (en-US)
* `SVGFEMergeNodeElement` (en-US)
* `SVGFEMorphologyElement` (en-US)
* `SVGFEOffsetElement` (en-US)
* `SVGFEPointLightElement` (en-US)
* `SVGFESpecularLightingElement` (en-US)
* `SVGFESpotLightElement` (en-US)
* `SVGFETileElement` (en-US)
* `SVGFETurbulenceElement` (en-US)
* `SVGFEFuncRElement` (en-US)
* `SVGFEFuncGElement` (en-US)
* `SVGFEFuncBElement` (en-US)
* `SVGFEFuncAElement` (en-US)
* `SVGFilterElement` (en-US)
* `SVGFilterPrimitiveStandardAttributes`
* `SVGFontElement` (en-US)
* `SVGFontFaceElement` (en-US)
* `SVGFontFaceFormatElement` (en-US)
* `SVGFontFaceNameElement` (en-US)
* `SVGFontFaceSrcElement` (en-US)
* `SVGFontFaceUriElement` (en-US)
* `SVGForeignObjectElement` (en-US)
* `SVGGElement` (en-US)
* `SVGGlyphElement` (en-US)
* `SVGGlyphRefElement` (en-US)
* `SVGGradientElement` (en-US)
* `SVGHKernElement` (en-US)
* `SVGImageElement` (en-US)
* `SVGLinearGradientElement` (en-US)
* `SVGLineElement` (en-US)
* `SVGMarkerElement` (en-US)
* `SVGMaskElement` (en-US)
* `SVGMetadataElement` (en-US)
* `SVGMissingGlyphElement` (en-US)
* `SVGMPathElement` (en-US)
* `SVGPathElement` (en-US)
* `SVGPatternElement` (en-US)
* `SVGPolylineElement` (en-US)
* `SVGPolygonElement` (en-US)
* `SVGRadialGradientElement` (en-US)
* `SVGRectElement` (en-US)
* `SVGScriptElement` (en-US)
* `SVGSetElement` (en-US)
* `SVGStopElement` (en-US)
* `SVGStyleElement` (en-US)
* `SVGSVGElement` (en-US)
* `SVGSwitchElement` (en-US)
* `SVGSymbolElement` (en-US)
* `SVGTextElement` (en-US)
* `SVGTextPathElement` (en-US)
* `SVGTitleElement` (en-US)
* `SVGTRefElement` (en-US)
* `SVGTSpanElement` (en-US)
* `SVGUseElement` (en-US)
* `SVGViewElement` (en-US)
* `SVGVKernElement` (en-US)
### SVG data type interfaces

Aqui estão a DOM API para tipos de dados utilizados nas definições de propriedades SVG e atributos.

**Nota:** Starting in Gecko 5.0, the following SVG-related DOM interfaces representing lists of objects are now indexable and can be accessed ; in addition, they have a length property indicating the number of items in the lists: `SVGLengthList` (en-US), `SVGNumberList` (en-US), `SVGPathSegList`, and `SVGPointList` (en-US).

#### Static type

* `SVGAngle` (en-US)
* `SVGColor`
* `SVGICCColor`
* `SVGElementInstance`
* `SVGElementInstanceList`
* `SVGLength` (en-US)
* `SVGLengthList` (en-US)
* `SVGMatrix` (en-US)
* `SVGNumber` (en-US)
* `SVGNumberList` (en-US)
* `SVGPaint`
* `SVGPoint` (en-US)
* `SVGPointList` (en-US)
* `SVGPreserveAspectRatio` (en-US)
* `SVGRect` (en-US)
* `SVGStringList` (en-US)
* `SVGTransform` (en-US)
* `SVGTransformList` (en-US)

#### Animated type

* `SVGAnimatedAngle` (en-US)
* `SVGAnimatedBoolean` (en-US)
* `SVGAnimatedEnumeration` (en-US)
* `SVGAnimatedInteger` (en-US)
* `SVGAnimatedLength` (en-US)
* `SVGAnimatedLengthList` (en-US)
* `SVGAnimatedNumber` (en-US)
* `SVGAnimatedNumberList` (en-US)
* `SVGAnimatedPreserveAspectRatio` (en-US)
* `SVGAnimatedRect` (en-US)
* `SVGAnimatedString` (en-US)
* `SVGAnimatedTransformList` (en-US)
### SMIL related interfaces

* `ElementTimeControl`
* `TimeEvent` (en-US)
### Other SVG interfaces

* `SVGAnimatedPathData`
* `SVGAnimatedPoints` (en-US)
* `SVGColorProfileRule`
* `SVGCSSRule`
* `SVGExternalResourcesRequired`
* `SVGFitToViewBox`
* `SVGLangSpace`
* `SVGLocatable`
* `SVGRenderingIntent` (en-US)
* `SVGStylable` (en-US)
* `SVGTests`
* `SVGTextContentElement` (en-US)
* `SVGTextPositioningElement` (en-US)
* `SVGTransformable`
* `SVGUnitTypes` (en-US)
* `SVGURIReference` (en-US)
* `SVGViewSpec`
* `SVGZoomAndPan`
Veja também
-----------

* DOM Exemplos (en-US)


Canvas: Contexto de Renderização em "2D" - APIs da Web

Canvas: Contexto de Renderização em "2D"
========================================

A interface **Canvas Renderização de Contexto de duas Dimensões (** **CanvasRenderingContext2D**) é usada para desenhar retangulos, textos, imagens e outros objetos na tag ou elemento canvas. Fornece o contexto de renderização em 2D para a superfície de desenho do elemento `<canvas>`.
Para obter um objeto desta interface, chama-se `getContext()` em um `elemento <canvas>`, adicionando "2d" como argumento, veja o exemplo abaixo:

```js
var canvas = document.getElementById("meuCanvas"); // em seu HTML esse elemento se parece com <canvas id="meuCanvas"></canvas>
var ctx = canvas.getContext("2d");
```

Agora que você possui o contexto de renderização 2D, você pode desenhar dentro deste canvas. Por exemplo:

```js
ctx.fillStyle = "rgb(200,0,0)"; // define a cor de preenchimento do retângulo
ctx.fillRect(10, 10, 55, 50); // desenha o retângulo na posição 10, 10 com 55 pixels de largura e uma altura de 50
```

Veja as propriedades e métodos no menu lateral e abaixo. O tutorial canvas tem mais informações, exemplos e recursos.

Desenhando Retângulos
---------------------

Existem três métodos que imediatamente desenham retângulos ao canvas.

`CanvasRenderingContext2D.clearRect()`

Determina todos os pixels no retângulo definido, pelo ponto inicial (*x, y*) e tamanho (*largura*, *altura*) para preto transparente, apagando qualquer conteúdo desenhado anteriormente.

`CanvasRenderingContext2D.fillRect()`

Desenha um retângulo preenchido na posição (*x, y*) com tamanho definido pela *largura* e *altura*

`CanvasRenderingContext2D.strokeRect()`

Pinta um retângulo o qual possui um ponto inicial em *(x, y)* e possui um *w* *width*(largura) e um *h* *height*(altura) dentro da tela(canvas), usando o estilo de traçado(stroke) atual.

Desenhando Textos
-----------------

Os métodos seguintes são fornecidos para desenhar texto. Veja também o objeto `TextMetrics` (en-US) para propriedades de texto.

`CanvasRenderingContext2D.fillText()` (en-US)

Desenha(preenche) um texto fornecido, em uma posição fornecida(*x,y*).

`CanvasRenderingContext2D.strokeText()` (en-US)

Desenha(traçados) um texto fornecido, em uma posição fornecida(*x,y*).

`CanvasRenderingContext2D.measureText()` (en-US)

Retorna um objeto `TextMetrics` (en-US) .

Estilos de linha
----------------

Os seguintes métodos e propriedades, controlam como as linhas são desenhadas.

`CanvasRenderingContext2D.lineWidth` (en-US)

Largura das linhas. Padrão: `1.0`

`CanvasRenderingContext2D.lineCap` (en-US)

Tipos de pontas no final das linhas. Valores possíveis: `butt` (padrão), `round`, `square`.

`CanvasRenderingContext2D.lineJoin` (en-US)

Define o tipo de encontro entre duas linhas. Possíveis valores: `round`, `bevel`, `miter` (default).

`CanvasRenderingContext2D.miterLimit` (en-US)

Relação do limite de esquadria. Padrão: `10`.

`CanvasRenderingContext2D.getLineDash()` (en-US)

Retorna a matriz de padrão de traço de linha atual contendo um número par de números não negativos.

`CanvasRenderingContext2D.setLineDash()` (en-US)

Define o padrão de traço de linha atual.

`CanvasRenderingContext2D.lineDashOffset` (en-US)

Especifica onde iniciar uma matriz de traços em uma linha.

Estilos de textos
-----------------

As propriedades abaixo controlam a estilização do texto a ser apresentado:

`CanvasRenderingContext2D.font` (en-US)

Configuração da fonte. Valor padrão: `10px sans-serif`.

`CanvasRenderingContext2D.textAlign` (en-US)

Alinhamento do texto. Possíveis valores: `start` (padrão), `end`, `left`, `right` or `center`.

`CanvasRenderingContext2D.textBaseline` (en-US)

Configuração de alinhamento da linha de base (Baseline). Possíveis valores: `top`, `hanging`, `middle`, `alphabetic` (padrão), `ideographic`, `bottom`.

`CanvasRenderingContext2D.direction` (en-US)

Direção do texto. Possívels valores: `ltr, rtl`, `inherit` (padrão).

Estilos de preenchimento e traço
--------------------------------

O estilo de preenchimento é usado para cores e estilos dentro das formas e o estilo de traço é usado para as linhas ao redor das formas.

`CanvasRenderingContext2D.fillStyle`

Cor ou estilo para usar formas internas. Padrão `#000` (preto).

`CanvasRenderingContext2D.strokeStyle` (en-US)

Cor ou estilo a ser usado para as linhas em torno das formas. Padrão: `#000` (preto).

Gradientes e padrões
--------------------

`CanvasRenderingContext2D.createLinearGradient()` (en-US)

Cria um gradiente linear ao longo da linha fornecida pelas coordenadas representadas pelos parâmetros.

`CanvasRenderingContext2D.createRadialGradient()` (en-US)

Cria um gradiente radial dado pelas coordenadas dos dois círculos representados pelos parâmetros.

`CanvasRenderingContext2D.createPattern()` (en-US)

Cria um padrão usando a imagem especificada (uma `CanvasImageSource` (en-US)). Ele repete a fonte nas direções especificadas pelo argumento de repetição. Este método retorna um `CanvasPattern` (en-US).

Sombras
-------

`CanvasRenderingContext2D.shadowBlur` (en-US).

Especifica o efeito de desfoque. Padrão: `0`.

`CanvasRenderingContext2D.shadowColor` (en-US)

Cor da sombra. Padrão: fully-transparent black (preto totalmente transparente).

`CanvasRenderingContext2D.shadowOffsetX` (en-US)

Distância horizontal em que a sombra será deslocada. Padrão: `0`.

`CanvasRenderingContext2D.shadowOffsetY` (en-US)

Distância vertical em que a sombra será deslocada. Padrão: `0`.

Caminhos
--------

Os seguintes métodos podem ser usados para manipular caminhos de desenhos.

`CanvasRenderingContext2D.beginPath()`

Inicia um novo caminho esvaziando a lista de subcaminhos. Chame esse método quando você quiser criar um novo caminho.

`CanvasRenderingContext2D.closePath()`

Faz com que a ponta da caneta se mova de volta para o início do subcaminho atual. Ele tenta traçar uma linha reta do ponto atual ao início. Se o desenho já foi fechado ou tem apenas um ponto, este método não faz nada.

`CanvasRenderingContext2D.moveTo()`

Move o ponto inicial de um novo subcaminho para as coordenadas (x, y).

`CanvasRenderingContext2D.lineTo()`

Conecta o último ponto do caminho atual com as coordenadas (x, y) com linha reta.

`CanvasRenderingContext2D.bezierCurveTo()` (en-US)

Adiciona uma curva de Bézier ao caminho atual.

`CanvasRenderingContext2D.quadraticCurveTo()`

Adiciona uma curva de Bézier quadrática ao caminho atual.

`CanvasRenderingContext2D.arc()`

Adiciona um arco circular ao caminho atual.

`CanvasRenderingContext2D.arcTo()`

Adiciona um arco no caminho atual com os pontos de controle e raio fornecidos, conectado ao ponto anterior por uma linha reta.

`CanvasRenderingContext2D.ellipse()` (en-US)

Adiciona um arco elíptico ao caminho atual.

`CanvasRenderingContext2D.rect()`

Cria um caminho de retângulo na posição (x, y) com o tamanho determinado por *width* e *height*.

Drawing paths
-------------

`CanvasRenderingContext2D.fill()`

Fills the subpaths with the current fill style.

`CanvasRenderingContext2D.stroke()`

Strokes the subpaths with the current stroke style.

`CanvasRenderingContext2D.drawFocusIfNeeded()` (en-US)

If a given element is focused, this method draws a focus ring around the current path.

`CanvasRenderingContext2D.scrollPathIntoView()` (en-US)

Scrolls the current path or a given path into the view.

`CanvasRenderingContext2D.clip()`

Creates a clipping path from the current sub-paths. Everything drawn after `clip()` is called appears inside the clipping path only. For an example, see Clipping paths in the Canvas tutorial.

`CanvasRenderingContext2D.isPointInPath()` (en-US)

Reports whether or not the specified point is contained in the current path.

`CanvasRenderingContext2D.isPointInStroke()` (en-US)

Reports whether or not the specified point is inside the area contained by the stroking of a path.

Transformações
--------------

Objects in the `CanvasRenderingContext2D` rendering context have a current transformation matrix and methods to manipulate it. The transformation matrix is applied when creating the current default path, painting text, shapes and `Path2D` objects. The methods listed below remain for historical and compatibility reasons as `SVGMatrix` (en-US) objects are used in most parts of the API nowadays and will be used in the future instead.

`CanvasRenderingContext2D.rotate()` (en-US)

Adds a rotation to the transformation matrix. The angle argument represents a clockwise rotation angle and is expressed in radians.

`CanvasRenderingContext2D.scale()` (en-US)

Adds a scaling transformation to the canvas units by x horizontally and by y vertically.

`CanvasRenderingContext2D.translate()` (en-US)

Adds a translation transformation by moving the canvas and its origin x horzontally and y vertically on the grid.

`CanvasRenderingContext2D.transform()` (en-US)

Multiplies the current transformation matrix with the matrix described by its arguments.

`CanvasRenderingContext2D.setTransform()` (en-US)

Resets the current transform to the identity matrix, and then invokes the `transform()` method with the same arguments.

`CanvasRenderingContext2D.resetTransform()` (en-US)
Experimental

Resets the current transform by the identity matrix.

Compositing
-----------

`CanvasRenderingContext2D.globalAlpha` (en-US)

Alpha value that is applied to shapes and images before they are composited onto the canvas. Default `1.0` (opaque).

`CanvasRenderingContext2D.globalCompositeOperation`

With `globalAlpha` applied this sets how shapes and images are drawn onto the existing bitmap.

Desenhando imagens
------------------

`CanvasRenderingContext2D.drawImage()` (en-US)

Draws the specified image. This method is available in multiple formats, providing a great deal of flexibility in its use.

Manipulação de pixels
---------------------

See also the `ImageData` (en-US) object.

`CanvasRenderingContext2D.createImageData()` (en-US)

Creates a new, blank `ImageData` (en-US) object with the specified dimensions. All of the pixels in the new object are transparent black.

`CanvasRenderingContext2D.getImageData()` (en-US)

Returns an `ImageData` (en-US) object representing the underlying pixel data for the area of the canvas denoted by the rectangle which starts at *(sx, sy)* and has an *sw* width and *sh* height.

`CanvasRenderingContext2D.putImageData()` (en-US)

Paints data from the given `ImageData` (en-US) object onto the bitmap. If a dirty rectangle is provided, only the pixels from that rectangle are painted.

Image smoothing
---------------

`CanvasRenderingContext2D.imageSmoothingEnabled` (en-US)
Experimental

Image smoothing mode; if disabled, images will not be smoothed if scaled.

The canvas state
----------------

The `CanvasRenderingContext2D` rendering context contains a variety of drawing style states (attributes for line styles, fill styles, shadow styles, text styles). The following methods help you to work with that state:

`CanvasRenderingContext2D.save()` (en-US)

Saves the current drawing style state using a stack so you can revert any change you make to it using `restore()`.

`CanvasRenderingContext2D.restore()` (en-US)

Restores the drawing style state to the last element on the 'state stack' saved by `save()`.

`CanvasRenderingContext2D.canvas` (en-US)

A read-only back-reference to the `HTMLCanvasElement` (en-US). Might be `null` if it is not associated with a `<canvas>` element.

Hit regions
-----------

`CanvasRenderingContext2D.addHitRegion()`
Experimental

Adds a hit region to the canvas.

`CanvasRenderingContext2D.removeHitRegion()`
Experimental

Removes the hit region with the specified `id` from the canvas.

`CanvasRenderingContext2D.clearHitRegions()`
Experimental

Removes all hit regions from the canvas.

Non-standard APIs
-----------------

### Blink and WebKit

Most of these APIs are deprecated and will be removed in the future.

Non-standard `CanvasRenderingContext2D.clearShadow()`

Removes all shadow settings like `CanvasRenderingContext2D.shadowColor` (en-US) and `CanvasRenderingContext2D.shadowBlur` (en-US).

Non-standard `CanvasRenderingContext2D.drawImageFromRect()`

This is redundant with an equivalent overload of `drawImage`.

Non-standard `CanvasRenderingContext2D.setAlpha()`

Use `CanvasRenderingContext2D.globalAlpha` (en-US) instead.

Non-standard `CanvasRenderingContext2D.setCompositeOperation()`

Use `CanvasRenderingContext2D.globalCompositeOperation` instead.

Non-standard `CanvasRenderingContext2D.setLineWidth()`

Use `CanvasRenderingContext2D.lineWidth` (en-US) instead.

Non-standard `CanvasRenderingContext2D.setLineJoin()`

Use `CanvasRenderingContext2D.lineJoin` (en-US) instead.

Non-standard `CanvasRenderingContext2D.setLineCap()`

Use `CanvasRenderingContext2D.lineCap` (en-US) instead.

Non-standard `CanvasRenderingContext2D.setMiterLimit()`

Use `CanvasRenderingContext2D.miterLimit` (en-US) instead.

Non-standard `CanvasRenderingContext2D.setStrokeColor()`

Use `CanvasRenderingContext2D.strokeStyle` (en-US) instead.

Non-standard `CanvasRenderingContext2D.setFillColor()`

Use `CanvasRenderingContext2D.fillStyle` instead.

Non-standard `CanvasRenderingContext2D.setShadow()`

Use `CanvasRenderingContext2D.shadowColor` (en-US) and `CanvasRenderingContext2D.shadowBlur` (en-US) instead.

Non-standard `CanvasRenderingContext2D.webkitLineDash`

Use `CanvasRenderingContext2D.getLineDash()` (en-US) and `CanvasRenderingContext2D.setLineDash()` (en-US) instead.

Non-standard `CanvasRenderingContext2D.webkitLineDashOffset`

Use `CanvasRenderingContext2D.lineDashOffset` (en-US) instead.

Non-standard `CanvasRenderingContext2D.webkitImageSmoothingEnabled`

Use `CanvasRenderingContext2D.imageSmoothingEnabled` (en-US) instead.

### Blink only

Non-standard `CanvasRenderingContext2D.getContextAttributes()`

Inspired by the same `WebGLRenderingContext` method it returns an `Canvas2DContextAttributes` object that contains the attributes "storage" to indicate which storage is used ("persistent" by default) and the attribute "alpha" (`true` by default) to indicate that transparency is used in the canvas.

Non-standard `CanvasRenderingContext2D.isContextLost()`

Inspired by the same `WebGLRenderingContext` method it returns `true` if the Canvas context has been lost, or `false` if not.

### WebKit only

Non-standard `CanvasRenderingContext2D.webkitBackingStorePixelRatio`

The backing store size in relation to the canvas element. See High DPI Canvas.

Non-standard `CanvasRenderingContext2D.webkitGetImageDataHD`

Intended for HD backing stores, but removed from canvas specifications.

Non-standard `CanvasRenderingContext2D.webkitPutImageDataHD`

Intended for HD backing stores, but removed from canvas specifications.

### Gecko only

Non-standard `CanvasRenderingContext2D.filter` (en-US)

CSS and SVG filters as Canvas APIs. Likely to be standardized in a new version of the specification.

#### Prefixed APIs

Non-standard `CanvasRenderingContext2D.mozFillRule`

The fill rule to use. This must be one of `evenodd` or `nonzero` (default).

Non-standard `CanvasRenderingContext2D.mozImageSmoothingEnabled`

See `CanvasRenderingContext2D.imageSmoothingEnabled` (en-US).

Non-standard
Deprecated
 `CanvasRenderingContext2D.mozDash`

An array which specifies the lengths of alternating dashes and gaps . Use `CanvasRenderingContext2D.getLineDash()` (en-US) and `CanvasRenderingContext2D.setLineDash()` (en-US) instead.

Non-standard
Deprecated
 `CanvasRenderingContext2D.mozDashOffset`

Specifies where to start a dash array on a line. Use `CanvasRenderingContext2D.lineDashOffset` (en-US) instead.

Non-standard
Deprecated
 `CanvasRenderingContext2D.mozTextStyle`

Introduced in in Gecko 1.9, deprecated in favor of the `CanvasRenderingContext2D.font` (en-US) property.

Non-standard `CanvasRenderingContext2D.mozDrawText()`

This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0. Use `CanvasRenderingContext2D.strokeText()` (en-US) or `CanvasRenderingContext2D.fillText()` (en-US) instead.

Non-standard `CanvasRenderingContext2D.mozMeasureText()`

This method was introduced in Gecko 1.9 and is unimplemented starting with Gecko 7.0. Use `CanvasRenderingContext2D.measureText()` (en-US) instead.

Non-standard `CanvasRenderingContext2D.mozPathText()`

This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.

Non-standard `CanvasRenderingContext2D.mozTextAlongPath()`

This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.

#### Internal APIs (chrome-context only)

Non-standard `CanvasRenderingContext2D.asyncDrawXULElement()`

Renders a region of a XUL element into the `canvas`.

Non-standard `CanvasRenderingContext2D.drawWindow()` (en-US)

Renders a region of a window into the `canvas`. The contents of the window's viewport are rendered, ignoring viewport clipping and scrolling.

Non-standard `CanvasRenderingContext2D.demote()`

This causes a context that is currently using a hardware-accelerated backend to fallback to a software one. All state should be preserved.

Especificações
--------------

| Specification |
| --- |
| HTML Standard # 2dcontext |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* `HTMLCanvasElement` (en-US)


DocumentFragment - APIs da Web

DocumentFragment
================

A interface do **DocumentFragment** representa um objeto de documento mínimo que não possui pai. Ela é utilizada como uma versão leve de `Document` para armazenar fragmentos bem formados ou fragments potencialmente mal formados de XML.

Vários outros métodos podem usar um document fragment como argumento (ex. qualquer interface de `Node` como `Node.appendChild` e `Node.insertBefore`) em casos em que os filhos do fragment são acrescentados ou inseridos, e não o próprio fragment.

Essa interface também é excelente para ser usada com Web components: elementos `<template>` contém um `DocumentFragment` na propriedade `HTMLTemplateElement.content` (en-US) deles.

Um DocumentFragment pode ser criado usando o método `document.createDocumentFragment` (en-US) ou o construtor.

Propriedades
------------

*Essa interface não tem uma propriedade específica, mas herda de seu pai,* *`Node`, e implementa aquelas da interface `ParentNode`.*

`ParentNode.children` (en-US) Somente leitura
Experimental

Returns a live `HTMLCollection` containing all objects of type `Node` that are children of the `DocumentFragment` object.

`ParentNode.firstElementChild` (en-US) Somente leitura
Experimental

Returns the `Element` that is the first child of the `DocumentFragment` object, or `null` if there is none.

`ParentNode.lastElementChild` (en-US) Somente leitura
Experimental

Returns the `Element` that is the last child of the `DocumentFragment` object, or `null` if there is none.

`ParentNode.childElementCount` Somente leitura
Experimental

Returns an `unsigned long` giving the amount of children that the `DocumentFragment` has.

Construtor
----------

`DocumentFragment()` (en-US)
Experimental

Retorna um objeto DocumentFragment vazio.

Métodos
-------

*This interface inherits the methods of its parent, `Node`*, and implements those of the `ParentNode` interface.

`DocumentFragment.find()`
Experimental

Returns the first matching `Element` in the tree of the `DocumentFragment`.

`DocumentFragment.findAll()`
Experimental

Returns a `NodeList` of matching `Element` in the tree of the `DocumentFragment`.

`DocumentFragment.querySelector()` (en-US)

Returns the first `Element` node within the `DocumentFragment`, in document order, that matches the specified selectors.

`DocumentFragment.querySelectorAll()` (en-US)

Returns a `NodeList` of all the `Element` nodes within the `DocumentFragment` that match the specified selectors.

`DocumentFragment.getElementById()` (en-US)

Returns the first `Element` node within the `DocumentFragment`, in document order, that matches the specified ID.

Especificações
--------------

| Specification |
| --- |
| DOM Standard # interface-documentfragment |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* The DOM interfaces index. (en-US)


Document - APIs da Web

Document
========

Para cada página carregada no browser, existe um objeto **`Document`**. A interface `Document` serve como um ponto de entrada para o conteúdo da Página ( a árvore DOM, incluindo elementos como `<body>` e `<table>`) e provê funcionalidades globais ao documento (como obter a URL da página e criar novos elementos no documento).

EventTarget

Node

Document
Um objeto document pode ser obtido por meio de várias APIs:

* A mais comum; você trabalha com o script do documento que está rodando o script com o objeto document. (O mesmo document também pode ser referenciado como `window.document`.)
* O documento de um iframe através da propriedade `contentDocument.`
* O `responseXML` de um objeto `XMLHttpRequest`.
* O documento ao qual um determinado node ou elemento pertence pode ser recuperado usando a propriedade do node `ownerDocument` (en-US)

Dependendo do tipo do documento (e.g. HTML ou XML (en-US)), diferentes APIs estarão disponívels no objeto **`Document`**.

Todo objeto **`Document`** implementa a interface `Document` (e consequentemente as interfaces `Node` e `EventTarget`). Portanto, as principais propriedades e métodos documentados nesta página estarão disponíveis para todos os tipos de documents.

* Em navegadores mais atuais, alguns documentos (ex: aqueles que são servidos com o Content-Type `text/html`) também implementam a interface `HTMLDocument` (en-US).
* Em navegadores mais atuais, documentos SVG implementam a interface `SVGDocument`.

No futuro, todas essas interfaces irão ser divididas na interface `Document`.

Propriedades
------------

**Nota:** A interface `Document` também herda das interfaces `Node` e `EventTarget`.

`Document.all` (en-US)
Deprecated

Non-standard

Da acesso a todos os elementos do documento.È uma interface legada não padrão, voce deve usar o método `Document.getElementById()` como alternativa.

`Document.async`
Deprecated

Usado como `document.load` que indica uma requisição asyncroma.

`Document.characterSet`
Experimental

Retorna a codificação de caracteres que está sendo usado pelo documento.

`Document.compatMode`
Experimental

indica se o documento é renderizado no modo Quirks ou Strict.

`Document.contentType`
Experimental

Retorna o tipo de conteúdo do cabeçalho MIME do documento atual.

`Document.doctype`

Retorna o nome do tipo de conteudo do documento HTML.

`Document.documentElement`

Returns the Element that is a direct child of the document. For HTML documents, this is normally the HTML element.

`Document.documentURI`

Returns the document URL.

`Document.domConfig` (en-US)
Deprecated

Should return a `DOMConfiguration` object.

`Document.implementation`

Returns the DOM implementation associated with the current document.

`Document.inputEncoding` (en-US)
Deprecated

Returns the encoding used when the document was parsed.

`Document.lastStyleSheetSet` (en-US)

Returns the name of the style sheet set that was last enabled. Has the value `null` until the style sheet is changed by setting the value of `selectedStyleSheetSet` (en-US).

`Document.mozSyntheticDocument` (en-US)
Non-standard

`true` if this document is synthetic, such as a standalone image, video, audio file, or the like.

`Document.mozFullScreen` (en-US)
Non-standard

`true` when the document is in `full-screen mode`.

`Document.mozFullScreenElement` (en-US)
Non-standard

The element that's currently in full screen mode for this document.

`Document.mozFullScreenEnabled` (en-US)
Non-standard

`true` if calling `element.mozRequestFullscreen()` (en-US) would succeed in the curent document.

`Document.pointerLockElement` (en-US)
Experimental

Returns the element set as the target for mouse events while the pointer is locked. `null` if lock is pending, pointer is unlocked, or if the target is in another document.

`Document.preferredStyleSheetSet` (en-US)

Returns the preferred style sheet set as specified by the page author.

`Document.selectedStyleSheetSet` (en-US)

Returns which style sheet set is currently in use.

`Document.styleSheets` (en-US)

Returns a list of the style sheet objects on the current document.

`Document.styleSheetSets` (en-US)

Returns a list of the style sheet sets available on the document.

`Document.xmlEncoding` (en-US)
Deprecated

Returns the encoding as determined by the XML declaration.

`Document.xmlStandalone`

Returns `true` if the XML declaration specifies the document to be standalone (*e.g.,* An external part of the DTD affects the document's content), else `false`.

`Document.xmlVersion` (en-US)

Returns the version number as specified in the XML declaration or `"1.0"` if the declaration is absent.

The `Document` interface is extended with the `ParentNode` interface:

{{page("/pt-BR/docs/Web/API/ParentNode","Properties")}}### Extension for HTML documents

The `Document` interface for HTML documents inherit from the `HTMLDocument` (en-US) interface or, since HTML5, is extended for such documents:

`Document.activeElement`

Returns the currently focused element.

`Document.alinkColor`
Deprecated

Returns or sets the color of active links in the document body.

`Document.anchors`

Returns a list of all of the anchors in the document.

`Document.applets` (en-US)
Deprecated

Returns an ordered list of the applets within a document.

`Document.bgColor`
Deprecated

Gets/sets the background color of the current document.

`Document.body`

Returns the `<body>` element of the current document.

`Document.cookie` (en-US)

Returns a semicolon-separated list of the cookies for that document or sets a single cookie.

`Document.defaultView`

Returns a reference to the window object.

`Document.designMode`

Gets/sets the ability to edit the whole document.

`Document.dir` (en-US)

Gets/sets directionality (rtl/ltr) of the document.

`Document.domain` (en-US)

Returns the domain of the current document.

`Document.embeds` (en-US)

Returns a list of the embedded `<embed>` elements within the current document.

`Document.fgColor` (en-US)
Deprecated

Gets/sets the foreground color, or text color, of the current document.

`Document.forms` (en-US)

Returns a list of the `<form>` (en-US) elements within the current document.

`Document.head`

Returns the `<head>` element of the current document.

`Document.height`
Non-standard

Gets/sets the height of the current document.

`Document.images`

Returns a list of the images in the current document.

`Document.lastModified` (en-US)

Returns the date on which the document was last modified.

`Document.linkColor` (en-US)
Deprecated

Gets/sets the color of hyperlinks in the document.

`Document.links` (en-US)

Returns a list of all the hyperlinks in the document.

`Document.location`

Returns the URI of the current document.

`Document.plugins` (en-US)

Returns a list of the available plugins.

`Document.readyState`

Returns loading status of the document.

`Document.referrer`

Returns the URI of the page that linked to this page.

`Document.scripts`

Returns all the `<script>` elements on the document.

`Document.title` (en-US)

Returns the title of the current document.

`Document.URL`

Returns a string containing the URL of the current document.

`Document.vlinkColor` (en-US)
Deprecated

Gets/sets the color of visited hyperlinks.

`Document.width` (en-US)
Non-standard

Returns the width of the current document.

### Event handlers

`Document.onpointerlockchange`
Experimental

Returns the event handling code for the `pointerlockchange (en-US)` event.

`Document.onpointerlockerror`
Experimental

Returns the event handling code for the `pointerlockerror (en-US)` event.

`Document.onreadystatechange`

Returns the event handling code for the `readystatechange` event.

Methods
-------

**Nota:** The `Document` interface also inherits from the `Node` and `EventTarget` interfaces.

`Document.adoptNode(Node node)` (en-US)

Adopt node from an external document.

`Document.captureEvents(String eventName)`
Deprecated

See `window.captureEvents` (en-US).

`Document.caretPositionFromPoint(Number x, Number y)` (en-US)

Gets a `CaretPosition` (en-US) based on two coordinates.

`Document.createAttribute(String name)` (en-US)

Creates a new `Attr` object and returns it.

`Document.createAttributeNS(String namespace, String name)` (en-US)

Creates a new attribute node in a given namespace and returns it.

`Document.createCDATASection(String data)` (en-US)

Creates a new CDATA node and returns it.

`Document.createComment(String comment)` (en-US)

Creates a new comment node and returns it.

`Document.createDocumentFragment()` (en-US)

Creates a new document fragment.

`Document.createElement(String name)`

Creates a new element with the given tag name.

`Document.createElementNS(String namespace, String name)`

Creates a new element with the given tag name and namespace URI.

`Document.createEntityReference(String name)` (en-US)

Creates a new entity reference object and returns it.

`Document.createEvent(String interface)` (en-US)

Creates an event object.

`Document.createNodeIterator(Node root[, Number whatToShow[, NodeFilter filter]])`

Creates a `NodeIterator` (en-US) object.

`Document.createProcessingInstruction(String target, String data)` (en-US)

Creates a new `ProcessingInstruction` object.

`Document.createRange()` (en-US)

Creates a `Range` (en-US) object.

`Document.createTextNode(String text)` (en-US)

Creates a text node.

`Document.createTreeWalker(Node root[, Number whatToShow[, NodeFilter filter]])` (en-US)

Creates a `TreeWalker` (en-US) object.

`Document.elementFromPoint(Number x, Number y)`

Returns the element visible at the specified coordinates.

`Document.enableStyleSheetsForSet(String name)` (en-US)

Enables the style sheets for the specified style sheet set.

`Document.exitPointerLock()` (en-US)
Experimental

Release the pointer lock.

`Document.getElementsByClassName(String className)`

Returns a list of elements with the given class name.

`Document.getElementsByTagName(String tagName)` (en-US)

Returns a list of elements with the given tag name.

`Document.getElementsByTagNameNS(String namespace, String tagName)` (en-US)

Returns a list of elements with the given tag name and namespace.

`Document.importNode(Node node, Boolean deep)`

Returns a clone of a node from an external document.

`document.mozSetImageElement` (en-US)
Non-standard

Allows you to change the element being used as the background image for a specified element ID.

`Document.normalizeDocument()`

Replaces entities, normalizes text nodes, etc.

`Document.releaseCapture()` (en-US)
Non-standard

Releases the current mouse capture if it's on an element in this document.

`Document.releaseEvents`
Non-standard

Deprecated

See `window.releaseEvents` (en-US).

`document.routeEvent`
Non-standard

See `window.routeEvent`.

The `Document` interface is extended with the `ParentNode` interface:

`Document.getElementById(String id)`

Returns an object reference to the identified element.

`Document.querySelector(String selector)`

Returns the first Element node within the document, in document order, that matches the specified selectors.

`Document.querySelectorAll(String selector)`

Returns a list of all the Element nodes within the document that match the specified selectors.

The `Document` interface is extended with the `XPathEvaluator` (en-US) interface:

`Document.createExpression(String expression, XPathNSResolver resolver)` (en-US)

Compiles an `XPathExpression` (en-US) which can then be used for (repeated) evaluations.

`Document.createNSResolver(Node resolver)` (en-US)

Creates an `XPathNSResolver` (en-US) object.

`Document.evaluate(String expression, Node contextNode, XPathNSResolver resolver, Number type, Object result)` (en-US)

Evaluates an XPath expression.

### Extension for HTML documents

The `Document` interface for HTML documents inherit from the `HTMLDocument` (en-US) interface or, since HTML5, is extended for such documents:

`Document.clear()` (en-US)
Non-standard

Deprecated

In majority of modern browsers, including recent versions of Firefox and Internet Explorer, this method does nothing.

`Document.close()`

Closes a document stream for writing.

`Document.execCommand(String command[, Boolean showUI[, String value]])`

On an editable document, executes a formating command.

`Document.getElementsByName(String name)`

Returns a list of elements with the given name.

`Document.getSelection()`

Returns a `Selection` object related to text selected in the document.

`Document.hasFocus()`

Returns `true` if the focus is currently located anywhere inside the specified document.

`Document.open()` (en-US)

Opens a document stream for writing.

`Document.queryCommandEnabled(String command)` (en-US)

Returns true if the formating command can be executed on the current range.

`Document.queryCommandIndeterm(String command)`

Returns true if the formating command is in an indeterminate state on the current range.

`Document.queryCommandState(String command)` (en-US)

Returns true if the formating command has been executed on the current range.

`Document.queryCommandSupported(String command)` (en-US)

Returns true if the formating command is supported on the current range.

`Document.queryCommandValue(String command)`

Returns the current value of the current range for a formatting command.

`Document.registerElement(String tagname[, Object options])`

Registers a new custom element in the browser and returns a constructor for the new element.

`Document.write(String text)`

Writes text in a document.

`Document.writeln(String text)`

Writes a line of text in a document.

Specifications
--------------

| Specification |
| --- |
| DOM Standard # interface-document |
| HTML Standard # the-document-object |
| CSSOM View Module # extensions-to-the-document-interface |
| Pointer Lock 2.0 # extensions-to-the-document-interface |
| Selection API # extensions-to-document-interface |

Compatibilidade com navegadores
-------------------------------

### Firefox notes

Mozilla defines a set of non-standard properties made only for XUL content:

`document.currentScript`

Returns the `<script>` element that is currently executing.

`document.documentURIObject`

(**Mozilla add-ons only!**) Returns the `nsIURI` object representing the URI of the document. This property only has special meaning in privileged JavaScript code (with UniversalXPConnect privileges).

`document.popupNode`

Returns the node upon which a popup was invoked.

`document.tooltipNode`

Returns the node which is the target of the current tooltip.

Mozilla also define some non-standard methods:

`Document.execCommandShowHelp`

This method never did anything and always threw an exception, so it was removed in Gecko 14.0.

`Document.getBoxObjectFor` (en-US)

Use the `Element.getBoundingClientRect()` method instead.

`Document.loadOverlay`

Loads a XUL overlay dynamically. This only works in XUL documents.

`document.queryCommandText`

This method never did anything but throw an exception, and was removed in Gecko 14.0.

### Internet Explorer notes

Microsoft defines some non-standard properties:

`document.fileSize`\*
Non-standard

Returns size in bytes of the document. Starting with Internet Explorer 11, that property is no longer supported. See MSDN.Internet Explorer does not support all methods from the `Node` interface in the `Document` interface

`document.contains`

As a work-around, `document.body.contains()` can be used.


PositionError - APIs da Web

PositionError
=============

A interface **`PositionError`** representa a rasão de um erro ocorrer quando usando o dispositivo de geolocalização.

Propriedades
------------

*A interface `PositionError` não herda nenhuma propriedade*.

`PositionError.code` (en-US) Somente leitura

Retorna um tipo `unsigned short` representando o código de erro. Os valores possíveis são os seguintes:

| Valor | Constante associada | Descrição |
| --- | --- | --- |
| `1` | `PERMISSION_DENIED` | Não foi possível obter a informação sobre geolocalização por que a página não possuía permissão para fazê-lo. |
| `2` | `POSITION_UNAVAILABLE` | A obtenção da geolocalização falhou por que pelo menos uma fonte interna de posicionamento retornou um erro interno. |
| `3` | `TIMEOUT` | O tempo máximo permitido para obter a geolocalização, definido por `PositionOptions.timeout` (en-US) foi atingido antes de se obter a informação. |

`PositionError.message` (en-US) Somente leitura

Retorna um `DOMString` humanamente legível descrevendo os detalhes do erro. A especificação observa que esta informação é primariamente projetada para propósitos de debug e não deve ser exibida diretamente na interface com o usuário.

Métodos
-------

**A interface `PositionError` não implementa nem herda qualquer método*.*\*\*

Especificações
--------------

| Specification |
| --- |
| Geolocation API # position\_error\_interface |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* Usando geolocation (en-US)
* A interface `Geolocation` que o utiliza.


StorageManager - APIs da Web

StorageManager
==============

**Secure context:** This feature is available only in secure contexts (en-US) (HTTPS), in some or all supporting browsers.

**Experimental:** **Esta é uma tecnologia experimental (en-US)**
Verifique a tabela de compatibilidade entre Navegadores cuidadosamente antes de usar essa funcionalidade em produção.

**`StorageManager`** é uma inteface da Storage API (en-US) que fornece uma interface para controlar as permissões de gravações e estima o espaço disponível. Você pode obter a referência desta interface usando `navigator.storage` (en-US) ou `WorkerNavigator.storage` (en-US).

Métodos
-------

`StorageManager.estimate()` (en-US) Secure context

Retorna um objeto `StorageEstimate` (en-US) contendo números de uso e cota para sua origem.

`StorageManager.persist()` (en-US) Secure context

Retorna uma `Promise` que resolve como `true` se o agente de usuário for capaz de gravar o armazenamento do seu site.

`StorageManager.persisted()` (en-US) Secure context

Retorna uma `Promise` que resolve como `true` se alguma gravação já foi concedida para o armazenamento do seu site.

Especificações
--------------

| Specification |
| --- |
| Storage Standard # storagemanager |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


WebGL - APIs da Web

WebGL
=====

WebGL (Web Graphics Library) é uma API do JavaScript para renderizar gráficos 3D e 2D dentro de um navegador web compatível sem o uso de plug-ins. O WebGL faz isso introduzindo uma API que está de acordo com o OpenGL ES 2.0 e que pode ser usada em elementos do HTML5 `<canvas>`.

O suporte para WebGL está presente no Firefox 4+, Google Chrome 9+, Opera 12+, Safari 5.1+ e Internet Explorer 11+. No entanto, o dispositivo do usuário também deve ter um hardware que suporte esses recursos.

O elemento `<canvas>` é também usado pelo Canvas 2D para renderizar gráficos 2D em páginas web.

Referências
-----------

### Interfaces padrão

* `WebGLRenderingContext` (en-US)
* `WebGL2RenderingContext` (en-US)
Experimental
* `WebGLActiveInfo` (en-US)
* `WebGLBuffer` (en-US)
* `WebGLContextEvent` (en-US)
* `WebGLFramebuffer` (en-US)
* `WebGLProgram` (en-US)
* `WebGLQuery` (en-US)
Experimental
* `WebGLRenderbuffer` (en-US)
* `WebGLSampler` (en-US)
Experimental
* `WebGLShader` (en-US)
* `WebGLShaderPrecisionFormat` (en-US)
* `WebGLSync` (en-US)
Experimental
* `WebGLTexture` (en-US)
* `WebGLTransformFeedback` (en-US)
Experimental
* `WebGLUniformLocation` (en-US)
* `WebGLVertexArrayObject` (en-US)
Experimental
### Extensões

* `ANGLE_instanced_arrays`
* `EXT_blend_minmax` (en-US)
* `EXT_color_buffer_float` (en-US)
* `EXT_color_buffer_half_float` (en-US)
* `EXT_disjoint_timer_query` (en-US)
* `EXT_frag_depth` (en-US)
* `EXT_sRGB` (en-US)
* `EXT_shader_texture_lod` (en-US)
* `EXT_texture_filter_anisotropic` (en-US)
* `OES_element_index_uint` (en-US)
* `OES_standard_derivatives` (en-US)
* `OES_texture_float` (en-US)
* `OES_texture_float_linear` (en-US)
* `OES_texture_half_float` (en-US)
* `OES_texture_half_float_linear` (en-US)
* `OES_vertex_array_object` (en-US)
* `WEBGL_color_buffer_float` (en-US)
* `WEBGL_compressed_texture_astc` (en-US)
* `WEBGL_compressed_texture_atc`
* `WEBGL_compressed_texture_etc` (en-US)
* `WEBGL_compressed_texture_etc1` (en-US)
* `WEBGL_compressed_texture_pvrtc` (en-US)
* `WEBGL_compressed_texture_s3tc` (en-US)
* `WEBGL_compressed_texture_s3tc_srgb` (en-US)
* `WEBGL_debug_renderer_info` (en-US)
* `WEBGL_debug_shaders` (en-US)
* `WEBGL_depth_texture` (en-US)
* `WEBGL_draw_buffers` (en-US)
* `WEBGL_lose_context` (en-US)
### Eventos

* `webglcontextlost`
* `webglcontextrestored`
* `webglcontextcreationerror`
### Constantes e tipos

* Constantes em WebGL (en-US)
* Tipos em WebGL (en-US)
### WebGL 2

O WebGL 2 é uma atualização importante para o WebGL, que é fornecida através da interface `WebGL2RenderingContext` (en-US). Baseia-se no OpenGL ES 3.0 e os novos recursos incluem:

* Texturas 3D (en-US)
* Objetos Sampler (en-US)
* Objetos Uniform Buffer (en-US)
* Objetos Sync (en-US)
* Objetos Query (en-US)
* Objetos Transform Feedback (en-US)
* Extensões que agora fazem parte da especificação principal do WebGL 2: Objetos Vertex Array (en-US), instanciação (en-US), múltiplas metas de renderização (en-US), profundidade de fragmentos (en-US).

Veja também os posts WebGL 2 lands in Firefox e webglsamples.org/WebGL2Samples para alguns exemplos de demonstração.

Guias e tutoriais
-----------------

* Tutorial WebGL (en-US): Um guia para iniciantes nos conceitos principais do WebGL. Um bom lugar para iniciar se você não tem experiência prévia em WebGL.
* Melhores práticas em WebGL (en-US): Dicas e sugestões para melhorar seu conteúdo WebGL.
* Usando extensões (en-US): Como usar as extensões disponíveis em WebGL.
### Tutoriais avançados

* Modelo, visualização e projeção em WebGL (en-US): Uma explicação detalhada das três matrizes principais tipicamente usadas para representar uma visualização em 3D de um objeto: as matrizes de modelo, de visualização e de projeção.
* Matemática matricial para a web (en-US): Um guia útil sobre como matrizes de transformação 3D funcionam e como podem ser usadas na web — tanto para cálculos em WebGL quanto para transformações em CSS3.
Recursos
--------

* WebGL puro: Uma introdução ao WebGL Uma conversa com Nick Desaulniers que introduz o básico de WebGL. Este é um ótimo lugar para iniciar se você nunca trabalhou com programação de baixo nível para gráficos.
* Site WebGL do Khronos O site principal para WebGL do Grupo Khronos.
* Aprendendo WebGL Um site com tutoriais de uso do WebGL.
* Fundamentos de WebGL Um tutorial básico com os fundamentos do WebGL.
* Playground do WebGL Uma ferramenta online para criar e compartilhar projetos em WebGL. Boa para protótipos rápidos e experimentação.
* Academia WebGL Um editor HTML/JavaScript com tutoriais para aprender o básico de programação em WebGL.
* WebGL Stats Um site com estatísticas sobre as funcionalidades do WebGL em navegadores de diferentes plataformas.
### Bibliotecas

* glMatrix Biblioteca em JavaScript de Matrizes e Vetores para aplicações WebGL de Alta Performance.
* PhiloGL é um WebGL *framework* para Visualização de Dados, Código Criativo, e Desenvolvimento de Jogos.
* Pixi.js é um renderizador gráfico 2D, rápido e com código aberto, que utiliza WebGL.
* PlayCanvas motor de jogos com código aberto.
* Sylvester Uma biblioteca de código aberto para manipular vetores e matrizes. Não é otimizada para WebGL mas é extremamente robusta.
* three.js é uma biblioteca WebGL 3D com recursos completos de código aberto.
* Phaser é um *framework* rápido de código aberto, gratuita e divertida para jogos em navegadores baseados em Canvas e WebGL.
Especificações
--------------

| Specification |
| --- |
| WebGL Specification # 5.14 |
| WebGL 2.0 Specification # 3.7 |

Compatibilidade com navegadores
-------------------------------

### api.WebGLRenderingContext

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### api.WebGL2RenderingContext

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* Canvas
* Informações de compatibilidade para extensões WebGL (en-US)


AudioNode - APIs da Web

AudioNode
=========

A interface AudioNode é uma interface genérica para representar um módulo de processamento como uma fonte de áudio (ex. um elemento HTML `<audio>` ou `<video>` , um `OscillatorNode` (en-US), etc.), um destino do áudio, um módulo intermediário de processamento (ex. um filtro como `BiquadFilterNode` ou `ConvolverNode` (en-US)), ou um controle de volume (como o `GainNode` (en-US)).

![AudioNodes participating in an AudioContext create a audio routing graph.](/pt-BR/docs/Web/API/AudioNode/webaudiobasicspt-br.png)

Um `AudioNode` tem entradas (inputs) e saídas (outputs), cada uma delas com uma determinada quantidade de canais. Um `AudioNode` sem nenhuma entrada e uma ou múltiplas saídas é chamado de *source node*. The exact processing done varies from one `AudioNode` to another but, in general, a node reads its inputs, does some audio-related processing, and generates new values for its outputs, or simply lets the audio pass through (for example in the `AnalyserNode` (en-US), where the result of the processing is accessed separately).

Different nodes can be linked together to build a *processing graph*. Such a graph is contained in an `AudioContext`. Each `AudioNode` participates in exactly one such context. In general, processing nodes inherit the properties and methods of `AudioNode`, but also define their own functionality on top. See the individual node pages for more details, as listed on the Web Audio API homepage.

**Nota:** An `AudioNode` can be target of events, therefore it implements the `EventTarget` interface.

Properties
----------

`AudioNode.context` (en-US) Somente leitura

Returns the associated `AudioContext`, that is the object representing the processing graph the node is participating in.

`AudioNode.numberOfInputs` (en-US) Somente leitura

Returns the number of inputs feeding the node. Source nodes are defined as nodes having a `numberOfInputs` property with a value of `0`.

`AudioNode.numberOfOutputs` (en-US) Somente leitura

Returns the number of outputs coming out of the node. Destination nodes — like `AudioDestinationNode` (en-US) — have a value of `0` for this attribute.

`AudioNode.channelCount` (en-US)

Represents an integer used to determine how many channels are used when up-mixing and down-mixing (en-US) connections to any inputs to the node. Its usage and precise definition depend on the value of `AudioNode.channelCountMode` (en-US).

`AudioNode.channelCountMode` (en-US)

Represents an enumerated value describing the way channels must be matched between the node's inputs and outputs.

`AudioNode.channelInterpretation` (en-US)

 Represents an enumerated value describing the meaning of the channels. This interpretation will define how audio up-mixing and down-mixing (en-US) will happen.
 The possible values are `"speakers"` or `"discrete"`.

Methods
-------

*Also implements methods from the interface* `EventTarget`.

`AudioNode.connect(AudioNode)` (en-US)

Allows us to connect one output of this node to one input of another node.

`AudioNode.connect(AudioParam)`

Allows us to connect one output of this node to one input of an audio parameter.

`AudioNode.disconnect()` (en-US)

Allows us to disconnect the current node from another one it is already connected to.

Example
-------

This simple snippet of code shows the creation of some audio nodes, and how the `AudioNode` properties and methods can be used. You can find examples of such usage on any of the examples linked to on the Web Audio API landing page (for example Violent Theremin.)

```js
var AudioContext = window.AudioContext || window.webkitAudioContext;

var audioCtx = new AudioContext();

var oscillator = audioCtx.createOscillator();
var gainNode = audioCtx.createGain();

oscillator.connect(gainNode);
gainNode.connect(audioCtx.destination);

oscillator.context;
oscillator.numberOfInputs;
oscillator.numberOfOutputs;
oscillator.channelCount;
```

Specifications
--------------

| Specification |
| --- |
| Web Audio API # AudioNode |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using the Web Audio API (en-US)


Coordinates - APIs da Web

Coordinates
===========

**Secure context:** This feature is available only in secure contexts (en-US) (HTTPS), in some or all supporting browsers.

O **`Coordinates`** iinterface representa a posição e a altitude do dispositivo na Terra, bem como a precisão com que essas propriedades são calculadas.

Propriedades
------------

*A interface do `Coordinates` não herda nenhuma propiedade*.

`Coordinates.latitude` (en-US) Somente leitura  Secure context

Retorna um `double` representando a latitude da posição em graus decimais.

`Coordinates.longitude` (en-US) Somente leitura  Secure context

Retorna um `double` representando a longitude da posição em graus decimais.

`Coordinates.altitude` Somente leitura  Secure context

Retorna um `double` representando a altitude da posição em metros, em relação ao nível do mar. Esse valor pode ser `null` se a implementação não puder fornecer os dados.

`Coordinates.accuracy` (en-US) Somente leitura  Secure context

Retorna um `double` representação da precisão das propriedades em `latitude` e `longitude`, expressa em metros.

`Coordinates.altitudeAccuracy` (en-US) Somente leitura  Secure context

Retorna um `double` representação da precisão da `altitude` expressa em metros. Esse valor pode ser `null`.

`Coordinates.heading` (en-US) Somente leitura  Secure context

Retorna um `double` representação da direção na qual o dispositivo está viajando. Esse valor, especificado em graus, indica o quão longe do título verdadeiro do norte do dispositivo. `0` representam o verdadeiro norte e a direção é determinada no sentido horário (o que significa que o leste é `90`graus e oeste é `270`graus). Se `speed`é `0`, `heading`é `NaN` (en-US). Se o dispositivo não conseguir fornecer `heading`informações, esse valor é `null`.

`Coordinates.speed` (en-US) Somente leitura  Secure context

Retorna um `double`representação da velocidade do dispositivo em metros por segundo. Esse valor pode ser `null`.

Métodos
-------

**A interface da `Coordinates` *não implementa, nem herda nenhum método.***

Especificações
--------------

| Specification |
| --- |
| Geolocation API # coordinates\_interface |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* Usando geolocalização
* O `Geolocation` e a interface que o usa.