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(&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>

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