initial commit

4 files changed, 1190 insertions, 0 deletions

diff --git a/files/vi/learn/javascript/first_steps/index.html b/files/vi/learn/javascript/first_steps/index.html
new file mode 100644
index 0000000000..57fe422862
--- /dev/null
+++ b/files/vi/learn/javascript/first_steps/index.html
@@ -0,0 +1,60 @@
+---
+title: JavaScript cơ bản
+slug: Learn/JavaScript/First_steps
+tags:
+  - Biến
+  - Chuỗi
+  - Cơ Bản
+  - Hướng dẫn
+  - JavaScript
+  - Mảng
+  - Toán tử
+translation_of: Learn/JavaScript/First_steps
+---
+<div dir="rtl">{{LearnSidebar}}</div>
+
+<p class="summary">Trong mô-đun (module) đầu tiên về JavaScript, đầu tiên chúng ta sẽ trả lời một vài câu hỏi căn bản chẳng hạn "JavaScript là gì?", "nó trông như thế nào?", và "nó có thể làm gì?", trước khi chuyển bạn sang trải nghiệm thực hành đầu tiên bằng việc viết JavaScript. Sau đó, chúng ta sẽ thảo luận chi tiết một vài cấu phần chính, chẳng hạn như các biến (variables), các chuỗi (strings), các số (numbers) và các mảng (arrays).</p>
+
+<h2 id="Điều_Kiện_Tiên_Quyết">Điều Kiện Tiên Quyết</h2>
+
+<p>Trước khi bắt đầu mô-đun này, bạn không cần phải biết trước bất kì kiến thức JavaScript nào, nhưng cần một chút hiểu biết về HTML và CSS. Lời khuyên là bạn nên tìm hiểu các mô-đun sau trước khi bắt đầu với JavaScript:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the Web</a> (which includes a really <a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">basic JavaScript introduction</a>).</li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>.</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: Nếu bạn đang thực hành trên một máy tính/máy tính bảng/ hoặc các thiết bị mà bạn không có quyền tạo các files, bạn có thể thực hành các ví dụ trong bài học trên trình biên tập code online như <a href="http://jsbin.com/">JSBin</a> or <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Chuỗi_Bài_Hướng_Dẫn">Chuỗi Bài Hướng Dẫn</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></dt>
+ <dd>Chào mừng đến khóa học JavaScript cơ bản của MDN! Trong bài đầu tiên chúng ta sẽ nhìn nhận JavaScript từ góc độ tổng quát, trả lời các câu hỏi như "JavaScript là gì?" và "nó có khả năng gì?" cũng như giúp bạn làm quen với các chức năng của JavaScript.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></dt>
+ <dd>Giờ bạn đã được học lý thuyết tổng quát về JavaScript cũng như khả năng ứng dụng của chúng. Tiếp theo chúng ta sẽ tiềm hiểu nhanh những tính năng cơ bản trong JavaScript thông qua thực hành, trong bài này, bạn sẽ được hướng dẫn từng bước xây dựng trò chơi "Đoán số" đơn giản.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></dt>
+ <dd>Trò chơi "Đoán số" trong bài trước mà bạn đã xây dựng, khả năng cao là chương trình của bạn không hoạt động như mong muốn. Đừng sợ - bài này sẽ giúp bạn không phải "vò đầu bức tai" trong những trường hợp như vậy bằng một vài mẹo đơn giản - tìm và chữa lỗi chương trình JavaScript.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></dt>
+ <dd>Trong những bài trước bạn được tìm hiểu JavaScript là gì, khả năng ứng dụng của nó và cách kết hợp nó với các công nghệ web khác cũng như các tính năng cốt lõi nhìn từ góc độ tổng quát. Trong bài này chúng ta sẽ bắt đầu làm việc với thành phần cơ bản nhất của JavaScript - "Các Biến".</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></dt>
+ <dd>Tiếp theo trong khóa học chúng ta sẽ thảo luận về toán học trong JavaScript - cách kết hợp các toán tử, toán hạng và các tính năng khác để vận dụng chúng một cách thành công.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></dt>
+ <dd>Trong phần này chúng ta sẽ tìm hiểu về chuỗi (string) - tên gọi của các đoạn văn bản trong lập trình. Bài này tập trung vào những hiểu biết chung về chuỗi mà bạn thật sự cần phải biết khi học JavaScript như tạo chuỗi, escape quote trong chuỗi, xâu các chuỗi và kí tự cùng nhau.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></dt>
+ <dd>Giờ chúng ta đã tìm hiểu cơ bản về chuỗi, hãy tiến thêm một bước nữa và bắt đầu nghĩ về những cách vận dụng hữu ích nào chúng ta có thể thực hiện trên chuỗi với các phương thức (methods) dựng sẵn như tìm độ dài (length) của chuỗi, xâu (join) và phân tách (split) chuỗi, tách kí tự từ một chuỗi vv...</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></dt>
+ <dd>Trong bài cuối của mô-đun này, chúng ta sẽ được giới thiệu về mảng (arrays) - một cách tiện lợi để lưu trữ danh sách các phần tử của một dãy thông tin trong một tên biến duy nhất. Tìm hiểu tính hữu dụng của kiểu dữ liệu mảng, khám phá cách tạo mảng, nhận, thêm, xóa phần tử được lưu trữ trong mảng vv...</dd>
+</dl>
+
+<h2 id="Bài_Tập">Bài Tập</h2>
+
+<p>Bài tập sau đây sẽ giúp bạn kiểm tra kiến thức JavaScript cơ bản được trình bày trong mô-đun.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Silly story generator</a></dt>
+ <dd>Trong bài tập này bạn sẽ ứng dụng những kiến thức trong mô-đun để tạo một ứng dụng thú vị. Ứng dụng của bạn có nhiệm vụ tạo ra những câu chuyện ngớ ngẩn một cách ngẫu nhiên. Chúc vui!</dd>
+</dl>
diff --git a/files/vi/learn/javascript/first_steps/math/index.html b/files/vi/learn/javascript/first_steps/math/index.html
new file mode 100644
index 0000000000..d4a9085d82
--- /dev/null
+++ b/files/vi/learn/javascript/first_steps/math/index.html
@@ -0,0 +1,418 @@
+---
+title: Toán học cơ bản trong JavaScript — số và toán tử
+slug: Learn/JavaScript/First_steps/Math
+translation_of: Learn/JavaScript/First_steps/Math
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary">Tới đây ta sẽ bàn về toán học trong JavaScript — cách sử dụng {{Glossary("Operator","toán tử")}} và các tính năng khác để thao tác thành công với các con số phục vụ mục đích của chúng ta.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Điều kiện tiên quyết:</th>
+   <td>Biết cách sử dụng máy tính cơ bản, hiểu cơ bản về HTML và CSS, hiểu được JavaScript là gì.</td>
+  </tr>
+  <tr>
+   <th scope="row">Mục tiêu:</th>
+   <td>Quen với cơ bản của toán trong JavaScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Tất_cả_mọi_người_đều_yêu_toán">Tất cả mọi người đều yêu toán</h2>
+
+<p>Được rồi, có thể là không. Một số trong chúng ta yêu toán, một số thì ghét toán ngay từ khi ta phải học bảng cửu chương và cách chia số lớn ở trường, và một số khác thì đứng ở đâu đó giữa cả hai. Nhưng ta chẳng thể phủ nhận rằng toán là một phần cốt lõi của cuộc sống mà ta không thể nào tiến xa nếu không có nó. Đặc biệt là khi ta ta học cách lập trình JavaScript (hoặc bất kì ngôn ngữ lập trình nào khác) - chủ yếu phụ thuộc vào xử lý dữ liệu kiểu số, tính toán giá trị mới, vân vân... khiến bạn không khỏi bất ngờ khi nhận ra JavaScript có sẵn đầy đủ các hàm toán học.</p>
+
+<p>Bài viết này chỉ đề cập tới những phần cơ bản mà bạn cần phải biết vào lúc này.</p>
+
+<h3 id="Kiểu_số_học">Kiểu số học</h3>
+
+<p>Trong lập trình, thậm chí cả hệ số thập phân xoàng mà ta đều hiểu rõ cũng phức tạp hơn bạn có thể mường tượng được. Chúng tôi dùng nhiều thuật ngữ khác nhau để mô tả các kiểu số thập phân khác nhau, chẳng hạn:</p>
+
+<ul>
+ <li><strong>Integers</strong> là số nguyên, ví dụ 10, 400, or -5.</li>
+ <li><strong>Floating point numbers</strong> (số thực dấu phẩy động) có dấu chấm thập phân và vị trí thập phân, ví dụ 12.5, và 56.7786543.</li>
+ <li><strong>Doubles</strong> là một kiểu số thực dấu phẩy động đặc biệt có độ chính xác cao hơn số thực dấu phẩy động bình thường (độ chính xác liên quan đến số lượng vị trí sau dấu chấm thập phân).</li>
+</ul>
+
+<p>Chúng tôi còn có một số kiểu hệ số khác! Thập phần là hệ cơ số 10 (tức là sử dụng 0–9 trong từng hàng từ đơn vị đến chục trăm...), nhưng chúng tôi cũng có những thứ như là:</p>
+
+<ul>
+ <li><strong>Binary</strong> — Cấp độ thấp nhất trong ngôn ngữ máy; 0 và 1.</li>
+ <li><strong>Octal</strong> — Cơ số 8, dùng 0–7 trong từng hàng.</li>
+ <li><strong>Hexadecimal</strong> — Cơ số 16, dùng 0–9 và tới a–f trong từng hàng. Có lẽ bạn từng sử dụng kiểu số này khi thiết lập <a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Hexadecimal_values">màu sắc trong CSS</a>.</li>
+</ul>
+
+<p><strong>Trước khi nghĩ rằng não bạn sắp tan chảy, dừng lại ngay đó!</strong> Để bắt đầu, ta sẽ chỉ dùng số thập phân xuyên suốt khoá học này; hiếm khi bạn phải nghĩ đến dạng số khác, nếu điều đó xảy ra.</p>
+
+<p>Tin mừng thứ hai là không giống như một số ngôn ngữ lập trình khác, JavaScript chỉ có duy nhất một kiểu dữ liệu cho số, đó là, {{jsxref("Number")}}. Điều này nghĩa là dù bạn gặp phải kiểu số học nào trong JavaScript, bạn cũng có thể xử lý chúng cùng một cách.</p>
+
+<h3 id="Với_tôi_tất_cả_chỉ_là_số">Với tôi tất cả chỉ là số</h3>
+
+<p>Hãy thử chơi với một vài con số để làm quen với cú pháp căn bản mà ta cần nào. Nhập lệnh được liệt kê bên dưới vào <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">JavaScript console trong công cụ dành cho nhà phát triển của bạn</a>, hoặc dùng console dựng sẵn phía dưới tuỳ thích.</p>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/variables/index.html", '100%', 300)}}</p>
+
+<p><strong><a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/">Mở trong cửa sổ mới</a></strong></p>
+
+<ol>
+ <li>Trước hết, hay khai báo một cặp biến và khởi tạo lần lượt giá trị cho chúng với integer (số nguyên) và float (số thực), rồi gõ tên từng biến vào để kiểm tra thứ tự của chúng:
+  <pre class="brush: js">var myInt = 5;
+var myFloat = 6.667;
+myInt;
+myFloat;</pre>
+ </li>
+ <li>Giá trị số học không cần tới cặp dấu nháy — thử khai báo và khởi tạo thêm vài cặp biến nữa trước khi chuyển sang bước tiếp theo.</li>
+ <li>Giờ hãy kiểm tra xem hai biến vừa tạo của chúng ta có cùng kiểu dữ liệu không. Có một toán tử trong JavaScript tên là {{jsxref("Operators/typeof", "typeof")}} làm được điều này. Hãy nhập hai dòng phía dưới:
+  <pre class="brush: js">typeof myInt;
+typeof myFloat;</pre>
+  Giá trị trả về sẽ luôn là <code>"number"</code> trong cả hai trường hợp — điều này khiến mọi thứ dễ dàng hơn thay vì có nhiều kiểu dữ liệu khác nhau, và ta sẽ phải xử lý theo các cách khác nhau. Phù!</li>
+</ol>
+
+<h2 id="Toán_tử_số_học">Toán tử số học</h2>
+
+<p>Toán tử số học là những toán tử căn bản để ta dùng cho phép tính:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Toán tử</th>
+   <th scope="col">Tên</th>
+   <th scope="col">Mục đích</th>
+   <th scope="col">Ví dụ</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>+</code></td>
+   <td>Cộng</td>
+   <td>Cộng hai số lại với nhau.</td>
+   <td><code>6 + 9</code></td>
+  </tr>
+  <tr>
+   <td><code>-</code></td>
+   <td>Trừ</td>
+   <td>Trừ số bên trái bằng số bên phải.</td>
+   <td><code>20 - 15</code></td>
+  </tr>
+  <tr>
+   <td><code>*</code></td>
+   <td>Nhân</td>
+   <td>Nhân hai số lại với nhau.</td>
+   <td><code>3 * 7</code></td>
+  </tr>
+  <tr>
+   <td><code>/</code></td>
+   <td>Chia</td>
+   <td>Chia số bên trái bằng số bên phải.</td>
+   <td><code>10 / 5</code></td>
+  </tr>
+  <tr>
+   <td><code>%</code></td>
+   <td>Chia lấy dư (thi thoảng gọi là modulo)</td>
+   <td>
+    <p>Trả về phần dư sau khi bạn thực hiện phép chia số bên trái cho số bên phải.</p>
+   </td>
+   <td><code>8 % 3</code> (trả về 2, bởi vì 3 nhân 2 được 6, 8 trừ 6 còn 2.)</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Ghi chú</strong>: Đôi khi bạn sẽ thấy các số trong phép tính được đề cập dưới dạng các {{Glossary("Operand", "toán hạng")}}.</p>
+</div>
+
+<p>Chắc chắn chúng tôi không cần dạy bạn cách làm toán căn bản, nhưng chúng tôi muốn thử độ hiểu về cú pháp liên quan. Hãy thử nhập ví dụ bên dưới vào trong <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">JavaScript console trong công cụ dành cho nhà phát triển của bạn</a>, hoặc dùng console dựng sẵn phía dưới tuỳ thích, để bạn quen với cú pháp.</p>
+
+<ol>
+ <li>Trước hết hãy thử tự nhập vào vài ví dụ đơn giản, như là
+  <pre class="brush: js">10 + 7
+9 * 8
+60 % 3</pre>
+ </li>
+ <li>Bạn còn có thể thử khai báo và khởi tạo vài số bên trong biến, vả thử dùng các biến này trong phép tính — các biến sẽ hành xử như giá trị chúng đang mang. Chẳng hạn:
+  <pre class="brush: js">var num1 = 10;
+var num2 = 50;
+9 * num1;
+num2 / num1;</pre>
+ </li>
+ <li>Cuối phần này, hãy thử nhập vài biểu thức phức tạp hơn một chút, như là:
+  <pre class="brush: js">5 + 10 * 3;
+num2 % 9 * num1;
+num2 + num1 / 8 + 2;</pre>
+ </li>
+</ol>
+
+<p>Một vài phép tính phía trên không trả về giá trị mà bạn mong muốn; phần dưới đây sẽ giải thích cho bạn lý do.</p>
+
+<h3 id="Thứ_tự_ưu_tiên_toán_tử">Thứ tự ưu tiên toán tử</h3>
+
+<p>Hãy xem lại ví dụ cuối cùng phía trên, giả sử <code>num2</code> giữ giá trị là 50 và <code>num1</code> giữ giá trị là 10 (như đã khởi tạo ở phía trên):</p>
+
+<pre class="brush: js">num2 + num1 / 8 + 2;</pre>
+
+<p>Là con người, có lẽ bạn sẽ đọc là <em>"50 cộng 10 bằng 60"</em>, rồi <em>"8 cộng 2 bằng 10"</em>, và cuối cùng <em>"60 chia cho 10 bằng 6"</em>.</p>
+
+<p>Nhưng trình duyệt thực hiện từ <em>"10 chia cho 8 bằng 1.25"</em>, rồi <em>"50 cộng 1.25 cộng 2 bằng 53.25"</em>.</p>
+
+<p>Đó là bởi vì <strong>thứ tự ưu tiên toán tử</strong> — vài toán tử sẽ được áp dụng trước toán tử khác trong khi tính toán kết quả của một phép tính (hay còn gọi là biển thức, trong lập trình). Thứ tự ưu tiên toán tử trong JavaScript giống hệt với những gì ta được dạy ở trường — Nhân và chia luôn được thực hiện trước, rồi tới cộng và trừ (phép tính luôn thực hiện từ trái qua phải).</p>
+
+<p>Nếu bạn muốn vượt thứ tự ưu tiên toán tử, bạn có thể đặt cặp ngoặc tròn quanh phần mà bạn muốn thực hiện trước. Thế nên để trả về giá trị 6, ta sẽ làm như sau:</p>
+
+<pre class="brush: js">(num2 + num1) / (8 + 2);</pre>
+
+<p>Hãy thử xem.</p>
+
+<div class="note">
+<p><strong>Ghi chú</strong>: Danh sách tất cả toán tử và thứ tự của chúng trong JavaScript có thể được tìm thấy trong <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operator_precedence">Biểu thức và toán tử</a>.</p>
+</div>
+
+<h2 id="Toán_tử_tăng_và_giảm">Toán tử tăng và giảm</h2>
+
+<p>Đôi khi bạn sẽ muốn cộng hoặc trừ liên tục thêm/ bớt một với một biến số học nhất định. Việc này có thể dễ dàng thực hiện bằng toán tử tăng (<code>++</code>) và toán tử giảm (<code>--</code>). Chúng tôi đã dùng <code>++</code> trong trò chơi "Đoán số" trong bài viết <a href="/en-US/docs/Learn/JavaScript/Introduction_to_JavaScript_1/A_first_splash">first splash into JavaScript</a> của chúng tôi, khi chúng tôi thêm 1 vào biến <code>guessCount</code> để đếm số lần đáon của người dùng sau mỗi lượt.</p>
+
+<pre class="brush: js">guessCount++;</pre>
+
+<div class="note">
+<p><strong>Ghi chú</strong>: Chúng được dùng phần lớn trong <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration">vòng lặp</a>, ta sẽ học về nó trong các bài tiếp trong khoá học này. Chẳng hạn, bạn muốn lặp qua danh sách các đơn giá, và thêm thuế giá trị gia tăng vào mỗi đơn giá. Bạn có thể lặp qua từng giá trị rồi đồng thời tính toán thuế và thêm vào đơn giá. Biến tăng sẽ được dùng để chuyển sang giá trị kế tiếp khi cần. Chúng tôi đã chuẩn bị sẵn một ví dụ đơn giản để cho bạn xem cách hoạt động của nó — <a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/loop.html">thử nó ngay đi</a>, và <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/maths/loop.html">trông vào mã nguồn này</a> để xem liệu bạn có thể tìm thấy biến tăng hay không! Ta sẽ xem chi tiết về vòng lặp trong các bài viết tiếp theo.</p>
+</div>
+
+<p>Hãy thử những dòng lệnh dưới đây trong console của bạn. Trước khi bắt đầu, hãy nhớ rằng bạn không thể áp dụng những toán tử vừa kể trên trực tiếp vào số, nghe có vẻ hơi lạ nhỉ, nhưng ta chỉ có thể gán giá trị mới cập nhật vào một biến, chứ không thể thực thi trên chính giá trị đó. Làm như sau sẽ hiện ra lỗi:</p>
+
+<pre class="brush: js">3++;</pre>
+
+<p>Thế nên, bạn chỉ có thể dùng toán tử tăng với biến đã tồn tại. Thử lệnh này xem:</p>
+
+<pre class="brush: js">var num1 = 4;
+num1++;</pre>
+
+<p>Được rồi, kì quái tập 2! Khi làm theo bạn sẽ thấy giá trị trả về là 4 — đó là bởi vì trình duyệt trả về giá trị hiện tại, <em>rồi</em> tăng giá trị của biến lên. Bạn sẽ thấy giá trị của biến đã tăng lên nếu nhập lại biến vào console:</p>
+
+<pre class="brush: js">num1;</pre>
+
+<p>Điều tương tự xảy ra với <code>--</code>, hãy thử đoạn bên dưới:</p>
+
+<pre class="brush: js">var num2 = 6;
+num2--;
+num2;</pre>
+
+<div class="note">
+<p><strong>Ghi chú</strong>: Bạn có thể bắt trình duyệt làm điều ngược lại — tăng giảm giá trị của biến <em>rồi</em> trả về giá trị — bằng cách đặt toán tử lên phía trước biến thay vì đặt ở sau. Thử lại ví dụ trên một lần nữa, nhưng lần này hãy dùng <code>++num1</code> và <code>--num2</code>.</p>
+</div>
+
+<h2 id="Toán_tử_gán">Toán tử gán</h2>
+
+<p>Toán tử gán là những toán tử gán giá trị cho biến. Ta đã dùng toán tử đơn giản nhất, <code>=</code>, rất nhiều lần — nó đơn thuần gán giá trị bên phải cho biến bên trái:</p>
+
+<pre class="brush: js">var x = 3; // x giữ giá trị 3
+var y = 4; // y giữ giá trị 4
+x = y; // x giờ giữ giá trị giống hệt với y, 4</pre>
+
+<p>Nhưng có vài kiểu phức tạp hơn, tạo ra lối tắt khiến mã nguồn của bạn sạch sẽ hơn và hữu hiệu hơn. Những toán tử thông dụng nhất được liệt kê bên dưới:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Toán tử</th>
+   <th scope="col">Tên</th>
+   <th scope="col">Mục đích</th>
+   <th scope="col">Ví dụ</th>
+   <th scope="col">Viết tắt cho</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>+=</code></td>
+   <td>Cộng gán</td>
+   <td>Cộng giá trị bên phải vào giá trị của biến bên trái, rồi trả về gía trị mới cho biến</td>
+   <td><code>x = 3;<br>
+    x += 4;</code></td>
+   <td><code>x = 3;<br>
+    x = x + 4;</code></td>
+  </tr>
+  <tr>
+   <td><code>-=</code></td>
+   <td>Trừ gán</td>
+   <td>Trừ giá trị của biến biến bên trái cho giá trị bên phải, rồi trả về giá trị mới cho biến</td>
+   <td><code>x = 6;<br>
+    x -= 3;</code></td>
+   <td><code>x = 6;<br>
+    x = x - 3;</code></td>
+  </tr>
+  <tr>
+   <td><code>*=</code></td>
+   <td>Nhân gán</td>
+   <td>Nhân giá trị của biến bên trái với giá trị bên phải, rồi trả về gía trị mới cho biến</td>
+   <td><code>x = 2;<br>
+    x *= 3;</code></td>
+   <td><code>x = 2;<br>
+    x = x * 3;</code></td>
+  </tr>
+  <tr>
+   <td><code>/=</code></td>
+   <td>Chia gán</td>
+   <td>Chia giá trị của biến biến bên trái cho giá trị bên phải, rồi trả về giá trị mới cho biến</td>
+   <td><code>x = 10;<br>
+    x /= 5;</code></td>
+   <td><code>x = 10;<br>
+    x = x / 5;</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Thử gõ vài ví dụ phía trên vào console của bạn, để hiểu nguyên lý hoạt động của chúng. Trong mỗi trường hợp, thử đoán xem giá trị của chúng trước khi xuống dòng kế..</p>
+
+<p>Bạn có thể vô tư sử dụng biến khác vào phía bên phải của mỗi biểu thức, chẳng hạn:</p>
+
+<pre class="brush: js">var x = 3; // x giữ giá trị 3
+var y = 4; // y giữ giá trị 4
+x *= y; // x giờ giữ giá trị 12</pre>
+
+<div class="note">
+<p><strong>Ghi chú</strong>: Còn có nhiều <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment_operators">toán tử gán khác nữa</a>, nhưng bây giờ bạn chỉ cần học những toán tử trên thôi.</p>
+</div>
+
+<h2 id="Học_chủ_động_định_cỡ_của_hộp_canvas">Học chủ động: định cỡ của hộp canvas</h2>
+
+<p>Trong bài luyện này, bạn sẽ thao tác với vài con số và toán tử để thay đổi kích thước của một chiếc hộp. Chiếc hộp được vẽ nên bởi API của trình duyệt tên là {{domxref("Canvas API", "", "", "true")}}. Bạn không cần quan tâm đến nguyên lý vận hành của nó — giờ chỉ cần tập trung vào phép tính thôi. Chiều rộng và chiều cao của chiếc hộp (theo pixels) được định nghĩa bởi hai biến <code>x</code> và <code>y</code>, được khởi tạo với giá trị bằng 50.</p>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/editable_canvas.html", '100%', 620)}}</p>
+
+<p><strong><a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/editable_canvas.html">Mở trong cửa sổ mới</a></strong></p>
+
+<p>Trong hộp thoại mã nguồn chỉnh sửa được phía trên, có hai dòng được đặt trong comment mà chúng tôi muốn bạn cập nhật để khiến chiếc hộp phóng to/ thu nhỏ đến theo kích cỡ xác định, sử dụng toán tử và/ hoặc giá trị xác định trong mỗi trường hợp. Hãy thử theo bên dưới:</p>
+
+<ul>
+ <li>Thay đổi dòng tính toán giá trị của x sao cho chiều rộng của chiếc hộp vẫn là 50px, nhưng 50 được tính toán ra bởi hai số 43 và 7 và một toán tử số học.</li>
+ <li>Thay đổi dòng tính toán giá trị của y sao cho chiều cao của chiếc hộp là 75px, nhưng 75 được tính toán ra bởi hai số 25 và 3 và một toán tử số học.</li>
+ <li>Thay đổi dòng tính toán giá trị của x sao cho chiều rộng của chiếc hộp là 250px, nhưng 250 được tính toán bởi hai số và một toán tử chia lấy dư (modulo).</li>
+ <li>Thay đổi dòng tính toán giá trị của y sao cho chiều cao là 150px, nhưng 150 được tính toán ra bởi ba số và toán tử trừ và chia.</li>
+ <li>Thay đổi dòng tính toán giá trị của x sao cho chiều rộng là 200px, nhưng 200 được tính toán ra bởi 4 và một toán tử gán.</li>
+ <li>Thay đổi dòng tính toán giá trị của y sao cho chiều cao là 200px, nhưng 200 được tính toán ra bởi 50 và 3, toán tử nhân, và toán tử cộng gán.</li>
+</ul>
+
+<p>Đừng lo nếu nhỡ có làm sai gì đó. Bạn luôn có thể nhấn nút Reset để mọi thứ lại trở lại như ban đầu. Sau khi đã trả lời đúng tất cả câu hỏi phía trên, đừng ngần ngại chơi đùa với mã nguồn và tự tạo ra thử thách cho bản thân.</p>
+
+<h2 id="Toán_tử_so_sánh">Toán tử so sánh</h2>
+
+<p>Đôi khi ta sẽ muốn kiểm tra true/false, rồi quyết định làm gì đó tiếp dựa trên kết quả của phép kiểm tra — để làm điều này ta dùng <strong>toán tử so sánh</strong>.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Toán tử</th>
+   <th scope="col">Tên</th>
+   <th scope="col">Mục đích</th>
+   <th scope="col">Ví dụ</th>
+  </tr>
+  <tr>
+   <td><code>===</code></td>
+   <td>Bằng chính xác</td>
+   <td>Kiểm tra xem liệu hai giá trị trái phải có giống hệt nhau hay không</td>
+   <td><code>5 === 2 + 4</code></td>
+  </tr>
+  <tr>
+   <td><code>!==</code></td>
+   <td>Không bằng chính xác</td>
+   <td>Tiểm tra xem liệu hai giá trị trái phải có <strong>không</strong> giống hệt nhau hay không</td>
+   <td><code>5 !== 2 + 3</code></td>
+  </tr>
+  <tr>
+   <td><code>&lt;</code></td>
+   <td>Nhỏ hơn</td>
+   <td>Kiểm tra xem giá trị bên trái có nhỏ hơn giá trị bên phải hay không.</td>
+   <td><code>10 &lt; 6</code></td>
+  </tr>
+  <tr>
+   <td><code>&gt;</code></td>
+   <td>Lớn hơn</td>
+   <td>Kiểm tra xem giá trị bên trái có lớn hơn giá trị bên phải hay không.</td>
+   <td><code>10 &gt; 20</code></td>
+  </tr>
+  <tr>
+   <td><code>&lt;=</code></td>
+   <td>Nhỏ hơn hoặc bằng</td>
+   <td>Kiểm tra xem giá trị bên trái có nhỏ hơn hoặc bằng giá trị bên phải hay không</td>
+   <td><code>3 &lt;= 2</code></td>
+  </tr>
+  <tr>
+   <td><code>&gt;=</code></td>
+   <td>Lớn hơn hoặc bằng</td>
+   <td>Kiểm tra xem giá trị bên trái có lớn hơn hoặc bằng giá trị bên phải hay không.</td>
+   <td><code>5 &gt;= 4</code></td>
+  </tr>
+ </thead>
+</table>
+
+<div class="note">
+<p><strong>Ghi chú</strong>: Có lẽ bạn sẽ thấy có người sử dụng <code>==</code> và <code>!=</code> trong mã nguồn của họ. Đây là những toán tử hợp lệ trong JavaScript, nhưng chúng khác với <code>===</code>/<code>!==</code>. Hai toán tử trước kiểm tra sự giống nhau về giá trị nhưng không kiểm tra sự giống nhau về kiểu dữ liệu. Hai toán tử sau, kiểm tra chính xác sự giống nhau về cả giá trị lẫn kiểu dữ liệu. Toán tử so sánh chính xác thường gây ra ít lỗi hơn, nên chúng tôi đề nghị bạn dùng chúng.</p>
+</div>
+
+<p>Nếu bạn thử nhập những giá trị sau vào console, bạn sẽ thấy chúng đều trả về giá trị <code>true</code>/<code>false</code> — những giá trị boolean mà ta đã nhắc tới ở bài viết trước. Chúng cực kì hữu dụng bởi chúng giúp ta tạo quyết định trong chương trình của mình, và chúng được dùng mỗi khi ta cần đưa ra lựa chọn. Chẳng hạn, boolean có thể dùng để:</p>
+
+<ul>
+ <li>Hiển thị nhãn ký tự chính xác tuỳ thuộc liệu một chức năng nào đó đang bật hay tắt</li>
+ <li>Hiển thị hộp thoại trò chơi kết thúc khi một trò chơi kết thúc hoặc hộp thoại chiến thắng khi đạt được chiến thắng trong trò chơi</li>
+ <li>Hiển thị câu chào mừng hợp với dịp lễ/ hội nào đó</li>
+ <li>Phóng to/ thu nhỏ bản đồ tuỳ theo nút nào được nhấn</li>
+</ul>
+
+<p>Ta sẽ học cách viết đống logic đó trong các bài viết sau khi học về câu điều kiện. Bây giờ, hãy xem qua ví dụ sau:</p>
+
+<pre class="brush: html">&lt;button&gt;Start machine&lt;/button&gt;
+&lt;p&gt;The machine is stopped.&lt;/p&gt;
+</pre>
+
+<pre class="brush: js">var btn = document.querySelector('button');
+var txt = document.querySelector('p');
+
+btn.addEventListener('click', updateBtn);
+
+function updateBtn() {
+  if (btn.textContent === 'Start machine') {
+    btn.textContent = 'Stop machine';
+    txt.textContent = 'The machine has started!';
+  } else {
+    btn.textContent = 'Start machine';
+    txt.textContent = 'The machine is stopped.';
+  }
+}</pre>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/conditional.html", '100%', 100)}}</p>
+
+<p><strong><a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/conditional.html">Mở trong cửa sổ mới</a></strong></p>
+
+<p>Bạn có thể thấy toán tử so sánh bằng được dùng trong hàm <code>updateBtn()</code>. Trong trường hợp này, ta không so sánh hai biểu thức toán học có trả về cùng một giá trị hay không - ta đang kiểm tra xem liệu nội dung ký tự bên trong một nút bấm có chứa một xâu ký tự xác định không — nhưng nguyên lý hoạt động cũng tương tự. Nếu nút bấm có xâu ký tự là "Start machine" khi đã được nhấn, ta chuyển nhãn của nó thành "Stop machine", và cập nhật lại nhãn dán. Nếu nút bấm có xâu ký tự là "Stop machine" khi đã được nhấn, ta chuyển nó ngược lại.</p>
+
+<div class="note">
+<p><strong>Ghi chú</strong>: Việc chuyển tiếp liên tục giữa hai giá trị thường được gọi là <strong>toggle</strong>. Nó chuyển từ trạng thái này qua trạng thái kia — đèn bật, đèn tắt, vân vân.</p>
+</div>
+
+<h2 id="Tóm_lại">Tóm lại</h2>
+
+<p>Trong bài viết này chúng tôi đã gợi ra thông tin căn bản bạn cần để biết về số trong JavaScript, cho lúc này. Bạn sẽ còn thấy các con số xuất hiện lại liên tục, xuyên suốt quá trình học JavaScript, thế nên giờ là lúc tốt nhất để học về chúng. Nếu bạn là một trong những người không yêu thương gì toán học, bạn sẽ thấy vui vì bài viết này khá là ngắn.</p>
+
+<p>Trong bài viết tới, ta sẽ học về văn bản và cách JavaScript cho phép ta thao tác với chúng.</p>
+
+<div class="note">
+<p><strong>Ghi chú</strong>: Nếu bạn thực sự yêu toán và muốn đọc thêm về cách cài đặt chúng trong JavaScript, bạn có thể tìm vô số bài viết chi tiết trong khu vực chính về JavaScript của MDN. Những điểm đến thú vị có thể kể đến như là bài viết về <a href="/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates">Số và ngày tháng</a> và <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators">Biểu thức và toán tử</a> của chúng tôi.</p>
+</div>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}</p>
+
+<h2 id="Trong_mô-đun_này">Trong mô-đun này</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Toán học cơ bản trong JavaScript — số và toán tử</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Mảng</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li>
+</ul>
diff --git a/files/vi/learn/javascript/first_steps/strings/index.html b/files/vi/learn/javascript/first_steps/strings/index.html
new file mode 100644
index 0000000000..df1650498d
--- /dev/null
+++ b/files/vi/learn/javascript/first_steps/strings/index.html
@@ -0,0 +1,290 @@
+---
+title: Handling text — strings in JavaScript
+slug: Learn/JavaScript/First_steps/Strings
+translation_of: Learn/JavaScript/First_steps/Strings
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary"><span style="background-color: #f6d5d9;">Tiếp theo chúng ta sẽ cùng tập trung vào</span> chuỗi (string) — Trong lập trình chuỗi là một phần nhỏ của văn bản. Trong bài viết này chúng ta sẽ cùng tìm hiểu tất cả các đặc điểm chúng mà bạn cần phải biết về chuỗi khi học JavaScript, như là tạo chuỗi, escaping quotes trong chuỗi và kết hợp chuỗi lại với nhau.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Yêu cầu:</th>
+   <td>
+    <p>Trình độ máy tính cơ bản, có hiểu biết cơ bản về HTML, CSS và JavaScript.</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Mục tiêu:</th>
+   <td>
+    <p>Làm quen với những thứ cơ bản của chuỗi trong Javascript.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sức_mạnh_của_từ_ngữ">Sức mạnh của từ ngữ</h2>
+
+<p>Từ ngữ rất quan trọng với con người - Chúng là một phần của giao tiếp. Bởi vì Web được tạo nên từ một lượng lớn văn bản là vật trung gian giúp con người có thể giao tiếp và chia sẻ thông tin, sẽ hữu ích hơn nếu ta có thể làm chủ được toàn bộ từ ngữ xuất hiện trong nó. {{glossary("HTML")}} cung cấp cấu trúc và định nghĩa cho văn bản, {{glossary("CSS")}} cho phép ta có thể tạo kiểu một cách tỷ mỉ cho nó và JavaSript chứa một lượng các tính năng giúp cho việc thao tác lên văn bản, tạo những tin nhắn trang trọng tùy ý, biểu thị đúng nhãn văn bản khi cần thiết, sắp xếp thuận ngữ theo thứ tự mong muốn và nhiều hơn nữa.</p>
+
+<p>Khá nhiều những chương trình mà chúng tôi đã giới thiệu với bạn trong khóa học này, đã có liên quan tới vài việc thao tác lên chuỗi.</p>
+
+<h2 id="Chuỗi_—_Khái_niệm_cơ_bản">Chuỗi — Khái niệm cơ bản</h2>
+
+<p>Chuỗi có vẻ tương tự với số khi ta mới lướt qua, nhưng khi bạn đào sâu hơn, bạn sẽ bắt đầu thấy một số sự khác biệt đáng lưu tâm. Cùng bắt đầu với việc nhập một vài dòng vào console để làm quen nhé. Chúng tôi đã cung cấp một console bên dưới (Bạn có thể mở <a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html">console này</a> ở một tab hoặc cửa sổ khác, hoặc sử dụng <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">console của trình duyệt</a> ở chế độ developer (browser developer console) nếu bạn thích).</p>
+
+<div class="hidden">
+<h6 id="Hidden_code">Hidden code</h6>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;JavaScript console&lt;/title&gt;
+    &lt;style&gt;
+      * {
+        box-sizing: border-box;
+      }
+
+      html {
+        background-color: #0C323D;
+        color: #809089;
+        font-family: monospace;
+      }
+
+      body {
+        max-width: 700px;
+      }
+
+      p {
+        margin: 0;
+        width: 1%;
+        padding: 0 1%;
+        font-size: 16px;
+        line-height: 1.5;
+        float: left;
+      }
+
+      .input p {
+        margin-right: 1%;
+      }
+
+      .output p {
+        width: 100%;
+      }
+
+      .input input {
+        width: 96%;
+        float: left;
+        border: none;
+        font-size: 16px;
+        line-height: 1.5;
+        font-family: monospace;
+        padding: 0;
+        background: #0C323D;
+        color: #809089;
+      }
+
+      div {
+        clear: both;
+      }
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+
+  &lt;/body&gt;
+
+  &lt;script&gt;
+    var geval = eval;
+    function createInput() {
+      var inputDiv = document.createElement('div');
+      var inputPara = document.createElement('p');
+      var inputForm = document.createElement('input');
+
+      inputDiv.setAttribute('class','input');
+      inputPara.textContent = '&gt;';
+      inputDiv.appendChild(inputPara);
+      inputDiv.appendChild(inputForm);
+      document.body.appendChild(inputDiv);
+
+      if(document.querySelectorAll('div').length &gt; 1) {
+        inputForm.focus();
+      }
+
+      inputForm.addEventListener('change', executeCode);
+    }
+
+    function executeCode(e) {
+      try {
+        var result = geval(e.target.value);
+      } catch(e) {
+        var result = 'error — ' + e.message;
+      }
+
+      var outputDiv = document.createElement('div');
+      var outputPara = document.createElement('p');
+
+      outputDiv.setAttribute('class','output');
+      outputPara.textContent = 'Result: ' + result;
+      outputDiv.appendChild(outputPara);
+      document.body.appendChild(outputDiv);
+
+      e.target.disabled = true;
+      e.target.parentNode.style.opacity = '0.5';
+
+      createInput()
+    }
+
+    createInput();
+
+  &lt;/script&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_code', '100%', 300, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 id="Creating_a_string">Creating a string</h3>
+
+<ol>
+ <li>To start with, enter the following lines:
+  <pre class="brush: js">var string = 'The revolution will not be televised.';
+string;</pre>
+  Just like we did with numbers, we are declaring a variable, initializing it with a string value, and then returning the value. The only difference here is that when writing a string, you need to surround the value with quotes.</li>
+ <li>If you don't do this, or miss one of the quotes, you'll get an error. Try entering the following lines:
+  <pre class="brush: js example-bad">var badString = This is a test;
+var badString = 'This is a test;
+var badString = This is a test';</pre>
+  These lines don't work because any text without quotes around it is assumed to be a variable name, property name, reserved word, or similar. If the browser can't find it, then an error is raised (e.g. "missing ; before statement"). If the browser can see where a string starts, but can't find the end of the string, as indicated by the 2nd quote, it complains with an error (with "unterminated string literal"). If your program is raising such errors, then go back and check all your strings to make sure you have no missing quote marks.</li>
+ <li>The following will work if you previously defined the variable <code>string</code> — try it now:
+  <pre class="brush: js">var badString = string;
+badString;</pre>
+  <code>badString</code> is now set to have the same value as <code>string</code>.</li>
+</ol>
+
+<h3 id="Single_quotes_vs._double_quotes">Single quotes vs. double quotes</h3>
+
+<ol>
+ <li>In JavaScript, you can choose single quotes or double quotes to wrap your strings in. Both of the following will work okay:
+  <pre class="brush: js">var sgl = 'Single quotes.';
+var dbl = "Double quotes";
+sgl;
+dbl;</pre>
+ </li>
+ <li>There is very little difference between the two, and which you use is down to personal preference. You should choose one and stick to it, however; differently quoted code can be confusing, especially if you use the different quotes on the same string! The following will return an error:
+  <pre class="brush: js example-bad">var badQuotes = 'What on earth?";</pre>
+ </li>
+ <li>The browser will think the string has not been closed, because the other type of quote you are not using to contain your strings can appear in the string. For example, both of these are okay:
+  <pre class="brush: js">var sglDbl = 'Would you eat a "fish supper"?';
+var dblSgl = "I'm feeling blue.";
+sglDbl;
+dblSgl;</pre>
+ </li>
+ <li>However, you can't include the same quote mark inside the string if it's being used to contain them. The following will error, as it confuses the browser as to where the string ends:
+  <pre class="brush: js example-bad">var bigmouth = 'I've got no right to take my place...';</pre>
+  This leads us very nicely into our next subject.</li>
+</ol>
+
+<h3 id="Escaping_characters_in_a_string">Escaping characters in a string</h3>
+
+<p>To fix our previous problem code line, we need to escape the problem quote mark. Escaping characters means that we do something to them to make sure they are recognized as text, not part of the code. In JavaScript, we do this by putting a backslash just before the character. Try this:</p>
+
+<pre class="brush: js">var bigmouth = 'I\'ve got no right to take my place...';
+bigmouth;</pre>
+
+<p>This works fine. You can escape other characters in the same way, e.g. <code>\"</code>,  and there are some special codes besides. See <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#Escape_notation">Escape notation</a> for more details.</p>
+
+<h2 id="Concatenating_strings">Concatenating strings</h2>
+
+<ol>
+ <li>Concatenate is a fancy programming word that means "join together". Joining together strings in JavaScript uses the plus (+) operator, the same one we use to add numbers together, but in this context it does something different. Let's try an example in our console.
+  <pre class="brush: js">var one = 'Hello, ';
+var two = 'how are you?';
+var joined = one + two;
+joined;</pre>
+  The result of this is a variable called <code>joined</code>, which contains the value "Hello, how are you?".</li>
+ <li>In the last instance, we just joined two strings together, but you can do as many as you like, as long as you include a <code>+</code> between each one. Try this:
+  <pre class="brush: js">var multiple = one + one + one + one + two;
+multiple;</pre>
+ </li>
+ <li>You can also use a mix of variables and actual strings. Try this:
+  <pre class="brush: js">var response = one + 'I am fine — ' + two;
+response;</pre>
+ </li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: When you enter an actual string in your code, enclosed in single or double quotes, it is called a <strong>string literal</strong>.</p>
+</div>
+
+<h3 id="Concatenation_in_context">Concatenation in context</h3>
+
+<p>Let's have a look at concatenation being used in action — here's an example from earlier in the course:</p>
+
+<pre class="brush: html">&lt;button&gt;Press me&lt;/button&gt;</pre>
+
+<pre class="brush: js">var button = document.querySelector('button');
+
+button.onclick = function() {
+  var name = prompt('What is your name?');
+  alert('Hello ' + name + ', nice to see you!');
+}</pre>
+
+<p>{{ EmbedLiveSample('Concatenation_in_context', '100%', 50, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>Here we're using a {{domxref("window.prompt()", "window.prompt()")}} function in line 4, which asks the user to answer a question via a popup dialog box then stores the text they enter inside a given variable — in this case <code>name</code>. We then use an {{domxref("window.alert()", "window.alert()")}} function in line 5 to display another popup containing a string we've assembled from two string literals and the <code>name</code> variable, via concatenation.</p>
+
+<h3 id="Numbers_vs._strings">Numbers vs. strings</h3>
+
+<ol>
+ <li>So what happens when we try to add (or concatenate) a string and a number? Let's try it in our console:
+  <pre class="brush: js">'Front ' + 242;
+</pre>
+  You might expect this to throw an error,  but it works just fine. Trying to represent a string as a number doesn't really make sense, but representing a number as a string does, so the browser rather cleverly converts the number to a string and concatenates the two strings together.</li>
+ <li>You can even do this with two numbers — you can force a number to become a string by wrapping it in quote marks. Try the following (we are using the <code>typeof</code> operator to check whether the variable is a number or a string):
+  <pre class="brush: js">var myDate = '19' + '67';
+typeof myDate;</pre>
+ </li>
+ <li>If you have a numeric variable that you want to convert to a string but not change otherwise, or a string variable that you want to convert to a number but not change otherwise, you can use the following two constructs:
+  <ul>
+   <li>The {{jsxref("Number")}} object will convert anything passed to it into a number, if it can. Try the following:
+    <pre class="brush: js">var myString = '123';
+var myNum = Number(myString);
+typeof myNum;</pre>
+   </li>
+   <li>On the other hand, every number has a method called <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toString">toString()</a></code> that will convert it to the equivalent string. Try this:
+    <pre class="brush: js">var myNum = 123;
+var myString = myNum.toString();
+typeof myString;</pre>
+   </li>
+  </ul>
+  These constructs can be really useful in some situations. For example, if a user enters a number into a form text field, it will be a string. However, if you want to add this number to something, you'll need it to be a number, so you could pass it through <code>Number()</code> to handle this. We did exactly this in our <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html#L61">Number Guessing Game, in line 61</a>.</li>
+</ol>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>So that's the very basics of strings covered in JavaScript. In the next article we'll build on this, looking at some of the built-in methods available to strings in JavaScript and how we can use them to manipulate our strings into just the form we want.</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps")}}</p>
+
+<p> </p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/vi/learn/javascript/first_steps/what_is_javascript/index.html b/files/vi/learn/javascript/first_steps/what_is_javascript/index.html
new file mode 100644
index 0000000000..a8c837a2e2
--- /dev/null
+++ b/files/vi/learn/javascript/first_steps/what_is_javascript/index.html
@@ -0,0 +1,422 @@
+---
+title: JavaScript là Gì?
+slug: Learn/JavaScript/First_steps/What_is_JavaScript
+translation_of: Learn/JavaScript/First_steps/What_is_JavaScript
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary">Chào mừng đến khóa học JavaScript cơ bản của MDN! Trong bài đầu tiên chúng ta sẽ nhìn nhận JavaScript từ góc độ tổng quát, trả lời các câu hỏi như "JavaScript là gì?" và "nó có khả năng gì?" cũng như giúp bạn làm quen với các chức năng của JavaScript.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Yêu cầu:</th>
+   <td>
+    <p>Sử dụng máy cơ bản, hiểu HTML và CSS mức độ căn bản</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Mục tiêu:</th>
+   <td>
+    <p>Làm quen với JavaScript, tìm hiểu về ứng dụng của JavaScript và cách tích hợp chúng vào một trang web.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="A_high-level_definition">A high-level definition</h2>
+
+<p>JavaScript là một ngôn ngữ lập trình hoặc ngôn ngữ kịch bản cho phép triển khai những chức năng phức tạp trên trang web như hiển thị các cập nhật nội dung kịp thời, tương tác với bản đồ, hoạt cảnh 2D/3D vv... - điều có sự hỗ trợ của JavaScript. Nó là lớp thứ ba của chiếc bánh tiêu chuẩn của các công nghệ web, hai trong số chúng (<a href="/en-US/docs/Learn/HTML">HTML</a> và <a href="/en-US/docs/Learn/CSS">CSS</a>) đã được chúng tôi trình bày rất chi tiết trong các phần khác của Learning Area.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13502/cake.png" style="display: block; margin: 0 auto;"></p>
+
+<ul>
+ <li>{{glossary("HTML")}} là ngôn ngữ đánh dấu được sử dụng để cấu thành nội dung và mang đến ngữ nghĩa cho trang web, ví dụ như định danh cho các đoạn văn, tiêu đề, dữ liệu dạng bảng hoặc nhúng hình ảnh, video vào trang web. </li>
+ <li>{{glossary("CSS")}} là một ngôn ngữ định dạng được áp dụng để tạo nên "vẻ ngoài" của một trang web, ví dụ thiết lập màu nền và font chữ, bố trí nội dung dựa theo mô hình cột.</li>
+ <li>{{glossary("JavaScript")}} là ngôn ngữ kịch bản cho phép tạo ra trang web động - cập nhật nội dung theo ngữ cảnh, điều khiển đa phương tiện, hoạt cảnh các hình ảnh và nhiều thứ hay ho khác. (Dĩ nhiên không phải mọi thứ, nhưng chỉ với một vài dòng code, JavaScript có thể làm được nhiều điều đáng kinh ngạc.)</li>
+</ul>
+
+<p>Ba lớp công nghệ xếp chồng lên nhau một cách thích hợp. Hãy xem xét ví dụ một đoạn văn bản đơn giản. Chúng ta có thể đánh dấu đoạn văn bảng bằng HTML.</p>
+
+<pre class="brush: html">&lt;p&gt;Player 1: Chris&lt;/p&gt;</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13422/just-html.png" style="height: 28px; width: 108px;"></p>
+
+<p>Sau đó thêm một vài đoạn CSS giúp tăng tính thẩm mỹ cho đoạn văn:</p>
+
+<pre class="brush: css">p {
+  font-family: 'helvetica neue', helvetica, sans-serif;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  text-align: center;
+  border: 2px solid rgba(0,0,200,0.6);
+  background: rgba(0,0,200,0.3);
+  color: rgba(0,0,200,0.6);
+  box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
+  border-radius: 10px;
+  padding: 3px 10px;
+  display: inline-block;
+  cursor: pointer;
+}</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13424/html-and-css.png" style="height: 48px; width: 187px;"></p>
+
+<p>Và cuối cùng, chúng ta có thể áp dụng JavaScript vào đoạn văn để tăng tính tương tác.</p>
+
+<pre class="brush: js">const para = document.querySelector('p');
+
+para.addEventListener('click', updateName);
+
+function updateName() {
+  let name = prompt('Enter a new name');
+  para.textContent = 'Player 1: ' + name;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('A_high-level_definition', '100%', 80, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>Thử nhấp vào phiên bản cuối cùng của đoạn văn để thấy cách nó hoạt động (bạn cũng có thể tìm thấy ví dụ này trên GitHub — xem mã nguồn: <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/javascript-label.html">source code</a>, hoặc chạy trực tiếp: <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/javascript-label.html">run it live</a>)!</p>
+
+<p>JavaScript có thể làm được nhiều hơn thế  — Cùng khám phá chi tiết hơn.</p>
+
+<h2 id="So_what_can_it_really_do">So what can it really do?</h2>
+
+<p>Bên trong ngôn ngữ JavaScript bao gồm một vài tính năng lập trình phổ biến cho phép bạn thực hiện một vài điều như:</p>
+
+<ul>
+ <li>Lưu trữ các giá trị (thông tin) trong các biến (variables). Đại loại như ở ví dụ bên trên, chúng tôi yêu cầu nhập một tên mới sau đó lưu trữ tên vừa nhập trong một biến gọi là <code>name</code>.</li>
+ <li>Thao tác trên các đoạn văn bản (còn gọi là chuỗi - strings trong lập trình). Trong ví dụ trên, chúng tôi lấy chuỗi "Player 1:" và xâu nó vào biến <code>name</code> để tạo đoạn văn bản hoàn chỉnh là ''Player 1: Chris".</li>
+ <li>Chạy code phản hồi lại những sự kiện đang xãy ra trên trang web. Chúng tôi đã dùng một sự kiện {{Event("click")}} trong ví dụ bên trên để phát hiện sự kiện nhấp chuột vào nút nhấn và chạy code tương ứng để cập nhật đoạn văn bản.</li>
+ <li>Và nhiều hơn thế nữa!</li>
+</ul>
+
+<p>Tuy nhiên thứ mà thậm chí còn thú vị hơn nữa là các lớp tính năng (functionality) được xây dựng trên lõi của ngôn ngữ JavaScript. Cái được gọi là <strong>Giao Diện Lập Trình Ứng Dụng</strong> (Application Programming Interfaces-APIs) trao thêm cho bạn siêu sức mạnh để sử dụng trong code JavaScript.</p>
+
+<p>APIs là các bộ code được dựng sẵn cho phép một nhà pháp triển (developer) triển khai các chương trình mà nếu thiếu nó sẽ khó hoặc bất khả thi để triển khai. Chúng hoạt động trong lập trình tương tự như những bộ nội thất làm sẵn cho việc xây nhà — sẽ dễ dàng hơn nhiều nếu lắp ráp một kệ sách với gỗ đã gia công theo thiết kế và ốc vít có sẵn hơn là tự tìm gỗ nguyên liệu, tự gia công theo kích cỡ đã thiết kết, tìm ốc vít đúng cỡ rồi lắp ráp thành một kệ sách.</p>
+
+<p>APIs thường được chia thành hai loại:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13508/browser.png" style="display: block; height: 511px; margin: 0px auto; width: 815px;"></p>
+
+<p><strong>Browser APIs (APIs Trình Duyệt)</strong> được tích hợp sẵn trong trình duyệt web, có khả năng phơi bày dữ liệu từ môi trường máy tính xung quanh hoặc làm những điều phức tạp hữu ích. Ví dụ:</p>
+
+<ul>
+ <li>{{domxref("Document_Object_Model","DOM (Document Object Model) API")}} cho phép bạn điều khiển HTML và CSS, tạo mới, loại bỏ và thay đổi HTML, áp dụng các định dạng (style) mới vào trang của bạn một cách linh hoạt vv... Mỗi khi bạn nhìn thấy một cửa sổ bật lên (popup window) trên một trang hoặc một vài nội dung mới được hiển thị (như chúng ta được thấy trong ví dụ đơn giản ở trên) chẳng hạn, đó là các hoạt động điển hình của DOM.</li>
+ <li>{{domxref("Geolocation","Geolocation API")}} tiếp nhận thông tin địa lí. Đây là cách <a href="https://www.google.com/maps">Google Maps</a> tìm vị trí của bạn và định vị nó trên bản đồ.</li>
+ <li>{{domxref("Canvas_API","Canvas")}} và {{domxref("WebGL_API","WebGL")}} APIs cho phép bạn tạo hoạt cảnh đồ họa 2D và 3D. Các lập trình viên đang sáng tạo những thứ hay ho nhờ sử dụng các công nghệ web này — xem <a href="https://www.chromeexperiments.com">Chrome Experiments</a> và <a href="http://webglsamples.org/">webglsamples</a> để biết thêm.</li>
+ <li><a href="https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery">Audio and Video APIs</a> như {{domxref("HTMLMediaElement")}} và {{domxref("WebRTC API", "WebRTC")}} cho phép bạn làm những điều thứ thật sự thú vị với đa phương tiện (multimedia) như chạy âm thanh (audio) và video ngay trong trang web hoặc thu video từ webcam và hiển thị nó trên máy tính của người khác  (try our simple <a href="http://chrisdavidmills.github.io/snapshot/">Snapshot demo</a> to get the idea).</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: Many of the above demos won't work in an older browser — when experimenting, it's a good idea to use a modern browser like Firefox, Chrome, Edge or Opera to run your code in. You will need to consider <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">cross browser testing</a> in more detail when you get closer to delivering production code (i.e. real code that real customers will use).</p>
+</div>
+
+<p><strong>Third party APIs</strong> are not built into the browser by default, and you generally have to grab their code and information from somewhere on the Web. For example:</p>
+
+<ul>
+ <li>The <a href="https://dev.twitter.com/overview/documentation">Twitter API</a> allows you to do things like displaying your latest tweets on your website.</li>
+ <li>The <a href="https://developers.google.com/maps/">Google Maps API</a> and <a href="https://wiki.openstreetmap.org/wiki/API">OpenStreetMap API</a> allows you to embed custom maps into your website, and other such functionality.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: These APIs are advanced, and we'll not be covering any of these in this module. You can find out much more about these in our <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs">Client-side web APIs module</a>.</p>
+</div>
+
+<p>There's a lot more available, too! However, don't get over excited just yet. You won't be able to build the next Facebook, Google Maps, or Instagram after studying JavaScript for 24 hours — there are a lot of basics to cover first. And that's why you're here — let's move on!</p>
+
+<h2 id="What_is_JavaScript_doing_on_your_page">What is JavaScript doing on your page?</h2>
+
+<p>Here we'll start actually looking at some code, and while doing so explore what actually happens when you run some JavaScript in your page.</p>
+
+<p>Let's briefly recap the story of what happens when you load a web page in a browser (first talked about in our <a href="/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_does_CSS_actually_work">How CSS works</a> article). When you load a web page in your browser, you are running your code (the HTML, CSS, and JavaScript) inside an execution environment (the browser tab). This is like a factory that takes in raw materials (the code) and outputs a product (the web page).</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13504/execution.png" style="display: block; margin: 0 auto;"></p>
+
+<p>The JavaScript is executed by the browser's JavaScript engine, after the HTML and CSS have been assembled and put together into a web page. This ensures that the structure and style of the page are already in place by the time the JavaScript starts to run.</p>
+
+<p>This is a good thing, as a very common use of JavaScript is to dynamically modify HTML and CSS to update a user interface, via the Document Object Model API (as mentioned above). If the JavaScript loaded and tried to run before the HTML and CSS were there to affect, then errors would occur.</p>
+
+<h3 id="Browser_security">Browser security</h3>
+
+<p>Each browser tab is its own separate bucket for running code in (these buckets are called "execution environments" in technical terms) — this means that in most cases the code in each tab is run completely separately, and the code in one tab cannot directly affect the code in another tab — or on another website. This is a good security measure — if this were not the case, then pirates could start writing code to steal information from other websites, and other such bad things.</p>
+
+<div class="note">
+<p><strong>Note</strong>: There are ways to send code and data between different websites/tabs in a safe manner, but these are advanced techniques that we won't cover in this course.</p>
+</div>
+
+<h3 id="JavaScript_running_order">JavaScript running order</h3>
+
+<p>When the browser encounters a block of JavaScript, it generally runs it in order, from top to bottom. This means that you need to be careful what order you put things in. For example, let's return to the block of JavaScript we saw in our first example:</p>
+
+<pre class="brush: js">const para = document.querySelector('p');
+
+para.addEventListener('click', updateName);
+
+function updateName() {
+  let name = prompt('Enter a new name');
+  para.textContent = 'Player 1: ' + name;
+}</pre>
+
+<p>Here we are selecting a text paragraph (line 1), then attaching an event listener to it (line 3) so that when the paragraph is clicked, the <code>updateName()</code> code block (lines 5–8) is run. The <code>updateName()</code> code block (these types of reusable code blocks are called "functions") asks the user for a new name, and then inserts that name into the paragraph to update the display.</p>
+
+<p>If you swapped the order of the first two lines of code, it would no longer work — instead, you'd get an error returned in the <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">browser developer console</a> — <code>TypeError: para is undefined</code>. This means that the <code>para</code> object does not exist yet, so we can't add an event listener to it.</p>
+
+<div class="note">
+<p><strong>Note</strong>: This is a very common error — you need to be careful that the objects referenced in your code exist before you try to do stuff to them.</p>
+</div>
+
+<h3 id="Interpreted_versus_compiled_code">Interpreted versus compiled code</h3>
+
+<p>You might hear the terms <strong>interpreted</strong> and <strong>compiled</strong> in the context of programming. In interpreted languages, the code is run from top to bottom and the result of running the code is immediately returned. You don't have to transform the code into a different form before the browser runs it.</p>
+
+<p>Compiled languages on the other hand are transformed (compiled) into another form before they are run by the computer. For example, C/C++ are compiled into assembly language that is then run by the computer.</p>
+
+<p>JavaScript is a lightweight interpreted programming language. Both approaches have different advantages, which we won't discuss at this point.</p>
+
+<h3 id="Server-side_versus_client-side_code">Server-side versus client-side code</h3>
+
+<p>You might also hear the terms <strong>server-side</strong> and <strong>client-side</strong> code, especially in the context of web development. Client-side code is code that is run on the user's computer — when a web page is viewed, the page's client-side code is downloaded, then run and displayed by the browser. In this module we are explicitly talking about <strong>client-side JavaScript</strong>.</p>
+
+<p>Server-side code on the other hand is run on the server, then its results are downloaded and displayed in the browser. Examples of popular server-side web languages include PHP, Python, Ruby, ASP.NET and... JavaScript! JavaScript can also be used as a server-side language, for example in the popular Node.js environment — you can find out more about server-side JavaScript in our <a href="/en-US/docs/Learn/Server-side">Dynamic Websites – Server-side programming</a> topic.</p>
+
+<h3 id="Dynamic_versus_static_code">Dynamic versus static code</h3>
+
+<p>The word <strong>dynamic</strong> is used to describe both client-side JavaScript, and server-side languages — it refers to the ability to update the display of a web page/app to show different things in different circumstances, generating new content as required. Server-side code dynamically generates new content on the server, e.g. pulling data from a database, whereas client-side JavaScript dynamically generates new content inside the browser on the client, e.g. creating a new HTML table, filling it with data requested from the server, then displaying the table in a web page shown to the user. The meaning is slightly different in the two contexts, but related, and both approaches (server-side and client-side) usually work together.</p>
+
+<p>A web page with no dynamically updating content is referred to as <strong>static</strong> — it just shows the same content all the time.</p>
+
+<h2 id="How_do_you_add_JavaScript_to_your_page">How do you add JavaScript to your page?</h2>
+
+<p>JavaScript is applied to your HTML page in a similar manner to CSS. Whereas CSS uses {{htmlelement("link")}} elements to apply external stylesheets and {{htmlelement("style")}} elements to apply internal stylesheets to HTML, JavaScript only needs one friend in the world of HTML — the {{htmlelement("script")}} element. Let's learn how this works.</p>
+
+<h3 id="Internal_JavaScript">Internal JavaScript</h3>
+
+<ol>
+ <li>First of all, make a local copy of our example file <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript.html">apply-javascript.html</a>. Save it in a directory somewhere sensible.</li>
+ <li>Open the file in your web browser and in your text editor. You'll see that the HTML creates a simple web page containing a clickable button.</li>
+ <li>Next, go to your text editor and add the following in your head — just before your closing <code>&lt;/head&gt;</code> tag:
+  <pre class="brush: html">&lt;script&gt;
+
+  // JavaScript goes here
+
+&lt;/script&gt;</pre>
+ </li>
+ <li>Now we'll add some JavaScript inside our {{htmlelement("script")}} element to make the page do something more interesting — add the following code just below the "// JavaScript goes here" line:
+  <pre class="brush: js">document.addEventListener("DOMContentLoaded", function() {
+  function createParagraph() {
+    let para = document.createElement('p');
+    para.textContent = 'You clicked the button!';
+    document.body.appendChild(para);
+  }
+
+  const buttons = document.querySelectorAll('button');
+
+  for(let i = 0; i &lt; buttons.length ; i++) {
+    buttons[i].addEventListener('click', createParagraph);
+  }
+});</pre>
+ </li>
+ <li>Save your file and refresh the browser — now you should see that when you click the button, a new paragraph is generated and placed below.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: If your example doesn't seem to work, go through the steps again and check that you did everything right. Did you save your local copy of the starting code as a <code>.html</code> file? Did you add your {{htmlelement("script")}} element just before the <code>&lt;/head&gt;</code> tag? Did you enter the JavaScript exactly as shown? <strong>JavaScript is case sensitive, and very fussy, so you need to enter the syntax exactly as shown, otherwise it may not work.</strong></p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: You can see this version on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html">apply-javascript-internal.html</a> (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html">see it live too</a>).</p>
+</div>
+
+<h3 id="External_JavaScript">External JavaScript</h3>
+
+<p>This works great, but what if we wanted to put our JavaScript in an external file? Let's explore this now.</p>
+
+<ol>
+ <li>First, create a new file in the same directory as your sample HTML file. Call it <code>script.js</code> — make sure it has that .js filename extension, as that's how it is recognized as JavaScript.</li>
+ <li>Replace your current {{htmlelement("script")}} element with the following:
+  <pre class="brush: html">&lt;script src="script.js" defer&gt;&lt;/script&gt;</pre>
+ </li>
+ <li>Inside <code>script.js</code>, add the following script:
+  <pre class="brush: js">function createParagraph() {
+  let para = document.createElement('p');
+  para.textContent = 'You clicked the button!';
+  document.body.appendChild(para);
+}
+
+const buttons = document.querySelectorAll('button');
+
+for(let i = 0; i &lt; buttons.length ; i++) {
+  buttons[i].addEventListener('click', createParagraph);
+}</pre>
+ </li>
+ <li>Save and refresh your browser, and you should see the same thing! It works just the same, but now we've got our JavaScript in an external file. This is generally a good thing in terms of organizing your code and making it reusable across multiple HTML files. Plus, the HTML is easier to read without huge chunks of script dumped in it.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: You can see this version on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html">apply-javascript-external.html</a> and <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/script.js">script.js</a> (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html">see it live too</a>).</p>
+</div>
+
+<h3 id="Inline_JavaScript_handlers">Inline JavaScript handlers</h3>
+
+<p>Note that sometimes you'll come across bits of actual JavaScript code living inside HTML. It might look something like this:</p>
+
+<div id="inline_js_example">
+<pre class="brush: js example-bad">function createParagraph() {
+  let para = document.createElement('p');
+  para.textContent = 'You clicked the button!';
+  document.body.appendChild(para);
+}</pre>
+
+<pre class="brush: html example-bad">&lt;button onclick="createParagraph()"&gt;Click me!&lt;/button&gt;</pre>
+</div>
+
+<p>You can try this version of our demo below.</p>
+
+<p>{{ EmbedLiveSample('inline_js_example', '100%', 150, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>This demo has exactly the same functionality as in the previous two sections, except that the {{htmlelement("button")}} element includes an inline <code>onclick</code> handler to make the function run when the button is pressed.</p>
+
+<p><strong>Please don't do this, however.</strong> It is bad practice to pollute your HTML with JavaScript, and it is inefficient — you'd have to include the <code>onclick="createParagraph()"</code> attribute on every button you wanted the JavaScript to apply to.</p>
+
+<p>Using a pure JavaScript construct allows you to select all the buttons using one instruction. The code we used above to serve this purpose looks like this:</p>
+
+<pre class="brush: js">const buttons = document.querySelectorAll('button');
+
+for(let i = 0; i &lt; buttons.length ; i++) {
+  buttons[i].addEventListener('click', createParagraph);
+}</pre>
+
+<p>This might be a bit longer than the <code>onclick</code> attribute, but it will work for all buttons — no matter how many are on the page, nor how many are added or removed. The JavaScript does not need to be changed.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Try editing your version of <code>apply-javascript.html</code> and add a few more buttons into the file. When you reload, you should find that all of the buttons when clicked will create a paragraph. Neat, huh?</p>
+</div>
+
+<h3 id="Script_loading_strategies">Script loading strategies</h3>
+
+<p>There are a number of issues involved with getting scripts to load at the right time. Nothing is as simple as it seems! A common problem is that all the HTML on a page is loaded in the order in which it appears. If you are using JavaScript to manipulate elements on the page (or more accurately, the <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents#The_document_object_model">Document Object Model</a>), your code won't work if the JavaScript is loaded and parsed before the HTML you are trying to do something to.</p>
+
+<p>In the above code examples, in the internal and external examples the JavaScript is loaded and run in the head of the document, before the HTML body is parsed. This could cause an error, so we've used some constructs to get around it.</p>
+
+<p>In the internal example, you can see this structure around the code:</p>
+
+<pre class="brush: js">document.addEventListener("DOMContentLoaded", function() {
+  ...
+});</pre>
+
+<p>This is an event listener, which listens for the browser's "DOMContentLoaded" event, which signifies that the HTML body is completely loaded and parsed. The JavaScript inside this block will not run until after that event is fired, therefore the error is avoided (you'll <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">learn about events</a> later in the course).</p>
+
+<p>In the external example, we use a more modern JavaScript feature to solve the problem, the <code>defer</code> attribute, which tells the browser to continue downloading the HTML content once the <code>&lt;script&gt;</code> tag element has been reached.</p>
+
+<pre class="brush: js">&lt;script src="script.js" defer&gt;&lt;/script&gt;</pre>
+
+<p>In this case both the script and the HTML will load simultaneously and the code will work.</p>
+
+<div class="note">
+<p><strong>Note</strong>: In the external case, we did not need to use the <code>DOMContentLoaded</code> event because the <code>defer</code> attribute solved the problem for us. We didn't use the <code>defer</code> solution for the internal JavaScript example because <code>defer</code> only works for external scripts.</p>
+</div>
+
+<p>An old-fashioned solution to this problem used to be to put your script element right at the bottom of the body (e.g. just before the <code>&lt;/body&gt;</code> tag), so that it would load after all the HTML has been parsed. The problem with this solution is that loading/parsing of the script is completely blocked until the HTML DOM has been loaded. On larger sites with lots of JavaScript, this can cause a major performance issue, slowing down your site.</p>
+
+<h4 id="async_and_defer">async and defer</h4>
+
+<p>There are actually two ways we can bypass the problem of the blocking script — <code>async</code> and <code>defer</code>. Let's look at the difference between these two.</p>
+
+<p>Async scripts will download the script without blocking rendering the page and will execute it as soon as the script finishes downloading. You get no guarantee that scripts will run in any specific order, only that they will not stop the rest of the page from displaying. It is best to use <code>async</code> when the scripts in the page run independently from each other and depend on no other script on the page.</p>
+
+<p>For example, if you have the following script elements:</p>
+
+<pre class="brush: html">&lt;script async src="js/vendor/jquery.js"&gt;&lt;/script&gt;
+
+&lt;script async src="js/script2.js"&gt;&lt;/script&gt;
+
+&lt;script async src="js/script3.js"&gt;&lt;/script&gt;</pre>
+
+<p>You can't rely on the order the scripts will load in. <code>jquery.js</code> may load before or after <code>script2.js</code> and <code>script3.js</code> and if this is the case, any functions in those scripts depending on <code>jquery</code> will produce an error because <code>jquery</code> will not be defined at the time the script runs.</p>
+
+<p><code>defer</code> will run the scripts in the order they appear in the page and execute them as soon as the script and content are downloaded:</p>
+
+<pre class="brush: html">&lt;script defer src="js/vendor/jquery.js"&gt;&lt;/script&gt;
+
+&lt;script defer src="js/script2.js"&gt;&lt;/script&gt;
+
+&lt;script defer src="js/script3.js"&gt;&lt;/script&gt;</pre>
+
+<p>All the scripts with the <code>defer</code> attribute will load in the order they appear on the page. So in the second example, we can be sure that <code>jquery.js</code> will load before <code>script2.js</code> and <code>script3.js</code> and that <code>script2.js</code> will load before <code>script3.js</code>.</p>
+
+<p>To summarize:</p>
+
+<ul>
+ <li>If your scripts don't need to wait for parsing and can run independently without dependencies, then use <code>async</code>.</li>
+ <li>If your scripts need to wait for parsing and depend on other scripts load them using <code>defer</code> and put their corresponding <code>&lt;script&gt;</code> elements in the order you want the browser to execute them.</li>
+</ul>
+
+<h2 id="Comments">Comments</h2>
+
+<p>As with HTML and CSS, it is possible to write comments into your JavaScript code that will be ignored by the browser, and exist simply to provide instructions to your fellow developers on how the code works (and you, if you come back to your code after six months and can't remember what you did). Comments are very useful, and you should use them often, particularly for larger applications. There are two types:</p>
+
+<ul>
+ <li>A single line comment is written after a double forward slash (//), e.g.
+  <pre class="brush: js">// I am a comment</pre>
+ </li>
+ <li>A multi-line comment is written between the strings /* and */, e.g.
+  <pre class="brush: js">/*
+  I am also
+  a comment
+*/</pre>
+ </li>
+</ul>
+
+<p>So for example, we could annotate our last demo's JavaScript with comments like so:</p>
+
+<pre class="brush: js">// Function: creates a new paragraph and appends it to the bottom of the HTML body.
+
+function createParagraph() {
+  let para = document.createElement('p');
+  para.textContent = 'You clicked the button!';
+  document.body.appendChild(para);
+}
+
+/*
+  1. Get references to all the buttons on the page in an array format.
+  2. Loop through all the buttons and add a click event listener to each one.
+
+  When any button is pressed, the createParagraph() function will be run.
+*/
+
+const buttons = document.querySelectorAll('button');
+
+for (let i = 0; i &lt; buttons.length ; i++) {
+  buttons[i].addEventListener('click', createParagraph);
+}</pre>
+
+<div class="note">
+<p><strong>Note</strong>: In general more comments is usually better than less, but you should be careful if you find yourself adding lots of comments to explain what variables are (your variable names perhaps should be more intuitive), or to explain very simple operations (maybe your code is overcomplicated).</p>
+</div>
+
+<h2 id="Summary">Summary</h2>
+
+<p>So there you go, your first step into the world of JavaScript. We've begun with just theory, to start getting you used to why you'd use JavaScript and what kind of things you can do with it. Along the way, you saw a few code examples and learned how JavaScript fits in with the rest of the code on your website, amongst other things.</p>
+
+<p>JavaScript may seem a bit daunting right now, but don't worry — in this course, we will take you through it in simple steps that will make sense going forward. In the next article, we will <a href="/en-US/docs/Learn/JavaScript/Introduction_to_JavaScript_1/A_first_splash">plunge straight into the practical</a>, getting you to jump straight in and build your own JavaScript examples.</p>
+
+<ul>
+</ul>
+
+<p>{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li>
+</ul>