aboutsummaryrefslogtreecommitdiff
path: root/files/pt-br/web/javascript/reference/statements/for
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 14:42:52 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 14:42:52 -0500
commit074785cea106179cb3305637055ab0a009ca74f2 (patch)
treee6ae371cccd642aa2b67f39752a2cdf1fd4eb040 /files/pt-br/web/javascript/reference/statements/for
parentda78a9e329e272dedb2400b79a3bdeebff387d47 (diff)
downloadtranslated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.gz
translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.bz2
translated-content-074785cea106179cb3305637055ab0a009ca74f2.zip
initial commit
Diffstat (limited to 'files/pt-br/web/javascript/reference/statements/for')
-rw-r--r--files/pt-br/web/javascript/reference/statements/for/index.html191
1 files changed, 191 insertions, 0 deletions
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 &lt; 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 &lt; 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 &gt; 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 &gt; 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>