recursal/MDN huggingface dataset:
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
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
==================

**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.
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
==============

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

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

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.
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`.
RTCDataChannel
==============

**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 RTCDataChannel representa um canal de rede que pode ser usado para transferências bidirecionais de dados arbitrários de ponto a ponto. Todo canal de dados está associado a `RTCPeerConnection` (en-US), e cada conexão de pares pode ter até um máximo teórico de 65,534 canais de dados (o limite real pode variar de navegador para navegador).

Para criar um canal de dados e pedir a um ponto remoto para se juntar a você, chame os metodos `RTCPeerConnection` (en-US)'s `createDataChannel()` (en-US). O interlocutor que está sendo convidado a trocar dados recebe um evento `datachannel` (que possui o tipo `RTCDataChannelEvent` (en-US)) para informá-lo de que o canal de dados foi adicionado à conexão.

Exemplo
-------


```js
var pc = new RTCPeerConnection();
var dc = pc.createDataChannel("my channel");

dc.onmessage = function (event) {
  console.log("received: " + event.data);
};

dc.onopen = function () {
  console.log("datachannel open");
};

dc.onclose = function () {
  console.log("datachannel close");
};
```

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

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # rtcdatachannel |

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

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

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

* WebRTC (en-US)
MessageChannel
==============

A interface **`MessageChannel`** da API Channel Messaging (en-US) nos permite criar um novo canal de mensagem e enviar os dados através de suas duas propriedades `MessagePort` (en-US).

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

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

`MessageChannel.port1` (en-US) Somente leitura 

Retorna port1 do canal.

`MessageChannel.port2` (en-US) Somente leitura 

Retorna port2 do canal.

Construtor
----------

`MessageChannel()` (en-US)

Retorna um novo objeto `MessageChannel` com dois novos objetos `MessagePort` (en-US).

Exemplo
-------

No seguinte bloco de codigo, você pode ver um novo canal sendo criado usando o construtor `MessageChannel()` (en-US). Quando o `<iframe>` tiver carregado, nos passamos o `MessageChannel.port2` (en-US) para o `<iframe>` usando `MessagePort.postMessage` juntamente com uma mensagem. O manipulador `handleMessage` então reponde à mensagem que foi enviada de volta do `<iframe>` (using `MessagePort.onmessage` (en-US)), colocando-o em um parágrafo.


```js
var channel = new MessageChannel();
var para = document.querySelector("p");

var ifr = document.querySelector("iframe");
var otherWindow = ifr.contentWindow;

ifr.addEventListener("load", iframeLoaded, false);

function iframeLoaded() {
  otherWindow.postMessage("Hello from the main page!", "\*", [channel.port2]);
}

channel.port1.onmessage = handleMessage;
function handleMessage(e) {
  para.innerHTML = e.data;
}
```


Para um exemplo completo, veja nosso channel messaging basic demo no Github (rode online também ).

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

| Specification |
| --- |
| HTML Standard # message-channels |

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

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

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

* Using channel messaging (en-US)
CSS Object Model
================

O CSS Object Model é um conjunto de APIs que permite manipular o CSS através do JavaScript. Isto depende do DOM e da HTML APIs. Com isto é permitido a leitura e a modificação dos estilos CSS dinamicamente.

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

* `AnimationEvent`
* `CaretPosition` (en-US)
* `CSS`
* `CSSCharsetRule`
* `CSSConditionRule` (en-US)
* `CSSCounterStyleRule` (en-US)
* `CSSFontFaceRule` (en-US)
* `CSSFontFeatureValuesMap`
* `CSSFontFeatureValuesRule` (en-US)
* `CSSGroupingRule` (en-US)
* `CSSImportRule` (en-US)
* `CSSKeyframeRule` (en-US)
* `CSSKeyframesRule` (en-US)
* `CSSMarginRule`
* `CSSMediaRule` (en-US)
* `CSSNamespaceRule` (en-US)
* `CSSPageRule` (en-US)
* `CSSRule` (en-US)
* `CSSRuleList` (en-US)
* `CSSStylesheet` (en-US)
* `CSSStyleDeclaration` (en-US)
* `CSSSupportsRule` (en-US)
* `CSSVariablesMap`
* `CSSViewportRule`
* `ElementCSSInlineStyle` (en-US)
* `GeometryUtils`
* `GetStyleUtils`
* `LinkStyle` (en-US)
* `MediaList` (en-US)
* `MediaQueryList` (en-US)
* `PseudoElement`
* `Screen` (en-US)
* `Stylesheet` (en-US)
* `StylesheetList` (en-US)
* `TransitionEvent` (en-US)

Outras interfaces podem ser usadas com CSSOM:

`Document`, `Window`, `Element`, `HTMLElement` (en-US), `HTMLImageElement` (en-US), `Range` (en-US), `MouseEvent`, and `SVGElement` (en-US).

Tutoriais
---------

* Determinando dimensões de elementos (en-US) (É necessário algumas atualizações, já que foi feito com DHTML/Ajax).
* Gerenciando as orientações da tela (en-US)
Especificações
--------------

| Specification |
| --- |
| CSS Object Model (CSSOM)  |
| CSSOM View Module  |
| CSS Typed OM Level 1  |

Notas de compatibilidade do navegador
-------------------------------------

Todos esses recursos foram adicionados pouco a pouco ao logo dos anos para os diferentes navegadores: Foi um processo bastante complexo que não podem ser sintetizados em uma simples tabela. Por favor, pesquise por uma interface específica e sua disponibilidade.
SpeechGrammar
=============

**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 **`SpeechGrammar`** da Web Speech API (en-US) representa um conjunto de palavras ou padrões de palavras, os quais, nós queremos que o serviço de reconhecimento reconheça.

A gramática é definida usando JSpeech Grammar Format (**JSGF**.) Outros formatos podem ser suportados no futuro.

Construtor
----------

`SpeechGrammar.SpeechGrammar()` (en-US)

Cria um novo objeto `SpeechGrammar`.

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

`SpeechGrammar.src` (en-US)

Define e retorna a string contendo a gramática contida na instância do objeto `SpeechGrammar`.

`SpeechGrammar.weight` (en-US) Optional

Define e retorna o peso do objeto `SpeechGrammar`.

Exemplos
--------


```js
var grammar =
  "#JSGF V1.0; grammar colors; public <color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;";
var recognition = new SpeechRecognition();
var speechRecognitionList = new SpeechGrammarList();
speechRecognitionList.addFromString(grammar, 1);
recognition.grammars = speechRecognitionList;

console.log(speechRecognitionList[0].src); // deveria retornar o mesmo conteúdo da variável grammar
console.log(speechRecognitionList[0].weight); // deveria retornar 1 - o mesmo peso definido na linha 4.
```

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

| Specification |
| --- |
| Web Speech API # speechreco-speechgrammar |

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

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

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

* Web Speech API (en-US)
ValidityState
=============

Baseline 2023
-------------

Newly availableSince March 2023, 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

 A interface **`ValidityState`** representa os estados de validação que um elemento
 pode conter de acordo com as propriedades de validação abaixo. Juntas, elas podem explicar porque um elemento é inválido (caso seja) ao ser validado.

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

Para cada uma das propriedades Booleanas abaixo, caso retorne **`true`**, isso indica a razão específica porque a validação falhou, exceto no caso da propriedade *valid*, que retorna **`true`** no caso do elemento ser completamente válido e **`false`** caso contrário.

`ValidityState.badInput` (en-US) Somente leitura 

É um `Boolean` informando se o usuário inseriu um valor que o navegador é incapaz de converter.

`ValidityState.customError` Somente leitura 

É um `Boolean` informando se o elemento possui uma mensagem de validação definida por `setCustomValidity()` para um valor não vázio.

`ValidityState.patternMismatch` (en-US) Somente leitura 

É um `Boolean` informando se o valor não combina com o padrão (`pattern`) especificado.

`ValidityState.rangeOverflow` (en-US) Somente leitura 

É um `Boolean` informando se o valor é maior do que o máximo especificado pelo atributo `max`.

`ValidityState.rangeUnderflow` (en-US) Somente leitura 

É um `Boolean` informando se o valor é menor do que o mínimo especificado pelo atributo `min`.

`ValidityState.stepMismatch` (en-US) Somente leitura 

É um `Boolean` informando se o valor não segue a regra definida pelo atributo `step`.

`ValidityState.tooLong` (en-US) Somente leitura 

É um `Boolean` informando se o valor ultrapassa o especificado pelo atributo `maxlength` para `HTMLInputElement` ou `HTMLTextAreaElement` (en-US). ***OBS:** Isso nunca será `true` em navegadores como o Firefox, pois a inserção de valores não é permitida ao alcançar o valor definido em `maxlength`.*

`ValidityState.tooShort` (en-US) Somente leitura 

É um `Boolean` informando se o valor não corresponde ao especificado no atributo `minlength` para `HTMLInputElement` ou `HTMLTextAreaElement` (en-US).

`ValidityState.typeMismatch` (en-US) Somente leitura 

É um `Boolean` informando se o valor não corresponde ao tipo de entrada definida. (Um exemplo é quando `type` é `email` ou `url`).

`ValidityState.valid` Somente leitura 

É um `Boolean` informando se o elemento é completamente válido.

`ValidityState.valueMissing` (en-US) Somente leitura 

É um `Boolean` informando que o elemento tem o atributo `required`, mas não tem `value`.

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

| Specification |
| --- |
| HTML Standard # the-constraint-validation-api:validitystate-3 |

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

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

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

* Constraint validation (en-US)
* Forms: Data form validation (en-US)