diff options
Diffstat (limited to 'files/pt-br/conflicting/web')
38 files changed, 5652 insertions, 0 deletions
diff --git a/files/pt-br/conflicting/web/accessibility/index.html b/files/pt-br/conflicting/web/accessibility/index.html new file mode 100644 index 0000000000..51a4ad7843 --- /dev/null +++ b/files/pt-br/conflicting/web/accessibility/index.html @@ -0,0 +1,55 @@ +--- +title: Desenvolvimento Web +slug: Web/Acessibilidade/Desenvolvimento_Web +tags: + - ARIA + - Accessibility + - Acessibilidade + - DHTML + - Desenvolvimento Web + - WebMechanics + - Widgets acessíveis + - XUL +translation_of: Web/Accessibility +translation_of_original: Web/Accessibility/Web_Development +--- +<p class="summary"><span class="seoSummary">Este documento oferece mais informações para os desenvolvedores sobre as acessibilidades <em>web</em> e XUL</span></p> + +<table> + <tbody> + <tr> + <td style="vertical-align: top;"> + <h2 id="Acessibilidade_na_Rede_Mundial">Acessibilidade na Rede Mundial</h2> + + <dl> + <dt><a href="/en-US/docs/Accessibility/ARIA" title="http://developer.mozilla.org/en-US/docs/Accessibility/ARIA">ARIA para desenvolvedores</a></dt> + <dd>O conjunto ARIA possibilita a acessibilidade em conteúdo dinâmico HTML. São exemplos de uso de ARIA os conteúdos de regiões dinâmicas e <em>widgets </em>com<em> </em>JavaScript.</dd> + <dt><a href="/en/Accessibility/Keyboard-navigable_JavaScript_widgets" title="en/Accessibility/Keyboard-navigable JavaScript widgets">JavaScript para<em> widgets</em> navegáveis pelo teclado</a></dt> + <dd>Até agora, programadores <em>web</em> construiam seus modelos de <em>widgets</em> baseados em <div> e <span>, por <span class="short_text" id="result_box" lang="pt"><span>faltarem</span> <span>as técnicas adequadas</span></span>. <strong>A acessibilidade através do teclado </strong>é parte das exigências mínimas para a acessibilidade, das quais todos os desenvolvedores devem ter consciência.</dd> + </dl> + + <h2 id="Acessibilidade_XUL">Acessibilidade XUL</h2> + + <dl> + <dt> </dt> + <dt><a href="/en/Building_accessible_custom_components_in_XUL">Construindo componentes personalizados e acessíveis com XUL</a></dt> + <dd>A utilização das técnicas de acessibilidade DHTML, a fim de tornar acessíveis os componentes customizados com a XUL.</dd> + <dt><a href="/en/XUL_accessibility_guidelines">Acessibilidade XUL - diretrizes de autoria</a></dt> + <dd>Quando a autoria está de acordo com estas diretrizes, a XUL é capaz de gerar interfaces acessíveis. Codificadores, revisores, construtores e engenheiros de produção (<em>QA</em>) devem se familiarizar com elas.</dd> + </dl> + </td> + <td style="vertical-align: top;"> + <h2 id="Recursos_Externos">Recursos Externos</h2> + + <dl> + <dt><a href="http://diveintoaccessibility.info/">Mergulhe na Acessibilidade</a></dt> + <dd>Este livro responde a duas questões e a primeira, é: "<em>Por que eu devo tornar meu sítio mais acessível</em>?". A segunda, é: "<em>Como eu posso fazer meu sítio mais acessível</em>?"</dd> + <dt><a href="http://www-306.ibm.com/able/guidelines/web/accessweb.html">Construindo páginas acessíveis</a></dt> + <dd>Uma boa lista sobre acessiblidade na rede mundial, feita pela IBM.</dd> + </dl> + </td> + </tr> + </tbody> +</table> + +<p> </p> diff --git a/files/pt-br/conflicting/web/api/crypto/getrandomvalues/index.html b/files/pt-br/conflicting/web/api/crypto/getrandomvalues/index.html new file mode 100644 index 0000000000..e0dbd0a970 --- /dev/null +++ b/files/pt-br/conflicting/web/api/crypto/getrandomvalues/index.html @@ -0,0 +1,109 @@ +--- +title: RandomSource +slug: Web/API/RandomSource +tags: + - API + - Interface + - RandomSource + - Referencia + - Web Crypto API +translation_of: Web/API/Crypto/getRandomValues +translation_of_original: Web/API/RandomSource +--- +<p>{{APIRef("Web Crypto API")}}</p> + +<p><strong><code>RandomSource</code></strong> representa uma fonte criptografada segura de números aleatórios. É disponível via objeto {{domxref("Crypto")}} do objeto global: {{domxref("Window.crypto")}} em páginas Web, {{domxref("WorkerGlobalScope.crypto")}} em trabalhadores.</p> + +<p><code>RandomSource</code> não é uma interface e nenhum objeto deste tipo pode ser criado.</p> + +<h2 id="Propriedades">Propriedades</h2> + +<p><em><code>RandomSource</code> não define ou herda nenhuma propriedade.</em></p> + +<dl> +</dl> + +<h2 id="Métodos">Métodos</h2> + +<dl> + <dt>{{ domxref("RandomSource.getRandomValues()") }}</dt> + <dd>Completa o {{ domxref("ArrayBufferView") }} com valores aleatoriamente criptografados.</dd> +</dl> + +<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('Web Crypto API', '#dfn-RandomSource')}}</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>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>11.0 {{ webkitbug("22049") }}</td> + <td>{{CompatGeckoDesktop(21)}} [1]</td> + <td>11.0</td> + <td>15.0</td> + <td>3.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Chrome for 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>{{ CompatNo() }}</td> + <td>23</td> + <td>{{CompatGeckoMobile(21)}}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>6</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Apesar da <code>RandomSource</code> estar disponível apenas a partir da versão Firefox 26, ela já estava implementada na versão Firefox 21.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{ domxref("Window.crypto") }} para conseguir um objeto {{domxref("Crypto")}}.</li> + <li>{{jsxref("Math.random")}}, uma fonte de números aleatórios não criptografados.</li> +</ul> diff --git a/files/pt-br/conflicting/web/api/cryptokey/index.html b/files/pt-br/conflicting/web/api/cryptokey/index.html new file mode 100644 index 0000000000..d80199a4ed --- /dev/null +++ b/files/pt-br/conflicting/web/api/cryptokey/index.html @@ -0,0 +1,113 @@ +--- +title: CryptoKey.algorithm +slug: Web/API/CryptoKey/algorithm +tags: + - API + - CryptoKey + - Propriedade + - Read-only + - Referencia + - Web Crypto API +translation_of: Web/API/CryptoKey +translation_of_original: Web/API/CryptoKey/algorithm +--- +<p>{{APIRef("Web Crypto API")}}</p> + +<p>A propriedade <code><strong>CryptoKey.algorithm</strong></code> de apenas leitura é um valor opaco contendo todas as informações sobre o algoritmo relacionado à key.</p> + +<p>Implementações diferentes tem diferentes tipos de valores opacos para os mesmos: tal objeto não pode ser compartilhado.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox"><em>result</em> = <em><code>key</code></em><code>.algorithm</code> +</pre> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<ul> + <li><code><em>result</em></code> é um objeto opaco descrevendo o algoritmo com o qual a key está relacionado.</li> +</ul> + +<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-CryptoKey-algorithm', 'CryptoKey.algorithm') }}</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>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{ CompatChrome(37) }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoDesktop(34) }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</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>Suporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>37</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile(34) }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{domxref("Crypto")}} e {{domxref("Crypto.subtle")}}.</li> + <li>{{domxref("CryptoKey")}}, a interface a qual ele pertence.</li> +</ul> + +<h2 id="Dicionário">Dicionário</h2> + +<p>"Key" = "Chave"</p> diff --git a/files/pt-br/conflicting/web/api/cryptokey_33bd21ca8f20b4cd8c7b8c762e2fc597/index.html b/files/pt-br/conflicting/web/api/cryptokey_33bd21ca8f20b4cd8c7b8c762e2fc597/index.html new file mode 100644 index 0000000000..666de87d23 --- /dev/null +++ b/files/pt-br/conflicting/web/api/cryptokey_33bd21ca8f20b4cd8c7b8c762e2fc597/index.html @@ -0,0 +1,118 @@ +--- +title: CryptoKey.type +slug: Web/API/CryptoKey/type +tags: + - API + - Apenas Leitura + - CryptoKey + - Propriedades + - Referencia + - Web Crypto API +translation_of: Web/API/CryptoKey +translation_of_original: Web/API/CryptoKey/type +--- +<p>{{APIRef("Web Crypto API")}}</p> + +<p>O <code><strong>CryptoKey.type</strong></code> é uma propriedade de apenas leitura que indica o tipo de key: se for uma key para um algoritmo simétrico (<code>"secret"</code>) ou, para um algoritmo assimétrico, (<code>"public"</code> ou <code>"private"</code>, dependendo do seu propósito).</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox"><em>result</em> = <em><code>key</code></em><code>.type</code> +</pre> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<ul> + <li><code><em>result</em></code> é um valor enumerado que pode ser: + + <ul> + <li><code>"secret"</code> representa uma key única utilizada para criptografar ou descriptografar uma mensagem que faz uso de um algoritmo simétrico.</li> + <li><code>"public"</code> representa uma key pública e compartilhável usada em um algoritmo assimétrico.</li> + <li><code>"private"</code> representa uma key utilizada em um algoritmo assimétrico que deve ser mantida em privado.</li> + </ul> + </li> +</ul> + +<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('Web Crypto API', '#dfn-CryptoKey-type', 'CryptoKey.type') }}</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ísticas</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{ CompatChrome(37) }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoDesktop(34) }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Características</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>Suporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>37</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile(34) }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{domxref("Crypto")}} e {{domxref("Crypto.subtle")}}.</li> + <li>{{domxref("CryptoKey")}}, a interface a qual ele pertence.</li> +</ul> + +<h3 id="Dicionário">Dicionário:</h3> + +<p>"Key" = "Chave"</p> diff --git a/files/pt-br/conflicting/web/api/cryptokey_53ae81677f4d9298717f2f245ae4da0d/index.html b/files/pt-br/conflicting/web/api/cryptokey_53ae81677f4d9298717f2f245ae4da0d/index.html new file mode 100644 index 0000000000..4fe2885cbc --- /dev/null +++ b/files/pt-br/conflicting/web/api/cryptokey_53ae81677f4d9298717f2f245ae4da0d/index.html @@ -0,0 +1,111 @@ +--- +title: CryptoKey.extractable +slug: Web/API/CryptoKey/extractable +tags: + - API + - CryptoKey + - Propriedade + - Read-only + - Referencia + - Web Crypto API +translation_of: Web/API/CryptoKey +translation_of_original: Web/API/CryptoKey/extractable +--- +<p>{{APIRef("Web Crypto API")}}</p> + +<p>A propriedade de apenas leitura <code><strong>CryptoKey.extractable</strong></code> que indica se a key bruta do material pode ser extraída, para por exemplo arquivá-la.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox"><em>result</em> = <em><code>key</code></em><code>.extractable</code> +</pre> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<ul> + <li><code><em>result</em></code> é um {{jsxref("Boolean")}} indicando se a chave pode ser extraída.</li> +</ul> + +<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-CryptoKey-extractable', 'CryptoKey.extractable') }}</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>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{ CompatChrome(37) }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoDesktop(34) }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</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>Suporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>37</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile(34) }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{domxref("Crypto")}} e {{domxref("Crypto.subtle")}}.</li> + <li>{{domxref("CryptoKey")}}, a interface a qual ele pertence.</li> +</ul> + +<h3 id="Dicionário">Dicionário</h3> + +<p>"Key" = "Chave"</p> diff --git a/files/pt-br/conflicting/web/api/cryptokey_f39d256ef7fbd1cf0a1f26de1e887ae7/index.html b/files/pt-br/conflicting/web/api/cryptokey_f39d256ef7fbd1cf0a1f26de1e887ae7/index.html new file mode 100644 index 0000000000..c74a658a32 --- /dev/null +++ b/files/pt-br/conflicting/web/api/cryptokey_f39d256ef7fbd1cf0a1f26de1e887ae7/index.html @@ -0,0 +1,124 @@ +--- +title: CryptoKey.usages +slug: Web/API/CryptoKey/usages +tags: + - API + - CryptoKey + - Propriedade + - Read-only + - Referencia + - Web Crypto API +translation_of: Web/API/CryptoKey +translation_of_original: Web/API/CryptoKey/usages +--- +<p>{{APIRef("Web Crypto API")}}</p> + +<p>A propriedade de apenas leitura <code><strong>CryptoKey.usages</strong></code> é um conjunto enumerado que indica os propósitos da key.</p> + +<p>Possíveis valores são:</p> + +<ul> + <li><code>"encrypt"</code>, permitindo que a key seja utilizada para {{glossary("encryption", "encrypting")}} mensagens.</li> + <li><code>"decrypt"</code>, permitindo que a key seja utilizada para {{glossary("decryption", "decrypting")}} mensagens.</li> + <li><code>"sign"</code>, permitindo que a key seja utilizada para {{glossary("signature", "signing")}} mensagens.</li> + <li><code>"verify"</code>, permitindo que a key seja utilizada para {{glossary("verification", "verifying the signature")}} de mensagens.</li> + <li><code>"deriveKey"</code>, permitindo que a key seja utilizada como key base na derivação de uma nova key.</li> + <li><code>"deriveBits"</code>, permitindo que a key seja utilizada como key base na derivação de bits de informação para uso em criptografias primitivas.</li> + <li><code>"wrapKey"</code>, permitindo que a key envolva uma key simétrica para uso (transferência, armazenamento) em ambientes não seguros.</li> + <li><code>"unwrapKey"</code>, permitindo que a key desvincule uma key simétrica para uso (transferência, armazenamento) em ambientes não seguros.</li> +</ul> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox"><em>result</em> = <em><code>key</code></em><code>.usages</code> +</pre> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<ul> + <li><code><em>result</em></code> é um {{jsxref("Array")}} de valores enumerados.</li> +</ul> + +<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-CryptoKey-usages', 'CryptoKey.usages') }}</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>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{ CompatChrome(37) }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoDesktop(34) }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</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>Suporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>37</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile(34) }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{domxref("Crypto")}} e {{domxref("Crypto.subtle")}}.</li> + <li>{{domxref("CryptoKey")}}, a interface a qual ele pertence.</li> +</ul> + +<h2 id="Dicionário">Dicionário:</h2> + +<p>"Key" = "Chave"</p> diff --git a/files/pt-br/conflicting/web/api/document_object_model/index.html b/files/pt-br/conflicting/web/api/document_object_model/index.html new file mode 100644 index 0000000000..4b8372f55d --- /dev/null +++ b/files/pt-br/conflicting/web/api/document_object_model/index.html @@ -0,0 +1,89 @@ +--- +title: Document Object Model (DOM) +slug: DOM +tags: + - DOM + - NeedsTranslation + - References + - TopicStub +translation_of: Web/API/Document_Object_Model +translation_of_original: DOM +--- +<div class="callout-box"> + <strong><a href="/en-US/docs/Using_the_W3C_DOM_Level_1_Core" title="en-US/docs/Using_the_W3C_DOM_Level_1_Core">Using the W3C DOM Level 1 Core</a></strong><br> + Introduction to the W3C DOM.</div> +<div> + <p>The <strong>Document Object Model</strong> (<strong>DOM</strong>) is an API for <a href="/en-US/docs/HTML" title="en-US/docs/HTML">HTML</a> and <a href="/en-US/docs/XML" title="en-US/docs/XML">XML</a> documents. It provides a structural representation of the document, enabling you to modify its content and visual presentation by using a scripting language such as <a href="/en-US/docs/JavaScript" title="https://developer.mozilla.org/en-US/docs/JavaScript">JavaScript</a>.</p> +</div> + <div class="cleared topicpage-table row"> + <div class="section"> + <h2 class="Documentation" id="Documentation" name="Documentation">Documentation about the DOM</h2> + <dl> + <dt> + <a href="/en-US/docs/Gecko_DOM_Reference" title="en-US/docs/Gecko_DOM_Reference">Gecko DOM Reference</a></dt> + <dd> + The Gecko Document Object Model Reference.</dd> + <dt> + <a href="/en-US/docs/DOM/About_the_Document_Object_Model" title="en-US/docs/About_the_Document_Object_Model">About the Document Object Model</a></dt> + <dd> + A short introduction to the DOM.</dd> + <dt> + <a href="/en-US/docs/JavaScript_technologies_overview" title="en-US/docs/The_DOM_and_JavaScript">The DOM and JavaScript</a></dt> + <dd> + What is the DOM? What is JavaScript? How do I use them together on my web page? This document answers these questions and more.</dd> + <dt> + <a href="/en-US/docs/DOM/Using_dynamic_styling_information" title="en-US/docs/DOM/Using_dynamic_styling_information">Using dynamic styling information</a></dt> + <dd> + How to obtain information on and manipulate styling via the DOM.</dd> + <dt> + <a href="/en-US/docs/DOM/DOM_event_reference" title="DOM event reference">DOM event reference</a></dt> + <dd> + Lists all the DOM events and their meanings.</dd> + <dt> + <a href="/en-US/docs/DOM/Manipulating_the_browser_history" title="en-US/docs/DOM/Manipulating_the_browser_history">History API: Manipulating the browser history</a></dt> + <dd> + Demonstrates the HTML5-introduced DOM {{ domxref("window.history") }} object, allowing dynamic changes to the browser history.</dd> + <dt> + <a href="/en-US/docs/Using_files_from_web_applications" title="https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications">File API: Using files from web applications</a></dt> + <dd> + Describes the HTML5-introduced capability to select a local file and read data from it.</dd> + <dt> + <a href="/en-US/docs/DOM/Using_the_Page_Visibility_API" title="en-US/docs/DOM/Using_the_Page_Visibility_API">Using the Page Visibility API</a></dt> + <dd> + Explains how to detect and use information about a web page being in the foreground or in the background.</dd> + <dt> + <a href="/en-US/docs/DOM/Using_full-screen_mode" title="Using full-screen mode">Fullscreen API: Using the fullscreen mode</a></dt> + <dd> + Describes how to set up a page that use the whole screen, without any browser UI around it.</dd> + <dt> + <a href="/en-US/docs/Determining_the_dimensions_of_elements" title="en-US/docs/Determining_the_dimensions_of_elements">Determining the dimensions of elements</a></dt> + <dd> + How to figure out the right way to determine the dimensions of elements, given your needs.</dd> + <dt> + <a href="/en-US/docs/Dynamically_modifying_XUL-based_user_interface" title="en-US/docs/Dynamically_modifying_XUL-based_user_interface">Dynamically modifying XUL-based user interface</a></dt> + <dd> + The basics of manipulating the XUL UI with DOM methods.</dd> + </dl> + <p><span class="alllinks"><a href="/en-US/docs/tag/DOM" title="/en-US/docs/tag/DOM">View All...</a></span></p> + </div> + <div class="section"> + <h2 class="Community" id="Community" name="Community">Getting help from the community</h2> + <p>You need help on a DOM-related problem and can't find the solution in the documentation?</p> + <ul> + <li>Consult the dedicated Mozilla forum: {{ DiscussionList("dev-tech-dom", "mozilla.dev.tech.dom") }}</li> + </ul> + <h2 class="Tools" id="Tools" name="Tools">Tools easing working with the DOM</h2> + <ul> + <li><a class="external" href="http://www.getfirebug.com/">Firebug </a></li> + <li><a href="/en-US/docs/DOM_Inspector" title="en-US/docs/DOM_Inspector">DOM Inspector</a></li> + <li><a class="external" href="http://slayeroffice.com/tools/modi/v2.0/modi_help.html">Mouse-over DOM Inspector</a></li> + <li><a class="external" href="http://www.karmatics.com/aardvark/">Aardvark Firefox extension</a></li> + </ul> + <p><span class="alllinks"><a href="/en-US/docs/tag/DOM:Tools" title="/en-US/docs/tag/DOM:Tools">View All...</a></span></p> + <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Related Topics</h2> + <ul> + <li><a href="/en-US/docs/AJAX" title="en-US/docs/AJAX">AJAX</a>, <a href="/en-US/docs/CSS" title="en-US/docs/CSS">CSS</a>, <a href="/en-US/docs/DHTML" title="en-US/docs/DHTML">DHTML</a>, <a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a></li> + </ul> + </div> + </div> +<p> </p> diff --git a/files/pt-br/conflicting/web/api/globaleventhandlers/onscroll/index.html b/files/pt-br/conflicting/web/api/globaleventhandlers/onscroll/index.html new file mode 100644 index 0000000000..e5e756482a --- /dev/null +++ b/files/pt-br/conflicting/web/api/globaleventhandlers/onscroll/index.html @@ -0,0 +1,99 @@ +--- +title: window.onscroll +slug: Web/API/Window/onscroll +translation_of: Web/API/GlobalEventHandlers/onscroll +translation_of_original: Web/API/Window/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/conflicting/web/api/html_drag_and_drop_api/index.html b/files/pt-br/conflicting/web/api/html_drag_and_drop_api/index.html new file mode 100644 index 0000000000..292b860888 --- /dev/null +++ b/files/pt-br/conflicting/web/api/html_drag_and_drop_api/index.html @@ -0,0 +1,11 @@ +--- +title: DragDrop +slug: DragDrop +tags: + - NeedsTranslation + - TopicStub +translation_of: Web/API/HTML_Drag_and_Drop_API +translation_of_original: DragDrop +--- +<p> </p> +<p>See <a href="https://developer.mozilla.org/en-US/docs/DragDrop/Drag_and_Drop">https://developer.mozilla.org/en-US/docs/DragDrop/Drag_and_Drop</a></p> diff --git a/files/pt-br/conflicting/web/api/index.html b/files/pt-br/conflicting/web/api/index.html new file mode 100644 index 0000000000..93f5faee9a --- /dev/null +++ b/files/pt-br/conflicting/web/api/index.html @@ -0,0 +1,80 @@ +--- +title: Element.name +slug: Web/API/Element/name +tags: + - API + - DOM + - Element + - NeedsBrowserCompatibility + - NeedsUpdate + - Property + - Reference + - Web +translation_of: Web/API +translation_of_original: Web/API/Element/name +--- +<p>{{ APIRef("DOM") }}</p> + +<h2 id="Summary" name="Summary">Summary</h2> + +<p><code><strong>name</strong></code> recebe ou ajusta uma propriedade name de um objeto do DOM; ele se aplica somente aos seguintes elementos: {{ HTMLelement("a") }}, {{ HTMLelement("applet") }}, {{ HTMLelement("button") }}, {{ HTMLelement("form") }}, {{ HTMLelement("frame") }}, {{ HTMLelement("iframe") }}, {{ HTMLelement("img") }}, {{ HTMLelement("input") }}, {{ HTMLelement("map") }}, {{ HTMLelement("meta") }}, {{ HTMLelement("object") }}, {{ HTMLelement("param") }}, {{ HTMLelement("select") }} e {{ HTMLelement("textarea") }}.</p> + +<div class="note"> +<p><strong>Nota:</strong> A propriedade <code>name</code> não existe para outros elementos; diferente de <a href="/en/DOM/Element.tagName" title="en/DOM/element.tagName"><code>tagName</code></a> e <a href="/en/DOM/Node.nodeName" title="en/DOM/Node.nodeName"><code>nodeName</code></a>, ela não é uma propriedade das interfaces {{domxref("Node")}}, {{domxref("Element")}} ou {{domxref("HTMLElement")}}.</p> +</div> + +<p><code>name</code> pode ser usada no método {{ domxref("document.getElementsByName()") }}, em um <a href="/en/DOM/HTMLFormElement" title="en/DOM/form">form</a> ou com uma coleção de elementos de formulário. Ela pode retornar um único elemento ou uma coleção quando usada com um formulário ou elementos de coleção.</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="eval"><em>HTMLElement</em>.name = <em>string</em>; +var elName = <em>HTMLElement</em>.name; + +var fControl = <em>HTMLFormElement</em>.<em>elementName</em>; +var controlCollection = <em>HTMLFormElement</em>.elements.<em>elementName</em>; +</pre> + +<h2 id="Example" name="Example">Exemplo</h2> + +<pre class="eval"><form action="" name="formA"> + <input type="text" value="foo"> +</form> + +<script type="text/javascript"> + + // Recebe uma referência ao primeiro elemento no formulário + var formElement = document.forms['formA'].elements[0]; + + // Fornece um name a ele + formElement.name = 'inputA'; + + // Exibe o valor do input + alert(document.forms['formA'].elements['inputA'].value); + +</script> +</pre> + +<h2 id="Notes" name="Notes">Notas</h2> + +<p>No Internet Explorer (IE), não é possível ajustar ou modificar a propriedade <code>name</code> de objetos do DOM criados com {{ domxref("document.createElement()") }}.</p> + +<h2 id="Specification" name="Specification">Especificação</h2> + +<p>Especificação W3C DOM 2 HTML:</p> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-32783304">Anchor</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-39843695">Applet</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-34812697">Button</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-22051454">Form</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-91128709">Frame</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-96819659">iFrame</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-47534097">Image</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-89658498">Input</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-52696514">Map</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-31037081">Meta</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-20110362">Object</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-59871447">Param</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-41636323">Select</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-70715578">Textarea</a></li> +</ul> diff --git a/files/pt-br/conflicting/web/api/url/index.html b/files/pt-br/conflicting/web/api/url/index.html new file mode 100644 index 0000000000..1dec25bd24 --- /dev/null +++ b/files/pt-br/conflicting/web/api/url/index.html @@ -0,0 +1,101 @@ +--- +title: Window.URL +slug: Web/API/Window/URL +translation_of: Web/API/URL +translation_of_original: Web/API/Window/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/conflicting/web/api/webrtc_api/index.html b/files/pt-br/conflicting/web/api/webrtc_api/index.html new file mode 100644 index 0000000000..9b1cff261d --- /dev/null +++ b/files/pt-br/conflicting/web/api/webrtc_api/index.html @@ -0,0 +1,81 @@ +--- +title: WebRTC +slug: WebRTC +tags: + - Media + - NeedsContent + - NeedsTranslation + - TopicStub + - WebRTC +translation_of: Web/API/WebRTC_API +translation_of_original: WebRTC +--- +<p>O RTC na WebRTC significa comunicações em tempo real, tecnologia que permite transmissão de áudio/vídeo e compartilhamento de dados entre navegador clientes (pares). Como um conjunto de padrões, a WebRTC fornece a qualquer navegador com à capacidade de compartilhar dados de aplicativos e realizar teleconferências de ponto a ponto, sem a necessidade de instalar plug-ins ou software de terceiros.</p> + +<p>Os componentes WebRTC são acessados com APIs JavaScript. Atualmente em desenvolvimento estão a API Network Stream, que representa um fluxo de dados de áudio ou vídeo, e a API PeerConnection, que permite que dois ou mais usuários se comuniquem entre navegadores. Também está em desenvolvimento uma API DataChannel que permite a comunicação de outros tipos de dados para jogos em tempo real, bate-papo de texto, transferência de arquivos e assim por diante.</p> + +<div class="note"> +<p><strong>Note:</strong> Grande parte desse co nteúdo está desatualizado. Vamos atualizá-lo em breve.</p> +</div> + +<p>Quer descobrir WebRTC? Assista a este <a href="https://mozillaignite.org/resources/labs/future-uses-of-webrtc-video" title="/en-US/docs/https://mozillaignite.org/resources/labs/future-uses-of-webrtc-video">vídeo introdutório na web!</a>!</p> + +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="Documentation" name="Documentation">Documentação sobre WebRTC</h2> + + <dl> + <dt><a href="/en-US/docs/WebRTC/Introduction" title="en-US/docs/Mozilla/Boot_to_Gecko/Introduction">Introdução ao WebRTC</a></dt> + <dd>Um guia introdutório sobre o que é WebRTC e como funciona. +</dd> + <dt><a href="/en-US/docs/WebRTC/Using_the_Network_Stream_API" title="/en-US/docs/WebRTC/Using_the_Network_Stream_API">Usando a API Network Stream</a></dt> + <dd>Um guia para usar a API Network Stream para transmitir áudio e vídeo.</dd> + <dt><a href="/en-US/docs/WebRTC/Peer-to-peer_communications_with_WebRTC" title="/en-US/docs/WebRTC/Peer-to-peer_communications_with_WebRTC">Comunicações ponto a ponto com WebRTC</a></dt> + <dd> Como executar comunicações ponto a ponto usando as APIs WebRTC.</dd> + <dt><a href="/en-US/docs/WebRTC/taking_webcam_photos" title="taking webcam photos">Capturando imagens de uma webcam</a></dt> + <dd>Um guia introdutório sobre o que é WebRTC e como funciona.</dd> + <dt><a href="/en-US/docs/WebRTC/MediaStream_API" title="/en-US/docs/WebRTC/MediaStream_API">API MediaStream</a></dt> + <dd>A API que suporta a geração e manipulação de objetos de fluxo de mídia.</dd> + <dt><a href="/en-US/docs/WebRTC/navigator.getUserMedia" title="/en-US/docs/">getUserMedia()</a></dt> + <dd>A função de navegador que fornece acesso aos dispositivos de mídia do sistema.</dd> + </dl> + + <p><span class="alllinks"><a href="/en-US/docs/tag/WebRTC" title="/en-US/docs/tag/B2G">Saiba mais...</a></span></p> + + <h2 class="Tools" id="Exemplos">Exemplos</h2> + + <ul> + <li><a href="http://idevelop.github.com/ascii-camera/" title="http://idevelop.github.com/ascii-camera/">Câmera ASCII</a></li> + </ul> + </td> + <td> + <h2 class="Community" id="Community" name="Community">Obter ajuda da comunidade</h2> +Ao desenvolver sites e aplicações web que aproveitarão as tecnologias WebRTC, pode ser útil conversar com outras pessoas do mesmo modo.<p></p> + + <ul> + <li>Consulte o fórum de tópicos da mídia: {{ DiscussionList("dev-media", "mozilla.dev.media") }}</li> + </ul> + + <ul> + <li>Faça sua pergunta no canal IRC de mídia da Mozilla: <a class="link-irc" href="irc://irc.mozilla.org/media" title="irc://irc.mozilla.org/b2g">#media</a></li> + </ul> + + <p><span class="alllinks"><a class="external" href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html">Não se esqueça da etiqueta...</a></span></p> + <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Tópicos relacionados</h2> + + <ul> + <li><a href="/en-US/docs/Using_HTML5_audio_and_video" title="/en-US/docs/Using_HTML5_audio_and_video">Usando HTML5 áudio e vídeo</a></li> + </ul> + + <h2 class="Tools" id="Recursos">Recursos</h2> + + <ul> + <li>{{spec("http://www.w3.org/TR/webrtc/", "Especificação WebRTC", "wd")}}</li> + <li><a href="http://mozilla.github.io/webrtc-landing/" title="http://mozilla.github.io/webrtc-landing/">WebRTC teste da página de destino</a></li> + </ul> + </td> + </tr> + </tbody> +</table> diff --git a/files/pt-br/conflicting/web/api/windoworworkerglobalscope/index.html b/files/pt-br/conflicting/web/api/windoworworkerglobalscope/index.html new file mode 100644 index 0000000000..f51b72c102 --- /dev/null +++ b/files/pt-br/conflicting/web/api/windoworworkerglobalscope/index.html @@ -0,0 +1,121 @@ +--- +title: WindowBase64 +slug: Web/API/WindowBase64 +tags: + - API + - HTML-DOM + - Helper + - NeedsTranslation + - TopicStub + - WindowBase64 +translation_of: Web/API/WindowOrWorkerGlobalScope +translation_of_original: Web/API/WindowBase64 +--- +<p>{{APIRef("HTML DOM")}}</p> + +<p>The <code><strong>WindowBase64</strong></code> helper contains utility methods to convert data to and from base64, a binary-to-text encoding scheme. For example it is used in <a href="/en-US/docs/data_URIs">data URIs</a>.</p> + +<p>There is no object of this type, though the context object, either the {{domxref("Window")}} for regular browsing scope, or the {{domxref("WorkerGlobalScope")}} for workers, implements it.</p> + +<h2 id="Properties">Properties</h2> + +<p><em>This helper neither defines nor inherits any properties.</em></p> + +<h2 id="Methods">Methods</h2> + +<p><em>This helper does not inherit any methods.</em></p> + +<dl> + <dt>{{domxref("WindowBase64.atob()")}}</dt> + <dd>Decodes a string of data which has been encoded using base-64 encoding.</dd> + <dt>{{domxref("WindowBase64.btoa()")}}</dt> + <dd>Creates a base-64 encoded ASCII string from a string of binary data.</dd> +</dl> + +<h2 id="Specifications">Specifications</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('HTML WHATWG', '#windowbase64', 'WindowBase64')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', '#windowbase64', 'WindowBase64')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "#windowbase64", "WindowBase64")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties where on the target before it).</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatGeckoDesktop(1)}} [1]</td> + <td>{{CompatVersionUnknown}}</td> + <td>10.0</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>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatGeckoMobile(1)}}</td> + <td rowspan="1">{{CompatVersionUnknown}}</td> + <td rowspan="1">{{CompatVersionUnknown}}</td> + <td rowspan="1">{{CompatVersionUnknown}}</td> + <td rowspan="1">{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] <code>atob()</code> is also available to XPCOM components implemented in JavaScript, even though {{domxref("Window")}} is not the global object in components.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/Web/API/WindowBase64/Base64_encoding_and_decoding">Base64 encoding and decoding</a></li> + <li>{{domxref("Window")}}, {{domxref("WorkerGlobalScope")}}, {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, and {{domxref("ServiceWorkerGlobalScope")}}</li> +</ul> diff --git a/files/pt-br/conflicting/web/api/windoworworkerglobalscope_e2691f7ad05781a30c5fc5bb3b3f633a/index.html b/files/pt-br/conflicting/web/api/windoworworkerglobalscope_e2691f7ad05781a30c5fc5bb3b3f633a/index.html new file mode 100644 index 0000000000..8be6ca7e8b --- /dev/null +++ b/files/pt-br/conflicting/web/api/windoworworkerglobalscope_e2691f7ad05781a30c5fc5bb3b3f633a/index.html @@ -0,0 +1,117 @@ +--- +title: WindowTimers +slug: Web/API/WindowTimers +translation_of: Web/API/WindowOrWorkerGlobalScope +translation_of_original: Web/API/WindowTimers +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><code><strong>WindowTimers</strong></code> contains utility methods to set and clear timers.</p> + +<p>There is no object of this type, though the context object, either the {{domxref("Window")}} for regular browsing scope, or the {{domxref("WorkerGlobalScope")}} for workers, implements it.</p> + +<h2 id="Properties">Properties</h2> + +<p><em>This interface do not define any property, nor inherit any.</em></p> + +<h2 id="Methods">Methods</h2> + +<p><em>This interface do not inherit any method.</em></p> + +<dl> + <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("WindowTimers.setInterval()")}}</dt> + <dd>Schedules the execution of a function each X milliseconds.</dd> + <dt>{{domxref("WindowTimers.setTimeout()")}}</dt> + <dd>Sets a delay for executing a function.</dd> +</dl> + +<h2 id="Specifications">Specifications</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('HTML WHATWG', '#windowtimers', 'WindowTimers')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', '#windowtimers', 'WindowTimers')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "#windowtimers", "WindowTimers")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties where on the target before it).</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatGeckoDesktop(1)}}</td> + <td>1.0</td> + <td>4.0</td> + <td>4.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatGeckoMobile(1)}}</td> + <td rowspan="1">{{CompatVersionUnknown}}</td> + <td rowspan="1">{{CompatVersionUnknown}}</td> + <td rowspan="1">{{CompatVersionUnknown}}</td> + <td rowspan="1">{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p> </p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("Window")}}, {{domxref("WorkerGlobalScope")}}, {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, and {{domxref("ServiceWorkerGlobalScope")}}</li> +</ul> diff --git a/files/pt-br/conflicting/web/api_dd04ca1265cb79b990b8120e5f5070d3/index.html b/files/pt-br/conflicting/web/api_dd04ca1265cb79b990b8120e5f5070d3/index.html new file mode 100644 index 0000000000..c7eb86d426 --- /dev/null +++ b/files/pt-br/conflicting/web/api_dd04ca1265cb79b990b8120e5f5070d3/index.html @@ -0,0 +1,134 @@ +--- +title: WebAPI +slug: WebAPI +tags: + - Apps + - DOM + - Firefox OS + - Mobile +translation_of: Web/API +translation_of_original: WebAPI +--- +<p><strong>WebAPI</strong><span id="result_box" lang="pt"><span class="hps"> é um termo usado</span> <span class="hps">para se referir a</span> <span class="hps">um conjunto de</span> <span class="hps">compatibilidade de dispositivos</span> <span class="alt-edited hps">e acessar</span> <span class="hps">APIs</span> <span class="hps">que permitem que</span> <span class="hps">aplicativos</span> <span class="alt-edited hps">Web e</span> <span class="alt-edited hps">conteúdos para</span> <span class="hps">acessar o hardware</span> <span class="hps">do dispositivo (como</span> <span class="hps">o estado da bateria</span> <span class="hps">ou</span> <span class="hps">o</span> <span class="hps">hardware</span> <span class="hps">de vibração</span> <span class="hps">do dispositivo)</span><span>, bem como</span> <span class="hps">o acesso aos dados</span> <span class="hps">armazenados no dispositivo</span> <span class="hps">(como</span> <span class="hps">como o calendário</span> <span class="hps">ou</span> <span class="hps">lista de contatos</span><span>)</span><span>.</span> <span class="hps">Ao acrescentar estas</span> <span class="hps">APIs</span><span>,</span> <span class="hps">esperamos expandir</span> <span class="hps">o que a</span> <span class="hps">Web</span> <span class="hps">pode fazer hoje</span> <span class="hps">e apenas</span> <span class="hps">plataformas proprietárias</span> <span class="hps">foram capazes de fazer</span> <span class="hps">no passado.</span></span></p> + +<div class="note"> +<p><strong>Nota:</strong> Esta documentação é maior do que parece, os links ainda não estão todos adicionados aqui. Estamos trabalhando ativamente para melhorar isso e esperamos ver as coisas muito melhor nas próximas semanas. Veja a página de <a href="/en-US/docs/WebAPI/Doc_status">status da documentação da WebAPI</a>, onde estamos acompanhando o trabalho em documentos WebAPI.</p> +</div> + +<div class="note"> +<p><strong>Nota</strong>: para uma breve explicação de cada distintivo, consulte a documentação do <a href="/en-US/docs/Web/Apps/Packaged_apps#Types_of_packaged_apps">pacote de aplicativos</a>.</p> +</div> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Communication_APIs" name="Communication_APIs">APIs de Comunicação</h2> + +<dl> + <dt><a href="/pt-BR/docs/WebAPI/Network_Information" title="WebAPI/Network_Information">Network Information API (API de Informação de Rede)</a></dt> + <dd><span id="result_box" lang="pt"><span class="hps">Fornece</span> <span class="hps">informações básicas sobre</span> <span class="hps">a conexão de rede</span> <span class="hps">atual, como a</span> <span class="hps">velocidade de conexão.</span></span></dd> + <dt><a href="/pt-BR/docs/WebAPI/WebBluetooth" title="WebAPI/WebBluetooth">Bluetooth</a> {{NonStandardBadge}}</dt> + <dd><span id="result_box" lang="pt"><span class="hps">A API</span> <span class="hps">WebBluetooth</span> <span class="hps">fornece acesso</span> <span class="hps">de baixo nível ao</span> <span class="hps">hardware</span> <span class="hps">Bluetooth</span> <span class="hps">do dispositivo.</span></span></dd> + <dt><a href="/pt-BR/docs/WebAPI/Mobile_Connection" title="WebAPI/Mobile_Connection">Mobile Connection API (API de Conexão Móvel)</a> {{NonStandardBadge}}</dt> + <dd>Expões informações sobre a conectividade do celular, como a força do sinal, informação da operadora, assim por diante.</dd> + <dt><a href="/pt-BR/docs/WebAPI/Network_Stats" title="WebAPI/Network_Stats">Network Stats API (API de Estatísticas de Rede)</a> {{NonStandardBadge}}</dt> + <dd><span id="result_box" lang="pt"><span class="hps">Monitora a utilização</span> <span class="hps">de dados e</span> <span class="hps">expõe</span> <span class="hps">esses dados para</span> <span class="hps">aplicações</span> <span class="hps">privilegiadas.</span></span></dd> + <dt><a href="/en-US/docs/WebAPI/WebTelephony" title="WebAPI/WebTelephony">Telephony (Telefonia)</a> {{NonStandardBadge}}</dt> + <dd><span id="result_box" lang="pt"><span class="hps">Permite</span> <span class="hps">aplicações</span> <span class="hps">efectuar e atender</span> <span class="hps">chamadas telefônicas e</span> <span class="hps">usar a interface de</span> <span class="hps">usuário de telefonia</span> <span class="alt-edited hps">embutida.</span></span></dd> + <dt><a href="/en-US/docs/WebAPI/WebSMS" title="WebAPI/WebSMS">WebSMS </a>{{NonStandardBadge}}</dt> + <dd><span id="result_box" lang="pt"><span class="hps">Permite</span> <span class="alt-edited hps">que aplicações</span> <span class="alt-edited hps">enviem e recebam</span> <span class="hps">mensagens de texto SMS</span><span>, bem como</span> <span class="hps">para acessar e gerenciar</span> <span class="hps">as mensagens armazenadas</span> <span class="hps">no dispositivo.</span></span></dd> + <dt><a href="/en-US/docs/WebAPI/WiFi_Information" title="WebAPI/WiFi_Information">WiFi Information API (API de Informações WiFi)</a> {{NonStandardBadge}}</dt> + <dd> + <div class="almost_half_cell" id="gt-res-content"> + <div dir="ltr" style="zoom: 1;"><span id="result_box" lang="pt"><span class="alt-edited hps">Uma</span> <span class="hps">API</span> <span class="alt-edited hps">privilegiada</span> <span class="hps">que fornece informações sobre</span> <span class="hps">a força do sinal</span><span>, o nome</span> <span class="hps">da rede atual</span><span>, as redes</span> <span class="hps">Wi-Fi disponíveis</span><span>,</span> <span class="hps">e assim por diante</span><span>.</span></span></div> + </div> + </dd> +</dl> + +<h2 class="Documentation" id="Hardware_access_APIs" name="Hardware_access_APIs">APIs de Acesso ao Hardware</h2> + +<dl> + <dt><a href="/en-US/docs/WebAPI/Using_Light_Events">Ambiente Light Sensor API (API do Sensor de Luz Ambiente)</a></dt> + <dd><span id="result_box" lang="pt"><span class="hps">Fornece acesso ao</span> <span class="hps">sensor de luz ambiente</span><span>, que permite que</span> <span class="hps">seu aplicativo</span> <span class="alt-edited hps">detecte</span> <span class="hps">o nível de luz</span> <span class="alt-edited hps">ao redor</span> <span class="hps">do dispositivo.</span></span></dd> + <dt><a href="/en-US/docs/WebAPI/Battery_Status" title="WebAPI/Battery_Status"><span class="short_text" id="result_box" lang="pt"><span class="alt-edited hps">Battery Status API (API de</span> <span class="alt-edited hps">Estado da Bateria</span></span></a>)</dt> + <dd><span class="short_text" lang="pt"><span class="alt-edited hps">Fornece informações sobre nível de carregamento da bateria e quando ou não o dispositivo está plugado e carregando.</span></span></dd> + <dt><a href="/en-US/docs/Using_geolocation" title="Using_geolocation">Geolocation API (API de Geolocalização)</a></dt> + <dd>Provê informação sobre a localização física do dispositivo.</dd> + <dt><a href="/en-US/docs/WebAPI/Pointer_Lock" title="API/Pointer_Lock_API">Pointer Lock API (API de Bloqueio do mouse)</a></dt> + <dd><span id="result_box" lang="pt"><span class="hps">Permitir</span> <span class="hps">aplicativos</span> <span class="alt-edited hps">bloquearem</span> <span class="hps">o acesso</span> <span class="hps">ao mouse</span> <span class="hps">e ter acesso a</span> <span class="hps">deltas</span> <span class="hps">de movimento</span> <span class="hps">ao invés de</span> <span class="hps">coordenadas absolutas</span><span>, o que</span> <span class="hps">é ótimo</span> <span class="hps">para jogos.</span></span></dd> + <dt><a href="/en-US/docs/WebAPI/Proximity" title="WebAPI/Proximity">Proximity API (API de Proximidade)</a></dt> + <dd>Permite dectar a proximidade do dispositivo a objetos próximos, como o rosto do usuário.</dd> + <dt><a href="/en-US/docs/WebAPI/Detecting_device_orientation" title="WebAPI/Detecting_device_orientation">Device Orientation API (API de Orientação do Dispositivo)</a></dt> + <dd>Fornece notificações quando a orientação do dispositivo muda.</dd> + <dt><a href="/en-US/docs/WebAPI/Managing_screen_orientation" title="WebAPI/Detecting_device_orientation">Screen Orientation API (API de Orientação de Tela)</a></dt> + <dd>Fornece notificações quando a tela do dispositivo muda. Você também uasr a API para permitir seu aplicativo indicar qual orientação é preferida.</dd> + <dt><a href="/en-US/docs/WebAPI/Vibration" title="WebAPI/WebBluetooth">Vibration API (API de Vibração)</a></dt> + <dd>Permite aplicativos controlarem o hardware de vibração do dispositivo para coisas como feedback tátil em jogos. <strong>Não </strong>é a intenção para utilização como vibrações de notificação. Veja a <a href="/en-US/docs/WebAPI/Alarm" title="WebAPI/Alarm">API de Alarme</a> para isso.</dd> + <dt><a href="/en-US/docs/WebAPI/Camera" title="WebAPI/Camera">Camera API (API de Camera)</a> {{NonStandardBadge}}</dt> + <dd>Permite aplicativos tirarem fotograficas e/ou gravar vídeos usando a camera do dispositivo.</dd> + <dt><a href="/en-US/docs/WebAPI/Power_Management" title="WebAPI/Power_Management">Power Management API (API Gerenciamento de Energia) </a>{{NonStandardBadge}}</dt> + <dd>Permite aplicativos ligar ou desligar a tela, CPU e energia do dispositivo, assim por diante. Também fornece suporte para verificar a inspecionar recursos em eventos de bloqueio.<span class="alllinks"><a href="/en-US/docs/tag/WebAPI" title="tag/CSS">Ver todos...</a></span></dd> +</dl> +</div> + +<div class="section"> +<h2 class="Documentation" id="Data_management_APIs" name="Data_management_APIs">APIs de Gerenciamento de Dados</h2> + +<dl> + <dt><a href="/en-US/docs/WebAPI/FileHandle_API" title="WebAPI/FileHandle_API">FileHandle API</a></dt> + <dd>Fornece suporte para escrever arquivos com suporte a bloqueio.</dd> + <dt><a href="/en-US/docs/IndexedDB" title="IndexedDB">IndexedDB</a></dt> + <dd><span id="result_box" lang="pt"><span class="hps">Armazenamento</span> <span class="hps">do lado do cliente</span> <span class="hps">de dados estruturados</span><span>, com suporte para</span> <span class="hps">pesquisas</span> <span class="hps">de alto desempenho.</span></span></dd> + <dt><a href="/en-US/docs/WebAPI/Settings" title="WebAPI/Settings">Settings API (API de Configurações)</a> {{NonStandardBadge}}</dt> + <dd>Permite apps examinarem e alterar todas opções de configuração do sistema que são permanentemente armazenadas no dispositivo.</dd> +</dl> + +<h2 class="Documentation" id="Other_APIs" name="Other_APIs">Outras APIs</h2> + +<dl> + <dt><a href="/en-US/docs/WebAPI/Alarm" title="WebAPI/Alarm">Alarm API (API de Alarme)</a></dt> + <dd>Permite apps agendarem notificações. Também fornece suporte para automaticamente abrir um app em um tempo específico.</dd> + <dt><a href="/en-US/docs/WebAPI/Simple_Push" title="WebAPI/Push_Notifications">Simple Push API</a></dt> + <dd>Permite a plataforma enviar mensagens de notificação para aplicações específicas.</dd> + <dt><a href="/en-US/docs/WebAPI/Using_Web_Notifications" title="/en-US/docs/WebAPI/Using_Web_Notifications">Notificações Web</a></dt> + <dd>Permites aplicações enviarem notificacões mostradas no nível do sistema.</dd> + <dt><a href="/en-US/docs/Apps" title="Apps">Apps API</a> {{NonStandardBadge}}</dt> + <dd>As WebApps APIs abertas fornecem suporte para instalar e gerenciar WebApps. Em complemento, suporte é dado para permitir apps determinem informações de pagamento.</dd> + <dt><a href="/en-US/docs/WebAPI/Web_Activities" title="WebAPI/Web_Activities">Web Activities </a><a href="/en-US/docs/WebAPI/Web_Activities" title="WebAPI/Web_Activities">(Atividades Web)</a> {{NonStandardBadge}}</dt> + <dd>Permite um app delegar uma atividade para outro app; por exemplo, um app pode perguntar outro app para selecionar (ou criar) e retornar uma foto. Tipicamente o usuário é capaz de configurar que apps são usados para cada atividade.</dd> + <dt><a href="/en-US/docs/Apps/Publishing/In-app_payments" title="Apps/Publishing/In-app_payments">WebPayment API</a> <a href="/en-US/docs/Apps/Publishing/In-app_payments" title="Apps/Publishing/In-app_payments">(API Pagamento Web)</a> {{NonStandardBadge}}</dt> + <dd>Permite conteúdos web iniciar pagamentos e restituição para bens virtuais.</dd> + <dt><a href="/en-US/docs/DOM/Using_the_Browser_API" title="DOM/Using_the_Browser_API"><strong>Browser API</strong></a> {{NonStandardBadge}}</dt> + <dd><span id="result_box" lang="pt"><span class="hps">Fornece suporte</span> <span class="hps">para a construção de</span> <span class="alt-edited hps">um navegador Web</span> <span class="hps">completamente</span> <span class="alt-edited hps">utilizando tecnologias</span> <span class="hps">da Web</span> <span class="atn hps">(</span><span>em essência,</span> <span class="hps">um navegador</span> <span class="hps">em um navegador</span><span>)</span><span>.</span></span></dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/WebAPI/Idle" title="WebAPI/Device_Storage_API">Idle API</a>(Notificações em Segundo Plano)</dt> + <dd>Permite apps receberem notificações quando o usuário não estiver ativamente utilizando o dispositivo.</dd> + <dt><a href="/en-US/docs/WebAPI/Permissions" title="WebAPI/Permissions">Permissions AP</a><a href="/en-US/docs/WebAPI/Permissions" style="line-height: 1.5;" title="WebAPI/Permissions">I(API de Permissões</a><a href="/en-US/docs/WebAPI/Permissions" style="line-height: 1.5;" title="WebAPI/Permissions">)</a><span style="line-height: 1.5;"> {{NonStandardBadge}}</span></dt> + <dd>Gerencia permissão de apps em localização centralizada. Utilizado pelo app de Configurações.</dd> + <dt><a href="/en-US/docs/WebAPI/Time_and_Clock" title="WebAPI/Time_and_Clock">Time/Clock API (</a><a href="/en-US/docs/WebAPI/Time_and_Clock" title="WebAPI/Time_and_Clock">API de Tempo/Relógio) </a> {{NonStandardBadge}}</dt> + <dd>Fornece suporte para configuração do tempo atual. O fuso horário é definido utilizando a <a href="/en-US/docs/WebAPI/Settings" title="WebAPI/Settings">Settings API (API de Configurações)</a>.</dd> +</dl> + +<h2 class="Community" id="Community" name="Community">Comunidade WebAPI</h2> + +<p>Se você precisa de ajuda com alguma dessas APIs, aqui estão várias maneiras que você pode conversar com outros desenvolvedores que as estão utilizando.</p> + +<ul> + <li>Consultar forum de WebAPI {{DiscussionList("dev-webapi", "mozilla.dev.webapi")}}</li> + <li>Visite o canal no IRC WebAPI: <a href="irc://irc.mozilla.org/webapi" title="irc://irc.mozilla.org/webapi">#webapi</a></li> +</ul> + +<p><span class="alllinks"><a href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html">Don't forget about the <em>netiquette</em>...</a></span></p> + +<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Tópicos Relacionados</h2> + +<ul> + <li><a href="/en-US/docs/DOM" title="Document Object Model (DOM)">Document Object Model (DOM)</a> é a representação do HTML como uma árvore.</li> + <li><a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a> - a linguagem de scripts para a Web.</li> + <li><a href="/en-US/docs/WebAPI/Doc_status" title="WebAPI/Doc_status">Doc status</a>: uma lista de tópicos da WebAPI e o status da documentação.</li> +</ul> +</div> +</div> + +<p> </p> diff --git a/files/pt-br/conflicting/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html b/files/pt-br/conflicting/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html new file mode 100644 index 0000000000..00dbf6fca6 --- /dev/null +++ b/files/pt-br/conflicting/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html @@ -0,0 +1,328 @@ +--- +title: Usando CSS flexible boxes (Caixas Flexíveis) +slug: CSS/Usando_caixas_flexiveis_css +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox +translation_of_original: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes +--- +<p>{{ SeeCompatTable() }}</p> + +<p>CSS Flexible Box Layout Model (Modelo de Layout Caixas Flexíveis de CSS), também conhecida como "flexbox", é parte do rascunho da especificação do CSS3. Ele provê uma CSS Box Model otimizada para o design de interfaces com o usuário. Elementos filhos no layout flex podem ser posicionados em qualquer direção e possuem dimensões flexíveis para se adaptar ao espaço disponível. Posicionar esses nodos filhos pode ser feito facilmente, e layouts complexos podem ser construídos de uma maneira mais clara e limpa. A ordem de exibição dos elementos é independente da ordem no código fonte.</p> + +<div class="note"><strong>Nota:</strong> a especificação de CSS Flexible Boxes Layout ainda é um rascunho, portanto todas as propriedade devem ser prefixadas com <code>-ms-</code>, <code>-moz-</code>, <code>-o-</code> e <code>-webkit-</code> para garantir a compatibilidade com os navegadores Internet Explorer, Firefox (Gecko), Opera e Chrome/Safari (Webkit), respectivamente.</div> + +<p>Veja <a href="/en/CSS/Flexbox" title="/en/CSS/Flexbox">Flexbox</a> para uma introdução à API.</p> + +<h2 id="Conceito_de_Caixas_Flexíveis">Conceito de Caixas Flexíveis</h2> + +<p>O algoritmo de layout flexbox é agnóstico a direcionamento, em oposição ao layout de bloco (block layout), que é orientado verticalmente, ou ao layout inline, que é orientado horizontamente. Enquanto o layout de bloco funciona bem para páginas, ele carece de definição suficiente para suportar componentes de aplicação que necessitam mudar de orientação, tamanho, aumentar ou encolher, redirecionar da vertical para horizontal, e assim por diante. Flexbox layout é o mais apropriado para os componentes de uma aplicação, ou layouts de pequena escala, enquanto o (emergente) layout de Grid (Grid layout) é planejado para larga escala. Ambos fazem parte de um esforço mais amplo com o CSS3 para proporcionar uma maior interoperabilidade de aplicações web com diferentes agentes de usuário, diferentes modos de escrita, e outras demandas de flexibilidade.</p> + +<h2 id="Terminologia_de_Caixas_Flexíveis">Terminologia de Caixas Flexíveis</h2> + +<p>Ainda que a discussão sobre flexbox gire em torno de termos como eixos horizontais ou em linha, ou eixos verticais ou em bloco, faz-se necessário uma nova terminologia para melhor descrever esse novo modelo. O diagrama abaixo ilustra os termos que serão apresentados a seguir. Ele mostra um container flex que tem uma direção no sentido da linha (NT: <code>flex-direction</code> of <code>row</code>), o que significa que os itens flex seguem uns aos outros horizontalmente através do eixo principal (NT: <em>main axis</em>) de acordo com o sentido de escrita (sentido em que o texto flui), nesse caso da esquerda para a direita.</p> + +<p><img alt="flex_terms.png" class="default internal" src="/files/3739/flex_terms.png"></p> + +<dl> + <dt>Container Flex</dt> + <dd>O elemento pai sobre o qual os itens flex estão contidos. Um container flex é definido usando os valores <code>flex</code> ou <code>inline-flex</code> da propriedade <code><a href="/en/CSS/display" rel="internal" title="display">display</a>.</code></dd> + <dt>Item Flex</dt> + <dd> + <p>Cada nó filho de um container flex é um item flex. Quando um texto é adicionado diretamente ao container flex, ele é encapsulado e um item flex anônimo.</p> + + <div class="note">Nota: Se um bloco anônimo contém apenas espaços em braco, o box poderá não ser gerado se ele tiver a propriedade <code>display:none</code>.</div> + + <div class="note">Nota: Os filhos de um container flex que que possuem posicionamento absoluto são posicionados staticamente de acordo com o canto inicial (NT: head start corner) do container flex pai.</div> + </dd> + <dt>Eixos</dt> + <dd> + <p>Cada layout flexbox possui dois eixos: o eixo principal (NT: main axis), por onde os itens flex seguem uns aos outros e o eixo cruzado (NT: cross axis), perpendicular ao eixo principal.</p> + + <ul> + <li>A propriedade <code><a href="/en/CSS/flex-direction" rel="internal" title="flex-direction">flex-direction</a></code> define o eixo principal.</li> + <li>A propriedade <a href="/en/CSS/justify-content" rel="internal" title="en/CSS/justify-content"><code>justify-content</code></a> define como os itens flex são posicionados sobre o eixo principal em uma determinada linha.</li> + <li>A propriedade <a href="/en/CSS/align-items" title="en/CSS/align-items"><code>align-items</code></a> define o padrão sobre como os itens flex são posicionados sobre o eixo cruzado em uma determinada linha.</li> + <li>A propriedade <a href="/en/CSS/align-self" title="en/CSS/align-self"><code>align-self</code></a> define como um determinado item flex deve ser alinhado no eixo principal. Essa propriedade sobrescreve o padrão estabelecido por <code>align-items.</code></li> + </ul> + </dd> + <dt>Directions</dt> + <dd> + <p>The <strong>main start</strong>/<strong>main end </strong>and <strong>cross start</strong>/<strong>cross end</strong> sides pairs of the flex container describe the origin and terminus of the flow of flex items. They follow the main axis and cross axis of the flex container in the vector established by the <code>writing-mode</code> (left-to-right, right-to-left, etc.).</p> + + <ul> + <li>The <a href="/en/CSS/order" rel="internal" title="en/CSS/order"><code>order</code></a> property assigns elements to ordinal groups and determines which elements appear first.</li> + <li>The <a href="/en/CSS/flex-flow" rel="internal" title="flex-flow"><code>flex-flow</code></a> property shorthands the <a href="/en/CSS/flex-direction" rel="internal" title="flex-direction"><code>flex-direction</code></a> and <a href="/en/CSS/flex-wrap" rel="internal" title="flex-wrap"><code>flex-wrap</code></a> properties to lay out the flex items.</li> + </ul> + </dd> + <dt>Lines</dt> + <dd> + <p>Flex items can be laid out on either a single line or on several lines according to the <a href="/en/CSS/flex-wrap" rel="internal" title="flex-wrap"><code>flex-wrap</code></a> property, which controls the direction of the cross axis and the direction in which new lines are stacked.</p> + </dd> + <dt>Dimensions</dt> + <dd> + <p>The flex items' agnostic equivalents of height and width are <strong>main size</strong> and <strong>cross size,</strong> which respectively follow the main axis and cross axis of the flex container.</p> + + <ul> + <li>The <code><a href="/en/CSS/min-height" title="/en/CSS/min-height">min-height</a></code> and <code><a href="/en/CSS/min-width" title="/en/CSS/min-width">min-width</a></code> properties have a new value, <code>auto</code> that establishes the minimum size of a flex item.</li> + <li>The <a href="/en/CSS/flex" rel="internal" title="en/CSS/flex"><code>flex</code></a> property shorthands the <code><a href="/en/CSS/flex-basis" rel="internal" title="en/CSS/flex-basis">flex-basis</a></code>, <a href="/en/CSS/flex-grow" rel="internal" title="en/CSS/flex-grow"><code>flex-grow</code></a>, and <a href="/en/CSS/flex-shrink" rel="internal" title="en/CSS/flex-shrink"><code>flex-shrink</code></a> properties to establish the flexibility of the flex items.</li> + </ul> + </dd> +</dl> + +<h2 id="Designando_uma_flexible_box">Designando uma flexible box</h2> + +<p>Para designar o CSS parar elementos usandos esse estilo, a propriedade <a href="/en/CSS/display" title="/en/CSS/display">display</a> deve ser setada da seguinte forma:</p> + +<pre>display : flex</pre> + +<p>ou</p> + +<pre>display : inline-flex</pre> + +<p>Definindo o elemento como flex container e seus filhos como flex items. O valor <code>flex</code> faz o conteiner uma elemento de block-level. O valor <code>inline-flex</code> faz o flex conteiner um elemento inline-level atmico.</p> + +<div class="note"><strong>Note:</strong> For the vendor prefix tag, append the string on the display property (not on the display attribute itself). For example, <code>display : -webkit-flex</code>.</div> + +<h2 id="Flexible_box_properties">Flexible box properties</h2> + +<p><span id="cke_bm_69S"> </span>{{ page("/en-US/docs/CSS/Flexbox", "flex- properties") }}<span id="cke_bm_69E"> </span></p> + +<dl> +</dl> + +<h3 id="Propriedades_que_não_afetam_container_flexíveis">Propriedades que não afetam container flexíveis</h3> + +<p>Desde que os containers flexíveis usam um algoritmo de layout diferente, algumas propriedades não fazem sentido em um container flex.</p> + +<ul> + <li>Propriedades column-* do <a href="/en/CSS/Using_CSS_multi-column_layouts" title="Using CSS multi-column layouts">Módulo de múltiplas colunas</a> não tem efeito no flex.</li> + <li><a href="/en/CSS/float" title="float"><code>float</code></a> e <a href="/en/CSS/clear" title="clear"><code>clear</code></a> não tem efeito em um item de um container flex. Usar <code>float</code> faz com que a propriedade de display do elemento seja um <code>block.</code></li> + <li><a href="/en/CSS/vertical-align" title="vertical-align"><code>vertical-align</code></a> não tem efeito no alinhamento de itens de um container flex.</li> +</ul> + +<h2 id="Examples">Examples</h2> + +<p>These examples run in Chrome version 21 (or Chrome Canary which you can install in addition to Chrome). You can run the examples by creating a file with the code provided and loading it in Chrome Canary.</p> + +<h3 id="Basic_flex_example">Basic flex example</h3> + +<p>This basic example shows how to apply "flexibility" to an element, and how sibling elements behave in a flexible state. </p> + +<pre><!DOCTYPE html> +<html lang="en"> + <head> + <style> + + .flex + { + /* basic styling */ + width: 350px; + height: 200px; + border: 1px solid #555; + font: 14px Arial; + + /* flexbox setup */ + display: -webkit-flex; + -webkit-flex-direction: row; + + display: flex; + flex-direction: row; + } + + .flex > div + { + -webkit-flex: 1 1 auto; + flex: 1 1 auto; + + -webkit-transition: width 0.7s ease-out; + transition: width 0.7s ease-out; + } + + /* colors */ + .flex > div:nth-child(1){ background : #009246; } + .flex > div:nth-child(2){ background : #F1F2F1; } + .flex > div:nth-child(3){ background : #CE2B37; } + + .flex > div:hover + { + width: 200px; + } + + </style> + + </head> + <body> + <p>Flexbox nuovo</p> + <div class="flex"> + <div>uno</div> + <div>due</div> + <div>tre</div> + </div> + </body> +</html></pre> + +<h3 id="Holy_Grail_Layout_example">Holy Grail Layout example</h3> + +<p>This example demonstrates how flexbox provides the ability to dynamically change the layout for different screen resolutions. The following diagram illustrates the transformation.</p> + +<p><img alt="HolyGrailLayout.png" class="default internal" src="/files/3760/HolyGrailLayout.png"></p> + +<p>Illustrated here is the case where the page layout suited to a browser window must be optimized for a smart phone window. Not only must the elements reduce in size, but the order in which they are presented must change. Flexbox makes this very simple.</p> + +<pre> +<!DOCTYPE html> +<html lang="en"> + <head> + <style> + + body { + font: 24px Helvetica; + background: #999999; + } + + #main { + min-height: 800px; + margin: 0px; + padding: 0px; + display: -webkit-flex; + -webkit-flex-flow: row; + flex-flow: row; + } + + #main > article { + margin: 4px; + padding: 5px; + border: 1px solid #cccc33; + border-radius: 7pt; + background: #dddd88; + -webkit-flex: 3 1 60%; + flex: 3 1 60%; + -webkit-order: 2; + order: 2; + } + + #main > nav { + margin: 4px; + padding: 5px; + border: 1px solid #8888bb; + border-radius: 7pt; + background: #ccccff; + -webkit-flex: 1 6 20%; + flex: 1 6 20%; + -webkit-order: 1; + order: 1; + } + + #main > aside { + margin: 4px; + padding: 5px; + border: 1px solid #8888bb; + border-radius: 7pt; + background: #ccccff; + -webkit-flex: 1 6 20%; + flex: 1 6 20%; + -webkit-order: 3; + order: 3; + } + + header, footer { + display: block; + margin: 4px; + padding: 5px; + min-height: 100px; + border: 1px solid #eebb55; + border-radius: 7pt; + background: #ffeebb; + } + + /* Too narrow to support three columns */ + @media all and (max-width: 640px) { + + #main, #page { + -webkit-flex-flow: column; + flex-flow: column; + } + + #main > article, #main > nav, #main > aside { + /* Return them to document order */ + -webkit-order: 0; + order: 0; + } + + #main > nav, #main > aside, header, footer { + min-height: 50px; + max-height: 50px; + } + } + + </style> + </head> + <body> + <header>header</header> + <div id='main'> + <article>article</article> + <nav>nav</nav> + <aside>aside</aside> + </div> + <footer>footer</footer> + </body> +</html></pre> + +<h2 id="Things_to_keep_in_mind">Things to keep in mind</h2> + +<p>The algorithm describing how flex items are laid out can be pretty tricky at times. Here are a few things to consider to avoid bad surprises when designing using flexible boxes.</p> + +<p>Flexibles boxes are laid out in conformance of the <a href="/pl/XUL/Własność/mode" title="mode">writing mode</a>. Which means that <strong>main start</strong> and <strong>main end</strong> are laid out according to the position of <strong>start</strong> and <strong>end</strong>.</p> + +<p><strong>cross start</strong> and <strong>cross end</strong> rely on the definition of the <strong>start</strong> or <strong>before</strong> position that depends on the value of <a href="/en/CSS/direction" title="direction"><code>direction</code></a>.</p> + +<p>Page breaks are possible in flexible boxes layout as long as <code>break-</code> property allows it. CSS3 <code>break-after</code>, <code>break-before</code> and <code>break-inside</code> as well as CSS 2.1 <code>page-break-before</code>, <code>page-break-after</code> and <code>page-break-inside</code> properties are accepted on a flex container, flex items and inside flex items.</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>21.0{{ property_prefix("-webkit") }}</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>Feature</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Phone</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> diff --git a/files/pt-br/conflicting/web/css/cursor/index.html b/files/pt-br/conflicting/web/css/cursor/index.html new file mode 100644 index 0000000000..6e5b44d286 --- /dev/null +++ b/files/pt-br/conflicting/web/css/cursor/index.html @@ -0,0 +1,9 @@ +--- +title: '-moz-cell' +slug: Web/CSS/-moz-cell +translation_of: Web/CSS/cursor +translation_of_original: Web/CSS/-moz-cell +--- +<div>{{CSSRef}} {{deprecated_header}}</div> + +<p><em>Não use esse valor! </em>Use o valor <code>cursor</code> {{cssxref("cursor#cell","cell")}} em seu lugar.</p> diff --git a/files/pt-br/conflicting/web/guide/index.html b/files/pt-br/conflicting/web/guide/index.html new file mode 100644 index 0000000000..b98429a656 --- /dev/null +++ b/files/pt-br/conflicting/web/guide/index.html @@ -0,0 +1,95 @@ +--- +title: Desenvolvimento Web +slug: desenvolvimento_web +translation_of: Web/Guide +translation_of_original: Web_Development +--- +<p><strong>Desenvolvimento web </strong>compreende todos os aspectos do desenvolvimento de um site ou aplicação web.</p> +<p>Aprenda a criar qualquer coisa desde um site simples até sites complexos e altamente interativos que incluem as mais recentes tecnologias da Web, lendo os artigos que você encontrará aqui.</p> +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="Documentation_topics">Documentation topics</h2> + <h3 id="Technologies">Technologies</h3> + <dl> + <dt> + <a class="internal" href="/en-US/docs/Web_Development/Introduction_to_Web_development" title="en-US/docs/Web Development/Introduction to Web development">Introduction to Web development</a></dt> + <dd> + A guide to learning how to develop for the Web.</dd> + <dt> + <a class="internal" href="/en-US/docs/HTML" rel="internal">HTML</a></dt> + <dd> + HyperText Markup Language is the basic language for creating web pages and other documents displayed in a browser.</dd> + <dt> + <a class="internal" href="/en-US/docs/CSS" rel="internal">CSS</a></dt> + <dd> + Cascading Style Sheets make it possible to do advanced layout and page design on the Web.</dd> + <dt> + <a class="internal" href="/en-US/docs/JavaScript" rel="internal">JavaScript</a></dt> + <dd> + JavaScript is the most commonly used scripting language for developing web applications; it's also used in the development of Mozilla-based software.</dd> + <dt> + <a class="internal" href="/en-US/docs/DOM" rel="internal">DOM</a></dt> + <dd> + The Document Object Model is an API for HTML and XML documents, providing a structural representation of the document that you can modify in order to alter its visual presentation.</dd> + <dt> + <a class="internal" href="/en-US/docs/AJAX" rel="internal">AJAX</a></dt> + <dd> + Asynchronous JavaScript and XML isn't so much a technology as a combination of technologies; using JavaScript and other modern web technologies together to create dynamic web applications.</dd> + <dt> + <a class="internal" href="/en-US/docs/XHTML" title="en-US/docs/XHTML">XHTML</a></dt> + <dd> + Extensible HyperText Markup Language is an XML-based HTML-like language that offers a stricter syntax than HTML.</dd> + <dt> + <a class="internal" href="/en-US/docs/SVG" rel="internal">SVG</a></dt> + <dd> + Scalable Vector Graphics is an XML markup language for describing 2D vector graphics.</dd> + </dl> + <h3 id="Strategies">Strategies</h3> + <dl> + <dt> + <a class="internal" href="/en-US/docs/Web_Standards" title="en-US/docs/Web Standards">Web standards</a></dt> + <dd> + Learn how to make your Web site or application reach the largest number of users through compatibility with the open Web.</dd> + <dt> + <a href="/en-US/docs/Web_Development/Responsive_Web_design" title="en-US/docs/Web development/Responsive Web design">Responsive Web design</a></dt> + <dd> + Use CSS to present the same content across all hardware platforms, from mobile phones to wide-screen, high-res desktop displays.</dd> + <dt> + <a href="/en-US/docs/Web_development/Writing_forward-compatible_websites" title="Writing forward-compatible websites">Writing forward-compatible websites</a></dt> + <dd> + Best practices for creating websites that do not break when browsers are updated.</dd> + <dt> + <a href="/en-US/docs/Web_Development/Mobile" title="/en-US/docs/Web development/Mobile">Mobile Web development</a></dt> + <dd> + Developing sites for be viewed on mobile devices involves some unique approaches that may not be familiar to those accustomed to developing for desktop browsers.</dd> + <dt> + <a class="internal" href="/en-US/docs/Mozilla_Web_Developer_FAQ" title="en-US/docs/Mozilla Web Developer FAQ">Mozilla Web developer FAQ</a></dt> + <dd> + Frequently asked questions from Web developers. With answers!</dd> + </dl> + <p><span class="alllinks"><a href="/en-US/docs/tag/Web_Development" title="en-US/docs/tag/Web_Development">View All...</a></span></p> + </td> + <td> + <h2 class="Community" id="Community">Community</h2> + <ul> + <li><a class="external" href="http://hacks.mozilla.org" title="http://hacks.mozilla.org">Mozilla Hacks blog</a></li> + <li><a class="external" href="http://www.whatwg.org/" rel="external nofollow" title="http://www.whatwg.org/">WHAT Working Group</a></li> + <li><a class="external" href="http://webdevfeedhouse.com/" rel="external nofollow" title="http://webdevfeedhouse.com/">WebDev FeedHouse</a></li> + </ul> + <h2 class="Tools" id="Tools">Tools</h2> + <ul> + <li><a href="/en-US/docs/Tools" title="en-US/docs/Tools">Main Tools page</a></li> + <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1843" rel="external nofollow" title="https://addons.mozilla.org/en-US/firefox/addon/1843">Firebug extension</a></li> + <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/60" rel="external nofollow" title="https://addons.mozilla.org/en-US/firefox/addon/60">Web Developer extension</a></li> + <li><a href="/en-US/docs/Venkman" rel="internal">Venkman</a>, the JavaScript debugger</li> + <li><a href="/en-US/docs/DOM_Inspector" rel="internal" title="en-US/docs/DOM Inspector">DOM Inspector</a></li> + <li><a href="/en-US/docs/Tools/Scratchpad" title="en-US/docs/Tools/Scratchpad">Scratchpad</a></li> + </ul> + <p><span class="alllinks"><a href="/en-US/docs/tag/Web_Development:Tools" title="en-US/docs/tag/Web_Development:Tools">View All...</a></span></p> + </td> + </tr> + </tbody> +</table> +<p> </p> diff --git a/files/pt-br/conflicting/web/guide/mobile/index.html b/files/pt-br/conflicting/web/guide/mobile/index.html new file mode 100644 index 0000000000..6a651575dc --- /dev/null +++ b/files/pt-br/conflicting/web/guide/mobile/index.html @@ -0,0 +1,17 @@ +--- +title: Desenvolvimento Web móvel +slug: Web_Development/Mobile +tags: + - Mobile + - TopicStub + - Web Development +translation_of: Web/Guide/Mobile +translation_of_original: Web_Development/Mobile +--- +<p>Desenvolvimento de sites para ser visualizado em dispositivos móveis requer abordagens que certifique-se de que um site funciona também em dispositivos móveis, como faz em navegadores desktop. Os seguintes artigos descrevem algumas dessas abordagens.</p> +<ul> + <li><a class="vt-p" href="/pt-BR/Web_Development/Mobile/Mobile-friendliness" title="/en/Web_development/Mobile/Mobile-friendliness">O que é site móvel amigável?</a></li> + <li><a class="vt-p" href="/pt-BR/docs/Web_Development/Mobile/Sites_separados" title="Sites Separados para celular e desktop">Sites Separados</a></li> + <li><a class="vt-p" href="/pt-BR/Web_Development/Mobile/Design_Responsivo">Design Responsivo</a></li> + <li><a class="vt-p" href="/pt-BR/Web_development/Mobile/A_hybrid_approach" title="Uma nova abordagem para aplicações Web (externo)">Uma abordagem híbrida</a></li> +</ul> diff --git a/files/pt-br/conflicting/web/http/cors/index.html b/files/pt-br/conflicting/web/http/cors/index.html new file mode 100644 index 0000000000..b1cb255383 --- /dev/null +++ b/files/pt-br/conflicting/web/http/cors/index.html @@ -0,0 +1,213 @@ +--- +title: Controle de Acesso do lado do servidor (CORS) +slug: Web/HTTP/Server-Side_Access_Control +translation_of: Web/HTTP/CORS +translation_of_original: Web/HTTP/Server-Side_Access_Control +--- +<p><font><font>Os sistemas de controle de acesso realizam </font><font> identificação de </font></font><a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&pto=aue&rurl=translate.google.com&sl=en&sp=nmt4&tl=pt&u=http://searchsoftwarequality.techtarget.com/definition/authorization&usg=ALkJrhgrx7L6XQEL-QG4A5SY3jla7SrNHA" rel="noopener"><font><font>autorização</font></font></a><font><font> , </font></font><a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&pto=aue&rurl=translate.google.com&sl=en&sp=nmt4&tl=pt&u=http://searchsecurity.techtarget.com/definition/authentication&usg=ALkJrhhWsbD8tDshChXZ3hnAhempgwOyXw" rel="noopener"><font><font>autenticação</font></font></a><font><font> , aprovação de acesso e prestação de contas de entidades por meio de credenciais de login, incluindo </font></font><a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&pto=aue&rurl=translate.google.com&sl=en&sp=nmt4&tl=pt&u=http://searchsecurity.techtarget.com/definition/password&usg=ALkJrhilnjZN5ktJEcxF-46B0IA7otOZEg" rel="noopener"><font><font>senhas</font></font></a><font><font> , números de identificação pessoal (PINs), </font><font> varreduras </font></font><a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&pto=aue&rurl=translate.google.com&sl=en&sp=nmt4&tl=pt&u=http://searchsecurity.techtarget.com/definition/biometrics&usg=ALkJrhhhm_VuMmwP8y53PpOCxVJttPPfhA" rel="noopener"><font><font>biométricas</font></font></a><font><font> e chaves físicas ou eletrônicas.</font></font></p> + +<p><font><font>O controle de acesso é uma técnica de segurança que pode ser usada para regular quem ou o que pode exibir ou usar recursos em um ambiente de computação.</font></font></p> + +<p>{{HTTPSidebar}}</p> + +<p><font><font>Os navegadores enviam </font></font><a href="/pt-BR/docs/Web/HTTP/Headers">Cabeçalhos HTTP </a><font><font><a href="/pt-BR/docs/"> </a>específicos </font><font>para solicitações entre sites iniciadas de dentro </font></font>XMLHttpRequest<font><font> </font></font><font><font>ou da </font></font><a href="/en-US/docs/Web/API/Fetch_API"> </a><a href="/pt-BR/docs/Web/API/Fetch_API/Using_Fetch">Fetch Api </a><font><font>. </font><font>Eles também esperam ver cabeçalhos HTTP específicos enviados de volta com respostas entre sites. </font><font>Uma visão geral desses cabeçalhos, incluindo amostra de código JavaScript que inicia solicitações e processa respostas do servidor, além de uma discussão sobre cada cabeçalho, pode ser encontrada no artigo</font></font> <a href="/pt-BR/docs/Web/HTTP/Controle_Acesso_CORS">HTTP Access Control (CORS) article</a><font><font> e deve ser lida como um artigo complementar para este. </font><font>Este artigo aborda o processamento de </font></font><strong><font><font>solicitações de controle de acesso</font></font></strong><font><font> e a formulação de </font></font><strong><font><font>respostas de controle de acesso</font></font></strong><font><font>em PHP. </font><font>O público-alvo deste artigo são programadores ou administradores de servidores. </font><font>Embora os exemplos de código mostrados aqui estejam em PHP, conceitos semelhantes se aplicam ao ASP.net, Perl, Python, Java, etc .; </font><font>em geral, esses conceitos podem ser aplicados a qualquer ambiente de programação do servidor que processa solicitações HTTP e formula dinamicamente respostas HTTP.</font></font></p> + +<h2 id="Discussão_de_cabeçalhos_HTTP"><font><font>Discussão de cabeçalhos HTTP</font></font></h2> + +<p><font><font>O artigo que cobre os<a href="/pt-BR/docs/Web/HTTP/Headers"> cabeçalhos HTTP usados por clientes e servidores</a></font></font> <font><font>deve ser considerado leitura de pré-requisito.</font></font></p> + +<h2 id="Amostras_de_código_de_trabalho"><font><font>Amostras de código de trabalho</font></font></h2> + +<p><font><font>Os trechos de PHP (e as invocações de JavaScript para o servidor) nas seções subseqüentes são obtidos das </font></font><a class="external" href="http://arunranga.com/examples/access-control/" rel="noopener"><font><font>amostras de código de trabalho postadas aqui. </font></font></a><font><font>Eles funcionarão em navegadores que implementam sites cruzados </font></font>{{domxref("XMLHttpRequest")}}.</p> + +<h2 id="Solicitações_simples_entre_sites"><font><font>Solicitações simples entre sites</font></font></h2> + +<p><a href="/pt-BR/docs/Web/HTTP/Controle_Acesso_CORS">Solicitações simples de controle de acesso </a><font><font><a href="/en-US/docs/Web/HTTP/Access_control_CORS#Simple_requests"> </a>são iniciadas quando:</font></font></p> + +<ul> + <li><font><font>Um HTTP / 1.1 </font></font><a href="/pt-BR/docs/Web/HTTP/Methods/GET" title="O método HTTP GET solicita uma representação do recurso especificado. Solicitações usando GET devem recuperar apenas dados."><code>GET</code></a><font><font> ou a </font></font><a href="/pt-BR/docs/Web/HTTP/Methods/POST" title="O método HTTP POST envia dados para o servidor. O tipo do corpo da solicitação é indicado pelo cabeçalho Content-Type."><code>POST</code></a><font><font> é usado como método de solicitação. </font><font>No caso de um POST, o </font></font><a href="/pt-BR/docs/Web/HTTP/Headers/Content-Type" title="O cabeçalho da entidade Content-Type é usado para indicar o tipo de mídia do recurso."><code>Content-Type</code></a><font><font> do corpo do pedido é uma de </font></font><code>application/x-www-form-urlencoded</code><font><font>, </font></font><code>multipart/form-data</code><font><font>ou</font></font><code>text/plain.</code></li> + <li><font><font>Nenhum cabeçalho personalizado é enviado com a solicitação HTTP (como </font></font><code>X-Modified</code><font><font>, etc.)</font></font></li> +</ul> + +<p><font><font>Nesse caso, as respostas podem ser enviadas de volta com base em algumas considerações.</font></font></p> + +<ul> + <li><font><font>Se o recurso em questão for amplamente acessado (como qualquer recurso HTTP acessado pelo GET), o envio do </font><font>cabeçalho será suficiente, a </font><strong><font>menos que</font></strong><font> o recurso precise de credenciais, como </font><font>informações de autenticação de </font><a href="/pt-BR/docs/Web/HTTP/Cookies"><font>cookies</font></a><font> e HTTP. </font></font><a href="/pt-BR/docs/Web/HTTP/Headers/Access-Control-Allow-Origin" title="O cabeçalho da resposta Access-Control-Allow-Origin indica se a resposta pode ser compartilhada com o código solicitante da origem especificada."><code>Access-Control-Allow-Origin</code></a><code>: *</code></li> + <li><font><font>Se o recurso deve ser mantido restrito com base no domínio do solicitante, </font></font><strong><font><font>OU</font></font></strong><font><font> se o recurso precisar ser acessado com credenciais (ou define credenciais), </font></font><a href="https://translate.googleusercontent.com/translate_c?depth=1&pto=aue&rurl=translate.google.com&sl=en&sp=nmt4&tl=pt&u=https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Origin&usg=ALkJrhhwNS3HqZius2soHeJ_asp-bwvgYA" title="O cabeçalho da solicitação de origem indica de onde uma busca se origina. Não inclui nenhuma informação de caminho, mas apenas o nome do servidor. É enviado com solicitações CORS, bem como com solicitações POST. É semelhante ao cabeçalho Referer, mas, diferentemente desse cabeçalho, não divulga todo o caminho."><code>Origin</code></a><font><font> pode ser necessário </font><font>filtrar pelo </font><font>cabeçalho </font><font>da solicitação </font><font>ou, pelo menos, repetir o retorno do solicitante </font></font><code>Origin</code><font><font> ( por exemplo </font><font>). </font><font>Além disso, o </font><font>cabeçalho deverá ser enviado. </font><font>Isso é discutido em uma </font><a href="/pt-BR/docs/Web/HTTP/Server-Side_Access_Control"><font>seção subsequente</font></a><font> . </font></font><a href="/pt-BR/docs/Web/HTTP/Headers/Access-Control-Allow-Origin" title="O cabeçalho da resposta Access-Control-Allow-Origin indica se a resposta pode ser compartilhada com o código solicitante da origem especificada."><code>Access-Control-Allow-Origin</code></a><code>: <a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&pto=aue&rurl=translate.google.com&sl=en&sp=nmt4&tl=pt&u=http://arunranga.com/&usg=ALkJrhjGkKIBAoEKxwNFuLJLg9smgZgatQ" rel="freelink noopener">http://arunranga.com </a></code><a href="/pt-BR/docs/Web/HTTP/Headers/Access-Control-Allow-Credentials" title='O cabeçalho de resposta Access-Control-Allow-Credentials informa aos navegadores se deve expor a resposta ao código JavaScript de front-end quando o modo de credenciais da solicitação (Request.credentials) é "include".'><code>Access-Control-Allow-Credentials</code></a><code>: true</code></li> +</ul> + +<p><font><font>A seção </font></font><a class="internal" href="/pt-BR/docs/Web/HTTP/Controle_Acesso_CORS"><font><font>Solicitações de controle de acesso simples</font></font></a><font><font> mostra as trocas de cabeçalho entre cliente e servidor. </font><font>Aqui está um segmento de código PHP que lida com uma solicitação simples:</font></font></p> + +<pre class="brush: php"><?php + +// Consideremos acesso apenas ao domínio arunranga.com +// Que achamos seguro acessar esse recurso como aplicattion / xml + +if($_SERVER['HTTP_ORIGIN'] == "http://arunranga.com") { + header('Access-Control-Allow-Origin: http://arunranga.com'); + header('Content-type: application/xml'); + readfile('arunerDotNetResource.xml'); +} else { + header('Content-Type: text/html'); + echo "<html>"; + echo "<head>"; + echo " <title>Another Resource</title>"; + echo "</head>"; + echo "<body>", + "<p>This resource behaves two-fold:"; + echo "<ul>", + "<li>If accessed from <code>http://arunranga.com</code> it returns an XML document</li>"; + echo "<li>If accessed from any other origin including from simply typing in the URL into the browser's address bar,"; + echo "you get this HTML document</li>", + "</ul>", + "</body>", + "</html>"; +} +?> +</pre> + +<p><font><font>O </font></font><a href="https://translate.googleusercontent.com/translate_c?depth=1&pto=aue&rurl=translate.google.com&sl=en&sp=nmt4&tl=pt&u=https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Origin&usg=ALkJrhhwNS3HqZius2soHeJ_asp-bwvgYA" title="O cabeçalho da solicitação de origem indica de onde uma busca se origina. Não inclui nenhuma informação de caminho, mas apenas o nome do servidor. É enviado com solicitações CORS, bem como com solicitações POST. É semelhante ao cabeçalho Referer, mas, diferentemente desse cabeçalho, não divulga todo o caminho."><code>Origin</code></a><font><font> item </font><font>acima verifica se o </font><font>cabeçalho enviado pelo navegador (obtido através de $ _SERVER ['HTTP_ORIGIN']]) corresponde a ' </font></font><a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&pto=aue&rurl=translate.google.com&sl=en&sp=nmt4&tl=pt&u=http://arunranga.com/&usg=ALkJrhjGkKIBAoEKxwNFuLJLg9smgZgatQ" rel="freelink noopener"><font><font>http://arunranga.com</font></font></a><font><font> '. </font><font>Se sim, ele retorna </font><font>. </font><font>Este exemplo pode ser </font><a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&pto=aue&rurl=translate.google.com&sl=en&sp=nmt4&tl=pt&u=http://arunranga.com/examples/access-control/&usg=ALkJrhgk6_MrqOBSrD829megYQb7ZI8x5w" rel="noopener"><font>visto em execução aqui</font></a><font> . </font></font><a href="/pt-BR/docs/Web/HTTP/Headers/Access-Control-Allow-Origin" title="O cabeçalho da resposta Access-Control-Allow-Origin indica se a resposta pode ser compartilhada com o código solicitante da origem especificada."><code>Access-Control-Allow-Origin</code></a><code>: <a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&pto=aue&rurl=translate.google.com&sl=en&sp=nmt4&tl=pt&u=http://arunranga.com/&usg=ALkJrhjGkKIBAoEKxwNFuLJLg9smgZgatQ" rel="freelink noopener">http://arunranga.com</a></code></p> + +<h2 id="Solicitações_comprovadas"><font><font>Solicitações comprovadas</font></font></h2> + +<p><a class="internal" href="/pt-BR/docs/Web/HTTP/Controle_Acesso_CORS"><font><font>Solicitações de controle de acesso comprovadas</font></font></a><font><font> ocorrem quando:</font></font></p> + +<ul> + <li><font><font>Um outro método que não </font></font><a href="/pt-BR/docs/Web/HTTP/Methods/GET" title="O método HTTP GET solicita uma representação do recurso especificado. Solicitações usando GET devem recuperar apenas dados."><code>GET</code></a><font><font> ou </font></font><a href="/pt-BR/docs/Web/HTTP/Methods/POST" title="O método HTTP POST envia dados para o servidor. O tipo do corpo da solicitação é indicado pelo cabeçalho Content-Type."><code>POST</code></a><font><font>é utilizado, ou se </font></font><a href="/pt-BR/docs/Web/HTTP/Methods/POST" title="O método HTTP POST envia dados para o servidor. O tipo do corpo da solicitação é indicado pelo cabeçalho Content-Type."><code>POST</code></a><font><font> é usado com um </font></font>{{HTTPHeader("Content-Type")}} diferente de um <code>application/x-www-form-urlencoded</code>, <code>multipart/form-data </code>ou <font><font> </font></font><code>text/plain</code><font><font>. </font></font><span class="tlid-translation translation" lang="pt"><span title="">Por exemplo, se o Tipo de Conteúdo do corpo <code>POST</code> for <code>application / xml</code>, uma solicitação será comprovada.</span></span></li> + <li><font><font>Um cabeçalho personalizado (como </font></font><code>X-PINGARUNER</code><font><font>) é enviado com a solicitação.</font></font></li> +</ul> + +<p><font><font>A seção </font></font><a class="internal" href="/pt-BR/docs/Web/HTTP/Controle_Acesso_CORS"><font><font>Solicitações de controle de acesso</font></font></a><font><font> comprovado mostra uma troca de cabeçalho entre cliente e servidor. </font><font>Um recurso do servidor que responde a uma solicitação de comprovação precisa poder fazer as seguintes determinações:</font></font></p> + +<ul> + <li><font><font>Filtragem baseada </font></font><a href="https://translate.googleusercontent.com/translate_c?depth=1&pto=aue&rurl=translate.google.com&sl=en&sp=nmt4&tl=pt&u=https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Origin&usg=ALkJrhhwNS3HqZius2soHeJ_asp-bwvgYA" title="O cabeçalho da solicitação de origem indica de onde uma busca se origina. Não inclui nenhuma informação de caminho, mas apenas o nome do servidor. É enviado com solicitações CORS, bem como com solicitações POST. É semelhante ao cabeçalho Referer, mas, diferentemente desse cabeçalho, não divulga todo o caminho."><code>Origin</code></a><font><font>, se houver.</font></font></li> + <li><font><font>Resposta a uma </font></font><a href="/pt-BR/docs/Web/HTTP/Methods/OPTIONS" title="O método HTTP OPTIONS é usado para descrever as opções de comunicação para o recurso de destino. O cliente pode especificar uma URL para o método OPTIONS ou um asterisco (*) para se referir a todo o servidor."><code>OPTIONS</code></a><font><font> solicitação (que é a solicitação de comprovação), incluindo o envio de valores necessários com </font></font><a href="/pt-BR/docs/Web/HTTP/Headers/Access-Control-Allow-Methods" title="O cabeçalho de resposta Access-Control-Allow-Methods especifica o método ou métodos permitidos ao acessar o recurso em resposta a uma solicitação de comprovação."><code>Access-Control-Allow-Methods</code></a><font><font>, </font></font><a href="/pt-BR/docs/Web/HTTP/Headers/Access-Control-Allow-Headers" title="O cabeçalho de resposta Access-Control-Allow-Headers é usado em resposta a uma solicitação de comprovação que inclui os Access-Control-Request-Headers para indicar quais cabeçalhos HTTP podem ser usados durante a solicitação real."><code>Access-Control-Allow-Headers</code></a><font><font>(se forem necessários cabeçalhos adicionais para que o aplicativo funcione) e, se credenciais forem necessárias para este recurso </font></font><a href="/pt-BR/docs/Web/HTTP/Headers/Access-Control-Allow-Credentials" title='O cabeçalho de resposta Access-Control-Allow-Credentials informa aos navegadores se deve expor a resposta ao código JavaScript de front-end quando o modo de credenciais da solicitação (Request.credentials) é "include".'><code>Access-Control-Allow-Credentials</code></a><font><font>,.</font></font></li> + <li><font><font>Resposta à solicitação real, incluindo manipulação de </font></font><code>POST</code><font><font> dados, etc.</font></font></li> +</ul> + +<p><font><font>Aqui está um exemplo no PHP de manipulação de uma </font></font><a class="internal" href="/pt-BR/docs/Web/HTTP/Controle_Acesso_CORS#Preflighted_requests"><font><font>solicitação preflighted</font></font></a><font><font> :</font></font></p> + +<pre class="brush: php"><?php + +if($_SERVER['REQUEST_METHOD'] == "GET") { + + header('Content-Type: text/plain'); + echo "This HTTP resource is designed to handle POSTed XML input"; + echo "from arunranga.com and not be retrieved with GET"; + +} elseif($_SERVER['REQUEST_METHOD'] == "OPTIONS") { + // Diga ao cliente que apoiamos arunranga.com + // e que esse comprovante seja válido por 20 dias + + if($_SERVER['HTTP_ORIGIN'] == "http://arunranga.com") { + header('Access-Control-Allow-Origin: http://arunranga.com'); + header('Access-Control-Allow-Methods: POST, GET, OPTIONS'); + header('Access-Control-Allow-Headers: X-PINGARUNER'); + header('Access-Control-Max-Age: 1728000'); + header("Content-Length: 0"); + header("Content-Type: text/plain"); + //exit(0); + } else { + header("HTTP/1.1 403 Access Forbidden"); + header("Content-Type: text/plain"); + echo "You cannot repeat this request"; + } + +} elseif($_SERVER['REQUEST_METHOD'] == "POST") { + // Manipula o post primeiro obtendo o blob XML POST + // e, em seguida, fazendo algo e enviando resultados para o cliente + + if($_SERVER['HTTP_ORIGIN'] == "http://arunranga.com") { + $postData = file_get_contents('php://input'); + $document = simplexml_load_string($postData); + + // Faça algo com os dados POST + + $ping = $_SERVER['HTTP_X_PINGARUNER']; + + header('Access-Control-Allow-Origin: http://arunranga.com'); + header('Content-Type: text/plain'); + echo // some string response after processing + } else { + die("POSTing Only Allowed from arunranga.com"); + } +} else { + die("No Other Methods Allowed"); +} +?> +</pre> + +<p><font><font>Observe os cabeçalhos apropriados sendo enviados de volta em resposta à </font></font><a href="/pt-BR/docs/Web/HTTP/Methods/OPTIONS" title="O método HTTP OPTIONS é usado para descrever as opções de comunicação para o recurso de destino. O cliente pode especificar uma URL para o método OPTIONS ou um asterisco (*) para se referir a todo o servidor."><code>OPTIONS</code></a><font><font> comprovação, bem como aos </font></font><a href="/pt-BR/docs/Web/HTTP/Methods/POST" title="O método HTTP POST envia dados para o servidor. O tipo do corpo da solicitação é indicado pelo cabeçalho Content-Type."><code>POST</code></a><font><font> dados. </font><font>Um recurso lida com a comprovação e com a solicitação real. </font><font>Na resposta à </font></font><code>OPTIONS</code><font><font> solicitação, o servidor notifica o cliente de que a solicitação real pode realmente ser feita com o </font></font><code>POST</code><font><font> método e campos de cabeçalho como </font></font><code>X-PINGARUNER</code><font><font>podem ser enviados com a solicitação real. </font><font>Este exemplo pode ser </font></font><a class="external" href="http://arunranga.com/examples/access-control/" rel="noopener"><font><font>visto em execução aqui</font></font></a><font><font> .</font></font></p> + +<h2 id="Solicitações_credenciadas"><font><font>Solicitações credenciadas</font></font></h2> + +<p><a class="internal" href="/pt-BR/docs/Web/HTTP/Controle_Acesso_CORS#Requests_with_credentials"><font><font>Solicitações de controle de acesso credenciadas</font></font></a><font><font> - ou seja, solicitações acompanhadas de informações sobre </font></font><a href="/pt-BR/docs/Web/HTTP/Cookies"><font><font>cookies</font></font></a><font><font> ou autenticação HTTP (e que esperam que os cookies sejam enviados com respostas) - podem ser </font></font><a class="internal" href="/pt-BR/docs/Web/HTTP/Controle_Acesso_CORS#Simple_requests"><font><font>simples</font></font></a><font><font> ou </font></font><a class="internal" href="/pt-BR/docs/Web/HTTP/Controle_Acesso_CORS#Preflighted_requests"><font><font>comprovadas</font></font></a><font><font> , dependendo dos métodos de solicitação utilizados.</font></font></p> + +<p><font><font>Em um </font><font>cenário de </font></font><a class="internal" href="/pt-BR/docs/Web/HTTP/Controle_Acesso_CORS#Simple_requests"><font><font>solicitação simples</font></font></a><font><font> , a solicitação será enviada com cookies (por exemplo, se o </font></font><code><a href="https://translate.googleusercontent.com/translate_c?depth=1&pto=aue&rurl=translate.google.com&sl=en&sp=nmt4&tl=pt&u=https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials&usg=ALkJrhgvgswWP53yIsn9CbNdLjlz6qnTuw">withCredentials</a></code><font><font> sinalizador estiver ativado </font></font><a href="/pt-BR/docs/Web/API/XMLHttpRequest" title="Use objetos XMLHttpRequest (XHR) para interagir com servidores. Você pode recuperar dados de um URL sem precisar atualizar a página inteira. Isso permite que uma página da Web atualize apenas parte de uma página sem interromper o que o usuário está fazendo."><code>XMLHttpRequest</code></a><font><font>). </font><font>Se o servidor responder com </font><font>anexado à resposta credenciada, a resposta será aceita pelo cliente e exposta ao conteúdo da web. </font><font>Em uma </font><a class="internal" href="/pt-BR/docs/Web/HTTP/Controle_Acesso_CORS#Preflighted_requests"><font>solicitação comprovada</font></a><font> , </font></font>Se o servidor responder com <code><a href="/pt-BR/docs/Web/HTTP/Headers/Access-Control-Allow-Credentials">Access-Control-Allow-Credentials</a>: true</code> anexado à resposta credenciada, a resposta será aceita pelo cliente e exposta ao conteúdo da Web. Em uma Solicitação Comprovada, o servidor pode responder com <code>Acesso-Controle-Permitir Credenciais: true</code> à solicitação <code>OPTIONS</code>.</p> + +<p><font><font>Aqui está um PHP que lida com solicitações credenciadas:</font></font></p> + +<pre class="brush: php"><?php + +if($_SERVER['REQUEST_METHOD'] == "GET") { + header('Access-Control-Allow-Origin: http://arunranga.com'); + header('Access-Control-Allow-Credentials: true'); + header('Cache-Control: no-cache'); + header('Pragma: no-cache'); + header('Content-Type: text/plain'); + + // Primeiro, veja se existe um cookie + if (!isset($_COOKIE["pageAccess"])) { + setcookie("pageAccess", 1, time()+2592000); + echo 'I do not know you or anyone like you so I am going to'; + echo 'mark you with a Cookie :-)'; + } else { + $accesses = $_COOKIE['pageAccess']; + setcookie('pageAccess', ++$accesses, time()+2592000); + echo 'Hello -- I know you or something a lot like you!'; + echo 'You have been to ', $_SERVER['SERVER_NAME'], '; + echo 'at least ', $accesses-1, ' time(s) before!'; + } +} elseif($_SERVER['REQUEST_METHOD'] == "OPTIONS") { + // Diga ao cliente que esse comprovante permanece válido por apenas 20 dias + if($_SERVER['HTTP_ORIGIN'] == "http://arunranga.com") { + header('Access-Control-Allow-Origin: http://arunranga.com'); + header('Access-Control-Allow-Methods: GET, OPTIONS'); + header('Access-Control-Allow-Credentials: true'); + header('Access-Control-Max-Age: 1728000'); + header("Content-Length: 0"); + header("Content-Type: text/plain"); + } else { + header("HTTP/1.1 403 Access Forbidden"); + header("Content-Type: text/plain"); + echo "You cannot repeat this request"; + } +} else { + die("This HTTP Resource can ONLY be accessed with GET or OPTIONS"); +} +?> +</pre> + +<p><font><font>Observe que, no caso de solicitações credenciadas, o </font></font><code>Access-Control-Allow-Origin:</code><font><font> cabeçalho </font></font><strong><font><font>não deve</font></font></strong><font><font> ter um valor curinga de <strong>"*"</strong>. </font><font>Ele </font></font><strong><font><font>deve</font></font></strong><font><font> mencionar um domínio de origem válido. </font><font>O exemplo acima pode ser visto em </font></font><a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&pto=aue&rurl=translate.google.com&sl=en&sp=nmt4&tl=pt&u=http://arunranga.com/examples/access-control/&usg=ALkJrhgk6_MrqOBSrD829megYQb7ZI8x5w" rel="noopener"><font><font>execução aqui</font></font></a><font><font> .</font></font></p> + +<h2 id="Exemplos_do_Apache"><font><font>Exemplos do Apache</font></font></h2> + +<h3 id="Restringir_o_acesso_a_determinados_URIs"><font><font>Restringir o acesso a determinados URIs</font></font></h3> + +<p><font><font>Um truque útil é usar uma reescrita do Apache, variável de ambiente e cabeçalhos para aplicar </font></font><code>Access-Control-Allow-*</code><font><font>a determinados URIs. </font><font>Isso é útil, por exemplo, para restringir solicitações de origem cruzada a </font></font><code>GET /api(.*).json</code><font><font>solicitações sem credenciais:</font></font></p> + +<pre>RewriteRule ^/api(.*)\.json$ /api$1.json [CORS=True] +Header set Access-Control-Allow-Origin "*" env=CORS +Header set Access-Control-Allow-Methods "GET" env=CORS +Header set Access-Control-Allow-Credentials "false" env=CORS +</pre> + +<h2 id="Veja_também"><font><font>Veja também</font></font></h2> + +<ul> + <li><a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&pto=aue&rurl=translate.google.com&sl=en&sp=nmt4&tl=pt&u=http://arunranga.com/examples/access-control/&usg=ALkJrhgk6_MrqOBSrD829megYQb7ZI8x5w" rel="noopener"><font><font>Exemplos de controle de acesso em ação</font></font></a></li> + <li><a class="external" href="https://github.com/jackblackevo/cors-jsonp-sample" rel="noopener"><font><font>Amostra do lado do cliente e do lado do servidor (Java) para compartilhamento de recursos de origem cruzada (CORS)</font></font></a></li> + <li><a class="internal" href="/pt-BR/docs/Web/HTTP/Controle_Acesso_CORS"><font><font>Controle de acesso HTTP cobrindo os cabeçalhos HTTP</font></font></a></li> + <li><a href="/pt-BR/docs/Web/API/XMLHttpRequest" title="Use objetos XMLHttpRequest (XHR) para interagir com servidores. Você pode recuperar dados de um URL sem precisar atualizar a página inteira. Isso permite que uma página da Web atualize apenas parte de uma página sem interromper o que o usuário está fazendo."><code>XMLHttpRequest</code></a></li> + <li><a href="/pt-BR/docs/Web/API/Fetch_API"><font><font>Fetch API</font></font></a></li> +</ul> diff --git a/files/pt-br/conflicting/web/javascript/equality_comparisons_and_sameness/index.html b/files/pt-br/conflicting/web/javascript/equality_comparisons_and_sameness/index.html new file mode 100644 index 0000000000..57f1c2fdcc --- /dev/null +++ b/files/pt-br/conflicting/web/javascript/equality_comparisons_and_sameness/index.html @@ -0,0 +1,259 @@ +--- +title: Igualdade em JavaScript +slug: Web/JavaScript/Guide/Igualdade +translation_of: Web/JavaScript/Equality_comparisons_and_sameness +translation_of_original: Web/JavaScript/Guide/Sameness +--- +<p>A ES6 possui três facilidades internas para determinar se algum <var>x</var> e algum <var>y</var> são "os mesmos". Elas são: igualdade ou "igual duplo" (<a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators" title="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators"><code>==</code></a>), igualdade rigorosa ou "igual triplo" (<a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators" title="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators"><code>===</code></a>), e <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a>. (Note que <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> foi adicionado na ES6. Ambos igual duplo e igual triplo existiam antes da ES6, e seu comportamento permanece o mesmo.)</p> +<h2 id="Visão_geral">Visão geral</h2> +<p>Para demonstração, aqui estão as três comparações de igualdade em uso:</p> +<pre class="brush:js">x == y</pre> +<pre class="brush:js">x === y</pre> +<pre class="brush:js">Object.is(x, y)</pre> +<p>De modo breve, o operador igual duplo irá realizar uma conversão de tipo na hora de comparar duas coisas; o operador igual triplo fará a mesma comparação sem conversão de tipo (simplesmente sempre retornando <code>false</code> se os tipos forem diferentes); e <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> se comportará da mesma forma que o operador igual triplo, mas lidando de forma especial com <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN"><code>NaN</code></a> e <code>-0</code> e <code>+0</code> de modo que os dois últimos não são considerados os mesmos, enquanto que <code>Object.is(NaN, NaN)</code> será <code>true</code>. (Comparar <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN"><code>NaN</code></a> com <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN"><code>NaN</code></a> geralmente—i.e., usando-se o operador igual duplo ou o operador igual triplo—resulta em <code>false</code>, de acordo com a IEEE 754.)</p> +<p>Note que a distinção entre todas essas formas de comparação tem a ver com a forma com que lidam com primitivos; nenhuma delas compara se os parâmetros são conceitualmente similares em estrutura. Para quaisquer objetos não-primitivos <var>x</var> e <var>y</var> que têm a mesma estrutura mas que são objetos distintos, todas as formas de comparação acima resultarão no valor <code>false</code>.</p> +<p>Por exemplo:</p> +<pre class="brush:js">let x = { value: 17 }; +let y = { value: 17 }; +console.log(Object.is(x, y)); // false; +console.log(x === y); // false +console.log(x == y); // false</pre> +<h2 id="Igualdade_abstrata_igualdade_rigorosa_e_mesmo_valor">Igualdade abstrata, igualdade rigorosa, e mesmo valor</h2> +<p>Na ES5, a comparação realizada por <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators" title="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators"><code>==</code></a> é descrita na <a href="http://ecma-international.org/ecma-262/5.1/#sec-11.9.3" title="http://ecma-international.org/ecma-262/5.1/#sec-11.9.3">Seção 11.9.3, O Algoritmo de Igualdade Abstrata</a>. A comparação <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators" title="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators"><code>===</code></a> é descrita em <a href="http://ecma-international.org/ecma-262/5.1/#sec-11.9.6" title="http://ecma-international.org/ecma-262/5.1/#sec-11.9.6">11.9.6, O Algoritmo de Igualdade Rigorosa</a>. (Dê uma olhada nestes. Eles são rápidos e legíveis. Dica: leia o algoritmo de igualdade rigorosa primeiro.) A ES5 também descreve, na <a href="http://ecma-international.org/ecma-262/5.1/#sec-9.12" title="http://ecma-international.org/ecma-262/5.1/#sec-9.12">Seção 9.12, O Algoritmo de MesmoValor</a> para ser usado internamente pelo engine JS. Ele é em sua maioria similar ao Algoritmo de Igualdade Rigorosa, com exceção de que 11.9.6.4 e 9.12.4 diferem na forma de lidar com <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number"><code>Number</code></a>s (números). A ES6 simplesmente propõe expôr esse algoritmo através de <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a>.</p> +<p>Podemos ver que com os operadores igual duplo e igual triplo, com a exceção de fazer uma checagem de tipo de início em 11.9.6.1, o Algoritmo de Igualdade Rigorosa é um subconjunto do Algoritmo de Igualdade Abstrata, pois 11.9.6.2–7 corresponde a 11.9.3.1.a–f.</p> +<h2 id="Um_modelo_para_entender_comparações_de_igualdade">Um modelo para entender comparações de igualdade?</h2> +<p>Antes da ES6, você pode ter dito, a respeito dos operadores igual duplo e igual triplo, que um é uma versão "melhorada" do outro. Por exemplo, alguém poderia dizer que o operador igual duplo é uma versão extendidad do operador igual triplo, pois o primeiro faz tudo que o último faz, com conversão de tipo em seus operandos (por exemplo, de modo que <code>6 == "6"</code>). Alternativamente, alguém poderia dizer que o operador igual triplo é uma versão melhorada do operador igual duplo, pois requer que os dois operandos sejam do mesmo tipo. Qual é melhor depende de qual é a sua idéia de patamar.</p> +<p>No entanto, essa forma de pensar sobre os operados de igualdade internos não é um modelo que pode ser "esticado" para permitir um lugar para o <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> da ES6 nesse "espectro". O <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> não é simplesmente "menos restrito" do que o operador igual duplo ou "mais restrito" do que o operador igual triplo, nem cabe em algum lugar entre esses níveis (isto é, sendo mais restrito que o operador igual duplo, mas menos restrito que o operador igual triplo). Nós podemos ver da tabela de comparações de igualdade abaixo que isto é devido à forma com que <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> lida com <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN"><code>NaN</code></a>. Perceba que se <code>Object.is(NaN, NaN)</code> resultasse no valor <code>false</code>, nós <em>poderíamos</em> dizer que ele cabe no espectro pouco restrito/restrito como uma forma ainda mais restrita do operador igual triplo, uma que faz distinção entre <code>-0</code> e <code>+0</code>. A forma de lidar com <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN"><code>NaN</code></a> significa que isso não é verdade, no entanto. Infelizmente, <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> simplesmente deve ser considerado em termos de duas características específicas, ao invés de sua rigorosidade (ou falta da mesma) com respeito aos operadores de igualdade.</p> +<table class="standard-table"> + <caption> + Comparações de Igualdade</caption> + <thead> + <tr> + <th scope="col" style="text-align: center;">x</th> + <th scope="col" style="text-align: center;">y</th> + <th scope="col" style="width: 10em; text-align: center;"><code>==</code></th> + <th scope="col" style="width: 10em; text-align: center;"><code>===</code></th> + <th scope="col" style="width: 10em; text-align: center;"><code>Object.is</code></th> + </tr> + </thead> + <tbody> + <tr> + <td><code>undefined</code></td> + <td><code>undefined</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + </tr> + <tr> + <td><code>null</code></td> + <td><code>null</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + </tr> + <tr> + <td><code>true</code></td> + <td><code>true</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + </tr> + <tr> + <td><code>false</code></td> + <td><code>false</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + </tr> + <tr> + <td><code>"foo"</code></td> + <td><code>"foo"</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + </tr> + <tr> + <td><code>{ foo: "bar" }</code></td> + <td><code>x</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + </tr> + <tr> + <td><code>0</code></td> + <td><code>0</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + </tr> + <tr> + <td><code>+0</code></td> + <td><code>-0</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + </tr> + <tr> + <td><code>0</code></td> + <td><code>false</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + </tr> + <tr> + <td><code>""</code></td> + <td><code>false</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + </tr> + <tr> + <td><code>""</code></td> + <td><code>0</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + </tr> + <tr> + <td><code>"0"</code></td> + <td><code>0</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + </tr> + <tr> + <td><code>"17"</code></td> + <td><code>17</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + </tr> + <tr> + <td><code>new String("foo")</code></td> + <td><code>"foo"</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + </tr> + <tr> + <td><code>null</code></td> + <td><code>undefined</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + </tr> + <tr> + <td><code>null</code></td> + <td><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + </tr> + <tr> + <td><code>undefined</code></td> + <td><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + </tr> + <tr> + <td><code>{ foo: "bar" }</code></td> + <td><code>{ foo: "bar" }</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + </tr> + <tr> + <td><code>new String("foo")</code></td> + <td><code>new String("foo")</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + </tr> + <tr> + <td><code>0</code></td> + <td><code>null</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + </tr> + <tr> + <td><code>0</code></td> + <td><code>NaN</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + </tr> + <tr> + <td><code>"foo"</code></td> + <td><code>NaN</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + </tr> + <tr> + <td><code>NaN</code></td> + <td><code>NaN</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + </tr> + </tbody> +</table> +<h2 id="Quando_usar_Object.is_versus_o_operador_igual_triplo">Quando usar <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> versus o operador igual triplo</h2> +<p>Além da forma com que trata o valor it <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN"><code>NaN</code></a>, de modo geral, o único caso em o comportamento especial de <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> com a relação a zeros é capaz de ser de interesse é na busca de certos esquemas de metaprogramação, especialmente em relação a descritores de propriedade quando é desejável que seu trabalho espelhe algumas das características de <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty"><code>Object.defineProperty</code></a>. Se seu caso de uso não requer isso, sugere-se evitar-se <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> e usar-se o operador <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators" title="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators"><code>===</code></a> ao invés disso. Mesmo se seus requerimentos envolvem que comparações entre dois valores <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN"><code>NaN</code></a> resultem em <code>true</code>, de modo geral é mais fácil fazer-se uma checagem especial por <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN"><code>NaN</code></a>s (usando-se o método <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isNaN"><code>isNaN</code></a> disponíveis de versões anteritores da ECMAScript) do que lidar com como computações externas possam afetar o sinal de quaisquer zeros que você possa encontrar em sua comparação.</p> +<p>Aqui está uma lista não-exaustiva de métodos e operadores internos que podem fazer com que uma distinção entre <code>-0</code> e <code>+0</code> se manifeste em seu código:</p> +<dl> + <dt> + <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#-_.28Unary_Negation.29" title="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators"><code>- (negação unária)</code></a></dt> +</dl> +<dl> + <dd> + <p>É óbvio que negar <code>0</code> produz <code>-0</code>. Mas a abstração de uma expressão pode fazer com o valor <code>-0</code> apareça de modo despercebido. Por exemplo, considere o seguinte:</p> + <pre class="brush:js">let stoppingForce = obj.mass * -obj.velocity</pre> + <p>Se <code>obj.velocity</code> é <code>0</code> (ou resulta no valor <code>0</code>), um <code>-0</code> é introduzido naquele ponto e propaga-se para <code>stoppingForce</code>.</p> + </dd> +</dl> +<dl> + <dt> + <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/atan2" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/atan2"><code>Math.atan2</code></a></dt> + <dt> + <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/ceil" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/ceil"><code>Math.ceil</code></a></dt> + <dt> + <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/pow" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/pow"><code>Math.pow</code></a></dt> + <dt> + <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/round" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/round"><code>Math.round</code></a></dt> +</dl> +<dl> + <dd> + É possível que um <code>-0</code> seja introduzido em uma expressão como um valor de retorno desses métodos em alguns casos, mesmo quando nenhum <code>-0</code> existe como um dos parâmetros. Por exemplo, usando-se <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/pow" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/pow"><code>Math.pow</code></a> para elevar o valor <code>-<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code> à potência de qualquer expoente negativo ímpar resulta no valor <code>-0</code>. Veja a documentação para os métodos individuais.</dd> +</dl> +<dl> + <dt> + <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor"><code>Math.floor</code></a></dt> + <dt> + <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/max" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/max"><code>Math.max</code></a></dt> + <dt> + <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/min" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/min"><code>Math.min</code></a></dt> + <dt> + <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sin" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sin"><code>Math.sin</code></a></dt> + <dt> + <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sqrt" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sqrt"><code>Math.sqrt</code></a></dt> + <dt> + <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/tan" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/tan"><code>Math.tan</code></a></dt> +</dl> +<dl> + <dd> + É possível obter-se um valor de retorno <code>-0</code> desses métodos em alguns casos quando um <code>-0</code> existe como um dos parâmetros. Por exemplo, <code>Math.min(-0, +0)</code> resulta no valor <code>-0</code>. Veja a documentação para os métodos individuais.</dd> +</dl> +<dl> + <dt> + <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" title="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">~</a></code></dt> + <dt> + <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" title="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators"><<</a></code></dt> + <dt> + <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" title="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">>></a></code></dt> + <dd> + Cada um desses operadores usa o algoritmo ToInt32 internamente. Uma vez que só há uma representação para o valor 0 no tipo inteiro de 32 bits interno, o valor <code>-0</code> não irá sobreviver a um arredondamento depois de uma operação inversa. Por exemplo, ambos <code>Object.is(~~(-0), -0)</code> e <code>Object.is(-0 << 2 >> 2, -0)</code> resultam no valor <code>false</code>.</dd> +</dl> +<p>Contar com <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> quando o sinal de zeros não é levado em consideração pode ser problemático. É claro que quando a intenção é distinguir entre <code>-0</code> e <code>+0</code>, ele faz exatamente o que é desejado.gual</p> diff --git a/files/pt-br/conflicting/web/javascript/reference/global_objects/boolean/index.html b/files/pt-br/conflicting/web/javascript/reference/global_objects/boolean/index.html new file mode 100644 index 0000000000..99603a019f --- /dev/null +++ b/files/pt-br/conflicting/web/javascript/reference/global_objects/boolean/index.html @@ -0,0 +1,112 @@ +--- +title: Boolean.prototype +slug: Web/JavaScript/Reference/Global_Objects/Boolean/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Boolean +translation_of_original: Web/JavaScript/Reference/Global_Objects/Boolean/prototype +--- +<div>{{JSRef}}</div> + +<p>A propriedade <strong><code>Boolean.prototype</code></strong> representa o prototype para o construtor de {{jsxref("Boolean")}}.</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Descrição">Descrição</h2> + +<p>Instancias de {{jsxref("Boolean")}} herdam de <code>Boolean.prototype</code>. Você pode usar os construtores do objeto prototype para adicionar propriedados ou metodos para todas as instancias de {{jsxref("Boolean")}} instances.</p> + +<h2 id="Propriedades">Propriedades</h2> + +<dl> + <dt><code>Boolean.prototype.constructor</code></dt> + <dd>Retorna a função que criou a instancia do prototype. Esta é a função {{jsxref("Boolean")}} por padrão.</dd> +</dl> + +<h2 id="Métodos">Métodos</h2> + +<dl> + <dt>{{jsxref("Boolean.prototype.toSource()")}} {{non-standard_inline}}</dt> + <dd>Retorna a string contendo o codigo do objeto {{jsxref("Boolean")}} ; pode-se usar esta string para criar um objeto equivalente. Sobreescreve o método {{jsxref("Object.prototype.toSource()")}}.</dd> + <dt>{{jsxref("Boolean.prototype.toString()")}}</dt> + <dd>Retorna uma string com valor <code>"true"</code> ou <code>"false"</code> dependendo qual o valor do objeto. Sobreescreve o método {{jsxref("Object.prototype.toString()")}}.</dd> + <dt>{{jsxref("Boolean.prototype.valueOf()")}}</dt> + <dd>Retorna o valor primitivo do objeto {{jsxref("Boolean")}}. Sobreescreve o método {{jsxref("Object.prototype.valueOf()")}}.</dd> +</dl> + +<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('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definição inicial. Implementano no JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.6.3.1', 'Boolean.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-boolean.prototype', 'Boolean.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </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>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</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>Chrome for 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>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/pt-br/conflicting/web/javascript/reference/global_objects/function/index.html b/files/pt-br/conflicting/web/javascript/reference/global_objects/function/index.html new file mode 100644 index 0000000000..3b45ee5fe2 --- /dev/null +++ b/files/pt-br/conflicting/web/javascript/reference/global_objects/function/index.html @@ -0,0 +1,95 @@ +--- +title: Function.prototype +slug: Web/JavaScript/Reference/Global_Objects/Function/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Function +translation_of_original: Web/JavaScript/Reference/Global_Objects/Function/prototype +--- +<div>{{JSRef}}</div> + +<p>A propriedade <code><strong>Function.prototype</strong></code> representa o objeto <code>prototype</code> de {{jsxref("Function")}}.</p> + +<h2 id="Descrição">Descrição</h2> + +<p>Objetos {{jsxref("Function")}} herdam de <code>Function.prototype</code>. <code>Function.prototype</code> não pode ser modificado.</p> + +<h2 id="Propriedades">Propriedades</h2> + +<dl> + <dt>{{jsxref("Function.arguments")}} {{deprecated_inline}}</dt> + <dd>Um vetor correspondente aos argumentos passados a uma função. Isto é depreciado como propriedade de {{jsxref("Function")}}. Use em vez disso o objeto {{jsxref("Functions/arguments", "arguments")}} disponível dentro da função.</dd> + <dt><s class="obsoleteElement">{{jsxref("Function.arity")}} {{obsolete_inline}}</s></dt> + <dd><s class="obsoleteElement">Usado para especificar o número de argumentos esperados pela função. Foi removido, utilize em vez disso a propriedade {{jsxref("Function.length", "length")}}.</s></dd> + <dt>{{jsxref("Function.caller")}} {{non-standard_inline}}</dt> + <dd>Especifica a função que invocou a função sendo executada.</dd> + <dt>{{jsxref("Function.length")}}</dt> + <dd>Especifica o número de argumentos esperados pela função.</dd> + <dt>{{jsxref("Function.name")}}</dt> + <dd>O nome da função.</dd> + <dt>{{jsxref("Function.displayName")}} {{non-standard_inline}}</dt> + <dd>O nome de exibição da função.</dd> + <dt><code>Function.prototype.constructor</code></dt> + <dd>Especifica a função que cria o <code>prototype</code> do objeto. Veja {{jsxref("Object.prototype.constructor")}} para mais detalhes.</dd> +</dl> + +<h2 id="Métodos">Métodos</h2> + +<dl> + <dt>{{jsxref("Function.prototype.apply()")}}</dt> + <dd>Chama uma função e define seu <code>this</code> com o valor fornecido. Argumentos podem ser passados como um objeto {{jsxref("Array")}}.</dd> + <dt>{{jsxref("Function.prototype.bind()")}}</dt> + <dd>Cria uma nova função que, quando chamada, tem seu <code>this</code> definido com o valor fornecido, com uma sequência de argumentos determinada precedendo quaisquer argumentos fornecidos quando a nova função é chamada.</dd> + <dt>{{jsxref("Function.prototype.call()")}}</dt> + <dd>Chama (executa) uma função e define seu <code>this</code> com o valor fornecido. Argumentos podem ser passados como são.</dd> + <dt>{{jsxref("Function.prototype.isGenerator()")}} {{non-standard_inline}}</dt> + <dd>Retorna <code>true</code> se a função é um <a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators">gerador</a>; se não, retorna <code>false</code>.</dd> + <dt>{{jsxref("Function.prototype.toSource()")}} {{non-standard_inline}}</dt> + <dd>Retorna uma <em>string</em> representando o código-fonte da função. Sobrescreve o método {{jsxref("Object.prototype.toSource")}}.</dd> + <dt>{{jsxref("Function.prototype.toString()")}}</dt> + <dd>Retorna uma <em>string</em> representando o código-fonte da função. Sobrescreve o método {{jsxref("Object.prototype.toString")}}.</dd> +</dl> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definição inicial. Implementada no JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.3.5.2', 'Function.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function-instances-prototype', 'Function.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-instances-prototype', 'Function.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2> + +<div> +<div class="hidden">A tabela de compatibildiade nesta página é gerada a partir de dados estruturados. Se você gostaria de contribuir com os dados, confira por favor <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e nos envie uma <em>pull request</em>.</div> + +<p>{{Compat("javascript.builtins.Function.prototype")}}</p> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{jsxref("Function")}}</li> +</ul> diff --git a/files/pt-br/conflicting/web/javascript/reference/global_objects/intl/numberformat/index.html b/files/pt-br/conflicting/web/javascript/reference/global_objects/intl/numberformat/index.html new file mode 100644 index 0000000000..dce89ef41e --- /dev/null +++ b/files/pt-br/conflicting/web/javascript/reference/global_objects/intl/numberformat/index.html @@ -0,0 +1,126 @@ +--- +title: Intl.NumberFormat.prototype +slug: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/prototype +tags: + - Internacionalização + - JavaScript + - NumberFormat + - Property + - Propriedade + - Prototipo + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat +translation_of_original: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/prototype +--- +<div>{{JSRef}}</div> + +<p>A propriedade <strong><code>Intl.NumberFormat.prototype</code></strong> representa o objeto do protótipo do construtor de {{jsxref("NumberFormat", "Intl.NumberFormat")}}.</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Descrição">Descrição</h2> + +<p>Veja {{jsxref("NumberFormat")}} para uma descrição sobre instâncias de <code>Intl.NumberFormat</code>.</p> + +<p>As instâncias de {{jsxref("NumberFormat", "Intl.NumberFormat")}} herdam de <code>Intl.NumberFormat.prototype</code>. Modificações ao objeto do protótipo são herdados por todas as instâncias de {{jsxref("NumberFormat", "Intl.NumberFormat")}}.</p> + +<h2 id="Propriedades">Propriedades</h2> + +<dl> + <dt><code>Intl.NumberFormat.prototype.constructor</code></dt> + <dd>Uma referência a <code>Intl.NumberFormat</code>.</dd> + <dt>{{jsxref("NumberFormat.format", "Intl.NumberFormat.prototype.format")}}</dt> + <dd>Getter; retorna uma função que formata um número de acordo com a localização e as opçõe de formatação do objeto {{jsxref("NumberFormat")}}.</dd> +</dl> + +<h2 id="Métodos">Métodos</h2> + +<dl> + <dt>{{jsxref("NumberFormat.resolvedOptions", "Intl.NumberFormat.prototype.resolvedOptions()")}}</dt> + <dd>Retorna um novo objeto com propriedades refletindo a localização e as opções de agrupamento obtidos durante a inicialização do objeto.</dd> +</dl> + +<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ários</th> + </tr> + <tr> + <td>{{SpecName('ES Int 1.0', '#sec-11.2.1', 'Intl.NumberFormat.prototype')}}</td> + <td>{{Spec2('ES Int 1.0')}}</td> + <td>Definição inicial.</td> + </tr> + <tr> + <td>{{SpecName('ES Int 2.0', '#sec-11.2.1', 'Intl.NumberFormat.prototype')}}</td> + <td>{{Spec2('ES Int 2.0')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES Int Draft', '#sec-Intl.NumberFormat.prototype', 'Intl.NumberFormat.prototype')}}</td> + <td>{{Spec2('ES Int Draft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Características</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>{{CompatChrome("24")}}</td> + <td>{{CompatGeckoDesktop("29")}}</td> + <td>{{CompatIE("11")}}</td> + <td>{{CompatOpera("15")}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Características</th> + <th>Android</th> + <th>Chrome for 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>{{CompatNo}}</td> + <td>{{CompatChrome("26")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{jsxref("NumberFormat", "Intl.NumberFormat")}}</li> +</ul> diff --git a/files/pt-br/conflicting/web/javascript/reference/global_objects/map/index.html b/files/pt-br/conflicting/web/javascript/reference/global_objects/map/index.html new file mode 100644 index 0000000000..b20baf56cc --- /dev/null +++ b/files/pt-br/conflicting/web/javascript/reference/global_objects/map/index.html @@ -0,0 +1,136 @@ +--- +title: Map.prototype +slug: Web/JavaScript/Reference/Global_Objects/Map/prototype +tags: + - ECMAScript 2015 + - JavaScript + - Mapa + - Propriedade +translation_of: Web/JavaScript/Reference/Global_Objects/Map +translation_of_original: Web/JavaScript/Reference/Global_Objects/Map/prototype +--- +<div>{{JSRef}}</div> + +<p>A propriedade <code><strong>Map</strong></code><strong><code>.prototype</code></strong> representa o protótipo para o construtor {{jsxref("Map")}}.</p> + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="Descrição">Descrição</h2> + +<p>Instâncias de {{jsxref("Map")}} herdam de {{jsxref("Map.prototype")}}. Você pode utilizar o objeto protótipo do construtor para adicionar propriedades ou métodos para todas as instâncias de <code>Map</code>.</p> + +<h2 id="Propriedades">Propriedades</h2> + +<dl> + <dt><code>Map.prototype.constructor</code></dt> + <dd>Retorna a função que criou um protótipo da instância. Isso é a funçao de {{jsxref("Map")}} por padrão.</dd> + <dt>{{jsxref("Map.prototype.size")}}</dt> + <dd>Retorna o número de pares chave/valor no objeto <code>Map</code>.</dd> +</dl> + +<h2 id="Metódos">Metódos</h2> + +<dl> + <dt>{{jsxref("Map.prototype.clear()")}}</dt> + <dd>Remove todas os pares chave/valor do objeto <code>Map</code>.</dd> + <dt>{{jsxref("Map.delete", "Map.prototype.delete(chave)")}}</dt> + <dd>Remove qualquer valor associado à chave passada e retorna o valor que <code>Map.prototype.has(chave)</code> deveria retornar anteriormente. <code>Map.prototype.has(chave)</code> irá retornar <code>false</code> após tal remoção ser feita.</dd> + <dt>{{jsxref("Map.prototype.entries()")}}</dt> + <dd>Retorna um novo objeto <code>Iterador</code> que contem<strong> um array de <code>[chave, valor]</code></strong> para cada elemento no objeto <code>Map</code> pela ordem de inserção.</dd> + <dt>{{jsxref("Map.forEach", "Map.prototype.forEach(callbackFn[, thisArg])")}}</dt> + <dd>Chama callbackFn uma vez para cada par chave/valor presente no objeto <code>Map</code>, pela ordem de inserção. Se um parâmetro thisArg for fornecido para o forEach, ele será utilizado como o valor this para cada callback.</dd> + <dt>{{jsxref("Map.get", "Map.prototype.get(chave)")}}</dt> + <dd>Retorna o valor associado para a <code>chave</code>, ou <code>undefined</code> se esta não existir no objeto <code>Map</code>.</dd> + <dt>{{jsxref("Map.has", "Map.prototype.has(key)")}}</dt> + <dd>Retorna um valor booleano caso um valor tenha sido associado à <code>chave</code> no objeto <code>Map</code> ou não.</dd> + <dt>{{jsxref("Map.prototype.keys()")}}</dt> + <dd>Retorna um novo objeto <code>Iterador</code> que contem as <strong>chaves</strong> para cada elemento no objeto <code>Map</code> object pela ordem de inserção.</dd> + <dt>{{jsxref("Map.set", "Map.prototype.set(key, value)")}}</dt> + <dd>Configura o valor par a <code>chave</code> no objeto <code>Map</code>. Retorna o objeto <code>Map</code>.</dd> + <dt>{{jsxref("Map.prototype.values()")}}</dt> + <dd>Retorna um novo objeto <code>Iterador</code> que contém os <strong>valores</strong> para cada elemento no objeto <code>Map</code> pela ordem de inserção.</dd> + <dt>{{jsxref("Map.@@iterator", "Map.prototype[@@iterator]()")}}</dt> + <dd>Retorna um novo objeto <code>Iterator</code> que contém<strong> um array de <code>[chave, valor]</code></strong> para cada elemento no objeto <code>Map</code> pela ordem de inserção.</dd> +</dl> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-map.prototype', 'Map.prototype')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definição inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-map.prototype', 'Map.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </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>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>38</td> + <td>{{ CompatGeckoDesktop("13") }}</td> + <td>11</td> + <td>25</td> + <td>7.1</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>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>38</td> + <td>{{CompatGeckoMobile("13")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td> + <p>8</p> + </td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{jsxref("Set.prototype")}}</li> +</ul> diff --git a/files/pt-br/conflicting/web/javascript/reference/global_objects/number/index.html b/files/pt-br/conflicting/web/javascript/reference/global_objects/number/index.html new file mode 100644 index 0000000000..9dd96bc9b3 --- /dev/null +++ b/files/pt-br/conflicting/web/javascript/reference/global_objects/number/index.html @@ -0,0 +1,140 @@ +--- +title: Number.prototype +slug: Web/JavaScript/Reference/Global_Objects/Number/prototype +tags: + - JavaScript + - Número + - Propriedade + - Prototipo +translation_of: Web/JavaScript/Reference/Global_Objects/Number +translation_of_original: Web/JavaScript/Reference/Global_Objects/Number/prototype +--- +<div>{{JSRef}}</div> + +<p>A propriedade <strong><code>Number.prototype</code></strong> representa o protótipo para o construtor {{jsxref("Number")}}.</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Descrição">Descrição</h2> + +<p>Todas instâncias {{jsxref("Number")}} herdam de <code>Number.prototype</code>. O objeto 'prototype' do construtor {{jsxref("Number")}} pode ser modificado para afetar todas instâncias {{jsxref( "Number")}}.</p> + +<h2 id="Propriedades">Propriedades</h2> + +<dl> + <dt><code>Number.prototype.constructor</code></dt> + <dd>Retorna a função que criou esta instância do objeto. Por padrão, este é o objeto {{jsxref("Number")}}.</dd> +</dl> + +<h2 id="Métodos">Métodos</h2> + +<dl> + <dt>{{jsxref("Number.prototype.toExponential()")}}</dt> + <dd>Retorna uma 'string' representando o número em notação exponencial.</dd> + <dt>{{jsxref("Number.prototype.toFixed()")}}</dt> + <dd>Retorna uma 'string' representando o número em notação em ponto fixo.</dd> + <dt>{{jsxref("Number.prototype.toLocaleString()")}}</dt> + <dd>Retorna uma 'string' com uma representação sensível ao idioma deste número. Substitui o método {{jsxref("Object.prototype.toLocaleString()")}}.</dd> + <dt>{{jsxref("Number.prototype.toPrecision()")}}</dt> + <dd>Retorna uma 'string' representando o número para uma precisão específica em notação ponto fixo ou exponencial.</dd> + <dt>{{jsxref("Number.prototype.toSource()")}} {{non-standard_inline}}</dt> + <dd>Retorna uma objeto literal representando um objeto específicado {{jsxref("Number")}}; você pode usar este valor para criar um novo objeto. Substitui o método {{jsxref("Object.prototype.toSource()")}}.</dd> + <dt>{{jsxref("Number.prototype.toString()")}}</dt> + <dd>Retorna uma 'string' representando o objeto especificado na raiz especificada (base). Substitui o método {{jsxref("Object.prototype.toString()")}}.</dd> + <dt>{{jsxref("Number.prototype.valueOf()")}}</dt> + <dd>Retorna o valor primitivo do objeto especificado. Substitui o método {{jsxref("Object.prototype.valueOf()")}}.</dd> +</dl> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Situação</th> + <th scope="col">Comentários</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definição inicial. Implementado em JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.7.4', 'Number')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-properties-of-the-number-prototype-object', 'Number')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-properties-of-the-number-prototype-object', 'Number')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Configuração</th> + <th>Chrome</th> + <th>Edge</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>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Configuração</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>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>{{jsxref("Number")}}</li> +</ul> diff --git a/files/pt-br/conflicting/web/javascript/reference/global_objects/object/index.html b/files/pt-br/conflicting/web/javascript/reference/global_objects/object/index.html new file mode 100644 index 0000000000..d0c07076a0 --- /dev/null +++ b/files/pt-br/conflicting/web/javascript/reference/global_objects/object/index.html @@ -0,0 +1,227 @@ +--- +title: Object.prototype +slug: Web/JavaScript/Reference/Global_Objects/Object/prototype +tags: + - JavaScript + - Objeto + - Propriedade +translation_of: Web/JavaScript/Reference/Global_Objects/Object +translation_of_original: Web/JavaScript/Reference/Global_Objects/Object/prototype +--- +<div>{{JSRef("Global_Objects", "Object")}}</div> + +<h2 id="Summary" name="Summary">Sumário</h2> + +<p>A propriedade <code><strong>Object.prototype</strong></code> representa o {{jsxref("Global_Objects/Object", "Object")}} protótipo do objeto.</p> + +<p>{{js_property_attributes(0, 0, 0)}}</p> + +<h2 id="Description" name="Description">Descrição</h2> + +<p>Praticamente todos os objetos em JavaScript descendem de {{jsxref("Global_Objects/Object", "Object")}}; todos os métodos e propriedades herdados de <code>Object.prototype</code>, embora possam ser sobrescritos (exceto um <code>Objeto</code> com protótipo nulo, i.e. <code>Object.create(null)</code>). Por exemplo, outros protótipos construtores sobrescrevem a propriedade construtora e fornece seus próprios {{jsxref("Object.prototype.toString()", "toString()")}} métodos.</p> + +<p>Modificações no <code>Objeto protótipo</code> do objeto são propagadas a <strong>todos</strong> objetos através do encadeamento de protótipos, a menos que as propriedades e métodos submetidos às mudanças sejam sobrescritos mais além no encadeamento dos protótipos. Este recurso oferece um mecânismo muito poderoso apesar de perigoso para <em>sobrescrita</em> e <em>extensão</em> de objetos.</p> + +<h2 id="Properties" name="Properties">Propriedades</h2> + +<dl> + <dt>{{jsxref("Object.prototype.constructor")}}</dt> + <dd>Especifica a função que cria um objeto protótipo.</dd> + <dt>{{jsxref("Object.prototype.__proto__")}} {{non-standard_inline}}</dt> + <dd>Aponta para o objeto que foi usado como protótipo quando o objeto foi instanciado.</dd> + <dt>{{jsxref("Object.prototype.__noSuchMethod__")}} {{non-standard_inline}}</dt> + <dd>Permite definir uma função que será executada quando um membro indefinido do objeto for chamado como método.</dd> + <dt><s class="obsoleteElement">{{jsxref("Object.prototype.__count__")}} {{obsolete_inline}}</s></dt> + <dd><s class="obsoleteElement">Usado para retornar um número de propriedades enumeráveis diretamente num objeto definido pelo usuário, mas foi removida.</s></dd> + <dt><s class="obsoleteElement">{{jsxref("Object.prototype.__parent__")}} {{obsolete_inline}}</s></dt> + <dd><s class="obsoleteElement">Usado para apontar a um contexto do objeto, mas foi removida.</s></dd> +</dl> + +<h2 id="Methods" name="Methods">Métodos</h2> + +<dl> + <dt>{{jsxref("Object.prototype.__defineGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd>Associa uma função com uma propriedade que, quando acessada, executa uma função e retorna seu valor de retorno.</dd> + <dt>{{jsxref("Object.prototype.__defineSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd>Associa uma função com uma propriedade que, quando definida, executa uma função que modifica a propriedade.</dd> + <dt>{{jsxref("Object.prototype.__lookupGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd>Retorna a função associada com a propriedade específicada pelo {{jsxref("Object.defineGetter", "__defineGetter__")}} método.</dd> + <dt>{{jsxref("Object.prototype.__lookupSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd>Retorna a função associada com a propriedade especificada pelo {{jsxref("Object.defineSetter", "__defineSetter__")}} método.</dd> + <dt>{{jsxref("Object.prototype.hasOwnProperty()")}}</dt> + <dd>Retorna um boolean indicando se um objeto contém a propriedade especificada como uma propriedade direta de um objeto e não herdada através da cadeia de protótipo.</dd> + <dt>{{jsxref("Object.prototype.isPrototypeOf()")}}</dt> + <dd>Retorna uma indicação booleana se o objeto especificado está na cadeia de protótipo do objeto este método é chamado.</dd> + <dt>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</dt> + <dd>Retorna um boolean indicando se o atributo interno <a href="/en-US/docs/ECMAScript_DontEnum_attribute" title="ECMAScript_DontEnum_attribute">ECMAScript DontEnum attribute</a> está definido.</dd> + <dt>{{jsxref("Object.prototype.toSource()")}} {{non-standard_inline}}</dt> + <dd>Retorna uma string contendo o código de um objeto literal representando o objeto que este método é chamado; você pode usar este valor para criar um novo objeto.</dd> + <dt>{{jsxref("Object.prototype.toLocaleString()")}}</dt> + <dd>Chama {{jsxref("Object.toString", "toString()")}}.</dd> + <dt>{{jsxref("Object.prototype.toString()")}}</dt> + <dd>Retorna uma representação do objeto em forma de string.</dd> + <dt>{{jsxref("Object.prototype.unwatch()")}} {{non-standard_inline}}</dt> + <dd>Remove um ponto de escuta da propriedade do objeto.</dd> + <dt>{{jsxref("Object.prototype.valueOf()")}}</dt> + <dd>Retorna o valor primitivo do objeto especificado.</dd> + <dt>{{jsxref("Object.prototype.watch()")}} {{non-standard_inline}}</dt> + <dd>Adiciona um ponto de escuta à propriedade do objeto.</dd> + <dt><s class="obsoleteElement">{{jsxref("Object.prototype.eval()")}} {{obsolete_inline}}</s></dt> + <dd><s class="obsoleteElement">Usado para avaliar uma string de código JavaScript no contexto do objeto especificado, mas foi removido.</s></dd> +</dl> + +<h2 id="Examples" name="Examples">Exemplos</h2> + +<p>Quando é alterado o comportamento de um método de um Objeto protótipo, considere injetar código envolvendo sua extensão antes ou depois ta lógica existente. Por exemplo, este (não testado) código irá pré-condicionalmente executar uma lógica personalizada antes da lógica embutida ou a extensão de alguém será executada.</p> + +<p>Quando uma função é chamada os argumentos para a chamada são segurados no array de argumentos como "variável". Por exemplo, na chamada "minhaFuncao(a, b, c)", os argumentos no corpo da minhaFuncao irão conter 3 elementos array correspondentes a (a, b, c). Quando modificamos os protótipos com ganchos, simplesmente passamos <em>this</em> & a variável <em>arguments</em> (o estado de chamada) para o comportamento atual pela chamada <em>apply()</em> na função. Este padrão pode ser usado por qualquer protótipo, tal como <em>Node.prototype, Function.prototype, etc.</em></p> + +<pre><code>var current = Object.prototype.valueOf; + +// Desde que minha propriedade "-prop-value" é transversal e não está +// sempre na mesma cadeia de protótipo, desejo modificar Object.prototype: +Object.prototype.valueOf = function() { + if (this.hasOwnProperty("-prop-value") { + return this["-prop-value"]; + } else { + // Isto não parece com um de meus objetos, então vamos retroceder ao + // comportamento padrão para reproduzir o comportamento atual o que + // pudermos. O <em>apply</em> se comporta como o<em>"super"</em> em outras linguagens. + // Mesmo que <em>valueOf()</em> não receba argumentos, alguns outros ganchos podem. + return current.apply(this, arguments); + } +}</code></pre> + +<p>Desde que JavaScript não tem exatamente objetos de subclasse, protótipo é uma forma usual de trabalhar para fazer um objeto "classe base" de certas funções que agem como objetos. Por exemplo:</p> + +<pre class="brush: js">var Person = function() { + this.canTalk = true; + this.greet = function() { + if (this.canTalk) { + console.log('Hi, I\'m ' + this.name); + } + }; +}; + +var Employee = function(name, title) { + this.name = name; + this.title = title; + this.greet = function() { + if (this.canTalk) { + console.log("Hi, I'm " + this.name + ", the " + this.title); + } + }; +}; +Employee.prototype = new Person(); + +var Customer = function(name) { + this.name = name; +}; +Customer.prototype = new Person(); + +var Mime = function(name) { + this.name = name; + this.canTalk = false; +}; +Mime.prototype = new Person(); + +var bob = new Employee('Bob', 'Builder'); +var joe = new Customer('Joe'); +var rg = new Employee('Red Green', 'Handyman'); +var mike = new Customer('Mike'); +var mime = new Mime('Mime'); +bob.greet(); +joe.greet(); +rg.greet(); +mike.greet(); +mime.greet(); +</pre> + +<p>O retorno será:</p> + +<pre>Hi, I'm Bob, the Builder +Hi, I'm Joe +Hi, I'm Red Green, the Handyman +Hi, I'm Mike +</pre> + +<h2 id="Specifications" name="Specifications">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificações</th> + <th scope="col">Situação</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>ECMAScript 1st Edition. Implemented in JavaScript 1.0.</td> + <td>Padrão</td> + <td>Definição inicial.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.1', 'Object.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.prototype', 'Object.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade com Navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Aspecto</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>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Aspecto</th> + <th>Android</th> + <th>Chrome para 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>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p> </p> diff --git a/files/pt-br/conflicting/web/javascript/reference/global_objects/promise/index.html b/files/pt-br/conflicting/web/javascript/reference/global_objects/promise/index.html new file mode 100644 index 0000000000..d0be3d870c --- /dev/null +++ b/files/pt-br/conflicting/web/javascript/reference/global_objects/promise/index.html @@ -0,0 +1,114 @@ +--- +title: Promise.prototype +slug: Web/JavaScript/Reference/Global_Objects/Promise/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Promise +translation_of_original: Web/JavaScript/Reference/Global_Objects/Promise/prototype +--- +<div>{{JSRef("Global_Objects", "Promise")}}</div> + +<h2 id="Summary" name="Summary">Sumário</h2> + +<p>A propriedade <code><strong>Promise</strong></code><strong><code>.prototype</code></strong> representa o protótipo para o construtor {{jsxref("Promise")}}.</p> + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="Description" name="Description">Descrição</h2> + +<p>{{jsxref("Promise")}} instância herdada de {{jsxref("Promise.prototype")}}. Você pode usar o objeto construtor para adicionar propriedades ou métodos para todas as instâncias de <code>Promise</code>.</p> + +<h2 id="Propriedades">Propriedades</h2> + +<dl> + <dt><code>Promise.prototype.constructor</code></dt> + <dd>Retorna a função que cria uma instância. Isso é a função padrão {{jsxref("Promise")}}.</dd> +</dl> + +<h2 id="Métodos">Métodos</h2> + +<dl> + <dt>{{jsxref("Promise.catch", "Promise.prototype.catch(onRejected)")}}</dt> + <dd>Adiciona um callback que trata rejeição para a promise e, retorna uma nova promise resolvendo o valor retornado do callback, se ele for chamado, ou para seu valor original de conclusão se a promise for realizada.</dd> + <dt>{{jsxref("Promise.then", "Promise.prototype.then(onFulfilled, onRejected)")}}</dt> + <dd>Adiciona os métodos de tratamento da realização e rejeição da promise e, retorna uma nova promise resolvendo para o valor do método chamado.</dd> +</dl> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-promise.prototype', 'Promise.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</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>32</td> + <td>{{CompatGeckoDesktop(24.0)}} as <code>Future</code><br> + {{CompatGeckoDesktop(25.0)}} as <code>Promise</code> behind a flag[1]<br> + {{CompatGeckoDesktop(29.0)}} by default</td> + <td>{{CompatNo}}</td> + <td>19</td> + <td>7.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> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile(24.0)}} as <code>Future</code><br> + {{CompatGeckoMobile(25.0)}} as <code>Promise</code> behind a flag[1]<br> + {{CompatGeckoMobile(29.0)}} by default</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>iOS 8</td> + <td>32</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Gecko 24 has an experimental implementation of <code>Promise</code>, under the initial name of <code>Future</code>. It got renamed to its final name in Gecko 25, but disabled by default behind the flag <code>dom.promise.enabled</code>. <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=918806">Bug 918806</a> enabled Promises by default in Gecko 29.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Promise")}}</li> +</ul> diff --git a/files/pt-br/conflicting/web/javascript/reference/global_objects/set/index.html b/files/pt-br/conflicting/web/javascript/reference/global_objects/set/index.html new file mode 100644 index 0000000000..1f2ca2c70b --- /dev/null +++ b/files/pt-br/conflicting/web/javascript/reference/global_objects/set/index.html @@ -0,0 +1,85 @@ +--- +title: Set.prototype +slug: Web/JavaScript/Reference/Global_Objects/Set/prototype +tags: + - Propriedade + - Prototipo + - set +translation_of: Web/JavaScript/Reference/Global_Objects/Set +translation_of_original: Web/JavaScript/Reference/Global_Objects/Set/prototype +--- +<div>{{JSRef}}</div> + +<p>A propriedade <code><strong>Set</strong></code><strong><code>.prototype</code></strong> representa o protótipo do construtor do objeto {{jsxref("Set")}}.</p> + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="Descrição">Descrição</h2> + +<p>Instâncias de {{jsxref("Set")}} herdam de {{jsxref("Set.prototype")}}. Você pode usar o construtor do objeto protótipo para adicionar propriedades ou métodos para todas as instâncias de <code>Set</code> .</p> + +<h2 id="Propriedades">Propriedades</h2> + +<dl> + <dt><code>Set.prototype.constructor</code></dt> + <dd>Retorna a função que criou o protótipo de uma instância. Esta é a função {{jsxref("Set")}} por padrão.</dd> + <dt>{{jsxref("Set.prototype.size")}}</dt> + <dd>Retorna o número de valores no objeto <code>Set</code>.</dd> +</dl> + +<h2 id="Métodos">Métodos</h2> + +<dl> + <dt>{{jsxref("Set.add", "Set.prototype.add(value)")}}</dt> + <dd>Anexa um novo elemento com o valor passado ao objeto <code>Set</code> . Retorna o objeto <code>Set</code>.</dd> + <dt>{{jsxref("Set.prototype.clear()")}}</dt> + <dd>Remove todos os elementos do objeto <code>Set</code>.</dd> + <dt>{{jsxref("Set.delete", "Set.prototype.delete(value)")}}</dt> + <dd>Remove o elemento associado ao <code>value</code> e retorna o valor que <code>Set.prototype.has(value)</code> teria retornado anteriormente. <code>Set.prototype.has(value)</code> irá retornar <code>false</code> depois disso.</dd> + <dt>{{jsxref("Set.prototype.entries()")}}</dt> + <dd>Retorna um novo objeto <code>Iterator</code> que contém<strong> um array de <code>[value, value]</code></strong> para cada elemento no objeto <code>Set</code> , em ordem de inserção. Isso é similar ao objeto <code>Map</code>, para que cada entrada tenha o mesmo valor para sua <em>chave</em> e<em>valor </em>aqui.</dd> + <dt>{{jsxref("Set.forEach", "Set.prototype.forEach(callbackFn[, thisArg])")}}</dt> + <dd>Chama <code>callbackFn</code> uma vez para cada valor presente no objeto <code>Set</code>, em ordem de inserção. Se um parâmetro <code>thisArg</code> for passado para o <code>forEach</code>, ele será usado como valor de <code>this</code> para cada callback.</dd> + <dt>{{jsxref("Set.has", "Set.prototype.has(value)")}}</dt> + <dd>Retorna um booleano afirmando se um elemento está presente com o dado valor no objeto <code>Set</code> ou não.</dd> + <dt>{{jsxref("Set.prototype.keys()")}}</dt> + <dd>É a mesma função que a função <strong><code>values()</code></strong> e retorna um novo objeto <code>Iterator</code> que contém os valores para cada elemento no objeto <code>Set</code> em ordem de inserção.</dd> + <dt>{{jsxref("Set.prototype.values()")}}</dt> + <dd>Retorna um novo objeto <code>Iterator</code> que contém os <strong>values</strong> para cada elemento no objeto <code>Set</code> em ordem de inserção.</dd> + <dt>{{jsxref("Set.prototype.@@iterator()", "Set.prototype[@@iterator]()")}}</dt> + <dd>Retorna um novo objeto <code>Iterator</code> que contém os <strong>values</strong> para cada elemento do objeto <code>Set</code> em ordem de inserção.</dd> +</dl> + +<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('ES2015', '#sec-set.prototype', 'Set.prototype')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definição inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-set.prototype', 'Set.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2> + + + +<p>{{Compat("javascript.builtins.Set.prototype")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{jsxref("Map.prototype")}}</li> +</ul> diff --git a/files/pt-br/conflicting/web/javascript/reference/global_objects/string/index.html b/files/pt-br/conflicting/web/javascript/reference/global_objects/string/index.html new file mode 100644 index 0000000000..a0df7b93ea --- /dev/null +++ b/files/pt-br/conflicting/web/javascript/reference/global_objects/string/index.html @@ -0,0 +1,177 @@ +--- +title: String.prototype +slug: Web/JavaScript/Reference/Global_Objects/String/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/String +translation_of_original: Web/JavaScript/Reference/Global_Objects/String/prototype +--- +<div>{{JSRef}}</div> + +<p>A <strong><code>String.prototype</code></strong> representa o prototipo de objeto {{jsxref("String")}}.</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Descrição">Descrição</h2> + +<p>Todas as instâncias {{jsxref("String")}} herdam de <code>String.prototype</code>. Alterações na <code>String</code> são propagadas para todas as instâncias {{jsxref("String")}}.</p> + +<h2 id="Propriedades">Propriedades</h2> + +<dl> + <dt><code>String.prototype.constructor</code></dt> + <dd>Especifica a função que cria o protótipo de um objeto.</dd> + <dt>{{jsxref("String.prototype.length")}}</dt> + <dd>Reflete o comprimento da string.</dd> + <dt><code><em>N</em></code></dt> + <dd>Usado para acessar o caractere na posição <em>N</em> onde <em>N</em> é um número inteiro entre 0 e um menor que o valor da <code><a href="/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Function/length">length</a></code>. Estas propriedades são apenas de leitura.</dd> +</dl> + +<h2 id="Métodos">Métodos</h2> + +<h3 id="Métodos_não_relacionados_ao_HTML">Métodos não relacionados ao HTML</h3> + +<dl> + <dt>{{jsxref("String.prototype.charAt()")}}</dt> + <dd>Retorna o caractere (exatamente uma unidade de código UTF-16) no índice especificado.</dd> + <dt>{{jsxref("String.prototype.charCodeAt()")}}</dt> + <dd>Retorna um número que é o valor da unidade de código UTF-16 em dado índice.</dd> + <dt>{{jsxref("String.prototype.codePointAt()")}}</dt> + <dd>Retorna um número inteiro não negativo Number que é o valor de posição de código da posição de código inicial em dado índice.</dd> + <dt>{{jsxref("String.prototype.concat()")}}</dt> + <dd>Combina o texto de duas strings e retorna uma nova string.</dd> + <dt>{{jsxref("String.prototype.includes()")}}</dt> + <dd> Determina se uma string deve ser encontrada dentro de outra string.</dd> + <dt>{{jsxref("String.prototype.endsWith()")}}</dt> + <dd>Determina se uma string termina com os caracteres de outra string.</dd> + <dt>{{jsxref("String.prototype.indexOf()")}}</dt> + <dd>Retorna o índice dentro do objeto String chamado da primeira ocorrência do valor especificado, ou -1 se não encontrado.</dd> + <dt>{{jsxref("String.prototype.lastIndexOf()")}}</dt> + <dd>Retorna o índice dentro do objeto String chamado da última ocorrência do valor especificado, ou -1 se não encontrado.</dd> + <dt>{{jsxref("String.prototype.localeCompare()")}}</dt> + <dd>Retorna um número indicando se uma string de referência vem antes ou depois ou é o mesmo que uma string dada em ordem de classificação.</dd> + <dt>{{jsxref("String.prototype.match()")}}</dt> + <dd>Usado para combinar uma expressão regular com uma string.</dd> + <dt>{{jsxref("String.prototype.normalize()")}}</dt> + <dd>Retorna o Formulário de Normalização Unicode do valor string chamado.</dd> + <dt>{{jsxref("String.prototype.padEnd()")}}</dt> + <dd>Empacota a string atual desde o final com uma string dada para criar uma nova string de um dado comprimento.</dd> + <dt>{{jsxref("String.prototype.padStart()")}}</dt> + <dd>Empacota a string atual desde o início com uma string dada para criar uma nova string de um dado comprimento.</dd> + <dt><s class="obsoleteElement">{{jsxref("String.prototype.quote()")}} {{obsolete_inline}}</s></dt> + <dd><s class="obsoleteElement">Envolve a cadeia entre aspas duplas ("" ").</s></dd> + <dt>{{jsxref("String.prototype.repeat()")}}</dt> + <dd>Retorna uma string consistindo elementos do objeto repetido pelas vezes definidas.</dd> + <dt>{{jsxref("String.prototype.replace()")}}</dt> + <dd>Usado para encontrar uma combinação entre uma expressão regular e uma string, e para substituir uma substring combinada com uma nova substring.</dd> + <dt>{{jsxref("String.prototype.search()")}}</dt> + <dd>Executa a procura por uma combinação entre uma expressão regular e uma string especificada.</dd> + <dt>{{jsxref("String.prototype.slice()")}}</dt> + <dd>Extrai uma seção de uma string e retorna uma nova string.</dd> + <dt>{{jsxref("String.prototype.split()")}}</dt> + <dd>Separa um objeto <a href="pt-BR/docs/Web/JavaScript/Reference/Global_Objects/String" title="The String global object is a constructor for strings, or a sequence of characters."><code>String</code></a> em um array de strings separando a string em substrings.</dd> + <dt>{{jsxref("String.prototype.startsWith()")}}</dt> + <dd>Determina se uma string começa com os caracteres de outra string.</dd> + <dt>{{jsxref("String.prototype.substr()")}}</dt> + <dd>Retorna os caracteres em uma string começando no local especificado através do número especificado de caracteres.</dd> + <dt>{{jsxref("String.prototype.substring()")}}</dt> + <dd>Retorna os caracteres em uma string entre dois índices na string.</dd> + <dt>{{jsxref("String.prototype.toLocaleLowerCase()")}}</dt> + <dd>Os caracteres dentro de uma string são convertidos para letras minúsculas enquanto respeita a localidade atual. Para a maioria das línguas, irá retornar o mesmo que <a href="pt-BR/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase" title="The toLowerCase() method returns the calling string value converted to lower case."><code>toLowerCase()</code></a>.</dd> + <dt>{{jsxref("String.prototype.toLocaleUpperCase()")}}</dt> + <dd>Os caracteres dentro de uma string são convertidas para letra maiúscula enquanto respeita a localidade atual. Para a maioria das línguas, irá retornar o mesmo que <a href="pt-BR/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase" title="The toUpperCase() method returns the calling string value converted to upper case."><code>toUpperCase()</code></a>.</dd> + <dt>{{jsxref("String.prototype.toLowerCase()")}}</dt> + <dd>Retorna o valor da string de chamada convertido em minúsculas.</dd> + <dt>{{jsxref("String.prototype.toSource()")}} {{non-standard_inline}}</dt> + <dd>Retorna um objeto literal representando o objeto especificado; Você pode usar esse valor para criar um novo objeto. Substitui o metodo:{{jsxref("Object.prototype.toSource()")}}</dd> + <dt>{{jsxref("String.prototype.toString()")}}</dt> + <dd>Retorna uma string que representa o objeto especificado. Substitui o metodo:{{jsxref("Object.prototype.toString()")}}</dd> + <dt>{{jsxref("String.prototype.toUpperCase()")}}</dt> + <dd>Retorna o valor da string de chamada convertido em maiúscula.</dd> + <dt>{{jsxref("String.prototype.trim()")}}</dt> + <dd>Retira o espaço em branco desde o início e o fim da string. Parte do padrão ECMAScript 5.</dd> + <dt>{{jsxref("String.prototype.trimLeft()")}} {{non-standard_inline}}</dt> + <dd>Retira o espaço em branco do lado esquerdo da string.</dd> + <dt>{{jsxref("String.prototype.trimRight()")}} {{non-standard_inline}}</dt> + <dd>Retira o espaço em branco do lado esquerdo da string.</dd> + <dt>{{jsxref("String.prototype.valueOf()")}}</dt> + <dd>Retorna o valor primitivo do objeto especificado. Substitui o metodo: {{jsxref("Object.prototype.valueOf()")}} </dd> + <dt>{{jsxref("String.prototype.@@iterator()", "String.prototype[@@iterator]()")}}</dt> + <dd>Retorna um novo objeto <code>Iterator </code>que repete sobre os pontos de código de um valor String, retornando cada ponto de código como um valor String.</dd> +</dl> + +<h3 id="Métodos_de_envoltório_HTML">Métodos de envoltório HTML</h3> + +<p>Esses métodos são de uso limitado, pois fornecem apenas um subconjunto das tags e atributos HTML disponíveis.</p> + +<dl> + <dt>{{jsxref("String.prototype.anchor()")}}</dt> + <dd>{{htmlattrxref("name", "a", "<a name=\"name\">")}} (alvo hipertexto)</dd> + <dt>{{jsxref("String.prototype.big()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("big")}}</dd> + <dt>{{jsxref("String.prototype.blink()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("blink")}}</dd> + <dt>{{jsxref("String.prototype.bold()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("b")}}</dd> + <dt>{{jsxref("String.prototype.fixed()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("tt")}}</dd> + <dt>{{jsxref("String.prototype.fontcolor()")}} {{deprecated_inline}}</dt> + <dd>{{htmlattrxref("color", "font", "<font color=\"color\">")}}</dd> + <dt>{{jsxref("String.prototype.fontsize()")}} {{deprecated_inline}}</dt> + <dd>{{htmlattrxref("size", "font", "<font size=\"size\">")}}</dd> + <dt>{{jsxref("String.prototype.italics()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("i")}}</dd> + <dt>{{jsxref("String.prototype.link()")}}</dt> + <dd>{{htmlattrxref("href", "a", "<a href=\"url\">")}} (link para URL)</dd> + <dt>{{jsxref("String.prototype.small()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("small")}}</dd> + <dt>{{jsxref("String.prototype.strike()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("strike")}}</dd> + <dt>{{jsxref("String.prototype.sub()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("sub")}}</dd> + <dt>{{jsxref("String.prototype.sup()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("sup")}}</dd> +</dl> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificacoes</th> + <th scope="col">Status</th> + <th scope="col">Comentarios</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definição inicial.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5.3.1', 'String.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.prototype', 'String.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype', 'String.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_entre_browsers">Compatibilidade entre browsers</h2> + +<p class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você quiser contribuir com os dados, verifique <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie-nos um pedido de participação.</p> + +<p>{{Compat("javascript.builtins.String.prototype")}}</p> + +<h2 id="Veja_também">Veja também </h2> + +<ul> + <li>{{jsxref("String")}}</li> + <li>{{jsxref("Function.prototype")}}</li> +</ul> diff --git a/files/pt-br/conflicting/web/javascript/reference/global_objects/weakmap/index.html b/files/pt-br/conflicting/web/javascript/reference/global_objects/weakmap/index.html new file mode 100644 index 0000000000..c3e0334a3b --- /dev/null +++ b/files/pt-br/conflicting/web/javascript/reference/global_objects/weakmap/index.html @@ -0,0 +1,118 @@ +--- +title: WeakMap.prototype +slug: Web/JavaScript/Reference/Global_Objects/WeakMap/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap +translation_of_original: Web/JavaScript/Reference/Global_Objects/WeakMap/prototype +--- +<div>{{JSRef("Global_Objects", "WeakMap")}}</div> + +<h2 id="Summary" name="Summary">Sumário</h2> + +<p>A propriedade <code><strong>WeakMap</strong></code><strong><code>.prototype</code></strong> representa o prototype fara o construtor {{jsxref("WeakMap")}}.</p> + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="Description" name="Description">Descrição</h2> + +<p>Instâncias {{jsxref("WeakMap")}} herdam de {{jsxref("WeakMap.prototype")}}. Você pode usar o objeto <code>prototype</code> do construtor para adicionar propriedades ou métodos para todas as instâncias <code>WeakMap</code>.</p> + +<h2 id="Propriedades">Propriedades</h2> + +<dl> + <dt><code>WeakMap.prototype.constructor</code></dt> + <dd>Retorna a função construtora das instâncias, neste caso a própria <code>{{jsxref("WeakMap")}}</code>.</dd> +</dl> + +<h2 id="Metodos">Metodos</h2> + +<dl> + <dt>{{jsxref("WeakMap.prototype.clear()")}}</dt> + <dd>Remove todos os pares chave/valor do objeto <code>WeakMap</code></dd> + <dt>{{jsxref("WeakMap.delete", "WeakMap.prototype.delete(key)")}}</dt> + <dd>Remove qualquer valor associado à <code style="font-style: normal; line-height: 1.5;">key</code><span style="line-height: 1.5;">. </span><code style="font-style: normal; line-height: 1.5;">WeakMap.prototype.has(key)</code> e retorna <code style="font-style: normal; line-height: 1.5;">false</code> após.</dd> + <dt>{{jsxref("WeakMap.get", "WeakMap.prototype.get(key)")}}</dt> + <dd>Retorna o valor associado a <code>key</code>, ou <code>undefined</code> se nenhum existir.</dd> + <dt>{{jsxref("WeakMap.has", "WeakMap.prototype.has(key)")}}</dt> + <dd>Retorna um Boolean verificando se há algum valor associado a <code>key</code> no objeto <code>WeakMap</code> ou não.</dd> + <dt>{{jsxref("WeakMap.set", "WeakMap.prototype.set(key, value)")}}</dt> + <dd>Configura um valor para <code>key</code> no objeto <code>WeakMap</code>. Retorna <code>undefined</code>.</dd> +</dl> + +<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('ES6', '#sec-weakmap.prototype', 'WeakMap.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Especificação inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_browsers">Compatibilidade de browsers </h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Chrome</th> + <th>Firefox (SpiderMonkey)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("6.0")}}</td> + <td>11</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Android</th> + <th>Firefox Mobile (SpiderMonkey)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("6.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Notas_para_o_Chrome">Notas para o Chrome</h3> + +<ul> + <li>O recurso é ativado por preferência. Em <span style="font-family: 'Courier New','Andale Mono',monospace;">chrome://flags </span>ative "Enable Experimental JavaScript".</li> +</ul> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{jsxref("Map.prototype")}}</li> +</ul> diff --git a/files/pt-br/conflicting/web/javascript/reference/operators/index.html b/files/pt-br/conflicting/web/javascript/reference/operators/index.html new file mode 100644 index 0000000000..4ca87eaddd --- /dev/null +++ b/files/pt-br/conflicting/web/javascript/reference/operators/index.html @@ -0,0 +1,329 @@ +--- +title: Arithmetic operators +slug: Web/JavaScript/Reference/Operators/Arithmetic_Operators +tags: + - JavaScript + - Operadores +translation_of: Web/JavaScript/Reference/Operators +translation_of_original: Web/JavaScript/Reference/Operators/Arithmetic_Operators +--- +<div>{{jsSidebar("Operadores")}}</div> + +<p><strong>Operadores aritméticos</strong> tem valores numéricos (literais ou variáveis) como seus operadores e retornam um valor numérico único. Os operadores aritméticos padrões são adição (+), subtração (-), multiplicação (*), e divisão (/).</p> + +<h2 id="Adição_()"><a name="Addition">Adição (+)</a></h2> + +<p>O operador de adição produz a soma dos operadores numéricos ou a concatenação de strings.</p> + +<h3 id="Sintaxe">Sintaxe</h3> + +<pre class="syntaxbox"><strong>Operador:</strong> x + y +</pre> + +<h3 id="Exemplos">Exemplos</h3> + +<pre class="brush: js">// Número + Número -> adição +1 + 2 // 3 + +// Booleano + Número -> adição +true + 1 // 2 + +// Booleano + Booleano -> adição +false + false // 0 + +// Número + String -> concatenação +5 + "foo" // "5foo" + +// String + Booleano -> concatenação +"foo" + false // "foofalse" + +// String + String -> concatenação +"foo" + "bar" // "foobar" +</pre> + +<h2 id="Subtração_(-)"><a name="Subtraction">Subtração (-)</a></h2> + +<p>O operador de subtração subtrai os dois operandos, produzindo sua diferença.</p> + +<h3 id="Sintaxe_2">Sintaxe</h3> + +<pre class="syntaxbox"><strong>Operador:</strong> x - y +</pre> + +<h3 id="Exemplos_2">Exemplos</h3> + +<pre class="brush: js">5 - 3 // 2 +3 - 5 // -2 +"foo" - 3 // NaN</pre> + +<h2 id="Divisão_()"><a name="Division">Divisão (/)</a></h2> + +<p>O operador de divisão produz o quociente de seus operandos onde o operando da esquerda é o dividendo e o da direita é o divisor.</p> + +<h3 id="Sintaxe_3">Sintaxe</h3> + +<pre class="syntaxbox"><strong>Operador:</strong> x / y +</pre> + +<h3 id="Exemplos_3">Exemplos</h3> + +<pre class="brush: js">1 / 2 // retorna 0.5 em JavaScript +1 / 2 // retorna 0 em Java +// (nenhum dos números é explicitamente um número de ponto flutuante) + +1.0 / 2.0 // retorna 0.5 em JavaScript e Java + +2.0 / 0 // retorna Infinity em JavaScript +2.0 / 0.0 // retorna Infinity também +2.0 / -0.0 // retorna -Infinity em JavaScript</pre> + +<h2 id="Multiplicação_(*)"><a name="Multiplication">Multiplicação (*)</a></h2> + +<p>O operador de multiplicação produz o produto dos operandos.</p> + +<h3 id="Sintaxe_4">Sintaxe</h3> + +<pre class="syntaxbox"><strong>Operador:</strong> x * y +</pre> + +<h3 id="Exemplos_4">Exemplos</h3> + +<pre class="brush: js">2 * 2 // 4 +-2 * 2 // -4 +Infinity * 0 // NaN +Infinity * Infinity // Infinity +"foo" * 2 // NaN +</pre> + +<h2 id="Módulo_()"><a name="Remainder">Módulo (%)</a></h2> + +<p>O operador de módulo retorna o primeiro operando módulo o segundo, isto é, var1 módulo var2, na sentença anterior, onde var1 e var 2 são variáveis. A função módulo é o resto inteiro da divisão de var1 por var2. <a href="http://wiki.ecmascript.org/doku.php?id=strawman:modulo_operator" title="http://wiki.ecmascript.org/doku.php?id=strawman:modulo_operator">Existe uma proposta de ter um operador real de módulo em uma versão futura do ECMAScript.</a></p> + +<h3 id="Sintaxe_5">Sintaxe</h3> + +<pre class="syntaxbox"><strong>Operador:</strong> var1 % var2 +</pre> + +<h3 id="Examples">Examples</h3> + +<pre class="brush: js">12 % 5 // 2 +-1 % 2 // -1 +NaN % 2 // NaN +</pre> + +<h2 id="Exponenciação_(**)"><a id="Exponenciação" name="Exponenciação">Exponenciação (**)</a></h2> + +<p>O operador de exponenciação retorna o resultado do primeiro operando elevado ao segundo operando. É o mesmo que <code>var1</code><sup><code>var2</code></sup>, onde <code>var1</code> e <code>var2</code> são variáveis. O operador de exponenciação é associativo à direita, ou seja, <code>a ** b ** c</code> é igual a <code>a ** (b ** c)</code>.</p> + +<h3 id="Sintaxe_6">Sintaxe</h3> + +<pre><strong>Operador:</strong> var1 ** var2 +</pre> + +<h3 id="Notas">Notas</h3> + +<p>Em várias linguagens como PHP e Python e outras que tem o operador de exponenciação (**), a exponenciação tem prioridade do que operações unárias, como + e -, mas tem algumas exceções. Por exemplo, no Bash o operador ** é definido por ter menos prioridade do que operadores unários. No JavaScript, é impossível escrever uma expressão de exponenciação ambígua, i.e. você não pode colocar um operador unário (<code>+/-/~/!/delete/void/typeof</code>) imediatamente antes do número base.</p> + +<pre>-2 ** 2; +// 4 no Bash, -4 em outras linguagens. +// Isso é inválido no JavaScript, pois a operação é ambígua. + + +-(2 ** 2); +// -4 no JavaScript e a intenção do autor não é ambígua. +</pre> + +<h3 id="Exemplos_5">Exemplos</h3> + +<pre>2 ** 3 // 8 +3 ** 2 // 9 +3 ** 2.5 // 15.588457268119896 +10 ** -1 // 0.1 +NaN ** 2 // NaN + +2 ** 3 ** 2 // 512 +2 ** (3 ** 2) // 512 +(2 ** 3) ** 2 // 64 +</pre> + +<p>Para inverter o sinal do resultado de uma expressão de exponenciação:</p> + +<pre>-(2 ** 2) // -4 +</pre> + +<p>Para forçar a base de uma expressão de exponenciação para ser um número negativo:</p> + +<pre>(-2) ** 2 // 4 +</pre> + +<div class="note"> +<p><strong>Nota:</strong> JavaScript também tem <a href="/pt-BR/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_XOR">um operador de lógica binária ^ (XOR)</a>. <code>**</code> e <code>^</code> são diferentes (por exemplo : <code>2 ** 3 === 8</code> enquanto <code>2 ^ 3 === 1</code>.)</p> +</div> + +<h2 id="Incremento_()"><a name="Increment">Incremento (++)</a></h2> + +<p>O operador de incremento incrementa (adiciona um a) seu operando e retorna um valor;</p> + +<ul> + <li>Se usado na forma posfixa, com o operador depois do operando (por exemplo, x++), então ele retorna o valor antes de incrementá-lo.</li> + <li>Se usado na forma prefixa, com o operador antes do operando (por exemplo, ++x), então ele retorna o valor depois de incrementá-lo.</li> +</ul> + +<h3 id="Sintaxe_7">Sintaxe</h3> + +<pre class="syntaxbox"><strong>Operador:</strong> x++ or ++x +</pre> + +<h3 id="Exemplos_6">Exemplos</h3> + +<pre class="brush: js">// Posfixo +var x = 3; +y = x++; // y = 3, x = 4 + +// Prefixo +var a = 2; +b = ++a; // a = 3, b = 3 +</pre> + +<h2 id="Decremento_(--)"><a name="Decrement">Decremento (--)</a></h2> + +<p>O operador de decremento decrementa (subtrai um de) seu operando e retorna um valor.</p> + +<ul> + <li>Se usado na forma posfixa (por exemplo, x--), então ele retorna o valor antes de decrementá-lo.</li> + <li>Se usado na forma prefixa (por exemplo, --x), então ele retorna o valor depois de decrementá-lo.</li> +</ul> + +<h3 id="Sintaxe_8">Sintaxe</h3> + +<pre class="syntaxbox"><strong>Operador:</strong> x-- or --x +</pre> + +<h3 id="Exemplos_7">Exemplos</h3> + +<pre class="brush: js">// Posfixo +var x = 3; +y = x--; // y = 3, x = 2 + +// Prefixo +var a = 2; +b = --a; // a = 1, b = 1 +</pre> + +<h2 id="Negação_Unária_(-)"><a name="Unary_negation">Negação Unária (-)</a></h2> + +<p>O operador de negação unária precede seu operando e o nega.</p> + +<h3 id="Sintaxe_9">Sintaxe</h3> + +<pre class="syntaxbox"><strong>Operador:</strong> -x +</pre> + +<h3 id="Exemplos_8">Exemplos</h3> + +<pre class="brush: js">var x = 3; +y = -x; // y = -3, x = 3 +</pre> + +<h2 id="Soma_Unária_()"><a name="Unary_plus">Soma Unária</a> (+)</h2> + +<p>O operador de soma unária precede seu operando e calcula para seu operando mas tenta convertê-lo para um número, caso ainda não o seja. Apesar da negação unária (-) também poder converter não-números, a soma unária é a forma mais rápida e a forma preferida de converter alguma coisa em um número, porque ele não realiza nenhuma outra operação no número. Ele pode converter strings que representam inteiros e ponto flutuante, bem como os valores de não-string <code>true</code>, <code>false</code>, e <code>null</code>. Inteiros em formato decimal e hexadecimal ("0x"-prefixado) são suportados. Números negativos são suportados (não os hexadecimais). Caso não possa analisar um determinado valor, o operador retornará <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN">NaN</a>.</p> + +<h3 id="Sintaxe_10">Sintaxe</h3> + +<pre class="syntaxbox"><strong>Operador:</strong> +x +</pre> + +<h3 id="Exemplos_9">Exemplos</h3> + +<pre class="brush: js">+3 // 3 ++"3" // 3 ++true // 1 ++false // 0 ++null // 0 +</pre> + +<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>ECMAScript 1ª Edição.</td> + <td>Padrão</td> + <td>Definição inicial.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.3')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definido em várias seções da especificação: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.6">Operadores aditivos</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.5">Operadores Multiplicativos</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.3">Expressões Posfixas</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4">Operadores Unários</a>.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-postfix-expressions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definido em várias seções da especificação: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.6">Operadores aditivos</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.5">Operadores Multiplicativos</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.3">Expressões Posfixas</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4">Operadores Unários</a>.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_com_Navegadores">Compatibilidade 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>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</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>Chrome for 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}}</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><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">Operatores de atribuição</a></li> +</ul> diff --git a/files/pt-br/conflicting/web/javascript/reference/operators/spread_syntax/index.html b/files/pt-br/conflicting/web/javascript/reference/operators/spread_syntax/index.html new file mode 100644 index 0000000000..a877d131bc --- /dev/null +++ b/files/pt-br/conflicting/web/javascript/reference/operators/spread_syntax/index.html @@ -0,0 +1,201 @@ +--- +title: Spread operator +slug: Web/JavaScript/Reference/Operators/Spread_operator +tags: + - JavaScript + - Operador +translation_of: Web/JavaScript/Reference/Operators/Spread_syntax +translation_of_original: Web/JavaScript/Reference/Operators/Spread_operator +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>A sintaxe de propagação (<strong>Spread</strong>) permite que um objeto iterável, como um array ou string, seja expandida em locais onde zero ou mais argumentos (para chamadas de função) ou elementos (para literais de array) sejam esperados ou uma expressão de objeto seja expandida em locais onde zero ou mais pares de chave-valor (para literais de objeto) são esperados.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<p>Para chamadas de função:</p> + +<pre class="brush: js">minhaFuncao(...objIteravel); +</pre> + +<p>Para array literais:</p> + +<pre class="brush: js">[...objIteravel, 4, 5, 6]</pre> + +<p>Desestruturação:</p> + +<pre class="brush: js">[a, b, ...objIteravel] = [1, 2, 3, 4, 5];</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Uma_melhor_aplicação">Uma melhor aplicação</h3> + +<p><strong>Exemplo:</strong> é comum usar {{jsxref( "Function.prototype.apply")}} em casos onde você quer usar um array como argumentos em uma função.</p> + +<pre class="brush: js">function minhaFuncao(x, y, z) { } +var args = [0, 1, 2]; +minhaFuncao.apply(null, args);</pre> + +<p>Com o spread do ES2015 você pode agora escrever isso acima como:</p> + +<pre class="brush: js">function minhaFuncao(x, y, z) { } +var args = [0, 1, 2]; +minhaFuncao(...args);</pre> + +<p>Qualquer argumento na lista de argumento pode usar a sintaxe spread e pode ser usado várias vezes.</p> + +<pre class="brush: js">function minhaFuncao(v, w, x, y, z) { } +var args = [0, 1]; +minhaFuncao(-1, ...args, 2, ...[3]);</pre> + +<h3 id="Um_literal_array_mais_poderoso">Um literal array mais poderoso</h3> + +<p><strong>Exemplo:</strong> Hoje se você tiver um array e quer criar um novo array com esse existente fazendo parte dele, a sintaxe literal do array não é mais suficiente e você deve voltar para o código imperativo, usando uma combinação de <code>push</code>, <code>splice</code>, <code>concat</code>, etc. Com a sintaxe spread isso se torna muito mais sucinto:</p> + +<pre class="brush: js">var partes = ['ombros', 'joelhos']; +var letra = ['cabeca', ...partes, 'e', 'dedos']; // <span class="objectBox objectBox-array"><a class="objectLink "><span class="arrayLeftBracket">[</span></a><span class="objectBox objectBox-string">"</span></span>cabeca<span class="objectBox objectBox-array"><span class="objectBox objectBox-string">"</span><span class="arrayComma">, </span><span class="objectBox objectBox-string">"</span></span>ombros<span class="objectBox objectBox-array"><span class="objectBox objectBox-string">"</span><span class="arrayComma">, </span><span class="objectBox objectBox-string">"</span></span>joelhos<span class="objectBox objectBox-array"><span class="objectBox objectBox-string">"</span><span class="arrayComma">, </span><span class="objectBox objectBox-string">"e"</span><span class="arrayComma">, </span><span class="objectBox objectBox-string">"dedos"</span></span>] +</pre> + +<p>Assim como em spread para listas de argumentos <code>...</code> pode ser usado em qualquer lugar no literal do array e pode ser usado várias vezes.</p> + +<h3 id="Apply_para_new">Apply para new</h3> + +<p><strong>Exemplo:</strong> No ES5 não é possível usar <code>new</code> com <code>apply.</code> (Em ES5 termos, <code>apply</code> faz uma <code>[[Call]]</code> e nao um <code>[[Construct]].</code>) Em ES2015 a sintaxe spread naturalmente suporta isso:</p> + +<pre class="brush: js">var camposData = lerCamposData(bancoDeDados); +var d = new Date(...camposData);</pre> + +<h3 id="Um_push_melhor">Um push melhor</h3> + +<p><strong>Exemplo:</strong> {{jsxref("Global_Objects/Array/push", "push")}} é frequentemente usado para adicionar um array no final de um array existente. No ES5 isso é geralmente feito assim:</p> + +<pre class="brush: js">var arr1 = [0, 1, 2]; +var arr2 = [3, 4, 5]; +// Acrescenta todos itens do arr2 ao arr1 +Array.prototype.push.apply(arr1, arr2);</pre> + +<p>No ES2015 com spread isso se torna:</p> + +<pre class="brush: js">var arr1 = [0, 1, 2]; +var arr2 = [3, 4, 5]; +arr1.push(...arr2);</pre> + +<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('ES2015', '#sec-array-initializer')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definido em várias seções da especificação: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-array-initializer">Inicializador do array</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-argument-lists">Listas de argumento</a></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array-initializer')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_com_browser">Compatibilidade com browser</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>Operação spread em array literais</td> + <td>{{CompatChrome("46")}}</td> + <td>{{ CompatGeckoDesktop("16") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>7.1</td> + </tr> + <tr> + <td>Operação spread em chamadas de função</td> + <td>{{CompatChrome("46")}}</td> + <td>{{ CompatGeckoDesktop("27") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>7.1</td> + </tr> + <tr> + <td>Operação spread em desestruturação</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoDesktop("34") }}</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>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Operação spread em array literais</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome("46")}}</td> + <td>{{ CompatGeckoMobile("16") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + <td>{{CompatChrome("46")}}</td> + </tr> + <tr> + <td>Operação spread em chamadas de função</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome("46")}}</td> + <td>{{ CompatGeckoMobile("27") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + <td>{{CompatChrome("46")}}</td> + </tr> + <tr> + <td>Operação spread em desestruturação</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoDesktop("34") }}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/rest_parameters">Parâmetros rest</a></li> +</ul> diff --git a/files/pt-br/conflicting/web/javascript/reference/operators_0d2e4b8154642b5a9dbd76a2a48cf96a/index.html b/files/pt-br/conflicting/web/javascript/reference/operators_0d2e4b8154642b5a9dbd76a2a48cf96a/index.html new file mode 100644 index 0000000000..d5e946a438 --- /dev/null +++ b/files/pt-br/conflicting/web/javascript/reference/operators_0d2e4b8154642b5a9dbd76a2a48cf96a/index.html @@ -0,0 +1,251 @@ +--- +title: Operadores de comparação +slug: Web/JavaScript/Reference/Operators/Operadores_de_comparação +tags: + - Comparando String + - Comparação + - Igualdade + - Operadores + - Relacionais +translation_of: Web/JavaScript/Reference/Operators +translation_of_original: Web/JavaScript/Reference/Operators/Comparison_Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>O JavaScript possui comparações estritas e conversão de tipos. Uma comparação estrita (e.g., <code>===</code>) somente é verdade se os operandos forem do mesmo tipo e de conteúdo correspondente. A comparação abstrata mais comumente utilizada (e.g. <code>==</code>) converte os operandos no mesmo tipo antes da comparação. Para comparações abstratas relacionais (e.g., <code><=</code>), os operandos são primeiro convertidos em primitivos, depois para o mesmo tipo, depois comparados.</p> + +<p>Strings são comparadas baseadas na ordenação lexicografica padrão, usando valores Unicode.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-comparisonoperators.html")}}</div> + +<p class="hidden">Os fontes para este exemplo interativo estão em um repositório no GitHub. Se você gostaria de contribuir com projetos de exemplos interativos, por favor clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e envie para nós um pull request.</p> + +<p>Características de comparação:</p> + +<ul> + <li>Duas strings são estritamente iguals quando elas possuem a mesma sequência de caracteres, o mesmo tamanho, Duas string são estritamente iguals quando elas possuem a mesma sequência de caracteres, o mesmo tamanho, e os mesmos caracteres em posições correspondentes.</li> + <li>Dois números são estritamente iguais quando eles são numericamente iguais (tem o mesmo valor numérico). <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="NaN">NaN</a> não é igual a nada, incluindo NaN. Zeros positivos e negativos são iguals entre si.</li> + <li>Dois operadores Boleanos são estritamente iguais se ambos são <code>true</code> ou ambos são <code>false</code>.</li> + <li>Dois objetos distintos nunca são iguais para comparações estritas ou abstratas.</li> + <li>Uma expressão comparando Objetos somente é verdadeira se os operandos referenciarem o mesmo Objeto.</li> + <li>Os tipo Null e Undefined são estritamente iguais entre eles mesmos e abstratamente iguais entre si.</li> +</ul> + +<h2 id="Operadores_de_Igualdade">Operadores de Igualdade </h2> + +<h3 id="Igualdade"><a name="Equality">Igualdade (==)</a></h3> + +<p>O operador de igualdade converte o operando se ele <strong>não for do mesmo tipo</strong>, então aplica a comparação estrita. Se <strong>ambos os operandos são objetos</strong>, então o JavaScript compara referencias internas que são iguais quando os operandos se referem ao mesmo objeto em memória.</p> + +<h4 id="Sintaxe">Sintaxe</h4> + +<pre class="syntaxbox notranslate">x == y +</pre> + +<h4 id="Exemplos">Exemplos</h4> + +<pre class="brush: js notranslate">1 == 1 // verdade +'1' == 1 // verdade +1 == '1' // verdade +0 == false // verdade +0 == null // falso +var object1 = {'key': 'value'}, object2 = {'key': 'value'}; +object1 == object2 // falso +0 == undefined // falso +null == undefined // verdade +</pre> + +<h3 id="Desigualdade_!"><a name="Inequality">Desigualdade (!=)</a></h3> + +<p>O operador de desigualdade retorna true (verdade) se os operandos não são iguais. Se os dois operandos <strong>não são do mesmo tipo</strong>, o JavaScript tenta converter os operandos para o tipo apropriado para a comparação. Se <strong>ambos os operandos são objetos</strong>, então o JavaScript compara referências internas que não são iguais quando os operandos se referem a objetos diferentes na memória.</p> + +<h4 id="Sintaxe_2">Sintaxe</h4> + +<pre class="syntaxbox notranslate">x != y</pre> + +<h4 id="Exemplos_2">Exemplos</h4> + +<pre class="brush: js notranslate">1 != 2 // verdade +1 != '1' // falso +1 != "1" // falso +1 != true // falso +0 != false // falso +</pre> + +<h3 id="Identidade_igualdade_estrita"><a name="Identity">Identidade / igualdade estrita (===)</a></h3> + +<p>O operador de identidade retorna true (verdade) se os operandos são estritamente iguais (veja acima) <strong>sem conversão de tipo</strong>. </p> + +<h4 id="Sintaxe_3">Sintaxe</h4> + +<pre class="syntaxbox notranslate">x === y</pre> + +<h4 id="Exemplos_3">Exemplos</h4> + +<pre class="brush: js notranslate">3 === 3 // verdade +3 === '3' // falso +var object1 = {'key': 'value'}, object2 = {'key': 'value'}; +object1 === object2 //f also</pre> + +<h3 id="Non-identity_desigualdade_estrita_!"><a name="Nonidentity">Non-identity / desigualdade estrita (!==)</a></h3> + +<p>O operador desigualdade estrita (Non-identity) retorna verdadeiro se os operandos <strong>não são iguais e / ou não são do mesmo tipo</strong>.</p> + +<h4 id="Sintaxe_4">Sintaxe</h4> + +<pre class="syntaxbox notranslate">x !== y</pre> + +<h4 id="Exemplos_4">Exemplos</h4> + +<pre class="brush: js notranslate">3 !== '3' // verdade +4 !== 3 // verdade +</pre> + +<h2 id="Operadores_relacionais">Operadores relacionais</h2> + +<p>Cada um desses operadores chamará a função valueOf () em cada operando antes que uma comparação seja feita.</p> + +<h3 id="Operador_Maior_>"><a name="Greater_than_operator">Operador Maior (>)</a></h3> + +<p>O operador de Maior retorna true se o operando da esquerda for maior que o operando da direita.</p> + +<h4 id="Sintaxe_5">Sintaxe</h4> + +<pre class="syntaxbox notranslate">x > y</pre> + +<h4 id="Exemplos_5">Exemplos</h4> + +<pre class="brush: js notranslate">4 > 3 // verdade +</pre> + +<h3 id="Operador_maior_ou_igual_>"><a name="Greater_than_or_equal_operator">Operador maior ou igual (>=)</a></h3> + +<p>O operador maior ou igual retorna true se o operando da esquerda for maior ou igual ao operando da direita.</p> + +<h4 id="Sintaxe_6">Sintaxe</h4> + +<pre class="syntaxbox notranslate"> x >= y</pre> + +<h4 id="Exemplos_6">Exemplos</h4> + +<pre class="brush: js notranslate">4 >= 3 // verdade +3 >= 3 // verdade +</pre> + +<h3 id="Operador_Menor_<"><a name="Less_than_operator">Operador Menor (<)</a></h3> + +<p>O operador menor retorna true (verdadeiro) se o operando da esquerda for menor que o operando da direita.</p> + +<h4 id="Sintaxe_7">Sintaxe</h4> + +<pre class="syntaxbox notranslate"> x < y</pre> + +<h4 id="Exemplos_7">Exemplos</h4> + +<pre class="brush: js notranslate">3 < 4 // verdade +</pre> + +<h3 id="Operador_menor_ou_igual_<"><a id="Less_than_or_equal_operator" name="Less_than_or_equal_operator">Operador menor ou igual (<=)</a></h3> + +<p>O operador menor ou igual retorna true (verdadeiro) se o operando da esquerda for menor ou igual ao operando da direita.</p> + +<h4 id="Sintaxe_8">Sintaxe</h4> + +<pre class="syntaxbox notranslate"> x <= y</pre> + +<h4 id="Exemplos_8">Exemplos</h4> + +<pre class="brush: js notranslate">3 <= 4 // verdade +</pre> + +<h2 id="Usando_Operadores_de_Igualdade">Usando Operadores de Igualdade</h2> + +<p>Os operadores de igualdade padrão (== e! =) Usam o <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.3">Algoritmo de Comparação de Igualdade Abstrata</a> </p> + +<p>para comparar dois operandos. Se os operandos forem de tipos diferentes, ele tentará convertê-los para o mesmo tipo antes de fazer a comparação. Por exemplo, na expressão 5 == '5', a sequência à direita é convertida em {{jsxref ("Number" )}} antes da comparação ser feita.</p> + +<p>Os operadores de igualdade estrita (=== e! ==) usam o <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.6">Algoritmo de comparação estrita de igualdade</a> e se destinam a executar comparações de igualdade em operandos do mesmo tipo. Se os operandos são de tipos diferentes, o resultado é sempre falso, então 5! == '5'.<br> + <br> + Use operadores de igualdade estrita se os operandos precisarem ser de um tipo específico e também de valor ou se o tipo exato dos operandos for importante. Caso contrário, use os operadores de igualdade padrão, que permitem comparar a identidade de dois operandos, mesmo que não sejam do mesmo tipo.<br> + <br> + Quando a conversão de tipos está envolvida na comparação (por exemplo, comparação não estrita), o JavaScript converte os tipos {{jsxref ("String")}}, {{jsxref ("Number")}}, {{jsxref ("Booleano" )}} ou {{jsxref ("Object")}}) operandos da seguinte forma:</p> + +<ul> + <li>Ao comparar um número e uma string, a string é convertida em um valor numérico. JavaScript tenta converter o literal numérico de string em um valor de tipo Number. Primeiro, um valor matemático é derivado do literal numérico da string. Em seguida, esse valor é arredondado para o valor de tipo de número mais próximo.</li> + <li>Se um dos operandos for booleano, o operando booleano é convertido em 1 se for verdadeiro e +0 se for falso.</li> + <li>Se um objeto é comparado com um número ou string, o JavaScript tenta retornar o valor padrão para o objeto. Os operadores tentam converter o objeto em um valor primitivo, um valor String ou Number, usando os métodos valueOf e toString dos objetos. Se essa tentativa de converter o objeto falhar, será gerado um erro de tempo de execução.</li> + <li>Observe que um objeto é convertido em primitivo se, e somente se, seu comparando for um primitivo. Se os dois operandos forem objetos, eles serão comparados como objetos, e o teste de igualdade será verdadeiro apenas se ambos fizerem referência ao mesmo objeto.</li> +</ul> + +<div class="note"><strong>Nota:</strong> Os objetos String são do Tipo Objeto, não String! Os objetos de string raramente são usados, portanto, os seguintes resultados podem ser surpreendentes:</div> + +<pre class="brush:js notranslate">// true, pois ambos os operandos são do tipo String (ou seja, primitivos de string): +'foo' === 'foo' + +var a = new String('foo'); +var b = new String('foo'); + +// falso (false) pois a e b, embora do tipo "Objeto", são instâncias diferentes +a == b + +// falso (false) pois a e b, embora do tipo "Objeto", são instâncias diferentes +a === b + +// verdadeiro (true) pois o objeto a e 'foo' (String) são de tipos diferentes e, o Objeto (a) +// é convertido para String ('foo') antes da comparação +a == 'foo'</pre> + +<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('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definição Inicial. Implementado em JavaScript 1.0</td> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Adicionandos os operadores <code>===</code> e <code>!==</code> . Implementado em JavaScript 1.3</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.8')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definidos em várias seções das especificações: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.8">Operadores Relacionais </a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9">Operadores de Igualdade</a></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-relational-operators')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definidos em várias seções das especificações: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.8">Operadores Relacionais </a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9">Operadores de Igualdade</a></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-relational-operators')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Definidos em várias seções das especificações: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.8">Operadores Relacionais </a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9">Operadores de Igualdade</a></td> + </tr> + </tbody> +</table> + +<h2 id="Compatilidade_entre_navegadores">Compatilidade entre navegadores</h2> + +<div class="hidden">A tabela de compatibilidade desta página é gerada a partir de dados estruturados. Se você deseja contribuir com os dados, confira <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie-nos uma solicitação de recebimento.</div> + +<p>{{Compat("javascript.operators.comparison")}}</p> + +<h2 id="Consulte_também">Consulte também</h2> + +<ul> + <li>{{jsxref("Object.is()")}}</li> + <li>{{jsxref("Math.sign()")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness">Comparações de igualdade e similaridades</a></li> +</ul> + +<div id="gtx-trans" style="position: absolute; left: 32px; top: 2185.4px;"> +<div class="gtx-trans-icon"></div> +</div> diff --git a/files/pt-br/conflicting/web/javascript/reference/operators_7c8eb9475d97a4a734c5991857698560/index.html b/files/pt-br/conflicting/web/javascript/reference/operators_7c8eb9475d97a4a734c5991857698560/index.html new file mode 100644 index 0000000000..b8b2e654c4 --- /dev/null +++ b/files/pt-br/conflicting/web/javascript/reference/operators_7c8eb9475d97a4a734c5991857698560/index.html @@ -0,0 +1,559 @@ +--- +title: Bitwise operators +slug: Web/JavaScript/Reference/Operators/Bitwise_Operators +translation_of: Web/JavaScript/Reference/Operators +translation_of_original: Web/JavaScript/Reference/Operators/Bitwise_Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<div></div> + +<div>Operadores bit-a-bit são são operadores tratados como sequência de 32 bits ( zeros e uns ), preferencialmente como decimal, hexadecimal, ou números octais. Por exemplo, o número decimal 9 tinha como representação binária de 1001. Operadores bit-a-bit realizam as operações em tais representações binárias, mas retornam valores numéricos no padrão Javascript.</div> + +<div>{{EmbedInteractiveExample("pages/js/expressions-bitwiseoperators.html")}}</div> + +<p class="hidden">O código para este interactivo exemplo está armazenado em um repositório GitHub . Se você quiser contribuir para o projeto exemplo interativo, por favor clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e mande-nos um pull request.</p> + +<p>A seguinte tabela resume os Operadores bit-a-bit:</p> + +<table class="standard-table"> + <tbody> + <tr> + <th>Operador</th> + <th>Uso</th> + <th>Descrição</th> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#(Bitwise_AND)">Bitwise AND</a></td> + <td><code>a & b</code></td> + <td>Retorna <code>1</code> em cada posição de bit para à qual o bit correspondente de ambos eram <code>1</code>s.</td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#(Bitwise_OR)">Bitwise OR</a></td> + <td><code>a | b</code></td> + <td> + <p>Retorna 1 para cada posição de bit para à qual o correspondente de um ou ambos eram <code>1</code>s.</p> + </td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#(Bitwise_XOR)">Bitwise XOR</a></td> + <td><code>a ^ b</code></td> + <td>Retorna 1 para cada posição de bit para à qual o bit correspondente de um mas não ambos eram <code>1</code>s.</td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#(Bitwise_NOT)">Bitwise NOT</a></td> + <td><code>~ a</code></td> + <td>Inverte os bits de seus operandos.</td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#%3C%3C_(Left_shift)">Left shift</a></td> + <td><code>a << b</code></td> + <td>Jogam <code>a</code> em representação binária <code>b</code> (< 32) bits à esquerda, mudando de zeros à diretia.</td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#%3E%3E_(Sign-propagating_right_shift)">Sign-propagating right shift</a></td> + <td><code>a >> b</code></td> + <td>Jogam <code>a</code> em representação binária <code>b</code> (< 32) bits à direita, descartando bits que foram tornados off.</td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#%3E%3E%3E_(Zero-fill_right_shift)">Zero-fill right shift</a></td> + <td><code>a >>> b</code> </td> + <td>Jogam <code>a</code> em representação binária <code>b</code> (< 32) bits à direita, descartando bits que foram tornados off, e jogando <code>0</code>s para à esquerda.</td> + </tr> + </tbody> +</table> + +<h2 id="Inteiros_assinados_em_32-bit">Inteiros assinados em 32-bit</h2> + +<p>Os operandos de todos os operadores bit-a-bit são assinados como inteiros de 32-bit em duas formas complementares. Duas formas complementares significa que uma negativa contrapartida (e.g. 5 vs. -5) são todos os bits daqueles números invertidos (bit-a-bit NOT de um número, a.k.a. complementos de um número) mais um. Por example, os seguintes encodes inteiros são 314:</p> + +<pre class="brush: js">00000000000000000000000100111010 +</pre> + +<p>Os seguintes encodes <code>~314</code>, i.e. são os únicos complementos de <code>314</code>:</p> + +<pre class="brush: js">11111111111111111111111011000101 +</pre> + +<p>Finalmente, os seguintes encodes <code>-314,</code> i.e. são dois complementos de <code>314</code>:</p> + +<pre class="brush: js">11111111111111111111111011000110 +</pre> + +<p>As duas garantias complementares daquele bit mais à esquerda que é zero quando o número é positivo e 1 quando o número é negativo. Aliás, isto é chamado de <em>sign bit </em>ou <em>bit assinalado.</em></p> + +<p>O número 0 é o inteiro composto completamente de 0 bits.</p> + +<pre class="brush: js">0 (base 10) = 00000000000000000000000000000000 (base 2) +</pre> + +<p>O número <code>-1</code> é o inteiro que é composto completamente de 1 bits.</p> + +<pre class="brush: js">-1 (base 10) = 11111111111111111111111111111111 (base 2) +</pre> + +<p>O número <code>-2147483648</code> (representação hexadecimal: <code>-0x80000000</code>) é o inteiro completamente composto de 0 bits exceto o primeiro (left-most) único.</p> + +<pre class="brush: js">-2147483648 (base 10) = 10000000000000000000000000000000 (base 2) +</pre> + +<p>O número <code>2147483647</code> (representação hexadecimal: <code>0x7fffffff</code>) é o inteiro composto completamente por bits 1, exceto pelo primeiro (o mais à esquerda).</p> + +<pre class="brush: js">2147483647 (base 10) = 01111111111111111111111111111111 (base 2) +</pre> + +<p>Os números <code>-2147483648</code> e <code>2147483647</code> são, respectivamente, o minimo e o máximo inteiro representáveis atráves de um número de 32 bits assinados.</p> + +<h2 id="Operadores_lógico_bit-abit">Operadores lógico bit-abit</h2> + +<p>Conceitualmente, os operadores lógicos bit-abit funcionam da seguinte forma:</p> + +<ul> + <li>Os operandos são convertidos para inteiros de 32 bits e expressados em uma série de bits (zeros e ums). Números com mais de 32 bits têm seus bits mais significativos descartados. Por exemplo, o inteiro com mais de 32 bits a seguir será convertido para um inteiro de 32 bits: + <pre class="brush: js">Before: 11100110111110100000000000000110000000000001 +After: 10100000000000000110000000000001</pre> + </li> + <li>Cada bit no primeiro operando é pareado com o bit correspondente no segundo operando: primeiro bit para o primeiro bit, segundo bit para o segundo bit e assim por diante.</li> + <li>O operador é aplicado para cada par de bits e o resultado é construído bit a bit.</li> +</ul> + +<h3 id="(Bitwise_AND)"><a name="Bitwise_AND">& (Bitwise AND)</a></h3> + +<p>Performa a operação AND em cada par de bits. <code>a</code> AND <code>b</code> retorna 1, apenas quando <code>a</code> e <code>b</code> são <code>1</code>. A tabela verdade para a operação AND é:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">a</td> + <td class="header">b</td> + <td class="header">a AND b</td> + </tr> + <tr> + <td>0</td> + <td>0</td> + <td>0</td> + </tr> + <tr> + <td>0</td> + <td>1</td> + <td>0</td> + </tr> + <tr> + <td>1</td> + <td>0</td> + <td>0</td> + </tr> + <tr> + <td>1</td> + <td>1</td> + <td>1</td> + </tr> + </tbody> +</table> + +<pre class="brush: js">. 9 (base 10) = 00000000000000000000000000001001 (base 2) + 14 (base 10) = 00000000000000000000000000001110 (base 2) + -------------------------------- +14 & 9 (base 10) = 00000000000000000000000000001000 (base 2) = 8 (base 10) +</pre> + +<p>Performar a operação AND bit-a-bit de qualquer número <code>x</code> com <code>0</code> retornará <code>0</code>. Performar a operação AND bit-a-bit de qualquer número <code>x</code> com <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">-1</span></font> retornará <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">x</span></font>.</p> + +<h3 id="(Bitwise_OR)"><a name="Bitwise_OR">| (Bitwise OR)</a></h3> + +<p>Performa a operação OR em cada par de bits. <code>a</code> OR <code>b</code> retorna 1 se pelo menos <code>a</code> ou pelo menos <code>b</code> é <code>1</code>. As tabela versão para a operação <code>OR</code> é:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">a</td> + <td class="header">b</td> + <td class="header">a OR b</td> + </tr> + <tr> + <td>0</td> + <td>0</td> + <td>0</td> + </tr> + <tr> + <td>0</td> + <td>1</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>0</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>1</td> + <td>1</td> + </tr> + </tbody> +</table> + +<pre class="brush: js">. 9 (base 10) = 00000000000000000000000000001001 (base 2) + 14 (base 10) = 00000000000000000000000000001110 (base 2) + -------------------------------- +14 | 9 (base 10) = 00000000000000000000000000001111 (base 2) = 15 (base 10) +</pre> + +<p>Performar a operação <code>OR</code> de qulalquer número <code>x</code> com <code>0</code> retornará <code>0</code>. Performar a operação <code>OR</code> de qualquer número <code>X</code> com <code>-1</code> retornará <code>-1</code>.</p> + +<h3 id="(Bitwise_XOR)"><a name="Bitwise_XOR">^ (Bitwise XOR)</a></h3> + +<p>Performs the XOR operation on each pair of bits. <code>a</code> XOR <code>b</code> yields 1 if <code>a</code> and <code>b</code> are different. The truth table for the <code>XOR</code> operation is:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">a</td> + <td class="header">b</td> + <td class="header">a XOR b</td> + </tr> + <tr> + <td>0</td> + <td>0</td> + <td>0</td> + </tr> + <tr> + <td>0</td> + <td>1</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>0</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>1</td> + <td>0</td> + </tr> + </tbody> +</table> + +<pre class="brush: js">. 9 (base 10) = 00000000000000000000000000001001 (base 2) + 14 (base 10) = 00000000000000000000000000001110 (base 2) + -------------------------------- +14 ^ 9 (base 10) = 00000000000000000000000000000111 (base 2) = 7 (base 10) +</pre> + +<p>Bitwise XORing any number <code>x</code> with <code>0</code> yields x. Bitwise XORing any number <code>x</code> with <code>-1</code> yields <code>~x</code>.</p> + +<h3 id="(Bitwise_NOT)"><a name="Bitwise_NOT">~ (Bitwise NOT)</a></h3> + +<p>Performs the NOT operator on each bit. NOT <code>a</code> yields the inverted value (a.k.a. one's complement) of <code>a</code>. The truth table for the <code>NOT</code> operation is:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">a</td> + <td class="header">NOT a</td> + </tr> + <tr> + <td>0</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>0</td> + </tr> + </tbody> +</table> + +<pre class="brush: js"> 9 (base 10) = 00000000000000000000000000001001 (base 2) + -------------------------------- +~9 (base 10) = 11111111111111111111111111110110 (base 2) = -10 (base 10) +</pre> + +<p>Bitwise NOTing any number <code>x</code> yields <code>-(x + 1)</code>. For example, <code>~-5</code> yields <code>4</code>.</p> + +<p>Note that due to using 32-bit representation for numbers both <code>~-1</code> and <code>~4294967295</code> (2<sup>32</sup>-1) results in <code>0</code>.</p> + +<h2 id="Operadores_de_deslocamento_bit_a_bit">Operadores de deslocamento bit a bit</h2> + +<p>The bitwise shift operators take two operands: the first is a quantity to be shifted, and the second specifies the number of bit positions by which the first operand is to be shifted. The direction of the shift operation is controlled by the operator used.</p> + +<p>Shift operators convert their operands to 32-bit integers in big-endian order and return a result of the same type as the left operand. The right operand should be less than 32, but if not only the low five bits will be used.</p> + +<h3 id="<<_(Left_shift)"><a name="Left_shift"><< (Left shift)</a></h3> + +<p>This operator shifts the first operand the specified number of bits to the left. Excess bits shifted off to the left are discarded. Zero bits are shifted in from the right.</p> + +<p>For example, <code>9 << 2</code> yields 36:</p> + +<pre class="brush: js">. 9 (base 10): 00000000000000000000000000001001 (base 2) + -------------------------------- +9 << 2 (base 10): 00000000000000000000000000100100 (base 2) = 36 (base 10) +</pre> + +<p>Bitwise shifting any number <code>x</code> to the left by <code>y</code> bits yields <code>x * 2 ** y</code>.</p> + +<h3 id=">>_(Sign-propagating_right_shift)"><a name="Right_shift">>> (Sign-propagating right shift)</a></h3> + +<p>This operator shifts the first operand the specified number of bits to the right. Excess bits shifted off to the right are discarded. Copies of the leftmost bit are shifted in from the left. Since the new leftmost bit has the same value as the previous leftmost bit, the sign bit (the leftmost bit) does not change. Hence the name "sign-propagating".</p> + +<p>For example, <code>9 >> 2</code> yields 2:</p> + +<pre class="brush: js">. 9 (base 10): 00000000000000000000000000001001 (base 2) + -------------------------------- +9 >> 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10) +</pre> + +<p>Likewise, <code>-9 >> 2</code> yields <code>-3</code>, because the sign is preserved:</p> + +<pre class="brush: js">. -9 (base 10): 11111111111111111111111111110111 (base 2) + -------------------------------- +-9 >> 2 (base 10): 11111111111111111111111111111101 (base 2) = -3 (base 10) +</pre> + +<h3 id=">>>_(Zero-fill_right_shift)"><a name="Unsigned_right_shift">>>> (Zero-fill right shift)</a></h3> + +<p>This operator shifts the first operand the specified number of bits to the right. Excess bits shifted off to the right are discarded. Zero bits are shifted in from the left. The sign bit becomes 0, so the result is always non-negative.</p> + +<p>For non-negative numbers, zero-fill right shift and sign-propagating right shift yield the same result. For example, <code>9 >>> 2</code> yields 2, the same as <code>9 >> 2</code>:</p> + +<pre class="brush: js">. 9 (base 10): 00000000000000000000000000001001 (base 2) + -------------------------------- +9 >>> 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10) +</pre> + +<p>However, this is not the case for negative numbers. For example, <code>-9 >>> 2</code> yields 1073741821, which is different than <code>-9 >> 2</code> (which yields <code>-3</code>):</p> + +<pre class="brush: js">. -9 (base 10): 11111111111111111111111111110111 (base 2) + -------------------------------- +-9 >>> 2 (base 10): 00111111111111111111111111111101 (base 2) = 1073741821 (base 10) +</pre> + +<h2 id="Examples">Examples</h2> + +<h3 id="Flags_and_bitmasks">Flags and bitmasks</h3> + +<p>The bitwise logical operators are often used to create, manipulate, and read sequences of <em>flags</em>, which are like binary variables. Variables could be used instead of these sequences, but binary flags take much less memory (by a factor of 32).</p> + +<p>Suppose there are 4 flags:</p> + +<ul> + <li>flag A: we have an ant problem</li> + <li>flag B: we own a bat</li> + <li>flag C: we own a cat</li> + <li>flag D: we own a duck</li> +</ul> + +<p>These flags are represented by a sequence of bits: DCBA. When a flag is <em>set</em>, it has a value of 1. When a flag is <em>cleared</em>, it has a value of 0. Suppose a variable <code>flags</code> has the binary value 0101:</p> + +<pre class="brush: js">var flags = 5; // binary 0101 +</pre> + +<p>This value indicates:</p> + +<ul> + <li>flag A is true (we have an ant problem);</li> + <li>flag B is false (we don't own a bat);</li> + <li>flag C is true (we own a cat);</li> + <li>flag D is false (we don't own a duck);</li> +</ul> + +<p>Since bitwise operators are 32-bit, 0101 is actually 00000000000000000000000000000101, but the preceding zeroes can be neglected since they contain no meaningful information.</p> + +<p>A <em>bitmask</em> is a sequence of bits that can manipulate and/or read flags. Typically, a "primitive" bitmask for each flag is defined:</p> + +<pre class="brush: js">var FLAG_A = 1; // 0001 +var FLAG_B = 2; // 0010 +var FLAG_C = 4; // 0100 +var FLAG_D = 8; // 1000 +</pre> + +<p>New bitmasks can be created by using the bitwise logical operators on these primitive bitmasks. For example, the bitmask 1011 can be created by ORing FLAG_A, FLAG_B, and FLAG_D:</p> + +<pre class="brush: js">var mask = FLAG_A | FLAG_B | FLAG_D; // 0001 | 0010 | 1000 => 1011 +</pre> + +<p>Individual flag values can be extracted by ANDing them with a bitmask, where each bit with the value of one will "extract" the corresponding flag. The bitmask <em>masks</em> out the non-relevant flags by ANDing with zeroes (hence the term "bitmask"). For example, the bitmask 0100 can be used to see if flag C is set:</p> + +<pre class="brush: js">// if we own a cat +if (flags & FLAG_C) { // 0101 & 0100 => 0100 => true + // do stuff +} +</pre> + +<p>A bitmask with multiple set flags acts like an "either/or". For example, the following two are equivalent:</p> + +<pre class="brush: js">// if we own a bat or we own a cat +// (0101 & 0010) || (0101 & 0100) => 0000 || 0100 => true +if ((flags & FLAG_B) || (flags & FLAG_C)) { + // do stuff +} +</pre> + +<pre class="brush: js">// if we own a bat or cat +var mask = FLAG_B | FLAG_C; // 0010 | 0100 => 0110 +if (flags & mask) { // 0101 & 0110 => 0100 => true + // do stuff +} +</pre> + +<p>Flags can be set by ORing them with a bitmask, where each bit with the value one will set the corresponding flag, if that flag isn't already set. For example, the bitmask 1100 can be used to set flags C and D:</p> + +<pre class="brush: js">// yes, we own a cat and a duck +var mask = FLAG_C | FLAG_D; // 0100 | 1000 => 1100 +flags |= mask; // 0101 | 1100 => 1101 +</pre> + +<p>Flags can be cleared by ANDing them with a bitmask, where each bit with the value zero will clear the corresponding flag, if it isn't already cleared. This bitmask can be created by NOTing primitive bitmasks. For example, the bitmask 1010 can be used to clear flags A and C:</p> + +<pre class="brush: js">// no, we don't have an ant problem or own a cat +var mask = ~(FLAG_A | FLAG_C); // ~0101 => 1010 +flags &= mask; // 1101 & 1010 => 1000 +</pre> + +<p>The mask could also have been created with <code>~FLAG_A & ~FLAG_C</code> (De Morgan's law):</p> + +<pre class="brush: js">// no, we don't have an ant problem, and we don't own a cat +var mask = ~FLAG_A & ~FLAG_C; +flags &= mask; // 1101 & 1010 => 1000 +</pre> + +<p>Flags can be toggled by XORing them with a bitmask, where each bit with the value one will toggle the corresponding flag. For example, the bitmask 0110 can be used to toggle flags B and C:</p> + +<pre class="brush: js">// if we didn't have a bat, we have one now, +// and if we did have one, bye-bye bat +// same thing for cats +var mask = FLAG_B | FLAG_C; +flags = flags ^ mask; // 1100 ^ 0110 => 1010 +</pre> + +<p>Finally, the flags can all be flipped with the NOT operator:</p> + +<pre class="brush: js">// entering parallel universe... +flags = ~flags; // ~1010 => 0101 +</pre> + +<h3 id="Conversion_snippets">Conversion snippets</h3> + +<p>Convert a binary <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" title="/en-US/docs/JavaScript/Reference/Global_Objects/String">String</a></code> to a decimal <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number">Number</a></code>:</p> + +<pre class="brush: js">var sBinString = '1011'; +var nMyNumber = parseInt(sBinString, 2); +alert(nMyNumber); // prints 11, i.e. 1011 +</pre> + +<p>Convert a decimal <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number">Number</a></code> to a binary <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" title="/en-US/docs/JavaScript/Reference/Global_Objects/String">String</a></code>:</p> + +<pre class="brush: js">var nMyNumber = 11; +var sBinString = nMyNumber.toString(2); +alert(sBinString); // prints 1011, i.e. 11 +</pre> + +<h3 id="Automate_Mask_Creation">Automate Mask Creation</h3> + +<p>You can create multiple masks from a set of <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean">Boolean</a></code> values, like this:</p> + +<pre class="brush: js">function createMask() { + var nMask = 0, nFlag = 0, nLen = arguments.length > 32 ? 32 : arguments.length; + for (nFlag; nFlag < nLen; nMask |= arguments[nFlag] << nFlag++); + return nMask; +} +var mask1 = createMask(true, true, false, true); // 11, i.e.: 1011 +var mask2 = createMask(false, false, true); // 4, i.e.: 0100 +var mask3 = createMask(true); // 1, i.e.: 0001 +// etc. + +alert(mask1); // prints 11, i.e.: 1011 +</pre> + +<h3 id="Reverse_algorithm_an_array_of_booleans_from_a_mask">Reverse algorithm: an array of booleans from a mask</h3> + +<p>If you want to create an <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array">Array</a></code> of <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean">Booleans</a></code> from a mask you can use this code:</p> + +<pre class="brush: js">function arrayFromMask(nMask) { + // nMask must be between -2147483648 and 2147483647 + if (nMask > 0x7fffffff || nMask < -0x80000000) { + throw new TypeError('arrayFromMask - out of range'); + } + for (var nShifted = nMask, aFromMask = []; nShifted; + aFromMask.push(Boolean(nShifted & 1)), nShifted >>>= 1); + return aFromMask; +} + +var array1 = arrayFromMask(11); +var array2 = arrayFromMask(4); +var array3 = arrayFromMask(1); + +alert('[' + array1.join(', ') + ']'); +// prints "[true, true, false, true]", i.e.: 11, i.e.: 1011 +</pre> + +<p>You can test both algorithms at the same time…</p> + +<pre class="brush: js">var nTest = 19; // our custom mask +var nResult = createMask.apply(this, arrayFromMask(nTest)); + +alert(nResult); // 19 +</pre> + +<p>For the didactic purpose only (since there is the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toString" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number/toString">Number.toString(2)</a></code> method), we show how it is possible to modify the <code>arrayFromMask</code> algorithm in order to create a <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" title="/en-US/docs/JavaScript/Reference/Global_Objects/String">String</a></code> containing the binary representation of a <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number">Number</a></code>, rather than an <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array">Array</a></code> of <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean">Booleans</a></code>:</p> + +<pre class="brush: js">function createBinaryString(nMask) { + // nMask must be between -2147483648 and 2147483647 + for (var nFlag = 0, nShifted = nMask, sMask = ''; nFlag < 32; + nFlag++, sMask += String(nShifted >>> 31), nShifted <<= 1); + return sMask; +} + +var string1 = createBinaryString(11); +var string2 = createBinaryString(4); +var string3 = createBinaryString(1); + +alert(string1); +// prints 00000000000000000000000000001011, i.e. 11 +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.7')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Defined in several sections of the specification: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4.8">Bitwise NOT operator</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.7">Bitwise shift operators</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.10">Binary bitwise operators</a></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-bitwise-shift-operators')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Defined in several sections of the specification: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-bitwise-not-operator">Bitwise NOT operator</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-bitwise-shift-operators">Bitwise shift operators</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-binary-bitwise-operators">Binary bitwise operators</a></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-bitwise-shift-operators')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Defined in several sections of the specification: <a href="http://tc39.github.io/ecma262/#sec-bitwise-not-operator">Bitwise NOT operator</a>, <a href="http://tc39.github.io/ecma262/#sec-bitwise-shift-operators">Bitwise shift operators</a>, <a href="http://tc39.github.io/ecma262/#sec-binary-bitwise-operators">Binary bitwise operators</a></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("javascript.operators.bitwise")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators">Logical operators</a></li> +</ul> diff --git a/files/pt-br/conflicting/web/javascript/reference/operators_8fa8b34b0547a749514637a15d386886/index.html b/files/pt-br/conflicting/web/javascript/reference/operators_8fa8b34b0547a749514637a15d386886/index.html new file mode 100644 index 0000000000..e3a3ee6e8c --- /dev/null +++ b/files/pt-br/conflicting/web/javascript/reference/operators_8fa8b34b0547a749514637a15d386886/index.html @@ -0,0 +1,343 @@ +--- +title: Operadores Lógicos +slug: Web/JavaScript/Reference/Operators/Operadores_Logicos +tags: + - Operador + - Operadores lógicos + - Referencia + - e + - não + - ou +translation_of: Web/JavaScript/Reference/Operators +translation_of_original: Web/JavaScript/Reference/Operators/Logical_Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<h2 id="Summary" name="Summary">Resumo</h2> + +<p>Operadores lógicos são tipicamente usados com valores <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Booleanos</a></code> (lógicos). Quando eles o são, retornam um valor booleano. Porém, os operadores <code>&&</code> e <code>||</code> de fato retornam o valor de um dos operandos especificos, então se esses operadores são usados com valores não booleanos, eles podem retornar um valor não booleano.</p> + +<h2 id="Descrição">Descrição</h2> + +<p>Os operadores lógicos são descritos na tabela abaixo:</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Operador</th> + <th>Utilização</th> + <th>Descrição</th> + </tr> + <tr> + <td>Logical AND (<code>&&</code>)</td> + <td><code><em>expr1</em> && <em>expr2</em></code></td> + <td>Retorna <code>expr1</code> se essa pode ser convertido para <code>falso</code>; senão, retorna <code>expr2</code>. Dessa forma, quando usado para valores Booleanos, <code>&&</code> retorna <code>verdadeiro</code> se ambos os operandos forem <code>verdadeiro</code> ; senão, retorna <code>falso</code>.</td> + </tr> + <tr> + <td>Logical OR (<code>||</code>)</td> + <td><code><em>expr1</em> || <em>expr2</em></code></td> + <td>Retorna <code>expr1</code> se essa pode ser convertido para <code>verdadeiro</code>; senão, retorna <code>expr2</code>. Dessa forma, quando usado para valores Booleanos, <code>||</code> retorna <code>verdadeiro</code> se qualquer dos operandos for <code>verdadeiro</code>; se ambos são <code>falso</code>, retorna <code>falso</code>.</td> + </tr> + <tr> + <td>Logical NOT (<code>!</code>)</td> + <td><code>!<em>expr</em></code></td> + <td> + <p>Retorna <code>falso</code>se o seu operando pode ser convertido para verdadeiro; senão, retorna <code>verdadeiro</code>.</p> + </td> + </tr> + </tbody> +</table> + +<p>Se um valor pode ser convertido para <code>verdadeiro</code>, este valor é chamado de {{Glossary("truthy")}}. Se um valor pode ser convertido para <code>falso</code>, este valor é chamado de {{Glossary("falsy")}}.</p> + +<p>Exemplos de expressões que podem ser convertidas para falso são:</p> + +<ul> + <li><code>null</code>;</li> + <li><code>NaN;</code></li> + <li><code>0</code>;</li> + <li>string vazia (<code>""</code>); </li> + <li><code>undefined</code>.</li> +</ul> + +<p>Mesmo que os operadores <code>&&</code> and <code>||</code> possam ser utilizados com operandos que não são valores Booleanos, eles ainda podem ser considerados como operadores booleanos visto que seus valores de saída sempre podem ser convertidos em valores booleanos.</p> + +<h3 id="Short-Circuit_Evaluation" name="Short-Circuit_Evaluation">Avaliação de Curto-Circuito (Short-Circuit) </h3> + +<p>Como as expressões lógicas são avaliadas da esquerda pra direita, elas são testadas para possível avaliação de "curto-circuito" ("short-circuit") utilizando as seguintes regras:</p> + +<ul> + <li><code>falso && (<em>qualquer coisa)</em></code><em> </em>é avaliado como falso através de curto-circuito.</li> + <li><code>true || (<em>qualquer coisa)</em></code><em> </em>é avaliado como verdadeiro através de curto-circuito.</li> +</ul> + +<p>As regras de lógica garantem que essas avaliações estejam sempre corretas. Repare que a porção <em>qualquer coisa</em> das expressões acima não é avaliada, logo qualquer problema oriundo de tê-lo feito não é consumado. Note também que a parte<em> qualquer coisa</em> das expressões acima pode ser qualquer expressão lógica unitária (conforme é indicado pelos <span style="line-height: 1.5;">parênteses</span>).</p> + +<p>Por exemplo, as duas funções a seguir são equivalentes.</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">shortCircuitEvaluation</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="comment token">// logical OR (||)</span> + <span class="function token">doSomething</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">||</span> <span class="function token">doSomethingElse</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + + <span class="comment token">// logical AND (&&)</span> + <span class="function token">doSomething</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">&&</span> <span class="function token">doSomethingElse</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="keyword token">function</span> <span class="function token">equivalentEvaluation</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + + <span class="comment token">// logical OR (||)</span> + <span class="keyword token">var</span> orFlag <span class="operator token">=</span> <span class="function token">doSomething</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span>orFlag<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="function token">doSomethingElse</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + + <span class="comment token">// logical AND (&&)</span> + <span class="keyword token">var</span> andFlag <span class="operator token">=</span> <span class="function token">doSomething</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">if</span> <span class="punctuation token">(</span>andFlag<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="function token">doSomethingElse</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span></code></pre> + +<p>Contudo, as expressões a seguir não são equivalentes, devido <span style="line-height: 1.5;">a <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">precedência do operador</a>, e reforçam a importância de que o operador do lado direito (right hand) seja uma única expressão (agrupada com o uso de parênteses, caso seja necessário)</span><span style="line-height: 1.5;">.</span></p> + +<pre class="brush: js"> false && true || true // retorna true + false && (true || true) // retorna falso</pre> + +<h3 id="Logical_AND_.28.29" name="Logical_AND_.28&&.29"><a name="Logical_AND">AND Lógico (<code>&&</code>)</a></h3> + +<p>O código a seguir demonstra exemplos do operador <code>&&</code> (AND lógico). </p> + +<pre class="brush: js">a1 = true && true // t && t retorna true +a2 = true && false // t && f retorna false +a3 = false && true // f && t retorna false +a4 = false && (3 == 4) // f && f retorna false +a5 = 'Cat' && 'Dog' // t && t retorna "Dog" +a6 = false && 'Cat' // f && t retorna false +a7 = 'Cat' && false // t && f retorna false +a8 = '' && false // f && f retorna "" +a9 = false && '' // f && t retorna false +</pre> + +<h3 id="OR_Lógico_()"><a name="Logical_OR">OR Lógico (<code>||</code>)</a></h3> + +<p>O código a seguir demonstra exemplos do operador <code>||</code> (OR lógico).</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js">o1 <span class="operator token">=</span> <span class="keyword token">true</span> <span class="operator token">||</span> <span class="keyword token">true</span> <span class="comment token">// t || t retorna true</span> +o2 <span class="operator token">=</span> <span class="keyword token">false</span> <span class="operator token">||</span> <span class="keyword token">true</span> <span class="comment token">// f || t retorna true</span> +o3 <span class="operator token">=</span> <span class="keyword token">true</span> <span class="operator token">||</span> <span class="keyword token">false</span> <span class="comment token">// t || f retorna true</span> +o4 <span class="operator token">=</span> <span class="keyword token">false</span> <span class="operator token">||</span> <span class="punctuation token">(</span><span class="number token">3</span> <span class="operator token">==</span> <span class="number token">4</span><span class="punctuation token">)</span> <span class="comment token">// f || f retorna false</span> +o5 <span class="operator token">=</span> <span class="string token">'Cat'</span> <span class="operator token">||</span> <span class="string token">'Dog'</span> <span class="comment token">// t || t retorna "Cat"</span> +o6 <span class="operator token">=</span> <span class="keyword token">false</span> <span class="operator token">||</span> <span class="string token">'Cat'</span> <span class="comment token">// f || t retorna "Cat"</span> +o7 <span class="operator token">=</span> <span class="string token">'Cat'</span> <span class="operator token">||</span> <span class="keyword token">false</span> <span class="comment token">// t || f retorna "Cat"</span> +o8 <span class="operator token">=</span> <span class="string token">''</span> <span class="operator token">||</span> <span class="keyword token">false</span> <span class="comment token">// f || f retorna false</span> +o9 <span class="operator token">=</span> <span class="keyword token">false</span> <span class="operator token">||</span> <span class="string token">''</span> <span class="comment token">// f || f retorna ""</span></code></pre> + +<h3 id="Logical_NOT_.28.21.29" name="Logical_NOT_.28.21.29"><a name="Logical_NOT">NOT Logico (<code>!</code>)</a></h3> + +<p>O código a seguir demonstra exemplos do operador <code>!</code> (NOT lógico) .</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js">n1 <span class="operator token">=</span> <span class="operator token">!</span><span class="keyword token">true</span> <span class="comment token">// !t returns false</span> +n2 <span class="operator token">=</span> <span class="operator token">!</span><span class="keyword token">false</span> <span class="comment token">// !f returns true</span> +n3 <span class="operator token">=</span> <span class="operator token">!</span><span class="string token">'Cat'</span> <span class="comment token">// !t returns false</span></code></pre> + +<h3 id="Regras_de_conversão">Regras de conversão</h3> + +<h4 id="Convertendo_AND_para_OR">Convertendo AND para OR</h4> + +<p>A operação a seguir, envolvendo Booleanos:</p> + +<pre class="brush: js">bCondition1 && bCondition2</pre> + +<p>é sempre igual a:</p> + +<pre class="brush: js">!(!bCondition1 || !bCondition2)</pre> + +<h4 id="Convertendo_OR_to_AND">Convertendo OR to AND</h4> + +<p>A operação a seguir, envolvendo Booleanos:</p> + +<pre class="brush: js">bCondition1 || bCondition2</pre> + +<p>é sempre igual a:</p> + +<pre class="brush: js">!(!bCondition1 && !bCondition2)</pre> + +<h4 id="Convertendo_entre_dois_NOT">Convertendo entre dois NOT</h4> + +<p>A seguinte operação envolvendo Booleanos:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="operator token">!</span><span class="operator token">!</span>bCondition</code></pre> + +<p>é sempre igual a:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js">bCondition</code></pre> + +<h3 id="Removendo_parenteses_aninhados">Removendo parenteses aninhados</h3> + +<p>Como as expressões lógicas são avaliadas da esquerda pra direita, é sempre possível remover os parênteses de uma expressão complexa seguindo algumas regras:</p> + +<h4 id="Removendo_AND_aninhado">Removendo AND aninhado</h4> + +<p>A seguinte operação composta envolvendo Booleanos:</p> + +<pre class="brush: js">bCondition1 || (bCondition2 && bCondition3)</pre> + +<p>é igual a :</p> + +<pre class="brush: js">bCondition1 || bCondition2 && bCondition3</pre> + +<h4 id="Removendo_OR_aninhado">Removendo OR aninhado</h4> + +<p>A operação composta a seguir, envolvendo Booleanos:</p> + +<pre class="brush: js">bCondition1 && (bCondition2 || bCondition3)</pre> + +<p>é sempre igual a:</p> + +<pre class="brush: js">!(!bCondition1 || !bCondition2 && !bCondition3)</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>ECMAScript 1st Edition.</td> + <td>Standard</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.4.9', 'Logical NOT Operator')}}<br> + {{SpecName('ES5.1', '#sec-11.11', 'Binary Logical Operators')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-logical-not-operator', 'Logical NOT operator')}}<br> + {{SpecName('ES6', '#sec-binary-logical-operators', 'Binary Logical Operators')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_com_o_Navegador">Compatibilidade com o Navegador</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td><a href="#Logical_AND">Logical AND (<code>&&</code>)</a></td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td><a href="#Logical_OR">Logical OR (<code>||</code>)</a></td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td><a href="#Logical_NOT">Logical NOT (<code>!</code>)</a></td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</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>Chrome para Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td><a href="#Logical_AND">Logical AND (<code>&&</code>)</a></td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td><a href="#Logical_OR">Logical OR (<code>||</code>)</a></td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td><a href="#Logical_NOT">Logical NOT (<code>!</code>)</a></td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="JavaScript_1.0_and_1.1" name="JavaScript_1.0_and_1.1">Retrocompatibilidade: Comportamento no JavaScript 1.0 e1.1</h3> + +<p>Os operadores && and <code>|| se comportam da seguinte maneira:</code></p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Operador</th> + <th>Utilização</th> + <th>Comportamento</th> + </tr> + <tr> + <td><code>&&</code></td> + <td><code><em>expr1</em> && <em>expr2</em></code></td> + <td>Se o primeiro operando (<code>expr1</code>) pode ser convertido para falso, o operador <code>&& </code> retorna false ao invés do valor do <code>expr1</code>.</td> + </tr> + <tr> + <td><code>||</code></td> + <td><code><em>expr1</em> || <em>expr2</em></code></td> + <td>If the first operand (<code>expr1</code>) can be converted to true, the <code>||</code> operator retorna true rather than the value of <code>expr1</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="See_also" name="See_also">Veja Também</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">Bitwise operators</a></li> +</ul> diff --git a/files/pt-br/conflicting/web/javascript/reference/statements/switch/index.html b/files/pt-br/conflicting/web/javascript/reference/statements/switch/index.html new file mode 100644 index 0000000000..8e0fb07927 --- /dev/null +++ b/files/pt-br/conflicting/web/javascript/reference/statements/switch/index.html @@ -0,0 +1,187 @@ +--- +title: default +slug: Web/JavaScript/Reference/Statements/default +tags: + - JavaScript + - Keyword + - Palavra-chave +translation_of: Web/JavaScript/Reference/Statements/switch +translation_of_original: Web/JavaScript/Reference/Statements/default +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>A <strong>palavra-chave default </strong>pode ser usada em duas situações no JavaScript: com uma declaração {{jsxref("Statements/switch", "switch")}}, ou com uma declaração {{jsxref("Statements/export", "export")}}.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<p>Com uma declaração {{jsxref("Statements/switch", "switch")}}:</p> + +<pre class="syntaxbox">switch (expressao) { + case value1: + //Declarações executadas quando o resultado da expressao for value1 + [break;] + default: + //Declarações executadas quando nenhum dos valores for igual o da expressao + [break;] +}</pre> + +<p>Com a declaração {{jsxref("Statements/export", "export")}}:</p> + +<pre class="syntaxbox">export default <em>nameN</em> </pre> + +<h2 id="Descrição">Descrição</h2> + +<p>Para mais detalhes, veja as páginas:</p> + +<ul> + <li>Declaração {{jsxref("Statements/switch", "switch")}}</li> + <li>Declaração {{jsxref("Statements/export", "export")}}.</li> +</ul> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Usando_default_em_declarações_switch">Usando <code>default</code> em declarações <code>switch</code></h3> + +<p>No exemplo a seguir, se a variável <code>expr</code> for "Laranjas" ou "Maças", o programa encontra os valores com o case "Laranjas" ou "Maças" e executa a declaração correspondente. A palavra-chave <code>default</code> vai ajudar em qualquer outro caso e executará a declaração associada.</p> + +<pre class="brush: js">switch (expr) { + case 'Laranjas': + console.log('Laranjas custam R$0,59.'); + break; + case 'Maças': + console.log('Maças custam R$0,32.'); + break; + default: + console.log('Desculpe, nós não temos ' + expr + '.'); +}</pre> + +<h3 id="Usando_default_com_export">Usando <code>default</code> com <code>export</code></h3> + +<p>Se você quiser exportar apenas um valor ou precisa de um valor fallback para um módulo, uma exportação padrão (default export) pode ser usada:</p> + +<pre class="brush: js">// module "my-module.js" +let cube = function cube(x) { + return x * x * x; +}; +export default cube;</pre> + +<p>Então, no outro script, isso pode ser passado direto para o import do default export:</p> + +<pre class="brush: js">// module "my-module.js" +import myFunction from 'my-module'; +console.log(myFunction(3)); // 27 +</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Situação</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-switch-statement', 'switch statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-exports', 'Exports')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-exports', 'Exports')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </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>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Switch default</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Export default</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</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>Switch default</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Export default</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{jsxref("Statements/export", "export")}}</li> + <li>{{jsxref("Statements/switch", "switch")}}</li> +</ul> diff --git a/files/pt-br/conflicting/web/progressive_web_apps/index.html b/files/pt-br/conflicting/web/progressive_web_apps/index.html new file mode 100644 index 0000000000..f379b2647a --- /dev/null +++ b/files/pt-br/conflicting/web/progressive_web_apps/index.html @@ -0,0 +1,68 @@ +--- +title: Design Responsivo +slug: Web_Development/Mobile/Design_responsivo +translation_of: Web/Progressive_web_apps +translation_of_original: Web/Guide/Responsive_design +--- +<p>Como uma reação aos problemas associados com a abordagem de <a href="/pt-BR/docs/Web_Development/Mobile/Sites_separados" title="Web development/Mobile/Separate sites">sites separados</a> para desenvolvimento de sites para celular e desktop, uma ideia relativamente nova (que é atualmente <a href="http://www.alistapart.com/articles/dao/">bastante antiga</a>) está crescendo em popularidade: abandona a detecção do agente de usuário, e em vez disso faz sua pagína responder no lado cliente aos recursos do navegador. Esta abordagem, introduzida por Ethan Marcotte em seu artigo para <a href="http://alistapart.com" title="http://alistapart.com">A List Apart</a>, veio a ser conhecido como <a href="http://www.alistapart.com/articles/responsive-web-design/" style="line-height: 1.572;">Responsive Web Design</a>. Como a abordagem de sites separados, WebDesgin Responsivo tem aspectos positivos e negativos.</p> + +<h2 id="As_Vantagens">As Vantagens</h2> + +<p>Embora ele não foi inicialmente proposto como metodo para criação de sites móveis, design responsivo foi recentemente ganhou muita atenção como uma forma de tomar alguns primeiros passos no sentido de amizade móvel no lugar de um site móvel separado.</p> + +<ol style="font-size: medium;"> + <li>Economiza tempo e dinheiro, como não há uma necessidade de manter sites separados para diferentes dispositivos.</li> + <li>Design Responsivo fornece cada página com uma URL única e original.</li> + <li>Estatísticas de compartilhamento social (Curtidas no Facebook, Tweets, +1 no Google+) não dividem, desde que as versões desktop e móveis de páginas web usam uma URL única e exclusiva.</li> + <li>Design Responsivo não se preocupa sobre agentes de usuário.</li> +</ol> + +<p>Há alguns aspectos muito bom para essa abordagem. Desde que ele não confie na detecção do agente de usuário, é mais resistente e à prova futurística da abordagem de sites separados. Para sites simples, ele também pode ser significativamente mais fácil de implementar e manter do que outras opções.</p> + +<h2 id="Os_Negativos">Os Negativos</h2> + +<p>Essa abordagem não é sem suas limitações. Porque o conteúdo deve ser alterado no lado cliente com JavaScript, apenas mínimas alterações de conteúdo são encorajadas. Em geral, as coisas podem ficar muito cabeludo muito rapidamente se você estiver tentando codificar dois conjuntos distintos de JavaScript para funcionar com o mesmo DOM. Esta é uma grande razão por que aplicativos web não tendem a adotar esta abordagem.</p> + +<p><span style="line-height: inherit;">Dar a seu site existente um design responsivo também envolve uma reconfiguração de seus estilos se você não está ostentando ainda um </span><a href="http://www.smashingmagazine.com/2008/06/26/flexible-layouts-challenge-for-the-future/" style="line-height: inherit;">layout flexível</a><span style="line-height: inherit;">. Esta poderia ser uma benção disfarçada, embora; fazer o layout do seu site responsivo poderia ser uma boa oportunidade para modernizar e limpar o CSS do seu site.</span></p> + +<p><span style="line-height: inherit;">Finalmente, uma vez que você está adicionando o código para seus scripts e estilos, desempenho pode ser pior do que a abordagem de Sites Separados. Não há realmente nenhuma maneira de contonar isso, embora uma refatoração pensativo de seus scripts e estilos pode realmente salvar alguns bytes em longo prazo.</span></p> + +<h2 id="Quando_há_que_escolher_esta_opção">Quando há que escolher esta opção</h2> + +<p><a href="/@api/deki/files/5894/=teixido_responsive-300x177.png" title="teixido_responsive-300x177.png"><img alt="teixido_responsive-300x177.png" class="internal rwrap" src="/@api/deki/files/5894/=teixido_responsive-300x177.png?size=webview" style="float: right; height: 177px; width: 300px;"></a>Como mencionado acima, porque as alterações de conteúdo podem ser difíceis, quando você usar essa abordagem, você não é capaz de dar aos usuários uma experiência surpreendentemente diferente no celular sem um aumento significativo na complexidade de código. Disse que, se as versões desktop e móvel do seu site são muito semelhantes, então esta abordagem é uma ótima opção. É bem adequado para sites centrados em documentos cujo um caso de uso primário é consistente em dispositivos, como as páginas de produtos. Você pode notar que os exemplos abaixo são todos blogs ou portfolios!</p> + +<h2 id="Examples" name="Examples" style="overflow: hidden;">Exemplos</h2> + +<p>Embora não seja tão popular como a abordagem de locais diferentes, existem mais e mais sites que empregam essa técnica todos os dias. Felizmente, uma vez que todo o código é lado cliente, se você gostaria de ver como um site tecnicamente implementa esta abordagem, é tão simples como visitar o site e clicando em “Ver Código-Fonte da Página.” Aqui estão alguns exemplos:</p> + +<ul> + <li><a href="http://teixido.co/">http://teixido.co/</a> – um dos meus designs responsivos favoritos, também na foto acima!</li> + <li><a href="http://adactio.com/journal/1696">http://adactio.com/journal/1696</a> – também um artigo bom de ler, com seus próprios links para exemplos</li> + <li><a href="http://thinkvitamin.com/">http://thinkvitamin.com/</a></li> + <li><a href="http://stephencaver.com/">http://stephencaver.com/</a></li> + <li><a href="http://hicksdesign.co.uk/">http://hicksdesign.co.uk/</a></li> +</ul> + +<p>Apesar de ser uma abordagem relativamente jovem, já existem algumas prátivas recomendadas emergentes. Por exemplo, se você estiver criando um site do zero com essa opção em mente, é geralmente útil para <a href="http://www.lukew.com/ff/entry.asp?1117">criar um design de tela pequena primeiro</a>, para que as restrições do site móvel com você desde o início. Também é ótimo para usar o aprimoramento progressivo para seus estilos em vez de ocultar elementos do seus site existente com media queries. Desta forma, navegadores mais antigos que podem não oferecer suporte a media queries ainda mostrem o layout adequado. Uma excelente apresentação sobre o mérito desse método está disponível <a href="http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu">aqui</a>.</p> + +<h2 id="Abordagem_para_desenvolvimento_web_móvel">Abordagem para desenvolvimento web móvel</h2> + +<p>Consulte os seguintes artigos de abaixo e outras abordagens ao desenvolvimento para plataformas móveis.</p> + +<ul> + <li><a href="/pt-BR/docs/Web_Development/Mobile/Mobile-friendliness" title="XML Web Services">O que é um site móvel amigável?</a></li> + <li><a href="/pt-BR/docs/Web_Development/Mobile/Sites_separados" title="Web development/Mobile/Separate sites">Sites Separados</a></li> + <li><a href="/pt-BR/docs/Web_development/Mobile/A_hybrid_approach" title="Web development/Mobile/Hybrid approach">Uma abordagem híbrida</a></li> +</ul> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/Web_Development/Responsive_Web_design" title="Responsive Web design">Web Design Responsivo</a> para recursos adicionais</li> +</ul> + +<div class="originaldocinfo"> +<h3 id="Informação_Original_do_Documento">Informação Original do Documento</h3> + +<p>Originalmente publicado em 27 de Maio de 2011 no blog Mozilla Webdev como "<a href="http://blog.mozilla.com/webdev/2011/05/27/approaches-to-mobile-web-development-part-3-responsive-design/" title="http://blog.mozilla.com/webdev/2011/05/27/approaches-to-mobile-web-development-part-3-responsive-design/">Approaches to Mobile Web Development Part 3 - Responsive Design</a>", por Jason Grlicky.</p> +</div> |