Bài tập vòng lặp while trong javascript
Vòng lặp while đóng vai trò quan trọng khi lập trình với Javascript nên việc nắm vững nó là điều bắt buộc, vì vậy eLib sẽ tổng hợp một số bài tập liên quan tới vòng lặp và giải sẵn cho các bạn tham khảo.
1. Bài 01
Tính tổng các số chẵn từ 0 tới n bằng cách sử dụng vòng lặp while trong javascript
Bài này ta sẽ sử dụng một biến index để lưu trữ số lần lặp và sau mỗi vòng lặp while sẽ tăng index lên một đơn vị, lúc này điều lặp sẽ là index <= n. Chúng ta sẽ viết tất cả code trong một hàm để có thể sử dụng nhiều lần, kết hợp với lệnh prompt() để lấy số n. Và cuối cùng để an toàn dữ liệu thì ta sẽ dùng hàm parseInt() để chuyển đổi dữ liệu người dùng nhập sang kiểu number.
<script language="javascript">
function tinh_tong(n)
{
var tong = 0;
var index = 0;
while (index <= n)
{
// Nếu số chẵn thì cộng vào
if (index % 2 == 0){
tong += index;
}
// tăng biến đếm
index++;
}
document.write("Tổng số chẵn từ 1 tới " + n + " là: " + tong + "<br/>");
}
tinh_tong(1000);
tinh_tong(2000);
tinh_tong(3000);
</script>
Kết quả:
Tổng số chẵn từ 1 tới 1000 là: 250500
Tổng số chẵn từ 1 tới 2000 là: 1001000
Tổng số chẵn từ 1 tới 3000 là: 2251500
Nếu kết hợp với hàm prompt() để lấy n từ người dùng thì bạn chỉnh lại bài giải như sau.
function tinh_tong(n)
{
var tong = 0;
var index = 0;
while (index <= n)
{
// Nếu số chẵn thì cộng vào
if (index % 2 == 0){
tong += index;
}
// tăng biến đếm
index++;
}
return tong;
}
var n = parseInt(prompt("Nhập số cần kiểm tra"));
document.write("Tổng số chẵn từ 1 tới " + n + " là: " + tinh_tong(n));
Nếu giải bài này bằng vòng lặp do while thì bạn cần lưu ý khi sử dụng vòng lặp do while thì nó luôn luôn lặp ít nhất một lần, vì vậy ta phải bắt đầu lặp từ 0 để cho lần lặp đầu tiên không có tác dụng.
<script>
function tinh_tong(n)
{
var tong = 0;
var index = 0;
do
{
// Nếu số chẵn thì cộng vào
if (index % 2 == 0){
tong += index;
}
// tăng biến đếm
index++;
}
while (index <= n);
return tong;
}
var n = parseInt(prompt("Nhập số cần kiểm tra"));
document.write("Tổng số chẵn từ 1 tới " + n + " là: " + tinh_tong(n));
</script>
2. Bài 02
Cho trước danh sách cấu trúc HTML như dưới đây. Hãy sử dụng Javascript xóa đi các thẻ div có vị trí chẵn.
HTML đề bài cho:
<body>
<div>Lẻ</div>
<div>Chẵn</div>
<div>Lẻ</div>
<div>Chẵn</div>
<div>Lẻ</div>
<div>Chẵn</div>
<div>Lẻ</div>
<div>Chẵn</div>
<div>Lẻ</div>
<div>Chẵn</div>
<div>Lẻ</div>
<button onclick="deleteElement()">Remove</button>
</body>
Bài này bạn phải sử dụng DOM Element để truy vấn Selectors lấy danh sách các thẻ div, sau đó lặp qua từng thẻ div và kiểm tra thẻ nào là thẻ chẵn và thẻ nào là thẻ lẻ, nếu là thẻ chẵn thì đưa nó vào danh sách cần xóa, sau đó lặp danh sách cần xóa và sử dụng hàm remove() để xóa. Tuy nhiên có một lưu ý hơi ngược đời là vì chúng ta lặp từ 0 cho nên những thẻ chẵn sẽ thay thế vị trí cho thẻ lẽ, vì vậy điều kiện một thẻ có phải nằm vị trí chẵn hay không là (index % 2 != 0 && index != 0)
<!DOCTYPE html>
<html>
<head>
<script>
function deleteElement()
{
// Danh sách thẻ div
var elements = document.getElementsByTagName('div');
// Mảng chứa thẻ cần xóa
var elements_remove = [];
// Lặp để lấy thẻ div cần xóa
var index = 0;
while (index < elements.length){
if (index % 2 != 0 && index != 0){
elements_remove.push(elements[index]);
}
index++;
}
// Thực hiện xóa
index = 0;
while (index < elements_remove.length){
elements_remove[index].remove();
index++;
}
}
</script>
</head>
<body>
<div>Lẻ</div>
<div>Chẵn</div>
<div>Lẻ</div>
<div>Chẵn</div>
<div>Lẻ</div>
<div>Chẵn</div>
<div>Lẻ</div>
<div>Chẵn</div>
<div>Lẻ</div>
<div>Chẵn</div>
<div>Lẻ</div>
<button onclick="deleteElement()">Remove</button>
</body>
</html>
Trên đây là một số bài tập JavaScript về vòng lặp While. Thực sự mà nói thì vòng lặp while rất ít khi sử dụng khi trong các ứng dụng web mà chủ yếu sử dụng vòng lặp for, nó chỉ thường dùng khi các bạn xây dựng Game bằng Javascript hoặc một số trường hợp không xác định được số lần lặp.
Tham khảo thêm
- docx Câu hỏi trắc nghiệm lập trình JavaScript
- doc Bài tập vòng lặp for trong Javascript
- doc Bài tập tạo hàm trong Javascript
- doc Bài tập DOM căn bản trong Javascript
- doc Bài tập javascript - Xây dựng menu dropdow
- doc Bài tập Javascript căn bản