English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
في هذا الفصل، ستتعلم كيفية دمج جافا سكربت في صفحتك.
عادةً، هناك ثلاث طرق لدمج جافا سكربت في صفحة الويب:
استخدامخصائص الحدث (مثل onclick، onkeypress وما إلى ذلك) وضع كود جافا سكربت مباشرة داخل علامة HTML
إنشاء ملف جافا سكربت خارجي، ثم تحميله عبر<script>عنصر src الخاص بعلامة
في HTML، يجب أن تكون<script>و</script>إدراج كود جافا سكربت بين علامات.
<script>
document.write("Hello World");
</script>التحقق من <‹/›ملاحظة:قد يستخدم مثال قديم على جافا سكربت خاصية type: <script type="text/javascript">. منذ HTML5، لم يعد هناك حاجة إلى خاصية type. جافا سكربت هو لغة السكربت الافتراضية لـ HTML5.
يمكنك وضع أي عدد من السكربت في وثيقة HTML.
يمكن وضع السكربت في<head>أو في <body>، يعتمد ذلك على وقت التحميل الذي تريده.
في هذا المثال، يتم وضع وظيفة JavaScript في صفحة HTML:<head>جزء.
سيتم استدعاء هذه الوظيفة عند النقر على الزر:
<!DOCTYPE html>
<html>
<head>
<script>
function myFunc() {
document.getElementById("output").innerHTML = "Hello World";
}
</script>
</head>
<h2>جافا سكربت في الرأس</h2>
<button type="button" onclick="myFunc()">انقر</button>
<p id="output">هذا هو جملة</p>
</html>التحقق من <‹/›كل<script>العلامات ستمنع عملية عرض الصفحة حتى يتم تنزيلها وتنفيذ كود JavaScript بشكل كامل، لذا فإن وضعها في الجزء الأول من المستند سيؤثر بشكل كبير على أداء موقعك.
في هذا المثال، يتم وضع وظيفة JavaScript في صفحة HTML:جزء.
سيتم استدعاء هذه الوظيفة عند النقر على الزر:
<!DOCTYPE html>
<html>
<h2>JavaScript في الجسم</h2>
<button type="button" onclick="myFunc()">انقر</button>
<p id="output">هذا هو فقرة</p>
<script>
function myFunc() {
document.getElementById("output").innerHTML = "Hello World";
}
</script>
</html>التحقق من <‹/›يجب وضع السكربت في نهاية جزء النص، بجانب</body>قبل علامة
يمكنك أيضًا استخدامخصائص الحدث (مثل onclick، onkeypress وما إلى ذلك) وضع كود JavaScript مباشرة داخل علامة HTML.
<p onclick="this.innerHTML='Hello World';">هذا هو الفقرة الأولي (انقر هنا)</p>التحقق من <‹/›
لكن يجب تجنب وضع كود JavaScript الكبير بشكل مباشر، لأن JavaScript يجعل HTML مزعجًا ويسهل صيانة كود JavaScript.
يمكنك أيضًا وضع كود JavaScript في ملف منفصل به امتداد .js، ثم<script>العلامةsrc�性 لتحميلها في الصفحة.
في المثال التالي، يشير إلى ملف سكربت خارجي:
<script src="myscript.js"></script>التحقق من <‹/›
لإضافة عدة ملفات سكربت إلى صفحة واحدة، استخدم عدة علامات سكربت:
<script src="myscript_1.js"></script> <script src="myscript_2.js"></script>
يمكنك إضافة<head>أو<body>وضع مرجع سكريبت خارجي.
سلوك السكريبت كما لو كان موجودًا<script>في نفس الموقع الذي يوجد فيه العلامة.
ملاحظة:لا يمكن أن يحتوي ملف السكريبت الخارجي على<script>العلامة.
لدي وضع خارجي للسكريبت بعض المزايا:
إنه يفصل الجافاسكربت عن HTML
إنه يجعل قراءة وتصحيح HTML وJavaScript أسهل
يمكن لتخزين ملفات الجافاسكربت المحفوظة تعزيز سرعة تحميل الصفحات
يمكن استخدام نفس السكريبت في عدة مستندات
ملاحظةعادةً، عند تثبيت ملف الجافاسكربت الخارجي لأول مرة، يتم تخزينه في مخزن المستعرض (مثل الصور واللوحات النصية)، لذا لا تحتاج إلى تنزيله من خادم موقع الويب الذي أنشأ الصفحة مرارًا وتكرارًا. يتم تحميله بشكل أسرع.
يمكن استخدام URL الكامل أو المسار الخاص بالصفحة الحالية لاستدعاء سكريبتات خارجية.
يستخدم هذا المثال رابط URL كامل للوصول إلى السكريبت:
<script src="https://ar.oldtoolbag.com/run/js/myscript.js"></script>التحقق من <‹/›
يستخدم هذا المثال سكريبتًا موجودًا في مجلد معين على الموقع الحالي:
<script src="/run/js/myscript.js"></script>التحقق من <‹/›
يمكنك تجربتها في مسار ملف HTML لمزيد من المعلومات حول مسارات الملفات، راجع الفصل.