JavaScript/שילוב במסמך HTML: הבדלים בין גרסאות בדף

מתוך ויקיספר, אוסף הספרים והמדריכים החופשי
תוכן שנמחק תוכן שנוסף
ארז סגל (שיחה | תרומות)
מאין תקציר עריכה
ארז סגל (שיחה | תרומות)
מאין תקציר עריכה
שורה 1: שורה 1:
על מנת לשלב Javascript בדף ה-HTML שלנו אנחנו צריכים להשתמש באלמנט script של HTML.
javascript היא שפת תסריט צד לקוח.<br />
עקרון חשוב הוא הפרדת התנהגות מתוכן. כמו שמפרידים עיצוב מתוכן בעזרת אלמנט link שקורא ל-CSS, כך נוכל להשתמש באלמנט script על מנת לקרוא לקובץ Javascript, בלי שב-HTML שלנו תהיה שורת קוד Javascript אחת.
מה שאומר שהקוד מהודר בזמן אמת ע"י הדפדפן לאחר שהדף מגיע מהשרת אל הלקוח<br />
<pre style="direction:ltr;">
javascript כמו גם שפות תסריט אחרות כגון VBscript, נכתבת בתוך דף הHTML בין התגים
<script language="javascript" src="my_javascript_file.js"></script>
<pre style="direction:ltr; text-align:left;">
</script>
</pre>
חובה להשתמש באלמנט סוגר, למרות שאין לאלמנט תוכן.

ניתן, אך מאוד לא מומלץ, לשלב Javascript בתוך קובץ ה-HTML עצמו, אך אז אנו נתקלים במספר בעיות.
<pre style="direction:ltr;">
<script language="javascript">
<script language="javascript">
...קוד javascript
--!>
...קוד javascript
<--
</script>
</script>
</pre>
</pre>

אפשר גם לצרף קובץ מחוץ לדף ע"י הוספת התכונה src לתג <script>. הקובץ צריך ליהיות עם הסיומת js.<br />
דפדפנים ישנים, עלולים לא להכיר את האלמנט script ולכן עלינו להסתיר את תוכן הקוד בהערות HTML
שימושיה רבים ובהם נמנים: הוספת דינמיות לדפי html, בדיקת טפסים לפני שליחה, הוספת אנימציה או תוכן מתחלף.<br />

javascript היא שפת תכנות "רגילה" בניגוד לhtml, ולה כל היתרונות שיש בשפת תכנות.<br />
<pre style="direction:ltr;">
אחד מחסרונותיה של javascript הוא, שיש בה כמה וכמה בעיות בטיחות.<br />
<script language="javascript">
<!--
...קוד javascript
-->
</script>
</pre

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

'''לא נכון'''
<pre style="direction:ltr;">
<script language="javascript">
<!--
alert("Message")
-->
</script>
</pre

'''נכון'''
<pre style="direction:ltr;">
<script language="javascript">
<!--
alert(&quot;Message&quot;)
-->
</script>
</pre

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

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

'''נכון'''
<pre style="direction:ltr;">
<script language="javascript">
<!--
<![CDATA[
alert("Message")
>]]
-->
</script>
</pre
כעת ניתן לכתוב רגיל. די מסובך לא? עדיף לשים את הקוד בקובץ אחר ולהיפטר מכל הסיבוך הזה...

גרסה מ־00:09, 25 במרץ 2007

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

<script language="javascript" src="my_javascript_file.js"></script>
</script>

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

ניתן, אך מאוד לא מומלץ, לשלב Javascript בתוך קובץ ה-HTML עצמו, אך אז אנו נתקלים במספר בעיות.

<script language="javascript">
   ...קוד javascript
</script>

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

<script language="javascript">
</script>
</pre

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

לא נכון
<script language="javascript">
</script>
</pre

נכון
<script language="javascript">
</script>
< אינם מפוענחים כ-HTML.

נכון

<script language="javascript">
</script>
</pre
 
כעת ניתן לכתוב רגיל. די מסובך לא? עדיף לשים את הקוד בקובץ אחר ולהיפטר מכל הסיבוך הזה...