TÌM KHÓA HỌC TẠO COMBO HỌC PHP HÀ NỘI TIN KHUYẾN MÃI

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

Đăng bởi: TheHalfHeart - Vào ngày: - View: 7000

Tiếp tục làm bài tập Javascript nào. Trong bài này chúng ta làm một số bài tập liên quan đến vòng lặp while nhằm giúp các bạn ôn tập lại kiến thức. Và như thường lệ trong bài này vẫn sử dụng kiến thức ở phần lý thuyết học Javascript toàn tập nên nếu bạn thấy không hiểu bài thì hãy đọc serie đó đi nhé.

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. Vì vậy chúng ta chỉ làm các bài tập đơn giản thôi nhé.

1. Các bài tập vòng lặp while trong Javascript

Trước khi vào bài thì mình có một lưu ý như sau, khi giải các bài tập thì bạn có thể tự mình thay thế cách giải bằng cách sử dụng vòng lặp do while hoặc một vòng lặp khác để nâng cao kỹ năng coding.

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.

Bài giải: XEM DEMO

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/>");
}

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.

Bài giải: XEM DEMO

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.

Bài giải: XEM DEMO

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));

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)

Bài giải: XEM DEMO

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++;
    }
}

2. Lời kết

Điểm mạnh của Javascript là có các đối tượng DOM, BOM nên những kiến thức lập trình căn bản này chắc hẳn bạn đã học ở một ngôn ngữ lập trình khác rồi, vì vậy để không mất thời gian thì mình sẽ ngưng bài này tại đây và dành thời gian để viết những ví dụ và bài tập Javascript thực tế hơn.

Khóa học đang giảm giá:

Nguồn: freetuts.net