وسم <script>
في HTML، يُكتب كود JavaScript بين الوسمين <script> و</script>، ليتمكّن المتصفح من التعرّف على الشيفرة البرمجية وتنفيذها.
مثال :
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>دوال JavaScript والأحداث
الدالة (Function) في JavaScript هي كتلة من الشيفرات البرمجية يمكن تنفيذها عند استدعائها.
على سبيل المثال، يمكن استدعاء دالة عند وقوع حدث (Event) معين، مثل نقر المستخدم على زر في صفحة الويب.
ستتعرّف على المزيد من دوال JavaScript وأحداثها في الفصول القادمة!
كتابة JavaScript داخل <head> أو <body>
يمكنك إدراج أي عدد من الشيفرات البرمجية في مستند HTML.
يمكن وضع شيفرات JavaScript داخل القسم <head> أو القسم <body> من صفحة HTML، أو توزيعها بين القسمين معًا.
JavaScript داخل <head>
في هذا المثال، نضع دالة (Function) بلغة JavaScript داخل القسم <head> من صفحة HTML.
يتم استدعاء الدالة وتنفيذها عندما ينقر المستخدم على زر في الصفحة.
JavaScript داخل <body>
في هذا المثال، نضع دالة (Function) بلغة JavaScript داخل القسم <body> من صفحة HTML.
يتم استدعاء الدالة وتنفيذها عندما ينقر المستخدم على زر في الصفحة.
يساعد وضع شيفرات JavaScript في نهاية العنصر `<body>` على تحسين سرعة عرض الصفحة، لأن المتصفح قد يؤخّر عرض محتوى الصفحة أثناء تحليل الشيفرات البرمجية وتنفيذها.
JavaScript خارجي
يمكن أيضًا كتابة شيفرات JavaScript في ملفات خارجية مستقلة، ثم ربطها بصفحات HTML لاستخدامها فيها.
تساعد هذه الطريقة على تنظيم الشيفرات البرمجية وفصل JavaScript عن HTML، مما يسهل صيانة الكود وإعادة استخدامه في صفحات متعددة.
تُعدّ الملفات الخارجية خيارًا عمليًا عندما تحتاج إلى استخدام الشيفرة البرمجية نفسها في صفحات ويب متعددة.
تحمل ملفات JavaScript الامتداد .js.
لاستخدام ملف JavaScript خارجي، ضع اسم الملف في السمة src (المصدر) داخل الوسم <script>، كما في المثال التالي:
<script src="script.js"></script>
في هذا المثال، يشير script.js إلى ملف JavaScript الخارجي الذي سيحمّله المتصفح وينفّذ الشيفرة الموجودة فيه.
يمكنك وضع مرجع الملف الخارجي لـ JavaScript داخل القسم <head> أو القسم <body>، وفقًا لما يناسبك.
تُنفَّذ الشيفرة البرمجية كما لو كانت موجودة في الموضع نفسه الذي وُضع فيه الوسم <script> داخل مستند HTML.
ملاحظة: لا يجوز أن تحتوي ملفات JavaScript الخارجية ذات الامتداد `.js` على وسوم HTML من نوع `<script>` أو `</script>`، بل يجب أن تتضمن شيفرة JavaScript فقط.
مزايا استخدام ملفات JavaScript الخارجية
يوفّر وضع شيفرات JavaScript في ملفات خارجية عدة مزايا، من أبرزها:
- فصل HTML عن الشيفرات البرمجية: يساعد على تنظيم بنية الصفحة وفصل المحتوى عن الوظائف البرمجية.
- سهولة القراءة والصيانة: يجعل شيفرات HTML وJavaScript أكثر وضوحًا، ويسهّل تعديلها وتطويرها.
- تحسين سرعة تحميل الصفحات: يمكن للمتصفح تخزين ملفات JavaScript مؤقتًا في ذاكرة التخزين المؤقت (Cache)، مما يقلّل الحاجة إلى تنزيلها مجددًا عند زيارة صفحات أخرى تستخدم الملفات نفسها.
لإضافة عدة ملفات JavaScript إلى صفحة واحدة، استخدم عدة وسوم <script>، بحيث يشير كل وسم إلى الملف المطلوب.
مثال :
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>المراجع الخارجية
يمكن ربط ملفات JavaScript الخارجية بصفحة HTML بثلاث طرق مختلفة:
- باستخدام عنوان URL كامل: أي العنوان الكامل للملف على الويب.
- باستخدام مسار الملف: مثل
/js/لتحديد المجلد الذي يحتوي على الملف. - دون تحديد مسار: عند وجود الملف في المجلد نفسه الذي توجد فيه صفحة HTML.
يستخدم المثال التالي عنوان URL كاملًا لربط الصفحة بالملف myScript.js.
<script src="https://www.YACodeX.com/js/myScript.js"></script>يستخدم هذا المثال مسار الملف (File Path) لربط صفحة HTML بالملف myScript.js.
<script src="/js/myScript.js"></script>ويستخدم هذا المثال طريقة الربط دون تحديد مسار للوصول إلى الملف myScript.js، وذلك عندما يكون الملف موجودًا في المجلد نفسه الذي توجد فيه صفحة HTML.
<script src="myScript.js"></script>