العنصر <script> في لغة HTML يُستخدم لإضافة أو تضمين كود برمجي من جانب العميل (Client-side scripts)، وغالباً ما يكون هذا الكود بلغة JavaScript، ولكنه قد يشمل أيضاً لغات أخرى مثل VBScript (التي لم تعد مدعومة بشكل واسع). هذا الكود يسمح لك بإضافة تفاعلية ديناميكية إلى صفحات الويب، مثل:

  • تغيير محتوى الصفحة ديناميكياً: تحديث النصوص والصور والعناصر الأخرى بناءً على تفاعل المستخدم أو أحداث أخرى.
  • التحقق من صحة المدخلات: التأكد من أن المستخدم أدخل بيانات صحيحة في النماذج قبل إرسالها إلى الخادم.
  • إنشاء تأثيرات بصرية: إضافة حركات وتأثيرات تفاعلية لتحسين تجربة المستخدم.
  • التعامل مع الأحداث: الاستجابة لتفاعل المستخدم مثل النقر على زر أو تحريك الماوس.

طرق استخدام العنصر <script>:

  1. تضمين الكود مباشرة داخل الصفحة:

    HTML
    <!DOCTYPE html>
    <html>
    <head>
    <title>مثال على Script</title>
    </head>
    <body>

    <p id="demo">نص افتراضي.</p>

    <script>
    document.getElementById("demo").innerHTML = "مرحباً بالعالم!";
    </script>

    </body>
    </html>

    في هذا المثال، يتم تغيير محتوى الفقرة التي تحمل المعرّف "demo" إلى "مرحباً بالعالم!" باستخدام JavaScript.

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

    يُفضل هذه الطريقة لتنظيم الكود وإعادة استخدامه في صفحات متعددة.

    HTML
    <!DOCTYPE html>
    <html>
    <head>
    <title>مثال على Script خارجي</title>
    </head>
    <body>

    <script src="myscript.js"></script>

    </body>
    </html>

    هنا، يتم استدعاء ملف JavaScript باسم "myscript.js" موجود في نفس مجلد ملف HTML. يجب أن يحتوي ملف "myscript.js" على كود JavaScript بدون وسوم HTML.

خصائص العنصر <script>:

  • src: يُستخدم لتحديد مسار ملف JavaScript خارجي.
  • type: يُستخدم لتحديد نوع السكربت. القيمة الافتراضية هي "text/javascript"، ولكن يمكنك استخدام قيم أخرى مثل "module" للوحدات النمطية في JavaScript.
  • async: يُحدد ما إذا كان يجب تنفيذ السكربت بشكل غير متزامن. هذا يعني أن المتصفح سيستمر في تحليل HTML أثناء تنزيل السكربت، وسيتم تنفيذ السكربت بمجرد تنزيله.
  • defer: يُحدد ما إذا كان يجب تأجيل تنفيذ السكربت حتى يتم تحليل HTML بالكامل. هذا يضمن أن جميع عناصر HTML موجودة قبل تنفيذ السكربت.
  • جرب الان

العنصر <noscript>:

يُستخدم هذا العنصر لعرض محتوى بديل في حالة تعطيل JavaScript في متصفح المستخدم.

HTML
<noscript>
<p>يبدو أن JavaScript مُعطّل في متصفحك. يرجى تمكينه للاستمتاع بتجربة كاملة.</p>
</noscript>

باختصار، العنصر <script> هو أداة قوية لإضافة تفاعلية وديناميكية إلى صفحات الويب باستخدام JavaScript أو لغات برمجة أخرى من جانب العميل. استخدام الملفات الخارجية والخصائص async و defer يُساعد على تحسين أداء تحميل الصفحة.