[Script Info] Title: [Events] Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text Dialogue: 0,0:00:00.12,0:00:03.18,Default,,0000,0000,0000,, Cho tới giờ, bạn có thể nhận ra rằng ta đã định nghĩa Dialogue: 0,0:00:03.18,0:00:07.20,Default,,0000,0000,0000,, một hàm cụ thể mỗi khi muốn tạo một chương trình-- Dialogue: 0,0:00:07.20,0:00:09.19,Default,,0000,0000,0000,, hàm `draw`. Dialogue: 0,0:00:09.19,0:00:13.44,Default,,0000,0000,0000,, Để gợi nhắc bạn, đây vẫn là chương trình ảnh động của chiếc xe. Dialogue: 0,0:00:13.44,0:00:16.99,Default,,0000,0000,0000,, Nó có biến này tên là 'x', giá trị bắt đầu từ 11. Dialogue: 0,0:00:16.99,0:00:22.65,Default,,0000,0000,0000,, Và sau đó, trong hàm `draw`, nó vẽ chiếc xe ở tọa độ 'x' đó, Dialogue: 0,0:00:22.65,0:00:26.64,Default,,0000,0000,0000,, và rồi +3 vào biến 'x' trong mỗi lần lặp. Dialogue: 0,0:00:26.64,0:00:28.50,Default,,0000,0000,0000,, Và kết quả là một chiếc xe hơi Dialogue: 0,0:00:28.50,0:00:32.45,Default,,0000,0000,0000,, di chuyển 3 pixel trên màn hình liên tục. Dialogue: 0,0:00:32.45,0:00:34.72,Default,,0000,0000,0000,, Như vậy, đó là cách chương trình hoạt động. Dialogue: 0,0:00:34.72,0:00:37.68,Default,,0000,0000,0000,, Nhưng bây giờ khi đã học cách tạo các hàm của riêng mình, Dialogue: 0,0:00:37.68,0:00:41.58,Default,,0000,0000,0000,, bạn có thể tự hỏi, thế còn hàm `draw` thì sao? Dialogue: 0,0:00:41.58,0:00:44.11,Default,,0000,0000,0000,, Tại sao nó luôn được đặt tên là 'draw`? Dialogue: 0,0:00:44.11,0:00:45.90,Default,,0000,0000,0000,, Đây có phải là một hàm tùy biến? Dialogue: 0,0:00:45.90,0:00:48.89,Default,,0000,0000,0000,, Và đó là những câu hỏi rất hay. Dialogue: 0,0:00:48.89,0:00:51.98,Default,,0000,0000,0000,, Như thấy, trong thư viện ProcessingJS, Dialogue: 0,0:00:51.98,0:00:56.13,Default,,0000,0000,0000,, hàm `draw` là một trong một số hàm được định nghĩa trước Dialogue: 0,0:00:56.13,0:01:01.01,Default,,0000,0000,0000,, 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ẽ. Dialogue: 0,0:01:01.01,0:01:04.83,Default,,0000,0000,0000,, Hàm được định nghĩa trước là hàm đã được định nghĩa Dialogue: 0,0:01:04.83,0:01:07.21,Default,,0000,0000,0000,, bởi thư viện ProcessingJS. Dialogue: 0,0:01:07.21,0:01:11.15,Default,,0000,0000,0000,, Nhưng nó thường bắt đầu với một phần định nghĩa trống trơn. Dialogue: 0,0:01:11.15,0:01:17.04,Default,,0000,0000,0000,, Ví dụ: trong thư viện ProcessingJS, có đoạn code trông như thế này: Dialogue: 0,0:01:17.04,0:01:19.43,Default,,0000,0000,0000,, `var draw = function () {}` Dialogue: 0,0:01:19.43,0:01:23.27,Default,,0000,0000,0000,, và sau đó là không có gì cả, hoàn toàn trống rỗng. Dialogue: 0,0:01:23.27,0:01:28.62,Default,,0000,0000,0000,, Bây giờ, ta tải thư viện ProcessingJS cho mọi chương trình tại đây trên Khan Academy, Dialogue: 0,0:01:28.62,0:01:30.90,Default,,0000,0000,0000,, Vì vậy, bạn không bao giờ thấy đoạn code này. Dialogue: 0,0:01:30.90,0:01:33.65,Default,,0000,0000,0000,, Nhưng hãy tin tôi đi, nó tồn tại đấy. Dialogue: 0,0:01:33.65,0:01:41.05,Default,,0000,0000,0000,, Bây giờ tôi sẽ comment code đó lại, vì ProcessJS đã làm điều đó cho ta. Dialogue: 0,0:01:41.05,0:01:45.31,Default,,0000,0000,0000,, Và khi bạn định nghĩa lại `draw`, trong chương trình của chính mình, Dialogue: 0,0:01:45.31,0:01:49.81,Default,,0000,0000,0000,, định nghĩa mới này ghi đè lên định nghĩa trống trơn trước đó. Dialogue: 0,0:01:49.81,0:01:51.63,Default,,0000,0000,0000,, Và bây giờ hàm `draw` Dialogue: 0,0:01:51.63,0:01:55.50,Default,,0000,0000,0000,, 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. Dialogue: 0,0:01:55.50,0:02:01.38,Default,,0000,0000,0000,, Giờ câu hỏi là, tại sao hàm `draw` được gọi đi gọi lại? Dialogue: 0,0:02:01.38,0:02:05.96,Default,,0000,0000,0000,, Chà, cũng là code trong thư viện ProcessingJS Dialogue: 0,0:02:05.96,0:02:11.11,Default,,0000,0000,0000,, 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, Dialogue: 0,0:02:11.11,0:02:13.100,Default,,0000,0000,0000,, gọi đi gọi lại. Dialogue: 0,0:02:13.100,0:02:19.24,Default,,0000,0000,0000,, Ta phải đặt tên hàm là 'draw`, vì đó là tên của hàm Dialogue: 0,0:02:19.24,0:02:22.07,Default,,0000,0000,0000,, được gọi liên tục. Dialogue: 0,0:02:22.07,0:02:27.54,Default,,0000,0000,0000,, Nếu ta đổi tên cái này, ví dụ như đổi thành thành `drawCar`. Dialogue: 0,0:02:27.54,0:02:33.73,Default,,0000,0000,0000,, 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`. Dialogue: 0,0:02:33.73,0:02:37.09,Default,,0000,0000,0000,, Giờ bạn có thể thấy, nếu ta đổi tên này thành `drawCar`, Dialogue: 0,0:02:37.09,0:02:39.65,Default,,0000,0000,0000,, ta không thấy bất kỳ ảnh động nào nữa. Dialogue: 0,0:02:39.65,0:02:44.69,Default,,0000,0000,0000,, Và đó là vì chức năng này không còn được gọi nhiều lần nữa, Dialogue: 0,0:02:44.69,0:02:47.19,Default,,0000,0000,0000,, bởi nó không được đặt tên là 'draw'. Dialogue: 0,0:02:47.19,0:02:50.80,Default,,0000,0000,0000,, Vì vậy, ta phải đặt code muốn được gọi liên tục Dialogue: 0,0:02:50.80,0:02:55.91,Default,,0000,0000,0000,, bên trong một hàm được đánh vần chính xác là 'draw`. Dialogue: 0,0:02:55.91,0:03:00.59,Default,,0000,0000,0000,, Như vậy, tôi làm điều đó thêm một lần nữa và gọi `drawCar` từ đây. Dialogue: 0,0:03:00.59,0:03:03.24,Default,,0000,0000,0000,, Aha! Ta đã lấy lại. Dialogue: 0,0:03:03.24,0:03:07.21,Default,,0000,0000,0000,, Được rồi, nó cần được gọi là 'draw', Dialogue: 0,0:03:07.21,0:03:12.97,Default,,0000,0000,0000,, 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`, Dialogue: 0,0:03:12.97,0:03:18.23,Default,,0000,0000,0000,, trừ khi bạn muốn chúng được đối xử đặc biệt và được gọi đi gọi lại. Dialogue: 0,0:03:18.23,0:03:23.53,Default,,0000,0000,0000,, Và cũng cần nhớ rằng, bạn không thể có nhiều hàm có tên là 'draw`. Dialogue: 0,0:03:23.53,0:03:27.89,Default,,0000,0000,0000,, Chỉ định nghĩa hàm cuối cùng sẽ được tính. Dialogue: 0,0:03:27.89,0:03:30.81,Default,,0000,0000,0000,, Nếu ta có một 'rect' ở trong này-- Dialogue: 0,0:03:30.81,0:03:35.14,Default,,0000,0000,0000,, Giờ ta có thể thấy rằng chiếc xe của ta sẽ không được vẽ nữa, Dialogue: 0,0:03:35.14,0:03:40.50,Default,,0000,0000,0000,, và chỉ có rect được vẽ, bởi vì chỉ có định nghĩa cuối cùng được tính. Dialogue: 0,0:03:40.50,0:03:43.17,Default,,0000,0000,0000,, Vì vậy, hãy bỏ cái đó đi. Dialogue: 0,0:03:43.17,0:03:48.29,Default,,0000,0000,0000,, Hàm 'draw' không phải là hàm duy nhất được định nghĩa trước Dialogue: 0,0:03:48.29,0:03:50.50,Default,,0000,0000,0000,, có hành vi đặc biệt này. Dialogue: 0,0:03:50.50,0:03:52.68,Default,,0000,0000,0000,, Ngoài ra còn có một loạt các hàm Dialogue: 0,0:03:52.68,0:03:56.69,Default,,0000,0000,0000,, phản hồi lại tương tác chuột và nhấn phím. Dialogue: 0,0:03:56.69,0:04:01.62,Default,,0000,0000,0000,, Giả sử ta muốn có một chương trình vẽ hình elip được tô màu Dialogue: 0,0:04:01.62,0:04:04.72,Default,,0000,0000,0000,, bất cứ vị trí nào người dùng di con trỏ. Dialogue: 0,0:04:04.72,0:04:09.04,Default,,0000,0000,0000,, Ta a có thể làm điều đó với một hàm như sau. Dialogue: 0,0:04:09.04,0:04:15.67,Default,,0000,0000,0000,, Dialogue: 0,0:04:19.100,0:04:22.54,Default,,0000,0000,0000,, Được rồi, ồ, đẹp quá. Dialogue: 0,0:04:22.54,0:04:27.22,Default,,0000,0000,0000,, Bây giờ, hàm này đang được gọi đi gọi lại, Dialogue: 0,0:04:27.22,0:04:31.18,Default,,0000,0000,0000,, ngay cả khi người dùng không di chuyển con trỏ như lúc này đây. Dialogue: 0,0:04:31.18,0:04:34.70,Default,,0000,0000,0000,, Và chương trình này đang hoạt động, nó làm những gì ta muốn, Dialogue: 0,0:04:34.70,0:04:37.90,Default,,0000,0000,0000,, nó vẽ những hình elip xinh đẹp này trên khắp màn hình. Dialogue: 0,0:04:37.90,0:04:42.11,Default,,0000,0000,0000,, Nhưng hóa ra, có cách tốt hơn để làm điều tương tự Dialogue: 0,0:04:42.11,0:04:44.29,Default,,0000,0000,0000,, một cách hiệu quả hơn. Dialogue: 0,0:04:44.29,0:04:51.89,Default,,0000,0000,0000,, Ta có thể thay hàm `draw` thành` mouseMoved` và xem nào. Dialogue: 0,0:04:51.89,0:04:54.58,Default,,0000,0000,0000,, Và nó vẫn hoạt động. Dialogue: 0,0:04:54.58,0:04:58.36,Default,,0000,0000,0000,, Bạn thấy đấy, môi trường của ta kiểm tra các chương trình Dialogue: 0,0:04:58.36,0:05:00.75,Default,,0000,0000,0000,, để xem chúng đã định nghĩa hàm `mouseMoved` chưa, Dialogue: 0,0:05:00.75,0:05:05.46,Default,,0000,0000,0000,, 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ỏ. Dialogue: 0,0:05:05.46,0:05:10.03,Default,,0000,0000,0000,, Nhưng nó sẽ không được gọi nếu người dùng không di chuyển con trỏ. Dialogue: 0,0:05:10.03,0:05:13.42,Default,,0000,0000,0000,, Như vậy, trước đây, ta đã gọi code trong hàm `draw` Dialogue: 0,0:05:13.42,0:05:15.91,Default,,0000,0000,0000,, khi ta không cần, lặp đi lặp lại. Dialogue: 0,0:05:15.91,0:05:20.26,Default,,0000,0000,0000,, Và bây giờ, ta chỉ gọi code này trong `mouseMoved` Dialogue: 0,0:05:20.26,0:05:23.29,Default,,0000,0000,0000,, khi mouseX hoặc mouseY thực sự thay đổi giá trị. Dialogue: 0,0:05:23.29,0:05:27.31,Default,,0000,0000,0000,, Như vậy, chương trình hoạt động hiệu quả hơn, và đó là một điều tốt. Dialogue: 0,0:05:27.31,0:05:30.73,Default,,0000,0000,0000,, Nói chung, chỉ muốn thay đổi kết quả chương trình Dialogue: 0,0:05:30.73,0:05:34.52,Default,,0000,0000,0000,, Khi người dùng di chuyển con trỏ, tốt hơn là nên đặt code đó Dialogue: 0,0:05:34.52,0:05:37.21,Default,,0000,0000,0000,, bên trong hàm `mouseMoved`. Dialogue: 0,0:05:37.21,0:05:40.99,Default,,0000,0000,0000,, Và có một loạt các hàm được định nghĩa trước như thế, Dialogue: 0,0:05:40.99,0:05:44.66,Default,,0000,0000,0000,, bạn có thể xem thêm ví dụ trong tài liệu. Dialogue: 0,0:05:44.66,0:05:48.87,Default,,0000,0000,0000,, như là `mousePression`,` mouseRelazed`, `keyPression`, v.v. Dialogue: 0,0:05:48.87,0:05:53.99,Default,,0000,0000,0000,, 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 đó, Dialogue: 0,0:05:53.99,0:05:59.24,Default,,0000,0000,0000,, như `mouseMoved` hoặc` draw`, đánh vần thật chính xác và sử dụng đúng. Dialogue: 0,0:05:59.24,0:06:03.41,Default,,0000,0000,0000,, 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 Dialogue: 0,0:06:03.41,0:00:00.00,Default,,0000,0000,0000,, bằng một cái tên mới, độc đáo hơn.