Hướng dẫn hàm if trong html

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.

Hướng dẫn hàm if trong html

Hướng dẫn hàm if trong html

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.

"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 hoặc logic để đư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ệnMô 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
}

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


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
}

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


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
}


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.


Xem ví dụ