משתנים ופונקציות ב-JavaScript

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

משתנים

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

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

בשיטה הראשונה נכתוב:

var myvar = "whatever"

var היא המילה שמצהירה שזה משתנה (מהמילה variable, משתנה, באנגלית). צריך לכתוב אותה לפני כל משתנה שמגדירים, אם נוקטים בשיטה הזאת.

myvar הוא השם שבחרתי למשתנה שלי - אפשר לבחור כל שם שרוצים, כל עוד מצייתים לכללים הבאים:

  • משתנה חייב להתחיל באות (לא מספר), או בקו תחתון _.
  • יש חשיבות לאותיות גדולות וקטנות - myvar זה לא אותו משתנה כמו myVar. אם אתם חושבים שלא תצליחו לזכור איפה יש אותיות גדולות או קטנות, השתמשו רק בקטנות - פחות בלבול.
והחלק האחרון: = "whatever" זה החלק בו נותנים ערך למשתנה. את המרכאות משאירים בכל מקרה בו מדובר על מחרוזת תווים, ומורידים אם מדובר על מספר. את המילה whatever אפשר ואף רצוי להחליף בערך שאתם רוצים להעניק למשתנה.

השיטה השנייה להגדיר משתנה היא די דומה - פשוט מורידים את המילה var:

myvar = "whatever"

אורך חיים של משתנה - גלובלי ומקומי

למשתנים יש שני סוגים של אורך חיים: יש משתנים גלובליים ומשתנים מקומיים.

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

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

פונקציות

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

פונקציות נכתוב רק בראש הדף, בין תגי ה-head.

פונקציה יכולה לקבל משתנים (כשקוראים לה), או לא לקבל משתנים. פונקציה נראית כך:

function myfunction(var1,var2,var3)
{
כאן נכתוב את הפקודות שמרכיבות את הפונקציה
אחת אחרי השנייה
}

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

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

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

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

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

איך קוראים לפונקציה?

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

אם למשל כתבנו פונקציה בשם slogan() שכותבת בכל מקום בו קוראים לה את הסיסמה שלנו, ועוברת לשורה הבאה:

function slogan()
{
document.write("בניית אתרים שמייצגים אותך <br>")
}

ואנחנו רוצים לקרוא לה מנקודה מסוימת בדף (כלומר להפעיל אותה), נכתוב:

<script type="text/javascript">
<!--
slogan()
//-->
</script>

ונקבל:

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

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

לחצו על שני הכפתורים, ותראו מה קורה לכפתור התחתון:


זה הקוד של הכפתורים (אין צורך בתגי script):

<input type="submit" value="עברית" onClick="change('כפתור')">
<input type="submit" value="אנגלית" onClick="change('button')"><br>
<input type="submit" value="" name="button1">

הדבר היחיד החדש כאן זה: onClick="change('...')"
מה שכתוב כאן זה בעצם: כשלוחצים על הכפתור (onClick), בצע את פונקציה change(), ושלח לה את הערך "כפתור" או "button".

מהי הפונקציה change()?

function change(txt)
{
document.getElementById("button1").value=txt
}

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

למעבר לנושא הבא - חלונות קופצים pop ups - לחצו כאן.

חזרה לדף javascript הראשי...