diff options
Diffstat (limited to 'files/pt-br/web/api/window')
36 files changed, 3407 insertions, 0 deletions
diff --git a/files/pt-br/web/api/window/alert/index.html b/files/pt-br/web/api/window/alert/index.html new file mode 100644 index 0000000000..028eba5e6c --- /dev/null +++ b/files/pt-br/web/api/window/alert/index.html @@ -0,0 +1,47 @@ +--- +title: Window.alert +slug: Web/API/Window/alert +translation_of: Web/API/Window/alert +--- +<p>{{ APIRef }}</p> + +<p>O método <strong><code>Window.alert()</code></strong> mostra uma caixa de diálogo de aviso com o conteúdo opcionalmente especificado e um botão OK.</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="syntaxbox">window.alert(<em>message</em>);</pre> + +<ul> + <li><code>message</code> é uma string opcional com o texto que você quer exibir na caixa de diálogo, ou, ainda, um objeto a ser convertido em string e exibido.</li> +</ul> + +<h2 id="Example" name="Example">Exemplo</h2> + +<pre class="brush: js">window.alert("Hello world!"); +</pre> + +<p>resulta em:</p> + +<p><img alt="Image:AlertHelloWorld.png" src="/files/130/AlertHelloWorld.png"></p> + +<h2 id="Notes" name="Notes">Notas</h2> + +<p>A caixa de diálogo de aviso deve ser utilizada para mensagens que não requeiram nenhuma resposta da parte do usuário, a não ser o reconhecimento da mensagem.</p> + +<p><span class="comment">The following text is shared between this article, DOM:window.prompt and DOM:window.confirm</span>Caixas de diálogo são janelas modais - elas evitam que o usuário acesse o resto da interface do programa sem ter fechado a caixa de diálogo. Por essa razão, você não deve utilizar excessivamente nenhuma função que crie caixas de diálogo (ou janelas modais).</p> + +<p>Usuários do Chrome (por exemplo, em extensões) devem utilizar os métodos da interface {{interface("nsIPromptService")}} como alternativa.</p> + +<p>{{gecko_minversion_inline("23.0")}} O argumento agora é opcional conforme exigido na especificação.</p> + +<h2 id="Specification" name="Specification">Especificação</h2> + +<p>Especificado no HTML5.</p> + +<h2 id="See_also" name="See_also">Ver também</h2> + +<ul> + <li>{{domxref("window.confirm","confirm")}}</li> + <li>{{domxref("window.prompt","prompt")}}</li> + <li>Para o <a href="/en-US/docs/Chrome" title="/en-US/docs/Chrome">Mozilla Chrome</a>, veja {{ifmethod("nsIPromptService","alert")}} e {{ifmethod("nsIPromptService","alertCheck")}}</li> +</ul> diff --git a/files/pt-br/web/api/window/applicationcache/index.html b/files/pt-br/web/api/window/applicationcache/index.html new file mode 100644 index 0000000000..d4210a0543 --- /dev/null +++ b/files/pt-br/web/api/window/applicationcache/index.html @@ -0,0 +1,33 @@ +--- +title: Window.applicationCache +slug: Web/API/Window/applicationCache +translation_of: Web/API/Window/applicationCache +--- +<p>{{APIRef}}</p> + +<h2 id="Summary" name="Summary">Sumário</h2> + +<p>Returna uma referência para o objeto de cache da janela.</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="syntaxbox"><var>cache</var> = window.applicationCache +</pre> + +<h3 id="Parameters" name="Parameters">Parâmetros</h3> + +<ul> + <li><code>cache</code> é uma referência de objeto para {{domxref("OfflineResourceList")}}.</li> +</ul> + +<h2 id="Specification" name="Specification">Especificação</h2> + +<ul> + <li>{{spec("http://www.w3.org/TR/2008/WD-html5-20080122/#appcache","HTML 5","WD")}}</li> +</ul> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML/Using_the_application_cache">Usando cache de aplicação</a></li> +</ul> diff --git a/files/pt-br/web/api/window/closed/index.html b/files/pt-br/web/api/window/closed/index.html new file mode 100644 index 0000000000..a7f65aff5f --- /dev/null +++ b/files/pt-br/web/api/window/closed/index.html @@ -0,0 +1,59 @@ +--- +title: Window.closed +slug: Web/API/Window/closed +translation_of: Web/API/Window/closed +--- +<div>{{APIRef}}</div> + +<h2 id="Sumário">Sumário</h2> + +<p>Essa propriedade (read-only) indica se a janela referenciada está ou não fechada.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox"><var>isClosed</var> = <var>windowRef</var>.closed; +</pre> + +<dl> + <dt><code>isClosed</code></dt> + <dd>Um booleano. Valores possíveis: + <ul> + <li><code>true</code>: A janela foi fechada.</li> + <li><code>false</code>: A janela está aberta.</li> + </ul> + </dd> +</dl> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Mudar_a_URL_de_uma_janela_a_partir_de_um_popup">Mudar a URL de uma janela a partir de um popup</h3> + +<p>O seguinte exemplo demonstra com uma janela de popup pode alterar a URL da janela que abriu ela. Antes de tentarmos mudar a URL da janela que a abriu, verificamos se a janela atual tem uma janela pai que a abriu usando a propriedade <a href="/en-US/docs/DOM/window.opener">window.opener</a> e que esta não está fechada:</p> + +<pre class="brush:js">// Verifique se o opener existe e não está fechado +if (window.opener && !window.opener.closed) { + window.opener.location.href = "http://www.mozilla.org"; +}</pre> + +<p>Note que popups podem somente acessar a janela que os abriu.</p> + +<h3 id="Atualizando_um_popup_anteriormente_aberto">Atualizando um popup anteriormente aberto</h3> + +<p>Neste exemplo, a função <code>refreshPopupWindow()</code> chama o método <code>reload</code> do objeto <code>location</code> do popup para atualizar seus dados. Se o popup não foi aberto ainda ou o usuário o fechou, uma nova janela é aberta.</p> + +<pre class="brush:js">var popupWindow = null; + +function refreshPopupWindow() { + if (popupWindow && !popupWindow.closed) { + // popupWindow está aberto, atualize-o + popupWindow.location.reload(true); + } else { + // Abra uma nova janela de popup + popupWindow = window.open("popup.html","dataWindow"); + } +} +</pre> + +<h2 id="Especificação">Especificação</h2> + +<p>HTML5</p> diff --git a/files/pt-br/web/api/window/confirm/index.html b/files/pt-br/web/api/window/confirm/index.html new file mode 100644 index 0000000000..e3ced2de5a --- /dev/null +++ b/files/pt-br/web/api/window/confirm/index.html @@ -0,0 +1,49 @@ +--- +title: Window.confirm() +slug: Web/API/Window/confirm +translation_of: Web/API/Window/confirm +--- +<div>{{ApiRef("Window")}}</div> + +<p>O método <code><strong>Window.confirm()</strong></code> mostra uma janela modal com uma mensagem opcional e dois botões, OK e Cancelar.</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre><em>result</em>ado = window.confirm(<em>mensagem</em>); +</pre> + +<ul> + <li><code>mensagem</code> é a string opcional que será mostrada no diálogo.</li> + <li><code>resultado</code> é um booleano indicando se OK ou cancelar foram selecionados (<code>true</code> indicará OK).</li> +</ul> + +<h2 id="Example" name="Example">Exemplo</h2> + +<pre>if (window.confirm("Você realmente quer sair?")) { + window.open("sair.html", "Obrigado pela visita!"); +} +</pre> + +<p>Produzirá:</p> + +<p><img alt="firefox confirm" src="https://mdn.mozillademos.org/files/7163/firefoxcomfirmdialog_zpsf00ec381.png" style="height: 119px; width: 354px;"><br> + </p> + +<h2 id="Notes" name="Notes">Notas</h2> + +<p><span class="comment">The following text is shared between this article, DOM:window.prompt and DOM:window.alert</span> 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 <a href="http://alistapart.com/article/neveruseawarning">evitar o uso de caixas de diálogo para confirmações. </a></p> + +<p>Usuários do <a href="/en-US/Chrome" title="Chrome">Mozilla Chrome</a> (Ex.: Extensões do Firefox) devem utilizar métodos de {{interface("nsIPromptService")}}.</p> + +<p>{{gecko_minversion_inline("23.0")}}O argumento é opcional e não é requerido por especificações.</p> + +<h2 id="Specification" name="Specification">Especificação</h2> + +<p>Especificado em HTML5.</p> + +<h2 id="See_also" name="See_also">Veja Também</h2> + +<ul> + <li>{{domxref("window.alert","alert")}}</li> + <li>{{domxref("window.prompt","prompt")}}</li> +</ul> diff --git a/files/pt-br/web/api/window/crypto/index.html b/files/pt-br/web/api/window/crypto/index.html new file mode 100644 index 0000000000..d303c9dd74 --- /dev/null +++ b/files/pt-br/web/api/window/crypto/index.html @@ -0,0 +1,128 @@ +--- +title: Window.crypto +slug: Web/API/Window/crypto +tags: + - API + - HTML DOM + - Janela + - NeedsCompatTable + - Propriedade + - Referencia + - Window +translation_of: Web/API/Window/crypto +--- +<div>{{APIRef}}</div> + +<p>{{domxref("Window.crypto")}} propriedade somente de leitura, devolve um objeto do tipo {{domxref("Crypto")}} associado ao objeto global. Este objeto permite que páginas da web utilizem recursos de criptografia.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox">var <em>cryptoObj</em> = window.crypto || window.msCrypto; // for IE 11 +</pre> + +<h2 id="Example" name="Example">Exemplo</h2> + +<h4 id="Usando_a_propriedade_domxref(Window.crypto)_para_acessar_o_método_getRandomValues().">Usando a propriedade {{domxref("Window.crypto")}} para acessar o método getRandomValues().</h4> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">genRandomNumbers = function getRandomNumbers() { + var array = new Uint32Array(10); + window.crypto.getRandomValues(array); + + var randText = document.getElementById("myRandText"); + randText.innerHTML = "The random numbers are: " + for (var i = 0; i < array.length; i++) { + randText.innerHTML += array[i] + " "; + } +}</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p id="myRandText">The random numbers are: </p> +<button type="button" onClick='genRandomNumbers()'>Generate 10 random numbers</button></pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{ EmbedLiveSample('Example') }}</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>{{SpecName("Web Crypto API", "#dfn-GlobalCrypto", "Window.crypto")}}</td> + <td>{{Spec2("Web Crypto API")}}</td> + <td>Definição inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_Browser">Compatibilidade de Browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Edge</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>44 {{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>11 {{property_prefix("ms")}}</td> + <td>20</td> + <td>19</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile</th> + <th>Firefox OS</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>O objeto global {{domxref("Window")}} </li> +</ul> diff --git a/files/pt-br/web/api/window/document/index.html b/files/pt-br/web/api/window/document/index.html new file mode 100644 index 0000000000..f7cfc4d860 --- /dev/null +++ b/files/pt-br/web/api/window/document/index.html @@ -0,0 +1,56 @@ +--- +title: Window.document +slug: Web/API/Window/document +tags: + - API + - DOM HTML + - NeedsCompatTable + - NeedsExample + - NeedsMarkupWork + - NeedsSpecTable + - Propriedade + - Referencia + - Window +translation_of: Web/API/Window/document +--- +<div>{{APIRef}}</div> + +<h2 id="Summary" name="Summary">Resumo</h2> + +<p>Retorna a referência para o documento contido na janela.</p> + +<div class="note"><strong>Nota:</strong> {{Fx_minversion_inline(3)}} 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.</div> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="syntaxbox"><var>doc</var> = window.document +</pre> + +<h3 id="Parameters" name="Parameters">Parâmetros</h3> + +<ul> + <li><code>doc</code> é um objeto referência de um objeto para um <a href="/en-US/docs/DOM/document" title="DOM/document">document</a>.</li> +</ul> + +<h2 id="Example" name="Example">Exemplo</h2> + +<pre class="brush: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></pre> + +<h2 id="Specification" name="Specification">Especificação</h2> + +<ul> + <li><a href="http://www.whatwg.org/html/#the-window-object" title="http://www.whatwg.org/html/#the-window-object">HTML</a></li> +</ul> diff --git a/files/pt-br/web/api/window/event/index.html b/files/pt-br/web/api/window/event/index.html new file mode 100644 index 0000000000..49452c20de --- /dev/null +++ b/files/pt-br/web/api/window/event/index.html @@ -0,0 +1,72 @@ +--- +title: Window.event +slug: Web/API/Window/event +translation_of: Web/API/Window/event +--- +<p>{{APIRef}}</p> + +<p>{{ Non-standard_header() }}</p> + +<p><strong><code>window.event</code></strong> é 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.</p> + +<h2 id="Especificações">Especificações</h2> + +<p>Não é parte de nenhuma especificação.</p> + +<p>Microsoft <a href="https://msdn.microsoft.com/en-us/library/ms535863(v=vs.85).aspx">tem uma descrição na MSDN</a>.</p> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidade de navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{domxref("Event.srcElement")}}</li> +</ul> diff --git a/files/pt-br/web/api/window/fullscreen/index.html b/files/pt-br/web/api/window/fullscreen/index.html new file mode 100644 index 0000000000..666b763bf5 --- /dev/null +++ b/files/pt-br/web/api/window/fullscreen/index.html @@ -0,0 +1,44 @@ +--- +title: Window.fullScreen +slug: Web/API/Window/fullScreen +translation_of: Web/API/Window/fullScreen +--- +<div>{{APIRef}}</div> + +<h2 id="Summary" name="Summary">Sumário</h2> + +<p>Esta propriedade indica se a janela está sendo exibida em modo de tela cheia ("<em>full screen</em>") ou não. Ela é confiável apenas no Gecko 1.9 (Firefox 3) e posteriores, veja as Notas abaixo.</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="syntaxbox"><var>isInFullScreen</var> = <var>windowRef</var>.fullScreen; +</pre> + +<p>Com "<em>chrome privileges</em>" (privilégios para acesso a funções de baixo nível), a propriedade é de leitura e escrita, caso contrário é de apenas leitura. Tenha em mente que se você tentar definir esta propriedade sem <em>chrome privileges</em>, isto não irá gerar uma excessão; ao invés disto, irá simples e silenciosamente falhar. Isto é para prevenir que <em>scripts</em> projetados para definir esta propriedade no Internet Explorer se quebrem.</p> + +<h2 id="Return_Value" name="Return_Value">Valor de Retorno</h2> + +<dl> + <dt><code>isInFullScreen</code></dt> + <dd>Um booleano. Valores possíveis:</dd> +</dl> + +<ul> + <li><code>true</code>: A janela está em modo de tela cheia.</li> + <li><code>false</code>: A janela não está em modo de tela cheia.</li> +</ul> + +<h2 id="Examples" name="Examples">Exemplos</h2> + +<p>{{todo}}</p> + +<h2 id="Specification" name="Specification">Especificação</h2> + +<p>DOM Level 0. <code>window.fullScreen</code> não é parte de nenhuma especificação do W3C ou recomendação técnica.</p> + +<h2 id="Notes" name="Notes">Notas</h2> + +<ul> + <li>Esta propriedade só é confiável no Mozilla 1.9 (Firefox 3) e posteriores. Mozilla 1.8 e anteriores têm esta propriedade, mas sempre retorna <code>false</code>, mesmo quando a janela está em modo de tela cheia ({{Bug("127013")}}).</li> + <li>Alternar entre a janela normal e tela cheia irá disparar o evento "resize" na janela correspondente.</li> +</ul> diff --git a/files/pt-br/web/api/window/getselection/index.html b/files/pt-br/web/api/window/getselection/index.html new file mode 100644 index 0000000000..7afcb23ef6 --- /dev/null +++ b/files/pt-br/web/api/window/getselection/index.html @@ -0,0 +1,129 @@ +--- +title: Window.getSelection() +slug: Web/API/Window/getSelection +translation_of: Web/API/Window/getSelection +--- +<div>{{ ApiRef() }}</div> + +<h2 id="Summary" name="Summary">Resumo</h2> + +<p>Retorna um objeto {{domxref("Selection")}} representando a parte do texto selecionada pelo usuário ou a posição atual do cursor.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>selection</em> = <em>window</em>.getSelection();</pre> + +<ul> + <li><code>selection</code> é um objeto {{domxref("Selection")}}. Quando convertido para string, seja adicionando uma string vazia (" ") ou usando {{jsxref("String.toString()")}}, esse objeto retorna o texto selecionado.</li> +</ul> + +<h2 id="Example" name="Example">Example</h2> + +<pre class="brush:js">function foo() { + var selObj = window.getSelection(); + alert(selObj); + var selRange = selObj.getRangeAt(0); + // do stuff with the range +}</pre> + +<h2 id="Notes" name="Notes">Nota</h2> + +<h3 id="Representação_do_objeto_Selection_em_String">Representação do objeto Selection em String</h3> + +<p>No JavaScript, quando um objeto é passado para uma função que espera uma string (como {{ Domxref("window.alert()") }} ou {{ Domxref("document.write()") }}), o método {{jsxref("Object.toString", "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.</p> + +<p>No exemplo acima, <code>selObj.toString()</code> é chamado automaticamente quando é passado para {{domxref("window.alert()")}}. Contudo, tentar usar propriedades ou métodos do objeto JavaScript <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" title="JS/String">String</a> como <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/length" title="JS/String.length">length</a></code> ou <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substr" title="JS/String.substr">substr</a> diretamente no objeto</code> {{domxref("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 <code>Selection</code> como uma string, faça a chamada do seu método <code>toString()</code> diretamente:</p> + +<pre class="brush:js;gutter:false;">var selectedText = selObj.toString();</pre> + +<ul> + <li><code>selObj</code> é um objeto <code>Selection</code>.</li> + <li><code>selectedText</code> é uma string (Selected text).</li> +</ul> + +<h3 id="Objectos_Relacionados">Objectos Relacionados</h3> + +<p>É útil também notar que você pode chamar {{domxref("Document.getSelection()")}}, que funciona de forma idêntica.</p> + +<p>Inputs HTML provêm APIs mais simples para se trabalhar com seleções (veja {{domxref("HTMLInputElement.setSelectionRange()")}}).</p> + +<p>Note a diferença entre <em>selection</em> e <em>focus</em>. {{domxref("Document.activeElement")}} retorna o elemento com foco.</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML Editing", "#dom-window-getselection", "Window.getSelection()")}}</td> + <td>{{Spec2("HTML Editing")}}</td> + <td>Definição inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_dos_Browsers">Compatibilidade dos Browsers</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>9</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Veja também</h2> + +<ul> + <li>{{domxref("Selection")}}</li> + <li>{{domxref("Range")}}</li> + <li>{{domxref("Document.getSelection()")}}</li> + <li>{{domxref("HTMLInputElement.setSelectionRange()")}}</li> + <li>{{domxref("Document.activeElement")}}, {{domxref("HTMLElement.focus()")}}, and {{domxref("HTMLElement.blur()")}}</li> +</ul> diff --git a/files/pt-br/web/api/window/history/index.html b/files/pt-br/web/api/window/history/index.html new file mode 100644 index 0000000000..cc96ab5be5 --- /dev/null +++ b/files/pt-br/web/api/window/history/index.html @@ -0,0 +1,52 @@ +--- +title: Window.history +slug: Web/API/Window/history +translation_of: Web/API/Window/history +--- +<p>{{ APIRef }}</p> + +<p>A propriedade só de leitura <strong>Window.history</strong> 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).</p> + +<p>Consulte <a href="https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history">Manipulação do histórico do navegador</a> 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.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>var historyObj</em> = <em>window</em>.history; +</pre> + +<h2 id="Example" name="Example">Example</h2> + +<pre class="brush: js">History.back (); // equivalente ao clique no botão Voltar +History.go (-1); // equivalente a history.back (); +</pre> + +<h2 id="Notas"><strong>Notas</strong></h2> + +<p><br> + 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.</p> + +<p>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.</p> + +<p>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 <a href="https://developer.mozilla.org/en/DOM/window.location#replace">location.replace ()</a>, que substitui o item atual do histórico da sessão pelo URL fornecido.</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificações</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'browsers.html#the-history-interface', 'The History interface')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'browsers.html#the-history-interface', 'The History interface')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> diff --git a/files/pt-br/web/api/window/index.html b/files/pt-br/web/api/window/index.html new file mode 100644 index 0000000000..45b7ce7759 --- /dev/null +++ b/files/pt-br/web/api/window/index.html @@ -0,0 +1,381 @@ +--- +title: Window +slug: Web/API/Window +translation_of: Web/API/Window +--- +<p>{{APIRef}}</p> + +<p><span class="seoSummary">O objeto <code>window</code> representa uma janela que contém um elemento DOM; a propriedade <code>document</code> aponta para o <a href="/en-US/docs/DOM/document">documento DOM document</a> carregado naquela janela.</span> Uma janela para um dado documento pode ser obtido usando a propriedade {{Domxref("document.defaultView")}}.</p> + +<p>Esta seção provê uma breve referência a todos os métodos, propriedades e eventos disponíveis através do objeto DOM <code>window</code>. O objeto <code>window</code> implementa a interface <code>Window</code>, o qual herda da interface <code><a href="http://www.w3.org/TR/DOM-Level-2-Views/views.html#Views-AbstractView">AbstractView</a></code>. Algumas funções globais, objeto de namespace, interfaces e construtores, apesar de não tipicamente associados ao objeto em questão, estão disponíveis e estão listados nas referências <a href="/en-US/docs/JavaScript/Reference">JavaScript Reference</a> e <a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">DOM Reference</a>.</p> + +<p>Em um navegador com suporte a abas, como o Firefox, cada aba contém seu próprio objeto <code>window</code> (e, se você estiver escrevendo uma extensão, a janela do navegador é uma janela distinta também - veja <a href="/en-US/docs/Working_with_windows_in_chrome_code#Content_windows">Working with windows in chrome code</a> para mais informação). Isto é, o objeto <code>window não é compartilhado entre as abas na mesma janela. Alguns métodos, nomeadamente </code>{{Domxref("window.resizeTo")}} e {{Domxref("window.resizeBy")}} aplicam-se à janela toda e não à aba em questão ao que o objeto <code>window</code> pertence. Geralmente, qualquer coisa que não pode racionalmente pertencer a uma aba, pertence a uma janela..</p> + +<h2 id="Propriedades">Propriedades</h2> + +<p><em>Esta interface herda propriedades da interface {{domxref("EventTarget")}} e implementa propriedades de {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, e {{domxref("WindowEventHandlers")}}.</em></p> + +<p>Perceba que propriedades que são objetos (ex.: sobrecarregar o protótipo de elementos built-in) são listados em uma sessão separada abaixo.</p> + +<dl> + <dt>{{domxref("Window.applicationCache")}} {{readOnlyInline}} {{gecko_minversion_inline("1.9")}}</dt> + <dd>Um objeto {{domxref("OfflineResourceList")}} fornece acesso aos recursos offline para o window.</dd> + <dt>{{domxref("Window.closed")}} {{Non-standard_inline}}{{readOnlyInline}}</dt> + <dd>Esta propriedade indica quando a window atual está fechada ou não.</dd> + <dt><code><a href="/en-US/docs/Components_object">Window.Components</a></code> {{Non-standard_inline}}</dt> + <dd>O ponto de entrada para muitas características XPCOM. Algumas propriedades, por exemplo, classes, estão apenas disponíveis para código suficientemente privilegiado. Código de Web não deve usar essa propriedade.</dd> + <dt>{{domxref("console","Window.console")}} {{Non-standard_inline}} {{ReadOnlyInline}}</dt> + <dd>Retorna uma referência para o objeto console fornecendo acesso ao console debugging do navegador.</dd> + <dt>{{domxref("Window.content")}} and Window._content {{Non-standard_inline}} {{obsolete_inline}}{{ReadOnlyInline}}</dt> + <dd>Retorna uma referência para o elemento de conteúdo na janela atual. A variante obsoleta com sublinhado não está disponível a partir do conteúdo da Web.</dd> + <dt>{{domxref("Window.controllers")}}{{non-standard_inline}}{{ReadOnlyInline}}</dt> + <dd>Retorna os objetos de controlador XUL para a janela atual do crome.</dd> + <dt>{{domxref("Window.crypto")}} {{readOnlyInline}}</dt> + <dd>Retorna o objeto de criptografia do navegador.</dd> + <dt>{{domxref("Window.defaultStatus")}} {{Obsolete_inline("gecko23")}}</dt> + <dd>Obtém/define o texto da barra de status para determinada janela.</dd> + <dt>{{domxref("Window.devicePixelRatio")}} {{non-standard_inline}}{{ReadOnlyInline}}</dt> + <dd>Returns the ratio between physical pixels and device independent pixels in the current display.</dd> + <dt>{{domxref("Window.dialogArguments")}} {{Fx_minversion_inline(3)}} {{ReadOnlyInline}}</dt> + <dd>Gets the arguments passed to the window (if it's a dialog box) at the time {{domxref("window.showModalDialog()")}} was called. This is an {{Interface("nsIArray")}}.</dd> + <dt>{{domxref("Window.directories")}} {{obsolete_inline}}</dt> + <dd>Synonym of {{domxref("window.personalbar")}}</dd> + <dt>{{domxref("Window.document")}} {{ReadOnlyInline}}</dt> + <dd>Retorna a referência à propriedade <code>document</code> que a janela contém.</dd> + <dt>{{domxref("Window.frameElement")}} {{readOnlyInline}}</dt> + <dd>Returns the element in which the window is embedded, or null if the window is not embedded.</dd> + <dt>{{domxref("Window.frames")}} {{readOnlyInline}}</dt> + <dd>Returns an array of the subframes in the current window.</dd> + <dt>{{domxref("Window.fullScreen")}} {{gecko_minversion_inline("1.9")}}</dt> + <dd>This property indicates whether the window is displayed in full screen or not.</dd> + <dt>{{domxref("Window.globalStorage")}}<code> </code>{{gecko_minversion_inline("1.8.1")}} {{Non-standard_inline}} {{Obsolete_inline("gecko13")}}</dt> + <dd>Unsupported since Gecko 13 (Firefox 13). Use {{domxref("Window.localStorage")}} instead.<br> + Was: Multiple storage objects that are used for storing data across multiple pages.</dd> + <dt>{{domxref("Window.history")}} {{ReadOnlyInline}}</dt> + <dd>Retorna a referência ao objeto <code>history</code>.</dd> + <dt>{{domxref("Window.innerHeight")}}</dt> + <dd>Gets the height of the content area of the browser window including, if rendered, the horizontal scrollbar.</dd> + <dt>{{domxref("window.innerWidth")}}</dt> + <dd>Gets the width of the content area of the browser window including, if rendered, the vertical scrollbar.</dd> + <dt>{{domxref("Window.length")}} {{readOnlyInline}}</dt> + <dd>Returns the number of frames in the window. See also {{domxref("window.frames")}}.</dd> + <dt>{{domxref("Window.location")}} {{ReadOnlyInline}}</dt> + <dd>Gets/sets the location, or current URL, of the window object.</dd> + <dt>{{domxref("Window.locationbar")}} {{ReadOnlyInline}}</dt> + <dd>Returns the locationbar object, whose visibility can be toggled in the window.</dd> + <dt>{{domxref("WindowStorage.localStorage")}} {{readOnlyInline}}{{gecko_minversion_inline("1.9.1")}}</dt> + <dd>Returns a reference to the local storage object used to store data that may only be accessed by the origin that created it.</dd> + <dt>{{domxref("Window.menubar")}} {{ReadOnlyInline}}</dt> + <dd>Returns the menubar object, whose visibility can be toggled in the window.</dd> + <dt>{{domxref("Window.messageManager")}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Returns the <a href="/en-US/docs/The_message_manager">message manager</a> object for this window.</dd> + <dt>{{domxref("Window.mozAnimationStartTime")}} {{ReadOnlyInline}}{{gecko_minversion_inline("2.0")}}</dt> + <dd>The time in milliseconds since epoch at which the current animation cycle began.</dd> + <dt>{{domxref("Window.mozInnerScreenX")}} {{ReadOnlyInline}}{{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}</dt> + <dd>Returns the horizontal (X) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See <code>mozScreenPixelsPerCSSPixel</code> in {{interface("nsIDOMWindowUtils")}} for a conversion factor to adapt to screen pixels if needed.</dd> + <dt>{{domxref("Window.mozInnerScreenY")}} {{ReadOnlyInline}} {{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}</dt> + <dd>Returns the vertical (Y) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See <code>mozScreenPixelsPerCSSPixel</code> for a conversion factor to adapt to screen pixels if needed.</dd> + <dt>{{domxref("Window.mozPaintCount")}} {{non-standard_inline}}{{ReadOnlyInline}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Returns the number of times the current document has been rendered to the screen in this window. This can be used to compute rendering performance.</dd> + <dt>{{domxref("Window.name")}}</dt> + <dd>Pega/attribui o nome ao objeto <code>window</code>.</dd> + <dt>{{domxref("Window.navigator")}} {{readOnlyInline}}</dt> + <dd>Returns a reference to the navigator object.</dd> + <dt>{{domxref("Window.opener")}}</dt> + <dd>Returns a reference to the window that opened this current window.</dd> + <dt>{{domxref("Window.outerHeight")}} {{readOnlyInline}}</dt> + <dd>Gets the height of the outside of the browser window.</dd> + <dt>{{domxref("Window.outerWidth")}} {{readOnlyInline}}</dt> + <dd>Gets the width of the outside of the browser window.</dd> + <dt>{{domxref("Window.scrollX","Window.pageXOffset")}} {{readOnlyInline}}</dt> + <dd>An alias for {{domxref("window.scrollX")}}.</dd> + <dt>{{domxref("Window.scrollY","Window.pageYOffset")}}{{readOnlyInline}}</dt> + <dd>An alias for {{domxref("window.scrollY")}}</dd> + <dt>{{domxref("WindowSession.sessionStorage")}} {{readOnlyInline}}</dt> + <dd></dd> + <dt>{{domxref("SpeechSynthesisGetter.speechSynthesis")}} {{readOnlyInline}}</dt> + <dd></dd> + <dt>{{domxref("Window.parent")}} {{readOnlyInline}}</dt> + <dd>Returns a reference to the parent of the current window or subframe.</dd> + <dt>{{domxref("Window.performance")}} {{readOnlyInline}}</dt> + <dd>Provides a hosting area for <a href="/en-US/docs/Navigation_timing">performance related</a> attributes.</dd> + <dt>{{domxref("Window.personalbar")}} {{readOnlyInline}}</dt> + <dd>Returns the personalbar object, whose visibility can be toggled in the window.</dd> + <dt>{{domxref("Window.pkcs11")}} {{obsolete_inline(29)}}</dt> + <dd>Formerly provided access to install and remove PKCS11 modules.</dd> + <dt>{{domxref("Window.returnValue")}} {{Fx_minversion_inline(3)}}</dt> + <dd>The return value to be returned to the function that called {{domxref("window.showModalDialog()")}} to display the window as a modal dialog.</dd> + <dt>{{domxref("Window.screen")}} {{readOnlyInline}}</dt> + <dd>Returns a reference to the screen object associated with the window.</dd> + <dt>{{domxref("Window.screenX")}} {{readOnlyInline}}</dt> + <dd>Returns the horizontal distance of the left border of the user's browser from the left side of the screen.</dd> + <dt>{{domxref("Window.screenY")}} {{readOnlyInline}}</dt> + <dd>Returns the vertical distance of the top border of the user's browser from the top side of the screen.</dd> + <dt>{{domxref("Window.scrollbars")}} {{readOnlyInline}}</dt> + <dd>Returns the scrollbars object, whose visibility can be toggled in the window.</dd> + <dt>{{domxref("Window.scrollMaxX")}}{{non-standard_inline}}{{ReadOnlyInline}}</dt> + <dd>The maximum offset that the window can be scrolled to horizontally, that is the document width minus the viewport width.</dd> + <dt>{{domxref("Window.scrollMaxY")}}{{non-standard_inline}}{{ReadOnlyInline}}</dt> + <dd>The maximum offset that the window can be scrolled to vertically (i.e., the document height minus the viewport height).</dd> + <dt>{{domxref("Window.scrollX")}} {{readOnlyInline}}</dt> + <dd>Returns the number of pixels that the document has already been scrolled horizontally.</dd> + <dt>{{domxref("Window.scrollY")}} {{readOnlyInline}}</dt> + <dd>Returns the number of pixels that the document has already been scrolled vertically.</dd> + <dt>{{domxref("Window.self")}} {{ReadOnlyInline}}</dt> + <dd>Returns an object reference to the window object itself.</dd> + <dt>{{domxref("Window.sessionStorage")}} {{Fx_minversion_inline("2.0")}}</dt> + <dd>A storage object for storing data within a single page session.</dd> + <dt>{{domxref("Window.sidebar")}} {{non-standard_inline}}{{ReadOnlyInline}}</dt> + <dd>Returns a reference to the window object of the sidebar.</dd> + <dt>{{domxref("Window.status")}}</dt> + <dd>Gets/sets the text in the statusbar at the bottom of the browser.</dd> + <dt>{{domxref("Window.statusbar")}} {{readOnlyInline}}</dt> + <dd>Returns the statusbar object, whose visibility can be toggled in the window.</dd> + <dt>{{domxref("Window.toolbar")}} {{readOnlyInline}}</dt> + <dd>Returns the toolbar object, whose visibility can be toggled in the window.</dd> + <dt>{{domxref("Window.top")}} {{readOnlyInline}}</dt> + <dd>Returns a reference to the topmost window in the window hierarchy. This property is read only.</dd> + <dt>{{domxref("Window.window")}} {{ReadOnlyInline}}</dt> + <dd>Returns a reference to the current window.</dd> + <dt><code>window[0]</code>,<code> window[1]</code>, etc.</dt> + <dd>Returns a reference to the <code>window</code> object in the frames. See {{domxref("Window.frames")}} for more details.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>This interface inherits methods from the {{domxref("EventTarget")}} interface and implements methods from {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, and {{domxref("WindowEventHandlers")}}.</em></p> + +<dl> + <dt>{{domxref("EventTarget.addEventListener()")}}</dt> + <dd>Register an event handler to a specific event type on the window.</dd> + <dt>{{domxref("Window.alert()")}}</dt> + <dd>Displays an alert dialog.</dd> + <dt>{{domxref("WindowBase64.atob()")}}</dt> + <dd>Decodes a string of data which has been encoded using base-64 encoding.</dd> + <dt>{{domxref("Window.back()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Moves back one in the window history.</dd> + <dt>{{domxref("Window.blur()")}}</dt> + <dd>Sets focus away from the window.</dd> + <dt>{{domxref("WindowBase64.btoa()")}}</dt> + <dd>Creates a base-64 encoded ASCII string from a string of binary data.</dd> + <dt>{{domxref("Window.captureEvents()")}} {{Deprecated_inline}}</dt> + <dd>Registers the window to capture all events of the specified type.</dd> + <dt>{{domxref("Window.clearImmediate()")}}</dt> + <dd>Cancels the repeated execution set using <code>setImmediate</code>.</dd> + <dt>{{domxref("WindowTimers.clearInterval()")}}</dt> + <dd>Cancels the repeated execution set using {{domxref("WindowTimers.setInterval()")}}.</dd> + <dt>{{domxref("WindowTimers.clearTimeout()")}}</dt> + <dd>Cancels the repeated execution set using {{domxref("WindowTimers.setTimeout()")}}.</dd> + <dt>{{domxref("Window.close()")}}</dt> + <dd>Closes the current window.</dd> + <dt>{{domxref("Window.confirm()")}}</dt> + <dd>Displays a dialog with a message that the user needs to respond to.</dd> + <dt>{{domxref("Window.disableExternalCapture()")}} {{obsolete_inline(24)}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.dispatchEvent()")}}</dt> + <dd>Used to trigger an event.</dd> + <dt>{{domxref("Window.dump()")}}</dt> + <dd>Writes a message to the console.</dd> + <dt>{{domxref("Window.enableExternalCapture()")}} {{obsolete_inline(24)}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.find()")}}</dt> + <dd>Searches for a given string in a window.</dd> + <dt>{{domxref("Window.focus()")}}</dt> + <dd>Sets focus on the current window.</dd> + <dt>{{domxref("Window.forward()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Moves the window one document forward in the history.</dd> + <dt>{{domxref("Window.getAttention()")}}</dt> + <dd>Flashes the application icon.</dd> + <dt>{{domxref("Window.getAttentionWithCycleCount()")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.getComputedStyle()")}}</dt> + <dd>Gets computed style for the specified element. Computed style indicates the computed values of all CSS properties of the element.</dd> + <dt>{{domxref("Window.getDefaulComputedStyle()")}}</dt> + <dd>Gets default computed style for the specified element, ignoring author stylesheets.</dd> + <dt>{{domxref("Window.getSelection()")}}</dt> + <dd>Returns the selection object representing the selected item(s).</dd> + <dt>{{domxref("Window.home()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Returns the browser to the home page.</dd> + <dt>{{domxref("Window.matchMedia()")}} {{gecko_minversion_inline("6.0")}}</dt> + <dd>Returns a {{domxref("MediaQueryList")}} object representing the specified media query string.</dd> + <dt>{{domxref("Window.maximize()")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.minimize()")}} (top-level XUL windows only)</dt> + <dd>Minimizes the window.</dd> + <dt>{{domxref("Window.moveBy()")}}</dt> + <dd>Moves the current window by a specified amount.</dd> + <dt>{{domxref("Window.moveTo()")}}</dt> + <dd>Moves the window to the specified coordinates.</dd> + <dt>{{domxref("Window.mozRequestAnimationFrame()")}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Tells the browser that an animation is in progress, requesting that the browser schedule a repaint of the window for the next animation frame. This will cause a <code>MozBeforePaint</code> event to fire before that repaint occurs.</dd> + <dt>{{domxref("Window.open()")}}</dt> + <dd>Opens a new window.</dd> + <dt>{{domxref("Window.openDialog()")}}</dt> + <dd>Opens a new dialog window.</dd> + <dt>{{domxref("Window.postMessage()")}} {{Fx_minversion_inline(3)}}</dt> + <dd>Provides a secure means for one window to send a string of data to another window, which need not be within the same domain as the first, in a secure manner.</dd> + <dt>{{domxref("Window.print()")}}</dt> + <dd>Opens the Print Dialog to print the current document.</dd> + <dt>{{domxref("Window.prompt()")}}</dt> + <dd>Returns the text entered by the user in a prompt dialog.</dd> + <dt>{{domxref("Window.releaseEvents()")}} {{Deprecated_inline}}</dt> + <dd>Releases the window from trapping events of a specific type.</dd> + <dt>{{domxref("element.removeEventListener","Window.removeEventListener()")}}</dt> + <dd>Removes an event listener from the window.</dd> + <dt>{{domxref("Window.resizeBy()")}}</dt> + <dd>Resizes the current window by a certain amount.</dd> + <dt>{{domxref("Window.resizeTo()")}}</dt> + <dd>Dynamically resizes window.</dd> + <dt>{{domxref("Window.restore()")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.routeEvent()")}} {{obsolete_inline(24)}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.scroll()")}}</dt> + <dd>Scrolls the window to a particular place in the document.</dd> + <dt>{{domxref("Window.scrollBy()")}}</dt> + <dd>Scrolls the document in the window by the given amount.</dd> + <dt>{{domxref("Window.scrollByLines()")}}</dt> + <dd>Scrolls the document by the given number of lines.</dd> + <dt>{{domxref("Window.scrollByPages()")}}</dt> + <dd>Scrolls the current document by the specified number of pages.</dd> + <dt>{{domxref("Window.scrollTo()")}}</dt> + <dd>Scrolls to a particular set of coordinates in the document.</dd> + <dt>{{domxref("Window.setCursor()")}}</dt> + <dd>Changes the cursor for the current window</dd> + <dt>{{domxref("Window.setImmediate()")}}</dt> + <dd>Executes a function after the browser has finished other heavy tasks</dd> + <dt>{{domxref("WindowTimers.setInterval()")}}</dt> + <dd>Schedules the execution of a function each X milliseconds.</dd> + <dt>{{domxref("Window.setResizable")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("WindowTimers.setTimeout()")}}</dt> + <dd>Sets a delay for executing a function.</dd> + <dt>{{domxref("Window.showModalDialog()")}} {{Fx_minversion_inline(3)}}</dt> + <dd>Displays a modal dialog.</dd> + <dt>{{domxref("Window.sizeToContent()")}}</dt> + <dd>Sizes the window according to its content.</dd> + <dt>{{domxref("Window.stop()")}}</dt> + <dd>This method stops window loading.</dd> + <dt>{{domxref("Window.updateCommands()")}}</dt> + <dd>Updates the state of commands of the current chrome window (UI).</dd> +</dl> + +<h2 id="Event_handlers">Event handlers</h2> + +<p>These are properties of the window object that can be set to establish event handlers for the various things that can happen in the window that might be of interest.</p> + +<p><em>This interface inherits event handlers from the {{domxref("EventTarget")}} interface and implements event handlers from {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, and {{domxref("WindowEventHandlers")}}.</em></p> + +<div class="note"> +<p><strong>Note:</strong> Starting in {{Gecko("9.0")}}, you can now use the syntax <code>if ("onabort" in window)</code> to determine whether or not a given event handler property exists. This is because event handler interfaces have been updated to be proper web IDL interfaces. See <a href="/en-US/docs/DOM/DOM_event_handlers">DOM event handlers</a> for details.</p> +</div> + +<dl> + <dt>{{domxref("GlobalEventHandlers.onabort")}}</dt> + <dd>An event handler property for abort events on the window.</dd> + <dt>{{domxref("WindowEventHandlers.onbeforeunload")}}</dt> + <dd>An event handler property for before-unload events on the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onblur")}}</dt> + <dd>An event handler property for blur events on the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onchange")}}</dt> + <dd>An event handler property for change events on the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onclick")}}</dt> + <dd>An event handler property for click events on the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onclose")}}</dt> + <dd>An event handler property for handling the window close event.</dd> + <dt>{{domxref("GlobalEventHandlers.oncontextmenu")}}</dt> + <dd>An event handler property for right-click events on the window.</dd> + <dt>{{domxref("Window.ondevicelight")}}</dt> + <dd>An event handler property for any ambient light levels changes</dd> + <dt>{{domxref("Window.ondevicemotion")}} {{gecko_minversion_inline("6.0")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.ondeviceorientation")}} {{gecko_minversion_inline("6.0")}}</dt> + <dd>An event handler property for any device orientation changes</dd> + <dt>{{domxref("Window.ondeviceproximity")}}</dt> + <dd>An event handler property for device proximity event</dd> + <dt>{{domxref("GlobalEventHandlers.onerror")}}</dt> + <dd>An event handler property for {{event("error")}} events raised on the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onfocus")}}</dt> + <dd>An event handler property for {{event("focus")}} events on the window.</dd> + <dt>{{domxref("WindowEventHandlers.onhashchange")}} {{gecko_minversion_inline("1.9.2")}}</dt> + <dd>An event handler property for hash change events on the window; called when the part of the URL after the hash mark ("#") changes.</dd> + <dt>{{domxref("GlobalEventHandlers.onkeydown")}}</dt> + <dd>An event handler property for {{event("keydown")}} events on the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onkeypress")}}</dt> + <dd>An event handler property for {{event("keypress")}} events on the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onkeyup")}}</dt> + <dd>An event handler property for {{event("keyup")}} events on the window.</dd> + <dt>{{domxref("WindowEventHandlers.onlanguagechange")}}</dt> + <dd>An event handler property for {{event("languagechange")}} events on the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onload")}}</dt> + <dd>An event handler property for window loading.</dd> + <dt>{{domxref("GlobalEventHandlers.onmousedown")}}</dt> + <dd>An event handler property for mousedown events on the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onmousemove")}}</dt> + <dd>An event handler property for mousemove events on the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseout")}}</dt> + <dd>An event handler property for mouseout events on the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseover")}}</dt> + <dd>An event handler property for mouseover events on the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseup")}}</dt> + <dd>An event handler property for mouseup events on the window.</dd> + <dt>{{domxref("Window.onmozbeforepaint")}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>An event handler property for the <code>MozBeforePaint</code> event, which is sent before repainting the window if the event has been requested by a call to the {{domxref("Window.mozRequestAnimationFrame()")}} method.</dd> + <dt>{{domxref("WindowEventHandlers.onpageshow")}}</dt> + <dd>An event handler property for pageshow events on the window.</dd> + <dt>{{domxref("WindowEventHandlers.onpagehide")}}</dt> + <dd>An event handler property for pagehide events on the window.</dd> + <dt>{{domxref("Window.onpaint")}}</dt> + <dd>An event handler property for paint events on the window.</dd> + <dt>{{domxref("WindowEventHandlers.onpopstate")}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>An event handler property for popstate events, which are fired when navigating to a session history entry representing a state object.</dd> + <dt>{{domxref("GlobalEventHandlers.onreset")}}</dt> + <dd>An event handler property for reset events on the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onresize")}}</dt> + <dd>An event handler property for window resizing.</dd> + <dt>{{domxref("GlobalEventHandlers.onscroll")}}</dt> + <dd>An event handler property for window scrolling.</dd> + <dt>{{domxref("GlobalEventHandlers.onselect")}}</dt> + <dd>An event handler property for window selection.</dd> + <dt>{{domxref("GlobalEventHandlers.onsubmit")}}</dt> + <dd>An event handler property for submits on window forms.</dd> + <dt>{{domxref("Window.onunload")}}</dt> + <dd>An event handler property for unload events on the window.</dd> + <dt>{{domxref("Window.onuserproximity")}}</dt> + <dd>An event handler property for user proximity events</dd> +</dl> + +<h2 id="Constructors">Constructors</h2> + +<p>See also the <a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">DOM Interfaces</a>.</p> + +<dl> + <dt>{{domxref("Window.DOMParser")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.GeckoActiveXObject")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Image")}}</dt> + <dd>Used for creating an {{domxref("HTMLImageElement")}}.</dd> + <dt>{{domxref("Option")}}</dt> + <dd>Used for creating an {{domxref("HTMLOptionElement")}}</dd> + <dt>{{domxref("Window.QueryInterface")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.XMLSerializer")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Worker")}}</dt> + <dd>Used for creating a <a href="/en-US/docs/DOM/Using_web_workers">Web worker</a></dd> + <dt>{{domxref("Window.XPCNativeWrapper")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.XPCSafeJSObjectWrapper")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> +</dl> + +<h2 id="Interfaces">Interfaces</h2> + +<p>See <a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">DOM Reference</a></p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Working_with_windows_in_chrome_code">Working with windows in chrome code</a></li> +</ul> diff --git a/files/pt-br/web/api/window/innerheight/index.html b/files/pt-br/web/api/window/innerheight/index.html new file mode 100644 index 0000000000..5caf8ae916 --- /dev/null +++ b/files/pt-br/web/api/window/innerheight/index.html @@ -0,0 +1,137 @@ +--- +title: Window.innerHeight +slug: Web/API/Window/innerHeight +translation_of: Web/API/Window/innerHeight +--- +<div>{{APIRef}}</div> + +<p>Altura (em pixels) da janela de visualização do navegador, incluindo, se renderizado, a barra de rolagem horizontal.</p> + +<div class="note"><strong>Note:</strong> If you use {{ifmethod("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.</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <var>intViewportHeight</var> = window.innerHeight;</pre> + +<h3 id="Value">Value</h3> + +<p>On return, <code>intViewportHeight</code> is the height of the browser window's viewport.</p> + +<p>The <code>window.innerHeight</code> property is read only; it has no default value.</p> + +<h2 id="Notes">Notes</h2> + +<p>The <code>innerHeight</code> property is supported in any window object like a {{domxref("window")}}, a frame, a frameset, or a secondary window.</p> + +<p>There is <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=189112#c7">an algorithm</a> to obtain the height of the viewport excluding, if rendered, the horizontal scrollbar.</p> + +<h2 id="Example">Example</h2> + +<h3 id="Assuming_a_frameset">Assuming a frameset</h3> + +<pre class="brush: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 +</pre> + +<p>{{todo("link to an interactive demo here")}}</p> + +<p>To change the size of a window, see {{domxref("window.resizeBy()")}} and {{domxref("window.resizeTo()")}}.</p> + +<p>To get the outer height of a window, i.e. the height of the whole browser window, see {{domxref("window.outerHeight")}}.</p> + +<h3 id="Graphical_example">Graphical example</h3> + +<p>The following figure shows the difference between <code>outerHeight</code> and <code>innerHeight</code>.</p> + +<p><img alt="innerHeight vs outerHeight illustration" src="/@api/deki/files/213/=FirefoxInnerVsOuterHeight2.png"></p> + +<h2 id="Specification">Specification</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSSOM View', '#dom-window-innerheight', 'window.innerHeight')}}</td> + <td>{{Spec2('CSSOM View')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(1.0)}}<sup>[1]</sup></td> + <td>9</td> + <td>9</td> + <td>3</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>1</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(1.0)}}<sup>[1]</sup></td> + <td>9</td> + <td>9</td> + <td>3</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] From Firefox 4 to 24 this property was buggy and could give a wrong value before page load on certain circumstances, see {{bug(641188)}}.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("window.innerWidth")}}</li> + <li>{{domxref("window.outerHeight")}}</li> + <li>{{domxref("window.outerWidth")}}</li> +</ul> diff --git a/files/pt-br/web/api/window/length/index.html b/files/pt-br/web/api/window/length/index.html new file mode 100644 index 0000000000..b99fa5747a --- /dev/null +++ b/files/pt-br/web/api/window/length/index.html @@ -0,0 +1,52 @@ +--- +title: Window.length +slug: Web/API/Window/length +tags: + - API + - DOM + - Gecko + - Propriedade + - Referencia + - Referência do DOM + - Referência do DOM do Gecko + - WebAPI + - Window +translation_of: Web/API/Window/length +--- +<div>{{ ApiRef() }}</div> + +<h2 id="Summary" name="Summary">Resumo</h2> + +<p>Retorna o número de frames (tanto elementos <code>frame</code> ou <code>iframe</code>) dentro da janela.</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="syntaxbox"><em>quantidadeFrames</em> = window.length; +</pre> + +<ul> + <li><em>quantidadeFrames</em> é o número de frames.</li> +</ul> + +<h2 id="Example" name="Example">Exemplo</h2> + +<pre class="brush:js">if (window.length) { + // este é um documento com subframes +}</pre> + +<h2 id="Specification" name="Specification">Especificações</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','browsers.html#dom-length','Window.length')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> diff --git a/files/pt-br/web/api/window/location/index.html b/files/pt-br/web/api/window/location/index.html new file mode 100644 index 0000000000..09198523b3 --- /dev/null +++ b/files/pt-br/web/api/window/location/index.html @@ -0,0 +1,272 @@ +--- +title: Window.location +slug: Web/API/Window/location +translation_of: Web/API/Window/location +--- +<p>{{APIRef}}</p> + +<p>O <strong><code>Window.location </code></strong>é uma propriedade de leitura que retorna um objeto {{domxref("Location")}} com informações de localização do documento atual.<br> + <br> + Embora <code>Window.location </code>seja apenas um objeto de leitura de localização, você pode também atribuir uma {{domxref("DOMString")}} para ele. Isto significa que você pode trabalhar com <code>location </code>como se fosse uma string na maioria dos casos: <code>location = 'http://www.exemplo.com'</code> é um sinônimo de <code>location.href = 'http://www.exemplo.com'</code>.</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="syntaxbox">var <em>oldLocation</em> = location; +location = <em>newLocation</em>; +</pre> + +<h2 id="Example" name="Example">Exemplos</h2> + +<h3 id="Exemplo_básico">Exemplo básico</h3> + +<pre class="brush: js">alert(location); // alerta "https://developer.mozilla.org/en-US/docs/Web/API/Window.location"</pre> + +<h3 id="Exemplo_1_Navegando_para_uma_nova_página">Exemplo #1: Navegando para uma nova página</h3> + +<p>Sempre que um novo valor é atribuído a um objeto de localização, um documento será carregado usando a URL como se <code>location.assign() </code>tivesse sido chamado com a URL modificada. <span id="result_box" lang="pt"><span class="hps">Observe que as configurações</span> <span class="hps">de segurança</span><span>, como</span> <span class="hps">CORS</span><span>,</span> <span class="hps">pode impedir</span> <span class="hps">que isso aconteça</span> <span class="hps">de forma eficaz.</span></span></p> + +<pre class="brush: js">location.assign("http://www.mozilla.org"); // ou +location = "http://www.mozilla.org"; +</pre> + +<h3 id="Exemplo_2_Forçando_recerregamento_da_página_atual_do_servidor">Exemplo #2: Forçando recerregamento da página atual do servidor</h3> + +<pre class="brush: js">location.reload(true);</pre> + +<h3 id="Exemplo_3">Exemplo #3</h3> + +<p>Considere o exemplo a seguir, que vai recarregar a página usando o método <a href="/en-US/docs/Web/API/Location.replace"><code>replace() </code></a>para inserir o valor do <code>location.pathname </code>depois da hash:</p> + +<pre class="brush: js">function reloadPageWithHash() { + var initialPage = location.pathname; + location.replace('http://example.com/#' + initialPage); +} +</pre> + +<div class="note"><strong>Nota: </strong>O exemplo acima funciona em situações onde <code>location.hash</code> não precisa ser retida. Contudo, em navegadores baseados em Gecko, definindo <code>location.pathname</code> desta forma irá apagar qualquer informação em <code>location.hash</code>, 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 <code>método replace(), </code><span id="result_box" lang="pt"><span class="hps">que deve funcionar</span> <span class="hps">de forma consistente</span> <span class="hps">em todos os navegadores</span><span>.</span></span></div> + +<h3 id="Exemplo_4_Mostrar_as_propriedades_da_URL_atual_em_um_alerta">Exemplo #4: Mostrar as propriedades da URL atual em um alerta:</h3> + +<pre class="brush: 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> +</pre> + +<h3 id="Exemplo_5_Enviando_uma_linha_de_dados_para_o_servidor_para_modificar_a_propriedade_search">Exemplo #5: Enviando uma linha de dados para o servidor para modificar a propriedade search:</h3> + +<pre class="brush: js">function sendData (sData) { + location.search = sData; +} + +// no html: <button onclick="sendData('Algum dado');">Enviar dados</button> +</pre> + +<p>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).</p> + +<h3 id="Exemplo_6_Usando_favoritos_sem_mudar_a_propriedade_hash">Exemplo #6: Usando favoritos sem mudar a propriedade <code>hash</code>:</h3> + +<pre class="brush: 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">[&nbsp;<span class="intLink" onclick="showBookmark('#myBookmark2');">Go to bookmark #2</span>&nbsp;]</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">[&nbsp;<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>&nbsp;]</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> +</pre> + +<div class="note"><strong>Nota: </strong>A função <code>showNode</code> é também um exemplo de uso do ciclo<code> <a href="/en/JavaScript/Reference/Statements/for" title="en/JavaScript/Reference/Statements/for">for</a> sem uma section statement. </code>Neste caso <strong>o ponto e vírgula é sempre colocado imediatamente depois da declaração do ciclo.</strong></div> + +<p>... a mesma coisa mas com uma animação de rolagem na página:</p> + +<pre class="brush: 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)); } + }; +})(); +</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Estatus</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "history.html#the-location-interface", "Window.location")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Sem mudanças a partir de {{SpecName("HTML5 W3C")}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "browsers.html#the-location-interface", "Window.location")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Definição inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>window.location.origin</code></td> + <td>30.0.1599.101 (possibly earlier)</td> + <td>{{CompatGeckoDesktop("21.0")}}</td> + <td>11<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>7 (possibly earlier, see webkit bug 46558)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>window.location.origin</code></td> + <td>30.0.1599.101 (possibly earlier)</td> + <td>{{CompatGeckoMobile("21.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td><span style="font-size: 12px; line-height: 18px;">7 (possibly earlier, see webkit bug </span><span style="font-size: 12px; line-height: 18px;">46558)</span></td> + </tr> + </tbody> +</table> +</div> + +<p>[1] In Internet Explorer 11 on Windows 10 window.location.origin is undefined due to a bug, see <a href="https://connect.microsoft.com/IE/feedback/details/1763802/location-origin-is-undefined-in-ie-11-on-windows-10-but-works-on-windows-7">https://connect.microsoft.com/IE/feedback/details/1763802/location-origin-is-undefined-in-ie-11-on-windows-10-but-works-on-windows-7</a>.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>The interface of the returned value, {{domxref("Location")}}.</li> + <li>A similar information, but attached to the {{Glossary("browsing context")}}, {{domxref("Document.location")}}.</li> + <li><a href="/en/DOM/Manipulating_the_browser_history" title="en/DOM/Manipulating the browser history">Manipulating the browser history</a></li> + <li><a href="/en-US/docs/DOM/Mozilla_event_reference/hashchange" title="/en-US/docs/DOM/Mozilla_event_reference/hashchange">hashchange</a></li> +</ul> diff --git a/files/pt-br/web/api/window/matchmedia/index.html b/files/pt-br/web/api/window/matchmedia/index.html new file mode 100644 index 0000000000..a6497ded0a --- /dev/null +++ b/files/pt-br/web/api/window/matchmedia/index.html @@ -0,0 +1,106 @@ +--- +title: Window.matchMedia() +slug: Web/API/Window/matchMedia +translation_of: Web/API/Window/matchMedia +--- +<div>{{APIRef}}</div> + +<h2 id="Summary" name="Summary">Resumo</h2> + +<p>Retorna um novo objeto {{domxref("MediaQueryList")}} representando o resultado analisado da string <a href="/en-US/docs/CSS/Media_queries" title="CSS/Media queries">media query</a> especificada.</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="syntaxbox"><em>mql</em> = window.matchMedia(<em>mediaQueryString</em>)</pre> + +<p>onde <code>mediaQueryString</code> é uma string representando a media query para o qual retorna um novo objeto {{domxref("MediaQueryList")}}.</p> + +<h2 id="Example" name="Example">Exemplo</h2> + +<pre class="brush: js">if (window.matchMedia("(min-width: 400px)").matches) { + /* a viewport tem pelo menos 400 pixels de largura */ +} else { + /* a viewport menos que 400 pixels de largura */ +}</pre> + +<p>Este código permite-lhe lidar com as coisas de forma diferente quando a janela é muito estreita.</p> + +<p>Veja <a href="/en-US/docs/DOM/Using_media_queries_from_code" title="CSS/Using media queries from code">Usando media queries a partir do código</a> para mais exemplos.</p> + +<h2 id="Specifications" name="Specifications">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificações</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSSOM View", "#dom-window-matchmedia", "Window.matchMedia()")}}</td> + <td>{{Spec2("CSSOM View")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade do navegador</h2> + +<p>{{CompatibilityTable()}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>9</td> + <td>{{CompatGeckoDesktop("6.0")}}</td> + <td>10</td> + <td>12.1</td> + <td>5.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>3.0</td> + <td>{{CompatGeckoMobile("6.0")}}</td> + <td>{{CompatNo}}</td> + <td>12.1</td> + <td>5</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/CSS/Media_queries" title="CSS/Media queries">Media queries</a></li> + <li><a href="/en-US/docs/DOM/Using_media_queries_from_code" title="CSS/Using media queries from code">Usando media queries a partir do código</a></li> + <li>{{domxref("MediaQueryList")}}</li> + <li>{{domxref("MediaQueryListListener")}}</li> +</ul> diff --git a/files/pt-br/web/api/window/navigator/index.html b/files/pt-br/web/api/window/navigator/index.html new file mode 100644 index 0000000000..c73ebe3f36 --- /dev/null +++ b/files/pt-br/web/api/window/navigator/index.html @@ -0,0 +1,54 @@ +--- +title: Window.navigator +slug: Web/API/Window/navigator +tags: + - API + - Propriedade + - Referencia + - Somente-leitura + - Window +translation_of: Web/API/Window/navigator +--- +<div> + {{APIRef}}</div> +<p>A propriedade somente leitura <code>Window.navigator</code> retorna uma referência para o objeto {{domxref("Navigator")}}, que pode ser consultada para obter informações sobre a aplicação executando o script.</p> +<h2 id="Example" name="Example">Sintaxe</h2> +<pre class="syntaxbox"><em>navigatorObject<code> = window.navigator</code></em></pre> +<h2 id="Specification" name="Specification">Exemplos</h2> +<h3 id="Exemplo_1_Detecta_o_navegador_e_retorna_uma_string">Exemplo #1: Detecta o navegador e retorna uma string</h3> +<pre class="brush: js">var sBrowser, sUsrAg = navigator.userAgent; + +if(sUsrAg.indexOf("Chrome") > -1) { + sBrowser = "Google Chrome"; +} else if (sUsrAg.indexOf("Safari") > -1) { + sBrowser = "Apple Safari"; +} else if (sUsrAg.indexOf("Opera") > -1) { + sBrowser = "Opera"; +} else if (sUsrAg.indexOf("Firefox") > -1) { + sBrowser = "Mozilla Firefox"; +} else if (sUsrAg.indexOf("MSIE") > -1) { + sBrowser = "Microsoft Internet Explorer"; +} + +alert("Você está utilizando: " + sBrowser);</pre> +<h3 id="Exemplo_2_Detecta_o_navegador_e_retorna_um_índice">Exemplo #2: Detecta o navegador e retorna um índice</h3> +<pre class="brush: js">function getBrowserId () { + + var + aKeys = ["MSIE", "Firefox", "Safari", "Chrome", "Opera"], + sUsrAg = navigator.userAgent, nIdx = aKeys.length - 1; + + for (nIdx; nIdx > -1 && sUsrAg.indexOf(aKeys[nIdx]) === -1; nIdx--); + + return nIdx + +} + +console.log(getBrowserId());</pre> +<h2 id="Specification" name="Specification">Especificação</h2> +<ul> + <li>{{SpecName("HTML5 W3C", "webappapis.html#the-navigator-object","window.navigator")}}</li> + <li>{{SpecName("HTML5.1", "webappapis.html#the-navigator-object", "window.navigator")}}</li> + <li>{{SpecName("HTML WHATWG", "timers.html#the-navigator-object", "window.navigator")}}</li> +</ul> +<h2 id="See_also" name="See_also">Veja também</h2> diff --git a/files/pt-br/web/api/window/ondevicelight/index.html b/files/pt-br/web/api/window/ondevicelight/index.html new file mode 100644 index 0000000000..005ef03903 --- /dev/null +++ b/files/pt-br/web/api/window/ondevicelight/index.html @@ -0,0 +1,99 @@ +--- +title: Window.ondevicelight +slug: Web/API/Window/ondevicelight +translation_of: Web/API/Window/ondevicelight +--- +<div>{{APIRef}}</div> + +<p>Especifica um event listener para receber eventos {{event("devicelight")}}. Esses eventos ocorrem quando um dispositivo com sensores de nível de luz detecta uma mudança na intensidade do nível de luz do ambiente.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox">window.ondevicelight = <var>funcRef</var></pre> + +<p>Onde <code><em>funcRef</em></code> é a função a ser chamada quando o evento {{event("devicelight")}} ocorre. Estes eventos são do tipo {{domxref("DeviceLightEvent")}}.</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specificação</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('AmbientLight', '#event-handlers', 'Ambient Light Events')}}</td> + <td>{{Spec2('AmbientLight')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_com_os_Navegadores">Compatibilidade com os Navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("22.0")}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("15.0")}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] The {{event("devicelight")}} event is implemented and by preference enabled by default in Firefox Mobile for Android (15.0) and in Firefox OS (B2G). Starting with Gecko 22.0 {{geckoRelease("22.0")}}, a desktop implementation for Mac OS X is also available. Support for Windows 7 is in progress (see {{bug(754199)}}).</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{event("devicelight")}}</li> + <li>{{domxref("DeviceLightEvent")}}</li> + <li><a href="/en-US/docs/Web/API/DeviceLightEvent/Using_light_events">Using Light Events</a></li> +</ul> diff --git a/files/pt-br/web/api/window/onscroll/index.html b/files/pt-br/web/api/window/onscroll/index.html new file mode 100644 index 0000000000..9589f24eaa --- /dev/null +++ b/files/pt-br/web/api/window/onscroll/index.html @@ -0,0 +1,98 @@ +--- +title: window.onscroll +slug: Web/API/Window/onscroll +translation_of: Web/API/GlobalEventHandlers/onscroll +--- +<p>{{ ApiRef() }}</p> +<h3 id="Summary" name="Summary">Sumário</h3> +<p>Especifica a função a ser chamada quando é feito o scroll na janela.</p> +<h3 id="Syntax" name="Syntax">Sintaxe</h3> +<pre class="eval">window.onscroll = <em>funcRef</em>; +</pre> +<ul> + <li><code>funcRef</code> é uma função de referência.</li> +</ul> +<h3 id="Example" name="Example">Exemplos</h3> +<h4 id="Exemplo_1_Genérico">Exemplo 1: Genérico</h4> +<pre class="brush: js">window.onscroll = function (oEvent) { + // executa um bloco de código ou funções, quando o scroll é feito na janela. +} +</pre> +<h4 id="Examplo_2_Dectando_a_rolagem">Examplo 2: Dectando a rolagem</h4> +<p>O exemplo a seguir, irá disparar um <code><a href="/pt-BR/docs/DOM/window.alert" title="/pt-BR/docs/DOM/window.alert">alerta</a></code> sempre que o usuário rolar a página .</p> +<pre class="brush: html"><!doctype html> +<html> +<head> +<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> +<title>onscroll test</title> +<script type="text/javascript"> +window.onscroll = scroll; + +function scroll () { + alert("evento scroll detectado! " + window.pageXOffset + " " + window.pageYOffset); + // nota: você pode usar window.innerWidth e window.innerHeight para obter a largura e altura da área de visão. +} +</script> +</head> + +<body> +<p>Redimensione a janela</p> +<p>para um tamanho pequeno,</p> +<p>e use a barra de rolagem</p> +<p>para mover ao redor do conteúdo da página</p> +<p>na janela.</p> +</body> +</html> +</pre> +<h4 id="Examplo_3_Mostra_um_link_no_topo_da_página_depois_da_rolagem.">Examplo 3: Mostra um link no topo da página depois da rolagem.</h4> +<p>O exemplo a seguir irá mostrar um link( uma imagem de seta ) no topo da página quando a rolagem vertical atingir 500 pixels</p> +<p> </p> +<pre class="brush: html"><!doctype html> +<html> +<head> +<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> +<title>MDN Example</title> +<script type="text/javascript"> +var bAppended = false, oBookmark = document.createElement("div"); +oBookmark.id = "arrowUp"; +oBookmark.innerHTML = "<a href=\"#\" title=\"Top of the page.\">&uarr;<\/a>"; + +onscroll = function() { + var nVScroll = document.documentElement.scrollTop || document.body.scrollTop; + bAppended = nVScroll > 500 ? + bAppended || (document.body.appendChild(oBookmark), true) + : bAppended && (document.body.removeChild(oBookmark), false); +}; +</script> +<style type="text/css"> +#arrowUp { + position: fixed; + height: auto; + width: auto; + right: 10px; + top: 10px; + font-size: 48px; +} +#arrowUp a { + text-decoration: none; + color: black; + font-weight: bold; + font-family: serif; +} +</style> +</head> + +<body> +<p>Conteúdo da página aqui!</p> +</body> + +</html></pre> +<h3 id="Notes" name="Notes">Notas</h3> +<p>{{ Bug(189308) }}, nas versões antigas do Gecko, o evento 'onscroll' era executado apenas quando a barra de rolagem era arrastada, não quando utilizada a seta do teclado ou scroll do mouse.<br> + Esse bug foi corrigido no Gecko 1.8/Firefox 1.5</p> +<p>Quando o window.scrollX/scrollY não é 0 -- considerando que o scroll ocorreu por algum script ou uma ação manual -- recarregando a página irá disparar o evento onscroll imediatamente.</p> +<h3 id="Specification" name="Specification">Especificação</h3> +<ul> + <li><a class="external" href="http://www.w3.org/TR/html5/webappapis.html#event-handlers-on-elements-document-objects-and-window-objects" title="http://www.w3.org/TR/html5/webappapis.html#event-handlers-on-elements-document-objects-and-window-objects">HTML5: Event handlers on elements, Document objects, and Window objects</a></li> +</ul> +<p>{{ languages( { "zh-cn": "zh-cn/DOM/window.onscroll"} ) }}</p> diff --git a/files/pt-br/web/api/window/opendialog/index.html b/files/pt-br/web/api/window/opendialog/index.html new file mode 100644 index 0000000000..cb2e5f31ba --- /dev/null +++ b/files/pt-br/web/api/window/opendialog/index.html @@ -0,0 +1,90 @@ +--- +title: window.openDialog +slug: Web/API/Window/openDialog +translation_of: Web/API/Window/openDialog +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Summary" name="Summary">Resumo</h3> + +<p><code>window.openDialog</code> é uma extensão para <a href="/en/DOM/window.open" title="en/DOM/window.open">window.open</a>. Ela se comporta da mesma maneira, exceto que pode opcionalmente usar um ou mais parâmetros passado por <code>windowFeatures</code>, e <code>windowFeatures</code> em si é tratado um pouco diferente.</p> + +<p>Parâmetros opcionais, se presentes, serão incluídos no JavaScript Array object e adicionados a nova janela criada como uma propriedade chamada <a href="/en/DOM/window.arguments" title="en/DOM/window.arguments">window.arguments</a>. Eles podem ser referenciados no javascript da janela a qualquer momento, incluindo durante a execução da <code>load</code> handler. Esses parâmetros podem ser usados, e depois, para passar argumentos para e da janela de diálogo.</p> + +<p>Note que a chamada para <code>openDialog()</code> retorna imediatamente. Se você quer que a chamada seja bloqueada até o usuário fechar a janela de diálogo, forneça <code>modal</code> como um parâmetro <code>windowFeatures</code>. Note que isso significa que o usuário não poderá interagir com a janela que abriu a janela modal (modal dialog) enquanto o usuário não fechá-la.</p> + +<h3 id="Syntax" name="Syntax">Sintaxe</h3> + +<pre class="eval"><em>newWindow</em> = openDialog(<em>url</em>, <em>name</em>, <em>features</em>, <em>arg1</em>, <em>arg2</em>, ...) +</pre> + +<dl> + <dt>newWindow </dt> + <dd>A janela aberta</dd> + <dt>url </dt> + <dd>A URL a ser carregada na nova janela aberta.</dd> + <dt>name </dt> + <dd>O nome da janela (opcional). Veja a descrição de <a href="/en/DOM/window.open" title="en/DOM/window.open">window.open</a> para informações detalhadas.</dd> + <dt>features </dt> + <dd>Consulte <a href="/en/DOM/window.open" title="en/DOM/window.open">window.open</a> para descrição.</dd> + <dt>arg1, arg2, ... </dt> + <dd>Os argumentos podem ser passados para a nova janela (opcional).</dd> +</dl> + +<h3 id="Example" name="Example">Exemplo</h3> + +<pre class="brush: js">var win = openDialog("<span class="nowiki">http://example.tld/zzz.xul</span>", "dlg", "", "pizza", 6.98); +</pre> + +<h3 id="Notes" name="Notes">Observações</h3> + +<h4 id="New_Features" name="New_Features">Novas funcionalidades</h4> + +<p><code>all</code> - Initially activates (or deactivates <code>("all=no")</code>) all chrome (except the behaviour flags <code>chrome</code>, <code>dialog</code> and <code>modal</code>). These can be overridden (so <code>"menubar=no,all"</code> turns on all chrome except the menubar.) This feature is explicitly ignored by <a href="/en/DOM/window.open" title="en/DOM/window.open">window.open</a>. <code>window.openDialog</code> finds it useful because of its different default assumptions.</p> + +<h4 id="Default_behaviour" name="Default_behaviour">Comportamento padrão</h4> + +<p>The <code>chrome</code> and <code>dialog</code> features are always assumed on, unless explicitly turned off ("<code>chrome=no</code>"). <code>openDialog</code> treats the absence of the features parameter as does <a href="/en/DOM/window.open" title="en/DOM/window.open">window.open</a>, (that is, an empty string sets all features to off) except <code>chrome</code> and <code>dialog</code>, which default to on. If the <code>features</code> parameter is a zero-length string, or contains only one or more of the behaviour features (<code>chrome</code>, <code>dependent</code>, <code>dialog</code> and <code>modal</code>) the chrome features are assumed "OS' choice." That is, window creation code is not given specific instructions, but is instead allowed to select the chrome that best fits a dialog on that operating system.</p> + +<h4 id="Passing_extra_parameters_to_the_dialog" name="Passing_extra_parameters_to_the_dialog">Passando parâmetros extras para o diálogo</h4> + +<p>Para passar parâmento extra para a janela de diálogo, você pode simplesmente pode fornece=lo depois do parâmetro <code>windowFeatures</code>:</p> + +<pre class="brush: js">openDialog("<span class="brush: js">http://example.tld/zzz.xul</span>", "dlg", "", "pizza", 6.98); +</pre> + +<p>Os parâmetros serão empacotados em uma propriedade chamada <code>arguments</code> do tipo <a href="/en/Core_JavaScript_1.5_Reference/Global_Objects/Array" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Array">Array</a>, e essa propriedade será adicionada para a nova janela de diálogo.</p> + +<p>Para acessar esses parâmetros extras da janela de diálogo, use o seguinte esquema:</p> + +<pre class="brush: js">var food = window.arguments[0]; +var price = window.arguments[1]; +</pre> + +<p>Note que você pode acessar esta propriedade de qualwuer lugar do código de diálogo.. (<a href="/en/Code_snippets/Dialogs_and_Prompts#Passing_arguments_and_displaying_a_dialog" title="en/Code_snippets/Dialogs_and_Prompts#Passing_arguments_and_displaying_a_dialog">Outro exemplo</a>).</p> + +<h4 id="Returning_values_from_the_dialog" name="Returning_values_from_the_dialog">Retornando valores do diálogo</h4> + +<p>Dado que <code>window.close()</code> apaga todas a propriedades associadas com a janela de diálogo (isto é, as variáveis especificadas no código javascript que é carregado a partir da janela de diálogo), não é possível passar os valores retornados depois da operação de fechamento usando variáveis globais (ou qualquer outro construtor).</p> + +<p>Para ser possível passar valores de volta para a janela que chamou, você deve fornecer algum objeto via parâmetros extra. Em seguida, pode acessar esse objeto de dentro do código de diálogo e definir as propriedades nele, que contém os valores que você deseja retornar ou preservar passado a operação <code>window.close()</code>.</p> + +<pre class="brush: js">var retVals = { address: null, delivery: null }; +openDialog("<span class="brush: js">http://example.tld/zzz.xul</span>", "dlg", "modal", "pizza", 6.98, retVals); +</pre> + +<p>Se você definir as propriedades do objeto <code>retVals</code> no código de diálogo, conforme descrito abaixo, agora você pode acessá-los via array <code>retVals</code> depois do retorno da chamada de <code>openDialog()</code>.</p> + +<p>Dentro do código de diálogo, você pode definir as propriedades da seguinte forma:</p> + +<pre class="brush: js">var retVals = window.arguments[2]; +retVals.address = enteredAddress; +retVals.delivery = "immediate"; +</pre> + +<p>Veja também . (<a href="/en/Code_snippets/Dialogs_and_Prompts#Passing_arguments_and_displaying_a_dialog" title="en/Code_snippets/Dialogs_and_Prompts#Passing_arguments_and_displaying_a_dialog">Outro exemplo</a>).<br> + veja também window.importDialog (mobile).</p> + +<h3 id="Specification" name="Specification">Especificação</h3> + +<p>{{ DOM0() }}</p> diff --git a/files/pt-br/web/api/window/performance/index.html b/files/pt-br/web/api/window/performance/index.html new file mode 100644 index 0000000000..6e7edcd558 --- /dev/null +++ b/files/pt-br/web/api/window/performance/index.html @@ -0,0 +1,33 @@ +--- +title: Window.performance +slug: Web/API/Window/performance +translation_of: Web/API/Window/performance +--- +<div>{{APIREf}}</div> + +<div>A API Web Performance permite páginas da web acessarem algumas funções para medir a performance de páginas e aplicações da web, incluindo a API Navigation Timing e dados de tempo de alta resolução.</div> + +<div> </div> + +<h2 id="Methods" name="Methods">Métodos</h2> + +<dl> + <dt>{{domxref("Performance.mark()", "performance.mark()")}}</dt> + <dd>Mapeia um {{domxref("DOMHighResTimeStamp")}} para o nome especificado representando a quantidade de milissegundos passados desde um momento de referência.</dd> +</dl> + +<dl> + <dt>{{domxref("Performance.now()", "performance.now()")}}</dt> + <dd>Retorna um {{domxref("DOMHighResTimeStamp")}} representando a quantidade de milissegundos passados desde um momento de referência.</dd> +</dl> + +<h2 id="Properties" name="Properties">Propriedades</h2> + +<dl> + <dt>{{domxref("Performance.timing", "performance.timing")}}</dt> + <dd>É um objeto {{domxref("PerformanceTiming")}} contendo informações de performance relacionadas a latência.</dd> + <dt>{{domxref("Performance.navigation", "performance.navigation")}}</dt> + <dd>É um objeto {{domxref("PerformanceNavigation")}} representando o tipo de navegação que ocorre no contexto de navegação dado, como a quantidade de redirecionamentos necessários para buscar o recurso.</dd> + <dt><a href="https://docs.webplatform.org/wiki/apis/timing/properties/memory">performance.memory</a></dt> + <dd>Uma extensao não-padrão adicionada ao Chrome.</dd> +</dl> diff --git a/files/pt-br/web/api/window/popstate_event/index.html b/files/pt-br/web/api/window/popstate_event/index.html new file mode 100644 index 0000000000..55f493f18b --- /dev/null +++ b/files/pt-br/web/api/window/popstate_event/index.html @@ -0,0 +1,144 @@ +--- +title: popstate +slug: Web/API/Window/popstate_event +translation_of: Web/API/Window/popstate_event +--- +<p>O evento <code>popstate </code>é disparado quando a entrada do histórico ativa é alterado. Se o histórico de entrada a ser ativado for criado por uma chamada <code>history.pushState() </code>ou for afetada por uma chamada <code>history.replaceState(),</code> a propriedade dos eventos<code> popstate </code>contém uma cópia do histórico de entrada do objeto.<br> + <br> + Note que apenas chamando <code>history.pushState()</code> ou <code>history.replaceState()</code> não ira disparar um evento <code>popstate. </code>O evento <code>popstate </code>apenas é disparado após uma ação no navegador como um click no botão de voltar (ou chamando <code>history.back() por javascript</code>)<br> + <br> + Navegadores tendem a lidar com o evento <code>popstate </code>diferentemente no carregamento da página. Chrome (anterior versão 34) e Safari sempre emitem um evento <code>popstate</code> no carregamento da página, mas o Firefox não.</p> + +<h2 id="Informação_geral">Informação geral</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Especificação</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-popstate">HTML5</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;">PopStateEvent</dd> + <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt> + <dd style="margin: 0 0 0 120px;">Yes</dd> + <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt> + <dd style="margin: 0 0 0 120px;">No</dd> + <dt style="float: left; text-align: right; width: 120px;">Alvo</dt> + <dd style="margin: 0 0 0 120px;">defaultView</dd> + <dt style="float: left; text-align: right; width: 120px;">Ação padrão</dt> + <dd style="margin: 0 0 0 120px;">None</dd> +</dl> + +<h2 id="Propriedades">Propriedades</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>The browsing context (<code>window</code>).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event is cancellable or not.</td> + </tr> + <tr> + <td><code>state</code> {{readonlyInline}}</td> + <td><em>any</em></td> + <td>The current history entry's state object (if any).</td> + </tr> + </tbody> +</table> + +<h2 id="Compatiblidade_com_navegadores">Compatiblidade com navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2")}}</td> + <td>10.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}[1]</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>3.0[2]</td> + <td>{{CompatGeckoMobile("2")}}</td> + <td>10.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}[1]</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] A implementação tem um suporte limitado.</p> + +<p>[2] A implementação em Android 2.2 e 2.3 tem problemas.</p> + +<h2 id="Exemplo">Exemplo</h2> + +<p>Um página no <code>http://example.com/example.html roda o código abaixo e irá gerar os logs indicados</code></p> + +<pre class="brush: js">window.onpopstate = function(event) { + console.log("location: " + document.location + ", state: " + JSON.stringify(event.state)); +}; +history.pushState({page: 1}, "title 1", "?page=1"); +history.pushState({page: 2}, "title 2", "?page=2"); +history.replaceState({page: 3}, "title 3", "?page=3"); +history.back(); // Logs "location: http://example.com/example.html?page=1, state: {"page":1}" +history.back(); // Logs "location: http://example.com/example.html, state: null +history.go(2); // Logs "location: http://example.com/example.html?page=3, state: {"page":3} +</pre> + +<p>Observe que mesmo que a entrada do histórico inicial(para <code>http://example.com/example.html</code>) não tem nenhum estado associado a ele, um evento <code>popstate </code>é ainda disparado quando nós ativamos essa entrada após a segunda chamada para<code> history.back ().</code><br> + </p> + +<h2 id="Eventos_relacionados">Eventos relacionados</h2> + +<ul> + <li><a href="/en-US/docs/Mozilla_event_reference/hashchange"><code>hashchange</code></a></li> +</ul> diff --git a/files/pt-br/web/api/window/print/index.html b/files/pt-br/web/api/window/print/index.html new file mode 100644 index 0000000000..6bf664bfb0 --- /dev/null +++ b/files/pt-br/web/api/window/print/index.html @@ -0,0 +1,56 @@ +--- +title: Window.print() +slug: Web/API/Window/print +tags: + - DOM + - Window + - print +translation_of: Web/API/Window/print +--- +<p>{{ ApiRef() }}</p> + +<h2 id="Summary" name="Summary">Sumário</h2> + +<p dir="ltr" id="tw-target-text">Abre a janela de impressão para imprimir o documento atual.</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="eval">window.print() +</pre> + +<h2 id="Specification" name="Specification">Notas</h2> + +<p>Começando com o Chrome {{CompatChrome(46.0)}} este método é bloqueado dentro de um {{htmlelement("iframe")}} a menos que seu atributo sandbox tem o valor allow-modal .</p> + +<h2 id="Specification" name="Specification">Especificação</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'timers-and-user-prompts.html#printing', 'print()')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_entre_Navegadores">Compatibilidade entre Navegadores</h2> + + + +<p>{{Compat("api.Window.print")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/en/Printing" title="en/Printing">Printing</a></li> + <li>{{ domxref("window.onbeforeprint") }}</li> + <li>{{ domxref("window.onafterprint") }}</li> +</ul> + +<p>{{ languages( { "ja": "ja/DOM/window.print", "it": "it/DOM/window.print" , "zh-cn": "zh-cn/DOM/window.print" } ) }}</p> diff --git a/files/pt-br/web/api/window/prompt/index.html b/files/pt-br/web/api/window/prompt/index.html new file mode 100644 index 0000000000..e831fbcc4d --- /dev/null +++ b/files/pt-br/web/api/window/prompt/index.html @@ -0,0 +1,66 @@ +--- +title: Window.prompt() +slug: Web/API/Window/prompt +translation_of: Web/API/Window/prompt +--- +<div>{{ApiRef("Window")}}</div> + +<div>O <span style="font-family: Consolas,Monaco,'Andale Mono',monospace;">Window.prompt()</span> exibe uma caixa de diálogo com uma mensagem opcional solicitando ao usuário a entrada de algum texto.</div> + +<p> </p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="syntaxbox"><em>resultado</em> = window.prompt(<em>texto</em>, <em>valor</em>); +</pre> + +<ul> + <li><code>resultado</code> é uma cadeia de caracteres contendo o texto digitado pelo usuário, ou um valor nulo.</li> + <li><code>texto</code> é 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.</li> + <li><code>valor</code> é 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.</li> +</ul> + +<h2 id="Example" name="Example">Exemplo</h2> + +<pre class="brush: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"</pre> + +<p>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á <code>null</code>.</p> + +<p>{{todo("external image!")}} O prompt acima aparece da seguinte forma (no Chrome do Windows 7):</p> + +<p><img src="https://lh4.googleusercontent.com/-uDx7r8y4tV8/UKv_PjG163I/AAAAAAAAHd0/Arwk0l4cpq0/s362/Prompt_Chrome_Windows7.png" style="width: 362px;"></p> + +<h2 id="Notes" name="Notes">Notas</h2> + +<p>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.</p> + +<p><span class="comment">The following text is shared between this article, DOM:window.confirm and DOM:window.alert</span>As 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).</p> + +<p>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 <code>Number:</code> <span style='background-color: #f6f6f2; font-family: "Courier New","Andale Mono",monospace; font-size: 12px; line-height: normal;'>var aNumber = Number(window.prompt("Digite um número", "")); </span></p> + +<p>Os códigos do <a href="/en-US/docs/Chrome" title="Chrome">Mozilla Chrome</a> (e.g. Firefox extensions) ao invés disso, devem usar os métodos da interface {{interface("nsIPromptService")}}.</p> + +<p>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.</p> + +<p>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á <code>undefined</code>. Não está claro se é um erro ou um comportamento intencional. Versões desktop do IE implementam esta função.</p> + +<p><strong style="font-size: 30px; font-weight: 700; letter-spacing: -1px; line-height: 30px;">Especificação</strong></p> + +<p>Especificado em HTML5.</p> + +<h2 id="See_also" name="See_also">Veja também</h2> + +<ul> + <li>{{domxref("window.alert", "alert")}}</li> + <li>{{domxref("window.confirm", "confirm")}}</li> +</ul> diff --git a/files/pt-br/web/api/window/requestanimationframe/index.html b/files/pt-br/web/api/window/requestanimationframe/index.html new file mode 100644 index 0000000000..3adca4b22f --- /dev/null +++ b/files/pt-br/web/api/window/requestanimationframe/index.html @@ -0,0 +1,106 @@ +--- +title: window.requestAnimationFrame() +slug: Web/API/Window/requestAnimationFrame +tags: + - API + - DOM + - Intermediário + - Método(2) + - Referência do DOM + - Timers JavaScript +translation_of: Web/API/window/requestAnimationFrame +--- +<p>{{APIRef}}<br> + O método <strong><code>window.requestAnimationFrame()</code></strong> fala para o navegador que deseja-se realizar uma animação e pede que o navegador chame uma função específica para atualizar um quadro de animação antes da próxima repaint (repintura). O método tem como argumento uma callback que deve ser invocado antes da repaint.</p> + +<div class="note"><strong>Nota: </strong>A rotina callback deve chamar <code>requestAnimationFrame()</code> se quiser animar outro quadro na próxima repaint.</div> + +<p>Deve-se chamar esse método sempre que estiver pronto para atualizar a animação na tela. Isso irá requisitar que a função de animação seja chamada antes que o navegador realize a próxima repaint. O número de callbacks é normalmente 60 por segundo, mas geralmente acompanha a taxa de atualização do display na maioria dos navegadores, como recomenda a W3C. A taxa de callbacks é reduzida quando executados em aba de fundo ou em {{ HTMLElement("iframe") }} escondidos para melhorar performance e vida de bateria.</p> + +<p>Um único argumento é passado para o método callback, um {{domxref("DOMHighResTimeStamp")}}, que indica o tempo atual no qual callbacks enfileiradas por <code>requestAnimationFrame</code> começam a disparar. Múltiplos callbacks em um único quadro, assim, cada um recebe o mesmo carimbo de data/hora . Esse carimbo de data/hora é um número decimal, em milisegundos, mas com precisão mínima de 1ms (1000 µs).</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="syntaxbox">window.requestAnimationFrame(callback); +</pre> + +<h3 id="Parameters" name="Parameters">Parâmetros</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Parâmetro especificando uma função a ser chamada quando chegar a hora de atualizar a animação para a próxima repaint. O callback possui um único argumento, um {{domxref("DOMHighResTimeStamp")}}, que indica a hora atual (a hora retornada de {{domxref('Performance.now()')}} ) para quando <code>requestAnimationFrame</code> começar a disparar callbacks.</dd> +</dl> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>Um valor inteiro <code>long</code>, a id da requisição, que identifica unicamente a entrada na lista de callbacks. Esse é um valor não-zero, mas não deve-se assumir mais nada sobre esse valor. Esse valor pode ser passado para {{domxref("window.cancelAnimationFrame()")}} para cancelar a requisição da atualização do callback.</p> + +<h2 id="Notes" name="Notes">Exemplo</h2> + +<pre class="brush: js">var start = null; +var element = document.getElementById("ElementoQueVcQuerAnimar"); +element.style.position = 'absolute'; + +function step(timestamp) { + if (!start) start = timestamp; + var progress = timestamp - start; + element.style.left = Math.min(progress/10, 200) + "px"; + if (progress < 2000) { + window.requestAnimationFrame(step); + } +} + +window.requestAnimationFrame(step); +</pre> + +<h2 id="Specification" name="Specification">Especificação</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#animation-frames', 'requestAnimationFrame')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Sem mudanças, substitui a anterior</td> + </tr> + <tr> + <td>{{SpecName('RequestAnimationFrame', '#dom-windowanimationtiming-requestanimationframe', 'requestAnimationFrame')}}</td> + <td>{{Spec2('RequestAnimationFrame')}}</td> + <td>Definição inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2> + +<div>{{Compat("api.Window.requestAnimationFrame")}}</div> + +<div id="compat-desktop"></div> + +<p>[1] Anteriro ao Gecko 11.0 {{geckoRelease("11.0")}}, mozRequestAnimationFrame() podia ser chamado sem parâmetros de entrada. Isso não é mais suportado, como provavelmente não será parte do padrão</p> + +<p>[2] O parâmetro do callback é {{domxref("DOMTimeStamp")}} ao invés de {{domxref("DOMHighResTimeStamp")}} se a versão prefixada do método foi utilizada <code>DOMTimeStamp</code> possui apenas precisão de milisegundo, mas <code>DOMHighResTimeStamp</code> possui precisão mínima de microsegundos. Portanto, o tempo zero é diferente: <code>DOMHighResTimeStamp</code> possui o mesmo tempo zero que <code>performance.now()</code>, mas DOMTimeStamp possui o mesmo tempo zero que <code>Date.now().</code></p> + +<p>[3] A chamada correta no Chrome para cancelar a requisição é currently <code>window.cancelAnimationFrame()</code>. Versões anteriores, <code>window.webkitCancelAnimationFrame()</code> e <code>window.webkitCancelRequestAnimationFrame()</code>, foram descontinuados mas possuem suporte por enquanto.</p> + +<p>[4] Suporte para a versão prefixada foi removida no Firefox 42.</p> + +<h2 id="See_also" name="See_also">Veja também</h2> + +<ul> + <li>{{domxref("Window.mozAnimationStartTime")}}</li> + <li>{{domxref("Window.cancelAnimationFrame()")}}</li> + <li><a href="http://weblogs.mozillazine.org/roc/archives/2010/08/mozrequestanima.html">mozRequestAnimationFrame</a> - Post do blog</li> + <li><a href="http://paulirish.com/2011/requestanimationframe-for-smart-animating/">requestAnimationFrame for smart animating</a> - Post do blog</li> + <li><a href="http://hacks.mozilla.org/2011/08/animating-with-javascript-from-setinterval-to-requestanimationframe/">Animating with javascript: from setInterval to requestAnimationFrame</a> - Post do blog</li> + <li><a href="http://blogs.msdn.com/b/ie/archive/2011/07/05/using-pc-hardware-more-efficiently-in-html5-new-web-performance-apis-part-1.aspx">Using PC Hardware more efficiently in HTML5: New Web Performance APIs, Part 1</a> - Post do blog</li> + <li><a href="http://www.testufo.com/#test=animation-time-graph" title="http://www.testufo.com/#test=animation-time-graph">TestUFO: Test your web browser for requestAnimationFrame() Timing Deviations</a></li> + <li>Paul Irish: <a class="external external-icon" href="http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/" title="http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/">requestAnimationFrame for Smart Animating</a></li> + <li>Paul Irish: <a class="external external-icon" href="http://updates.html5rocks.com/2012/05/requestAnimationFrame-API-now-with-sub-millisecond-precision">requestAnimationFrame API: now with sub-millisecond precision</a></li> +</ul> diff --git a/files/pt-br/web/api/window/requestidlecallback/index.html b/files/pt-br/web/api/window/requestidlecallback/index.html new file mode 100644 index 0000000000..cdd2485d84 --- /dev/null +++ b/files/pt-br/web/api/window/requestidlecallback/index.html @@ -0,0 +1,70 @@ +--- +title: window.requestIdleCallback() +slug: Web/API/Window/requestIdleCallback +translation_of: Web/API/Window/requestIdleCallback +--- +<div>{{APIRef("HTML DOM")}}{{SeeCompatTable}}</div> + +<p>O método <code><strong>window.requestIdleCallback()</strong></code> 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.</p> + +<p>Você pode chamar <code>requestIdleCallback()</code> com uma função callback ociosa para agendar outro callback para ter lugar não antes da próxima passagem pelo event loop.</p> + +<div class="note">Um <code>timeout</code> é altamento recomendado, caso contrário, é possível que vários segundos passem antes que a função callback seja chamada.</div> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox notranslate"><code>var <em>handle</em> = <em>window</em>.requestIdleCallback(<em>callback</em>[, <em>options</em>])</code></pre> + +<h3 id="Returns" name="Returns">Return value</h3> + +<p>An ID which can be used to cancel the callback by passing it into the {{domxref("window.cancelIdleCallback()")}} method.</p> + +<h3 id="Parameters" name="Parameters">Parameters</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>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 {{domxref("IdleDeadline")}} object describing the amount of time available and whether or not the callback has been run because the timeout period expired.</dd> + <dt><code>options</code> {{optional_inline}}</dt> + <dd>Contains optional configuration parameters. Currently only one property is defined: + <ul> + <li><code>timeout</code>: If <code>timeout</code> is specified and has a positive value, and the callback has not already been called by the time <em>timeout</em> milliseconds have passed, the callback will be called during the next idle period, even if doing so risks causing a negative performance impact.</li> + </ul> + </dd> +</dl> + +<h2 id="Example" name="Example">Example</h2> + +<p>See our <a href="/en-US/docs/Web/API/Background_Tasks_API#Example">complete example</a> in the article <a href="/en-US/docs/Web/API/Background_Tasks_API">Cooperative Scheduling of Background Tasks API</a>.</p> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Specification</th> + <th>Status</th> + <th>Comment</th> + </tr> + <tr> + <td>{{SpecName('Background Tasks')}}</td> + <td>{{Spec2('Background Tasks')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Window.requestIdleCallback")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("window.cancelIdleCallback()")}}</li> + <li>{{domxref("IdleDeadline")}}</li> + <li>{{domxref("window.setTimeout()")}}</li> + <li>{{domxref("window.setInterval()")}}</li> + <li>{{domxref("window.requestAnimationFrame")}}</li> +</ul> diff --git a/files/pt-br/web/api/window/resize_event/index.html b/files/pt-br/web/api/window/resize_event/index.html new file mode 100644 index 0000000000..ac5214b5a2 --- /dev/null +++ b/files/pt-br/web/api/window/resize_event/index.html @@ -0,0 +1,190 @@ +--- +title: resize +slug: Web/API/Window/resize_event +translation_of: Web/API/Window/resize_event +--- +<p><span class="seoSummary">O evento <strong><code>resize</code></strong> é disparado quando o document view é redimensionado.</span></p> + +<p>O evento manipulador pode ser registrado para o evento <code>resize</code> usando o atributo <code>window.onresize</code> ou usando <code>window.addEventListener('resize', ...)</code> </p> + +<p>Em alguns browsers mais recentes é possível registrar o evento manipulador <code>resize</code> em qualquer elemento HTML. E ainda é possível adicionar atributos <code>onresize</code> ou usar {{domxref("EventTarget.addEventListener", "addEventListener()")}} para implementar o manipulador em qualquer elemento. Entretanto, eventos <code>resize</code> apenas são disparados sobre (enviados para) o objeto {{domxref("Window", "window")}} ({{domxref("document.defaultView")}}). Apenas manipuladores registrados no objeto <code>window</code> recebem os eventos.</p> + +<p>Existe uma nova proposta (2017) para permitir que todos os elementos sejam notificados de alterações de tamanho. Veja <a href="https://wicg.github.io/ResizeObserver/">Resize Observer</a> para ler o documento rascunho, e <a href="https://github.com/WICG/ResizeObserver/issues">Github issues</a> para ler as discussões do que está ativo.</p> + +<h2 id="Informações_gerais">Informações gerais</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Specifications</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-resize">DOM L3</a>, <a href="http://www.w3.org/TR/cssom-view/#resizing-viewports">CSSOM View</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;">UIEvent</dd> + <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt> + <dd style="margin: 0 0 0 120px;">Não</dd> + <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt> + <dd style="margin: 0 0 0 120px;">Não</dd> + <dt style="float: left; text-align: right; width: 120px;">Target</dt> + <dd style="margin: 0 0 0 120px;">defaultView (window)</dd> + <dt style="float: left; text-align: right; width: 120px;">Default Action</dt> + <dd style="margin: 0 0 0 120px;">Nenhuma</dd> +</dl> + +<h2 id="Properties">Properties</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td> + <td>O evento alto (o primeiro alvo na árvore DOM).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td> + <td>O tipo de evento.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>Se o evento normalmente bubbles ou não.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>Se o evento é cancelado ou não.</td> + </tr> + <tr> + <td><code>view</code> {{readonlyInline}}</td> + <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td> + <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> do documento)</td> + </tr> + <tr> + <td><code>detail</code> {{readonlyInline}}</td> + <td><code>long</code> (<code>float</code>)</td> + <td>0.</td> + </tr> + </tbody> +</table> + +<h2 id="Examples">Examples</h2> + +<p>Como os eventos <code>resize</code> 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 <a href="/en-US/docs/DOM/window.requestAnimationFrame" title="/en-US/docs/DOM/window.requestAnimationFrame">requestAnimationFrame</a>, <a href="/en-US/docs/Web/API/WindowTimers/setTimeout">setTimeout</a> ou <a href="/en-US/docs/Web/API/CustomEvent">customEvent</a>*, como a seguir:<br> + <br> + <strong>* IMPORTANT: </strong>Por favor note que IE11 precisa do <a href="https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent#Polyfill">customEvent</a> polyfill para funcionar corretamente.</p> + +<h3 id="requestAnimationFrame_customEvent">requestAnimationFrame + customEvent</h3> + +<pre class="brush: 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!"); +}); +</pre> + +<h3 id="requestAnimationFrame">requestAnimationFrame</h3> + +<pre class="brush: 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!') +}); +</pre> + +<h3 id="setTimeout">setTimeout</h3> + +<pre class="brush: 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 + ... + } + +}());</pre> diff --git a/files/pt-br/web/api/window/scroll/index.html b/files/pt-br/web/api/window/scroll/index.html new file mode 100644 index 0000000000..01ece16bbd --- /dev/null +++ b/files/pt-br/web/api/window/scroll/index.html @@ -0,0 +1,57 @@ +--- +title: Window.scroll() +slug: Web/API/Window/scroll +tags: + - API + - CSSOM View + - Referencia + - metodo +translation_of: Web/API/Window/scroll +--- +<div>{{APIRef}}</div> + +<h2 id="Summary" name="Summary">Resumo</h2> + +<p>Rola a janela para uma posição específica no documento.</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="syntaxbox">window.scroll(<em>x-coord</em>, <em>y-coord</em>) +</pre> + +<h3 id="Parameters" name="Parameters">Parâmetros</h3> + +<ul> + <li><code>x-coord</code> é o pixel que você deseja exibir ao longo do eixo horizontal do documento em relação à sua extremidade superior esquerda. </li> + <li><code>y-coord </code>é o pixel que você deseja exibir ao longo do eixo vertical do documento em relação à sua extremidade superior esquerda. </li> +</ul> + +<h2 id="Example" name="Example">Exemplo</h2> + +<pre class="brush:html;htmlScript:true;"><!-- disponha o centésimo pixel vertical no topo da janela --> + +<button onClick="scroll(0, 100);">clique para rolar 100 pixels para baixo</button> +</pre> + +<h2 id="Notes" name="Notes">Notas</h2> + +<p><a href="/en-US/docs/DOM/window.scrollTo">window.scrollTo</a> é essencialmente equivalente a este método. Para rolar uma distância específica repetidamente, utilize o método <a href="/en-US/docs/Window.scrollBy">window.scrollBy</a>. Veja também <a href="/en-US/docs/Window.scrollByLines">window.scrollByLines</a>, <a href="/en-US/docs/Window.scrollByPages">window.scrollByPages</a>.</p> + +<h2 id="Specification" name="Specification">Especificação</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSSOM View', '#dom-window-scroll', 'window.scroll()') }}</td> + <td>{{ Spec2('CSSOM View') }}</td> + <td>Definição inicial.</td> + </tr> + </tbody> +</table> diff --git a/files/pt-br/web/api/window/scrollby/index.html b/files/pt-br/web/api/window/scrollby/index.html new file mode 100644 index 0000000000..c3ee906d33 --- /dev/null +++ b/files/pt-br/web/api/window/scrollby/index.html @@ -0,0 +1,53 @@ +--- +title: Window.scrollBy() +slug: Web/API/Window/scrollBy +translation_of: Web/API/Window/scrollBy +--- +<p>{{ APIRef() }}</p> + +<h2 id="Summary" name="Summary">Resumo</h2> + +<p>Desloca o documento dentro da janela pelo valor fornecido.</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="eval">window.scrollBy(<em>X</em>, <em>Y</em>); +</pre> + +<h3 id="Parameters" name="Parameters">Parâmetros</h3> + +<ul> + <li><code>X</code> é o deslocamento em pixels (px) para a rolagem horizontalmente.</li> + <li><code>Y</code> é o deslocamento em pixels (px) para a rolagem verticalmente.</li> +</ul> + +<p>Coordenadas positivas deslocarão para a direita e para baixo. Coordenadas negativas deslocarão para a esquerda e para cima.</p> + +<h2 id="Example" name="Example">Exemplo</h2> + +<pre class="eval">// Desloca a altura interna da janela +window.scrollBy(0, window.innerHeight); +</pre> + +<h2 id="Notes" name="Notes">Notas</h2> + +<p><a href="/en-US/docs/DOM/Window.scrollBy">window.scrollBy</a> desloca uma quantidade específical enquanto <a href="/en-US/docs/DOM/Window.scroll">window.scroll</a> desloca para uma posição absoluta no documento. Veja Também <a href="/en-US/docs/DOM/Window.scrollByLines">window.scrollByLines</a>, <a href="/en-US/docs/DOM/Window.scrollByPages">window.scrollByPages</a></p> + +<h2 id="Specification" name="Specification">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSSOM View', '#dom-window-scrollby', 'window.scrollBy()') }}</td> + <td>{{ Spec2('CSSOM View') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> diff --git a/files/pt-br/web/api/window/scrollbypages/index.html b/files/pt-br/web/api/window/scrollbypages/index.html new file mode 100644 index 0000000000..1ad5c70c47 --- /dev/null +++ b/files/pt-br/web/api/window/scrollbypages/index.html @@ -0,0 +1,41 @@ +--- +title: Window.scrollByPages() +slug: Web/API/Window/scrollByPages +translation_of: Web/API/Window/scrollByPages +--- +<p>{{ ApiRef() }}{{Non-standard_header}}</p> + +<h3 id="Summary" name="Summary">Resumo</h3> + +<p>Rola o documento atual para a página especificada.</p> + +<h3 id="Syntax" name="Syntax">Sintaxe</h3> + +<pre class="eval">window.scrollByPages(<em>pages</em>) +</pre> + +<h3 id="Parameters" name="Parameters">Parâmetros</h3> + +<ul> + <li><strong><code>pages</code> </strong>é o número de páginas a serem roladas.</li> + <li><strong><code>pages</code></strong> pode ser um número inteiro positivo ou negativo.</li> +</ul> + +<h3 id="Example" name="Example">Exemplo</h3> + +<pre>// 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); +</pre> + +<h3 id="Notes" name="Notes">Notas</h3> + +<p>Veja também <a href="/en/DOM/window.scrollBy" title="en/DOM/window.scrollBy">window.scrollBy</a>, <a href="/en/DOM/window.scrollByLines" title="en/DOM/window.scrollByLines">window.scrollByLines</a>, <a href="/en/DOM/window.scroll" title="en/DOM/window.scroll">window.scroll</a>, <a href="/en/DOM/window.scrollTo" title="en/DOM/window.scrollTo">window.scrollTo</a>.</p> + +<h3 id="Specification" name="Specification">Specification</h3> + +<p>DOM Level 0. Not part of specification.</p> + +<p>{{ languages( { "ja": "ja/DOM/window.scrollByPages", "pl": "pl/DOM/window.scrollByPages", "zh-cn": "zh-cn/DOM/window.scrollByPages" } ) }}</p> diff --git a/files/pt-br/web/api/window/scrollto/index.html b/files/pt-br/web/api/window/scrollto/index.html new file mode 100644 index 0000000000..10d844a41f --- /dev/null +++ b/files/pt-br/web/api/window/scrollto/index.html @@ -0,0 +1,56 @@ +--- +title: Window.scrollTo() +slug: Web/API/Window/scrollTo +tags: + - API + - CSSOM View + - NeedsCompatTable + - NeedsMarkupWork + - NeedsSpecTable + - Referencia + - metodo +translation_of: Web/API/Window/scrollTo +--- +<div>{{ APIRef }}</div> + +<h2 id="Summary" name="Summary">Resumo</h2> + +<p>Realiza a rolagem para um conjunto de coordenadas em particular em um documento.</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="syntaxbox"><code>window.scrollTo(<em>x-coord</em>, <em>y-coord</em>)</code></pre> + +<h3 id="Parameters" name="Parameters">Parâmetros</h3> + +<ul> + <li><code>x-coord</code> é o pixel do eixo horizontal do documento que você quer exibir no canto superior esquerdo.</li> + <li><code>y-coord</code> é o pixel do eixo vertical do documento que você quer exibir no canto superior esquerdo.</li> +</ul> + +<h2 id="Example" name="Example">Exemplo</h2> + +<pre class="brush:js">window.scrollTo( 0, 1000 );</pre> + +<h2 id="Notes" name="Notes">Notas</h2> + +<p>Essa função é efetivamente a mesma que <a href="/en-US/docs/DOM/Window.scroll">window.scroll</a>. Para rolagem relativa, veja <a href="/en-US/docs/DOM/Window.scrollBy">window.scrollBy</a>, <a href="/en-US/docs/DOM/Window.scrollByLines">window.scrollByLines</a> e <a href="/en-US/docs/DOM/Window.scrollByPages">window.scrollByPages</a>.</p> + +<h2 id="Specification" name="Specification">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSSOM View', '#dom-window-scroll', 'window.scroll()') }}</td> + <td>{{ Spec2('CSSOM View') }}</td> + <td>Definição inicial.</td> + </tr> + </tbody> +</table> diff --git a/files/pt-br/web/api/window/scrolly/index.html b/files/pt-br/web/api/window/scrolly/index.html new file mode 100644 index 0000000000..28d7fd8797 --- /dev/null +++ b/files/pt-br/web/api/window/scrolly/index.html @@ -0,0 +1,76 @@ +--- +title: Window.scrollY +slug: Web/API/Window/scrollY +translation_of: Web/API/Window/scrollY +--- +<div>{{APIRef}}</div> + +<h2 id="Summary" name="Summary">Sumário</h2> + +<p>Retorna o número de pixels que o documento já rolou verticalmente.</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="syntaxbox">var y = window.scrollY; +</pre> + +<ul> + <li>y é o número atual de pixels que o documento rolou a partir do topo.</li> +</ul> + +<h2 id="Example" name="Example">Exemplo</h2> + +<pre class="brush:js">// verificar e ir para a segunda página +if (window.scrollY) { + window.scroll(0, 0); // reinicia a posição do scroll para a posição superior esquerda do documento. +} + +window.scrollByPages(1);</pre> + +<h2 id="Notes" name="Notes">Notas</h2> + +<p>Utilize esta propriedade para verificar se o documento já foi rolado quando funções de rolagem relativa, tais como {{domxref("window.scrollBy")}}, {{domxref("window.scrollByLines")}}, ou {{domxref("window.scrollByPages")}}, forem utilizadas.</p> + +<p>A propriedade <code>pageYOffset é um alias para scrollY:</code></p> + +<pre>window.pageYOffset == window.scrollY; // always true</pre> + +<p>For cross-browser compatibility, use <code>window.pageYOffset</code> instead of <code>window.scrollY</code>. <strong>Additionally</strong>, older versions of Internet Explorer (< 9) do not support either property and must be worked around by checking other non-standard properties. A fully compatible example:</p> + +<p>Para compatibilidade cross-browser, utilize window.pageYOffset em vez de window.scrollY. Além disso, versões inferiores do Internet Explorer 9 não suportam ambas as propriedades, e deve ser contornado verificando outras propriedades não padronizadas.</p> + +<pre class="brush:js">var supportPageOffset = window.pageXOffset !== undefined; +var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat"); + +var x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft; +var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop; +</pre> + +<h2 id="Specification" name="Specification">Especificação</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSSOM View', '#dom-window-scrolly', 'window.scrollY') }}</td> + <td>{{ Spec2('CSSOM View') }}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{Compat("api.Window.scrollY")}}</p> + +<h2 id="See_also" name="See_also">Veja também</h2> + +<ul> + <li>{{domxref("window.scrollX")}}</li> +</ul> diff --git a/files/pt-br/web/api/window/sessionstorage/index.html b/files/pt-br/web/api/window/sessionstorage/index.html new file mode 100644 index 0000000000..b387b8af5b --- /dev/null +++ b/files/pt-br/web/api/window/sessionstorage/index.html @@ -0,0 +1,143 @@ +--- +title: Window.sessionStorage +slug: Web/API/Window/sessionStorage +tags: + - Armazenamento + - Propriedade + - Referencia + - Sessão +translation_of: Web/API/Window/sessionStorage +--- +<p>{{APIRef()}}</p> + +<p>A propriedade <code>sessionStorage</code> permite acessar um objeto tipo session {{domxref("Storage")}}. A sessionStorage é similar ao <a href="/en-US/docs/Web/API/Window.localStorage"><code>localStorage</code></a>, a única diferença é que enquanto os dados armazenados no <code>localStorage</code> não expiram, os dados no sessionstorage tem os seus dados limpos ao expirar a sessão da página. A sessão da página dura enquanto o browser está aberto e se mantém no recarregamento da página. <strong>Abrir a página em uma nova aba ou nova janela irá gerar uma nova sessão, </strong>o que diferencia de como os cookies trabalham<strong>.</strong></p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="brush: js">// Salva os dados na sessionStorage +sessionStorage.setItem('chave', 'valor'); + +// Obtém os dados da sessionStorage +var data = sessionStorage.getItem('chave');</pre> + +<h3 id="Valor">Valor</h3> + +<p>Objeto {{domxref("Storage")}}.</p> + +<h2 id="Exemplo">Exemplo</h2> + +<p>O seguinte trecho acessa o objeto da sessão do domínio atual {{domxref("Storage")}} e adiciona um item usando o {{domxref("Storage.setItem()")}}.</p> + +<pre class="brush: js">sessionStorage.setItem('myCat', 'Tom');</pre> + +<p>O exemplo a seguir salva automaticamente o conteúdo da caixa de texto, e caso o browser seja acidentalmente recarregado, o conteúdo da caixa de texto é restaurado.</p> + +<pre class="brush: js">// Obtem a caixa de texto que vamos rastrear +var field = document.getElementById("campo"); + +// Se tivermos um valor salvo automaticamente +// (isto só ocorrerá se a página for acidentalmente recarregada) +if (sessionStorage.getItem("autosave")) { + // Restaura o conteúdo da caixa de texto + field.value = sessionStorage.getItem("autosave"); +} + +// Verifica as mudanças que ocorrem na caixa de texto +field.addEventListener("change", function() { + // E salva o resultado dentro de um objeto session storage + sessionStorage.setItem("autosave", field.value); +});</pre> + + + +<div class="note"> +<p><strong>Nota</strong>: Por favor use o artigo <a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a> para um exemplo completo.</p> +</div> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificações</th> + <th scope="col">Status</th> + <th scope="col">Comentários</th> + </tr> + <tr> + <td>{{SpecName('Web Storage', '#the-sessionstorage-attribute', 'sessionStorage')}}</td> + <td>{{Spec2('Web Storage')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatíveis">Browser compatíveis</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>localStorage</td> + <td>4</td> + <td>3.5</td> + <td>8</td> + <td>10.50</td> + <td>4</td> + </tr> + <tr> + <td>sessionStorage</td> + <td>5</td> + <td>2</td> + <td>8</td> + <td>10.50</td> + <td>4</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.1</td> + <td>{{ CompatUnknown }}</td> + <td>8</td> + <td>11</td> + <td>iOS 3.2</td> + </tr> + </tbody> +</table> +</div> + +<p>Cada browser tem o seu nível de capacidade de armazenamento para localStorage e sessionStorage. Aqui está um <a href="http://dev-test.nemikor.com/web-storage/support-test/">teste detalhado de toda a capacidade de armazenamento de vários browsers</a>.</p> + +<div class="note"> +<p><strong>Nota: </strong>desde o iOS 5.1, Safari Mobile armazena os dados do localStorage em uma pasta de cache, o que está sujeito a ocasionalmente ser limpa, de acordo com o SO, se houver pouco espaço.</p> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></li> + <li><a href="/en-US/docs/Web/API/Window.localStorage">Window.localStorage</a></li> +</ul> diff --git a/files/pt-br/web/api/window/setcursor/index.html b/files/pt-br/web/api/window/setcursor/index.html new file mode 100644 index 0000000000..d85dfb7c01 --- /dev/null +++ b/files/pt-br/web/api/window/setcursor/index.html @@ -0,0 +1,28 @@ +--- +title: Window.setCursor() +slug: Web/API/Window/setCursor +translation_of: Web/API/Window/setCursor +--- +<div>{{ ApiRef() }}</div> + +<div> </div> + +<h2 id="Summary" name="Summary">Sumário</h2> + +<p>Altera o cursor para a janela atual.</p> + +<h2 id="Example" name="Example">Exemplo</h2> + +<pre class="syntaxbox">function setBusyCursor(enable) { + window.setCursor(enable ? "wait" : "auto"); +}</pre> + +<h2 id="Notes" name="Notes">Notas</h2> + +<p>O cursor não retornará ao seu padrão até que seja definido novamente para <code>auto</code>.</p> + +<p>Esta função é parte do <a href="/en-US/docs/XPCOM_Interface_Reference/nsIDOMChromeWindow">ChromeWindow interface</a>. Esta função não está habilitada para páginas web, que podem usar a propriedade CSS {{cssxref("cursor")}} em seu lugar.</p> + +<h2 id="Especificação">Especificação</h2> + +<p>{{dom0}}</p> diff --git a/files/pt-br/web/api/window/setimmediate/index.html b/files/pt-br/web/api/window/setimmediate/index.html new file mode 100644 index 0000000000..693c51619b --- /dev/null +++ b/files/pt-br/web/api/window/setimmediate/index.html @@ -0,0 +1,107 @@ +--- +title: Window.setImmediate() +slug: Web/API/Window/setImmediate +translation_of: Web/API/Window/setImmediate +--- +<div>{{APIRef("HTML DOM")}}{{Non-standard_header}}</div> + +<p>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.</p> + +<div class="note">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 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=686201" title="https://bugzilla.mozilla.org/show_bug.cgi?id=686201">Gecko</a> (Firefox) e <a href="http://code.google.com/p/chromium/issues/detail?id=146172" title="http://code.google.com/p/chromium/issues/detail?id=146172">Webkit</a> (Google/Apple).</div> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox">var <em>immediateID</em> = setImmediate(<em>func</em>, [<em>param1</em>, <em>param2</em>, ...]); +var <em>immediateID</em> = setImmediate(<em>func</em>); +</pre> + +<ul> + <li>onde <code>immediateID</code> é o ID da immediate que poderá ser usado depois com {{ domxref("window.clearImmediate") }}.</li> + <li><code>func</code> é a função que será executada.</li> +</ul> + +<p>Todos parametros serão passados diretamente para sua função .</p> + +<h2 id="Notas">Notas</h2> + +<p>O método {{ domxref("window.clearImmediate") }} pode ser usado para limpar as ações immediate, como por exemplo {{ domxref("window.clearTimeout") }} para {{ domxref("window.setTimeout") }}.</p> + +<p>Esse método pode ser usado ao invés de <code>setTimeout(fn, 0)</code>, para executar <a href="http://www.nczonline.net/blog/2009/08/11/timed-array-processing-in-javascript/" title="http://www.nczonline.net/blog/2009/08/11/timed-array-processing-in-javascript/">operações pesadas</a>. </p> + +<p>Essa função pode ser emulada de algumas maneiras:</p> + +<ul> + <li><span style="line-height: 22px;">{{ domxref("window.postMessage") }} pode ser usada para disparar um </span>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.</li> + <li><a href="/en-US/docs/Web/API/MessageChannel" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/web-messaging.html#channel-messaging">MessageChannel</a> pode ser usado com confiança dentro de Web Workers onde a semantica do postMessage significa que não pode ser usado lá.</li> + <li><code>setTimeout(fn, 0)</code><em>pode</em> ser usado potencialmente, no entanto, como é apertado em 4ms para temporizadores aninhados com mais de 5 profundidades <a href="https://html.spec.whatwg.org/multipage/webappapis.html#timers">por especificação HTML</a>, não faz para um polifil adequado para o imediatismo natural de setImmediate.</li> +</ul> + +<p>Todas essas técnicas são incorporadas em um <a href="https://github.com/NobleJS/setImmediate">setImmediate polyfill</a>.</p> + +<h2 id="Especificações">Especificações</h2> + +<p>Não faz parte de nenhuma especificação e não em uma faixa de padrões.</p> + +<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2> + +<p>{{ CompatibilityTable }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatNo }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatNo }}</td> + <td>10</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatNo }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_também">Ver também</h2> + +<p>{{ domxref("window.clearImmediate") }}</p> + +<p>{{ spec("https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/setImmediate/Overview.html", "Specification: Efficient Script Yielding") }}</p> + +<p><a class="external" href="http://ie.microsoft.com/testdrive/Performance/setImmediateSorting/Default.html">Microsoft setImmediate API Demo</a></p> + +<p>{{ languages( { "zh-cn": "zh-cn/DOM/window.setImmediate" } ) }}</p> diff --git a/files/pt-br/web/api/window/url/index.html b/files/pt-br/web/api/window/url/index.html new file mode 100644 index 0000000000..5c673ed4b6 --- /dev/null +++ b/files/pt-br/web/api/window/url/index.html @@ -0,0 +1,100 @@ +--- +title: Window.URL +slug: Web/API/Window/URL +translation_of: Web/API/URL +--- +<p>{{ApiRef("Window")}}{{SeeCompatTable}}</p> + +<p>A propriedade <strong><code>Window.URL</code></strong> retorna um objeto que fornece métodos estáticos usados para criar e gerenciar URLs de objeto. Também pode ser chamado como um construtor para construir objetos {{domxref("URL")}}.</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<p>Chamando um método estático:</p> + +<pre class="syntaxbox"><code><var>img</var>.src = URL.{{domxref("URL.createObjectURL", "createObjectURL")}}(<var>blob</var>);</code></pre> + +<p>Construindo um novo objeto:</p> + +<pre class="syntaxbox"><code>var <var>url</var> = new {{domxref("URL.URL", "URL")}}("../cats/", "https://www.example.com/dogs/");</code></pre> + +<h2 id="Especificação">Especificação</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>{{SpecName('URL', '#dom-url', 'URL')}}</td> + <td>{{Spec2('URL')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>8.0<sup>[2]</sup></td> + <td>{{CompatGeckoDesktop("2.0")}}<sup>[1]</sup><br> + {{CompatGeckoDesktop("19.0")}}</td> + <td>10.0</td> + <td>15.0<sup>[2]</sup></td> + <td>6.0<sup>[2]</sup><br> + 7.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}<sup>[2]</sup></td> + <td>{{CompatGeckoMobile("14.0")}}<sup>[1]</sup><br> + {{CompatGeckoMobile("19.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>15.0<sup>[2]</sup></td> + <td>6.0<sup>[2]</sup></td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Do Gecko 2 (Firefox 4) ao Gecko 18 incluído, o Gecko retornou um objeto com o tipo interno <code>nsIDOMMozURLProperty</code> não padrão. Na prática, isso não fez diferença.</p> + +<p>[2] Implementado sob o nome não padronizado <code>webkitURL</code>.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{domxref("URL")}} API.</li> +</ul> diff --git a/files/pt-br/web/api/window/window.localstorage/index.html b/files/pt-br/web/api/window/window.localstorage/index.html new file mode 100644 index 0000000000..8c7c379435 --- /dev/null +++ b/files/pt-br/web/api/window/window.localstorage/index.html @@ -0,0 +1,123 @@ +--- +title: Window.localStorage +slug: Web/API/Window/Window.localStorage +tags: + - API + - Armazenamento + - Propriedade + - Referencia + - WindowLocalStorage + - localStorage +translation_of: Web/API/Window/localStorage +--- +<p>{{APIRef()}}</p> + +<p>A propriedade <code>localStorage</code> permite acessar um objeto {{domxref("Storage")}} local. A <code>localStorage</code> é similar ao <code><a href="/en-US/docs/Web/API/Window.sessionStorage">sessionStorage</a></code>. 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.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="brush: js">meuStorage = localStorage;</pre> + +<h3 id="Valor">Valor</h3> + +<p>Objeto {{domxref("Storage")}}.</p> + +<h2 id="Exemplo">Exemplo</h2> + +<p>O seguinte trecho acessa o objeto {{domxref("Storage")}} local do domínio atual e adiciona um item usando o {{domxref("Storage.setItem()")}}.</p> + +<pre class="brush: js">localStorage.setItem('meuGato', 'Tom');</pre> + +<div class="note"> +<p><strong>Nota: Por favor veja o artigo</strong> <a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a> <strong>para um exemplo completo.</strong></p> +</div> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>{{SpecName('Web Storage', '#dom-localstorage', 'localStorage')}}</td> + <td>{{Spec2('Web Storage')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Navegadores_compatíveis">Navegadores compatíveis</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>localStorage</td> + <td>4</td> + <td>3.5</td> + <td>8</td> + <td>10.50</td> + <td>4</td> + </tr> + <tr> + <td>sessionStorage</td> + <td>5</td> + <td>2</td> + <td>8</td> + <td>10.50</td> + <td>4</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.1</td> + <td>{{ CompatUnknown }}</td> + <td>8</td> + <td>11</td> + <td>iOS 3.2</td> + </tr> + </tbody> +</table> +</div> + +<p>Cada navegador tem o seu nível de capacidade de armazenamento para <code>localStorage</code> e {{domxref("sessionStorage")}}. Aqui está um <a href="http://dev-test.nemikor.com/web-storage/support-test/">teste detalhado de toda a capacidade de armazenamento de vários browsers</a>.</p> + +<div class="note"> +<p><strong>Nota: </strong>desde o iOS 5.1, Safari Mobile armazena os dados do localStorage em uma pasta de cache, o que está sujeito a ocasionalmente ser limpa, de acordo com o SO, se houver pouco espaço. O modo de Navegação Privada do Safari Mobile não permite escrever no <code>localStorage</code> de forma alguma.</p> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></li> + <li>{{domxref("LocalStorage")}}</li> + <li>{{domxref("SessionStorage")}}</li> + <li>{{domxref("Window.sessionStorage")}}</li> +</ul> |