איך נוסיף קוד Javascript לדף HTML

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

התג <script> ותפקידו בהוספת קוד Javascript לדפי HTML

התג <script> מהווה מסגרת שבאמצעותה נוכל ל"דווח" לדפדפן היכן ממוקם קוד ה - Javascript שלנו. להלן דוגמה לשימוש בתג זה:

<script type="text/javascript">
    document.write("This is my first script")
</script>

בדוגמת הקוד למעלה כתבנו משפט בקוד Javascript (בשלב זה אין צורך להבין את הקוד) שאותו מיקמנו בתוך התג <script>. כאשר דפדפן התומך ב - Javascript נתקל בתג <script> כפי שכתבנו אותו הוא יודע שכל מה שבתוך התג הוא קוד Javascript שאותו עליו להריץ. חשוב לשים לב, שכדי לציין שמדובר בקוד Javascript ציינו כי הערך של התכונה type שהיא תכונה של התג <script> שווה ל - "text/javascript".

קוד Javascript כזה יכול להיות מפוזר בכל המסמך שלנו והתג <script> כמובן יכול להופיע יותר מפעם אחת במסמך שלנו.

הוספת קוד Javascript בראשו של  דף  HTML

אחד המקומות שמאוד מקובל למקם בתוכם קוד Javascript הוא בתוך התג <head> שבראש דף ה - HTML שלנו. רבים נוהגים לרכז באזור זה את רוב הקוד שלהם. בדוגמה הבאה אציג דוגמה למיקום קוד Javascript בתוך התג <head>

<html>
  <head>
     <title>My First HTML Page With JavaScript Code</title>
        <script type="text/javascript">
            document.write("This is my first script")
        </script>
 </head>
 <body>
    The rest of the document....
 </body>
</html>

הוספת קוד Javascript בתוך אזור ה - <body> של מסמך HTML

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

דוגמה למיקום קוד Javascript בתוך התג <body>

<html>
<body>

<script type="text/javascript">
   document.write("This is my first script")
</script>

</body>
</html>

שימוש בתג <script> כדי להצביע על קובץ קוד חיצוני למסמך HTML

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

דוגמה לשימוש בתג <script> כדי להצביע על קובץ קוד חיצוני

<html>
  <head>
     <title>My First HTML Page With External JavaScript Code</title>
      <script type="text/javascript"type="text/javascript"            src="../scripts/MyCode.js">
           
       </script>
 </head>
 <body>
    The rest of the document....
 </body>
</html>

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

הוספת קוד Javascript לאלמנט ללא שימוש בתג <script>

קוד Javascript ניתן להוסיף גם ישירות לאלמנט בלא תיווך של התג <script>. בדוגמה הבאה למשל נראה כיצד נוסיף קוד כזה לקישור ונגרום לכך שלחיצה על קישור זה תגרום להצגת הודעה ובה ייכתב: Hello from Devschool:

<!DOCTYPE HTML>
<html>
<head>
<title>Title </title>
</head>
<body>
<a href="#" onClick="alert('Hello from Devschool')">Click Me</a>
</body>
</html>

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

כלים ומדריכים נוספים הקשורים לנושא זה

המדריך ל - Events בשפת Javascript

המדריך לתג <script> בשפת HTML5

המדריך לתג <head> בשפת HTML5

המדריך לתג <body> בשפת HTML5


 
© 2010-2013  www.Devschool.co.il | מדיניות פרטיות | תנאי שימוש