המכלול:סקריפטים/פיתוח סקריפטים

מטרת מדריך זה היא להסביר איך מפתחים סקריפט, או קוד javascript לשימוש בהמכלול.

פיתוח סקריפט מקומי לפני העלאה לדף בהמכלול

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

• עריכת הדף: מיוחד:mypage/common.js. יתרון: בסופו של דבר הסקריפט יצטרך לרוץ משם. חסרון: כל שינוי שנעשה יופיע בהמכלול ויוצג בדף השינויים האחרונים.
  • פתרון אפשרי: להוסיף קריאה לשאיבת ה-javascript משרת חיצוני (למשל שרת שנריץ במחשב האישי) או מאתר לאחסון אתרים.
• להזריק את ה-javascript ישירות דרך הדפדפן.
  • bookmarklet. יתרון : נתמך ברוב הדפדפנים ולא מצריך התקנה כלשהי. חסרון: מוגבל לכתיבת סקריפטים קצרים ביותר ולא כל-כך נוח.
  • javascript console. יתרון: מאפשר הכנסה של קוד javascript ישירות מהדפדפן ושינוי שלו משם. חסרון: לא ניתן להגדיר break points בצורה מסודרת.

באמצעות javascript console

ההתייחסות כאן היא ספציפית לדפדפן, ההסבר הוא לדפדפנים מרכזיים.

הזרקת הקוד לאתר:

• אקספלורר: פתחו כלי פיתוח (F12). בטאב מסוף בחלק התחתון מופיעה שורה שבה ניתן להכניס קוד javascript. אם הקוד שאתם כותבים הוא יותר משורה (ובדרך כלל זה המצב) רצוי ללחוץ על הכפתור בפינה הימנית התחתונה שיהפוך את שורת הפקודה למצב שורות מרובות.

• פיירפוקס: פתחו Firebug ‏(F12). תחת Console מופיעה שורה שבה ניתן להכניס קוד javascript. אם הקוד שאתם כותבים הוא יותר משורה (ובדרך כלל זה המצב) רצוי ללחוץ על הכפתור בפינה השמאלית התחתונה שיהפוך את שורת הפקודה למצב שורות מרובות.

• כרום: פתחו את כלי הפיתוח (F12). תחת Console מופיעה שורה שבה ניתן להכניס קוד javascript. בלחיצה על Enter או Run מורץ קוד ה-javascript שהוכנס.

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

את הקוד רצוי לשמור כל העת ולערוך דרך עורך מתאים, וכשאתם מעוניינים לבדוק אותו להעתיק את הקוד במלואו (ctrl+A, Ctrl+c, ctrl+v) אל שורת הconsole.

באמצעות שרת

שלב ראשון: הפעלת שרת אינטרנט על המחשב האישי

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

אם אתם משתמשים ב-Linux, אז לא צריך לעשות כלום - השרת אפאצ'י, (מוכר גם כ-httpd) כבר מופעל.

אם אתם משתמשים ב-Windows, אז קודם כל כדאי לבדוק ב-services אם IIS כבר מופעל. בהנחה שלא, יש שתי אפשרויות: להתקין אפאצ'י או להפעיל את iis. להתקנת אפאצ'י חפשו בגוגל xampp או wampp או lampp. להפעלת iis חפשו בגוגל "Activating iis on Windows 7". ראו את אחד מהמדריכים כאן.

אחרי שהשרת עובד, צרו בספרייה של הקבצים אותם הוא משרת (ב-Windows עם iis, הנתיב הוא בדרך-כלל c:\inetpub\www ) קובץ בשם test.js, והוסיפו לקובץ common.js שלכם את השורה:

mw.loader.load('http://localhost/test.js' );

פיתוח ודיבגינג

כרום

שומרים את הסקריפט כפי שתואר לעיל ומבצעים "רענון עמוק": לוחצים עם הלחצן הימני של העכבר על נקודה כלשהי בדף ובוחרים ב-"Inspect Element", או לחלופין מקישים את הצירוף Ctrl+Shift+I.

במסך שנפתח, לוחצים על "Console" כדי לראות אם יש שגיאת תחביר (תופיע כשורה אדומה). אם אין, בוחרים מהסרגל "Scripts" ומרשימת הסקריפטים הזמינים (סרגל משני) את test.js. במסך שהתקבל, יש אפשרות להציב breakpoints (כלומר שורות שכשהסקריפט מגיע אליהן הוא עוצר ומחכה שתגידו לו מה לעשות הלאה) על ידי לחיצה על מספר השורה.

פרק זה לוקה בחסר. אנא תרמו למכלול והשלימו אותו.

אינטרנט אקספלורר

יש להיכנס לכלי פיתוח (F12).

פרק זה לוקה בחסר. אנא תרמו למכלול והשלימו אותו.

פיירפוקס

יש להתקין את התוסף javascript debugger.

פרק זה לוקה בחסר. אנא תרמו למכלול והשלימו אותו.

עורך

כדי לפתח סקריפטים צריך עורך טקסט. העורך "Notepad" שמגיע עם Windows (פנקס רשימות) רחוק מלהיות אופטימלי למשימה^{[דרוש מקור]}. ישנם עורכי טקסט רבים סבירים, ומפתחים רבים משתמשים ב-Notepad++. אם אתם משתמשים בעורך זה, וודאו בתפריט "אפשרויות" שברירת המחדל שהעורך משתמש בה ל-Encoding (קידוד) של מסמכים חדשים היא UTF-8. העורך עצמו כבר יאתר עבורכם שגיאות תחביר פשוטות, כמו בלוקים ( { ו } ) לא מאוזנים, מחרוזות, הערות שפתחתם ושכחתם לסגור, וכן הלאה.

הזחות

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

שמות פונקציות

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

לחלופין אפשר להחביא את כל הפונקציות תחת פונקציה אנונימית ובצורה זו אין הכרח לבחור קידומת ייחודית. דוגמת קוד:

(function(){

function doSomething(){}
doSomething();
})();

משתנים מקומיים בפונקציות

אל תשכחו להצהיר על משתנים מקומיים בפונקציה (מילת המפתח var). משתנה שאתם משתמשים בו בפונקציה בלי להצהיר עליו הופך למשתנה גלובלי, ובכך מזהם את מרחב השמות הראשי.

debugging

Chrome

ההנחה היא שהסקריפט נמצא בשרת פרטי, וכלול בעזרת ()importScriptURI. נניח שלסקריפט קוראים test.js, (בדרך-כלל, עדיף לכלול בדיוק סקריפט אחד (נניח http://localserver/test.js)) ב-מיוחד:הדף שלי/common.js, וכאשר מפתחים מקומית, לתת לכל סקריפט שם חדש, ולהשתמש ב-fsutil, כדי לתת לסקריפט הספציפי שם נוסף שהוא השם הכללי. למשל, כאשר מפתחים סקריפט בשם nonsense.js מוחקים את הסקריפט test.js הקודם, ומריצים את הפקודה

fsutil hardlink create C:\inetpub\wwwroot\test.js .\nonsense.js

הוראות אלו הן למשתמשי DOS. למפתחים שמשתמשים במערכת הפעלה מומלץ להשתמש ב-logical links.

בדף בהמכלול בו אתם מצפים שהסקריפט יפעל, לוחצים על F12. בוחרים מהסרגל Scripts, ומסרגל המשנה בוחרים test.js. אם אינכם רואים סקריפט זה, בצעו "רענון עמוק". אם עדיין אינכם רואים, בידקו ב-Console אם אין שגיאת תחביר. במקרה של שגיאת תחביר הסקריפט לא ייטען.

כשאתם רואים בדף של ה-Developer Tool את הסקריפט שלכם, שימו לב לשוליים השמאליים, עם מספרי השורות. לחיצה על מספר שורה מדליק "נקודת עצירה" (breakpoint) בשורה זו, וכשהסקריפט יגיע לשם בזמן הביצוע הוא יעצור. בנקודה זו ניתן לבחון את ערכם של משתנים וביטויים (דרך "Scope variables", או "Watch expression" שבצד ימין, וכן דרך ה-Console). כמו כן ניתן לראות את מחסנית הקריאות, רשימת נקודות העצירה, וכל מיני טובין נוספים. בראש הצד הימני ישנו סרגל עם כמה כפתורים שמאפשרים לשחרר את הסקריפט להמשך ריצה (כמובן, עד לנקודת העצירה הבאה), או ביצוע פקודה יחידה. במקרה השני עומדות בפניכם שתי אופציות: אמנם בשורות פשוטות אין הבדל, אבל כשנקודת העצירה היא קריאה לפונקציה, ניתן לבצע "Step into" (כלומר להיכנס לפונקציה הנקראת) או לבצע "Step-over" (כלומר עד השורה הבאה בפונקציה הנוכחית).

פרק זה לוקה בחסר. אנא תרמו למכלול והשלימו אותו.