fetch() - APIs da Web

fetch()
=======

O método global **`fetch()`** inicia o processo de busca de um recurso da rede, retornando uma promessa que é cumprida assim que a resposta estiver disponível.

A promessa é resolvida para o objeto `Response` que representa a resposta à sua solicitação. A promessa *não* rejeita erros de HTTP - apenas rejeita erros de rede. Você deve usar os manipuladores `then` para chechar erros de HTTP.

`WindowOrWorkerGlobalScope` é implementado por `Window` e
 `WorkerGlobalScope` (en-US), o que significa que o método `fetch()` está disponível em praticamente qualquer contexto no qual você queira buscar recursos.

 Uma promessa `fetch()` só é rejeitada quando um erro de rede é encontrado (que é geralmente quando há um problema de permissão ou
 similar). Uma promessa `fetch()` *não* rejeita erros HTTP (`404`, etc.). Em vez disso, um manipulador
 `then()` deve checar as propriedades `Response.ok` (en-US) e/ou
 `Response.status` (en-US).

O método `fetch()` é controlado pela diretiva `connect-src` da Content Security Policy em vez da diretiva dos recursos que está recuperando.

>
>
> **Note:** Os parâmetros do método `fetch()` são idênticos
>  aos do construtor `Request()`.
>
>
>
>

Sintaxe
-------

```js
const fetchResponsePromise = fetch(resource [, init])
```

### Parâmetros

`resource`

Isto define o recurso que você deseja buscar. Isto pode ser:

* String ou qualquer outro objeto com um stringifier (en-US) — incluindo um objeto `URL` — que fornece a URL do recurso que você deseja buscar.
* Um objeto `Request`.

`init` Optional

Um objeto contendo quaisquer configurações customizadas que você deseja aplicar à solicitação. As opções possíveis são:

`method`

 O método da requisição, por exemplo `GET`, `POST`. Observe que o cabeçalho
 `Origin` não é definido em requisições Fetch com um método de
 `HEAD` ou `GET`.
 (Este comportamento foi corrigido no Firefox 65 — consulte Erro do Firefox 1508661).

`headers`

 Qualquer cabeçalho que você queira adicionar à sua requisição, contido dentro de um objeto
 `Headers` (en-US) ou um objeto literal com valores `String`. Observe que alguns nomes são proibidos.

`body`

 Qualquer corpo que você queira adicionar à sua requisição: podendo ser um
 `Blob`, `BufferSource`, `FormData`,
 `URLSearchParams`, `USVString` (en-US), ou um objeto
 `ReadableStream` (en-US). Note que uma requisição usando os métodos
 `GET` or `HEAD` não pode ter um corpo.

`mode`

 O modo que deseja usar para a requisição, por exemplo, `cors`,
 `no-cors`, ou `same-origin`.

`credentials`

Controla o que os navegadores fazem com as credenciais (cookies, entradas de Autenticação HTTP, e certificados de cliente TLS). Deve ser uma das seguintes strings:

`omit`

Diz aos navegadores para excluir credenciais da requisição, e ignorar quaisquer credenciais enviadas de volta na resposta (por exemplo, qualquer cabeçalho `Set-Cookie`).

`same-origin`

Diz aos navegadores para incluir credenciais com requisições para URLs da mesma origem, e usar quaisquer credenciais enviadas de volta nas respostas de URLs da mesma origem.

`include`

Diz aos navegadores para incluir credenciais em ambas requisições `same-origin` e `cross-origin`, e sempre use as credenciais enviadas de volta nas respostas.

>
> **Note:** As credenciais podem ser incluídas em requisições cross-origin simples e "finais", mas não devem ser incluídas em requisições de comprovação de CORS.
>
>
>

`cache`

Uma string indicando como a requisição vai interagir com o cache HTTP do navegador. Os valores possíveis, `default`, `no-store`, `reload`, `no-cache`, `force-cache`, e `only-if-cached`, estão documentados no artigo para a propriedade `cache` (en-US) do objeto `Request`.

`redirect`

Como lidar com uma resposta `redirect`:

* `follow`: Segue os redirecionamentos automaticamente. A menos que esteja definido de outra forma, o redirecionamento é definido, por padrão, como `follow`.
* `error`: Aborta com um erro se o redirecionamento ocorrer.
* `manual`: O autor da chamada pretende processar a resposta em outro contexto.
 Veja WHATWG fetch standard para mais informações.

`referrer`

 Uma `USVString` (en-US) especificando o referenciador da requisição. Isso pode ser uma URL
 same-origin, `about:client`, ou uma string vazia.

`referrerPolicy`

 Especifica a referrer
policy para usar para a requisição. Pode ser `no-referrer`,
 `no-referrer-when-downgrade`, `same-origin`,
 `origin`, `strict-origin`,
 `origin-when-cross-origin`,
 `strict-origin-when-cross-origin` ou `unsafe-url`.

`integrity`

 Contém o valor subresource integrity (en-US)
 da requisição (por exemplo,
 `sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=`).

`keepalive`

 A opção `keepalive` pode ser usada para permitir que a requisição sobreviva à página. A busca com a flag `keepalive` é uma substituição para a API
 `Navigator.sendBeacon()` (en-US).

`signal`

Uma instância de objeto `AbortSignal`; permite comunicar com uma requisição fetch e abortá-la, se desejado, por meio de um `AbortController` (en-US).

### Valor de retorno

Uma `Promise` que resolve para um objeto `Response`.

### Exceções

`AbortError`

 A requisição foi abortada devido a uma chamada ao `AbortController` (en-US) ou ao método
 `abort()` (en-US).

`TypeError`

Pode ocorrer pelos seguintes motivos:

| Motivo | Exemplos de falha |
| --- | --- |
| Nome do cabeçalho inválido |
```
// space in "C ontent-Type"
const headers = {
    "C ontent-Type": "text/xml",
    "Breaking-Bad": "<3"
};
fetch('https://example.com/', { headers });

```
 |
| Valor do cabeçalho inválido. O objeto header deve conter exatamente dois elementos. |
```
const headers = [
    ["Content-Type", "text/html", "extra"],
    ["Accept"],
];
fetch('https://example.com/', { headers });

```
 |
| URL inválida ou esquema, ou está usando um esquema que fetch não suporta, ou está usando um esquema que não é suportado por um modo de requisição específico. |
```
fetch('blob://example.com/', { mode: 'cors' })

```
 |
| URL que inclui credenciais |
```
fetch('https://user:password@example.com/')

```
 |
| URL de referência inválida |
```
fetch('https://example.com/', {
  referrer: './abc\u0000df'
})

```
 |
| Modos inválidos (`navigate` and `websocket`) |
```
fetch('https://example.com/', { mode: 'navigate' })

```
 |
| Se o modo de cache da requisição é "only-if-cached" e o modo da requisição é diferente de "same-origin". |
```
fetch('https://example.com/', {
  cache: 'only-if-cached',
  mode: 'no-cors'
})

```
 |
|
 Se o método da requisição for um token de nome inválido ou um dos cabeçalhos proibidos:
 CONNECT, TRACE or TRACK
  |
```
fetch('https://example.com/', { method: 'CONNECT' })

```
 |
| Se o modo da requisição é "no-cors" e o método da requisição não é um método CORS-safe-listed (GET, HEAD ou POST) |
```
fetch('https://example.com/', {
  method: 'CONNECT',
  mode: 'no-cors'
})

```
 |
| Se o método da requisição é GET ou HEAD e o corpo não for nulo(null) ou undefined. |
```
fetch('https://example.com/', {
  method: 'GET',
  body: new FormData()
})

```
 |
| Se fetch gera um erro de rede. |  |

Exemplos
--------

 No nosso exemplo de requisição Fetch (veja Fetch Request live) nós criamos um novo objeto `Request` usando um constructor relevante, depois buscamos isso usando uma chamada ao `fetch()`. Uma vez que estamos buscando uma imagem, executamos
 `Response.blob()` (en-US) na resposta para dar a ela o tipo MIME adequado para que lidemos adequadamente
 handled properly, então criamos um Objeto URL disso e exibimos isso em um elemento
 `<img>`.

```js
const myImage = document.querySelector("img");

let myRequest = new Request("flowers.jpg");

fetch(myRequest)
  .then(function (response) {
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.blob();
  })
  .then(function (response) {
    let objectURL = URL.createObjectURL(response);
    myImage.src = objectURL;
  });
```

 No exemplo Fetch
with init then Request (veja Fetch
Request init live), nós fazemos a mesma coisa exceto que passamos em um objeto
 `init` quando invocamos o `fetch()`:

```js
const myImage = document.querySelector("img");

let myHeaders = new Headers();
myHeaders.append("Accept", "image/jpeg");

const myInit = {
  method: "GET",
  headers: myHeaders,
  mode: "cors",
  cache: "default",
};

let myRequest = new Request("flowers.jpg");

fetch(myRequest, myInit).then(function (response) {
  // ...
});
```

 Você também poderia passar o objeto `init` com o constructor
 `Request` para obter o mesmo efeito:

```js
let myRequest = new Request("flowers.jpg", myInit);
```

 Você também pode usar um object literal como `headers` em
 `init`.

```js
const myInit = {
  method: "GET",
  headers: {
    Accept: "image/jpeg",
  },
  mode: "cors",
  cache: "default",
};

let myRequest = new Request("flowers.jpg", myInit);
```

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
-----------

* Fetch API
* ServiceWorker API
* HTTP access control (CORS)
* HTTP


IndexedDB - APIs da Web

IndexedDB
=========

IndexedDB é uma API para armazenamento client-side de quantidades significantes de informações e buscas com alta performance por índices. Enquanto DOM Storage (en-US) é útil para armazenamento de pequenas quantidade de dados, IndexedDB é a solução para grande porção de dados estruturados.

Esta página basicamente é o ponto de entrada para uma descrição técnica dos objetos da API. Precisando de suporte ainda mais inicial consulte os Conceitos Básicos sobre IndexedDb (en-US). Para mais detalhes sobre a implementação, veja Usando IndexedDB (en-US).

IndexedDB provém APIs separadas para acesso tanto síncrono quanto assíncrono. As APIs síncronas devem ser utilizadas apenas dentro de Web Workers (en-US), apesar de não ser implementada por nenhum navegador atualmente. A API assíncrona funciona tanto com ou sem Web Workers, sendo que o Firefox ainda não implementou este.

API Assíncrona
--------------

Os métodos da API assíncrona são chamados sem bloquear a thread que os chama. Para obter acesso assíncrono à database, chame open() (en-US) no atributo indexedDB (en-US) do objeto window (en-US), que retornará um objeto `IDBRequest` (en-US). Operações assíncronas comunicam-se com a aplicação que os chamam executando eventos nos objetos `IDBRequest` (en-US).

**Nota:** Nota: O objeto indexedDB é prefixado em navegadores mais antigos (propriedade mozIndexedDB em Gecko < 16, webkitIndexedDb em Chrome e msIndexedDB no IE 10).

As interfaces da API assíncrona do IndexedDB são:

`IDBFactory`

Provém acesso ao banco de dados. É a interface implementado pelo objeto global indexedDB e é, portanto, o ponto de entrada para API.

`IDBCursor`

Itera sobre objectStores e índices

`IDBCursorWithValue` (en-US)

Itera sobre objectStores e índices e retorna o atual valor do cursor

`IDBDatabase` (en-US)

Represents a connection to a database. It's the only way to get a transaction on the database.

`IDBEnvironment`

Provides access to a client-side database. It is implemented by the `window` and `worker` objects.

`IDBIndex` (en-US)

Provides access to the metadata of an index.

`IDBKeyRange` (en-US)

Define um alcance das chaves.

`IDBObjectStore` (en-US)

Representa um ObjectStore

`IDBOpenDBRequest` (en-US)

Representa uma requisição para abrir o banco de dados.

`IDBRequest` (en-US)

Provém acesso a resultados de requisições assíncronas ao banco de dados e a objetos do banco de dados. É o que você obtém quando chama um método assíncrono.

`IDBTransaction` (en-US)

Representa uma transação. Você cria a transação no banco de dados, especifíca o escopo (tal como qual objectStore você deseja acessar), e determina que tipo de acesso (apenas leitura ou também escrita) daquilo que você deseja.

Uma versão anterior da especificação também define estas interfaces agora removidas. Elas ainda estão documentadas caso você precise atualizar códigos escritos anteriormente:

`IDBVersionChangeRequest`

Representa uma requisição para alterar a versão do banco de dados. O modo de alterar a versão do banco de dados mudou então (chamando IDBFactory.open sem também chamar IDBDatabase.setVersion) e a interface IDBOpenDBRequest agora tem a funcionalidade do removido IDBVersionChangeRequest.

`IDBDatabaseException`

Representa condições de erro que podem ser encontradas enquanto performando operações no banco de dados.

**Nota:** há também a versão síncrona da API (en-US). A versão síncrona não tem implementação em qualquer navegador. É feita para ser utilizada com WebWorkers (en-US).

Limites de Armazenamento
------------------------

Não há qualquer limite em um único elemento da database. Entretanto podem haver limites quanto ao tamanho de cada banco de dados. Este limite (e a maneira com qual o usuário chega a ele) pode variar de um navegador para outro:

* Firefox: não há limite no tamanho do banco de dados. A interface do usuário irá apenas pedir a permissão para armazenar conjuntos com tamanho maior que 50mb. Este limite de tamanho pode ser customizado através da preferência dom.indexedDB.warningQuota (que é definida em http://mxr.mozilla.org/mozilla-central/source/modules/libpref/src/init/all.js).
* Google Chrome: veja https://developers.google.com/chrome...rage#temporary
Exemplos
--------

* Um grande exemplo de para o que o indexedDb pode ser utilizado na web é o exemplo do Marco Castelluccion, vencedor do IndexedDB Mozilla DevDerby. A demonstração vencedora foi o eLibri, uma aplicação biblioteca e leitora de Ebook.
* Você deveria também checar a referência de aplicações exemplo neste documento de referências: Notificações de A Fazer (veja ao vivo). Nem todo fragmento de código aparece neste exemplo, mas todo exemplo usa a mesma estrutura de dados e sintaxe, e fará sentido no contexto da aplicação.
Veja Também
-----------

* Conceitos Básicos sobre IndexedDB (en-US)
* Utilizando IndexedDB (en-US)
* Armazenando Imagens e Arquivos com IndexedDB
* Especificação da API de Indexed Database
* IndexedDB — O armazenamento em seu Navegador
* IndexedDB Exemplos
* IndexedDB Polyfill/Shim para navegadores que apenas suportam WebSQL (e.g. mobile WebKit)
* JQuery IndexedDB plugin


Beacon API - APIs da Web

Beacon API
==========

A **`Beacon`** API é usada para enviar um request assíncrono e não bloqueante para um servidor web. O request não espera por uma resposta. Ao contrário de requests feitos utilizando `XMLHttpRequest` ou `Fetch`, o navegador garante que irá iniciar e aguardar a conclusão do request antes da página ser desmontada.

O principal caso de uso da Beacon API é enviar dados de análise, como eventos do lado do cliente ou dados da sessão para o servidor. Historicamente, os sites costumavam usar `XMLHttpRequest` para isso, mas os navegadores não garantem o envio de solicitações assíncronas em algumas circunstâncias (por exemplo, se a página vai ser desmontada). Para evitar esses problemas, os sites usam diversas técnicas, como enviar o request síncrono, mas isso tem um efeito colateral ruim na responsividade. Como beacon requests são assíncronos quanto garantidas de serem enviados, elas combinam desempenho e confiabilidade.

Para mais detalhes sobre a motivação e uso dessa API, veja a documentação sobre o método `navigator.sendBeacon()` (en-US)

**Nota:** essa API *não está disponível* nos Web Workers (não é exposta através do `WorkerNavigator` (en-US)).

Interface
---------

Essa API define apenas um método: `navigator.sendBeacon()` (en-US).

O método recebe dois argumentos, a URL e os dados que serão enviados no request. Os dados são opcionais e seu tipo pode ser um `TypedArray` (en-US), `DataView`, `Blob`, uma string ou objeto, ou um objeto `FormData`. Se o navegador colocar na fila o request para ser executado com sucesso o método retornará `true`; se não retornará `false`.

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

| Specification |
| --- |
| Beacon # sendbeacon-method |

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

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

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

* Beacon standard
* Beacon CanIUse data
* Intercepting beacons through service workers; Ehsan Akhgari; 2015-Apr-08
* https://webkit.org/blog/8821/link-click-analytics-and-privacy/
* Beaconing in Practice


IDBCursor - APIs da Web

IDBCursor
=========

O **`IDBCursor`** é uma interface da API IndexedDB que representa o cursor (en-US) para atravessar ou interagir sobre vários registros em um banco de dados.

O cursor tem uma fonte que indica qual índice ou armazenamento o objeto está sobre a iteração. Ele tem uma posição dentro do intervalo, e move-se numa direcção que é aumentar ou diminuir na ordem de chaves ficha. O cursor permite que um aplicativo para processar de forma assíncrona todos os registros na faixa do cursor.

Pode ter um número ilimitado de cursores ao mesmo tempo. Você sempre consegue o mesmo objeto IDBCursor representando um determinado cursor. As operações são realizadas na loja de índice ou objeto subjacente.

**Note:** This feature is available in Web Workers

Methods
-------

`IDBCursor.advance()` (en-US)

Define o número de vezes um cursor deve mover a sua posição para a frente.

`IDBCursor.continue()` (en-US)

Avança o cursor para a próxima posição ao longo de sua direção, para o item cuja chave corresponde ao parâmetro `chave` opcional.

`IDBCursor.delete()` (en-US)

Retorna um `IDBRequest` (en-US) objeto, e, em um segmento separado, exclui o registro na posição do cursor, sem alterar a posição do cursor. Isso pode ser usado para excluir registros específicos.

`IDBCursor.update()` (en-US)

Retorna um `IDBRequest` (en-US) objeto, e, em um segmento separado, atualiza o valor na posição atual do cursor em armazenar o objeto. Isso pode ser usado para atualizar registros específicos.

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

`IDBCursor.source` (en-US) Somente leitura

Retorna um `IDBObjectStore` (en-US) ou `IDBIndex` (en-US) que o cursor é a iteração. Esta função nunca retorna nulo ou gera uma exceção, mesmo se o cursor está actualmente a ser iterativo, tem iterated além de seu fim, ou a sua operação não está ativa.

`IDBCursor.direction` (en-US) Somente leitura

Retorna a direcção do percurso do cursor. Veja

constantes

para os possíveis valores.

`IDBCursor.key` (en-US) Somente leitura

Returns the key for the record at the cursor's position. If the cursor is outside its range, this is set to `undefined`. The cursor's key can be any data type.

`IDBCursor.primaryKey` (en-US) Somente leitura

Retorna a chave para o registro na posição do cursor. Se o cursor estiver fora do seu alcance, isso é definido como indefinido. A chave do cursor pode ser qualquer tipo de dados.

Constantes
----------

**Aviso:** These constants are no longer available. You should use the string constants directly instead. (Firefox bug 891944)

* `NEXT`: `"next"` : The cursor shows all records, including duplicates. It starts at the lower bound of the key range and moves upwards (monotonically increasing in the order of keys).
* `NEXTUNIQUE` : `"nextunique"` : The cursor shows all records, excluding duplicates. If multiple records exist with the same key, only the first one iterated is retrieved. It starts at the lower bound of the key range and moves upwards.
* `PREV`: `"prev"` : The cursor shows all records, including duplicates. It starts at the upper bound of the key range and moves downwards (monotonically decreasing in the order of keys).
* `PREVUNIQUE`: `"prevunique"` : The cursor shows all records, excluding duplicates. If multiple records exist with the same key, only the first one iterated is retrieved. It starts at the upper bound of the key range and moves downwards.
Example
-------

In this simple fragment we create a transaction, retrieve an object store, then use a cursor to iterate through all the records in the object store. The cursor does not require us to select the data based on a key; we can just grab all of it. Also note that in each iteration of the loop, you can grab data from the current record under the cursor object using `cursor.value.foo`. For a complete working example, see our IDBCursor example (view example live).
```

function displayData() {
  var transaction = db.transaction(['rushAlbumList'], "readonly");
  var objectStore = transaction.objectStore('rushAlbumList');

  objectStore.openCursor().onsuccess = function(event) {
    var cursor = event.target.result;
    if(cursor) {
      var listItem = document.createElement('li');
      listItem.innerHTML = cursor.value.albumTitle + ', ' + cursor.value.year;
      list.appendChild(listItem);

      cursor.continue();
    } else {
      console.log('Entries all displayed.');
    }
  };
};
```

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

| Specification |
| --- |
| Indexed Database API 3.0 # cursor-interface |

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

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

See also
--------

* Using IndexedDB
* Starting transactions: `IDBDatabase` (en-US)
* Using transactions: `IDBTransaction` (en-US)
* Setting a range of keys: `IDBKeyRange` (en-US)
* Retrieving and making changes to your data: `IDBObjectStore` (en-US)
* Using cursors: `IDBCursor`
* Reference example: To-do Notifications (view example live.)


File - APIs da Web

File
====

Sumário
-------

A interface `File` provê informações sobre arquivos e permite ao JavaScript a acessar seu conteúdo.

São geralmente recuperados a partir de um objeto `FileList` que é retornado como resultado da seleção, pelo usuário, de arquivos através do elemento `<input>`, a partir do objeto `DataTransfer` utilizado em operações de arrastar e soltar, ou a partir da API `mozGetAsFile()` em um `HTMLCanvasElement` (en-US). Em Gecko, códigos com privilégiios podem criar objetos File representando qualquer arquivo local sem a intereção do usuário (veja Implementation notes para mais informações.)

Um objeto File é um tipo específico de `Blob`, e podem ser utilizados em qualquer contexto que um Blob pode. Em particular, `FileReader`, `URL.createObjectURL()`, `createImageBitmap()` (en-US), e `XMLHttpRequest.send()` aceitam ambos, Blobs e Files.

Veja Using files from web applications (en-US) (usando arquivos através de uma aplicação web) para mais informações e exemplos.

A referência ao arquivo pode ser salva quando o formulário é submetido enquanto o usuário está offline, de forma que os dados possam ser recuperados e enviados quando a conexão com a internet for reestabelecida,

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

`File.lastModifiedDate` (en-US) Somente leitura

A Data da última modificação do arquivo referenciado pelo objeto `File`.

`File.name` (en-US) Somente leitura

O nome do arquivo referenciado pelo objeto `File`.

`File.fileName` (en-US)
Non-standard
 Somente leitura

O nome do arquivo referenciado pelo objeto `File`.

`File.fileSize` (en-US)
Non-standard
 Somente leitura

O tamanho do arquivo referenciado, em bytes.

A interface `File` herda as propriedades da interface `Blob`.

{{page("/pt-BR/docs/Web/API/Blob","Properties")}}Métodos
-------

`File.getAsBinary()`
Non-standard

Retorna uma string contendo os dados do arquivo em formato binário.

`File.getAsDataURL()`
Non-standard

Uma string contendo os dados do arquivo codificados como `data:` URL.

`File.getAsText(string encoding)`
Non-standard

Retorna o conteúdo do arquivo como uma string em que os dados do arquivo são interpretados como texto, usando a codificação passada por parâmetro.

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

| Specification |
| --- |
| File API # file-section |

Compatibilidade com os Navegadores
----------------------------------

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

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

* Using files from web applications (en-US)
* Using the DOM File API in chrome code
* `FileReader`


DeviceRotationRate - APIs da Web

DeviceRotationRate
==================

**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 `DeviceRotationRate` fornece informações sobre a taxa na qual o dispositivo está girando em torno de todos os três eixos.

Properties
----------

`DeviceRotationRate.alpha` (en-US) Somente leitura

A quantidade de rotação em torno do eixo Z, em graus por segundo.

`DeviceRotationRate.beta` (en-US) Somente leitura

A quantidade de rotação em torno do eixo Y, em graus por segundo

`DeviceRotationRate.gamma` (en-US) Somente leitura

A quantidade de rotação em torno do eixo X, em graus por segundo

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

| Specification |
| --- |
| DeviceOrientation Event Specification # devicemotioneventrotationrate |

Navegador compativeís
---------------------

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


WindowOrWorkerGlobalScope.setInterval() - APIs da Web

WindowOrWorkerGlobalScope.setInterval()
=======================================

O método **`setInterval()`** oferecido das interfaces `Window` e `Worker`, repetem chamadas de funções ou executam trechos de código, com um tempo de espera fixo entre cada chamada. Isso retorna um ID único para o intervalo, podendo remove-lo mais tarde apenas o chamando `clearInterval()` (en-US). Este metodo é definido pelo mixin `WindowOrWorkerGlobalScope`.

Sintaxe
-------
```

var intervalID = scope.setInterval(func, delay[, param1, param2, ...]);
var intervalID = scope.setInterval(code, delay);
```

### Parâmetros

`func`

Uma `function` para ser executada a cada `delay` em milisegundos. Não é passado nenhum parâmetro para a função, e não retorna nenhum valor esperado.

`code`

Uma sintaxe opcional permite você incuir uma string ao invés de uma função, no qual é compilado e executada a cada `delay` em milisegundos. Esta sintaxe *não é recomendada* pelos mesmos motivos que envolvem riscos de segurança de `eval()` (en-US).

`delay`

O tempo, em milisegundos (milésimos de segundo), o temporizador deve atrasar entre cada execução de uma especifica função ou código. Se esse parâmetro for menos que 10, um valor de 10 é usado. Note que o atraso pode vir a ser mais longo; veja Razões para atrasos maiores do que o especificado (en-US) para exemplos.

`param1, ..., paramN` Optional

Parâmetros adicionais que são passados através da função especificada pela *func* quando o temporizador expirar.

**Nota:** Passing additional parameters to `setInterval()` in the first syntax does not work in Internet Explorer 9 and earlier. If you want to enable this functionality on that browser, you must use a polyfill (see the Callback arguments section).

### Return value

O `intervalID` retornado é um número, non-zero valor que identifica o temporizador criado pela chamada do `setInterval()`; este valor pode ser passado para `WindowOrWorkerGlobalScope.clearInterval()` (en-US) afim de cancelar o timeout.

Isso pode ser útil, estar ciente que o `setInterval()` e `setTimeout()` (en-US) compartilham o mesmo grupo de IDs, e que o `clearInterval()` e `clearTimeout()` podem tecnicamente serem usados em conjunto. Para deixar claro, contudo, você deve sempre tentar evitar combina-los, afim de evitar confusão na manutenção do seu código.

**Nota:** The `delay` parameter is converted to a signed 32-bit integer. This effectively limits `delay` to 2147483647 ms, since it's specified as a signed integer in the IDL.

Exemplos
--------

### Exemplo 1: Sintaxe básica

O seguinte exemplo mostra a sintaxe básica do `setInterval()`

```js
var intervalID = window.setInterval(myCallback, 500);

function myCallback() {
  // Your code here
}
```

### Exemplo 2: Alternando duas cores

O seguinte exemplo chama a função `flashtext()` uma vez por segundo até o botão de parar ser pressionado.

```html
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>setInterval/clearInterval example</title>

    <script>
 var nIntervId;

 function changeColor() {
 nIntervId = setInterval(flashText, 1000);
 }

 function flashText() {
 var oElem = document.getElementById("my\_box");
 oElem.style.color = oElem.style.color == "red" ? "blue" : "red";
 // oElem.style.color == 'red' ? 'blue' : 'red' is a ternary operator.
 }

 function stopTextColor() {
 clearInterval(nIntervId);
 }
 </script>
  </head>

  <body onload="changeColor();">
    <div id="my\_box">
      <p>Hello World</p>
    </div>

    <button onclick="stopTextColor();">Stop</button>
  </body>
</html>
```

### Exemplo 3: Simulação de máquina de escrever

O seguinte exemplo simula uma máquina de escrever primeiro limpando e digitando lentamente o conteúdo para `NodeList` (en-US) que corresponde a um grupo especificado de seletores.

```html
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>JavaScript Typewriter - MDN Example</title>
    <script>
 function Typewriter(sSelector, nRate) {
 function clean() {
 clearInterval(nIntervId);
 bTyping = false;
 bStart = true;
 oCurrent = null;
 aSheets.length = nIdx = 0;
 }

 function scroll(oSheet, nPos, bEraseAndStop) {
 if (!oSheet.hasOwnProperty("parts") || aMap.length < nPos) {
 return true;
 }

 var oRel,
 bExit = false;

 if (aMap.length === nPos) {
 aMap.push(0);
 }

 while (aMap[nPos] < oSheet.parts.length) {
 oRel = oSheet.parts[aMap[nPos]];

 scroll(oRel, nPos + 1, bEraseAndStop)
 ? aMap[nPos]++
 : (bExit = true);

 if (
 bEraseAndStop &&
 ((oRel.ref.nodeType - 1) | 1) === 3 &&
 oRel.ref.nodeValue
 ) {
 bExit = true;
 oCurrent = oRel.ref;
 sPart = oCurrent.nodeValue;
 oCurrent.nodeValue = "";
 }

 oSheet.ref.appendChild(oRel.ref);
 if (bExit) {
 return false;
 }
 }

 aMap.length--;
 return true;
 }

 function typewrite() {
 if (
 sPart.length === 0 &&
 scroll(aSheets[nIdx], 0, true) &&
 nIdx++ === aSheets.length - 1
 ) {
 clean();
 return;
 }

 oCurrent.nodeValue += sPart.charAt(0);
 sPart = sPart.slice(1);
 }

 function Sheet(oNode) {
 this.ref = oNode;
 if (!oNode.hasChildNodes()) {
 return;
 }
 this.parts = Array.prototype.slice.call(oNode.childNodes);

 for (var nChild = 0; nChild < this.parts.length; nChild++) {
 oNode.removeChild(this.parts[nChild]);
 this.parts[nChild] = new Sheet(this.parts[nChild]);
 }
 }

 var nIntervId,
 oCurrent = null,
 bTyping = false,
 bStart = true,
 nIdx = 0,
 sPart = "",
 aSheets = [],
 aMap = [];

 this.rate = nRate || 100;

 this.play = function () {
 if (bTyping) {
 return;
 }
 if (bStart) {
 var aItems = document.querySelectorAll(sSelector);

 if (aItems.length === 0) {
 return;
 }
 for (var nItem = 0; nItem < aItems.length; nItem++) {
 aSheets.push(new Sheet(aItems[nItem]));
 /\* Uncomment the following line if you have previously hidden your elements via CSS: \*/
 // aItems[nItem].style.visibility = "visible";
 }

 bStart = false;
 }

 nIntervId = setInterval(typewrite, this.rate);
 bTyping = true;
 };

 this.pause = function () {
 clearInterval(nIntervId);
 bTyping = false;
 };

 this.terminate = function () {
 oCurrent.nodeValue += sPart;
 sPart = "";
 for (nIdx; nIdx < aSheets.length; scroll(aSheets[nIdx++], 0, false));
 clean();
 };
 }

 /\* usage: \*/
 var oTWExample1 = new Typewriter(
 /\* elements: \*/ "#article, h1, #info, #copyleft",
 /\* frame rate (optional): \*/ 15,
 );

 /\* default frame rate is 100: \*/
 var oTWExample2 = new Typewriter("#controls");

 /\* you can also change the frame rate value modifying the "rate" property; for example: \*/
 // oTWExample2.rate = 150;

 onload = function () {
 oTWExample1.play();
 oTWExample2.play();
 };
 </script>
    <style type="text/css">
 span.intLink,
 a,
 a:visited {
 cursor: pointer;
 color: #000000;
 text-decoration: underline;
 }

 #info {
 width: 180px;
 height: 150px;
 float: right;
 background-color: #eeeeff;
 padding: 4px;
 overflow: auto;
 font-size: 12px;
 margin: 4px;
 border-radius: 5px;
 /\* visibility: hidden; \*/
 }
 </style>
  </head>

  <body>
    <p
 id="copyleft"
 style="font-style: italic; font-size: 12px; text-align: center;">
      CopyLeft 2012 by
      <a href="https://developer.mozilla.org/" target="\_blank"
 >Mozilla Developer Network</a
 >
    </p>
    <p id="controls" style="text-align: center;">
      [ <span class="intLink" onclick="oTWExample1.play();">Play</span> |
      <span class="intLink" onclick="oTWExample1.pause();">Pause</span> |
      <span class="intLink" onclick="oTWExample1.terminate();">Terminate</span
 > ]
    </p>
    <div id="info">
      Vivamus blandit massa ut metus mattis in fringilla lectus imperdiet. Proin
      ac ante a felis ornare vehicula. Fusce pellentesque lacus vitae eros
      convallis ut mollis magna pellentesque. Pellentesque placerat enim at
      lacus ultricies vitae facilisis nisi fringilla. In tincidunt tincidunt
      tincidunt.
    </div>
    <h1>JavaScript Typewriter</h1>

    <div id="article">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices
        dolor ac dolor imperdiet ullamcorper. Suspendisse quam libero, luctus
        auctor mollis sed, malesuada condimentum magna. Quisque in ante tellus,
        in placerat est. Pellentesque habitant morbi tristique senectus et netus
        et malesuada fames ac turpis egestas. Donec a mi magna, quis mattis
        dolor. Etiam sit amet ligula quis urna auctor imperdiet nec faucibus
        ante. Mauris vel consectetur dolor. Nunc eget elit eget velit pulvinar
        fringilla consectetur aliquam purus. Curabitur convallis, justo posuere
        porta egestas, velit erat ornare tortor, non viverra justo diam eget
        arcu. Phasellus adipiscing fermentum nibh ac commodo. Nam turpis nunc,
        suscipit a hendrerit vitae, volutpat non ipsum.
      </p>
      <form>
        <p>
          Phasellus ac nisl lorem: <input type="text" /><br />
          <textarea style="width: 400px; height: 200px;">
Nullam commodo suscipit lacus non aliquet. Phasellus ac nisl lorem, sed facilisis ligula. Nam cursus lobortis placerat. Sed dui nisi, elementum eu sodales ac, placerat sit amet mauris. Pellentesque dapibus tellus ut ipsum aliquam eu auctor dui vehicula. Quisque ultrices laoreet erat, at ultrices tortor sodales non. Sed venenatis luctus magna, ultricies ultricies nunc fringilla eget. Praesent scelerisque urna vitae nibh tristique varius consequat neque luctus. Integer ornare, erat a porta tempus, velit justo fermentum elit, a fermentum metus nisi eu ipsum. Vivamus eget augue vel dui viverra adipiscing congue ut massa. Praesent vitae eros erat, pulvinar laoreet magna. Maecenas vestibulum mollis nunc in posuere. Pellentesque sit amet metus a turpis lobortis tempor eu vel tortor. Cras sodales eleifend interdum.</textarea
 >
        </p>
        <p><input type="submit" value="Send" /></p>
      </form>
      <p>
        Duis lobortis sapien quis nisl luctus porttitor. In tempor semper
        libero, eu tincidunt dolor eleifend sit amet. Ut nec velit in dolor
        tincidunt rhoncus non non diam. Morbi auctor ornare orci, non euismod
        felis gravida nec. Curabitur elementum nisi a eros rutrum nec blandit
        diam placerat. Aenean tincidunt risus ut nisi consectetur cursus. Ut
        vitae quam elit. Donec dignissim est in quam tempor consequat. Aliquam
        aliquam diam non felis convallis suscipit. Nulla facilisi. Donec lacus
        risus, dignissim et fringilla et, egestas vel eros. Duis malesuada
        accumsan dui, at fringilla mauris bibStartum quis. Cras adipiscing
        ultricies fermentum. Praesent bibStartum condimentum feugiat.
      </p>
      <p>
        Nam faucibus, ligula eu fringilla pulvinar, lectus tellus iaculis nunc,
        vitae scelerisque metus leo non metus. Proin mattis lobortis lobortis.
        Quisque accumsan faucibus erat, vel varius tortor ultricies ac. Lorem
        ipsum dolor sit amet, consectetur adipiscing elit. Sed nec libero nunc.
        Nullam tortor nunc, elementum a consectetur et, ultrices eu orci. Lorem
        ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl
        eu sem vehicula egestas.
      </p>
    </div>
  </body>
</html>
```

View this demo in action. See also: `clearInterval()` (en-US).

Argumentos callback
-------------------

Como já foi discutido, Internet Explorer 9 e versões anteriores não suportam passar argumentos para a função callback em ambos `setTimeout()` ou `setInterval()`. O seguinte código **IE-specific** demonstra um método para superar esta limitação. Para usar, apenas adicione o seguinte código no topo do seu script.

```js
/\*\
|\*|
|\*| IE-specific polyfill that enables the passage of arbitrary arguments to the
|\*| callback functions of javascript timers (HTML5 standard syntax).
|\*|
|\*| https://developer.mozilla.org/pt-BR/docs/Web/API/window.setInterval
|\*| https://developer.mozilla.org/User:fusionchess
|\*|
|\*| Syntax:
|\*| var timeoutID = window.setTimeout(func, delay[, param1, param2, ...]);
|\*| var timeoutID = window.setTimeout(code, delay);
|\*| var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
|\*| var intervalID = window.setInterval(code, delay);
|\*|
\\*/

if (document.all && !window.setTimeout.isPolyfill) {
  var __nativeST__ = window.setTimeout;
  window.setTimeout = function (
    vCallback,
    nDelay /\*, argumentToPass1, argumentToPass2, etc. \*/,
  ) {
    var aArgs = Array.prototype.slice.call(arguments, 2);
    return \_\_nativeST\_\_(
      vCallback instanceof Function
        ? function () {
            vCallback.apply(null, aArgs);
          }
        : vCallback,
      nDelay,
    );
  };
  window.setTimeout.isPolyfill = true;
}

if (document.all && !window.setInterval.isPolyfill) {
  var __nativeSI__ = window.setInterval;
  window.setInterval = function (
    vCallback,
    nDelay /\*, argumentToPass1, argumentToPass2, etc. \*/,
  ) {
    var aArgs = Array.prototype.slice.call(arguments, 2);
    return \_\_nativeSI\_\_(
      vCallback instanceof Function
        ? function () {
            vCallback.apply(null, aArgs);
          }
        : vCallback,
      nDelay,
    );
  };
  window.setInterval.isPolyfill = true;
}
```

Outra possibilidade é uso uma função anônima para chama o callback, apesar de que esta solução seja um pouco mais pesada. Exemplo:

```js
var intervalID = setInterval(function () {
  myFunc("one", "two", "three");
}, 1000);
```

Outra possibilidade é usar o function's bind. Exemplo:

```js
var intervalID = setInterval(function (arg1) {}.bind(undefined, 10), 1000);
```

### Abas inativas

Iniciado no Gecko 5.0, intervalos são fixados para disparar não mais do que uma vez por segundo em abas inativas.

O problema do "`this`"
----------------------

Quando você passa um método para `setInterval()` ou qualquer outra função, ela é chamada com o valor do `this` errado. Este problema é explicado em detalhes em JavaScript reference.

### Explicação

O código executado pelo `setInterval()` roda em um contexto de execução separado da função que foi chamada. Como uma consequência, o `this` da função chamada, é setado como o objeto `window` (ou `global`), esse não é o mesmo valor do `this` para a função chamada em setTimeout. veja o seguinte exemplo (que usa `setTimeout()` ao invés de `setInterval()` - o problema segue para ambos os temporizadores)

```js
myArray = ["zero", "one", "two"];

myArray.myMethod = function (sProperty) {
  alert(arguments.length > 0 ? this[sProperty] : this);
};

myArray.myMethod(); // prints "zero,one,two"
myArray.myMethod(1); // prints "one"
setTimeout(myArray.myMethod, 1000); // prints "[object Window]" after 1 second
setTimeout(myArray.myMethod, 1500, "1"); // prints "undefined" after 1,5 seconds
// passing the 'this' object with .call won't work
// because this will change the value of this inside setTimeout itself
// while we want to change the value of this inside myArray.myMethod
// in fact, it will be an error because setTimeout code expects this to be the window object:
setTimeout.call(myArray, myArray.myMethod, 2000); // error: "NS\_ERROR\_XPC\_BAD\_OP\_ON\_WN\_PROTO: Illegal operation on WrappedNative prototype object"
setTimeout.call(myArray, myArray.myMethod, 2500, 2); // same error
```

Como você pode ver, não há maneiras de passar o objeto `this` para a função callback.

### Uma possível solução

Um possível caminho para resolver o problema do `this`, é sobreescrever as duas funções globais nativas `setTimeout()` ou `setInterval()` com duas *non-native* que permitem sua invocação através do método `Function.prototype.call` (en-US). O seguinte exemplo mostra a possível substituição.

```js
// Enable the passage of the 'this' object through the JavaScript timers

var __nativeST__ = window.setTimeout,
  __nativeSI__ = window.setInterval;

window.setTimeout = function (
  vCallback,
  nDelay /\*, argumentToPass1, argumentToPass2, etc. \*/,
) {
  var oThis = this,
    aArgs = Array.prototype.slice.call(arguments, 2);
  return \_\_nativeST\_\_(
    vCallback instanceof Function
      ? function () {
          vCallback.apply(oThis, aArgs);
        }
      : vCallback,
    nDelay,
  );
};

window.setInterval = function (
  vCallback,
  nDelay /\*, argumentToPass1, argumentToPass2, etc. \*/,
) {
  var oThis = this,
    aArgs = Array.prototype.slice.call(arguments, 2);
  return \_\_nativeSI\_\_(
    vCallback instanceof Function
      ? function () {
          vCallback.apply(oThis, aArgs);
        }
      : vCallback,
    nDelay,
  );
};
```

**Nota:** These two replacements also enable the HTML5 standard passage of arbitrary arguments to the callback functions of timers in IE. So they can be used as *non-standard-compliant* polyfills also. See the callback arguments paragraph for a *standard-compliant* polyfill.

Teste da nova implementação:

```js
myArray = ["zero", "one", "two"];

myArray.myMethod = function (sProperty) {
  alert(arguments.length > 0 ? this[sProperty] : this);
};

setTimeout(alert, 1500, "Hello world!"); // the standard use of setTimeout and setInterval is preserved, but...
setTimeout.call(myArray, myArray.myMethod, 2000); // prints "zero,one,two" after 2 seconds
setTimeout.call(myArray, myArray.myMethod, 2500, 2); // prints "two" after 2,5 seconds
```

Outra, mais complexa, solução para o problema do `this` é the following framework.

**Nota:** JavaScript 1.8.5 introduces the `Function.prototype.bind()` method, which lets you specify the value that should be used as `this` for all calls to a given function. This lets you easily bypass problems where it's unclear what this will be, depending on the context from which your function was called. Also, ES2015 supports arrow functions, with lexical this allowing us to write setInterval( () => this.myMethod) if we're inside myArray method.

MiniDaemon - A framework for managing timers
--------------------------------------------

In pages requiring many timers, it can often be difficult to keep track of all of the running timer events. One approach to solving this problem is to store information about the state of a timer in an object. Following is a minimal example of such an abstraction. The constructor architecture explicitly avoids the use of closures. It also offers an alternative way to pass the `this` object to the callback function (see The "this" problem for details). The following code is also available on GitHub.

**Nota:** For a more complex but still modular version of it (`Daemon`) see JavaScript Daemons Management. This more complex version is nothing but a big and scalable collection of methods for the `Daemon` constructor. However, the `Daemon` constructor itself is nothing but a clone of `MiniDaemon` with an added support for *init* and *onstart* functions declarable during the instantiation of the `daemon`. **So the `MiniDaemon` framework remains the recommended way for simple animations**, because `Daemon` without its collection of methods is essentially a clone of it.

### minidaemon.js

```js
/\*\
|\*|
|\*| :: MiniDaemon ::
|\*|
|\*| Revision #2 - September 26, 2014
|\*|
|\*| https://developer.mozilla.org/pt-BR/docs/Web/API/window.setInterval
|\*| https://developer.mozilla.org/User:fusionchess
|\*| https://github.com/madmurphy/minidaemon.js
|\*|
|\*| This framework is released under the GNU Lesser General Public License, version 3 or later.
|\*| http://www.gnu.org/licenses/lgpl-3.0.html
|\*|
\\*/

function MiniDaemon(oOwner, fTask, nRate, nLen) {
  if (!(this && this instanceof MiniDaemon)) {
    return;
  }
  if (arguments.length < 2) {
    throw new TypeError("MiniDaemon - not enough arguments");
  }
  if (oOwner) {
    this.owner = oOwner;
  }
  this.task = fTask;
  if (isFinite(nRate) && nRate > 0) {
    this.rate = Math.floor(nRate);
  }
  if (nLen > 0) {
    this.length = Math.floor(nLen);
  }
}

MiniDaemon.prototype.owner = null;
MiniDaemon.prototype.task = null;
MiniDaemon.prototype.rate = 100;
MiniDaemon.prototype.length = Infinity;

/\* These properties should be read-only \*/

MiniDaemon.prototype.SESSION = -1;
MiniDaemon.prototype.INDEX = 0;
MiniDaemon.prototype.PAUSED = true;
MiniDaemon.prototype.BACKW = true;

/\* Global methods \*/

MiniDaemon.forceCall = function (oDmn) {
  oDmn.INDEX += oDmn.BACKW ? -1 : 1;
  if (
    oDmn.task.call(oDmn.owner, oDmn.INDEX, oDmn.length, oDmn.BACKW) === false ||
    oDmn.isAtEnd()
  ) {
    oDmn.pause();
    return false;
  }
  return true;
};

/\* Instances methods \*/

MiniDaemon.prototype.isAtEnd = function () {
  return this.BACKW
    ? isFinite(this.length) && this.INDEX < 1
    : this.INDEX + 1 > this.length;
};

MiniDaemon.prototype.synchronize = function () {
  if (this.PAUSED) {
    return;
  }
  clearInterval(this.SESSION);
  this.SESSION = setInterval(MiniDaemon.forceCall, this.rate, this);
};

MiniDaemon.prototype.pause = function () {
  clearInterval(this.SESSION);
  this.PAUSED = true;
};

MiniDaemon.prototype.start = function (bReverse) {
  var bBackw = Boolean(bReverse);
  if (this.BACKW === bBackw && (this.isAtEnd() || !this.PAUSED)) {
    return;
  }
  this.BACKW = bBackw;
  this.PAUSED = false;
  this.synchronize();
};
```

**Nota:** MiniDaemon passes arguments to the callback function. If you want to work on it with browsers that natively do not support this feature, use one of the methods proposed above.

### Syntax
```

var myDaemon = new MiniDaemon(thisObject, callback[, rate[, length]]);
```

### Description

Returns a JavaScript `Object` containing all information needed by an animation (like the `this` object, the callback function, the length, the frame-rate).

#### Parameters

`thisObject`

The `this` object on which the *callback* function is called. It can be an `object` or `null`.

`callback`

The function that is repeatedly invoked . **It is called with three parameters**: *index* (the iterative index of each invocation), *length* (the number of total invocations assigned to the *daemon* - finite or `Infinity` (en-US)) and *backwards* (a boolean expressing whether the *index* is increasing or decreasing). It is something like *callback*.call(*thisObject*, *index*, *length*, *backwards*). **If the callback function returns a `false` value the *daemon* is paused**.

`rate (optional)`

The time lapse (in number of milliseconds) between each invocation. The default value is 100.

`length (optional)`

The total number of invocations. It can be a positive integer or `Infinity`. The default value is `Infinity`.

#### `MiniDaemon` instances properties

`myDaemon.owner`

The `this` object on which is executed the daemon (read/write). It can be an `object` or `null`.

`myDaemon.task`

The function that is repeatedly invoked (read/write). It is called with three arguments: *index* (the iterative index of each invocation), *length* (the number of total invocations assigned to the daemon - finite or `Infinity` (en-US)) and backwards (a boolean expressing whether the *index* is decreasing or not) – see above. If the `myDaemon.task` function returns a `false` value the *daemon* is paused.

`myDaemon.rate`

The time lapse (in number of milliseconds) between each invocation (read/write).

`myDaemon.length`

The total number of invocations. It can be a positive integer or `Infinity` (read/write).

#### `MiniDaemon` instances methods

`myDaemon.isAtEnd()`

Returns a boolean expressing whether the *daemon* is at the start/end position or not.

`myDaemon.synchronize()`

Synchronize the timer of a started daemon with the time of its invocation.

`myDaemon.pause()`

Pauses the daemon.

`myDaemon.start([reverse])`

Starts the daemon forward (*index* of each invocation increasing) or backwards (*index* decreasing).

#### `MiniDaemon` global object methods

`MiniDaemon.forceCall(minidaemon)`

Forces a single callback to the `minidaemon.task` function regardless of the fact that the end has been reached or not. In any case the internal `INDEX` property is increased/decreased (depending on the actual direction of the process).

### Example usage

Your HTML page:

```html
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>MiniDaemin Example - MDN</title>
    <script type="text/javascript" src="minidaemon.js"></script>
    <style type="text/css">
 #sample\_div {
 visibility: hidden;
 }
 </style>
  </head>

  <body>
    <p>
      <input
 type="button"
 onclick="fadeInOut.start(false /\* optional \*/);"
 value="fade in" />
      <input type="button" onclick="fadeInOut.start(true);" value="fade out" />
      <input type="button" onclick="fadeInOut.pause();" value="pause" />
    </p>

    <div id="sample\_div">Some text here</div>

    <script type="text/javascript">
 function opacity(nIndex, nLength, bBackwards) {
 this.style.opacity = nIndex / nLength;
 if (bBackwards ? nIndex === 0 : nIndex === 1) {
 this.style.visibility = bBackwards ? "hidden" : "visible";
 }
 }

 var fadeInOut = new MiniDaemon(
 document.getElementById("sample\_div"),
 opacity,
 300,
 8,
 );
 </script>
  </body>
</html>
```

View this example in action

Notes
-----

The `setInterval()` function is commonly used to set a delay for functions that are executed again and again, such as animations.

You can cancel the interval using `WindowOrWorkerGlobalScope.clearInterval()` (en-US).

If you wish to have your function called *once* after the specified delay, use `WindowOrWorkerGlobalScope.setTimeout()` (en-US).

### Ensure that execution duration is shorter than interval frequency

If there is a possibility that your logic could take longer to execute than the interval time, it is recommended that you recursively call a named function using `WindowOrWorkerGlobalScope.setTimeout` (en-US). For example, if using `setInterval` to poll a remote server every 5 seconds, network latency, an unresponsive server, and a host of other issues could prevent the request from completing in its allotted time. As such, you may find yourself with queued up XHR requests that won't necessarily return in order.

In these cases, a recursive `setTimeout()` pattern is preferred:

```js
(function loop() {
  setTimeout(function () {
    // Your logic here

    loop();
  }, delay);
})();
```

In the above snippet, a named function `loop()` is declared and is immediately executed. `loop()` is recursively called inside `setTimeout()` after the logic has completed executing. While this pattern does not guarantee execution on a fixed interval, it does guarantee that the previous interval has completed before recursing.

### Throttling of intervals

`setInterval()` is subject to the same throttling restrictions in Firefox as `setTimeout()` (en-US); see Reasons for delays longer than specified (en-US).

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

| Specification |
| --- |
| HTML Standard # dom-setinterval-dev |

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

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

See also
--------

* JavaScript timers
* `WindowOrWorkerGlobalScope.setTimeout` (en-US)
* `WindowOrWorkerGlobalScope.clearTimeout`
* `WindowOrWorkerGlobalScope.clearInterval` (en-US)
* `window.requestAnimationFrame`
* *Daemons* management


HTMLContentElement.getDistributedNodes() - APIs da Web

HTMLContentElement.getDistributedNodes()
========================================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Learn more
* See full compatibility
* Report feedback
O método **`HTMLContentElement.getDistributedNodes()`** retorna um static `NodeList` do distributed nodes associado com este elemento `<content>`.

Syntaxe
-------
```

var nodeList = object.getDistributedNodes()
```

Exemplo
-------

```js
//Pegue os nós distribuídos
var nodes = myContentObject.getDistributedNodes();
```

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

| Specification |
| --- |
| HTML Standard # htmlslotelement |

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

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

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

* HTMLContentElement


ClipboardEvent - APIs da Web

ClipboardEvent
==============

**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 **`ClipboardEvent`** representa eventos correlatos à modificação da área de transferência, i. e., eventos de cortar (`cut (en-US)`), de copiar (`copy (en-US)`), e de colar (`paste (en-US)`).

Construtor
----------

`ClipboardEvent()` (en-US)

Cria um evento `ClipboardEvent` com os parâmetros fornecidos.

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

*Ainda, propriedades herdadas de sua superclasse `Event`*.

`ClipboardEvent.clipboardData` (en-US) Somente leitura

é um objeto `DataTransfer` contendo informação oriunda das operações de `cut (en-US)`, de `copy (en-US)`, ou de `paste (en-US)` iniciadas pelo usuário, juntamente com sua espécie/tipo MIME.

Methods
-------

*Não há método próprio; métodos herdados de `Event`*.

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

| Specification |
| --- |
| Clipboard API and events # clipboard-event-interfaces |

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

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

See also
--------

* Copy-related events: `copy (en-US)`, `cut (en-US)`, `paste (en-US)`


WebSockets - APIs da Web

WebSockets
==========

WebSockets é uma tecnologia avançada que torna possível abrir uma sessão de comunicação interativa entre o navegador do usuário e um servidor. Com esta API, você pode enviar mensagens para um servidor e receber respostas orientadas a eventos sem ter que consultar o servidor para obter uma resposta.

Documentação
------------

Escrevendo aplicações cliente WebSocket

Um tutorial para escrever clientes WebSocket para ser executado no browser.

Referencias WebSockets (en-US)

Uma referência para a API WebSocket do lado do cliente.

(TBD)Escrevendo servidores WebSocket

Um guia para escrever código do lado do servidor para lidar com o protocolo WebSocket.

Saiba mais...

Ferramentas
-----------

* Socket.IO: Uma poderosa plataforma cruzada para API WebSocket Node.js.
* WebSocket-Node: Uma implementação para servidor da API WebSocketNode.js.
* Uma lista mais ampla de frameworks e bibliotecas aqui
Tópicos Relacionados
--------------------

* AJAX, JavaScript
Veja Também
-----------

* RFC 6455 - O Protocolo WebSocket
* Especificação da API WebSocket
* Eventos enviados para servidor (en-US)
* WebSocket.us - Uma comunidade sem fins lucrativos baseada no site WebSocket
Navegadores Compatíveis
-----------------------

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


WebSocket - APIs da Web

WebSocket
=========

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

O objeto `WebSocket` provê uma API para criação e gerenciamento de uma conexão WebSocket com um servidor, bem como o envio e recebimento de dados através dessa conexão.

O construtor do WebSocket aceita um parâmetro obrigatório e um opcional:
```

WebSocket WebSocket(
  in DOMString url,
  in optional DOMString protocols
);

WebSocket WebSocket(
  in DOMString url,
  in optional DOMString[] protocols
);
```

`url`

A URL da devida conexão; esta deve ser a URL da qual o servidor WebSocket irá responder.

`protocols` Optional

Um único protocolo em formato texto ou uma lista de textos de protocolo. Estes textos são usados para indicar sub-protocolos, assim então um único servidor pode implementar múltiplos sub-protocolos WebSocket (por exemplo, você pode querer um servidor capaz de manipular diferentes tipos de interações dependendo do protocolo especificado). se você não especificar um protocolo em texto, será assumido um texto vazio.

O construtor pode lançar exceções:

`SECURITY_ERR`

A porta a qual a conexão está sendo executada está bloqueada.

Visão Geral do método
---------------------

| `void close(É opcional: unsigned long code, É opcional: DOMString reason);` |
| --- |
| `void send(in DOMString data);` |

Atributos
---------

| Attributo | Tipo | Descrição |
| --- | --- | --- |
| `binaryType` | `DOMString` | Uma string indica o tipo de dado binário que está sendo transmitido pela conexão. Este deve ser tanto "blob" se o objeto DOM `Blob` estiver sendo usado ou "arraybuffer" se os objetos `ArrayBuffer` estiver sendo usada |
| `bufferedAmount` | `unsigned long` | O número de bites de dados que tem sid consultado usando chamadas para send mas não ainda para a rede.Estes valor reseta para zero uma vez que todos os dados tem sido mandados.Este valor não reseta para zero quando a conexão está fechada, se você continuar chamando send, isto continuará escalando. **Leitura online** |
| `extensions` | `DOMString` | As extensões selecionadas pelo servidor. Este é atualmente apenas a string vazia ou uma lista de extensões negociadas pela conexão. |
| `onclose` | `EventListener` | Um event listener para ser chamado quando o `readyState` da conexão do WebSocket mudar para `CLOSED`. O listener recebe um `CloseEvent` "close". |
| `onerror` | `EventListener` | Um event listener para ser chamado quando ocorrer um erro. Este é um evento simples chamado "erro". |
| `onmessage` | `EventListener` | Um event listener para ser chamado quando uma mensagem é recebida do servidor. O listener recebe um `MessageEvent` (en-US) "message". |
| `onopen` | `EventListener` | Um event listener para ser chamado quando o `readyState` da conexão do WebSocket mudar para `OPEN`, isso indica que a conexão está pronta para enviar e receber dados. O evento é simples, com o nome "open". |
| `protocol` | `DOMString` | Uma sequência de caracteres que indica o nome do sub-protocolo selecionado pelo servidor, este será um dos parâmetros especificados no `protocolo` ao criar o objeto WebSocket. |
| `readyState` | `unsigned short` | O estado atual da conexão, este é um dos Ready state constants. **Apenas leitura.** |
| `url` | `DOMString` | O URL resolvido pelo construtor. Este é sempre um URL absoluto. **Apenas leitura.** |

Constantes
----------

### Estados de constantes prontas

Essas constantes são usadas pelo atributo `readyState` para descrever o estado da conexão do WebSocket.

| Constante | Valor | Descrição |
| --- | --- | --- |
| `CONNECTING` | `0` | A conexão ainda não está aberta. |
| `OPEN` | `1` | A conexão está aberta e pronta para se comunicar. |
| `CLOSING` | `2` | A conexão está em processo de fechamento. |
| `CLOSED` | `3` | A conexão está fechada ou não foi possível abrir. |

Métodos
-------

### close()

Fecha a conexão do WebSocket ou a tentativa de conexão, se houver. Se a conexão já for `CLOSED`, este método não faz nada.
```

void close(
  É opcional: unsigned short code,
  É opcional: DOMString reason
);
```

#### Parametros

`code` Optional

Um valor numérico que indica o código de status explicando por que a conexão está sendo fechada. Se esse parâmetro não for especificado, é assumido um valor padrão de 1000 (indicando um fechamento "completo da transação"). Veja a lista de status de códigos na `CloseEvent` página de valores permitidos.

`reason` Optional

Uma string legível para humanos que explica por que a conexão está se fechando. Esta seqüência de caracteres não deve ter mais de 123 bytes de texto UTF-8 (**não** caracteres).

#### Exceções lançadas

`INVALID_ACCESS_ERR`

Foi especificado um `código`inválido.

`SYNTAX_ERR`

A string `reason é muito longa ou contém substitutos não comparados.`

**Nota:** `Note: No Gecko, este método não suporta nenhum parâmetro antes do Gecko 8.0.`

### `send()`

`Transmite dados para o servidor através da conexão WebSocket.`
```

void send(
  in DOMString data
);

void send(
  in ArrayBuffer data
);

void send(
  in Blob data
);
```

#### `Parametros`

`data`

`Uma sequência de texto para enviar para o servidor.`

#### `Exceções lançadas`

`INVALID_STATE_ERR`

`A conexão não está atualmente OPEN .`

`SYNTAX_ERR`

`Os dados são uma string que tem substituto não comparado.`

**Nota:** `Nota: A implementação do método send () de Gecko difere um pouco da especificação em Gecko 6.0. Gecko retorna um boolean indicando se a conexão ainda está aberta (por extensão, ou os dados estão em fila ou transmitidos com sucesso). Isso é corrigido em Gecko 8.0.`

`A partir de Gecko 11.0, o suporte para `ArrayBuffer` está implementado, mas não `Blob` tipos de dados.`

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

| Specification |
| --- |
| WebSockets Standard # the-websocket-interface |

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

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

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

* `Escrevendo aplicativos clientes do WebSocket`


Crypto - APIs da Web

Crypto
======

A interface **`Crypto`** apresenta características de criptografia básica disponíveis no contexto atual. Isto permite acesso a um forte gerador criptográfico de números aleatórios e a criptografias primitivas.

Um objeto com essa interface está disponível no contexto web via propriedade `Window.crypto` .

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

*Esta interface implementa propriedades definidas em `RandomSource` (en-US).*

`Crypto.subtle`
Experimental
Somente leitura

Retorna um objeto `SubtleCrypto` provendo acesso a criptografias primitivas comuns, como hashing, signing, encryption ou decryption.

Métodos
-------

*Esta interface implementa métodos definidos em `RandomSource` (en-US).*

`RandomSource.getRandomValues()`

Preenche a `TypedArray` (en-US) com valores criptografados aleatórios.

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

| Specification |
| --- |
| Web Cryptography API # crypto-interface |

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

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

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

* Components.utils.importGlobalProperties
Dicionário
----------

"Key" = "Chave"


Window.performance - APIs da Web

Window.performance
==================

A API Web Performance permite páginas da web acessarem algumas funções para medir a performance de páginas e aplicações da web, incluindo a API Navigation Timing e dados de tempo de alta resolução.Métodos
-------

`performance.mark()` (en-US)

Mapeia um `DOMHighResTimeStamp` (en-US) para o nome especificado representando a quantidade de milissegundos passados desde um momento de referência.

`performance.now()`

Retorna um `DOMHighResTimeStamp` (en-US) representando a quantidade de milissegundos passados desde um momento de referência.

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

`performance.timing` (en-US)

É um objeto `PerformanceTiming` (en-US) contendo informações de performance relacionadas a latência.

`performance.navigation` (en-US)

É um objeto `PerformanceNavigation` (en-US) representando o tipo de navegação que ocorre no contexto de navegação dado, como a quantidade de redirecionamentos necessários para buscar o recurso.

performance.memory

Uma extensao não-padrão adicionada ao Chrome.


Console - APIs da Web

Console
=======

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

O objeto `console` fornece acesso ao console de debug do navegador (por exemplo, o Web Console do Firefox). O seu funcionamento específico varia de navegador para navegador, mas existe um conjunto de ferramentas que na prática são fornecidas normalmente.

Esta página documenta os Métodos disponíveis no objeto `console` e fornece alguns exemplos de Uso.

Métodos
-------

`console.assert(expression, object[, object...])`

Emite uma mensagem e traça a sequência de operações até o primeiro argumento for falso.

`console.count([label])`

Mostra o número de vezes que esta linha foi chamada com a label fornecida.

`console.debug(object[, object...])`
Deprecated

Um atalho para `log()`; que foi adicionado para melhorar a compatibilidade de páginas já existentes que utilizavam `debug()`. Porém, ao invés destes comandos você deve utilizar `console.log()`.

`console.dir(object)`

Exibe uma listagem interativa das propriedades de um objeto JavaScript especificado. Esta listagem permite a você expandir o objeto para visualizar o conteúdo de objetos filhos.

`console.error(object[, object...])`

Emite uma mensagem de erro. Você pode usar substituição de string e outros argumentos adicionais com este método. Consulte Uso de substituição de string.

`console.exception(object[, object...])`

Um atalho para `error();`

`console.group(object[, object...])` (en-US)

Cria um novo grupo em linha e recua todas as mensagens seguintes para um nível de indentação superior. Para voltar um nível, utilize `groupEnd()`. Consulte Uso de grupos no console.

`console.groupCollapsed(object[, object...])` (en-US)

Cria um novo grupo em linha e recua todas as mensagens seguintes para um nível de indentação superior; ao contrário de `group()`, o grupo em linha começa recolhido. Para revelar seu conteúdo, basta clicar no botão de revelação para expandí-lo. Para recuar um nível, utilize `groupEnd()`. Consulte Uso de grupos no console.

`console.groupEnd()` (en-US)

Sai do grupo em linha atual. Veja Uso de grupos no console.

`console.info(object[, object...])`

Informações de registro. Você pode utilizar substituição de string e outros argumentos com este método. Consulte Uso de substituição de string.

`console.log(object[, object...])`

Utilizado para a emissão de informações de registro em geral. Você pode utilizar substituição de string e outros argumentos com este método. Consulte Uso de substituição de string.

`console.profile( [profileLabel] )` (en-US)

Inicia o JavaScript profiler (en-US). Você pode especificar qualquer label opcional para o perfil.

`console.profileEnd()` (en-US)

Interrompe o profiler. Você pode ver o profile resultante no JavaScript profiler (en-US).

`Console.table()`

Exibe dados, como objeto e array, como uma tabela.

`console.time(label)`

Inicia um contador de tempo com o nome especificado no parâmetro *label*. Até 10.000 contadores de tempo podem ser rodados por página.

`console.timeEnd(label)`

Interrompe o contador de tempo especificado e emite o tempo e registros do contador de tempo em milisegundos desde o seu início. Veja Contadores de Tempo.

`console.trace()` (en-US)

Emite um traçado de pilha. See Traçados de pilha.

`console.warn(object[, object...])`

Emite uma mensagem de alerta. Você pode utilizar substituição de string e argumentos adicionais com este método. Veja Uso de substituição de string.

Uso
---

### Output de texto para o console

A utilização mais frequente do console é realizar o log de texto e de outros dados. Há quatro categorias de output que podem ser geradas, utilizando os métodos `console.log()`, `console.info()`, `console.warn()` e o `console.error()`. Cada um destes resultam em outputs que possuem estilos diferentes no log, e você pode utilizar os controles de filtragem fornecidos pelo navegador para ver apenas os outputs que lhe interessam.

Há duas maneiros da utilizar cada um dos métodos de outuput. Você pode simplemente passar uma lista dos objetos cuja representação em string será concatenadas em uma string e então realizar o output para o console, ou você pode passar uma string contendo zero ou mais substituições de strings seguidas por uma lista de objetos para serem utilizados na substituição.

#### Output de um único objeto

A forma mais simples de utilizar os métodos de log é realizar o output de um único objeto:

```js
var algumObjeto = { str: "Algum texto", id: 5 };
console.log(algumObjeto);
```

O output vai se parecer como algo assim:
```

[09:27:13.475] ({str:"Algum texto", id:5})
```

#### Output de múltiplos objetos

Você também pode realizar o output de múltiplos objetos ao simplesmente listá-los ao chamar o método de log, desta forma:

```js
var carro = "Fusca";
var algumObjeto = { str: "Algum texto", id: 5 };
console.info(
  "Meu primeiro carro era um ",
  carro,
  ". O objeto é: ",
  algumObjeto,
);
```

O output será algo assim:
```

[09:28:22.711] Meu primeiro carro era um Fusca. O objeto é:  ({str:"Algum texto", id:5})
```

#### Uso de substituição de string

O Gecko 9.0 introduziu o suporte à substituição de strings. Ao fornecer uma string para um dos métodos do console que aceitam uma string, você pode utilizar estas strings de substituição:

| String de substituição | Descrição |
| --- | --- |
| %o | Emite um link para o objeto JavaScript. Clicar no link abre um inspetor. |
| %d ou %i | Emite uma numero inteiro. A formatação ainda não possui suporte. |
| %s | Emite uma string. |
| %f | Emite um número de ponto flutuante. A formatação ainda não possui suporte. |

Cada um destes puxam o próximo argumento na lista de parâmetros após a string fornecida inicialmente. Por exemplo:
```

for (var i=0; i<5; i++) {
  console.log("Olá, %s. Você me chamou pela %dª vez.", "João", i+1);
}
```

O output será algo assim:
```

[13:14:13.481] Olá, João. Você me chamou pela 1ª vez.
[13:14:13.483] Olá, João. Você me chamou pela 2ª vez.
[13:14:13.485] Olá, João. Você me chamou pela 3ª vez.
[13:14:13.487] Olá, João. Você me chamou pela 4ª vez.
[13:14:13.488] Olá, João. Você me chamou pela 5ª vez.
```

#### Estilizando o output no console

You can use the `"%c"` directive to apply a CSS style to console output:

```js
console.log("%cMy stylish message", "color: red; font-style: italic");
```

![](/pt-BR/docs/Web/API/console/console-style.png)

### Usando grupos no console

You can use nested groups to help organize your output by visually combining related material. To create a new nested block, call `console.group()`. The `console.groupCollapsed()` method is similar, but creates the new block collapsed, requiring the use of a disclosure button to open it for reading.

**Nota:** Collapsed groups are not supported yet in Gecko; the `groupCollapsed()` method is the same as `group()` at this time.

**Nota:** To exit the current group, simply call `console.groupEnd()`.

**Nota:** For example, given this code:

```js
console.log("This is the outer level");
console.group();
console.log("Level 2");
console.group();
console.log("Level 3");
console.warn("More of level 3");
console.groupEnd();
console.log("Back to level 2");
console.groupEnd();
console.debug("Back to the outer level");
```

The output looks like this:

![nesting.png](/pt-BR/docs/Web/API/console/nesting.png)

### Temporizadores

In order to calculate the duration of a specific operation, Gecko 10 introduced the support of timers in the `console` object. To start a timer, call the `console.time()` method, giving it a name as only parameter. To stop the timer, and to get the elapsed time in miliseconds, just call the `console.timeEnd()` method, again passing the timer's name as the parameter. Up to 10,000 timers can run simultaneously on a given page.

For example, given this code:

```js
console.time("answer time");
alert("Click to continue");
console.timeEnd("answer time");
```

will log the time needed by the user to discard the alert box:

![timerresult.png](/pt-BR/docs/Web/API/console/timerresult.png)

Notice that the timer's name is displayed both when the timer is started and when it's stopped.

**Nota:** It's important to note that if you're using this to log the timing for network traffic, the timer will report the total time for the transaction, while the time listed in the network panel is just the amount of time required for the header. If you have response body logging enabled, the time listed for the response header and body combined should match what you see in the console output.

### Stack traces

The console object also supports outputting a stack trace; this will show you the call path taken to reach the point at which you call `console.trace()` (en-US). Given code like this:
```

foo();

function foo() {
  function bar() {
    console.trace();
  }
  bar();
}
```

The output in the console looks something like this:

![](/pt-BR/docs/Web/API/console/api-trace2.png)

Notes
-----

* At least in Firefox, if a page defines a console object, that object overrides the one built into Firefox.
* Prior to Gecko 12.0, the console object's methods only work when the Web Console is open. Starting with Gecko 12.0, output is cached until the Web Console is opened, then displayed at that time.
* It's worth noting that the Firefox's built-in `console` object is compatible with the one provided by Firebug.
See also
--------

* Tools
* Web Console - how the Web Console in Firefox handles console API calls
* Remote debugging - how to see console output when the debugging target is a mobile device
* Debugging apps on Firefox OS - using the App Manager to debug apps running on Firefox OS
* On-device console logging - how to do logging on Firefox OS devices
### Other implementations

* Google Chrome DevTools;
* Firebug;
* Internet Explorer;
* Safari.


URL - APIs da Web

URL
===

A interface **`URL`** é usada para analisar, construir, normalizar e codificar URLs. Ela trabalha com a disponibilização de propriedades para facilitar a leitura e modificar componentes da URL.

Normalmente você cria um novo objeto `URL` especificando a URL como string quando seu construtor é chamado, ou provendo uma URL relativa e URL base. Você pode facilmente ler e analisar os compoentes de uma URL ou fazer alterações na URL.

Se o seu navegador não tem suporte ao construtor `URL()` (en-US), você pode acessar o objeto URL utilizando a interface `Window` propriedade `URL`. Certifique-se de verificar se algum de seus navegadores precisa deste prefixo.

**Note:** This feature is available in Web Workers

Construtor
----------

`URL()` (en-US)

 Cria e retorna o objeto `URL` referenciando a URL especificada utilizando uma sring URL
 absolute, ou uma string URL relativa e uma string URL base.

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

`hash`

Uma `USVString` (en-US) contendo o `'#'` seguido pelo fragmento identificador da URL.

`host`

Uma `USVString` (en-US) contendo o domínio (that is the *hostname*) seguido por (se a porta foi especificada) um `':'` e a *port* da URL.

`hostname`

Uma `USVString` (en-US) contendo o domínio da URL.

`href`

Uma função stringifier (en-US) que retorna uma `USVString` (en-US) com toda a URL.

`origin` Somente leitura

Retorna uma `USVString` (en-US) contendo a origem da URL, este é seu esquema, domínio e sua porta.

`password`

Uma `USVString` (en-US) com a senha especificada antes do nome do domínio.

`pathname`

Uma `USVString` (en-US) contendo a inicial `'/'` seguido pelo caminho da URL, não inclui a query string ou fragmento.

`port`

Uma `USVString` (en-US) contendo o número da porta da URL.

`protocol`

Uma `USVString` (en-US) contendo o esquema de protocolo da URL, incluindo o final `':'`.

`search`

Uma `USVString` (en-US) indicando a string de parâmetros de URL's; Se algum parâmetro é disponibilizado, esta string inclui todos eles começando pelo caracter `?`.

`searchParams` Somente leitura

Um objeto `URLSearchParams` que pode ser utilizado para acessar individualmente os parâmetros encontrados em `search`.

`username`

Uma `USVString` (en-US) contendo o nome de usuário especificado antes do nome do domínio.

Métodos
-------

`toString()`

Retorna uma `USVString` (en-US) com toda a URL. Isto é um sinônimo para `URL.href`, embora não pode ser usado para modificar o valor.

`toJSON()`

Retorna uma `USVString` (en-US) com toda a URL. Ela retorna a mesma string da propriedade `href`.

Métodos estáticos
-----------------

`createObjectURL()`

Retorna um `DOMString` contendo uma única blob URL, isto é a URL com `blob:` com seu esquema, seguido de uma string com identificador único do objeto no navegador.

`revokeObjectURL()`

Anula uma URL criada anteriormente utilizando o `URL.createObjectURL()`.

Notas de uso
------------

O construtor recebe o parâmetro `url`, e o parâmetro opcional `base` para usar como base do parâmetro `url` é uma URL relativa:

```js
const url = new URL("../cats", "http://www.example.com/dogs");
console.log(url.hostname); // "www.example.com"
console.log(url.pathname); // "/cats"
```

Propriedades da URL podem ser definidas para construir a URL:

```js
url.hash = "tabby";
console.log(url.href); // "http://www.example.com/cats#tabby"
```

As Urls são codificadas de acordo com as regras encontradas em RFC 3986. Para instância:

```js
url.pathname = "démonstration.html";
console.log(url.href); // "http://www.example.com/d%C3%A9monstration.html"
```

A interface `URLSearchParams` é usada pra criar e manipular a query string da URL.

Para obter os parâmetros da URL atual, você pode utilizar isso:

```js
// https://some.site/?id=123
const parsedUrl = new URL(window.location.href);
console.log(parsedUrl.searchParams.get("id")); // "123"
```

O método `toString()` de `URL` apenas retorna o valor da propriedade `href`, para que o construtor possa ser usado pra normalizar e codificar diretamente a URL.

```js
const response = await fetch(
  new URL("http://www.example.com/démonstration.html"),
);
```

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

| Specification |
| --- |
| URL Standard # url |

Compatibilidade de browser
--------------------------

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

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

* Polyfill de `URL` em `core-js`
* URL API (en-US)
* O que é uma URL (en-US)
* A propriedade contem uma `URL` objeto: `URL`.
* `URLSearchParams`.


Document.origin - APIs da Web

Document.origin
===============

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

A propriedade read-only **`Document.origin`** retorna a origem do documento. Na maioria dos casos, essa propriedade é equivalente a `document.defaultView.location.origin`.

Sintaxe
-------
```

var origin = document.origin;
```

Exemplos
--------

```js
var origin = document.origin;
// Nesta página, retorna:'https://developer.mozilla.org'

var origin = document.origin;
// Em "about:blank", retorna:'null'

var origin = document.origin;
// Em "data:text/html,<b>foo</b>", retorna:'null'
```

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

| Specification |
| --- |
| HTML Standard # dom-origin-dev |

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

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

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

* A propriedade `URLUtils.origin`.


DataTransfer - APIs da Web

DataTransfer
============

O objeto `DataTransfer` é usado para guardar os dados que estão sendo arrastados durante uma operação de Drag e Drop (arrastar e soltar). Ele pode guardar um ou mais itens de dados, cada um de um ou mais tipos de dados. Para mais informações sobre drag e drop (arrastar e soltar), veja Drag and Drop.

Esse objeto está disponível pela propriedade `dataTransfer` de todos os eventos de drag. Ele não pode ser criado separadamente.

Visão geral das propriedades
----------------------------

| Propriedades | Tipo |
| --- | --- |
| `dropEffect` | `String` |
| `effectAllowed` | `String` |
| `files` | `FileList` |
| `mozCursor`
Non-standard
 | `String` |
| `mozItemCount`
Non-standard
 | `unsigned long` |
| `mozSourceNode`
Non-standard
 | `Node` |
| `mozUserCancelled` | `Boolean` |
| `types` | `DOMStringList` |

Visão geral dos métodos
-----------------------

| `void addElement(in Element element)` |
| --- |
| `void clearData([in String type])` |
| `String getData(in String type)` |
| `void setData(in String type, in String data)` |
| `void setDragImage(in nsIDOMElement image, in long x, in long y)` |
| `void mozClearDataAt([in String type, in unsigned long index])` |
| `nsIVariant mozGetDataAt(in String type, in unsigned long index)` |
| `void mozSetDataAt(in String type, in nsIVariant data, in unsigned long index)` |
| `StringList mozTypesAt([in unsigned long index])` |

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

### dropEffect

O efeito atual que será usado, e deve sempre ser um dos possíveis valores de `effectAllowed`. Isso afetará qual cursor será exibido enquanto arrasta.

Para os eventos `dragenter` e `dragover`, o `dropEffect` será inicializado com base na ação que o usuário está solicitando. Como isso é determinado é específico da plataforma, mas, normalmente o usuário pode pressionar teclas de modificação, como a tecla alt, para ajustar qual ação é desejada. Com um manipulador de evento para os eventos `dragenter` e `dragover, o dropEffect` deverá ser modificado se a ação desejada é diferente da ação que o usuário está solicitando.

Para os eventos `dragstart`, `drag`, e `dragleave`, o `dropEffect` será inicializado como "none". Qualquer valor atribuído à `dropEffect` será definido, mas o valor não será usado para nada.

Para os eventos `drop` e `dragend`, o `dropEffect` será inicializado para a ação que foi desejada, que será o valor que o `dropEffect` tinha depois do último evento de `dragenter` ou `dragover`. Em um evento de dragend, por exemplo, se a o `dropEffect` desejado for "move", então os dados que estão sendo arrastados deverão ser removidos da origem.

Valores possíveis:

* **copy**: Uma cópia do ítem de origem é feita na nova localização.
* **move**: Um ítem é movido para a nova localização.
* **link**: Um link é estabelecido com a origem na nova localização.
* **none**: O ítem não pode ser solto.

Atribuindo qualquer outro valor não terá efeito e o valor antigo será mantido.

### effectAllowed

Especifica os efeitos que são permitidos para esse drag. Você pode definir isso no evento `dragstart` para definir os efeitos desejados para a origem. Com os eventos `dragenter` e `dragover`, o `effectAllowed` será definido para qualquer que seja o valor que foi atribuído durante o evento `dragstart`. Isso pode ser usado para determinar quais efeitos são permitidos. Atribuindo um valor para `effectAllowed` nos outros eventos, exceto `dragstart`, não terá efeito.

Valores possíveis:

* **copy**: Uma cópia do ítem de origem pode ser feita na nova localização.
* **move**: Um itém pode ser movido para a nova localização.
* **link**: Um link pode ser estabelicido com a origem na nova localização.
* **copyLink**: As operações de copy e link são permitidas.
* **copyMove**: As operações de copy e move são permitidas.
* **linkMove**: As operações de link e move são permitidas.
* **all**: Todas as operações são permitidas.
* **none**: O ítem não pode ser solto.
* **uninitialized**: O valor padrão quando o efeito não foi definido, equivalente a all.

Atribuindo qualquer outro valor não terá efeito e permanece o valor anterior.

### files

Contains a list of all the local files available on the data transfer. If the drag operation doesn't involve dragging files, this property is an empty list. An invalid index access on the `FileList` specified by this property will return `undefined`.

#### Example

These examples dump the list of files dragged into the browser window.

* (Firefox only): http://jsfiddle.net/9C2EF/
* (All browsers): https://jsbin.com/hiqasek/
### types

Guarda uma lista dos tipos de formato dos dados que estão armazenados para o primeiro ítem, na mesma ordem que os dados foram adicionados. Uma lista vazia será retornada caso nenhum dado tenha sido adicionado.

### mozCursor

O estado do cursor de drag. Isto é usado principalmente para controlar o cursor durante a guia de drag.

**Nota:** Esse método está atualmente implementado somento no Windows.

#### Valores possíveis

`auto`

Utiliza o comportamento padrão do sistema.

`default`

Utiliza o comportamento padrão Gecko, que é definir o cursor para uma seta durante a operação de arrastar.

**Nota:** Se você especificar qualquer valor diferente de "default", "auto" é assumido.

### mozItemCount

O número de ítens sendo arrastados.

**Nota:** Essa propriedade é específica Gecko.

### mozSourceNode

O `Node` sobre o qual o cursor do mouse estava localizado quando o botão foi pressionado para iniciar a operação de arrastar. O valor é `null` para drags externos ou se o elmento não pode acessar o node.

**Nota:** Essa propriedade é específica Gecko.

### mozUserCancelled

Essa propriedade é aplicada apenas no evento `dragend`, e é `true` se o usuário cancelar a operação de arrastar pressionando escape (esc). Será `false` em qualquer outro caso, incluindo se a operação de arrastar falhar por algum motivo, por exemplo devido a ação de soltar em um local inválido.

**Nota:** Essa propriedade é específica Gecko.

Methods
-------

### addElement()

Set the drag source. Usually you would not change this, but it will affect which node the drag and dragend events are fired at. The default target is the node that was dragged.
```

 void addElement(
   in Element element
 );
```

###### Parameters

`element`

The element to add.

### clearData()

Remove the data associated with a given type. The type argument is optional. If the type is empty or not specified, the data associated with all types is removed. If data for the specified type does not exist, or the data transfer contains no data, this method will have no effect.
```

 void clearData(
   [optional] in String type
 );
```

###### Parameters

`type`

The type of data to remove.

### getData()

Retrieves the data for a given type, or an empty string if data for that type does not exist or the data transfer contains no data.

A security error will occur if you attempt to retrieve data during a drag that was set from a different domain, or the caller would otherwise not have access to. This data will only be available once a drop occurs during the drop event.
```

 String getData(
   in String type
 );
```

###### Parameters

`type`

The type of data to retrieve.

### setData()

Set the data for a given type. If data for the type does not exist, it is added at the end, such that the last item in the types list will be the new format. If data for the type already exists, the existing data is replaced in the same position. That is, the order of the types list is not changed when replacing data of the same type.
```

 void setData(
   in String type,
   in String data
 );
```

###### Parameters

`type`

The type of data to add.

`data`

The data to add.

### setDragImage()

Set the image to be used for dragging if a custom one is desired. Most of the time, this would not be set, as a default image is created from the node that was dragged.

If the node is an HTML img element, an HTML canvas element or a XUL image element, the image data is used. Otherwise, image should be a visible node and the drag image will be created from this. If image is null, any custom drag image is cleared and the default is used instead.

The coordinates specify the offset into the image where the mouse cursor should be. To center the image, for instance, use values that are half the width and height of the image.
```

 void setDragImage(
   in Element image,
   in long x,
   in long y
 );
```

###### Parameters

`image`

An element to use as the drag feedback image

`x`

Horizontal offset within the image.

`y`

Vertical offset within the image.

### mozClearDataAt()

Removes the data associated with the given format for an item at the specified index. The index is in the range from zero to the number of items minus one.

If the last format for the item is removed, the entire item is removed, reducing `mozItemCount` by one.

If the `format` list is empty, then the data associated with all formats is removed. If the format is not found, then this method has no effect.

**Nota:** This method is Gecko-specific.
```

 void mozClearDataAt(
   [optional] in String type,
   in unsigned long index
 );
```

###### Parameters

`type`

The type of data to remove.

`index`

The index of the data to remove.

### mozGetDataAt()

Retrieves the data associated with the given format for an item at the specified index, or null if it does not exist. The index should be in the range from zero to the number of items minus one.

**Nota:** This method is Gecko-specific.
```

 nsIVariant mozGetDataAt(
   [optional] in String type,
   in unsigned long index
 );
```

###### Parameters

`type`

The type of data to retrieve.

`index`

The index of the data to retrieve.

### mozSetDataAt()

A data transfer may store multiple items, each at a given zero-based index. `mozSetDataAt()` may only be called with an index argument less than `mozItemCount` in which case an existing item is modified, or equal to `mozItemCount` in which case a new item is added, and the `mozItemCount` is incremented by one.

Data should be added in order of preference, with the most specific format added first and the least specific format added last. If data of the given format already exists, it is replaced in the same position as the old data.

The data should be either a string, a primitive boolean or number type (which will be converted into a string) or an `nsISupports`.

**Nota:** This method is Gecko-specific.
```

 void mozSetDataAt(
   [optional] in String type,
   in nsIVariant data,
   in unsigned long index
 );
```

###### Parameters

`type`

The type of data to add.

`data`

The data to add.

`index`

The index of the data to add.

### mozTypesAt()

Holds a list of the format types of the data that is stored for an item at the specified index. If the index is not in the range from 0 to the number of items minus one, an empty string list is returned.

**Nota:** This method is Gecko-specific.
```

 nsIVariant mozTypesAt(
   in unsigned long index
 );
```

###### Parameters

`index`

The index of the data for which to retrieve the types.

See also
--------

Drag and Drop


OfflineAudioContext - APIs da Web

OfflineAudioContext
===================

A interface `OfflineAudioContext` é uma interface `AudioContext` que representa um gráfico de processament de áudio construido a partir de conexões entre `AudioNode`s. Em contraste com o padrão `AudioContext`, um `OfflineAudioContext` não processa o áudio para o hardware do dispositivo; Em vez disso, ele gera, o mais rápido possível, e exibe o resultado para um `AudioBuffer` (en-US).
EventTarget

BaseAudioContext

(en-US)

OfflineAudioContextConstrutor
----------

`OfflineAudioContext.OfflineAudioContext()` (en-US)

Cria uma nova instância `OfflineAudioContext`.

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

*Também herda propriedades da sua entidade paterna, `BaseAudioContext` (en-US).*

`OfflineAudioContext.length` (en-US) Somente leitura

Um número inteiro que representa o tamanho do buffer em quadros de amostra.

### Manipuladores de Eventos

`OfflineAudioContext.oncomplete` (en-US)

É uma chamada `event handler` quando o processamento é encerrado, é quando o evento `complete (en-US)` - do tipo `OfflineAudioCompletionEvent` (en-US) - é gerado, após a versão baseada em eventos do `OfflineAudioContext.startRendering()` (en-US) é usada.

Métodos
-------

*Também herda métodos da interface paterna, `BaseAudioContext` (en-US).*

`OfflineAudioContext.resume()` (en-US)

Programa uma suspensão da progressão do tempo no contexto de áudio no horário especificado e retorna uma promessa.

`OfflineAudioContext.suspend()` (en-US)

Agende uma suspensão da progressão do tempo no contexto de áudio no horário especificado e retorna uma promessa.

`OfflineAudioContext.startRendering()` (en-US)

Inicia a renderização do áudio, levando em consideração as conexões atuais e as mudanças programadas atuais. Esta página abrange a versão baseada em eventos e a versão baseada em promessas.

Exemplo
-------

Nesse exemplo, declaramos um ambos `AudioContext` e um `OfflineAudioContext` objeto. Nós usamos o `AudioContext` para carregar uma faixa de áudio via XHR (`AudioContext.decodeAudioData` (en-US)), então o `OfflineAudioContext` para renderizar o áudio em um `AudioBufferSourceNode` (en-US) e reproduzir a trilha. Depois que o gráfico de áudio off-line estiver configurado, você deve renderizá-lo para `AudioBuffer` (en-US) usando `OfflineAudioContext.startRendering` (en-US).

Quando a 'promise' `startRendering()` é resolvida, a renderização foi concluída e a saída `AudioBuffer` é retornada fora da 'promise.

Neste ponto, criamos outro contexto de áudio, criamos um `AudioBufferSourceNode` (en-US) dentro dele e configuramos o buffer para ser igual à promessa `AudioBuffer`. Isso é jogado como parte de um gráfico de áudio padrão simples.

**Nota:** Para um exemplo de trabalho, veja nosso offline-audio-context-promise Github repo (veja o código fonte também.)

```js
// define o contexto de áudio online e offline

var audioCtx = new AudioContext();
var offlineCtx = new OfflineAudioContext(2, 44100 \* 40, 44100);

source = offlineCtx.createBufferSource();

// usa XHR para carregar uma faixa de áudio, e
// decodeAudioData para decodificar e OfflineAudioContext para renderizar

function getData() {
  request = new XMLHttpRequest();

  request.open("GET", "viper.ogg", true);

  request.responseType = "arraybuffer";

  request.onload = function () {
    var audioData = request.response;

    audioCtx.decodeAudioData(audioData, function (buffer) {
      myBuffer = buffer;
      source.buffer = myBuffer;
      source.connect(offlineCtx.destination);
      source.start();
      //source.loop = true;
      offlineCtx
        .startRendering()
        .then(function (renderedBuffer) {
          console.log("Rendering completed successfully");
          var audioCtx = new (window.AudioContext ||
            window.webkitAudioContext)();
          var song = audioCtx.createBufferSource();
          song.buffer = renderedBuffer;

          song.connect(audioCtx.destination);

          play.onclick = function () {
            song.start();
          };
        })
        .catch(function (err) {
          console.log("Rendering failed: " + err);
          // Nota: A promessa deve rejeitar quando o StartRendering é chamado uma segunda vez em um OfflineAudioContext
        });
    });
  };

  request.send();
}

// Run getData to start the process off

getData();
```

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

| Specification |
| --- |
| Web Audio API # OfflineAudioContext |

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

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

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

* Usando a API de áudio da Web (en-US)