הצגת המקור של הדף "ויקי:סקריפטים/פיתוח סקריפטים"

{{קיצור דרך|[[WP:US/G]]}}
מטרת מדריך זה היא להסביר איך מפתחים [[ויקיפדיה:סקריפטים|סקריפט]], או קוד [[ג'אווה סקריפט|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]]''', אז לא צריך לעשות כלום - ה[[Apache HTTP Server|שרת אפאצ'י]], (מוכר גם כ-httpd) כבר מופעל. 

אם אתם משתמשים ב-'''[[Microsoft Windows|Windows]]''', אז קודם כל כדאי לבדוק ב-services אם [[Internet Information Services|IIS]] כבר מופעל. בהנחה שלא, יש שתי אפשרויות: להתקין אפאצ'י או להפעיל את iis. להתקנת אפאצ'י חפשו ב[[גוגל (מנוע חיפוש)|גוגל]] [[xampp]] או [[wampp]] או [[LAMP (תשתיות תוכנה)|lampp]]. להפעלת iis חפשו בגוגל "Activating iis on [[Windows 7]]". ראו את אחד מהמדריכים [http://learn.iis.net/page.aspx/28/installing-iis-7-on-windows-vista-and-windows-7 כאן].

אחרי שהשרת עובד, צרו [[ספרייה (תכנות)|בספרייה של הקבצים]] אותם הוא משרת (ב-Windows עם iis, הנתיב הוא בדרך-כלל c:\inetpub\www ) קובץ בשם '''test.js''', והוסיפו לקובץ '''common.js''' שלכם את השורה:
<syntaxhighlight lang="text">
mw.loader.load('http://localhost/test.js' );
</syntaxhighlight>

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

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

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

:'''[[אינטרנט אקספלורר]]'''
יש להיכנס לכלי פיתוח (F12).
{{להשלים}}

:'''[[מוזילה פיירפוקס|פיירפוקס]]'''
יש להתקין את התוסף [[javascript debugger]].
{{להשלים}}

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

==הזחות==
השתמש ב-[[טאב]] וודא שהעורך מזיח בדיוק ארבעה [[מרווח (כתב)|רווחים]] לכל טאב.

==שמות פונקציות==
לכל סקריפט חדש בחר [[רישא|קידומת]] ייחודית לשמות ה[[שגרה (תכנות)|פונקציות]] ו[[משתנה גלובלי|המשתנים הגלובליים]] באותו סקריפט. השתדלו למעט בפונקציות גלובליות ומשתנים גלובליים במידת האפשר.

לחלופין אפשר להחביא את כל הפונקציות תחת פונקציה אנונימית ובצורה זו אין הכרח לבחור קידומת ייחודית. דוגמת קוד:
<syntaxhighlight lang="javascript">
(function(){

function doSomething(){}
doSomething();
})();
</syntaxhighlight>

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

==debugging==
:'''Chrome'''
ההנחה היא שהסקריפט נמצא בשרת פרטי, וכלול בעזרת ()importScriptURI. נניח שלסקריפט קוראים '''test.js''', ('''בדרך-כלל, עדיף לכלול בדיוק סקריפט אחד''' (נניח http://localserver/test.js)) ב-[[מיוחד:הדף שלי/common.js]], וכאשר מפתחים מקומית, לתת לכל סקריפט שם חדש, ולהשתמש ב-fsutil, כדי לתת לסקריפט הספציפי שם נוסף שהוא השם הכללי. למשל, כאשר מפתחים סקריפט בשם nonsense.js מוחקים את הסקריפט test.js הקודם, ומריצים את הפקודה
<syntaxhighlight lang="text">
fsutil hardlink create C:\inetpub\wwwroot\test.js .\nonsense.js
</syntaxhighlight>

<!-- את המשפט הבא לא הצלחתי להבין (מה DOS קשור עכשיו ?!) - אנא עירכו אותו כראוי -->
:הוראות אלו הן למשתמשי [[DOS]]. למפתחים שמשתמשים במערכת הפעלה מומלץ להשתמש ב-logical links.

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

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

[[קטגוריה:ויקיפדיה - גאדג'טים]]