1 files changed, 137 insertions, 0 deletions
diff --git a/files/vi/web/javascript/reference/statements/for/index.html b/files/vi/web/javascript/reference/statements/for/index.html
new file mode 100644
index 0000000000..613732de85
--- /dev/null
+++ b/files/vi/web/javascript/reference/statements/for/index.html
@@ -0,0 +1,137 @@
+---
+title: for
+slug: Web/JavaScript/Reference/Statements/for
+translation_of: Web/JavaScript/Reference/Statements/for
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>The <strong>for statement</strong> creates a loop that consists of three optional expressions, enclosed in parentheses and separated by semicolons, followed by a statement (usually a <a href="/en-US/docs/Web/JavaScript/Reference/Statements/block">block statement</a>) to be executed in the loop.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-for.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</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>An expression (including assignment expressions) or variable declaration evaluated once before the loop begins. Typically used to initialize a counter variable. This expression may optionally declare new variables with <code>var</code> or <code>let</code> keywords. Variables declared with <code>var</code> are not local to the loop, i.e. they are in the same scope the <code>for</code> loop is in. Variables declared with let are local to the statement.</dd>
+ <dd>The result of this expression is discarded.</dd>
+ <dt><code>condition</code></dt>
+ <dd>An expression to be evaluated before each loop iteration. If this expression evaluates to true, <code>statement</code> is executed. This conditional test is optional. If omitted, the condition always evaluates to true. If the expression evaluates to false, execution skips to the first expression following the <code>for</code> construct.</dd>
+ <dt><code>final-expression</code></dt>
+ <dd>An expression to be evaluated at the end of each loop iteration. This occurs before the next evaluation of <code>condition</code>. Generally used to update or increment the counter variable.</dd>
+ <dt><code>statement</code></dt>
+ <dd>A statement that is executed as long as the condition evaluates to true. To execute multiple statements within the loop, use a {{jsxref("Statements/block", "block", "", 0)}} statement (<code>{ ... }</code>) to group those statements. To execute no statement within the loop, use an {{jsxref("Statements/empty", "empty", "", 0)}} statement (<code>;</code>).</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Using_for">Using <code>for</code></h3>
+
+<p>The following <code>for</code> statement starts by declaring the variable <code>i</code> and initializing it to <code>0</code>. It checks that <code>i</code> is less than nine, performs the two succeeding statements, and increments <code>i</code> by 1 after each pass through the loop.</p>
+
+<pre class="brush: js">for (let i = 0; i &lt; 9; i++) {
+   console.log(i);
+   // more statements
+}
+</pre>
+
+<h3 id="Optional_for_expressions">Optional <code>for</code> expressions</h3>
+
+<p>All three expressions in the head of the <code>for</code> loop are optional.</p>
+
+<p>For example, in the <em>initialization</em> block it is not required to initialize variables:</p>
+
+<pre class="brush: js">var i = 0;
+for (; i &lt; 9; i++) {
+    console.log(i);
+    // more statements
+}
+</pre>
+
+<p>Like the <em>initialization</em> block, the <em>condition</em> block is also optional. If you are omitting this expression, you must make sure to break the loop in the body in order to not create an infinite loop.</p>
+
+<pre class="brush: js">for (let i = 0;; i++) {
+   console.log(i);
+   if (i &gt; 3) break;
+   // more statements
+}</pre>
+
+<p>You can also omit all three blocks. Again, make sure to use a {{jsxref("Statements/break", "break")}} statement to end the loop and also modify (increase) a variable, so that the condition for the break statement is true at some point.</p>
+
+<pre class="brush: js">var i = 0;
+
+for (;;) {
+  if (i &gt; 3) break;
+  console.log(i);
+  i++;
+}
+</pre>
+
+<h3 id="Using_for_without_a_statement">Using <code>for</code> without a statement</h3>
+
+<p>The following <code>for</code> cycle calculates the offset position of a node in the <em>final-expression</em> section, and therefore it does not require the use of a <code>statement</code> section, a semicolon is used instead.</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 */
+
+  ); /* semicolon */
+
+  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>Note:</strong> This is one of the few cases in JavaScript where <strong>the semicolon is mandatory</strong>. Indeed, without the semicolon the line that follows the cycle declaration will be considered a statement.</div>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-for-statement', 'for statement')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="hidden"><font><font>Bảng tương thích trên trang này được tạo từ dữ liệu có cấu trúc. </font><font>Nếu bạn muốn đóng góp cho dữ liệu, vui lòng xem </font></font><a href="https://github.com/mdn/browser-compat-data"><font><font>https://github.com/mdn/browser-compat-data</font></font></a><font><font> và gửi cho chúng tôi yêu cầu kéo.</font></font></div>
+
+<p><font><font>{{Compat ("javascript.statements.for")}}</font></font></p>
+
+<h2 id="Xem_thêm"><font><font>Xem thêm</font></font></h2>
+
+<ul>
+ <li><font><font>{{jsxref ("Báo cáo / trống", "tuyên bố trống", "", 0)}}</font></font></li>
+ <li><font><font>{{jsxref ("Tuyên bố / phá vỡ", "phá vỡ")}}</font></font></li>
+ <li><font><font>{{jsxref ("Tuyên bố / tiếp tục", "tiếp tục")}}</font></font></li>
+ <li><font><font>{{jsxref ("Tuyên bố / while", "while")}}</font></font></li>
+ <li><font><font>{{jsxref ("Tuyên bố / làm ... trong khi", "làm ... trong khi")}}</font></font></li>
+ <li><font><font>{{jsxref ("Tuyên bố / cho ... trong", "cho ... trong")}}</font></font></li>
+ <li><font><font>{{jsxref ("Tuyên bố / cho ... của", "cho ... của")}}</font></font></li>
+</ul>