| ה ש כ ל ה |
| ה ע ש ר ה |
| פ נ א י |
| כ י ף |
תכנות עם JavaScript
בעזרת שפת HTML כתבנו דפי אינטרנט המכילים מלל, טבלאות, רשימות, תמונות ועוד. לדפי האינטרנט שכתבנו הענקנו עיצוב מיוחד בעזרת CSS. דפים אלו מציגים מידע לגולש, אך אינם מעבדים את המידע ואינם יכולים לקלוט מידע מהגולש ולפעול על פיו. אמנם יש ביכולתנו להכין טפסים אותם ימלא הגולש, אך עד כה לא השתמשנו בקלט שהגיע מהגולש. לשם כך דרושה שפת תכנות. שפת התכנות הנפוצה ביותר לבניית אתרים היא JavaScript.
שפת התכנות JavaScript הינה שפת תכנות פשוטה ביותר אותה כל אחד יכול ללמוד בקלות. שפה זו נפוצה ביותר בבניית אתרי האינטרנט. היא אינה דורשת עיבוד מיוחד על-ידי כלי תוכנה כלשהו ואינה דורשת רישיון הפעלה.
מיקום הקוד
את קוד התוכנה ניתן למקם בתוך הקובץ HTML, כך:
<script type="text/javascript">
…
</script>
אם הקוד ממוקם בין תגיות ה- <body> אזי הוא יבוצע מיידית עם העלאת דף האינטרנט.
אם הקוד ממוקם בין תגיות ה- <head> אזי הוא יבוצע רק כשנקרא לו.
על פי רוב האפשרות השנייה היא זו שיותר בשימוש. בדרך-כלל נרצה לבצע את פונקציות קוד התוכנה רק על פי בקשת הגולש. רק לעיתים רחוקות נרצה שקוד מסוים יתבצע מייד עם העלאת הדף ללא שום פנייה מהגולש.
למרות שניתן למקם את קוד התוכנה בין תגיות ה- <head> בתוך הקובץ HTML עצמו, הרי שנעדיף למקמו בקובץ נפרד מאותן סיבות שעיצוב האתר נפרד מהתוכן עצמו.
ריכוז פונקציות הקוד בקובץ נפרד מקל על קריאת קובץ ה- HTML עצמו, מאפשר שיתוף פונקציות קוד על פני דפי אינטרנט שונים ועוד. קובץ המכיל קוד JavaScript הוא בעל סיומת של .js
הקריאה לקובץ המכיל את הקוד תהיה מתוך חלק ה- HEAD של הדף בלבד. הקריאה לקובץ מתבצעת כך:
<script type="text/javascript" src="file_name.js">
</script>
מבנה השפה
נעבור בקצרה על חוקי מבנה השפה הבסיסיים.
קוד של שפת JavaScript מכיל שורות פקודה. להלן דוגמה של שורת פקודה בסיסית הכותבת על המסך את המלל – "Hello World!".
document.write("Hello World!");
שורות הפקודה מבוצעות אחת אחרי השנייה לפי סדר כתיבתן.
document.write("This is a first line");
document.write("This is a second line");
כל פקודה נכתבת בשורה נפרדת. ניתן ורצוי, אך לא חובה, לסיים כל שורת קוד בתו נקודה-פסיק. ניתן לצרף ולכתוב יותר מפקודת קוד אחת בשורה על-ידי הפרדתן בתו נקודה-פסיק, אך צורת כתיבה זו לא קריאה במיוחד.
ניתן להוסיף הערות תיעוד לקוד. ניתן להוסיף שורת הערה, הערה בסוף שורת קוד ואף קטע הערה שלם על פני כמה שורות.
// this is a comment line
document.write("This is a first line"); // this is a commnet at end of a code line
/* this is a section of comments
spreaded over more then one line */
document.write("This is a second line");
כדי ששורות קוד יבוצעו יחד כמקשה אחת יש לאגד אותם בעזרת סוגריים מסולסלות.
{
document.write("This is a first line");
document.write("This is a second line");
}
הערה: בקטע קוד הנ"ל אין לסוגריים המסולסלות משמעות. חשיבותם היא באיגוד מספר שורות קוד תחת בלוק אחד המתבצע בהתניה או כפונקציה וכדומה. דוגמאות לכך יופיעו בהמשך.
כתיבת המלל על המסך בדוגמאות הנ"ל התבצע בעזרת הגישה למסמך עם הפניה document. פניות למסמך, לתגיות בתוך המסמך ועוד יילמדו בהרחבה בפרק נפרד הדן בגישה בעזרת HTML DOM.
פונקציות
השימוש העיקרי בשפת JavaScript הוא בכתיבת פונקציות. הקריאה לפונקציות תתבצע מתוך תגית HTML כאשר מאורע מסוים מתרחש – למשל הקלקה על לחצן ימני של העכבר על אלמנט התגית, מעבר סמן העכבר מעל אלמנט התגית וכולי.
למשל, נניח שברצוננו לשנות את צבע הרקע של החלון מיד עם טעינת הדף. הנה קוד דוגמה לכך.
קריאה לפונקציה יכולה להיות עם ערכים של משתנים. הערכים מועברים בתוך הסוגרים הצמודים לשם הפונקציה. בדוגמה הנ"ל אף אחת מהפונקציות לא כוללת משתנים ולכן לא מועברים אחרים כלשהם עם הקריאה של הפונקציה. למרות שאין משתנים חובה להוסיף את הסוגרים המעוגלים גם כשהם ריקים ואינם מכילים דבר. בהמשך נראה גם דוגמאות בהם מועברים ערכי משתנים לפונקציה.
הקריאה לפונקציה התבצעה בזמן אירוע טעינת הדף. בתת פרק הבא נלמד על סוגי האירועים השונים אותם ניתן לנצל כדי לבצע קטעי קוד ואו לבצע קריאה לפונקציות.
הערה: בפרקים הבאים יובאו דוגמאות של קטעי קוד JavaScript כאשר הם ממוקמים בתוך גוף הדף (תחום ה- body) ולא מוגדרים כפונקציות בקובץ נפרד. זאת לשם נוחות הבאת הדוגמאות בלבד ולא מומלץ לנהוג כך בבניית אתרים.
אירועים
להלן רשימה של אירועים אפשריים שניתן לצרף לתגיות HTML ובעזרתן לבצע קודי תכנה קטנים כדוגמת קריאה לפונקציות JavaScript:
| תגי HTML | מאורע | תיאור |
|---|---|---|
| תגית body | onload onunload |
טעינת דף אינטרנט הסרת דף אינטרנט |
| רוב התגיות | onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup |
קליק על לחצן עכבר שמאלי קליק כפול על לחצן עכבר שמאלי לחיצה מטה על לחצן עכבר הזזת סמן העכבר יציאת סמן עכבר מתחום כניסת סמן עכבר לתחום שחרור לחצן עכבר מעלה |
| רוב התגיות | onkeydown onkeypress onkeyup |
לחיצה מטה על מקש קליק על מקש שחרור מקש מעלה |
| תגיות טופס בלבד | onchange onsubmit onreset onselect onblur onfocus |
שינוי בחירה שיגור טופס איפוס טופס בחירה איבוד מיקוד רכישת מיקוד |
משתנים
שפת JavaScript ככל שפת מחשב מאפשרת לבצע פעולות חישוב מספריות ופעולות על מחרוזות של אותיות. על מנת לבצע את פעולות אלו ניתן להגדיר משתנים המכילים ערכים מספריים או מלל.
הצהרה על המשתנים תהיה מהצורה הבאה:
var client_number;
var client_fname;
ניתן לקבוע ערך התחלתי למשתנים בזמן הצהרתם:
var client_number = 17;
var client_fname = "david"
שפת JavaScript הינה סלחנית. אם משתנה מקבל ערך מבלי שהוצהר קודם תחשב שורת ההשמה כשורת הצהרה אפילו שאין בה בתחילתה את המילה var.
בשפת JavaScript יש הבחנה בין אותיות גדולות לבין אותיות קטנות. לכן שני המשתנים הבאים הם שני משתנים שונים:
var firstname = "david"
var firstName = "solomon"
כמו בכל שפת מחשב גם ב- JavaScript ניתן לבצע פעולות מתמטיות בין המשתנים המכילים ערכים מספריים. להלן טבלה המרכזת את הפעולות המתמטיות הנתמכות:
| פעולה | דוגמה | תיאור |
|---|---|---|
| + | sum = a + b | חיבור |
| - | diff = a - b | חיסור |
| * | area = length * height | מכפלה |
| / | average = sum / 2 | מנה |
| % | reminder = sum % 2 | שארית |
| ++ | counter = ++counter | קידום באחד |
| -- | countdwn = --countdwn | חיסור באחד |
כאשר ההשמה מתבצעת לתוך אחד מהמשתנים שבינם מתבצעת הפעולה ניתן להשתמש בצורת כתיבה מקוצרת. להלן טבלה המרכזת את צורות הכתיבה המקוצרות:
| השמה מקוצרת | השמה רגילה | תיאור |
|---|---|---|
| a+=b | a=a+b | חיבור |
| a-=b | a=a-b | חיסור |
| a*=b | a=a*b | מכפלה |
| a/=b | a=a/b | מנה |
| a%=b | a=a%b | שארית |
מחרוזות
משתנה מיוחד הוא משתנה מסוג מחרוזת. משתנה מסוג זה מכיל מחרוזת של תווים. הצהרה על משתנה מחרוזת היא מהצורה הבאה:
var my_string_name = new String("my string text")
ניתן גם להצהיר על משתנה מחרוזת בצורה מקוצרת:
var my_string_name = "my string text"
על משתנה מחרוזת ניתן להפעיל קריאות המספקות נתונים שונים על המחרוזת וניתן גם להפעיל מתודות מיוחדות.
| קריאות | תיאור |
|---|---|
| .length | אורך המחרוזת – מספר התווים |
| .prototype | מאפשר הוספת פרוצדורות אישיות למחרוזת |
| מתודות הצגה | תיאור |
| .fontcolor(color) | הצגת המחרוזת בצבע גופן נבחר |
| .fontsize(size) | הצגת המחרוזת בגודל גופן נבחר |
| .fixed() | הצגת המחרוזת בגופן האחיד teletype |
| .bold() | הצגת המחרוזת בהדגשה |
| .italics() | הצגת המחרוזת בגופן בעל הטיה |
| .strike() | הצגת המחרוזת עם קו חוצה |
| .small() | הצגת המחרוזת באותיות בגודל קטן יותר |
| .big() | הצגת המחרוזת באותיות בגודל גדול יותר |
| .sub() | הצגת המחרוזת ככתב תחתי |
| .sup() | הצגת המחרוזת ככתב עילי |
| .toLowerCase() | הצגת המחרוזת באותיות קטנות |
| .toUpperCase() | הצגת המחרוזת באותיות גדולות |
| .blink() | הצגת המחרוזת מהבהבת (לא נתמך ב- IE) |
להלן מחרוזת דוגמה עליה מופעלות מתודות ההצגה.
| מתודות | HTML תיאור |
|---|---|
| .anchor(anchor_name) | הענקת עוגן למחרוזת, כמו התגית a |
| .link(url) | הענקת הפניית קישור למחרוזת |
| מתודות שליפת תווים | תיאור |
| .charAt(index) | מחזיר את התו הנמצא במיקום מסוים |
| .charCodeAt(index) | מחזיר את התו הנמצא במיקום מסוים, בקוד unicode |
| .fromCharCode(number, number, …) | מחזיר תו(ים) מטבלת קוד unicode בהתאם למספר(ים) |
| מתודות שליפת תת-מחרוזת | תיאור |
| .substr(index, length) | מחזיר תת-מחרוזת החל מאינדקס ובאורך שצוין (אם לא מצוין אורך אז עד סוף המחרוזת) |
| .substring(start_index, end_index) | מחזיר תת-מחרוזת החל מאינדקס התחלה ועד לאינדקס סיום (או סוף המחרוזת אם הוא חסר) |
| .slice(start_index, end_index) | כמו .substring() |
| מתודות חיפוש תת-מחרוזת | תיאור |
| .match(substring) | מחזיר את התת-מחרוזת אם נמצאה, אחרת null |
| .search(substring) | מחזיר את המיקום בו מתחילה תת-מחרוזת בתוך המחרוזת החל מתחילתה |
| .indexOf(substring, index) | מחזיר את המיקום בו מתחילה תת-מחרוזת בתוך המחרוזת החל מהאינדקס המצוין |
| .lastIndexOf(substring, index) | מחזיר את המיקום האחרון בו מתחילה תת-מחרוזת בתוך המחרוזת. החיפוש מתחיל מהמיקום המצוין וממשיך אחורה לתחילת המחרוזת |
| מתודות פעולה על מחרוזת | תיאור |
| .concat(string1, string2, …) | שרשור מחרוזות (שתיים או יותר) למחרוזת אחת |
| .replace(substring, newsubstring) | מחליף תת-מחרוזת בתת-מחרוזת חדשה |
| .split(split_string, number) | מחזיר תתי-מחרוזות של המחרוזת המופרדות במחרוזת הפיצול שצוינה. יש אופציה להגביל את מספר תתי-המחרוזות שיוחזרו, אחרת יוחזרו כולן |
הערה: מספור התווים במחרוזת מתחיל מאפס!
להלן מחרוזת דוגמה עליה מופעלות המתודות הנ"ל.
ישנם תווים מיוחדים שדורשים סימון מיוחד כדי לכלול אותם בתוך מחרוזת תווים. לתווים אלו, כמו גרשיים, טאב, ירידת שורה ועוד, יש להצמיד את התו הלוכסן. להן טבלה של אותם תווים מיוחדים:
| תו לוכסן ואחריו תו מיוחד | משמעות במחרוזת |
|---|---|
| \' | ' |
| \" | " |
| \& | & |
| \\ | \ |
| \n | שורה חדשה |
| \r | החזרת סמן לתחילת שורה |
| \t | טאב |
| \b | רווח |
| \f | למדפסת: התקדם לראש הדף |
לדוגמה בחן את הקוד הבא.
שים לב: כדי לרדת שורה הוכנסה במחרוזת התגית המתאימה ולא התו המיוחד n\. הסיבה לכך היא שהמחרוזת נשלחת לביצוע על ידי מפענח של קוד HTML לפני הצגתה על המסך ולא למפענח של קוד JavaScript.
התניות ופיצולים
משפט IF מאפשר בחירה בין מספר קטעי קוד לביצוע. הקוד שיבוצע הינו הקוד הראשון שהתנאי המקדים את ביצועו מתקיים. לכן יש לסדר את קטעי הקוד ואת התניותיהן לפי סדר עדיפות: מהחשוב ביותר ולפחות חשוב.
עץ מלא של משפט IF יראה מהצורה הבאה:
if (condition1) {
JavaScript Code1
} else if (condition2) {
JavaScript Code2
} … {
} else if (conditionN) {
JavaScript CodeN
} else {
JavaScript CodeN+1
}
להלן קוד לדוגמה תוך שימוש במשפט IF.
אין חובה לשרשר מספר רב של התניות (else if) ואין חובה לכלול קטע קוד חלופי שיתבצע אם אף התניה לא התקבלה (else).
משפט IF הפשוט ביותר יכלול רק התניה אחת שאם לא תתקבל לא יבוצע שום קטע קוד תחליפי:
if (condition) {
JavaScript Code
}
במקרה בו ישנם מספר רב של התניות שונות ואין בינן עדיפות נוח יותר וקריא יותר להשתמש במבנה התניות מסוג switch. מבנה התניות מסוג switch נראה כך:
switch (variable) {
case condition1 :
JavaScript Code1
break;
case condition2 :
JavaScript Code2
break;
…
case conditionN :
JavaScript CodeN
break;
default :
JavaScript CodeN+1
}
להלן קוד לדוגמה תוך שימוש ב- Case.
לולאות
כדי לחזור ולבצע את אותו קטע קוד יותר מפעם אחת נרצה להשתמש במבנה של לולאה.
ישנם שני סוגים שונים של לולאות. לולאת for המבוצעת מספר פעמים הידוע מראש ולולאת while המבוצעת כל תנאי מסוים מתקיים.
מבנה לולאת for נראה כך:
for (variable=init_value; variable < stop_value; variable=variable+incr_value) {
JavaScript Code
}
על פי רוב יקודם משתנה הלולאה באחד כל פעם שהקוד מבוצע (כלומר incr_value=1), אך אין זה הכרחי. להלן דוגמה לשימוש ב- for ליצירת לולאה.
מבנה לולאת while נראה כך:
while (variable < stop_value) {
JavaScript Code
}
יש לדאוג לקידום משתנה הלולאה בתוך הלולאה, אחרת תנאי היציאה ממנה לא יתקיים לעולם.
להלן דוגמה לשימוש ב- while ליצירת לולאה.
הנושא הבא ללמידה הוא גישה בעזרת HTML DOM !
ב ה צ ל ח ה
