דפים בשיעור זה:
1: JavaScript מתקדם
2: הדפסת משתנים
3: טעויות תכנות נפוצות
4: תיקון באגים
5: תרגול קידוד טוב
6: ייעול ה-JavaScript
7: מה קורה הלאה?
|
|
|
|
|
|
|
|
| |
שיעור 5
דף 2: הדפסת משתנים.
לאחר שאתה מוצא באג, אתה יכול להיפטר ממנו. למרבה הצער, מציאת הבאגים המעצבנים אינה תמיד משימה קלה, רוב זמן ניפוי הבאגים שלך מתבזבז על מציאת מיקום השגיאה.
אחת המתודות הנפוצות והנכונות ביותר לניפוי באגים היא הדפסות. פשוט, הוסף מתודות פשוטות בתוך הקוד שלך אשר מדפיסות בדיוק את מה שקרה. בוא נניח שיש לך בעיה עם שתי הפונקציות הבאות:
function getName()
{
var first_name = prompt("what's your first name?","");
var last_name = prompt("what's your last name?","");
var the_name = first_name + " " + last_name;
}
function theGreeting()
{
var the_name = "";
the_name = getName();
if (the_name == "Dave Thau")
{
alert("Hello, oh greatest one!");
} else {
alert("Ahoy palloi!");
}
}
נסה את דוגמא זאת וראה אם אתה מבין מה לא בסדר (למשתמשים ב- Netscape 3.x אולי יהיו בעיות בבדיקת השגיאות בגלל אופי התוכנה; בעיות דומות יכולות לצוץ גם בדוגמאות ה- JavaScript הבאות). אם אתה מכניס שמות אקראיים אל תיבות האתראות, תקבל את הברכה "Ahoy palloi!". בכל אופן, אם תכניס את השם "Dave" לתוך תיבת ה-prompt הראשונה ו- "Thau" לשניה, אתה אמור לקבל את ההודעה "Hello, oh greatest one!" במקום זאת, עדיין תקבל הודעת "Ahoy palloi!" . ברור כי משהו לא בסדר עם הפונקציות. בדוגמא פשוטה זו, תמצא את הטעויות רק ע"י התבוננות בקוד ה- JavaScript. בכל אופן, ככל שהסקריפט שלך הופך יותר ויותר מסובך, מציאת הטעויות רק ע"י סקירה פשוטה הופכת לקשה במיוחד.
אם JavaScript אינה תופסת את הטעות שלך, ואינך מבין מה "לא בסדר" רק ע"י הסתכלות בסקריפט שלך, לפעמים עוזר להדפיס את המשתנים. הדרך הקלה ביותר לעשות זאת היא עם ()alert, כך:
// theGreeting gets a name using getName, then presents one or two
// alert boxes depending on what the name is
//
function getName()
{
var first_name = prompt("what's your first name?","");
var last_name = prompt("what's your last name?","");
var the_name = first_name + " " + last_name;
alert("in getName, the_name is: " + the_name);
}
// theGreeting gets a name using getName, then presents one of two
// alert boxes depending on what the name is
//
function theGreeting()
{
var the_name = "";
the_name = getName();
alert("after getName, the_name = " + the_name);
if (the_name == "Dave Thau")
{
alert("hello, oh greatest one!");
} else {
alert("ahoy palloi!");
}
}
שים לב כי מיקמנו את ()alert בכל הנקודות החשובות. כעת נסה את הגרסה עם
תיבות האתראה. אם תכניס את השמות "Dave" ו- "Thau", תראה כי ה- alert הראשונה מודיעה: "in getName, the_name is: Dave Thau",
אבל ה- alert השנייה מודיעה: "after getName, the_name = undefined", מה שמראה כי דברים התבלגנו בדיוק לאחר שורת ה- ()getName. איכשהו, the_name נראה בסדר גמור בדיוק לפני היציאה מהפונקציה, אבל theGreeting משבש את הצגת המשתנה the_name. כאשר אתה כותב פונקציה שעושה דבר נכון, אך יש לה בעיות בהחזרת הערך, הדבר הראשון שעליך לבדוק הוא, אם החזרת את הערך באופן מעשי. כמעט בטוח, שהבעיה מצויה פה. פונקצית ה- ()getName מבינה את השם, אבל לעולם אינה מחזירה אותו. אנו צריכים להוסיף ";return the_name" בסוף הפונקצייה.
מאוד עוזר לשים מספר תיבות אתראה בקוד שלך. לרוע המזל, קצת מעצבן ללחוץ על כפתור ה- "OK" כמעט בכל שורה.
אפשר לבצע מספר פעולות, על מנת לנפות את הבאגים מהקוד שלך ללא קבוצת תיבות אתראה. אופציה אחת היא לכתוב את הודעות ניפוי הבאגים שלך, באזור טקסט בתוך טופס. אפשרות נוספת היא לכתוב את הודעות ניפוי הבאגים בחלון נוסף. להלן דוגמא של קוד ניפוי באגים אשר כותב הודעות ניפוי באגים לאזור הטקסט מטה
טריק נוסף אשר יכול להפוך את ניסיון ניפוי הבאגים שלך למלאכה נעימה יותר, מערב יצירת דרגות שונות של ניפוי באגים ואז קביעת משתנה ניפוי באגים "debug". להלן קוד ה- JavaScript:
// debug can be either none, alert, or textarea depending
// on the kind of debugging I want to do
//
var debug = "none";
// function getName gets a first and last name, concatenates
// them with a space in between, and returns the name
//
function getName()
{
var first_name = prompt("what's your first name?","");
var last_name = prompt("what's your last name?","");
var the_name = first_name + " " + last_name;
var error_message = "in getName, the_name is: " + the_name;
doError("in getName, the_name is: " + the_name);
}
// theGreeting gets a name using getName, then presents one of two
// alert boxes depending on what the name is
//
function theGreeting()
{
var the_name = "";
the_name = getName();
doError("after getName, the_name = " + the_name);
if (the_name == "Dave Thau")
{
alert("hello, oh greatest one!");
} else {
alert("ahoy palloi!");
}
}
// doError is the error handling routine
// depending on the type of debug message
// it presents either no debug message, an alert
// or puts the message in a textarea
//
function doError(the_message)
{
if (debug == "alert")
{
alert(the_message);
} else if (debug == "textarea") {
window.document.the_form.the_text.value += the_message + "<br>\n";
}
}
שים לב כי הגדרתי את המשתנה הנקרא "debug" אשר יכול להיות "none", "alert" או "textarea". ואז אם אני ארצה לקבל הודעות שגיאה, אני אשלח את השגיאות לפונקצית doError(). פונקציה זו בוחרת מה לעשות עם ההודעה: לא לעשות כלום; להציג תיבת אתראה עם הודעה; השמת ההודעה באזור הקוד. הפונקציה "סומכת" על איך שאני קבעתי את משתנה ניפוי הבאגים. אתה יכול לקבוע את משתנה ניפוי הבאגים ל- "textarea", כאשר יש לך המון שגיאות אשר אתה רוצה להראות אותן סימולטנית. ואז, כשאתה מוכן להראות את הקוד שלך לעולם, אתה יכול לכוון את ניפוי הבאגים ל-"none", והודעת השגיאה לא תופיע עוד, מה שחוסך לך את הטרחה והמחויבות למצוא ולהסיר את כל הוראות ניפוי הבאגים.
לעיתים קרובות, מתכנתים יוצרים דרגות שונות של ניפוי באגים, כמו "none" (אין באגים), "brief" (מעט באגים) ו- "extreme" (הרבה באגים). "brief" ידפיס מספר הודעות על ניפוי באגים לאורך הדרך, ו-"extreme" ידפיס המון הודעות ניפוי באגים, בעוד ש- "none", כמובן, לא ידפיס אף הודעה.
אם בנית את מערכת ניפוי הבאגים שלך בצורה כזו, אתה יכול לכוון את דרגת ניפוי הבאגים ל- "brief" כאשר אתה מקדד, ול- "none" כאשר אתה מתכוון לפרסם את ה- JavaScript. אם משהו מוזר לחלוטין מתחיל לקרות, ואינך יודע היכן לחפש אחר הבעיה, אתה יכול לכוון את דרגת ניפוי הבאגים ל- "extreme" ולהתקדם לאט דרך כל הודעות ניפוי הבאגים עד שתמצא משהו חשוד.
טוב, מספיק על מערכות ניפוי באגים. הבא נפנה עכשיו לטעויות נפוצות אשר מתבצעות ע"י מקודדי JavaScript.
חזור לתחילת הדף
לדף הבא «--
|
|
