הדרך הנכונה לשילוב קוד JavaScript באתר
קיימות 2 דרכים עיקריות להוסיף קוד JavaScript לאתר:
- קוד שנמצא בתוך הדף עצמו, כפי שראינו במדריכים הקודמים.
- לשים את הקוד בקובץ JavaScript נפרד.
במדריך זה נסביר את שתי הדרכים, ומדוע עדיף לייחד לסקריפט ה-JavaScript קובץ נפרד.
הוספת הקוד לכל דף בנפרד
עד עכשיו כתבנו את הסקריפטים שלנו ישירות בדף ההטמ"ל, בין התגיות script. לדוגמה:
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<!-- JavaScript-תוכן הדף לפני קוד ה -->
<script>
alert("שלום עולם");
</script>
</body>
</html>צריך לשים לב שאת הסקריפטים של JavaScript מעדיפים לשים בתחתית ה-body, מתחת לכל ההטמ"ל, וקצת מעל לתגית ה-body הסוגרת. הסיבה לכך, היא שהטעינה של קוד JavaScript מאטה את הדף, ולכן נעדיף לטעון את ה-JavaScript אחרון, כדי שלא יפריע ליתר הדף להטען.
השיטה של הוספת קוד ה-JavaScript לכל דף בנפרד אינה מומלצת משתי סיבות:
- לא ניתן לשמור בקאש של הדפדפן דבר שמאט את טעינת הדף בביקורים חוזרים.
- צריך לכתוב את אותו קוד בדפים שונים, שזה סתם לא חכם.
לכן, עדיף לטעון את ה-JavaScript מקובץ js חיצוני.
טעינה של קובץ JavaScript חיצוני
כדי לטעון את קובץ ה-JavaScript החיצוני אנחנו צריכים שיהיו לנו שני קבצים:
- קובץ הטמ"ל עם סיומת html או קובץ PHP שמייצר קובץ תבנית. לדוגמה, index.html
- קובץ JavaScript עם סיומת js. לדוגמה, script.js
כדי להשתמש בקובץ ה-JavaScript החיצוני, בקובץ ההטמ"ל, נוסיף לתגית ה-script את השדה src הכולל את מקום הקובץ. כך נראית תגית ה-script, אם אנחנו רוצים לטעון את הקובץ script.js, מתוך התיקייה scripts:
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<!-- JavaScript-תוכן הדף לפני קוד ה -->
<script src="scripts/script.js"></script>
</body>
</html>בתוך הקובץ script.js נכתוב את קוד ה-JavaScript שלנו.
שימוש בקובץ JavaScript חיצוני היא הדרך המומלצת להשתמש ב-JavaScript בגלל שכל הדפים באתר יכולים לקבל את הקוד מאותו קובץ. כתוצאה מכך, קל יותר לשמור על אחידות, ובכל פעם שרוצים לשנות את הסקריפט אפשר לשנות אותו במקום אחד בלבד, במקום במספר דפים. בנוסף, הדפדפן שומר את קבצי ה-JavaScript בקאש, וזה גורם להאצת מהירות הגלישה כשהמשתמשים חוזרים לבקר באתר.
במדריכים הבאים בסדרה נלמד להשתמש בלולאות בקוד ה-JavaScript שלנו.
אהבתם? לא אהבתם? דרגו!
0 הצבעות, ממוצע 0 מתוך 5 כוכבים
המדריכים באתר עוסקים בנושאי תכנות ופיתוח אישי. הקוד שמוצג משמש להדגמה ולצרכי לימוד. התוכן והקוד המוצגים באתר נבדקו בקפידה ונמצאו תקינים. אבל ייתכן ששימוש במערכות שונות, דוגמת דפדפן או מערכת הפעלה שונה ולאור השינויים הטכנולוגיים התכופים בעולם שבו אנו חיים יגרום לתוצאות שונות מהמצופה. בכל מקרה, אין בעל האתר נושא באחריות לכל שיבוש או שימוש לא אחראי בתכנים הלימודיים באתר.
למרות האמור לעיל, ומתוך רצון טוב, אם נתקלת בקשיים ביישום הקוד באתר מפאת מה שנראה לך כשגיאה או כחוסר עקביות נא להשאיר תגובה עם פירוט הבעיה באזור התגובות בתחתית המדריכים. זה יכול לעזור למשתמשים אחרים שנתקלו באותה בעיה ואם אני רואה שהבעיה עקרונית אני עשוי לערוך התאמה במדריך או להסיר אותו כדי להימנע מהטעיית הציבור.
שימו לב! הסקריפטים במדריכים מיועדים למטרות לימוד בלבד. כשאתם עובדים על הפרויקטים שלכם אתם צריכים להשתמש בספריות וסביבות פיתוח מוכחות, מהירות ובטוחות.
המשתמש באתר צריך להיות מודע לכך שאם וכאשר הוא מפתח קוד בשביל פרויקט הוא חייב לשים לב ולהשתמש בסביבת הפיתוח המתאימה ביותר, הבטוחה ביותר, היעילה ביותר וכמובן שהוא צריך לבדוק את הקוד בהיבטים של יעילות ואבטחה. מי אמר שלהיות מפתח זו עבודה קלה ?
השימוש שלך באתר מהווה ראייה להסכמתך עם הכללים והתקנות שנוסחו בהסכם תנאי השימוש.