Get Adobe Flash player
דף הבית תחביר בסיסי תחביר ג'

הוספת קוד לדף HTML - היכן?

קוד ה- JavaScript הכתוב בדף, יבוצע מייד עם טעינת הדף אל הדפדפן.

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

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

קוד הכתוב ב <head>

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

בדוגמא הבאה, מופיעה פונקציה הכתובה ב <head>. הפוקציה מופעלת עם טעינת הדף וכצותאה מציגה על המסך הודעת התראה.

<html>
<head>
<script
type= "text/javascript" >
function message()
{
alert(
"חלון התראה זה נפתח עם טעינת הדף" );
}
</script>
<body onload= "
message()">
</body>
</html>

קוד הכתוב ב <body>

כאשר אינך רוצה שהקוד ייכתב בתוך פונקציה, או אם הקוד אמור לבצע כתיבה בתוך התוכן עצמו, תצטרך לשים אותו ב <body>, במקום בו תרצה שהכתיבה תתבצע.  

 

<html>

<head>
</head>

<body>
<script
type = "text/javascript" >
      document. write( "קוד הכתוב באזור התוכן" );
</script>
</body>
</html>

קוד הכתוב גם ב <head> וגם ב- <body>

אפשר להכניס לדף ה HTML מספר בלתי מוגבל של קודי JavaScript. כך יתכנו מצבים שיהיה צורך למקם כמה פיסות קוד ב <body> ועוד כמה פונקציות ב <head>.  הקוד שלפניכם מדגים זאת:

 

<html>
<head>
<script
type= "text/javascript" >
function message()
{
alert(
"חלון התראה זה נפתח עם טעינת הדף" );
}
</script>
<body onload= "
message()">

<script type = "text/javascript" >
      document. write( "קוד הכתוב באזור התוכן" );
</script>
</body>
</html>

קוד JavaScript הכתוב בקובץ חיצוני

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

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

את הקובץ החיצוני, יש לשמור בסיומת js. למשל: many_scripts.js.

כדי לקשור את קובץ ה HTML אל קובץ ה js, נוסיף תכונת src לתג <script>. תכונה זו נושאת את כתובת קובץ ה js. דוגמא לכך, תראה בשורה הבאה.

<script type="text/javascript" src="many_scripts.js"></script>

שים לב:יש לשים את תג הסקריפט במקום שבו היית שם אותו גם אם הקוד לא היה בקובץ חיצוני

אל השיעור הקודם אל השיעור הבא