HTML וכל מה שמסביב

מה זה JavaScript?

מבוא

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

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

כדי לראות את השגיאות ב Firefox צריך לבחור מהתפריט Tools->Error Console.

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

ג'אווה סקריפט היא לא ג'אווה. ג'אווה איננה שפת סקריפט והשמושים שלה שונים מהשמושים של ג'אווה סקריפט. הדברים היחידים המשותפים לג'אווה וג'אווה סקריפט הם אופרטורים דומים ומבני בקרה (if, while, for) דומים. בשאר הדברים אלו שפות שונות לחלוטין!

איך משלבים ג'אווה סקריפט?

כדי לשלב ג'אווה סקריפט בתוך HTML יש להשתמש בתגית script באופן הבא:

התכונה type בתגית script אומרת שזהו סקריפט בשפת ג'אווה סקריפט. קיימות שפות סקריפט נוספות, כגון JScript.

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

אפשר להשתמש בתגית script מספר פעמים בתוך דף HTML.

אפשר גם להשתמש בקובץ ג'אווה סקריפט חיצוני בעזרת התכונה src של התגית script.

פקודות קוד בג'אווה סקריפט

פקודות קוד (statements) בג'אווה סקריפט ובכלל בכל שפת תכנות הן הוראות לעשות משהו. פקדות הקוד מסתיימות בד"כ בתו נקודה-פסיק (;) למרות שזאת לא חובה ואפשר לשים כל פקודה בשורה נפרדת. למרות זאת מומלץ להשתמש בג'אווה סקריפט בתו המפריד ;.

אפשר לקבץ מספר פקודות בבלוק בתוך סוגריים מסולסלים {}.

הערות בג'אווה סקריפט

ההערות בג'אווה סקריפט דומות להערות בשפת ++C או ג'אווה והן:

  1. עבור שורת הערה אחת משתמשים ב //
  2. עבור מספר שורות הערות משתמשים ב /*   */

משתנים בג'אווה סקריפט

בג'אווה סקריפט מגדירים משתנים (variables) בעזרת הפקודה var. בניגוד להרבה שפות אחרות לא מציינים את סוג המשתנה (type). סוג המשתנה נקבע לפי ההשמה שנותנים למשתנה.

דוגמא:

מספר הערות:

  1. בדוגמא הנ"ל הגדרתי שני משתנים: משתנה x שהצבתי לו את הערך 3, ומשתנה car שהצבתי לו את הערך subaru.
  2. המשתנה x יהיה מסוג נומרי (מספרי), והמשתנה car יהיה מסוג מחרוזת (string באנגלית). ערך מסוג מחרוזת תמיד מוקף בגרשיים.
  3. לא חובה להשתמש ב var. אפשר פשוט לכתוב 3 = x.
  4. אפשר לתת למשתנה ערך ורק אח"כ להגדיר אותו, כלומר אפשר לכתוב 3 = x, ואח"כ לכתוב var x. ההגדרה var x לא תאפס את המשתנה x ולא תתן לו כל ערך אחר, כלומר ערכו יישאר 3.
  5. כמובן שאפשר לשנות ערך של משתנה. זה נעשה בעזרת אופרטורים.

אופרטורים בג'אווה סקריפט

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

האופרטור הבסיסי ביותר הוא השמה (assignment) והוא מסומן ע"י =, למשל 3 = x.

אופרטורים נוספים:

  1. חיבור משמש כדי לחבר שני מספרים: 2 + x
  2. חיסור משמש כדי לחסר שני מספרים: 2 – x
  3. כפל משמש כדי לכפול שני מספרים: 2 * x
  4. חילוק משמש כדי לחלק שני מספרים: 2 / x
  5. שארית משמש כדי לקבל את השארית של חלוקת שני מספרים: 2 % x יתן 0 אם x זוגי ו1 אם x אי-זוגי
  6. הוספת/החסרת 1 משמש להוסיף 1 למשתנה או להחסיר 1 ממשתנה: ++x או x++ או –x או x–. ההבדל בין ++x ל x++ הוא כאשר משתמשים בהשמה: ++x מקדם את x ב 1 אחרי ההשמה ו x++ מקדם את x ב 1 לפני ההשמה.
  7. =+ משמש כדי להוסיף מספר למשתנה: 3 =+ x שקול ל 3 + x = x
  8. =- משמש כדי להחסיר מספר ממשתנה
  9. =* משמש כדי לכפול משתנה במספר
  10. =/ משמש כדי לחלק משתנה במספר
  11. =% משמש כדי לקבל שארית של חלוקת משתנה במספר
  12. שרשור מחרוזות: אפשר לשרשר שתי מחרוזות בעזרת האופרטור +
  13. השוואה: האופרטור == משמש להשוואה בין שני ערכים
  14. השוואת ערך וסוג: האופרטור === משמש להשוואה בין שני ערכים וגם להשוואת סוג המשתנים
  15. שוני: האופרטור =! משמש כדי לבדוק אם ערך אחד שונה מהשני
  16. גדול מ: האופרטור < משמש כדי לבדוק אם ערך אחד גדול מהשני
  17. קטן מ: האופרטור > משמש כדי לבדוק אם ערך אחד קטן מהשני
  18. גדול או שווה ל: האופרטור =< משמש כדי לבדוק אם ערך אחד גדול או שווה לערך שני
  19. קטן או שווה ל: האופרטור => משמש כדי לבדוק אם ערך אחד קטן או שווה לערך שני
  20. ו (AND): האופרטור && משמש כדי לבדוק אם שני תנאים מתקיימים יחדיו
  21. או (OR): האופרטור || משמש כדי לבדוק אם לפחות אחד משני תנאים מתקיים
  22. לא (NOT): האופרטור ! מחזיר היפוך של תנאי
  23. פעולות על ביטים: קיימות פעולות על ביטים של מספרים, אבל לשם כך יש צורך להכיר מספרים בינאריים
  24. תנאי: האופרטור : ? משמש לתנאי והוא יכול לבוא במקום הפקודה if

קיימים עוד מספר אופרטורים לשם ביצוע פעולות מיוחדות

פקודות תנאי בג'אווה סקריפט

בג'אווה סקריפטיש שתי פקודות תנאי:

  1. if/else משמש כדי לבדוק אם תנאי מסוים מתקיים.
    תנאי פשוט:בדוגמא הזאת בודקים אם x שווה ל 1, ואם כן אז מדפיסים הודעה.
    תנאי עם else:בדוגמא הזאת מדפיסים הודעה אחת אם x שווה ל 1, והודעה אחרת אם x שונה מ 1.
    תנאי עם else if:בדוגמא הזאת מדפיסים הודעה אחת אם x שווה ל 1, הודעה שניה אם x שווה ל 2, והודעה שלישת אם x שונה מ 1 ומ 2.
  2. switch משמש כדי לבדוק שוויון של משתנה למספר ערכים, לדוגמא:בדוגמא הזאת (בדיוק כמו בדוגמא עם else if) מדפיסים הודעה אחת אם x שווה ל 1, הודעה שניה אם x שווה ל 2, והודעה שלישית אם x שונה מ 1 ומ 2.
    שימו לב שפקודת break גורמת ליציאה מה switch. אם לא שמים break אז ממשיכים ל case הבא בתוך ה switch.
    לפעמים רוצים לבצע את אותה פעולה עבור מספר case-ים. במקרה זה אפשר לשים את ה case-ים אחד מתחת לשני ואז לבצע את הפעולה.

לולאות בג'אווה סקריפט

בג'אווה סקריפט יש מספר סוגי לולאות (loops):

  1. for loop. הלולאה הזאת משמשת לביצוע פעולות מסוימות מספר פעמים, על פי תנאי שתלוי במשתנה מסוים. לדוגמא:
    הדוגמא הזאת מדפיסה 10 שורות זהות של טקסט.
    בדוגמא הזאת הגדרתי משתנה בשם i. בתוך הסוגריים של ה for הצבתי אפס כערך התחלתי של i, אח"כ נתתי תנאי סיום ללולאה (תבצע את הלולאה כל עוד i קטן מ 10), ובסוף קדמתי את i ב 1.
    באופן כללי, המבנה של לולאת for הוא:
    כאשר ב initial מאתחלים משתנים,
    ב condition בודקים אם תנאי מתקיים (ואם כן אז נכנסים לגוף הלולאה, אם לא אז הלולאה מסתיימת),
    ב change משנים ערכים של משתנים.
    שימו לב שייתכן שלולאה לא תתבצע אפילו פעם אחת (אם התנאי לא מתקיים בהתחלה), או תתבצע מספר אינסופי של פעמים (אם התנאי מתקיים כל הזמן). שימו לב גם ששינוי הערכים מתבצע בסיום כל הפעולות בגוף הלולאה.
  2. while loop. הלולאה הזאת מתבצעת כל עוד תנאי מסוים מתקיים. לדוגמא:
    כמו בדוגמא של for loop, גם הדוגמא הזאת מדפיסה 10 שורות של טקסט.
    באופן כללי, המבנה של לולאת while הוא:כאשר condition הוא תנאי שכל עוד הוא מתקיים, נכנסים לגוף הלולאה.
  3. do while loop. הלולאה הזאת דומה ללולאת while בהבדל אחד: היא מתבצעת לפחות פעם אחת. לדוגמא:
    כמו בדוגמאות הקודמות, גם הדוגמא הזאת מדפיסה 10 שורות של טקסט.
    באופן כללי, המבנה של לולאת do while הוא:
    כאשר condition הוא תנאי שכל עוד הוא מתקיים ממשיכים בלולאה.
  4. for in loop. הלולאה הזאת משמשת לעבור על איברים במערך, או לסרוק תכונות של אובייקט. בהמשך הדף אני אסביר מהו מערך ומהו אובייקט.
    דוגמא ללולאה
    בדוגמא הזאת אני מדפיס בעזרת לולאת for in רשימה ממוספרת של תחביבים מתוך מערך.
    באופן כללי, המבנה של לולאת for in הוא:כאשר y הוא מערך או אובייקט ו x הוא משתנה שעובר על האברים במערך או באובייקט.

הערות בקשר ללולאות:

  1. בכל לולאה אפשר לשים פקודת break וזה גורם ליציאה מהלולאה.
  2. בכל לולאה אפשר לשים פקודת continue ואז נעבור לאיטרציה הבאה של הלולאה.

חריגות בג'אווה סקריפט

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

דוגמאות לחריגות:

  1. EvalError – שגיאה בפונקציה eval.
  2. RangeError – חריגה מתחום מספרי.
  3. ReferenceError – קריאה לפונקציה או שימוש במשתנה שאינם קיימים.
  4. SyntaxError – קרתה שגיאה בתוך הפונקציה eval.
  5. TypeError – שגיאה הקשורה לסוג של משתנה.
  6. URIError – שגיאה שגשורה לקידוד של URI.
  7. חריגות שהוגדרו ע"י המתכנת בעזרת הפקודה throw.

המבנה הכללי של טיפול בחריגות הוא:

כאשר block of code הוא הקוד שבו נרצה לטפל אם תהיה חריגה,

exception handling code הוא הקוד של הטיפול בחריגה/חריגות,

finally block (אופציונלי) הוא הקוד שאליו מגיעם בסוף, אם הייתה חריגה או לא.

שימו לב לאובייקט e ב catch: האובייקט הזה הוא אובייקט החריגה (קיצור ל exception, אפשר לתת לו איזה שם שרוצים), ותמיד יש לו לפחות שתי תכונות:

  • name – מחרוזת המזהה את סוג החריגה.
  • message – תיאור מילולי של החריגה.

שימו לב שבתוך ה exception handling block אפשר גם לשים try-catch.

אתם גם יכולים ליצור חריגות משלכם, ע"י הפקודה throw.

דוגמאות לחריגות:

  1. חריגת מערכת:
    במקרה זה יודפס: ReferenceError abc is not defined.
  2. חריגה יזומה:
    במקרה זה יודפס: Error This is an exception.

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

חלונות קופצים בג'אווה סקריפט

בג'אווה סקריפט אפשר לפתוח חלונות קופצים (popup) ממספר סוגים:

  1. חלון הודעה (Alert):
    בדוגמא ההזאת ייפתח חלון עם הודעה. לחיצה על OK תסגור את החלון.
  2. חלון אישור (Confirm):
    בדוגמא הזאת ייפתח חלון עם שאלה. לחיצה על OK תדפיס הודעה אחת, ולחיצה על Cancel תדפיס הודעה שניה.
  3. חלון להכנסת נתונים (Prompt):
    בדוגמא הזאת ייפתח חלון עם בקשה לכנסת שם. לחיצה על OK תדפיס ברכה עם השם.

פונקציות בג'אווה סקריפט

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

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

דוגמא לפונקציה שמחשבת ריבוע של מספר:

בדוגמא הזאת הקריאה לפונקציה נעשית בשורה 14 (בתוך ה write).

חשוב מאוד: הדוגמא הזאת תעבוד, אבל אם תחליפו את פעולת הכפל שבתוך הפונקציה בפעולת חיבור – לא תקבלו חיבור של מספרים, אלא שרשור של מחרוזות! כאן יש צורך להפוך את המשתנה i ממחרוזת למספר ע"י שימוש בפונקציה ()parseInt. כדאי תמיד להשתמש ב type הנכון, כלומר להשתמש ב parseInt גם במקרה של כפל.

ארועים בג'אווה סקריפט

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

אפשר לתפוס ארועים ולטפל בהם ע"י מטפלי ארועים (event handlers) שהם למעשה תכונות בתוך תגיות HTML. אין כל חובה לטפל בארוע כלשהו וזאת הבחירה של המתכנת בלבד אם לטפל בארוע.

סוגי הארועים:

  1. onblur – אלמנט מאבד את הפוקוס.
  2. onchange – התוכן של שדה משתנה.
  3. onclick – קליק של העכבר על האובייקט.
  4. ondblclick – דאבל קליק של העכבר על אובייקט.
  5. onerror – שגיאה כאשר טוענים מסמך או תמונה.
  6. onfocus – אלמנט מקבל את הפוקוס.
  7. onkeydown – לחחיצה על מקש בלוח המקשים.
  8. onkeypress – לחיצה או החזקת מקש בלןח המקשים.
  9. onkeyup – שחרור מקש בלוח המקשים.
  10. onload – עמוד או תמונה סיימו להטען.
  11. onmousedown – כפתור של העכבר נלחץ.
  12. onmousemove – העכבר זז מעל אלמנט.
  13. onmouseout – העכבר יצא מאלמנט.
  14. onmouseover – העכבר נמצא מעל אלמנט.
  15. onmouseup – כפתור של העכבר שוחרר.
  16. onresize – גודל של חלון או של מסגרת השתנה.
  17. onselect – נבחר טקסט בתוך אלמנט.
  18. onunload – המשתמש יצא מהעמוד.

דוגמא ל onmouseover ו onmouseout:

הסבר: הוספתי את onMouseOver ו OnMouseOut כתכונות לתגית h1. שתי התכונות מפנות לפונקציות ג'אווה סקריפט. onMouseOver מפנה לפונקציה MouseOver שמשנה את צבע הרקע של העמוד לאפור. onMouseOut מפנה לפונקציה MouseOut שמחזירה את צבע הרקע ללבן.

כאשר מעבירים את סמן העכבר מעל לטקסט (Move the mouse over me) צבע הרקע של העמוד משתנה מלבן לאפור, וכאשר מוציאים את סמן העכבר מהטקסט, צבע הרקע חוזר ללבן.

הערות:

  1. בדוגמא העברתי פרמטר ארוע (event) לפונקציות, אך לא השתמשתי בו בתוך הפונקציות. תמיד כדאי להעביר את הפרמטר הזה כי ייתכן שתשתמשו בו בעתיד.
  2. במקרים פשוטים (כמו זה) אפשר לוותר על כל התגית script והתוכן שבתוכה ולכתוב את הקוד ( = document.bgColor) בתוך התכונות (כלומר בתוך nnMouseOver ו onMouseOut). אני לא ממליץ על זה (כי זה הופך את הקוד לפחות קריא) ולכן לא מראה את זה.
  3. בגלל ש HTML הוא case insensitive (אפשר לכתוב תגיות ותכונות גם באותיות גדולות וגם באותיות קטנות), אפשר לכתוב onMouseOver או onmouseover (או באיזה case  שרוצים). אני בחרתי בצורת כתיבה עבור הארועים שנקראת camel case.
    ג'אווה סקריפט בניגוד ל HTML היא case sensitive: אפשר לכתוב if אבל אי אפשר לכתוב If עבור משפט תנאי.

דוגמא נוספת. הפעם ל onmousemove:

הערות:

  1. בדוגמא הזאת השתמשתי ב clientX ו clientY של פרמטר הארוע.
  2. בדוגמא הזאת השתמשתי ב HTML DOM כדי למצוא את האובייקט xy ולשנות את ערכו. הסברים על HTML DOM בהמשך.
  3. onMouseMove היא פעולה יקרה, כי עבור כל תזוזה של העכבר נורה ארוע. מצד שני, אם הייתי משתמש ב onMouseOver הייתי מקבל רק את המיקום של העכבר בזמן הכניסה לאלמנט.

אובייקטים בג'אווה סקריפט

אובייקט הוא סוג מיוחד של משתנה שיש לו את המאפיינים הבאים:

  1. לאובייקט יש תכונות (properties). תכונה היא כמו משתנה שנמצא בתוך האובייקט.
  2. לאובייקט יש מתודות (methods). מתודה היא כמו פונקציה שנמצאת בתוך האובייקט.
  3. בד"כ (אבל לא תמיד) מאתחלים אובייקט בעזרת האופרטור new.

דוגמאות לאובייקטים:

  1. מחרוזת (String) – זהו אובייקט ששומר בתוכו אוסף של תוים, בד"כ טקסט כלשהו.
    התכונה העיקרית של מחרוזת היא length – אורך המחרוזת.
    מתודות של מחרוזת (רשימה חלקית):

    • ()indexOf – מיקום של טקסט בתוך המחרוזת.
    • ()toLowerCase – הפיכת כל המחרוזת ל lower case.
    • ()blink – גורם למחרוזת להבהב ע"י שימוש ב HTML Wrapper.
    • ()fontcolor – שינוי צבע המחרוזת ע"י שימוש ב HTML Wrapper.
  2. תאריך (Date) – אובייקט ששומר בתוכו תאריך, כולל שעה עד לדיוק של אלפית השניה.
    רשימה חלקית של מתודות:

    • ()new Date – יצירת אובייקט עם תאריך ושעה נוכחיים.
    • ()getDate – מחזיר את היום בחודש (ולא את התאריך, בניגוד למה שעלולים לחשוב).
    • ()getTime – מחזיר את מספר אלפיות השניה שחלפו מאז ה 1/1/1970.
    • ()toDateString – הופך את החלק של התאריך למחרוזת קראיה.
    • ()toTimeString – הופך את החלק של השעה למחרוזת קריאה.
  3. מערך (Array) – אובייקט ששומר בתוכו אוסף של משתנים מאותו הסוג.
    למשל במקום להחזיק רשימה של משתנים x1, x2, x3,…,xn אפשר להגדיר מערך x ואז [0]x יהיה כמו x1, וכך הלאה. בצורה הזאת אפשר למשל להדפיס את כל איברי המערך מההתחלה לסוף בעזרת לולאה.
    התכונה העיקרית של מערך היא length – מספר האברים במערך.
    רשימה חלקית של מתודות:

    • ()concat – שרשור של מערכים.
    • ()pop – מסיר את האיבר האחרון מהמערך ומחזיר את האיבר הזה.
    • ()reverse – הופך את מיקום כל האברים במערך.
    • ()sort -מיון של המערך.

    הערה: בג'אווה סקריפט קיימים גם מערכים רב ממדיים. אני לא נכנס כאן לנושא הזה.

  4. בולאני (Boolean) – אובייקט שיכול להחזיק רק שני ערכים: true או false.
  5. Math – אובייקט המשמש לפעולות מתמטיות.
    רשימה חלקית של תכונות (קבועים מתמטיים):

    • E – המספר e.
    • PI – הערך של π.
    • SQRT2 – שורש רבועי של 2.

    רשימה חלקית של מתודות:

    • ()abs – מחזירה את הערך המוחלט של מספר.
    • ()max – מחזירה את המספר הגדול ביותר בקבוצת מספרים.
    • ()random – מחזירה מספר אקראי בין 0 ל 1.
    • ()sqrt – מחזירה שורש רבועי של מספר.
  6. מספר (Number) – אובייקט ששומר מספר עשרוני.
    רשימה חלקית של תכונות:

    • MAX_VALUE – המספר הגדול היותר שאפשרי בג'אווה סקריפט.
    • MIN_VALUE – המספר הקטן ביותר שאפשרי בג'אווה סקריפט.

    רשימה חלקית של מתודות:

    • ()toFixed – קביעת מספר הספרות אחרי הנקודה העשרוני.
    • ()toString – המרה של מספר למחרוזת.
  7. האובייקט הגלובלי (Global) – אובייקט שיש בו תכונות ומתודות כלליות.
    רשימה חלקית של תכונות:

    • NaN – ערך של Not a Number.
    • undefined – משתנה שעדיין אין לו ערך.

    רשימה חלקית של מתודות:

    • ()eval – לבצע מחרוזת כאילו היא שורת ג'אווה סקריפט.
    • ()parseFloat – המרת מחרוזת למספר נקודה צפה (floating point).
    • ()parseInt – המרת מחרוזת למספר שלם.
  8. יצירת אובייקט ע"י המשתמש: כל מי שמתכנת בג'אווה סקריפט יכול ליצור בעצמו אובייקטים. יש לכך 2 דרכים:
    • יצירת אובייקט בצורה ישירה. הצורה הזאת מתאימה ליצירת אובייקט יחיד.
      דוגמא:
      יצירת האובייקט נעשית ע"י ()new Object בשורה 8.
      בשורות 13-14 אני מדפיס את תוכן האובייקט.
    • יצירת אובייקט ע"י שימוש בתבנית. הצורה הזאת מתאימה ליצירת מספר אובייקטים מאותו סוג.
      דוגמא:
      כאן עשיתי שימוש בתבנית (template) ע"י שימוש בפונקציה ובמילה השמורה this.

אובייקטים נוספים בג'אווה סקריפט יוסברו בהמשך.

ביטויים רגולרים בג'אווה סקריפט

ביטוי רגולרי הוא אובייקט שמתאר תבנית (pattern) של תוים.

התבנית יכולה להיות פשוטה (תו יחיד) או מורכבת (מספר טלפון או כתובת דואר אלקטרוני).

הגדרת ביטוי רגולרי:

var re = /pattern/modifiers;

או

var re = new RegExp(pattern, modifiers);

כאשר:

  • pattern – התבנית שאותה רוצים לחפש או להחליף.
    דוגמאות לתבניות:

    1. [abc] – חיפוש כל תו בין התוים שבסוגריים המרובעים.
    2. [abc^] – חיפוש כל תו שאינו בין התוים שבסוגריים המרובעים.
    3. [red|green] – חיפוש מילים (או red או green).
    4. n – חיפוש התו n.
    5. +n – חיפוש התו n פעם אחת או יותר.
    6. *n – חיפוש התו n אפס פעמים או יותר.
    7. n^ – התו n מופיע בתחילת הטקסט.
    8. $n – התו n מופיע בסוף הטקסט.
  • modifiers – פרמטרים מיוחדים לחיפוש.
    דוגמאות:

    1. i – תתעלם מאותיות גדולות/קטנות.
    2. g – חיפוש גלובלי (למקרה שהתבנית מופיעה יותר מפעם אחת בטקסט)

לאובייקט ביטוי רגולרי יש מספר מתודות:

  1. ()compile – שינוי של ביטוי רגולרי.
  2. ()exec – בדיקת התאמה למחרוזת. הפונקציה מחזירה התאמה אם היא קיימת.
  3. ()test – בדיקת התאמה למחרוזת. הפונקציה מחזירה true או false.

בנוסף, ל String יש מספר מתודות עבור ביטוי רגולרי:

  1. ()match – מציאת ביטויים רגולרים במחרוזת.
  2. ()replace – החלפת תבנית בתבנית אחרת.
  3. ()split – פירוק של מחרוזת באמצעות ביטוי רגולרי.
  4. ()search – חיפוש של מקום של ביטוי רגולרי במחרוזת.

דוגמא:

כאן נקבל מערך עם 3 מחרוזות ox.

E4X בג'אווה סקריפט

הערה: פרק זה נוגע רק ל Firefox.

E4X הם ראשי תיבות של ECMAScript for XML.

E4X הוא אובייקט XML בגיאווה סקריפט. יצירת האובייקט נעשית באופן הבא:

var element = xml;

כאשר xml הוא ביטוי XML חוקי.

בעזרת E4X אפשר לטפל באובייקט XML בעזרת מתודות של XML ואופרטורים מיוחדים ל XML.

דוגמאות למתודות E4X:

  1. ()appendChild
  2. ()attributes
  3. ()children
  4. ()comments
  5. ()descedants
  6. ()elements

בעזרת E4X אפשר גם לשנות אובייקטי XML ולהדפיס את תכנם.

טיימינג בג'אווה סקריפט

בג'אווה סקריפט קיימות 2 פונקציות תזמון (טיימינג):

  • ()setTimeout – פונקציה שבעזרתה קובעים שבתוך פרק זמן מסויים יקרה משהו. לפונקציה יש 2 פרמטרים: הפעולה שתקרה, ותוך כמה זמן היא תקרה (במילישניות).
  • ()clearTimeout – פונקציה שבעזרתה מבטלים תזמון. הפרמטר לפונקציה הוא משתנה מסוג טיימר שהוגדר ע"י ()setTimeout.

דוגמא:

מספר הערות:

  1. השתמשתי כאן בארוע onLoad (שורה 6) כדי לקרוא לפונקציה שבה יש ()setTimeout.
  2. במקום לכתוב alert בתוך ()setTimeout (שורה 10) יכולתי לקרוא לפונקציה שבתוכה יהיה ה alert.
  3. ()setTimeout גורם לפעולה חד פעמית. אם רוצים שהפעולה תחזור על עצמה, יש לקרוא שוב ל ()setTimeout.

אובייקטי הדפדפן בג'אווה סקריפט

בג'אווה סקריפט יש מספר אובייקטים עבור הדפדפן:

  1. Window – הדף שפתוח וכל מסגרת שנמצאת בדף. משמש לפתיחת חלונות קופצים (popup), להודעות ב status bar, לביצוע scroll וכו'.
  2. Navigator – משמש לקבלת מידע על הדפדפן (סוג, גרסה וכו').
  3. Screen – משמש לקבלת מידע על המסך (רוחב, גובה, מס' צבעים).
  4. History – משמש לקבלת היסטוריה ולניווט קדימה או אחורה.
  5. Location – משמש לקבלת מידע על ה URL הנוכחי.

אובייקטי HTML DOM בג'אווה סקריפט

מה זה DOM?

DOM זה ראשי תיבות של Document Object Model, ובמלים פשוטות – מודל שמתאר את עמוד ה HTML ונותן כלים לשינוי, הוספה ומחיקה של אובייקטים בעמוד ה HTML. כלומר בעזרת DOM אפשר למשל לשנות צבע של טקסט מסוים כאשר עוברים עם העכבר מעל הטקסט. אפשר גם לשנות את הפונט של הטקסט, לשחק עם styling ולעשות עוד המון המון דברים בעזרת DOM!

דוגמא למספר אובייקטי DOM בג'אווה סקריפט:

  1. Document – מייצג את עמוד ה HTML. לאובייקט זה יש תכונות רבות, ביניהן:
    • מערך של טפסים במסמך.
    • מערך של קישורים (hyperlinks) במסמך.
    • עוגיות שיש במסמך. עוגיות (cookies) הן מידע שנשמר במחשב של המשתמש ומשמש בד"כ לשמירת שם משתמש, סיסמה והעדפות שונות של המשתמש באתרים מסויימים. למשל GMail משתמשים ב cookies כדי לשמור את כתובת הדואר האלקטרוני.
    • האתר המפנה לאתר הנוכחי (referrer).

    בנוסף, יש לאובייקט זה מספר מתודות:

    • ()write – משמש לכתיבת תוכן במסמך. השתמשתי במתודה הזאת בדוגמאות רבות.
    • ()…getElementBy – משמש כדי לקבל אלמנט או מספר אלמנטים.
  2. Element – מייצג אלמנט בעמוד HTML. כל תגית היא אלמנט. דוגמא לתכונות של אלמנט:
    • dir – כיוון של אלמנט (משמאל-לימין או מימין-לשמאל).
    • innerHTML – תוכן HTML בתגית.
    • lang – השפה (שפת דיבור) של האלמנט.
    • id – התכונה id של האלמנט.
  3. Style – מייצג עיצוב של אלמנט בעמוד HTML. דוגמא לתכונות של Style:
    • backgroundColor – צבע הרקע של האלמנט.
    • color – צבע הטקסט.
    • font – הגופן שבו משתמשים.
    • textDecoration – קו מעל, על פני, או מתחת לטקסט.
    • width – רוחב האלמנט.
    • zIndex – איזה אלמנט יופיע מעל איזה אלמנט במקרה של אלמנטים עם מיקום חופף.

מה הלאה?

בהמשך אני מתכוון להסביר (בעמודים נפרדים) על

  • Firebug – תוסף ל Firefox שמאפשר לדבג קוד בג'אווה סקריפט.
  • jQuery – ספריה מבוססת ג'אווה סקריפט שמקלה מאוד את העבודה.
  • Ajax – שיטה לעדכון דינאמי של חלק מעמוד HTML.

רפרנס

אתר מצוין על ג'אווה סקריפט פה ופה.

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

הסברים בעברית אפשר למצוא בויקיספר.

3 תגובות »

  1. מדריך פשוט מ-ע-ו-ל-ה!! כל הכבוד על ההשקעה! לא נראה לי שקיים מדריך מקיף ומושקע כזה באינטרנט.

    תגובה של דניאל — 22 במאי 2012 @ 19:14 | הגב

  2. אם אתנאי = אם התנאי
    מעולה למרות שעוד לא הבנתי הכל

    תגובה של dov — 2 בספטמבר 2012 @ 13:29 | הגב

  3. שאלות ותשובות בנושא גאווה סקריפט באתר http://tshuva2sheela.com/tag/javascript

    תגובה של תומר — 27 ביולי 2016 @ 12:26 | הגב


RSS feed for comments on this post. TrackBack URI

כתיבת תגובה

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

הלוגו של WordPress.com

אתה מגיב באמצעות חשבון WordPress.com שלך. לצאת מהמערכת / לשנות )

תמונת Twitter

אתה מגיב באמצעות חשבון Twitter שלך. לצאת מהמערכת / לשנות )

תמונת Facebook

אתה מגיב באמצעות חשבון Facebook שלך. לצאת מהמערכת / לשנות )

תמונת גוגל פלוס

אתה מגיב באמצעות חשבון Google+ שלך. לצאת מהמערכת / לשנות )

מתחבר ל-%s

בלוג בוורדפרס.קום.

%d בלוגרים אהבו את זה: