الفرق بين المراجعتين لصفحة: «HTML/script»
لا ملخص تعديل |
إضافة مثال وقسم |
||
(3 مراجعات متوسطة بواسطة نفس المستخدم غير معروضة) | |||
سطر 2: | سطر 2: | ||
يُستخدَم العنصر <code><script></code> لتضمين أو الإشارة إلى سكربت قابل للتنفيذ. | يُستخدَم العنصر <code><script></code> لتضمين أو الإشارة إلى سكربت قابل للتنفيذ. | ||
مثال عن كيفية استخدام هذا العنصر لتضمين سكربت خارجي في HTML 4 و XHTML: | مثال عن كيفية استخدام هذا العنصر لتضمين سكربت خارجي في HTML 4 و XHTML:<syntaxhighlight lang="html"> | ||
<syntaxhighlight lang="html"> | |||
<script type="text/javascript" src="javascript.js"></script> | <script type="text/javascript" src="javascript.js"></script> | ||
</syntaxhighlight>أما في HTML5 فالفرق بسيط ألا وهو حذف الخاصية <code>[[#type|type]]</code> امتثالًا لنصيحة مواصفة HTML5:<syntaxhighlight lang="html"> | </syntaxhighlight>أما في HTML5 فالفرق بسيط ألا وهو حذف الخاصية <code>[[#type|type]]</code> امتثالًا لنصيحة مواصفة HTML5:<syntaxhighlight lang="html"> | ||
<script src="javascript.js"></script> | <script src="javascript.js"></script> | ||
</syntaxhighlight>طريقة كتابة سكربت مُضمَّن في المستند:<syntaxhighlight lang="html"> | |||
<script> | |||
alert("مرحبًا"); | |||
</script> | |||
</syntaxhighlight> | </syntaxhighlight> | ||
== بطاقة العنصر == | |||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
سطر 54: | سطر 58: | ||
* إذا لم تكن الخاصية <code>async</code> موجودةً لكن استعملت الخاصية <code>defer</code>، فسيؤجل تنفيذ السكربت إلى حين الانتهاء من تفسير الصفحة. | * إذا لم تكن الخاصية <code>async</code> موجودةً لكن استعملت الخاصية <code>defer</code>، فسيؤجل تنفيذ السكربت إلى حين الانتهاء من تفسير الصفحة. | ||
* إذا لم تستعمل الخاصية <code>async</code> أو <code>defer</code>، فسينُزَّل السكربت ويُنفَّذ مباشرةً، أي قبل أن يكمل المتصفح تفسير الصفحة. | * إذا لم تستعمل الخاصية <code>async</code> أو <code>defer</code>، فسينُزَّل السكربت ويُنفَّذ مباشرةً، أي قبل أن يكمل المتصفح تفسير الصفحة. | ||
مثال عن تنفيذ سكربت بشكل غير متزامن (أي سيكمل المتصفح تفسير الصفحة أثناء تنفيذه):<syntaxhighlight lang="html"> | مثال عن تنفيذ سكربت بشكل غير متزامن (أي سيكمل المتصفح تفسير الصفحة أثناء تنفيذه):<syntaxhighlight lang="html"> | ||
<script src="async.js" async></script> | <script src="async.js" async></script> | ||
سطر 67: | سطر 69: | ||
لمزيدٍ من المعلومات حول هذه الخاصية، فراجع شرح الخاصية <code>[[#async|async]]</code> أعلاه. | لمزيدٍ من المعلومات حول هذه الخاصية، فراجع شرح الخاصية <code>[[#async|async]]</code> أعلاه. | ||
مثال عن تأجيل تنفيذ سكربت (أي سينفذه المتصفح بعد الانتهاء من تفسير بقية الصفحة):<syntaxhighlight lang="html"> | مثال عن تأجيل تنفيذ سكربت (أي سينفذه المتصفح بعد الانتهاء من تفسير بقية الصفحة):<syntaxhighlight lang="html"> | ||
<script src="defer.js" defer></script> | <script src="defer.js" defer></script> | ||
سطر 96: | سطر 97: | ||
*مواصفة [http://www.w3.org/TR/html5/scripting-1.html#script HTML5]. | *مواصفة [http://www.w3.org/TR/html5/scripting-1.html#script HTML5]. | ||
*مواصفة [http://www.w3.org/TR/html401/interact/scripts.html#h-18.2.1 HTML 4.01]. | *مواصفة [http://www.w3.org/TR/html401/interact/scripts.html#h-18.2.1 HTML 4.01]. | ||
[[تصنيف: | [[تصنيف:HTML|{{SUBPAGENAME}}]] | ||
[[تصنيف:HTML]] | [[تصنيف:HTML Elements|{{SUBPAGENAME}}]] | ||
[[تصنيف:HTML | [[تصنيف:HTML Scripting|{{SUBPAGENAME}}]] |
المراجعة الحالية بتاريخ 09:33، 21 فبراير 2018
يُستخدَم العنصر <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
بعد.
مصادر ومواصفات
- معيار HTML Living Standard.
- مواصفة HTML5.
- مواصفة HTML 4.01.