Một viên ngọc, viên ngọc tuyệt đẹp!

Nhưng bạn biết đấy, thứ còn tuyệt vời hơn một viên ngọc là cả một hàng ngọc!

Và dĩ nhiên, ta đã biết rằng cách tạo hàng ngọc hiệu quả nhất là sử dụng vòng lặp.

Vậy ta cùng sử dụng một vòng lặp for để vẽ 12 viên ngọc.

Đi từ trái sang phải màn hình.

Như thế đó. Ta có

for (var i = 0; i < 12; i++)

Sau đó ta sẽ lấy dòng này và chuyển vào trong đây.

Như vậy ta đã có 12 viên ngọc nhưng chúng lại đang chồng chéo lên nhau.

Hãy nhớ rằng ta đang muốn chúng trải ngang màn hình.

Điều đó có nghĩa là ta cần phải thay đổi x.

Và, hiện tại X = 36, nhưng mỗi lần lặp ta lại cần một giá trị khác.

Vậy tức là biến sẽ phải phụ thuộc vào i.

Ta chỉ cần nói rằng; i*36.

Như vậy viên ngọc đầu tiên nằm tại điểm 0, tiếp theo là 36, rồi 72, và v.v.

Tuyệt vời! Vậy là ta đã có một hàng ngọc.

Tự nhiên làm tôi nhớ đến cảnh trong phim Indiana Jones với Aladdin.

Nam chính phát hiện ra một kho báu dưới lòng đất chứa đầy đá quý

nhưng thường họ tìm được gấp mấy lần chỗ ngọc này.

Không phải một hàng ngọc mà cả đống ngọc luôn!

Vậy làm cách nào để chỗ ngọc này

trải dọc theo màn hình nữa?

Ta có thể bắt đầu bằng cách lặp lại vòng lặp for này, sao chép dán lại

rồi thay đổi y cho mỗi lần lặp.

Như vậy ta sẽ tăng lên 60 và sau đó là 90.

Vậy là ta đã có 3 hàng ngọc rồi, tuyệt vời.

Umm... nhưng tôi bắt đầu thấy chán rồi vì tất cả những gì tôi làm

chỉ là sao chép và dán và thay đổi có xíu xíu.

Thông thường trước đây khi nhận thấy cần phải viết những đoạn mã lặp đi lặp lại

tôi sẽ kiểu: “À chắc mình nên dùng vòng lặp thì hơn.”

Nhưng chúng ta đã đang sử dụng vòng lặp rồi.

Vậy làm thế nào để tránh được sao chép đi dán lại như vậy?

Cái đó chúng tôi hay gọi là “vòng lặp for lồng” – vòng lặp trong vòng lặp.

Ta sẽ tạo một vòng lặp ngoài trước.

Và vòng lặp đó sẽ đảm nhiệm việc trải ngọc dọc theo màn hình,

sau đó vòng lặp trong sẽ tiếp tục mang trọng trách hiện tại,

đó là trải ngọc theo chiều ngang màn hình.

Để tôi cho các bạn xem nhé.

Ta nhập for – lần này ta sẽ sử dụng một biến khác, gọi là j, vì ta đã sử dụng i rồi.

Vậy là for (var j = 0; j < 13; j++)

Được rồi, đó sẽ là vòng lặp ngoài của chúng ta, chịu trách nhiệm trải ngọc dọc màn hình.

Sau đó ta sẽ lấy một trong những vòng lặp for đã tạo từ trước và đưa vào bên trong,

chỉnh sửa bản sao, và xóa những vòng lặp cũ. Được rồi.

Hiện tại ta đã có một đống ngọc chồng hết lên nhau trong cùng một hàng.

Vấn đề là ta cần phải thay đổi y phải không?

Đó là biến mà ta đã thay đổi khi sao chép và dán,

hiện tại Y cố định là 90.

Ta muốn thay đổi y cho từng hàng.

Giống như x phụ thuộc vào i, ta cho y phụ thuộc vào j.

Ta có thể thay đổi thành, ví dụ như, j*30.

Tada! Nhiều ngọc quá! Được rồi đó!

Ta cùng quan sát lại một lượt nhé.

Vòng lặp ngoài tạo biến j và gia tăng biến tới 13.

Và, trong mỗi lần chạy vòng lặp ngoài, vòng lặp trong cũng sẽ chạy.

Vòng lặp trong tạo biến i được gia tăng lên tới 12.

Với mỗi lần chạy vòng lặp trong, ta sẽ có một hình ảnh có tọa độ x và y dựa trên “i” và “j”.

Và vì thế “i” thay đổi thường xuyên hơn “j”.

Để hiểu kỹ lưỡng hơn nữa, ta cùng thử hình dung các giá trị của “i” và “j”.

Tôi sẽ chú thích vào ảnh này

rồi thiết lập tô màu,

tôi sẽ sử dụng lệnh văn bản để thể hiện giá trị của “j” – ta nhập text j

rồi đặt vào vị trí thích hợp tại đây. Được rồi.

Ta có thể thấy “j” tăng từ 0 đến 12.

Về cơ bản đây cũng chính là vị trí của hàng ngọc.

Bây giờ ta sẽ hình dung”i” và xem nó thay đổi như thế nào nhé.

Đối với “i”, ta sẽ tô một màu khác.

Rồi ta sẽ đặt “i” ở đâu đó.

Và ta sẽ thay đổi x để hiển thị ngang màn hình.

Ta cũng thực hiện tương tự đối với y.

Ta có thể thấy rằng “i” đang tăng từ 0 đến 11.

Và “i”, như tôi đã nói, thay đổi thường xuyên hơn rất nhiều.

Dòng mã này sẽ được chạy nhiều lần hơn so với dòng mã này.

Vì dòng mã này được thực hiện với mỗi lần chạy vòng lặp for trong.

Trong khi dòng mã này chỉ được thực hiện khi chạy vòng lặp ngoài.

Hy vọng việc hình dung giá trị “i” và “j” này

có thể giúp các bạn hiểu hơn về vòng lặp for lồng.

Giờ hãy quay lại với số ngọc của chúng ta, vì trông chúng đẹp hơn rất nhiều!

Như vậy ta có thể thực hiện rất nhiều thứ với vòng lặp for lồng

nếu ta coi mọi thứ trên thế giới này

giống như một mạng lưới 2 chiều, ví dụ bàn cờ vua, cái chăn,

những ngôi sao trên quốc kỳ Mỹ, những hình nền và hoa văn hay ho.

Muốn kích thích trí tưởng tượng, trước hết hãy cứ nghịch chỗ mã này đã,

thay đổi hình ảnh chẳng hạn.

Tôi sẽ đổi nó thành hình trái tim!

Để cho các bạn thấy tôi thích vòng lặp for lồng như thế nào! Aww!