WEBVTT

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

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

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

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

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

00:00:19.523 --> 00:00:22.304
Như thế đó. Ta có

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

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

00:00:36.429 --> 00: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.

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

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

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

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

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

00:00:56.329 --> 00: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.

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

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

00:01:07.997 --> 00: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ý

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

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

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

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

00:01:24.806 --> 00: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

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

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

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

00:01:42.308 --> 00: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

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

00:01:49.193 --> 00: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

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

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

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

00:02:03.854 --> 00: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.

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

00:02:12.132 --> 00: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,

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

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

00:02:21.977 --> 00:02:24.006
Để tôi cho các bạn xem nhé.

00:02:24.006 --> 00: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.

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

00:02:37.274 --> 00: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.

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

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

00:02:53.274 --> 00: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.

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

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

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

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

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

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

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

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

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

00:03:38.340 --> 00: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.

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

00:03:48.673 --> 00: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”.

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

00:03:59.607 --> 00: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”.

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

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

00:04:12.027 --> 00: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

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

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

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

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

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

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

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

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

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

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

00:05:04.686 --> 00: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.

00:05:08.778 --> 00: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.

00:05:13.855 --> 00: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.

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

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

00:05:26.973 --> 00: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!

00:05:30.475 --> 00: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

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

00:05:37.232 --> 00: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,

00:05:39.599 --> 00: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.

00:05:44.564 --> 00: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 đã,

00:05:47.462 --> 00:05:49.806
thay đổi hình ảnh chẳng hạn.

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

00:05:53.796 --> 00: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!