Hướng dẫn dùng y-100 JavaScript

Vòng lặp for trong Javascript In ra các số từ 1 - 100

DEMO

Nội dung chính

  • Vòng lặp for trong Javascript In ra các số từ 1 - 100
  • Cùng chuyên mục:
  • Sử dụng vòng lặp while
  • Sử dụng vòng lặp do while
  • Cùng chuyên mục:
  • 1) Vòng lặp là gì?
  • 2) Cách sử dụng vòng lặp for trong JavaScript
  • 2.1) Cú pháp
  • 2.2) Ví dụ thứ nhất
  • 2.3) Ví dụ thứ hai
  • 2.4) Ví dụ thứ ba
  • 2.5) Một số điều cần lưu ý
  • 2.6) Vòng lặp for lồng nhau
  • 2.7) Lệnh break
  • 2.8) Lệnh continue
  • 2.9) Lặp qua một lần các phần tử của mảng
  • 3) Cách sử dụng vòng lặp for in trong JavaScript

Hãy sử dụng vòng lặp for trong Javascript để in ra các số từ 1 đến 100, sử dụng lệnh document.write để in và thêm dấu gạch hàng - để tách biệt các số cho dễ nhìn.

Hướng dẫn dùng y-100 JavaScript

Bài giải

-------------------- ######## --------------------

Bài này quá đơn giản vì trong video lý thuyết mình đã giải rồi, tuy nhiên mình sẽ giải thêm một lần nữa cho các bạn không xem video cũng có thể học được.

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Chúng ta sẽ sử dụng vòng lặp for với điểm bắt đầu là 1 và điều kiện lặp là phải bé hơn hoặc bằng 100, bước nhảy là 1.

for (var i = 1; i <= 100; i++)

Trong đó:

Bài viết này được đăng tại [free tuts .net]

  • var i = 1 là điểm bắt đầu
  • i <= 100 là điều kiện lặp
  • i++ là bước nhảy

Và đây là bài giải full.

for (var i = 1; i <= 100; i++){
    document.write(i + ' - ');
}

Quá nhanh quá nguy hiểm :)

Một số bài tập vòng lặp for trong JS

  • Vòng lặp for trong Javascript In ra các số từ 1 - 100
  • Vòng lặp for trong Javascript In ra các số từ 100 - 0
  • Vòng lặp for trong Javascript In các số chia hết cho 3 từ 0 - 100

Cùng chuyên mục:

Hãy sử dụng vòng lặp while và vòng lặp do while trong Javascript để in ra các số từ 1 đến 100. Lưu ý là trình bày bài giải ở cả hai vòng lặp while và do while nhé, giải thích kỹ càng tốt.

Bài giải

-------------------- ######## --------------------

Bài này mình đã giải ở bài vòng lặp for rồi, nhưng hôm nay đề bài yêu cầu sử dụng vòng lặp while và do while nên mình xin phép được giải lại nhé.

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Sử dụng vòng lặp while

Đầu tiên ta khai báo một biến var i = 1, sau đó lặp với điều kiện lặp là i <= 100, sau đó ở mỗi lần lặp ta in giá trị của i ra là được. Đừng quên là sau mỗi lần lặp ta phải tăng i lên để tránh lặp vô hạn nhé.

XEM DEMO

var i = 1;
while (i <= 100){
    document.write(i + "
"); i++; }

Sử dụng vòng lặp do while

Có một lưu ý khi sử dụng vòng lặp do while đó là nó sẽ luôn luôn lặp trước rồi mới kiểm tra điều kiện sau, vì vậy khi sử dụng vòng lặp này thì số lần lặp phải luôn luôn lớn hơn hoặc bằng 1.

Bài viết này được đăng tại [free tuts .net]

Về cách làm thì ta cũng làm tương tự như vòng lặp while.

XEM DEMO

var i = 1;
do {
    document.write(i + "
"); i++; } while (i <= 100);

Chúc các bạn học tốt nhé.

Câu hỏi thường gặp liên quan:

  • Javascript - In các số từ 1 - 100 bằng vòng lặp while và do while
  • Javascript - Chuyển bài toán từ while sang do while và ngược lại
  • Javascript - giải bài toán bằng vòng lặp for và while
  • Tóm tắt ba vòng lặp for - while và do while trong Javascript

Cùng chuyên mục:

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("

Lập Trình Web

"). 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à đủ.

for(var i=1; i<=1000; i++){
    document.write("

Lập Trình Web

"); }

Xem ví dụ

- 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à forfor 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

for(biểu thức 1; biểu thức 2; biểu thức 3){
    //Đoạn mã mà bạn muốn được thực thi nhiều lần
}

- 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:

Bắt đầu

Kiểm tra

Khai báo một biến dùng để tham gia vào biểu thức điều kiện
(Biểu thức 1)

Đoạn mã mà bạn muốn thực thi được thực thi

Thay đổi giá trị biến điều kiện
(Biểu thức 3)

ĐÚNG

SAI

Tiếp tục quay lại kiểm tra điều kiện

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.

for(var i=1; i<=3; i++){
    document.write("

Lập Trình Web

"); }

Xem ví dụ

- 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 <= 3 có đúng hay không.
    • (Kết quả đúng nên đoạn mã nằm trong cặp dấu {} được thực thi)

    • Giá trị của biến i được tăng thêm một (tức bây giờ giá trị của biến i sẽ là 2)
  • Lần thứ hai
    • Kiểm tra xem điều kiện i <= 3 có đúng hay không.
    • (Kết quả đúng nên đoạn mã nằm trong cặp dấu {} được thực thi)

    • Giá trị của biến i được tăng thêm một (tức bây giờ giá trị của biến i sẽ là 3)
  • Lần thứ ba
    • Kiểm tra xem điều kiện i <= 3 có đúng hay không.
    • (Kết quả đúng nên đoạn mã nằm trong cặp dấu {} được thực thi)

    • Giá trị của biến i được tăng thêm một (tức bây giờ giá trị của biến i sẽ là 4)
  • Lần thứ tư
    • Kiểm tra xem điều kiện i <= 3 có đúng hay không.
    • (Kết quả là SAI vì 4 không nhỏ hơn hoặc bằng 3)

      ==> VÒNG LẶP KẾT THÚC

2.3) Ví dụ thứ hai

- Sử dụng vòng lặp for để hiển thị một dãy số tăng dần từ 1 đến 10.

for(var i=0; i<10; i++){
    var j = i + 1;
    document.write("Số: " + j + "
"); }

Xem ví dụ

- 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à 0.
    • Kiểm tra xem điều kiện i < 10 có đúng hay không.
    • (Kết quả đúng nên đoạn mã nằm trong cặp dấu {} được thực thi)

    • Giá trị của biến i được tăng thêm một (tức bây giờ giá trị của biến i sẽ là 1)
  • Lần thứ hai
    • Kiểm tra xem điều kiện i < 10 có đúng hay không.
    • (Kết quả đúng nên đoạn mã nằm trong cặp dấu {} được thực thi)

    • Giá trị của biến i được tăng thêm một (tức bây giờ giá trị của biến i sẽ là 2)
  • ....
  • ....
  • ....
  • ....
  • ....
  • ....
  • ....
  • Lần thứ mười
    • Kiểm tra xem điều kiện i < 10 có đúng hay không.
    • (Kết quả đúng nên đoạn mã nằm trong cặp dấu {} được thực thi)

    • Giá trị của biến i được tăng thêm một (tức bây giờ giá trị của biến i sẽ là 10)
  • Lần thứ mười một
    • Kiểm tra xem điều kiện i < 10 có đúng hay không.
    • (Kết quả là SAI vì 10 không nhỏ hơn 10)

      ==> VÒNG LẶP KẾT THÚC

2.4) Ví dụ thứ ba

- Sử dụng vòng lặp for để hiển thị một dãy số giảm dần từ 9 xuống 2.

for(var i=9; i>1; i--){
    document.write("Số: " + i + "
"); }

Xem ví dụ

- 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à 9.
    • Kiểm tra xem điều kiện i > 1 có đúng hay không.
    • (Kết quả đúng nên đoạn mã nằm trong cặp dấu {} được thực thi)

    • Giá trị của biến i bị giảm đi một (tức bây giờ giá trị của biến i sẽ là 8)
  • Lần thứ hai
    • Kiểm tra xem điều kiện i > 1 có đúng hay không.
    • (Kết quả đúng nên đoạn mã nằm trong cặp dấu {} được thực thi)

    • Giá trị của biến i bị giảm đi một (tức bây giờ giá trị của biến i sẽ là 7)
  • ....
  • ....
  • ....
  • ....
  • ....
  • Lần thứ tám
    • Kiểm tra xem điều kiện i > 1 có đúng hay không.
    • (Kết quả đúng nên đoạn mã nằm trong cặp dấu {} được thực thi)

    • Giá trị của biến i bị giảm đi một (tức bây giờ giá trị của biến i sẽ là 1)
  • Lần thứ chín
    • 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 ý

LƯU Ý THỨ NHẤT

- Trong biểu thức 1 của ví dụ thứ nhất, biến i được khai báo với giá trị là 1 nhưng còn ở ví dụ thứ hai thì biến i được khai báo với giá trị là 0.

- Trong biểu thức 2 của ví dụ thứ nhất, biểu thức điều kiện ta dùng phép so sánh <= nhưng còn ở ví dụ thứ hai thì ta dùng phép so sánh <

- Trong biểu thức 3 của ví dụ thứ nhất và thứ hai thì ta tăng giá trị của biến thêm một, còn ở ví dụ thứ ba thì ta giảm giá trị của biến đi một.

==> Bạn đừng gò bó vào khuôn khổ việc biến được khai báo là mấy, biểu thức điều kiện là gì, ....

==> Cái mà bạn cần quan tâm chính là thiết kế ra một mô hình giúp cho vòng lặp có thể hoạt động đúng theo số lần mong muốn.

- Ví dụ, năm đoạn mã bên dưới có cách viết khác nhau, tuy nhiên chúng có cùng một chức năng là hiển thị bảy câu "Lập Trình Web" lên màn hình

for(var i = 0; i < 7; i++){
    document.write("

Lập Trình Web

"); }
for(var i = 1; i <= 7; i++){
    document.write("

Lập Trình Web

"); }
for(var i = 5; i < 12; i++){
    document.write("

Lập Trình Web

"); }
for(var i = 9; i > 2; i--){
    document.write("

Lập Trình Web

"); }
for(var i = 0; i < 13; i = i + 2){
    document.write("

Lập Trình Web

"); }

LƯU Ý THỨ HAI

- Biểu thức 1 thường là câu lệnh khai báo biến để tham gia vào biểu thức điều kiện.

- Tuy nhiên, nếu biến dùng để tham gia vào biểu thức điều kiện đã được khai báo và gán giá trị trước đó rồi thì biểu thức 1 ta có thể bỏ trống.

- Ví dụ:

var i = 0;
for(; i < 7; i++){
    document.write("

Lập Trình Web

"); }

- Còn nếu biến dùng để tham gia vào biểu thức điều kiện đã được khai báo trước đó nhưng chưa được gán giá trị thì trong biểu thức 1 ta chỉ cần gán giá trị cho biến (không cần dùng đến từ khóa var)

- Ví dụ:

var i;
for(i = 0; i < 7; i++){
    document.write("

Lập Trình Web

"); }

LƯU Ý THỨ BA

- Biểu thức 3 trong vòng lặp for rất quan trọng, nó khiến điều kiện của vòng lặp dần dần trở thành bị SAI để giúp cho vòng lặp được kết thúc (Nếu một vòng lặp mà điều kiện luôn luôn đúng thì vòng lặp đó sẽ không bao giờ kết thúc và dẫn đến trường hợp chương trình bị lỗi)

- Tuy nhiên, nếu trong đoạn mã được thực thi có chứa câu lệnh làm thay đổi giá trị của biến điều kiện thì biểu thức 3 ta có thể bỏ trống.

- Ví dụ:

for(var i = 0; i < 7;){
    document.write("

Lập Trình Web

"); i++; }

LƯU Ý THỨ TƯ

- Trong phần LƯU Ý THỨ HAI & LƯU Ý THỨ BA tôi đã giới thiệu về trường hợp mà biểu thức 1biểu thức 3 có thể bỏ trống, tuy nhiên đó là một số trường hợp đặc biệt. Về mặt viết mã lệnh tốt thì bạn không nên bỏ trống biểu thức như thế, bạn cần phải xây dựng đoạn mã như thế nào để cho cả ba biểu thức đều phải có mặt đầy đủ.

2.6) Vòng lặp for lồng nhau

- Thực chất vòng lặp for lồng nhau chỉ là cách sử dụng nâng cao của vòng lặp for thông thường để giúp cho số lần lặp được tăng theo cấp số nhân.

- Vòng lặp con được đặt vào bên trong vòng lặp cha. Khi điều kiện của vòng lặp cha đúng thì vòng lặp con sẽ được thực thi.

- Dưới đây là cú pháp cơ bản của một vòng lặp for lồng nhau:

for(biểu thức 1; biểu thức 2; biểu thức 3){
    for(biểu thức 1; biểu thức 2; biểu thức 3){
        //Đoạn mã mà bạn muốn được thực thi nhiều lần
    }
}

- Lưu ý: Bên trong vòng lặp cha, ngoài vòng lặp con thì nó còn có thể chứa thêm các mã lệnh khác.

- Hiển thị dãy số từ 1 đến 50 (bằng cách sử dụng vòng lặp for lồng nhau)


Xem ví dụ

- Hiển thị ba dòng dãy số 1 2 3 4 5 6 7 8 9


Xem ví dụ

- Hiển thị một ma trận ô vuông giống hình bên dưới:




Xem ví dụ

2.7) Lệnh break

- Lệnh break thường được đặt vào bên trong vòng lặp for.

- Khi lệnh break được thực thi, vòng lặp sẽ kết thúc mặc cho điều kiện của vòng lặp có còn đúng hay không.

- Lặp lại 10 lần việc hiển thị giá trị của biến number.

- Sau mỗi lần hiển thị cho giá trị của biến number tăng thêm một.

- Tuy nhiên, đến khi giá trị của biến number được tăng lên thành 5 thì kết thúc vòng lặp.


Xem ví dụ

2.8) Lệnh continue

- Lệnh continue thường được đặt vào bên trong vòng lặp for.

- Khi lệnh continue được thực thi, những câu lệnh còn lại của lần lặp hiện tại sẽ bị bỏ qua.

- Hiển thị dãy số từ một đến mười (ngoại trừ các số 2, 5, 9)


Xem ví dụ

2.9) Lặp qua một lần các phần tử của mảng

- Ta có thể sử dụng vòng lặp for để lặp qua một lần các phần tử trong mảng.


Xem ví dụ

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

- Vòng lặp for in dùng để lặp qua một lần các thuộc tính của một đối tượng.


Xem ví dụ