JavaScript Where To
أين تُكتب أكواد جافا سكريبت
في هذا الدرس، ستتعرف على كيفية كتابة أكواد JavaScript في صفحات HTML باستخدام عدة طرق. سنبدأ بتغطية كيفية كتابة الأوامر داخل صفحة HTML نفسها، ثم نتطرق إلى كيفية دمج JavaScript داخل عناصر HTML باستخدام الخصائص الحدثية. بعد ذلك، سنتناول كيفية استخدام ملفات JavaScript منفصلة (.js) وربطها بصفحات HTML، سواء من خلال روابط داخلية أو خارجية. سنشرح أيضًا خاصية type مع عنصر <script>، بالإضافة إلى مفهوم defer وasync وكيفية تحسين أداء تحميل JavaScript في صفحات الويب باستخدامهما.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
الشروحات chevron_left JavaScript Where To chevron_left JavaScript
JavaScript Where To
أين تُكتب أكواد جافا سكريبت
</>
Java Script Where To
أماكن كتابة أكواد جافا سكريبت
- Internal JavaScript داخل صفحة HTML:
تُكتب أكواد JavaScript داخل عنصر <script> مباشرةً في ملف HTML، ويمكن وضعها داخل عنصر <head> أو <body>. يفضل وضع الأكواد في نهاية <body> لتحسين سرعة تحميل الصفحة. - Inline JavaScript داخل عناصر HTML:
يتم كتابة أكواد JavaScript مباشرةً داخل عناصر HTML باستخدام الخصائص الحدثية (Event Attributes) مثل onclick و onmouseover، مما يسمح بتنفيذ الكود عند تفاعل المستخدم مع العنصر. هذه الطريقة تُستخدم للوظائف البسيطة، لكنها غير مفضلة في المشاريع الكبيرة لأنها تؤثر على تنظيم الكود. - External JavaScript في ملف خارجي:
يتم كتابة أكواد JavaScript في ملف مستقل بامتداد .js، ثم يتم استدعاؤها داخل ملف HTML باستخدام عنصر <script> مع خاصية src. هذه الطريقة هي الأفضل لأنها تفصل كود JavaScript عن HTML، مما يسهل إعادة استخدامه عبر صفحات متعددة ويساهم في تحسين الأداء.
أفضل طريقة
</>
JavaScript HTML Internal
كتابة أوامر الجافا سكريبت بداخل صفحة HTML
تُكتب أوامر JavaScript داخل صفحة HTML داخل عنصر head أو داخل عنصر body.
- داخل عنصر head: هذه الطريقة أقل شيوعًا من الطريقة الثانية، وذلك لأن المتصفح ينفذ أوامر JavaScript قبل تحميل عناصر HTML، مما قد يؤدي إلى مشاكل إذا حاول الكود التعامل مع عناصر لم يتم تحميلها بعد.
- داخل عنصر body: تُكتب أكواد JavaScript عادةً قبل علامة إغلاق body داخل وسم script.
هذه الطريقة هي الأكثر شيوعًا لأنها تضمن أن المتصفح قد قام بتحميل جميع عناصر HTML قبل تنفيذ أكواد JavaScript، مما يقلل من احتمالية حدوث أخطاء.
أوامر جافا سكريبت بداخل script
تُكتب أوامر جافا سكريبت في صفحة HTML داخل عنصر script.
<script> //JS Code Here </script>
الطريقة الأولى بداخل head
الطريقة الأولى بداخل عنصر head في صفحة HTML.
<head>
<title>JavaScript Where To</title>
<script>
alert('Welcome to JavaScript From CloseTag.com');
</script>
</head>
الطريقة الثانية بداخل body
الطريقة الثانية بداخل عنصر body في صفحة HTML، وهي الطريقة الشائعة والأكثر استخدامًا.
<body>
<h1>JavaScript Where To</h1>
<p>Welcome to JavaScript From CloseTag.com</p>
<script>
alert('Welcome to JavaScript From CloseTag.com');
</script>
</body>
مشكلة عند كتابة أوامر جافا سكريبت داخل head
حدث خطأ عند التشغيل عندما قمنا بتنفيذ أوامر جافا سكريبت على عنصر داخل صفحة HTML، حيث قام المتصفح بقراءة السطور البرمجية من الأعلى إلى الأسفل، ونفذ أوامر جافا سكريبت قبل قراءة عنصر h1.
<head>
<title>JavaScript Where To</title>
<script>
document.getElementById('title').innerHTML = "JavaScript Where To";
</script>
</head>
حل مشكلة أوامر جافا سكريبت داخل head
يتم تنفيذ أوامر جافا سكريبت بعد أن يقوم المتصفح بقراءة جميع محتويات الصفحة.
<head>
<title>JavaScript Where To</title>
<script>
window.onload = function(){
document.getElementById('title').innerHTML = "JavaScript Where To";
}
</script>
</head>
كتابة أوامر جافا سكريبت في head و body معًا
يمكننا كتابة أوامر جافا سكريبت في كل من head و body معًا دون حدوث مشكلة، ولكن لا يُفضل ذلك لأنه قد يؤدي إلى صعوبة في تنظيم الكود، كما أن تنفيذ الأكواد داخل head قد يسبب أخطاء إذا حاولت الوصول إلى عناصر HTML لم يتم تحميلها بعد.
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript Where To</title>
<script>
alert('JavaScript Where To Alert in Head.')
</script>
</head>
<body>
<h1>JavaScript Where To</h1>
<p>Welcome to JavaScript From CloseTag.com</p>
<script>
alert('JavaScript Where To Alert. in Body')
</script>
</body>
</html>
ملاحظة
تُكتب أوامر JavaScript داخل عنصر <script> في صفحة HTML باستخدام الطريقة الداخلية (Internal)، سواء داخل <head> أو <body>. ومع ذلك، تعتبر الطريقة الأكثر شيوعًا هي وضع الأكواد داخل <body> قبل إغلاقه، لضمان تحميل عناصر الصفحة بالكامل قبل تنفيذ أكواد JavaScript.
</>
Writing JavaScript commands inside HTML elements
كتابة أوامر جافا سكريبت بداخل عناصر HTML
كتابة أوامر JavaScript بطريقة Inline:
- طريقة Inline تعني كتابة أوامر JavaScript مباشرة داخل عناصر HTML باستخدام الأحداث (Events).
- أشهر حدث يتم استخدامه هو `onclick`، وهو يحدث عندما يتفاعل المستخدم مع الصفحة (مثل النقر على زر).
تُكتب أوامر JavaScript هذه داخل خصائص (Attributes) أي عنصر في HTML، مثل `onclick`، وهذه الطريقة تُستخدم لتنفيذ الكود عند تفاعل المستخدم مع الصفحة. يتم كتابة أمر JavaScript داخل قيم هذه الخصائص.
التوضيح:
- Inline JavaScript: يتم كتابة الكود مباشرة داخل عناصر HTML باستخدام أحداث مثل onclick.
- مثال: عند كتابة الكود في onclick="alert('Hello!')"، سيتم تنفيذ الكود عند نقر المستخدم على العنصر الذي يحتوي على هذا الحدث.
No execution automatically
لا يتم التنفيذ تلقائيًا: لتنفيذ أوامر JavaScript، يجب أن تضغط على النص داخل العنوان الرئيسي `<h1>`، عندها ستقوم JavaScript بتنفيذ أمر `alert` مباشرة.
<h1 onclick="alert('JavaScript Inline On Click show alert.')">JavaScript</h1>
ملاحظة
</>
Writing JavaScript commands inside a separate .js file
كتابة أوامر جافا سكريبت بداخل ملف js منفصل
تُكتب لغة JavaScript داخل ملف منفصل بامتداد .js، ويتم ربطه بملف HTML باستخدام العنصر <script>.
أوامر JavaScript تُكتب مباشرة داخل ملف .js بدون الحاجة إلى عنصر <script>.
باستخدام عنصر <script>، نضيف خاصية "src" للإشارة إلى مسار ملف .js لربطه بملف HTML. عادةً يكون الملف بجانب ملف HTML.
يمكن ربط ملف JavaScript بصفحة HTML داخل العنصر <head> أو داخل العنصر <body>.
كتابة أوامر JavaScript في صفحة منفصلة: تُعد هذه الطريقة الأفضل والأكثر انتشارًا لعدة أسباب:
- إعادة استخدام الأوامر: يمكنك استخدام نفس الأوامر البرمجية الموجودة في ملف .js في أكثر من صفحة HTML. بدلاً من كتابة نفس الأوامر في كل صفحة، يمكنك استدعاء ملف JavaScript في جميع الصفحات.
- تنظيم الكود: فصل أوامر JavaScript عن HTML يساعد المطورين في تعديل الكود بسهولة في المستقبل، كما يجعل الكود أكثر تنظيمًا ويسهل صيانته.
- الصيانة: بفضل فصل JavaScript عن HTML، يصبح من الأسهل على المطورين تعديل الأكواد وإصلاح أي أخطاء لاحقًا دون التأثير على هيكل الصفحة نفسها.
Linking JavaScript File from Subfolder
ربط صفحة جافا سكريبت بصفحة HTML داخلية بجانب صفحة HTML من داخل فولدر فرعي داخل المشروع.
<script src="js/myscript.js"></script>
Linking JavaScript File from Project Directory
ربط صفحة جافا سكريبت بصفحة HTML داخل المشروع بجانب صفحة HTML.
<script src="myscript.js"></script>
Linking Multiple JavaScript Files
ربط أكثر من ملف JavaScript بصفحة HTML، حيث يكون لكل ملف وظيفة مختلفة وأوامر برمجية مخصصة.
<script src="script.js"></script> <script src="slider.js"></script>
ملاحظة
</>
Linking an HTML page to a JavaScript file using an internal or external link
ربط صفحة HTML بملف JavaScript باستخدام رابط داخلي أو خارجي
- روابط جانبية (ملفات موجودة بجانب صفحة HTML).
- أو روابط خارجية (من مصادر أخرى أو نطاقات مختلفة).
JavaScript External from Internal
ربط صفحة JavaScript بصفحة JavaScript داخلية بجانب صفحة HTML.
<script src="js/myscript.js"></script>
JavaScript External File from External Link
ربط صفحة JavaScript بملف JavaScript عن طريق رابط خارجي.
<script src="https://www.closetag.com/js/myscript.js"></script>
لا تقوم بكتابة أوامر داخل عنصر <script> في هذه الحالة
لا يمكن إضافة عنصر <script> لربط صفحة JavaScript خارجية وكتابة أوامر برمجية بداخلها، حيث ستحدث مشكلة لأن الأوامر ستكون خاصة بالصفحة الخارجية فقط ولن تعمل بشكل صحيح.
<script src="/js/myscript.js">
alert('Text Two');
</script>
في حالة استخدام طريقة JavaScript الداخلية مع ملف خارجي
هذه هي الطريقة الصحيحة: استخدام طريقة JavaScript الداخلية مع ملف خارجي، حيث يتم وضع كل واحدة في عنصر <script> مختلف.
<script src="/js/myscript.js"></script>
<script>
alert('Text Two');
</script>
</>
The type attribute with the script element
خاصية type atribute مع عنصر script
في الإصدارات القديمة من لغة HTML، كان يجب علينا عند إضافة عنصر <script> بداخل صفحة HTML أن نضيف له خاصية `type` (attribute). لكن في أحدث إصدارات لغة HTML، لم يعد من الضروري إضافة هذه الخاصية.
The `type` attribute has been deprecated in modern HTML versions
تم إلغاء خاصية `type` في الإصدارات الحديثة من لغة HTML.
<script type="text/javascript"> .... </script>
</>
defer and async in JavaScript
defer و async في جافا سكريبت
عند استخدام JavaScript في صفحات HTML، يمكننا تحميل وتنفيذ الأكواد بطرق مختلفة. من بين هذه الطرق، نجد defer و async، وهما طريقتان يتم استخدامهما عند تحميل ملفات JavaScript الخارجية باستخدام عنصر script.
الفرق بين defer و async:
| الطريقة | متى يتم تحميل السكريبت؟ | متى يتم تنفيذ السكريبت؟ | التأثير على تحميل الصفحة | ملاحظة |
| defer | يتم تحميله بالتوازي مع تحميل HTML | يتم تنفيذه بعد اكتمال تحميل وتحليل HTML بالكامل | لا يوقف تحميل الصفحة، ويُنفذ بعد تحميل DOM | لا تحدث مشاكل اثناء التحميل |
| async | يتم تحميله بالتوازي مع تحميل HTML | يتم تنفيذه بمجرد اكتمال تحميله، حتى لو لم يكتمل تحميل HTML | قد يوقف تحميل الصفحة مؤقتًا إذا تم تنفيذه قبل اكتمال تحميل HTML | تحدث مشاكل اثناء التحميل |
متى نستخدم defer؟
- عند الحاجة إلى تنفيذ الأكواد بعد تحميل عناصر HTML بالكامل.
- عندما يكون هناك سكريبت يحتاج إلى التعامل مع عناصر HTML داخل الصفحة.
- يُستخدم غالبًا مع الملفات التي تحتوي على أكواد JavaScript تتفاعل مع DOM.
متى نستخدم async؟
- عند تحميل سكريبتات لا تعتمد على عناصر HTML، مثل أدوات التحليل والإعلانات.
- عندما نريد تحميل سكريبتات صغيرة بسرعة دون انتظار تحميل الصفحة بالكامل.
- يُستخدم غالبًا مع ملفات JavaScript التي لا تحتاج إلى التفاعل مع DOM مباشرةً.
كيفية استخدام defer و async؟
مثال على defer:
سيتم تحميل script.js بالتوازي مع تحميل HTML وسيتم تنفيذ الكود بعد اكتمال تحميل الصفحة بالكامل.
<script src="script.js" defer></script>
مثال على async:
سيتم تحميل script.js بالتوازي مع تحميل HTML وسيتم تنفيذ الكود بمجرد تحميله، دون انتظار تحميل بقية الصفحة.
<script src="script.js" async></script>
الخلاصة:
defer هو الخيار الأفضل عندما يكون الكود بحاجة إلى التعامل مع عناصر HTML.
async يُستخدم عندما لا يعتمد الكود على DOM ويمكن تشغيله في أي وقت دون التأثير على الصفحة.
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
الدورات
لا يوجد
