Hướng dẫn dùng stwich JavaScript

Bạn có thể sử dụng nhiều lệnh if…else…if như trong bài trước để thực hiện một nhánh nhiều lựa chọn. Tuy nhiên, nó luôn luôn không phải là giải pháp tốt nhất, đặc biệt khi tất các các nhánh phụ thuộc vào giá trị của một biến đơn.

Nội dung chính Show

1. Lệnh switch case trong Javascript
2. Ví dụ lệnh switch case trong Javascript
Trường hợp không có default
Trường hợp không có break
Trường hợp gom nhóm case

Bắt đầu với JavaScript bạn có thể sử dụng một lệnh switch để xử lý chính xác tình huống này, và nó thực sự hiệu quả hơn so với việc lặp đi lặp lại các lệnh if…else if.

Sơ đồ thực hiện

Sơ đồ sau giải thích lệnh switch-case làm việc:

Cú pháp

Mục tiêu của một lệnh switch là cung cấp một biểu thức để ước lượng và một số lệnh khác nhau để thực thi trên cơ sở giá trị của biểu thức. Bộ thông dịch kiểm tra mỗi case – trường hợp với giá trị của biểu thức tới khi tìm thấy một sự so khớp. Nếu không có so khớp nào, một điều kiện default – mặc định sẽ được sử dụng.

switch (expression) { case condition 1: statement(s) break; case condition 2: statement(s) break; ... case condition n: statement(s) break; default: statement(s) }

Lệnh break chỉ dẫn phần cuối của mỗi trường hợp cụ thể. Nếu chúng bị bỏ quên, bộ thông dịch sẽ tiếp tục thực thi mỗi lệnh trong mỗi trường hợp sau.

Chúng ta sẽ bàn luận về lệnh break trong chương Điều khiển vòng lặp.

Ví dụ

Thử ví dụ sau để thực thi lệnh switch-case

<html> <body> <script type="text/javascript"> <!-- var grade='A'; document.write("Entering switch block<br />"); switch (grade) { case 'A': document.write("Good job<br />"); break; case 'B': document.write("Pretty good<br />"); break; case 'C': document.write("Passed<br />"); break; case 'D': document.write("Not so good<br />"); break; case 'F': document.write("Failed<br />"); break; default: document.write("Unknown grade<br />") } document.write("Exiting switch block"); //--> </script> <p>Set the variable to different value and then try...</p> </body> </html>

Kết quả:

Entering switch block
Good job
Exiting switch block
Set the variable to different value and then try...

Các lệnh break đóng một vai trò quan trọng trong các lệnh switch-case. Bạn thử đoạn code sau sử dụng lệnh switch-case mà không có bất kỳ lệnh break nào.

Trong bài này chúng ta sẽ tìm hiểu lệnh switch case trong Javascript, đây cũng là một lệnh dùng để rẻ nhánh như lệnh if else.

Nội dung chính Show

1. Lệnh switch case trong Javascript
2. Ví dụ lệnh switch case trong Javascript
Trường hợp không có default
Trường hợp không có break
Trường hợp gom nhóm case
3. Lời kết

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

Lẽ ra bài này mình viết ngay từ đầu nhưng do việc học Javascript có sử dụng nhiều đối tượng riêng của nó nên mình giới thiệu các đối tượng đó trước. Chúng ta đã được học câu kiểm tra điều kiện if else rồi, tuy nhiên vẫn còn một cách khác có chức năng tương tự đó là câu lệnh

var number = parseInt(prompt("Nhập số cần kiểm tra"));

var mod = (number % 2);

switch (mod)
{
    case 0 : {
        document.write(number + " là số chẵn");
        break;
    }
    case 1: {
        document.write(number + " là số lẽ");
        break;
    }
    default : {
        document.write("Ký tự bạn nhập không phải số");
    }
}

1. Lệnh switch case trong Javascript

Lênh

var number = parseInt(prompt("Nhập số cần kiểm tra"));

var mod = (number % 2);

switch (mod)
{
    case 0 : {
        document.write(number + " là số chẵn");
        break;
    }
    case 1: {
        document.write(number + " là số lẽ");
        break;
    }
    default : {
        document.write("Ký tự bạn nhập không phải số");
    }
}

0 có công dụng giống như lệnh if else đó là đều dùng để rẻ nhánh chương trình, ứng với mỗi nhánh sẽ có một điều kiện cụ thể và điều kiện đó phải sử dụng toán tử so sánh bằng, còn đối với lệnh if else thì bạn có thể truyền vào một mệnh đề bất kì và sử dụng nhiều toán tử khác nhau.

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

Cú pháp

switch (variable)
{
    case value_1 : {
        // do some thing
        break;
    }
    case value_2 : {
        // do some thing
        break;
    }
    default : {
        // do something
    }
}

Nếu như trong tất cả các case không có

var number = parseInt(prompt("Nhập số cần kiểm tra"));

var mod = (number % 2);

switch (mod)
{
    case 0 : {
        document.write(number + " là số chẵn");
        break;
    }
    case 1: {
        document.write(number + " là số lẽ");
        break;
    }
    default : {
        document.write("Ký tự bạn nhập không phải số");
    }
}

2 nào phù hợp thì nó sẽ chạy lệnh ở

var number = parseInt(prompt("Nhập số cần kiểm tra"));

var mod = (number % 2);

switch (mod)
{
    case 0 : {
        document.write(number + " là số chẵn");
        break;
    }
    case 1: {
        document.write(number + " là số lẽ");
        break;
    }
    default : {
        document.write("Ký tự bạn nhập không phải số");
    }
}

0, ngược lại nếu có case nào phù hợp thì chương trình sẽ chạy trong case đó, đồng thời lệnh

var number = parseInt(prompt("Nhập số cần kiểm tra"));

var mod = (number % 2);

switch (mod)
{
    case 0 : {
        document.write(number + " là số chẵn");
        break;
    }
    case 1: {
        document.write(number + " là số lẽ");
        break;
    }
    default : {
        document.write("Ký tự bạn nhập không phải số");
    }
}

1 sẽ giúp chương trình thoát khỏi lệnh

var number = parseInt(prompt("Nhập số cần kiểm tra"));

var mod = (number % 2);

switch (mod)
{
    case 0 : {
        document.write(number + " là số chẵn");
        break;
    }
    case 1: {
        document.write(number + " là số lẽ");
        break;
    }
    default : {
        document.write("Ký tự bạn nhập không phải số");
    }
}

2, còn nếu bạn không thêm lệnh

var number = parseInt(prompt("Nhập số cần kiểm tra"));

var mod = (number % 2);

switch (mod)
{
    case 0 : {
        document.write(number + " là số chẵn");
        break;
    }
    case 1: {
        document.write(number + " là số lẽ");
        break;
    }
    default : {
        document.write("Ký tự bạn nhập không phải số");
    }
}

1 thì chương trình sẽ tiếp tục kiểm tra và chạy tiếp ở

var number = parseInt(prompt("Nhập số cần kiểm tra"));

var mod = (number % 2);

switch (mod)
{
    case 0 : {
        document.write(number + " là số chẵn");
        break;
    }
    case 1: {
        document.write(number + " là số lẽ");
        break;
    }
    default : {
        document.write("Ký tự bạn nhập không phải số");
    }
}

2 tiếp theo.

Quy trình chạy như sau:

Nếu tham số

var number = parseInt(prompt("Nhập số cần kiểm tra"));

var mod = (number % 2);

switch (mod)
{
    case 0 : {
        document.write(number + " là số chẵn");
        break;
    }
    case 1: {
        document.write(number + " là số lẽ");
        break;
    }
    default : {
        document.write("Ký tự bạn nhập không phải số");
    }
}

5 có giá trị là

var number = parseInt(prompt("Nhập số cần kiểm tra"));

var mod = (number % 2);

switch (mod)
{
    case 0 : {
        document.write(number + " là số chẵn");
        break;
    }
    case 1: {
        document.write(number + " là số lẽ");
        break;
    }
    default : {
        document.write("Ký tự bạn nhập không phải số");
    }
}

6 thì những đoạn code nằm bên trong

var number = parseInt(prompt("Nhập số cần kiểm tra"));

var mod = (number % 2);

switch (mod)
{
    case 0 : {
        document.write(number + " là số chẵn");
        break;
    }
    case 1: {
        document.write(number + " là số lẽ");
        break;
    }
    default : {
        document.write("Ký tự bạn nhập không phải số");
    }
}

2 1 sẽ được thực hiện, ngược lại nó sẽ nhảy xuống

var number = parseInt(prompt("Nhập số cần kiểm tra"));

var mod = (number % 2);

switch (mod)
{
    case 0 : {
        document.write(number + " là số chẵn");
        break;
    }
    case 1: {
        document.write(number + " là số lẽ");
        break;
    }
    default : {
        document.write("Ký tự bạn nhập không phải số");
    }
}

2 tiếp theo.

Lúc này nếu

var number = parseInt(prompt("Nhập số cần kiểm tra"));

var mod = (number % 2);

switch (mod)
{
    case 0 : {
        document.write(number + " là số chẵn");
        break;
    }
    case 1: {
        document.write(number + " là số lẽ");
        break;
    }
    default : {
        document.write("Ký tự bạn nhập không phải số");
    }
}

5 có giá trị là

var number = parseInt(prompt("Nhập số cần kiểm tra"));

var mod = (number % 2);

if (mod == 0){
    document.write(number + " là số chẵn");
}
else if (mod == 1){
    document.write(number + " là số lẽ");
}
else{
    document.write("Ký tự bạn nhập không phải số");
}

0 thì những đoạn code trong

var number = parseInt(prompt("Nhập số cần kiểm tra"));

var mod = (number % 2);

switch (mod)
{
    case 0 : {
        document.write(number + " là số chẵn");
        break;
    }
    case 1: {
        document.write(number + " là số lẽ");
        break;
    }
    default : {
        document.write("Ký tự bạn nhập không phải số");
    }
}

2 2 sẽ được thực hiện, ngược lại nó kiểm tra tiếp xem còn

var number = parseInt(prompt("Nhập số cần kiểm tra"));

var mod = (number % 2);

switch (mod)
{
    case 0 : {
        document.write(number + " là số chẵn");
        break;
    }
    case 1: {
        document.write(number + " là số lẽ");
        break;
    }
    default : {
        document.write("Ký tự bạn nhập không phải số");
    }
}

2 nào không.

Nhận thấy không còn

var number = parseInt(prompt("Nhập số cần kiểm tra"));

var mod = (number % 2);

switch (mod)
{
    case 0 : {
        document.write(number + " là số chẵn");
        break;
    }
    case 1: {
        document.write(number + " là số lẽ");
        break;
    }
    default : {
        document.write("Ký tự bạn nhập không phải số");
    }
}

2 nào nữa nên nó sẽ kiểm tra có lệnh

var number = parseInt(prompt("Nhập số cần kiểm tra"));

var mod = (number % 2);

switch (mod)
{
    case 0 : {
        document.write(number + " là số chẵn");
        break;
    }
    case 1: {
        document.write(number + " là số lẽ");
        break;
    }
    default : {
        document.write("Ký tự bạn nhập không phải số");
    }
}

0 không? Vì có lệnh

var number = parseInt(prompt("Nhập số cần kiểm tra"));

var mod = (number % 2);

switch (mod)
{
    case 0 : {
        document.write(number + " là số chẵn");
        break;
    }
    case 1: {
        document.write(number + " là số lẽ");
        break;
    }
    default : {
        document.write("Ký tự bạn nhập không phải số");
    }
}

0 nên nó sẽ chạy đoạn code trong lệnh

var number = parseInt(prompt("Nhập số cần kiểm tra"));

var mod = (number % 2);

switch (mod)
{
    case 0 : {
        document.write(number + " là số chẵn");
        break;
    }
    case 1: {
        document.write(number + " là số lẽ");
        break;
    }
    default : {
        document.write("Ký tự bạn nhập không phải số");
    }
}

0 đó rồi thoát khỏi

var number = parseInt(prompt("Nhập số cần kiểm tra"));

var mod = (number % 2);

switch (mod)
{
    case 0 : {
        document.write(number + " là số chẵn");
        break;
    }
    case 1: {
        document.write(number + " là số lẽ");
        break;
    }
    default : {
        document.write("Ký tự bạn nhập không phải số");
    }
}

Đề bài: Viết chương trình cho người dùng nhập vào một số, kiểm tra số đó là số chẵn hay số lẻ.

Với bài toán này thì mình kết hợp lệnh prompt() để lấy thông tin từ người dùng, đồng thời kết hợp lệnh

var number = parseInt(prompt("Nhập số cần kiểm tra"));

var mod = (number % 2);

switch (mod)
{
    case 0 : {
        document.write(number + " là số chẵn");
        break;
    }
    case 1: {
        document.write(number + " là số lẽ");
        break;
    }
    default : {
        document.write("Ký tự bạn nhập không phải số");
    }
}

0 để hiển thị kết quả. Có một lưu ý bạn nên sử dụng hàm parseInt() để chuyển dữ liệu người dùng nhập sang number.

Chương trình sử dụng lệnh switch RUN

var number = parseInt(prompt("Nhập số cần kiểm tra"));

var mod = (number % 2);

switch (mod)
{
    case 0 : {
        document.write(number + " là số chẵn");
        break;
    }
    case 1: {
        document.write(number + " là số lẽ");
        break;
    }
    default : {
        document.write("Ký tự bạn nhập không phải số");
    }
}

Với ví dụ này thì bạn hoàn toàn có thể sử dụng lệnh if else để thực hiện.

Chương trình sử dụng lệnh if else RUN

var number = parseInt(prompt("Nhập số cần kiểm tra"));

var mod = (number % 2);

if (mod == 0){
    document.write(number + " là số chẵn");
}
else if (mod == 1){
    document.write(number + " là số lẽ");
}
else{
    document.write("Ký tự bạn nhập không phải số");
}

2. Ví dụ lệnh switch case trong Javascript

Đề bài: Viết chương trình cho người dùng nhập một màu, kiểm tra màu đó có phải màu đỏ (red) hay màu vàng (yellow) hay không? Nếu không phải thì thông báo cho người dùng biết nhập sai màu.

Chúng ta sẽ giải bài này bằng nhiều cách khác nhau và mỗi cách bạn sẽ học được một kinh nghiệm xử lý lệnh

var number = parseInt(prompt("Nhập số cần kiểm tra"));

var mod = (number % 2);

switch (mod)
{
    case 0 : {
        document.write(number + " là số chẵn");
        break;
    }
    case 1: {
        document.write(number + " là số lẽ");
        break;
    }
    default : {
        document.write("Ký tự bạn nhập không phải số");
    }
}

Trường hợp không có default

Trường hợp này nếu bạn nhập một màu khác với màu đỏ (red) và vàng (yellow) thì sẽ không có thông báo gì.

var number = parseInt(prompt("Nhập số cần kiểm tra"));

var mod = (number % 2);

switch (mod)
{
    case 0 : {
        document.write(number + " là số chẵn");
        break;
    }
    case 1: {
        document.write(number + " là số lẽ");
        break;
    }
    default : {
        document.write("Ký tự bạn nhập không phải số");
    }
}

Trường hợp không có break

Trường hợp này nếu bạn nhập vào màu đỏ (red) thì chương trình sẽ in ra cả lệnh ở case màu vàng (yellow) phía dưới, lý do là trong

var number = parseInt(prompt("Nhập số cần kiểm tra"));

var mod = (number % 2);

switch (mod)
{
    case 0 : {
        document.write(number + " là số chẵn");
        break;
    }
    case 1: {
        document.write(number + " là số lẽ");
        break;
    }
    default : {
        document.write("Ký tự bạn nhập không phải số");
    }
}

2 màu đỏ ta không sử dụng lệnh

var number = parseInt(prompt("Nhập số cần kiểm tra"));

var mod = (number % 2);

switch (mod)
{
    case 0 : {
        document.write(number + " là số chẵn");
        break;
    }
    case 1: {
        document.write(number + " là số lẽ");
        break;
    }
    default : {
        document.write("Ký tự bạn nhập không phải số");
    }
}

1 để thoát khỏi lệnh

var number = parseInt(prompt("Nhập số cần kiểm tra"));

var mod = (number % 2);

switch (mod)
{
    case 0 : {
        document.write(number + " là số chẵn");
        break;
    }
    case 1: {
        document.write(number + " là số lẽ");
        break;
    }
    default : {
        document.write("Ký tự bạn nhập không phải số");
    }
}

2 nên nó sẽ chạy thẳng xuống case phía dưới luôn mà không cần kiểm tra điều kiện.

var number = parseInt(prompt("Nhập số cần kiểm tra"));

var mod = (number % 2);

switch (mod)
{
    case 0 : {
        document.write(number + " là số chẵn");
        break;
    }
    case 1: {
        document.write(number + " là số lẽ");
        break;
    }
    default : {
        document.write("Ký tự bạn nhập không phải số");
    }
}

Giả sử bạn thêm một

var number = parseInt(prompt("Nhập số cần kiểm tra"));

var mod = (number % 2);

switch (mod)
{
    case 0 : {
        document.write(number + " là số chẵn");
        break;
    }
    case 1: {
        document.write(number + " là số lẽ");
        break;
    }
    default : {
        document.write("Ký tự bạn nhập không phải số");
    }
}

2 nữa cho màu xanh (blue), lúc nếu bạn nhập vào màu đỏ (red) thì kết quả chỉ in thêm lệnh màu vàng (yellow) thôi. Từ đó suy ra rằng nếu không có

var number = parseInt(prompt("Nhập số cần kiểm tra"));

var mod = (number % 2);

switch (mod)
{
    case 0 : {
        document.write(number + " là số chẵn");
        break;
    }
    case 1: {
        document.write(number + " là số lẽ");
        break;
    }
    default : {
        document.write("Ký tự bạn nhập không phải số");
    }
}

1 thì nó chỉ chạy luôn

var number = parseInt(prompt("Nhập số cần kiểm tra"));

var mod = (number % 2);

switch (mod)
{
    case 0 : {
        document.write(number + " là số chẵn");
        break;
    }
    case 1: {
        document.write(number + " là số lẽ");
        break;
    }
    default : {
        document.write("Ký tự bạn nhập không phải số");
    }
}

2 đầu tiên phía dưới nó.

var number = parseInt(prompt("Nhập số cần kiểm tra"));

var mod = (number % 2);

switch (mod)
{
    case 0 : {
        document.write(number + " là số chẵn");
        break;
    }
    case 1: {
        document.write(number + " là số lẽ");
        break;
    }
    default : {
        document.write("Ký tự bạn nhập không phải số");
    }
}

Trường hợp gom nhóm case

Nếu bạn để ý kỹ hơn thì thì thấy rằng nếu người dùng nhập vào màu đỏ (red), vàng (yellow) và xanh (blue) thì đều có thông báo nhập đúng. Vậy tai sao mình không gom ba trường hợp đó thành một thôi.