Hướng dẫn if and javascript

Trong bài này chúng ta sẽ tìm hiểu cách dùng lệnh if else trong Javascript, đây là lệnh dùng để rẻ nhánh chương trình thành nhiều luồng khác nhau.

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Câu lệnh if trong Javascript dùng để kiểm tra một mệnh đề nào đó có đúng hay không, nếu đúng thì thực thi những câu lệnh bên trong và ngược lại nếu sai thì nó sẽ bỏ qua những câu lệnh đó. Bây giờ ta sẽ tìm hiểu chi tiết nó nhé.

1. Lệnh if trong javascript

Nội dung thực hiện của lệnh if sẽ được bao quanh bởi cặp ngoặc nhọn đóng mở {}. Cú pháp chuẩn của lệnh if như sau:

Cú pháp lênh if

if (condition){
    // statment
}

Trong đó condition là mệnh đề điều kiện và luôn luôn phải có một trong hai giá trị là true/false hoặc giá trị tương đương như:

Bài viết này được đăng tại [free tuts .net]

• NULL => False
• Rỗng => False
• Số khác 0 => TRUE
• Số 0 => FALSE

Ví dụ lệnh if RUN

var a = 12;
var b = 12;

if (a == b){
    alert('a và b bằng nhau');
}

Kết quả sẽ có thông báo popup "a và b bằng nhau".

Trường hợp nếu các câu lệnh bên trong là câu lệnh đơn ( chỉ có một lệnh) thì ta có thể bỏ cặp dấu ngoặc nhọn. Như với ví dụ trên thì ta sẽ viết lại như sau:

var a = 12;
var b = 12;

if (a == b)
    alert('a và b bằng nhau');

2. Lệnh if else trong javascript

Lệnh else sẽ được thực thi nếu lệnh if không được thực hiện, tức là điều kiện ở condition sẽ có giá trị là FALSE. Như vậy khi dùng lệnh else thì bắt buộc phải có một lệnh if đứng trước nó.

Cú pháp lệnh if else như sau

if (condition){
    // Code cho lệnh if
}
else{
    // Code cho lệnh else
}

var a = 12;
var b = 10;

if (a == b){
    alert('a và b bằng nhau');
}
else{
    alert('a và b khác nhau');
}

Trong ví dụ này thì chương trình sẽ chạy trong lệnh else vì điều kiện thực thi lệnh if không thỏa.

Bạn hãy để ý nhé, điều kiện chạy lệnh if là (a == b), mà a = 12 và b = 10 nên biểu thức (12 == 10) sẽ có giá trị là FALSE.

3. Kết hợp nhiều lệnh if else trong javascript

Ta có thể kết hợp nhiều câu lệnh if để xử lý bài toán, bằng cách thêm nhiều lệnh else if phía sau. Cú pháp của nó như sau:

Cú pháp nhiều lệnh if

if (condition1){
    // Code cho lệnh if 1
}
else if (condition2){
    // Code cho lệnh if 2
}
else{
    // Code cho lệnh else
}

Nếu khối lệnh if (condition1) thỏa và chạy thì chương trình sẽ không biên dịch những lệnh if else phía dưới. Hay nói cách khác, Javascript sẽ thoát khỏi toàn bộ khối lệnh if khi có một lệnh if nào đó được chạy.

var a = 12;

if (a > 12){
    alert('a > 12');
}
else if (a < 12){
    alert('a < 12');
}
else{
    alert('a = 12');
}

Kết quả sẽ chạy ở lệnh else cuối cùng tại vì các lệnh if bên trên không thỏa điều kiện. Bây giờ bạn thử đổi giá trị của a thành a = 10 thì câu lệnh thứ 2 else if sẽ được thực hiện.

Với bài tập này bạn cũng có thể sử dụng hai khối lệnh if như sau:

var a = 12;

// Khối 1
if (a > 12){
    alert('a > 12');
}

// Khối 2
if (a < 12){
    alert('a < 12');
}
else{
    alert('a = 12');
}

Tuy nhiên, về mặt tốc độ thì sẽ không tốt, vì Javascript sẽ biên dịch cho cả hai khối dù cho khối lệnh if ở khối 1 chạy.

4. Lệnh if else lồng nhau trong javascript

Cũng giống như các ngôn ngữ lập trình khác, ta có thể lồng các câu lệnh if lại với nhau, nghĩa là bên trong câu lệnh if sẽ chứa câu lệnh if khác.

var a = 13;
 
// Nếu a > 12
if (a > 12)
{
    // Khai báo biến b
    var b = 20;
     
    // Nếu a bằng b
    if (a == b)
    {
        alert(' a = b ');
    }
    else { // ngược lại a khác b
        alert(' a != b ');
    }
}

5. Hàm if trong HTML có không?

Đây là câu hỏi mà có một bạn đã inbox mình, và mình xin trả lời là không có hàm if trong HTML nha các bạn. Thay vào đó, nếu bạn muốn xử lý cách hiển thị HTML thì có thể sử dụng lệnh if else, hoặc sử dụng ngôn ngữ phía server như PHP, ASP, JSP.

Lời kết: Vậy là mình đã hướng dẫn xong cách sử dụng lệnh if else trong Javascript, đây là lệnh rất hay, dùng để rẻ chương trình thành nhiều nhánh khác nhau. Bài này mình dừng ở đây nhé, hẹn gặp lại các bạn ở bài tiếp theo.

Hướng dẫn cách sử dụng lệnh if và if…else trong JavaScript. Bạn sẽ học được cách sử dụng chúng để xử lý các câu lệnh điều kiện cơ bản trong JavaScript sau bài học này.

Lệnh if trong JavaScript

Lệnh if trong JavaScript bao gồm từ khóa if, một biểu thức điều kiện và một khối gồm các câu lệnh được mô tả trong khối đó. Khối lệnh trong if được đặt giữa cặp dấu ngoặc nhọn {} để biểu thị bắt đầu và kết thúc của khối. Các lệnh mô tả trong khối chỉ được xử lý khi biểu thức điều kiện được chỉ định là true (đúng).

Chúng ta sử dụng lệnh if trong JavaScript với cú pháp sau đây:

if (biểu thức điều kiện){
    câu lệnh xử lý nếu biểu thức điều kiện là true (đúng)
}

Nếu biểu thức điều kiện true (đúng), các câu lệnh mô tả trong khối sẽ được thực thi theo thứ tự. Chúng ta cũng có thể viết nhiều câu lệnh liên tiếp trong khối như sau:

if (biểu thức điều kiện):
    câu lệnh 1;
    câu lệnh 2;
    câu lệnh 3;

Nếu chỉ có 1 câu lệnh trong khối lệnh if, chúng ta cũng có thể lược bỏ cặp dấu {} và sử dụng if rút gọn trong JavaScript như sau:

if (biểu thức điều kiện)
    câu lệnh;

Hoặc là viết câu lệnh trên cùng một dòng như sau:

if (biểu thức điều kiện) câu lệnh;

Sơ đồ khối câu lệnh điều kiện trong JavaScript như sau:

Lại nữa, khi viết lệnh if trong JavaScript, mặc dù không phải là bắt buộc nhưng chúng ta nên sử dụng các dấu thụt lề đầu dòng để cấu trúc câu lệnh rõ ràng và dễ đọc hơn. Tất cả các câu lệnh mô tả trong khối nên được viết với độ thụt lề giống nhau. Thông thường, chúng ta sẽ dùng 2 hoặc 4 khoảng trắng tạo ra bởi phím cách, hoặc là một dấu tab được tạo ra khi bạn nhấn phím Tab một lần, để quy định độ thụt lề của khối.

• Bạn có thể tìm hiểu chi tiết về cách thụt lề tại bài viết Thụt lề trong JavaScript

Trong biểu thức điều kiện, chúng ta sử dụng toán tử so sánh và toán tử logic để mô tả điều kiện. Nếu kết quả của các phép so sánh hoặc logic này true, các lệnh mô tả trong khối mới được thực hiện. Bạn có thể tìm hiểu chi tiết về các loại toán tử sử dụng trong biểu thức điều kiện của câu lệnh if JavaScript tại bài viết Toán tử so sánh trong JavaScript và toán tử logic trong JavaScript.

Sau đây, chúng ta sẽ thử viết một câu lệnh if trong JavaScript đơn giản để kiểm tra tuổi của một người đã đủ 18 hay chưa.

Trước hết, chúng ta so sánh giá trị gán trong biến old với số 18 để kiểm tra kết quả biểu thức điều kiện old < 18. Và nếu kết quả này là true, lệnh thay đổi giá trị result = "Em chưa 18" trong khối mới được thực hiện.

let  old = 17;
let  result = "Trên 18 tuổi";

if (old < 18){
    result = "Em chưa 18";
}

console.log(result);  

Ở ví dụ trên, do old =17 nên biểu thức old < 18 true, dẫn đến lệnh thay đổi giá trị được thực hiện.

Giả sử chúng ta chỉ định old = 20 trong ví dụ trên, do biểu thức điều kiện old <18 khi này không còn true (đúng) nữa, do đó lệnh thay đổi giá trị result = "Em chưa 18" mô tả trong khối sẽ không được thực hiện. Kết quả, giá trị ban đầu result= "Trên 18 tuổi" không bị thay đổi và được in ra như sau:

let old = 20;
let result = "Trên 18 tuổi";

if (old < 18){
    result = "Em chưa 18";
}

console.log(result); 

Lại nữa, do trong ví dụ này chỉ có 1 lệnh duy nhất trong khối if nên chúng ta đã có thể bỏ qua cặp dấu {} như cách viết if rút gọn trong JavaScript sau:

if (old < 18) result = "Em chưa 18";

if else trong JavaScript

if else trong JavaScript được sử dụng để xử lý lệnh if khi biểu thức điều kiện được chỉ định là False (sai).
Ở phần trên chúng ta đã biết lệnh if trong JavaScript chỉ xử lý các lệnh mô tả trong khối if nếu biểu thức điều kiện là true (đúng). Trong trường hợp bạn muốn xử lý lệnh if trong JavaScript khi biểu thức điều kiện là False (sai), hãy sử dụng cấu trúc if else trong javascript như sau:

if (biểu thức điều kiện){
    câu lệnh xử lý nếu biểu thức điều kiện là true (đúng)
}else{
    câu lệnh xử lý nếu biểu thức điều kiện là False (sai)
}

Nếu chỉ có 1 câu lệnh trong khối if else thì chúng ta cũng có thể lược bỏ cặp dấu {} và sử dụng if rút gọn trong JavaScript như sau:

if (biểu thức điều kiện)
    câu lệnh xử lý nếu biểu thức điều kiện là true (đúng)
else
    câu lệnh xử lý nếu biểu thức điều kiện là False (sai)

Chúng ta thêm các lệnh sẽ được xử lý nếu biểu thức điều kiện là False vào trong khối lệnh else, và các lệnh này sẽ chỉ được chạy nếu biểu thức điều kiện là False mà thôi.

Sơ đồ khối câu lệnh if else trong JavaScript như sau:

Một ví dụ cụ thể, giả sử bạn mười bảy tuổi và bạn muốn vào một bar chơi. Khi đó, hãy viết một mã lệnh kiểm tra điều kiện tuổi được vào bar như sau:

let old = 17;

if (old < 18){
    console.log("Em chưa 18, không được vào bar");
}else{
    console.log("Trên 18, đủ tuổi vào bar");
}

Kết quả:

Em chưa 18, không được vào bar

Ở trên, do bạn 17 tuổi (old = 17), nên biểu thức điều kiện old < 18 là true, dẫn đến các lệnh trong khối lệnh if sẽ được thực hiện, do đó kết quả Em chưa 18, không được vào bar được in ra màn hình.

Trong trường hợp chỉ định lại tuổi old = 20, khi này biểu thức điều kiện lại trở thành False, do đó các lệnh trong khối lệnh else sẽ được thực hiện, nên kết quả khác sẽ in ra màn hình như sau:

let old = 20;

if (old < 18){
    console.log("Em chưa 18, không được vào bar");
}else{
    console.log("Trên 18, đủ tuổi vào bar");
}

Lại nữa, các khối lệnh if và else ở trên do chỉ có một lệnh duy nhất trong nó, do đó chúng ta cũng có thể lược bỏ đi các cặp dấu {} như cách viết if rút gọn trong JavaScript sau:

if (old < 18)  console.log("Em chưa 18, không được vào bar");
else  console.log("Trên 18, đủ tuổi vào bar");

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn về cách sử dụng câu lệnh if và if…else trong JavaScript rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của ngày hôm nay nhé.

Và hãy cùng tìm hiểu những kiến thức sâu hơn về JavaScript trong các bài học tiếp theo.

Viết bởi Kiyoshi. Đã đăng ký bản quyền tác giả tại <a title="Bạn được tự do chia sẻ bài viết nhưng phải để lại đường link bài viết từ laptrinhcanban.com. Bạn không được sử dụng tài liệu cho mục đích thương mại. Không được phép chỉnh sửa nội dung được phát hành trên website của chúng tôi" style="color:#fff;background-color:silver" rel="license noopener" target="_blank" href="https://creativecommons.org/licenses/by-nc-nd/4.0/">Creativecommons</a>&nbsp;và <a title="Bạn được tự do chia sẻ bài viết nhưng phải để lại đường link bài viết từ laptrinhcanban.com. Bạn không được sử dụng tài liệu cho mục đích thương mại. Không được phép chỉnh sửa nội dung được phát hành trên website của chúng tôi" style="color:#fff;background-color:silver" target="_blank" rel="noopener" href="https://www.dmca.com/Protection/Status.aspx?ID=1631afcd-7c4a-467d-8016-402c5073e5cd" class="dmca-badge">DMCA</a><script src="https://images.dmca.com/Badges/DMCABadgeHelper.min.js">

Bài viết liên quan

• Điều kiện và, điều kiện hoặc trong JavaScript

• Lệnh if nhiều điều kiện trong JavaScript (if...else if...else)

• If else rút gọn trong JavaScript

• switch case trong JavaScript

• Cộng trừ ngày tháng trong JavaScript

• Chuyển date thành String trong JavaScript

• Lấy ngày tháng năm trong JavaScript

• Khai báo date trong JavaScript

Profile