Skip to content
Coding With WanBi
Github

Đề Luyện Tập JavaScript Cho Beginner (Phần 2)

— Javascript — 12 min read

Tổng Quan

Phần thứ hai trong bộ đề luyện tập JavaScript dành cho người mới bắt đầu học lập trình. Trong phần này, chúng ta sẽ tập trung vào cấu trúc điều kiện: if, if-else, if-else if và switch-case.

Giống như trong cuộc sống hàng ngày, bạn thường phải đưa ra quyết định dựa trên hoàn cảnh (ví dụ: "Nếu trời mưa, tôi sẽ mang ô"). Trong lập trình, cấu trúc điều kiện giúp máy tính làm điều tương tự. Thông qua các bài tập thực hành, bạn sẽ hiểu cách điều khiển luồng chương trình dựa trên các điều kiện khác nhau.

Luyện tập là cách tốt nhất để thành thạo JavaScript!
Hãy đảm bảo thực hành tất cả các bài tập dưới đây.

Phần 2: Cấu trúc Điều kiện

Kiến thức cần nhớ

  • Câu lệnh if: Dùng để thực thi một khối lệnh nếu một điều kiện là đúng.

    • If thiếu (Simple if): Chỉ có phần if, không có else. Cú pháp: if (điều_kiện) { khối_lệnh }
    • If đầy đủ (if-else): Có cả phần if và else. Cú pháp: if (điều_kiện) { khối_lệnh_1 } else { khối_lệnh_2 }

  • Câu lệnh if bậc thang (if-else if): Sử dụng else if để kiểm tra nhiều điều kiện theo thứ tự. Rất hữu ích khi bạn có nhiều hơn hai khả năng. Cú pháp: if (điều_kiện_1) { khối_lệnh_1 } else if (điều_kiện_2) { khối_lệnh_2 } else { khối_lệnh_3 }

  • Câu lệnh if lồng nhau: Đặt một câu lệnh if bên trong một câu lệnh if khác. Hữu ích cho các kịch bản phức tạp, nhưng hãy cẩn thận để không làm code quá khó đọc. Cú pháp:

    if (điều_kiện_1) {
      if (điều_kiện_2) {
        khối_lệnh
      }
    }

  • Câu lệnh switch-case: So sánh một biểu thức với nhiều giá trị (case) khác nhau. Đây là một giải pháp thay thế gọn gàng cho if-else if khi bạn chỉ kiểm tra một biến duy nhất. Cú pháp:

    switch (biểu_thức) {
      case giá_trị_1: khối_lệnh_1; break;
      case giá_trị_2: khối_lệnh_2; break;
      default: khối_lệnh_mặc_định;
    }

Lưu ý quan trọng: Trong JavaScript, bạn nên ưu tiên sử dụng toán tử so sánh nghiêm ngặt === thay vì ==. Toán tử === kiểm tra cả giá trị và kiểu dữ liệu, giúp tránh các lỗi không mong muốn. Chúng ta sẽ tìm hiểu kỹ hơn ở phần sau.

  • Từ khóa break: Dùng trong switch-case để thoát khỏi cấu trúc sau khi một case được thực thi. Nếu không có break, code sẽ tiếp tục chạy xuống các case tiếp theo ("fall-through").
  • Từ khóa default: Case mặc định trong switch-case, được thực thi khi không có case nào khớp.

Bài tập cốt lõi

Lời khuyên: Hãy tự mình làm các bài tập trước khi xem lời giải. Sau đó so sánh kết quả của bạn với lời giải để học hỏi thêm!

1. Sử dụng câu lệnh if thiếu (không có else)

  • Khai báo một biến age với giá trị bất kỳ
  • Sử dụng câu lệnh if thiếu để kiểm tra nếu age >= 18, hiển thị thông báo "Bạn đã đủ tuổi lái xe"
Xem lời giải
var age = 22;


if (age >= 18) {
  console.log("Bạn đã đủ tuổi lái xe");
}

2. Sử dụng câu lệnh if đầy đủ (if-else)

  • Khai báo biến score với một giá trị từ 0-100
  • Sử dụng câu lệnh if-else để kiểm tra nếu score >= 50, hiển thị "Đạt", ngược lại hiển thị "Không đạt"
Xem lời giải
var score = 75;


if (score >= 50) {
  console.log("Đạt");
} else {
  console.log("Không đạt");
}

3. Sử dụng câu lệnh if bậc thang (if-else if)

  • Khai báo biến hour với giá trị từ 0-23 (đại diện cho giờ trong ngày)
  • Sử dụng câu lệnh if bậc thang để hiển thị lời chào phù hợp:
    • Nếu hour < 12: "Chào buổi sáng"
    • Nếu hour < 18: "Chào buổi chiều"
    • Còn lại: "Chào buổi tối"
Xem lời giải
var hour = 14;


if (hour < 12) {
  console.log("Chào buổi sáng");
} else if (hour < 18) {
  console.log("Chào buổi chiều");
} else {
  console.log("Chào buổi tối");
}

4. Sử dụng câu lệnh if lồng nhau

  • Khai báo biến isLoggedIn với giá trị boolean (true hoặc false)
  • Khai báo biến userRole với giá trị là "admin" hoặc "user"
  • Sử dụng câu lệnh if lồng nhau để:
    • Kiểm tra xem người dùng đã đăng nhập chưa (isLoggedIn).
    • Nếu đã đăng nhập, kiểm tra vai trò của họ (userRole).
    • Hiển thị lời chào phù hợp: "Chào mừng admin!" hoặc "Chào mừng user!".
    • Nếu chưa đăng nhập, hiển thị "Vui lòng đăng nhập để tiếp tục."
Xem lời giải
var isLoggedIn = true;
var userRole = "admin";


if (isLoggedIn) {
  console.log("Đã đăng nhập thành công.");
  if (userRole === "admin") {
    console.log("Chào mừng admin!");
  } else {
    console.log("Chào mừng user!");
  }
} else {
  console.log("Vui lòng đăng nhập để tiếp tục.");
}

5. Sử dụng câu lệnh switch-case

  • Khai báo biến dayNumber với giá trị từ 0-6 (0: Chủ nhật, 1-6: Thứ 2 đến Thứ 7)
  • Sử dụng câu lệnh switch-case để hiển thị tên ngày trong tuần.
  • Lưu ý: Hãy chú ý vai trò của break. Nếu không có nó, chương trình sẽ thực thi cả những case phía sau case đúng.
Xem lời giải
var dayNumber = 3;
var dayName;


switch (dayNumber) {
  case 0:
    dayName = "Chủ Nhật";
    break;
  case 1:
    dayName = "Thứ Hai";
    break;
  case 2:
    dayName = "Thứ Ba";
    break;
  case 3:
    dayName = "Thứ Tư";
    break;
  case 4:
    dayName = "Thứ Năm";
    break;
  case 5:
    dayName = "Thứ Sáu";
    break;
  case 6:
    dayName = "Thứ Bảy";
    break;
  default:
    dayName = "Ngày không hợp lệ";
}


console.log("Hôm nay là:", dayName);

6. Bài tập tổng hợp: Xác định mùa trong năm

  • Khai báo biến month với giá trị từ 1-12 (tháng trong năm)
  • Thử nghiệm hai phương pháp khác nhau:
    1. Sử dụng cấu trúc if bậc thang để xác định mùa
    2. Sử dụng switch-case với tính năng "fall-through" (các case liên tiếp không có break)
  • Quy tắc xác định:
    • Mùa xuân: tháng 3-5
    • Mùa hè: tháng 6-8
    • Mùa thu: tháng 9-11
    • Mùa đông: tháng 12, 1, 2
Xem lời giải - Cách 1: Sử dụng if bậc thang
// Khai báo biến month
var month = 7;
var season;


// Xác định mùa bằng if-else if
if (month >= 3 && month <= 5) {
  season = "Xuân";
} else if (month >= 6 && month <= 8) {
  season = "Hè";
} else if (month >= 9 && month <= 11) {
  season = "Thu";
} else if (month === 12 || month === 1 || month === 2) {
  season = "Đông";
} else {
  season = "Tháng không hợp lệ";
}


console.log("Tháng", month, "thuộc mùa", season);
Xem lời giải - Cách 2: Sử dụng switch-case với fall-through
// Khai báo biến month
var month = 7;
var season;


// Xác định mùa bằng switch-case
switch (month) {
  case 3:
  case 4:
  case 5:
    season = "Xuân";
    break;
  case 6:
  case 7:
  case 8:
    season = "Hè";
    break;
  case 9:
  case 10:
  case 11:
    season = "Thu";
    break;
  case 12:
  case 1:
  case 2:
    season = "Đông";
    break;
  default:
    season = "Tháng không hợp lệ";
}


console.log("Tháng", month, "thuộc mùa", season);

Hướng dẫn và lời khuyên

Cách học hiệu quả: Hãy thử giải các bài tập trước khi xem đáp án. Sau đó so sánh giải pháp của bạn với lời giải. Phương pháp này giúp bạn rèn luyện kỹ năng giải quyết vấn đề và hiểu sâu hơn về các khái niệm.

Cách thực thi code JavaScript

  1. Mở trình duyệt web (Google Chrome hoặc Firefox là lựa chọn phổ biến)
  2. Mở Developer Console bằng cách:
    • Nhấn phím tắt F12 hoặc Ctrl+Shift+J (Windows/Linux) hoặc Cmd+Option+J (Mac)
    • Hoặc chuột phải vào trang web trống và chọn "Inspect" > "Console"
  3. Copy từng đoạn code và dán vào Console
  4. Nhấn Enter để thực thi và xem kết quả ngay lập tức

Phương pháp thực hành hiệu quả

  1. Thực hành từng bước: Thực hiện lần lượt từng bài tập theo hướng dẫn
  2. Thử nghiệm: Thay đổi giá trị của các biến và dự đoán kết quả trước khi chạy code
  3. Ghi chú: Viết lại ý hiểu của bạn về mỗi khái niệm sau khi thực hành

Lưu ý quan trọng khi sử dụng cấu trúc điều kiện

  1. Toán tử so sánh:

    • == so sánh giá trị (không kiểm tra kiểu dữ liệu)
    • === so sánh cả giá trị và kiểu dữ liệu (khuyến nghị sử dụng)
    • != và !== là phủ định của các toán tử trên

  2. Giá trị truthy và falsy:

    • Falsy: những giá trị được coi là false trong ngữ cảnh logic. Gồm: false, 0, -0, 0n (BigInt), '' (chuỗi rỗng), null, undefined, NaN.
    • Truthy: mọi giá trị khác falsy đều là true trong ngữ cảnh logic (ví dụ: 'hello', 123, true, [], {})

  3. Sử dụng ngoặc nhọn :

    • Luôn sử dụng ngoặc nhọn, ngay cả với khối lệnh đơn
    • Đảm bảo code dễ đọc và tránh lỗi logic

Ví dụ thực tế

  • Kiểm tra điều kiện vay:
var age = 25;
var hasStableIncome = true;
var creditScore = 700;


if (age >= 21 && hasStableIncome && creditScore >= 650) {
  console.log("Đủ điều kiện vay");
} else {
  console.log("Không đủ điều kiện vay");
}
  • Xác định phương thức thanh toán:
var paymentMethod = "credit";


switch (paymentMethod) {
  case "credit":
    console.log("Thanh toán bằng thẻ tín dụng");
    break;
  case "debit":
    console.log("Thanh toán bằng thẻ ghi nợ");
    break;
  case "cash":
    console.log("Thanh toán bằng tiền mặt");
    break;
  default:
    console.log("Phương thức thanh toán không hợp lệ");
}

Mẹo: Sử dụng toán tử ba ngôi

Toán tử ba ngôi (condition ? exprIfTrue : exprIfFalse) là cách rút gọn của if-else khi bạn cần gán giá trị dựa trên một điều kiện. Nó giúp code ngắn gọn hơn, nhưng hãy sử dụng một cách khôn ngoan.

// Thay vì viết:
var message;
if (age >= 18) {
  message = "Đủ tuổi";
} else {
  message = "Chưa đủ tuổi";
}


// Có thể viết gọn lại:
var message = age >= 18 ? "Đủ tuổi" : "Chưa đủ tuổi";
console.log(message);

Khi nào nên dùng?

  • Nên dùng: Cho các điều kiện đơn giản và phép gán giá trị.
  • Nên tránh: Khi logic phức tạp. Một câu lệnh if-else đầy đủ sẽ dễ đọc và dễ bảo trì hơn.

Gợi ý mở rộng

  • Tìm hiểu về toán tử ba ngôi: condition ? expressionIfTrue : expressionIfFalse
  • Thử kết hợp nhiều câu điều kiện lồng nhau để giải quyết vấn đề phức tạp
  • Thử nghiệm với các thuật toán đơn giản như tìm số lớn nhất trong 3 số

Lưu ý: Hãy lưu lại các đoạn code đã thực hành vào một file .js riêng để ôn tập sau này!

Bài tập mở rộng (Tự thực hành)

  1. Tính hóa đơn điện thoại

    • Khai báo biến minutes (số phút gọi) và messages (số tin nhắn).
    • Tính cước phí theo quy tắc: 0.1$/phút và 0.05$/tin nhắn.
    • Nếu tổng cước phí (chưa giảm giá) lớn hơn 20$, hãy áp dụng giảm giá 10% trên tổng hóa đơn. In ra số tiền cuối cùng.

  2. Kiểm tra năm nhuận

    • Viết chương trình kiểm tra một biến year có phải là năm nhuận hay không.
    • Gợi ý: Một năm là năm nhuận nếu nó thỏa mãn một trong hai điều kiện sau:
      1. Chia hết cho 4 nhưng không chia hết cho 100.
      2. Chia hết cho 400.
    • Sử dụng cấu trúc if lồng nhau hoặc toán tử logic (&&, ||) để giải quyết.

  3. Máy tính chỉ số BMI

    • BMI = cân nặng (kg) / (chiều cao (m) * chiều cao (m))
    • Phân loại: < 18.5 (Thiếu cân), 18.5-24.9 (Bình thường), 25-29.9 (Thừa cân), >= 30 (Béo phì)
    • Sử dụng if-else if để hiển thị phân loại dựa vào chỉ số BMI đã tính.

Kết luận

Trong phần này, chúng ta đã đi sâu vào các cấu trúc điều kiện trong JavaScript. Việc nắm vững if, if-else, if-else if, và switch-case là nền tảng vững chắc để bạn giải quyết các bài toán lập trình phức tạp hơn.

Những điểm chính cần nhớ:

  • Sử dụng if khi chỉ cần kiểm tra một điều kiện.
  • Sử dụng if-else khi có hai luồng xử lý đối lập.
  • Sử dụng if-else if khi cần kiểm tra nhiều điều kiện độc lập.
  • Sử dụng switch-case như một giải pháp thay thế gọn gàng cho if-else if khi so sánh một biến với nhiều giá trị cụ thể.

Để nâng cao kỹ năng lập trình của bạn:

  • Kết hợp kiến thức về biến và toán tử từ Phần 1 với cấu trúc điều kiện.
  • Thử thách bản thân với các bài tập mở rộng và tự đặt ra các vấn đề tương tự.
  • Đọc thêm bài viết chi tiết về Cấu trúc điều kiện trong JavaScript.

Hãy tiếp tục duy trì thói quen thực hành. Trong phần tiếp theo, chúng ta sẽ khám phá về vòng lặp - một công cụ mạnh mẽ để thực thi mã lặp đi lặp lại.

Lời nhắc: Lập trình là một kỹ năng thực hành. Càng code nhiều, bạn càng giỏi!

© 2025 by Coding With WanBi. All rights reserved.
Theme by LekoArts