الكورس

Advertisements

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> في اسفل الصفحة ، قبل قفلة وسم الـ ؛ لأنه عندما يصادف المتصفح نصًا برمجيًا، فإنه يتوقف مؤقتًا عن عرض بقية الصفحة حتى يحلل النص البرمجي الذي قد يؤثر بشكل كبير أداء موقعك (performance).


Advertisements

 

استدعاء ملف 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” لمعرفة مدى فهمك وإستيعابك للمعلومات السابقة، ولتثبيت المعلومات.





الإبلاغ عن خطأ

×

إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:

[email protected]

شكرًا لك على مساعدتك لنا!

Advertisements