الوسيطة <script>
في لغة (HTML)، يتم إدراج كود جافاسكربت بين الوسيطين <script> و </script>.
على سبيل المثال:
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
قد تستخدم أمثلة جافاسكربت القديمة الخاصية type: <script type="text/javascript">.
لا يُعدّ استخدام الخاصية type ضروريًا، حيث تعتبر جافاسكربت لغة النصوص البرمجية الافتراضية في HTML.
دوال جافاسكربت والأحداث
الدالة (function) في جافاسكربت هي كتلة من كود جافاسكربت يمكن تنفيذها عند “استدعائها”.
على سبيل المثال، يمكن استدعاء دالة عند حدوث حدث ما، مثل عند ضغط المستخدم على زر.
ستتعلم المزيد حول الدوال والأحداث في الفصول اللاحقة.
جافاسكربت في الوسيطين <head> أو <body>
يمكنك وضع أي عدد من النصوص البرمجية في مستند HTML.
يمكن وضع النصوص البرمجية في الوسيط <body> أو في قسم <head> من صفحة HTML، أو في كليهما.
جافاسكربت في الوسيط <head>
يوضع كود جافاسكربت في مثالنا هذا داخل الوسيط <head> من صفحة HTML.
يتم استدعاء الدالة (تنفيذها) عند ضغط المستخدم على زر:
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h2>Demo JavaScript in Head</h2>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
جافاسكربت في الوسيط <body>
في هذا المثال، يوضع كود جافاسكربت (دالة) داخل الوسيط <body> من صفحة HTML.
يتم استدعاء الدالة (تنفيذها) عند ضغط المستخدم على زر:
<!DOCTYPE html>
<html>
<body>
<h2>Demo JavaScript in Body</h2>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</body>
</html>
تؤدي عملية وضع النصوص البرمجية في أسفل عنصر <body> إلى تحسين سرعة العرض، لأن قراءة النصوص البرمجية تؤخر عملية العرض.
جافاسكربت الخارجي (External JavaScript)
يمكن أيضًا وضع النصوص البرمجية في ملفات خارجية:
ملف خارجي: myScript.js
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
تكون النصوص البرمجية الخارجية عملية عندما يتم استخدام نفس الكود في العديد من صفحات الويب المختلفة.
تحتوي ملفات جافاسكربت على امتداد الملف .js.
لاستخدام نص برمجي خارجي، ضع اسم ملف النص البرمجي في الخاصية src (المصدر) داخل وسيطة <script>:
مثال
<script src="myScript.js"></script>
يمكنك وضع مرجع نص برمجي خارجي في الوسيطين <head> أو <body> حسب رغبتك.
سيعمل النص البرمجي وكأنه موجود تمامًا في المكان الذي توجد فيه وسيطة <script>.
لا يمكن للنصوص البرمجية الخارجية احتواء الوسيطين <script>.
مميزات جافاسكربت الخارجي
وضع النصوص البرمجية في ملفات خارجية له بعض المزايا:
- فصل HTML عن الكود
- يجعل من السهل قراءة HTML وجافاسكربت وصيانتها
- يمكن أن تؤدي ملفات جافاسكربت المخزنة مؤقتًا إلى تسريع تحميل الصفحات
لإضافة عدة ملفات نصية إلى صفحة واحدة، استخدم عدة وسائط <script>:
مثال
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>
روابط خارجية
يمكن الإشارة إلى نص برمجي خارجي بثلاث طرق مختلفة:
- باستخدام عنوان URL كامل (عنوان ويب كامل)
- باستخدام مسار ملف (مثل /js/)
- بدون أي مسار
مثال
<script src="https://www.example.com/js/myScript.js"></script>
يستخدم هذا المثال مسار ملف للارتباط بـ myScript.js:
<script src="/js/myScript.js"></script>
يستخدم هذا المثال بدون مسار للارتباط بـ myScript.js:
مثال
<script src="myScript.js"></script>
