Câu Lệnh điều Kiện (if, Else, Elseif) Trong JavaScript - Web Cơ Bản

Câu lệnh điều kiện (if, else, elseif) trong JavaScript

"Nếu bạn học tốt môn lập trình web thì bạn sẽ có thể thiết kế được website"

- Câu trên được chia làm hai vế:

• Vế thứ nhất: "Nếu bạn học tốt môn lập trình web"
• Vế thứ hai: "Bạn sẽ có thể thiết kế được website"

- Trong cuộc sống, ta gọi vế thứ nhất là điều kiện, vế thứ hai là một điều gì đó sẽ đạt được khi thỏa điều kiện.

- Trong JavaScript cũng có một dạng cú pháp tương tự như vậy, nó kiểm tra một điều kiện và nếu điều kiện đúng thì một đoạn mã xác định sẽ được thực thi. Đó được gọi là "lệnh điều kiện" và trong JavaScript thì lệnh điều kiện được chia làm ba loại cơ bản:

• Lệnh if
• Lệnh if ... else
• Lệnh if ... else if ... else

1) Khái niệm "điều kiện" trong JavaScript

- Trong JavaScript, điều kiện là một biểu thức so sánh để đưa ra một giả thuyết.

• Nếu giả thuyết đúng, đồng nghĩa với việc điều kiện đúng và điều kiện sẽ nhận giá trị là true.
• Nếu giả thuyết sai, đồng nghĩa với việc điều kiện sai và điều kiện sẽ nhận giá trị là false.

- Ví dụ:

Điều kiện	Mô tả	Giá trị
7 > 4	Bảy lớn hơn bốn	true
7 >= 4	Bảy lớn hơn hoặc bằng bốn	true
7 < 4	Bảy nhỏ hơn bốn	false
"webcoban"=="laptrinhweb"	Chuỗi "webcoban" giống với chuỗi "laptrinhweb"	false
"webcoban"!="laptrinhweb"	Chuỗi "webcoban" khác với chuỗi "laptrinhweb"	true
(5+7) > 10	Tổng của năm và bảy lớn hơn mười	true
(5+7) < 10	Tổng của năm và bảy nhỏ hơn mười	false

2) Lệnh điều kiện if trong JavaScript

- Lệnh if dùng để kiểm tra một điều kiện, nếu điều kiện đó là đúng thì một đoạn mã xác định sẽ được thực thi.

- Cú pháp:

if(điều kiện){ //đoạn mã này sẽ được thực thi nếu điều kiện là đúng } Ví dụ:

Nếu điều kiện "giá trị của biến number lớn hơn 50" là đúng thì hiển thị ba câu:

• Tài liệu học HTML
• Tài liệu học CSS
• Tài liệu học JavaScript

<script> var number = 75; if(number > 50){ document.write("<p>Tài liệu học HTML</p>"); document.write("<p>Tài liệu học CSS</p>"); document.write("<p>Tài liệu học JavaScript</p>"); } </script> Xem ví dụ

3) Lệnh điều kiện if ... else trong JavaScript

- Lệnh if ... else dùng để kiểm tra một điều kiện, nếu điều kiện đó là đúng thì một đoạn mã xác định sẽ được thực thi, còn nếu điều kiện đó sai thì một đoạn mã xác định khác sẽ được thực thi.

- Cú pháp:

if(điều kiện){ //đoạn mã này sẽ được thực thi nếu điều kiện là đúng }else{ //đoạn mã này sẽ được thực thi nếu điều kiện là sai } Ví dụ:

Nếu điều kiện "giá trị của biến numberOne lớn hơn giá trị của biến numberTwo" là đúng thì hiển thị ba câu:

• Tài liệu học HTML
• Tài liệu học CSS
• Tài liệu học JavaScript

Còn nếu điều kiện "giá trị của biến numberOne lớn hơn giá trị của biến numberTwo" là sai thì hiển thị hai câu:

• Tài liệu học MySQL
• Tài liệu học PHP

<script> var numberOne = 15; var numberTwo = 20; if(numberOne > numberTwo){ document.write("<p>Tài liệu học HTML</p>"); document.write("<p>Tài liệu học CSS</p>"); document.write("<p>Tài liệu học JavaScript</p>"); }else{ document.write("<p>Tài liệu học MySQL</p>"); document.write("<p>Tài liệu học PHP</p>"); } </script> Xem ví dụ

4) Lệnh điều kiện if ... else if ... else trong JavaScript

- Lệnh if ... else if ... else là một dạng nâng cao của lệnh if ... else

- Lệnh if ... else if ... else dùng để mở rộng phạm vi kiểm tra các điều kiện khác nếu tất cả những điều kiện phía trên là sai.

- Cú pháp:

if(điều kiện 1){ //đoạn mã này sẽ được thực thi nếu điều kiện 1 là đúng }else if(điều kiện 2){ //đoạn mã này sẽ được thực thi nếu điều kiện 1 sai và điều kiện 2 là đúng }else{ //đoạn mã này sẽ được thực thi nếu tất cả những điều kiện trên là sai } Ví dụ: <script> var a = 15; var b = 20; if(a > b){ document.write("Giá trị biến a LỚN HƠN giá trị biến b"); }else if(a < b){ document.write("Giá trị biến a NHỎ HƠN giá trị biến b"); }else{ document.write("Giá trị biến a BẰNG giá trị biến b"); } </script> Xem ví dụ

- Lưu ý: Đối với lệnh if ... else if ... else thì không giới hạn số lượng điều kiện.

Ví dụ: <script> var day = new Date().getDay(); if(day == 0){ document.write("Hôm nay là Chủ Nhật"); }else if(day == 1){ document.write("Hôm nay là Thứ Hai"); }else if(day == 2){ document.write("Hôm nay là Thứ Ba"); }else if(day == 3){ document.write("Hôm nay là Thứ Tư"); }else if(day == 4){ document.write("Hôm nay là Thứ Năm"); }else if(day == 5){ document.write("Hôm nay là Thứ Sáu"); }else{ document.write("Hôm nay là Thứ Bảy"); } </script> Xem ví dụ