PracticU

שפת JavaScript - פונקציה Callback

בלי כתוביותעם כתוביות
PracticU › קורס NodeJS › שפת JavaScript - פונקציה Callback
מילון מושגים:
JavaScript - שפת תכנות שרצה בעיקר בדפדפן ומוסיפה אינטראקטיביות לדפי אינטרנט. רצה גם בצד השרת באמצעות Node.js.
פונקציה - קטע קוד בעל שם שמבצע משימה מוגדרת, מקבל ערכי קלט (פרמטרים) ויכול להחזיר תוצאה. מאפשרת לארגן קוד ולהשתמש בו שוב.
Callback - פונקציה שמועברת כארגומנט לפונקציה אחרת כדי שתופעל מאוחר יותר, לרוב בסיום פעולה.
פרמטר - ערך שמועבר לפונקציה או לפקודה כקלט, ומשפיע על אופן פעולתן ועל התוצאה שהן מחזירות.
דוח - מסמך או תצוגה שמסכמים נתונים בצורה מאורגנת לצורך הבנה וקבלת החלטות.

שפת JavaScript - פונקציה Callback
callback הוא פונקציה שנשלחת כפרמטר לפונקציה אחרת, והפונקציה המקבלת קוראת לה בחזרה כשצריך. השיעור מסביר את העיקרון בשלוש דוגמאות, ומראה שהפונקציה הקוראת היא שקובעת איך להשתמש בערך שמתקבל.
דוגמאות
1. דוח: פונקציית דוח מדפיסה כותרת ותוכן, ואת התאריך מקבלת מ-callback שמעביר מי שקורא לה. כך אפשר להציג את התאריך בכל פורמט.
2. חישוב: הפונקציה יוצרת שני מספרים רנדומליים ושולחת אותם ל-callback, וה-callback מחליט אם לחבר, לחלק או לעשות חישוב אחר.
3. טיימר: setTimeout מפעיל פונקציה אחרי זמן שנקבע, ו-setInterval מפעיל אותה שוב ושוב בכל פרק זמן. לשניהם מעבירים callback.
נקודה חשובה
1. בלי סוגריים: את הפונקציה מעבירים בלי סוגריים, כי הסוגריים מפעילים אותה מיד.
עכשיו אפשר לשלוח פונקציה לפונקציה אחרת, ולהבין למה קוראים לזה callback.
השיעור הבא בקורס: שפת JavaScript - פונקציה חץ - Arrow

פרקי ההרצאה: שפת JavaScript - פונקציה Callback

  1. 00:00

    העברת פונקציה כפרמטר לפונקציה אחרת

  2. 00:57

    פונקציה אנונימית שנשלחת כמשתנה

  3. 01:36

    למה הפונקציה נקראת callback

  4. 02:17

    דוגמה מהעולם האמיתי: הדפסת דוח

  5. 03:01

    קביעת פורמט התאריך בעזרת callback

  6. 04:48

    דוגמה נוספת: חישוב שהוגדר ב-callback

תמלול ההרצאה: שפת JavaScript - פונקציה Callback

הטקסט המלא של הדקות הראשונות בהרצאה «שפת JavaScript - פונקציה Callback» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

  1. 00:02

    בואו נראה איפה כן משתמשים הרבה פעמים באינליין פאנקשיונס. משתמשים בהם כפרמטר שנשלח לפונקציה אחרת. בואו ניקח כאן איזושהי פונקציה, do something, והפונקציה הזאת מבצעת console.log.tart.end, ואם אני קורא לה do something אני רואה את ה-start ואת ה-end.

  2. 00:38

    Go start the end אנחנו יכולים עכשיו להגיד לפונקציה שהיא מקבלת לסוגריים פונקציה אחרת הדבר הזה אמור להיות פונקציה והיא יכולה לקרוא לה כי זאת פונקציה כאשר אנחנו קוראים לדו סמפינג אנחנו עכשיו שולחים פונקציה לדוגמה פונקשן בצורה כזאת יש לנו פה ממש אינליין פונקשן שאנחנו כותבים או אנונימוס פונקשן אין

  3. 01:10

    לה שם אנחנו פשוט שולחים אותה כמשתנה לתוך my function ואז my function קוראת לה ואז סליחה do something קוראת לה. אם אנחנו נדפיס פה console.log doing something אז אנחנו כמובן נראה קודם כל את הסטארט ואחר מכן doing something ואז את האנד.

  4. 01:36

    כמובן שלא נהוג לכתוב את הכל בשורה אחת אם כתבנו מסולסלים אז נכון לרדת שורה בצורה כזאת. לו היינו גם קוראים לזה my function היינו קוראים לזה בשם משמעותי לדוגמא callback בואו נקרא לזה callback כי זה בעצם השם.

  5. 01:56

    למה זה נקרא callback כי אני שולח פונקציה מפה ל do something ומה do something עושה she calls me back וקוראת לי בחזרה זאת הסיבה שזה נקרא callback אז הנה זה עובד perfect בואו נראה איזה דוגמה יותר real life כזאת.

  6. 02:17

    אז בוא נניח שיש לנו כאן פונקציה פרינט פונקצ'ן פרינט ריפורט והפונקציה פרינט ריפורט רוצה להציג איזה שהוא דוח יש לנו פה ריפורט טקסט והיא מציגה קונסול לוג here is the report ומציגה קונסול לוג ריפורט טקסט ובוא נניח שיוצרת כאן קונסול לוג איזה שהוא קו הפרדה בכדי שיהיה לנו פה טיפה בשר לפונקציה,

  7. 02:58

    אבל היא רוצה להציג את התאריך ואת הסיום של הדו"ח זה שעה ותאריך, והיא יכולה להציג את זה בכל מיני פורמטים. אז היא יכולה לקבל את הפורמט להצגה, או שהיא יכולה לקבל בוא נניח time print callback ופשוט לקרוא לו פה.

  8. 03:23

    עכשיו כאשר אנחנו קוראים לפונקציה print report אנחנו יכולים לשלוח את הדו"ח עצמו is my report ואנחנו יכולים לשלוח איזשהו callback function בצורה כזאת שמכילה הדפסה של איזה תאריך אנחנו רוצים להציג ובאיזה פורמט.

  9. 03:48

    בואו ניקח const date על איזה d שווה new date ונציג d.toLocalTimeStream אם אנחנו עכשיו מריצים את זה אז אנחנו רואים שיש לנו הצגה של דוח אבל הפונקציה עצמה שנקראת print report לא קבעה איך להציג את התאריך.

  10. 04:13

    אנחנו רואים שמה שהיא יודעת לעשות זה להציג את הכותרת, קו, דו"ח, קו, ואמרה לנו תשמעו אני לא מתעסקת עם איך אתם רוצים להציג את התאריך, הנה אני קוראת לפונקציה שלכם תציגו לי את התאריך איך שבא לכם.

  11. 04:29

    בואו נציג את התאריך הפעם בואו ניקח בעצם דו"ח אחר ונציג את התאריך בשיטה אחרת, נגיד לו שהוא 2 UTC String Universal Time Coordinate והנה יש לנו סיום אחר לדו"ח.

  12. 04:48

    אז הנה דוגמה אחת בואו ניקח דוגמה אחרת ל callback בואו נשים את זה בהערה יש לנו פה function do calc והיא מקבלת a וb לא בוא נגיד דבר כזה היא יוצרת שני מספרים do calc with נמברס ויוצרת שני מספרים רנדומליים בואו ניקח קונסט a math floor math random פול 100 זה יוצר לי מספר רנדומלי בין 0 ל-100

  13. 05:25

    בואו ניקח b ועכשיו היא רוצה לקחת קונסט c ולקבל תוצאת החישוב אבל היא לא רוצה להגדיר מהו החישוב בואו ניצור פה קאלק קולבאק היא קוראת לקאלק קולבאק שולחת

לקורס המלא: קורס NodeJS אונליין בעברית

ההרצאה הקודמת: שפת JavaScript - פונקציה Inline

ההרצאה הבאה: שפת JavaScript - פונקציה חץ - Arrow

הרצאות קשורות מקורסים אחרים

  • מבוא ל-Javascript
  • פונקציה - Function
  • Javascript in JavaSelenium
  • פונקציה Scalar - עם פרמטרים

קורסים נוספים במסלול

  • קורס יסודות HTML - בניית אתר אינטרנט פשוט
  • קורס CSS 3 - בדגש על Flex & Grid
  • קורס Javascript כולל JQuery
  • קורס ג'אווה סקריפט מעשי - JavaScript
  • קורס TypeScript
  • קורס ריאקט - React