ربط 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.