❮
Programming Basics SQL HTML CSS JavaScript React Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Linux Learn Typing
❯
عودة للدرس❯ ❮عودة للدرس

HTMLالوسم <script>

  • تعريفه
  • دعم المتصفحات
  • خصائصه
  • إستخدامه
  • تصميمه الإفتراضي
  • نصائح و ملاحظات

تعريفه

نستخدم الوسم <script> لإضافة كود جافاسكربت في الصفحة.
كود الجافاسكربت يمكن كتابته بشكل مباشر بداخل الوسم <script> و يمكن كتابته في ملف خارجي إمتداده .js و من ثم تضمينه بواسطة الوسم <script> أيضاً.

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

الجدول التالي يظهر المتصفحات التي تدعم الوسم <script>.

Chrome Edge Firefox Opera Safari Android
Webview		 Chrome
for Android		 Firefox
for Android		 Opera
for Android		 Safari
for IOS		 Samsung
Internet
1 12 1 مدعوم مدعوم مدعوم مدعوم 4 مدعوم مدعوم مدعوم

خصائصه

نود الإشارة إلى أننا سنذكر الخصائص المهمة و المستخدمة فعلياً و نتجاهل أي خصائص لا يوصى باستخدامها.


الخاصية async

يمكن إضافتها للوسم لجعل كود الجافاسكربت الموضوع فيه يتنفذ بشكل متزامن مع السكربتات الأخرى الموضوعة في الصفحة.
نقصد بذلك أن السكربتات الموضوعة في الصفحة سيتم تنفيذها في وقت واحد و ليس وراء بعضها بنفس الترتيب الذي تم وضعها فيه.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

Chrome Edge Firefox Opera Safari Android
Webview		 Chrome
for Android		 Firefox
for Android		 Opera
for Android		 Safari
for IOS		 Samsung
Internet
1 12 1 مدعوم مدعوم مدعوم مدعوم 4 مدعوم مدعوم مدعوم

الخاصية crossorigin

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

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

Chrome Edge Firefox Opera Safari Android
Webview		 Chrome
for Android		 Firefox
for Android		 Opera
for Android		 Safari
for IOS		 Samsung
Internet
30 ≤18 13 12 مدعوم مدعوم مدعوم 14 ؟ ؟ مدعوم

يجب تمرير إحدى القيم التالية المهيئة مسبقاً كقيمة للخاصية crossorigin لتحديد ما هي المعلومات التي سيتم إرسالها مع الطلب الذي يقضي بجلب الملف.

القيمة معناها
anonymous في حال وضع هذا القيمة فهذا يعني أن الملف الذي يتم طلبه لن يتم طلب إحضار معلومات الـ cors معه.
use-credentials في حال وضع هذا القيمة فهذا يعني أنه لن يتم طلب إحضار أي معلومات إضافية مع الملف المطلوب.

الخاصية defer

في حال كان السكربت موضوع في ملف خارجي يمكن إضافتها للوسم لجعله ينفذه بعد الإنتهاء من تحميل كل محتوى الصفحة.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

Chrome Edge Firefox Opera Safari Android
Webview		 Chrome
for Android		 Firefox
for Android		 Opera
for Android		 Safari
for IOS		 Samsung
Internet
مدعوم 12 3.5 مدعوم مدعوم مدعوم مدعوم 4 مدعوم مدعوم مدعوم

الخاصية integrity

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

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

Chrome Edge Firefox Opera Safari Android
Webview		 Chrome
for Android		 Firefox
for Android		 Opera
for Android		 Safari
for IOS		 Samsung
Internet
45 17 43 مدعوم مدعوم 45 45 43 ؟ غير مدعوم 5.0

يمكن استخدام هذه الأداة لتوليد Hash Code للملف الذي يحتوي على السكربت.


الخاصية referrerpolicy

يمكن إضافتها للوسم بهدف تحديد المعلومات التي سيتم إرسالها مع طلب إحضار الملف.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

Chrome Edge Firefox Opera Safari Android
Webview		 Chrome
for Android		 Firefox
for Android		 Opera
for Android		 Safari
for IOS		 Samsung
Internet
70 ≤79 65 مدعوم غير مدعوم 70 70 65 ؟ غير مدعوم 10.0

يجب تمرير إحدى القيم التالية المهيئة مسبقاً كقيمة للخاصية rel لتحديد ما هي المعلومات التي سيتم إرسالها مع الطلب.

القيمة معناها
no-referrer لعدم إرسال أي معلومة مع طلب إحضار الملف.
no-referrer-when-downgrade لعدم إرسال أي معلومة في Header طلب إحضار الملف (أي المعلومات التي ترسلها الصفحة للموقع و لا تظهر في الرابط) إذا كان الموقع الذي سيتلقى الطلب لا يستخدم البروتوكل https و هذا هو الحال الإفتراضي.
origin لإرسال المعلومات التالية فقط مع طلب إحضار الملف ( scheme - host - port ).
origin-when-cross-origin لإرسال المعلومات التالية مع طلب إحضار الملف ( scheme - host - port ) بالإضافة إلى المسار ( path ) في حال كان الرابط موجود في نفس الموقع.
unsafe-url لإرسال المعلومات التالية فقط مع طلب إحضار الملف ( origin - path ) أي بدون أي معلومة حساسة مثل إسم المستخدم و كلمة مروره.

الخاصية src

في حال كان كود الجافاسكربت موضوع بداخل ملف خاص، نضيفها للوسم و نمرر مسار الملف كقيمة لها حتى تضمن الكود الموجود فيه في الصفحة.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

Chrome Edge Firefox Opera Safari Android
Webview		 Chrome
for Android		 Firefox
for Android		 Opera
for Android		 Safari
for IOS		 Samsung
Internet
1 12 1 مدعوم مدعوم مدعوم مدعوم 4 مدعوم مدعوم مدعوم

الخاصية type

يمكنك إضافتها للوسم لتحديد إصدار لغة جافاسكربت الذي تم اعتماده عند كتابة الكود بأسلوب MIME.
للإشارة إلى أن إصدار الكود الموضوع في الوسم معدّ بالطريقة التقليدية (Vanilla Script) يمكنك تحديد ذلك على هذا النحو type="application/javascript" و إذا أردت الإشارة إلى أسلوب كتابة الكود هو أسلوب Ecma Script فيجب تحديد ذلك على هذا النحو type="application/ecmascript".

ملاحظة: في حال لم تحدد الطريقة المعتمدة في كتابة الكود، سيقوم المتصفح باعتماد الطريقة التقليدية بشكل تلقائي.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

Chrome Edge Firefox Opera Safari Android
Webview		 Chrome
for Android		 Firefox
for Android		 Opera
for Android		 Safari
for IOS		 Samsung
Internet
1 12 1 مدعوم مدعوم مدعوم مدعوم 4 مدعوم مدعوم مدعوم

إستخدامه

في المثال التالي قمنا بعرض رسالة تنبيه في الصفحة بواسطة كود بلغة جافاسكربت.

المثال الأول

<script>
    alert("Hello User!");
</script>
جرب الكود

في المثال التالي قمنا بإعداد ملف إسمه sample.js وضعناه في السكربت السابق ثم قمنا بتضمينه في الصفحة.

المثال الثاني

<script scr="sample.js"></script>
جرب الكود

في المثال التالي قمنا بتضمين سكربت خارجي جاهز مع إضافة الخاصية integrity له للتأكد من أمان الملف.
من بعدها قمنا بكتابة سكربت يقوم بإظهار/إخفاء فقرة موجودة في الصفحة بالإعتماد على الكود الموجود في السكربت الذي قمنا بتضمينه.

المثال الثالث

<script
  src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
  integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs="
  crossorigin="anonymous"></script>
جرب الكود

تصميمه الإفتراضي

بشكل عام جميع المتصفحات تعرضه بالتنسيق التالي.

script {
    display: none;
}

نصائح و ملاحظات

يمكنك وضع الوسم <script> في أي مكان تريد في الصفحة سواء بداخل الوسم <head> أو بداخل الوسم <body> و هذا الأمر أنت تقرره مستقبلاً على حسب حاجتك.

إذا كان هدفك أن يتم تنفيذ كود الجافاسكربت قبل أن يتم عرض محتوى الصفحة يجب أن تضعه في الوسم <head>.
و إذا كان هدفك أن يتم تنفيذ السكربت بعد عرض كل محتوى الصفحة فيجب أن تضعه في آخر الوسم <body>.