HTML script Tag

HTML script Tag – يستخدم الوسم <script> لتضمين التعليمات البرمجية أو البيانات القابلة للتنفيذ وخاصًا لتضمين تعليمات JavaScript البرمجية من جانب العميل.

HTML script Tag

يمكن تضمين كود JavaScript مباشرة داخل صفحة HTML أو وضعه في ملف خارجي والإشارة إليه داخل صفحة HTML، وفى كلتا الحالتين نستخدم الوسم <script>.

من أشهر الاستخدامات الشائعة لـ JavaScript هي:

جعل الصفحات والمحتوى أكثر ديناميكية.
معالجة الصور.
التحقق من صحة بيانات النماذج Forms.
إضافة التأثيرات على الصفحات.
تحميل المحتوى في مستند متى طلب المستخدم ذلك دون إعادة تحميل الصفحة بأكملها بإستخدام AJAX.

مثال للتوضيح

شغل إيدك

طباعة نص “Hello World!” بإستخدام JavaScript:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Example of Embedding JavaScript!</title>
  </head>
  <body>
    
    <h2 id="say_hello_world"></h2>
 
    <script>
      document.getElementById("say_hello_world").innerHTML = "Hello World!";
    </script> 
    
  </body>
</html>

السمات المحددة – Specific Attributes

السمات الخاصة بالوسم <script>:

السمة	القيمة	الوصف
async	async	يحدد أن البرنامج النصي يتم تنفيذه بشكل غير متزامن (يستخدم فقط مع الـ scripts الخارجية). فى حالة إستخدام هذه السمة سيتم تنفيذ النص البرمجي بشكل غير متزامن مع بقية الصفحة.
crossorigin	anonymous use-credentials	يضبط وضع الطلب على طلب الـ HTTP CORS.
defer	defer	يحدد أن البرنامج النصي يتم تنفيذه عندما تنتهي الصفحة من التحليل (يستخدم فقط مع الـ scripts الخارجية). ستمنع البرامج النصية ذات السمة defer تشغيل حدث DOMContentLoaded حتى يتم تحميل البرنامج النصي والانتهاء من التحليل. سيتم تنفيذ البرامج النصية ذات السمة defer بالترتيب الذي تظهر به في المستند.
integrity	file hash	تحتوي هذه السمة على بيانات وصفية للسماح للمتصفح بالتحقق من النص البرمجي الذي تم جلبه للتأكد من عدم تحميل الكود مطلقًا إذا تم التلاعب بالمصدر.
nomodule	true false	يحدد أنه لا ينبغي تنفيذ البرنامج النصي في المستعرضات التي تدعم وحدات ES2015. في الواقع ، يمكن استخدام هذه السمة لتقديم البرامج النصية الاحتياطية للمتصفحات القديمة التي لا تدعم كود JavaScript المعياري.
nonce	number	رقم غير مشفر (تم استخدامه مرة واحدة) لإدراج البرامج النصية في القائمة البيضاء في script-src-Content-Security-Policy.
referrerpolicy	no-referrer no-referrer-when-downgrade origin origin-when-cross-origin same-origin strict-origin strict-origin-when-cross-origin unsafe-url	تحدد معلومات المرجع التي سيتم إرسالها عند جلب نص برمجي.
src	URL	يحدد عنوان URL لملف Script خارجي.
type	script type	يحدد نوع وسائط البرنامج النصي.

في حالة عدم إستخدام سمة “async” أو “defer” يتم جلب النص البرمجي وتنفيذه على الفور ، قبل أن يواصل المتصفح تحليل الصفحة.

السمات العامة – Global Attributes

الوسم <script> يدعم السمات العامة أيضًا، تعرف عليهم عن طريق هذا الرابط: السمات العامة – Global Attributes.

سمات الحدث – Event Attributes

كما يدعم الوسم <script> سمات الحدث أيضًا، تعرف عليهم عن طريق هذا الرابط: سمات الحدث – Event Attributes.

إقرأ أيضًا – HTML <script> Tag

للمزيد من المعلومات عن JavaScript والبرامج النصية فى HTML، شاهد هذه الفصول:

الوسم المتعلق: <noscript> الذى يٌستخدم مع المستخدمين الذين قاموا بتعطيل JavaScript في المستعرض الخاص بهم ، أو لديهم متصفح لا يدعم البرمجة النصية من جانب العميل.