[שיעור מס' 13] JavaScript

[-Smoxer-]

הקדמה

בשיעור הקודם למדנו מספר דברים:

• האירוע onabort
• האירוע onblur
• האירוע onchange
• האירוע onclick
• האירוע ondblclick
• האירוע onerror
• האירוע onfocus
• האירוע onload
• האירוע onmouseout
• האירוע onmouseover
• האירוע onmouseup
• האירוע onmousedown
• האירוע onunload

מתחילים

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

להלן תחביר לפונקציה:

function FunctionName(){
//JavaScript Code
} 

בואו נראה מה רשמנו:

function

מילה שמורה, אומרת על תחילתה של פונקציה.

FunctionName

שם הפונקציה, אפשר לשנות לכל דבר.
שימו לב:
שם הפונקציה חייב להתחיל באות.
לאחר מכן אפשר לשים רק:
A-Z (כל האותיות האנגליות)
0-9 (כל המספרים שיש)
$ (דולר)
_ (קו תחתון)

זאת אומרת שזה הולך כך:
טוב:
function MyF1
לא טוב:
function _MyF1

()

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

{

מגדיר שמפה מתחילה הפונקציה.

//JavaScript Code

קוד JS, אפשר לכתוב פה הכל. החל מהודעות קופצות ועד לכתיבה על הדף.

}

סיום הפונקציה.

לדוגמא:

function alertMessage(){
alert("A message!");
} 

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

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

alertMessage(); 

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

אבל מה?
אנו משתמשים בפונקציות בעיקר כדי שיופיעו מתי שאנו רוצים, ולא מתי שטוענים את הדף.
בדיוק בשביל זה נעשה קישור, אשר קורא לפונקציה:

<a href="javascript: alertMessage();">Message</a>

מה עשינו?
פשוט מאוד!
בקישור רשמנו:

javascript: alertMessage();

המילה:

javascript:

(שימו לב לנקודותיים)
אומרת שבקישור הזה יהיה רק JS, כלומר לעשות רק JS קוד.
הפקודה:

alertMessage();

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

נשמור, נרענן את הדף ונלחץ על הקישור.
והופ! יש לנו הודעה!

זוכרים שלמדנו על אירועים בשיעור הקודם?
אז אפשר לרשום את זה גם כך:

<a href="javascript: void(0);" onclick="alertMessage();">Message</a>

וזה יעשה אותו דבר!

להלן שימוש נחמד, הכירו את האובייקט "bgColor" שיש ב-JS, הוא אומר על צבע הרקע בדף.
למשל אם נרשום בתגית ה-head (בתוך תגיות script כמובן) את הקוד הבא:

window.document.bgColor = 'Red'; 

(שימו לב שיש "C" גדולה, זה משנה הגודל של האותיות)
וזה ישנה לנו את צבע הרקע לאדום!

בואו נעשה משהו. ניצור פונקציה אשר משנה את צבע הרקע. אבל, שיהיה לכמה צבעים. לדוגמא קוד של יצירת הפונקציות(בתגית ה-head):

function bgColor1(){
window.document.bgColor = "Red";
}
function bgColor2(){
window.document.bgColor = "Green";
}
function bgColor3(){
window.document.bgColor = "Blue";
} 

לא קרה כלום כי לא קראנו לפונקציה.
נרשום בנוסף את הקוד הבא בתגית ה-body:

<a href="javascript: bgColor1()">Change Background color 1</a>
<a href="javascript: bgColor2()">Change Background color 2</a>
<a href="javascript: bgColor3()">Change Background color 3</a>

נלחץ על כל קישור וזה ישנה צבע רקע!

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

function bgColor(Background){
window.document.bgColor = Background;
} 

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

<a href="javascript: bgColor('Red');">Change Background color 1</a><a href="javascript: bgColor('Green');">Change Background color 2</a><a href="javascript: bgColor('Blue');">Change Background color 3</a>

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

שיעורי בית

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

[menilordi]

תודה