انتقل إلى محتوى الدرس

Writing JavaScript commands inside HTML elements كتابة أوامر جافا سكريبت بداخل عناصر HTML

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

1 صفوف تعليمية
جافا سكريبت
16,748 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

كتابة أوامر JavaScript بطريقة Inline:

  • طريقة Inline تعني كتابة أوامر JavaScript مباشرة داخل عناصر HTML باستخدام الأحداث (Events).
  • أشهر حدث يتم استخدامه هو `onclick`، وهو يحدث عندما يتفاعل المستخدم مع الصفحة (مثل النقر على زر).


تُكتب أوامر JavaScript هذه داخل خصائص (Attributes) أي عنصر في HTML، مثل `onclick`، وهذه الطريقة تُستخدم لتنفيذ الكود عند تفاعل المستخدم مع الصفحة. يتم كتابة أمر JavaScript داخل قيم هذه الخصائص.


التوضيح:

  • Inline JavaScript: يتم كتابة الكود مباشرة داخل عناصر HTML باستخدام أحداث مثل onclick.
  • مثال: عند كتابة الكود في onclick="alert('Hello!')"، سيتم تنفيذ الكود عند نقر المستخدم على العنصر الذي يحتوي على هذا الحدث.
كتابة أوامر جافا سكريبت بداخل عناصر HTML

No execution automatically

لا يتم التنفيذ تلقائيًا: لتنفيذ أوامر JavaScript، يجب أن تضغط على النص داخل العنوان الرئيسي `<h1>`، عندها ستقوم JavaScript بتنفيذ أمر `alert` مباشرة.

HTML
<h1 onclick="alert('JavaScript Inline On Click show alert.')">JavaScript</h1>