كيفية ربط HTML مع JavaScript

ربط HTML مع JavaScript

يعد ربط HTML بجافا سكريبت جانبًا مهمًا من جوانب تطوير الويب ، حيث يتيح للمطورين إنشاء مواقع ويب ديناميكية وتفاعلية. لربط HTML بجافا سكريبت ، تحتاج إلى فهم أساسيات HTML و JavaScript. تشرح هذه المقالة كيفية ربط HTML بجافا سكريبت بطريقة بسيطة ومباشرة.

HTML هي لغة الترميز المستخدمة لإنشاء صفحات الويب ، وهي تحدد بنية موقع الويب. يتكون من عناصر ، مثل العناوين والفقرات والصور والروابط ، يتم استخدامها لعرض المحتوى على صفحة الويب. يمكن تصميم عناصر HTML باستخدام CSS ، ويمكن جعلها ديناميكية وتفاعلية باستخدام JavaScript.

JavaScript هي لغة برمجة نصية تُستخدم لإضافة ميزات ديناميكية وتفاعلية إلى مواقع الويب. إنها لغة مفسرة عالية المستوى يسهل تعلمها ويمكن استخدامها مع HTML و CSS لإنشاء صفحات ويب أكثر تفاعلية وجاذبية. يمكن استخدام JavaScript لمعالجة محتوى وأسلوب صفحة HTML ، بالإضافة إلى الاستجابة لأحداث المستخدم ، مثل النقرات والحوارات وضغطات المفاتيح.

كيفية إضافة JavaScript إلى HTML

الخطوة الأولى في ربط HTML بجافا سكريبت هي إضافة عنصر HTML إلى الصفحة. يمكن القيام بذلك باستخدام الكود التالي:

اقرأ المزيد: كيفية ربط ملف CSS بملف HTML

<div id="myDiv">This is my div</div>

تُستخدم سمة id لمنح العنصر معرفًا فريدًا ، ويمكن استخدام هذا المعرف لتحديد العنصر باستخدام JavaScript.

الخطوة التالية هي إضافة ملف JavaScript إلى الصفحة ، ويمكن القيام بذلك باستخدام الكود التالي:

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

تحدد السمة src موقع ملف JavaScript ، ويجب أن يكون عنوان URL نسبيًا أو مطلقًا.

بمجرد إضافة عنصر HTML وملف JavaScript إلى الصفحة ، يمكنك ربط عنصر HTML بجافا سكريبت باستخدام الكود التالي:

document.getElementById("myDiv").innerHTML = "This is my updated div";

تُستخدم الوظيفة document.getElementById لتحديد عنصر HTML بالمعرف المحدد ، ويتم استخدام خاصية innerHTML لتغيير محتوى العنصر.

يمكنك أيضًا ربط HTML بجافا سكريبت من خلال الاستجابة لأحداث المستخدم

مثل النقرات والحوارات وضغطات المفاتيح. على سبيل المثال ، تقوم الكود التالي بربط زر HTML بجافا سكريبت:

<button id="myButton">Click me</button>

document.getElementById("myButton").addEventListener("click", function() {

  تنبيه ("تم النقر على الزر");

});

بالإضافة إلى ربط HTML بـ JavaScript ، يمكنك أيضًا ربط JavaScript بـ HTML باستخدام سمات البيانات. سمات البيانات هي سمات مخصصة يمكن إضافتها إلى عناصر HTML ، ويمكن استخدامها لتخزين البيانات التي يمكن الوصول إليها باستخدام JavaScript. على سبيل المثال ، تربط التعليمات البرمجية التالية متغير JavaScript بعنصر HTML باستخدام سمة البيانات:

<div id="myDiv" data-myVariable="Hello World">This is my div</div>
var myVariable = document.getElementById("myDiv").dataset.myVariable;
تنبيه(متغير);

تُستخدم خاصية مجموعة البيانات للوصول إلى سمات البيانات لعنصر HTML ، ويتم استخدام متغير myVariable لتخزين قيمة سمة data-myVariable.