A API de informações de rede - APIs da Web

A API de informações de rede
============================

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

 A API de informações de rede fornece informações sobre a conexão do sistema em termos de tipo de conexão geral (por exemplo, 'wifi, 'celular' etc.).
 Isso pode ser usado para selecionar conteúdo de alta definição ou conteúdo de baixa definição com base na conexão do usuário.

A interface consiste em um único objeto `NetworkInformation` (en-US), cuja instância é retornada pela propriedade `Navigator.connection` (en-US).

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

Interfaces
----------

`NetworkInformation` (en-US)

fornece informações sobre a conexão que um dispositivo está usando para se comunicar com a rede e fornece um meio para que os scripts sejam notificados se o tipo de conexão for alterado. A interface `NetworkInformation` não pode ser instanciada. Em vez disso, é acessado através da interface `Navigator` (en-US).

Exemplos
--------

### Detectar alterações de conexão

Este exemplo observa as alterações na conexão do usuário.

```js
let type = navigator.connection.effectiveType;

function updateConnectionStatus() {
  console.log(
    `Tipo de conexão alterado de ${type} para ${navigator.connection.effectiveType}`,
  );
  type = navigator.connection.effectiveType;
}

navigator.connection.addEventListener("change", updateConnectionStatus);
```

### Pré-carregue grandes recursos

O objeto de conexão é útil para decidir se deve pré-carregar recursos que consomem grandes quantidades de largura de banda ou memória. Este exemplo seria chamado logo após o carregamento da página para verificar um tipo de conexão em que o pré-carregamento de um vídeo pode não ser desejável. Se uma conexão de celular for encontrada, o sinalizador `preloadVideo` será definido como `false`. Para simplicidade e clareza, este exemplo testa apenas um tipo de conexão. Um caso de uso do mundo real provavelmente usaria uma instrução switch ou algum outro método para verificar todos os valores possíveis de `NetworkInformation.type` (en-US). Independentemente do valor `type`, você pode obter uma estimativa da velocidade da conexão através da propriedade `NetworkInformation.effectiveType` (en-US).

```js
let preloadVideo = true;
const connection = navigator.connection;
if (connection) {
  if (connection.effectiveType === "slow-2g") {
    preloadVideo = false;
  }
}
```

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

| Specification |
| --- |
| Network Information API # networkinformation-interface |
| Network Information API # connection-attribute |

Compatibilidade do navegador
----------------------------

### api.NetworkInformation

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

### api.Navigator.connection

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

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

* Eventos online e offline (en-US)


Window - APIs da Web

Window
======

O objeto `window` representa uma janela que contém um elemento DOM; a propriedade `document` aponta para o documento DOM document (en-US) carregado naquela janela. Uma janela para um dado documento pode ser obtido usando a propriedade `document.defaultView`.

Esta seção provê uma breve referência a todos os métodos, propriedades e eventos disponíveis através do objeto DOM `window`. O objeto `window` implementa a interface `Window`, o qual herda da interface `AbstractView`. Algumas funções globais, objeto de namespace, interfaces e construtores, apesar de não tipicamente associados ao objeto em questão, estão disponíveis e estão listados nas referências JavaScript Reference e DOM Reference (en-US).

Em um navegador com suporte a abas, como o Firefox, cada aba contém seu próprio objeto `window` (e, se você estiver escrevendo uma extensão, a janela do navegador é uma janela distinta também - veja Working with windows in chrome code para mais informação). Isto é, o objeto `window` não é compartilhado entre as abas na mesma janela. Alguns métodos, nomeadamente `window.resizeTo` (en-US) e `window.resizeBy` (en-US) aplicam-se à janela toda e não à aba em questão ao que o objeto `window` pertence. Geralmente, qualquer coisa que não pode racionalmente pertencer a uma aba, pertence a uma janela..

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

*Esta interface herda propriedades da interface `EventTarget` e implementa propriedades de `WindowTimers`, `WindowBase64`, e `WindowEventHandlers`.*

Perceba que propriedades que são objetos (ex.: sobrecarregar o protótipo de elementos built-in) são listados em uma sessão separada abaixo.

`Window.applicationCache` Somente leitura

Um objeto `OfflineResourceList` fornece acesso aos recursos offline para o window.

`Window.closed`
Non-standard
Somente leitura

Esta propriedade indica quando a window atual está fechada ou não.

`Window.Components`
Non-standard

O ponto de entrada para muitas características XPCOM. Algumas propriedades, por exemplo, classes, estão apenas disponíveis para código suficientemente privilegiado. Código de Web não deve usar essa propriedade.

`Window.console`
Non-standard
 Somente leitura

Retorna uma referência para o objeto console fornecendo acesso ao console debugging do navegador.

`Window.content` (en-US) and Window.content
Non-standard
Somente leitura

Retorna uma referência para o elemento de conteúdo na janela atual. A variante obsoleta com sublinhado não está disponível a partir do conteúdo da Web.

`Window.controllers`
Non-standard
Somente leitura

Retorna os objetos de controlador XUL para a janela atual do crome.

`Window.crypto` Somente leitura

Retorna o objeto de criptografia do navegador.

`Window.defaultStatus`

Obtém/define o texto da barra de status para determinada janela.

`Window.devicePixelRatio` (en-US)
Non-standard
Somente leitura

Returns the ratio between physical pixels and device independent pixels in the current display.

`Window.dialogArguments` Somente leitura

Gets the arguments passed to the window (if it's a dialog box) at the time `window.showModalDialog()` (en-US) was called. This is an `nsIArray`.

`Window.directories`

Synonym of `window.personalbar` (en-US)

`Window.document` Somente leitura

Retorna a referência à propriedade `document` que a janela contém.

`Window.frameElement` (en-US) Somente leitura

Returns the element in which the window is embedded, or null if the window is not embedded.

`Window.frames` (en-US) Somente leitura

Returns an array of the subframes in the current window.

`Window.fullScreen`

This property indicates whether the window is displayed in full screen or not.

`Window.globalStorage`
Non-standard

 Unsupported since Gecko 13 (Firefox 13). Use `Window.localStorage` instead.
 Was: Multiple storage objects that are used for storing data across multiple pages.

`Window.history` Somente leitura

Retorna a referência ao objeto `history`.

`Window.innerHeight`

Gets the height of the content area of the browser window including, if rendered, the horizontal scrollbar.

`window.innerWidth` (en-US)

Gets the width of the content area of the browser window including, if rendered, the vertical scrollbar.

`Window.length` Somente leitura

Returns the number of frames in the window. See also `window.frames` (en-US).

`Window.location` Somente leitura

Gets/sets the location, or current URL, of the window object.

`Window.locationbar` (en-US) Somente leitura

Returns the locationbar object, whose visibility can be toggled in the window.

`WindowStorage.localStorage` Somente leitura

Returns a reference to the local storage object used to store data that may only be accessed by the origin that created it.

`Window.menubar` (en-US) Somente leitura

Returns the menubar object, whose visibility can be toggled in the window.

`Window.messageManager`

Returns the message manager object for this window.

`Window.mozAnimationStartTime` (en-US) Somente leitura

The time in milliseconds since epoch at which the current animation cycle began.

`Window.mozInnerScreenX` (en-US) Somente leitura
Non-standard

Returns the horizontal (X) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See `mozScreenPixelsPerCSSPixel` in `nsIDOMWindowUtils` for a conversion factor to adapt to screen pixels if needed.

`Window.mozInnerScreenY` (en-US) Somente leitura
Non-standard

Returns the vertical (Y) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See `mozScreenPixelsPerCSSPixel` for a conversion factor to adapt to screen pixels if needed.

`Window.mozPaintCount` (en-US)
Non-standard
Somente leitura

Returns the number of times the current document has been rendered to the screen in this window. This can be used to compute rendering performance.

`Window.name` (en-US)

Pega/attribui o nome ao objeto `window`.

`Window.navigator` Somente leitura

Returns a reference to the navigator object.

`Window.opener` (en-US)

Returns a reference to the window that opened this current window.

`Window.outerHeight` (en-US) Somente leitura

Gets the height of the outside of the browser window.

`Window.outerWidth` (en-US) Somente leitura

Gets the width of the outside of the browser window.

`Window.pageXOffset` (en-US) Somente leitura

An alias for `window.scrollX` (en-US).

`Window.pageYOffset`Somente leitura

An alias for `window.scrollY`

`WindowSession.sessionStorage` Somente leitura

…

`SpeechSynthesisGetter.speechSynthesis` Somente leitura

…

`Window.parent` (en-US) Somente leitura

Returns a reference to the parent of the current window or subframe.

`Window.performance` Somente leitura

Provides a hosting area for performance related (en-US) attributes.

`Window.personalbar` (en-US) Somente leitura

Returns the personalbar object, whose visibility can be toggled in the window.

`Window.pkcs11`

Formerly provided access to install and remove PKCS11 modules.

`Window.returnValue`

The return value to be returned to the function that called `window.showModalDialog()` (en-US) to display the window as a modal dialog.

`Window.screen` (en-US) Somente leitura

Returns a reference to the screen object associated with the window.

`Window.screenX` (en-US) Somente leitura

Returns the horizontal distance of the left border of the user's browser from the left side of the screen.

`Window.screenY` (en-US) Somente leitura

Returns the vertical distance of the top border of the user's browser from the top side of the screen.

`Window.scrollbars` (en-US) Somente leitura

Returns the scrollbars object, whose visibility can be toggled in the window.

`Window.scrollMaxX` (en-US)
Non-standard
Somente leitura

The maximum offset that the window can be scrolled to horizontally, that is the document width minus the viewport width.

`Window.scrollMaxY` (en-US)
Non-standard
Somente leitura

The maximum offset that the window can be scrolled to vertically (i.e., the document height minus the viewport height).

`Window.scrollX` (en-US) Somente leitura

Returns the number of pixels that the document has already been scrolled horizontally.

`Window.scrollY` Somente leitura

Returns the number of pixels that the document has already been scrolled vertically.

`Window.self` (en-US) Somente leitura

Returns an object reference to the window object itself.

`Window.sessionStorage`

A storage object for storing data within a single page session.

`Window.sidebar` (en-US)
Non-standard
Somente leitura

Returns a reference to the window object of the sidebar.

`Window.status` (en-US)

Gets/sets the text in the statusbar at the bottom of the browser.

`Window.statusbar` (en-US) Somente leitura

Returns the statusbar object, whose visibility can be toggled in the window.

`Window.toolbar` (en-US) Somente leitura

Returns the toolbar object, whose visibility can be toggled in the window.

`Window.top` (en-US) Somente leitura

Returns a reference to the topmost window in the window hierarchy. This property is read only.

`Window.window` (en-US) Somente leitura

Returns a reference to the current window.

`window[0]`, `window[1]`, etc.

Returns a reference to the `window` object in the frames. See `Window.frames` (en-US) for more details.

Methods
-------

*This interface inherits methods from the `EventTarget` interface and implements methods from `WindowTimers`, `WindowBase64`, and `WindowEventHandlers`.*

`EventTarget.addEventListener()`

Register an event handler to a specific event type on the window.

`Window.alert()`

Displays an alert dialog.

`WindowBase64.atob()`

Decodes a string of data which has been encoded using base-64 encoding.

`Window.back()` (en-US)
Non-standard

Moves back one in the window history.

`Window.blur()` (en-US)

Sets focus away from the window.

`WindowBase64.btoa()` (en-US)

Creates a base-64 encoded ASCII string from a string of binary data.

`Window.captureEvents()` (en-US)
Deprecated

Registers the window to capture all events of the specified type.

`Window.clearImmediate()` (en-US)

Cancels the repeated execution set using `setImmediate`.

`WindowTimers.clearInterval()` (en-US)

Cancels the repeated execution set using `WindowTimers.setInterval()` (en-US).

`WindowTimers.clearTimeout()`

Cancels the repeated execution set using `WindowTimers.setTimeout()` (en-US).

`Window.close()` (en-US)

Closes the current window.

`Window.confirm()`

Displays a dialog with a message that the user needs to respond to.

`Window.disableExternalCapture()`
{{todo("NeedsContents")}}
`Window.dispatchEvent()`

Used to trigger an event.

`Window.dump()` (en-US)

Writes a message to the console.

`Window.enableExternalCapture()`
{{todo("NeedsContents")}}
`Window.find()` (en-US)

Searches for a given string in a window.

`Window.focus()` (en-US)

Sets focus on the current window.

`Window.forward()` (en-US)
Non-standard

Moves the window one document forward in the history.

`Window.getAttention()`

Flashes the application icon.

`Window.getAttentionWithCycleCount()`
{{todo("NeedsContents")}}
`Window.getComputedStyle()` (en-US)

Gets computed style for the specified element. Computed style indicates the computed values of all CSS properties of the element.

`Window.getDefaulComputedStyle()`

Gets default computed style for the specified element, ignoring author stylesheets.

`Window.getSelection()`

Returns the selection object representing the selected item(s).

`Window.home()`
Non-standard

Returns the browser to the home page.

`Window.matchMedia()`

Returns a `MediaQueryList` (en-US) object representing the specified media query string.

`Window.maximize()`
{{todo("NeedsContents")}}
`Window.minimize()` (en-US) (top-level XUL windows only)

Minimizes the window.

`Window.moveBy()` (en-US)

Moves the current window by a specified amount.

`Window.moveTo()` (en-US)

Moves the window to the specified coordinates.

`Window.mozRequestAnimationFrame()` (en-US)

Tells the browser that an animation is in progress, requesting that the browser schedule a repaint of the window for the next animation frame. This will cause a `MozBeforePaint` event to fire before that repaint occurs.

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

Opens a new window.

`Window.openDialog()`

Opens a new dialog window.

`Window.postMessage()` (en-US)

Provides a secure means for one window to send a string of data to another window, which need not be within the same domain as the first, in a secure manner.

`Window.print()`

Opens the Print Dialog to print the current document.

`Window.prompt()`

Returns the text entered by the user in a prompt dialog.

`Window.releaseEvents()` (en-US)
Deprecated

Releases the window from trapping events of a specific type.

`Window.removeEventListener()`

Removes an event listener from the window.

`Window.resizeBy()` (en-US)

Resizes the current window by a certain amount.

`Window.resizeTo()` (en-US)

Dynamically resizes window.

`Window.restore()` (en-US)
{{todo("NeedsContents")}}
`Window.routeEvent()`
{{todo("NeedsContents")}}
`Window.scroll()`

Scrolls the window to a particular place in the document.

`Window.scrollBy()`

Scrolls the document in the window by the given amount.

`Window.scrollByLines()` (en-US)

Scrolls the document by the given number of lines.

`Window.scrollByPages()`

Scrolls the current document by the specified number of pages.

`Window.scrollTo()`

Scrolls to a particular set of coordinates in the document.

`Window.setCursor()`

Changes the cursor for the current window

`Window.setImmediate()`

Executes a function after the browser has finished other heavy tasks

`WindowTimers.setInterval()` (en-US)

Schedules the execution of a function each X milliseconds.

`Window.setResizable` (en-US)
{{todo("NeedsContents")}}
`WindowTimers.setTimeout()` (en-US)

Sets a delay for executing a function.

`Window.showModalDialog()` (en-US)

Displays a modal dialog.

`Window.sizeToContent()` (en-US)

Sizes the window according to its content.

`Window.stop()` (en-US)

This method stops window loading.

`Window.updateCommands()` (en-US)

Updates the state of commands of the current chrome window (UI).

Event handlers
--------------

These are properties of the window object that can be set to establish event handlers for the various things that can happen in the window that might be of interest.

*This interface inherits event handlers from the `EventTarget` interface and implements event handlers from `WindowTimers`, `WindowBase64`, and `WindowEventHandlers`.*

**Nota:** Starting in Gecko 9.0, you can now use the syntax `if ("onabort" in window)` to determine whether or not a given event handler property exists. This is because event handler interfaces have been updated to be proper web IDL interfaces. See DOM event handlers (en-US) for details.

`GlobalEventHandlers.onabort`

An event handler property for abort events on the window.

`WindowEventHandlers.onbeforeunload` (en-US)

An event handler property for before-unload events on the window.

`GlobalEventHandlers.onblur`

An event handler property for blur events on the window.

`GlobalEventHandlers.onchange`

An event handler property for change events on the window.

`GlobalEventHandlers.onclick`

An event handler property for click events on the window.

`GlobalEventHandlers.onclose` (en-US)

An event handler property for handling the window close event.

`GlobalEventHandlers.oncontextmenu`

An event handler property for right-click events on the window.

`Window.ondevicelight`

An event handler property for any ambient light levels changes

`Window.ondevicemotion` (en-US)
{{todo("NeedsContents")}}
`Window.ondeviceorientation` (en-US)

An event handler property for any device orientation changes

`Window.ondeviceproximity`

An event handler property for device proximity event

`GlobalEventHandlers.onerror`

An event handler property for `error (en-US)` events raised on the window.

`GlobalEventHandlers.onfocus`

An event handler property for `focus (en-US)` events on the window.

`WindowEventHandlers.onhashchange`

An event handler property for hash change events on the window; called when the part of the URL after the hash mark ("#") changes.

`GlobalEventHandlers.onkeydown` (en-US)

An event handler property for `keydown (en-US)` events on the window.

`GlobalEventHandlers.onkeypress` (en-US)

An event handler property for `keypress (en-US)` events on the window.

`GlobalEventHandlers.onkeyup`

An event handler property for `keyup (en-US)` events on the window.

`WindowEventHandlers.onlanguagechange` (en-US)

An event handler property for `languagechange (en-US)` events on the window.

`GlobalEventHandlers.onload`

An event handler property for window loading.

`GlobalEventHandlers.onmousedown` (en-US)

An event handler property for mousedown events on the window.

`GlobalEventHandlers.onmousemove` (en-US)

An event handler property for mousemove events on the window.

`GlobalEventHandlers.onmouseout` (en-US)

An event handler property for mouseout events on the window.

`GlobalEventHandlers.onmouseover` (en-US)

An event handler property for mouseover events on the window.

`GlobalEventHandlers.onmouseup` (en-US)

An event handler property for mouseup events on the window.

`Window.onmozbeforepaint`

An event handler property for the `MozBeforePaint` event, which is sent before repainting the window if the event has been requested by a call to the `Window.mozRequestAnimationFrame()` (en-US) method.

`WindowEventHandlers.onpageshow`

An event handler property for pageshow events on the window.

`WindowEventHandlers.onpagehide`

An event handler property for pagehide events on the window.

`Window.onpaint`

An event handler property for paint events on the window.

`WindowEventHandlers.onpopstate`

An event handler property for popstate events, which are fired when navigating to a session history entry representing a state object.

`GlobalEventHandlers.onreset` (en-US)

An event handler property for reset events on the window.

`GlobalEventHandlers.onresize` (en-US)

An event handler property for window resizing.

`GlobalEventHandlers.onscroll`

An event handler property for window scrolling.

`GlobalEventHandlers.onselect` (en-US)

An event handler property for window selection.

`GlobalEventHandlers.onsubmit` (en-US)

An event handler property for submits on window forms.

`Window.onunload` (en-US)

An event handler property for unload events on the window.

`Window.onuserproximity`

An event handler property for user proximity events

Constructors
------------

See also the DOM Interfaces (en-US).

`Window.DOMParser`
{{todo("NeedsContents")}}
`Window.GeckoActiveXObject`
{{todo("NeedsContents")}}
`Image` (en-US)

Used for creating an `HTMLImageElement` (en-US).

`Option` (en-US)

Used for creating an `HTMLOptionElement` (en-US)

`Window.QueryInterface`
{{todo("NeedsContents")}}
`Window.XMLSerializer`
{{todo("NeedsContents")}}
`Worker`

Used for creating a Web worker (en-US)

`Window.XPCNativeWrapper`
{{todo("NeedsContents")}}
`Window.XPCSafeJSObjectWrapper`
{{todo("NeedsContents")}}
Interfaces
----------

See DOM Reference (en-US)

See also
--------

* Working with windows in chrome code


ANGLE_instanced_arrays - APIs da Web

ANGLE\_instanced\_arrays
========================

A extenção **`ANGLE_instanced_arrays`** é parte do WebGL API e permite desenhar o mesmo objeto, ou grupos de objectos semelhantes várias vezes, se eles compartilham os mesmos dados de vértice, contagem primitiva e tipo.

As extensões WebGL estão disponíveis usando o método `WebGLRenderingContext.getExtension()` (en-US). Para mais informações, veja também Usando Extenções (en-US) no WebGL tutorial (en-US).

**Nota:** **Disponibilidade:** Esta extenção só está disponível para contextos WebGL1 (en-US). Em WebGL2 (en-US), a funcionalidade desta extenção está disponível no contexto WebGL2 por padrão e as constantes e métodos estao disponíveis sem o sufixo "`ANGLE`".

Apesar do nome "ANGLE", esta extenção funciona em qualquer dispositivo se o hardware oferece suporte a ele e não apenas no Windows ao usar a biblioteca ANGLE. "ANGLE" apenas indica que essa extencão foi escrita pelos autores da biblioteca ANGLE.

Constantes
----------

Essa extensão expõe uma nova constante, que pode ser usada no método `gl.getVertexAttrib()` (en-US):

`ext.VERTEX_ATTRIB_ARRAY_DIVISOR_ANGLE`

Retorna um `GLint` (en-US) descrevendo o divisor de frequência usado para renderização instanciada quando usado no `gl.getVertexAttrib()` (en-US) como parâmetro `pname`.

Métodos
-------

Essa extensão expõe três novos métodos.

`ext.drawArraysInstancedANGLE()` (en-US)

Se comporta de forma idêntica a `gl.drawArrays()` (en-US) exceto que múltiplo instâncias do intervalo de elementos são executadas e a instância avança para cada iteração.

`ext.drawElementsInstancedANGLE()` (en-US)

Comporta-se de forma idêntica para o `gl.drawElements()` (en-US) exceto que várias instâncias do conjunto de elementos são executadas e a instância avança entre cada conjunto.

`ext.vertexAttribDivisorANGLE()` (en-US)

Modifica a taxa na qual os atributos de vértice genéricos avançam ao renderizar várias instâncias de primitivos com `ext.drawArraysInstancedANGLE()` (en-US) e `ext.drawElementsInstancedANGLE()` (en-US).

Exemplos
--------

Habilitando a extenção:

```js
var ext = gl.getExtension("ANGLE\_instanced\_arrays");
```

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

| Specification |
| --- |
| WebGL ANGLE\_instanced\_arrays Khronos Ratified Extension Specification  |

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

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

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

* `WebGLRenderingContext.getExtension()` (en-US)
* `WebGL2RenderingContext.drawArraysInstanced()` (en-US)
* `WebGL2RenderingContext.drawElementsInstanced()` (en-US)
* `WebGL2RenderingContext.vertexAttribDivisor()` (en-US)


Blob - APIs da Web

Blob
====

Sumário
-------

Um objeto `Blob` representa um objeto do tipo arquivo, com dados brutos imutáveis. Blobs representam dados que não estão necessariamente em um formato JavaScript nativo. A interface `File` é baseada no `Blob`, herdando funcionalidade blob e expandindo-o para suportar arquivos no sistema do usuário.

Para construir um `Blob` a partir de outro objeto ou dado não-blob , utilize o construtor `Blob()`. Para criar um blob que contém um subconjunto de dados de outro blob, use o método `slice()`. Para obter um objeto Blob de um arquivo no sistema de arquivos do usuário, veja a documentação `File`.

As APIs que aceitam objetos `Blob` também são listados na documentação `File`.

**Nota:** O método `slice()` usava inicialmente `length` como segundo argumento para indicar o numero de bytes a copiar no novo `Blob`. Se você especificou valores de maneira que `start + length` excederam o tamanho do `Blob` de origem, o `Blob` retornado contém dados a partir do início do índice até o final do `Blob` de origem.

**Nota:** Esteja ciente que o método `slice()` possui prefixos de fornecedores em alguns navegadores e versões: `blob.mozSlice()` para Firefox 12 e anteriores, e `blob.webkitSlice()` para Safari. Uma versão antiga do método `slice()`, sem prefixos de fornecedor, tem semântica diferente, e portanto é obsoleta. O suporta para `blob.mozSlice()` foi descontinuado a partir do Firefox 30.

Construtor
----------

`Blob(blobParts[, opções])`

Retorna um novo `Blob` object cujo conteúdo consiste na concatenação do array de valores passados por parâmentro.

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

`Blob.size` Somente leitura

Tamanho em bytes dos dados contidos no objeto `Blob`.

`Blob.type` Somente leitura

Uma string que indica o MIME type dos dados no `Blob`. Se o tipo é desconhecido, então retorna uma string vazia.

Métodos
-------

`Blob.slice([start[, end[, contentType]]])`

Retorna um novo `Blob` object contendo dados em no intervalo de bytes especificado do `Blob` de origem.

Exemplos
--------

### Exemplos de uso do construtor Blob

O código a seguir:

```js
var aFileParts = ['<a id="a"><b id="b">hey!</b></a>'];
var oMyBlob = new Blob(aFileParts, { type: "text/html" }); // o blob
```

equivale a:

```js
var oBuilder = new BlobBuilder();
var aFileParts = ['<a id="a"><b id="b">hey!</b></a>'];
oBuilder.append(aFileParts[0]);
var oMyBlob = oBuilder.getBlob("text/xml"); // o blob
```

**Aviso:** O `BlobBuilder` (en-US) oferece outra maneira para criar Blobs, mas é depreciado e não deveria mais ser usado.

### Exemplo para criar uma URL para uma array tipada usando blob

O código a seguir:

```js
var typedArray = GetTheTypedArraySomehow();
var blob = new Blob([typedArray], { type: "application/octet-binary" }); // passe um MIME-type útil aqui
var url = URL.createObjectURL(blob);
// url será algo do tipo: blob:d3958f5c-0777-0845-9dcf-2cb28783acaf
// agora você pode usar a URL em qualquer contexto em que URLs regulares podem ser usadas, por exemplo: img.src, etc.
```

### Exemplo de Extração de Dados de Um Blob

O único jeito de ler o conteúdo de um Blob é usando `FileReader`. O código a seguir lê o conteudo de um Blob como um Array.

```js
var reader = new FileReader();
reader.addEventListener("loadend", function () {
  // reader.result contém o conteúdo do blob como uma array tipada
});
reader.readAsArrayBuffer(blob);
```

Ao usar outros métodos de `FileReader`, é possível ler o conteúdo de um Blob como uma string ou como uma data URL.

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

| Specification |
| --- |
| File API # blob-section |

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

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

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

* `BlobBuilder` (en-US)
* `File`


Gamepad API - APIs da Web

Gamepad API
===========

A **Gamepad API** é uma maneira dos desenvolvedores acessarem e responderem à sinais oriundos de gamepads e outros controladores de games de forma simples e consistente. A API contém três interfaces, dois eventos e uma função especialista, para responder aos gamepads sendo conectados e desconectados, e acessar outras informações sobre o próprio gamepad, e quais botões e outros controles estão sendo de fato passados.

Interfaces
----------

`Gamepad` (en-US)

Representa o gamepad/controlador conectado ao computador.

`GamepadButton` (en-US)

Representa um botão num dos controles conectados.

`GamepadEvent` (en-US)

O objeto de evento representando eventos disparados que são relacionados ao gamepad.

### Experimental Gamepad extensions

`GamepadHapticActuator` (en-US)

Representa o hardware no controlador designado à prover feedbacks táteis ao usuário (Se disponível), mais comumente um hardware de vibração.

`GamepadPose` (en-US)

Representa a "localização" de um controle (ex. posição e orientação no espaço 3D) no caso de um controlador WebVR.

Veja também as extensões para a interface de Gamepad (en-US), para funcionalidades que permitem você acessar as informações acima.

### Extensions to other interfaces

#### Navigator

`Navigator.getGamepads()` (en-US)

Uma extensão para o objeto `Navigator` (en-US) que retorna um array de objetos `Gamepad` (en-US), um para cada controlador conectado.

#### Window events

`Window.ongamepadconnected` (en-US)

Representa um controlador de evento que irá rodar quando o gamepad é conectado (quando o evento `gamepadconnected (en-US)` for disparado).

`Window.ongamepaddisconnected` (en-US)

Representa um controlador de evento que irá rodar quando o gamepad é desconectado (quando o evento `gamepaddisconnected (en-US)` for disparado).

Guias e tutorias
----------------

* Using the Gamepad API (en-US)
* Implementing controls using the Gamepad API (en-US)
Especificações
--------------

| Specification |
| --- |
| Gamepad # gamepad-interface |
| Gamepad Extensions # partial-gamepad-interface |

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

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

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

* The Gamepad API por Ted Mielczarek and Robert Nyman
* Simple API demo page (source)


Position - APIs da Web

Position
========

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

A interface **`Position`** representa a posição do dispositivo em questão em um dado momento. A posição, representada por um objeto `Coordinates`, compreende a posição 2D do dispositivo, em um esferóide representando a Terra, e também inclui sua altitude e velocidade.

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

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

`Position.coords` Somente leitura  Secure context

Retorna um objeto `Coordinates` definindo a localização atual.

`Position.timestamp` (en-US) Somente leitura  Secure context

Retorna um `DOMTimeStamp` (en-US) representando o momento em que a localização foi detectada.

Métodos
-------

**A inteface `Position` não implementa ou herda nenhum método*.*\*\*

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

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

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

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

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

* Usando geolocalização (en-US)
* A interface `Geolocation` que usa isto


BroadcastChannel - APIs da Web

BroadcastChannel
================

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

Newly availableSince March 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
A interface **`BroadcastChannel`** representa um canal com um nome em que qualquer browsing context (en-US) (contexto de navegação) de uma determinada origin (origem) pode assinar. Permite a comunicação entre diferentes documentos (em diferentes janelas, abas, frames ou iframes) da mesma *origin*. As mensagens são transmitidas através de um evento `message` acionado em todos objetos do tipo `BroadcastChannel` que estão ouvindo o canal.

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

Construtor
----------

`BroadcastChannel()` (en-US)

Cria um objeto, no qual faz o vínculo com um canal nomeado.

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

*Essa interface também herda propriedades de seu pai, `EventTarget`.*

`BroadcastChannel.name` (en-US)

Retorna um `DOMString`, o nome do canal.

### Event handlers

`BroadcastChannel.onmessage` (en-US)

Uma propriedade `event handler` que específica a função a ser executada quando um evento `message` é acionado a este objeto.

`BroadcastChannel.onmessageerror` (en-US)

Uma chamada `event handler` quando um `MessageEvent` (en-US) do tipo `MessageError` é disparado - isto é, quando recebe uma mensagem que não pode ser desserializada.

Métodos
-------

*Essa interface também herda métodos de seu pai, `EventTarget`.*

`BroadcastChannel.postMessage()` (en-US)

Envia a mensagem, de qualquer tipo de objeto, para cada objeto `BroadcastChannel` ouvindo o mesmo canal.

`BroadcastChannel.close()` (en-US)

Fecha o objeto do canal, indicando que ele não receberá novas mensagens e eventualmente será descartado.

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

| Specification |
| --- |
| HTML Standard # broadcasting-to-other-browsing-contexts |

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

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

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

* Outra forma mais pesada de comunicação entre *browser contexts*: `ServiceWorker` (en-US).
* Visão geral de Broadcast Channel API (en-US)


CharacterData - APIs da Web

CharacterData
=============

A interface abstrata **CharacterData** representa um objeto `Node` que contém caracteres. Esta é uma interface abstrata, o que significa que não há nenhum objeto do tipo `CharacterData`: ela é implementada por outras interfaces, como `Text` (en-US), `Comment` (en-US) ou `ProcessingInstruction`, que não são abstratas.

EventTarget

Node

CharacterDataPropriedades
------------

*Herda propriedades de seu pai, `Node`, e implementa as interfaces `ChildNode` e `NonDocumentTypeChildNode` (en-US).*

`CharacterData.data` (en-US)

É um `DOMString` representando os dados textuais contidos neste objeto.

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

Retorna um `unsigned long` representando o tamanho da string contida em `CharacterData.data`.

`NonDocumentTypeChildNode.nextElementSibling` (en-US) Somente leitura

Returns the `Element` immediately following the specified one in its parent's children list, or `null` if the specified element is the last one in the list.

`NonDocumentTypeChildNode.previousElementSibling` (en-US) Somente leitura

Returns the `Element` immediately prior to the specified one in its parent's children list, or `null` if the specified element is the first one in the list.

Methods
-------

*Inherits methods from its parent, `Node`, and implements the `ChildNode` and `NonDocumentTypeChildNode` (en-US)* interface.

`CharacterData.appendData()` (en-US)

Appends the given `DOMString` to the `CharacterData.data` string; when this method returns, `data` contains the concatenated `DOMString`.

`CharacterData.deleteData()` (en-US)

Removes the specified amount of characters, starting at the specified offset, from the `CharacterData.data` string; when this method returns, `data` contains the shortened `DOMString`.

`CharacterData.insertData()` (en-US)

Inserts the specified characters, at the specified offset, in the `CharacterData.data` string; when this method returns, `data` contains the modified `DOMString`.

`ChildNode.remove()` (en-US)
Experimental

Removes the object from its parent children list.

`CharacterData.replaceData()` (en-US)

Replaces the specified amount of characters, starting at the specified offset, with the specified `DOMString`; when this method returns, `data` contains the modified `DOMString`.

`CharacterData.substringData()` (en-US)

Returns a `DOMString` containing the part of `CharacterData.data` of the specified length and starting at the specified offset.

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

| Specification |
| --- |
| DOM Standard # interface-characterdata |

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

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

See also
--------

* The DOM interfaces index (en-US).


IDBFactory - APIs da Web

IDBFactory
==========

A interface IDBFactory, pertencente a IndexedDB API , permite que aplicativos acessem de forma assíncrona os bancos de dados indexados. O objeto que implementa a interface é o window.indexedDB, com este objeto é possível criar, acessar, modificar e excluir informações de um banco de dados.

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

Métodos
-------

`IDBFactory.open` (en-US)

Realizar a abertura de uma conexão com uma base de dados.

`IDBFactory.deleteDatabase` (en-US)

Remove uma base de dados.

`IDBFactory.cmp` (en-US)

Compara dois valores chaves e determina se elas são iguais e se não, quem é a maior.

### Métodos Obsoletos

`IDBFactory.open` (en-US), a versão original

Este método realizava conexão com uma base de dados, ele ainda é usado em alguns navegadores.

Exemplo
-------

No código abaixo, realizamos uma conexão com um banco de dados e incluímos manipuladores para os casos de sucesso e erro. Você pode obter o To-do Notifications app como exemplo (Visualizar exemplo.)

```js
var note = document.querySelector("ul");

// In the following line, you should include the prefixes of implementations you want to test.
window.indexedDB =
  window.indexedDB ||
  window.mozIndexedDB ||
  window.webkitIndexedDB ||
  window.msIndexedDB;
// DON'T use "var indexedDB = ..." if you're not in a function.
// Moreover, you may need references to some window.IDB\* objects:
window.IDBTransaction =
  window.IDBTransaction ||
  window.webkitIDBTransaction ||
  window.msIDBTransaction;
window.IDBKeyRange =
  window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
// (Mozilla has never prefixed these objects, so we don't need window.mozIDB\*)

// Let us open version 4 of our database
var DBOpenRequest = window.indexedDB.open("toDoList", 4);

// these two event handlers act on the database being opened successfully, or not
DBOpenRequest.onerror = function (event) {
  note.innerHTML += "<li>Error loading database.</li>";
};

DBOpenRequest.onsuccess = function (event) {
  note.innerHTML += "<li>Database initialised.</li>";

  // store the result of opening the database in the db variable. This is used a lot later on, for opening transactions and suchlike.
  db = DBOpenRequest.result;
};
```

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

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

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

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

See also
--------

* Usando IndexedDB
* Inicializando uma Transaction: `IDBDatabase` (en-US)
* Usando uma Transaction: `IDBTransaction` (en-US)
* Configurando um Intervalo de chaves: `IDBKeyRange` (en-US)
* Recuperando e modificando dados: `IDBObjectStore` (en-US)
* Usando cursors: `IDBCursor`
* Exemplo de referência: To-do Notifications (Visualizar exemplo.)


API de Dispositivos de Saída de Áudio - APIs da Web

API de Dispositivos de Saída de Áudio
=====================================

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

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

A **API de Dispositivos de Saída de Áudio** permite que aplicações web solicitem aos usuários qual dispositivo de saída deve ser usado para a reprodução de áudio.

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

 Sistemas operacionais comumente permitem que os usuários especifiquem se o áudio deve ser reproduzido nos alto-falantes, em um fone de ouvido Bluetooth ou em algum outro dispositivo de saída de áudio.
 Esta API permite que as aplicações ofereçam essa mesma funcionalidade a partir de uma página web.

Mesmo se permitido por uma política de permissões, o acesso a um dispositivo de saída de áudio específico ainda requer permissão explícita do usuário, pois o usuário pode estar em um local onde a reprodução de áudio através de alguns dispositivos de saída não seja apropriada.

 A API fornece o método `MediaDevices.selectAudioOutput()` (en-US) que permite aos usuários selecionar sua saída de áudio desejada dentre aquelas permitidas pela diretiva `speaker-selection` (en-US) do cabeçalho HTTP `Permissions-Policy` do documento.
 O dispositivo selecionado recebe, então, permissão do usuário, permitindo que ele seja enumerado com `MediaDevices.enumerateDevices()` (en-US) e definido como dispositivo de saída de áudio usando `HTMLMediaElement.setSinkId()` (en-US).

 Dispositivos de áudio podem se conectar e desconectar arbitrariamente. Aplicações que desejam reagir a esse tipo de mudança podem ouvir o evento `devicechange` event (en-US) e usar `enumerateDevices()` (en-US) para determinar se `sinkId` está presente nos dispositivos retornados.
 Isso pode iniciar, por exemplo, a pausa ou retomada da reprodução.

Interfaces
----------

### Extensões para interfaces

A API de Dispositivos de Saída de Áudio estende as seguintes APIs, adicionando as funcionalidades listadas:

#### MediaDevices

`MediaDevices.selectAudioOutput()` (en-US)

 Este método solicita ao usuário a seleção de um dispositivo de saída de áudio específico, como um alto-falante ou fone de ouvido.
 Selecionar um dispositivo concede permissão do usuário para usá-lo e retorna informações sobre o dispositivo, incluindo seu ID.

#### HTMLMediaElement

`HTMLMediaElement.setSinkId()` (en-US)

Este método define o ID do dispositivo de áudio a ser usado para saída, que será usado se permitido.

`HTMLMediaElement.sinkId` (en-US)

Esta propriedade retorna o ID único do dispositivo de áudio em uso, ou uma string vazia se o dispositivo padrão do agente do usuário estiver sendo usado.

Requisitos de segurança
-----------------------

O acesso à API está sujeito às seguintes restrições:

* Todos os métodos e propriedades só podem ser chamados em um contexto seguro (en-US).
* `MediaDevices.selectAudioOutput()` (en-US) concede permissão do usuário para um dispositivo selecionado ser usado como o dispositivo de saída de áudio:
    + O acesso pode ser controlado pela política de permissões HTTP `speaker-selection` (en-US).
    + Ativação de usuário transitória (en-US) é necessária.
     O usuário deve interagir com a página ou um elemento de interface do usuário para que o método seja chamado.
* `HTMLMediaElement.setSinkId()` (en-US) define um ID permitido como saída de áudio:
    + O acesso pode ser controlado pela política de permissões HTTP `speaker-selection` (en-US).
    + É necessária a permissão do usuário para definir um ID de dispositivo não padrão.
        - Isso pode vir da seleção na janela de diálogo lançada por `MediaDevices.selectAudioOutput()`
        - A permissão do usuário para definir o dispositivo de saída é concedida implicitamente se o usuário já concedeu permissão para usar um dispositivo de entrada de mídia no mesmo grupo com `MediaDevices.getUserMedia()` (en-US).

O status da permissão pode ser consultado usando o método Permissions API (en-US) `navigator.permissions.query()` (en-US), passando um descritor de permissão com a permissão `speaker-selection`.

Exemplos
--------

Aqui está um exemplo de uso de `selectAudioOutput()`, dentro de uma função que é acionada por um clique em um botão, e em seguida definindo o dispositivo selecionado como saída de áudio.

 O código primeiro verifica se `selectAudioOutput()` é suportado e, se for o caso, o utiliza para selecionar uma saída e retornar um ID do dispositivo (en-US).
 Em seguida, reproduzimos algum áudio usando a saída padrão e, em seguida, chamamos `setSinkId()` para alternar para o dispositivo de saída selecionado.

```js
document.querySelector("#meuBotao").addEventListener("click", async () => {
  if (!navigator.mediaDevices.selectAudioOutput) {
    console.log(
      "selectAudioOutput() não suportado ou não está em contexto seguro.",
    );
    return;
  }

  // Exibe janela de seleção do dispositivo
  const dispositivoDeAudio = await navigator.mediaDevices.selectAudioOutput();

  // Cria um elemento de áudio e inicia a reprodução de áudio no dispositivo padrão
  const audio = document.createElement("audio");
  audio.src = "https://example.com/audio.mp3";
  audio.play();

  // Altera a saída para o dispositivo de áudio selecionado.
  audio.setSinkId(dispositivoDeAudio.deviceId);
});
```

Observe que se você registrar os detalhes de saída, eles podem se parecer com isso:

```js
console.log(
  `${dispositivoDeAudio.kind}: ${dispositivoDeAudio.label} id = ${dispositivoDeAudio.deviceId}`,
);
// saída de áudio: Saída Digital Realtek (Áudio Realtek(R)) id = 0wE6fURSZ20H0N2NbxqgowQJLWbwo+5ablCVVJwRM3k=
```

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

| Specification |
| --- |
| Audio Output Devices API  |

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

### api.MediaDevices.selectAudioOutput

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

### api.HTMLMediaElement.setSinkId

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

### api.HTMLMediaElement.sinkId

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

### http.headers.Permissions-Policy.speaker-selection

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


BatteryManager - APIs da Web

BatteryManager
==============

Resumo
------

A interface `BatteryManager` fornece maneiras de obter informações sobre o nível de carga da bateria do sistema.

A propriedade `navigator.battery` retorna uma instância da interface `BatteryManager` que você pode utilizar para interajir com a API de status da bateria.

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

`BatteryManager.charging` Somente leitura

Um valor Booleano que indica se a bateria está sendo carregada no momento.

`BatteryManager.chargingTime` Somente leitura

Um número representando o tempo restante em segundos até a bateria estar completamente carregada, ou 0 se a carga já estiver completa.

`BatteryManager.dischargingTime` Somente leitura

Um número representando o tempo restante em segundos até a bateria estar completamente descarregada e o sistema ser suspenso.

`BatteryManager.level` Somente leitura

Um número representando o nível de carga da bateria do sistema em uma escala de valores entre 0.0 e 1.0.

### Eventos

`BatteryManager.onchargingchange`

Tratamento para o evento `chargingchange`; Esse evento é enviado quando o status de carregamento da bateria é atualizado.

`BatteryManager.onchargingtimechange`

Tratamento para o evento `chargingtimechange`; Esse evento é enviado quando o tempo de carregamento da bateria é atualizado.

`BatteryManager.ondischargingtimechange`

Tratamento para o evento `dischargingtimechange`; Esse evento é enviado quando o tempo de descarregamento da bateria é atualizado.

`BatteryManager.onlevelchange`

Tratamento para o evento `levelchange`; Esse evento é enviado quando a nível da bateria é atualizado.

Métodos
-------

Herdado de `EventTarget`:

`EventTarget.addEventListener()`

Registra um tratamento para um tipo específico de evento sobre o `EventTarget`.

`EventTarget.removeEventListener()`

Remove um *event listener* do `EventTarget`.

`EventTarget.dispatchEvent()`

Dispatch an event to this `EventTarget`.

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

| Specification |
| --- |
| Battery Status API # the-batterymanager-interface |

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

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

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

* `navigator.battery`
* A Battery Status API


AudioContext - APIs da Web

AudioContext
============

A interface `AudioContext` representa um grafo de processamento de áudio construído a partir de nós de áudio conectados, cada um representado por um `AudioNode` Um contexto de áudio controla a criação dos nós que contém e a execução do processamento de áudio, ou decodificação. Você precisa criar um AudioContext antes de fazer qualquer outra coisa, pois tudo acontece dentro de um contexto.

Um `AudioContext`pode ser um alvo de eventos, portanto, ele implementa a interface `EventTarget`.

Construtor
----------

`AudioContext()` (en-US)

Cria e retorna um novo objeto `AudioContext`.

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

`AudioContext.currentTime` Somente leitura

Retorna um double representando um tempo cada vez maior de hardware em segundos usados para agendamento. Começa em `0`.

`AudioContext.destination` (en-US) Somente leitura

Retorna um `AudioDestinationNode` (en-US) representando o destino final de todo o áudio no contexto. Pode ser pensado como o dispositivo de renderização de áudio.

`AudioContext.listener` (en-US) Somente leitura

Retorna o objeto `AudioListener` (en-US), usado para especialização 3D

`AudioContext.sampleRate` (en-US) Somente leitura

Retorna um float representando a taxa de amostragem (em amostras por segundo) usado por todos os nós neste contexto. A taxa de amostragem de um `AudioContext` não pode ser alterada.

`AudioContext.state` (en-US) Somente leitura

Retorna o estado atual do `AudioContext`.

`AudioContext.mozAudioChannelType`
Non-standard
 Somente leitura

Usado para retornar o canal de áudio que o som toca em um `AudioContext` irá tocar em um dispositivo do Firefox OS.

### Manipuladores de eventos

`AudioContext.onstatechange` (en-US)

Um manipulador de evento que é executado quando um evento do tipo `statechange (en-US)` dispara.

Isso ocorre quando o estado `AudioContext` muda, devido ao chamado de um dos métodos de mudança de estado (`AudioContext.suspend` (en-US), `AudioContext.resume` (en-US), or `AudioContext.close` (en-US)).

Métodos
-------

*Também implementa métodos a partir da interface* `EventTarget`.

`AudioContext.close()` (en-US)

Fecha o contexto de áudio, liberando todos os recursos de áudio do sistema que ele usa.

`AudioContext.createBuffer()` (en-US)

Cria um novo, objeto `AudioBuffer` (en-US) vázio, que pode ser preenchido por dados e reproduzido através de um `AudioBufferSourceNode` (en-US).

`AudioContext.createBufferSource()` (en-US)

Cria um `AudioBufferSourceNode` (en-US), que pode ser usado para reproduzir e manipular dados de audio contidos dentro de um objeto `AudioBuffer` (en-US). `AudioBuffer` (en-US) são criados usando `AudioContext.createBuffer` (en-US) ou retornado por `AudioContext.decodeAudioData` (en-US) quando decodifica com sucesso uma faixa de áudio.

`AudioContext.createMediaElementSource()` (en-US)

Cria um `MediaElementAudioSourceNode` (en-US) associado com um `HTMLMediaElement` (en-US). Isso pode ser usado para reproduzir e manipular o audio This can be used to play and manipulate audio dos elementos `<video>` ou `<audio>`.

`AudioContext.createMediaStreamSource()` (en-US)

Cria um `MediaStreamAudioSourceNode` (en-US) associado com um `MediaStream` (en-US) um fluxo (stream) de áudio que pode vir do microfone local do computador ou de outras fontes.

`AudioContext.createMediaStreamDestination()` (en-US)

Cria um `MediaStreamAudioDestinationNode` (en-US) associado com um `MediaStream` (en-US) representando um fluxo (stream) de audio que pode ser armazenado em um arquivo local ou enviados para outro computador.

`AudioContext.createScriptProcessor()` (en-US)

Cria um a `ScriptProcessorNode` (en-US), que pode ser usado para processamento de áudio direto via JavaScript.

`AudioContext.createStereoPanner()` (en-US)

Cria um `StereoPannerNode` (en-US), que pode ser usado para aplicar uma panorâmica estéreo para uma fonte de áudio.

`AudioContext.createAnalyser()` (en-US)

Creates an `AnalyserNode` (en-US), which can be used to expose audio time and frequency data and for example to create data visualisations.

`AudioContext.createBiquadFilter()` (en-US)

Cria um `BiquadFilterNode`, que representa um filtro de segunda ordem configurável como vários tipos de filtros comuns diferentes: high-pass, low-pass, band-pass, etc.

`AudioContext.createChannelMerger()` (en-US)

Cria um `ChannelMergerNode` (en-US), que é usado para combinar canais de múltiplos fluxos de áudio em um único fluxo de áudio.

`AudioContext.createChannelSplitter()` (en-US)

Cria um `ChannelSplitterNode` (en-US), que é usado para acessar os canais individuais de um fluxo de áudio e processá-los separadamente.

`AudioContext.createConvolver()` (en-US)

Cria um `ConvolverNode` (en-US), que pode ser usado para aplicar efeitos de convolução ao seu gráfico de áudio, por exemplo, um efeito de reverberação.

`AudioContext.createDelay()` (en-US)

Cria um `DelayNode` (en-US), que é usado para atrasar o sinal de áudio recebido por uma certa quantia. Este nó também é útil para criar loops de feedback em um gráfico de API de Web Audio.

`AudioContext.createDynamicsCompressor()` (en-US)

Cria um `DynamicsCompressorNode` (en-US), que pode ser usada para aplicar compressão acústica para um sínal de áudio.

`AudioContext.createGain()` (en-US)

Cria um `GainNode` (en-US), que pode ser usado para controlar o volume total do gráfico de áudio.

`AudioContext.createIIRFilter()` (en-US)

Cria um `IIRFilterNode` (en-US), que representa um filtro de segunda ordem configurável como vários tipos de filtros comuns diferentes.

`AudioContext.createOscillator()` (en-US)

Cria um `OscillatorNode` (en-US), uma fonte que representa uma forma de onda periódica. Isso basicamente gera um tom.

`AudioContext.createPanner()` (en-US)

Cria um `PannerNode` (en-US), que é usado para spatializar um fluxo de áudio recebido no espaço 3D.

`AudioContext.createPeriodicWave()` (en-US)

Cria um `PeriodicWave` (en-US), usado para definir uma forma de onda periódica que pode ser usada para determinar a saída de um `OscillatorNode` (en-US).

`AudioContext.createWaveShaper()` (en-US)

Cria um `WaveShaperNode` (en-US), que é usado para implementar efeitos de distorção não-lineares.

`AudioContext.createAudioWorker()`

Cria um `AudioWorkerNode`, que pode interagir com um segmento de trabalho da Web para gerar, processar ou analisar o áudio diretamente. Isso foi adicionado à especificação em 29 de agosto de 2014, e ainda não foi implementado em nenhum navegador.

`AudioContext.decodeAudioData()` (en-US)

Decodifica assincronamente dados de arquivos de áudio contidos em `ArrayBuffer`. Nesse caso, o ArrayBuffer geralmente é carregado a partir de um atributo de `resposta` `XMLHttpRequest`'s definir o `responseType` para `arraybuffer`. Esse método funciona apenas em arquivos completos, não fragmentos de arquivos de áudio.

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

Retoma a progressão do tempo em um contexto de áudio que anteriormente foi suspenso.

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

Suspende a progressão do tempo no contexto de áudio, interrompendo temporariamente o acesso ao hardware de áudio e reduzindo o uso da CPU / bateria no processo.

Métodos obsoletos
-----------------

`AudioContext.createJavaScriptNode()` (en-US)

Cria um `JavaScriptNode`, usado para para processamento de áudio direto via JavaScript. Este método é obsoleto e foi substituído por `AudioContext.createScriptProcessor()` (en-US).

`AudioContext.createWaveTable()` (en-US)

Cria um `WaveTableNode`, usado para definir uma forma de onda periódica. Este método é obsoleto e foi substituído por `AudioContext.createPeriodicWave ()`.

Exemplos
--------

Declaração básica de contexto de áudio:

```js
var audioCtx = new AudioContext();
```

Cruzar a variante do navegador:

```js
var AudioContext = window.AudioContext || window.webkitAudioContext;
var audioCtx = new AudioContext();

var oscillatorNode = audioCtx.createOscillator();
var gainNode = audioCtx.createGain();
var finish = audioCtx.destination;
// etc.
```

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

| Specification |
| --- |
| Web Audio API # AudioContext |

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

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

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

* Usando a Web Audio API (en-US)
* `OfflineAudioContext`


AbortSignal - APIs da Web

AbortSignal
===========

**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 **`AbortSignal`** representa o sinal de um objeto que permite a você se comunicar com uma Requisição de DOM (como Fetch) e aborta-la se necessário via um objeto `AbortController` (en-US)

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

*A interface AbortSignal também herda propriedades de sua interface pai, `EventTarget`.*

`AbortSignal.aborted` Somente leitura

Um `Boolean` (en-US) que indica quando a(s) Request(s) com a qual o sinal está se comunicando está/estão abortadas(`true`) ou não(`false`).

### Handlers de Eventos

`AbortSignal.onabort` (en-US)

Invocado quando um `abort` evento dispara, ex: quando as requests do DOM que o sinal estão se comunicando são/estão abortadas.

Métodos
-------

*A interface AbortSignal também herda métodos de sua interface pai, `EventTarget`.*

Exemplos
--------

No exemplo de código a seguir, nós vamos focar em fazer download de um vídeo usando a Fetch API.

Nós primeiro criaremos um controller usando o construtor do `AbortController()` (en-US), e então pegar a referência de seu objeto `AbortSignal` associado usando a propriedade `AbortController.signal` (en-US).

Quando a requisição Fetch é iniciada, nós passamos o `AbortSignal` como uma opção dentro do objeto de opções da request (veja `{signal}`, abaixo). Isso associa o sinal e o controller com a requisição fetch e nos permite aborta-la chamando `AbortController.abort()` (en-US), como visto abaixo no segundo `event listener`.

```js
var controller = new AbortController();
var signal = controller.signal;

var downloadBtn = document.querySelector('.download');
var abortBtn = document.querySelector('.abort');

downloadBtn.addEventListener('click', fetchVideo);

abortBtn.addEventListener('click', function() {
  controller.abort();
  console.log('Download aborted');
});

function fetchVideo() {
  ...
  fetch(url, {signal}).then(function(response) {
    ...
  }).catch(function(e) {
    reports.textContent = 'Download error: ' + e.message;
  })
}
```

**Nota:** Quando `abort()` é chamado, a promessa do `fetch()` é rejeitada com um `AbortError`.

Você pode encontrar um exemplo completo no GitHub — veja abort-api (see it running live also).

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

| Specification |
| --- |
| DOM Standard # interface-AbortSignal |

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

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

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

* Fetch API
* Abortable Fetch by Jake Archibald


Path2D - APIs da Web

Path2D
======

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

A **`Path2D`** interface da API Canvas 2D é usada para declarar caminhos que são usados posteriormente em objetos `CanvasRenderingContext2D`. Os métodos de caminho da interface CanvasRenderingContext2D também estão presentes nessa interface e permitem criar caminhos que você pode reter e reproduzir conforme necessário em uma tela.

Construtores
------------

`Path2D()` (en-US)

`Path2D` construtor. Cria um novo objeto `Path2D`.

Metodos
-------

`Path2D.addPath()` (en-US)

Adiciona um caminho ao caminho atual.

`Path2D.closePath()`

Faz com que o ponto da caneta retorne ao início do sub-caminho atual. Ele tenta desenhar uma linha reta desde o ponto atual até o início. Se a forma já foi fechada ou tem apenas um ponto, essa função não faz nada.

`Path2D.moveTo()`

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

`Path2D.lineTo()`

Conecta o último ponto no subcaminho às coordenadas x, y com uma linha reta.

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

Adiciona uma curva cúbica de Bézier ao caminho. Requer três pontos. Os dois primeiros pontos são pontos de controle e o terceiro é o ponto final. O ponto de partida é o último ponto no caminho atual, que pode ser alterado usando moveTo () antes de criar a curva Bézier.

`Path2D.quadraticCurveTo()`

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

`Path2D.arc()`

Adiciona um arco ao caminho que é centralizado na posição (x, y) com raio r iniciando em startAngle e terminando em endAngle indo na direção dada no sentido anti-horário (padrão no sentido horário).

`Path2D.arcTo()`

Adiciona um arco ao caminho com os pontos de controle e raio dados, conectados ao ponto anterior por uma linha reta.

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

Adiciona uma elipse ao caminho que é centralizado na posição (x, y) com os raios radiusX e radiusY começando em startAngle e terminando em endAngle indo na direção determinada no sentido anti-horário (padrão no sentido horário).

`Path2D.rect()`

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

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

| Specification |
| --- |
| HTML Standard # path2d-objects |

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

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

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

* `CanvasRenderingContext2D`


Element - APIs da Web

Element
=======

A interface **`Element`** é a classe base mais geral da qual todos os objetos em um `Document` herda. Ela somente tem métodos e propriedades comuns para todos os tipos de elementos. Mais classes específicas herdam de `Element`. Por exemplo, a interface `HTMLElement` (en-US) é a interface base para elementos HTML, enquanto a interface `SVGElement` (en-US) é a base para todos os elementos SVG. A maioria das funcionalidades é especificada mais abaixo da hierarquia de classes.

Linguagens fora do domínio da plataforma da Web, como XUL através da interface `XULElement`, também implementa `Element`.

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

*Herda propriedades de seus parentes `Node`, e seu próprio parente, `EventTarget`, e implementa aqueles de `ParentNode`, `ChildNode`, `NonDocumentTypeChildNode` (en-US), e* `Animatable`.

`Element.attributes` Somente leitura

Retorna um `NamedNodeMap` (en-US) que lista todos os atributos associados ao elemento.

`ParentNode.childElementCount`

É um `Number` representando o número de nós filhos que são elementos.

`ParentNode.children` (en-US)

É um `HTMLCollection` ao vivo contendo todos os elementos filhos do elemento, como uma coleção.

`Element.classList` Somente leitura

Retorna um `DOMTokenList` (en-US) contendo a lista de atributos de classe.

`Element.className`

É um `DOMString` representando a classe do elemento.

`Element.clientHeight`
Experimental
 Somente leitura

Retorna um `Number` representando a altura interna do elemento.

`Element.clientLeft` (en-US)
Experimental
 Somente leitura

Retorna um `Number` representando a largura da borda do elemento..

`Element.clientTop` (en-US)
Experimental
 Somente leitura

Retorna um `Number` representando a largura da borda do topo do elemento.

`Element.clientWidth` (en-US)
Experimental
 Somente leitura

Retorna um `Number` representando a largura interna do elemento.

`ParentNode.firstElementChild` (en-US)

É um `Element`, o primeiro elemento filho direto de um elemento, ou `null` se o elemento não tem elementos filho.

`Element.id`

É um `DOMString` representando o id do elemento.

`Element.innerHTML`
Experimental

É um `DOMString` representando a marcação do conteúdo do elemento.

`ParentNode.lastElementChild` (en-US)

É um `Element`, o último elemento filho direto de um elemento, ou `null` se o elemento não tem elementos filho.

`NonDocumentTypeChildNode.nextElementSibling` (en-US)

É um `Element`, o elemento seguido imediatamente do dito na árvore, ou `null` se não há nó irmão.

`Element.outerHTML`
Experimental

É um `DOMString` representando a marcação do elemento incluindo seu conteúdo. Quando usado como um setter, substitui o elemento com nós analisados a partir de uma determinada string.

`NonDocumentTypeChildNode.previousElementSibling` (en-US)

É um `Element`, o elemento precedido imediatamente do dito na árvore, ou `nulo` se não há elemento irmão.

`Element.scrollHeight` (en-US)
Experimental
 Somente leitura

Retorna um `Number` representando a altura da vista de rolagem de um elemento.

`Element.scrollLeft`
Experimental

É um `Number` representando o deslocamento de rolagem esquerdo do elemento.

`Element.scrollLeftMax` (en-US)
Non-standard
 Somente leitura

Retorna um `Number` representando o deslocamento de rolagem esquerdo máximo possível para o elemento.

`Element.scrollTop`
Experimental

É um `Number` representando o deslocamento de rolagem superior de um elemento.

`Element.scrollTopMax` (en-US)
Non-standard
 Somente leitura

Retorna um `Number` representando o deslocamento de rolagem máximo superior possível para o elemento.

`Element.scrollWidth`
Experimental
 Somente leitura

Retorna um `Number` representando a largura de exibição de rolagem do elemento.

`Element.shadowRoot` (en-US)
Experimental
 Somente leitura

...

`Element.tagName` Somente leitura

Retorna um `String` com o nome da tag para o elemento em questão.

`Element.undoManager`
Experimental
 Somente leitura

Retorna o `UndoManager` associado com o elemento.

`Element.undoScope`
Experimental

É a `Boolean` indicando se o elemento é um anular hospedagem de escopo, ou não.

### Manipuladores de Eventos

`Element.ongotpointercapture` (en-US)

…

`Element.onlostpointercapture` (en-US)

…

`Element.onwheel` (en-US)
Non-standard

Retorna o código de manipulação de evento para o evento `wheel`.

Métodos
-------

*Herda métodos de seus parentes `Node`, e seu proprío parente, `EventTarget`, e implementa aqueles de `ParentNode`, `ChildNode`, `NonDocumentTypeChildNode` (en-US), e `Animatable`.*

`EventTarget.addEventListener()`

Registra um manipulador de evento para um tipo específico de evento no elemento.

`Element.closest()`
Experimental

Retorna o `Element`, descendente deste elemento(ou este elemento em si), que é o ancestral mais próximo dos elementos selecionados pelos seletores dados no parâmetro.

`Element.createShadowRoot()` (en-US)
Experimental

…

`EventTarget.dispatchEvent()`

Despacha um evento para este nó no DOM e retorna um `Boolean` que indica que pelo menos um manipulador não o cancelou.

`Element.find()`
Experimental

...

`Element.findAll()`
Experimental

...

`Animatable.getAnimationPlayers()`
Experimental

…

`Element.getAttribute()`

Recupera o valor do atributo nomeado do nó atual e o retorna como um `Object`.

`Element.getAttributeNS()` (en-US)

Recupera o valor do atributo com o nome especificado e namespace, do nó atual e o retorna como um `Object`.

`Element.getAttributeNode()` (en-US)

Recupera a representação do nó de um atributo nomeado do nó atual e o retorna como um `Attr`.

`Element.getAttributeNodeNS()` (en-US)

Recupera a representação de nó do atributo com o nome especificado e namespace, do nó atual e o retorna como um `Attr`.

`Element.getBoundingClientRect()`
Experimental

...

`Element.getClientRects()` (en-US)
Experimental
 TYPE of returnvalue????

Retorna uma coleção de retângulos que indicam os retângulos delimitadores para cada linha de texto em um cliente.

`Element.getDestinationInsertionPoints()`
Experimental

…

`Element.getElementsByClassName()`

Retorna um `HTMLCollection` vivo que contêm todos os descendentes do elemento atual que possui a lista de classes dadas no parâmetro.

`Element.getElementsByTagName()` (en-US)

Retorna um `HTMLCollection` vivo contendo todos os elementos descendentes, de uma etiqueta de nome particular, do elemento atual.

`Element.getElementsByTagNameNS()` (en-US)

Retorna um `HTMLCollection` vivo contendo todos os elementos descendentes, de uma etiqueta de nome particular e namespace, do elemento atual.

`Element.hasAttribute()` (en-US)

Retorna um `Boolean` indicando se o elemento tem o atributo especificado ou não.

`Element.hasAttributeNS()` (en-US)

Retorna um `Boolean` indicando se o elemento tem um atributo especificado, no namespace especificado, ou não.

`Element.insertAdjacentHTML`
Experimental

Analisa o texto como HTML ou XML e insere os nós resultantes na árvore em dada posição.

`Element.matches()`
Experimental

Retorna um `Boolean` indicando se o elemento seria ou não selecionado pelo seletor de string specificada.

`Element.querySelector()`

Retorna `Node`...

`Element.querySelectorAll`

Retorna um `NodeList`...

`Element.releasePointerCapture` (en-US)
Experimental

…

`ChildNode.remove()` (en-US)

Remove o elemento da lista de filhos de seu parente.

`Element.removeAttribute()`

Remove um atributo nomeado do nó atual.

`Element.removeAttributeNS()` (en-US)

Remove o atributo com o nome especificado ou namespace, do nó atual.

`Element.removeAttributeNode()` (en-US)

Remove a representação do nó do atributo nomeado do nó atual.

`EventTarget.removeEventListener()`

Remove um ouvinte de eventos do elemento.

`Element.requestFullscreen()` (en-US)
Experimental

Assíncronamente pede o navegador para fazer o elemento tela cheia.

`Element.requestPointerLock()` (en-US)
Experimental

Permite assíncronamente pedir pelo apontador para ser bloqueado em um dado elemento.

`Element.scrollIntoView()`
Experimental

Rola a página até que o elemento apareça na visão.

`Element.setAttribute()`

Define o valor de um atributo nomeado do nó atual.

`Element.setAttributeNS()`

Define o valor do atributo com o nome especificado e namespace, do nó atual.

`Element.setAttributeNode()` (en-US)

Define a representação do nó de um atributo nomeado do nó atual.

`Element.setAttributeNodeNS()` (en-US)

Define a representação do nó do atributo com o nome especificado e namespace, do nó atual.

`Element.setCapture()` (en-US)
Non-standard

Define a captura de evento do mouse, redirecionando todos os eventos de mouse para este elemento.

`Element.setPointerCapture()` (en-US)

…

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

| Specification |
| --- |
| DOM Standard # interface-element |
| Pointer Events # extensions-to-the-element-interface |
| Pointer Lock 2.0 # extensions-to-the-element-interface |
| Fullscreen API Standard # api |
| DOM Parsing and Serialization # extensions-to-the-element-interface |
| CSSOM View Module # extension-to-the-element-interface |

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

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


API de Armazenamento na Web - APIs da Web

API de Armazenamento na Web
===========================

A API de armazenamento na web (**Web Storage**) fornece mecanismos para que os navegadores possam armazenar dados através de chave/valor de uma forma mais eficiente que os cookies.

Armazenamento na Web conceitos e formas de uso
----------------------------------------------

A API de Web Storage fornece duas maneiras de armazenar dados:

* `sessionStorage` mantém as informações armazenadas por origem e permanece disponível enquanto há uma sessão aberta no navegador (mesmo a página sendo recarregada). Caso o browser seja fechado a sessão será limpa e as informações serão perdidas.
* `localStorage` mesmo que o navegador seja fechado, os dados permanecem armazenados.

Esses mecanismos estão disponíveis a partir das seguintes propriedades `Window.sessionStorage` e `Window.localStorage` (para um maior suporte, o objeto `Window` implementa os objetos `Window.LocalStorage` e `Window.SessionStorage`) — ao invocar uma dessas propriedades, é criada uma instância do objeto `Storage`, que fornece métodos para inserir, recuperar e remover os dados. Sempre será utilizado um objeto diferente para cada origem de `sessionStorage` e `localStorage, dessa forma o controle de ambos é realizado de forma separada.`

**Nota:** Nota: O acesso a API de Web storage a partir de IFrames de terceiros é negado se o usuário desabilitou cookies de terceiros (Firefox implementa esse comportamento a partir da versão 43 em diante).

**Nota:** Nota\*\*:\*\* Web Storage não é o mesmo que mozStorage (interface XPCOM da Mozilla para o SQLite) ou Session store API (uma forma de armazenamento XPCOM para uso de extensões).

Interfaces de Armazenamento na Web
----------------------------------

`Storage`

Permite que você insira, recupere e remova dados de um domínio no storage(session ou local).

`Window`

A API de Web Storage estende o objeto `Window` com duas novas propriedades — `Window.sessionStorage` e `Window.localStorage` — fornecendo acesso à sessão do domínio atual e local para o objeto `Storage` respectivamente.

`StorageEvent` (en-US)

Um evento de storage é chamado em um objeto window do documento quando ocorre uma mudança no storage.

Exemplos
--------

Para desmonstrar o uso de web storage, nós criamos um exemplo simples, chamado Web Storage Demo. A página da demo landing page oferece funcionalidades que permitem alterar a cor, fonte e imagem que é exibida na página. Quando você escolhe uma opção diferente, a página será atualizada imediatamente. Além disso, sua escolha foi armazenada em `localStorage`, para que quando você feche o navegador e abra novamente para acessar a página, suas escolhas sejam lembradas.

Nós também fornecemos um event output page — para quando você abrir a página em outra aba, as informações sejam atualizadas através da chamada de um `StorageEvent`.

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

| Specification |
| --- |
| HTML Standard # dom-localstorage-dev |
| HTML Standard # dom-sessionstorage-dev |

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

### api.Window.localStorage

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

### api.Window.sessionStorage

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

Navegação privada /modo de navegação anônima
--------------------------------------------

Boa parte dos navegadores atuais suportam a opção de privacidade chamada modo de "Navegação privada ou anônima", que basicamente torna a sessão de navegação privada e não deixa rastros depois que o navegador é fechado. Este modo é incompatível com armazenamento na Web por razões óbvias. Os fabricantes de navegadores estão experimentando com diferentes cenários como lidar com essa incompatibilidade.

A maioria dos navegadores optaram por uma estratégia onde as APIs de armazenamento ainda estão disponíveis e, aparentemente, funcional, com a grande diferença de que todos os dados armazenados é apagado depois que o navegador é fechado. Para estes navegadores ainda existem diferentes interpretações sobre o que deve ser feito com os dados existentes armazenados (a partir de uma sessão de navegação regular). E quanto a leitura dos dados se o navegador estiver no modo privado? Há alguns navegadores, principalmente Safari, que optaram por uma solução em que o armazenamento está disponível, mas está vazio e tem uma quota de 0 bytes atribuídos, tornando impossível o armazenamento de dados.

Os desenvolvedores devem estar cientes e considerar as diferentes formas de implementações ao desenvolverem sites dependendo das APIs Web Storage. Para mais informações, leia neste post escrito no blog do WHATWG que lida especificamente com este tópico.

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

Usando a API Web Storage


Web Components - APIs da Web

Web Components
==============

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
Web Components é uma suíte de diferentes tecnologias que permite a criação de elementos customizados reutilizáveis — com a funcionalidade separada do resto do seu código — e que podem ser utilizados em suas aplicações web.

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

Como desenvolvedores, sabemos que é uma boa ideia reutilizar o código o máximo que pudermos. Tradicionalmente, isso não tem sido fácil quando o assunto são estruturas de marcação customizadas — pense no complexo HTML (e estilo e script associados) que, às vezes, deve ser escrito para renderizar controles UI customizados e em como utilizá-los repetidas vezes pode tornar sua página uma bagunça se você não tomar cuidado.

Web Components buscam resolver esses problemas — são formados por três tecnologias principais, que podem ser usadas em conjunto para criar elementos customizados versáteis, com funcionalidade encapsulada, que podem ser reutilizados onde você quiser sem preocupação com conflito de código.

* **Elementos customizados**: Um conjunto de APIs JavaScript que permite definir elementos customizados e seus respectivos comportamentos, podendo ser utilizados de diferentes formas na interface da aplicação.
* **Shadow DOM**: Um conjunto de APIs JavaScript para incorporar uma árvore DOM "fantasma" encapsulada a um elemento — que é renderizada separadamente do DOM do documento principal — e controlar a funcionalidade associada. Nesse caso, você pode manter os recursos de um elemento privados, fazendo com que seu comportamento e estilo possam ser escritos sem medo de causar conflito com outras partes do documento.
* **Templates HTML**: Os elementos `<template>` e `<slot>` (en-US) permitem que você escreva templates de marcação que não são exibidas na página. Elas podem então ser reutilizadas várias vezes como modelo de estrutura de um elemento customizado.

A abordagem básica para se implementar um componente web geralmente se parece com isso:

1. Crie uma classe na qual você especifica a funcionalidade do seu componente web, usando a sintaxe de classe do ECMAScript 2015 (veja Classes para mais informações).
2. Registre seus elemento customizado através do método `CustomElementRegistry.define()`, passando o nome do elemento a ser definido, a classe ou função na qual sua funcionalidade foi especificada, e opcionalmente, de qual elemento ele herda suas propriedades.
3. Se necessário, incorpore um shadow DOM ao elemento customizado usando o método `Element.attachShadow()` (en-US). Adicione elementos filhos, listeners, etc., ao shadow DOM usando métodos normais de DOM.
4. Se necessário, defina um template HTML usando `<template>` e `<slot>` (en-US). Novamente, use os métodos normais de DOM methods para clonar o template e inclui-la ao shadow DOM.
5. Use seu elemento customizado onde você preferir em sua página, da mesma forma que usaria qualquer outro elemento HTML.
Tutoriais
---------

Usando elementos customizados

Um guia que mostra como usar os recursos de elementos customizados para criar componentes web simples, além de como analisar o ciclo de vida das funções de retorno e outros recursos mais avançados.

Usando shadow DOM (en-US)

Um guia que analisa os fundamentos do shadow DOM, mostrando como incorporá-lo a um elemento, adicioná-lo à árvore do shadow DOM, estilizá-lo, etc.

Usando templates e slots (en-US)

Um guia que mostra como definir uma estrutura HTML reutilzável através dos elementos `<template>` e `<slot>` (en-US), e como utilizar essa estrutura dentro de elementos web.

Referência
----------

### Elementos customizados

`CustomElementRegistry`

Contém funcionalidade relacionada a elementos personalizados, principalmente o método `CustomElementRegistry.define()` usado para registrar novos elementos personalizados, para que possam ser usados em seu documento.

`Window.customElements` (en-US)

Retorna uma referência ao objeto `CustomElementRegistry`.

Callbacks do ciclo de vida

Funções callback especiais definidas dentro da definição de classe de elemento customizado, afetando seu comportamento:

* `connectedCallback`: Invocada quando um elemento customizado é adicionao ao DOM do documento.
* `disconnectedCallback`: Invocada quando o elemento customizado é desconectado do DOM do documento.
* `adoptedCallback`: Invocada quando o elemento customizado é movido para um novo documento.
* `attributeChangedCallback`: Invocada quando um dos atributos de um elemento customizado é adicionado, removido ou alterado.

Extensões para criação de elementos built-in customizados

The following extensions are defined:

* O atributo HTML global `is`: Permite especificar que um elemento HTML padrão deve se comportar como um elemento built-in customizado registrado.
* A opção "is" do método `Document.createElement()`: Permite criar uma instância de um elemento HTML standard que se comporta como um determinado elemento built-in customizado registrado.

CSS pseudo-classes

Pseudo-classes relacionadas especificamente a elementos customizados:

* `:defined` (en-US): Corresponde a qualquer elemento que está definido, incluindo elementos built-in e elementos customizados que foram definidos com `CustomElementRegistry.define()`).
* `:host` (en-US): Seleciona o host fantasma do shadow DOM (en-US) contendo o CSS utilizado internamente.
* `:host()` (en-US): Seleciona o host fantasma do shadow DOM (en-US) contendo o CSS utilizado internamente (permitindo selecionar um elemento customizado de dentro de seu shadow DOM) — mas somente se o seletor que foi passado via parâmetro da função corresponder ao host fantasma.
* `:host-context()`: Seleciona o host fantasma do shadow DOM (en-US) contendo o CSS utilizado internamente (permitindo selecionar um elemento customizado de dentro de seu shadow DOM) — mas somente se o seletor que foi passado via parâmetro da função corresponder ao(s) ancestral(ais) do host fantasma relativo à posição que ele toma dentro da hierarquida do DOM.

CSS pseudo-elementos

Pseudo-elementos relacionados especificamente a elementos customizados:

* `::part` (en-US): Representa qualquer elemento dentro de uma shadow tree (en-US) que tenha um atributo `part` correspondente.

### Shadow DOM

`ShadowRoot` (en-US)

Representa o nó raíz de uma sub-árvore DOM fantasma.

`DocumentOrShadowRoot`

Um mixin que define funcionalidades que ficam disponíveis através do documento e das raízes fantasma.

Extensões `Element`

Extensões à interface `Element` relacionado ao shadow DOM:

* O método `Element.attachShadow()` (en-US) vincula uma árvore DOM fantasma ao elemento especificado.
* A propriedade `Element.shadowRoot` (en-US) retorna a árvore fantasma raíz vinculada ao elemento especificado, ou `null` se não existir nenhuma árvore fantasma vinculada.

Adições relevantes `Node`

Adicionais à interface `Node` pertinentes ao shadow DOM:

* O método `Node.getRootNode()` (en-US) retorna a raíz do objeto contexto, que opcionalmente inclui a "raíz fantasma" (shadow root) se a mesma estiver dispinível.
* A propriedade `Node.isConnected` retorna um boolean indicando se o Nó está ou não conectado (direta ou indiretamente) ao objeto contexto, ex. o objeto `Document` no caso de um DOM normal, ou o `ShadowRoot` (en-US) no caso de um DOM fantasma (shadow DOM).

Extensões `Event`

Extensões para a interface de `Event` relacionado a shadow DOM:

* `Event.composed` (en-US): Retorna um `Boolean` que indica
 se o evento irá se propagar através dos limites do shadow DOM para dentro do DOM padrão (`true`), ou não (`false`).
* `Event.composedPath` (en-US): Retorna o caminho do evento (objetos nos quais os listeners serão invocados). Não inclui nós na shadow tree se a shadow root foi criada com `ShadowRoot.mode` (en-US) closed (fechado).

### Templates HTML

`<template>`

Contém um fragmento HTML que não é renderizado quando um documento que o contém é inicialmente carregado, mas pode ser exibido em tempo de execução usando JavaScript, geralmente utilizado como base de estruturas de elementos customizados. A interface DOM associada é `HTMLTemplateElement` (en-US).

`<slot>` (en-US)

Um placeholder dentro de um web component que você pode preencher com seu texto de marcação, permitindo criar árvores DOM separadas e apresentar delas juntas. A interface DOM associada é a `HTMLSlotElement`.

`O atributo HTML global slot`

Atribui um slot em uma árvore shadow DOM a um elemento.

`Slotable` (en-US)

Um mixin implementado por ambos os nós `Element` e`Text` (en-US) definindo funcionalidades que permitem tornar-se conteúdo de um elemento `<slot>` (en-US). O mixin define um atributo, `Slotable.assignedSlot` (en-US), o qual retorna uma referência do slot em que o nó está sendo inserido.

Extensões `Element`

Extensões para a interface de `Element` relacionado a slots:

* `Element.slot` (en-US): Retorna o nome do slot do shadow DOM associado ao elemento.

Pseudo-elementos CSS

Pseudo-elementos relacionados especificamente a slots:

* `::slotted` (en-US): Corresponde a qualquer conteúdo inserido naquele slot.

O evento `slotchange`

Disparado em uma instância `HTMLSlotElement` (elemento `<slot>` (en-US)) quando há mudança no nó(s) contido naquele slot.

Exemplos
--------

 Estamos construindo alguns exemplos em nosso repo do GitHub web-components-examples.
 Mais exemplos serão adicionados com o passar do tempo.

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

| Specification |
| --- |
| HTML Standard # the-template-element |
| DOM Standard # interface-shadowroot |

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

### html.elements.template

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

### api.ShadowRoot

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

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

* webcomponents.org — site apresentando exemplos de web components, tutoriais e outras informações.
* FAST é uma biblioteca de web component construída pela Microsoft que oferece vários pacotes para potencializar dependendo das necessidades do seu projeto. Fast Element é um meio fácil de criar Web Components de alto desempenho, com eficiência de memória e em conformidade com os padrões. Fast Foundation é uma biblioteca de classes, modelos e outros utilitários de Web Components criados em elementos rápidos destinados a serem compostos em Web Components registrados.
* Hybrids — Biblioteca web components de código aberto, que favorece objetos simples e funções puras em vez de `class` e this sintaxe. Ele fornece uma API simples e funcional para a criação de elementos personalizados.
* Polymer — Framework de web components do Google - um conjunto de polyfills, melhorias e exemplos. Atualmente, a maneira mais fácil de usar os web components em vários navegadores.
* Snuggsi — Web Components fáceis com ~1kB *Incluindo polyfill* — Tudo que você precisa é um navegador e um conhecimento básico de HTML, CSS e classes JavaScript para ser produtivo.
* Slim.js — Biblioteca web components de código aberto - uma biblioteca de alto desempenho para criação rápida e fácil de componentes; extensível e plugável e compatível com cross-framework.
* Stencil — Conjunto de ferramentas para a construção de sistemas de design reutilizáveis e escalonáveis em web components.