1
00:00:00,115 --> 00:00:03,180
בשלב זה אתה יכול להבין שאתה כבר מגדיר

2
00:00:03,180 --> 00:00:07,202
פונקצייה פרטית בכל זמן 
שאתה רוצה להנפיש את התוכנית שלך

3
00:00:07,202 --> 00:00:09,191
פונקציית הציור (draw function).

4
00:00:09,191 --> 00:00:13,436
להזכירך, זו תוכנית 
המכונית המונפשת שלנו שוב.

5
00:00:13,436 --> 00:00:16,992
יש לה המשתנה הזה ששמו
הוא x, הוא מתחיל ב-11.

6
00:00:16,992 --> 00:00:22,648
ואז בתוך פונקציית draw,
הוא מצייר את המכונית במשתנה x זה

7
00:00:22,648 --> 00:00:26,638
ואז היא מוסיפה 3 למשתנה x זה כל פעם

8
00:00:26,638 --> 00:00:28,501
ואלו התוצאות במכונית

9
00:00:28,501 --> 00:00:32,447
שנעה 3 פיקסלים על המסך ברציפות.

10
00:00:32,447 --> 00:00:34,723
אז, כך זה עובד.

11
00:00:34,723 --> 00:00:37,683
אבל עכשיו כשלמדת איך להכין פונקציה בעצמך,

12
00:00:37,683 --> 00:00:41,583
ייתכן שאתה תוהה,
מה לגבי פונקציית draw?

13
00:00:41,583 --> 00:00:44,109
למה היא תמיד נקראת 'draw'?

14
00:00:44,109 --> 00:00:45,904
האם היא פונקציה מותאמת אישית?

15
00:00:45,904 --> 00:00:48,894
ואלו הן שאלות מאוד טובות.

16
00:00:48,894 --> 00:00:51,985
אתה רואה, בספריית "ProcessingJS",

17
00:00:51,985 --> 00:00:56,132
הפונקציה 'draw' היא אחת מתוך כמה פונקציות
מוגדרות מראש

18
00:00:56,132 --> 00:01:01,009
מה שנותן לתוכניות שלנו יותר שליטה 
על מה שקורה עם הקנבס.

19
00:01:01,009 --> 00:01:04,831
פונקציה מוגדרת מראש היא פונקציה
שכבר הוגדרה

20
00:01:04,831 --> 00:01:07,209
על ידי ספריית ה-ProcessingJS.

21
00:01:07,209 --> 00:01:11,149
אבל לעיתים קרובות זה מתחיל 
בהגדרה ריקה (של הפונקציה).

22
00:01:11,149 --> 00:01:17,045
למשל, בספריית ה-ProcessingJS, 
יש קוד שנראה כמו זה:

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

24
00:01:19,434 --> 00:01:23,266
ואז הקוד רק ריק. ריק לחלוטין.

25
00:01:23,266 --> 00:01:28,620
עכשיו, אנחנו טוענים את ספריית 
ה-ProcessingJS 
לתוך כל תוכנית פה באקדמיית קהאן.

26
00:01:28,620 --> 00:01:30,904
אז את הקוד הזה מעולם לא ראית.

27
00:01:30,904 --> 00:01:33,647
אבל תאמין לי, הוא קיים.

28
00:01:33,647 --> 00:01:41,049
עכשיו אני אעיר שהקוד יצא מפני
ש-ProcessingJS כבר עושה לנו את זה.

29
00:01:41,049 --> 00:01:45,308
עכשיו כשאתה מגדיר שוב 'draw'
בתוכנית הפרטית שלך,

30
00:01:45,308 --> 00:01:49,809
ההגדרה החדשה "דורסת"
את ההגדרה הישנה הריקה.

31
00:01:49,809 --> 00:01:51,632
ועכשיו הפונקציה 'draw'

32
00:01:51,632 --> 00:01:55,497
עושה למעשה דברים מרגשים,
כמו לצייר מכונית.

33
00:01:55,497 --> 00:02:01,375
עכשיו השאלה היא, למה הפונקציה 'draw' 
נקראת שוב ושוב?

34
00:02:01,375 --> 00:02:05,964
טוב, בספריית ה-ProcessingJS 
יש רק קוד

35
00:02:05,964 --> 00:02:11,111
שמגדיר לדפדפן לעשות זאת ולחזור ולחזור,

36
00:02:11,111 --> 00:02:13,998
שוב ושוב ושוב.

37
00:02:13,998 --> 00:02:19,239
אנחנו צריכים לשנות לפונקציה 'draw' את
שמה, כי זה השם של הפונקציה

38
00:02:19,239 --> 00:02:22,073
ש-ProcessingJS קוראת לו שוב.

39
00:02:22,073 --> 00:02:27,543
אם נשנה את שמה, כמו 
שנשנה את זה ל 'drawCar'.

40
00:02:27,543 --> 00:02:30,730
ובהתחלה נקבל שגיאה 'ללא הגדרה',
אז אנחנו צריכים לומר 'var drawCar'.

41
00:02:33,730 --> 00:02:34,730
תוכל לראות, אם משנים

42
00:02:34,730 --> 00:02:37,087
שם ל-drawCar, אנחנו לא יכולים
לראות אנימציה כלשהי.

43
00:02:37,087 --> 00:02:39,651
וזה כך מפני שהפונקציה לא נקראת עוד

44
00:02:39,651 --> 00:02:44,692
כי היא לא נקראת 'draw'.

45
00:02:44,692 --> 00:02:47,188
אז אנו צריכים לשים את הקוד
שאנו רוצים לקרוא לו

46
00:02:47,188 --> 00:02:50,796
בתוך פונקציה שתהיה מאויתת 'draw' בדיוק.

47
00:02:50,796 --> 00:02:55,912
אז אני רק אעשה זאת שוב,
ואני רק אקרא ל-'drawCar' מכאן.

48
00:02:55,912 --> 00:03:00,594
אהה! קיבלנו את זה בחזרה.

49
00:03:00,594 --> 00:03:03,237
בסדר, אז זה צריך להיות בשם 'draw',

50
00:03:03,237 --> 00:03:07,206
וזה גם אומר שאתה חייב לקרוא
לפונקציה המותאמת אישית בשם 'draw',

51
00:03:07,206 --> 00:03:12,970
אלא אם כן אתה רוצה לטפל בהם 
באופן מיוחד, ולקרוא להם שוב ושוב.

52
00:03:12,970 --> 00:03:18,228
וגם תזכור, אתה לא יכול ליצור
פונקציות רבות בשם 'draw'.

53
00:03:18,228 --> 00:03:23,528
רק ההגדרה האחרונה תיחשב.

54
00:03:23,528 --> 00:03:27,889
אם יש לנו 'rect' פה בפנים--

55
00:03:27,889 --> 00:03:30,813
אז עכשיו אנו יכולים לראות שהמכונית
שלנו נראית שוב ושוב,

56
00:03:30,813 --> 00:03:35,143
ורק ה'rect' נראה, כי רק ההגדרה
האחרונה נחשבת.

57
00:03:35,143 --> 00:03:40,495
אז בואו ניפטר מזה.

58
00:03:40,495 --> 00:03:43,166
עכשיו הפונקציה 'draw' היא לא רק 
פונקציה מוגדרת מראש

59
00:03:43,166 --> 00:03:48,289
שיש לה פעולות מיוחדות כאלו.

60
00:03:48,289 --> 00:03:50,499
יש גם אוסף של פונקציות

61
00:03:50,499 --> 00:03:52,682
כדי להגיב לאינטרקציות עכבר
ולחיצות במקלדת.

62
00:03:52,682 --> 00:03:56,692
בואו נאמר שאנחנו רוצים שתהיה לנו תוכנית
שתצייר אליפסה צבועה

63
00:03:56,692 --> 00:04:01,624
בכל מקום שהמשתמש מעביר את העכבר...

64
00:04:01,624 --> 00:04:04,716
אז אנו יכולים לעשות זאת עם פונקציה כמו זו.

65
00:04:04,716 --> 00:04:09,042
[הקלדה]

66
00:04:09,042 --> 00:04:15,666
בסדר, או, נפלא.

67
00:04:19,998 --> 00:04:22,545
עכשיו, הפונקציה הזאת נקראת שוב ושוב,

68
00:04:22,545 --> 00:04:27,224
גם כשהמשתמש לא מזיז את העכבר,
כמו עכשיו.

69
00:04:27,224 --> 00:04:31,176
והתוכנית הזאת, היא עובדת, היא עושה 
מה שאנו רוצים שתעשה

70
00:04:31,176 --> 00:04:34,703
היא מציירת את האליפסות היפות האלה
בכל רחבי המסך.

71
00:04:34,703 --> 00:04:37,902
אבל כפי שמתברר, יש דרך טובה יותר
לעשות את אותו הדבר.

72
00:04:37,902 --> 00:04:42,114
זה יעיל יותר.

73
00:04:42,114 --> 00:04:44,288
אז אנחנו יכולים לשנות את 'draw'
ל-mouseMoved.

74
00:04:44,288 --> 00:04:51,892
וזה עדיין עובד.

75
00:04:51,892 --> 00:04:54,577
אתה רואה, הסביבה שלנו בודקת תוכניות

76
00:04:54,577 --> 00:04:58,361
כדי לראות אם יש להן פונקציה מוגדרת
mouseMoved

77
00:04:58,361 --> 00:05:00,754
ואם כך, הסביבה קוראת לפונקציה הזאת
בכל הזזת עכבר.

78
00:05:00,754 --> 00:05:05,457
אבל היא לעולם לא תיקרא
אם המשתמש לא מזיז את העכבר.

79
00:05:05,457 --> 00:05:10,029
אז לפני זה קראנו את הקוד
שבפונקציית 'draw'

80
00:05:10,029 --> 00:05:13,423
כשאנחנו לא צריכים זאת,
שוב ושוב

81
00:05:13,423 --> 00:05:15,908
ועכשיו, אנחנו קוראים את הקוד
של mouseMoved רק

82
00:05:15,908 --> 00:05:20,265
כשהערכים של mouseX או mouseY משתנים.

83
00:05:20,265 --> 00:05:23,292
אז התוכנית שלנו היא יותר יעילה, 
וזה דבר טוב.

84
00:05:23,292 --> 00:05:27,313
באופן כללי, אם אתה רק רוצה לשנות
את פלט התוכנית שלך

85
00:05:27,313 --> 00:05:30,728
כשהמשתמש מזיז את העכבר,
אז זה יותר טוב לשים את הקוד

86
00:05:30,728 --> 00:05:34,525
בתוך פונקציית 'mouseMoved'.

87
00:05:34,525 --> 00:05:37,212
ויש עוד אוסף של פונקציות מוגדרות מראש 
כמו זאת,

88
00:05:37,212 --> 00:05:40,987
ואתה יכול לראות דוגמאות נוספות 
ב-Documentation.

89
00:05:40,987 --> 00:05:44,655
כמו mousePressed, mouseReleasedm 
keyPressed, ועוד.

90
00:05:44,655 --> 00:05:48,872
אז תזכור, אם אתה רוצה להשתמש
בפונקציה מיוחדת מוגדרת מראש,

91
00:05:48,872 --> 00:05:53,993
כמו mouseMoved או draw, איית אותה נכון,
והשתמש בה נכון.

92
00:05:53,993 --> 00:05:59,244
אם לא, תוודא שאתה מביא לפונקציות
המותאמות אישית שלך

93
00:05:59,244 --> 00:06:03,410
שם חדש, ייחודי.

94
00:06:03,410 --> 00:06:05,967
בהצלחה!