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