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

Linking an HTML page to a JavaScript file using an internal or external link ربط صفحة HTML بملف JavaScript باستخدام رابط داخلي أو خارجي

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

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

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

الصف 1 شرح توضيحي
يمكن ربط صفحة HTML بملف JavaScript من خلال:
  • روابط جانبية (ملفات موجودة بجانب صفحة HTML).

  • أو روابط خارجية (من مصادر أخرى أو نطاقات مختلفة).


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

JavaScript External from Internal

ربط صفحة JavaScript بصفحة JavaScript داخلية بجانب صفحة HTML.

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

JavaScript External File from External Link

ربط صفحة JavaScript بملف JavaScript عن طريق رابط خارجي.

HTML 
<script src="https://www.closetag.com/js/myscript.js"></script>
جرّب بنفسك

لا تقوم بكتابة أوامر داخل عنصر <script> في هذه الحالة

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

لا تقوم بكتابة أوامر داخل عنصر في هذه الحالة

HTML 
<script src="/js/myscript.js">
  alert('Text Two');
</script>
جرّب بنفسك

في حالة استخدام طريقة JavaScript الداخلية مع ملف خارجي

هذه هي الطريقة الصحيحة: استخدام طريقة JavaScript الداخلية مع ملف خارجي، حيث يتم وضع كل واحدة في عنصر <script> مختلف.

HTML 
<script src="/js/myscript.js"></script>
<script>
  alert('Text Two');
</script>
جرّب بنفسك

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