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