JavaScript/שילוב במסמך HTML: הבדלים בין גרסאות בדף
הניסוח ממש בלבל אותי, אז ערכתי. התכונתי רק לשפר ניסוח, לא לשנות תוכן. |
שימוש ב syntaxhighlight lang="javascript" |
||
שורה 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="javascript"> |
|||
<pre style="direction:ltr;"> |
|||
<script type="text/javascript"> |
<script type="text/javascript"> |
||
...קוד javascript |
...קוד javascript |
||
</script> |
</script> |
||
</syntaxhighlight> |
|||
</pre> |
|||
תעברו ל[[Javascript/שורות קוד ראשונות|פרק הבא]] ותנסו... |
תעברו ל[[Javascript/שורות קוד ראשונות|פרק הבא]] ותנסו... |
||
*'''ניתן להפריד את קוד ה-JavaScript מקוד HTML:''' |
*'''ניתן להפריד את קוד ה-JavaScript מקוד HTML:''' |
||
לכתוב את הקוד הבא בין תגי head או body במסמך HTML. |
לכתוב את הקוד הבא בין תגי head או body במסמך HTML. |
||
<syntaxhighlight lang="javascript"> |
|||
<pre style="direction:ltr;"> |
|||
<script type="text/javascript" src="javascript_file.js"></script> |
<script type="text/javascript" src="javascript_file.js"></script></syntaxhighlight> |
||
</pre> |
|||
חובה להשתמש באלמנט סוגר, למרות שאין לאלמנט תוכן. |
חובה להשתמש באלמנט סוגר, למרות שאין לאלמנט תוכן. |
||
בדוגמא זו אנו פותחים קובץ חדש בשם (משהו.js סיומת נקודה-js לקובץ, כמו שלעמוד HTML יש סיומת נקודה-html או נקודה-htm) javascript_file.js, וכותבים בו קוד של javascript. בתוכן הקובץ מושמט ה- <"script type="javascript> ו- <script/> בגלל שאנחנו כבר לא בקובץ ה html שמיבא את הקובץ החדש. |
בדוגמא זו אנו פותחים קובץ חדש בשם (משהו.js סיומת נקודה-js לקובץ, כמו שלעמוד HTML יש סיומת נקודה-html או נקודה-htm) javascript_file.js, וכותבים בו קוד של javascript. בתוכן הקובץ מושמט ה- <"script type="javascript> ו- <script/> בגלל שאנחנו כבר לא בקובץ ה html שמיבא את הקובץ החדש. |
||
דוגמא לקובץ החדש: |
דוגמא לקובץ החדש: |
||
<syntaxhighlight lang="javascript"> |
|||
<pre style="direction:ltr;"> |
|||
<!-- |
<!-- |
||
alert("Message") |
alert("Message") |
||
--> |
--> |
||
</syntaxhighlight> |
|||
</pre> |
|||
'''הערה ליודעי CSS:''' הפרדה זו דומה להפרדת עיצוב מתוכן בעזרת אלמנט link שקורא ל-CSS, כך נוכל להשתמש באלמנט script על מנת לקרוא לקובץ Javascript, בלי שב-HTML שלנו תהיה שורת קוד Javascript אחת. |
'''הערה ליודעי CSS:''' הפרדה זו דומה להפרדת עיצוב מתוכן בעזרת אלמנט link שקורא ל-CSS, כך נוכל להשתמש באלמנט script על מנת לקרוא לקובץ Javascript, בלי שב-HTML שלנו תהיה שורת קוד Javascript אחת. |
||
== תמיכה בדפדפנים ישנים == |
== תמיכה בדפדפנים ישנים == |
||
ניתן לשלב Javascript בתוך קובץ ה-HTML עצמו, אך אז אנו נתקלים במספר בעיות. |
ניתן לשלב Javascript בתוך קובץ ה-HTML עצמו, אך אז אנו נתקלים במספר בעיות. |
||
<syntaxhighlight lang="javascript"> |
|||
<pre style="direction:ltr;"> |
|||
<script type="text/javascript"> |
<script type="text/javascript"> |
||
...קוד javascript |
...קוד javascript |
||
</script> |
</script> |
||
</syntaxhighlight> |
|||
</pre> |
|||
דפדפנים ישנים, עלולים לא להכיר את האלמנט script ולכן עלינו להסתיר את תוכן הקוד בהערות HTML |
דפדפנים ישנים, עלולים לא להכיר את האלמנט script ולכן עלינו להסתיר את תוכן הקוד בהערות HTML |
||
<syntaxhighlight lang="javascript"> |
|||
<pre style="direction:ltr;"> |
|||
<script type="text/javascript"> |
<script type="text/javascript"> |
||
<!-- |
<!-- |
||
שורה 40: | שורה 37: | ||
--> |
--> |
||
</script> |
</script> |
||
</syntaxhighlight> |
|||
</pre> |
|||
כאן לא תמו צרותינו. זוכרים שב-HTML אסור להשתמש במרכאות (") רגילות או כפולות, אלא להשתמש ביישויות בלבד? זה נכון גם כאן. |
כאן לא תמו צרותינו. זוכרים שב-HTML אסור להשתמש במרכאות (") רגילות או כפולות, אלא להשתמש ביישויות בלבד? זה נכון גם כאן. |
גרסה מ־02:09, 23 בדצמבר 2017
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("Message") --> </script>
די מסורבל לא? זה בגלל שהתוכן של אלמנט script מוגדר כ-PCDATA (Parsed Content Data). ה-Parsed רוצה לומר שהוא מפרש את התוכן שבתוך ה-script קודם כל כ-HTML ורק אחר-כך כ-Javascript.
על מנת להימנע מזה, ניתן לומר לדפדפן שלא יפרש את התוכן כ-PCDATA אלא כ-CDATA. ב-CDATA מרכאות וסימני גדול קטן >< אינם מפוענחים כ-HTML.
נכון
<script type="text/javascript"> <!-- <![CDATA[ alert("Message") >]] --> </script>
כעת ניתן לכתוב רגיל. די מסובך לא? עדיף לשים את הקוד בקובץ אחר ולהיפטר מכל הסיבוך הזה...