كيفية إضافة أكواد JavaScript إلى أكواد HTML
تعلم طرق إضافة (كتابة) أكواد لغة الـ JavaScript إلى صفحة بلغة الترميز HTML، وكيف يتم إستخدام العنصر script؟ وماهي الأوصاف (attributes) التي تستخدم مع الوسم script؟ والفرق بين الوصف async و الوصف defer.
كنا قد تعلمنا من مقال سابق عن كيفية إضافة أكواد (تنسيقات) الـ CSS إلى صفحة مكتوبة بلغة الترميز HTML، والآن سوف نتعلم كيفية إضافة أكواد لغة الـ JavaScript إلى صفحة مكتوبة بلغة الترميز HTML، ولإضافة (كتابة) أكواد لغة الـ JavaScript يوجد طريقتين أساسيتين، وهم كالتالي:
أولا: Inline Scripts - أكواد داخل الوسوم (عناصر الـ HTML)
وفي هذه الطريقة يتم كتابة أكواد لغة الـ JavaScript عن طريق وصف الوسم (attribute) المتعلق بالحدث (Event) الخاص بالعنصر، فعلى سبيل المثال، إذا أردت تنفيذ بعض الأوامر عند الضغط على العنصر، فإنك تستخدم الوصف onclick، وإذا أردت تنفيذ الأوامر عند الإشارة بمؤشر الفأرة على العنصر فإنك تستخدم الوصف onmouseenter، وهكذا. والمثال التالي يوضح كيفية كتابة الأكواد بهذه الطريقة.
HTML5
<a href="#" onclick="alert('click');" onmouseenter="this.style.color = '#ea1e2c';">Click</a>من المثال السابق إستخدمنا الوصف المسمى onclick وإستخدمنا معه الدالة alert();، وبالتالي عند الضغط على العنصر <a> سوف تظهر نافذة تحتوي على الرسالة المكتوبة في الدالة وهي كلمة click، وعند الإشارة بمؤشر الفأرة على نفس العنصر سوف يتغير لون الكتابة إلى اللون الأحمر، وذلك لأن الأمر المكتوب في الوصف onmouseenter يقوم بتغيير لون الخط إلى اللون الأحمر.
لا يفضل كتابة أكواد لغة الـ JavaScript بهذه الطريقة، وذلك لأنه إذا أردت تغيير أي أمر سوف يتطلب منك البحث بداخل الأكواد عن الأمر وعادة يحتوي ملف الـ HTML على الكثير من الأوامر المكتوبة بأكثر من لغة، ومع الكثير من الأكواد في ملف واحد سوف يصعب عليك تنظيم وتغيير أكواد الـ JavaScript، وبالتالي لا يفضل إستخدام هذه الطريقة.
ثانيا: أكواد داخل الوسم <script>
وفي هذه الطريقة يتم كتابة الأكواد من خلال إستخدام العنصر (الوسم) <script>، وهو العنصر المسئول عن تنفيذ أوامر الـ JavaScript داخل ملف الـ HTML، وهذا العنصر لا يظهر محتواه في صفحة الويب كباقي عناصر الـ HTML، حيث أن الإعدادات الإفتراضية لكل متصفحات الويب لهذا العنصر هي display: none; أي أن محتواه مخفي من الصفحة، وبإستخدام العنصر <script> يمكنك إضافة أكواد الـ JavaScript مباشرة داخل العنصر، أو كتابتها في ملف مستقل وإضافتها من خلال الوصف src، والمثال التالي سوف يوضح طريقة كتابة الأكواد.
HTML5
<script type="text/javascript" src="main.js"></script><script type="text/javascript"> var element = document.getElementById('elem'); element.style.width = '100%';</script>
تلاحظ من المثال السابق أننا إستخدمنا عنصرين <script>، العنصر الأول يتكون من وسم للبداية وبعده مباشرة وسم للنهاية، أو بمعنى آخر أن هذا العنصر هو عنصر فارغ لا يحتوي على أي أكواد بداخله ويحتوي على الوصف src، وقيمته هي الملف main.js، أما العنصر الثاني فهو لا يحتوي على الوصف src، ويحتوي بداخله على أوامر مكتوبة بلغة البرمجة JavaScript، وهنا يوجد قاعدتين رئيسيتين لإضافة أكواد JavaScript إلى ملف الـ HTML
- عند إستخدام ملف خارجي لأكواد الـ JavaScript، فيجب لإضافته إلى صفحة الـ HTML أن يتم إستخدام الوصف
src، وأن يكون العنصر<script>فارغ (لا يحتوي على أي أكواد بداخله). - يمكنك إضافة العنصر
<script>في أي مكان بداخل صفحة الـ HTML، فيمكنك إضافة العنصر بداخل رأس الصفحة (بداخل العنصر<head>) أو يمكنك إضافته بداخل صفحة الـ HTML نفسها (بداخل الوسم<body>)، وهنا يمكنك كتابته في بداية الصفحة أو في نهايتها، ويمكنك إستخدام أكثر من عنصر في أكثر من مكان بداخل صفحة ويب واحدة.
ما هي الأوصاف (attributes) المستخدمة مع العنصر <script>
- الوصف type: وتكون قيمته أي من أنواع الوسائط (media_types)، ويستخدم لتحديد نوع الأكواد الموجودة بداخل العنصر
<script>، حيث يمكنك على سبيل المثال، كتابة أكواد بصيغة json داخل العنصر<script>، وبالتالي يستخدم هذا الوصف لتحديد نوع الأكواد المستخدمة، ويعتبر هذا الوصف إجباري في حالة ما إذا كنت تستخدم الإصدار الرابع من لغة الترميز HTML، أما إذا كنت تستخدم الإصدار الخامس فيمكنك تجاهل (عدم كتابته) هذا الوصف، وبصفة شخصية أفضل كتابته أي كان الإصدار المستخدم من لغة الترميز HTML. - الوصف src: وتكون قيمته هي مسار ملف الـ JavaScript أو عنوانه الإلكتروني إذا كانت إستضافة الملف في مكان آخر، ويستخدم هذا الوصف لتحديد مكان الأكواد التي سوف يتم تنفيذها، وفي حالة إستخدام هذا الوصف يجب أن يكون العنصر
<script>فارغ ولا يحتوي على أي أكواد بداخله. - الوصف defer: وتكون قيمته defer، ويستخدم هذا الوصف في حالة إستخدام ملف خارجي للأكواد، أو بمعنى آخر، لكي تستخدم هذا الوصف يجب أن يحتوي العنصر
<script>على الوصفsrc، ووظيفة هذا الوصف هي أن يعلم المتصفح بأن ينفذ الأوامر الموجودة في الملف بعد الإنتهاء من قراءة وتحميل صفحة الـ HTML. - الوصف async: وتكون قيمته async، وهو أيضا يستخدم فقط في حالة إستخدام ملف خارجي، وأيضا يستخدم فقط إذا كنت تستخدم الإصدار الخامس من لغة الترميز HTML، ويستخدم لكي يتم تنفيذ الأوامر الموجودة في الملف الخارجي بعد الإنتهاء من تحميل الملف، وحتى إذا لم يكمل المتصفح تحميل وقراءة باقي مكونات صفحة الويب.
و بذلك نكون قد تعلمنا كيفية إضافة أكواد الـ JavaScript إلى صفحة الـ HTML، وأتمنى أن أكون قد تمكنت من تبسيط المعلومات، وإذا كان عندك أي إستفسار أو إقتراح بتعديل، فقط إعلمني من خلال التعليقات.