nashbell.com

♿⃔ ♿⃕

‫רכיב script ב html‬

  1. על מנת להוסיף תסריט JavaScript בדף HTML נשתמש ברכיב script. מאפיין type (סוג תסריט) הוא בגדר אפשרות ב html5 אך מיותר כי ברירת המחדל היא javascript:

    HTML5 או XHTML5

    ‪<script>

    /* קוד תסריט */

    </script>‬

    HTML4 או XHTML1

    ‪<script type="text/javascript">

    /* קוד תסריט */

    </script>‬

  2. על מנת להוסיף תסריט JavaScript בדף חיצון נשתמש ברכיב script עם מאפיין src (מקור תסריט). כל קוד שיכתב בתוך רכיב זה לא ייספר:

    HTML5 או XHTML5

    ‪<script src="script.js">

    </script>‬

    HTML4 או XHTML1

    ‪<script src="script.js" type="text/javascript">

    </script>‬

  3. רכיב script מומלץ להמצא בתוך head אך יכול גם להמצא בכל אחד מרכיבי body. כאשר רכיב script נמצא במקומו המומלץ ב head, מופרד התסריט בצורה נוחה מקוד html (שפת הסימון) ובזאת קל יותר לתחזק את קוד התסריט. בדרך זו ניתן לכתוב קוד תסריט בתוך הפעלה (function) אשר מטפלת בארוע כלשהו.

    HTML5 או XHTML5

    ‪<head>

    <script>

    function name(){/* קוד תסריט */}

    </script>

    </head>‬

    HTML4 או XHTML1

    ‪<head>

    <script type="text/javascript">

    function name(){/* קוד תסריט */}

    </script>

    </head>‬

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

    HTML5 או XHTML5

    ‪<head>

    <script>

    function name(){/* קוד תסריט */}

    window.addEventListener('load',name,false);

    </script>

    </head>‬

    HTML4 או XHTML1

    ‪<head>

    <script type="text/javascript">

    function name(){/* קוד תסריט */}

    window.addEventListener('load',name,false);

    </script>

    </head>‬

  5. על פי כללי xml, לא ניתן לרשום תווים כמו ‪<‬ או & כיוון שאלו משמשים עבור פתיחת תגית או פתיחת ישות, בהתאמה. מצד שני, בקוד של תסריט אנו צריכים לעיתים להשתמש בתווים אלו. הפתרון לכך הוא שימוש ברכיב cdata (נתוני תווים בלתי מנותחים) אשר נמצא פנימית לרכיב script ותוכנו אינו עובר את מנתח ה xml. בתוכו נוכל לרשום בביטחה את קוד התסריט על פי הדוגמה: ‪<![CDATA[ /* קוד תסריט */ ]]>‬.

    HTML5 או XHTML5

    ‪<head>

    <script>

    <![CDATA[

    function name(){

    /* קוד תסריט */

    if(a<b && b<c)

    return true;

    }

    window.addEventListener('load',name,false);

    ]]>

    </script>

    </head>‬

    HTML4 או XHTML1

    ‪<head>

    <script type="text/javascript">

    <![CDATA[

    function name(){

    /* קוד תסריט */

    if(a<b && b<c)

    return true;

    }

    window.addEventListener('load',name,false);

    ]]>

    </script>

    </head>‬

  6. הפתרון שהוצע עד כה מתאים עבור כל הדפדפנים החדישים אשר מודעים אל הרכיב ‪<![CDATA[ ... ]]>‬. במקרים אחרים בהם אין הדפדפנים מודעים אל רכיב זה, עשויים הדפדפנים להבין את קטעי הקוד ‪<![CDATA[‬ כמו גם את ‪]]>‬ כקודים בלתי חוקיים של התסריט. כתוצאה מכך עשויים גם להימנע מהרצת התסריט כולו. במקרה זה נעדיף את השימוש בדף JavaScript חיצוני כמו בדוגמה השנייה:

    תסריט JavaScript חיצוני (דף: script.js)

    function name(){

    /* קוד תסריט */

    }

    HTML5 או XHTML5

    ‪<script src="script.js">

    </script>‬

    ‪<script>

    window.addEventListener('load',name,false);

    </script>‬

    HTML4 או XHTML1

    ‪<script src="script.js" type="text/javascript">

    </script>‬

    ‪<script type="text/javascript">

    window.addEventListener('load',name,false);

    </script>‬

  7. אם למרות כל האמור לעיל, עדיין נדרשים להוסיף תסריט בדף ה html הקיים ועדיין מתעקשים לתמוך בדפדפנים מיושנים, יש להשתמש רק בגירסאות html4 או html5 או xhtml1 ולכפות על הדף להשלח מהשרת כ text/html (אפילו בגירסת xhtml1 אשר עדיפה בדרך כלל להישלח כ aplication/xhtml+xml). דף ה html היושב על שרת Apache ישמר עם סיומת php על מנת להורות לשרת שיש בתוכו קוד תסריט php אשר רץ על השרת בטרם נשלח אל הלקוח. במצב זה נוכל להגדיר הן לשרת והן ללקוח תסריטי php ו JavaScript כמו גם קוד html אשר יפתור את דרישות הקוד עבור דפדפנים ישנים:

    HTML5 + PHP

    <!DOCTYPE html>

    ‪<?php header('Content-Type:text/html'); ?>

    <html>

    <head>

    <script>

    /* <![CDATA[ */

    function name(){

    /* קוד תסריט */

    if(a<b && b<c)

    return true;

    }

    window.addEventListener('load',name,false);

    /* ]]> */

    </script>

    </head>

    <body>

    <!-- ‫קוד html‬ -->

    </body>

    </html>‬

    HTML4 + PHP

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    ‪<?php header('Content-Type:text/html'); ?>

    <html>

    <head>

    <script>

    /* <![CDATA[ */

    function name(){

    /* קוד תסריט */

    if(a<b && b<c)

    return true;

    }

    window.addEventListener('load',name,false);

    /* ]]> */

    </script>

    </head>

    <body>

    <!-- ‫קוד html‬ -->

    </body>

    </html>‬

    XHTML1 + PHP

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    ‪<?php header('Content-Type:text/html'); ?>

    <html xmlns="http://www.w3.org/1999/xhtml>

    <head>

    <script>

    /* <![CDATA[ */

    function name(){

    /* קוד תסריט */

    if(a<b && b<c)

    return true;

    }

    window.addEventListener('load',name,false);

    /* ]]> */

    </script>

    </head>

    <body>

    <!-- ‫קוד html‬ -->

    </body>

    </html>‬

♿⃔ ♿⃕

nashbell.com