המדריך הישראלי ל-JavaScript, פרק 5

פרק 5: פונקציות

· הקדמה

· אופן הגדרתה של הפונקציה

· אופן הפעלתה של הפונקציה

· מערך הארגומנטים שקיים בפונקציה

· פונקציות מובנות בשפה

· תרגילים

הקדמה

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

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

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

אופן הגדרתה של הפונקציה

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

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

בדומה ל-JAVA ול- C\C++ גם ב- JavaScript קיים משפט הreturn -. משפט ה- return מורכב מהמילה return ומביטוי שנכתב אחריה. משפט זה גורם לכך שערכו של הביטוי מוחזר על ידי הפונקציה למקום שממנו היא הופעלה.

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

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

אופן הפעלתה של הפונקציה

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

ניתן לקרוא להפעלתה של פונקציה שהוגדרה באותו דף HTML או שהוגדרה בחלון (או Frame) אחר. ההסבר בנוגע לאופן הפעלתן של פונקציות שהוגדרו בחלון (או Frame) אחר יובא בהמשך.

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

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

<HTML>

<HEAD>

<TITLE>simpleFunctionDemo.html</TITLE>

var num1 = 3, num2 = 4;

function sum(val1, val2)

{

var result;

result = val1 + val2;

return result;

}

document.write("3 + 4 = " + sum(num1, num2));

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>

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

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

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

<HTML>

<HEAD>

<TITLE>objectFunctionDemo.html</TITLE>

var num1 = 3;

var myCar = {name: "FORD", length: 242, color: "red"};

function doubleLength(auto)

{

auto.length*=2;

}

function doubleVal(number)

{

number*=2;

}

document.write("<BR>values before:");

document.write("<BR>num1 = " + num1);

document.write("<BR>myCar.length = " + myCar.length);

doubleVal(num1);

doubleLength(myCar);

document.write("<BR>values after:");

document.write("<BR>num1 = " + num1);

document.write("<BR>myCar.length = " + myCar.length);

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>

בדומה ל-Java ול- C\C++, גם ב-JavaScript ניתן להגדיר פונקציות רקורסיביות. התכנית הבאה מדגימה אפשרות זו. התכנית מדפיסה את עשרת האיברים הראשונים בסידרת פיבונאצ'י באמצעות פונקציה רקורסיבית שמקבלת את מספרו הסידורי של איבר בסידרה, מחשבת את ערכו, ומחזירה אותו.

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

<HTML>

<HEAD>

<TITLE>RecursiveFiboFunctionDemo.html</TITLE>

var i;

function fibo(index)

{

if (index==1)

return 0;

if (index==2)

return 1;

return fibo(index-1) + fibo(index-2);

}

document.write("F I B O N A T C H Y<HR>");

for (i=1; i<10; i++)

{

document.write(fibo(i) + " ");

}

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>

מערך הארגומנטים שקיים בפונקציה

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

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

arguments[index]

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

FunctionName.arguments[index]

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

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

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

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

<HTML>

<HEAD>

<TITLE>argumentsDemo.html</TITLE>

var i;

function sum()

{

var i, sum=0;

for(i=0; i<arguments.length; i++)

sum+=arguments[i];

return sum;

}

var total = sum(1,2,3,4,5,6,7,8,9);

document.write("The sum of 1,2,3,4,5,6,7,8 and 9 is " + total);

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>

פונקציות מובנות בשפה

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

הפונקציה eval

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

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

אם המחרוזת היא אוסף של משפטים ב-JavaScript אז הפונקציה מבצעת אותם.

התכנית הבאה מדגימה את פעולתה של פונקציה זו.

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

<HTML>

<HEAD>

<TITLE>evalFunctionDemo.html</TITLE>

var i;

var str1 = "document.write(\"Hello Israel\"); document.write(\"<BR>Hello World\");";

var str2 = "3 + 4";

document.write("<BR><BR>The value of str1 is : " + eval(str1));

document.write("<BR><BR>The value of str2 is : " + eval(str2));

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>

הפונקציה isFinite

פונקציה זו משמשת לבדיקת היותו של משתנה נתון בעל ערך מספרי. בקריאה להפעלת הפונקציה שולחים ארגומנט אחד, והפונקציה מחזירה true אך ורק אם המשתנה בעל ערך מספרי או null. בכל מקרה אחר, לרבות ערכים כגון NaN, positive infinity או negative infinity, הפונקציה מחזירה את הערך false. הערכים NaN, positive infinity ו negative infinity ב-JavaScript בעלי משמעות לזו שב-Java. ערכים מיוחדים אלה יוסברו בהמשך הספר.

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

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

<HTML>

<HEAD>

<TITLE>isFiniteFunctionDemo.html</TITLE>

document.write("<BR>isFinite(\"ISRAEL\")=" + isFinite("ISRAEL"));

document.write("<BR>isFinite(\"3 + 4\")=" + isFinite("3 + 4"));

document.write("<BR>isFinite(3 + 4)=" + isFinite(3+4));

document.write("<BR>isFinite(1/0)=" + isFinite(1/0));

document.write("<BR>isFinite(-1/0)=" + isFinite(-1/0));

document.write("<BR>isFinite(0/0)=" + isFinite(0/0));

document.write("<BR>isFinite(null)=" + isFinite(null));

document.write("<BR>isFinite(document)=" + isFinite(document

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>

הפונקציות Number

הפונקציה Number מקבלת ארגומנט אחד שהוא אובייקט (או ליתר דיוק, reference לאובייקט) ומחזירה את תרגומו לערך מספרי.

התכנית הבאה מדגימה את השימוש בפונקציה זו.

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

<HTML>

<HEAD>

<TITLE>NumberFunctionDemo.html</TITLE>

var myCar = {name: "FORD", length: 242, color: "red"};

document.write("Number(myCar)=" + Number(myCar));

var toDay = new Date();

document.write("<BR>Numbet(toDay)=" + Number(toDay));

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>

הפונקציה String

הפונקציה String מקבלת ארגומנט אחד שהוא אובייקט (או ליתר דיוק, reference לאובייקט) ומחזירה את תרגומו למחרוזת תווים.

התכנית הבאה מדגימה את השימוש בפונקציה זו.

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

<HTML>

<HEAD>

<TITLE>StringFunctionDemo.html</TITLE>

var myCar = {name: "FORD", length: 242, color: "red"};

document.write("String(myCar)=" + String(myCar));

var toDay = new Date();

document.write("<BR>String(toDay)=" + String(toDay));

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>

הפונקציה isNaN

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

התכנית הבאה מדגימה את פעולתה של פונקציה זו.

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

<HTML>

<HEAD>

<TITLE>isNaNFunctionDemo.html</TITLE>

document.write("<BR>isNaN(\"ISRAEL\")=" + isNaN("ISRAEL"));

document.write("<BR>isNaN(\"3 + 4\")=" + isNaN("3 + 4"));

document.write("<BR>isNaN(3 + 4)=" + isNaN(3+4));

document.write("<BR>isNaN(1/0)=" + isNaN(1/0));

document.write("<BR>isNaN(-1/0)=" + isNaN(-1/0));

document.write("<BR>isNaN(0/0)=" + isNaN(0/0));

document.write("<BR>isNaN(null)=" + isNaN(null));

document.write("<BR>isNaN(document)=" + isNaN(document));

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>

הפונקציות parseInt ו- parseFloat

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

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

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

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

<HTML>

<HEAD>

<TITLE>parseInt_parseFloat_FunctionsDemo.html.html</TITLE>

document.write("<BR>parseInt(\"15\")=" + parseInt("15"));

document.write("<BR>parseFloat(\"10.450\")=" + parseFloat("10.450"));

document.write("<BR>parseFloat(\"10.4s50\")=" + parseFloat("10.4s50"));

document.write("<BR>parseFloat(\"s10.450\")=" + parseFloat("s10.450"));

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>

תרגילים

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

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

3. כתוב/כתבי תכנית שכוללת בתוכה פונקציה רקורסיבית אשר מחשבת את העצרת של המספר שהיא מקבלת, ומחזירה אותו.

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

5. כתוב/כתבי תכנית אשר תחשב את הסכום של המספרים 1 עד 10 באמצעות הפונקציה eval.

6. כתוב/כתבי תכנית אשר תכלול בתוכה הפעלה של הפונקציה isFinite על ביטוי מספרי. עליך לכתוב ביטוי כזה שהפונקציה תחזיר false.

7. כתוב/כתבי תכנית אשר תדפיס על המסך הסבר לכל אחת מהפונקציות הבאות: Number, String, isNaN, parseInt ו- parseFloat. התכנית תכלול גם הדגמה של כל אחת מהפונקציות. כל אחת מההדגמות תופיע בצמידות להסבר המתאים.

No parts of the contents of this paper may be reproduced or transmitted in any form by any means

without the written permission of the publisher ! This book can be used for personal use only !!!

Brought to you by Zindell

(http://www.zindell.com)

לנוחיותך, להלן תוכן העניינים של הספר:

פרק 1 : הבסיס
פרק 2 : ערכים בסיסיים
פרק 3 : אופרטורים
פרק 4 : משפטי בקרה ולולאות
פרק 5 : פונקציות
פרק 6 : אובייקטים
פרק 7 : אובייקטים מובנים בשפה
פרק 8 : אופן פעולת האובייקטים
פרק 9 : תבניות טקסט
פרק 10 : שילוב של JavaScript ו- HTML
פרק 11 : טיפול באירועים
פרק 12 : האובייקטים שנוצרים בדפדפן
פרק 13 : האובייקט Navigator
פרק 14 : האובייקט Window
פרק 15 : האובייקט Document
פרק 16 : האובייקט Location
פרק 17 : האובייקט History
פרק 18 : יצירת cookies
פרק 19 : האובייקטים Link ו- Anchor
פרק 20 : האובייקט Image
פרק 21 : יצירת Image Map
פרק 22 : האובייקט Form
פרק 23 : טכנולוגית ה- LiveConnect