3
הצבעות

הצבע

Javascript Events - מדריך גאווה סקריפט

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

ל-Javascript מספר גדול של ארועים (Events) אשר אפשר להשתמש בהם בשביל דפוס הגלישה: מחולק ל-4 חלקים: ארועי עמוד - Page Events, ארועי תופס - Form Events, ארועי מקלדת - Keyboard Events, ארועי עכבר - Mouse Events. לכל קבוצת ארועים זו יש סוגים שונים של ארועים אשר אפשר לתפוס ב-Javascript.

Page Events

Load - אירוע onLoad אשר משוגר כאשר הדף נטען במלואו, כולל גרפיקה וקבצים חיצוניים כמו Javascript , CSS וכו'. Event load יכול להיצמד גם לתמונה כאשר היא נטענת. לדוגמה:

JavasScript:
addEvent(window, 'load', function(event) { alert('העמוד נטען'); });

Resize - אירוע onResize קורא כאשר העמוד מוקטן, אפשר להצמיד את האירוע הזה ל-frame כדי לזהות מתי הוא מוקטן.

JavaScript:addEvent(window, 'resize', function(event) { alert('גודל העמוד שונה'); });

Scroll - אירוע onScroll קורא כאשר מבצעת גלילה בעד באמצעות אובייקטים כמו text area אשר אפשר לגלול אותם.

JavaScript:addEvent(window, 'unload', function(event) { alert('המשתמש עזב את העמוד'); });

Form Events

blur - אירוע (Event) הנקרא onBlur נורה כאשר שדה בתופס מאבד פוקוס.

JavaScript:addEvent(document.getElementById('myinput'), 'blur', function(event) { alert('האלמנט איבד פוקוס'); })

change - אירוע onChange נורה כאשר שדה בתופס (גם כן ברשימת select) נבחר. ה-Event עצמו מזוהה רק כאשר השדה עצמו יותר מפוקוס.

JavaScript:addEvent(document.getElementById('myinput'), 'change', function(event) { alert('התבצע שינוי בטקסט'); });

copy - האירוע (Event) הנקרא onCopy קורה כאשר תוכן של שדה תופס מועתק על ידי פונקציית העתקה על ידי שימוש במקלדת ctrl-c, או על ידי Copy בתפריט העריכה בדפדפן או בעמוד על ידי לחיצה על המקש הימיני.

JavaScript:addEvent(document.getElementById('myinput'), 'copy', function(event) { var txtbox = event.target; var selectedText = txtbox.value.substr(txtbox.selectionStart, txtbox.selectionEnd - txtbox.selectionStart); alert('העתקת את הטקסט: ' + selectedText); });

cut - אירוע onCut קורה כאשר מתבצעת פקודת cut על אחד משדות התופס על ידי צירוף המקשים ctrl-x או על ידי תפריט חיתוך הטקסט בתפריטי הדפדפן או בתפריט העמוד על ידי לחיצה על המקש הימיני של העכבר בחירת cut.

JavaScript:addEvent(document.getElementById('myinput'), 'cut', function(event) { var txtbox = event.target; var selectedText = txtbox.value.substr(txtbox.selectionStart, txtbox.selectionEnd - txtbox.selectionStart); alert('חתכת את הטקסט: ' + selectedText); });

focus - אירוע onFocus קורה כאשר שדה בתופס מקבל פוקוס כמו על ידי שימוש בלחיצה על העכבר בתוך השדה או בשימוש בעזרת מקשר טאב (TAB) כדי להגיע לאותו שדה לעריכתו.

JavaScript:addEvent(document.getElementById('myinput'), 'focus', function(event) { alert('האלמנט קיבל פוקוס'); });

paste - ארוע onPaste נורה כאשר שדה בדפוס מתבצעת עליו פעולה של הדבקה על ידי שימוש בצירוף המקשים ctrl-v או ביצוע הדבקה על ידי שימוש בתפריטים של הדפדפן. הארוע יכול להיות מוצמד גם לחלון כדי לתפוס כל אירוע הדבקה אשר מתבצע בחלון.

JavaScript:addEvent(document.getElementById('myinput'), 'paste', function(event) { alert('הדבקת טקסט'); });

reset - ארוע onReset ב-Javascript מבבצע כאשר כפתור איפוס תופס נלחץ (במידה והוא נמצא בתופס). האירוע מוצמד לתופס ולא לכפתור עצמו.

JavaScript:addEvent(document.getElementById('myform'), 'reset', function(event) { alert('התפוס עובר איפוס'); });

select - אירוע onSelect נורה כאשר שדה טקסט נבחר.

JavaScript:addEvent(document.getElementById('myinput'), 'select', function(event) { var txtbox = event.target; var selectedText = txtbox.value.substr(txtbox.selectionStart, txtbox.selectionEnd - txtbox.selectionStart); alert('המשתמש בחר את הטקסט ' + selectedText); });

submit - אירוע onSubmit נורה כאשר כפתור של תופס נלחץ או כאשר התופס נשלח על ידי לחיצה על כפתור ENTER לדוגמה. את האירוע יש לקשר לתופס ולא לכפתור.

JavaScript:addEvent(document.getElementById('myform'), 'submit', function(event) { alert('הטופס נשלח'); });

לפני שנמשיך הנה Javascript Events Tutorial Video אשר יסביר לכם על אבנטים של Javascript:

הנה מספר ספרים מומלצים מאוד ללימוד תכנות ב-Javascript ו-JQeury:

מודעת פרסומת Amazon:

Keyboard Events

keydown - האירוע onKeydown נורה כאשר מקש במקלדת נלחץ למטה בזמן שאותו שדה נמצא בתופס. האירוע של לחיצת כפתור נורה מיד בעת לחיצת הכפתור והוא קורה פעם אחת והוא לא ממשיך לרוץ מחדש כמו אירוע keypress. ההבדל בין keydown לבין keyupהוא ש-keydown נור לפני שהערך של התו מוזן לשדה בתופס.

JavaScript:addEvent(document.getElementById('mytext'), 'keydown', function(event) { display_short('keydown: ' + event.keyCode); }); function display_short(str) { clearTimeout(); document.getElementById('samplediv').innerHTML = str; if (str != '') setTimeout("display_short('')", 1000); }

keypress - האירוע Javascript onKeypress קורה מתי שהמקש נלחץ באינטרוול מסוים אשר נקבע על ידי מערכת ההפעלה כל עוד המקש נשאר לחוץ למטה. החזרה על אותו אירוע באותו אינטרוול מפרידה אותו משאר האירועים כמו keydown או keyup אשר נורים רק פעם אחת ברגע שהמקש נלחץ כלפי מטה.

JavaScript:addEvent(document.getElementById('mytext'), 'keypress', function(event) { display_short('keypress: ' + event.charCode); }); function display_short(str) { clearTimeout(); document.getElementById('samplediv').innerHTML = str; if (str != '') setTimeout("display_short('')", 1000); }

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

JavaScript:addEvent(document.getElementById('samplediv'), 'keyup', function(event) { display_short('keyup: ' + event.keyCode); }); function display_short(str) { clearTimeout(); document.getElementById('samplediv').innerHTML = str; if (str != '') setTimeout("display_short('')", 1000); }

Mouse Events

click - אירוע ג'אווה סקריפט onclick נורה כאשר לחצן העכבר נלחץ. אם אנו מוסיפים את האירוע הזה לאובייקט מסוים כמו DIV למשל, האירוע onClick קורה רק פעם אחת עם העכבר נלחץ בתוך האזור של ה-DIV או אוביקיט אחר.

JavaScript:addEvent(document.getElementById('samplediv'), 'click', function(event) { display_short('clicked'); }); function display_short(str) { clearTimeout(); document.getElementById('samplediv').innerHTML = str; if (str != '') setTimeout("display_short('')", 1000); }

contextmenu - ארוע onContextmenu קורה כאשר יש לחיצה על לחצן העכבר הימיני או שהתפריט אשר מופיע כאשר הלחצן נלחץ מופיע בכל דרך שהיא. אם אנמו משייכים את אותו אירוע contextmenu לאובייקט אחר כמו DIV למשל, האירוע קורה רק כאשר אנו לוחצים על המקש הימיני של העכבר באותו אזור מוגדר, במקרה זה ה-DIV עצמו.

JavaScript:addEvent(document.getElementById('samplediv'), 'contextmenu', function(event) { display_short('right-clicked (contextmenu)'); }); function display_short(str) { clearTimeout(); document.getElementById('samplediv').innerHTML = str; if (str != '') setTimeout("display_short('')", 1000); }

dblclick - אירוע onDblClick קורה כאשר לחצן העכבר נלחץ פעמיים בטווח זמן מסוים אשר נקבע על ידי מערכת ההפעלה (נקרא גם double-click). אם אנו משייכים את אותו אירוע לאובייקט מסוים כמו DIV למשך, האירוע קורה רק כאשר אנו מבצעים לחיצה כפולה בתוך באזור של האובייקט.

JavaScript:addEvent(document.getElementById('samplesiv'), 'dblclick', function(event) { display_short('double-clicked'); }); function display_short(str) { clearTimeout(); document.getElementById('samplediv').innerHTML = str; if (str != '') setTimeout("display_short('')", 1000); }

mousedown - אירוע ג'אווה סקריפט onMousedown נורה כאשר לחצן העכבר נלחץ כלפי מטה. כאשר אמו מצידים את האירוע עתצמו לאובייקט מסוים כמו DIV, הארוע יקרה כאשר כאשר העכבר יהיה בתוך אותו אזור ונבצע לחיצה למטה של לחצן העכבר.

JavaScript:addEvent(document.getElementById('samplediv'), 'mousedown', function(event) { display_short('Mousedown'); }); function display_short(str) { clearTimeout(); document.getElementById('samplediv').innerHTML = str; if (str != '') setTimeout("display_short('')", 1000); }

mousemove - ארוע onMousemove מתבצע כאשר העכבר זז. אפשר להצמיד את הארוע onMousemove לכל אובייקט כמו DIV למשל, וכך לגרום לאותו ארוע עכבר לקרות כאשר העכבר נמצא בתוך האזור של אותו אובייקט.

JavaScript:addEvent(document.getElementById('samplediv'), 'mousemove', function(event) { display_short('mousemove'); }); function display_short(str) { clearTimeout(); document.getElementById('samplediv').innerHTML = str; if (str != '') setTimeout("display_short('')", 1000); }

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

JavaScript:addEvent(document.getElementById('samplediv'), 'mouseout', function(event) { display_short('mouseout'); }); function display_short(str) { clearTimeout(); document.getElementById('samplediv').innerHTML = str; if (str != '') setTimeout("display_short('')", 1000); }

mouseover - האירוע ג'אווה סקריפט onMouseover קורה כאשר העכבר זז לתוך אותן גבולות של אזור אשר עליו הצמדנו את אותו ארוע ג'אווה סקריפט onMouseover, וזאת לאחר שהוא היה מחוץ לאותו אזור תחילה ונכנס אליו אחר כך. אותו אירוע ג'אווה סקריפט יקרה שוב כאשר אנו נצא מהאזור ונכנס אליו שוב.

JavaScript:addEvent(document.getElementById('samplediv'), 'mouseover', function(event) { display_short('mouseover'); }); function display_short(str) { clearTimeout(); document.getElementById('samplediv').innerHTML = str; if (str != '') setTimeout("display_short('')", 1000); }

mouseup - אירוע javascript onMouseup קורה כאשר לחצן העכבר משוחרר אחרי לחיצה. אם אנו נשייך את אותו אירוע עכבר onMouseup לאובייקט מסוים כמו DIV, אותו אירוע רק יעבוד עבור אותו באותן גבולות של אותו אוביקט, במקרה זה ה-DIV.

JavaScript:addEvent(document.getElementById('samplediv'), 'mouseup', function(event) { display_short('mouseup'); }); function display_short(str) { clearTimeout(); document.getElementById('samplediv').innerHTML = str; if (str != '') setTimeout("display_short('')", 1000); }

rightclick - בדומה ל-contextmenu

scrolling - ראה scroll בארועים של העמוד.

תאימות דפדפנים

אירועים שונים של Javascript עובדים בתאימות שונה בין דפדפנים. ניקח לדוגמה את האירוע blur. אירוע blur של javascript נתמך חלקית בדפדפנים כמו Firefox 2.0, Opera 9.62 למשל, ושם יש הרגבה בעיות ובאגים כאשר משתמשים באירוע זה עם אותם דפדפנים בגרסאות שציינו. אירוע click של javascript עובד מצוין בכל הדפדפנים בכל הגרסאות למשל. יש אתרים אשר עושים השוואה ביןאירועי javascript שונים בדפדפנים שונים כמו IE 5.5, IE 6, IE 7, IE 8, Firefox 3, Safari, Chrome 1.0, Opera 9.62, iPhone 3G ואחרים. חשוב מאוד לבצע בדיקות כדי לוודא שאותם ארועי Javascript יפעלו באופן זהה בדפדפנים שונים, במיוחד עם מדובר על פעולות חשובות באתר שלכם. אפשר להוריד כיום הרבה תכונות שבהם אפשר להפעיל מספר דפדפנים שונים בגרסאות שונות כדי לבצע בדיקה על דפדפנים שונים ולראות כיצד אותו עמוד אינטרנט רץ בהם וכך לפתור בעיות אלו. בעמוד Javascript Event compatibility tables תוכלו לראות איזה Javascript Events עובדים טוב ובאיזה דפדפנים כולל גרסאות.

Jquery - Javascript Frameworks

כיום נפוץ השימוש בג-javascript frameworks שונים כמו JQuery. השימוש ב-Jquery מאפשר פיתוח אפליקציות מהירה תוך שימוש בפחות קוד Javascript. פריימוורק JQuery הוא הפופולרי מבין הפריימוורקים הקיימים והוא מבטיח תאימות גבוהה בין דפדפנים כמו Firefox, Internet Explorer, Safari, Opera, Chrome ואחרים. אם זאת במידה וקיימת בעיה בתאימות עם דפדפנים מסוימים, באתר של JQuery תוכלו למצוא רשימה של אותם דפדפנים בגרסאות אשר יש בעיה בהרצה של פונקציות JQeury שונות. למשל Jquery עובר עם דפדפן Konqueror ופרייפוקס 1.0, אל ישנם מספר באגים ובעיות שעדיין לא נפתרו. הבדיקות של Jquery מתבצעות בצורה הדוקה בדרך כלל על דפדפנים: פיירפוקס 2.0 +, אינטרנט אקספלורר 6 +, אופרה 9 + ודפדפן ספרי 3 + של חברת אפל. היתרון הנוסף בשימוש בספריות של JQuery הוא היכולת לשלוט בממשק המשתמש בצורה קלה ביותר וכך ליצור אנימציות, שליטה קלה ומהירה ב-CSS של אובייקטים של HTML ועוד. כך תוכלו לפתח אתרי אינטרנט עם קוד מורכב בצד לקוח בצורה קלה ומהירה ולהאיץ את שלבי הפיתוח של באתר שלכם.

לסיום, הנה סרטון אודות JQuery להנאתכם:

URL : www.w3schools.com

תאריך 2010-01-08

כניסות 33

קטגוריה ראשי > מחשבים ואינטרנט