انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #4 من درس: أين تُكتب أكواد جافا سكريبت

Writing JavaScript commands inside a separate .js file كتابة أوامر جافا سكريبت بداخل ملف js منفصل

في هذا الدرس، ستتعرف على كيفية كتابة أكواد JavaScript في صفحات HTML باستخدام عدة طرق. سنبدأ بتغطية كيفية كتابة الأوامر داخل صفحة HTML نفسها، ثم نتطرق إلى كيفية دمج JavaScript داخل عناصر HTML باستخدام الخصائص الحدثية. بعد ذلك، سنتناول كيفية استخدام ملفات JavaScript منفصلة (.js) وربطها بصفحات HTML، سواء من خلال روابط داخلية أو خارجية. سنشرح أيضًا خاصية type مع عنصر <script>، بالإضافة إلى مفهوم defer وasync وكيفية تحسين أداء تحميل JavaScript في صفحات الويب باستخدامهما.

1 صفوف تعليمية
جافا سكريبت
16,748 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

تُكتب لغة JavaScript داخل ملف منفصل بامتداد .js، ويتم ربطه بملف HTML باستخدام العنصر <script>.

أوامر JavaScript تُكتب مباشرة داخل ملف .js بدون الحاجة إلى عنصر <script>.  

باستخدام عنصر <script>، نضيف خاصية "src" للإشارة إلى مسار ملف .js لربطه بملف HTML. عادةً يكون الملف بجانب ملف HTML.  

يمكن ربط ملف JavaScript بصفحة HTML داخل العنصر <head> أو داخل العنصر <body>.

كتابة أوامر JavaScript في صفحة منفصلة: تُعد هذه الطريقة الأفضل والأكثر انتشارًا لعدة أسباب:

  • إعادة استخدام الأوامر: يمكنك استخدام نفس الأوامر البرمجية الموجودة في ملف .js في أكثر من صفحة HTML. بدلاً من كتابة نفس الأوامر في كل صفحة، يمكنك استدعاء ملف JavaScript في جميع الصفحات.

  • تنظيم الكود: فصل أوامر JavaScript عن HTML يساعد المطورين في تعديل الكود بسهولة في المستقبل، كما يجعل الكود أكثر تنظيمًا ويسهل صيانته.

  • الصيانة: بفضل فصل JavaScript عن HTML، يصبح من الأسهل على المطورين تعديل الأكواد وإصلاح أي أخطاء لاحقًا دون التأثير على هيكل الصفحة نفسها.


كتابة أوامر جافا سكريبت بداخل ملف js منفصل

Linking JavaScript File from Subfolder

ربط صفحة جافا سكريبت بصفحة HTML داخلية بجانب صفحة HTML من داخل فولدر فرعي داخل المشروع.

HTML 
<script src="js/myscript.js"></script>
جرّب بنفسك

Linking JavaScript File from Project Directory

ربط صفحة جافا سكريبت بصفحة HTML داخل المشروع بجانب صفحة HTML.

HTML 
<script src="myscript.js"></script>
جرّب بنفسك

Linking Multiple JavaScript Files

ربط أكثر من ملف JavaScript بصفحة HTML، حيث يكون لكل ملف وظيفة مختلفة وأوامر برمجية مخصصة.

HTML 
<script src="script.js"></script>
<script src="slider.js"></script>

جميع فقرات هذا الدرس (أين تُكتب أكواد جافا سكريبت)