إعلان
دورة تطوير التطبيقات باستخدام لغة JavaScript في هذه الدورة ستتعلم لغة جافا سكريبت, استخدام مكتبة React.js, بناء API الموقع بواسطة Node.js, تطوير تطبيق جوال باستخدام React Native, و في نهاية الدورة ستتعلم تطوير تطبيق محادثة شبيه بتطبيق WhatsApp. تعلم الآن
دورة تطوير واجهات المستخدم في هذه الدورة ستتعلم لغة HTML و لغة CSS و لغة JavaScript. من ناحية التطبيق العملي ستتعلم طريقة بناء واجهة متجر إلكتروني مكون من ست صفحات, تحويل خمسة تصاميم PSD إلى صفحات ويب, بناء واجهة مستخدم تشبه موقع يوتيوب, بناء لوحة تحكم إحترافية. تعلم الآن
تطوير تطبيقات باستخدام لغة بايثون في هذه الدورة ستتعلم أساسيات البرمجة بلغة بايثون وصولاً إلى التعامل مع أشهر أطر العمل (Flask و Django) و ستتعلم كيف تبني متجر إلكتروني يمكن للمستخدمين البيع و الشراء من خلاله. تعلم الآن
دورة تطوير تطبيقات الويب باستخدام لغة PHP في هذه الدورة ستتعلم لغة PHP من الصفر, استخدام إطار العمل Laravel بشرح مفصّل و عملي, كيفية تطوير شبكة اجتماعية تشبه Instagram, بناء API لتطبيق جوال وفق أسلوب RESTful, تطوير موقع إعلانات مبوبة, تطوير نظام إدارة محتوى CMS كامل. تعلم الآن
دورة تطوير تطبيقات الويب باستخدام لغة Ruby في هذه الدورة ستتعلم البرمجة بلغة Ruby إنطلاقاً من أبسط المفاهيم وحتى بناء تطبيق حقيقي, إستخدام إطار العمل Ruby on Rails بشرح مفصّل و عملي, بناء تطبيق حقيقي عبارة عن شبكة اجتماعية تشبه تويتر, تطوير مجتمع الكتروني يشبه حسوب I/O. تعلم الآن
دورة علوم الحاسوب هذه الدورة معدة لتكون مدخل لعلوم الحاسوب و لغات البرمجة حيث ستتعرف فيها على أنظمة التشغيل و ستتعمق في نظام لينكس و في كيفية التعامل معه من خلال موجه الأوامر, بالإضافة إلى قواعد البيانات و أساسيات الشبكات و الخوادم و مبادئ الحماية والأمان في الويب. تعلم الآن

    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>.

    إعلان

    Eqla3Tech.com

    شروحات مكتوبة حول لغات البرمجة و تقنية المعلومات باللغة العربية مقدمة من إقلاع تك.

    لغة جافا لغة ++C قواعد البيانات نظام ويندوز نظام لينكس الشبكات تقنية المعلومات

    الدورات

    أدوات مساعدة

    الأقسام

    دورات
    مقالات أسئلة مشاريع كتب