Cách sử dụng vòng lặp for trong JavaScript

1) Vòng lặp là gì?

- Trong JavaScript, vòng lặp là một loại cú pháp giúp ta lặp lại việc thực thi một đoạn mã nhiều lần.

- Ví dụ, nếu tôi muốn hiển thị lên màn hình 1000 dòng chữ "Lập Trình Web" thì đáng ra phải gõ 1000 câu lệnh document.write("<p>Lập Trình Web</p>"). Tuy nhiên, với việc sử dụng vòng lặp thì chỉ cần đến ba câu lệnh như bên dưới là đủ.

- Qua ví dụ trên, ta thấy "vòng lặp" giúp ta tiết kiệm được rất nhiều thời gian trong việc viết những đoạn mã cần thực thi nhiều lần liên tiếp.

- Trong JavaScript, vòng lặp được chia làm bốn loại:

• (1) Vòng lặp for
• (2) Vòng lặp for in
• (3) Vòng lặp while
• (4) Vòng lặp do while

- Ở bài hướng dẫn này, bạn sẽ được tìm hiểu về hai loại vòng lặp là for và for in

2) Cách sử dụng vòng lặp for trong JavaScript

- Vòng lặp for dùng để lặp lại việc thực thi một đoạn mã nào đó một số lần.

2.1) Cú pháp

- Trong đó:

• Biểu thức 1 thường là một câu lệnh khai báo biến
(biến này được dùng để tham gia vào biểu thức 2)
• Biểu thức 2 là một biểu thức điều kiện
(nếu điều kiện đúng thì đoạn mã sẽ được thực thi, nếu điều kiện sai thì vòng lặp kết thúc)
• Biểu thức 3 thường là một biểu thức làm thay đổi giá trị của biến được khai báo trong biểu thức 1
(mục đích là để cho biểu thức điều kiện dần trở nên bị SAI, giúp vòng lặp được kết thúc)

- Dưới đây là sơ đồ minh họa cho nguyên lý hoạt động của vòng lặp for:

2.2) Ví dụ thứ nhất

- Sử dụng vòng lặp for để hiển thị ba câu "Lập Trình Web" lên màn hình.

- Dưới đây là phần mô tả các bước thực thi của vòng lặp trên:

• Lần thứ nhất
• Khai báo biến i với giá trị là 1.
• Kiểm tra xem điều kiện i 1 có đúng hay không.
(Kết quả là SAI vì 1 không lớn hơn 1)
==> VÒNG LẶP KẾT THÚC

2.5) Một số điều cần lưu ý

<script>

    var number = 1;

    for(i = 0; i < 10; i++){
        for(j = 0; j < 5; j++){
            document.write(number + " ");
            number++;
        }
    }

</script>

<script>
    for(i = 1; i < 4; i++){
        var text = "";
        for(j = 1; j < 10; j++){
            text = text + j + " ";
        }
        document.write(text + "<br>");
    }
</script>

<style>
    .square{
        height:20px;
        awidth:20px;
        float:left;
        border:1px solid gray;
        margin-left:5px;
        margin-bottom:5px;
    }
</style>

<script>
    for(var i = 0; i < 5; i++){
        for(var j = 0; j < 10; j++){
            document.write("<div class='square'></div>");
        }
        document.write("<div style='clear:both'></div>");
    }
</script>

<script>
    var number = 1;
    for(var i = 1; i <= 10;i++){
        document.write(number + "<hr>");
        number++;
        if(number==5){
            break;
        }
    }
</script>

<script>
    for(var i = 1; i <= 10;i++){
        if(i==2 || i==5 || i==9){
            continue;
        }
        document.write(i + "<br>");
    }
</script>

<script>
    var mobile = ["HTC","Nokia","SamSung","LG","Apple","Lenovo"];
    for(var i = 0; i < mobile.length; i++){
        document.write(mobile[i] + "<br>");
    }
</script>

<script>

    var SinhVien = {
        name:"Nguyễn Thành Nhân",
        year:1993,
        gender:"Nam",
        hometown:"Cần Thơ"
    }

    for(x in SinhVien){
        document.write(SinhVien[x]);
        document.write("<hr>");
    }

</script>