JavaScript/שילוב במסמך HTML

JavaScript

התחלת העבודה

הוראת תנאי

אובייקטים

מערכים

לולאות

פונקציות

אובייקט המסמך

אוביקטים נוספים

JavaScript למתקדמים

ספריות

בינה מלאכותית


גרסה להדפסה

על מנת לשלב Javascript בדף ה-HTML שלנו אנחנו צריכים להשתמש באלמנט script של HTML.

  • ניתן לכתוב קוד JavaScript בתוך מסמך HTML, תהליך זה בעייתי לדפדפנים ישנים. ולכן אם יש לכם דפדפן חדש (החל מ-Internet Explorer 5 או Firefox 2 או גרסאות חדשות של דפדפנים אחרים) אתם יכולים לכתוב פשוט (בזמן הלמידה):
<script type="text/javascript">
   ... javascript_code
</script>

תעברו לפרק הבא ותנסו...

  • ניתן להפריד את קוד ה-JavaScript מקוד HTML:

לכתוב פה את הקוד הבא בין תגי head או body במסמך HTML.

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

חובה להשתמש באלמנט סוגר, למרות שאין לאלמנט תוכן.

בדוגמא זו אנו פותחים קובץ חדש בשם עם סיומת .js (כמו שלעמוד HTML יש סיומת .html) וכותבים בו קוד של javascript. בתוכן הקובץ מושמט ה- <"script type="javascript> ו- <script/> בגלל שאנחנו כבר לא בקובץ ה html שמיבא את הקובץ החדש.

דוגמא לקובץ החדש:

<!--
  alert("Message")
-->


הערה ליודעי CSS: הפרדה זו דומה להפרדת עיצוב מתוכן בעזרת אלמנט link שקורא ל-CSS, כך נוכל להשתמש באלמנט script על מנת לקרוא לקובץ Javascript, בלי שב-HTML שלנו תהיה שורת קוד Javascript אחת.

תמיכה בדפדפנים ישנים

עריכה

ניתן לשלב Javascript בתוך קובץ ה-HTML עצמו עם

<script type="text/javascript">
   ... javascript קוד
</script>

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

<script type="text/javascript">
<!--
   ... javascript קוד
-->
</script>

. כאן לא תמו צרותינו. זוכרים שב-HTML אסור להשתמש במרכאות (") רגילות או כפולות, אלא להשתמש ביישויות בלבד? זה נכון גם כאן.

לא נכון

<script type="text/javascript">
<!--
  alert("Message")
-->
</script>

נכון

<script type="text/javascript">
<!--
  alert(&amp;quot;Message&amp;quot;)
-->
</script>

די מסורבל לא? זה בגלל שהתוכן של אלמנט script מוגדר כ-PCDATA (Parsed Content Data). ה-Parsed רוצה לומר שהוא מפרש את התוכן שבתוך ה-script קודם כל כ-HTML ורק אחר-כך כ-Javascript.

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

נכון

<script type="text/javascript">
<!--
<![CDATA[
  alert("Message")
>]]
-->
</script>

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