Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> JavaScript

JavaScript If Else: Hướng dẫn từng bước câu lệnh điều kiện

Câu lệnh JavaScript if...else đánh giá điều kiện true hay false. Nếu điều kiện đúng, code trong block if thực thi. Ngược lại, nội dung block else thực thi. Else...if cho phép đánh giá nhiều điều kiện.

Sẽ có lúc bạn muốn block code khác nhau chạy, tùy thuộc yếu tố nhất định.

Đó là lúc câu lệnh điều kiện (conditional statements) xuất hiện. Câu lệnh điều kiện là phần quan trọng mọi ngôn ngữ lập trình. Chúng chạy block code nếu điều kiện cụ thể thỏa mãn.

Trong tutorial này, ta xem cách dùng if...else statements trong code.

Ôn tập Câu lệnh Điều kiện

Như đã thảo luận, câu lệnh điều kiện quan trọng mọi ngôn ngữ. Bạn cần dùng câu lệnh điều kiện chạy code nếu điều kiện thỏa mãn. vài tình huống dùng câu lệnh điều kiện hữu ích:

  • Kiểm tra mật khẩu user khớp với file.
  • Kiểm tra user có tài khoản dưới email cụ thể.
  • Submit form nếu mọi trường đã điền.
  • Hiển thị danh sách giảm giá ngày lễ nếu user đã đăng nhập.

Chìa khóa mọi ví dụ: dùng từ if. Nếu điều gì xảy ra, thì điều khác xảy ra. Khám phá cách dùng logic này trong JavaScript.

JavaScript if Statement

Câu lệnh If JavaScript đánh giá statement true hay false. if statement chỉ chạy nếu statement true. Nếu false, không xảy ra gì.

If statements dùng từ khóa if. Sau if statement, chỉ định điều kiện – hoặc tập điều kiện – trong ngoặc đơn. Nội dung if và else statement nằm trong ngoặc nhọn.

Cú pháp if statement JavaScript:

if (ourConditions) {
  // Code chạy nếu ourConditions true
}

Ví dụ if Statement JavaScript

Dùng ví dụ minh họa if statement. Xây dựng trang thương mại điện tử, cần đảm bảo user trên 16 tuổi trước khi mua. Ví dụ xác thực tuổi user trước khi cho mua:

const userAge = 15;
if (userAge < 16) {
  console.log("Bạn chưa đủ tuổi để mua hàng!");
}

Code trả về:

Bạn chưa đủ tuổi để mua hàng!

Dùng toán tử nhỏ hơn, kiểm tra tuổi user có < 16. User 15 tuổi, userAge < 16 true. Code trong if chạy.

Nhưng nếu user 16 tuổi? Code không trả về gì vì userAge < 16 false. Code trong if bị bỏ qua. Chương trình tiếp tục chạy.

JavaScript if...else Statement

Câu lệnh if...else JavaScript đánh giá điều kiện bằng true. Nếu điều kiện false, else statement thực thi. Ngược lại, nội dung "if" chạy.

Cú pháp if...else:

if (ourCondition) {
  // Code chạy nếu điều kiện true
} else {
  // Code chạy nếu điều kiện false
}

Else statement xuất hiện sau tất cả if conditions. Chỉ một else statement xuất hiện trong if statement.

Để học thêm JavaScript true/false, đọc hướng dẫn JavaScript Booleans.

Ví dụ if...else JavaScript

Dùng ví dụ trước kiểm tra tuổi user. Thêm else statement báo user đơn hàng đang xử lý.

const userAge = 17;
if (userAge < 16) {
  console.log("Bạn chưa đủ tuổi để mua hàng!");
} else {
  console.log("Đơn hàng của bạn đang được xử lý.");
}

Code trả về:

Đơn hàng của bạn đang được xử lý.

Khai báo biến "age" theo dõi tuổi user. Vì user > 16, code bỏ qua if và chạy else. Nếu user 12 tuổi, code trong else không chạy.

Else statements hữu ích nhiều ngữ cảnh. Ví dụ: dùng else xử lý lỗi nếu nảy sinh. Hoặc dùng else verify nội dung form. Hiển thị thông báo nếu user sai hoặc không điền form.

JavaScript else...if Statement

Câu lệnh else...if JavaScript đánh giá một trong nhiều điều kiện true. Mỗi if...else statement đánh giá điều kiện mới. Nếu không điều kiện nào thỏa, không có gì xảy ra.

Cú pháp dùng nhiều else...if:

if (condition one) {
  // Code chạy nếu condition one true
} else if (condition two) {
  // Code chạy nếu condition two true
} else {
  // Code chạy nếu tất cả điều kiện trên false
}

Chương trình chạy tất cả statements theo thứ tự – bắt đầu condition one – và nếu không statement nào true, code trong block else chạy.

Ta chỉ định một else...if statement. Có thể dùng bao nhiêu else...if tùy ý với if statement. Trong mỗi statement chỉ định code chạy nếu điều kiện cụ thể thỏa mãn.

Ví dụ else...if JavaScript

Dùng ví dụ minh họa else...if conditional expression. Giả sử rạp chiếu phim muốn giá vé khác nhau tùy tuổi. Giá vé:

  • 10 tuổi trở xuống: $5.
  • 11-17 tuổi: $8.
  • 18-64 tuổi: $12.
  • 65+ tuổi: $8.

Chương trình kiểm tra tuổi khách và trả về giá vé:

var age = 27;
var ticketPrice = 0;
if (age <= 10) {
  var ticketPrice = 5;
} else if (age >= 11 && age <= 17) {
  var ticketPrice = 8;
} else if (age >= 18 && age <= 64) {
  var ticketPrice = 12;
} else {
  var ticketPrice = 8;
}
console.log(ticketPrice);

Code trả về: 12.

Kiểm tra tuổi user <= 10. Sau đó kiểm tra 11-17. Tiếp 18-64. Vì user 27 tuổi, code block đó chạy. Giá vé thành $12.

Kết luận

Câu lệnh JavaScript if else cho phép xác định code nào nên chạy tùy yếu tố thỏa mãn. Mọi ngôn ngữ dùng câu lệnh điều kiện để cung cấp logic cho code.

Trong hướng dẫn, ta thảo luận cách dùng if, if else, và else...if trong JavaScript. Bây giờ bạn sẵn sàng dùng toán tử điều kiện như pro!

Nếu tìm tài nguyên học thêm và hướng dẫn khóa JavaScript top, đọc How to Learn JavaScript guide.