1
00:00:00,115 --> 00:00:03,180
 Cho tới giờ, bạn có thể nhận ra rằng ta đã định nghĩa 

2
00:00:03,180 --> 00:00:07,202
 một hàm cụ thể mỗi khi muốn tạo một chương trình-- 

3
00:00:07,202 --> 00:00:09,191
 hàm `draw`. 

4
00:00:09,191 --> 00:00:13,436
 Để gợi nhắc bạn, đây vẫn là chương trình ảnh động của chiếc xe. 

5
00:00:13,436 --> 00:00:16,992
 Nó có biến này tên là 'x', giá trị bắt đầu từ 11. 

6
00:00:16,992 --> 00:00:22,648
 Và sau đó, trong hàm `draw`, nó vẽ chiếc xe ở tọa độ 'x' đó, 

7
00:00:22,648 --> 00:00:26,638
 và rồi +3 vào biến 'x' trong mỗi lần lặp. 

8
00:00:26,638 --> 00:00:28,501
 Và kết quả là một chiếc xe hơi 

9
00:00:28,501 --> 00:00:32,447
 di chuyển 3 pixel trên màn hình liên tục. 

10
00:00:32,447 --> 00:00:34,723
 Như vậy, đó là cách chương trình hoạt động. 

11
00:00:34,723 --> 00:00:37,683
 Nhưng bây giờ khi đã học cách tạo các hàm của riêng mình, 

12
00:00:37,683 --> 00:00:41,583
 bạn có thể tự hỏi, thế còn hàm `draw` thì sao? 

13
00:00:41,583 --> 00:00:44,109
 Tại sao nó luôn được đặt tên là 'draw`? 

14
00:00:44,109 --> 00:00:45,904
 Đây có phải là một hàm tùy biến? 

15
00:00:45,904 --> 00:00:48,894
 Và đó là những câu hỏi rất hay. 

16
00:00:48,894 --> 00:00:51,985
 Như thấy, trong thư viện ProcessingJS, 

17
00:00:51,985 --> 00:00:56,132
 hàm `draw` là một trong một số hàm được định nghĩa trước 

18
00:00:56,132 --> 00:01:01,009
 cho phép các chương trình có quyền điều khiển nhiều hơn những gì đang diễn ra trong khung vẽ. 

19
00:01:01,009 --> 00:01:04,831
 Hàm được định nghĩa trước là hàm đã được định nghĩa 

20
00:01:04,831 --> 00:01:07,209
 bởi thư viện ProcessingJS. 

21
00:01:07,209 --> 00:01:11,149
 Nhưng nó thường bắt đầu với một phần định nghĩa trống trơn. 

22
00:01:11,149 --> 00:01:17,045
 Ví dụ: trong thư viện ProcessingJS, có đoạn code trông như thế này: 

23
00:01:17,045 --> 00:01:19,434
 `var draw = function () {}` 

24
00:01:19,434 --> 00:01:23,266
 và sau đó là không có gì cả, hoàn toàn trống rỗng. 

25
00:01:23,266 --> 00:01:28,620
 Bây giờ, ta tải thư viện ProcessingJS cho mọi chương trình tại đây trên Khan Academy, 

26
00:01:28,620 --> 00:01:30,904
 Vì vậy, bạn không bao giờ thấy đoạn code này. 

27
00:01:30,904 --> 00:01:33,647
 Nhưng hãy tin tôi đi, nó tồn tại đấy. 

28
00:01:33,647 --> 00:01:41,049
 Bây giờ tôi sẽ comment code đó lại, vì ProcessJS đã làm điều đó cho ta. 

29
00:01:41,049 --> 00:01:45,308
 Và khi bạn định nghĩa lại `draw`, trong chương trình của chính mình, 

30
00:01:45,308 --> 00:01:49,809
 định nghĩa mới này ghi đè lên định nghĩa trống trơn trước đó. 

31
00:01:49,809 --> 00:01:51,632
 Và bây giờ hàm `draw` 

32
00:01:51,632 --> 00:01:55,497
 thực sự làm nên những điều thú vị, giống như việc vẽ một chiếc xe hơi. 

33
00:01:55,497 --> 00:02:01,375
 Giờ câu hỏi là, tại sao hàm `draw` được gọi đi gọi lại? 

34
00:02:01,375 --> 00:02:05,964
 Chà, cũng là code trong thư viện ProcessingJS 

35
00:02:05,964 --> 00:02:11,111
 thiết lập bộ hẹn giờ cho trình duyệt (browser timer) và gọi lại hàm 'draw' liên tục, 

36
00:02:11,111 --> 00:02:13,998
 gọi đi gọi lại. 

37
00:02:13,998 --> 00:02:19,239
 Ta phải đặt tên hàm là 'draw`, vì đó là tên của hàm 

38
00:02:19,239 --> 00:02:22,073
 được gọi liên tục. 

39
00:02:22,073 --> 00:02:27,543
 Nếu ta đổi tên cái này, ví dụ như đổi thành thành `drawCar`. 

40
00:02:27,543 --> 00:02:33,730
 Và trước tiên, ta nhận được một lỗi undefined (chưa định nghĩa), vì vậy ta có thể gõ `var drawCar`. 

41
00:02:33,730 --> 00:02:37,087
 Giờ bạn có thể thấy, nếu ta đổi tên này thành `drawCar`, 

42
00:02:37,087 --> 00:02:39,651
 ta không thấy bất kỳ ảnh động nào nữa. 

43
00:02:39,651 --> 00:02:44,692
 Và đó là vì chức năng này không còn được gọi nhiều lần nữa, 

44
00:02:44,692 --> 00:02:47,188
 bởi nó không được đặt tên là 'draw'. 

45
00:02:47,188 --> 00:02:50,796
 Vì vậy, ta phải đặt code muốn được gọi liên tục 

46
00:02:50,796 --> 00:02:55,912
 bên trong một hàm được đánh vần chính xác là 'draw`. 

47
00:02:55,912 --> 00:03:00,594
 Như vậy, tôi làm điều đó thêm một lần nữa và gọi `drawCar` từ đây. 

48
00:03:00,594 --> 00:03:03,237
 Aha! Ta đã lấy lại. 

49
00:03:03,237 --> 00:03:07,206
 Được rồi, nó cần được gọi là 'draw', 

50
00:03:07,206 --> 00:03:12,970
 và điều này cũng có nghĩa là takhông nên đặt tên cho các hàm tùy biến của riêng mình `draw`, 

51
00:03:12,970 --> 00:03:18,228
 trừ khi bạn muốn chúng được đối xử đặc biệt và được gọi đi gọi lại. 

52
00:03:18,228 --> 00:03:23,528
 Và cũng cần nhớ rằng, bạn không thể có nhiều hàm có tên là 'draw`. 

53
00:03:23,528 --> 00:03:27,889
 Chỉ định nghĩa hàm cuối cùng sẽ được tính. 

54
00:03:27,889 --> 00:03:30,813
 Nếu ta có một 'rect' ở trong này-- 

55
00:03:30,813 --> 00:03:35,143
 Giờ ta có thể thấy rằng chiếc xe của ta sẽ không được vẽ nữa, 

56
00:03:35,143 --> 00:03:40,495
 và chỉ có rect được vẽ, bởi vì chỉ có định nghĩa cuối cùng được tính. 

57
00:03:40,495 --> 00:03:43,166
 Vì vậy, hãy bỏ cái đó đi. 

58
00:03:43,166 --> 00:03:48,289
 Hàm 'draw' không phải là hàm duy nhất được định nghĩa trước 

59
00:03:48,289 --> 00:03:50,499
 có hành vi đặc biệt này. 

60
00:03:50,499 --> 00:03:52,682
 Ngoài ra còn có một loạt các hàm

61
00:03:52,682 --> 00:03:56,692
 phản hồi lại tương tác chuột và nhấn phím. 

62
00:03:56,692 --> 00:04:01,624
 Giả sử ta muốn có một chương trình vẽ hình elip được tô màu 

63
00:04:01,624 --> 00:04:04,716
 bất cứ vị trí nào người dùng di con trỏ. 

64
00:04:04,716 --> 00:04:09,042
 Ta a có thể làm điều đó với một hàm như sau. 

65
00:04:09,042 --> 00:04:15,666
 

66
00:04:19,998 --> 00:04:22,545
 Được rồi, ồ, đẹp quá. 

67
00:04:22,545 --> 00:04:27,224
 Bây giờ, hàm này đang được gọi đi gọi lại, 

68
00:04:27,224 --> 00:04:31,176
 ngay cả khi người dùng không di chuyển con trỏ như lúc này đây. 

69
00:04:31,176 --> 00:04:34,703
 Và chương trình này đang hoạt động, nó làm những gì ta muốn, 

70
00:04:34,703 --> 00:04:37,902
 nó vẽ những hình elip xinh đẹp này trên khắp màn hình. 

71
00:04:37,902 --> 00:04:42,114
 Nhưng hóa ra, có cách tốt hơn để làm điều tương tự 

72
00:04:42,114 --> 00:04:44,288
 một cách hiệu quả hơn. 

73
00:04:44,288 --> 00:04:51,892
 Ta có thể thay hàm `draw` thành` mouseMoved` và xem nào. 

74
00:04:51,892 --> 00:04:54,577
 Và nó vẫn hoạt động. 

75
00:04:54,577 --> 00:04:58,361
 Bạn thấy đấy, môi trường của ta kiểm tra các chương trình 

76
00:04:58,361 --> 00:05:00,754
 để xem chúng đã định nghĩa hàm `mouseMoved` chưa, 

77
00:05:00,754 --> 00:05:05,457
 và nếu vậy, nó gọi chức năng đó bất cứ khi nào người dùng di chuyển con trỏ. 

78
00:05:05,457 --> 00:05:10,029
 Nhưng nó sẽ không được gọi nếu người dùng không di chuyển con trỏ. 

79
00:05:10,029 --> 00:05:13,423
 Như vậy, trước đây, ta đã gọi code trong hàm `draw` 

80
00:05:13,423 --> 00:05:15,908
 khi ta không cần, lặp đi lặp lại. 

81
00:05:15,908 --> 00:05:20,265
 Và bây giờ, ta chỉ gọi code này trong `mouseMoved` 

82
00:05:20,265 --> 00:05:23,292
 khi mouseX hoặc mouseY thực sự thay đổi giá trị. 

83
00:05:23,292 --> 00:05:27,313
 Như vậy, chương trình hoạt động hiệu quả hơn, và đó là một điều tốt. 

84
00:05:27,313 --> 00:05:30,728
 Nói chung, chỉ muốn thay đổi kết quả chương trình 

85
00:05:30,728 --> 00:05:34,525
 Khi người dùng di chuyển con trỏ, tốt hơn là nên đặt code đó 

86
00:05:34,525 --> 00:05:37,212
 bên trong hàm `mouseMoved`. 

87
00:05:37,212 --> 00:05:40,987
 Và có một loạt các hàm được định nghĩa trước như thế, 

88
00:05:40,987 --> 00:05:44,655
 bạn có thể xem thêm ví dụ trong tài liệu. 

89
00:05:44,655 --> 00:05:48,872
 như là `mousePression`,` mouseRelazed`, `keyPression`, v.v. 

90
00:05:48,872 --> 00:05:53,993
 Hãy nhớ rằng, nếu bạn muốn sử dụng một hàm được định nghĩa đặc biệt trước đó, 

91
00:05:53,993 --> 00:05:59,244
 như `mouseMoved` hoặc` draw`, đánh vần thật chính xác và sử dụng đúng. 

92
00:05:59,244 --> 00:06:03,410
 Nếu không, hãy chắc chắn rằng định nghĩa các hàm tùy biến của mình 

93
00:06:03,410 --> 00:00:00,000
 bằng một cái tên mới, độc đáo hơn.