العنصر Script

البرنامج النصي من جانب العميل Client-side Script

تشير البرمجة النصية من جانب العميل إلى نوع من البرمجة التي يتم تنفيذها بواسطة متصفح الويب الخاص بالمستخدم. JavaScript او ما تعرف اختصارا بـ JS هي لغة البرمجة النصية الأكثر شيوعًا من جانب العميل على الويب.
يتم استخدام العنصر <script> لتضمين JavaScript أو الرجوع إليه داخل صفحة HTML لإضافة تفاعلية إلى صفحات الويب وتوفير تجربة أفضل بكثير للمستخدم .
بعض الاستخدامات الأكثر شيوعًا للـ JavaScript هي التحقق من صحة النموذج form validation ، وإنشاء رسائل تنبيه alert messages ، وإنشاء معرض صور ، وإظهار إخفاء محتوى من صفحة الويب وغيرها الكثير.

إضافة كود JavaScript إلى صفحات HTML

يمكننا تضمين اكود JavaScript مباشرة داخل صفحة HTML أو وضعها في ملف نصي خارجي والإشارة إليها داخل صفحة HTML. في كلتا الحالتين سنقوم بإستخدام العنصر <script>.

تضمين JavaScript داخل صفحة HTML

لتضمين JavaScript دخل صفحة HTML ، ما علينا سوى إضافة الكود كمحتوى لعنصر <script>.
تقوم JavaScript في المثال التالي بكتابة محتوى نصي داخل صفحة الويب صفحة ويب.

مثال
تشغيل
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Embedding JavaScript</title>
  6. </head>
  7. <body>
  8. <div id="greet"></div>
  9. <script>
  10. document.getElementById("greet").innerHTML="Hello World!";
  11. </script>
  12. </body>
  13. </html>
نصيحة:

لأداء افضل ، يجب وضع عناصر <script> في أسفل الصفحة ، قبل علامة الإغلاق </body> ، لأنه عندما يصادف متصفح الويب نصًا برمجيًا Script ، فإنه يتوقف مؤقتًا عن عرض بقية الصفحة حتى يحلل النص البرمجي مما قد يؤثر بشكل كبير على أداء موقعك.

استدعاء ملف JavaScript خارجي

يمكننا أيضًا وضع كود JavaScript في ملف منفصل (بامتداد .js) ، واستدعاء هذا الملف داخل صفحة HTML من خلال السمة src الخاصة بالوسم <script>.
وتكمن الفائدة هنا فيما إذا كنا نريد نفس كود JS متاحًا لصفحات ويب متعددة. مما يؤدي إلى توفير الوقت من تكرار نفس المهمة مرارًا وتكرارًا ويجعل صيانة موقع الويب أسهل بكثير.
يوضح المثال التالي كيفية ربط ملف JS خارجي بصفحة HTML.

مثال
تشغيل
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Linking External JavaScript</title>
  6. </head>
  7. <body>
  8. <div id="greet"></div>
  9. <script src="hello.js"> </script>
  10. </body>
  11. </html>
ملاحظة:

عند تحديد سمة src ، يجب أن يكون عنصر <script> فارغًا من المحتوى. هذا يعني ببساطة أنه لا يمكنك استخدام نفس عنصر <script> لتضمين كود JavaScript ولربط ملف JavaScript خارجي في صفحة HTML.

نصيحة:

ملفات JavaScript هي ملفات نصية عادية بامتداد .js ، مثل "hello.js". أيضًا ، يحتوي ملف JavaScript الخارجي على اكواد بلغة JavaScript فقط ؛ لا يحتوي على عنصر <script> ... </script>.

العنصر noscript

يتم استخدام عنصر <noscript> لتوفير محتوى بديل للمستخدمين الذين قاموا بتعطيل JavaScript في متصفح الويب الخاص بهم أو لديهم متصفح لا يدعم البرمجة النصية من جانب العميل client-side scripting .
يمكن أن يحتوي العنصر <noscript> على أي من عناصر HTML . لنلق نظرة على مثال:

مثال
تشغيل
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Noscript Demo</title>
  6. </head>
  7. <body>
  8. <div id="greet"></div>
  9. <script>
  10. document.getElementById("greet").innerHTML="Hello World!";
  11. </script>
  12. <noscript>
  13. <p>Oops! This website requires a JavaScript-enabled browser.</p>
  14. </noscript>
  15. </body>
  16. </html>
« التالي السابق »