في هذا الدرس سوف نتعلم كيف نقوم بإضافة أكواد الجافا السكربت لصفحة الويب الخاصة بنا ، هناك العديد من الطرق للقيام بذلك .
بدايةََ يجب ان تعلم أنه يستخدم الوسم <script> لإدراج أكود جافاسكربت داخل صفحات HTML ، سوف نتعرف على هذا الوسم بشكل اكبر وما هي الـ Attribute التى تستخدم مع هذا الوسم .
خلال دراستك للـ Css تعلمت ان هناك العديد من الطرق من أجل اضافة خصائص الـ Css
- ان يكون في نفس العنصر ( inline-style )
- أن يكون في صفحة الـ
HTMLداخل وسم الـheadويسمى بـ ( internal-style ) - أن يكون في ملف خارجي ويتم ربطه من خلال الوسم
<link />.
هنا بالجافا سكربت نفس الشىء بحيث يمكنك وضع أكواد الجافا السكربت بعده طرق وأماكن متعدده ، دعونا نتعرف عليها !
إضافة أكواد الجافا سكربت داخل الوسم <script>
وسم الـ script وهو العنصر المسئول عن تنفيذ أوامر الجافا سكربت في داخل ملف الـ HTML ومحتوى هذا العنصر لا يظهر بالصفحة كباقي عناصر الـ HTML ، حيث ان الإعدادات الإفتراضية لكل متصفحات الويب لهذا العنصر هي diplay: none
ومن خلال هذا الوسم ، يمكنك كتابة أكواد الجافا سكربت بداخله مباشرةََ أو كتابتها في ملف منفصل ومستقل
كتابة أكواد الجافا سكربت داخل وسم script
يجب ان نعلم أن هذا العنصر من الوسوم التي لها وسم بداية ونهاية ، ويتم كتابة أكواد الجافا سكربت بينهما .
<script>
// Here Write Code JavaScript
</script>كتابة أكواد الجافا سكربت في ملف خارجي من خلال وسم الـ script
هناك طريقة أخرى لكتابة أكواد الجافا سكربت وهي من خلال ملف منفصل تماما عن ملف الـ HTML وما سيكون بداخل هذا الملف فقط أكواد جافا سكربت .
سبب كونه منفصل من أجل التنظيم وأن يكون كل شىء واضح ، الـ HTML بملف منفصل ، والـ JavaScript بملف منفصل .
الامتداد الخاص بملفات الجافا سكربت هو app.js حيث app هي اسم الملف و .js هي امتداد الملف .
ويتم تحديد مكان الملف الخاص بالجافا سكربت من خلال src وهي خاصية يتم اضافتها للوسم script لمعرفة مكان وجود الجافا سكربت ، سواء لو كان لديك بجانب الملفات الأخرى أو كان ملف خارجي .
السمات ( attributes ) التي تستخدم مع العنصر <script>
type
تستخدم هذه السمة لتحديد نوع الأكواد الموجودة داخل العنصر <script> ، هذه الخاصية ستكون اجبارية في حال استخدام الاصدار الرابع من HTML ، اما في حال استخدام الإصدار الخامس فيمكنك تجاهله لان نوع MIME لسكرتبات الجافا سكربت في صفحات الـ HTML5 معروفة .
src
وكما تم شرحه مسبقاََ تكون قيمه هذه السمة هي مسار ملف الـ JavaScript أو عنوانه الإلكتروني إذا كانت إستضافة الملف في مكان آخر، وتستخدم هذه السمة لتحديد مكان الأكواد التي سوف يتم تنفيذها، وفي حالة إستخدامه يجب ان يكون العنصر <script> فارغاََ ولا يحتوي على أي أكواد بين وسم البداية والإغلاق.
defer
يستخدم هذه السمة في حال كانت أكواد الجافا سكربت في ملف خارجي ، بمعنى أخر ، لكي يتم استخدام هذه السمة ، يجب ان يحتوى العنصر <script> على src .
وظيفته هي ان يعلم المتصفح بأن ينفذ الأكواد الموجودة داخل ملف الجافا سكربت بعد الانتهاء من قراءة وتحميل صفحة الـ HTML.
<script src="app.js" defer></script>async
هذه السمة تستخدم ايضاََ فقط في حالة استخدام ملف خارجي ، وتستخدم بالاصدار الخامس من الـ HTML .
وظيفته تنفيذ أكواد الجافا السكربت الموجودة في الملف الخارجي بعد الإنتهاء من تحميل الملف، وحتى إذا لم يكمل المتصفح تحميل باقي مكونات صفحة الويب .
<script src="app.js" async></script>في حال عدم كتابة defer أو async ، سيتم تحميل الملف مباشرة حتى قبل أن يكمل المتصفح تحميل باقي صفحة الويب .
مكان وضع العنصر <script> داخل ملف الـ HTML
بعد ان علمنا ان الوسم <script> هو المسئول عن تنفيذ أكواد الجافا سكربت سواء كانت الاكواد بداخله مباشرةََ او في ملف منفصل ، أين يتم وضع هذا العنصر وما هو المكان المناسب والأفضل له ؟
هناك عدة أماكن لوضع وسم الـ script :
- ممكن وضعه قبل وسم الاغلاق للـ
<head>.
- ممكن وضعه قبل وسم الإغلاق للـ
<body>.
أفضل هذه المناطق لوضع فيها كود الجافا سكربت ، هي ما قبل وسم الاغلاق من عنصر <body> بحيث يعمل المتصفح على تفسير الأكواد بالتتالي ، يبدأ سطر سطر ، ويبدأ بتحميل جميع عناصر الصفحة وتحميل الاستايل الخاص بها ، من ثم بعد ذلك يتم تحميل الجافا سكربت .