diff options
Diffstat (limited to 'files/ca/web/javascript/reference/statements/for/index.html')
-rw-r--r-- | files/ca/web/javascript/reference/statements/for/index.html | 190 |
1 files changed, 190 insertions, 0 deletions
diff --git a/files/ca/web/javascript/reference/statements/for/index.html b/files/ca/web/javascript/reference/statements/for/index.html new file mode 100644 index 0000000000..00a16b62df --- /dev/null +++ b/files/ca/web/javascript/reference/statements/for/index.html @@ -0,0 +1,190 @@ +--- +title: for +slug: Web/JavaScript/Referencia/Sentencies/for +translation_of: Web/JavaScript/Reference/Statements/for +--- +<div> +<div>{{jsSidebar("Statements")}}</div> +</div> + +<h2 id="Summary" name="Summary">Resum</h2> + +<p>La<strong> sentència</strong> <strong>for</strong> crea un bucle que consta de tres expressions opcionals, embolcallades entre paràntesis i separades per punts i comes, seguits d'una sentència o un grup de sentències executades en el bucle.</p> + +<h2 id="Syntax" name="Syntax">Sintaxi</h2> + +<pre class="syntaxbox">for ([<em>inicialització</em>]; [<em>condició</em>]; [<em>expressió final</em>]) + <em>sentència</em> +</pre> + +<dl> + <dt><code>inicialització</code></dt> + <dd>Una expressió (incloent expressions d'assignació) o declaració de variables. Normalment s'usa per inicialitzar una variable al contador. Opcionalment aquesta expressió pot declarar noves variables amb la paraula clau <code>var</code>. Aquestes variables no sóc locals pel bucle, és a dir, es troben en el mateix àmbit en que es troba el bucle <code>for</code>. El resultat d'aquesta expressió es descarta.</dd> + <dt><code>condició</code></dt> + <dd>Una expressió que s'avalua abans de cada iteració del bucle. Si aquesta expressió s'avalua<strong> true,</strong> s'executa la <code>sentència</code>. Aquesta prova condicional és opcional. Si s'omet, la condició sempre avalua<strong> true.</strong> Si l'expressió avalua a false, l'execució salta a la primera expressió que es trobi després del constructe <code>for</code>.</dd> + <dt><code>Expressió final</code></dt> + <dd>Una expressió per ser avaluada al final de cada iteració del bucle. Això passa abans de la següent avaluació de <code>condició</code>. Generalment s'usa per actualitzar o incrementar la variable contador.</dd> + <dt><code>sentència</code></dt> + <dd>Una sentència que s'executa mentre la condició avalui a true. Per executar múltiples sentències dins el bucle, utilitzeu una sentència <a href="/en-US/docs/JavaScript/Reference/Statements/block" title="JavaScript/Reference/Statements/block">block</a> (<code>{ ... }</code>) per agrupar aquestes sentències. Per no executar cap sentència dins el bucle, utilitzeu una sentència <a href="/en-US/docs/Web/JavaScript/Reference/Statements/Empty">buida</a> (<code>;</code>).</dd> +</dl> + +<h2 id="Examples" name="Examples">Exemples</h2> + +<h3 id="Example.3A_Using_for" name="Example.3A_Using_for">Exemple: Fer servir <code>for</code></h3> + +<p>La següent sentència <code>for</code> comença declarant la variable <code>i</code> i l'inicialitza a <code>0</code>. Comprova que <code>i</code> és menor que nou, realitza les dues sentències següents<u>, i incrementa <code>i</code> per 1 després de cada pas pel bucle.</u></p> + +<pre class="brush: js">for (var i = 0; i < 9; i++) { + console.log(i); + // more statements +} +</pre> + +<h3 id="Exemple_Expressions_for_opcionals"><u>Exemple: Expressions <code>for</code> opcionals</u></h3> + +<p>Les tres expressions en la capçalera del bucle <code>for</code> són opcionals.</p> + +<p>Per exemple, enel bloc d'<em>inicialització</em> no es requereix inicialitzar les variablesblock it is not required to initialize variables:</p> + +<pre class="brush: js">var i = 0; +for (; i < 9; i++) { + console.log(i); + // more statements +} +</pre> + +<p><u>Com el bloc d'<em>inicialització</em>, el bloc de <em>condició</em> també és opcional. Si s'omet aquesta expressió, s'ha de d'assegurar de trencar el bucle en el cos per evitar crear un bucle infinit.</u></p> + +<pre class="brush: js">for (var i = 0;; i++) { + console.log(i); + if (i > 3) break; + // more statements +}</pre> + +<p>També es pot ometre els tres blocs. Un alre cop, assegureu-vos de fer servir la sentència <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/break">break</a></code> per finalitzar el bucle i també modificar (incrementar) una variable, de forma que la condició per la sentència break esdevé certa en algun moment determinat.</p> + +<pre class="brush: js">var i = 0; + +for (;;) { + if (i > 3) break; + console.log(i); + i++; +} +</pre> + +<h3 id="Example.3A_Using_for_without_the_statement_section" name="Example.3A_Using_for_without_the_statement_section"><u>Exemple: Fer servir <code>for</code> amb una sentència buida</u></h3> + +<p><u>El cicle <code>for</code> següent callcula la possició de desplaçament d'un node en la secció <em>[expressió final]</em>, i per tant no requereix l'ús d'una <code>sentència</code> o secció de sentències <code><a href="/en-US/docs/JavaScript/Reference/Statements/block" title="JavaScript/Reference/Statements/block">block</a></code>, es fa servir una sentència <a href="/en-US/docs/Web/JavaScript/Reference/Statements/Empty">buida</a> en el seu lloc</u>.</p> + +<pre class="brush: js">function showOffsetPos (sId) { + var nLeft = 0, nTop = 0; + + for (var oItNode = document.getElementById(sId); // initialization + oItNode; // condition + nLeft += oItNode.offsetLeft, nTop += oItNode.offsetTop, oItNode = oItNode.offsetParent) // final-expression + /* empty statement */ ; + + console.log("Offset position of \"" + sId + "\" element:\n left: " + nLeft + "px;\n top: " + nTop + "px;"); +} + +// Example call: + +showOffsetPos("content"); + +// Output: +// "Offset position of "content" element: +// left: 0px; +// top: 153px;"</pre> + +<div class="note"><strong>Nota:</strong> En aquest cas, quan no es fa servir la secció <code>sentència</code>, <strong>es fica un punt i coma immediatament despres de la declaració del cicle</strong>.</div> + +<h2 id="Especificacions">Especificacions</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificació</th> + <th scope="col">Estat</th> + <th scope="col">Comentaris</th> + </tr> + <tr> + <td>1a edició de ECMAScript.</td> + <td>Estàndard</td> + <td>Definició inicial.</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="Compatibilitat_amb_navegadors">Compatibilitat amb navegadors</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>Suport bàsic</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>Suport bàsic</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">Vegeu també</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> |