המדריך הישראלי ל-JavaScript, פרק 10

פרק 10: שילוב של JavaScript ו-HTML

· הקדמה

· שילוב פקודות ה-JavaScript בתוך מרכיב ה-SCRIPT

· כתיבת פקודות ה-JavaScript בקובץ נפרד

· שילוב קוד ב-JavaScript כערכן של תכונות של מרכיבי HTML

· המרכיב NOSCRIPT

· תרגילים

הקדמה

קיימות מספר דרכים אפשריות לשילוב של פקודות ב-JavaScript בתוך מסמך HTML. אחת הדרכים השכיחות ביותר כוללת את הוספת התגיות <SCRIPT> ו- </SCRIPT> אל תוך מסמך ה-HTML, והוספת הפקודות ב-JavaScript אל התחום שביניהן. כך, למעשה, היה בכל הדוגמאות עד כה. זוהי איננה הדרך היחידה, וקיימות דרכים נוספות שבהן ניתן לשלב פקודות ב-JavaScript בתוך מסמך ה- HTML.

פרק זה מציג את האפשרויות השונות שקיימות בבואנו לשלב בין JavaScript לבין HTML. חלקו הראשון של הפרק דן באפשרות המוכרת להוספת התגיות <SCRIPT> ו- </SCRIPT> אל מסמך ה-HTML, וכתיבת הפקודות ב-JavaScript ביניהן. יתר חלקיו של הפרק מציגים את האפשרויות האחרות אשר מאפשרות לשלב בין JavaScript לבין HTML.

שילוב פקודות ה-JavaScript בתוך מרכיב ה-SCRIPT

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

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

אל תוך התגית <SCRIPT> נהוג להוסיף את התכונה LANGUAGE ולקבוע את ערכה כך שיהיה שווה לשפת הסקריפט שבה נכתבו הפקודות בין שתי התגיות. יש לזכור כי JavaScript איננה שפת הסקריפט היחידה שקיימת. קיימות שפות נוספות כגון VBScript. כמו כן, באמצעות תכונה זו (התכונה LANGUAGE) ניתן גם לציין את הגירסה של שפת הסקריפט שבה נעשה שימוש. כך לדוגמא, באמצעות כתיבת תגית ההתחלה של המרכיב SCRIPT באופן הבא:

מציינים ששפת הסקריפט שבה נעשה שימוש היא JavaScript מגרסה 1.2.

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

לדוגמא:

//definitions of the functions according to JavaScript 1.0

</SCRIPT>

//definitions of the functions according to JavaScript 1.1

</SCRIPT>

//definitions of the functions according to JavaScript 1.2

</SCRIPT>

//definitions of the functions according to JavaScript 1.3

</SCRIPT>

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

לדוגמא:

location.replace("js1.3/index.html");

</SCRIPT>

location.replace("js1.2/index.html");

</SCRIPT>

location.replace("js1.1/index.html");

</SCRIPT>

location.replace("js1.0/index.html");

</SCRIPT>

נהוג להוסיף סביב הפקודות שכתובות ב-JavaScript את סימני ההערה שמקובלים ב-HTML: '--!>' בהתחלה ו '<--' בסוף. כמו כן, את השורה שבה מופיע הסימן '<--' יש להתחיל ב-// כדי שפקודות ה-JavaScrip תפעלנה כהלכה. הסימן // מהווה סימן להערה ב-JavaScrip, ואם הוא לא יקדים את הסימן '<--' תגרם תקלה בפעולת הדפדפן.

יש למקם את סימני ההערה על פי הדוגמא הבאה:

<!--The beginning of the JavaScript commands

כאן ממקמים את הפקודות ב-JavaScript

// The end of the JavaScript commands -->

</SCRIPT>

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

כתיבת פקודות ה-JavaScript בקובץ נפרד

את הפקודות ב-JavaScript ניתן לכתוב בקובץ נפרד, ולציין את שילובו במסמך ה-HTML באמצעות הוספת התכונה SRC אל תוך התגית <SCRIPT>. את ערכה של תכונה זו יש לקבוע כך שיהיה שווה ל-URL של הקובץ. בדרך זו ניתן לכתוב פונקציות ב-JavaScript ולשלב את הפעלתן ביותר ממסמך HTML אחד.

כאשר מוסיפים את התכונה SRC אל תוך התגית <SCRIPT> פקודות ב-JavaScript אשר תיכתבנה בין שתי התגיות לא יקבלו כל התייחסות מצד הדפדפן.

יש לתת לקובץ הנפרד שמכיל פקודות ב-JavaScript שם עם הסיומת js. כמו כן, יש להגדיר בשרת שבו שומרים את קבצי האתר, כי הסיומת js תתאים לסוג ה-MIME הבא:

application/x-javascript.

כדי להגדיר בשרת את שהוסבר, יש להוסיף לקובץ mime.types אשר נמצא בשרת בספריה config את השורה הבאה:

type=application/x-javascript exts=js

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

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

<HTML>

<HEAD>

<TITLE>usingJSFileDemo.html</TITLE>

</SCRIPT>

document.write("The factorial of 7 is : " + factorial(7));

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>

להלן הקובץ השני.

// file name : factorial.js

// 2000(c) Zindell Publishing House Ltd.

function factorial(num)

{

var result=1;

while (num>0)

{

result *= num;

num--;

}

return result;

}

שילוב קוד ב-JavaScript כערכן של תכונות של מרכיבי HTML

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

התכנית הבאה מדגימה את האפשרות לקבוע את ערכה של תכונה שיש למרכיב HTML כך שיהיה שווה לערכו של ביטוי ב-JavaScript.

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

<HTML>

<HEAD>

<TITLE>JSexpressionsAsAttributeValues.html</TITLE>

num=50;

function getLength()

{

num+=50;

return num;

}

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>

המרכיב NOSCRIPT

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

התכנית הבאה מדגימה את השימוש במרכיב זה.

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

<HTML>

<HEAD>

<TITLE>noscriptDemo.html</TITLE>

num=50;

function getLength()

{

num+=50;

return num;

}

</SCRIPT>

<H2>This browser doesn't support JavaScript</H2>

</NOSCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>

תרגילים

1. כתוב/כתבי פונקציה ב-JavaScript אשר מחשבת את ערכו של איבר בסדרת פיבונאצ'י על פי מספרו הסידורי אשר נשלח אליה בעת הפעלתה. הפונקציה תישמר בקובץ עם הסיומת js, והשימוש בה ייעשה מתוך קובץ אחר אשר יישמר עם הסיומת html, כיוון שיהווה מסמך HTML.

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

No parts of the contents of this paper may be reproduced or transmitted in any form by any means

without the written permission of the publisher ! This book can be used for personal use only !!!

Brought to you by Zindell

(http://www.zindell.com)

לנוחיותך, להלן תוכן העניינים של הספר:

פרק 1 : הבסיס
פרק 2 : ערכים בסיסיים
פרק 3 : אופרטורים
פרק 4 : משפטי בקרה ולולאות
פרק 5 : פונקציות
פרק 6 : אובייקטים
פרק 7 : אובייקטים מובנים בשפה
פרק 8 : אופן פעולת האובייקטים
פרק 9 : תבניות טקסט
פרק 10 : שילוב של JavaScript ו- HTML
פרק 11 : טיפול באירועים
פרק 12 : האובייקטים שנוצרים בדפדפן
פרק 13 : האובייקט Navigator
פרק 14 : האובייקט Window
פרק 15 : האובייקט Document
פרק 16 : האובייקט Location
פרק 17 : האובייקט History
פרק 18 : יצירת cookies
פרק 19 : האובייקטים Link ו- Anchor
פרק 20 : האובייקט Image
פרק 21 : יצירת Image Map
פרק 22 : האובייקט Form
פרק 23 : טכנולוגית ה- LiveConnect