unslug pt-br: move

1 files changed, 333 insertions, 0 deletions

diff --git a/files/pt-br/web/javascript/guide/loops_and_iteration/index.html b/files/pt-br/web/javascript/guide/loops_and_iteration/index.html
new file mode 100644
index 0000000000..fcf7437612
--- /dev/null
+++ b/files/pt-br/web/javascript/guide/loops_and_iteration/index.html
@@ -0,0 +1,333 @@
+---
+title: Laços e iterações
+slug: Web/JavaScript/Guide/Lacos_e_iteracoes
+translation_of: Web/JavaScript/Guide/Loops_and_iteration
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}</div>
+
+<div class="summary">
+<p>Laços oferecem um jeito fácil e rápido de executar uma ação repetidas vezes. Este capítulo do <a href="/en-US/docs/Web/JavaScript/Guide">guia do JavaScript</a> abordará diferentes formas de iterações existentes no JavaScript.</p>
+</div>
+
+<p>Você pode pensar em um laço de repetição como um jogo onde você manda o seu personagem andar X passos em uma direção e Y passos em outra; por exemplo, a ideia "vá 5 passos para leste" pode ser expressa em um laço desta forma:</p>
+
+<pre class="brush: js">var passo;
+for (passo = 0; passo &lt; 5; passo++) {
+  // Executa 5 vezes, com os valores de passos de 0 a 4.
+  console.log('Ande um passo para o leste');
+}
+</pre>
+
+<p>Existem várias formas diferentes de laços, mas eles essencialmente fazem a mesma coisa: repetir uma ação múltiplas vezes ( inclusive você poderá repetir 0 vezes). Os vários mecanismos diferentes de laços oferecem diferentes formas de determinar quando este irá começar ou terminar. Há várias situações em que é mais fácil resolver um problema utilizando um determinado tipo de laço do que outros.</p>
+
+<p>Os possíveis laços de repetição  em JavaScript:</p>
+
+<ul>
+ <li>{{anch("for_statement")}}</li>
+ <li>{{anch("do...while_statement")}}</li>
+ <li>{{anch("while_statement")}}</li>
+ <li>{{anch("label_statement")}}</li>
+ <li>{{anch("break_statement")}}</li>
+ <li>{{anch("continue_statement")}}</li>
+ <li>{{anch("for...in_statement")}}</li>
+ <li>{{anch("for...of_statement")}}</li>
+</ul>
+
+<h2 id="for_statement" name="for_statement"><code>Declaração for</code></h2>
+
+<p>Um laço <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for">for</a> é repetido até que a condição especificada seja falsa. O laço for no JavaScript é similar ao Java e C. Uma declaração for é feita da seguinte maneira:</p>
+
+<pre class="syntaxbox">for ([expressaoInicial]; [condicao]; [incremento])
+  declaracao
+</pre>
+
+<p>Quando um for é executado, ocorre o seguinte:</p>
+
+<ol>
+ <li>A expressão <code>expressao Inicial</code> é inicializada e, caso possível, é executada. Normalmente essa expressão inicializa um ou mais contadores, mas a sintaxe permite expressões de qualquer grau de complexidade. Podendo conter também declaração de variáveis.</li>
+ <li>A expressão <code>condicao</code> é avaliada. caso o resultado de <code>condicao</code> seja verdadeiro, o laço é executado. Se o valor de <code>condicao</code> é falso, então o laço terminará. Se a expressão <code>condicao</code> é omitida, a <code>condicao</code> é assumida como verdadeira.</li>
+ <li> A instrução é executada. Para executar múltiplas declarações, use uma declaração em bloco ({ ... }) para agrupá-las.</li>
+ <li>A atualização da expressão <code>incremento</code>, se houver, executa, e retorna o controle para o passo 2.</li>
+</ol>
+
+<h3 id="Exemplo"><strong>Exemplo</strong></h3>
+
+<p>A função a seguir contém uma declaração <code>for</code> que contará o número de opções selecionadas em uma lista (um elemento {{HTMLElement("select")}} permite várias seleções). Dentro do <code>for</code> é declarado uma váriavel <code>i</code> inicializada com zero. A declaração <code>for</code> verifica se <code>i</code> é menor que o número de opções no elemento <code>&lt;select&gt;</code>, executa sucessivas declaração  <code>if</code>, e incrementa <code>i</code> de um em um a cada passagem pelo laço.</p>
+
+<pre class="brush: html">&lt;form name="selectForm"&gt;
+  &lt;p&gt;
+    &lt;label for="tipoMusica"&gt;Escolha alguns tipos de música, em seguida, clique no botão abaixo:&lt;/label&gt;
+    &lt;select id="tipoMusica" name="tipoMusica" multiple="multiple"&gt;
+      &lt;option selected="selected"&gt;R&amp;B&lt;/option&gt;
+      &lt;option&gt;Jazz&lt;/option&gt;
+      &lt;option&gt;Blues&lt;/option&gt;
+      &lt;option&gt;New Age&lt;/option&gt;
+      &lt;option&gt;Classico&lt;/option&gt;
+      &lt;option&gt;Ópera&lt;/option&gt;
+    &lt;/select&gt;
+  &lt;/p&gt;
+  &lt;p&gt;&lt;input id="btn" type="button" value="Quantos foram selecionados?" /&gt;&lt;/p&gt;
+&lt;/form&gt;
+
+&lt;script&gt;
+function howMany(selectObject) {
+  var numeroSelecionadas = 0;
+  for (var i = 0; i &lt; selectObject.options.length; i++) {
+    if (selectObject.options[i].selected) {
+      numeroSelecionadas++;
+    }
+  }
+  return numeroSelecionadas;
+}
+
+var btn = document.getElementById("btn");
+btn.addEventListener("click", function(){
+  alert('Total de opções selecionadas: ' + howMany(document.selectForm.tipoMusica))
+});
+&lt;/script&gt;
+
+</pre>
+
+<h2 id="do...while_statement" name="do...while_statement"><code>Declaração do...while</code></h2>
+
+<p>A instrução <a href="/en-US/docs/Web/JavaScript/Reference/Statements/do...while">do...while</a> repetirá até que a condição especificada seja falsa.</p>
+
+<pre class="syntaxbox">do
+  declaracao
+while (condicao);
+</pre>
+
+<p>A instrução será executada uma vez antes da condição ser verificada. Para executar multiplas instruções utilize uma declaração de bloco ({ ... }) para agrupá-las. Caso a <code>condicao</code> seja verdadeira, então o laço será executado novamente. Ao final de cada execução, a <code>condicao</code> é verificada. Quando a condição contida no while for falsa a execução do laço é terminada e o controle é passado para a instrução seguinte a <code>do...while</code>.</p>
+
+<h3 id="Exemplo_2"><strong>Exemplo</strong></h3>
+
+<p>No exemplo a seguir, o laço é executado pelo menos uma vez e irá executar até que <code>i</code> seja menor que 5.</p>
+
+<pre class="brush: js">do {
+  i += 1;
+  console.log(i);
+} while (i &lt; 5);</pre>
+
+<h2 id="while_statement" name="while_statement"><code>Declaração while</code></h2>
+
+<p>Uma declaração <a href="/pt-BR/docs/Web/JavaScript/Reference/Statements/while">while</a> executa suas instruções, desde que uma condição especificada seja avaliada como verdadeira. Segue uma declaração <code>while</code>: </p>
+
+<pre class="syntaxbox">while (condicao)
+  declaracao
+</pre>
+
+<p>Se a condição se tornar falsa,  a declaração dentro do laço para a execução e o controle é passado para a instrução após o laço.</p>
+
+<p>O teste da condição ocorre antes que o laço seja executado. Desta forma se a condição for verdadeira o laço executará e testará a condição novamente. Se a condição for falsa o laço termina e passa o controle para as instruções após o laço.</p>
+
+<p>Para executar múltiplas declarações, use uma declaração em bloco ({ ... }) para agrupar essas declarações.</p>
+
+<h3 id="Exemplo_1"><strong>Exemplo 1</strong></h3>
+
+<p>O <code>while</code> a seguir executará enquanto <code>n</code> for menor que três:</p>
+
+<pre class="brush: js">n = 0;
+x = 0;
+while (n &lt; 3) {
+  n++;
+  x += n;
+}
+</pre>
+
+<p>A cada iteração, o laço incrementa <code>n</code> e adiciona este valor para <code>x</code>. Portanto, <code>x</code> e <code>n</code> recebem os seguintes valores:</p>
+
+<ul>
+ <li>Depois de executar pela primeira vez: <code>n</code> = 1 e <code>x</code> = 1</li>
+ <li>Depois da segunda vez: <code>n</code> = 2 e <code>x</code> = 3</li>
+ <li>Depois da terceira vez: <code>n</code> = 3 e <code>x</code> = 6</li>
+</ul>
+
+<p>Depois de executar pela terceira vez, a condição <code>n &lt; 3</code> não será mais verdadeira, então o laço encerrará.</p>
+
+<h3 id="Exemplo_2_2"><strong>Exemplo 2</strong></h3>
+
+<p>Evite laços infinitos. Tenha certeza que a condição do laço eventualmente será falsa; caso contrário, o laço nunca terminará. O while a seguir executará para sempre pois sua condição nunca será falsa:</p>
+
+<pre class="brush: js">while (true) {
+  console.log("Olá, mundo");
+}</pre>
+
+<h2 id="Declaração_label"><code>Declaração label</code></h2>
+
+<p>Um <a href="/pt-BR/docs/Web/JavaScript/Reference/Statements/label">label</a> provê um identificador que permite que este seja referenciado em outro lugar no seu programa. Por exemplo, você pode usar uma label para identificar um laço, e então usar <code>break</code> ou <code>continue</code> para indicar quando o programa deverá interromper o laço ou continuar sua execução.</p>
+
+<p>Segue a sintaxe da instrução label:</p>
+
+<pre class="syntaxbox">label : declaracao
+</pre>
+
+<p>Um label pode usar qualquer idenficador que não seja uma palavra reservada do JavaScript. Você pode identificar qualquer instrução com um label.</p>
+
+<h3 id="Exemplo_3"><strong>Exemplo</strong></h3>
+
+<p>Neste exemplo, o label <code>markLoop</code> idenfica um laço <code>while</code>.</p>
+
+<pre class="brush: js">markLoop:
+while (theMark == true) {
+   facaAlgo();
+}</pre>
+
+<h2 id="break_statement" name="break_statement"><code>Declaração break</code></h2>
+
+<p>Use <a href="/en-US/docs/Web/JavaScript/Reference/Statements/break">break</a> para terminar laços, <code>switch</code>, ou um conjunto que utiliza label.</p>
+
+<ul>
+ <li>Quando você utiliza <code>break</code> sem um label, ele encerrará imediatamente o laço mais interno <code>while</code>, <code>do-while</code>, <code>for</code>, ou <code>switch</code> e transferirá o controle para a próxima instrução.</li>
+ <li>Quando você utiliza <code>break</code> com um label, ele encerrará o label específico.</li>
+</ul>
+
+<p>Segue a sintaxe do break:</p>
+
+<ol>
+ <li><code>break;</code></li>
+ <li><code>break <em>label</em>;</code></li>
+</ol>
+
+<p>Na primeira opção será encerrado o laço de repetição mais interno ou <code>switch</code>. Já na segunda opção será encerrada o bloco de código referente a label.</p>
+
+<h3 id="Exemplo_1_2"><strong>Exemplo</strong> <strong>1</strong></h3>
+
+<p>O exemplo a seguir percorre os elementos de um array até que ele encontre o índice do elemento que possui o valor contido em <code>theValue</code>:</p>
+
+<pre class="brush: js">for (i = 0; i &lt; a.length; i++) {
+  if (a[i] == theValue) {
+    break;
+  }
+}</pre>
+
+<h3 id="Exemplo_2_Utilizando_break_em_label"><strong>Exemplo 2: </strong>Utilizando break em label</h3>
+
+<pre class="brush: js">var x = 0;
+var z = 0
+labelCancelaLaco: while (true) {
+  console.log("Laço exterior: " + x);
+  x += 1;
+  z = 1;
+  while (true) {
+    console.log("Laço interior: " + z);
+    z += 1;
+    if (z === 10 &amp;&amp; x === 10) {
+      break labelCancelaLaco;
+    } else if (z === 10) {
+      break;
+    }
+  }
+}
+</pre>
+
+<h2 id="continue_statement" name="continue_statement"><code>Declaração continue</code></h2>
+
+<p>A declaração <a href="/pt-BR/docs/Web/JavaScript/Reference/Statements/continue">continue</a> pode ser usada para reiniciar uma instrução <code>while</code>, <code>do-while</code>, <code>for</code>, ou <code>label</code>.</p>
+
+<ul>
+ <li>Quando você utiliza <code>continue</code> sem uma label, ele encerrará a iteração atual mais interna de uma instrução <code>while</code>, <code>do-while</code>, ou <code>for</code> e continuará a execução do laço a partir da próxima iteração. Ao contrário da instrução <code>break</code>, <code>continue</code> não encerra a execução completa do laço. Em um laço <code>while</code>, ele voltará para a condição. Em um laço <code>for</code>, ele pulará para a expressão de incrementação.</li>
+ <li>Quando você utiliza <code>continue</code> com uma label, o <code>continue</code> será aplicado ao laço identificado por esta label. </li>
+</ul>
+
+<p>Segue a sintaxe do <code>continue</code>:</p>
+
+<ol>
+ <li><code>continue;</code></li>
+ <li><code>continue </code><em><code>label;</code></em></li>
+</ol>
+
+<h3 id="Exemplo_1_3"><strong>Exemplo 1</strong></h3>
+
+<p>O exemplo a seguir mostra um laço <code>while</code> utlizando <code>continue</code> que executará quando o valor de <code>i</code> for igual a 3. Desta forma, <code>n</code> recebe os valores um, três, sete, e doze.</p>
+
+<pre class="brush: js">i = 0;
+n = 0;
+while (i &lt; 5) {
+  i++;
+  if (i == 3) {
+    continue;
+  }
+  n += i;
+}
+</pre>
+
+<h3 id="Exemplo_2_3"><strong>Exemplo 2</strong></h3>
+
+<p>Uma instrução label <code>checkiandj</code> contém uma instrução label c<code>heckj</code>. Se o <code>continue</code> for executado, o programa terminará a iteração atual de <code>checkj</code> e começará a próxima iteração. Toda vez que o <code>continue</code> for executado, <code>checkj</code> recomeçará até que a condição do <code>while</code> for falsa. Quando isto ocorrer <code>checkiandj</code> executará até que sua condição seja falsa.</p>
+
+<p>Se o <code>continue</code> estivesse referenciando <code>checkiandj</code>, o programa deveria continuar do topo de <code>checkiandj</code>.</p>
+
+<pre class="brush: js">checkiandj:
+  while (i &lt; 4) {
+    console.log(i);
+    i += 1;
+    checkj:
+      while (j &gt; 4) {
+        console.log(j);
+        j -= 1;
+        if ((j % 2) == 0) {
+          continue checkj;
+        }
+        console.log(j + " é estranho.");
+      }
+      console.log("i = " + i);
+      console.log("j = " + j);
+  }</pre>
+
+<h2 id="for...in_statement" name="for...in_statement"><code>Declaração for...in</code></h2>
+
+<p>A declaração <a href="/pt-BR/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a> executa iterações a partir de uma variável específica, percorrendo todas as propriedades de um objeto.<br>
+ Para cada propriedade distinta, o JavaScript executará uma iteração. Segue a sintaxe:</p>
+
+<pre class="syntaxbox">for (variavel in objeto) {
+  declaracoes
+}
+</pre>
+
+<h3 id="Exemplo_4"><strong>Exemplo</strong></h3>
+
+<p>A função a seguir recebe em seu argumento um objeto e o nome deste objeto. Então executará uma iteração para cada elemento e retornará uma lista de string, que irá conter o nome da propriedade e seu valor.</p>
+
+<pre class="brush: js">function dump_props(obj, obj_name) {
+  var result = "";
+  for (var i in obj) {
+    result += obj_name + "." + i + " = " + obj[i] + "&lt;br&gt;";
+  }
+  result += "&lt;hr&gt;";
+  return result;
+}
+</pre>
+
+<p>Para um objeto chamado <code>car</code> com propriedades <code>make</code> e <code>model</code>, o resultado será:</p>
+
+<pre class="brush: js">car.make = Ford
+car.model = Mustang
+</pre>
+
+<h3 id="Arrays"><strong>Arrays</strong></h3>
+
+<p>Embora seja tentador usar esta forma para interagir com os elementos de um Array, a declaração <strong>for...in</strong> irá retornar o nome pré-definido da propriedade ao invés do seu index numérico. Assim é melhor usar o tradicional <a href="/pt-BR/docs/Web/JavaScript/Reference/Statements/for">for</a> com index numérico quando interagir com arrays, pois o <strong>for...in</strong> interage com as propriedades definidas pelo programador ao invés dos elementos do array.</p>
+
+<h2 id="for...of_statement" name="for...of_statement">Declaração <code>for...of</code></h2>
+
+<p> A declaração for...of cria uma laço com objetos interativos ((incluindo, {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, assim por conseguinte ), executando uma iteração para o valor de cada propriedade distinta.</p>
+
+<pre class="syntaxbox">for (<em>variavel</em> of <em>objeto</em>) {
+  <em>declaracoes
+</em>}</pre>
+
+<p>O exemplo a seguir mostra a diferença entre o <code>for...of</code> e o <code><a href="/pt-BR/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a></code>. Enquanto o <code>for...in</code> interage com o nome das propriedades, o <code>for...of</code> interage com o valor das propriedades.</p>
+
+<pre class="brush:js">let arr = [3, 5, 7];
+arr.foo = "hello";
+
+for (let i in arr) {
+   console.log(i); // logs "0", "1", "2", "foo"
+}
+
+for (let i of arr) {
+   console.log(i); // logs "3", "5", "7"
+}
+</pre>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}</p>