initial commit

1 files changed, 332 insertions, 0 deletions

diff --git a/files/pl/web/javascript/guide/loops_and_iteration/index.html b/files/pl/web/javascript/guide/loops_and_iteration/index.html
new file mode 100644
index 0000000000..a53f1a9016
--- /dev/null
+++ b/files/pl/web/javascript/guide/loops_and_iteration/index.html
@@ -0,0 +1,332 @@
+---
+title: Pętle i iteracje
+slug: Web/JavaScript/Guide/Loops_and_iteration
+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>
+
+<p class="summary">Za pomocą pętli możemy w łatwy sposób powtarzać pewne czynności. Ten rodział <a href="/en-US/docs/Web/JavaScript/Guide">JavaScript Guide</a> zapoznaje z różnymi rodzajami pętli, dostępnymi w JavaScript.</p>
+
+<p>Możesz myśleć o pętli jak o skomputeryzowanej wersji gry w której mówisz komuś, żeby zrobił X kroków w jedym kierunku a następnie Y kroków w innym; przykład "Zrób 5 kroków na zachód" może być wyrażone za pomocą pętli w ten sposób:</p>
+
+<pre class="brush: js">var step;
+for (step = 0; step &lt; 5; step++) {
+  // Uruchamia się 5 razy, z wartościami od 0 do 4.
+  console.log('Idę na zachód jeden krok');
+}
+</pre>
+
+<p>Jest wiele różnych rodzajów pętli, lecz zwykle wszystkie robią to samo: powtarzają zadaną akcję pewną ilość razy (liczba powtórzeń może także wynosić 0).  Różne mechanizmy pętli oferują różne sposoby określania początku i końca pętli. W różnych sytuacjach łatwiej jest użyć danego typu pętli niż innego.</p>
+
+<p>Wyrażenia dla pętli obsługiwane w JavaScript:</p>
+
+<ul>
+ <li>{{anch("for")}}</li>
+ <li>{{anch("do...while")}}</li>
+ <li>{{anch("while")}}</li>
+ <li>{{anch("label")}}</li>
+ <li>{{anch("break")}}</li>
+ <li>{{anch("continue")}}</li>
+ <li>{{anch("for...in")}}</li>
+ <li>{{anch("for...of")}}</li>
+</ul>
+
+<h2 id="for"><code>for</code></h2>
+
+<p>Pętla <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for">for</a></code> powtarza wykonie instrukcji, dopóki dostarczony warunek nie zwraca false. Pętla for w JavaScript jest podobna do tej z języków Java czy C. Składnia tej pętli wygląda następująco:</p>
+
+<pre class="syntaxbox">for ([wyrażenieInicjalizacji]; [warunek]; [wyrażenieInkrementacji])
+  Instrukcja
+</pre>
+
+<p>Podczas wykonywania się pętli for, mają miejsce następujące operacje:</p>
+
+<ol>
+ <li> Wykonywane jest wyrażenie <code>wyrażenieInicjalizacji</code>, o ile takie istnieje. Zazwyczaj w tym miejscu inicjalizuje się zmienne, które posłużą później jako liczniki dla pętli.</li>
+ <li> Sprawdzana jest wartość zwracana przez wyrażenie <code>warunek</code>, jeśli jest to true, pętla będzie wykonywać się dalej. Jeśli z kolei będzie to false, pętla zostanie przerwana. W przypadku nie podania żadnego wyrażenia warunkowego, pętla będzie traktować to jako true.</li>
+ <li>Wykonuje się <code>Instrukcja</code>.  W celu wykonania wielu instrukcji w jednym przebiegu pętli, należy je zgrupować i umieścić w bloku ( <code>{ ... }</code> ).</li>
+ <li> Wykonywane zostaje <code>wyrażenie inkrementacji</code>, o ile istnieje. W tym miejscu powiększamy wartość licznika pętli.</li>
+ <li>Zarządzanie pętlą wraca do kroku 2.</li>
+</ol>
+
+<h3 id="Przykład"><strong>Przykład</strong></h3>
+
+<p>Następująca funkcja zawiera pętle <code>for</code>, która zlicza elementy &lt;option&gt; w rozwijalnej liście &lt;select&gt;. W pętli zostaje zadeklarowana zmienna <code>i</code> z wartością 0. Sprawdza czy <code>i</code> jest mniejsze niż liczba elementów &lt;option&gt;, wykonuje kod wewnątrz i zwiększa wartość <code>i </code>po każdym przebiegu.</p>
+
+<pre class="brush: html">&lt;form name="selectForm"&gt;
+  &lt;p&gt;
+    &lt;label for="musicTypes"&gt;Choose some music types, then click the button below:&lt;/label&gt;
+    &lt;select id="musicTypes" name="musicTypes" 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;Classical&lt;/option&gt;
+      &lt;option&gt;Opera&lt;/option&gt;
+    &lt;/select&gt;
+  &lt;/p&gt;
+  &lt;p&gt;&lt;input id="btn" type="button" value="How many are selected?" /&gt;&lt;/p&gt;
+&lt;/form&gt;
+
+&lt;script&gt;
+function howMany(selectObject) {
+  var numberSelected = 0;
+  for (var i = 0; i &lt; selectObject.options.length; i++) {
+    if (selectObject.options[i].selected) {
+      numberSelected++;
+    }
+  }
+  return numberSelected;
+}
+
+var btn = document.getElementById("btn");
+btn.addEventListener("click", function(){
+  alert('Number of options selected: ' + howMany(document.selectForm.musicTypes))
+});
+&lt;/script&gt;
+
+</pre>
+
+<h2 id="do...while"><code>do...while</code></h2>
+
+<p><code><font face="Open Sans, Arial, sans-serif">Pętla </font><a href="/en-US/docs/Web/JavaScript/Reference/Statements/do...while">do...while</a></code> powtarza <code>instrukcje</code> wewnątrz, dopóki <code>warunek</code> nie zwróci false. Wygląda to następująco:</p>
+
+<pre class="syntaxbox">do
+  instrukcja
+while (warunek);
+</pre>
+
+<p>Możemy skorzystać z wyrażenia bloku (<code>{ ... }</code>), by zgrupować wiele instrukcji. Na końcu wykonywania instrukcji sprawdzany jest warunek. Jeśli zwróci on true, Pętla wykonan się po raz kolejny, z kolei false przerwie pętle. Warto zwrócić uwagę, że ze względu na miejsce umieszczenia warunku, zawsze wykona się ona przynajmniej raz.</p>
+
+<h3 id="Przykład_2"><strong>Przykład</strong></h3>
+
+<p>W tym przykładzie pętla będzie iterawoć do momentu kiedy licznik <code>i</code> nie będzie większy od 5.</p>
+
+<pre class="brush: js">do {
+  i += 1;
+  console.log(i);
+} while (i &lt; 5);</pre>
+
+<h2 id="while"><code>while</code></h2>
+
+<p>Pętla <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/while">while</a></code> wykonuje się dopóki podany warunek zwraca true. Składnia jest następująca:</p>
+
+<pre class="syntaxbox">while (warunek)
+  instrukcja
+</pre>
+
+<p>Jeśli <code>warunek</code> zwróci false, pętla zostaje zatrzymana. W odróżniu od pętli <code>do ... while</code>, sprawdzania warunku mamy na początku. Oznacza to, że jeśli warunek na start zwraca name false, pętla nie wykona się ani razu.</p>
+
+<p>W tym przypadku również możemy zgrupować instrukcje za pomocą (<code>{ ... }</code>).</p>
+
+<h3 id="Przykład_1"><strong>Przykład 1</strong></h3>
+
+<p>Następująca pętla <code>while</code> iteruje tak długo aż n jest mniejszy od 3:</p>
+
+<pre class="brush: js">n = 0;
+x = 0;
+while (n &lt; 3) {
+  n++;
+  x += n;
+}
+</pre>
+
+<p>Z każdą iteracją, pętla inkrementuje wartość n i dodaje ją do x. W związku z tym x i n przyjmują następujące wartości:</p>
+
+<ul>
+ <li>Po pierwszym przebiegu: n = 1 i x = 1</li>
+ <li>Po drugim przebiegu: n = 2 i x = 3</li>
+ <li>Po trzecim przebiegu: n = 3 i x = 6</li>
+</ul>
+
+<p>Po wykonaniu trzeciego przebiegu, warunek n &lt; 3 nie zwraca już dłużej true, więc pętla zostaje przerwana.</p>
+
+<h3 id="Przykład_2_2"><strong>Przykład 2</strong></h3>
+
+<p>Unikaj nieskończonych pętli. Upewnij się, że podany warunek ma możliwośc zwrócenia false; w przeciwnym razie pętla nigdy nie zostanie przerwana, co w najgorszym razie spowoduje zawieszenie przeglądarki.</p>
+
+<p>Poniższy przykład przedstawia pętla, która nigdy nie zostanie przerwana, ponieważ podany warunek zawsze zwróci true:</p>
+
+<pre class="brush: js">while (true) {
+  console.log("Hello, world");
+}</pre>
+
+<h2 id="label_statement"><code>label</code> statement</h2>
+
+<p>A <a href="/en-US/docs/Web/JavaScript/Reference/Statements/label">label</a> provides a statement with an identifier that lets you refer to it elsewhere in your program. For example, you can use a label to identify a loop, and then use the <code>break</code> or <code>continue</code> statements to indicate whether a program should interrupt the loop or continue its execution.</p>
+
+<p>The syntax of the label statement looks like the following:</p>
+
+<pre class="syntaxbox">label :
+   statement
+</pre>
+
+<p>The value of <code><em>label</em></code> may be any JavaScript identifier that is not a reserved word. The <code><em>statement</em></code> that you identify with a label may be any statement.</p>
+
+<h3 id="Example"><strong>Example</strong></h3>
+
+<p>In this example, the label <code>markLoop</code> identifies a <code>while</code> loop.</p>
+
+<pre class="brush: js">markLoop:
+while (theMark == true) {
+   doSomething();
+}</pre>
+
+<h2 id="break_statement"><code>break</code> statement</h2>
+
+<p>Use the <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/break">break</a></code> statement to terminate a loop, <code>switch</code>, or in conjunction with a label statement.</p>
+
+<ul>
+ <li>When you use <code>break</code> without a label, it terminates the innermost enclosing <code>while</code>, <code>do-while</code>, <code>for</code>, or <code>switch</code> immediately and transfers control to the following statement.</li>
+ <li>When you use <code>break</code> with a label, it terminates the specified labeled statement.</li>
+</ul>
+
+<p>The syntax of the <code>break</code> statement looks like this:</p>
+
+<ol>
+ <li><code>break;</code></li>
+ <li><code>break <em>label</em>;</code></li>
+</ol>
+
+<p>The first form of the syntax terminates the innermost enclosing loop or <code>switch</code>; the second form of the syntax terminates the specified enclosing label statement.</p>
+
+<h3 id="Example_1"><strong>Example</strong> <strong>1</strong></h3>
+
+<p>The following example iterates through the elements in an array until it finds the index of an element whose value is <code>theValue</code>:</p>
+
+<pre class="brush: js">for (i = 0; i &lt; a.length; i++) {
+  if (a[i] == theValue) {
+    break;
+  }
+}</pre>
+
+<h3 id="Example_2_Breaking_to_a_label"><strong>Example 2: </strong>Breaking to a label</h3>
+
+<pre class="brush: js">var x = 0;
+var z = 0
+labelCancelLoops: while (true) {
+  console.log("Outer loops: " + x);
+  x += 1;
+  z = 1;
+  while (true) {
+    console.log("Inner loops: " + z);
+    z += 1;
+    if (z === 10 &amp;&amp; x === 10) {
+      break labelCancelLoops;
+    } else if (z === 10) {
+      break;
+    }
+  }
+}
+</pre>
+
+<h2 id="continue_statement"><code>continue</code> statement</h2>
+
+<p>The <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/continue">continue</a></code> statement can be used to restart a <code>while</code>, <code>do-while</code>, <code>for</code>, or <code>label</code> statement.</p>
+
+<ul>
+ <li>When you use <code>continue</code> without a label, it terminates the current iteration of the innermost enclosing <code>while</code>, <code>do-while</code>, or <code>for</code> statement and continues execution of the loop with the next iteration. In contrast to the <code>break</code> statement, <code>continue</code> does not terminate the execution of the loop entirely. In a <code>while</code> loop, it jumps back to the condition. In a <code>for</code> loop, it jumps to the <code>increment-expression</code>.</li>
+ <li>When you use <code>continue</code> with a label, it applies to the looping statement identified with that label.</li>
+</ul>
+
+<p>The syntax of the <code>continue</code> statement looks like the following:</p>
+
+<ol>
+ <li><code>continue;</code></li>
+ <li><code>continue </code><em><code>label;</code></em></li>
+</ol>
+
+<h3 id="Example_1_2"><strong>Example 1</strong></h3>
+
+<p>The following example shows a <code>while</code> loop with a <code>continue</code> statement that executes when the value of <code>i</code> is three. Thus, <code>n</code> takes on the values one, three, seven, and twelve.</p>
+
+<pre class="brush: js">i = 0;
+n = 0;
+while (i &lt; 5) {
+  i++;
+  if (i == 3) {
+    continue;
+  }
+  n += i;
+}
+</pre>
+
+<h3 id="Example_2"><strong>Example 2</strong></h3>
+
+<p>A statement labeled <code>checkiandj</code> contains a statement labeled <code>checkj</code>. If <code>continue</code> is encountered, the program terminates the current iteration of <code>checkj</code> and begins the next iteration. Each time <code>continue</code> is encountered, <code>checkj</code> reiterates until its condition returns <code>false</code>. When <code>false</code> is returned, the remainder of the <code>checkiandj</code> statement is completed, and <code>checkiandj</code> reiterates until its condition returns <code>false</code>. When <code>false</code> is returned, the program continues at the statement following <code>checkiandj</code>.</p>
+
+<p>If <code>continue</code> had a label of <code>checkiandj</code>, the program would continue at the top of the <code>checkiandj</code> statement.</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 + " is odd.");
+      }
+      console.log("i = " + i);
+      console.log("j = " + j);
+  }</pre>
+
+<h2 id="for...in_statement"><code>for...in</code> statement</h2>
+
+<p>The <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in"><code>for...in</code></a> statement iterates a specified variable over all the enumerable properties of an object. For each distinct property, JavaScript executes the specified statements. A <code>for...in</code> statement looks as follows:</p>
+
+<pre class="syntaxbox">for (variable in object) {
+  statements
+}
+</pre>
+
+<h3 id="Example_3"><strong>Example</strong></h3>
+
+<p>The following function takes as its argument an object and the object's name. It then iterates over all the object's properties and returns a string that lists the property names and their values.</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>For an object <code>car</code> with properties <code>make</code> and <code>model</code>, <code>result</code> would be:</p>
+
+<pre class="brush: js">car.make = Ford
+car.model = Mustang
+</pre>
+
+<h3 id="Arrays"><strong>Arrays</strong></h3>
+
+<p>Although it may be tempting to use this as a way to iterate over {{jsxref("Array")}} elements, the <strong>for...in</strong> statement will return the name of your user-defined properties in addition to the numeric indexes. Thus it is better to use a traditional <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for">for</a></code> loop with a numeric index when iterating over arrays, because the <strong>for...in</strong> statement iterates over user-defined properties in addition to the array elements, if you modify the Array object, such as adding custom properties or methods.</p>
+
+<h2 id="for...of_statement"><code>for...of</code> statement</h2>
+
+<p>The <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></code> statement creates a loop Iterating over <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/iterable">iterable objects</a> (including {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/arguments">arguments</a> object and so on), invoking a custom iteration hook with statements to be executed for the value of each distinct property.</p>
+
+<pre class="syntaxbox">for (<em>variable</em> of <em>object</em>) {
+  <em>statement
+</em>}</pre>
+
+<p>The following example shows the difference between a <code>for...of</code> loop and a <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in" title="en-US/docs/JavaScript/Reference/Statements/for...in">for...in</a></code> loop. While <code>for...in</code> iterates over property names, <code>for...of</code> iterates over property values:</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>