recursal/MDN huggingface dataset:
Animation.playState
===================

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**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 **`Animation.playState`** do Web Animations API (en-US) retorna e altera um valor enumerado que descreve o estado de reprodução da animação.

**Nota:** Essa propriedade é apenas de leitura para Animações CSS e Transições.

Sintaxe
-------
```

var estadoAtualDaReproducao = Animation.playState;

Animation.playState =novoEstado;
```

### Valor

`idle`

O tempo atual da animação não está acertado e não há tarefas pendentes.

`pending`

A animação está aguardando a realização de algumas tarefas para ser completada.

`running`

A animação está rodando.

`paused`

A animação está parada e a propriedade `Animation.currentTime` não está sendo atualizada.

`finished`

A animação alcançou um de seus finais e a propriedade `Animation.currentTime` não está sendo atualizada.

Exemplo
-------

No jogo Growing/Shrinking Alice Game , os jogadores podem chegar ao final com a Alice chorando em uma poça de lágrimas. No jogo, por razões de performance, as lágrimas só são animadas quando estão visiveis. Então elas devem ficar pausadas enquanto a animação ocorre, como no exemplo:


```js
// Configurando a animação das lágrimas

tears.forEach(function (el) {
  el.animate(tearsFalling, {
    delay: getRandomMsRange(-1000, 1000), // aleatório para cada lágrima
    duration: getRandomMsRange(2000, 6000), // aleatório para cada lágrima
    iterations: Infinity,
    easing: "cubic-bezier(0.6, 0.04, 0.98, 0.335)",
  });
  el.playState = "paused";
});

// Rodar as lágrimas caindo quando o final precisa aparecer.

tears.forEach(function (el) {
  el.playState = "playing";
});

// Reseta a animação e coloca o estado em pause.

tears.forEach(function (el) {
  el.playState = "paused";
  el.currentTime = 0;
});
```

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

| Specification |
| --- |
| Web Animations # dom-animation-playstate |

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

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

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

* Web Animations API (en-US)
* `Animation` para outros métodos e propriedades que você pode usar para controlar a animação da página web.
* Os métodos `Animation.play()` (en-US), `Animation.pause()` (en-US), `Animation.finish()` (en-US) conseguem alterar o `Animation`'s `playState`.
Animation.cancel()
==================

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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

O método **`Animation.cancel()`** da interface `Animation` , limpa todas as `keyframeEffects` (en-US) geradas pela animação e aborta esta execução.

**Nota:** Quando uma animação é cancelada, os valores de `startTime` (en-US) e `currentTime` são definidos como `null`.

Sintaxe
-------


```js
// cancela animação
animation.cancel();
```

### Parametros

Nenhum.

### Valor de retorno

Nenhum.

### Exceptions

Se o método `Animation.playState` da animação estiver executando quando a operação for cancelada, esta ação vai rejeitar a `current finished promise` (en-US) com a `DOMException` (en-US) nomeada `AbortError`.

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

| Specification |
| --- |
| Web Animations # dom-animation-cancel |

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

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

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

* Web Animations API (en-US)
* `KeyframeEffect` (en-US)
* `Animation`
* `Animation.playState`
* `Animation.finished` (en-US) returns the promise this action will reject if the animation's `playState` is not `idle`.
performance.now()
=================

O método **`performance.now()`** retorna `DOMHighResTimeStamp` (en-US), medido em milisegundos, com precisão de cinco milésimos de milissegundo (5 microsegundos).

O valor retornado representa o tempo decorrido desde o **time origin** (the `PerformanceTiming.navigationStart` (en-US) property). Em um web worker, o tempo inicial é o momento em que o contexto da execução(e.g. thread ou processo) é criado. Em uma janela, é o tempo em que o usuário iniciou a navegação neste documento. Tenha em mente que:

* Em workers dedicados criados do `Window`, o valor neste worker será inferior a `performance.now()` na window que gerou este worker. Normalmente é o mesmo que `t0` no contexto principal, mas esse valor foi alterado.
* Em shared workers ou service workers, o valor do worker pode ser maior em relação ao contexto principal poir estas janelas podem ser criadas depois destes workers.
Sintaxe
-------
```

t = performance.now();
```

Exemplo
-------


```js
var t0 = performance.now();
doSomething();
var t1 = performance.now();
console.log("Call to doSomething took " + (t1 - t0) + " milliseconds.");
```


Unlike other timing data available to JavaScript (for example `Date.now` (en-US)), the timestamps returned by `Performance.now()` are not limited to one-millisecond resolution. Instead, they represent times as floating-point numbers with up to microsecond precision.

Also unlike `Date.now()`, the values returned by `Performance.now()` always increase at a constant rate, independent of the system clock (which might be adjusted manually or skewed by software like NTP). Otherwise, `performance.timing.navigationStart + performance.now()` will be approximately equal to `Date.now()`.

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

| Specification |
| --- |
| High Resolution Time # dom-performance-now |

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

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

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

* When milliseconds are not enough: performance.now() from HTML5 Rocks.
Performance.toJSON()
====================

O método **`toJSON()`** da interface `Performance` (en-US) é um serializador padrão: Ele retorna uma representação em JSON das propriedades do objeto performance.

Sintaxe
-------
```

minhaPerf = performance.toJSON()
```

### Argumentos

Nenhum

### Valor de retorno

minhaPerf

Um objeto JSON que é a serialização do objeto `Performance` (en-US).

Exemplo
-------


```js
var js;
js = window.performance.toJSON();
console.log("json = " + JSON.stringify(js));
```

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

| Specification |
| --- |
| High Resolution Time # dom-performance-tojson |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Conceitos básicos de Fetch
==========================

A Fetch API fornece uma interface para buscar recursos (inclusive pela rede). Parecerá familiar para alguém que já tenha usado `XMLHttpRequest`, mas ela fornece um conjunto de recursos mais poderoso e flexível . Este artigo expõe alguns conceitos básicos da API Fetch.

**Nota:** Este artigo será incrementado ao longo do tempo. Se você achar um conceito em Fetch que parece precisar de uma explicação melhor, informe alguém em fórum de discussãMDN, or Mozilla IRC (#mdn room.)

Em poucas palavras
------------------

O coração do Fetch são as abstrações da Interface do HTTP `Request`, `Response`, `Headers` (en-US), e `Body` payloads, juntamente com `global fetch` (en-US) método para iniciar requisições de recursos assíncronos. Como os componentes principais do HTTP são abstraidos como objetos de JavaScript, torna-se fácil APIs fazer uso das funcionalidades.

Service Workers (en-US) é um exemplo de uma API que faz um grande uso de Fecth.

Fetch leva a assincronicidade um passo além. A API é completamente baseada em `Promise`.

Guard
-----

Guard é uma novidade de objetos `Headers` (en-US), podendo assumir os valores de `immutable`, `request`, `request-no-cors`, `response`, ou `none`, dependendo de onde o cabeçalho é utilizado.

Quando um novo objeto `Headers` (en-US) é criado usando o `Headers()` (en-US) constructor (en-US), seu guard é configurado como `none` (o padrão). Quando um objeto `Request` ou `Response` é criado, tem um objeto `Headers` (en-US) associado cujo guard é resumido a seguir:

| Novo tipo de objeto | Construtor criado | Configuração guard associada ao objeto `Headers` (en-US) |
| --- | --- | --- |
| `Request` | `Request()` | `request` |
| `Request()` com
 `mode` (en-US) de `no-cors` | `request-no-cors` |
| `Response` | `Response()` (en-US) | `response` |
| 
 Métodos `error()` (en-US) ou
 `redirect()` (en-US) | `immutable` |

Um cabeçalho guard afeta os métodos `set()` (en-US), `delete()` (en-US), e `append()` (en-US) os quais mudam o conteúdo do cabeçalho. Um`TypeError` é lançado se você tentar modificar um objeto `Headers` (en-US) objeto cujo "guard" é `immutable`. De qualquer maneira, a operação vai funcionar se

* guard for um `request` e o *name* de cabeçalho não for forbidden header name .
* guard for `request-no-cors` e os *name*/*value* de cabeçalho for simple header (en-US) .
* guard for `response` e o *name* de cabeçalho não for forbidden response header name .
Uso de busca Cross-global
=========================

Este artigo explica um "edge case" (um problema ou situação que ocorre apenas em um parâmetro operacional extremo) que ocorre ao utilizar fetch (e potencialmente outras APIs que exibem o mesmo tipo de comportamento de recuperação de recurso). Quando uma busca de cross-origin envolvendo uma URL relativa é iniciada a partir de um `<iframe>`, a URL relativa costumava ser resolvida na localização global atual, em vez da localização do iframe.

O "edge case"
-------------

Muitos sites nunca se deparam com este caso extremo. Para que isso aconteça:

* Você precisa de um iframe de mesma origem
* Esse iframe de mesma origem precisa ter um local com um URL base diferente
* Você tem que usar a função de busca global, por exemplo, frame.contentWindow.fetch ()
* A URL passada precisa ser relativa
O problema
----------

No passado, resolveríamos o URL relativo contra o global atual, por exemplo:


```js
let absolute = new URL(relative, window.location.href);
```


Isto não é um problema como tal. É que diferentes APIs que exibem esse tipo de comportamento estavam fazendo isso de maneira inconsistente com o comportamento definido na especificação, o que poderia levar a problemas mais adiante.

A solução
---------

No Firefox 60 em diante, o Mozilla resolve a URL relativa contra o global que possui a função `fetch()` que está sendo usada (veja Erro do Firefox 1432272). Portanto, no caso descrito acima, ele é resolvido em relação à localização do iframe:


```js
let absolute = new URL(relative, frame.contentWindow.location.href);
```


Há muita discussão em andamento sobre a obtenção de novas especificações para se alinhar a essa mudança de comportamento, a fim de mitigar possíveis problemas no futuro.
URL.toJSON()
============

O metodo **`toJSON()`** da interface `URL` retorna uma `USVString` (en-US) contendo a versão serializada de uma URL, apesar de que na prática ele tem o mesmo efeito que o `URL.toString()`

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

Sintaxe
-------


```js
const href = url.toJSON();
```

### Valor de retorno

Uma `USVString` (en-US).

Exemplos
--------


```js
const url = new URL(
  "https://developer.mozilla.org/pt-BR/docs/Web/API/URL/toString",
);
url.toJSON(); // deve retornar a url como string
```

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

| Specification |
| --- |
| URL Standard # dom-url-tojson |

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

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

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

* Polyfill de `URL.prototype.toJSON` em `core-js`
URL.host
========

A propriedade **`host`** da interface `URL` é uma `USVString` (en-US) contendo o host, que é o `hostname`, e também, se o port da URL não for vazia, o ':'`, seguido pelo `port` da URL.

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

Valor
-----

Uma `USVString` (en-US).

Exemplos
--------


```js
let url = new URL("https://developer.mozilla.org/pt-BR/docs/Web/API/URL/host");
console.log(url.host); // "developer.mozilla.org"

url = new URL("https://developer.mozilla.org:443/pt-BR/docs/Web/API/URL/host");
console.log(url.host); // "developer.mozilla.org"
// O número da porta não está incluso porque 443 é o esquema padrão de porta

url = new URL("https://developer.mozilla.org:4097/pt-BR/docs/Web/API/URL/host");
console.log(url.host); // "developer.mozilla.org:4097"
```

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

| Specification |
| --- |
| URL Standard # dom-url-host |

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

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

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

* A interface `URL` a quem pertence.
URL.port
========

A propriedade **`port`** da interface `URL` é uma `USVString` (en-US) contendo o número da porta da URL.

se uma string de entrada passada para o construtor `URL()` (en-US) não contiver um número de porta explicitamente (por exemplo, `https://localhost`) ou contiver um número de porta que é o número de porta padrão correspondente à parte do protocolo da string de entrada (por exemplo, `https://localhost:443`), então no `URL` que o construtor retornar, o valor da propriedade port será a string vazia: `''`.

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

Valor
-----

Uma `USVString` (en-US).

Exemplos
--------


```js
const url = new URL("https://mydomain.com:80/svn/Repos/");
console.log(url.port); // Logs '80'
```

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

| Specification |
| --- |
| URL Standard # dom-url-port |

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

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

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

* A interface `URL` a quem pertence.
URL.password
============

A propriedade **`password`** da interface `URL` é uma `USVString` (en-US) que contém a senha especificada antes do nome do domínio.

Se for definido primeiramente sem a propriedade `username`, ele irá falhar silenciosamente.

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

Valor
-----

Uma `USVString` (en-US).

Exemplos
--------


```js
const url = new URL(
  "https://anonymous:flabada@developer.mozilla.org/pt-BR/docs/Web/API/URL/password",
);
console.log(url.password); // Logs "flabada"
```

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

| Specification |
| --- |
| URL Standard # dom-url-password |

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

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

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

* A interface `URL` a quem pertence.
URL.hostname
============

A propriedade **`hostname`** da interface `URL` é uma `USVString` (en-US) contendo o domain name da URL.

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

Valor
-----

Uma `USVString` (en-US).

Exemplo
-------


```js
const url = new URL(
  "https://developer.mozilla.org/pt-BR/docs/Web/API/URL/hostname",
);
console.log(url.hostname); // Logs: 'developer.mozilla.org'
```

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

| Specification |
| --- |
| URL Standard # dom-url-hostname |

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

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

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

* A interface `URL` a quem pertence.
URL.origin
==========

A propriedade somente de leitura **`origin`** da interface `URL` retorna uma `USVString` (en-US) contendo a serialização Unicode da origem da URL representada.

A estrutura exata tem uma variação dependendo do tipo de URL:

* Para URLs `http` ou `https`, o esquema é seguido por `'://'`, seguido pelo domímio, seguido por `':'`, seguido pela porta (a porta padrão, `80` e `443` respectivamente, se for especificada explicitamente ).
* Para as URls `file:`, o valor é dependente do browser.
* Para as Urls `blob:`, a origem da URl seguido pelo `blob:` será utilizada, e.g `"blob:https://mozilla.org"` o que sera retornado é `"https://mozilla.org".`

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

Valor
-----

Uma `USVString` (en-US).

Exemplo
-------


```js
const url = new URL("blob:https://mozilla.org:443/");
console.log(url.origin); // Logs 'https://mozilla.org'
```

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

| Specification |
| --- |
| URL Standard # dom-url-origin |

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

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

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

* A interface `URL` a quem pertence.
URL.createObjectURL()
=====================

---

O método estático **`URL.createObjectURL()`** cria um `DOMString` contendo a URL representando o objeto passado como parâmetro.

O tempo de vida da URL é vinculado ao `document` da janela onde ele foi criado. O novo objeto URL represenda o objeto `File` especificado ou o objeto `Blob`.

Para anular um objeto URL, execute o método `revokeObjectURL()`

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

**Nota:** Esta funcionalidade não está disponível em Service Workers devido ao potencial de criar vazamento de memória

Sintaxe
-------


```js
const objectURL = URL.createObjectURL(object);
```

### Parâmetros

`object`

Um `File`, `Blob`, ou objeto `MediaSource` (en-US) para criar um objeto URL.

### Retorno de valor

Uma `DOMString` contendo o objeto URL e pode ser usado para referenciar o conteúdo especificado na origem do `object`.

Exemplos
--------

Veja Usando objeto URL para exibir imagens (en-US).

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

### Gerenciamento de memória

Cada vez que você executa `createObjectURL()`, um novo objeto URL é criado, mesmo que você já tenha criado este objeto. Cada um desses pode ser eliminado executando o método `URL.revokeObjectURL()` quando você não precisa mais dele.

Os navegadores vão limpar objetos URLs automaticamente quando o documento for descarregado; contudo, para otimizar a performace e o uso de memória, se há momentos que é seguro descarregar, você deve fazer isso.

### Usando objeto URL para media stream

Em versões antigas da especificação Media Source, anexar stream a um elemento `<video>` é obrigatório criar um objeto URL para o `MediaStream` (en-US). Isto não é mais necessário, e os navegadores estão removendo o suporte para isso.

> 
> 
> **Warning:** Se você ainda tem código com
>  `createObjectURL()` para anexar streams em elementos
>  de media, você precisa atualizar seu código para `srcObject` (en-US) to the `MediaStream` directly.
>  
> 
> 
> 

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

| Specification |
| --- |
| File API # dfn-createObjectURL |

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

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

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

* Usando arquivos de aplicativos da web (en-US)
* Usando objetos URLs para exibir imagens (en-US)
* `URL.revokeObjectURL()`
* `HTMLMediaElement.srcObject` (en-US)
* `FileReader.readAsDataURL()`
URL.href
========

A propriedade **`href`** da interface `URL` é uma `USVString` (en-US) contendo toda a URL

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

Valor
-----

Uma `USVString` (en-US).

Exemplos
--------


```js
const url = new URL(
  "https://developer.mozilla.org/pt-BR/docs/Web/API/URL/href",
);
console.log(url.href); // Logs: 'https://developer.mozilla.org/pt-BR/docs/Web/API/URL/href'
```

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

| Specification |
| --- |
| URL Standard # dom-url-href |

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

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

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

* A interface `URL` a quem pertence.
URL.username
============

A propriedade **`username`** da interface `URL` é uma `USVString` (en-US) contendo o nome de usuário especificado antes do nome do domínio.

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

Valor
-----

Uma `USVString` (en-US).

Exemplos
--------


```js
const url = new URL(
  "https://anonymous:flabada@developer.mozilla.org/pt-BR/docs/Web/API/URL/username",
);
console.log(url.username); // Logs "anonymous"
```

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

| Specification |
| --- |
| URL Standard # dom-url-username |

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

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

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

* A interface `URL` a quem pertence.
URL.hash
========

A propriedade **`hash`** da interface `URL` é uma `USVString` (en-US) contendo o `'#'` seguido pelo identificador de fragmento da URL.

O fragmento não é percent-decoded (en-US). Se a URL não tem o framento de identificação, esta propriedade contém uma string vazia - `""`.

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

Valor
-----

Uma `USVString` (en-US).

Exemplos
--------


```js
const url = new URL(
  "https://developer.mozilla.org/pt-BR/docs/Web/API/URL/href#Examples",
);
console.log(url.hash); // Logs: '#Examples'
```

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

| Specification |
| --- |
| URL Standard # dom-url-hash |

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

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

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

* A interface `URL` a quem pertence.
URL.protocol
============

A propriedade **`protocol`** da interface `URL` é uma `USVString` (en-US) representando o esquema de protocolo da URL, incluindo o final `':'`.

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

Valor
-----

Uma `USVString` (en-US).

Exemplos
--------


```js
const url = new URL(
  "https://developer.mozilla.org/pt-BR/docs/Web/API/URL/protocol",
);
console.log(url.protocol); // Logs "https:"
```

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

| Specification |
| --- |
| URL Standard # dom-url-protocol |

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

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

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

* A interface `URL` a quem pertence.
URL.searchParams
================

A propriedade **`searchParams`** da interface `URL` retorna um objeto `URLSearchParams` permitindo acesso ao `GET` decodificando os argumentos que contém na URL.

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

Valor
-----

Um objeto `URLSearchParams`.

Exemplos
--------

 Se a URl da sua página é
 `https://example.com/?name=Jonathan%20Smith&age=18` você pode analisar os parâmetros `name` e `age` utilizando:


```js
let params = new URL(document.location).searchParams;
let name = params.get("name"); // é a string "Jonathan Smith".
let age = parseInt(params.get("age")); // é o número 18
```

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

| Specification |
| --- |
| URL Standard # dom-url-searchparams |

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

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