path: root/files/vi/learn/javascript/first_steps/math/index.html

---
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>