Exception Handling

בלי כתוביותעם כתוביות

מילון מושגים:

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

דפדפן - תוכנה שמציגה דפי אינטרנט ומריצה את הקוד שבהם, ומאפשרת לגלוש בין אתרים, למשל Chrome או Firefox.

אופרטור - סימן בקוד שמבצע פעולה על ערכים, כמו חיבור, השוואה או פעולה לוגית.

לולאה - מבנה בקרה שחוזר על קטע קוד שוב ושוב כל עוד תנאי מתקיים או עבור כל פריט באוסף.

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

בנאי - מתודה מיוחדת שמופעלת אוטומטית בעת יצירת אובייקט ממחלקה, ומאתחלת את ערכיו ההתחלתיים.

מאפיין - תכונה שמצמידים לרכיב ומתארת אותו או את התנהגותו, למשל מאפיין של תגית HTML או שדה באובייקט.

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

Exception Handling

בשיעור זה אנו לומדים טיפול בחריגות בג'אווה סקריפט. אנו מכירים את המנגנון try, catch ו-finally ללכידת שגיאות זמן ריצה בלי שהתוכנית תקרוס, לומדים את עקרון ה-throw לזריקת חריגות מפונקציות חישוביות, ומיישמים את כל המנגנון בתוכנית בדיקת מספרים ראשוניים.

נושאי הסיכום המוצגים בשיעור:

1. מהי חריגה: חריגה היא שגיאה שמתרחשת בזמן הרצה של הסקריפט, ואנחנו לא רוצים שהסקריפט יקרוס ויציג הודעת שגיאה למשתמש אלא לטפל בבעיה בצורה שמתאימה לנו. לדוגמה, ניסיון להציג משתנה שלא הוגדר גורם לקריסת התוכנית עם הודעת error ABC is undefined.

2. מנגנון try ו-catch: את הקוד שעלול לקרוס עוטפים בבלוק try עם סוגריים מסולסלות. המערכת מנסה להריץ את הקוד, ואם הצליחה הכל בסדר, ואם הקוד קורס עוברים אוטומטית לאזור catch, שבו מקבלים את ההודעה או השגיאה שהמערכת העלתה ומטפלים בה, למשל בהצגת הודעה רגילה.

3. הרצה רציפה לאחר החריגה: כאשר התוכנית לא קורסת אלא מציגה הודעה מתוך ה-catch, היא ממשיכה לרוץ בהצלחה, וסקריפטים שבאים אחרי בלוק ה-try catch מתבצעים כרגיל. בניגוד לכך, בלי try catch הדפדפן מציג דיאלוג שגיאה ללקוח, דבר שהלקוח לא אמור לראות בכלל, והתוכנית עלולה לעצור ולא להמשיך הלאה, כשהתנהגות הדפדפנים אינה צפויה.

4. אזור finally: אזור ה-finally נכתב אחרי ה-catch ומתאר קוד שרץ בכל מקרה, גם אם הייתה שגיאה וגם אם לא. עדיף לכתוב בו קוד שאנו רוצים שתמיד יבוצע, כמו הודעות, פעולות ממשק משתמש, מעבר לדף מסוים או סגירת משאבים שפתחנו.

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

6. בניית תוכנית בדיקת מספר ראשוני: בונים דף חדש עם תיבת טקסט עם ה-id txtNum ולחצן לבדיקה. מספר ראשוני הוא מספר שמתחלק בעצמו ובאחד בלבד. הפונקציה isPrimary רצה מ-2 ועד שורש המספר בלבד, כי אין צורך לבדוק את כל המספרים, ואם המספר מתחלק ללא שארית באחד המספרים שבדקנו, באמצעות אופרטור המודולו, היא מחזירה false.

7. טיפול במקרי קצה: המספר 1 אינו מוגדר כמספר ראשוני, כי בהגדרה שני המחלקים צריכים להיות שונים זה מזה, וגם עבורו מוחזר false. אם הגענו לסוף הלולאה בלי למצוא מחלק, המספר ראשוני ומוחזר true. בפונקציה checkIt מקבלים את הערך מתיבת הטקסט, שולחים אותו ל-isPrimary ומציגים הודעה מתאימה, ובדיקות עם 100, 97 ו-1 עובדות כצפוי.

8. הבעיה בקלט לא חוקי: כאשר מכניסים ערך שאינו מספר כמו ABC, התוכנית מתנהגת בצורה לא בסדר ומציגה הודעה שגויה ש-ABC הוא ראשוני. גם מספרים שליליים כמו מינוס שלוש מוגדרים בטעות כראשוניים, אף על פי שבדיקת מספרים ראשוניים אינה מוגדרת כלל עבור מספרים קטנים מ-1.

9. עקרון חשוב: אין try catch בתוך הפונקציה: פונקציה שמקבלת פרמטרים מבחוץ עלולה לקבל פרמטר חוקי או שגוי, אך אסור לה לטפל בפרמטר השגוי ולהציג הודעות שגיאה. הסיבה היא שהפונקציה אינה יודעת מדוע נשלח אליה פרמטר שגוי, אינה יודעת באיזו שפה להציג הודעות, וכפונקציה חישובית שנכתבת בקובץ ג'אווה סקריפט חיצוני ומשמשת אתרים רבים, אין לה קשר לממשק המשתמש. אין לה ידע על הטיפול, ולכן אין לה catch ואין לה try catch.

10. זריקת חריגה עם throw: מה שכן עושה הפונקציה הוא לבדוק את חוקיות הפרמטר ולזרוק חריגה במקרה של כשל. בבדיקה הראשונה משתמשים בפונקציה isNaN, שבודקת אם הערך אינו מספר, ואם כן קוראים ל-throw עם הודעת השגיאה הרצויה, למשל שהערך אינו מספר. בבדיקה שנייה בודקים אם המספר קטן מאחד, וזורקים הודעה שהמספר חייב להיות גדול או שווה ל-1. ברגע שהמערכת נתקלת ב-throw היא מיידית יוצאת מהפונקציה ומתחילה לחפש catch מתאים.

11. לכידת ה-throw ב-catch של הקורא: התוכנית הקוראת עוטפת את הקריאה לפונקציה ב-blokk try, וה-catch שלה מקבל את ההודעה שנזרקה ומציג אותה. עכשיו קלט של ABC אינו גורם לקריסה, ומוצגת הודעה נכונה שהערך אינו מספר, במקום ההודעה הטיפשית מקודם. אפשר לשפר את הודעת המספר השלילי לניסוח הגיוני יותר.

12. זריקת אובייקט Error: במקום לזרוק מחרוזת אפשר לזרוק אובייקט בעזרת throw new Error והעברת הודעת השגיאה לבנאי. ההודעה עצמה נמצאת אז במאפיין message של האובייקט, ויש לו מאפיינים נוספים, אם כי רובם אינם נתמכים באינטרנט אקספלורר, שתומך רק ב-message עם m קטנה.

13. אחריות מחולקת: הפונקציה החישובית בודקת את חוקיות הערך וזורקת חריגה כשהוא לא חוקי, והאזור שקורא לפונקציה ומתקשר עם הלקוח הוא זה שאחראי לתפוס את השגיאות ולהציג הודעות ללקוח, בין אם ב-alert, ב-span או בכל טיפול אחר, או אפילו להתעלם. כך נמנעת קריסה גם כשהקלט מגיע מהמשתמש שעצמו יכול לטעות.

14. המנגנון המלא: כאשר הכל בסדר הפונקציה ממשיכה ומבצעת את הבדיקה ומחזירה true או false, וכאשר נזרק חריגה מחפשת המערכת catch מתאים, ואם הקריאה לא בוצעה בתוך try או שאין catch כלל, התוכנית תקרוס. זהו הטיפול הנכון בשגיאות זמן ריצה, הנקרא באנגלית exception handling.

בסיום השיעור למדנו את מנגנון טיפול החריגות בג'אווה סקריפט עם try, catch ו-finally, הבנו מדוע פונקציות חישוביות זורקות חריגות במקום להציג הודעות, ומימשנו את כל המנגנון בתוכנית בדיקת מספרים ראשוניים עם זריקת מחרוזת וזריקת אובייקט Error. תודה רבה, ולהתראות בשיעור הבא.

בשיעור הבא נעסוק בנושא AJAX.

מילון מושגים:

קוד מקור - הקוד שמפתחים כותבים בשפת תכנות, לפני הידור, המגדיר את פעולת התוכנה.

Java - שפת תכנות עילית ומונחית עצמים, הרצה על מכונה וירטואלית (JVM) ומשמשת לפיתוח מגוון יישומים.

להורדת קוד מקור של כל הדוגמאות בקורס JAVA SCRIPT למתחילים -לחץ כאן לתלמידי המכללה בלבד

להורדת קוד מקור של כל הדוגמאות בקורס JAVA SCRIPT למתקדמים- לחץ כאן לתלמידי המכללה בלבד

פרקי ההרצאה: Exception Handling

תמלול ההרצאה: Exception Handling

הטקסט המלא של הדקות הראשונות בהרצאה «Exception Handling» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

00:01
הדבר הבא שאנחנו הולכים לראות ב-JavaScript נקרא Exception Handling או בעברית טיפול בחריגות. חריגה, כלומר Exception, זה בעצם שגיאה שמתרחשת בזמן ההרצה של הסקריפט שלנו ואנחנו לא רוצים בעצם שהסקריפט יקרוס ויציג הודעת שגיאה אלא אנחנו רוצים לטפל בבעיה הזאת בצורה מסוימת שמתאימה לנו.
00:27
אז בוא נניח שנייצר כרגע איזושהי שגיאת ריצה, נניח שאני רוצה להציג את המספר ABC, את המשתנה ABC. אין לי משתנה כזה. בואו נריץ, נראה מה יקרה.
00:43
אז אנחנו רואים שהתוכנית קרסה, ומה שאנחנו רואים כרגע זאת שגיאת ריצה או Exception באנגלית, והוא כותב לנו פה: Error ABC is undefined. במידה ואנחנו עדיין חושבים שיש לנו ABC ואנחנו רוצים להדפיס אותו אבל אנחנו לא ממש בטוחים, אנחנו יכולים לטפל בזה בעזרת מנגנון שנקרא מנגנון לטיפול בחריגות, או באנגלית מנגנון Exception Handling.
01:09
אז איך זה מתבצע? אז אנחנו צריכים להבין מהו הקוד שיכול לקרוס. במקרה הזה זה alert ABC. אנחנו צריכים לעטוף את הקוד הזה במילה try, כאשר אנחנו יוצרים מסביבו בלוק.
01:25
בלוק זה פתיחת סוגריים וסגירת סוגריים מסולסלות. ואז הקוד הזה שכתבנו כאן, המערכת מנסה להריץ אותו. במידה והיא מצליחה, הכל בסדר.
01:36
במידה והיא לא מצליחה והקוד קורס, אנחנו צריכים להגיע לאזור שנקרא catch. הולכים אוטומטית להגיע לאזור שנקרא catch ואנחנו יכולים בואו נציג את זה כarr לקבל בעצם את ההודעה הזאתי או השגיאה שהמערכת העלתה לנו במידה והייתה שגיאה אז אנחנו יכולים להציג את השגיאה בואו נבדוק עכשיו את התוכנית נרפרש
02:10
ונראה שהתוכנית קודם כל לא קרסה אלא עשתה את מה שאנחנו אמרנו לה ומה שאמרנו לה זה להציג הודעת שגיאה יכלנו כמובן גם להתעלם ולא לעשות כלום.
02:21
טייפ ארור ABC is undefined. אותה הודעה שמקודם ראינו אבל שגרמה לקריסה וזה דבר לא רצוי מבחינת המשתמש, כרגע מוצגת לנו בהודעה רגילה ותמימה ומאפשרת לתוכנית להמשיך לרוץ בהצלחה.
02:36
אם היה לנו סקריפט אחרי זה הסקריפט היה רץ בלי שום בעיה. אוקיי, מה היה קורה אילו לא הייתה בכלל שגיאה? בוא נניח שאכן היה לי פה מוגדר var ABC שווה 123. כעת לא אמורה להיות בכלל שגיאה האם אזור הcatch יתבצע והוא יציג לי משהו שקשור לשגיאה ובואו נראה את זה נרפרש ואנחנו רואים שהוא נכנס לתוך אזור הtry מציג לנו את ההודעה ומסיים
03:12
בואו ננסה להציג כאן עוד דבר מסוים ואנחנו רואים שהצגנו כאן הודעה שאנחנו אחרי כל הבלוק הזה של הtrycatch בואו נריץ נראה שהוא מציג 1,2,3 ממשיך הלאה מציג לנו את ההודעה בואו כרגע נוריד את הvar ABC, נריץ, נראה שהוא מציג לנו את הודעת שגיאה וממשיכה לה ל-I'm after the try catch.
03:54
עכשיו, במידה ולא היה לנו בכלל try catch, אז כעת אם אנחנו נריץ את זה אנחנו אמורים לקבל פה שגיאה. השאלה היא האם הוא יציג את האלרט הזה. בואו נריץ, נראה שחטפנו חריגה, זה משהו שהלקוח לא אמור לראות בכלל אפילו לא פעם אחת.
04:23
אנחנו לוחצים על no, והתוכנית בעצם לא מבצעת שום דבר ולא ממשיכה הלאה, שאם הייתה חריגה איפשהו, אז הדפדפן יכול פשוט להפסיק ולא להמשיך הלאה את הקוד שלו, את הסקריפט, ויכול להיות שדפדפן אחר כן יחליט להמשיך הלאה, אנחנו לא ממש יכולים לדעת איך הדפדפנים יגיבו
04:43
וגם איך דפדפנים בעתיד יגיבו. יש לנו פה את היכולת ללחוץ על no, שאנחנו לא רוצים לדבג את הבעיה הזאתי, גם אם היינו לוחצים על yes, בעצם היינו פותחים כאן איזשהו דיבאגר בשביל להבין מה בדיוק הייתה הבעיה, אבל כרגע אנחנו לא נתעסק עם זה.
05:05
נחזור בחזרה, נחזיר את ה-tribe ואת ה-catch כי הוא עזר לנו להיפטר מהבעיה, להציג הודעת שגיאה מתאימה ואחר כך גם להמשיך את הסקריפט מפני שהתוכנית לא באמת קרסה.
05:22
אוקיי, דבר נוסף שיש לנו במנגנון הזה נקרא finally. פיינלי נכתב אחרי הקאץ' והוא מתאר אזור קוד שהולך לרוץ בכל מקרה גם אם הייתה שגיאה וגם אם לא הייתה שגיאה.
05:38
בדומה למה שהיה לנו כאן אבל יותר מקצועי לעשות את זה בפיינלי אם אנחנו רוצים שבכל מקרה הקוד שלנו ירוץ.
05:46
בואו נציג פה alert I'm in the finally. אוקיי אז כרגע נכתוב קוד שלא אמור לקרוס. יש לנו פה משתנה ABC אנחנו מציגים אותו ב-try ויש לנו פה קאץ' ופיינלי.
06:06
בואו נריץ את זה. אנחנו רואים שהטריי מתבצע בלי בעיה ויש לנו את ההודעה שנמצאת בפיינלי. בואו נחזור, נייצר שגיאה, נוריד את ה-abc, אנחנו רואים שהגענו לאזור של ה-catch, הצגנו טייפ-ארור וגם כאן הפיינלי מתבצע.
06:28
פיינלי מיועד לביצוע קוד שאנחנו רוצים שהוא תמיד תמיד תמיד ירוץ, לא משנה אם הייתה שגיאה או לא הייתה שגיאה. זה בדרך כלל דברים שאנחנו רוצים לבצע בוודאות כמו הודעות למיניהם, ביצוע UI כלשהו שאנחנו רוצים שתמיד יתבצע, להגיע לדף מסוים אם אנחנו תמיד רוצים, לסגור כל מיני קישורים
06:51
שפתחנו, דברים שאנחנו בוודאות רוצים לעשות. אוקיי, בואו ננסה עכשיו להציג מידע אחרי ה-Alert ABC, ואת ההודעה שאנחנו מציגים זה The End of the Try.
07:14
אנחנו רוצים לראות מה קורה אם אין שגיאה. אז אם אין שגיאה, כמובן שה-Alert ABC יצליח, וכמובן ש-Alert the end of the try גם הוא אמור להיות מוצג.
07:26
בואו נבדוק את זה. יש לנו את ה-Alert ABC ומיד אחריו יש לנו the end of the try וכמובן ה-finally אמור להתבצע בכל מקרה. אבל מה שאני מנסה להדגים עכשיו זה מה קורה אם יש שגיאה.
07:40
במקרה ויש שגיאה, אז השגיאה הולכת להתבצע ב-Alert ABC כי המשתנה ABC לא מוגדר. ברגע שזה קורה אנחנו אמורים מיידית לצאת החוצה מה-try ולהגיע ל-catch.
07:54
זאת אומרת שכל מה שנמצא אחרי השגיאה בתוך ה-try לא יתבצע. בואו נראה את זה. אנחנו רואים שמיידית הגענו ל-catch בלי בכלל לבצע את הקוד שאחרי ה-try, וכמובן הפך להתבצע.
08:12
מה קורה אם יש לנו קוד לפני השגיאה? אז חשבנו פה שאנחנו נמצאים בהתחלה של ה-try. בואו נבדוק. אנחנו רואים שהקוד כן מתבצע כרגיל. I'm in the beginning of the try.
08:36
ברגע שאני מגיע למצב של שגיאה המערכת מיידית עוצרת וקופצת לאזור של הקאץ' שהתפקיד שלו הוא אחד ויחיד וזה לטפל בשגיאה שהייתה. מפני שאם לא הייתה שגיאה אנחנו לא אמורים להגיע בכלל לקאץ'.
08:52
בואו נסתכל עוד פעם מה קרה כאן. הקוד הזה לא קרס ולכן הדפדפן הריץ אותו. הקוד הזה כן קרס ולכן הדפדפן מיידית קפץ לכאן ודילג על כל מה שאחרי הקריסה. כאן אנחנו בעצם אמורים לטפל בבעיה שקרתה ובמקרה הזה הצגנו דעת שגיאה.
09:09
פיילינינג יתבצע בכל מקרה אם אנחנו רוצים. בואו נראה דוגמה יותר ממשית לשימוש ב-Exception Handling. לצורך כך בואו נפתח דף html חדש, יש לנו פה html open, נגדיר פה סקריפט language javascript type text javascript ונגדיר קצת UI. מה שאנחנו רוצים לעשות זה לאפשר את הדבר הבא.
09:50
אנחנו רוצים להגיד למשתמש enter, ואנחנו רוצים שהוא יוכל להכניס את המספר על ידי איזושהי תיבת טקסט input type שווה טקסט ניתן לה id.txt.num עכשיו אנחנו רוצים לעשות