1 files changed, 165 insertions, 0 deletions
diff --git a/files/uk/web/javascript/reference/statements/for/index.html b/files/uk/web/javascript/reference/statements/for/index.html
new file mode 100644
index 0000000000..12e0bbefd7
--- /dev/null
+++ b/files/uk/web/javascript/reference/statements/for/index.html
@@ -0,0 +1,165 @@
+---
+title: for
+slug: Web/JavaScript/Reference/Statements/for
+tags:
+  - JavaScript
+  - for
+  - Цикл
+translation_of: Web/JavaScript/Reference/Statements/for
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><strong>Оператор for </strong>створює цикл, що складається з трьох необов'язкових виразів, заключених у дужки та розділених крапками з комами, за ними розташовані команди (зазвичай, <a href="/uk/docs/Web/JavaScript/Reference/Statements/block">блок команд</a>), який потрібно виконати у циклі.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-for.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">for ([<em>initialization</em>]; [<em>condition</em>]; [<em>final-expression</em>])
+   <em>statement</em></pre>
+
+<dl>
+ <dt><code>initialization</code></dt>
+ <dd>Вираз (в тому числі вирази присвоєння) або оголошення змінної, оцінюється один раз перед початком циклу. Зазвичай використовується для ініціалізації змінної лічильника. Цей вираз може також оголошувати нові змінні ключовими словами <code>var</code> або <code>let</code>. Змінні, оголошені через <code>var</code> не є локальними для циклу, тобто, вони знаходяться у тій же області видимості, що й сам цикл <code>for</code>. Змінні, оголошені через <code>let</code>, є локальними змінними циклу.</dd>
+ <dd>Результат цього виразу відкидається.</dd>
+ <dt><code>condition</code></dt>
+ <dd>Вираз, який оцінюється перед кожною ітерацією циклу. Якщо вираз оцінюється як true, то <code>statement</code> виконується. Ця перевірка є необов'язковою. Якщо вона пропущена, то умова завжди оцінюється як true. Якщо вираз оцінюється як false, виконання переходить до першого виразу, розташованого після конструкції <code>for</code>.</dd>
+ <dt><code>final-expression</code></dt>
+ <dd>Вираз, який оцінюється в кінці кожної ітерації циклу. Це відбувається до наступного оцінювання виразу <code>condition</code>. Зазвичай використовується, щоб оновити або збільшити значення змінної лічильника.</dd>
+ <dt><code>statement</code></dt>
+ <dd>Команда, яка виконується, поки умова оцінюється як true. Для виконання кількох команд, використовуйте {{jsxref("Statements/block", "блок", "", 0)}} (<code>{ ... }</code>), щоб згрупувати ці команди. Щоб не виконувати жодних команд, скористайтесь {{jsxref("Statements/empty", "порожнім", "", 0)}} оператором (<code>;</code>).</dd>
+</dl>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_циклу_for">Використання циклу <code>for</code></h3>
+
+<p>Наведений цикл <code>for</code> починається з оголошення змінної <code>i</code> та ініціалізації її значенням <code>0</code>. Він перевіряє, що значення <code>i</code> менше дев'яти, виконує дві команди та збільшує <code>i</code> на 1 після кожного проходу через цикл.</p>
+
+<pre class="brush: js">for (let i = 0; i &lt; 9; i++) {
+   console.log(i);
+   // ще команди
+}
+</pre>
+
+<h3 id="Необов'язкові_вирази_циклу_for">Необов'язкові вирази циклу <code>for</code></h3>
+
+<p>Всі три вирази у шапці циклу <code>for</code> є необов'язковими.</p>
+
+<p>Наприклад, у блоці <em>initialization</em> не вимагається ініціалізувати змінні:</p>
+
+<pre class="brush: js">var i = 0;
+for (; i &lt; 9; i++) {
+    console.log(i);
+    // ще команди
+}
+</pre>
+
+<p>Як і блок <em>initialization</em>, блок умови <em>condition</em> також є необов'язковим. Якщо ви пропускаєте цей вираз, то маєте переконатись, що встановили переривання у тілі циклу, щоб не створити нескінченний цикл.</p>
+
+<pre class="brush: js">for (let i = 0;; i++) {
+   console.log(i);
+   if (i &gt; 3) break;
+   // ще команди
+}</pre>
+
+<p>Ви також можете пропустити всі три блоки. Знову ж таки, переконайтеся, що ви встановили оператор {{jsxref("Statements/break", "break")}}, щоб закінчити цикл, а також змінили (збільшили) змінну, щоб умова для переривання в якийсь момент набула значення true.</p>
+
+<pre class="brush: js">var i = 0;
+
+for (;;) {
+  if (i &gt; 3) break;
+  console.log(i);
+  i++;
+}
+</pre>
+
+<h3 id="Використання_циклу_for_без_команд">Використання циклу <code>for</code> без команд</h3>
+
+<p>Наведений цикл <code>for</code> обчислює зміщення вузла у розділі <em>final-expression</em>, і тому не вимагає використання розділу <code>statement</code>, замість нього використовується крапка з комою.</p>
+
+<pre class="brush: js">function showOffsetPos(sId) {
+
+  var nLeft = 0, nTop = 0;
+
+  for (
+
+    var oItNode = document.getElementById(sId); /* ініціалізація */
+
+    oItNode; /* умова */
+
+    nLeft += oItNode.offsetLeft, nTop += oItNode.offsetTop, oItNode = oItNode.offsetParent /* final-expression */
+
+  ); /* крапка з комою */
+
+  console.log('Зміщення елемента \'' + sId + '\':\n left: ' + nLeft + 'px;\n top: ' + nTop + 'px;');
+
+}
+
+/* Приклад виклику: */
+
+showOffsetPos('content');
+
+// Результат:
+// "Зміщення елемента "content":
+// left: 0px;
+// top: 153px;"</pre>
+
+<div class="note"><strong>Заувага:</strong> Це один з небагатьох випадків у JavaScript, коли <strong>крапка з комою є обов'язковою</strong>. Дійсно, без крапки з комою рядок, що записаний після циклу, вважатиметься командою циклу.</div>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-12.6.2', 'for statement')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-12.6.3', 'for statement')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td></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>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-for-statement', 'for statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.statements.for")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Statements/empty", "порожній оператор", "", 0)}}</li>
+ <li>{{jsxref("Statements/break", "break")}}</li>
+ <li>{{jsxref("Statements/continue", "continue")}}</li>
+ <li>{{jsxref("Statements/while", "while")}}</li>
+ <li>{{jsxref("Statements/do...while", "do...while")}}</li>
+ <li>{{jsxref("Statements/for...in", "for...in")}}</li>
+ <li>{{jsxref("Statements/for...of", "for...of")}}</li>
+</ul>