Tới đây ta sẽ bàn về toán học trong JavaScript — cách sử dụng 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.

Điều kiện tiên quyết: 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ì.
Mục tiêu: Quen với cơ bản của toán trong JavaScript.

Tất cả mọi người đều yêu toán

Đượ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.

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.

Kiểu số học

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:

  • Integers là số nguyên, ví dụ 10, 400, or -5.
  • Floating point numbers (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.
  • Doubles 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).

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

  • Binary — Cấp độ thấp nhất trong ngôn ngữ máy; 0 và 1.
  • Octal — Cơ số 8, dùng 0–7 trong từng hàng.
  • Hexadecimal — 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 màu sắc trong CSS.

Trước khi nghĩ rằng não bạn sắp tan chảy, dừng lại ngay đó! Để 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.

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à, 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.

Với tôi tất cả chỉ là số

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 JavaScript console trong công cụ dành cho nhà phát triển của bạn, hoặc dùng console dựng sẵn phía dưới tuỳ thích.

Mở trong cửa sổ mới

  1. 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:
    var myInt = 5;
    var myFloat = 6.667;
    myInt;
    myFloat;
  2. 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.
  3. 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à typeof làm được điều này. Hãy nhập hai dòng phía dưới:
    typeof myInt;
    typeof myFloat;
    Giá trị trả về sẽ luôn là "number" 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ù!

Toán tử số học

Toán tử số học là những toán tử căn bản để ta dùng cho phép tính:

Toán tử Tên Mục đích Ví dụ
+ Cộng Cộng hai số lại với nhau. 6 + 9
- Trừ Trừ số bên trái bằng số bên phải. 20 - 15
* Nhân Nhân hai số lại với nhau. 3 * 7
/ Chia Chia số bên trái bằng số bên phải. 10 / 5
% Chia lấy dư (thi thoảng gọi là modulo)

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.

8 % 3 (trả về 2, bởi vì 3 nhân 2 được 6, 8 trừ 6 còn 2.)

Ghi chú: Đôi khi bạn sẽ thấy các số trong phép tính được đề cập dưới dạng các toán hạng.

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 JavaScript console trong công cụ dành cho nhà phát triển của bạn, hoặc dùng console dựng sẵn phía dưới tuỳ thích, để bạn quen với cú pháp.

  1. Trước hết hãy thử tự nhập vào vài ví dụ đơn giản, như là
    10 + 7
    9 * 8
    60 % 3
  2. 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:
    var num1 = 10;
    var num2 = 50;
    9 * num1;
    num2 / num1;
  3. 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à:
    5 + 10 * 3;
    num2 % 9 * num1;
    num2 + num1 / 8 + 2;

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.

Thứ tự ưu tiên toán tử

Hãy xem lại ví dụ cuối cùng phía trên, giả sử num2 giữ giá trị là 50 và num1 giữ giá trị là 10 (như đã khởi tạo ở phía trên):

num2 + num1 / 8 + 2;

Là con người, có lẽ bạn sẽ đọc là "50 cộng 10 bằng 60", rồi "8 cộng 2 bằng 10", và cuối cùng "60 chia cho 10 bằng 6".

Nhưng trình duyệt thực hiện từ "10 chia cho 8 bằng 1.25", rồi "50 cộng 1.25 cộng 2 bằng 53.25".

Đó là bởi vì thứ tự ưu tiên toán tử — 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).

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:

(num2 + num1) / (8 + 2);

Hãy thử xem.

Ghi chú: 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 Biểu thức và toán tử.

Toán tử tăng và giảm

Đô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 (++) và toán tử giảm (--). Chúng tôi đã dùng ++ trong trò chơi "Đoán số" trong bài viết first splash into JavaScript của chúng tôi, khi chúng tôi thêm 1 vào biến guessCount để đếm số lần đáon của người dùng sau mỗi lượt.

guessCount++;

Ghi chú: Chúng được dùng phần lớn trong vòng lặp, 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ó — thử nó ngay đi, và trông vào mã nguồn này để 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.

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:

3++;

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:

var num1 = 4;
num1++;

Đượ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, rồi 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:

num1;

Điều tương tự xảy ra với --, hãy thử đoạn bên dưới:

var num2 = 6;
num2--;
num2;

Ghi chú: 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 rồi 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 ++num1--num2.

Toán tử gán

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, =, 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:

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

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:

Toán tử Tên Mục đích Ví dụ Viết tắt cho
+= Cộng gán 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 x = 3;
x += 4;
x = 3;
x = x + 4;
-= Trừ gán 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 x = 6;
x -= 3;
x = 6;
x = x - 3;
*= Nhân gán 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 x = 2;
x *= 3;
x = 2;
x = x * 3;
/= Chia gán 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 x = 10;
x /= 5;
x = 10;
x = x / 5;

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

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:

var x = 3; // x giữ giá trị 3
var y = 4; // y giữ giá trị 4
x *= y; // x giờ giữ giá trị 12

Ghi chú: Còn có nhiều toán tử gán khác nữa, nhưng bây giờ bạn chỉ cần học những toán tử trên thôi.

Học chủ động: định cỡ của hộp canvas

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à Canvas API. 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 xy, được khởi tạo với giá trị bằng 50.

Mở trong cửa sổ mới

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:

  • 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.
  • 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.
  • 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).
  • 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.
  • 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.
  • 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.

Đừ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.

Toán tử so sánh

Đô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 toán tử so sánh.

Toán tử Tên Mục đích Ví dụ
=== Bằng chính xác Kiểm tra xem liệu hai giá trị trái phải có giống hệt nhau hay không 5 === 2 + 4
!== Không bằng chính xác Tiểm tra xem liệu hai giá trị trái phải có không giống hệt nhau hay không 5 !== 2 + 3
< Nhỏ hơn Kiểm tra xem giá trị bên trái có nhỏ hơn giá trị bên phải hay không. 10 < 6
> Lớn hơn Kiểm tra xem giá trị bên trái có lớn hơn giá trị bên phải hay không. 10 > 20
<= Nhỏ hơn hoặc bằng 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 3 <= 2
>= Lớn hơn hoặc bằng 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. 5 >= 4

Ghi chú: Có lẽ bạn sẽ thấy có người sử dụng ==!= 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 ===/!==. 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.

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ị true/false — 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 để:

  • 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
  • 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
  • Hiển thị câu chào mừng hợp với dịp lễ/ hội nào đó
  • Phóng to/ thu nhỏ bản đồ tuỳ theo nút nào được nhấn

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:

<button>Start machine</button>
<p>The machine is stopped.</p>
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.';
  }
}

Mở trong cửa sổ mới

Bạn có thể thấy toán tử so sánh bằng được dùng trong hàm updateBtn(). 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.

Ghi chú: Việc chuyển tiếp liên tục giữa hai giá trị thường được gọi là toggle. 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.

Tóm lại

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.

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.

Ghi chú: 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ề Số và ngày thángBiểu thức và toán tử của chúng tôi.

Trong mô-đun này

Document Tags and Contributors

Những người đóng góp cho trang này: PurpleLover
Cập nhật lần cuối bởi: PurpleLover,