تضيف لغة جافاسكربت (JavaScript) لمسة من الديناميكية والتفاعلية على صفحات HTML. تخيل أن HTML هو هيكل الصفحة الأساسي، بينما جافاسكربت هي الروح التي تحركه.
علامة <script> في HTML
تستخدم علامة <script> في HTML لتعريف نص برمجي من جانب العميل (JavaScript).
يمكن لعنصر <script> أن يحتوي إما على أوامر برمجية أو أن يشير إلى ملف نصي خارجي من خلال الخاصية src.
من الاستخدامات الشائعة لـ JavaScript:
- معالجة الصور وتغييرها.
- التحقق من صحة المدخلات في الاستمارات.
- إجراء تغييرات ديناميكية على محتوى الصفحة.
لاستهداف عنصر معين في HTML، تستخدم JavaScript غالبًا طريقة document.getElementById().
مثال:
هذا المثال يكتب “Hello JavaScript!” داخل عنصر HTML ذي الخاصية id="demo" باستخدام JavaScript:
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
لمحة عن JavaScript
إليك بعض الأمثلة على ما يمكن أن تفعله JavaScript:
1. تغيير المحتوى:
يمكن لـ JavaScript تعديل محتوى صفحتك على الويب بشكل ديناميكي دون الحاجة إلى إعادة تحميلها بالكامل. تخيل لوحة أخبار تعلن عن أحدث الأخبار تلقائيًا، أو صفحة تسوق تعرض السعر بناءً على المنتجات المختارة.
مثال:
document.getElementById("demo").innerHTML = "Hello JavaScript!";
مثال: تغيير الأنماط باستخدام JavaScript
يمكن لـ JavaScript تغيير الأنماط الخاصة بعناصر HTML بشكل ديناميكي دون الحاجة إلى إعادة تحميل الصفحة بالكامل. تخيل موقعًا ويب يعرض منتجاتًا مختلفة، حيث يمكن للمستخدمين تغيير لون الخلفية أو حجم الخط لعناصر الصفحة بناءً على ذوقهم.
المثال:
document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";
مثال: تغيير السمات باستخدام JavaScript
يمكن لـ JavaScript تغيير سمات عناصر HTML بشكل ديناميكي دون الحاجة إلى إعادة تحميل الصفحة بالكامل. تخيل موقعًا ويب يعرض قائمة بالمنتجات، حيث يمكن للمستخدمين تحديد المنتجات المفضلة لديهم عن طريق تحديد مربعات الاختيار.
المثال:
document.getElementById("image").src = "picture.gif";
علامة <noscript> في HTML
تستخدم علامة <noscript> في HTML لتحديد محتوى بديل يتم عرضه للمستخدمين الذين قاموا بتعطيل نصوص JavaScript في متصفحاتهم أو لديهم متصفحات لا تدعم نصوص JavaScript.
المثال:
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
