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