- Các loại chú thích và câu lệnh trong JavaScript
- Biến cơ bản trong JavaScript
- Các kiểu biến dữ liệu trong JavaScript
- Cách sử dụng biến và chuỗi trong JavaScript
- Thay đổi nội dung HTML và khả năng hiển thị của JavaScript
- Toán tử trong JavaScript
- Sử dụng hàm trong JavaScript
- Tạo ứng dụng Quiz bằng JavaScript
- Tạo ứng dụng bảng tính bằng JavaScript
- Tìm hiểu về mảng và vòng lặp trong JavaScript
- Sử dụng vòng lặp While trong JavaScript
- Câu lệnh điều kiện IF trong JavaScript
Ở bài trước chúng ta đã tìm hiểu về vòng lặp for. Trong bài này mình sẽ giới thiệu với các bạn một vòng lặp khác, đó chính là vòng lặp while trong JavaScript.
Về cơ bản vòng lặp while cũng giống như vòng lăp for. Hai loại vòng lặp này khá giống nhau. Chúng cùng thực hiện một đoạn mã nhất định lặp đi lặp lại cho đến khi bạn bảo chúng dần lại. Vậy tại sao phải dùng vòng lặp while và tại sao dùng vòng lặp for, nhiều bạn cũng đang thắc mắc phải không. Hai vòng lặp này được thiết lập hơi khác nhau một chút, cú pháp của chúng cũng hơi khác nhau. Theo mình thì vòng lặp while dễ hiểu hơn, còn một số bạn có lễ sẽ thấy thích vòng lặp for hơn. Tất nhiên sẽ có những thình huống khác nhau mà bạn sẽ chỉ có thể sử dụng một trong hai vòng lặp
Điều đầu tiên chúng ta cần là tạo một biến để lưu số lần lặp thực sự của vòng lặp. Đặt biến x=1, chúng ta sẽ bắt đầu từ 1, giống như bạn thực hiện với vòng lặp for. Cú pháp đối với vòng lặp while khá là đơn giản. Từ khóa while, và sau đó trong các dấu ngoặc này bạn sẽ chỉ ra mình muốn vòng lặp chạy trong bao lâu. Bạn hãy thêm biểu thức x<10. Vòng lặp này sẽ lặp đoạn mã trong vòng lặp miễn là khi x còn nhỏ hơn 10. Lúc này chúng ta có thể tăng biến x lên, chẳng hạn 1,2,3,4,5,6,7,8,9, và 10
<html lang="vi">
<head>
<meta charset="utf-8">
<title>Vòng lặp Whie - Kênh 49</title>
</head>
<body>
<script type="text/javascript">
var x=1;
while(x<10)
{
}
</script>
</body>
</html>Mình sẽ tiếp tực thêm một số đoạn mã đơn giản vào. Gõ vào lệnh document.write, lệnh này sẽ in ra giá trị của biến đếm để có thể quan sát biến này một cách dễ dàng hơn ta thêm vào một đoạn văn bản tùy ý. Điều cơ bản là chúng ta bắt đầu từ 1 và sẽ lặp tiếp, miễn là biến x vẫn đang nhỏ hơn 10.
<html lang="vi">
<head>
<meta charset="utf-8">
<title>Vòng lặp Whie - Kênh 49</title>
</head>
<body>
<script type="text/javascript">
var x=1;
while(x<10)
{
document.write(x + "How are you");
}
</script>
</body>
</html>Khi bạn chạy chương trình có thấy điều gì xảy ra không, chúng ta bị mắc kẹt ở 1 và vòng lặp vô hạn. Để khắc phục điều này chúng ta phải tăng biến x từ từ. Hãy tăng biến x lên 1 bằng cách sử dụng toán tử x++ mà chúng ta đã học. Lưu lại và chạy thử để xem kết quả nhé.
<html lang="vi">
<head>
<meta charset="utf-8">
<title>Vòng lặp Whie - Kênh 49</title>
</head>
<body>
<script type="text/javascript">
var x=1;
while(x<10)
{
document.write(x + "How are you <br>");
x++;
}
</script>
</body>
</html>Và kết quả là các dòng được in ra 9 lần khác nhau. Chúng ta bắt đầu bằng 1 thì vòng lặp sẽ bắt đầu bằng 1, nếu chúng ta bắt đầu bằng 6 thì vòng lặp sẽ bắt đầu bằng 6.
Biến x sẽ bằng với 1 và vòng lặp chạy qua đoạn mã. Lần tiếp theo x=2 và vòng lặp chạy qua đoạn mã, và cứ lặp lại như vậy cho tới khi bằng 9. Vòng lặp sẽ vẫn chạy đoạn mã, nhưng sau đó lần tiếp theo x đã thực sự tăng lên 10. Do đó vòng lặp while sẽ kiểm tra và thấy rằng x không còn nhỏ hơn 10 nữa vì 10=10. Do đó vòng lặp sẽ không chạy đoạn mã nữa, vì chúng ta yêu cầu vòng lặp chạy đoạn mã x <10 mà thôi. Đó là lý do tại sao dòng 10 không hiện ra. Tóm lại đây là điều cơ bản của vòng lặp while trong javascript
Mình muốn nhắc lại, vòng lặp while này khá giống với vòng lặp for. Trong ví dụ này điểm khác duy nhất đó là ở việc thiết lặp biến var x=1;, biểu thức x<10 và biến x++ nữa. Toàn bộ biểu thức trong dấu ngoặc đơn và vòng lặp theo trình tự đi xuống dưới. Như vậy bạn sẽ dễ dàng hơn trong việc đọc đoạn mã. Hẹn gặp lại các bạn ở các bài tiếp theo