JavaScript/שילוב במסמך HTML: הבדלים בין גרסאות בדף
עוד שימוש ב <syntaxhighlight> |
הקוד הוא של html. משנה את ה lang ב syntaxhighlight בהתאם |
||
שורה 2: | שורה 2: | ||
על מנת לשלב Javascript בדף ה-HTML שלנו אנחנו צריכים להשתמש באלמנט script של HTML. |
על מנת לשלב Javascript בדף ה-HTML שלנו אנחנו צריכים להשתמש באלמנט script של HTML. |
||
*'''ניתן לכתוב קוד JavaScript בתוך מסמך HTML''', תהליך זה בעייתי לדפדפנים ישנים. ולכן אם יש לכם דפדפן חדש (החל מ-Internet Explorer 5 או Firefox 2 או גרסאות חדשות של דפדפנים אחרים) אתם יכולים לכתוב פשוט (בזמן הלמידה): |
*'''ניתן לכתוב קוד JavaScript בתוך מסמך HTML''', תהליך זה בעייתי לדפדפנים ישנים. ולכן אם יש לכם דפדפן חדש (החל מ-Internet Explorer 5 או Firefox 2 או גרסאות חדשות של דפדפנים אחרים) אתם יכולים לכתוב פשוט (בזמן הלמידה): |
||
<syntaxhighlight lang=" |
<syntaxhighlight lang="html"> |
||
<script type="text/javascript"> |
<script type="text/javascript"> |
||
... javascript קוד |
... javascript קוד |
||
שורה 11: | שורה 11: | ||
*'''ניתן להפריד את קוד ה-JavaScript מקוד HTML:''' |
*'''ניתן להפריד את קוד ה-JavaScript מקוד HTML:''' |
||
לכתוב את הקוד הבא בין תגי head או body במסמך HTML. |
לכתוב את הקוד הבא בין תגי head או body במסמך HTML. |
||
<syntaxhighlight lang=" |
<syntaxhighlight lang="html"> |
||
<script type="text/javascript" src="javascript_file.js"></script></syntaxhighlight> |
<script type="text/javascript" src="javascript_file.js"></script></syntaxhighlight> |
||
חובה להשתמש באלמנט סוגר, למרות שאין לאלמנט תוכן. |
חובה להשתמש באלמנט סוגר, למרות שאין לאלמנט תוכן. |
גרסה מ־01:54, 5 בדצמבר 2019
JavaScript |
---|
התחלת העבודה הוראת תנאי אובייקטים מערכים לולאות
פונקציות אובייקט המסמך אוביקטים נוספים JavaScript למתקדמים ספריות בינה מלאכותית |
על מנת לשלב 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>
כעת ניתן לכתוב רגיל. די מסובך לא? עדיף לשים את הקוד בקובץ אחר ולהיפטר מכל הסיבוך הזה...