HTML Scripts | In Arabic
HTML Scripts – فى هذا الفصل هنتعرف على البرمجة النصية، وكيفية إستخدام كود JavaScript فى HTML؟ وكل المعلومات حولها، مع بعض الأمثلة التوضيحية.
HTML Script
تشير البرمجة النصية من جانب العميل client side إلى نوع برامج الكمبيوتر التي يتم تنفيذها بواسطة متصفح الويب الخاص بالمستخدم.
JavaScript هي لغة البرمجة النصية الأكثر شيوعًا من جانب العميل على الويب.
يتم استخدام وسم الـ <script> لتضمين كود JavaScript او الرجوع إليه داخل مستند HTML لإضافة تفاعلية إلى صفحات الويب وتوفير تجربة مستخدم أفضل بكثير.
كيفية إضافة كود JavaScript إلى صفحات HTML؟
يمكن تضمين جافا سكريبت:
- مباشرة داخل صفحة HTML.
- او وضعه في ملف برنامج نصي خارجي والإشارة إليه داخل صفحة HTML.
تُستخدم الطريقتين وسم الـ <script>.
مثال للتوضيح
استخدام خاصية document.getElementById(“demo”).innerHTML لطباعة جملة “Hello JavaScript!” فى الـ div صاحب id=”demo”:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>HTML With JavaScript</title> </head> <body> <div id="demo"></div> <script> document.getElementById("demo").innerHTML = "Hello JavaScript!"; </script> </body> </html>
لتحديد عنصر HTML ، تستخدم JavaScript غالبًا طريقة:
- ()document.getElementById: لجلب عنصر HTML عن طريق الـ id الخاص بالعنصر.
- ()document.getElementByClassName: لجلب عنصر HTML عن طريق الـ class الخاص بالعنصر.
من الناحية المثالية ، يجب وضع وسم الـ <script> في اسفل الصفحة ، قبل قفلة وسم الـ
استدعاء ملف JavaScript خارجي
يمكنك أيضًا وضع كود JavaScript في ملف منفصل (بامتداد js.) ، واستدعاء هذا الملف في مستند HTML من خلال السمة src الخاصة بوسم الـ<script>.
هذا مفيد إذا كنت تريد نفس النص البرمجي متاحًا لمستندات متعددة، إنه يوفر عليك من تكرار نفس الكود مرارًا وتكرارًا ويجعل صيانة موقع الويب الخاص بك أسهل بكثير.
مثال للتوضيح:
demo.js file:
document.getElementById("demo").innerHTML = "Hello JavaScript!";
demo.html file:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>HTML With JavaScript</title> </head> <body> <div id="demo"></div> <script src="demo.js"></script> </body> </html>
عند تحديد سمة الـ src ، يجب ان يكون عنصر <script> فارغًا، هذا يعني ببساطة أنه لا يمكنك استخدام نفس عنصر <script> لتضمين JavaScript ولربط ملف JavaScript خارجي في مستند HTML.
عنصر الـ noscript
يتم استخدام وسم الـ <noscript> لتوفير محتوى بديل للمستخدمين الذين قاموا بتعطيل JavaScript في المستعرض الخاص بهم أو لديهم مستعرض لا يدعم البرمجة النصية من جانب العميل.
يمكن أن يحتوي هذا العنصر على أي عناصر HTML ، بخلاف <script> ، والتي يمكن تضمينها في عنصر الـ <body> لصفحة HTML العادية.
مثال للتوضيح:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>HTML With JavaScript</title> </head> <body> <div id="demo"></div> <script> document.getElementById("demo").innerHTML = "Hello JavaScript!"; </script> <noscript> <p>Oh! This website Not Using JavaScript Language.</p> </noscript> </body> </html>
لن يتم عرض المحتوى الموجود داخل عنصر النص البرمجي إلا إذا كان متصفح المستخدم لا يدعم البرمجة النصية. او إذا كانت البرمجة النصية معطلة في المتصفح لديه.
قَيم نفسك – Mini quiz
قُم بإجراء هذا الإختبار القصير على درس “HTML Scripts” لمعرفة مدى فهمك وإستيعابك للمعلومات السابقة، ولتثبيت المعلومات.
الإبلاغ عن خطأ
×إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:
info@albashmoparmeg.com
شكرًا لك على مساعدتك لنا!