פונקציות וארגומנטים של פונקציות ב-JavaScript

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

פונקציות נמצאות בכל מקום בתכנות.

לדוגמה,

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

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

פונקציה ראשונה של JavaScript

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

כך נראה תחביר הפונקציה:

function name()  {
   // קוד הפונקציה
}

לדוגמה, הפונקציה הבאה ששמה hello שמייצרת פופ-אפ עם המילה "שלום":

function hello()  {
  alert("שלום");
}

• שם הפונקציה יכול להכיל אותיות אנגליות, ספרות וקו תחתון.
• האות הראשונה יכולה להיות אותיות או קו תחתון.

קריאה לפונקציה

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

// קריאה לפונקציה
hello();

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

כך נראה הקוד המלא של מה שכתבנו עד כה:

<script>
// הכרזה על פונקציה
function hello()  {
  alert("שלום");
}

// קריאה לפונקציה
hello();
</script>

כשנריץ את הקוד, יופיע הפופ-אפ הבא על המסך.

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

פונקציות שמקבלות ארגומנט

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

בואו נוסיף לפונקציה את הארגומנט name, שיקבל את שמו של האדם שרוצים לברך, ויציב אותו בתוך ה-alert.

function hello(name)  {
    alert("שלום " + name);
}

אנו מכריזים על הארגומנט בתוך הסוגריים העגולים.

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

hello("ברוך");

• מכיוון ש "ברוך" הוא מחרוזת, נעביר את הערך בין מירכאות כפולות.

כך נראה הקוד המלא:

<script>
// נגדיר את הפונקציה
function hello(name) {
  alert("שלום " + name);
}

// נקרא לפונקציה ונעביר את הפרמטר
hello("ברוך");
</script>

וזה הפופ-אפ שנראה כשנריץ את הקוד:

פונקציות שמקבלות יותר מארגומנט אחד

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

• from המשתנה עם שמו של נותן הברכה.
• to המשתנה עם שמו של מקבל הברכה.

כך נראית הפונקציה:

function hello(from, to)  {
  alert(from + " מברך את " + to);
}

כך נקרא לפונקציה כדי ש "ברוך" יברך את "תקווה".

<script>
function hello(from, to)  {
  alert(from + " מברך את " + to);
}

hello("תקווה","ברוך");
</script>

כשנריץ את הקוד, נקבל את הפופ-אפ הבא:

פרמטרים ברירת מחדל

לא תמיד נרצה או נוכל להעביר פרמטרים, וכדי להימנע מתוצאות בלתי צפויות חשוב שנכיר את השיטה להצבת פרמטרים ברירת מחדל.

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

<script>
function hello(from, to)  {
  if(from === undefined){
    from = "א";
  }
  if(to === undefined){
    to = "ב";
  }
  alert(from + " מברך את " + to);
}
 
hello();
</script>

ואפשר לכתוב את אותו הדבר אבל יותר בקיצור:

<script>
function hello(from, to)  {
  from = from || "א";
  to =  to || "ב";

  alert(from + " מברך את " + to);
}
 
hello();
</script>

מה הלאה?

במדריך הבא בסדרת מדריכי ה-JavaScript נלמד כיצד להחזיר ערכים מתוך פונקציות.

אדיוס אמיגוס!

לכל מדריכי ה-javascript

אהבתם? לא אהבתם? דרגו!

0 הצבעות, ממוצע 0 מתוך 5 כוכבים