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

הקדמה

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

הפקודה "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>

TagName

שם התג.

functionName

שם הפונקציה, onunload, onblur וכ'ו.

=""

בדיוק כמו המאפיין style ב-CSS, בין הגרשיים ( " ) נרשום את קוד ה-JS שנרצה שיעשה כאשר האירוע מתבצע.

להלן שימוש בכל האופציות שנרשמו:
onabort

קוד HTML:

<img onabort="alert('Abort!')" alt="My New Home!" src="Home.jpg" />

וכאשר נעצור את התמונה נקבל הודעה קופצת שבה רשום:

Abort!

onblur

קוד HTML:

<input type="text" onblur="alert('Blur!')" />

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

Blur!

onchange

קוד HTML:

<select onchange="alert('Change!')">        <option>Yes</option>        <option>No</option>    </select>

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

Change!

onclick

קוד HTML:

<p onclick="alert('Click!');">A paragraph</p>

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

Click!

ondblclick

קוד HTML:

<p ondblclick="alert('Double click!');">A paragraph</p>

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

Double click!

onfocus

קוד HTML:

<input type="text" onfocus="alert('Focus!')" />

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

Focus!

onload
האפשרות הזאת עובדת רק בתגית body!

קוד HTML:

<body onload="alert('Load!')">

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

Load!

onmouseout

קוד HTML:

<p onmouseout="alert('Mouse Out!');">A paragraph</p>

נסו להעביר את סמן העכבר מעל הקטע טקסט והזיזו אותו. איך שתזיזו יהיה תיבת טקסט ובה רשום:

Mouse Out!

onmouseover

קוד HTML:

<p onmouseover="alert('Mouse Over!');">A paragraph</p>

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

Mouse Over!

onmouseup

קוד HTML:

<p onmouseup="alert('Mouse Up!');">A paragraph</p>

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

Mouse Up!

onmousedown

קוד HTML:

<p onmousedown="alert('Mouse Down!');">A paragraph</p>

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

Mouse Down!

onunload
את המאפיין הבא יש לשים רק בתגית ה-body.

קוד HTML:

<body onunload="alert('Unload!')">

וכאשר נסגור את החלון או נלחץ על F5, נקבל הודעה קופצת ובה רשום:

Unload!

הפונקציה onunload לא עובדת בגוגל כרום ובאופרה.

בדוגמאות שלפניכם עשיתי רק הודעות קופצות. כל דבר אפשר לעשות!
לא חובה לעשות רק על תג "p" את האירועים, אפשר לעשות על כל תג. חוץ מ-onload ו-onunload, שהם צריכים להיות בתגית ה-body.

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

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

בית ספר לתכנות, שיעור 12 - JavaScript

הודעת מערכת

עוד באטרף