כיצד להפריד את JavaScript בדף האינטרנט שלך

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

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

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

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

JavaScript המוטבע שלך אמור להיראות דומה לאחת משלוש הדוגמאות שלעיל. כמובן שקוד ה- JavaScript שלך בפועל יהיה שונה מזה המוצג, אך ככל הנראה ה- JavaScript יוטבע בדף באחת משלוש השיטות שלעיל. במקרים מסוימים, הקוד שלך עשוי להשתמש במיושן שפה = "javascript" במקום type = "text / javascript" במקרה כזה תרצה להביא את הקוד שלך מעודכן מלכתחילה על ידי החלפת תכונת השפה בסוג אחד.

לפני שתוכל לחלץ את ה- JavaScript לקובץ משלו, עליך קודם לזהות את הקוד שיש לחלץ. בשלוש הדוגמאות שלעיל, ישנן שתי שורות של קוד JavaScript בפועל שיש לחלץ. ככל הנראה לתסריט שלך יהיו הרבה יותר שורות, אך ניתן לזהות אותם בקלות משום שהוא יתפוס את אותו מקום בתוך הדף שלך כמו שתי שורות JavaScript שאנו הדגישו בשלוש הדוגמאות שלעיל (שלוש הדוגמאות מכילות את אותן שתי שורות של JavaScript, זה רק המיכל סביבן שהוא מעט שונה).

1. הדבר הראשון שעליך לעשות בכדי לחלץ את ה- JavaScript לקובץ נפרד הוא לפתוח עורך טקסט רגיל ולגשת לתוכן דף האינטרנט שלך. לאחר מכן עליך לאתר את ה- JavaScript המוטבע שיוקף באחת מווריאציות הקוד המוצגות בדוגמאות לעיל.
2. לאחר שאיתרת את קוד JavaScript עליך לבחור אותו ולהעתיק אותו ללוח שלך. בדוגמה שלעיל, הקוד שיבחר מודגש, אינך צריך לבחור את תגי הסקריפט או את התגובות האופציונליות שעשויות להופיע סביב קוד JavaScript שלך.
3. פתח עותק נוסף של עורך הטקסט הפשוט שלך (או כרטיסייה אחרת אם העורך תומך בפתיחת יותר מקובץ אחד בכל פעם) וחלף על פני תוכן JavaScript שם.
4. בחר שם קובץ תיאורי שישמש לקובץ החדש שלך ושמור את התוכן החדש באמצעות שם קובץ זה. עם קוד הדוגמה, מטרת התסריט היא לפרוץ את המסגרות כך ששם מתאים יכול להיות framebreak.js.
5. אז עכשיו יש לנו JavaScript בקובץ נפרד אנו חוזרים לעורך בו יש לנו את תוכן העמוד המקורי כדי לבצע את השינויים שם כדי לקשר לעותק החיצוני של הסקריפט.
6. מכיוון שיש לנו כעת את הסקריפט בקובץ נפרד, אנו יכולים להסיר הכל בין תגי הסקריפט בתוכן המקורי שלנו כך שה- תגית.
7. השלב האחרון הוא להוסיף תכונה נוספת לתג הסקריפט המזהה היכן הוא יכול למצוא את ה- JavaScript החיצוני. אנו עושים זאת באמצעות א src = "שם קובץ" תכונה. בעזרת סקריפט הדוגמה שלנו, היינו מציינים src = "framebreak.js".
8. הסיבוך היחיד לכך הוא אם החלטנו לאחסן את JavaScripts החיצוניים בתיקיה נפרדת מדפי האינטרנט המשתמשים בהם. אם תעשה זאת, עליך להוסיף את הנתיב מתיקיית דף האינטרנט לתיקיית JavaScript מול שם הקובץ. לדוגמה, אם JavaScripts מאוחסנים ב- ג'ס תיקיה בתוך התיקיה שמכילה את דפי האינטרנט שלנו היינו צריכים src = "js / framebreak.js"

אז איך נראה הקוד שלנו לאחר שהפרידנו את ה- JavaScript לקובץ נפרד? במקרה של JavaScript הדוגמה שלנו (בהנחה ש- JavaScript ו- HTML נמצאים באותה תיקיה) ה- HTML בדף האינטרנט קורא כעת:

יש לנו גם קובץ נפרד שנקרא framebreak.js שמכיל:

אם (מיקום.מיקום! = עצמי. מיקום) top.location = מיקום עצמי;

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

מה עם שתי השורות האחרות הללו בכל אחת מהדוגמאות שתיים ושלוש? ובכן, מטרתן של השורות הללו בדוגמה שנייה היא להסתיר את JavaScript מ- Netscape 1 ומהאינטרנט אקספלורר 2, שאף אחד מהם לא משתמש יותר ולכן השורות האלה לא באמת נדרשות בראשון מקום. הצבת הקוד בקובץ חיצוני מסתירה את הקוד מדפדפנים שלא מבינים את תג הסקריפט בצורה יעילה יותר מאשר להקיף אותו בתגובת HTML בכל מקרה. הדוגמה השלישית משמשת עבור דפי XHTML כדי לומר לאמת validators שיש להתייחס ל- JavaScript כתוכן עמוד ולא לאמת אותו. כ- HTML (אם אתה משתמש בתכנית HTML ולא ב- XHTML, המאמת כבר יודע זאת ולכן התגים האלה אינם צורך). עם ה- JavaScript בקובץ נפרד, אין עוד JavaScript בדף שאותו מדלגים על ידי validators ולכן אין צורך יותר בשורות אלה.

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

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

זה שגוי דרך להשתמש ב- onclick אלא אם כן יש לך כתובת משמעותית בפועל בתכונה href כך שאלו ללא JavaScript יועברו למקום כלשהו כאשר ילחצו על הקישור. הרבה אנשים מפסיקים גם את "החזרת שווא" מקוד זה ואז תוהים מדוע החלק העליון של העמוד הנוכחי תמיד נטען לאחר הפעלת הסקריפט (וזה מה ש- href = "#" אומר לדף לעשות אלא אם כן יוחזר כוזב מכל מטפלי האירועים. כמובן שאם יש לך משהו משמעותי כיעד הקישור, ייתכן שתרצה לנסוע לשם לאחר הפעלת קוד onclick ואז לא תזדקק ל"החזר שווא ".

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

אם אתה רוצה להריץ משהו כשאנשים לוחצים על טקסט שאתה יכול להשתמש בו:

קצת טקסט

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

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

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

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

 קצת טקסט

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

document.getElementById ('img1'). onclick = dosomething; document.getElementById ('sp1'). onclick = dosomething;

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

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

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

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

הפיתרון הטוב ביותר הוא להפסיק להשתמש במטפל אירועים לחלוטין ולהשתמש במקום זאת במאזין לאירועי JavaScript (יחד עם ה- attachEvent המתאים עבור Jscript- מכיוון שזהו אחד מאותם מצבים שבהם JavaScript ו- JScript נבדלים). אנו יכולים לעשות זאת בקלות רבה על ידי יצירת תחילה פונקציית addEvent שתוסיף או מאזין לאירוע או קובץ מצורף, תלוי באיזו מהשניים שהשפה המופעלת תומכת בה;

פונקציה addEvent (el, eType, fn, uC) {if (el.addEventListener) {el.addEventListener (eType, fn, uC); להחזיר אמיתי; } אחרת אם (el.attachEvent) {להחזיר el.attachEvent ('ב' + eType, fn); } }

כעת אנו יכולים לצרף את העיבוד שאנו רוצים שיקרה כאשר לוחצים על האלמנט שלנו באמצעות:

addEvent (document.getElementById ('spn1'), 'לחץ', dosomething, false);

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

אם אנו זקוקים ליכולת להסיר פונקציות ממה שמופעל כאשר לוחצים על אלמנט, נוכל ליצור פונקציית deleteEvent המתאימה שקוראת לפונקציה המתאימה להסרת מאזין לאירועים או מצורפת אירוע?

החיסרון היחיד של דרך אחרונה זו לחיבור העיבוד הוא שדפדפנים ותיקים באמת אינם תומכים בדרכים חדשות יחסית אלה לחיבור עיבוד אירועים לדף אינטרנט. צריכים להיות מעטים מספיק אנשים המשתמשים כיום בדפדפנים עתיקים כאלה כדי להתעלם מהם במה J (ava) תסריט אנו כותבים מלבד כתיבת הקוד שלנו בצורה כזו שהוא לא גורם למספר רב של שגיאות הודעות. הפונקציה לעיל נכתבת כדי לא לעשות דבר אם אף אחת מהדרכים בהן היא משתמשת אינה נתמכת. רוב הדפדפנים הישנים באמת אינם תומכים בשיטת getElementById להפניית HTML או כך פשוט אם (! document.getElementById) יחזירו כוזב; בחלק העליון של כל הפונקציות שלך שעושות שיחות כאלה יהיה גם מתאים. כמובן, אנשים רבים שכותבים JavaScript אינם כל כך מתחשבים באלה שעדיין משתמשים בדפדפנים עתיקים כך שמשתמשים אלה בוודאי מתרגלים לראות שגיאות JavaScript כמעט בכל דף אינטרנט בו הם מבקרים.

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

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

לדפדפנים יש שתי הזמנות שונות בהן הם יכולים לעבד אירועים כאשר האירוע מופעל. הם יכולים לעבוד מבחוץ פנימה מה-

• uC = נכון לתהליך בשלב הצילום
• uC = שקרי לעיבוד בשלב הבועה.

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

Internet Explorer ומטפלי אירועים מסורתיים תמיד מעבדים את שלב הבועה ולעולם לא את שלב הלכידה ולכן תמיד מתחילים בתג הספציפי ביותר ועובדים כלפי חוץ.

אז עם מטפלים באירועים:

xx