0:00:01.686,0:00:04.237
Một viên ngọc, viên ngọc tuyệt đẹp!

0:00:04.237,0:00:08.275
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!

0:00:08.275,0:00:12.562
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.

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

0:00:16.161,0:00:19.523
Đi từ trái sang phải màn hình.

0:00:19.523,0:00:22.304
Như thế đó. Ta có

0:00:22.304,0:00:31.186
for (var i = 0; i < 12; i++)

0:00:31.186,0:00:36.429
Sau đó ta sẽ lấy dòng này và chuyển vào trong đây.

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

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

0:00:43.401,0:00:45.941
Điều đó có nghĩa là ta cần phải thay đổi x.

0:00:45.941,0:00:49.524
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.

0:00:49.524,0:00:51.859
Vậy tức là biến sẽ phải phụ thuộc vào i.

0:00:51.859,0:00:56.329
Ta chỉ cần nói rằng; i*36.

0:00:56.329,0:01:02.687
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.

0:01:02.687,0:01:04.575
Tuyệt vời! Vậy là ta đã có một hàng ngọc.

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

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

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

0:01:13.732,0:01:17.306
Không phải một hàng ngọc mà cả đống ngọc luôn!

0:01:17.306,0:01:21.609
Vậy làm cách nào để chỗ ngọc này

0:01:21.609,0:01:24.806
trải dọc theo màn hình nữa?

0:01:24.806,0:01:30.639
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

0:01:30.639,0:01:34.565
rồi thay đổi y cho mỗi lần lặp.

0:01:34.565,0:01:37.688
Như vậy ta sẽ tăng lên 60 và sau đó là 90.

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

0:01:42.308,0:01:45.495
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

0:01:45.495,0:01:49.193
chỉ là sao chép và dán và thay đổi có xíu xíu.

0:01:49.193,0:01:52.859
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

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

0:01:57.025,0:01:58.607
Nhưng chúng ta đã đang sử dụng vòng lặp rồi.

0:01:58.607,0:02:03.854
Vậy làm thế nào để tránh được sao chép đi dán lại như vậy?

0:02:03.854,0:02:09.518
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.

0:02:09.518,0:02:12.132
Ta sẽ tạo một vòng lặp ngoài trước.

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

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

0:02:19.234,0:02:21.977
đó là trải ngọc theo chiều ngang màn hình.

0:02:21.977,0:02:24.006
Để tôi cho các bạn xem nhé.

0:02:24.006,0:02:29.851
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.

0:02:29.851,0:02:37.274
Vậy là for (var j = 0; j < 13; j++)

0:02:37.274,0:02:41.999
Đượ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.

0:02:41.999,0:02:48.237
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,

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

0:02:53.274,0:02:59.109
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.

0:02:59.109,0:03:01.969
Vấn đề là ta cần phải thay đổi y phải không?

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

0:03:04.309,0:03:06.108
hiện tại Y cố định là 90.

0:03:06.108,0:03:09.440
Ta muốn thay đổi y cho từng hàng.

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

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

0:03:24.663,0:03:29.934
Tada! Nhiều ngọc quá! Được rồi đó!

0:03:29.934,0:03:31.776
Ta cùng quan sát lại một lượt nhé.

0:03:31.776,0:03:38.340
Vòng lặp ngoài tạo biến j và gia tăng biến tới 13.

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

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

0:03:48.673,0:03:55.358
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”.

0:03:55.358,0:03:59.607
Và vì thế “i” thay đổi thường xuyên hơn “j”.

0:03:59.607,0:04:05.238
Để 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”.

0:04:05.238,0:04:09.277
Tôi sẽ chú thích vào ảnh này

0:04:09.277,0:04:12.027
rồi thiết lập tô màu,

0:04:12.027,0:04:16.796
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

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

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

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

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

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

0:04:43.066,0:04:46.475
Rồi ta sẽ đặt “i” ở đâu đó.

0:04:46.475,0:04:50.271
Và ta sẽ thay đổi x để hiển thị ngang màn hình.

0:04:50.271,0:04:54.688
Ta cũng thực hiện tương tự đối với y.

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

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

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

0:05:08.778,0:05:13.855
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.

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

0:05:19.527,0:05:22.140
Hy vọng việc hình dung giá trị “i” và “j” này

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

0:05:26.973,0:05:30.475
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!

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

0:05:34.066,0:05:37.232
nếu ta coi mọi thứ trên thế giới này

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

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

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

0:05:47.462,0:05:49.806
thay đổi hình ảnh chẳng hạn.

0:05:49.806,0:05:53.796
Tôi sẽ đổi nó thành hình trái tim!

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