العنصر script

الكاتب: سامي -
العنصر script
السكربتات <script>

يُستخدَم العنصر <script> لتضمين أو الإشارة إلى سكربت قابل للتنفيذ.

مثال عن كيفية استخدام هذا العنصر لتضمين سكربت خارجي في HTML 4 و XHTML:

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

أما في HTML5 فالفرق بسيط ألا وهو حذف الخاصية type امتثالًا لنصيحة مواصفة HTML5:

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

طريقة كتابة سكربت مُضمَّن في المستند:

<script>
  alert("مرحبًا");
</script>

بطاقة العنصر

تصنيفات المحتوى عنصر تنظيمي أو عنصر عادي أو عنصر وصفي.
المحتوى المسموح السكربتات الديناميكية مثل text/javascript.
الوسم المختصر لا يمكن حذف أيّ من وسمَي البداية أو النهاية.
العناصر الأب أي عنصر يقبل المحتوى التنظيمي أو المحتوى الوصفي.
واجهة DOM HTMLScriptElement

دعم المتصفحات

Chrome Firefox Edge Safari Opera
مدعوم مدعوم مدعوم مدعوم مدعوم

الخاصيات

يمكن استخدام الخاصيات العامة في هذا العنصر.

async

خاصية منطقية تُشير إلى أنَّ على المتصفح تنفيذ هذه السكربت بشكل غير متزامن (asynchronously) إن أمكنه ذلك.

لا يجوز استخدام هذه الخاصية إن لم تُحدَّد قيمة للخاصية src (أي أنَّ السكربت مُضمَّن في المستند)، وإن اُستعملت في هذه الحالة فلن يكون لها أي تأثير.

تُنفَّذ السكربتات المُضافة إلى المستند ديناميكيًا بشكلٍ غير متزامن افتراضيًا، لكن لتفعيل تنفيذ السكربتات بشكل متزامن (أي أنَّ تنفيذ السكربتات يكون بنفس ترتيب تحميلها) فاضبط قيمة هذه الخاصية إلى false.

هنالك عدِّة حالات لاستخدام هذه الخاصية والخاصية defer، ويمكن تلخيصها بما يلي:

  • إذا كانت الخاصية async موجودةً، فسيتنفذ هذا السكربت بشكل غير متزامن مع بقية الصفحة (أي أنَّ السكربت سيُنفَّذ أثناء إكمال تفسير بقية الصفحة).
  • إذا لم تكن الخاصية async موجودةً لكن استعملت الخاصية defer، فسيؤجل تنفيذ السكربت إلى حين الانتهاء من تفسير الصفحة.
  • إذا لم تستعمل الخاصية async أو defer، فسينُزَّل السكربت ويُنفَّذ مباشرةً، أي قبل أن يكمل المتصفح تفسير الصفحة.

مثال عن تنفيذ سكربت بشكل غير متزامن (أي سيكمل المتصفح تفسير الصفحة أثناء تنفيذه):

<script src="async.js" async></script>

defer

خاصية منطقية تُشير إلى أنَّ على المتصفح تنفيذ هذه السكربت بعد تفسير بقية المستند.

لا يجوز استخدام هذه الخاصية إن لم تُحدَّد قيمة للخاصية src (أي أنَّ السكربت مُضمَّن في المستند)، وإن اُستعملت في هذه الحالة فلن يكون لها أي تأثير.

لمزيدٍ من المعلومات حول هذه الخاصية، فراجع شرح الخاصية async أعلاه.

مثال عن تأجيل تنفيذ سكربت (أي سينفذه المتصفح بعد الانتهاء من تفسير بقية الصفحة):

<script src="defer.js" defer></script>

integrity

تتضمن بيانات وصفية التي يمكن أن يستعملها المتصفح للتأكد أنَّ المورد الذي نُزِّل لا يحتوي على تعديلات غير متوقعة.

src

تُحدِّد هذه الخاصية رابط URI لسكربت خارجي، ويمكن استخدام هذه الخاصية كبديل عن تضمين السكربتات داخل المستند مباشرةً.

إذا كان للعنصر <script> الخاصية src فلا يجوز تضمين سكربت بين وسم البداية ووسم الإغلاق.

type

تحديد نوع السكربت الذي سيُضمَّن في المستند. يمكن أن تُحذَف هذه الخاصية فذلك سيشير إلى أنَّ هذا السكربت بلغة JavaScript.

تنصح مواصفة HTML5 المطورين بعدم استخدام هذه الخاصية لأن نوع MIME لسكربتات JavaScript معروف. لكن هذه الخاصية كانت تستعمل في ما قد سلف من المتصفحات لتعريف ما هي لغة البرمجة التي كتب فيها السكربت.

language

هذه الخاصية تشبه الخاصية type إذ تُعرِّف ما هي اللغة المستخدمة في كتابة السكربتات، لكن القيم التي تقبلها هذه الخاصية لم تكن معياريةً، لذا أصبحت هذه الخاصية مهملة ويجب استخدام الخاصية type بدلًا منها.

ملاحظات

السكربتات التي ليس لها الخاصية async أو defer إضافةً إلى السكربتات المضمنة في الملف مباشرةً ستُنزَّل وتُنفَّذ مباشرةً قبل أن يكمل المتصفح تفسير الصفحة.

يجب تخديم السكربتات بنوع MIME الخاص بها text/javascript، لكن المتصفحات متساهلة معها ولن تمنع تنفيذ السكربت إلا إذا خُدِّمَ بنوع MIME الخاص بالصور (أي image/*‎) أو نوع MIME الخاص بالفيديو (video/*‎) أو الصوت (audio/*‎) أو text/csv. إذا مُنِعَ تنفيذ السكربت فسيُطلَق الحدث error حتى لو لم يُطلَق الحدث load بعد.

شارك المقالة:
180 مشاهدة
المراجع +

هل أعجبك المقال
0
0

مواضيع ذات محتوي مطابق

مقالات عشوائية

مرسيدس AMG E 43 بقوة 396 حصان تهدر بقوة في فيديو جديد
مخالفة أخري تعيد الجدل حول السعودي صاحب السيارات الذهبية في لندن
مرسيدس E-Class L . . وجه الفخامة بشكلها المتجدد تنطلق في بكين 2016
مرسيدس AMG C 43 تقدم في بريطانيا بصورة جديدة مع اطلاق نسخ ديزل خاصة
مرسيدس AMG C63 كابريو . . مظهر مثير وباقات تحديث مطورة في نيويورك 2016
مراجعة سيارة مرسيدس-بنز S-Class كابروليه 2016 … فخامة الهواء الطلق
مرسيدس AMG GLC 43 4MATIC تقدم بقوة 362 حصان ومحرك V6 تيربو
مرسيدس تحرك عالم الديزل في نيويورك مع E-Class موديل 2017 بمحرك تيربوديزل
مرسيدس C-Class كوبيه الجديدة . . لوحة فنية خاصة تتألق في دبي
مرسيدس AMG E43 2017 تنطلق بمحرك V6 بقوة 396 حصان وتصميم مثير
مراجعة سيارة مرسيدس-بنز SL63 AMG 2016 … رودستر الأداء من شتوتجارت
مرسيدس-بنز C-Class كوبيه تنطلق في السوق الخليجي
فيديو : كلاركسون وماي وهاموند يقودون سيارة مرسيدس SL معدلة بصورة غريبة للطرق الوعرة
مرسيدس تضيف آخر نسخ عائلة C-Class المكشوفة في جنيف 2016
C 43 4Matic كابروليه الجديدة . . نجمة مرسيدس المتألقة في جنيف 2016
التصنيفات تصفح المواضيع
youtubbe twitter linkden facebook