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

JavaScript

התחלת העבודה מושגי יסוד שילוב במסמך HTML שורות קוד ראשונות הערות משתנים מחרוזת טקסט מספר הוראת תנאי התנאי if תנאי מורכב if-else הוראת switch אופרטורים תרגילים לחזרה אובייקטים אובייקט פונקציה בנאית וקלאסים מערכים מערך חד מימדי חיפוש ומיונים לולאות לולאת for לולאת while לולאת do-while לולאות מקוננות שימוש בפקודות break ו-continue זהירות מלולאה אין סופית פונקציות פונקציה שאינה מחזירה ערך פונקציה שמחזירה ערך פונקציה אנונימית וחץ אירועים אובייקט המסמך מבוא אובייקט המסמך אובייקט החלון אובייקט הכתובת אוביקטים נוספים אובייקט תאריך אובייקט Math JavaScript למתקדמים אסינכרוני - קולבק ופרומיס עבודה עם טפסים תסריטים עוגיות מערכים אסוציאטיבים ספריות מבוא לספריות מבוא לספריית Ext JS בינה מלאכותית TensorFlow.js גרסה להדפסה

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

• ניתן לכתוב קוד JavaScript בתוך מסמך HTML, תהליך זה בעייתי לדפדפנים ישנים. ולכן אם יש לכם דפדפן חדש (החל מ-Internet Explorer 5 או Firefox 2 או גרסאות חדשות של דפדפנים אחרים) אתם יכולים לכתוב פשוט (בזמן הלמידה):

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

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

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

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

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

חובה להשתמש באלמנט סוגר, למרות שאין לאלמנט תוכן. בדוגמא זו אנו פותחים קובץ חדש בשם (משהו.js סיומת נקודה-js לקובץ, כמו שלעמוד HTML יש סיומת נקודה-html או נקודה-htm) javascript_file.js, וכותבים בו קוד של 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(&quot;Message&quot;)
-->
</script>

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

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

נכון

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

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