recursal/MDN huggingface dataset:
location: reload() method
=========================

O método **`location.reload()`** recarrega a URL atual, como o botão Atualizar.

O recarregamento pode ser bloqueado e um `SECURITY_ERROR` `DOMException` (en-US) lançado. Isso acontece se a origin do chamado do script `location.reload()` diferir da origem da página que possui o objeto `Location`. Veja Política de mesma origem (en-US) para mais informações.

Sintaxe
-------


```js
reload()
```

### Parâmetros

`forceGet` 
Non-standard

Passe `true` para forçar um recarregamento ignorando o cache. O padrão é `false`. Suportado apenas no Firefox.

### Valor de retorno

Nenhum (`undefined`).

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

| Specification |
| --- |
| HTML Standard # dom-location-reload-dev |

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

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

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

* A interface `Location` que o método pertence.
* Métodos similares: `Location.assign()` e `Location.replace()` (en-US).
Location: search
================

A propriedade **`search`** da interface `Location` é um texto de busca, também chamado de *query string* ou *querystring*; isso é, uma `USVString` (en-US) contendo um `'?'` seguido pelos parâmetros da URL.

Os navegadores modernos fornecem o `URLSearchParams` e o `URL.searchParams` para facilitar a análise dos parâmetros da querystring.

Sintaxe
-------
```

string = object.search;
object.search = string;
```

Exemplos
--------


```js
// Seleciona o elemento <a id="myAnchor" href="https://developer.mozilla.org/pt-BR/docs/Location.search?q=123">
var anchor = document.getElementById("myAnchor");
var queryString = anchor.search; // Retorna:'?q=123'

// Análise adicional:
let params = new URLSearchParams(queryString);
let q = parseInt(params.get("q")); // é o número 123
```

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

| Specification |
| --- |
| HTML Standard # dom-location-search-dev |

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

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

A propriedade **`HTMLCanvasElement.height`** é um `inteiro` positivo que reflete o atributo `height` do elemento HTML `<canvas>` interpretado em pixels no CSS. Quando o atributo não é especificado, ou se for definido como um valor inválido, como um `inteiro` negativo, o valor padrão de `150` será usado.

Essa é uma de duas propriedades, que controla o tamanho do canvas, sendo a outra `HTMLCanvasElement.width` (en-US).

Sintaxe
-------
```

var pxl = canvas.height;
canvas.height = pxl;
```

Exemplos
--------

Dado este elemento `<canvas>`:


```html
<canvas id="canvas" width="300" height="300"></canvas>
```


Você pode capturar a altura do canvas com o seguinte código:


```js
var canvas = document.getElementById("canvas");
console.log(canvas.height); // 300
```

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

| Specification |
| --- |
| HTML Standard # dom-canvas-height |

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

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

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

* A interface a define, `HTMLCanvasElement` (en-US).
* Outra propriedade para controlar o tamanho do canvas, `HTMLCanvasElement.width` (en-US).
Option()
========

O construtor **`Option()`** cria novos `HTMLOptionElement` (en-US).

Sintaxe
-------
```

var optionElementReference = new Option(text, value, defaultSelected, selected);
```

### Parâmetros

`text` Optional

Um `DOMString` representa o conteúdo do elemento, o texto mostrado na tela. Se o texto não é especificado, o texto padrão "" (texto vazio) é utilizado.

`value` Optional

Um `DOMString` representa o valor do `HTMLOptionElement` (en-US), i.e. o valor do elemento `<option>`. Se não especificado, o texto é usado como valor, e.g. o elemento `<select>` tem seu valor associado quando o formulário é submetido ao servidor.

`defaultSelected` Optional

Um `Boolean` (en-US) é usado para adicionar o atributo **selected**, para que este `<option>` seja mostrado como selecionado no elemento `<select>` quando a página for carregada. Se não especificado, o estado padrão é não selecionado. Observe que o **defaultSelected = true** não define a opção como o valor selecionado do elemento `<select>`.

`selected` Optional

Um `Boolean` (en-US) é usado para colocar elemento `<option>` no estado de selecionado; como padrão do elemento tem o estado de não selecionado. Se omitido, mesmo que o parâmetro **defaultSelected** for verdadeiro, o elemento `<option>` não é selecionado.

Exemplos
--------

### Adicionando novas tags options


```js
/\* assumindo que temos este HTML
<select id='s'>

</select>
\*/

var s = document.getElementById("s");
var options = [Quatro, Cinco, Seis];

options.forEach(function (elemento, chave) {
  s.appendChild(new Option(elemento, chave));
});

/\* Resultado
<select id='s'>
 <option value="0">Quatro</option>
 <option value="1">Cinco</option>
 <option value="2">Seis</option>
</select> \*/
```

### Adicionando options com diferentes parâmetros


```js
/\* assumindo que temos este HTML
<select id="s">
 <option>Primeiro</option>
 <option>Segundo</option>
 <option>Terceiro</option>
</select>
\*/

var s = document.getElementById("s");
var options = ["zero", "um", "dois"];

options.forEach(function (elemento, chave) {
  if (elemento == "zero") {
    s[s.options.length] = new Option(elemento, s.options.length, false, false);
  }
  if (elemento == "um") {
    s[s.options.length] = new Option(elemento, s.options.length, true, false); // Adicionando atributo "selected"
  }
  if (elemento == "dois") {
    s[s.options.length] = new Option(elemento, s.options.length, false, true); // Apenas irá selecionar a opção na visualização
  }
});

/\* Resultado
<select id="s">
 <option value="0">zero</option>
 <option value="1" selected="">um</option>
 <option value="2">dois</option> // O usuário verá esta opção selecionada
</select>
\*/
```

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

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

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

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

A propriedade read-only **`Attr.localName`** retorna a parte do local de um nome qualificado de elemento.

**Nota:** Antes do DOM4 essa API foi definida dentro da interface `Node`.

Sintaxe
-------
```

name = attribute.localName
```

### Valor de retorno

Uma `DOMString` representando a parte local do nome qualificado do atributo.

Exemplo
-------

O seguinte exemplo mostra "id" em um diálogo de alerta.

### Conteúdo HTML


```html
<button id="example">Click me</button>
```

### Conteúdo JavaScript


```js
const element = document.querySelector("#example");
element.addEventListener("click", function () {
  const attribute = element.attributes[0];
  alert(attribute.localName);
});
```

Notas
-----

O nome local de um atributo é a parte do nome qualificado do atributo the vem depois da vírgula. Nome qualificados são tipicamente utilizados em XML como parte do namespace(s) de um documento XML em particular.

**Nota:** No Gecko 1.9.2 e anteriores, a propriedade retorna uma versão em letras maiúsculas do nome local para o atributo DOM do HTML (oposto a atributos XHTML no DOM do XML). Em versões posteriores, em conformidade com o HTML5, a propriedade retorna no caso de armazenamento interno do DOM, que é em letras minúsculas para ambos os atributos HTML no DOM do HTML e XHTML no DOM do XML.

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

| Specification |
| --- |
| DOM Standard # dom-attr-localname |

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

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

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

* `Attr.namespaceURI` (en-US)
* `Attr.prefix` (en-US)
* `Element.localName` (en-US)
* `Node.localName` (en-US)
abort
=====

O evento **`abort`** é disparado quando o carregamento de um recurso foi interrompido.

Informações Gerais
------------------

Especificação

DOM L3

Interface

`UIEvent` (en-US) se gerado a partir da interface do usuário, caso contrário será `Event`.

Bubbles

Não

Cancelável

Não

Alvo
`Element`
Ação Padrão

Nenhuma

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

| Propriedade | Tipo | Descrição |
| --- | --- | --- |
| `target` Somente leitura  | ``EventTarget`` | O evento alvo (O mais elevado da árvore DOM). |
| `type` Somente leitura  | ``DOMString`` | O tipo de evento. |
| `bubbles` Somente leitura  | ``Boolean` (en-US)` | O evento é normalmente *bubble*? |
| `cancelable` Somente leitura  | ``Boolean` (en-US)` | É possível cancelar o evento? |
| `view` Somente leitura  | ``WindowProxy`` | ``document.defaultView`` (`window` do documento) |
| `detail` Somente leitura  | `long` (`float`) | 0. |
SVGAElement.target
==================

O **`SVGAElement.target`** propriedade somente ler de `SVGAElement` retorna um objeto `SVGAnimatedString` (en-US) que especifica a porção de um alvo sendo ele "window", "frame" ou "pane" no qual um documento será aberto quando o link for acionado.

Esta propriedade é usada quando existem dois ou mais possiveis alvos(destinos) para o documento, por exemplo, quando o documento pai é um arquivo .html ou .xhtml com varias telas (multi-frame).

Sintaxe
-------
```

myLink.target = 'value';
```

### Valor

Um `SVGAnimatedString` (en-US) indica o destino final do recurso que abre o documento assim que o link é acionado.

Valores para `target` você pode ver aqui.

Exemplo
-------

O código é foi retirado de "SVGAElement example code"


```js
...
var linkRef = document.querySelector('a');
linkRef.target ='\_blank';
...
```

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # \_\_svg\_\_SVGAElement\_\_target |

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

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

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

* `target (en-US)`
RandomSource.getRandomValues()
==============================

O método **`RandomSource.getRandomValues()`** permite que você obtenha valores criptográficos randômicos. O array passado como parametro é preenchido com números randômicos (randômicos no sentido criptográfico).

Para garantir performance suficiente, as implementações não estão usando um gerador de número randômico de verdade, mas estão usando um gerador de número pseudo-randômico alimentado com um valor com entropia suficiente. Os PRNG (pseudo-random number generator - gerador de número pseudo-randômico) usados diferem de uma implementação para a outra, mas são adequadas para usos criptográficos. As implementações precisam ter um valor de alimentação com entropia suficiente, como uma fonte de entropia a nível de sistema.

Sintaxe
-------
```

cryptoObj.getRandomValues(typedArray);
```

### Parâmetros

*typedArray*

É uma `TypedArray` (en-US) de números inteiros, que pode ser `Int8Array` (en-US), `Uint8Array` (en-US), `Uint16Array` (en-US), `Int32Array` (en-US), ou `Uint32Array` (en-US). Todos os elementos no array serão sobrescristos com números randômicos.

### Exceções

* Um `QuotaExceededError` `DOMException` (en-US) é enviado se o tamanho da requisição for maior que 65536 bytes.
Exemplo
-------


```js
/\* assumindo que window.crypto.getRandomValues está disponível \*/

var array = new Uint32Array(10);
window.crypto.getRandomValues(array);

console.log("Seus números da sorte são:");
for (var i = 0; i < array.length; i++) {
  console.log(array[i]);
}
```

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

| Specification |
| --- |
| Web Cryptography API # Crypto-method-getRandomValues |

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

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

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

* `Window.crypto` to get a `Crypto` object.
* `Math.random`, a non-cryptographic source of random numbers.
Crypto.subtle
=============

A prorpiedade **`Crypto.subtle`** de apenas leitura retorna como objeto `SubtleCrypto` permitindo exercer operações de criptografia.

Sintaxe
-------
```

var crypto = crypto.subtle;
```

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

| Specification |
| --- |
| Web Cryptography API # Crypto-attribute-subtle |

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

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

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

* `Crypto`.
* `SubtleCrypto`.
* Compatibility test page.
* Shim for IE11 and Safari.
Canvas tutorial
===============

 ![](/pt-BR/docs/Web/API/Canvas_API/Tutorial/canvas_tut_examples.jpg)
**`<canvas>`** é um elemento HTML que pode ser usado para desenhar usando linguagem de "script" (normalmente JavaScript). Isto pode ser usado, por exemplo, para desenhar gráficos, fazer composições de fotos ou simples (e não tão simples) animações. As imagens à direita mostram exemplos de implementações **`<canvas>`** que serão parte deste tutorial.

Este tutorial descreve como utilizar o elemento `<canvas>` para desenhar gráficos 2D, iniciando com o básico. Os exemplos fornecidos devem lhe trazer algumas ideias claras sobre o que você pode fazer com o canvas e irá fornecer trechos de código que podem lhe ajudar na contrução do seu próprio conteúdo.

Introduzido pela primeira vez no WebKit pela Apple para o OS X Dashboard, o `<canvas>`, desde então, tem sido implementado em navegadores. Hoje, todos os principais navegadores suportam isso.

Antes de começar
----------------

Usar o elemento `<canvas>`não é muito difícil, mas você precisa de um conhecimento básico sobre HTML e JavaScript. O elemento `<canvas>` não é suportado por alguns navegadores antigos, mas é suportado em versões recentes da maioria dos navegadores. O tamanho padrão de um canvas é de 300px \* 150px (largura \* altura). Porém, tamanhos customizados podem ser definidos usando as propriedades `width` e `height` do CSS. Para desenhar gráficos no canvas iremos usar um contexto de objeto JavaScript, o que criará gráficos em tempo real.

Nesse tutorial
--------------

* Utilização básica
* Desenhando formas
* Aplicando estilos e cores
* Desenhando texto
* Usando imagens (em inglês)
* Transformações (en-US)
* Composição e recorte
* Animações básicas
* Animações avançadas
* Manipulação de pixel (en-US)
* Regiões e acessibilidade
* Otimizando o canvas (en-US)
* Conclusão
Veja também
-----------

* Canvas
* Plug-in Canvas para Adobe Illustrator
* HTML5CanvasTutorials
Nota dos contribuidores
-----------------------

Devido a um erro técnico lamentável que ocorreu na semana de 17 de junho de 2013, perdemos parte do histórico deste tutorial, incluindo atribuições a todos os contribuidores anteriores ao seu conteúdo. Pedimos desculpas por isso, e espero que você nos perdoe desse infeliz infortúnio.

* Next »
Conclusão
=========

* « Previous

Parabéns! Você terminou o Canvas tutorial! Este conhecimento ajudará você a fazer ótimos gráficos 2D na web.

Mais exemplos e tutoriais
-------------------------

Há uma variedade de demonstrações e mais explicações sobre canvas nesses sites:

Codepen.io

Front End Developer Playground & Code Editor no navegador.

HTML5CanvasTutorials

Exemplos para a maioria das APIs canvas.

31 days of Canvas tutorials

Uma ótima fundação para codificação visual em JavaScript .

Game development

O jogo é uma das atividades de computador mais populares. Novas tecnologias estão chegando constantemente para possibilitar o desenvolvimento de jogos melhores e mais poderosos que podem ser executados em qualquer navegador da Web compatível com os padrões.

Outras Web APIs
---------------

Essas APIs podem ser úteis, quando trabalhando mais com canvas e gráficos:

WebGL

API para renderização interativa de gráficos 3D.

SVG

Scalable Vector Graphics permitem que você descreva imagens como conjuntos de vetores (linhas) e formas, a fim de permitir que eles sejam redimensionados sem problemas, independentemente do tamanho em que são desenhados.

Web Audio

A Web Audio API fornece um sistema poderoso e versátil para controlar o áudio na Web, permitindo que os desenvolvedores escolham fontes de áudio, adicionem efeitos ao áudio, criem visualizações de áudio, apliquem efeitos espaciais (como panning) e muito mais.

Questions
---------

Stackoverflow

Perguntas marcadas como "canvas".

Comentários sobre esse tutorial – A comunidade MDN de documentação

Se você tiver algum comentário sobre este tutorial ou quiser nos agradecer, fique à vontade para entrar em contato conosco!

* « Previous
ServiceWorkerGlobalScope.clients
================================

A propriedade somente-leitura **`clients`** da interface `ServiceWorkerGlobalScope` (en-US) retorna os objetos dos `Clients` (en-US) associatos ao *service worker*.

Sintaxe
-------
```

swClients = self.clients
```

### Valor

O objeto `Clients` (en-US) associado ao *service worker* específico.

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

| Specification |
| --- |
| Service Workers # service-worker-global-scope-clients |

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

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

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

* Using Service Workers (en-US)
* Service workers basic code example
* Is ServiceWorker ready?
* `Promise`
* Using web workers (en-US)
Node.replaceChild
=================

Sumário
-------

Substitui o elemento filho especificado por outro.

Sintaxe
-------
```

replacedNode = parentNode.replaceChild(newChild, oldChild);
```


* `newChild` é o novo elemento que será inserido no lugar do `oldChild`. Se já existir no DOM, será removido primeiro para depois ser inserido.
* `oldChild` é o elemento existente que será substituído.
* `replacedNode` é elemento substituído. É o mesmo elemento que oldChild.
Exemplo
-------


```js
// <div>
// <span id="childSpan">foo bar</span>
// </div>

// Cria um novo elemento vazio
// sem ID, atributos ou conteúdo
var sp1 = document.createElement("span");

// Adiciona um ID 'newSpan' para o elemento
sp1.setAttribute("id", "newSpan");

// Adiciona contéudo para o elemento
var sp1_content = document.createTextNode("new replacement span element.");

// Coloca o conteúdo no elemento
sp1.appendChild(sp1_content);

// Procura o elemento que será substituído
var sp2 = document.getElementById("childSpan");
var parentDiv = sp2.parentNode;

// Substituí o elemento que já existe (sp2) por o novo elemento (sp1)
parentDiv.replaceChild(sp1, sp2);

// resultado:
// <div>
// <span id="newSpan">new replacement span element.</span>
// </div>
```

Especificação
-------------

* DOM Level 1 Core: replaceChild
* DOM Level 2 Core: replaceChild
* DOM Level 3 Core: replaceChild
Veja também
-----------

* `Node.removeChild`
Node.baseURI
============

Resumo
------

A propriedade somente leitura **`Node.baseURI`** retorna a URL base absoluta de um nó.

A URL base é usada para resolver URLs relativas quando o navegador precisa obter uma URL absoluta, por exemplo, quando processa o atributo `src` do elemento HTML `<img>` ou o atributo `xlink:href` do XML.

No caso comum, a URL base é simplesmente a localização do documento, mas ela pode ser afetada por vários fatores, incluindo o elemento `<base>` em HTML e o atributo xml:base (en-US) em XML.

Sintaxe
-------
```

var baseURI = node.baseURI;
```


* `baseURI` é uma `DOMString` que representa a URL base do `Node` especificado. Pode ser `null` caso não consiga obter uma URL absoluta.
* `node.baseURI` é somente leitura.
* `node.baseURI` pode mudar com o tempo (ver abaixo).
Detalhes
--------

### A URL base de um documento

É a URL base de um *documento* padrão ao endereço do documento ( como exibido pelo navegador e disponível em `window.location` ), mas pode mudar o padrão:

* Quando uma tag HTML `<base>` é encontrada no documento;
* Quando esse é um novo documento creado dinamicamente.

Veja a seção URLs base do padrão HTML para mais detalhes.

Você pode usar ``document`.baseURI` para obter a URL base de um documento. Note que a obtenção da URL base para um documento pode retornar diferentes URLs ao longo do tempo se as tags `<base>` ou a localização do documento mudarem.

### A URL base de um elemento

A URL base de um elemento em HTML é, normalmente, igual a URL base do documento onde o nó está.

Se o documento contém atributos `xml:base` (en-US) ( que você não deve fazer em documento HTML), o `element.baseURI` recebe os atributos `xml:base` dos elementos pai into account when computing the base URL. Veja xml:base (en-US) para mais detalhes.

Você pode usar ``element`.baseURI` para obter a URL base de um elemento.

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-node-baseuri① |

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

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

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

* Elemento `<base>` (HTML)
* Atributo `xml:base` (en-US) (Documentos XML)
* `Node.baseURIObject` (en-US) – uma variante desta API para complementos da Mozilla e código interno. Retorna a URL base como uma `nsIURI`
Node.previousSibling
====================

Resumo
------

Retorna o nó que precede o nó especificado na lista de childNodes do nó pai, retorna null se o nó especificado é o primeiro desta lista.

Sintaxe
-------
```

previousNode = node.previousSibling;
```

Exemplo
-------


```js
// <a><b1 id="b1"/><b2 id="b2"/></a>

alert(document.getElementById("b1").previousSibling); // null
alert(document.getElementById("b2").previousSibling.id); // "b1"
```

Notas
-----

 Navegador baseados na engine Gecko inserem nós de texto no documento para representar espaços em branco na marcação do fonte.
 Portanto um nó obtido, por exemplo, usando `Node.firstChild` ou `Node.previousSibling` pode fazer referência a um
 espaço em banco ao invés do elemento que o autor pretendia obter.

 Veja Whitespace in the DOM (en-US) e
 W3C DOM 3 FAQ: Why are some Text nodes empty?
 Para mais informações.

Para navegar no sentido contrário da lista de nós filhos use Node.nextSibling.

Especificação
-------------

* DOM Level 1 Core: previousSibling
* DOM Level 2 Core: previousSibling
* DOM Level 3 Core: previousSibling
Node.contains
=============

Sumário
-------

Indica se um nó é um descendente de um dado nó.

Sintaxe
-------
```

node.contains( otherNode )
```


* `node` é o nó que está sendo comparado.
* `otherNode` é o nó contra o qual está sendo comparado.

O valor de retorno é `true` se `otherNode` é um descendente de um nó ou o próprio nó. Caso contrário o valor de retorno é `false`.

Exemplo
-------

Esta função verifica se um elemento está no corpo da página. As `contains` is inclusive and determining if the body contains itself isn't the intention of `isInPage` this case explicitly returns `false`.


```js
function isInPage(node) {
  return node === document.body ? false : document.body.contains(node);
}
```


* `node` é o nó que desejamos verificar se está no `<body>`.
Especificações
--------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-node-contains① |

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

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

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

* `Node.hasChildNodes` (en-US)