Bài tập vòng lặp while trong javascript

(6)
102 lượt xem
Share

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.

Mục lục nội dung

Bài tập vòng lặp while trong javascript

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. 

(6)
102 lượt xem
Share
Ngày:06/11/2020 Chia sẻ bởi:Hoang Oanh Nguyen
TẢI VỀ XEM ONLINE

CÓ THỂ BẠN QUAN TÂM