diff options
Diffstat (limited to 'files/pt-br/web/javascript/reference/statements')
31 files changed, 5527 insertions, 0 deletions
diff --git a/files/pt-br/web/javascript/reference/statements/block/index.html b/files/pt-br/web/javascript/reference/statements/block/index.html new file mode 100644 index 0000000000..6a86a4e7d7 --- /dev/null +++ b/files/pt-br/web/javascript/reference/statements/block/index.html @@ -0,0 +1,180 @@ +--- +title: block +slug: Web/JavaScript/Reference/Statements/block +tags: + - Declaração + - JavaScript + - Reference + - Statement +translation_of: Web/JavaScript/Reference/Statements/block +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>Uma <strong>declaração em bloco </strong>(ou <strong>declaração composta (compound)</strong> em outras linguagens) é usado para agrupar nenhum ou mais declarações. O bloco é delimitado por um par de chaves e pode opcionalmente ser {{jsxref("Statements/label", "nomeado")}}:</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<h3 id="Declaração_de_Bloco">Declaração de Bloco</h3> + +<pre class="syntaxbox">{ + <em>ListaDeDeclarações</em> +} +</pre> + +<h3 id="Declaração_de_Bloco_Nomeada">Declaração de Bloco Nomeada</h3> + +<pre class="syntaxbox"><em>NomeIdentificador</em>: { + <em>ListaDeDeclarações</em> +} +</pre> + +<dl> + <dt><code>ListaDeDeclarações</code></dt> + <dd>Declarações agroupadas com a declaração em bloco.</dd> + <dt><code>NomeIdentificador</code></dt> + <dd>Um {{jsxref("Statements/label", "nome (label)")}} opcional para identificação visual ou um alvo para {{jsxref("Statements/break", "break")}}.</dd> +</dl> + +<h2 id="Descrição">Descrição</h2> + +<p>A declaração em bloco é frequentemente chamada de <strong>declaração composta (compound)</strong> em outras linguagens. Ela permite que você use multiplas declarações onde o JavaScript espera apenas uma declaração. Combinar declarações em blocos são uma prática comum em JavaScript. O comportamento oposto é possível usando uma <a href="/en-US/docs/Web/JavaScript/Reference/Statements/Empty">declaração vazia</a>, onde você fornece nenhuma declaração, mesmo que uma seja requerida.</p> + +<h3 id="Regras_de_Bloqueio_de_Escopo">Regras de Bloqueio de Escopo</h3> + +<h4 id="Com_var">Com <code>var</code></h4> + +<p>Variáveis declaradas com <code>var</code> <strong>não</strong> possuem bloqueio de escopo. Variáveis introduzidas com um bloco são guardadas no escopo da função que elas estão ou script, e os efeitos de configura-las persistem pelo próprio bloco. Em outras palavras, declarações em bloco não introduzem um escopo. Mesmo blocos "standalone" são sintaxes válidas, você não vai querer usar blocos standalone em JavaScript, porque não fazem o que você pensa que eles fazem, se você pensa que eles fazer coisas como blocos em C ou Java. Por exemplo:</p> + +<pre class="brush: js example-bad">var x = 1; +{ + var x = 2; +} +console.log(x); // imprime 2 +</pre> + +<p>Isso loga 2 porque a declaração <code>var x</code> com o bloco está no mesmo escopo que a declaração <code>var x</code> antes do bloco. No C ou Java, o código equivalente iria imprimir 1.</p> + +<h4 id="Com_let_e_const">Com <code>let e</code> <code>const</code></h4> + +<p>Por contraste, variáveis declaradas com {{jsxref("Statements/let", "let")}} e {{jsxref("Statements/const", "const")}} <strong>tem </strong>escopo bloqueado:</p> + +<pre class="brush: js">let x = 1; +{ + let x = 2; +} +console.log(x); // imprime 1 1</pre> + +<p><code><font face="Open Sans, arial, x-locale-body, sans-serif">O </font>x = 2</code> é limitado ao escopo do bloco em que ele foi definido.</p> + +<p>O mesmo true de <code>const</code>:</p> + +<pre class="brush: js">const c = 1; +{ + const c = 2; +} +console.log(c); // imprime 1 e não invoca uma throw SyntaxError...</pre> + +<p>Note que o escope bloqueado de <code>const c = 2</code> <em>não invoca uma</em> <code>SyntaxError: Identifier 'c' has already been declared</code> porque ele foi unicamente declarado no bloco.</p> + +<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('ESDraft', '#sec-block', 'Block statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-block', 'Block statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.1', 'Block statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-12.1', 'Block statement')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-12.1', 'Block statement')}}</td> + <td>{{Spec2('ES1')}}</td> + <td> + <p>Definição inicial. Implementada no JavaScript 1.0.</p> + </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>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> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{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("Statements/while", "while")}}</li> + <li>{{jsxref("Statements/if...else", "if...else")}}</li> + <li>{{jsxref("Statements/let", "let")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/statements/break/index.html b/files/pt-br/web/javascript/reference/statements/break/index.html new file mode 100644 index 0000000000..1eb3e24b03 --- /dev/null +++ b/files/pt-br/web/javascript/reference/statements/break/index.html @@ -0,0 +1,159 @@ +--- +title: break +slug: Web/JavaScript/Reference/Statements/break +translation_of: Web/JavaScript/Reference/Statements/break +--- +<div> +<div>{{jsSidebar("Statements")}}</div> +</div> + +<h2 id="Sumário">Sumário</h2> + +<p>O comando <strong>break </strong>encerra o loop atual, {{jsxref("Statements/switch", "switch")}}, ou o loop que foi informado no {{jsxref("Statements/label", "label")}} e transfere o controle da execução do programa para o comando seguinte.</p> + +<h2 id="Síntaxe">Síntaxe</h2> + +<pre class="syntaxbox"><code>break [label];</code></pre> + +<dl> + <dt><code>label</code></dt> + <dd>Opcional. Identificador associado ao label de um comando. Se a estrutura não for um loop ou {{jsxref("Statements/switch", "switch")}}, ele será um pré-requisito.</dd> +</dl> + +<h2 id="Descrição">Descrição</h2> + +<p>O comando <code>break</code> inclui um label opcional que permite ao programa encerrar a execução da estrutura que possui o nome informado na label. O comando <code>break</code> deve estar dentro dessa estrutura informada no label. A estrutura que possui o nome informada na label pode ser qualquer comando {{jsxref("Statements/block", "block")}}; não é necessário que seja precedida por um loop.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<p>A função a seguir possui um comando <code>break</code> que encerra o loop {{jsxref("Statements/while", "while")}} quando a variável i vale 3, e então retorna o valor 3 * <code>x</code>.</p> + +<pre class="brush:js;highlight:[6];">function testaBreak(x) { + var i = 0; + + while (i < 6) { + if (i == 3) { + break; + } + i += 1; + } + return i * x; +}</pre> + +<p>O código a seguir possui o comando break dentro de uma estrutura nomeada. O comando <code>break</code> deverá estar dentro da estrutura na qual o label se refere. Veja que <code>inner_block</code> está dentro de <code>outer_block</code>.</p> + +<pre class="brush:js;highlight:[1,3,5];">bloco_externo:{ + + bloco_interno:{ + console.log ('1'); + break bloco_externo; // encerra bloco_interno e bloco_externok + console.log (':-('); // não é executado + } + + console.log ('2'); // não é executado +} +</pre> + +<p>O código a seguir também utiliza o comando break com blocos nomeados mas gera um erro de sintaxe pois o comando break está dentro do bloco_1 mas faz uma referência ao bloco_2. Um comando break sempre deverá estar dentro da estrutura nomeada na qual fizer referência.</p> + +<pre class="brush:js;highlight:[1,3,6];">bloco_1:{ + console.log ('1'); + break bloco_2; // SyntaxError: label not found +} + +bloco_2:{ + console.log ('2'); +} +</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 1st Edition</td> + <td>Standard</td> + <td>Definição inicial. Versão sem o uso do label.</td> + </tr> + <tr> + <td>ECMAScript 3rd Edition</td> + <td>Standard</td> + <td>Versão com label adicionada.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.8', 'Break statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-break-statement', 'Break statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </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>Funcionalidade</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>Funcionalidade</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="See_also" name="See_also">Veja também</h2> + +<ul> + <li>{{jsxref("Statements/continue", "continue")}}</li> + <li>{{jsxref("Statements/label", "label")}}</li> + <li>{{jsxref("Statements/switch", "switch")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/statements/class/index.html b/files/pt-br/web/javascript/reference/statements/class/index.html new file mode 100644 index 0000000000..4a07ded20f --- /dev/null +++ b/files/pt-br/web/javascript/reference/statements/class/index.html @@ -0,0 +1,85 @@ +--- +title: class +slug: Web/JavaScript/Reference/Statements/class +tags: + - Classes + - Declaração + - ES2015 + - ES6 + - Estático + - JavaScript + - Static +translation_of: Web/JavaScript/Reference/Statements/class +--- +<div>{{jsSidebar("Statements")}}</div> + +<div>A <strong>declaração class</strong> cria uma nova classe com dado <strong>nome </strong>usando a herança do protótipo base.</div> + +<p> </p> + +<p>Você também pode definir uma classe usando {{jsxref("Operators/class", "class expression", "", 1)}}.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="brush: js">class <em>name</em> [extends] { + // class body +} +</pre> + +<h2 id="Descrição">Descrição</h2> + +<p>Assim como as expressões de classe, o corpo de uma declaração de classe é executado em <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>.</p> + +<p>Declarações de classe não são {{Glossary("Hoisting", "hoisted")}} (ao contrário de <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">function declarations</a>).</p> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Declaração_simples_de_classe">Declaração simples de classe</h3> + +<p>No exemplo a seguir, primeiro definimos uma classe chamada <em>Polygon</em>, então extendemos essa classe para criar uma classe chamada <em>Square</em>. Note que <em>super()</em>, usada no construtor, só pode ser usada em construtores e deve ser chamada antes da chave <em>this</em> ser usada.</p> + +<pre class="brush: js">class Poligono { + constructor(altura, largura) { + this.nome = 'Polígono'; + this.altura = altura; + this.largura = largura; + } +} + +class Quadrado extends Poligono { + constructor(altura) { + super(altura, altura); + this.nome = 'Quadrado'; + } +}</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('ES6', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>definição inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_Browser">Compatibilidade de Browser</h2> + + + +<p>{{Compat("javascript.statements.class")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/function"><code>function</code> declaration</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/class"><code>class</code> expression</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a></li> +</ul> diff --git a/files/pt-br/web/javascript/reference/statements/const/index.html b/files/pt-br/web/javascript/reference/statements/const/index.html new file mode 100644 index 0000000000..64aa4c2fc6 --- /dev/null +++ b/files/pt-br/web/javascript/reference/statements/const/index.html @@ -0,0 +1,224 @@ +--- +title: const +slug: Web/JavaScript/Reference/Statements/const +tags: + - ECMAScript6 + - ES6 + - JavaScript + - Referencia + - constantes +translation_of: Web/JavaScript/Reference/Statements/const +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>Constantes possuem escopo de bloco, semelhantes às variáveis declaradas usando o palavra-chave <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/let">let</a></code>. O valor de uma constante não pode ser alterado por uma atribuição, e ela não pod ser redeclarada.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-const.html")}}</div> + +<div class="hidden">O código-fonte deste exempllo interativo está armazenado em um repositório do GitHub. Se você desejar contribuir para o projeto de exemplos interativos, por favor, clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e nos envie um pull request.</div> + +<h2 id="Summary" name="Summary">Resumo</h2> + +<p>A <strong> declaração <code>const</code></strong> cria uma variável cujo o valor é fixo, ou seja, uma constante somente leitura. Isso não significa que o valor é imutável, apenas que a variável constante não pode ser alterada ou retribuída.</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="syntaxbox notranslate">const <em>name1 = <em>value1 [</em>, <em>name2</em> = <em>value2</em><em> [</em>, ... [</em>, <em>nameN</em> = <em>valueN]]]]</em>;</pre> + +<dl> + <dt><code>nameN</code></dt> + <dd>Nome da constante. Pode ser qualquer <a href="https://developer.mozilla.org/en-US/docs/Glossary/Identifier"> identificador </a> válido.</dd> + <dt><code>valueN</code></dt> + <dd>Valor atribuido a constante. Pode ser qualquer <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions">expressão </a> válida, incluindo uma função.</dd> +</dl> + +<h2 id="Description" name="Description">Descrição</h2> + +<p>Esta declaração cria uma constante que pode pertencer tanto ao escopo global (na janela ou objeto) quanto ao local do bloco em que é declarada. Constantes globais não se tornam propriedades do objeto <code>window</code>, diferente da criação de variáveis com <code>var</code>.</p> + +<p>Toda constante requer um inicializador, ou seja, é preciso especificar um valor para a constante no momento em que ela é declarada (o que faz sentido, uma vez que esse valor não pode ser alterado).</p> + +<p>A declaração <strong><code>const</code> </strong>cria uma referência somente leitura a um valor. Isso <strong>não </strong>significa que esse valor é imutável, apenas que o identificador da variável constante não pode ser alterado. Se o conteúdo do identificador for um objeto, isso significa que o conteúdo do objeto (ex. seus parâmetros) podem ser alterados.</p> + +<p>Todas as considerações de <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let#Temporal_dead_zone_and_errors_with_let">"temporal dead zone"</a> se aplicam tanto a <strong><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let">let</a></code></strong> quanto a <strong><code>const</code></strong>.</p> + +<p>Uma constante não pode ter o mesmo nome que uma função ou variável que esteja no mesmo escopo.</p> + +<h2 id="Examples" name="Examples">Exemplos</h2> + +<p>O exemplo abaixo demonstra o comportamento de uma constante. Experimente executá-lo no console do seu navegador.</p> + +<pre class="brush:js notranslate">// NOTA: constantes podem ser declaradas em caixa alta ou baixa, +// mas uma convenção comum é usar apenas caixa alta + +// define MY_FAV como uma constante e lhe atribui o valor 7 +const MY_FAV = 7; + +// isto falha mas não emite erros no Firefox e Chrome (porém não falha no Safari) +MY_FAV = 20; + +// a variável MY_FAV possui o valor 7 +console.log("my favorite number is: " + MY_FAV); + +// tentar redeclarar a constante emite um erro - Uncaught SyntaxError: Identifier 'MY_FAV' has already been declared +const MY_FAV = 20; + +// o nome MY_FAV está reservado para a constante acima, logo também irá falhar +var MY_FAV = 20; + +// isso também vai falhar +let MY_FAV = 20; + +// É importante notar a natureza de escopo por bloco +if (MY_FAV === 7) { + // não tem problema fazer isso, pois cria uma variável de bloco MY_FAV + // com escopo local (o nome MY_FAV poderia ser usado com let também) + let MY_FAV = 20; + + // MY_FAV agora é 20 + console.log("meu número favorito é " + MY_FAV); + + // isso retorna um erro, pois tenta registrar a variável no contexto global + var MY_FAV = 20; +} + +//MY_FAV ainda é 7 +console.log('meu número favorito é ' + MY_FAV); + +// const deve ser inicializada +const FOO; // SyntaxError: missing = in const declaration + +// const também funciona com objetos +const MY_OBJECT = {'key':'value'}; + +// Sobrescrever o objeto também falha (no Firefox e Chrome mas não no Safari) - Uncaught TypeError: Assignment to constant variable. +MY_OBJECT = {"OTHER_KEY": "value"}; + +// Entretanto, atributos de objetos não estão protegidos, +// logo a seguinte instrução é executada sem problemas +MY_OBJECT.key = "otherValue"; // Utilize Object.freeze() se quiser tornar um objeto imutável + +// o mesmo se aplica para arrays +const MY_ARRAY = []; +// É possível utilizar push para incluir itens no array +MY_ARRAY.push('A'); //["A"] +// Todavia, atribuir um novo array para a variável gera um erro +MY_ARRAY = ['B']; +</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('ES6', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Nenhuma mudança.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Definição inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_nos_navegadores">Compatibilidade nos navegadores</h2> + +<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>{{CompatUnknown}}</td> + <td>36.0 (maybe earlier)</td> + <td>IE11</td> + <td>12.00 (maybe earlier)</td> + <td>5.1.7 (maybe earlier)</td> + </tr> + <tr> + <td> + <p>Reassignment fails</p> + </td> + <td>{{ CompatChrome(20) }}</td> + <td>{{ CompatGeckoDesktop(13) }}</td> + <td>IE11</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>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>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Reassignment fails</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Observações">Observações</h3> + +<p>Em versões anteriores do Firefox & Chrome e a partir de Safari 5.1.7 e Opera 12.00, se você define uma variável com <code>const</code>, você ainda consegue alterar o valor depois. Este recurso não é suportado no Internet Explorer 6-10, mas está incluído no Internet Explorer 11.</p> + +<h3 id="Observações_específicas_para_Firefox">Observações específicas para Firefox</h3> + +<p> A declaração <code>const</code> foi implementada no Firefox muito antes de <code>const</code> aparecer na especificação ECMAScript 6. For <code>const</code> ES6 compliance see {{bug(950547)}} and {{bug(611388)}}.</p> + +<ul> + <li>Iniciando com o Gecko 36 {{geckoRelease("36")}}: + <ul> + <li><code>{const a=1};a</code> passa a retornar <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError" title="The ReferenceError object represents an error when a non-existent variable is referenced."><code>ReferenceError</code></a> e não retorna <code>1</code> devido block-scoping.</li> + <li><code>const a;</code> passa a retornar <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError" title="The SyntaxError object represents an error when trying to interpret syntactically invalid code."><code>SyntaxError</code></a> ("missing = in const declaration<code>"</code>): É necessário incializar a constante.</li> + <li><code>const a = 1; a = 2;</code> passa a retornar <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError" title="The SyntaxError object represents an error when trying to interpret syntactically invalid code."><code>SyntaxError</code></a> ("invalid assignment to const a").</li> + </ul> + </li> +</ul> + +<h2 id="See_also" name="See_also">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/var"><code>var</code></a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/let"><code>let</code></a></li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Constants">Guia de constantes em JavaScript</a></li> +</ul> diff --git a/files/pt-br/web/javascript/reference/statements/continue/index.html b/files/pt-br/web/javascript/reference/statements/continue/index.html new file mode 100644 index 0000000000..7bb4497634 --- /dev/null +++ b/files/pt-br/web/javascript/reference/statements/continue/index.html @@ -0,0 +1,206 @@ +--- +title: continue +slug: Web/JavaScript/Reference/Statements/continue +tags: + - JavaScript +translation_of: Web/JavaScript/Reference/Statements/continue +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>A palavra chave <strong>continue</strong> termina a atual iteração do laço em que ele se encontra ou de um laço rotulado, e continua a execução deste laço com a próxima iteração.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">continue [<em>rótulo</em>];</pre> + +<dl> + <dt><code>rótulo</code></dt> + <dd>Identificador associado ao laço.</dd> +</dl> + +<h2 id="Descrição">Descrição</h2> + +<p>Diferentemente do {{jsxref("Statements/break", "break")}}, o <code>continue</code> não termina a execução do laço completamente, em vez disso ele:</p> + +<ul> + <li>Volta à condição, em um laço do tipo {{jsxref("Statements/while", "while")}}.</li> +</ul> + +<ul> + <li>Volta à expressão, atualizando-a, em um laço do tipo {{jsxref("Statements/for", "for")}}.</li> +</ul> + +<p>O <code>continue</code> pode incluir, opcionalmente, um rótulo que premite ao programa pular para a próxima iteração de um laço rotulado em vez de pular o loop em que ele se encontra. Neste caso, o <code>continue</code> necessita estar dentro deste laço rotulado.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Usando_continue_com_while">Usando <code>continue</code> com <code>while</code></h3> + +<p>O exemplo abaixo mostra um laço {{jsxref("Statements/while", "while")}} que tem um <code>continue</code> que será executado quando o valor de <code>i</code> for 3. Assim, <code>n</code> terá os valores 1, 3, 7, e 12.</p> + +<pre class="brush: js">var i = 0; +var n = 0; + +while (i < 5) { + i++; + + if (i === 3) { + continue; + } + + n += i; +} +</pre> + +<h3 id="Usando_o_continue_com_um_rótulo">Usando o <code>continue</code> com um rótulo</h3> + +<p>No exemplo abaixo, um laço rotulado como <code>checkiandj</code> contém o laço rotulado <code>checkj</code>. Se o <code>continue</code> for alcançado, o programa continua a execução voltando ao topo do rótulo <code>checkj</code>. Cada vez que o <code>continue</code> for alcançado, <code>checkj</code> reiterará até sua condição for falsa. Quando retornar <code>false</code>, o restante de <code>checkiandj</code> será executado.</p> + +<p>Se o <code>continue</code> tivesse o rótulo <code>checkiandj</code>, o programa iria continuar retornando a execução ao label <code>checkiandj</code>.</p> + +<p>Veja também {{jsxref("Statements/label", "label")}}.</p> + +<pre class="brush: js">var i = 0; +var j = 8; + +checkiandj: while (i < 4) { + console.log("i: " + i); + i += 1; + + checkj: while (j > 4) { + console.log("j: "+ j); + j -= 1; + + if ((j % 2) == 0) + continue checkj; + console.log(j + " is odd."); + } + console.log("i = " + i); + console.log("j = " + j); +} +</pre> + +<p>Output:</p> + +<pre class="brush: js">"i: 0" + +// start checkj +"j: 8" +"7 is odd." +"j: 7" +"j: 6" +"5 is odd." +"j: 5" +// end checkj + +"i = 1" +"j = 4" + +"i: 1" +"i = 2" +"j = 4" + +"i: 2" +"i = 3" +"j = 4" + +"i: 3" +"i = 4" +"j = 4" +</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ários</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definição inicial. Versão sem rótulo.</td> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Versão rotulada adicionada.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.7', 'Continue statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-continue-statement', 'Continue statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-continue-statement', 'Continue statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_entre_navegadores">Compatibilidade entre navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{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> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{jsxref("Statements/break", "break")}}</li> + <li>{{jsxref("Statements/label", "label")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/statements/debugger/index.html b/files/pt-br/web/javascript/reference/statements/debugger/index.html new file mode 100644 index 0000000000..c8e428e365 --- /dev/null +++ b/files/pt-br/web/javascript/reference/statements/debugger/index.html @@ -0,0 +1,71 @@ +--- +title: debugger +slug: Web/JavaScript/Reference/Statements/debugger +translation_of: Web/JavaScript/Reference/Statements/debugger +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>A <strong>declaração debug</strong> invoca qualquer funcionalidade de depuração disponivel, como definir um breakpoint. Se nenhuma funcionalidade de depuração estiver disponivel, essa declaração não tem nenhum efeito.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox"><code>debugger;</code></pre> + +<h2 id="Exemplos">Exemplos</h2> + +<p>O exemplo a seguir mostra o código onde uma declaração debugger foi inserida para invocar um depurador (se um existir) quando a função for chamada.</p> + +<pre class="brush:js">function codigoPotencialmenteBugado() { + debugger; + // faça atividades de depuração como examinar, pular um passo etc. +} +</pre> + +<p>Quando o depurador é invocado, a execução é parada na declaração debugger. É como um breakpoint no código-fonte.</p> + +<p><a href="https://mdn.mozillademos.org/files/6963/Screen Shot 2014-02-07 at 9.14.35 AM.png"><img alt="Paused at a debugger statement." src="https://mdn.mozillademos.org/files/6963/Screen%20Shot%202014-02-07%20at%209.14.35%20AM.png" style="height: 371px; width: 700px;"></a></p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-debugger-statement', 'Debugger statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.15', 'Debugger statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definição Inicial</td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-7.5.3', 'Debugger statement')}}</td> + <td>{{Spec2('ES3')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-7.4.3', 'Debugger statement')}}</td> + <td>{{Spec2('ES1')}}</td> + <td> + <p>Apenas mencioado como uma palavra reservada.</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_entre_navegadores">Compatibilidade entre navegadores</h2> + +<p>{{Compat("javascript.statements.debugger")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/Debugging_JavaScript">Depurando JavaScript </a></li> + <li><a href="/en-US/docs/Tools/Debugger">O Depurador nas Ferramentas de Desenvolvedor do Firefox </a></li> +</ul> diff --git a/files/pt-br/web/javascript/reference/statements/default/index.html b/files/pt-br/web/javascript/reference/statements/default/index.html new file mode 100644 index 0000000000..fb84ae5e9e --- /dev/null +++ b/files/pt-br/web/javascript/reference/statements/default/index.html @@ -0,0 +1,186 @@ +--- +title: default +slug: Web/JavaScript/Reference/Statements/default +tags: + - JavaScript + - Keyword + - Palavra-chave +translation_of: Web/JavaScript/Reference/Statements/switch +--- +<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/web/javascript/reference/statements/do...while/index.html b/files/pt-br/web/javascript/reference/statements/do...while/index.html new file mode 100644 index 0000000000..a9396d0e82 --- /dev/null +++ b/files/pt-br/web/javascript/reference/statements/do...while/index.html @@ -0,0 +1,138 @@ +--- +title: do...while +slug: Web/JavaScript/Reference/Statements/do...while +translation_of: Web/JavaScript/Reference/Statements/do...while +--- +<div>{{jsSidebar("Statements")}}</div> + +<div></div> + +<div>A declaração <strong><code>do...while</code><code> </code></strong>cria um laço que executa uma declaração até que o teste da condição for falsa (false). A condição é avaliada depois que o bloco de código é executado, resultando que uma declaração seja executada pelo menos uma vez.</div> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox">do + <em>statement</em> +while (<em>condition</em>); +</pre> + +<dl> + <dt><code>declarações</code></dt> + <dd>A declaração é executada pelo menos uma vez e re-executada cada vez que a condição (<code>condition</code>) for avaliada como verdadeira (true). Para executar múltiplas declarações dentro do laço, use um {{jsxref("declaração/block", "block")}} declaração (<code>{ ... }</code>) ao grupo dessas declarações.</dd> +</dl> + +<dl> + <dt><code>condição</code></dt> + <dd>Uma expressão é validade depois de cada passagem pelo laço. Se a condição <code>(condition) </code>é avaliada como verdadeira (true) o bloco de código é executado novamente. Quando a condição <code>(condition) </code>é avaliada como falsa (false), o controle passa para a instrução seguinte ao laço <strong>do...while</strong>.</dd> +</dl> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Usando_do...while">Usando <code>do...while</code></h3> + +<p>No exemplo seguinte, o laço <strong>do...while</strong> soma pelo menos uma vez e executa novamente até <code>i</code> não ser menor que 5.</p> + +<h3 id="Conteúdo_HTML">Conteúdo HTML </h3> + +<pre class="brush: html"><div id="exemplo"></div></pre> + +<h3 id="Conteúdo_JavaScript">Conteúdo JavaScript </h3> + +<pre class="brush: js">var resultado = ''; +var i = 0; +do { + i += 1; + resultado += i + ' '; +} while (i < 5); +document.getElementById('exemplo').innerHTML = resultado;</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{ EmbedLiveSample('Exemplos') }}</p> + +<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>ECMAScript 3rd Edition.</td> + <td>Standard</td> + <td>Initial definition.<br> + Implemented in JavaScript 1.2</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.6.1', 'do-while statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-do-while-statement', 'do-while statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Trailing ; is now optional.</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>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>IE6+</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>{{jsxref("Statements/while", "while")}}</li> + <li>{{jsxref("Statements/for", "for")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/statements/empty/index.html b/files/pt-br/web/javascript/reference/statements/empty/index.html new file mode 100644 index 0000000000..e0570b0af1 --- /dev/null +++ b/files/pt-br/web/javascript/reference/statements/empty/index.html @@ -0,0 +1,80 @@ +--- +title: empty +slug: Web/JavaScript/Reference/Statements/Empty +translation_of: Web/JavaScript/Reference/Statements/Empty +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>Uma <strong>declaração vazia</strong> é usada para fornecer nenhuma declaração, embora a sintaxe do JavaScript esperasse uma.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-empty.html")}}</div> + + + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox notranslate">; +</pre> + +<h2 id="Descrição">Descrição</h2> + +<p>A instrução vazia é um ponto-e-vírgula (;) indicando que nenhuma instrução será executada, mesmo se a sintaxe do JavaScript exigir uma.</p> + +<p>O comportamento oposto, em que você deseja várias instruções, mas o JavaScript permite apenas uma única, é possível usando uma <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/block">instrução de bloco</a> ; combina várias declarações em uma única.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<p>A instrução vazia às vezes é usada com instruções de loop. Veja o exemplo a seguir com um corpo de loop vazio:</p> + +<pre class="brush: js notranslate">var arr = [1, 2, 3]; + +// Assign all array values to 0 +for (i = 0; i < arr.length; arr[i++] = 0) /* empty statement */ ; + +console.log(arr) +// [0, 0, 0] +</pre> + +<p><strong>Nota:</strong> É uma boa ideia comentar o uso intencional da declaração vazia, pois não é realmente óbvio distinguir entre um ponto e vírgula normal. No exemplo a seguir, o uso provavelmente não é intencional:</p> + +<pre class="brush: js notranslate">if (condition); // Caution, this "if" does nothing! + killTheUniverse() // So this gets always executed!!! +</pre> + +<p>Outro Exemplo: Uma declaração <a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else"><code>if...else</code></a> declaração sem chaves ({ }). Se três for verdadeiro, nada acontecerá, quatro não importa e também a função launchRocket ( ) no caso contrário não será executada.</p> + +<pre class="brush: js notranslate">if (one) + doOne(); +else if (two) + doTwo(); +else if (three) + ; // nothing here +else if (four) + doFour(); +else + launchRocket();</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificações</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-empty-statement', 'Empty statement')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browsers_compatíveis">Browsers compatíveis</h2> + + + +<p>{{Compat("javascript.statements.empty")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{jsxref("Statements/block", "Block statement")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/statements/export/index.html b/files/pt-br/web/javascript/reference/statements/export/index.html new file mode 100644 index 0000000000..f429a13988 --- /dev/null +++ b/files/pt-br/web/javascript/reference/statements/export/index.html @@ -0,0 +1,223 @@ +--- +title: export +slug: Web/JavaScript/Reference/Statements/export +translation_of: Web/JavaScript/Reference/Statements/export +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>O export é utilizado quando criamos módulos JavaScript para exportar ligações em tempo real para suas funções, objetos ou valores primitivos de um módulo sejam utilizados por outros programas através de declarações {{jsxref("Statements/import", "import")}}. Ligações que são exportadas ainda podem ser modificadas localmente; quando importadas, embora elas possam ser lidas somente pelo módulo que as importou, seu valor é atualizado sempre que ela modificada pelo módulo que a exportou.</p> + +<p>Módulos exportados ficam em {{jsxref("Strict_mod", "strict mode")}}, independentemente se é declarado dessa forma, ou não. Export não pode ser utilizado em scripts embutidos.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<p>Há dois tipos de exportação:</p> + +<ol> + <li>Exportações Explícitas (Named Exports) (Zero ou mais exports por módulo)</li> + <li>Exportações Padrão (Default Exports) (Uma por módulo)</li> +</ol> + +<pre class="syntaxbox notranslate">// Exportando recursos individuais +export let <var>name1</var>, <var>name2</var>, …, <var>nameN</var>; // também var, const +export let <var>name1</var> = …, <var>name2</var> = …, …, <var>nameN</var>; // também var, const +export function functionName(){...} +export class ClassName {...} + +// Lista de exportações +export { <var>name1</var>, <var>name2</var>, …, <var>nameN</var> }; + +// Renomeando exports +export { <var>variable1</var> as <var>name1</var>, <var>variable2</var> as <var>name2</var>, …, <var>nameN</var> }; + +// Exportando atribuições desestruturadas renomeando +export const { <var>name1</var>, <var>name2: bar</var> } = o; + +// Exportações Padrão (Default exports) +export default <em>expression</em>; +export default function (…) { … } // também class, function* +export default function name1(…) { … } // também class, function* +export { <var>name1</var> as default, … }; + +// Agregando módulos +export * from …; // não define a exportação padrão +export * as name1 from …; // Draft ECMAScript® 2O21 +export { <var>name1</var>, <var>name2</var>, …, <var>nameN</var> } from …; +export { <var>import1</var> as <var>name1</var>, <var>import2</var> as <var>name2</var>, …, <var>nameN</var> } from …; +export { default } from …;</pre> + +<dl> + <dt><code>nameN</code></dt> + <dd>Identificador para ser exportado (assim ele pode ser importado via <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/import">import</a></code> em outro script).</dd> +</dl> + +<h2 id="Descrição">Descrição</h2> + +<p>Há dois diferentes tipos de export, explícito(named) e padrão(default). Pode-se ter várias exportações explícitas por módulo, mas apenas uma padrão. Cada tipo corresponde à uma da síntaxe acima:</p> + +<p>Exportações explícitas:</p> + +<pre class="brush: js notranslate">// exporta recursos declarados anteriomente +export { myFunction, myVariable }; + +// exporta recursos individuais (pode exportar var, let, +// const, function, class) +export let myVariable = Math.sqrt(2); +export function myFunction() { ... };</pre> + +<p>Exportação padrão (pode ser feita apenas uma por script):</p> + +<pre class="brush: js notranslate">// exporta um recurso declarado anteriormente como padrão +export { myFunction as default }; + +// exporta recursos individuais como padrão +export default function () { ... } +export default class { .. }</pre> + +<p>Exportações explícitas são úteis para exportar vários valores. Durante a importação, é obrigatório usar o mesmo nome do objeto correspondente.</p> + +<p>Mas a exportação padrão pode ser importada com qualquer nome, por exemplo:</p> + +<pre class="brush: js notranslate">// arquivo test.js +let k; export default k = 12; +</pre> + +<pre class="brush: js notranslate">// algum outro arquivo +import m from './test'; // note que temos a liberdade de usar import m ao invés de import k, porque k era uma exportaçào padrão +console.log(m); // vai retornar log 12 +</pre> + +<p>Você também pode renomear exportações explícitas para evitar conflitos e nome:</p> + +<pre class="brush: js notranslate">export { <var>myFunction</var> as <var>function1</var>,<var> + myVariable</var> as variable };</pre> + +<h3 id="Re-exportando_Agregando">Re-exportando / Agregando</h3> + +<p>É possível também "importar/exportar" de módulos diferentes em um módulo pai, de modo que eles estejam disponíveis para serem importados daquele módulo. Em outras palavras, pode-se criar um módulo único concentrando várias exportações de vários módulos.</p> + +<p>Isto pode ser feito com a sintaxe "export from":</p> + +<pre class="brush: js notranslate">export { default as function1, + function2 } from 'bar.js'; +</pre> + +<p>O que é comparável com um combinação de import e export:</p> + +<pre class="brush: js notranslate">import { default as function1, + function2 } from 'bar.js'; +export { function1, function2 }; +</pre> + +<p>Mas onde <code>function1</code> e <code>function2</code> não ficam disponíveis dentro do módulo atual.</p> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> Os exemplos a seguir são sintaticamente inválidos apesar de sua equivalência com o import:</p> +</div> + +<pre class="brush: js notranslate">import DefaultExport from 'bar.js'; // Válido +</pre> + +<pre class="brush: js notranslate">export DefaultExport from 'bar.js'; // Inválido</pre> + +<p>O modo correto de fazer isso e renomeando o export:</p> + +<pre class="brush: js notranslate">export { default as DefaultExport } from 'bar.js'; +</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Usando_exportações_explícitas">Usando exportações explícitas</h3> + +<p>Em um módulo <code>my-module.js</code> poderiamos usar o seguinte código:</p> + +<pre class="brush: js notranslate">// módulo "my-module.js" +function cube(x) { + return x * x * x; +} + +const foo = Math.PI + Math.SQRT2; + +var graph = { + options: { + color:'white', + thickness:'2px' + }, + draw: function() { + console.log('Da função draw de graph'); + } +} + +export { cube, foo, graph };</pre> + +<p>Então, no módulo principal incluído sem sua página HTML, poderíamos ter:</p> + +<pre class="brush: js notranslate">import { cube, foo, graph } from './my-module.js'; + +graph.options = { + color:'blue', + thickness:'3px' +}; + +graph.draw(); +console.log(cube(3)); // 27 +console.log(foo); // 4.555806215962888</pre> + +<p>É importante notar o seguinte:</p> + +<ul> + <li>Você pode incluir esse script no seu código HTML através do elemento {{htmlelement("script")}} do tipo="module", de modo que ele seja reconhecido e tratado apropriadamente.</li> + <li>Você não pode executar módulos JS através de <code>file://</code> URL — você receberá errors <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/CORS">CORS</a>. Você deve rodá-los através de um servidor HTTP.</li> +</ul> + +<h3 id="Usando_a_exportação_padrão">Usando a exportação padrão</h3> + +<p>Se queremos exportar um valor sozinho ou obter um valor de reserva para o nosso módulo, nós poderiamos usar <code>export default</code>:</p> + +<pre class="brush: js notranslate">// módulo "my-module.js" +export default function cube(x) { + return x * x * x; +} +</pre> + +<p>Daí em outro script podemos usar:</p> + +<pre class="brush: js notranslate">import cube from 'my-module'; +console.log(cube(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">Estado</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-exports', 'Exports')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-exports', 'Exports')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade">Compatibilidade</h2> + + + +<p>{{Compat("javascript.statements.export")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{jsxref("Statements/import", "import")}}</li> + <li><a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a>, Hacks blog post by Jason Orendorff</li> + <li><a href="http://exploringjs.com/es6/ch_modules.html">Axel Rauschmayer's book: "Exploring JS: Modules"</a></li> +</ul> diff --git a/files/pt-br/web/javascript/reference/statements/for-await...of/index.html b/files/pt-br/web/javascript/reference/statements/for-await...of/index.html new file mode 100644 index 0000000000..c584b497a8 --- /dev/null +++ b/files/pt-br/web/javascript/reference/statements/for-await...of/index.html @@ -0,0 +1,136 @@ +--- +title: for await...of +slug: Web/JavaScript/Reference/Statements/for-await...of +translation_of: Web/JavaScript/Reference/Statements/for-await...of +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>A <strong>declaração</strong> <strong><code>for await...of</code> </strong>cria um loop que itera sobre objetos iteráveis assíncronos, bem como sobre iteráveis síncronos, incluindo: {{jsxref("String")}}, {{jsxref("Array")}}, <code>Array</code>-como objetos (e.g., {{jsxref("Functions/arguments", "arguments")}} or {{domxref("NodeList")}}), {{jsxref("TypedArray")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, e iteráveis async/sync. Invoca um hook de iteração personalizado com instruções a serem executadas para o valor de cada propriedade do objeto.</p> + + + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox">for await (<code>variável</code> of <code>iterável</code>) { + <em>// declaração +</em>} +</pre> + +<dl> + <dt><code>variável</code></dt> + <dd>Em cada iteração, o valor de uma propriedade diferente é atribuído à <em>variável</em>. A <em>variável</em> pode ser declarada como <code>const</code>, <code>let</code> ou <code>var</code>.</dd> + <dt><code>iterável</code></dt> + <dd>Objeto cujas propriedades iteráveis devem ser iteradas.</dd> +</dl> + +<h3 id="Iterando_sobre_iteráveis_assíncronos">Iterando sobre iteráveis assíncronos</h3> + +<p>Você também pode iterar sobre um objeto que explicidamente implementa protocolo iterável assíncrono(<em>async iterable protocol</em>):</p> + +<pre class="brush:js">var asyncIterable = { + [Symbol.asyncIterator]() { + return { + i: 0, + next() { + if (this.i < 3) { + return Promise.resolve({ value: this.i++, done: false }); + } + + return Promise.resolve({ done: true }); + } + }; + } +}; + +(async function() { + for await (let num of asyncIterable) { + console.log(num); + } +})(); + +// 0 +// 1 +// 2 +</pre> + +<h3 id="Iterando_sobre_generators_assíncronos">Iterando sobre generators assíncronos</h3> + +<p>Como os geradores assíncronos implementam o protocolo assíncrono Iterator, eles podem fazer um loop usando <code>for await... of</code></p> + +<pre class="brush: js">async function* asyncGenerator() { + var i = 0; + while (i < 3) { + yield i++; + } +} + +(async function() { + for await (let num of asyncGenerator()) { + console.log(num); + } +})(); +// 0 +// 1 +// 2</pre> + +<p>Para termos um exemplo mais concreto de iteração sobre um generator assíncrono usando <code>for await... of</code>, considere iterar sobre dados obtidos através de um fecth de uma API. Este exemplo cria primeiro um iterador assíncrono para um stream de dados e depois usa-o para encontrar o tamanho da resposta da API. </p> + +<pre class="brush: js">async function* streamAsyncIterator(stream) { + const reader = stream.getReader(); + try { + while (true) { + const { done, value } = await reader.read(); + if (done) { + return; + } + yield value; + } + } finally { + reader.releaseLock(); + } +} +// Obtém dados do URL e calcula o tamanho da resposta usando o generator assíncrono +async function getResponseSize(url) { + const response = await fetch(url); + // Guardará o tamanho do response em bytes. + let responseSize = 0; + // O for-wait-loop irá iterar de forma assíncrona sobre cada parte do response. + for await (const chunk of streamAsyncIterator(response.body)) { + // Incrementa o valor do responseSize + responseSize += chunk.length; + } + + console.log(`Response Size: ${responseSize} bytes`); + // output esperado:"Response Size: 1071472" + return responseSize; +} +getResponseSize('https://jsonplaceholder.typicode.com/photos');</pre> + +<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('ESDraft', '#sec-for-in-and-for-of-statements', 'ECMAScript Language: The for-in, for-of, and for-await-of Statements')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2> + +<div class="hidden">A tabela de compatibilidade nesta página é gerada de dados estruturados. Se você quiser contribuir para os dados, por favor acesse <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie-nos um <em>pull request</em>.</div> + +<p>{{Compat("javascript.statements.for_await_of")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{jsxref("Statements/for...of")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/statements/for...in/index.html b/files/pt-br/web/javascript/reference/statements/for...in/index.html new file mode 100644 index 0000000000..10d3f34bbb --- /dev/null +++ b/files/pt-br/web/javascript/reference/statements/for...in/index.html @@ -0,0 +1,203 @@ +--- +title: for...in +slug: Web/JavaScript/Reference/Statements/for...in +tags: + - JavaScript + - Laço de repetição + - Loop + - Statement + - for...in +translation_of: Web/JavaScript/Reference/Statements/for...in +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>O laço <strong><code>for...in</code> </strong> interage sobre propriedades enumeradas de um objeto, na ordem original de inserção. O laço pode ser executado para cada propriedade distinta do objeto.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">for (<var>variavel</var> in objeto) {<em>...</em> +}</pre> + +<dl> + <dt><code>variavel</code></dt> + <dd>Uma propriedade diferente do objeto é atribuida em cada iteração.</dd> + <dt><code>objeto</code></dt> + <dd>Objeto com as propriedades enumeradas.</dd> +</dl> + +<h2 id="Descrição">Descrição</h2> + +<p>O laço for...in somente iterage sobre propriedades enumeradas. Objetos criados a partir de construtores built-in (arrays e object) herdam propriedades não enumeradas de object.prototype e String.prototype, assim como método {{jsxref("String")}}'s {{jsxref("String.indexOf", "indexOf()")}} ou {{jsxref("Object")}}'s {{jsxref("Object.toString", "toString()")}}. O laço irá iterar sobre todas as propriedades enumeráveis do próprio objeto e somente aquelas enumeráveis herdadas de construtores de objetos prototype.</p> + +<h3 id="Propriedades_deletadas_adicionadas_ou_modificadas">Propriedades deletadas, adicionadas ou modificadas</h3> + +<p>O laço <code>for...in</code> iterage sobre as propriedades de um objeto em uma ordem arbitrária (veja o {{jsxref("Operators/delete", "delete")}} ). Se uma propriedade é deletada durante a execução do loop, ela se torna indisponível para ser acessada depois. É recomendável não adicionar, remover ou alterar propriedades novas ao objeto durante a execução do laço (durante o loop)</p> + +<h3 id="Iteração_em_Arrays_e_for...in">Iteração em Arrays e <code>for...in</code></h3> + +<div class="note"> +<p><strong>Note:</strong> <code>for...in</code> não deve ser usado para iteração em uma {{jsxref("Array")}} onde a ordem é importante, visto que ele iterage em uma ordem arbitrária.</p> +</div> + +<p>Indices de arrays somente se tornam propriedades enumeradas com inteiros (integer). Não há garantia de que utilizando o laço for...in os indices de um array serão retornados em uma ordem particular ou irá retornar todas as propriedades enumeráveis. É recomendável utilizar o laço {{jsxref("Statements/for", "for")}} com índices numéricos ou {{jsxref("Array.prototype.forEach()")}} ou ainda {{jsxref("Statements/for...of", "for...of")}} quando iteragir sobre arrays onde a ordem é importante.</p> + +<h3 id="Iteração_apenas_sobre_suas_próprias_propriedades">Iteração apenas sobre suas próprias propriedades</h3> + +<p>Se você quer considerar somente as propriedades do próprio objeto e não as herdadas via prototype, use {{jsxref("Object.getOwnPropertyNames", "getOwnPropertyNames()")}} ou execute {{jsxref("Object.prototype.hasOwnProperty", "hasOwnProperty()")}} ou ({{jsxref("Object.prototype.propertyIsEnumerable", "propertyIsEnumerable")}}</p> + +<h2 id="Exemplos">Exemplos</h2> + +<p>A função seguinte toma como argumento um objeto. O laço for...in iterage sobre todos as propriedades enumeráveis do objeto e retorna uma string com o nome das propriedades e seus respectivos valores.</p> + +<pre class="brush: js">//Objeto +var obj = {a:1, b:2, c:3}; + +//Para prop (propriedade) in obj (objeto) faça +for (var prop in obj) { + // ctrl+shift+k (para abrir o console no mozilla firefox) + console.log("obj." + prop + " = " + obj[prop]); +} + +//A saída (output) deverá ser: +// "obj.a = 1" +// "obj.b = 2" +// "obj.c = 3"</pre> + +<p>A função seguinte ilustra o uso de {{jsxref("Object.prototype.hasOwnProperty", "hasOwnProperty()")}}: as propriedades herdadas não são exibidas.</p> + +<pre class="brush: js">var triangle = {a:1, b:2, c:3}; + +function ColoredTriangle() { + this.color = "red"; +} + +ColoredTriangle.prototype = triangle; + +var obj = new ColoredTriangle(); + +for (var prop in obj) { + if( obj.hasOwnProperty( prop ) ) { + console.log("obj." + prop + " = " + obj[prop]); + } +} + +// Output: +// "obj.color = red" +</pre> + +<h2 id="Specificações">Specificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'for...in statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-for-in-and-for-of-statements', 'for...in statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.6.4', 'for...in statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-12.6.4', 'for...in statement')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-12.6.3', 'for...in statement')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definiçã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>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>{{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="Compatibilidade_Initializer_expressions">Compatibilidade: Initializer expressions</h2> + +<p>Anterior ao SpiderMonkey 40 {{geckoRelease(40)}}, era possível usar uma expressão inicial com o laço for...in, conforme exemplo que se segue:</p> + +<pre class="brush: js example-bad">var obj = {a:1, b:2, c:3}; +for(var i=0 in obj) { + console.log(obj[i]); +} +// 1 +// 2 +// 3 +</pre> + +<p>Este não é o comportamento padrão e atualmente é ignorado a partir da versão 40 e posteriores e seu uso irá exibir o error {{jsxref("SyntaxError")}} ("for-in loop head declarations may not have initializers"). Outras engines como a v8 (Chrome), Chakra (IE/Edge) e JSC (Webkit/Safari) estão estudando o que fazer com esse comportamento.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{jsxref("Statements/for...of", "for...of")}} - laço similar que iterage sobre os valores das propriedades.</li> + <li>{{jsxref("Statements/for_each...in", "for each in")}} - (deprecated).</li> + <li>{{jsxref("Statements/for", "for")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators">Generator expressions</a> (uses the <code>for...in</code> syntax)</li> + <li><a href="/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li> + <li>{{jsxref("Object.getOwnPropertyNames()")}}</li> + <li>{{jsxref("Object.prototype.hasOwnProperty()")}}</li> + <li>{{jsxref("Array.prototype.forEach()")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/statements/for...of/index.html b/files/pt-br/web/javascript/reference/statements/for...of/index.html new file mode 100644 index 0000000000..fb6d5fb664 --- /dev/null +++ b/files/pt-br/web/javascript/reference/statements/for...of/index.html @@ -0,0 +1,298 @@ +--- +title: for...of +slug: Web/JavaScript/Reference/Statements/for...of +tags: + - ECMAScript 2015 + - ECMAScript6 + - JavaScript + - Referência(2) + - Statement +translation_of: Web/JavaScript/Reference/Statements/for...of +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>O loop <strong><code>for...of</code></strong> percorre <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/iterable">objetos iterativos</a> (incluindo {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, o objeto <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/arguments">arguments</a> e assim por diante), chamando uma função personalizada com instruções a serem executadas para o valor de cada objeto distinto.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox">for (<em>variavel</em> of <em>iteravel</em>) { +<em> declaração</em><em> +</em>} +</pre> + +<dl> + <dt><code>variável</code></dt> + <dd>A cada iteração, um valor de uma propriedade diferente é atribuido à <em>variável</em>.</dd> + <dt><code>iteravel</code></dt> + <dd>Objeto cujos atributos serão iterados.</dd> +</dl> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Iterando_sobre_um_jsxref(Array)">Iterando sobre um {{jsxref("Array")}}</h3> + +<pre class="brush:js"><code>let iterable = [10, 20, 30]; + +for (let value of iterable) { + console.log(value); +} +// 10 +// 20 +// 30</code></pre> + +<p>Ao invés de <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let"><code>let</code></a>, você pode usar <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const"><code>const</code></a> se você não for modificar a variável dentro do bloco.</p> + +<pre><code>let iterable = [10, 20, 30]; + +for (const value of iterable) { + console.log(value); +} +// 10 +// 20 +// 30</code></pre> + +<h3 id="Iterando_sobre_uma_jsxref(String)">Iterando sobre uma {{jsxref("String")}}</h3> + +<pre><code>let iterable = "boo"; + +for (let value of iterable) { + console.log(value); +} +// "b" +// "o" +// "o"</code></pre> + +<h3 id="Iterando_sobre_uma_jsxref(TypedArray)">Iterando sobre uma {{jsxref("TypedArray")}}</h3> + +<pre><code>let iterable = new Uint8Array([0x00, 0xff]); + +for (let value of iterable) { + console.log(value); +} +// 0 +// 255</code></pre> + +<h3 id="Iterando_sobre_um_jsxref(Map)">Iterando sobre um {{jsxref("Map")}}</h3> + +<pre><code>let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]); + +for (let entry of iterable) { + console.log(entry); +} +// [a, 1] +// [b, 2] +// [c, 3] + +for (let [key, value] of iterable) { + console.log(value); +} +// 1 +// 2 +// 3</code></pre> + +<h3 id="Iterando_sobre_um_jsxref(Set)">Iterando sobre um {{jsxref("Set")}}</h3> + +<pre><code>let iterable = new Set([1, 1, 2, 2, 3, 3]); + +for (let value of iterable) { + console.log(value); +} +// 1 +// 2 +// 3</code></pre> + +<h3 id="Iterando_sobre_um_objeto_arguments">Iterando sobre um objeto <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/arguments">arguments</a></h3> + +<pre><code>(function() { + for (let argument of arguments) { + console.log(argument); + } +})(1,2,3); + +// 1 +// 2 +// 3</code></pre> + +<h3 id="Iterando_sobre_uma_coleção_do_DOM">Iterando sobre uma coleção do DOM</h3> + +<p>Iterar sobre uma coleção do DOM como {{domxref("NodeList")}}: o seguinte exemplo adiciona uma classe <code>read</code> aos parágrafos que são descendentes diretos de uma tag <code>article</code>:</p> + +<pre><code>// Nota: Isso irá funcionar somente em plataformas que tem +// suporte ao NodeList.prototype[Symbol.iterator] +let articleParagraphs = document.querySelectorAll("article > p"); + +for (let paragraph of articleParagraphs) { + paragraph.classList.add("read"); +}</code></pre> + +<h3 id="Iterando_sobre_generators">Iterando sobre generators</h3> + +<p>Você pode também iterar sobre <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*">generators</a>:</p> + +<pre><code>function* fibonacci() { // uma função geradora (generator) + let [prev, curr] = [1, 1]; + while (true) { + [prev, curr] = [curr, prev + curr]; + yield curr; + } +} + +for (let n of fibonacci()) { + console.log(n); + // Trunca a sequência em 1000 + if (n >= 1000) { + break; + } +}</code></pre> + +<h4 id="Não_reuse_generators">Não reuse generators</h4> + +<p>Generators não devem ser re-usados, mesmo se o loop <code>for...of</code> for terminado precocemente, por exemplo através da palavra-chave {{jsxref("Statements/break", "break")}}. Enquanto em um loop ativo, o generator é fechado e tentar iterar novamente sobre ele não produz (yield) nenhum resultado adicional. O Firefox ainda não implementou este comportamento (o generator pode ser reutilizado, violando o padrão do ES2015 (<a href="https://www.ecma-international.org/ecma-262/6.0/#sec-13.7.5.13">13.7.5.13, step 5m</a>), mas isso irá mudar uma vez que o {{Bug(1147371)}} for resolvido.</p> + +<pre><code>var gen = (function *(){ + yield 1; + yield 2; + yield 3; +})(); +for (let o of gen) { + console.log(o); + break; // Closes iterator +} + +// O generator não deve ser reutilizado, o código a seguir não +// faz sentido! +for (let o of gen) { + console.log(o); // Nunca será chamado. +}</code></pre> + +<h3 id="Iterando_sobre_outros_objetos_iteráveis">Iterando sobre outros objetos iteráveis</h3> + +<p>Você pode também iterar sobre um objeto que implementa explicitamente um protocolo <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#iterable">iterável</a> protocol:</p> + +<pre><code>var iterable = { + [Symbol.iterator]() { + return { + i: 0, + next() { + if (this.i < 3) { + return { value: this.i++, done: false }; + } + return { value: undefined, done: true }; + } + }; + } +}; + +for (var value of iterable) { + console.log(value); +} +// 0 +// 1 +// 2</code></pre> + +<h3 id="Diferença_entre_for...of_e_for...in">Diferença entre <code>for...of</code> e <code>for...in</code></h3> + +<p>O loop <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a></code> irá iterar sobre todas as propriedades enumeráveis de um objeto.</p> + +<p>A sintaxe do <code>for...of</code> é específica para <strong>coleções</strong>, ao invés de todos os objetos. Ela irá iterar desta maneira sobre os elementos de qualquer coleção que tiver uma propriedade <code>[Symbol.iterator]</code>.</p> + +<p>O exemplo a seguir mostra a diferença entre um loop <code>for...of</code> e um loop <code>for...in</code>.</p> + +<pre><code>Object.prototype.objCustom = function () {}; +Array.prototype.arrCustom = function () {}; + +let iterable = [3, 5, 7]; +iterable.foo = "hello"; + +for (let i in iterable) { + console.log(i); // escreve 0, 1, 2, "foo", "arrCustom", "objCustom" +} + +for (let i of iterable) { + console.log(i); // escreve 3, 5, 7 +}</code></pre> + +<h3 id="Especificações">Especificações</h3> + +<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-for-in-and-for-of-statements', 'for...of statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definition Inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'for...of statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_dos_navegadores">Compatibilidade dos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funcionalidade</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Edge</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Funções básicas</td> + <td>{{CompatChrome(38)}} [1]</td> + <td>{{CompatGeckoDesktop("13")}} [2]</td> + <td>12</td> + <td>25</td> + <td>7.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funcionalidade</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>Funções básicas</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(38)}} [1]</td> + <td>{{CompatGeckoMobile("13")}} [2]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>8</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Do Chrome 29 ao Chrome 37 essa funcionalidade estava disponível através de uma configuração. Em chrome://flags/#enable-javascript-harmony, habilite a função “Enable Experimental JavaScript”.</p> + +<p>[2] Do Gecko 17 (Firefox 17 / Thunderbird 17 / SeaMonkey 2.14) ao Gecko 26 (Firefox 26 / Thunderbird 26 / SeaMonkey 2.23 / Firefox OS 1.2) a propriedade i<code>terator</code> era usada (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=907077">bug 907077</a>), e do Gecko 27 ao Gecko 35 o placeholder <code>"@@iterator"</code> era usado. No Gecko 36 (Firefox 36 / Thunderbird 36 / SeaMonkey 2.33), o <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol">símbolo</a> <code>@@iterator</code> foi implementada (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=918828">bug 918828</a>).</p> + +<h2 id="Consulte_também">Consulte também</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for_each...in">for each...in</a> - uma declaração similar, mas que itera entre os valores dos atributos de um objeto, ao invés dos seus nomes (obsoleto).</li> + <li>{{jsxref("Array.prototype.forEach()")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/statements/for/index.html b/files/pt-br/web/javascript/reference/statements/for/index.html new file mode 100644 index 0000000000..981f11051a --- /dev/null +++ b/files/pt-br/web/javascript/reference/statements/for/index.html @@ -0,0 +1,191 @@ +--- +title: for +slug: Web/JavaScript/Reference/Statements/for +translation_of: Web/JavaScript/Reference/Statements/for +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>A instrução <code>for</code><strong> </strong>cria um loop que consiste em três expressões opcionais, dentro de parênteses e separadas por ponto e vírgula, seguidas por uma declaração ou uma sequência de declarações executadas em sequência.</p> + +<p>A fonte desse exemplo interativo está armazenada em um repositório do GitHub. Se você gostaria de contribuir com os projetos de exemplos interativos, por favor clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e nos envie um pull request (requisição para puxar).</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox notranslate">for ([<em>inicialização</em>]; [<em>condição</em>]; [<em>expressão final</em>]) + <em> declaração</em> +</pre> + +<dl> + <dt><code>inicialização</code></dt> + <dd>Uma expressão (incluindo expressões de atribuição) ou declarações variáveis. Geralmente usada para iniciar o contador de variáveis. Esta expressão pode, opcionalmente, declarar novas variáveis com a palavra chave <code>var</code>. Essas variáveis não são locais no loop, isto é, elas estão no mesmo escopo que o loop <code>for</code><strong> </strong>está. Variáveis declaradas com let são locais para a declaração.</dd> + <dd>O resultado desta expressão é descartado.</dd> + <dt><code>condição</code></dt> + <dd>Uma expressão para ser avaliada antes de cada iteração do loop. Se esta expressão for avaliada para true, <code>declaração</code> será executado. Este teste da condição é opcional. Se omitido, a condição sempre será avaliada como verdadeira. Se a expressão for avaliada como falsa, a execução irá para a primeira expressão após a construção loop <code>for</code>.</dd> + <dt><code>expressão final</code></dt> + <dd>Uma expressão que será validada no final de cada iteração de loop. Isso ocorre antes da próxima avaliação da condição. Geralmente usado para atualizar ou incrementar a variável do contador.</dd> + <dt><code>declaração</code></dt> + <dd>Uma declaração que é executada enquanto a condição for verdadeira. Para executar múltiplas condições dentro do loop, use uma instrução de bloco <code>({...})</code> para agrupar essas condições. Para não executar declarações dentro do loop, use uma instrução vazia <code>(;)</code>.</dd> +</dl> + +<h2 id="Exemplos_de_uso">Exemplos de uso</h2> + +<h3 id="Usando_for">Usando <code>for</code></h3> + +<p>A declaração <code>for</code> começa declarando a variável <code>i</code> e inicializando-a como <code>0</code>. Ela verifica se <code>i</code> é menor que nove, executa as duas instruções subsequentes e incrementa 1 a variável <code>i</code> após cada passagem pelo loop.</p> + +<pre class="brush: js notranslate">for (var i = 0; i < 9; i++) { + console.log(i); + // more statements +} +</pre> + +<h3 id="Expressões_for_opcionais">Expressões <code>for</code> opcionais</h3> + +<p>Todas as três expressões na condição do loop <code>for</code> são opcionais.</p> + +<p>Por exemplo, no bloco de <em>inicialização</em>, não é necessário inicializar variáveis:</p> + +<pre class="brush: js notranslate">var i = 0; +for (; i < 9; i++) { + console.log(i); + // more statements +} +</pre> + +<p>Assim como ocorre no bloco de <em>inicialização</em>, a <em>condição</em> também é opcional. Se você está omitindo essa expressão, você deve certificar-se de quebrar o loop no corpo para não criar um loop infinito.</p> + +<pre class="brush: js notranslate">for (var i = 0;; i++) { + console.log(i); + if (i > 3) break; + // more statements +}</pre> + +<p>Você também pode omitir todos os três blocos. Novamente, certifique-se de usar uma instrução <code>break</code> no final do loop e também modificar (incrementar) uma variável, para que a condição do <code>break</code> seja verdadeira em algum momento.</p> + +<pre class="brush: js notranslate">var i = 0; + +for (;;) { + if (i > 3) break; + console.log(i); + i++; +} +</pre> + +<h3 id="Usando_for_sem_uma_declaração">Usando <code>for</code> sem uma declaração </h3> + +<p>O ciclo <code>for</code> a seguir calcula a posição de deslocamento de um nó na seção [expressão final] e, portanto, não requer o uso de uma declaração ou de um bloco de declaração, e no seu lugar é usado um ponto-vírgula - <code>;</code>.</p> + +<pre class="brush: js notranslate">function showOffsetPos (sId) { + var nLeft = 0, nTop = 0; + + for (var oItNode = document.getElementById(sId); // inicialização + oItNode; // condition + nLeft += oItNode.offsetLeft, nTop += oItNode.offsetTop, oItNode = oItNode.offsetParent) // expressão final + /* empty statement */ ; + + console.log("Offset position of \"" + sId + "\" element:\n left: " + nLeft + "px;\n top: " + nTop + "px;"); +} + +// Exemplo de call: + +showOffsetPos("content"); + +// Resultado: +// "Offset position of "content" element: +// left: 0px; +// top: 153px;"</pre> + +<div class="note"><strong>Nota:</strong> Nesse caso, quando você não usa a seção de declaração, <strong>o</strong><strong> ponto-e-vírgula é colocada imediatamente após a declaração do ciclo</strong>.</div> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>ECMAScript 1st Edition.</td> + <td>Padrão</td> + <td> + <p>Definição inicial.</p> + </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.6.3', 'for statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-for-statement', 'for statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_em_Browsers">Compatibilidade em Browsers</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>{{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>Característica</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> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{jsxref("Statements/break", "break")}}</li> + <li>{{jsxref("Statements/continue", "continue")}}</li> + <li>{{jsxref("Statements/empty", "empty")}}</li> + <li>{{jsxref("Statements/while", "while")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/do...while"><code>do...while</code></a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in"><code>for...in</code></a></li> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of"><code>for...of</code></a></code></li> +</ul> diff --git a/files/pt-br/web/javascript/reference/statements/for_each...in/index.html b/files/pt-br/web/javascript/reference/statements/for_each...in/index.html new file mode 100644 index 0000000000..8206aa9f5a --- /dev/null +++ b/files/pt-br/web/javascript/reference/statements/for_each...in/index.html @@ -0,0 +1,126 @@ +--- +title: for each...in +slug: Web/JavaScript/Reference/Statements/for_each...in +tags: + - Declaração + - Deprecado + - Deprecated + - JavaScript + - Obsoleto +translation_of: Archive/Web/JavaScript/for_each...in +--- +<div>{{jsSidebar("Statements")}}</div> + +<div class="warning"> +<p>A declaração <code>for each...in</code> está obsoleta como parte do padrão ECMA-357 (<a href="/en-US/docs/Archive/Web/E4X" title="/en-US/docs/E4X">E4X</a>). O suporte E4X foi removido, mas o for each...in não será desativado e removido por questões de compatibilidade que precisam ser consideradas. Ao invés disso, procure utilizar <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of" title="/en-US/docs/JavaScript/Reference/Statements/for...of">for...of</a>. (Por favor, referir-se a {{ bug("791343")}}.)</p> + +<p><strong>O Firefox agora alerta sobre o uso de <code>for each...in e não funciona mais no Firefox Nighly.</code> Por favor veja <a href="/pt-BR/docs/Web/JavaScript/Reference/Errors/For-each-in_loops_are_deprecated">Alerta: Loops for-each-in do JavaScript 1.6 estão obsoletos</a> para ajuda com a migração.</strong></p> +</div> + +<p>A <code><strong>declaração for each...in</strong></code> repete uma variável especifica sobre todos os valores das propriedades do objeto. Para cada propriedade distinta, uma declaração específica é executada.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox"><code>for each (<em>variable</em> in <em>object</em>) { + <em>statement</em> +}</code></pre> + +<dl> + <dt><code>variável</code></dt> + <dd>Variável que itera sobre o valor da propriedade, opcionalmente declarado com a palavra-chave <code>var</code>. Essa variável é local à função, não ao loop.</dd> +</dl> + +<dl> + <dt><code>objeto</code></dt> + <dd>Objeto ao qual as propriedades são iteradas.</dd> +</dl> + +<dl> + <dt><font face="Consolas, Liberation Mono, Courier, monospace">declaração</font></dt> + <dd>Uma declaração a ser executada para cada propriedade. Para executar múltiplas declaração dentro do loop, utilize um <a href="/en-US/docs/Web/JavaScript/Reference/Statements/block" title="JavaScript/Reference/Statements/block">bloco</a> de declaração (<code>{ ... }</code>) para agrupar estas declarações.</dd> +</dl> + +<h2 id="Descrição">Descrição</h2> + +<p>Algumas propriedades internas não são iterada. Isso inclui todos os métodos internos dos objetos, ex. o método <code>String</code>'s <code>indexOf</code> . No entanto, todas propriedades definidas pelo usuários são iteradas.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Usando_for_each...in">Usando <code>for each...in</code></h3> + +<p><strong>Atenção:</strong> Nunca utiliza um loop assim com arrays. Apenas utilize em objetos. Veja <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in"><code>for...in</code></a> para mais detalhes.</p> + +<p>O seguinte código itera sobre as propriedades do objeto, calculando sua soma:</p> + +<pre class="brush:js">var sum = 0; +var obj = {prop1: 5, prop2: 13, prop3: 8}; + +for each (var item in obj) { + sum += item; +} + +console.log(sum); // escreve no log "26", que é 5+13+8</pre> + +<h2 id="Especifições">Especifições</h2> + +<p>Não faz parte da atual especificação ECMA-262. Implementado no JavaScript 1.6 e está obsoleto.</p> + +<h2 id="Compatibilidade_de_Browsers">Compatibilidade de Browsers</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("1.8")}}</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>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("1.0")}}</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><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in" title="JavaScript/Reference/Statements/for...in">for...in</a></code> - uma declaração similar que itera sobre a propriedade <em>names</em>.</li> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of" title="/en-US/docs/JavaScript/Reference/Statements/for...of">for...of</a></code> - uma declaração similar que itera sobre os <em>valores</em> da propriedade mas pode ser utilizado para iterar tipos, então para para objetos genéricos.</li> + <li><code><a href="/en-US/docs/JavaScript/Reference/Statements/for" title="JavaScript/Reference/Statements/for">for</a></code></li> +</ul> diff --git a/files/pt-br/web/javascript/reference/statements/funcoes_assincronas/index.html b/files/pt-br/web/javascript/reference/statements/funcoes_assincronas/index.html new file mode 100644 index 0000000000..808f0b0306 --- /dev/null +++ b/files/pt-br/web/javascript/reference/statements/funcoes_assincronas/index.html @@ -0,0 +1,149 @@ +--- +title: Funções assíncronas +slug: Web/JavaScript/Reference/Statements/funcoes_assincronas +tags: + - Função + - assíncrono +translation_of: Web/JavaScript/Reference/Statements/async_function +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>A declaração <code><strong>async function</strong></code> define uma <em>função assíncrona</em>, que retorna um objeto {{jsxref("Global_Objects/AsyncFunction","AsyncFunction")}}.</p> + +<div class="noinclude"> +<p>Você também pode definir funções assíncronas usando uma {{jsxref("Operators/async_function", "expressão async function")}}.</p> +</div> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox">async function <em>nome</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>instruções</em> +} +</pre> + +<dl> + <dt><code>nome</code></dt> + <dd>O nome da função.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>O nome de um parâmetro a ser passado para a função.</dd> +</dl> + +<dl> + <dt><code>instruções</code></dt> + <dd>As instruções que compõem o corpo da função.</dd> +</dl> + +<h2 id="Descrição">Descrição</h2> + +<p>Quando uma função assíncrona é chamada, ela retorna uma {{jsxref("Promise")}}. Quando a função assíncrona retorna um valor, a <code>Promise</code> será resolvida com o valor retornado. Quando a função assíncrona lança uma exceção ou algum valor, a <code>Promise</code> será rejeitada com o valor lançado.</p> + +<p>Uma função assíncrona pode conter uma expressão {{jsxref("Operators/await", "await")}}, que pausa a execução da função assíncrona e espera pela resolução da <code>Promise </code>passada, e depois retoma a execução da função assíncrona e retorna o valor resolvido.</p> + +<div class="note"> +<p>A proposta das funções <code>async/await</code> é de simplificar o uso de forma síncrona das <code>Promises</code> e executar alguns procedimentos em um grupo de <code>Promises</code>. Assim como <code>Promises</code> são similares a <code>callbacks</code> estruturados, funções <code>async/await</code> são similares à junção de <code>generators</code> com <code>P</code><code>romises</code>.</p> +</div> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Exemplo_simples">Exemplo simples</h3> + +<pre class="brush: js">function resolverDepoisDe2Segundos(x) { + return new Promise(resolve => { + setTimeout(() => { + resolve(x); + }, 2000); + }); +} + +async function adicionar1(x) { + var a = resolverDepoisDe2Segundos(20); + var b = resolverDepoisDe2Segundos(30); + return x + await a + await b; +} + +adicionar1(10).then(v => { + console.log(v); // exibe 60 depois de 2 segundos. +}); + +async function adicionar2(x) { + var a = await resolverDepoisDe2Segundos(20); + var b = await resolverDepoisDe2Segundos(30); + return x + a + b; +} + +adicionar2(10).then(v => { + console.log(v); // exibe 60 depois de 4 segundos. +}); +</pre> + +<h3 id="Reescrevendo_uma_cadeia_de_Promise_com_uma_função_async">Reescrevendo uma cadeia de <code>Promise</code> com uma função <code>async</code></h3> + +<p>Uma API que retorna uma {{jsxref("Promise")}} vai resultar em uma cadeia de <code>Promises</code> e separa a função em várias partes. Considere o seguinte código:</p> + +<pre class="brush: js">function pegarDadosProcessados(url) { + return baixarDados(url) // retorna uma Promise + .catch(e => { + return baixarDadosReservas(url) // retorna uma Promise + }) + .then(v => { + return processarDadosNoWorker(v); // retorna uma Promise + }); +} +</pre> + +<p>pode ser escrita em uma única função <code>async</code> desta forma:</p> + +<pre class="brush: js">async function pegarDadosProcessados(url) { + let v; + try { + v = await baixarDados(url); + } catch(e) { + v = await baixarDadosReservas(url); + } + return processarDadosNoWorker(v); +} +</pre> + +<p>Note que no exemplo acima não tem a instrução <code>await</code> na instrução do <code>return</code>, porque o valor retornado de uma função <code>async é </code>implícitamente passado por um {{jsxref("Promise.resolve")}}.</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Situação</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-async-function-definitions', 'async function')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Definição inicial no ES2017.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_browser">Compatibilidade de browser</h2> + +<div>{{Compat("javascript.statements.async_function")}}</div> + +<div id="compat-desktop"></div> + +<h3 id="Notas_específicas_do_Firefox">Notas específicas do Firefox</h3> + +<ul> + <li>A função <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Expression_closures">expression closure syntax</a> não é permitida com funções assíncronas e irão lançar a exceção <a href="/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a> a partir do Firefox 55.</li> +</ul> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/pt-BR/docs/Web/JavaScript/Reference/Operators/async_function">async_function</a></li> + <li><a href="/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/AsyncFunction">AsyncFunction</a></li> + <li><a href="/pt-BR/docs/Web/JavaScript/Reference/Operators/await">await</a></li> +</ul> diff --git a/files/pt-br/web/javascript/reference/statements/function/index.html b/files/pt-br/web/javascript/reference/statements/function/index.html new file mode 100644 index 0000000000..77915f919b --- /dev/null +++ b/files/pt-br/web/javascript/reference/statements/function/index.html @@ -0,0 +1,176 @@ +--- +title: Declaração de função +slug: Web/JavaScript/Reference/Statements/function +translation_of: Web/JavaScript/Reference/Statements/function +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>A <strong>declaração function </strong>define uma função com os especificados parâmetros.<strong> </strong></p> + +<p>Você pode também definir funções usando o construtor {{jsxref("Function")}} e uma {{jsxref("Operators/function", "function expression")}}.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox">function <em>name</em>([<em>param</em>,[, <em>param</em>,[..., <em>param</em>]]]) { + [<em>statements</em>] +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>O nome da função.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>O nome de um argumento a ser passado para a função. Uma função pode ter atè 255 argumentos.</dd> +</dl> + +<dl> + <dt><code>statements</code></dt> + <dd>As instruções que compõem o corpo da função.</dd> +</dl> + +<h2 id="Descrição">Descrição</h2> + +<p>Uma função criada com uma declaração function é um objeto <code>Function</code> e tem todas as propriedades, métodos e comportamentos dos objetos <code>Function</code>. Veja {{jsxref("Function")}} para informações detalhadas sobre as funções.</p> + +<p>Uma função pode também ser criada usando uma expressão (veja {{jsxref("Operators/function", "function expression")}}).</p> + +<p>Por padrão, funções retornam <code>undefined</code>. Para retornar qualquer outro valor, a função precisa ter uma instrução {{jsxref("Statements/return", "return")}} que especifica o valor para retorno.</p> + +<h3 id="Criando_funções_condicionalmente.">Criando funções condicionalmente.</h3> + +<p>Funções podem ser condicionalmente declaradas, isso é, uma instrução de função pode ser aninhada dentro de uma instrução <code>if</code>. A maioria dos navegadores que não sejam Mozilla ir tratar essas declarações condicionais como uma incondicional <span class="short_text" id="result_box" lang="pt"><span class="hps">e criará a função se a condição for true ou não, veja </span></span><a href="http://kangax.github.io/nfe/#function-statements">esse artigo</a> para uma visão geral. Portanto, ela não pode ser usada para <span class="short_text" id="result_box" lang="pt"><span class="hps">criação</span> de <span class="hps">expressões de função</span> <span class="hps">condicional</span><span>.</span></span></p> + +<h3 id="Declarações_de_funções_hoisting">Declarações de funções hoisting</h3> + +<p>Declarações de funções em JavaScript <span id="result_box" lang="pt"><span class="hps">são</span> hoisted</span> à<span lang="pt"><span class="hps"> definição da função</span><span>.</span></span> Você pode usar uma função antes de tê-la declarado:</p> + +<pre class="brush: js">hoisted(); // logs "foo" + +function hoisted() { + console.log("foo"); +} +</pre> + +<p>Note que {{jsxref("Operators/function", "function expressions")}} não são hoisted:</p> + +<pre class="brush: js">notHoisted(); // TypeError: notHoisted is not a function + +var notHoisted = function() { + console.log("bar"); +}; +</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Usando_funções">Usando funções</h3> + +<p>O seguinte código declara uma função que retorna a quantidade total das vendas, quando dados os números de unidades vendidas dos produtos a, b e c.</p> + +<pre class="brush: js">function calc_sales(units_a, units_b, units_c) { + return units_a * 79 + units_b * 129 + units_c * 699; +} +</pre> + +<h2 id="Especificações"><span class="short_text" id="result_box" lang="pt"><span class="hps">Especificações</span></span></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('ESDraft', '#sec-function-definitions', 'Function definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-13', 'Function definition')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-13', 'Function definition')}}</td> + <td>{{Spec2('ES3')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-13', 'Function definition')}}</td> + <td>{{Spec2('ES1')}}</td> + <td><span class="short_text" id="result_box" lang="pt"><span class="hps">Definição</span> <span class="hps">inicial.</span> <span class="hps">Implementado em</span> <span class="hps">JavaScript</span> <span class="hps">1.0.</span></span></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>{{jsxref("Functions_and_function_scope", "Functions and function scope")}}</li> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("Operators/function", "function expression")}}</li> + <li>{{jsxref("Statements/function*", "function* statement")}}</li> + <li>{{jsxref("Operators/function*", "function* expression")}}</li> + <li>{{jsxref("Functions/Arrow_functions", "Arrow functions")}}</li> + <li>{{jsxref("GeneratorFunction")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/statements/function_star_/index.html b/files/pt-br/web/javascript/reference/statements/function_star_/index.html new file mode 100644 index 0000000000..d80b9f8e3d --- /dev/null +++ b/files/pt-br/web/javascript/reference/statements/function_star_/index.html @@ -0,0 +1,203 @@ +--- +title: function* +slug: Web/JavaScript/Reference/Statements/function* +tags: + - ECMAScript6 + - Function + - Iterator + - JavaScript + - Statement +translation_of: Web/JavaScript/Reference/Statements/function* +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>A declaração <code><strong>function*</strong></code> (palavra chave <code>function</code> seguida de um asterisco) define uma <em>função geradora</em> (<em>generator function</em>), que retorna um objeto {{jsxref("Global_Objects/Generator","Generator")}}.</p> + +<p>{{EmbedInteractiveExample("pages/js/statement-functionasterisk.html")}}</p> + +<p>Você também pode definir funções geradoras usando o construtor {{jsxref("GeneratorFunction")}} ou a sintaxe da expressão de uma função. </p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="syntaxbox notranslate">function* <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +}</pre> + +<dl> + <dt><code>name</code></dt> + <dd>O nome da função.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>O nome do argumento que será passado á função. Uma função pode ter até 255 argumentos.</dd> +</dl> + +<dl> + <dt><code>statements</code></dt> + <dd>As instruções que formam o corpo da função.</dd> +</dl> + +<h2 id="Descrição">Descrição</h2> + +<p>Geradores são funções cuja execução pode ser interrompida e posteriormente reconduzida. Seus contextos (de associações de variáveis) ficarão salvos entre cada recondução.</p> + +<p>Geradores em JavaScript -- especialmente quando combinados com <em>Promises </em>-- são uma ferramenta muito poderosa para programação assíncrona, por mitigarem -- se não eliminarem -- problemas com callbacks, como o <a href="http://callbackhell.com/">Callback Hell</a> e <a href="https://frontendmasters.com/courses/rethinking-async-js/callback-problems-inversion-of-control/">Inversão de Controle</a>. Funções <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function">async</a></code> são fundamentadas nisso.</p> + +<p>Chamar uma função geradora não executa seu conteúdo imediatamente; ao invés disso um objeto <em><a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">iterator</a></em> é retornado. Quando o método <code>next()</code> do objeto <em>iterator</em> é chamado, o conteúdo da função do gerador é executado até a primeira expressão {{jsxref("Operators/yield", "yield")}}, que especifica o valor a ser devolvido do <em>iterator </em>ou com {{jsxref("Operators/yield*", "yield*")}} que delega para outra função geradora. O método <code style="font-style: normal; line-height: 1.5;">next()</code><span style="line-height: 1.5;"> retorna um objeto com uma propriedade </span><code><span style="font-family: consolas,monaco,andale mono,monospace; line-height: 1.5;">value</span></code><span style="line-height: 1.5;"> contendo o valor retornado e a propriedade <em>boolean</em>: </span><code><span style="font-family: consolas,monaco,andale mono,monospace; line-height: 1.5;">done</span></code><span style="line-height: 1.5;"> indicando se o gerador produziu seu último valor. Chamar o método <code>next()</code> com um argumento resumirá a execução da função geradora, substituindo a expressão <code>yield</code> onde a execução foi pausada com o argumento de <code>next()</code>.</span></p> + +<p><span style="line-height: 1.5;">Uma expressão <code>return</code> em um gerador, quando executada, fará com que o gerador termine (isto é, a propriedade <code>done</code> do objeto retornado será atribuído com o valor <code>true</code>). Se um valor foi retornado, este será usado como propriedade <code>value</code> do objeto retornado pelo gerador. Semelhantemente a uma expressão <code>return</code>, um erro lançado dentro do gerador o terminará -- a não ser que tratado no corpo do gerador. Quando um gerador estiver terminado, chamadas <code>next</code> subsequentes não executarão nenhum código do gerador, retornarão simplesmente um objeto da seguinte forma: <code>{value: undefined, done: true}</code>.</span></p> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Exemplo_simples">Exemplo simples</h3> + +<pre class="brush: js notranslate">function* idMaker(){ + var index = 0; + while(true) + yield index++; +} + +var gen = idMaker(); + +console.log(gen.next().value); // 0 +console.log(gen.next().value); // 1 +console.log(gen.next().value); // 2 +<code>console.log(gen.next().value); // 3</code> +// ...</pre> + +<h3 id="Exemplo_com_yield*">Exemplo com yield*</h3> + +<pre class="brush: js notranslate">function* outroGerador(i) { + yield i + 1; + yield i + 2; + yield i + 3; +} + +function* gerador(i){ + yield i; + yield* outroGerador(i); + yield i + 10; +} + +var gen = gerador(10); + +console.log(gen.next().value); // 10 +console.log(gen.next().value); // 11 +console.log(gen.next().value); // 12 +console.log(gen.next().value); // 13 +console.log(gen.next().value); // 20 +</pre> + +<h3 id="Passando_argumentos_em_geradores">Passando argumentos em geradores</h3> + +<pre class="notranslate"><code>function* logGenerator() { + console.log(0); + console.log(1, yield); + console.log(2, yield); + console.log(3, yield); +} + +var gen = logGenerator(); + +// a primeira chamada next é executada desde o início da função +// até a primeira declaração yield +gen.next(); // 0 +gen.next('pretzel'); // 1 pretzel +gen.next('california'); // 2 california +gen.next('mayonnaise'); // 3 mayonnaise</code></pre> + +<h3 id="Declaração_de_retono_em_um_gerador">Declaração de retono em um gerador</h3> + +<pre class="notranslate"><code>function* yieldAndReturn() { + yield "Y"; + return "R"; + yield "unreachable"; +} + +var gen = yieldAndReturn() +console.log(gen.next()); // { value: "Y", done: false } +console.log(gen.next()); // { value: "R", done: true } +console.log(gen.next()); // { value: undefined, done: true }</code></pre> + +<h3 id="Geradores_não_possuem_construtor">Geradores não possuem construtor</h3> + +<pre class="notranslate"><code>function* f() {} +var obj = new f; // lança o TypeError: f não é construtor</code></pre> + +<h3 id="Gerador_definido_em_uma_expressão">Gerador definido em uma expressão</h3> + +<pre class="notranslate"><code>const foo = function* () { + yield 10; + yield 20; +}; + +const bar = foo(); +console.log(bar.next()); // {value: 10, done: false}</code></pre> + +<h2 id="Specifications" name="Specifications">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-generator-function-definitions', 'function*')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definição inicial.</td> + </tr> + <tr> + <td>{{SpecName('ES2016', '#sec-generator-function-definitions', 'function*')}}</td> + <td>{{Spec2('ES2016')}}</td> + <td>Mudou para que <em>generators </em>não tenham a armadilha de [[Construct]] e irão lançar um erro, quando usados com <code>new</code>.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-generator-function-definitions', 'function*')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade entre Navegadores</h2> + +<div></div> + +<div id="compat-mobile">{{Compat("javascript.statements.generator_function")}}</div> + +<h2 id="Observações_específicas_Firefox">Observações específicas Firefox</h2> + +<h4 id="Generators_e_iterators_no_Firefox_em_versões_anteriores_a_26">Generators e iterators no Firefox em versões anteriores a 26</h4> + +<p>Versões mais antigas do Firefox implementam uma versão antiga da proposta de <em>generators</em>. Na versão mais antiga, <em>generators </em>foram intruídos a usarem a palavra chave <code>function</code>(sem um asterísco) dentre outras diferenças.</p> + +<h4 id="O_retorno_do_objeto_IteratorResult_ao_invés_de_um_throw">O retorno do objeto <code>IteratorResult</code> ao invés de um throw</h4> + +<p>Iniciando com Gecko 29 {{geckoRelease(29)}}, o <em>generator </em>finalizado não lança mais um {{jsxref("TypeError")}} "generator has already finished". Ao invés disso, ele retorna um objeto <code>IteratorResult</code>, como por exemplo <code>{ value: undefined, done: true }</code> ({{bug(958951)}}).</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{jsxref("Operators/function*", "function* expression")}}</li> + <li>{{jsxref("GeneratorFunction")}} object</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">The Iterator protocol</a></li> + <li>{{jsxref("Operators/yield", "yield")}}</li> + <li>{{jsxref("Operators/yield*", "yield*")}}</li> + <li>{{jsxref("Function")}} object</li> + <li>{{jsxref("Statements/function", "function declaration")}}</li> + <li>{{jsxref("Operators/function", "function expression")}}</li> + <li>{{jsxref("Functions_and_function_scope", "Functions and function scope")}}</li> + <li>Outras fontes na web: + <ul> + <li><a href="http://facebook.github.io/regenerator/">Regenerator</a> um ES6 generator que compila para ES5</li> + <li><a href="http://www.youtube.com/watch?v=qbKWsbJ76-s">Forbes Lindesay: Promises and Generators: control flow utopia -- JSConf EU 2013</a></li> + <li><a href="https://www.youtube.com/watch?v=ZrgEZykBHVo&list=PLuoyIZT5fPlG44bPq50Wgh0INxykdrYX7&index=1">Hemanth.HM: The New gen of *gen(){}</a></li> + <li><a href="http://taskjs.org/">Task.js</a></li> + </ul> + </li> +</ul> diff --git a/files/pt-br/web/javascript/reference/statements/if...else/index.html b/files/pt-br/web/javascript/reference/statements/if...else/index.html new file mode 100644 index 0000000000..e61389f5bb --- /dev/null +++ b/files/pt-br/web/javascript/reference/statements/if...else/index.html @@ -0,0 +1,211 @@ +--- +title: if...else +slug: Web/JavaScript/Reference/Statements/if...else +tags: + - Instrução + - JavaScript + - condicional + - if else + - se então +translation_of: Web/JavaScript/Reference/Statements/if...else +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>A condicional<strong> if </strong> é uma estrutura condicional que executa a afirmação, dentro do bloco, se determinada condição for verdadeira. Se for falsa, executa as afirmações dentro de <strong>else</strong>.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox">if (<em>condição</em>) <em>afirmação1 [</em>else <em>afirmação2</em>]</pre> + +<dl> + <dt><code>condição</code></dt> + <dd>Uma <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions">expressão</a> (premissa) que pode ser avaliada como verdadeira (true) ou falsa (false), veja lógica de programação para entender melhor.</dd> +</dl> + +<dl> + <dt><code>condição1</code></dt> + <dd>Condicional que será executada caso a condição em <em>if</em> seja verdadeira (true). Pode ser qualquer instrução, incluindo mais condicionais <em>if</em> aninhadas à instrução. Para executar multiplas instruções, faça um agrupamento com uma instrução em <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/block" title="en/JavaScript/Reference/Statements/block">bloco</a> ({ ... }). Para não executar nenhuma instrução, utilize uma instrução vazia (<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/Empty">empty</a>).</dd> +</dl> + +<dl> + <dt><code>condição2</code></dt> + <dd>Condicional que será executada caso a condição em <em>if</em> seja avaliada como falsa (false) e a condição <em>else</em> exista. Pode ser qualquer instrução, incluindo instruões em bloco e mais condicionais <em>if</em> aninhadas. </dd> +</dl> + +<h2 id="Descrição">Descrição</h2> + +<p>Múltiplas condicionais<em> if ... else</em> podem ser aninhados quando necessário. Observe que não existe elseif (em uma palavra). O correto é a instrução com espaços (else if), conforme abaixo:</p> + +<pre class="eval">if (<em>condição1</em>) + <em>instrução1</em> +else if (<em>condição2</em>) + <em>instrução2</em> +else if (<em>condição3</em>) + <em>instrução3</em> +... +else + <em>instruçãoN</em> +</pre> + +<p>Para ver seu funcionamento, abaixo está a instrução como deveria ser caso identada corretamente.</p> + +<pre class="eval">if (<em>condição1</em>) + <em>instrução1</em> +else + if (<em>condição2</em>) + <em>instrução2</em> + else + if (<em>condição3</em>) +... +</pre> + +<p>Para executar multiplas instruções dentro de uma condição, utilize um bloco (<code>{ ... }</code>) . Em geral, é sempre uma boa prática utilizar instruções dentro de blocos, especialmente em códigos que envolvam condicionais <em>if </em>aninhadas:</p> + +<pre class="eval">if (<em>condição</em>) { + <em>instrução1</em> +} else { + <em>instrução2</em> +} +</pre> + +<p>Não confunda os valores boolean primitivos <code>true</code> e <code>false</code> com os valores true e false do objeto <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="en/JavaScript/Reference/Global_Objects/Boolean">Boolean</a>. Qualquer valor que não for <code>undefined</code>, <code>null</code>, <code>0</code>, <code>NaN</code>, ou uma string vazia (<code>""</code>), e qualquer objeto, incluíndo um objeto Boolean cujo valor é false, é avaliado como true quando passado por uma condicional. Por exemplo:</p> + +<pre class="brush: js">var b = new Boolean(false); +if (b) // essa condição é avaliada como true +</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Usando_if...else">Usando <code>if...else</code></h3> + +<pre class="brush: js">if (cipher_char === from_char) { + result = result + to_char; + x++; +} else { + result = result + clear_char; +} +</pre> + +<h3 id="Usando_else_if">Usando <code>else if</code></h3> + +<p>Perceba que não existe sintaxe de <code>elseif</code> em JavaScript. Entretanto, você pode escrevê-la com um espaço entre o if e o else.</p> + +<pre class="brush: js">if (x > 5) { + +} else if (x > 50) { + +} else { + +}</pre> + +<h3 id="Atribuições_junto_de_expressões_condicionais">Atribuições junto de expressões condicionais</h3> + +<p>É recomendado não utilizar atribuições simples junto de uma expressão condicional, visto que atribuições podem ser confundidas com igualdade ao olhar o código. Por exemplo, não use o código abaixo:</p> + +<pre class="brush: js">if (x = y) { + /* faça a coisa certa */ +} +</pre> + +<p>Caso você precise utilizar uma atribuição em uma expressão condicional, uma prática comum é inserir parênteses adicionais em volta da atribuição. Por exemplo:</p> + +<pre class="brush: js">if ((x = y)) { + /* faça a coisa certa */ +} +</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('ESDraft', '#sec-if-statement', 'if statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-if-statement', 'if statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.5', 'if statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-12.5', 'if statement')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-12.5', 'if statement')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definição Inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_entre_Navegadores">Compatibilidade entre Navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</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>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>{{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("Statements/block", "block")}}</li> + <li>{{jsxref("Statements/switch", "switch")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/statements/import.meta/index.html b/files/pt-br/web/javascript/reference/statements/import.meta/index.html new file mode 100644 index 0000000000..9e6a31a523 --- /dev/null +++ b/files/pt-br/web/javascript/reference/statements/import.meta/index.html @@ -0,0 +1,93 @@ +--- +title: import.meta +slug: Web/JavaScript/Reference/Statements/import.meta +translation_of: Web/JavaScript/Reference/Statements/import.meta +--- +<div>{{JSSidebar("Statements")}}</div> + +<p><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">O objeto mostra o </span></font><strong>import.meta</strong></code> mostra o contexto específico metadata para um módulo JavaScript. Ele contém informações sobre o módulo, como a sua URL.</p> + +<h2 id="Sintaxe">Sintaxe </h2> + +<pre class="syntaxbox notranslate">import.meta</pre> + +<h2 id="Descrição">Descrição</h2> + +<p>A sintaxe consiste na palavra chave {{JSxRef("Statements/import","import")}}, um ponto, e o identificador <code>meta</code>. Normalmente no lado esquerdo do ponto é o objeto na qual a propriedade de acesso é realizada is, mas aqui <code>import</code> não é exatamente um objeto.</p> + +<p>O objeto<code>import.meta</code> foi criado no implementação ECMAScript,com um protótipo {{JSxRef("null")}}. O objeto é extensível, e suas propriedades são grávaveis, configuráveis, e enumeráveis.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Usando_import.meta">Usando import.meta</h3> + +<p>Dado o modulo <code>my-module.js</code></p> + +<pre class="brush: html notranslate"><script type="module" src="my-module.js"></script> +</pre> + +<p>Você pode acessar essa meta informação sobre o modulo usando o objeto <code>import.meta.</code></p> + +<pre class="brush: js; notranslate">console.log(import.meta); // { url: "file:///home/user/my-module.js" }</pre> + +<p>Irá returnar um objeto com propriedade URL indicando a base URL do módulo. Isso vai ser o URL da qual o script obteve, por scripts external, ou a base do documento URL contendo documento, para scripts inline.</p> + +<p>Note que isso irá incluir parâmetros query e/ou cerquilha (i.e., seguindo o <code>?</code> ou <code>#</code>).</p> + +<p>Por exemplo, seguindo esse HTML:</p> + +<pre class="brush: html notranslate"><script type="module"> +import './index.mjs?someURLInfo=5'; +</script></pre> + +<p>O arquivo JavaScript a seguir vai registrar o parâmetro `<code>someURLInfo</code>:</p> + +<pre class="brush: js notranslate">// index.mjs +new URL(import.meta.url).searchParams.get('someURLInfo'); // 5</pre> + +<p>O mesmo se aplica quando um arquivo importa outro:</p> + +<pre class="brush: js notranslate">// index.mjs +import './index2.mjs?someURLInfo=5'; + +// index2.mjs +new URL(import.meta.url).searchParams.get('someURLInfo'); // 5</pre> + +<p>Note que enquanto o Node.js vai passar nos parâmetros query (ou na cerquilha) como no exemplo passsado, a partir do Node 14.1.0, a URL com parâmetro query vai dar erro quando carregar no formulário <code>node --experimental-modules index.mjs?someURLInfo=5</code> (é tratado como um arquivo ao invés de uma URL nesse contexto).</p> + +<p>Nesse arquivo específico, o argumento passado pode ser complementar para ser usado na ampla aplicação <code>location.href</code> (com strings query ou cerquilha adicionada depois do caminho de arquivo HTML) (ou por Node.js, através do <code>process.argv</code>).</p> + +<h2 id="Especifícações">Especifícações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especifícação</th> + </tr> + <tr> + <td><code><a href="https://tc39.es/proposal-import-meta/#prod-ImportMeta">import.meta</a></code> </td> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "webappapis.html#hostgetimportmetaproperties", "import.meta")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compartibilidade_no_Browser"> Compartibilidade no Browser </h2> + +<div class="hidden">A tabela de compartibilidade nessa página é gerado por um dado estruturado.Se você gostaria de contribuir para esse dado, por favor, acesso <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e nos envie um pull request.</div> + +<p>{{Compat("javascript.statements.import_meta")}}</p> + +<h3 id="Progressão_de_implementação">Progressão de implementação</h3> + +<p>A tabela seguinte fornece um status de implementação diária para essa feature, porque ela ainda não alcançou a estabilidade cross-browser. Os dados são gerados por relevantes testes de feature no <a href="https://github.com/tc39/test262">Test262</a>, o padrão de teste para JavaScript, em build noturno, ou no ultimo lançamento de cada engine browser de JavaScript.</p> + +<div>{{EmbedTest262ReportResultsTable("import.meta")}}</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{JSxRef("Statements/import", "import")}}</li> + <li>{{JSxRef("Statements/export", "export")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/statements/import/index.html b/files/pt-br/web/javascript/reference/statements/import/index.html new file mode 100644 index 0000000000..a87ed0f4bf --- /dev/null +++ b/files/pt-br/web/javascript/reference/statements/import/index.html @@ -0,0 +1,286 @@ +--- +title: import +slug: Web/JavaScript/Reference/Statements/import +tags: + - ECMAScript 2015 + - JavaScript + - Modules + - Reference + - Statement + - dynamic import + - import +translation_of: Web/JavaScript/Reference/Statements/import +--- +<div>{{jsSidebar("Statements")}}</div> + +<div> +<p>A declaração estática <strong><code>import</code></strong> é usada para importar vínculos que são exportados por um outro módulo. Os módulos importados estão em {{JSxRef("Strict_mode","strict mode")}}, declarado como tal ou não. A declaração <code>import</code> não pode ser usada em scripts embutidos, a menos que tal script tenha um <code>type="module"</code>.</p> + +<p>Há também uma função dinâmica<strong> </strong><code><strong>import()</strong></code>, que não requer scripts de <code>type="module"</code>.</p> + +<p>A compatibilidade com versões anteriores pode ser garantida usando o atributo <code>nomodule </code>na tag de script.</p> + +<p>A importação dinâmica é útil em situações em que você deseja carregar um módulo condicionalmente ou sob demanda. A forma estática é preferível para carregar dependências iniciais e pode se beneficiar mais prontamente de ferramentas de análise estática e <a href="/en-US/docs/Glossary/Tree_shaking">tree shaking</a>.</p> +</div> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre>import <em>defaultExport</em> from "<em>module-name</em>"; +import * as <em>name</em> from "<em>module-name</em>"; +import { <em>export </em>} from "<em>module-name</em>"; +import { <em>export</em> as <em>alias </em>} from "<em>module-name</em>"; +import { <em>export1 , export2</em> } from "<em>module-name</em>"; +import { <em>foo , bar</em> } from "<em>module-name/path/to/specific/un-exported/file</em>"; +import { <em>export1 , export2</em> as <em>alias2</em> , <em>[...]</em> } from "<em>module-name</em>"; +import <em>defaultExport</em>, { <em>export</em> [ , <em>[...]</em> ] } from "<em>module-name</em>"; +import <em>defaultExport</em>, * as <em>name</em> from "<em>module-name</em>"; +import "<em>module-name</em>"; var <em>promise</em> = import("module-name"); // This is a stage 3 proposal.</pre> + +<dl> + <dt><code>defaultExport</code></dt> + <dd>Nome que de referência para a exportação padrão do módulo.</dd> + <dt><code>module-name</code></dt> + <dd>O módulo para importar. Geralmente, esse é um nome de caminho relativo ou absoluto para o arquivo <code>.js</code> contendo esse módulo. Certos empacotadores podem permitir ou exigir o uso da extensão; verifique seu ambiente. Apenas aspas simples e aspas duplas são permitidas.</dd> + <dt><code>name</code></dt> + <dd>Nome do objeto do módulo que será usado como um tipo de espaço de nomes ao se referir às importações.</dd> + <dt><code>export, exportN</code></dt> + <dd>Nome das exportações a serem importadas.</dd> + <dt><code>alias, aliasN</code></dt> + <dd>Nomes que se referem às importações nomeadas.</dd> +</dl> + +<h2 id="Descrição">Descrição</h2> + +<p>O parâmetro name é o nome do "objeto módulo", que será usado como um tipo de namespace para se referir às exportações. Os parâmetros de exportação especificam exportações nomeadas individuais, enquanto a importação * como sintaxe de nome importa todos eles. Abaixo estão alguns exemplos para esclarecer a sintaxe.</p> + +<h3 id="Importar_o_conteúdo_de_todo_um_módulo">Importar o conteúdo de todo um módulo</h3> + +<p>Isso insere <code>myModule</code> no escopo atual, contendo todas as exportações do módulo no arquivo localizado em <code>/modules/my-module.js</code>.</p> + +<pre><code>import * as myModule from '/modules/my-module.js';</code></pre> + +<p>Aqui, acessar as exportações significa usar o nome do módulo ("myModule" neste caso) como um namespace. Por exemplo, se o módulo importado acima incluir um export <code>doAllTheAmazingThings()</code>, você o chamaria assim:</p> + +<pre><code>myModule.doAllTheAmazingThings();</code></pre> + +<h3 id="Importar_uma_única_exportação_de_um_módulo">Importar uma única exportação de um módulo</h3> + +<p>Dado um objeto ou valor chamado <code>myExport</code>que foi exportado do módulo <code>my-module</code> implicitamente (porque o módulo inteiro é exportado) ou explicitamente (usando a instrução {{JSxRef("Statements/export", "export")}} statement), isso insere <code>myExport</code> no escopo atual.</p> + +<pre><code>import {myExport} from '</code>/modules/my-module.js';</pre> + +<h3 id="Importar_várias_exportações_do_módulo">Importar várias exportações do módulo</h3> + +<p>Isso inclui tanto <code>foo</code> como <code>bar</code> no escopo atual.</p> + +<h3 id="Importar_uma_exportação_com_um_alias_mais_conveniente">Importar uma exportação com um alias mais conveniente</h3> + +<p>Você pode renomear uma exportação ao importá-la. Por exemplo, isso insere <code>shortName</code> no escopo atual.</p> + +<p> </p> + +<pre><code>import {reallyReallyLongModuleExportName as shortName} +</code> from '/modules/my-module.js';</pre> + +<h3 id="Renomear_várias_exportações_durante_a_importação">Renomear várias exportações durante a importação</h3> + +<p>Importe várias exportações de um módulo com aliases convenientes.</p> + +<p> </p> + +<pre><code>import { + reallyReallyLongModuleExportName as shortName, + anotherLongModuleName as short +</code>} from '/modules/my-module.js';</pre> + +<h3 id="Importar_um_módulo_apenas_para_seus_efeitos_colaterais">Importar um módulo apenas para seus efeitos colaterais</h3> + +<p>Importe um módulo inteiro somente para efeitos colaterais, sem importar nada. Isso executa o código global do módulo, mas na verdade não importa nenhum valor.</p> + +<p> </p> + +<pre>import '/modules/my-module.js';</pre> + +<h3 id="Importando_Padrões">Importando Padrões</h3> + +<p>É possível ter um padrão {{JSxRef ("Declarações / exportação", "exportação")}} (seja um objeto, uma função, uma classe etc.). A declaração de importação pode então ser usada para importar esses padrões.</p> + +<p> </p> + +<p>A versão mais simples importa diretamente o padrão:</p> + +<p> </p> + +<pre><code>import myDefault from '/modules/my-module.</code>js';</pre> + +<p> </p> + +<p>Também é possível usar a sintaxe padrão com as vistas acima (importações de namespace ou importações nomeadas). Em tais casos, a importação padrão terá que ser declarada primeiro. Por exemplo:</p> + +<p> </p> + +<pre><code>import myDefault, * as myModule from '/modules/my-module.js'; +// myModule used as a namespac</code>e</pre> + +<p>Ou</p> + +<p> </p> + +<pre><code>import myDefault, {foo, bar} from '/modules/my-module.js'; +</code>// specific, named imports</pre> + +<p> </p> + +<h3 id="Importações_Dinâmicas">Importações Dinâmicas</h3> + +<p> </p> + +<p>A palavra-chave <code>import</code> pode ser chamada como uma função para importar dinamicamente um módulo. Quando usado dessa maneira, retorna uma promessa.</p> + +<p> </p> + +<pre><code>import('/modules/my-module.js') + .then((module) => { + // Do something with the module. + </code> });</pre> + +<p> </p> + +<p>Este formulário também suporta a palavra-chave await.</p> + +<p> </p> + +<pre><code>let module = await import('/modules/my-module.js');</code> +</pre> + +<p> </p> + +<p> </p> + +<p> </p> + +<p> </p> + +<p> </p> + +<p> </p> + +<p> </p> + +<p> </p> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Padrão_Import">Padrão Import</h3> + +<p>O código abaixo mostra como importar um módulo secundário para auxiliar no processamento de uma requisição AJAX que retorna um JSON.</p> + +<p> </p> + +<h4 id="O_Módulo_file.js">O Módulo: file.js</h4> + +<p> </p> + +<pre><code>function getJSON(url, callback) { + let xhr = new XMLHttpRequest(); + xhr.onload = function () { + callback(this.responseText) + }; + xhr.open('GET', url, true); + xhr.send(); +} + +export function getUsefulContents(url, callback) { + getJSON(url, data => callback(JSON.parse(data))); +}</code></pre> + +<p><strong>O programa principal: main.js</strong></p> + +<p> </p> + +<pre class="brush: js">im<code>port { getUsefulContents } from '/modules/file.js'; + +getUsefulContents('http://www.example.com', + data => { doSomethingUseful(data); });</code></pre> + +<h3 id="Dynamic_Import">Dynamic Import</h3> + +<p>Este exemplo mostra como carregar a funcionalidade em uma página com base em uma ação do usuário, nesse caso, um clique no botão e, em seguida, chamar uma função dentro desse módulo. Esta não é a única maneira de implementar essa funcionalidade. A função <code>import()</code> também é compatível com <code>await</code>.</p> + +<p> </p> + +<pre class="brush: js"><code>const main = document.querySelector("main"); +for (const link of document.querySelectorAll("nav > a")) { + link.addEventListener("click", e => { + e.preventDefault(); + + import('/modules/my-module.js') + .then(module => { + module.loadPageInto(main); + }) + .catch(err => { + main.textContent = err.message; + }); + }); +}</code></pre> + +<p> </p> + +<p> </p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Estado</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td><a href="https://github.com/tc39/proposal-dynamic-import/#import">"function-like" dynamic <code>import()</code> proposal</a></td> + <td>Stage 3</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("ESDraft", "#sec-imports", "Imports")}}</td> + <td>{{Spec2("ESDraft")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("ES2018", "#sec-imports", "Imports")}}</td> + <td>{{Spec2("ES2018")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("ES2017", "#sec-imports", "Imports")}}</td> + <td>{{Spec2("ES2017")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("ES2016", "#sec-imports", "Imports")}}</td> + <td>{{Spec2("ES2016")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("ES2015", "#sec-imports", "Imports")}}</td> + <td>{{Spec2("ES2015")}}</td> + <td>Definição inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_entre_navegadores">Compatibilidade entre navegadores</h2> + +<p>{{Compat("javascript.statements.import")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{JSxRef("Statements/export", "export")}}</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import.meta"><code>import.meta</code></a></li> + <li><a href="https://blogs.windows.com/msedgedev/2016/05/17/es6-modules-and-beyond/">Previewing ES6 Modules and more from ES2015, ES2016 and beyond</a></li> + <li><a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a>, Hacks blog post by Jason Orendorff</li> + <li><a href="https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/">ES modules: A cartoon deep-dive</a>, Hacks blog post by Lin Clark</li> + <li><a href="http://exploringjs.com/es6/ch_modules.html">Axel Rauschmayer's book: "Exploring JS: Modules"</a></li> +</ul> diff --git a/files/pt-br/web/javascript/reference/statements/index.html b/files/pt-br/web/javascript/reference/statements/index.html new file mode 100644 index 0000000000..42b9a2850e --- /dev/null +++ b/files/pt-br/web/javascript/reference/statements/index.html @@ -0,0 +1,128 @@ +--- +title: Instruções e declarações +slug: Web/JavaScript/Reference/Statements +tags: + - NeedsTranslation + - TopicStub +translation_of: Web/JavaScript/Reference/Statements +--- +<div>{{jsSidebar("Instruções")}}</div> + +<p>Aplicações em JavaScript são realizadas através de instruções com uma sintaxe apropriada. Uma única instrução pode abranger multiplas linhas. Multiplas instruções podem estar contidas em uma única linha se cada instrução estiver separada por ponto e vírgula ( ; ).</p> + +<h2 id="Instruções_e_declarações_por_categoria">Instruções e declarações por categoria</h2> + +<p>Para visualizar em ordem alfabética use a barra de rolagem à esquerda.</p> + +<h3 id="Control_flow">Control flow</h3> + +<dl> + <dt>{{jsxref("Statements/block", "Block")}}</dt> + <dd>Uma instrução de bloqueio é usada para um grupo de zero ou mais instruções. O bloqueio é delimitado por um par de chaves.</dd> + <dt>{{jsxref("Statements/break", "break")}}</dt> + <dd>Termina o atual loop, troca, ou nomeia instruções e transfere o controle do programa para a próxima instrução após a que foi terminada agora.</dd> + <dt>{{jsxref("Statements/continue", "continue")}}</dt> + <dd>Termina a execução das instruções na atual iteração do atual loop, e continua a execução do loop com a seguinte iteração.</dd> + <dt>{{jsxref("Statements/Empty", "Empty")}}</dt> + <dd>Uma instrução vazia é usada para gerar uma "não-instrução", ainda que o JavaScrpit espere uma.</dd> + <dt>{{jsxref("Statements/if...else", "if...else")}}</dt> + <dd>Executa uma instrução se a condição especificada é verdadeira. Se a condição é falsa, outra instrução pode ser executada.</dd> + <dt>{{jsxref("Statements/switch", "switch")}}</dt> + <dd>Retorna uma expressão, combinando o valor da expressão a condição do caso, e executa a condição associada a este caso.</dd> + <dt>{{jsxref("Statements/throw", "throw")}}</dt> + <dd>Aplica uma exceção definida pelo usuário.</dd> + <dt>{{jsxref("Statements/try...catch", "try...catch")}}</dt> + <dd>Marca um bloco de instruções para tentar, e especifica a resposta, uma exceção deve ser retornada.</dd> +</dl> + +<h3 id="Declarações">Declarações</h3> + +<dl> + <dt>{{jsxref("Statements/var", "var")}}</dt> + <dd>Declara uma variável, opcionalmente inicializando com um valor.</dd> + <dt>{{experimental_inline}} {{jsxref("Statements/let", "let")}}</dt> + <dd>Declara acesso ao local da variável, opcionalmente inicializando com um valor.</dd> + <dt>{{experimental_inline}} {{jsxref("Statements/const", "const")}}</dt> + <dd>Declara uma constante de apenas leitura.</dd> +</dl> + +<h3 id="Funções_e_classes">Funções e classes</h3> + +<dl> + <dt>{{jsxref("Statements/function", "function")}}</dt> + <dd>Declara uma função com os parâmetros especificos.</dd> + <dt>{{experimental_inline}} {{jsxref("Statements/function*", "function*")}}</dt> + <dd>Gera funções habilitando iteradores de escrita mais facilmente.</dd> + <dt>{{jsxref("Statements/return", "return")}}</dt> + <dd>Especifica o valor a ser retornado por uma função.</dd> + <dt>{{experimental_inline}} {{jsxref("Statements/class", "class")}}</dt> + <dd>Declara uma classe.</dd> +</dl> + +<h3 id="Iterações">Iterações</h3> + +<dl> + <dt>{{jsxref("Statements/do...while", "do...while")}}</dt> + <dd>Cria um loop que executa uma especifica instrução até que a condição de teste seja falsa. A condição é retornada depois da execução da instrução, resultando na instrução especificada executando ao menos uma vez.</dd> + <dt>{{jsxref("Statements/for", "for")}}</dt> + <dd>Cria um loop que consiste em três opções de expressões, entre parenteses e separado por ponto e vírgula, seguido pela instrução executada no loop.</dd> + <dt>{{deprecated_inline}} {{non-standard_inline()}} {{jsxref("Statements/for_each...in", "for each...in")}}</dt> + <dd>Itera uma variável especificada sobre todos os valores das propriedades do objeto. Para cada propriedade distinta, uma instrução especificada é executada.</dd> + <dt>{{jsxref("Statements/for...in", "for...in")}}</dt> + <dd>Itera através de enumeráveis propriedades de um objeto, em ordem arbitrária. Para cada propriedade distinta, instruções podem ser executadas.</dd> + <dt>{{experimental_inline}} {{jsxref("Statements/for...of", "for...of")}}</dt> + <dd>Itera através de objetos iteráveis (incluindo <a href="https://developer.mozilla.org/en-US/docs/Core_JavaScript_1.5_Reference/Global_Objects/Array" title="Array">arrays</a>, array-like objects, <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Iterators_and_Generators" title="Iterators and generators">iterators and generators</a>), invocando uma iteração personalizada com instruções para serem executadas pelo valor de cada propriedade.</dd> + <dt>{{jsxref("Statements/while", "while")}}</dt> + <dd>Cria um loop que executa uma especifica instrução enquanto o teste da condição for positivo. A condição é retornada antes de executar a instrução.</dd> +</dl> + +<h3 id="Outros">Outros</h3> + +<dl> + <dt>{{jsxref("Statements/debugger", "debugger")}}</dt> + <dd>Invoca qualquer funcionalidade de depuração disponível. Se não há funcionabilidade disponível, a instrução não tem efeito.</dd> + <dt>{{experimental_inline}} {{jsxref("Statements/export", "export")}}</dt> + <dd>Usado para exportar funções que os deixa disponível para importação em módulos externos, outros scripts.</dd> + <dt>{{experimental_inline}} {{jsxref("Statements/import", "import")}}</dt> + <dd>Usado para importar funções exportadas de um módulo externo, outro script.</dd> + <dt>{{jsxref("Statements/label", "label")}}</dt> + <dd>Fornece uma instrução com um identificador que pode ser referido usando <code>break</code> ou <code>continue</code> instruções.</dd> +</dl> + +<dl> + <dt>{{deprecated_inline}} {{jsxref("Statements/with", "with")}}</dt> + <dd>Extende o alcance de uma instruçã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>ECMAScript 1st Edition.</td> + <td>Standard</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12', 'Statements')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>New: function*, let, for...of, yield, class</td> + </tr> + </tbody> +</table> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators">Operators</a></li> +</ul> diff --git a/files/pt-br/web/javascript/reference/statements/label/index.html b/files/pt-br/web/javascript/reference/statements/label/index.html new file mode 100644 index 0000000000..b1f9aeb5af --- /dev/null +++ b/files/pt-br/web/javascript/reference/statements/label/index.html @@ -0,0 +1,101 @@ +--- +title: label (Etiqueta) +slug: Web/JavaScript/Reference/Statements/label +tags: + - JavaScript + - Statement +translation_of: Web/JavaScript/Reference/Statements/label +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>Provém uma declaração com um indentificador o qual pode ser referido posteriormente utilizando-se os comandos <em>break</em> ou <em>continue</em>.</p> + +<p>Por exemplo, você pode usar um <em>label</em> para identificar um laço e então com um comando de <em>break</em> ou <em>continue</em> indicar se este deve ser interrompido ou então continuar sua execução.</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="syntaxbox"><em>label</em> : + declaração +</pre> + +<h3 id="Parameters" name="Parameters">Parâmetros</h3> + +<dl> + <dt><code>label</code></dt> + <dd>Qualquer idenfiticador JavaScript válido que não é uma palavra reservada.</dd> + <dt><code>declaração</code></dt> + <dd>Uma declaração qualquer. <em>break</em> pode ser utilizado com qualquer declaração entiquetada (com <em>label</em>) , assim como o <em>continue</em> também pode.</dd> +</dl> + +<div class="warning"> +<h3 id="Avoid_using_labels" name="Avoid_using_labels">Evite usar labels</h3> + +<p>Labels não são comunmente utilizados em JavaScript já que estes fazem com que programas fiquei mais difíceis de ler e entender. Sempre que possível evite utilizar labels e, dependendo dos casos, prefira <a href="https://developer.mozilla.org/pt-BR/docs/JavaScript/Reference/Statements/function">chamar funções</a> ou <a href="https://developer.mozilla.org/pt-BR/docs/JavaScript/Reference/Statements/throw">lançar um erro</a>.</p> +</div> + +<h2 id="Examples" name="Examples">Examplos</h2> + +<h3 id="Example_1" name="Example_1"><code>Exemplo com continue</code></h3> + +<pre class="brush: js">var i, j; + +loop1: +for (i = 0; i < 3; i++) { //O primeiro 'for' é etiquetado com "loop1" + loop2: + for (j = 0; j < 3; j++) { //O segundo é etiquetado com "loop2" + if (i == 1 && j == 1) { + continue loop1; + } else { + console.log("i = " + i + ", j = " + j); + } + } +} + +// Sua saída é: +// "i = 0, j = 0" +// "i = 0, j = 1" +// "i = 0, j = 2" +// "i = 1, j = 0" +// "i = 2, j = 0" +// "i = 2, j = 1" +// "i = 2, j = 2" +// Note como pula-se "i = 1, j = 1" e "i = 1, j = 2" +</pre> + +<h3 id="Example_2" name="Example_2">Exemplo 2 <code>(continue)</code></h3> + +<p>Dado uma lista de itens e outra de testes, este exemplo conta o número de ítens que passam em todos os testes.</p> + +<pre class="brush: js">var itemsPassed = 0; +var i, j; + +top: +for (i = 0; i < items.length; i++){ + for (j = 0; j < tests.length; j++) + if (!tests[j].pass(items[i])) + continue top; + itemsPassed++; +}</pre> + +<h3 id="Example_3" name="Example_3">Exemplo 3 <code>(break)</code></h3> + +<p>Dado uma lista de ítens e uma lista de testes, neste exemplo determina-se se todos os ítens passam em todos os testes.</p> + +<pre class="brush: js">var allPass = true; +var i, j; + +top: +for (i = 0; items.length; i++) + for (j = 0; j < tests.length; i++) + if (!tests[j].pass(items[i])){ + allPass = false; + break top; + } +</pre> + +<h2 id="See_also" name="See_also">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/JavaScript/Reference/Statements/break" title="JavaScript/Reference/Statements/break">break</a></li> + <li><a href="/en-US/docs/JavaScript/Reference/Statements/continue" title="JavaScript/Reference/Statements/continue">continue</a></li> +</ul> diff --git a/files/pt-br/web/javascript/reference/statements/let/index.html b/files/pt-br/web/javascript/reference/statements/let/index.html new file mode 100644 index 0000000000..757754a08a --- /dev/null +++ b/files/pt-br/web/javascript/reference/statements/let/index.html @@ -0,0 +1,140 @@ +--- +title: let +slug: Web/JavaScript/Reference/Statements/let +tags: + - ECMAScript 2015 + - JavaScript + - Variable declaration + - Variables +translation_of: Web/JavaScript/Reference/Statements/let +--- +<div> +<div>{{jsSidebar("Statements")}}</div> +</div> + +<p>Declara uma variável local no escopo do bloco atual, opcionalmente iniciando-a com um valor.</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<p>Definição <code>let</code>:</p> + +<pre class="syntaxbox">let var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]];</pre> + +<p>Expressão <code>let</code>:</p> + +<pre class="syntaxbox">let (var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]]) expression;</pre> + +<p>Instrução <code>let</code>:</p> + +<pre class="syntaxbox">let (var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]]) statement;</pre> + +<h3 id="Parameters" name="Parameters">Parâmetros</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Parameter</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>var1</code>, <code>var2</code>, …, <code>varN</code></td> + <td>Nome da variável. Pode ser qualquer identificador válido.</td> + </tr> + <tr> + <td><code>value1</code>, <code>value2</code>, …, <code>valueN</code></td> + <td>Valor inicial da variável. Pode ser qualquer expressão válida.</td> + </tr> + <tr> + <td><code>expression</code></td> + <td>Qualquer <a href="/en-US/docs/JavaScript/Guide/Expressions_and_Operators#Expressions" title="JavaScript/Guide/Expressions and Operators#Expressions">expressão</a> válida.</td> + </tr> + <tr> + <td><code>statement</code></td> + <td>Qualquer <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Statements" title="JavaScript/Reference/Statements">instrução</a> válida.</td> + </tr> + </tbody> +</table> + +<h2 id="Description" name="Description">Descrição</h2> + +<p><code>let</code> permite que você declare variáveis limitando seu escopo no bloco, instrução, ou em uma expressão na qual ela é usada. Isso é inverso da keyword <a href="/en-US/docs/JavaScript/Reference/Statements/var" title="JavaScript/Reference/Statements/var"><code>var</code></a>, que define uma variável globalmente ou no escopo inteiro de uma função, independentemente do escopo de bloco.</p> + +<div class="note"> +<p><span style="color: #333333;"><strong>Nota do tradutor:</strong></span> o trecho acima: "independentemente do escopo de bloco", na verdade, significa dizer que variáveis declaradas dentro de blocos internos da função, por exemplo, são vinculadas no escopo da função, não no bloco no qual elas são declaradas. Se isso parece confuso - e realmente é -, apenas entenda que, ao contrário do que se poderia supor, em Javascript blocos não possuem escopo como em outras linguagens, somente funções têm! Isso quer dizer que mesmo uma váriavel definida com a keyword <code>var</code> dentro de um bloco de instrução <code>if</code>, será visível no resto inteiro da função.</p> +</div> + + + +<h2 id="Block_scoping" name="Block_scoping">Escopo de bloco</h2> + +<p>Variáveis declaradas com <code>let</code> são "içadas" para começo do bloco em que elas são definidas (isso é conhecido também pelo termo, hoisting).</p> + +<p>Redeclaração de uma mesma variável num mesmo escopo de bloco causa um <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/TypeError" title="TypeError">TypeError</a></code>.</p> + +<pre class="brush: js">if (x) { + let foo; + let foo; // Emite um TypeError. +}</pre> + +<p>No entanto, corpos de funções não possuem essa limitação!</p> + +<pre class="brush: js">function do_something() { + let foo; + let foo; // Isso funciona. +}</pre> + +<div class="warning"><strong>Atenção:</strong> Os rascunhos do ECMAScript 6 (desde abril de 2012) tornam este comportamento ilegal. Isso significa, provavelmente, que as futuras versões do JavaScript levantarão um <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/TypeError" title="TypeError">TypeError</a></code>. Então, se você faz isso, deveria evitar essa prática!</div> + +<p>Você pode encontrar erros em instruções <a href="/en-US/docs/JavaScript/Reference/Statements/switch" title="switch"><code>switch</code></a> porque existe apenas um bloco subjacente.</p> + +<pre class="brush: js">switch (x) { + case 0: + let foo; + break; + + case 1: + let foo; // TypeError para a redeclaração. + break; +}</pre> + +<h2 id="Examples" name="Examples">Exemplos</h2> + +<p>Uma <em>expressão let</em> limita o escopo de uma variável declarada somente para aquela expressão.</p> + +<pre class="brush: js">var a = 5; +let(a = 6) alert(a); // 6 +alert(a); // 5</pre> + +<p>Usada dentro de um bloco, <em>let</em> limita os escopo das variáveis para aquele bloco. Observe a diferença entre <em>var </em>em que o escopo é definido dentro da função onde é declarada</p> + +<pre class="brush: js">var a = 5; +var b = 10; + +if (a === 5) { + let a = 4; // O escopo é dentro do bloco if + var b = 1; // O escopo é dentro da função + + console.log(a); // 4 + console.log(b); // 1 +} + +console.log(a); // 5 +console.log(b); // 1</pre> + +<p>É possível usar a keyword <em>let</em> para vincular variáveis localmente no escopo de loops em vez de usar uma variável global (definida usando <em>var</em>) para isso.</p> + +<pre class="brush: js">for (let i = 0; i<10; i++) { + alert(i); // 1, 2, 3, 4 ... 9 +} + +alert(i); // i não está definida</pre> + +<h2 id="See_also" name="See_also">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/JavaScript/Reference/Statements/var" title="JavaScript/Reference/Statements/var"><code>var</code></a></li> + <li><a href="/en-US/docs/JavaScript/Reference/Statements/const" title="JavaScript/Reference/Statements/const"><code>const</code></a></li> + <li><a href="/pt-BR/docs/JavaScript/New_in_JavaScript/1.7#Block_scope_with_let_(Merge_into_let_Statement)" title="JavaScript/New in JavaScript/1.7#Block scope with let (Merge into let Statement)">Novidades do JavaScript 1.7</a></li> +</ul> diff --git a/files/pt-br/web/javascript/reference/statements/return/index.html b/files/pt-br/web/javascript/reference/statements/return/index.html new file mode 100644 index 0000000000..e7c92426fe --- /dev/null +++ b/files/pt-br/web/javascript/reference/statements/return/index.html @@ -0,0 +1,197 @@ +--- +title: return +slug: Web/JavaScript/Reference/Statements/return +tags: + - Declaração + - JavaScript + - Statement +translation_of: Web/JavaScript/Reference/Statements/return +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>A <strong>declaração <code>return</code></strong> finaliza a execução de uma função e especifica os valores que devem ser retonados para onde a função foi chamada.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox">return [[expression]]; </pre> + +<dl> + <dt><code>expression</code></dt> + <dd>A expressão cujo valor será retornado. Se omitido, <code>undefined</code> é retornado.</dd> +</dl> + +<h2 id="Descrição">Descrição</h2> + +<p>Quando uma declaração <code>return</code> é usada em um corpo de função, a execução dessa função é parada. Se especificado, um dado valor é retornado à quem chamou a função. Se a expressão for omitida, <code>undefined</code> será retornado. Todas as declarações return a seguir param a execução da função:</p> + +<pre class="brush: js">return; +return true; +return false; +return x; +return x + y / 3; +</pre> + +<h3 id="Inserção_Automática_de_Ponto-e-Vírgula">Inserção Automática de Ponto-e-Vírgula</h3> + +<p>A declaração <code>return</code> é afetada pela <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion">inserção automática de ponto e vírgula (ASI)</a>. Nenhum terminador de linha é permitido entre a palavra-chave <code>return</code> e a expressão.</p> + +<pre class="brush: js">return +a + b; +</pre> + +<p>é transformado pelo ASI em:</p> + +<pre>return; +a + b; +</pre> + +<p>O console irá alertar "unreachable code after return statement" (código inacessível após a declaração return).</p> + +<div class="note">A partir do Gecko 40 {{geckoRelease(40)}}, um alerta é mostrado no console se um código inacessível é encontrado após uma declaração <code>return</code>.</div> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="return">return</h3> + +<p>A função a seguir retorna o quadro do seu argumento, <code>x</code>, quando <code>x</code> é um número.</p> + +<pre class="brush: js">function square(x) { + return x * x; +} +</pre> + +<h3 id="Interrompendo_uma_função">Interrompendo uma função</h3> + +<p>Uma função para imediatamente no ponto em que <code>return</code> é chamado.</p> + +<pre class="brush: js">function counter() { + for (var count = 1; ; count++) { // loop infinito + console.log(count + 'A'); // até 5 + if (count === 5) { + return; + } + console.log(count + 'B'); // até 4 + } + console.log(count + 'C'); // nunca aparece +} + +counter(); + +// Saída: +// 1A +// 1B +// 2A +// 2B +// 3A +// 3B +// 4A +// 4B +// 5A +</pre> + +<h3 id="Retornando_uma_função">Retornando uma função</h3> + +<p>Veja também o artigo sobre <a href="/en-US/docs/Web/JavaScript/Closures">Closures</a>.</p> + +<pre class="brush: js">function magic(x) { + return function calc(x) { return x * 42; }; +} + +var answer = magic(); +answer(1337); // 56154 +</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('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definição inicial.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.9', 'Return statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-return-statement', 'Return statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-return-statement', 'Return statement')}}</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>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> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{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><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope" title="En/Core_JavaScript_1.5_Reference/Functions">Funções</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Closures">Closures</a></li> +</ul> diff --git a/files/pt-br/web/javascript/reference/statements/switch/index.html b/files/pt-br/web/javascript/reference/statements/switch/index.html new file mode 100644 index 0000000000..ff47dd69d2 --- /dev/null +++ b/files/pt-br/web/javascript/reference/statements/switch/index.html @@ -0,0 +1,288 @@ +--- +title: switch +slug: Web/JavaScript/Reference/Statements/switch +tags: + - Instrução + - JavaScript + - Referência(2) + - Web +translation_of: Web/JavaScript/Reference/Statements/switch +--- +<div> +<div>{{jsSidebar("Statements")}}</div> + +<div>A condicional <strong>switch </strong>avalia uma <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators">expressão</a>, combinando o valor da expressão para um cláusula <strong>case</strong>, e executa as <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements">instruções</a> associadas ao <strong>case</strong>.</div> + +<div> </div> +</div> + +<p id="sect1">{{EmbedInteractiveExample("pages/js/statement-switch.html")}}</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="syntaxbox">switch (expressão) { + case valor1: + //Instruções executadas quando o resultado da expressão for igual á valor1 + [break;] + case valor2: + //Instruções executadas quando o resultado da expressão for igual á valor2 + [break;] + ... + case valueN: + //Instruções executadas quando o resultado da expressão for igual á valorN + [break;] + default: + //Instruções executadas quando o valor da expressão é diferente de todos os cases + [break;] +}</pre> + +<dl> + <dt><code>expressão</code></dt> + <dd>Uma expressão que será comparada á cada cláusula <strong>case</strong>.</dd> + <dt><code>case expressão</code></dt> + <dd>Uma cláusula <strong>case</strong> que será comparada á expressão.</dd> +</dl> + +<h2 id="Description" name="Description">Descrição</h2> + +<p>Se a condição for correspondida, o programa executa as instruções asssociadas. Se múltiplos casos corresponderem o valor, o primeiro caso que corresponder é selecionado, mesmo se os casos não forem iguais entre si.</p> + +<p>O programa primeiro procura por um caso o qual a expressão avalie como tendo o mesmo valor que o input da expressão (usando a <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">comparação de igualdade estrita</a>, <code>===) </code>transferindo assim o controle para a cláusula encontrada e em seguida execudando as instruções associadas. Caso nenhum caso seja correspondido, então o programa procura pela cláusula opicional <code>default</code>, que, se encontrado, tem o controle transferido à ele, executando suas instruções associadas. Se não ouver uma cláusula <code>default</code>, o programa continua a execução da instrução seguindo para o final do <code>switch</code>. Por convenção, a cláusula default é a última, mas não é algo obrigatório.</p> + +<p>A instrução opcional <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/break" title="JavaScript/Reference/Statements/break">break</a></code> associada com cada <code>case</code> garante que o programa saia da condicional <code>switch</code> assim que a instrução correspondente for executada e executa a instrução que segue logo após o switch. Caso <code>break</code> seja omitido, o programa continua a execução para a próxima instrução dentro de <code>switch</code>. </p> + +<h2 id="Examples" name="Examples">Exemplos</h2> + +<h3 id="Example:_Using_switch" name="Example:_Using_switch">Exemplo: Usando <code>switch</code></h3> + +<p>No exemplo a seguir, if <code>expr</code> é avaliado como "Bananas", o programa corresponde o valor com o <code>case</code> "Bananas" e executa a instrução associada. Quando <code>break</code> for encontrado, o programa para (break), saindo de <code>switch</code> e executa a instrução localizada após o <code>switch</code>. Se <code>break</code> fosse omitido, a instrução para "Cherries" também seria executada.</p> + +<pre class="brush: js">switch (expr) { + case "Laranjas": + console.log("As laranjas custam $0.59 o quilo."); + break; + case "Maçãs": + console.log("Maçãs custam $0.32 o quilo."); + break; + case "Bananas": + console.log("Bananas custam $0.48 o quilo."); + break; + case "Cerejas": + console.log("Cerejas custam $3.00 o quilo."); + break; + case "Mangas": + case "Mamões": + console.log("Mangas e mamões custam $2.79 o quilo."); + break; + default: + console.log("Desculpe, estamos sem nenhuma " + expr + "."); +} + +console.log("Tem algo mais que você gostaria de levar?"); +</pre> + +<h3 id="What_happens_if_I_forgot_a_break" name="What_happens_if_I_forgot_a_break">Exemplo: O que acontece se eu esquecer um break?</h3> + +<p>Se você esquecer um break então o script irá rodar a partir do caso onde o critério foi correspondido e irá rodar também o caso seguinte independentemente do critério ter sido correspondido ou não:</p> + +<pre class="brush: js">var foo = 0; +switch (foo) { + case -1: + console.log('1 negativo'); + break; + case 0: // foo é 0 então aqui o critério foi correspondido, então esse bloco vai rodar + console.log(0) + // NOTA: o break esquecido deveria estar aqui + case 1: // nenhuma instrução break em 'case 0:' então essa instrução vai rodar também + console.log(1); + break; // o programa encontra esse break então não vai continuar para o 'case 2:' + case 2: + console.log(2); + break; + default: + console.log('default'); +}</pre> + +<h3 id="Methods_for_Multi-criteria_Case" name="Methods_for_Multi-criteria_Case">Exemplo: Métodos para múltiplos casos</h3> + +<p>Referência para esta técnica abaixo:</p> + +<p><a href="http://stackoverflow.com/questions/13207927/switch-statement-multiple-cases-in-javascript">- Switch statement multiple cases in JavaScript (Stack Overflow)</a></p> + +<h4 id="Multi-Caso_-_Operação_Simples">Multi-Caso - Operação Simples</h4> + +<p>Esse método toma vantagem do fato de não existir um break após um case e irá continuara executar o próximo case independentemente se o case corresponde ao critério. Veja o título desta seção "O que acontece se eu esquecer um break?"</p> + +<p>Esse é um exemplo de uma operação sequencial simples com a instrução switch, onde quatro valores diferentes fazem a mesma coisa..</p> + +<p> </p> + +<pre class="brush: js">var Animal = 'Girafa'; +switch (Animal) { + case 'Vaca': + case 'Girafa': + case 'Cachorro': + case 'Porco': + alert('Esse animal irá para Arca de Noé'); + break; + case 'Dinossauro': + default: + alert('Esse animal não vai.'); +}</pre> + +<h4 id="Multi-Caso_-_Operações_encadeadas">Multi-Caso - Operações encadeadas </h4> + +<p>Esse é um exemplo de múltiplas operações squenciais usando a instrução <code>switch</code>, onde, dependendo do número inteiro, você poderá receber outputs diferentes. Isso mostra que você pode alterar a ordem que você insere as instruções de <code>case</code>, e isso não precisa ser uma sequência numérica. Em JavaScript, você pode até mesmo misturar definições de strings dentro desses <code>cases</code>. </p> + +<p>This is an example of a multiple-operation sequential switch statement, where, depending on the provided integer, you can receive different output. This shows you that it wil traverse in the order that you put the case statements, and it does not have to be numerically sequential. In JavaScript, you can even mix in definitions of strings into these case statements as well.</p> + +<pre class="brush: js">var foo = 1; +var output = 'Output: '; +switch (foo) { + case 10: + output += 'Então '; + case 1: + output += 'Qual '; + output += 'É '; + case 2: + output += 'O Seu '; + case 3: + output += 'Nome'; + case 4: + output += '?'; + alert(output); + break; + case 5: + output += '!'; + alert(output); + break; + default: + alert('Favor escolher um número de 0 à 6!'); +}</pre> + +<p>Output para esse exemplo:</p> + +<table class="standard-table" style="height: 270px; width: 522px;"> + <tbody> + <tr> + <th scope="col">Value</th> + <th scope="col">Alert Text</th> + </tr> + <tr> + <td>foo é NaN ou não é 1, 2, 3, 4, 5 ou 10</td> + <td>Favor escolher um número de 0 à 6!</td> + </tr> + <tr> + <td>10</td> + <td>Output: Então Qual É O Seu Nome?</td> + </tr> + <tr> + <td>1</td> + <td>Output: Qual É O Seu Nome?</td> + </tr> + <tr> + <td>2</td> + <td>Output: Seu Nome?</td> + </tr> + <tr> + <td>3</td> + <td>Output: Nome?</td> + </tr> + <tr> + <td>4</td> + <td>Output: ?</td> + </tr> + <tr> + <td>5</td> + <td>Output: !</td> + </tr> + </tbody> +</table> + +<h2 id="Especificações">Especificações</h2> + +<p> </p> + +<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 3ª Edição</td> + <td>Standard</td> + <td>Definição inicial.<br> + Implementado no JavaScript 1.2</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.11', 'switch statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-switch-statement', 'switch statement')}}</td> + <td>{{Spec2('ES6')}}</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>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>{{ 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>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>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else"><code>if...else</code></a></li> +</ul> diff --git a/files/pt-br/web/javascript/reference/statements/throw/index.html b/files/pt-br/web/javascript/reference/statements/throw/index.html new file mode 100644 index 0000000000..e8835f8d85 --- /dev/null +++ b/files/pt-br/web/javascript/reference/statements/throw/index.html @@ -0,0 +1,237 @@ +--- +title: throw +slug: Web/JavaScript/Reference/Statements/throw +tags: + - Instrução + - JavaScript +translation_of: Web/JavaScript/Reference/Statements/throw +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>A <strong>declaração</strong> <strong><code>throw</code> </strong>lança uma exceção definida pelo usuário. A execução da função atual vai parar (as instruções após o <code>throw</code> não serão executadas), e o controle será passado para o primeiro bloco <a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch"><code>catch</code></a> na pilha de chamadas. Se nenhum bloco <code>catch</code> existe entre as funções "chamadoras", o programa vai terminar.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox">throw <em>expressão</em>; </pre> + +<dl> + <dt><code>expressão</code></dt> + <dd>A expressão a ser lançada.</dd> +</dl> + +<h2 id="Descrição">Descrição</h2> + +<p>Use a instrução <code>throw</code> para lançar uma exceção. Quando você lança uma exceção, <code>expressão</code> especifica o valor da exceção. Cada uma das intruções a seguir lança uma exceção:</p> + +<pre class="brush: js">throw "Erro2"; // gera uma exceção com um valor string +throw 42; // gera uma exceção com o valor 42 +throw true; // gera uma exceção com o valor true</pre> + +<p>Note também que a instrução <code>throw</code> é afetada pela <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion">inserção automática de ponto-e-vírgula (ASI)</a> como nenhum terminador de linha entre a palavra <code>throw</code> e a expressão é permitido.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Lançando_um_objeto">Lançando um objeto</h3> + +<p>Você pode especificar um objeto quando você lança uma exceção. Você pode então referenciar as propriedades do objeto no bloco <code>catch</code>. O exemplo a seguir cria um objeto do tipo <code>UserException</code> e o usa na intrução <code>throw</code>.</p> + +<pre class="brush: js">function UserException(message) { + this.message = message; + this.name = "UserException"; +} +function getMonthName(mo) { + mo = mo-1; // Ajusta o número do mês para index de array (1=Jan, 12=Dec) + var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", + "Aug", "Sep", "Oct", "Nov", "Dec"]; + if (months[mo] !== undefined) { + return months[mo]; + } else { + throw new UserException("InvalidMonthNo"); + } +} + +try { + // statements to try + var myMonth = 15; // 15 is out of bound to raise the exception + monthName = getMonthName(myMonth); +} catch (e) { + monthName = "unknown"; + logMyErrors(e.message, e.name); // pass exception object to err handler +} +</pre> + +<h3 id="Outro_exemplo_lançando_um_objeto">Outro exemplo lançando um objeto</h3> + +<p>O exemplo a seguir testa uma string de entrada para um cep dos Estados Unidos. Se o CEP utiliza um formato inválido, a intrução throw lança uma exceção através da criação de um objeto do tipo <code>ZipCodeFormatException</code>.</p> + +<pre class="brush: js">/* + * Cria um objeto ZipCode. + * + * Formatos aceitos para o CEP são: + * 12345 + * 12345-6789 + * 123456789 + * 12345 6789 + * + * Se o argumento passado para o construtor do ZipCode não atende + * a um desses padrões uma exceção é lançada. + */ + +function ZipCode(zip) { + zip = new String(zip); + pattern = /[0-9]{5}([- ]?[0-9]{4})?/; + if (pattern.test(zip)) { + // o valor do CEP será a primeira combinação na string + this.value = zip.match(pattern)[0]; + this.valueOf = function() { + return this.value + }; + this.toString = function() { + return String(this.value) + }; + } else { + throw new ZipCodeFormatException(zip); + } +} + +function ZipCodeFormatException(value) { + this.value = value; + this.message = "does not conform to the expected format for a zip code"; + this.toString = function() { + return this.value + this.message; + }; +} + +/* + * Isso poderia estar em um script que valida dados de endereços + * para os endereços dos Estados Unidos. + */ + +const ZIPCODE_INVALID = -1; +const ZIPCODE_UNKNOWN_ERROR = -2; + +function verifyZipCode(z) { + try { + z = new ZipCode(z); + } catch (e) { + if (e instanceof ZipCodeFormatException) { + return ZIPCODE_INVALID; + } else { + return ZIPCODE_UNKNOWN_ERROR; + } + } + return z; +} + +a = verifyZipCode(95060); // retorna 95060 +b = verifyZipCode(9560); // retorna -1 +c = verifyZipCode("a"); // retorna -1 +d = verifyZipCode("95060"); // retorna 95060 +e = verifyZipCode("95060 1234"); // retorna 95060 1234 +</pre> + +<h3 id="Relançando_uma_exceção">Relançando uma exceção</h3> + +<p>Você pode usar <code>throw</code> para relançar uma exceção após você pegá-la. O exemplo a seguir pega uma exceção com um valor numérico e a relança se o valor for maior que 50. A exceção relançada propaga para a função encapsuladora ou para o nível superior para que o usuário a veja.</p> + +<pre class="brush: js">try { + throw n; // lança uma exceção com um valor numérico +} catch (e) { + if (e <= 50) { + // instruções para tratar exceções 1-50 + } else { + // não pode tratar esta exceção então relança + throw e; + } +} +</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('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Definição inicial. Implementada no JavaScript 1.4</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.13', 'throw statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-throw-statement', 'throw statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-throw-statement', 'throw statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </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>Funcionalidade</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>Funcionalidade</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>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/Statements/try...catch"><code>try...catch</code></a></li> +</ul> diff --git a/files/pt-br/web/javascript/reference/statements/try...catch/index.html b/files/pt-br/web/javascript/reference/statements/try...catch/index.html new file mode 100644 index 0000000000..001e7fcc13 --- /dev/null +++ b/files/pt-br/web/javascript/reference/statements/try...catch/index.html @@ -0,0 +1,249 @@ +--- +title: try...catch +slug: Web/JavaScript/Reference/Statements/try...catch +translation_of: Web/JavaScript/Reference/Statements/try...catch +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>As declarações <strong>try...catch</strong> marcam um bloco de declarações para testar (<strong>try</strong>), e especifica uma resposta, caso uma exceção seja lançada.</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="syntaxbox">try { + <em>try_statements</em> +} +[catch (<em>exception_var_1</em> if <em>condition_1</em>) { + <em>catch_statements_1</em> +}] +... +[catch (<em>exception_var_2</em>) { + <em>catch_statements_2</em> +}] +[finally { + <em>finally_statements</em> +}] +</pre> + +<dl> + <dt><code>try_statements</code></dt> + <dd>Declarações (statements) a serem executadas.</dd> +</dl> + +<dl> + <dt><code>catch_statements_1</code>, <code>catch_statements_2</code></dt> + <dd>Declarações que são executadas se uma exceção é lançada no bloco <code style="font-style: normal; line-height: 1.5;">try.</code></dd> +</dl> + +<dl> + <dt><code>exception_var_1</code>, <code>exception_var_2</code></dt> + <dd>Um indentificador que leva um objeto exceção para uma cláusula <code>catch</code> associada.</dd> +</dl> + +<dl> + <dt><code>condition_1</code></dt> + <dd>Uma expressão condicional.</dd> +</dl> + +<dl> + <dt><code>finally_statements</code></dt> + <dd>Declarações que são executadas depois que a declaração <code>try</code> é completada. Essas declarações são executadas independetemente se uma exceção foi ou não lançada ou capturada.</dd> +</dl> + +<h2 id="Description" name="Description">Descrição</h2> + +<p>A declaração <code>try</code> consiste em um bloco <code>try</code>, que contém uma ou mais declarações, e ao menos uma cláusula <code>catch</code> ou uma cláusula <code>finally</code>, ou ambas. Ou seja, há 3 formas de declarações <code>try</code> :</p> + +<ol> + <li><code>try...catch</code></li> + <li><code>try...finally</code></li> + <li><code>try...catch...finally</code></li> +</ol> + +<p>Uma cláusula <code>catch</code> contém declarações que especificam o que fazer caso uma exceção seja lançada no bloco <code>try</code>. Ou seja, se você quer que o bloco <code>try </code>tenha êxito, e caso não tenha, você quer que o controle passe para o bloco <code>catch</code>. Caso qualquer declaração dentro do bloco <code>try</code> (ou em uma função chamada no interior do bloco <code>try</code>) lançar uma exceção o controle imediatamente muda para a cláusula <code>catch</code>. Se nenhuma exceção for lançada no bloco <code>try</code> a cláusula <code>catch</code> é ignorada.</p> + +<p>A cláusula <code>finally</code> é executada após a excecução do bloco <code>try</code> e da(s) cláusula(s) <code>catch </code>porém antes das declarações seguintes ao <code>try</code>. Ela sempre é executada, independente se uma exceção for lançada ou capturada.</p> + +<p>Você pode aninhar uma ou mais declarações <code>try</code>. Caso uma declaração <code>try</code> interior não tenha uma cláusula <code>catch</code>, a cláusula catch pertencente a declaração <code>try</code> que a envolve é introduzida. </p> + +<p>Você pode usar a declaração try para manipular exceções em JavaScript. Veja o <a href="/pt-BR/docs/Web/JavaScript/Guide">Guia Javascript</a> para informações sobre exceções em JavaScript.</p> + +<h3 id="Unconditional_catch_clause" name="Unconditional_catch_clause">Cláusula catch incondicional</h3> + +<p>Quando uma única, incondicional cláusula <code>catch</code> é utilizada, o bloco <code>catch</code> é inserido quando qualquer exceção for lançada. Por exemplo, quando a exceção ocorre no código a seguir, o controle é transferido para a cláusula <code>catch</code>.</p> + +<pre class="brush: js">try { + throw "myException"; // gera uma exceção +} +catch (e) { + // declarações para manipular quaisquer exceções + logMyErrors(e); // <code>passa o objeto de exceção para o manipulador de erro</code> +} +</pre> + +<h3 id="Conditional_catch_clauses" name="Conditional_catch_clauses">Cláusulas <code>catch</code> condicionais</h3> + +<p>{{non-standard_header}}</p> + +<p>Você pode utilizar uma ou mais cláusulas <code>catch</code> condicionals para manipular exceções específicas. Nesse caso a cláusula <code>catch</code> apropriada será inserida quando a exceção espeficica for lançada. No exemplo a seguir, o código no bloco <code>try</code> pode potencialmente jogar três exceções: <a href="/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/TypeError"><code>TypeError</code></a>, <a href="/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/RangeError"><code>RangeError</code></a>, e <a href="/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/EvalError"><code>EvalError</code></a>. Quando a exceção ocorre, o controle transfere para a cláusula <code>catch</code> apropriada. Caso a exceção não seja uma das especificadas e uma cláusula <code>catch</code> incondicional for encontrada, o controle é transferido para essa cláusula <code>catch</code>.</p> + +<p>Se utilizar uma cláusula <code>catch</code> incondicional com uma ou mais cláusulas <code>catch</code> condicionais, o catch incondicional deve ser especificado por último. Caso contrário, o catch incondicional interceptará todos os tipos de exceção antes que eles alcancem os condicionais.</p> + +<p>Nota: Essa funcionalidade não é parte da especificação ECMAScript.</p> + +<pre><code>try { + myroutine(); // </code>pode lançar três tipos de exceções<code> +} catch (e if e instanceof TypeError) { + // declarações para manipular exceções TypeError +} catch (e if e instanceof RangeError) { + // declarações para manipular exceções RangeError +} catch (e if e instanceof EvalError) { + // declarações para manipular exceções EvalError +} catch (e) { + // declarações para manipular quaisquer exceções não especificadas + logMyErrors(e); // passa o objeto de exceção para o manipulador de erro +}</code></pre> + +<p>E aqui temos como implementar as mesmas "cláusulas <code>catch</code> condicionais" utilizando apenas JavaScript puro conforme a especificação ECMAScript (obviamente é mais verboso, porém, funciona em qualquer lugar):</p> + +<pre><code>try { + myroutine(); </code>// pode lançar três tipos de exceções<code> +} catch (e) { + if (e instanceof TypeError) { + // declarações para manipular exceções TypeError + } else if (e instanceof RangeError) { + // declarações para manipular exceções RangeError + } else if (e instanceof EvalError) { + // declarações para manipular exceções EvalError + } else { + // declarações para manipular quaisquer exceções não especificadas + logMyErrors(e); // passa o objeto de exceção para o manipulador de erro + } +}</code> +</pre> + +<h3 id="The_exception_identifier" name="The_exception_identifier">O identificador de exceção</h3> + +<p>Quando uma exceção é lançada no bloco <code>try</code>, <em><code>exception_var</code></em> (ex. o <code>e</code> dentro de <code>catch (e)</code>) armazena o valor especificado pela declaração <code>throw</code>. Você pode usar esse identificador para conseguir informação sobre a exceção que foi lançanda.</p> + +<p>Esse identificador é local para a cláusula <code>catch</code>. Ou seja, é criado quando a cláusula <code>catch</code> é introduzida e após terminar sua excecução o identificador não se torna mais disponível.</p> + +<h3 id="The_finally_clause" name="The_finally_clause">A cláusula <code>finally</code></h3> + +<p>A cláusula <code>finally</code> é executada após a excecução do bloco <code>try</code> e da(s) cláusula(s) <code>catch </code>porém antes das declarações seguintes a declaração <code>try</code>. Ela sempre é executada, independente se uma exceção for lançada ou capturada.</p> + +<p>A cláusula <code>finally</code> contém declarações para executarem após a execução do bloco <code>try</code> e da(s) cláusula(s) <code>catch </code> porém antes das declarações seguintes a declaração <code>try</code>. A cláusula <code>finally</code> é excutada independente se uma exceção for lançada ou não. Caso uma exceção seja lançada, as declarações no interior da cláusula <code>finally</code> são executadas mesmo que nenhum <code>catch</code> manipule a exceção.</p> + +<p>Você pode utilizar a cláusula <code>finally</code> para fazer seu script falhar graciosamente quando uma exceção ocorrer; por exemplo, você pode precisar liberar um recurso que seu script possui vinculado. O exemplo seguinte abre um aquivo e então executa declarações que utilizam o arquivo (server-side JavaScript permite que você acesse arquivos). Se uma exceção for lançada enquanto o arquivo estiver aberto, a cláusula <code>finally</code> fecha o arquivo antes que o script falhe.</p> + +<pre class="brush: js">openMyFile() +try { + // vincula o recurso + writeMyFile(theData); +} +finally { + closeMyFile(); // sempre fecha o recurso +} +</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Blocos_try_aninhados">Blocos try aninhados</h3> + +<p>Primeiro vamos ver o que acontece com isso:</p> + +<pre><code><span class="kwd">try</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> + </span><span class="kwd">try</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> + </span><span class="kwd">throw</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">Error</span><span class="pun">(</span><span class="str">"oops"</span><span class="brush: js">);</span><span class="pln"> + </span><span class="pun">}</span><span class="pln"> + </span><span class="kwd">finally</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> + console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">"finally"</span><span class="pun">);</span><span class="pln"> + </span><span class="pun">}</span><span class="pln"> +</span><span class="pun">}</span><span class="pln"> +</span><span class="kwd">catch</span><span class="pln"> </span><span class="pun">(</span><span class="pln">ex</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> + console</span><span class="pun">.</span><span class="pln">error</span><span class="pun">(</span><span class="str">"outer"</span><span class="pun">,</span><span class="pln"> ex</span><span class="pun">.</span><span class="pln">message</span><span class="pun">);</span><span class="pln"> +</span><span class="pun">}</span></code> + +// Resultado +<code><span class="str">// "finally"<span class="pln"> +</span>// "outer"</span><span class="pln"> </span><span class="str">"oops"</span></code></pre> + +<p>Agora, caso nós já capturamos a exceção no bloco <code>try</code> interno adicionando um bloco <code>catch</code></p> + +<pre><code><span class="kwd"><code><span class="kwd">try { + try { + throw new Error("oops"); + } + catch (ex) { + console.error("inner", ex.message); + } + finally { + console.log("finally"); + } +} +catch (ex) { + console.error("outer", ex.message); +}</span></code></span></code> + +// Resultado: +<code><span class="str">// "inner"<span class="pln"> </span>"oops"</span><span class="pln"> +</span><span class="str">// "finally"</span></code></pre> + +<p>E agora, vamos relançar o erro.</p> + +<pre><code><span class="kwd"><code><span class="kwd"><code><span class="kwd">try</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> + </span><span class="kwd">try</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> + </span><span class="kwd">throw</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">Error</span><span class="pun">(</span><span class="str">"oops"</span><span class="pun">);</span><span class="pln"> + </span><span class="pun">}</span><span class="pln"> + </span><span class="kwd">catch</span><span class="pln"> </span><span class="pun">(</span><span class="pln">ex</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> + console</span><span class="pun">.</span><span class="pln">error</span><span class="pun">(</span><span class="str">"inner"</span><span class="pun">,</span><span class="pln"> ex</span><span class="pun">.</span><span class="pln">message</span><span class="pun">);</span><span class="pln"> + </span><span class="kwd">throw</span><span class="pln"> ex</span><span class="pun">;</span><span class="pln"> + </span><span class="pun">}</span><span class="pln"> + </span><span class="kwd">finally</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> + console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">"finally"</span><span class="pun">);</span><span class="pln"> + </span><span class="pun">}</span><span class="pln"> +</span><span class="pun">}</span><span class="pln"> +</span><span class="kwd">catch</span><span class="pln"> </span><span class="pun">(</span><span class="pln">ex</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> + console</span><span class="pun">.</span><span class="pln">error</span><span class="pun">(</span><span class="str">"outer"</span><span class="pun">,</span><span class="pln"> ex</span><span class="pun">.</span><span class="pln">message</span><span class="pun">);</span><span class="pln"> +</span><span class="pun">}</span></code></span></code></span> + +// Resultado:</code> +<code><span class="str">// "inner"</span><span class="pln"> </span><span class="str">"oops"</span></code> +<code><span class="str">// "finally"</span></code> +<code><span class="str">// "outer"</span><span class="pln"> </span><span class="str">"oops"</span></code> +</pre> + +<p>Qualquer exceção lançada será capturada apenas uma vez pelo bloco <code>catch</code> envolvente mais próximo, a não ser que seja relançada. Obviamente qualquer nova exceção elevada no bloco "interno" (pois código em um bloco <code>catch</code> pode fazer algo que lance), será capturado pelo bloco "externo".</p> + +<h3 id="Retornando_de_um_bloco_finnaly">Retornando de um bloco <code>finnaly</code></h3> + +<p>Caso o bloco f<code>inally</code> retorne um valor, esse valor torna-se o valor de retorno do produto de <code>try-catch-finally </code>inteiro, independente de qualquer declaração return nos blocos <code>try</code> e <code>catch</code>. Isso inclui exceções lançadas dentro do bloco <code>catch</code>:</p> + +<pre><code>try { + try { + throw new Error("oops"); + } + catch (ex) { + console.error("inner", ex.message); + throw ex; + } + finally { + console.log("finally"); + return; + } +} +catch (ex) { + console.error("outer", ex.message); +}</code> + +// Resultado: +// "inner" "oops" +// "finally"</pre> + +<p>O "oops" externo não é lançado devido ao retorno do bloco f<code>inally</code>. O mesmo se aplicaria a qualquer valor retornado do bloco <code>catch</code>.</p> + +<h2 id="See_also" name="See_also">Vejam também</h2> + +<ul> + <li><a href="/en/JavaScript/Reference/Statements/throw" title="en/JavaScript/Reference/Statements/throw">throw</a></li> + <li><a href="/en/JavaScript/Reference/Global_Objects/Error" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Error">Error</a></li> +</ul> diff --git a/files/pt-br/web/javascript/reference/statements/var/index.html b/files/pt-br/web/javascript/reference/statements/var/index.html new file mode 100644 index 0000000000..6f3ec18977 --- /dev/null +++ b/files/pt-br/web/javascript/reference/statements/var/index.html @@ -0,0 +1,238 @@ +--- +title: var +slug: Web/JavaScript/Reference/Statements/var +tags: + - JavaScript +translation_of: Web/JavaScript/Reference/Statements/var +--- +<div> +<div>{{jsSidebar("Statements")}}</div> +</div> + +<h2 id="Sumário">Sumário</h2> + +<p>O <strong><code>variable</code> statement</strong> declara uma variável, opcionalmente é possível atribuir à ela um valor em sua inicialização.</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="syntaxbox">var <em>varname1 [</em>= <em>value1 [</em>, <em>varname2 [</em>, <em>varname3 ... [</em>, <em>varnameN]]]]</em>;</pre> + +<dl> + <dt><code>varnameN</code></dt> + <dd>Nome da variável. Pode ser utilizado qualquer identificador legal.</dd> +</dl> + +<dl> + <dt><code>valueN</code></dt> + <dd>Valor inicial da variável. Pode ser qualquer expressão legal.</dd> +</dl> + +<h2 id="Description" name="Description">Descrição</h2> + +<p>Declarações de variáveis, onde quer que elas ocorram, são processadas antes que qualquer outro código seja executado. O escopo de uma variável declarada com <code>var</code> é seu contexto atual em execução, o qual é a função a qual pertence ou, para variáveis declaradas fora de qualquer função, o escopo é o global.</p> + +<p>Atribuir um valor a uma variável não declarada anteriormente implica em criar uma variável global (ela se torna uma propriedade do objeto global) quando a atribuição é executada. As diferenças entre uma variável declarada e uma não delcarada são:</p> + +<p>1. Variáveis declaradas estão relacionadas com o contexto de execução quando elas são criadas (por exemplo, uma função, objeto). Por outro lado, as variaveis não declaradas sempre são globais.</p> + +<pre class="brush: js">function x() { + y = 1; // Lança a exceção ReferenceError em modo restrito (strict mode) + var z = 2; +} + +x(); + +console.log(y); // logs "1" +console.log(z); // Lança a exceção ReferenceError: z não foi definida fora da função x() +</pre> + +<p>2. Variáveis declaradas são criadas antes de qualquer código ser executado. As variáveis não declaradas não existem até quando o código atribuir um valor a ela.</p> + +<pre class="brush: js">console.log(a); // Lança a exceção ReferenceError. +console.log('still going...'); // Nunca será executado.</pre> + +<pre class="brush: js">var a; +console.log(a); // mostra "undefined" ou "" dependendo do naveador. +console.log('still going...'); // mostra "still going...".</pre> + +<p>3. Variáveis declaradas são propriedades não configuráveis no contexto de execução (função ou global). Variaveis não declaradas são configuráveis (por exemplo, podem ser excluídas).</p> + +<pre class="brush: js">var a = 1; +b = 2; + +delete this.a; // Lança a exceção TypeError em modo restrito(strict mode). Caso contrário, Falha silenciosamente. +delete this.b; + +console.log(a, b); // Throws a ReferenceError. +// A propriedade 'b' foi deletada e não existe mais.</pre> + +<p>Por conta dessas três diferenças, falha para declarar variáveis, muito provavelmente, levar a resultados inesperados. <strong>Então, é recomendado sempre declarar as variáveis, independentemente se as variáveis estão em escopo de função ou escopo global</strong>. E o modo restrito (<a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">strict mode</a>) do ECMAScript 5 sempre lançará uma exceçao quando o código atribuir um valor a uma variável não declarada.</p> + +<h3 id="var_hoisting">var hoisting</h3> + +<p>Como as declarações de variáveis (e declarações em geral) são processadas antes de qualquer código seja executado, declarar uma variável em qualquer lugar no código é equivalente a declarar no inicio. Isso também significa que uma variável pode aparecer para ser usada antes dela ser declarada. Esse comportamento é chamado de "hoisting", a variável é movida para o inicio da função ou do código global.</p> + +<pre class="brush: js">bla = 2 +var bla; +// ... + +// é implicitamente entendido como: + +var bla; +bla = 2; +</pre> + +<p>Por essa razão, recomenda-se sempre declarar variáveis na parte superior do seu escopo de aplicação (o topo do código global e a parte superior do código da função). Por isso, é claro que as variáveis são função de escopo (local) e que são resolvidos na cadeia de escopo.</p> + +<h2 id="Examples" name="Examples">Exemplos</h2> + +<h3 id="Declarando_e_inicializando_duas_variáveis">Declarando e inicializando duas variáveis</h3> + +<pre class="brush: js">var a = 0, b = 0; +</pre> + +<h3 id="Atribuindo_duas_variáveis_com_uma_única_expressão">Atribuindo duas variáveis com uma única expressão</h3> + +<pre class="brush: js">var a = "A"; +var b = a; + +// Equivalente a: + +var a, b = a = "A"; +</pre> + +<p>É sempre importante lembrar da ordem da declaração das variáveis:</p> + +<pre class="brush: js">var x = y, y = 'A'; +console.log(x + y); // undefinedA +</pre> + +<p>Então, <span style="font-family: consolas,monaco,andale mono,monospace;">x</span> e <span style="font-family: consolas,monaco,andale mono,monospace;">y</span> são declarados antes de qualquer código seja executado, a atribuição ocorre posteriormente. Quando "<span style="font-family: consolas,monaco,andale mono,monospace;">x = y</span>" for executado, y existe e nenhum exceção <span style="font-family: consolas,monaco,andale mono,monospace;">ReferenceError</span> é lançada, e o valor de y será considerado como '<code style="font-style: normal;">undefined</code>'. Por este motivo, este valor é atribuido a <span style="font-family: consolas,monaco,andale mono,monospace;">x</span>. Depois disso, o valor 'A' é atribuido a variável <span style="font-family: consolas,monaco,andale mono,monospace;">y</span>. Consequentemente, depois da primeira linha, <span style="font-family: consolas,monaco,andale mono,monospace;">x === undefined && y === 'A'</span>, então o resultado.</p> + +<h3 id="Iniciando_diversas_variáveis">Iniciando diversas variáveis</h3> + +<pre class="brush: js">var x = 0; + +function f(){ + var x = y = 1; // x é declarado localmente,y não é! +} +f(); + +console.log(x, y); // 0, 1 +// x é uma variável global como experado +// y vazou para fora da função!</pre> + +<h3 id="Variável_global_implícita_e_fora_do_escopo_da_função">Variável global implícita e fora do escopo da função</h3> + +<p>Variáveis que aparecem como variáveis globais implicitas podem ser referenciadas como variáveis fora do escopo da função:</p> + +<pre class="brush: js">var x = 0; // x é declarada como global e é igual a 0 + +console.log(typeof z); // undefined, desde que z não tenha sido criada anteriormente + +function a() { // quando a for chamada, + var y = 2; // y é declarada como local desta função, e o valor 2 é atribuido + + console.log(x, y); // 0 2 + + function b() { // quando b for chamado, + x = 3; // atribui o valor 3 a variável global existente, ele não cria uma nova variável global + y = 4; // atribui o valor 4 a uma variável fora, ele não cria uma nova variável + z = 5; // cria uma nova variável global e atribui o valor 5. + } // (Lança a exceção ReferenceError em modo restrito.) + + b(); // chamando b, o código irá criar z como variável global + console.log(x, y, z); // 3 4 5 +} + +a(); // chamando a, também irá chamar b +console.log(x, z); // 3 5 +console.log(typeof y); // indefinido já que y é uma variável local da função a</pre> + +<h2 id="Especificação">Especificação</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>ECMAScript 1st Edition</td> + <td>Standard</td> + <td>Primeira definição.<br> + Implementada no JavaScript 1.0</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.2', 'var statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-variable-statement', 'variable statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_dos_Navegadores">Compatibilidade dos 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="See_also" name="See_also">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/let"><code>let</code></a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/const"><code>const</code></a></li> + <li><a class="external" href="http://blog.safeshepherd.com/23/how-one-missing-var-ruined-our-launch/">How One Missing `var` Ruined our Launch</a></li> +</ul> diff --git a/files/pt-br/web/javascript/reference/statements/while/index.html b/files/pt-br/web/javascript/reference/statements/while/index.html new file mode 100644 index 0000000000..70fbb3e2f9 --- /dev/null +++ b/files/pt-br/web/javascript/reference/statements/while/index.html @@ -0,0 +1,142 @@ +--- +title: while +slug: Web/JavaScript/Reference/Statements/while +tags: + - Declaração + - JavaScript +translation_of: Web/JavaScript/Reference/Statements/while +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>A <strong>declaração while</strong> cria um laço que executa uma rotina especifica enquanto a condição de teste for avaliada como verdadeira. A condição é avaliada antes da execução da rotina.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">while (<code>condição</code>) { + rotina +}</pre> + +<dl> + <dt><code>condição</code></dt> + <dd>Uma expressão avaliada antes de cada passagem através do laço. Se essa condição for avaliada como verdadeira, a rotina é executada. Quando a condição for avaliada como falsa, a execução continua na declaração depois do laço<code> while</code>.</dd> + <dt>rotina</dt> + <dd>Uma declaração que é executada enquanto a condição é avaliada como verdadeira. Para executar multiplas declarações dentro de um laço, use uma declaração em <a href="/en-US/docs/" title="JavaScript/Reference/Statements/block">bloco</a> (<code>{ ... }</code>) para agrupar essas declarações.</dd> +</dl> + +<h2 id="Exemplos">Exemplos</h2> + +<p>O seguinte laço <code>while</code> itera enquanto n é menor que três.</p> + +<pre class="brush:js">var n = 0; +var x = 0; + +while (n < 3) { + n++; + x += n; +}</pre> + +<p>Cada iteração, o laço incrementa n e soma à x. Portanto, x e n assumem os seguintes valores:</p> + +<ul> + <li>Depois da primeira passagem: n = 1 e x = 1</li> + <li>Depois da segunda passagem: n = 2 e x = 3</li> + <li>Depois da terceira passagem: n = 3 e x = 6</li> +</ul> + +<p>Depois de completar a terceira passagem, a condição n < 3 não é mais verdadeira, então o laço termina.</p> + +<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('ESDraft', '#sec-while-statement', 'while statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-while-statement', 'while statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.6.2', 'while statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-12.6.2', 'while statement')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-12.6.1', 'while statement')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definição inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_nos_browsers">Compatibilidade nos browsers</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>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> + +<h2 id="Veja_Também">Veja Também</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/do...while"><code>do...while</code></a></li> + <li>{{jsxref("Statements/for", "for")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/statements/with/index.html b/files/pt-br/web/javascript/reference/statements/with/index.html new file mode 100644 index 0000000000..0d18576236 --- /dev/null +++ b/files/pt-br/web/javascript/reference/statements/with/index.html @@ -0,0 +1,183 @@ +--- +title: with +slug: Web/JavaScript/Reference/Statements/with +tags: + - Declaração + - Deprecado + - Deprecated + - JavaScript + - Statement +translation_of: Web/JavaScript/Reference/Statements/with +--- +<div class="warning">O uso da declaração <code>with</code> não é recomendado, isso porque ele pode ser a fonte de bugs confusos e problemas de compatibilidade. Veja o parágrafo "Contra de ambiguidade" na seção "Descrição" para mais detalhes.</div> + +<div>{{jsSidebar("Statements")}}</div> + +<p>A <strong>declaração with</strong> extende a cadeia de escopo para uma declaração.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox">with (expressão) + <em>declaração</em> +</pre> + +<dl> + <dt><code>expressão</code></dt> + <dd>Adiciona a dada expressão à cadeia de escopo quando estiver avaliando a declaração. O parênteses em volta da expressão é obrigatório.</dd> + <dt><code>declaração</code></dt> + <dd>Qualquer declaração. Para executação multiplas declarações, utilize a declaração em <a href="/en-US/docs/Web/JavaScript/Reference/Statements/block" title="JavaScript/Reference/Statements/block">bloco</a> ({ ... }) para agrupar estas declarações.</dd> +</dl> + +<h2 id="Descrição">Descrição</h2> + +<p>JavaScript procura por um nome não qualificado procurando uma cadeia de escopo associada à execução do contexto do script ou função contendo um nome não qualificado. A declaração 'with' adiciona o dado objeto à frenet dessa cadeia de escopo durante a validação desse corpo de declarações. Se um nome não qualificado usado no corpo for igual ao de uma propriedade na cadeia de escopo, então o nome ficará ligado à propriedade e ao objeto contendo a propriedade. Senão, um {{jsxref("ReferenceError")}} será invocado.</p> + +<div class="note">Usar <code>with</code> não é recomendado, e está probido no <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode" title="JavaScript/Strict mode">strict mode</a> do ECMAScript 5. A alternativa recomendada é atribuir o objeto cujas propriedades você quer acessar a uma variável temporária.</div> + +<h3 id="Pros_contras_de_perfomance">Pros & contras de perfomance</h3> + +<p><strong>Pro:</strong> A declaração <code>with</code> pode ajudar o tamanho do arquivo por reduzir a necessidade de repetir a referência a um objeto longo sem penalidade na perfomance. A cadeia de escopo mudada por um 'with' não é computacionalmente cara. O uso de 'with' irá aliviar o interpretador de tratar repetidamente as referências. Note que, no entando, isso em muitos casos pode ser substituído usando uma variável temporária para armazenar a referência do objeto desejado.</p> + +<p><strong>Contra:</strong> A declaração <code>with</code> força que o objeto especifícado a ser procurado primeiro por pesquisas de nome. Assim sendo, todos os indentificadores que não são membros do objeto espeficícado vão ser encontrados mais lentamente em um bloco 'with'. Onde a perfomance é importande, 'with' deve ser usado apenas para englobar blocos de código que acessam membros de um objeto especifíco.</p> + +<h3 id="Contra_de_ambiguidade">Contra de ambiguidade</h3> + +<p><strong>Contra:</strong> A declaração <code>with</code> faz ser difícil para um leitor humano ou compilador JavaScript decidir se um nome não qualificado var se encontrado em uma cadeia de escopo, e também, em qual objeto. Dado o exemplo seguinte:</p> + +<pre class="brush: js">function f(x, o) { + with (o) { + console.log(x); + } +}</pre> + +<p>Apenas quando <code>f</code> é chamado é <code>x</code> ou encontrado ou não, e se for encontrado, ou em <code>o</code> ou (se nenhuma propriedade existir) no objeto de ativação de <code>f</code>, onde o nome de <code>x</code> é o primeiro argumento formal. Se você esquecer de definir <code>x</code> no objeto que você passou como segundo argumento, ou se há algum bug similar ou confusão, você não vai receber um erro -- apenas resultados inesperados.</p> + +<p><strong>Contra: </strong>Código utilizando <code>with</code> talvez não seja compatível posteriormente, especialmente quando usado com algo que não seja um objeto simples. Considere esse exemplo:</p> + +<div> +<pre class="brush:js">function f(foo, values) { + with (foo) { + console.log(values); + } +} +</pre> + +<p>Se você chamar <code>f([1,2,3], obj)</code> em um ambiente ECMAScript 5, então a referência de <code>values</code> dentro da declaração <code>with</code> irá ser <code>obj</code>. No entando, ECMAScript 6 introduz uma propriedade <code>values</code> no <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype">Array.prototype</a></code> (então isso estará disponível em todas as arrays). Então, em um ambiente JavaScript que suporta ECMAScript 6, a referência de <code>values</code> dentro da declaração <code>with</code> irá ser <code>[1,2,3].values</code>.</p> +</div> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Usando_with">Usando <code>with</code></h3> + +<p>A seguinte declaração <code>with</code> irá especificar que o objeto <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math" title="JavaScript/Reference/Global_Objects/Math"><code>Math</code></a> é o objeto padrão. As seguintes declarações seguindo a declaração <code>with</code> irão referir a propriedade <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/PI" title="JavaScript/Reference/Global_Objects/Math/PI"><code>PI</code></a> e aos métodos <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/cos" title="JavaScript/Reference/Global_Objects/Math/cos"><code>cos</code></a> e <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sin" title="JavaScript/Reference/Global_Objects/Math/sin"><code>sin</code></a>, sem especificar um objeto. JavaScript assume o objeto <code>Math</code> para essas referências.</p> + +<pre class="brush:js">var a, x, y; +var r = 10; + +with (Math) { + a = PI * r * r; + x = r * cos(PI); + y = r * sin(PI / 2); +}</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('ESDraft', '#sec-with-statement', 'with statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-with-statement', 'with statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.10', 'with statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Agora proibido no modo estrito.</td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-12.10', 'with statement')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-12.10', 'with statement')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definição inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</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> + <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>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{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("Statements/block", "block")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">Strict mode</a></li> + <li>{{jsxref("Symbol.unscopables")}}</li> + <li>{{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}}</li> +</ul> |