0:00:00.115,0:00:03.180
Cho tới giờ, bạn có thể nhận ra rằng ta đã định nghĩa

0:00:03.180,0:00:07.202
một hàm cụ thể mỗi khi muốn tạo một chương trình--

0:00:07.202,0:00:09.191
hàm `draw`.

0:00:09.191,0:00:13.436
Để gợi nhắc bạn, đây vẫn là chương trình ảnh động của chiếc xe.

0:00:13.436,0:00:16.992
Nó có biến này tên là 'x', giá trị bắt đầu từ 11.

0:00:16.992,0:00:22.648
Và sau đó, trong hàm `draw`, nó vẽ chiếc xe ở tọa độ 'x' đó,

0:00:22.648,0:00:26.638
và rồi +3 vào biến 'x' trong mỗi lần lặp.

0:00:26.638,0:00:28.501
Và kết quả là một chiếc xe hơi

0:00:28.501,0:00:32.447
di chuyển 3 pixel trên màn hình liên tục.

0:00:32.447,0:00:34.723
Như vậy, đó là cách chương trình hoạt động.

0:00:34.723,0: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,

0:00:37.683,0:00:41.583
bạn có thể tự hỏi, thế còn hàm `draw` thì sao?

0:00:41.583,0:00:44.109
Tại sao nó luôn được đặt tên là 'draw`?

0:00:44.109,0:00:45.904
Đây có phải là một hàm tùy biến?

0:00:45.904,0:00:48.894
Và đó là những câu hỏi rất hay.

0:00:48.894,0:00:51.985
Như thấy, trong thư viện ProcessingJS,

0:00:51.985,0:00:56.132
hàm `draw` là một trong một số hàm được định nghĩa trước

0:00:56.132,0: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ẽ.

0:01:01.009,0:01:04.831
Hàm được định nghĩa trước là hàm đã được định nghĩa

0:01:04.831,0:01:07.209
bởi thư viện ProcessingJS.

0:01:07.209,0:01:11.149
Nhưng nó thường bắt đầu với một phần định nghĩa trống trơn.

0:01:11.149,0:01:17.045
Ví dụ: trong thư viện ProcessingJS, có đoạn code trông như thế này:

0:01:17.045,0:01:19.434
`var draw = function () {}`

0:01:19.434,0:01:23.266
và sau đó là không có gì cả, hoàn toàn trống rỗng.

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

0:01:28.620,0:01:30.904
Vì vậy, bạn không bao giờ thấy đoạn code này.

0:01:30.904,0:01:33.647
Nhưng hãy tin tôi đi, nó tồn tại đấy.

0:01:33.647,0:01:41.049
Bây giờ tôi sẽ comment code đó lại, vì ProcessJS đã làm điều đó cho ta.

0:01:41.049,0:01:45.308
Và khi bạn định nghĩa lại `draw`, trong chương trình của chính mình,

0:01:45.308,0:01:49.809
định nghĩa mới này ghi đè lên định nghĩa trống trơn trước đó.

0:01:49.809,0:01:51.632
Và bây giờ hàm `draw`

0:01:51.632,0: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.

0:01:55.497,0:02:01.375
Giờ câu hỏi là, tại sao hàm `draw` được gọi đi gọi lại?

0:02:01.375,0:02:05.964
Chà, cũng là code trong thư viện ProcessingJS

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

0:02:11.111,0:02:13.998
gọi đi gọi lại.

0:02:13.998,0:02:19.239
Ta phải đặt tên hàm là 'draw`, vì đó là tên của hàm

0:02:19.239,0:02:22.073
được gọi liên tục.

0:02:22.073,0:02:27.543
Nếu ta đổi tên cái này, ví dụ như đổi thành thành `drawCar`.

0:02:27.543,0: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`.

0:02:33.730,0:02:37.087
Giờ bạn có thể thấy, nếu ta đổi tên này thành `drawCar`,

0:02:37.087,0:02:39.651
ta không thấy bất kỳ ảnh động nào nữa.

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

0:02:44.692,0:02:47.188
bởi nó không được đặt tên là 'draw'.

0:02:47.188,0:02:50.796
Vì vậy, ta phải đặt code muốn được gọi liên tục

0:02:50.796,0:02:55.912
bên trong một hàm được đánh vần chính xác là 'draw`.

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

0:03:00.594,0:03:03.237
Aha! Ta đã lấy lại.

0:03:03.237,0:03:07.206
Được rồi, nó cần được gọi là 'draw',

0:03:07.206,0: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`,

0:03:12.970,0: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.

0:03:18.228,0: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`.

0:03:23.528,0:03:27.889
Chỉ định nghĩa hàm cuối cùng sẽ được tính.

0:03:27.889,0:03:30.813
Nếu ta có một 'rect' ở trong này--

0:03:30.813,0:03:35.143
Giờ ta có thể thấy rằng chiếc xe của ta sẽ không được vẽ nữa,

0:03:35.143,0:03:40.495
và chỉ có rect được vẽ, bởi vì chỉ có định nghĩa cuối cùng được tính.

0:03:40.495,0:03:43.166
Vì vậy, hãy bỏ cái đó đi.

0:03:43.166,0:03:48.289
Hàm 'draw' không phải là hàm duy nhất được định nghĩa trước

0:03:48.289,0:03:50.499
có hành vi đặc biệt này.

0:03:50.499,0:03:52.682
Ngoài ra còn có một loạt các hàm

0:03:52.682,0:03:56.692
phản hồi lại tương tác chuột và nhấn phím.

0:03:56.692,0:04:01.624
Giả sử ta muốn có một chương trình vẽ hình elip được tô màu

0:04:01.624,0:04:04.716
bất cứ vị trí nào người dùng di con trỏ.

0:04:04.716,0:04:09.042
Ta a có thể làm điều đó với một hàm như sau.

0:04:09.042,0:04:15.666


0:04:19.998,0:04:22.545
Được rồi, ồ, đẹp quá.

0:04:22.545,0:04:27.224
Bây giờ, hàm này đang được gọi đi gọi lại,

0:04:27.224,0:04:31.176
ngay cả khi người dùng không di chuyển con trỏ như lúc này đây.

0:04:31.176,0:04:34.703
Và chương trình này đang hoạt động, nó làm những gì ta muốn,

0:04:34.703,0:04:37.902
nó vẽ những hình elip xinh đẹp này trên khắp màn hình.

0:04:37.902,0:04:42.114
Nhưng hóa ra, có cách tốt hơn để làm điều tương tự

0:04:42.114,0:04:44.288
một cách hiệu quả hơn.

0:04:44.288,0:04:51.892
Ta có thể thay hàm `draw` thành` mouseMoved` và xem nào.

0:04:51.892,0:04:54.577
Và nó vẫn hoạt động.

0:04:54.577,0:04:58.361
Bạn thấy đấy, môi trường của ta kiểm tra các chương trình

0:04:58.361,0:05:00.754
để xem chúng đã định nghĩa hàm `mouseMoved` chưa,

0:05:00.754,0: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ỏ.

0:05:05.457,0: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ỏ.

0:05:10.029,0:05:13.423
Như vậy, trước đây, ta đã gọi code trong hàm `draw`

0:05:13.423,0:05:15.908
khi ta không cần, lặp đi lặp lại.

0:05:15.908,0:05:20.265
Và bây giờ, ta chỉ gọi code này trong `mouseMoved`

0:05:20.265,0:05:23.292
khi mouseX hoặc mouseY thực sự thay đổi giá trị.

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

0:05:27.313,0:05:30.728
Nói chung, chỉ muốn thay đổi kết quả chương trình

0:05:30.728,0:05:34.525
Khi người dùng di chuyển con trỏ, tốt hơn là nên đặt code đó

0:05:34.525,0:05:37.212
bên trong hàm `mouseMoved`.

0:05:37.212,0:05:40.987
Và có một loạt các hàm được định nghĩa trước như thế,

0:05:40.987,0:05:44.655
bạn có thể xem thêm ví dụ trong tài liệu.

0:05:44.655,0:05:48.872
như là `mousePression`,` mouseRelazed`, `keyPression`, v.v.

0:05:48.872,0: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 đó,

0:05:53.993,0:05:59.244
như `mouseMoved` hoặc` draw`, đánh vần thật chính xác và sử dụng đúng.

0:05:59.244,0: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

0:06:03.410,0:00:00.000
bằng một cái tên mới, độc đáo hơn.