Special ProcessingJS functions

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

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

hàm `draw`.

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

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

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

và rồi +3 vào biến 'x' trong mỗi lần lặp.

Và kết quả là một chiếc xe hơi

di chuyển 3 pixel trên màn hình liên tục.

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

Nhưng bây giờ khi đã học cách tạo các hàm của riêng mình,

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

Tại sao nó luôn được đặt tên là 'draw`?

Đây có phải là một hàm tùy biến?

Và đó là những câu hỏi rất hay.

Như thấy, trong thư viện ProcessingJS,

hàm `draw` là một trong một số hàm được định nghĩa trước

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

Hàm được định nghĩa trước là hàm đã được định nghĩa

bởi thư viện ProcessingJS.

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

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

`var draw = function () {}`

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

Bây giờ, ta tải thư viện ProcessingJS cho mọi chương trình tại đây trên Khan Academy,

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

Nhưng hãy tin tôi đi, nó tồn tại đấy.

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

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

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

Và bây giờ hàm `draw`

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.

Giờ câu hỏi là, tại sao hàm `draw` được gọi đi gọi lại?

Chà, cũng là code trong thư viện ProcessingJS

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,

gọi đi gọi lại.

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

được gọi liên tục.

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

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

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

ta không thấy bất kỳ ảnh động nào nữa.

Và đó là vì chức năng này không còn được gọi nhiều lần nữa,

bởi nó không được đặt tên là 'draw'.

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

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

Như vậy, tôi làm điều đó thêm một lần nữa và gọi `drawCar` từ đây.

Aha! Ta đã lấy lại.

Được rồi, nó cần được gọi là 'draw',

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

trừ khi bạn muốn chúng được đối xử đặc biệt và được gọi đi gọi lại.

Và cũng cần nhớ rằng, bạn không thể có nhiều hàm có tên là 'draw`.

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

Nếu ta có một 'rect' ở trong này--

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

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

Vì vậy, hãy bỏ cái đó đi.

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

có hành vi đặc biệt này.

Ngoài ra còn có một loạt các hàm

phản hồi lại tương tác chuột và nhấn phím.

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

bất cứ vị trí nào người dùng di con trỏ.

Ta a có thể làm điều đó với một hàm như sau.

Được rồi, ồ, đẹp quá.

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

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

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

nó vẽ những hình elip xinh đẹp này trên khắp màn hình.

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

một cách hiệu quả hơn.

Ta có thể thay hàm `draw` thành` mouseMoved` và xem nào.

Và nó vẫn hoạt động.

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

để xem chúng đã định nghĩa hàm `mouseMoved` chưa,

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

Nhưng nó sẽ không được gọi nếu người dùng không di chuyển con trỏ.

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

khi ta không cần, lặp đi lặp lại.

Và bây giờ, ta chỉ gọi code này trong `mouseMoved`

khi mouseX hoặc mouseY thực sự thay đổi giá trị.

Như vậy, chương trình hoạt động hiệu quả hơn, và đó là một điều tốt.

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

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

bên trong hàm `mouseMoved`.

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

bạn có thể xem thêm ví dụ trong tài liệu.

như là `mousePression`,` mouseRelazed`, `keyPression`, v.v.

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 đó,

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

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

bằng một cái tên mới, độc đáo hơn.