Vanhiep.NET - Chuyên gia Thiết kế Website & Ứng dụng

JavaScript Cơ Bản: Biến, Kiểu Dữ Liệu, Toán Tử, Cấu Trúc Điều Khiển & Vòng Lặp Từ A-Z

Thứ hai, Ngày 02/06/2025 00:28
☰

Nắm vững JavaScript cơ bản để xây dựng website mạnh mẽ! Bài viết này đi sâu vào các khái niệm cốt lõi: biến, kiểu dữ liệu, toán tử, cấu trúc điều khiển (if/else, switch), vòng lặp (for, while) và hàm. Khám phá cách các yếu tố này hoạt động cùng nhau để tạo ra logic ứng dụng, giúp bạn tự tin hơn trên hành trình lập trình web.

JavaScript Cơ Bản: Nắm Vững Biến, Kiểu Dữ Liệu, Toán Tử, Cấu Trúc Điều Khiển và Vòng Lặp

Chào mừng bạn đến với thế giới lập trình JavaScript! Nếu bạn đang bắt đầu hành trình chinh phục ngôn ngữ này, việc nắm vững các khái niệm cơ bản là vô cùng quan trọng. Bài viết này sẽ đi sâu vào các yếu tố cốt lõi: biến, kiểu dữ liệu, toán tử, cấu trúc điều khiển (if/else, switch), vòng lặp (for, while) và hàm.

---

1. Biến (Variables)

Trong JavaScript, biến là nơi lưu trữ dữ liệu. Hãy tưởng tượng chúng như những chiếc hộp mà bạn có thể đặt các giá trị khác nhau vào đó. Để khai báo biến, chúng ta sử dụng các từ khóa var, let hoặc const.

  • var: Cách khai báo truyền thống, nhưng có một số hạn chế về phạm vi.
  • let: Được giới thiệu trong ES6 (ECMAScript 2015), let có phạm vi khối (block scope), tức là nó chỉ tồn tại trong khối mã mà nó được định nghĩa. Đây là lựa chọn được ưu tiên hơn var trong các dự án hiện đại.
  • const: Cũng được giới thiệu trong ES6, const dùng để khai báo hằng số. Giá trị của const không thể thay đổi sau khi đã được gán.

Ví dụ:

var ten = "Nguyen Van A";
let tuoi = 30;
const PI = 3.14;

---

2. Kiểu Dữ Liệu (Data Types)

JavaScript có nhiều kiểu dữ liệu khác nhau để biểu diễn các loại thông tin. Chúng ta có thể chia thành hai nhóm chính:

  • Kiểu dữ liệu nguyên thủy (Primitive Data Types):
    • String (chuỗi): Văn bản, được đặt trong dấu nháy đơn hoặc nháy kép. Ví dụ: "Hello World", 'JavaScript'.
    • Number (số): Bao gồm số nguyên và số thập phân. Ví dụ: 10, 3.14.
    • Boolean (logic): Chỉ có hai giá trị true (đúng) hoặc false (sai).
    • Undefined: Một biến đã được khai báo nhưng chưa được gán giá trị.
    • Null: Biểu thị sự vắng mặt có chủ ý của bất kỳ giá trị đối tượng nào.
    • Symbol (ký hiệu): Được giới thiệu trong ES6, dùng để tạo ra các giá trị duy nhất.
    • BigInt: Được giới thiệu trong ES2020, dùng để biểu diễn các số nguyên lớn hơn giới hạn của kiểu Number.
  • Kiểu dữ liệu tham chiếu (Reference Data Types):
    • Object (đối tượng): Tập hợp các cặp khóa-giá trị. Ví dụ: { ten: "A", tuoi: 30 }.
    • Array (mảng): Tập hợp các phần tử được sắp xếp theo chỉ mục. Ví dụ: [1, 2, 3].
    • Function (hàm): Khối mã có thể tái sử dụng.

---

3. Toán Tử (Operators)

Toán tử là các ký hiệu dùng để thực hiện các phép tính hoặc thao tác trên các giá trị và biến.

  • Toán tử số học: + (cộng), - (trừ), * (nhân), / (chia), % (chia lấy dư), ** (lũy thừa).
  • Toán tử gán: = (gán), += (cộng và gán), -= (trừ và gán), v.v.
  • Toán tử so sánh: == (bằng giá trị), === (bằng giá trị và kiểu dữ liệu), != (khác giá trị), !== (khác giá trị hoặc kiểu dữ liệu), > (lớn hơn), < (nhỏ hơn), >= (lớn hơn hoặc bằng), <= (nhỏ hơn hoặc bằng).
  • Toán tử logic: && (AND), || (OR), ! (NOT).
  • Toán tử ba ngôi (Ternary Operator): điều_kiện ? giá_trị_nếu_đúng : giá_trị_nếu_sai.

Ví dụ:

let a = 10;
let b = 5;
let tong = a + b; // tong = 15
let soSanh = a > b; // soSanh = true

---

4. Cấu Trúc Điều Khiển (Control Structures)

Cấu trúc điều khiển cho phép chúng ta điều chỉnh luồng thực thi của chương trình dựa trên các điều kiện.

a. if/else

Câu lệnh if/else thực thi một khối mã nếu một điều kiện là true, và một khối mã khác nếu điều kiện là false.

Cú pháp:

if (điều_kiện) {
    // Mã được thực thi nếu điều_kiện là true
} else {
    // Mã được thực thi nếu điều_kiện là false
}

Ví dụ:

let diem = 7;
if (diem >= 5) {
    console.log("Đậu");
} else {
    console.log("Rớt");
}

b. switch

Câu lệnh switch dùng để thực thi các khối mã khác nhau dựa trên các giá trị khác nhau của một biểu thức.

Cú pháp:

switch (biểu_thức) {
    case giá_trị_1:
        // Mã được thực thi nếu biểu_thức == giá_trị_1
        break;
    case giá_trị_2:
        // Mã được thực thi nếu biểu_thức == giá_trị_2
        break;
    default:
        // Mã được thực thi nếu không có case nào khớp
}

Ví dụ:

let ngayTrongTuan = 3;
switch (ngayTrongTuan) {
    case 2:
        console.log("Thứ Hai");
        break;
    case 3:
        console.log("Thứ Ba");
        break;
    default:
        console.log("Không xác định");
}

---

5. Vòng Lặp (Loops)

Vòng lặp cho phép chúng ta thực thi một khối mã nhiều lần.

a. for Loop

Vòng lặp for thường được sử dụng khi bạn biết số lần lặp cụ thể.

Cú pháp:

for (khởi_tạo; điều_kiện; cập_nhật) {
    // Mã được thực thi trong mỗi lần lặp
}

Ví dụ:

for (let i = 0; i < 5; i++) {
    console.log("Lần lặp thứ: " + i);
}

b. while Loop

Vòng lặp while thực thi một khối mã miễn là một điều kiện là true.

Cú pháp:

while (điều_kiện) {
    // Mã được thực thi miễn là điều_kiện là true
}

Ví dụ:

let count = 0;
while (count < 3) {
    console.log("Count là: " + count);
    count++;
}

---

6. Hàm (Functions)

Hàm là các khối mã có thể tái sử dụng, được thiết kế để thực hiện một nhiệm vụ cụ thể. Việc sử dụng hàm giúp mã của bạn có tổ chức, dễ đọc và dễ bảo trì hơn.

Cú pháp khai báo hàm:

function tenHam(thamSo1, thamSo2) {
    // Mã của hàm
    return ketQua; // Tùy chọn: trả về một giá trị
}

Ví dụ:

function chaoMung(ten) {
    return "Xin chào, " + ten + "!";
}

let loiChao = chaoMung("Hoang");
console.log(loiChao); // Output: Xin chào, Hoang!

Bạn cũng có thể sử dụng hàm mũi tên (Arrow Functions), một cú pháp ngắn gọn hơn được giới thiệu trong ES6:

const tinhTong = (a, b) => a + b;

let ketQuaTong = tinhTong(5, 7);
console.log(ketQuaTong); // Output: 12

---

Hy vọng bài viết này đã cung cấp cho bạn cái nhìn tổng quan và cơ bản về các khái niệm quan trọng trong JavaScript. Nắm vững những kiến thức này sẽ là nền tảng vững chắc để bạn tiếp tục khám phá và xây dựng các ứng dụng web phức tạp hơn. Hãy thực hành thường xuyên để củng cố kiến thức nhé!

Bạn có muốn tìm hiểu sâu hơn về một khía cạnh cụ thể nào trong JavaScript không?

Bài viết liên quan

BÀI VIẾT NỔI BẬT