פורום אטרף - [שיעור מס' 13] JavaScript

הקדמה

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

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

מתחילים

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

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

קוד PHP:


function FunctionName(){
//JavaScript Code
}

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

function

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

FunctionName

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

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

()

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

{

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

//JavaScript Code

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

}

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

לדוגמא:

קוד PHP:


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

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

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

קוד PHP:


alertMessage();

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

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

קוד HTML:

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

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

javascript: alertMessage();

המילה:

javascript:

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

alertMessage();

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

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

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

קוד HTML:

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

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

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

קוד PHP:


window.document.bgColor = 'Red';

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

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

קוד PHP:


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

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

קוד HTML:

<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>

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

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

קוד PHP:


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

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

קוד HTML:

<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>

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

שיעורי בית

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

שם משתמש		זכור אותי	רישום לאתר
סיסמה		שכחת סיסמה?

קהילות פורומים, הורדות, יעוץ ותמיכה

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

עוד באטרף