הנך נמצא: מדריך מתקדם / שיעור 5 / דף 3
 


המדריך של תאו ל- JavaScript
 


דפים בשיעור זה:
1: JavaScript מתקדם
2: הדפסת משתנים
3: טעויות תכנות נפוצות
4: תיקון באגים
5: תרגול קידוד טוב
6: ייעול ה-JavaScript
7: מה קורה הלאה?
|
|
|
|
|
|
|
|

שיעור 5

דף 3: טעויות תכנות נפוצות.

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

בלבול בשמות משתנים או פונקציות.

טעויות עם כיוון או עם הפיכה לרבים של שמות משתנים או פונקציות הן אופייניות באופן מרגיז ולפעמים גלאי הבאגים של JavaScript נכשל בנסותו למצוא אותם. ע"י יצירת נוהג מסוים ודביקה בנוהג זה ביצירת שמות למשתנים ולפונקציות, ניתן להפחית באופן משמעותי את כמות ההתבלבלויות. לדוגמא, אני נותן שם למשתנים שלי באותיות קטנות בלבד ועם מקפים תחתונים המחליפים את המרווחים בין המילים (my_variable, the_date, an_example_variable). כמו כן, אני משתמש בסימון פנימי בנוי בשביל הפונקציות (כגון: ()addThreeNumbers או ()writeError וכדומה). אני נמנע מלהפוך לרבים כל דבר, מכיוון שאני תמיד שוכח אילו משתנים הם רבים ואילו משתנים אינם.

שימוש בטעות במילים שמורות.

ישנן מילים אשר אינן יכולות לשמש כמשתנים משום שהן כבר בשימוש ע"י JavaScript. לדוגמא, אינך יכול לתת למשתנה את השם "if" משום שהוא כבר חלק משפת ה- JavaScript – אם תשתמש ב- "if", תיתן ביטוי להרס להתחולל. בזמן שתצטרך להיות מאוד מבולבל, על מנת באמת לקרוא למשתנה בשם "if", הרי שמשתנה בשם "document" (מסמך) כבר יכול להיות מפתה הרבה יותר. לצערי, "document" הינו אובייקט ב-JavaScript. משהו נוסף אשר משתמשים בו לעיתים קרובות, אבל בעייתי באופן כללי הוא השם "name" (שם) (לאלמנטים של טופס יש "names"). קריאה למשתנה בשם "name" לא תמיד יוצרת בעיות, רק לפעמים, מה שבעצם גורם לה להיות יותר מבלבלת.

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

יש לזכור כי יש צורך בשני סימני שווה במבחני לוגיקה.

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

var the_name = prompt("what's your name?", "");
if (the_name = "the monkey")
{
  alert("hello monkey!");
} else {
  alert("hello stranger.");
}

קוד זה ייתן את הביטוי "!hello monkey" בתיבת האתראה, ולא משנה מה תקליד ב- prompt, דבר שאינו רצוי. בגלל שיש רק סימן שווה אחד בפקודת if-then, אשר אומרת ל-JavaScript שאתה רוצה לבצע השמה בין משתנים ולא השוואה. נאמר כי אתה מדפיס "Robbie the robot" אל ה- prompt. בתחילה, the_name יהיה "Robbie the robot". אבל אז אם הוראת ה- "if" אומרת ל-JavaScript שאתה רוצה לקבוע כי the_name = "the monkey". אז JavaScript בשמחה תמלא את פקודתך, ותשלח הודעת "אמת" ("true") אל ה- if-then statement, ותיבת האתראה תופיע עם הודעת "!Hello monkey" תמיד.

הבאג הערמומי עלול לשגע אותך, אז התרכז בהכפלת סימני שווה אלו.

לשים משתנים במירכאות בטעות, או לשכוח לשים במירכאות מחרוזות.

טעות זו תופסת אותי שוב ושוב. הדרך היחידה ש-JavaScript יודעת להבדיל בין משתנה למחרוזת היא ע"י כך שלמחרוזות יש מירכאות סביבן ולמשתנים אין. הנה דוגמא ברורה:

var the_name = 'koko the gorilla';
alert("the_name is very happy");

תיבת האתראה תדפיס "the_name is very happy", למרות ש- the_name הוא משתנה. זאת משום, שברגע ש- JavaScript רואה מירכאות סביב משהו, היא מפסיקה לנסות ולהבינו, וע"י כך ששמנו את the_name בתוך מירכאות, גרמנו ל- JavaScript להפסיק לחפש את המשתנה בזיכרון.

להלן דוגמא פחות ברורה ומורחבת של באג זה (אשר ראינו ביום השלישי- לינק):

function wakeMeIn3()
{
  var the_message = "Wake up! Hey! Hey! WAKE UP!!!!";
  setTimeout("alert(the_message);", 3000);
}

הבעיה היא שאתה אומר ל-JavaScript להפעיל את alert(the_message) בתוך שלוש שניות. שלוש שניות מעכשיו, בכל אופן, the_message אינה קיימת יותר משום שיצאת מהפונקציה. הפתרון לבעיה זו הוא:

function wakeMeIn3()
{
  var the_message = "Wake up!";
  setTimeout("alert('" + the_message+ "');", 3000);
}

ע"י הוצאת the_message מתוך המירכאות בצורה כזו, הפקודה "alert('Wake up!');" נקבעת ע"י ה-setTimeout, כפי שרצינו.

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

חזור לתחילת הדף

לדף הבא «--

 
       
       
   
 
 

עמוד ראשי
מדריך בסיסי
מדריך מתקדם
החלפת תמונות
גניבת קוד
מפת האתר