אירועים - Event ב-Javascript
on, כמו onclick, מגדירים מה ירוץ כשהאירוע קורה. בניגוד למאפיין value שמתאר טקסט, הם מכילים קוד.alert שמציג הודעה. מחרוזת בתוך הקוד צריכה להיות בגרש, או בגרשיים מסוג אחר, כי אחרת הקוד נשבר.onkeydown מתרחש כשלוחצים על מקש, onkeypress מיד אחריו, ו-onkeyup כשמשחררים את המקש.onmousedown כשלוחצים על כפתור העכבר, onmouseup כשמשחררים, onmousemove בתזוזה מעל הרכיב, onmouseover כשנכנסים לרכיב ו-onmouseout כשיוצאים ממנו.onfocus כשהרכיב מקבל פוקוס, onblur כשהוא מאבד אותו, ו-onclick ו-ondblclick בלחיצה ובלחיצה כפולה.onchange כשהבחירה משתנה.onchange, שקורא לפונקציה. הפונקציה מוציאה את הערך שנבחר ומשנה את צבע הרקע של הדף.onmouseover משנה את צבע הרקע, ו-onmouseout מחזיר אותו לצבע המקורי.href של לינק יכול להיות javascript: ושם הפונקציה, כך שהלחיצה מריצה את הפונקציה ולא מנווטת לדף.onclick מחזיר את return של פונקציית בדיקה. אם הפונקציה מחזירה false, השליחה מתבטלת. אפשר גם להציב את הערך ב-event.returnValue, אבל אז הקוד שאחריו ימשיך לרוץ.return עוצר את הפונקציה מיד ומחזיר את הערך, ולכן מה שאחריו לא ירוץ. ההשמה ל-event.returnValue רק קובעת את הערך. אם מעתיקים פונקציית בדיקה ושוכחים לשנות את התנאי, הבדיקה תיכשל על הרכיב הלא נכון.להורדת קוד מקור של כל הדוגמאות בקורס JAVA SCRIPT למתחילים -לחץ כאן לתלמידי המכללה בלבד
להורדת קוד מקור של כל הדוגמאות בקורס JAVA SCRIPT למתקדמים- לחץ כאן לתלמידי המכללה בלבד
פרקי ההרצאה: אירועים - Event ב-Javascript
תמלול ההרצאה: אירועים - Event ב-Javascript
הטקסט המלא של הדקות הראשונות בהרצאה «אירועים - Event ב-Javascript» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אז אנחנו ב-JavaScript הגענו כרגע לאירועים. מה זה אירוע? אירוע זה פעילות שמתרחשת מתוך רכיב החוצה כתגובה למשהו שקרה.
לדוגמה, יש לנו איזשהו רכיב גרפי ב-HTML ואנחנו רוצים לבצע איזושהי פעילות, כמובן ב-JavaScript כי אנחנו נמצאים בדפדפן בלקוח, אנחנו רוצים לבצע איזושהי פעילות שקרתה כתגובה למשהו שהמשתמש עשה.
בואו ניקח דוגמה. נניח שהמשתמש יש לו איזשהו לחצן input type שווה button נניח שיש לו value click me ואני מריץ את הדף ואני בעצם הולך לראות כרגע לחצן רגיל שכתוב עליו click me ובעצם הוא לא עושה כלום ברגע שאני לוחץ עליו אין תזוזה אין ריצה לשרת אין שום דבר אני בעצם לוחץ על הלחצן כלום לא קורה עכשיו
אני רוצה לכתוב קטע קוד בג'אווה סקריפט שהתבצע כתגובה ללחיצת קליק אנחנו ראינו את זה כבר בוידאוים הקודמים אבל בואו נסתכל מה בדיוק קורה כאן אז למעשה הרכיב הזה זה רכיב html-י רגיל אנחנו רוצים להפעיל קוד בג'אווה סקריפט ישנו מאפיין פרופרטי שבעצם מתאר לנו אירוע כל האירועים בג'אווה סקריפט מתחילים במילה on אנחנו רואים פה on blur on click on
דאבל קליק וכולי ואייקון של ברק לידם. אז בניגוד למאפיין רגיל כמו value שמתאר את הטקסט שמופיע על הלחצן, הפרופרטיז האלה או האטריביוטס האלה יותר נכון שמתארים לי אירועים, מאפשרים לי להרכיב קוד בג'אווה סקריפט כאשר האירוע הזה קרה.
לדוגמה onclick מתרחש כמובן כשלוחצים קליק על הלחצן. אז כל מה שאנחנו צריכים לעשות זה לרשום onclick שווה, קיבלנו כאן ציטוט ובתוך הציטוט, בתוך הגרשיים, אנחנו בעצם יכולים לכתוב קוד ב-JavaScript טהור.
לדוגמה, alert 123, ואפילו נקודה פסיק אני יכול, למרות שאם יש לי פקודה אחת אני לא חייב. ועכשיו, הפקודה הזאת שהיא פקודה ב-JavaScript רגילה לגמרי, תתבצע כאשר לוחצים קליק על הלחצן.
בואו נבדוק את זה. הנה הלחצן שלנו, אנחנו לוחצים עליו קליק, ואנחנו בעצם רואים את ה-alert, את ההודעה שקפצה. קורה עם ההודעה שאני רוצה להגדיר מכילה מידע טקסטואלי אז אם הייתי בא ואומר אני רוצה להדפיס את המילה הלואו זאת כמובן טעות מפני שאם הייתי כותב את הפקודה הזאת בתוך ג'אווה
סקריפט אז זה היה נראה קצת מוזר כי מה זה בדיוק הלואו בואו נעתיק את הפקודה הזאת נכתוב אותה בתוך ג'אווה סקריפט ונראה שכבר המערכת משהו לא מסתדר לי כאן כי כי המערכת חושבת שה-hello זה משתנה מפני שאם הייתי כותב את זה באמת ב-JavaScript הייתי צריך לעטוף את ה-hello בגרשיים בכדי שבאמת משהו יוכל להתבצע כאן, כן?
בואו נריץ את זה, נראה שכרגע יש לי שגיאה, נרפרש, נלחץ על הלחצן ונראה שיש לי כמובן שגיאה והוא כותב לי Error Hello is undefined מפני ש-JavaScript חושבת ש-hello זה שם של משתנה וכמובן לא הגדרתי פה שום שם של משתנה כזה ולא עטפתי אותו בגרשיים.
אז כאן אם אני בא לעטוף אותו בגרשיים מתרחשת לי בעיה אחרת מפני שבגלל שכל הפקודה הזאת כבר נמצאת בתוך גרשיים בתוך ציטוט כמחרוזת אז מבחינת JavaScript כאן סיימתי את המחרוזת ופתאום יש לי פה בכלל שגיאה אחרת אם אני אנסה להריץ את זה אני כמובן גם אחטוף שגיאה בואו נריץ ונראה שבעצם שום דבר לא
קורה ואני יכול לראות כאן בתחתית הדף שיש לי את האייקול של JavaScript שמתאר לי שגיאה בואו נלחץ עליו דאבל קליק, ושוב פעם, יש לי פה איזשהו סינטקס אירו, הוא בכלל לא הצליח לגלות מה הבעיה שלי, הוא רק אומר לי באיזה שורה קרתה לי השגיאה, אני יכול לראות את זה כאן, לין 14. אז איך אני פותר את הבעיה הזאת?
אז ב-JavaScript אנחנו יכולים לכתוב מכרוזת Hard Coded, כלומר צרובה בתוך הקוד, בתוך הדף, בשתי שיטות. שיטה אחת היא על ידי גרשיים, ושיטה שנייה היא על ידי גרש.
גם זאת מכרוזת חוקית לגמרי ב-JavaScript. ולכן אם אני באמת רוצה לכתוב מחרוזת כאן באזור הזה, אז אני יכול לעטוף את ה-hello בגרש גרש. בואו נסתכל, נרפרש, נלחץ על הלחצן ואנחנו בעצם רואים ה-hello חוקי לחלוטין.
יכלנו גם לעשות משהו קצת שונה ולהתחיל את הכל, כל הציטוט הגדול בגרש גרש ואת ה-hello בגרשיים. לפעמים גם רואים את השיטה הזאת שהיא ממש אותו הדבר.
בואו נסתכל, נרפרש, נלחץ על הלחצן הראשון, יש לנו הלואו, נלחץ על הלחצן השני, יש לנו גם הלואו, וממש אותו הדבר.
אז כאן בעצם ראינו לחצן שבלחיצה על קליק ביצע קוד ב-JavaScript. בואו ניקח את הפקודה הזאת ונראה שאנחנו יכולים לבצע כמה פקודות שאנחנו רוצים.
לדוגמה, אלרט, בואו נרשום פה This is a second message. אפילו אין צורך לפעם את זה בנקודה פסיק. כאן ביצעתי שתי פקודות אלרט באון קליק. כמובן שהנקודה פסיק מפרידה לי בין שתי הפקודות, ואם יש לי יותר מפקודה אחת אז חובה נקודה פסיק ביניהם.
בואו נפרש, נלחץ על הלחצן השלישי, נראה את ה-hello הראשון ואז את ה-this is a second message האלרט השני. כמובן שאם יש לי קטע קוד רב כמו שתי הפקודות האלה, לולאה או if ולא real, לא ממש יפה לעשות את זה בתוך ציטוט, לא ככה מתכנתים ולכן בואו נראה באמת איך קוראים
לאירועים. אז מה שקורה אנחנו יכולים לבנות פונקציה פה באזור של ה-JavaScript, בואו נקרא לה פונקציה say היי, נכתוב בתוכה נניח כמה פקודות שאנחנו רוצים ופשוט מאוד נקרא לה מכאן.
שימו לב שהקריאה לפונקציה חייבת להיות קריאה רגילה עם סוגריים, כי זו פקודה בג'אווה סקריפט רגילה. לא הייתי יכול לרשום רק את שם הפונקציה, זה לא עובד.
אני לא יכול סתם ככה לקחת שם של פונקציה, להכניס את זה בתוך אירוע והאירוע פשוט יקרא לה. מה שקורה זה שג'אווה סקריפט ממש מריצה קוד, וככה מריצים קוד שקורא לפונקציה, כמובן עם הסוגריים האלה.
אני יכול לסיים את זה בנקודה פסיק, אני לא חייב. בואו נבדוק את הלחצן הרביעי. נרפרש, לחצן הרביעי ונראה את שתי יקודות הלרט שכתבנו.
זאת השיטה הנכונה לכתוב קוד בג'אווה סקריפט שהתבצע כתלות באירוע. מגדירים את האירוע הרצוי, מכניסים אליו בציטוט את הקריאה לפונקציה הדרושה מתוך ג'אווה סקריפט, שזה יכול להיות בסקריפט בתוך הדף וזה יכול להיות גם בסקריפט חיצוני שיש לנו קישור אליו מהדף הזה, ופשוט מאוד ג'אווה סקריפט
פשוט תריץ את הפונקציה, הקוד בתוכה ירוץ כתגובה לאירוע הזה שהכנסנו את הפונקציה לתוכו. אז אילו אירועים נפוצים קיימים לנו? אז בואו נעבור על רשימת אירועים נפוצים שקיימים לפחות בלחצן או בעוד איזשהו רכיב.
אז אנחנו רואים אירוע שנקרא on-blur. on-blur זה אירוע שמתרחש כאשר איבדנו את הפוקוס מהפקד. בואו נסתכל, ניקח on-blur שווה, יש לנו פה איזשהו מסג' שקורה ב-on-blur.
בואו נרפרש ואם אני כרגע לוחץ על הלחצן הזה אני רואה שאיבדתי את הפוקוס מהלחצן הקודם ולכן יש לי את המסג'בוקס. אם אני עכשיו מעביר טאב אני בעצם רואה שאני נכנס לתוך לחצנים.
אני נמצא כרגע בפוקוס בלחצן האחרון, לוחץ on blur, לוחץ יותר דיוק טאב, אירוע on blur קרה ואני רואה שקיבלתי את המסג'בוקס.
זאת אומרת שכל פעם שאני מאבד פוקוס מרכיב ואני בעצם מקבל את האירוע on-blur הזה, וככה אני יכול לדאוג לדוגמה לבצע ולידציה מתיבות טקסט וכולי. אוקיי, אז היה לנו את ה-on-blur, היה לנו on-click שמתבצע כשלוחצים על קליק, on dbl-click זה כמובן דאבל-קליק כשלוחצים לחיצה כפולה על הרכיב, on-focus כשהתקבל הפוקוס לרכיב, on-key-down כאשר נלחץ
מכה שמקלדת בדרך למטה, זמן הלחיצה למטה בזמן שהפוקוס היה על הרכיב. On-Key Press מתבצע מיד אחרי On-Key Down. On-Key Up מתבצע כאשר עזבנו את המקש, זאת אומרת שאירועי מקלדת יש לנו שלושה אירועים.
Key Down מתבצע קודם, לאחר מכן Key Press ולאחר מכן Key Up. On-Mouse Down מתבצע בלחיצת מקש שמאלי של העכבר על הרכיב. On-Mouse Move מתבצע בתזוזה של העכבר על הרכיב.
און מאוס אאוט כאשר יצאנו עם העכבר מהרכיב, און מאוס אובר גם מתבצע בתזוזה של עכבר מעל הרכיב, און מאוס אפ כשעזבנו לחיצה שמאלית של העכבר. אלה האירועים שקיימים עבור input type שווה בטון.
אם לדוגמה היה לנו רכיב אחר, בואו ניקח סלקט, אז האירועים היו יכולים להיות טיפה אחרים. לדוגמה בסלקט יש לנו on change, כאשר היה איזשהו שינוי בסלקט.
דלק זה מעין קומבו בוקס כזה שנפתח לנו, תיבת בלילה. וכמובן חלק מהאירועים, או רוב האירועים יותר נכון, הם אותם אירועים שראינו מקודם. אז האירועים יכולים להשתנות לפי הרכיב שבעצם אנחנו כותבים עבורו את האירוע.
האם אני יכול לבצע אירוע ולשלוח לפונקציה שהוא מפעיל משהו? בואו נכתוב פונקציה say something, נקבל כאן איזשהו מסאג' וכל מה שנעשה זה אלרט עבור המסאג'.
בואו ניקח את הפונקציה say something ואנחנו יכולים לשלוח לה מה שבא לנו. לדוגמה, בואו נשלח לה אפילו מחרוזת. אם אנחנו רוצים לשלוח גרש, אז חשוב להקדים אותו בתו המיוחד backslash, בכדי שהמערכת תדע שאני לא בעצם אסיים מחרוזת, אלא שולח את התו גרש.
אוקיי, אז מה שעשינו כאן זה כתבנו פונקציה say something, ושלחנו לה איזשהו ערך. בואו נבדוק את זה.
נרפרש, נלחץ על הלחצן, ואנחנו רואים שהערך נשלח לפונקציה. כמובן לשלוח כמה ערכים בעזרת פסיקים, אין לי פה איזושהי הגבלה מסוימת לגבי ערכים וממש קריאה לפונקציה רגילה ושליחת פרמטרים לפונקציה.
אז בואו נראה דוגמה לעוד אירועים שניתן לבצע. בואו נניח שיש לנו כאן סלקט. בסלקט יש לנו אופשן value שווה red והצבע גם הוא red.
ניקח כמה צבעים נניח green, blue, yellow ויש לנו כרגע סלקט שמאפשר לבחור צבעים. בואו נסתכל עליו, אנחנו רוצים בבחירת צבע לצבוע את הצבע הרקע של הדף בצבע הזה.
זה אומר שאני חייב לתפוס את האירוע של השינוי ולהוציא את הערך ולצבוע את הדף. אוקיי, איך אנחנו עושים את זה? אז אנחנו צריכים שתהיה לנו פה איזושהי פונקציה להפעיל.