פונקציות בשפת - Javascript

פונקציה בשפת Javascript היא קטע קוד ובו משפט קוד אחד או יותר המאוגד תחת שם אחד. ניתן לקרוא ולהריץ פונקציות ב - Javascript פעם אחת או יותר. פונקציה ב - Javascript יכולה להכיל פרמטרים, המשמשים כמשתנים מקומיים בתוך הפונקציה. פרמטרים אלה מקבלים את ערכיהם הראשוניים בעת שקוראים לפונקציה. פונקציות יכולות גם להחזיר ערכים.

פונקציות Javascript יכולות לקנן אלו בתוך אלו ויש להן גישה למשתנים שבתוך הפונקציות שבתוכן הוגדרו. משמעות הדבר שאם נתונות לנו שלוש פונקציות שהשנייה מוגדרת בתוך הראשונה והשלישית מוגדרת בתוך השנייה אזי לפונקציה השלישית יש גישה לכל המשתנשים שהוגדרו בפונקציה הראשונה ובפונקצייה השנייה וכמובן גם לכל המשתנים שהוגדרו בה עצמה.

אם פונקציה מוגדרת לתכונה (property) של אובייקט היא מתפקדת כ - method. פונקציות שתוכננו ליצור אובייקט חדש נקראות constructor. בכלל, ב - Javascript פונקציה היא אובייקט. כאובייקט, פונקציה יכולה להיות בעלת תכונות (properties) שניתן להציב בהן ערכים, Methods שניתן להפעיל ועוד.

כללים להגדרת פונקציות Javascript רגילות

פונקציות ב - Javascript נגדיר באופן כללי כך:

function functionName(Parameter1, Parameter2...){
Javascript statement/s;
return value;
}

ראשית נשתמש במילת המפתח function (באדום בדוגמה למעלה). לאחר מכן ניתן לפונקציה שלנו שם (בירוק בדוגמה שלנו). לאחר מכן יבואו סוגריים רגילים ובתוכם ישנה אפשרות להגדיר פרמטרים שהפונקציה מקבלת. לאחר מכן יבואו סוגריים מסולסלים (בסגול בדוגמה שלנו). לאחר מכן יבואו משפטי הקוד שמרכיבים את הפונקציה. הפונקציה יכולה (אך לא חייבת) להחזיר ערך ולשם כך נשתמש במילה return (בחום בדוגמה שלנו) ולאחר מכן יבוא הערך שהפונקציה תחזיר. לבסוף יחתמו את הפונקציה שלנו סוגריים מסולסלים (בסגול).

להלן דוגמה מעשית לפונקציה (הכפלת שני מספרים זה בזה) המקבלת שני פרמטרים ומחזירה ערך

function MultyplyNumbers(number1, number2) {
  val n = (number1 * number2);   
  return n;
}

להלן דוגמה מעשית לפונקציה (לשינוי כתובת חלון) המקבלת פרמטר אחד ואינה מחזירה ערך

function ChangeURL(url) {
document.location=url;
}

כללים להגדרת פונקציות Javascript ליטראליות

הדרך המקובלת להגדרת פונקציות היא הדרך שאותה תיארתי בסעיף הקודם, אולם ישנה דרך נוספת להגדרת פונקציות הנקראות: literal functions. התחביר להגדרת פונקציה כזו דומה למדי לתחביר שבהגדרת פונקציה רגילה ההבדל הוא שבעוד אנו מגדירים פונקציה רגילה באמצעות משפטי Javascript (Statements) פונקציות ליטראליות נגדיר באמצעות ביטוי ולא נדרש לספק שם לפונקציה.

הצורה הכללית להגדרת פונקציה ליטראלית היא:

var VariableName = function(param1, param2...){
Javascript Statemenets
};

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

דוגמה להגדרה מעשית של פונקציה ליטראלית

var multiply = function(x,y){ return x*y };

כדי לקרוא לפונקציה זו נשתמש בדרך הבאה:

multiply(2.5,4); // The result will be 10

בחירת שמות לפונקציות ב - Javascript

ב - Javascript אין כללים מיוחדים לגבי האופן שבו על מזהים להיות מלבד העובדה שהם חייבים להתחיל באחת מן האותיות האנגליות, בקו תחתי או בסימן דולר. מעבר לזה אין כללים מיוחדים לבחירת שמות לפונקציות, אולם כדאי להשתמש בכללי האצבע הבאים בעת בחירת שם:/p>

  • רצוי לבחור בשם שממנו ניתן להבין מה הפונקציה  עושה;
  • רצוי לבחור בשם קצר ואינטואיטיבי;
  • למרות שמבחינת התחביר של השפה אפשר גם אחרת, רצוי ששם הפונקציה יתחיל באותיות ולא במספרים או סימנים אחרים.
  • כחריג לכלל הקודם, רצוי להתחיל פונקציה שבה יש פנייה לספריית קוד חיצונית כ - jQuery בסימן $.

היות ובשפה עצמה אין המלצה לגבי הסטנדרט לכתיבת שמות (פונקציות, משתנים וכד') גורמים חיצוניים נסחו סטנדרטים לכתיבתם. שניים שכדאי לבחון את המלצותיהם הם:

  1. מדריך הסגנון של גוגל;
  2. מדריך הסגנון והקונוונציות של דאגלס קרוקפורד.

פונקציות מקננות

בשפת Javascript פונקציות יכולות לקנן בתוך פונקציות אחרות. כלומר, פונקציה יכולה להיות מוגדרת בתוך פונקציה אחרת. לדוגמא:

function GetHalfOfSumOf(a, b) {
var No = (a + b);
function HalfOf(x) { return x/2; }
return HalfOf(No);
}

בדוגמה שלמעלה הפונקציה HalfOf (בירוק) מוגדרת בתוך הפונקציה GetHalfOfSumOf (באדום) ונעשה בה שימוש ממש כאילו הוגדרה מחוץ לפונקציה. ההבדל בין פונקציה המוגדרת בתוך פונקציה אחרת לבין פונקציה רגילה הוא שפונקציה המוגדרת בתוך פונקציה אחרת אינה מתקיימת מחוץ לפונקציה שבתוכה היא מקננת. במקרה שלנו, הפונקציה HalfOf קיימת רק כאשר קוראים לפונקציה GetHalfOfSumOf שבתוכה היא מקננת. לא ניתן לקרוא לפונקציה GetHalfOf שלא מתוך הפונקציה GetHalfOfSumOf.

הערה: פונקציות המוגדרות באמצעות מילת המפתח function אינן יכולות להיות מוגדרות בתוך לולאות או משפטי תנאי. אין מגבלה זו חלה על פונקציות המוגדרות כפונקציות ליטראליות (ראו למעלה).

קריאה לפונקציות מתוך קוד Javascript

בצורתה הבסיסית קריאה לפונקציה היא פשוטה: כל מה שיש לעשות הוא לנקוב בשפ הפונקציה לאחר מכן יש לשים סוגריים רגילים ובתוך הסוגריים לעביר את הארגומנטים לפונקציה (במידה וישנם) או להשאיר את הסוגריים ריקים במידה ואין פונקציה זו מקבלת ארגומנטים. לדוגמא כך:

GetHalfOfSumOf(10, 15);

קריאה לפונקציה מתוך אירוע (Event)

על אירועים (Events) עוד נלמד בהמשך מדריך זה, אולם ככלל ניתן לומר שאירוע היא פעולה המזוהה על ידי Javascript כגון פתיחת חלון, לחיצה על עלמנט, מעבר עם העכבר על אלמנט בדף וכדומה. בדוגמה הבאה נקרא לפונקציה באירוע של הקלקה בעכבר על קישור בדף HTML:

<a href="#" onclick="alert_box()">Click Me</a>

בדוגמה למעלה השתמשנו בקישור כדי להפעיל פונקציה ששמה alert_box במקרה שמקליקים על הקישור. בדוגמה שלנו הפונקציה אינה מקבלת ארגומנטים ולכן הסוגריים המעוגלים ריקים.

קריאה לפונקציה כמתודה (Method) של אובייקט

פונקציה מסוג זה נבדלת מפונקציה רגילה בכך שהפוקנציה הושמה לתכונה (property) באובייקט כלשהו. נניח שיצרנו אובייקט O ולאובייקט זה יצרנו תכונה P. ביכולתנו להשים את הפונקציה F לתכונה P שבאוסייקט O בדרך הבאה:

O.P=F;

כעת, משנרצה לקרוא לפונקציה F שאותה יצרנו באובייקט O כל מה שעלינו לעשות הוא:

O.P();

קריאה לפונקציות קונסטרוקטור (Constructor Functions)

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

var obj = new somefunction();

שימוש במתודות apply ו - call לצורך קריאה לפונקציות

פונקציות ב - Javascript הן אובייקטים לכל דבר ועניין. כאובייקטים יש להן מתודות. בעזרת שתיים מהן ביכולתנו לקרוא לפונקציות בצורה עקיפה. נניח לדוגמה שנתונה לנו הפונקציה הבאה:

var func = function(){
alert('hello!');
};

נוכל לקרוא לפונקציה זו באמצעות המתודות call או - apply באופן הבא:

func.apply;

func.call;

ההבדל בין שתי הדרכים הללו היא שבמקרה ויש להעביר לפונקציה ארגומנטים אזי כאשר נקרא לפונקציה באמצעות המתודה apply נידרש להעביר את הארגומנטים כמערך (array) ואילו כאשר נשתמש במתודה call נצטרך להעביר לפונקציה את הארגומנטים שלה ברשימה.

 

 
 
© 2010-2013  www.Devschool.co.il | מדיניות פרטיות | תנאי שימוש