Lệnh Switch Trong JavaScript - Web Cơ Bản

Lệnh Switch trong JavaScript

1) Khái niệm lệnh "switch case" trong JavaScript

- Lệnh switch case dùng để xác định một danh sách các trường hợp và trong mỗi trường hợp sẽ có một đoạn mã, khi giá trị của bạn trùng khớp với trường hợp nào thì đoạn mã của trường hợp đó sẽ được thực thi.

- Để giúp các bạn dễ hình dung hơn về khái niệm trên thì tôi có một ví dụ minh họa như sau:

- Giả sử khi đến một quán nước, ở đó có một cái menu giống như bên dưới và trong tay bạn chỉ có đúng mười nghìn.

MENU Cà phê sữa 12.000đ ............................................ Cà phê đá 10.000đ ............................................ Sting dâu 8.000đ ............................................ Trà đá 2.000đ ............................................

- Câu hỏi: Nếu yêu cầu bạn chọn một món nước uống có giá bằng đúng với số tiền mà bạn đang có, thì món nước uống đó là món gì !?

- Trả lời: Cà phê đá.

- Phía trên là một ví dụ mô tả gần giống với lệnh switch case, trong đó:

• Số tiền mà bạn đang có chính là giá trị (tạm gọi như vậy)
• Giá tiền của từng loại nước uống trong menu chính là trường hợp
• Món nước uống chính là đoạn mã được thực thi.

- Nếu ta chuyển ví dụ trên về dạng mã lệnh trong JavaScript thì nó sẽ có dạng như sau:

<script> var money = 10000; switch (money){ case 2000: document.write("Trà đá"); break; case 8000: document.write("Sting dâu"); break; case 10000: document.write("Cà phê đá"); break; case 12000: document.write("Cà phê sữa"); break; } </script> Xem ví dụ

2) Cách sử dụng lệnh "switch case" trong JavaScript

- Trong JavaScript, lệnh switch case được sử dụng với cú pháp như sau:

switch (giá trị){ case trường hợp 1: //đoạn mã này sẽ được thực thi khi giá trị trùng khớp với trường hợp 1 break; case trường hợp 2: //đoạn mã này sẽ được thực thi khi giá trị trùng khớp với trường hợp 2 break; case trường hợp 3: //đoạn mã này sẽ được thực thi khi giá trị trùng khớp với trường hợp 3 break; ... ... ... default: //đoạn mã này sẽ được thực thi khi giá trị KHÔNG trùng khớp trường hợp nào cả break; } Ví dụ 1:

Hiển thị tên của loại nước uống có giá trị bằng đúng với số tiền mà bạn đang có.

<script> var money = 10000; switch (money){ case 2000: document.write("Trà đá"); break; case 8000: document.write("Sting dâu"); break; case 10000: document.write("Cà phê đá"); break; case 12000: document.write("Cà phê sữa"); break; default: document.write("Không món nào có giá bằng đúng với số tiền của bạn"); break; } </script> Xem ví dụ Ví dụ 2:

Hôm nay là thứ mấy !?

<script> var day = new Date().getDay(); switch (day){ case 0: document.write("Chủ Nhật"); break; case 1: document.write("Thứ hai"); break; case 2: document.write("Thứ ba"); break; case 3: document.write("Thứ tư"); break; case 4: document.write("Thứ năm"); break; case 5: document.write("Thứ sáu"); break; case 6: document.write("Thứ bảy"); break; } </script> Xem ví dụ

3) Tầm quan trọng của lệnh "break"

- Trong danh sách các trường hợp của lệnh switch case, khi giá trị của bạn trùng khớp với trường hợp nào thì đoạn mã của trường hợp đó sẽ được thực, ngoài ra các đoạn mã của những trường hợp nằm bên dưới trường hợp trùng khớp cũng sẽ được thực thi luôn.

- Từ đây, lệnh break giúp ta ngăn chặn việc thực thi các đoạn mã của những trường hợp nằm bên dưới trường hợp trùng khớp.

Ví dụ, lệnh switch case không sử dụng break	Ví dụ, lệnh switch case có sử dụng break
<script> var season = "ha"; switch (season){ case "xuan": document.write("Mùa Xuân"); case "ha": document.write("Mùa Hạ"); case "thu": document.write("Mùa Thu"); case "dong": document.write("Mùa Đông"); } </script>	<script> var season = "ha"; switch (season){ case "xuan": document.write("Mùa Xuân"); break; case "ha": document.write("Mùa Hạ"); break; case "thu": document.write("Mùa Thu"); break; case "dong": document.write("Mùa Đông"); break; } </script>
Xem ví dụ	Xem ví dụ

4) Công dụng của lệnh "default"

- Lệnh default dùng để xác định một đoạn mã mặc định sẽ được thực thi khi giá trị của bạn không trùng khớp với bất kỳ trường hợp nào.

Ví dụ: <script> var season = "abc"; switch (season){ case "xuan": document.write("Mùa Xuân"); break; case "ha": document.write("gt;Mùa Hạ"); break; case "thu": document.write("Mùa Thu"); break; case "dong": document.write("Mùa Đông"); break; default: document.write("KHÔNG XÁC ĐỊNH"); break; } </script> Xem ví dụ

5) Nhóm các trường hợp lại với nhau

- Nếu trong danh sách các trường hợp của lệnh switch case có những trường hợp mà bạn muốn cùng thực thi một đoạn mã thì ta hãy nhóm các trường hợp đó lại với nhau.

Ví dụ: <script> var month = 5; switch (month){ case 1: case 2: case 3: document.write("Mùa Xuân"); break; case 4: case 5: case 6: document.write("Mùa Hạ"); break; case 7: case 8: case 9: document.write("Mùa Thu"); break; case 10: case 11: case 12: document.write("Mùa Đông"); break; } </script> Xem ví dụ

6) Lệnh "switch case lồng nhau"

- Thật ra, lệnh switch case lồng nhau chỉ là cách sử dụng nâng cao của lệnh switch case thông thường, nó giúp ta mở rộng phạm vi xét duyệt các trường hợp. Từ đó, chọn được đoạn mã thích hợp nhất để thực thi.

Ví dụ: <script> var season = "Thu"; var month = 8; switch(season){ case "Xuân": switch(month){ case 1: document.write("Mùa Xuân - Tháng 1"); break; case 2: document.write("Mùa Xuân - Tháng 2"); break; case 3: document.write("Mùa Xuân - Tháng 3"); break; default: document.write("Mùa " + season + " không có tháng" + month); break; } break; case "Hạ": switch(month){ case 4: document.write("Mùa Hạ - Tháng 4"); break; case 5: document.write("Mùa Hạ - Tháng 5"); break; case 6: document.write("Mùa Hạ - Tháng 6"); break; default: document.write("Mùa " + season + " không có tháng" + month); break; } break; case "Thu": switch(month){ case 7: document.write("Mùa Thu - Tháng 7"); break; case 8: document.write("Mùa Thu - Tháng 8"); break; case 9: document.write("Mùa Thu - Tháng 9"); break; default: document.write("Mùa " + season + " không có tháng" + month); break; } break; case "Đông": switch(month){ case 10: document.write("Mùa Đông - Tháng 10"); break; case 11: document.write("Mùa Đông - Tháng 11"); break; case 12: document.write("Mùa Đông - Tháng 12"); break; default: document.write("Mùa " + season + " không có tháng" + month); break; } break; default: document.write("KHÔNG XÁC ĐỊNH"); break; } </script> Xem ví dụ