1
00:00:01,686 --> 00:00:04,237
Một viên ngọc, viên ngọc tuyệt đẹp!

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

3
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.

4
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.

5
00:00:16,161 --> 00:00:19,523
Đi từ trái sang phải màn hình.

6
00:00:19,523 --> 00:00:22,304
Như thế đó. Ta có

7
00:00:22,304 --> 00:00:31,186
for (var i = 0; i < 12; i++)

8
00:00:31,186 --> 00:00:36,429
Sau đó ta sẽ lấy dòng này và chuyển vào trong đây.

9
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.

10
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.

11
00:00:43,401 --> 00:00:45,941
Điều đó có nghĩa là ta cần phải thay đổi x.

12
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.

13
00:00:49,524 --> 00:00:51,859
Vậy tức là biến sẽ phải phụ thuộc vào i.

14
00:00:51,859 --> 00:00:56,329
Ta chỉ cần nói rằng; i*36.

15
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.

16
00:01:02,687 --> 00:01:04,575
Tuyệt vời! Vậy là ta đã có một hàng ngọc.

17
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.

18
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ý

19
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.

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

21
00:01:17,306 --> 00:01:21,609
Vậy làm cách nào để chỗ ngọc này

22
00:01:21,609 --> 00:01:24,806
trải dọc theo màn hình nữa?

23
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

24
00:01:30,639 --> 00:01:34,565
rồi thay đổi y cho mỗi lần lặp.

25
00:01:34,565 --> 00:01:37,688
Như vậy ta sẽ tăng lên 60 và sau đó là 90.

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

27
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

28
00:01:45,495 --> 00:01:49,193
chỉ là sao chép và dán và thay đổi có xíu xíu.

29
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

30
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.”

31
00:01:57,025 --> 00:01:58,607
Nhưng chúng ta đã đang sử dụng vòng lặp rồi.

32
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?

33
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.

34
00:02:09,518 --> 00:02:12,132
Ta sẽ tạo một vòng lặp ngoài trước.

35
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,

36
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,

37
00:02:19,234 --> 00:02:21,977
đó là trải ngọc theo chiều ngang màn hình.

38
00:02:21,977 --> 00:02:24,006
Để tôi cho các bạn xem nhé.

39
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.

40
00:02:29,851 --> 00:02:37,274
Vậy là for (var j = 0; j < 13; j++)

41
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.

42
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,

43
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.

44
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.

45
00:02:59,109 --> 00:03:01,969
Vấn đề là ta cần phải thay đổi y phải không?

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

47
00:03:04,309 --> 00:03:06,108
hiện tại Y cố định là 90.

48
00:03:06,108 --> 00:03:09,440
Ta muốn thay đổi y cho từng hàng.

49
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.

50
00:03:16,188 --> 00:03:24,663
Ta có thể thay đổi thành, ví dụ như, j*30.

51
00:03:24,663 --> 00:03:29,934
Tada! Nhiều ngọc quá! Được rồi đó!

52
00:03:29,934 --> 00:03:31,776
Ta cùng quan sát lại một lượt nhé.

53
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.

54
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.

55
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.

56
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”.

57
00:03:55,358 --> 00:03:59,607
Và vì thế “i” thay đổi thường xuyên hơn “j”.

58
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”.

59
00:04:05,238 --> 00:04:09,277
Tôi sẽ chú thích vào ảnh này

60
00:04:09,277 --> 00:04:12,027
rồi thiết lập tô màu,

61
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

62
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.

63
00:04:22,024 --> 00:04:26,009
Ta có thể thấy “j” tăng từ 0 đến 12.

64
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.

65
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é.

66
00:04:35,684 --> 00:04:43,066
Đối với “i”, ta sẽ tô một màu khác.

67
00:04:43,066 --> 00:04:46,475
Rồi ta sẽ đặt “i” ở đâu đó.

68
00:04:46,475 --> 00:04:50,271
Và ta sẽ thay đổi x để hiển thị ngang màn hình.

69
00:04:50,271 --> 00:04:54,688
Ta cũng thực hiện tương tự đối với y.

70
00:04:54,688 --> 00:04:59,561
Ta có thể thấy rằng “i” đang tăng từ 0 đến 11.

71
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.

72
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.

73
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.

74
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.

75
00:05:19,527 --> 00:05:22,140
Hy vọng việc hình dung giá trị “i” và “j” này

76
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.

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

78
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

79
00:05:34,066 --> 00:05:37,232
nếu ta coi mọi thứ trên thế giới này

80
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,

81
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.

82
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 đã,

83
00:05:47,462 --> 00:05:49,806
thay đổi hình ảnh chẳng hạn.

84
00:05:49,806 --> 00:05:53,796
Tôi sẽ đổi nó thành hình trái tim!

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