הקדמה- הפקודה "continue".
- ערכים בוליאניים.
- משפטי "switch".
מתחילים
אירועים
אירועים (events), הם דבר מובנה ב-JS ויש לשים את זה בתג.
האירועים עוזרים לנו לזהות הרבה מאוד דברים. כמו לדוגמא אם העכבר עבר מעל קישור, מתי הוא ייצא ממנו, מתי הוא לוחץ על העכבר ועוד.
להלן הרשימה המלאה לכל האירועים:
| שם האירוע |
למה משמש |
| onabort |
המשתמש עוצר טעינת תמונה. |
| onblur |
המשתמש מעביר את הפוקוס מדבר אחד לאחר.
לדוגמא, לחצנו על תיבת טקסט אחת ושלחצו על אחרת אז מתרחש האירוע, כאשר אנו יוצאים משדה מסומן. |
| onchange |
אובייקט שמאבד מיקוד נבדק, כדי לדעת אם חל שינוי בערכו ההתחלתי,
ואז מופעל ההדק. |
| onclick |
כאשר מתבצעת לחיצה. |
| ondblclick |
כאשר מתבצעת לחיצה כפולה. |
| onerror |
שגיאה בקוד. |
| onfocus |
ההפך מ-onblur, כאשר אובייקט מקבל מיקוד. |
| onload |
לאחר טעינת הדף. נמצא רק בתגית body. |
| onmouseout |
יציאת העכבר מתחום האובייקט. |
| onmouseover |
כאשר סמן העכבר עובר על האובייקט. |
| onmouseup |
שחרור לחיצת העכבר לאחר שנלחץ מטה. |
| onmousedown |
לחיצת עכבר. |
| onunload |
יציאה מהדף. |
השימוש באופציות חייב לבוא כך:
קוד HTML:
<TagName functionName="">Smothing to write</TagName>
שם התג.
שם הפונקציה, onunload, onblur וכ'ו.
בדיוק כמו המאפיין style ב-CSS, בין הגרשיים ( " ) נרשום את קוד ה-JS שנרצה שיעשה כאשר האירוע מתבצע.
להלן שימוש בכל האופציות שנרשמו:
onabort
קוד HTML:
<img onabort="alert('Abort!')" alt="My New Home!" src="Home.jpg" />
וכאשר נעצור את התמונה נקבל הודעה קופצת שבה רשום:
onblur
קוד HTML:
<input type="text" onblur="alert('Blur!')" />
נסו ללחוץ על התיבת טקסט ולאחר מכן ללחוץ על מקום ריק בדף, מה שייצא זה הודעה קופצת שבה רשום:
onchange
קוד HTML:
<select onchange="alert('Change!')"> <option>Yes</option> <option>No</option> </select>
נסו לשנות ערך, מה שייצא זה הודעה קופצת שבה רשום:
onclick
קוד HTML:
<p onclick="alert('Click!');">A paragraph</p>
נסו ללחוץ על הפסקה, מה שייצא זה הודעה קופצת שבה רשום:
ondblclick
קוד HTML:
<p ondblclick="alert('Double click!');">A paragraph</p>
נסו ללחוץ קליק כפול (כמו שפותחים קובץ שנמצא על המחשב) על הפסקה, מה שייצא זה הודעה קופצת ובה רשום:
onfocus
קוד HTML:
<input type="text" onfocus="alert('Focus!')" />
נסו ללחוץ על תיבת הטקסט, מה שייצא זה הודעה קופצת ובה רשום:
onload
האפשרות הזאת עובדת רק בתגית body!
קוד HTML:
<body onload="alert('Load!')">
תעשו רענן, מה שייצא זה הודעה קופצת ובה רשום:
onmouseout
קוד HTML:
<p onmouseout="alert('Mouse Out!');">A paragraph</p>
נסו להעביר את סמן העכבר מעל הקטע טקסט והזיזו אותו. איך שתזיזו יהיה תיבת טקסט ובה רשום:
onmouseover
קוד HTML:
<p onmouseover="alert('Mouse Over!');">A paragraph</p>
נסו להעביר את סמן העכבר מעל לטקסט. מה שייצא זה הודעה קופצת ובה רשום:
onmouseup
קוד HTML:
<p onmouseup="alert('Mouse Up!');">A paragraph</p>
לחצו על הקטע טקסט. אל תעזבו את הלחצן עדיין. כאשר תעזבו את הלחצן תיווצר הודעה קופצת ובה רשום:
onmousedown
קוד HTML:
<p onmousedown="alert('Mouse Down!');">A paragraph</p>
כאשר תלחצו על הקטע טקסט תיווצר הודעה קופצת ובה רשום:
onunload
את המאפיין הבא יש לשים רק בתגית ה-body.
קוד HTML:
<body onunload="alert('Unload!')">
וכאשר נסגור את החלון או נלחץ על F5, נקבל הודעה קופצת ובה רשום:
הפונקציה onunload לא עובדת בגוגל כרום ובאופרה.- בדוגמאות שלפניכם עשיתי רק הודעות קופצות. כל דבר אפשר לעשות!
- לא חובה לעשות רק על תג "p" את האירועים, אפשר לעשות על כל תג. חוץ מ-onload ו-onunload, שהם צריכים להיות בתגית ה-body.
[שיעור מס' 12] JavaScript
ציטוט ההודעה
