Trong khi viết một chương trình, bạn có thể gặp một tình huống mà bạn cần thực hiện một hành động lặp đi lặp lại. Trong những tính huống này, bạn sẽ cần viết các lệnh vòng lặp để giảm số dòng mã lệnh. JavaScript hỗ trợ tất cả vòng lặp cần thiết để giảm áp lực của chương trình.
Sử dụng vòng lặp while để thực thi các câu lệnh được lặp lại liên tục trong mã JavaScript. Chúng là các vòng lặp cơ bản thực hiện việc thực thi các câu lệnh được xác định bên dưới nó hoặc khối mã được viết bên dưới nó, quá trình thực thi diễn ra trong một vòng lặp cho đến khi biểu thức đưa ra giá trị sai. Vòng lặp while trong JavaScript được sử dụng để lặp một phần của chương trình một vài lần nếu số lần lặp không được xác định trước.
Trong bài viết này, chúng ta sẽ tìm hiểu về vòng lặp while trong lập trình bằng JavaScript với một số các ví dụ minh họa.
Sau đây là cú pháp được sử dụng cho vòng lặp while trong mã JavaScript:
While (condition) {
// Khối lệnh được lặp lại cho đến khi condition = False
}
Trong đó:
Condition (Điều kiện tiếp diễn) là điều kiện của vòng lặp. Nếu điều kiện đúng thì đoạn mã bên trong thân vòng lặp sẽ được thực thi. Nếu điều kiện sai thì vòng lặp sẽ kết thúc.
Lưu đồ thuật toán của vòng lặp While trong JavaScript:
Cách thức thực hiện của vòng lặp While:
● Một vòng lặp while sẽ đánh giá điều kiện bên trong dấu ngoặc đơn ().
● Nếu điều kiện đánh giá là true, mã bên trong vòng lặp while sẽ được thực thi.
● Điều kiện được đánh giá lại.
● Quá trình này tiếp tục cho đến khi điều kiện là false.
● Khi điều kiện đánh giá là false, vòng lặp dừng lại.
Lưu ý:
● Nếu bạn sử dụng một biến trong điều kiện, bạn phải khởi tạo nó trước vòng lặp và tăng dần nó trong vòng lặp. Nếu không vòng lặp sẽ không bao giờ kết thúc và nó khiến chương trình bị lỗi. Điều này sẽ làm sập trình duyệt của bạn.
● Nếu điều kiện luôn đúng thì vòng lặp sẽ không bao giờ kết thúc. Điều này cũng sẽ làm sập trình duyệt của bạn. Do đó, bên trong đoạn mã mà bạn muốn thực thi, bạn phải nghiên cứu thêm vào một số câu lệnh nào đó để làm cho điều kiện dần dần trở thành bị sai.
● Luôn nhớ sử dụng dấu chấm phẩy ở cuối câu lệnh sau khi xác định chúng.
Ví dụ 1: Kiểm tra mật khẩu nhập vào có đúng không ?
Trước khi bắt đầu viết chương trình JavaScript bạn cần cài đặt phần mềm Notepad ++ hoặc các phần mềm, công cụ viết code khác. Viết đoạn mã sau:
<html>
<head>
<title>Kiểm tra mật khẩu bằng Javascript </title>
<script type="text/javascript">
var pwd = 1;
while(pwd != 5) {
pwd = prompt('Nhập mật khẩu: ');
}
console.log("Mật khẩu chính xác");
</script>
</head>
<body>
</body>
</html>
Giải thích mã:
Trong chương trình trên, người dùng được yêu cầu nhập mật khẩu. Vòng lặp while sẽ được thực hiện cho tới khi người dùng nhập chính xác số 5, là giá trị để dừng vòng lặp while. Nếu người dùng nhập khác số 5 thì vòng lặp sẽ được tiếp tục thực thi.
Kết quả thực thi của chương trình kiểm tra mật khẩu trong JavaScript trên như hình ảnh dưới đây:
Ví dụ 2: Tính tổng các số dương
Trước khi bắt đầu viết chương trình JavaScript bạn cần cài đặt phần mềm Notepad ++ hoặc các phần mềm, công cụ viết code khác. Viết đoạn mã sau:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="src/style.css">
<title> </title>
</head>
<body>
<h1 id="header"></h1>
<p id="result"></p>
<script type="text/javascript">
//chương trình tìm tổng các số dương
// nếu người dùng nhập số âm hoặc số 0 thì vòng lặp kết thúc
// số âm đã nhập không được cộng vào tổng
// Biến lưu giá trị người dùng nhập vào
var n = parseInt(prompt("Nhập một số:", ""));
// Ban đầu tổng bằng 0
var tong = 0;
// In ra trình duyệt
document.write("Nhập vào một số: " + n + "<br/>");
while (n > 0) {
// cộng tất cả các số dương
tong += n;
// lấy lại đầu vào nếu nhập số dương
var n = parseInt(prompt("Nhập vào một số:", ""));
// In ra trình duyệt
document.write("Nhập vào một số: " + n + "<br/>");
}
// hiển thị tổng
document.getElementById("result").innerHTML = tong;
</script>
</body>
</html>
Giải thích mã:
Trong chương trình trên, người dùng được nhắc nhập một số.
Ở đây, hàm parseInt() được sử dụng vì hàm prompt() nhận đầu vào từ người dùng dưới dạng một chuỗi. Và khi các chuỗi số được thêm vào, nó sẽ hoạt động như một chuỗi. Ví dụ, Khi người dùng nhập vào 1, 2 và 3 thì nếu không sử dụng hàm parseInt(), kết quả thực hiện sẽ là sự kết hợp chuỗi nghĩa là: ‘1’ + '2' + '3' = '123'. Nên kết quả sẽ bị sai.
Vì vậy hàm parseInt(), được sử dụng để chuyển đổi một chuỗi số thành số.
Vòng while lặp tiếp tục cho đến khi người dùng nhập số âm hoặc số 0. Trong mỗi lần lặp lại, số do người dùng nhập vào sẽ được thêm vào biến “tong”.
Khi người dùng nhập số âm hoặc số 0, vòng lặp sẽ kết thúc. Cuối cùng, tổng số các số dương được hiển thị.
Kết quả thực thi của chương trình tính tổng các số dương trong JavaScript trên như hình ảnh dưới đây:
Ví dụ 3: Tính giai thừa của một số bất kỳ
Trước khi bắt đầu viết chương trình JavaScript bạn cần cài đặt phần mềm Notepad ++ hoặc các phần mềm, công cụ viết code khác. Viết đoạn mã sau:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Tính giai thừa bằng vòng lặp While JS </title>
</head>
<body>
<div style="text-align: justify;"><p><span style="color:black; font-family:Tahoma; font-size:14pt;" >
<button onclick="Tinhgiaithua()">Tính giai thừa</button>
<p id="result"></p>
</p></span></div>
<script type="text/javascript">
function Tinhgiaithua () {
var num = prompt("Nhập vào 1 số bất kì để tính ra giai thừa của số đó");
var kq = 1;
var i = 1;
if (num === 0 || num === 1) {
return 1;
}
while(i<=num)
{
kq = kq * i;
i++;
}
document.getElementById("result").innerHTML = kq;
}
</script>
</body>
</html>
Giải thích mã:
Sử dụng hàm prompt() để yêu cầu người dùng nhập vào một số bất kỳ để tính giai thừa. Trường hợp người dùng nhập vào một trong hai số là 0 hoặc 1 thì kết quả tính giai thừa là 1.
Sử dụng biến đếm i (ban đầu gán là 1) để kiểm tra điều kiện trong vòng lặp While xem còn nhỏ hơn hoặc bằng so với số nhập num hay không ? Chừng nào điều kiện còn thỏa mãn còn tiếp tục thực hiện tính giai thừa theo công thức kq=kq*i theo đó sau mỗi lần lặp biến đếm i lại tăng thêm 1 đơn vị.
In kết quả tính giai thừa khi kết thúc vòng lặp.
Kết quả thực thi của chương trình Tính giai thừa của 10 số tự nhiên đầu tiên trong JavaScript như hình ảnh dưới đây:
