Window.location - APIs da Web

Window.location
===============

O \*\*`Window.location`\*\*é uma propriedade de leitura que retorna um objeto `Location` com informações de localização do documento atual.

Embora `Window.location` seja apenas um objeto de leitura de localização, você pode também atribuir uma `DOMString` para ele. Isto significa que você pode trabalhar com `location` como se fosse uma string na maioria dos casos: `location = 'http://www.exemplo.com'` é um sinônimo de `location.href = 'http://www.exemplo.com'`.

Sintaxe
-------
```

var oldLocation = location;
location = newLocation;
```

Exemplos
--------

### Exemplo básico

```js
alert(location); // alerta "https://developer.mozilla.org/pt-BR/docs/Web/API/Window.location"
```

### Exemplo #1: Navegando para uma nova página

Sempre que um novo valor é atribuído a um objeto de localização, um documento será carregado usando a URL como se `location.assign()` tivesse sido chamado com a URL modificada. Observe que as configurações de segurança, como CORS, pode impedir que isso aconteça de forma eficaz.

```js
location.assign("http://www.mozilla.org"); // ou
location = "http://www.mozilla.org";
```

### Exemplo #2: Forçando recerregamento da página atual do servidor

```js
location.reload(true);
```

### Exemplo #3

Considere o exemplo a seguir, que vai recarregar a página usando o método `replace()` (en-US) para inserir o valor do `location.pathname`depois da hash:

```js
function reloadPageWithHash() {
  var initialPage = location.pathname;
  location.replace("http://example.com/#" + initialPage);
}
```

>
> \*\*Nota:\*\*O exemplo acima funciona em situações onde `location.hash` não precisa ser retida. Contudo, em navegadores baseados em Gecko, definindo `location.pathname` desta forma irá apagar qualquer informação em `location.hash`, enquanto que no WebKit(e possivelmente em outro navegador), definir o pathname não vai alterar o hash. Se você precisa mudar o pathname mas manter o hash como é, use o `método replace()`, que deve funcionar de forma consistente em todos os navegadores.
>
>
>

### Exemplo #4: Mostrar as propriedades da URL atual em um alerta

```js
function showLoc() {
  var oLocation = location,
    aLog = [
      "Property (Typeof): Value",
      "location (" + typeof oLocation + "): " + oLocation,
    ];
  for (var sProp in oLocation) {
    aLog.push(
      sProp +
        " (" +
        typeof oLocation[sProp] +
        "): " +
        (oLocation[sProp] || "n/a"),
    );
  }
  alert(aLog.join("\n"));
}

// no html: <button onclick="showLoc();">Mostrar propriedades de localização</button>
```

### Exemplo #5: Enviando uma linha de dados para o servidor para modificar a propriedade search

```js
function sendData(sData) {
  location.search = sData;
}

// no html: <button onclick="sendData('Algum dado');">Enviar dados</button>
```

A URL atual com "?Some%20data" anexada é enviada para o servidor (se nenhuma ação for captada pelo servidor, o documento atual é recarregado com o a linha de pesquisa modificada).

### Exemplo #6: Usando favoritos sem mudar a propriedade `hash`

```html
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>MDN Exemplo</title>
    <script>
 function showNode(oNode) {
 var nLeft = 0,
 nTop = 0;
 for (
 var oItNode = oNode;
 oItNode;
 nLeft += oItNode.offsetLeft,
 nTop += oItNode.offsetTop,
 oItNode = oItNode.offsetParent
 );
 document.documentElement.scrollTop = nTop;
 document.documentElement.scrollLeft = nLeft;
 }

 function showBookmark(sBookmark, bUseHash) {
 if (arguments.length === 1 || bUseHash) {
 location.hash = sBookmark;
 return;
 }
 var oBookmark = document.querySelector(sBookmark);
 if (oBookmark) {
 showNode(oBookmark);
 }
 }
 </script>
    <style>
 span.intLink {
 cursor: pointer;
 color: #0000ff;
 text-decoration: underline;
 }
 </style>
  </head>

  <body>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices
      dolor ac dolor imperdiet ullamcorper. Suspendisse quam libero, luctus
      auctor mollis sed, malesuada condimentum magna. Quisque in ante tellus, in
      placerat est. Pellentesque habitant morbi tristique senectus et netus et
      malesuada fames ac turpis egestas. Donec a mi magna, quis mattis dolor.
      Etiam sit amet ligula quis urna auctor imperdiet nec faucibus ante. Mauris
      vel consectetur dolor. Nunc eget elit eget velit pulvinar fringilla
      consectetur aliquam purus. Curabitur convallis, justo posuere porta
      egestas, velit erat ornare tortor, non viverra justo diam eget arcu.
      Phasellus adipiscing fermentum nibh ac commodo. Nam turpis nunc, suscipit
      a hendrerit vitae, volutpat non ipsum.
    </p>
    <p>
      Duis lobortis sapien quis nisl luctus porttitor. In tempor semper libero,
      eu tincidunt dolor eleifend sit amet. Ut nec velit in dolor tincidunt
      rhoncus non non diam. Morbi auctor ornare orci, non euismod felis gravida
      nec. Curabitur elementum nisi a eros rutrum nec blandit diam placerat.
      Aenean tincidunt risus ut nisi consectetur cursus. Ut vitae quam elit.
      Donec dignissim est in quam tempor consequat. Aliquam aliquam diam non
      felis convallis suscipit. Nulla facilisi. Donec lacus risus, dignissim et
      fringilla et, egestas vel eros. Duis malesuada accumsan dui, at fringilla
      mauris bibendum quis. Cras adipiscing ultricies fermentum. Praesent
      bibendum condimentum feugiat.
    </p>
    <p id="myBookmark1">
      [ <span class="intLink" onclick="showBookmark('#myBookmark2');"
 >Go to bookmark #2</span
 > ]
    </p>
    <p>
      Vivamus blandit massa ut metus mattis in fringilla lectus imperdiet. Proin
      ac ante a felis ornare vehicula. Fusce pellentesque lacus vitae eros
      convallis ut mollis magna pellentesque. Pellentesque placerat enim at
      lacus ultricies vitae facilisis nisi fringilla. In tincidunt tincidunt
      tincidunt. Nulla vitae tempor nisl. Etiam congue, elit vitae egestas
      mollis, ipsum nisi malesuada turpis, a volutpat arcu arcu id risus.
    </p>
    <p>
      Nam faucibus, ligula eu fringilla pulvinar, lectus tellus iaculis nunc,
      vitae scelerisque metus leo non metus. Proin mattis lobortis lobortis.
      Quisque accumsan faucibus erat, vel varius tortor ultricies ac. Lorem
      ipsum dolor sit amet, consectetur adipiscing elit. Sed nec libero nunc.
      Nullam tortor nunc, elementum a consectetur et, ultrices eu orci. Lorem
      ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl eu
      sem vehicula egestas.
    </p>
    <p>
      Aenean viverra varius mauris, sed elementum lacus interdum non. Phasellus
      sit amet lectus vitae eros egestas pellentesque fermentum eget magna.
      Quisque mauris nisl, gravida vitae placerat et, condimentum id metus.
      Nulla eu est dictum dolor pulvinar volutpat. Pellentesque vitae
      sollicitudin nunc. Donec neque magna, lobortis id egestas nec, sodales
      quis lectus. Fusce cursus sollicitudin porta. Suspendisse ut tortor in
      mauris tincidunt rhoncus. Maecenas tincidunt fermentum facilisis.
      Pellentesque habitant morbi tristique senectus et netus et malesuada fames
      ac turpis egestas.
    </p>
    <p>
      Suspendisse turpis nisl, consectetur in lacinia ut, ornare vel mi. Lorem
      ipsum dolor sit amet, consectetur adipiscing elit. Proin non lectus eu
      turpis vulputate cursus. Mauris interdum tincidunt erat id pharetra.
      Nullam in libero elit, sed consequat lectus. Morbi odio nisi, porta vitae
      molestie ut, gravida ut nunc. Ut non est dui, id ullamcorper orci.
      Praesent vel elementum felis. Maecenas ornare, dui quis auctor hendrerit,
      turpis sem ullamcorper odio, in auctor magna metus quis leo. Morbi at odio
      ante.
    </p>
    <p>
      Curabitur est ipsum, porta ac viverra faucibus, eleifend sed eros. In sit
      amet vehicula tortor. Vestibulum viverra pellentesque erat a elementum.
      Integer commodo ultricies lorem, eget tincidunt risus viverra et. In enim
      turpis, porttitor ac ornare et, suscipit sit amet nisl. Vestibulum ante
      ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
      Pellentesque vel ultrices nibh. Sed commodo aliquam aliquam. Nulla
      euismod, odio ut eleifend mollis, nisi dui gravida nibh, vitae laoreet
      turpis purus id ipsum. Donec convallis, velit non scelerisque bibendum,
      diam nulla auctor nunc, vel dictum risus ipsum sit amet est. Praesent ut
      nibh sit amet nibh congue pulvinar. Suspendisse dictum porttitor tempor.
    </p>
    <p>
      Vestibulum dignissim erat vitae lectus auctor ac bibendum eros semper.
      Integer aliquet, leo non ornare faucibus, risus arcu tristique dolor, a
      aliquet massa mauris quis arcu. In porttitor, lectus ac semper egestas,
      ligula magna laoreet libero, eu commodo mauris odio id ante. In hac
      habitasse platea dictumst. In pretium erat diam, nec consequat eros.
      Praesent augue mi, consequat sed porttitor at, volutpat vitae eros. Sed
      pretium pharetra dapibus. Donec auctor interdum erat, lacinia molestie
      nibh commodo ut. Maecenas vestibulum vulputate felis, ut ullamcorper arcu
      faucibus in. Curabitur id arcu est. In semper mollis lorem at
      pellentesque. Sed lectus nisl, vestibulum id scelerisque eu, feugiat et
      tortor. Pellentesque porttitor facilisis ultricies.
    </p>
    <p id="myBookmark2">
      [ <span class="intLink" onclick="showBookmark('#myBookmark1');"
 >Go to bookmark #1</span
 >
      |
      <span class="intLink" onclick="showBookmark('#myBookmark1', false);"
 >Go to bookmark #1 without using location.hash</span
 >
      |
      <span class="intLink" onclick="showBookmark('#myBookmark3');"
 >Go to bookmark #3</span
 > ]
    </p>
    <p>
      Phasellus tempus fringilla nunc, eget sagittis orci molestie vel. Nulla
      sollicitudin diam non quam iaculis ac porta justo venenatis. Quisque
      tellus urna, molestie vitae egestas sit amet, suscipit sed sem. Quisque
      nec lorem eu velit faucibus tristique ut ut dolor. Cras eu tortor ut
      libero placerat venenatis ut ut massa. Sed quis libero augue, et consequat
      libero. Morbi rutrum augue sed turpis elementum sed luctus nisl molestie.
      Aenean vitae purus risus, a semper nisl. Pellentesque malesuada, est id
      sagittis consequat, libero mauris tincidunt tellus, eu sagittis arcu purus
      rutrum eros. Quisque eget eleifend mi. Duis pharetra mi ac eros mattis
      lacinia rutrum ipsum varius.
    </p>
    <p>
      Fusce cursus pulvinar aliquam. Duis justo enim, ornare vitae elementum
      sed, porta a quam. Aliquam eu enim eu libero mollis tempus. Morbi ornare
      aliquam posuere. Proin faucibus luctus libero, sed ultrices lorem sagittis
      et. Vestibulum malesuada, ante nec molestie vehicula, quam diam mollis
      ipsum, rhoncus posuere mauris lectus in eros. Nullam feugiat ultrices
      augue, ac sodales sem mollis in.
    </p>
    <p id="myBookmark3"><em>Here is the bookmark #3</em></p>
    <p>
      Proin vitae sem non lorem pellentesque molestie. Nam tempus massa et
      turpis placerat sit amet sollicitudin orci sodales. Pellentesque enim
      enim, sagittis a lobortis ut, tempus sed arcu. Aliquam augue turpis,
      varius vel bibendum ut, aliquam at diam. Nam lobortis, dui eu hendrerit
      pellentesque, sem neque porttitor erat, non dapibus velit lectus in metus.
      Vestibulum sit amet felis enim. In quis est vitae nunc malesuada consequat
      nec nec sapien. Suspendisse aliquam massa placerat dui lacinia luctus sed
      vitae risus. Fusce tempus, neque id ultrices volutpat, mi urna auctor
      arcu, viverra semper libero sem vel enim. Mauris dictum, elit non placerat
      malesuada, libero elit euismod nibh, nec posuere massa arcu eu risus.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer urna
      velit, dapibus eget varius feugiat, pellentesque sit amet ligula. Maecenas
      nulla nisl, facilisis eu egestas scelerisque, mollis eget metus.
      Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
      cubilia Curae; Morbi sed congue mi.
    </p>
    <p>
      Fusce metus velit, pharetra at vestibulum nec, facilisis porttitor mi.
      Curabitur ligula sapien, fermentum vel porttitor id, rutrum sit amet
      magna. Sed sit amet sollicitudin turpis. Aenean luctus rhoncus dolor, et
      pulvinar ante egestas et. Donec ac massa orci, quis dapibus augue. Vivamus
      consectetur auctor pellentesque. Praesent vestibulum tincidunt ante sed
      consectetur. Cum sociis natoque penatibus et magnis dis parturient montes,
      nascetur ridiculus mus. Fusce purus metus, imperdiet vitae iaculis
      convallis, bibendum vitae turpis.
    </p>
    <p>
      Fusce aliquet molestie dolor, in ornare dui sodales nec. In molestie
      sollicitudin felis a porta. Mauris nec orci sit amet orci blandit
      tristique congue nec nunc. Praesent et tellus sollicitudin mauris accumsan
      fringilla. Morbi sodales, justo eu sollicitudin lacinia, lectus sapien
      ullamcorper eros, quis molestie urna elit bibendum risus. Proin eget
      tincidunt quam. Nam luctus commodo mauris, eu posuere nunc luctus non.
      Nulla facilisi. Vivamus eget leo rhoncus quam accumsan fringilla. Aliquam
      sit amet lorem est. Nullam vel tellus nibh, id imperdiet orci. Integer
      egestas leo eu turpis blandit scelerisque.
    </p>
    <p>
      Etiam in blandit tellus. Integer sed varius quam. Vestibulum dapibus mi
      gravida arcu viverra blandit. Praesent tristique augue id sem adipiscing
      pellentesque. Sed sollicitudin, leo sed interdum elementum, nisi ante
      condimentum leo, eget ornare libero diam semper quam. Vivamus augue urna,
      porta eget ultrices et, dapibus ut ligula. Ut laoreet consequat faucibus.
      Praesent at lectus ut lectus malesuada mollis. Nam interdum adipiscing
      eros, nec sodales mi porta nec. Proin et quam vitae sem interdum aliquet.
      Proin vel odio at lacus vehicula aliquet.
    </p>
    <p>
      Etiam placerat dui ut sem ornare vel vestibulum augue mattis. Sed semper
      malesuada mi, eu bibendum lacus lobortis nec. Etiam fringilla elementum
      risus, eget consequat urna laoreet nec. Etiam mollis quam non sem
      convallis vel consectetur lectus ullamcorper. Aenean mattis lacus quis
      ligula mattis eget vestibulum diam hendrerit. In non placerat mauris.
      Praesent faucibus nunc quis eros sagittis viverra. In hac habitasse platea
      dictumst. Suspendisse eget nisl erat, ac molestie massa. Praesent mollis
      vestibulum tincidunt. Fusce suscipit laoreet malesuada. Aliquam erat
      volutpat. Aliquam dictum elementum rhoncus. Praesent in est massa,
      pulvinar sodales nunc. Pellentesque gravida euismod mi ac convallis.
    </p>
    <p>
      Mauris vel odio vel nulla facilisis lacinia. Aliquam ultrices est at leo
      blandit tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et
      ultrices posuere cubilia Curae; Suspendisse porttitor adipiscing
      facilisis. Duis cursus quam iaculis augue interdum porttitor. Vestibulum
      ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
      Curae; Duis vulputate magna ac metus pretium condimentum. In tempus, est
      eget vestibulum blandit, velit massa dignissim nisl, ut scelerisque lorem
      neque vel velit. Maecenas fermentum commodo viverra. Curabitur a nibh non
      velit aliquam cursus. Integer semper condimentum tortor a pellentesque.
      Pellentesque semper, nisl id porttitor vehicula, sem dui feugiat lacus,
      vitae consequat augue urna vel odio.
    </p>
    <p>
      Vestibulum id neque nec turpis iaculis pulvinar et a massa. Vestibulum sed
      nibh vitae arcu eleifend egestas. Mauris fermentum ultrices blandit.
      Suspendisse vitae lorem libero. Aenean et pellentesque tellus. Morbi quis
      neque orci, eu dignissim dui. Fusce sollicitudin mauris ac arcu vestibulum
      imperdiet. Proin ultricies nisl sit amet enim imperdiet eu ornare dui
      tempus. Maecenas lobortis nisi a tortor vestibulum vel eleifend tellus
      vestibulum. Donec metus sapien, hendrerit a fermentum id, dictum quis
      libero.
    </p>
    <p>
      Pellentesque a lorem nulla, in tempor justo. Duis odio nisl, dignissim sed
      consequat sit amet, hendrerit ac neque. Nunc ac augue nec massa tempor
      rhoncus. Nam feugiat, tellus a varius euismod, justo nisl faucibus velit,
      ut vulputate justo massa eu nibh. Sed bibendum urna quis magna facilisis
      in accumsan dolor malesuada. Morbi sit amet nunc risus, in faucibus sem.
      Nullam sollicitudin magna sed sem mollis id commodo libero condimentum.
      Duis eu massa et lacus semper molestie ut adipiscing sem.
    </p>
    <p>
      Sed id nulla mi, eget suscipit eros. Aliquam tempus molestie rutrum. In
      quis varius elit. Nullam dignissim neque nec velit vulputate porttitor.
      Mauris ac ligula sit amet elit fermentum rhoncus. In tellus urna, pulvinar
      quis condimentum ut, porta nec justo. In hac habitasse platea dictumst.
      Proin volutpat elit id quam molestie ac commodo lacus sagittis. Quisque
      placerat, augue tempor placerat pulvinar, nisi nisi venenatis urna, eget
      convallis eros velit quis magna. Suspendisse volutpat iaculis quam, ut
      tristique lacus luctus quis.
    </p>
    <p>
      Nullam commodo suscipit lacus non aliquet. Phasellus ac nisl lorem, sed
      facilisis ligula. Nam cursus lobortis placerat. Sed dui nisi, elementum eu
      sodales ac, placerat sit amet mauris. Pellentesque dapibus tellus ut ipsum
      aliquam eu auctor dui vehicula. Quisque ultrices laoreet erat, at ultrices
      tortor sodales non. Sed venenatis luctus magna, ultricies ultricies nunc
      fringilla eget. Praesent scelerisque urna vitae nibh tristique varius
      consequat neque luctus. Integer ornare, erat a porta tempus, velit justo
      fermentum elit, a fermentum metus nisi eu ipsum. Vivamus eget augue vel
      dui viverra adipiscing congue ut massa. Praesent vitae eros erat, pulvinar
      laoreet magna. Maecenas vestibulum mollis nunc in posuere. Pellentesque
      sit amet metus a turpis lobortis tempor eu vel tortor. Cras sodales
      eleifend interdum.
    </p>
  </body>
</html>
```

>
> \*\*Nota:\*\*A função `showNode` é também um exemplo de uso do ciclo`for sem uma section statement.`Neste caso **o ponto e vírgula é sempre colocado imediatamente depois da declaração do ciclo.**
>
>
>

... a mesma coisa mas com uma animação de rolagem na página:

```js
var showBookmark = (function () {
  var _useHash,
    _scrollX,
    _scrollY,
    _nodeX,
    _nodeY,
    _itFrame,
    _scrollId = -1,
    _bookMark,
    /\*
 \* nDuration: the duration in milliseconds of each frame
 \* nFrames: number of frames for each scroll
 \*/
    nDuration = 200,
    nFrames = 10;

  function \_next() {
    if (_itFrame > nFrames) {
      clearInterval(_scrollId);
      _scrollId = -1;
      return;
    }
    _isBot = true;
    document.documentElement.scrollTop = Math.round(
      _scrollY + ((_nodeY - _scrollY) \* _itFrame) / nFrames,
    );
    document.documentElement.scrollLeft = Math.round(
      _scrollX + ((_nodeX - _scrollX) \* _itFrame) / nFrames,
    );
    if (_useHash && _itFrame === nFrames) {
      location.hash = _bookMark;
    }
    _itFrame++;
  }

  function \_chkOwner() {
    if (_isBot) {
      _isBot = false;
      return;
    }
    if (_scrollId > -1) {
      clearInterval(_scrollId);
      _scrollId = -1;
    }
  }

  if (window.addEventListener) {
    window.addEventListener("scroll", _chkOwner, false);
  } else if (window.attachEvent) {
    window.attachEvent("onscroll", _chkOwner);
  }

  return function (sBookmark, bUseHash) {
    _scrollY = document.documentElement.scrollTop;
    _scrollX = document.documentElement.scrollLeft;
    _bookMark = sBookmark;
    _useHash = arguments.length === 1 || bUseHash;
    for (
      var nLeft = 0, nTop = 0, oNode = document.querySelector(sBookmark);
      oNode;
      nLeft += oNode.offsetLeft,
        nTop += oNode.offsetTop,
        oNode = oNode.offsetParent
    );
    (_nodeX = nLeft), (_nodeY = nTop), (_itFrame = 1);
    if (_scrollId === -1) {
      _scrollId = setInterval(_next, Math.round(nDuration / nFrames));
    }
  };
})();
```

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

| Specification |
| --- |
| HTML Standard # the-location-interface |

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

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

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

* The interface of the returned value, `Location`.
* A similar information, but attached to the browsing context (en-US), `Document.location`.
* Manipulating the browser history
* hashchange (en-US)


Window.document - APIs da Web

Window.document
===============

Resumo
------

Retorna a referência para o documento contido na janela.

>
> \*\*Nota:\*\*Firefox 3 altera a segurança para documentos de uma janela de modo que apenas o domínio a partir do qual foi localizado possa acessar o documento. Enquanto isso pode quebrar alguns sites existentes, é um movimento feito por ambos Firefox 3 e Internet Explorer 7, e resulta na melhoria de segurança.
>
>
>

Sintaxe
-------
```

doc = window.document
```

### Parâmetros

* `doc` é um objeto referência de um objeto para um document (en-US).
Exemplo
-------

```js
<!DOCTYPE html>
<html>
<head>
   <title>Hello, World!</title>
</head>
<body>

<script type="text/javascript">
   var doc = window.document;
   alert( doc.title);    // alerts: Hello, World!
</script>

</body>
</html>
```

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

* HTML


Window.event - APIs da Web

Window.event
============

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

**`window.event`** é uma propriedade proprietária do Microsoft Internet Explorer que só está disponível enquanto um manipulador de eventos DOM é chamado. Seu valor é o objeto Event atualmente tratado.

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

Não é parte de nenhuma especificação.

Microsoft tem uma descrição na MSDN.

Compatibilidade de navegadores
------------------------------

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

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

* `Event.srcElement`


Window.prompt() - APIs da Web

Window.prompt()
===============

O Window.prompt() exibe uma caixa de diálogo com uma mensagem opcional solicitando ao usuário a entrada de algum texto.Sintaxe
-------
```

resultado = window.prompt(texto, valor);
```

* `resultado` é uma cadeia de caracteres contendo o texto digitado pelo usuário, ou um valor nulo.
* `texto` é uma cadeia de caracteres para exibir ao usuário. Este parâmetro é opcional e pode ser omitido se não há nada para mostrar na janela de prompt.
* `valor` é uma cadeia de caracteres contendo o valor padrão exibido na caixa de entrada de texto. É um parâmetro opcional. Note que no Internet Explorer 7 e 8, se você não fornecer este parâmetro, a cadeia de caracteres "undefined" é o valor padrão.
Exemplo
-------

```js
var signo = prompt("Qual é o seu signo?");

if (signo.toLowerCase() == "escorpião") {
  alert("Legal! Eu sou de Escorpião também!");
}

// há muitas formas de se usar o recurso prompt
var sign = window.prompt(); // abrir uma janela de promtpt em branco
var sign = prompt(); // abrir uma janela de promtpt em branco
var sign = window.prompt("Você está se sentindo com sorte"); // abrir uma janela com o texto "Você está se sentindo com sorte"
var sign = window.prompt("Você está se sentindo com sorte", "certamente"); // abrir uma janela com o texto "Você está se sentindo com sorte" e com o valor padrão "certamente"
```

Quando o usuário pressiona o botão OK, o texto digitado no campo de texto é retornado. Se o usuário pressionar OK sem ter digitado qualquer texto, uma cadeia de caracteres vazia é retornada. Se o usuário pressionar o botão Cancelar, esta função retornará `null`.

{{todo("external image!")}} O prompt acima aparece da seguinte forma (no Chrome do Windows 7):

![](https://lh4.googleusercontent.com/-uDx7r8y4tV8/UKv_PjG163I/AAAAAAAAHd0/Arwk0l4cpq0/s362/Prompt_Chrome_Windows7.png)

Notas
-----

Uma caixa de diálogo prompt contém uma caixa de texto de linha única, um botão Cancelar, e um botão OK, e retorna o (possivelmente vazio) texto que o usuário digitou naquela caixa de texto.

The following text is shared between this article, DOM:window.confirm and DOM:window.alertAs caixas de diálogo são janelas modais; eles impedem o usuário de acessar o resto da interface do programa até que a caixa de diálogo seja fechada. Por esta razão, você não deve abusar de qualquer função que crie uma caixa de diálogo (ou janela modal).

Por favor, note que o resultado é uma cadeia de caracteres. Isso significa que você deve, algumas vezes, converter o valor dado pelo usuário. Por exemplo, se a resposta deve ser um número, você deve converter o valor para `Number:` var aNumber = Number(window.prompt("Digite um número", ""));

Os códigos do Mozilla Chrome (en-US) (e.g. Firefox extensions) ao invés disso, devem usar os métodos da interface `nsIPromptService`.

No Safari, se o usuário clicar em Cancelar, a função retornará uma cadeia de caracteres vazia. Portanto, ele não diferenciará o cancelamento do usuário de uma cadeia de caracteres vazia na caixa de texto.

Esta função não tem efeito na versão Modern UI/Metro do Internet Explorer para Windows 8. Ele não exibe o prompt para o usuário, e sempre retornará `undefined`. Não está claro se é um erro ou um comportamento intencional. Versões desktop do IE implementam esta função.

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

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

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

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

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

* `alert`
* `confirm`


GlobalEventHandlers.onblur - APIs da Web

GlobalEventHandlers.onblur
==========================

A propriedade **onblur** retorna o código que vai lidar com o evento onBlur, se houver, que existe no elemento atual.

Sintaxe
-------
```

element.onblur = function;
```

* `function` é o nome de uma função definida pelo usuário, sem o sufixo () ou qualquer parâmetro, ou uma declaração de função anônima, como por exemplo
```

element.onblur = function() { console.log("evento onblur detectado!"); };
```

Exemplo
-------

```html
<html>
  <head>
    <title>exemplo de evento onblur</title>

    <script type="text/javascript">
 var elem = null;

 function initElement() {
 elem = document.getElementById("foo");
 // NOTA: doEvent(); ou doEvent(param); NÃO irão funcionar aqui.
 // Deve ser uma referência ao nome da função, não à chamada da função.
 elem.onblur = doEvent;
 }

 function doEvent() {
 elem.value = "Tchauzinho";
 console.log("Evento onblur detectado!");
 }
 </script>

    <style type="text/css">
 <!--
 #foo {
 border: solid blue 2px;
 }
 -->
 </style>
  </head>

  <body onload="initElement();">
    <form>
      <input type="text" id="foo" value="Olá!" />
    </form>

    <p>
      Clique no elemento acima para dá-lo focus, depois clique fora do
      elemento.<br />
      Recarregue a pagina através do NavBar.
    </p>
  </body>
</html>
```

Notas
-----

O evento blur aparece quando um elemento perde o focus.

Em contraste cp, MSIE--O qual faz quase todos os elementos receberem o evento blur--quase todos os elementos em navegadores baseados no Gecko NÃO funcionam com este evento.

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

| Specification |
| --- |
| UI Events # event-type-blur |
| HTML Standard # handler-onblur |

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

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


Window.localStorage - APIs da Web

Window.localStorage
===================

A propriedade `localStorage` permite acessar um objeto `Storage` local. A `localStorage` é similar ao `sessionStorage` (en-US). A única diferença é que enquanto os dados armazenados no localStorage não expiram, os dados no sessionStorage tem os seus dados limpos ao expirar a sessão da página — ou seja, quando a página (aba ou janela) é fechada.

Sintaxe
-------

```js
meuStorage = localStorage;
```

### Valor

Objeto `Storage`.

Exemplo
-------

O seguinte trecho acessa o objeto `Storage` local do domínio atual e adiciona um item usando o `Storage.setItem()`.

```js
localStorage.setItem("meuGato", "Tom");
```

**Nota:** **Nota: Por favor veja o artigo** Using the Web Storage API **para um exemplo completo.**

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

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

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

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

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

* Using the Web Storage API
* `LocalStorage` (en-US)
* `SessionStorage` (en-US)
* `Window.sessionStorage`


window.requestIdleCallback() - APIs da Web

window.requestIdleCallback()
============================

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

O método **`window.requestIdleCallback()`** enfileira uma função para ser executado durante períodos onde o navegador está ocioso. Isso permite que desenvolvedores realizem tarefas de baixa prioridade em relação a o event loop em segundo plano. As funções são geralmente chamadas na ordem first-in-first-out (primeiro-a-entrar-primeiro-a-sair); Contudo, callbacks nos quais tem um timeout especificado, podem ser chamados na ordem out-of-order (fora-de-ordem) se necessário, afim de executar antes do tempo limite.

Você pode chamar `requestIdleCallback()` com uma função callback ociosa para agendar outro callback para ter lugar não antes da próxima passagem pelo event loop.

**Nota:** Um `timeout` é altamento recomendado, caso contrário, é possível que vários segundos passem antes que a função callback seja chamada.

Syntax
------
```

var handle = window.requestIdleCallback(callback[, options])
```

### Return value

An ID which can be used to cancel the callback by passing it into the `window.cancelIdleCallback()` (en-US) method.

### Parameters

`callback`

A reference to a function that should be called in the near future, when the event loop is idle. The callback function is passed an `IdleDeadline` (en-US) object describing the amount of time available and whether or not the callback has been run because the timeout period expired.

`options` Optional

Contains optional configuration parameters. Currently only one property is defined:

* `timeout`: If `timeout` is specified and has a positive value, and the callback has not already been called by the time *timeout* milliseconds have passed, the callback will be called during the next idle period, even if doing so risks causing a negative performance impact.

Example
-------

See our complete example (en-US) in the article Cooperative Scheduling of Background Tasks API (en-US).

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

| Specification |
| --- |
| requestIdleCallback() Cooperative Scheduling of Background Tasks # the-requestidlecallback-method |

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

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

See also
--------

* `window.cancelIdleCallback()` (en-US)
* `IdleDeadline` (en-US)
* `window.setTimeout()` (en-US)
* `window.setInterval()` (en-US)
* `window.requestAnimationFrame`


load - APIs da Web

load
====
```

O evento de load é acionado quando um recurso e seus recursos
dependentes terminaram de carregar.
```

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

Especificação

DOM L3

Interface

UIEvent

Bubbles

Não

Cancelavel

Não

Alvo

Window

Ação Padrão

Nenhuma.

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

| Property | Type | Description |
| --- | --- | --- |
| `target` Somente leitura  | `EventTarget` | The event target (the topmost target in the DOM tree). |
| `type` Somente leitura  | `DOMString` | The type of event. |
| `bubbles` Somente leitura  | `Boolean` (en-US) | Whether the event normally bubbles or not. |
| `cancelable` Somente leitura  | `Boolean` (en-US) | Whether the event is cancellable or not. |
| `view` Somente leitura  | `WindowProxy` | `document.defaultView` (`window` of the document) |
| `detail` Somente leitura  | `long` (`float`) | 0. |

Exemplo
-------

```html
<script>
 window.addEventListener("load", function (event) {
 console.log("Todos os recursos terminaram o carregamento!");
 });
</script>
```

Eventos Relacionados
--------------------

* `DOMContentLoaded (en-US)`
* `readystatechange (en-US)`
* `load (en-US)`
* `beforeunload (en-US)`
* `unload (en-US)`


Window.confirm() - APIs da Web

Window.confirm()
================

O método **`Window.confirm()`** mostra uma janela modal com uma mensagem opcional e dois botões, OK e Cancelar.

Sintaxe
-------
```

resultado = window.confirm(mensagem);
```

* `mensagem` é a string opcional que será mostrada no diálogo.
* `resultado` é um booleano indicando se OK ou cancelar foram selecionados (`true` indicará OK).
Exemplo
-------
```

if (window.confirm("Você realmente quer sair?")) {
  window.open("sair.html", "Obrigado pela visita!");
}
```

Produzirá:

![firefox confirm](/pt-BR/docs/Web/API/Window/confirm/firefox_confirm_dialog.png)

Notas
-----

The following text is shared between this article, DOM:window.prompt and DOM:window.alert Caixas de diálogo são janelas modais - elas previnem o usuário de acessar o resto da interface da aplicação enquanto a caixa de diálogo não for fechada. Por esta razão, você não deve usar abusivamente nenhuma função que crie uma caixa de diálogo (ou uma janela modal). E independente disso, existem boas razões para evitar o uso de caixas de diálogo para confirmações.

Usuários do Mozilla Chrome (Ex.: Extensões do Firefox) devem utilizar métodos de `nsIPromptService`.

O argumento é opcional e não é requerido por especificações.

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

Especificado em HTML5.

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

* `alert`
* `prompt`


Window.history - APIs da Web

Window.history
==============

A propriedade só de leitura **Window.history** retorna uma referência ao objeto History, que fornece uma interface para manipular o histórico de sessão do navegador (páginas visitadas na guia ou quadro em que a página atual é carregada).

Consulte Manipulação do histórico do navegador para obter exemplos e detalhes. Em particular, esse artigo explica os recursos de segurança dos métodos pushState () e replaceState () que você deve conhecer antes de usá-los.

Syntax
------
```

var historyObj = window.history;
```

Example
-------

```js
History.back(); // equivalente ao clique no botão Voltar
History.go(-1); // equivalente a history.back ();
```

Notas
-----

Para páginas de nível superior, você pode ver a lista de páginas no histórico da sessão, acessível através do objeto Histórico, nos menus suspensos do navegador ao lado dos botões para trás e para frente.

Por motivos de segurança, o objeto Histórico não permite que o código não privilegiado acesse os URLs de outras páginas no histórico da sessão, mas permite que ele navegue pelo histórico da sessão.

Não há nenhuma maneira de limpar o histórico da sessão ou desabilitar a navegação para trás / para frente do código não privilegiado. A solução disponível mais próxima é o método location.replace (), que substitui o item atual do histórico da sessão pelo URL fornecido.

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

| Specification |
| --- |
| HTML Standard # the-history-interface |

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

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


Window.innerHeight - APIs da Web

Window.innerHeight
==================

Altura (em pixels) da janela de visualização do navegador, incluindo, se renderizado, a barra de rolagem horizontal.

**Nota:** If you use `nsIDOMWindowUtils.setCSSViewport()` to set the virtual window size for page layout purposes, the value returned by this property corresponds to the viewport height set using that method.

Syntax
------
```

var intViewportHeight = window.innerHeight;
```

### Value

On return, `intViewportHeight` is the height of the browser window's viewport.

The `window.innerHeight` property is read only; it has no default value.

Notes
-----

The `innerHeight` property is supported in any window object like a `window`, a frame, a frameset, or a secondary window.

There is an algorithm to obtain the height of the viewport excluding, if rendered, the horizontal scrollbar.

Example
-------

### Assuming a frameset

```js
var intFrameHeight = window.innerHeight; // or

var intFrameHeight = self.innerHeight;
// will return the height of the frame viewport within the frameset

var intFramesetHeight = parent.innerHeight;
// will return the height of the viewport of the closest frameset

var intOuterFramesetHeight = top.innerHeight;
// will return the height of the viewport of the outermost frameset
```

{{todo("link to an interactive demo here")}}
To change the size of a window, see `window.resizeBy()` (en-US) and `window.resizeTo()` (en-US).

To get the outer height of a window, i.e. the height of the whole browser window, see `window.outerHeight` (en-US).

### Graphical example

The following figure shows the difference between `outerHeight` and `innerHeight`.

![innerHeight vs outerHeight illustration](/pt-BR/docs/Web/API/Window/innerHeight/firefoxinnervsouterheight2.png)

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

| Specification |
| --- |
| CSSOM View Module # dom-window-innerheight |

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

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

See also
--------

* `window.innerWidth` (en-US)
* `window.outerHeight` (en-US)
* `window.outerWidth` (en-US)


Window.setImmediate() - APIs da Web

Window.setImmediate()
=====================

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

Esse método é usado para interromper operações de longa duração e executar uma função de retorno de chamada imediatamente após o navegador ter concluído outras operações, como eventos e atualizações de exibição.

**Nota:** Não se espera que este método se torne padrão, e é implementado somente por compilações recentes do Internet Explorer e Node.js 0.10+. Existem resistencias de ambos Gecko (Firefox) e Webkit (Google/Apple).

Sintaxe
-------
```

var immediateID = setImmediate(func, [param1, param2, ...]);
var immediateID = setImmediate(func);
```

* onde `immediateID` é o ID da immediate que poderá ser usado depois com `window.clearImmediate` (en-US).
* `func` é a função que será executada.

Todos parametros serão passados diretamente para sua função .

Notas
-----

O método `window.clearImmediate` (en-US) pode ser usado para limpar as ações immediate, como por exemplo `window.clearTimeout` (en-US) para `window.setTimeout` (en-US).

Esse método pode ser usado ao invés de `setTimeout(fn, 0)`, para executar operações pesadas.

Essa função pode ser emulada de algumas maneiras:

* `window.postMessage` (en-US) pode ser usada para disparar um immediate mas produzindo um callback. Tenha em mente que o Internet Explorer 8 inclui uma versão síncrona do postMessage, que não deverá ser usado como alternativa.
* MessageChannel pode ser usado com confiança dentro de Web Workers onde a semantica do postMessage significa que não pode ser usado lá.
* `setTimeout(fn, 0)`*pode* ser usado potencialmente, no entanto, como é apertado em 4ms para temporizadores aninhados com mais de 5 profundidades por especificação HTML, não faz para um polifil adequado para o imediatismo natural de setImmediate.

Todas essas técnicas são incorporadas em um setImmediate polyfill.

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

Não faz parte de denhuma especificação.

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

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

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

`window.clearImmediate` (en-US)
Microsoft setImmediate API Demo


Window.scrollByPages() - APIs da Web

Window.scrollByPages()
======================

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

### Resumo

Rola o documento atual para a página especificada.

### Sintaxe
```

window.scrollByPages(pages)
```

### Parâmetros

* **`pages`** é o número de páginas a serem roladas.
* **`pages`** pode ser um número inteiro positivo ou negativo.
### Exemplo
```

// rola o documento para baixo até a página 1
window.scrollByPages(1);

// rola o documento para cima até a página 1
window.scrollByPages(-1);
```

### Notas

Veja também window.scrollBy, window.scrollByLines, window.scroll, window.scrollTo.

### Specification

DOM Level 0. Not part of specification.


Window.getSelection() - APIs da Web

Window.getSelection()
=====================

Resumo
------

Retorna um objeto `Selection` representando a parte do texto selecionada pelo usuário ou a posição atual do cursor.

Syntax
------
```

selection = window.getSelection();
```

* `selection` é um objeto `Selection`. Quando convertido para string, seja adicionando uma string vazia (" ") ou usando `String.toString()`, esse objeto retorna o texto selecionado.
Example
-------

```js
function foo() {
  var selObj = window.getSelection();
  alert(selObj);
  var selRange = selObj.getRangeAt(0);
  // do stuff with the range
}
```

Nota
----

### Representação do objeto Selection em String

No JavaScript, quando um objeto é passado para uma função que espera uma string (como `window.alert()` ou `document.write()`), o método `toString()` do objeto é chamado e o valor retornado é passado para a função. Isso pode fazer com que o objeto pareça ser uma string quando usado com outras funções quando na verdade é um objeto com propriedades e métodos.

No exemplo acima, `selObj.toString()` é chamado automaticamente quando é passado para `window.alert()`. Contudo, tentar usar propriedades ou métodos do objeto JavaScript String como `length` ou `substr diretamente no objeto` `Selection` resultará em erro se o objeto não possuir essa propriedade ou método e pode retornar valores inesperados mesmo se os tiver. Para usar um objecto `Selection` como uma string, faça a chamada do seu método `toString()` diretamente:

```js
var selectedText = selObj.toString();
```

* `selObj` é um objeto `Selection`.
* `selectedText` é uma string (Selected text).
### Objectos Relacionados

É útil também notar que você pode chamar `Document.getSelection()`, que funciona de forma idêntica.

Inputs HTML provêm APIs mais simples para se trabalhar com seleções (veja `HTMLInputElement.setSelectionRange()`).

Note a diferença entre *selection* e *focus*. `Document.activeElement` retorna o elemento com foco.

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

| Specification |
| --- |
| Selection API # dom-window-getselection |

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

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

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

* `Selection`
* `Range` (en-US)
* `Document.getSelection()`
* `HTMLInputElement.setSelectionRange()`
* `Document.activeElement`, `HTMLElement.focus()` (en-US), and `HTMLElement.blur()` (en-US)


resize - APIs da Web

resize
======

O evento **`resize`** é disparado quando o document view é redimensionado.

O evento manipulador pode ser registrado para o evento `resize` usando o atributo `window.onresize` ou usando `window.addEventListener('resize', ...)`

Em alguns browsers mais recentes é possível registrar o evento manipulador `resize` em qualquer elemento HTML. E ainda é possível adicionar atributos `onresize` ou usar `addEventListener()` para implementar o manipulador em qualquer elemento. Entretanto, eventos `resize` apenas são disparados sobre (enviados para) o objeto `window` (`document.defaultView`). Apenas manipuladores registrados no objeto `window` recebem os eventos.

Existe uma nova proposta (2017) para permitir que todos os elementos sejam notificados de alterações de tamanho. Veja Resize Observer para ler o documento rascunho, e Github issues para ler as discussões do que está ativo.

Informações gerais
------------------

Specifications

DOM L3, CSSOM View

Interface

UIEvent

Bubbles

Não

Cancelable

Não

Target

defaultView (window)

Default Action

Nenhuma

Properties
----------

| Property | Type | Description |
| --- | --- | --- |
| `target` Somente leitura  | `EventTarget` | O evento alto (o primeiro alvo na árvore DOM). |
| `type` Somente leitura  | `DOMString` | O tipo de evento. |
| `bubbles` Somente leitura  | `Boolean` (en-US) | Se o evento normalmente bubbles ou não. |
| `cancelable` Somente leitura  | `Boolean` (en-US) | Se o evento é cancelado ou não. |
| `view` Somente leitura  | `WindowProxy` | `document.defaultView` (`window` do documento) |
| `detail` Somente leitura  | `long` (`float`) | 0. |

Examples
--------

Como os eventos `resize` podem ser altamente executados, o evento manipulador não deve executar operações computacionais caras como modificações DOM. Em vez disso, recomenda-se diminuir o impacto do evento usando requestAnimationFrame (en-US), setTimeout (en-US) ou customEvent (en-US)\*, como a seguir:

**\* IMPORTANT:** Por favor note que IE11 precisa do customEvent (en-US) polyfill para funcionar corretamente.

### requestAnimationFrame + customEvent

```js
(function () {
  var throttle = function (type, name, obj) {
    obj = obj || window;
    var running = false;
    var func = function () {
      if (running) {
        return;
      }
      running = true;
      requestAnimationFrame(function () {
        obj.dispatchEvent(new CustomEvent(name));
        running = false;
      });
    };
    obj.addEventListener(type, func);
  };

  /\* init - you can init any event \*/
  throttle("resize", "optimizedResize");
})();

// handle event
window.addEventListener("optimizedResize", function () {
  console.log("Resource conscious resize callback!");
});
```

### requestAnimationFrame

```js
var optimizedResize = (function () {
  var callbacks = [],
    running = false;

  // fired on resize event
  function resize() {
    if (!running) {
      running = true;

      if (window.requestAnimationFrame) {
        window.requestAnimationFrame(runCallbacks);
      } else {
        setTimeout(runCallbacks, 66);
      }
    }
  }

  // run the actual callbacks
  function runCallbacks() {
    callbacks.forEach(function (callback) {
      callback();
    });

    running = false;
  }

  // adds callback to loop
  function addCallback(callback) {
    if (callback) {
      callbacks.push(callback);
    }
  }

  return {
    // public method to add additional callback
    add: function (callback) {
      if (!callbacks.length) {
        window.addEventListener("resize", resize);
      }
      addCallback(callback);
    },
  };
})();

// start process
optimizedResize.add(function () {
  console.log("Resource conscious resize callback!");
});
```

### setTimeout

```js
(function() {

  window.addEventListener("resize", resizeThrottler, false);

  var resizeTimeout;
  function resizeThrottler() {
    // ignore resize events as long as an actualResizeHandler execution is in the queue
    if ( !resizeTimeout ) {
      resizeTimeout = setTimeout(function() {
        resizeTimeout = null;
        actualResizeHandler();

       // The actualResizeHandler will execute at a rate of 15fps
       }, 66);
    }
  }

  function actualResizeHandler() {
    // handle the resize event
    ...
  }

}());
```


Location.assign() - APIs da Web

Location.assign()
=================

O método **`Location.assign()`** faz com que o navegador carregue o documento na URL especificada e a exiba na janela atual.

Se a tatefa não poder ser executada por alguma violação de segurança, uma `DOMException` (en-US) do tipo `SECURITY_ERROR` será lançada. Isso acontece se a origem do script chamador do método for diferente da origem da página originalmente descrita no objeto `Location`, geralmente quando o script está hospedado em um dominio diferente.

Se a URL especificada for inválida, uma `DOMException` (en-US) do tipo `SYNTAX_ERROR` será lançada.

Sintaxe
-------
```

location.assign(url);
```

### Parâmetros

*url*

É uma `DOMString` contendo a URL da página destino.

Exemplos
--------

```js
// Navega para a página do artigo Location.reload
document.location.assign(
  "https://developer.mozilla.org/pt-BR/docs/Web/API/Location.reload",
);
```

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

| Specification |
| --- |
| HTML Standard # dom-location-assign-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`.
* Métodos Similares: `Location.replace()` (en-US) and `Location.reload()`.


location: reload() method - APIs da Web

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 - APIs da Web

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.getContext() - APIs da Web

HTMLCanvasElement.getContext()
==============================

O metodo **`HTMLCanvasElement.getContext()`** retorna um contexto de desenho no canvas, ou `null` se o contexto identificado não é suportado.

Syntax
------
```

canvas.getContext(contextType, contextAttributes);
```

### Parametros

contextType

É um `DOMString` contendo o contexto identificador definindo o contexto de desenho associado ao canvas. Os valores possiveis são:

* `"2d"`, levando a criação de um objeto `CanvasRenderingContext2D` representando uma renderização bidimensional.
* `"webgl"` (or `"experimental-webgl"`) que criará um objeto `WebGLRenderingContext` (en-US) representando uma renderização tridimensional. Esse contexto está disponivel somente em browsers que implementam WebGL versão 1 (OpenGL ES 2.0).
* `"webgl2"` que criará um objeto `WebGL2RenderingContext` (en-US) representando uma renderização tridimensional. Esse contexto está disponivel somente em browsers que implementam WebGL versão 2 (OpenGL ES 3.0).
Experimental
* `"bitmaprenderer"` que criará um `ImageBitmapRenderingContext` (en-US) que apenas provê a funcionalidade de substituir o conteúdo do canvas pelo de um `ImageBitmap` (en-US).

**Nota:** O identificador "`experimental-webgl`" é usado em novas implementações do WebGL. Essas implementações ou ainda não passaram nos casos de teste, ou os drivers gráficos na plataforma ainda não estão estáveis. O Khronos Group certifica as implementações do WebGL sob certas regas de conformidade.

`contextAttributes`

Você pode usar alguns atributos de contexto quando criar o seu contexto de renderização, por exemplo:

```js
canvas.getContext("webgl", { antialias: false, depth: false });
```

Atributos de contexto 2d:

* **`alpha`**: Boleano que indica se o canvas contém um canal alfa. Se definido como `false`, o browser saberá que o resultado será sempre opaco, o que pode acelerar o desenho de conteudo transparente e imagens.
* Non-standard
 (Gecko only) **`willReadFrequently`**: Boleano que indica quando uma série de operações read-back estão planejadas. Isso forçará o uso de renderização 2D no canvas via software (ao invés de utilizar GPU) o que pode salvar memoria quando `getImageData()` (en-US) for chamado frequentemente. Essa opção está disponivel somente, se a flag `gfx.canvas.willReadFrequently.enable` está definida como `true` (o que, por padrão, é o caso do B2G/Firefox OS apenas).
* Non-standard
 (Blink only) **`storage`**: String que indica qual storage é usado ("persistent" por padrão).

Atributos de contexto WebGL:

* **`alpha`**: Boleano que indica se o canvas contém um buffer alfa.
* **`depth`**: Boleano que indica que o buffer do desenho tem um buffer de profundidade de pelo menos 16 bits.
* **`stencil`**: Boleano que indica que o buffer do desenho tem um buffer de stencil de pelo menos 8 bits.
* **`antialias`**: Boleano que indica se deve realizar o anti-aliasing ou não.
* **`premultipliedAlpha`**: Boleano que indica se o compositor da página vai assumir que o buffer do desenho contendo cores com alfa pré-multiplicado.
* **`preserveDrawingBuffer`**: Se o valor é `true` os buffers não serão limpos e preservarão seus valores até serem limpos ou subrescritos pelo autor.
* **`failIfMajorPerformanceCaveat`**: Boleano que indica se um contexto será criado se a performance do sistema for baixa.

### Return value

Um `RenderingContext` que pode ser:

* `CanvasRenderingContext2D` para `"2d"`,
* `WebGLRenderingContext` (en-US) para `"webgl"` e `"experimental-webgl"`,
* `WebGL2RenderingContext` (en-US) para `"webgl2"` ou
* `ImageBitmapRenderingContext` (en-US) para `"bitmaprenderer"`.

Se o *contextType* não bater com um possivel contexto de desenho, `null` é retornado.

Examples
--------

Dado este elemento `<canvas>`:

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

Você pega um contexto `2d` do canvas com o código a seguir:

```js
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
console.log(ctx); // CanvasRenderingContext2D { ... }
```

Agora você tem contexto de renderização 2d para o canvas e você pode desenhar nele.

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

| Specification |
| --- |
| HTML Standard # dom-canvas-getcontext-dev |

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

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

See also
--------

* A definição de interface, `HTMLCanvasElement` (en-US).
* `OffscreenCanvas.getContext()` (en-US)
* Contextos de renderização disponiveis: `CanvasRenderingContext2D`, `WebGLRenderingContext` (en-US) and `WebGL2RenderingContext` (en-US) and `ImageBitmapRenderingContext` (en-US).


HTMLCanvasElement.height - APIs da Web

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


HTMLCanvasElement.toDataURL() - APIs da Web

HTMLCanvasElement.toDataURL()
=============================

O método **`HTMLCanvasElement.toDataURL()`** retorna uma data URI (en-US), contendo uma representação da imagem no formato especificado pelo parâmetro `type` (por padrão, esse valor é PNG). A resolução da imagem retornada é de 96 dpi.

* Se a altura ou largura do canvas for `0`, será retornada a string `"data:,"`.
* Se o tipo solicitado não for `image/png`, mas o valor retornado começa com `data:image/png`, então o tipo da requisição não é suportado.
* O Chrome também suporta o tipo `image/webp`.
Sintaxe
-------
```

canvas.toDataURL(type, encoderOptions);
```

### Parâmetros

`type` Optional

Uma `DOMString` indicando o formato da imagem. Por padrão, o formato definido é `image/png`.

`encoderOptions` Optional

 Um `Number` entre `0` e `1`, indicando a qualidade da imagem solicitada pelo tipo `image/jpeg` ou `image/webp`.
 Se esse argumento for outro valor que não de `0` a `1`, então o valor padrão (`0.92)` será usado. Outros valores serão ignorados.

### Valor retornado

Uma `DOMString` contendo a data URI (en-US) solicitada.

Exemplos
--------

Dado este elemento `<canvas>`:

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

Você poderá capturar a data-URL do canvas com as seguintes linhas:

```js
var canvas = document.getElementById("canvas");
var dataURL = canvas.toDataURL();
console.log(dataURL);
// "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby
// blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"
```

### Defindo a qualidade de imagens jpeg

```js
var fullQuality = canvas.toDataURL("image/jpeg", 1.0);
// data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...9oADAMBAAIRAxEAPwD/AD/6AP/Z"
var mediumQuality = canvas.toDataURL("image/jpeg", 0.5);
var lowQuality = canvas.toDataURL("image/jpeg", 0.1);
```

### Exemplo: Alterando imagens dinamicamente

Você poderá utilizar esta técnica em associação com os eventos do mouse para alterar dinamicamente uma imagem (escala de cinza vs. cor, neste exemplo):

#### HTML

```html
<img class="grayscale" src="myPicture.png" alt="Description of my picture" />
```

#### JavaScript

```js
window.addEventListener("load", removeColors);

function showColorImg() {
  this.style.display = "none";
  this.nextSibling.style.display = "inline";
}

function showGrayImg() {
  this.previousSibling.style.display = "inline";
  this.style.display = "none";
}

function removeColors() {
  var aImages = document.getElementsByClassName("grayscale"),
    nImgsLen = aImages.length,
    oCanvas = document.createElement("canvas"),
    oCtx = oCanvas.getContext("2d");
  for (
    var nWidth, nHeight, oImgData, oGrayImg, nPixel, aPix, nPixLen, nImgId = 0;
    nImgId < nImgsLen;
    nImgId++
  ) {
    oColorImg = aImages[nImgId];
    nWidth = oColorImg.offsetWidth;
    nHeight = oColorImg.offsetHeight;
    oCanvas.width = nWidth;
    oCanvas.height = nHeight;
    oCtx.drawImage(oColorImg, 0, 0);
    oImgData = oCtx.getImageData(0, 0, nWidth, nHeight);
    aPix = oImgData.data;
    nPixLen = aPix.length;
    for (nPixel = 0; nPixel < nPixLen; nPixel += 4) {
      aPix[nPixel + 2] =
        aPix[nPixel + 1] =
        aPix[nPixel] =
          (aPix[nPixel] + aPix[nPixel + 1] + aPix[nPixel + 2]) / 3;
    }
    oCtx.putImageData(oImgData, 0, 0);
    oGrayImg = new Image();
    oGrayImg.src = oCanvas.toDataURL();
    oGrayImg.onmouseover = showColorImg;
    oColorImg.onmouseout = showGrayImg;
    oCtx.clearRect(0, 0, nWidth, nHeight);
    oColorImg.style.display = "none";
    oColorImg.parentNode.insertBefore(oGrayImg, oColorImg);
  }
}
```

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

| Specification |
| --- |
| HTML Standard # dom-canvas-todataurl-dev |

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

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

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

* A interface que a define, `HTMLCanvasElement` (en-US).
* Data URIs (en-US) na referência HTTP.


Option() - APIs da Web

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.


Usando a API Web Storage - APIs da Web

Usando a API Web Storage
========================

A API Web Storage fornece mecanismos pelos quais os navegadores podem armazenar pares de chaves/valores de uma maneira muito mais segura e intuitiva do que usar cookies. Este artigo fornece um passo a passo sobre como usar essa tecnologia.

Conceitos básicos
-----------------

Objetos `Storage` são simples conjuntos contendo pares de chave/valor, de forma parecida com objetos, porém eles permanecem intactos mesmo após a página ser recarregada. As chaves e valores são sempre strings (note que chaves cujo nome seja um número inteiro serão automaticamente convertidas par strings, assim como acontece nos objetos). Você pode acessar esses valores como você faria com um objeto ou usando os métodos `Storage.getItem()` e `Storage.setItem()`. As três linhas seguintes definem o valor de `corDefinida` de maneiras diferentes, mas com o mesmo resultado:

```js
localStorage.corDefinida = "#a4509b";
localStorage["corDefinida"] = "#a4509b";
localStorage.setItem("corDefinida", "#a4509b");
```

**Nota:** Recomendamos que você utilize a API Web Storage (`setItem`, `getItem`, `removeItem`, `key`, `length`) para evitar as armadilhas associadas ao uso de objetos literais como mapas de chave-valor.

Os dois mecanismos presentes na Web Storage são os seguintes:

* O `sessionStorage` mantém uma área de armazenamento separada para cada origem diferente. Cada uma dessas áreas fica disponível durante a sessão da página (ou seja, enquanto a aba do navegador estiver aberta, incluindo recarregamentos e restaurações de páginas).
* O `localStorage` faz a mesma coisa, mas os dados armazenados aqui continuam existindo mesmo depois do navegador ser fechado e reaberto.

Esses mecanismos estão disponíveis através das propriedades `Window.sessionStorage` e `Window.localStorage` (de forma mais específica, em navegadores compatíveis, o objeto `Window` implementa os objetos `WindowLocalStorage` e `WindowSessionStorage`, aos quais as propriedades `localStorage` and `sessionStorage` pertencem, respectivamente) — invocar uma dessas propriedades irá criar uma instância do objeto `Storage`, através do qual itens de dados podem ser definidos, acessados e removidos. Cada origem recebe objetos Storage diferentes para `sessionStorage` and `localStorage` — eles operam e são controlados separadamente.

Por exemplo, chamar `localStorage` pela primeira vez em um documento retornará um objeto `Storage`; chamar `sessionStorage` em um documento retornará um outro objeto `Storage`. Ambos podem ser manipulados da mesma maneira, mas de forma isolada.

Detectando a disponibilidade do localStorage
--------------------------------------------

Para poder usarmos o localStorage, devemos antes verificar se ele é compatível e está disponível na sessão atual de navegação.

### Testando a disponibilidade

Navegadores compatíveis com localStorage terão uma propriedade no objeto `window` chamada `localStorage`. Contudo, por várias razões, apenas verificar se essa propriedade existe pode gerar erros. Se ela existir, ainda não haverá garantias de que o localStorage está de fato disponível para uso, já que vários navegadores fornecem opções que desativam o localStorage. Dessa forma, um navegador pode ser *compatível* com o localStorage, mas também pode não torná-lo *disponível* para os scripts usarem. One example of that is Safari, which in Private Browsing mode gives us an empty localStorage object with a quota of zero, effectively making it unusable. However, we might still get a legitimate QuotaExceededError, which only means that we've used up all available storage space, but storage is actually *available*. Our feature detect should take these scenarios into account.

Here is a function that detects whether localStorage is both supported and available:

```js
function storageAvailable(type) {
  try {
    var storage = window[type],
      x = "\_\_storage\_test\_\_";
    storage.setItem(x, x);
    storage.removeItem(x);
    return true;
  } catch (e) {
    return (
      e instanceof DOMException &&
      // everything except Firefox
      (e.code === 22 ||
        // Firefox
        e.code === 1014 ||
        // test name field too, because code might not be present
        // everything except Firefox
        e.name === "QuotaExceededError" ||
        // Firefox
        e.name === "NS\_ERROR\_DOM\_QUOTA\_REACHED") &&
      // acknowledge QuotaExceededError only if there's something already stored
      storage.length !== 0
    );
  }
}
```

And here is how you would use it:

```js
if (storageAvailable("localStorage")) {
  // Yippee! We can use localStorage awesomeness
} else {
  // Too bad, no localStorage for us
}
```

You can test for sessionStorage instead by calling `storageAvailable('sessionStorage')`.

See here for a brief history of feature-detecting localStorage.

Example
-------

To illustrate some typical web storage usage, we have created a simple example, imaginatively called **Web Storage Demo**. The landing page provides controls that can be used to customize the color, font, and decorative image:

![](/pt-BR/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API/landing.png)When you choose different options, the page is instantly updated; in addition, your choices are stored in `localStorage`, so that when you leave the page and load it again, later on, your choices are remembered.

We have also provided an event output page — if you load this page in another tab, then make changes to your choices in the landing page, you'll see the updated storage information outputted as a `StorageEvent` (en-US) is fired.

![](/pt-BR/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API/event-output.png)

**Nota:** As well as viewing the example pages live using the above links, you can also check out the source code.

### Testing whether your storage has been populated

To start with on main.js, we will test whether the storage object has already been populated (i.e., the page was previously accessed):

```js
if (!localStorage.getItem("bgcolor")) {
  populateStorage();
} else {
  setStyles();
}
```

The `Storage.getItem()` method is used to get a data item from storage; in this case, we are testing to see whether the `bgcolor` item exists; if not, we run `populateStorage()` to add the existing customization values to the storage. If there are already values there, we run `setStyles()` to update the page styling with the stored values.

**Note**: You could also use `Storage.length` to test whether the storage object is empty or not.

### Getting values from storage

As noted above, values can be retrieved from storage using `Storage.getItem()`. This takes the key of the data item as an argument, and returns the data value. For example:

```js
function setStyles() {
  var currentColor = localStorage.getItem("bgcolor");
  var currentFont = localStorage.getItem("font");
  var currentImage = localStorage.getItem("image");

  document.getElementById("bgcolor").value = currentColor;
  document.getElementById("font").value = currentFont;
  document.getElementById("image").value = currentImage;

  htmlElem.style.backgroundColor = "#" + currentColor;
  pElem.style.fontFamily = currentFont;
  imgElem.setAttribute("src", currentImage);
}
```

Here, the first three lines grab the values from local storage. Next, we set the values displayed in the form elements to those values, so that they keep in sync when you reload the page. Finally, we update the styles/decorative image on the page, so your customization options come up again on reload.

### Setting values in storage

`Storage.setItem()` is used both to create new data items, and (if the data item already exists) update existing values. This takes two arguments — the key of the data item to create/modify, and the value to store in it.

```js
function populateStorage() {
  localStorage.setItem("bgcolor", document.getElementById("bgcolor").value);
  localStorage.setItem("font", document.getElementById("font").value);
  localStorage.setItem("image", document.getElementById("image").value);

  setStyles();
}
```

The `populateStorage()` function sets three items in local storage — the background color, font, and image path. It then runs the `setStyles()` function to update the page styles, etc.

We've also included an `onchange` handler on each form element so that the data and styling are updated whenever a form value is changed:

```js
bgcolorForm.onchange = populateStorage;
fontForm.onchange = populateStorage;
imageForm.onchange = populateStorage;
```

### Responding to storage changes with the StorageEvent

The `StorageEvent` (en-US) is fired whenever a change is made to the `Storage` object (note that this event is not fired for sessionStorage changes). This won't work on the same page that is making the changes — it is really a way for other pages on the domain using the storage to sync any changes that are made. Pages on other domains can't access the same storage objects.

On the events page (see events.js) the only JavaScript is as follows:

```js
window.addEventListener("storage", function (e) {
  document.querySelector(".my-key").textContent = e.key;
  document.querySelector(".my-old").textContent = e.oldValue;
  document.querySelector(".my-new").textContent = e.newValue;
  document.querySelector(".my-url").textContent = e.url;
  document.querySelector(".my-storage").textContent = e.storageArea;
});
```

Here we add an event listener to the `window` object that fires when the `Storage` object associated with the current origin is changed. As you can see above, the event object associated with this event has a number of properties containing useful information — the key of the data that changed, the old value before the change, the new value after that change, the URL of the document that changed the storage, and the storage object itself.

### Deleting data records

Web Storage also provides a couple of simple methods to remove data. We don't use these in our demo, but they are very simple to add to your project:

* `Storage.removeItem()` takes a single argument — the key of the data item you want to remove — and removes it from the storage object for that domain.
* `Storage.clear()` takes no arguments, and simply empties the entire storage object for that domain.
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.

See also
--------

* Web Storage API landing page


Attr.localName - APIs da Web

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 - APIs da Web

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 - APIs da Web

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


Arrastar e soltar arquivos - APIs da Web

Arrastar e soltar arquivos
==========================

As interfaces HTML Drag and Drop permitem que os aplicativos da Web arrastem e soltem arquivos em uma página da Web. Este documento descreve como um aplicativo pode aceitar um ou mais arquivos que são arrastados do *gerenciador de arquivos da plataforma subjacente* e soltado s em uma página da Web.

Os principais passos para o drag and drop é definir a *drop zone* (ou seja definir um elemento para a queda dos arquivos) e definir event handlers para os eventos `drop (en-US)` e `dragover (en-US)` . Essas etapas são descritas abaixo, incluindo exemplos de trechos de código. O codigo fonte esta disponivel em MDN's drag-and-drop repository (pull requests e/ou issues são bem-vindas).

**Nota:** Nota: `HTML drag and drop`Define duas APIs diferentes para suportar arrastar e soltar arquivos. Uma API é a interface `DataTransfer` e a segunda API é a interface `DataTransferItem` (en-US) e `DataTransferItemList` (en-US). Este exemplo ilustra o uso de ambas as APIs (e não usa nehuma interface específica do Gecko).

Definindo a drop *zone*
-----------------------

O elemento de destino do evento `drop (en-US)` precisa de um event handler global `ondrop` (en-US) O seguinte trecho de código mostra como isso é feito com um elemento: `<div>`

```html
<div id="drop\_zone" ondrop="dropHandler(event);">
  <p>Drag one or more files to this Drop Zone ...</p>
</div>
```

Normalmente, um aplicativo inclui um event handler `dragover (en-US)` no elemento de destino do drop e esse manipulador desativará o comportamento de arraste padrão do navegador. Para adicionar esse handler, você precisa incluir um event handler global `ondragover` (en-US):

```html
<div
 id="drop\_zone"
 ondrop="dropHandler(event);"
 ondragover="dragOverHandler(event);">
  <p>Drag one or more files to this Drop Zone ...</p>
</div>
```

Por fim, um aplicativo pode querer estilizar o elemento da drop zone para indicar visualmente que o elemento é uma drop zone. Neste exemplo, o elemento da drop zone usa o seguinte estilo:

```css
#drop\_zone {
  border: 5px solid blue;
  width: 200px;
  height: 100px;
}
```

**Nota:** Nota: Observe que os eventos `dragstart` e `dragend` não são acionados ao arrastar um arquivo para o navegador do OS.

Processo de drop
----------------

O evento `drop (en-US)` é acionado quando o usuário solta o(s) arquivo(s) no drop handler, se o navegador suportar a interface `DataTransferItemList` (en-US) o metodo `getAsFile()` (en-US) será usado para acessar cada arquivo; caso contrário, a interface `DataTransfer` usara a propriedade `files` (en-US) para acessar cada arquivo.

Este exemplo mostra como escrever o nome de cada arquivo arrastado, no console. Em um aplicativo real, um aplicativo pode querer processar um arquivo usando o `File API`.

Observe que neste exemplo, Qualquer item de arrasto que não seja um arquivo é ignorado.

```js
function dropHandler(ev) {
  console.log("File(s) dropped");

  // Impedir o comportamento padrão (impedir que o arquivo seja aberto)
  ev.preventDefault();

  if (ev.dataTransfer.items) {
    // Use a interface DataTransferItemList para acessar o (s) arquivo (s)
    for (var i = 0; i < ev.dataTransfer.items.length; i++) {
      // Se os itens soltos não forem arquivos, rejeite-os
      if (ev.dataTransfer.items[i].kind === "file") {
        var file = ev.dataTransfer.items[i].getAsFile();
        console.log("... file[" + i + "].name = " + file.name);
      }
    }
  } else {
    // Use a interface DataTransfer para acessar o (s) arquivo (s)
    for (var i = 0; i < ev.dataTransfer.files.length; i++) {
      console.log(
        "... file[" + i + "].name = " + ev.dataTransfer.files[i].name,
      );
    }
  }
}
```

Impedir o evento de arrastar padrão do navegador
------------------------------------------------

O seguinte event handler `dragover (en-US)` chama `preventDefault()` para desativar o manipulador padrão de arrastar e soltar do navegador.

```js
function dragOverHandler(ev) {
  console.log("File(s) in drop zone");

  // Impedir o comportamento padrão (impedir que o arquivo seja aberto)
  ev.preventDefault();
}
```

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

* HTML Drag and Drop API
* Drag Operations (en-US)
* HTML5 Living Standard: Drag and Drop


RandomSource.getRandomValues() - APIs da Web

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 - APIs da Web

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 - APIs da Web

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 »


Advanced animations - APIs da Web

Advanced animations
===================

* « Previous
* Next » (en-US)

No último capítulo nós fizemos algumas animações básicas e fomos conhecer caminhos para conseguir com que as coisas se movessem. Nesta parte prestaremos mais atenção nos movimentos e vamos adicionar algumas físicas para fazer nossas animações mais avançadas.

Desenhe uma bola
----------------

Nós estamos indo usar uma bola para nossa animação estudada. Então vamos pintar aquela bola desenhada no canvas. O seguinte código configurará.

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

Como usual, nós precisamos de um contexto de desenho primeiro. Para desenhar a bola, nós criaremos um objeto bola ao qual contém propriedades e um método draw() para pintar no canvas.

```js
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var ball = {
  x: 100,
  y: 100,
  radius: 25,
  color: "blue",
  draw: function () {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI \* 2, true);
    ctx.closePath();
    ctx.fillStyle = this.color;
    ctx.fill();
  },
};

ball.draw();
```

Nada de especial aqui, a bola é atualmente um simples círculos e desenha com ajuda de

`arc()` method.

Adicionando velocidade
----------------------

Agora que você tem a bola, Nós estamos prontos para adicionar uma animação como nós temos aprendido no último capítulo deste tutorial. Denovo, `window.requestAnimationFrame()` ajuda-nos a controlar a animação. a bola pega o movimento adicionando um vetor de velocidade para a posição. Para cada frame, N[ós também clearo canvas para remover velhor círculos da prioridade dos frames.

```js
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var raf;

var ball = {
  x: 100,
  y: 100,
  vx: 5,
  vy: 2,
  radius: 25,
  color: "blue",
  draw: function () {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI \* 2, true);
    ctx.closePath();
    ctx.fillStyle = this.color;
    ctx.fill();
  },
};

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ball.draw();
  ball.x += ball.vx;
  ball.y += ball.vy;
  raf = window.requestAnimationFrame(draw);
}

canvas.addEventListener("mouseover", function (e) {
  raf = window.requestAnimationFrame(draw);
});

canvas.addEventListener("mouseout", function (e) {
  window.cancelAnimationFrame(raf);
});

ball.draw();
```

Limites
-------

Sem um teste de limite de colisão nossa bola correria para fora do canvas rapidamente. Nós precisamos checar se a posição x e y da bola está fora das dimensões do canvas e invertida a direção do vetor de velocidade. Para fazer isto, Nós adicionamos a seguinte checagem para o método draw():

```js
if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
  ball.vy = -ball.vy;
}
if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
  ball.vx = -ball.vx;
}
```

### Primeira demonstração

Deixe-me ver como isto fica em ação até agora. Mova seu mouse dentro do canvas para iniciar a animação.
```

<canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas>
```

```
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var raf;

var ball = {
  x: 100,
  y: 100,
  vx: 5,
  vy: 2,
  radius: 25,
  color: "blue",
  draw: function () {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI \* 2, true);
    ctx.closePath();
    ctx.fillStyle = this.color;
    ctx.fill();
  },
};

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ball.draw();
  ball.x += ball.vx;
  ball.y += ball.vy;

  if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
    ball.vy = -ball.vy;
  }
  if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
    ball.vx = -ball.vx;
  }

  raf = window.requestAnimationFrame(draw);
}

canvas.addEventListener("mouseover", function (e) {
  raf = window.requestAnimationFrame(draw);
});

canvas.addEventListener("mouseout", function (e) {
  window.cancelAnimationFrame(raf);
});

ball.draw();
```

Aceleração
----------

Para fazer o movimento tão real, você para jogar com a velocidade como isto, por exemplo:

```js
ball.vy \*= 0.99;
ball.vy += 0.25;
```

Esta diminuição da velocidade vertical para cada frame. Assim que a bola somente saltar no chão no final.
```

<canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas>
```

```
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var raf;

var ball = {
  x: 100,
  y: 100,
  vx: 5,
  vy: 2,
  radius: 25,
  color: "blue",
  draw: function () {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI \* 2, true);
    ctx.closePath();
    ctx.fillStyle = this.color;
    ctx.fill();
  },
};

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ball.draw();
  ball.x += ball.vx;
  ball.y += ball.vy;
  ball.vy \*= 0.99;
  ball.vy += 0.25;

  if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
    ball.vy = -ball.vy;
  }
  if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
    ball.vx = -ball.vx;
  }

  raf = window.requestAnimationFrame(draw);
}

canvas.addEventListener("mouseover", function (e) {
  raf = window.requestAnimationFrame(draw);
});

canvas.addEventListener("mouseout", function (e) {
  window.cancelAnimationFrame(raf);
});

ball.draw();
```

Efeito de arrastar
------------------

Até agora nós temos feito uso do `clearRect` méthodo quando limpar as prioridades do frame.Se você substituir este método com um semi-transparente `fillRect`, você pode fácilmente criar um efeito de arrastar.

```js
ctx.fillStyle = "rgba(255, 255, 255, 0.3)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
```

```
<canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas>
```

```
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var raf;

var ball = {
  x: 100,
  y: 100,
  vx: 5,
  vy: 2,
  radius: 25,
  color: "blue",
  draw: function () {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI \* 2, true);
    ctx.closePath();
    ctx.fillStyle = this.color;
    ctx.fill();
  },
};

function draw() {
  ctx.fillStyle = "rgba(255, 255, 255, 0.3)";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ball.draw();
  ball.x += ball.vx;
  ball.y += ball.vy;
  ball.vy \*= 0.99;
  ball.vy += 0.25;

  if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
    ball.vy = -ball.vy;
  }
  if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
    ball.vx = -ball.vx;
  }

  raf = window.requestAnimationFrame(draw);
}

canvas.addEventListener("mouseover", function (e) {
  raf = window.requestAnimationFrame(draw);
});

canvas.addEventListener("mouseout", function (e) {
  window.cancelAnimationFrame(raf);
});

ball.draw();
```

Adicione um controle de mouse
-----------------------------

Para conseguir alguns controles sobre a bola, nós podemos fazer isto seguindo nosso mouse usando o evento mouseover (en-US), por exemplo. O clique por exemplo. O evento `clique que` libera a bola e deixa seu limite de novo.
```

<canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas>
```

```js
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var raf;
var running = false;

var ball = {
  x: 100,
  y: 100,
  vx: 5,
  vy: 1,
  radius: 25,
  color: "blue",
  draw: function () {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI \* 2, true);
    ctx.closePath();
    ctx.fillStyle = this.color;
    ctx.fill();
  },
};

function clear() {
  ctx.fillStyle = "rgba(255, 255, 255, 0.3)";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
}

function draw() {
  clear();
  ball.draw();
  ball.x += ball.vx;
  ball.y += ball.vy;

  if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
    ball.vy = -ball.vy;
  }
  if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
    ball.vx = -ball.vx;
  }

  raf = window.requestAnimationFrame(draw);
}

canvas.addEventListener("mousemove", function (e) {
  if (!running) {
    clear();
    ball.x = e.clientX;
    ball.y = e.clientY;
    ball.draw();
  }
});

canvas.addEventListener("click", function (e) {
  if (!running) {
    raf = window.requestAnimationFrame(draw);
    running = true;
  }
});

canvas.addEventListener("mouseout", function (e) {
  window.cancelAnimationFrame(raf);
  running = false;
});

ball.draw();
```

Mova a bola usando seu mouse e libere - o com um clique.

Sair
----

Este curto capítulo somente explica algumas técnicas para criar as mais avançadas animações. Há muito mais! Como adicionar um paddle, alguns bricks, e tornar este demo dentro de um jogo Breakout? Cheque a nossa área de Desenvolvimento de jogos para mais artigos de jogos.

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

* `window.requestAnimationFrame()`
* Efficient animation for web games (en-US)
* « Previous
* Next » (en-US)