مقدمة في JavaScript
JavaScript هي لغة برمجة تُستخدم لإضافة التفاعل على صفحات الويب. باستخدام JavaScript، يمكن للمستخدم التفاعل مع العناصر على الصفحة بشكل ديناميكي. على سبيل المثال، يمكن أن يُظهر لك JavaScript رسائل منبثقة (pop-up) عند الضغط على زر، أو يُعدل محتوى الصفحة بدون الحاجة لإعادة تحميلها.
كيف ندمج JavaScript مع HTML؟
- داخل صفحة HTML:
يمكن إضافة أكواد JavaScript داخل الصفحة باستخدام وسم<script>. عادةً ما يتم وضعه في<head>أو<body>في الصفحة. لكن يفضل إضافته قبل نهاية وسم</body>لتحسين الأداء. مثال:<html> <head> <title>التفاعل مع JavaScript</title> </head> <body> <h1>مرحبًا بالعالم!</h1> <button onclick="myFunction()">اضغط هنا</button> <script> function myFunction() { alert("تم الضغط على الزر!"); } </script> </body> </html>- في المثال السابق، عند الضغط على الزر، يتم استدعاء دالة
myFunction()، والتي تعرض رسالة منبثقة (alert).
- في المثال السابق، عند الضغط على الزر، يتم استدعاء دالة
- استخدام ملف خارجي:
يمكن أيضًا كتابة JavaScript في ملف خارجي ومن ثم ربطه بصفحة HTML باستخدام وسم<script src="file.js"></script>.- أولًا، أنشئ ملف JavaScript خارجي مثل
script.js:
function myFunction() { alert("تم الضغط على الزر!"); }- ثم اربط الملف في صفحة HTML:
<html> <head> <title>التفاعل مع JavaScript</title> </head> <body> <h1>مرحبًا بالعالم!</h1> <button onclick="myFunction()">اضغط هنا</button> <script src="script.js"></script> </body> </html> - أولًا، أنشئ ملف JavaScript خارجي مثل
أحداث JavaScript:
JavaScript يعمل بشكل رئيسي عبر الأحداث (events). الأحداث هي أشياء تحدث في الصفحة، مثل:
- النقر على زر
- تغيير قيمة في حقل نصي
- تحميل الصفحة
onclick: يتم تفعيلها عند النقر على عنصر.onmouseover: يتم تفعيلها عندما يمر المستخدم فوق العنصر.onchange: يتم تفعيلها عندما يتم تغيير قيمة عنصر (مثل حقل نصي أو قائمة منسدلة).
مثال:
<button onclick="changeText()">اضغط هنا لتغيير النص</button>
<p id="demo">النص الأصلي.</p>
<script>
function changeText() {
document.getElementById("demo").innerHTML = "تم تغيير النص!";
}
</script>
في المثال ده، عند الضغط على الزر، سيتم تغيير النص داخل العنصر <p>.
التعامل مع العناصر باستخدام JavaScript:
JavaScript يتيح لك التحكم في العناصر داخل الصفحة عبر DOM (Document Object Model). باستخدام DOM، يمكنك تغيير أو إضافة أو حذف عناصر من الصفحة.
- الاختيار والتعديل على العناصر:
document.getElementById("id"): لاختيار عنصر عن طريق الـid.document.getElementsByClassName("class"): لاختيار العناصر حسب الـclass.document.querySelector("selector"): لاختيار العناصر باستخدام أي selector CSS.
مثال:
<button onclick="changeBackgroundColor()">اضغط هنا لتغيير الخلفية</button>
<script>
function changeBackgroundColor() {
document.body.style.backgroundColor = "lightblue";
}
</script>
في المثال ده، عند الضغط على الزر، سيتم تغيير خلفية الصفحة إلى اللون الأزرق الفاتح.
- إضافة محتوى إلى الصفحة:
- يمكن أيضًا استخدام JavaScript لإضافة محتوى جديد إلى الصفحة مثل النصوص أو الصور.
<button onclick="addElement()">إضافة عنصر جديد</button> <script> function addElement() { var newElement = document.createElement("p"); newElement.innerHTML = "تم إضافة عنصر جديد!"; document.body.appendChild(newElement); } </script>في المثال ده، عند الضغط على الزر، سيتم إضافة فقرة جديدة إلى الصفحة.
التفاعل مع المستخدم:
يمكنك التفاعل مع المستخدم عبر النوافذ المنبثقة أو نوافذ الإدخال.
- النوافذ المنبثقة (
alert):- لعرض رسالة بسيطة للمستخدم.
alert("مرحبًا! هذه رسالة منبثقة."); - النوافذ التي تطلب إدخال من المستخدم (
prompt):- لطلب إدخال من المستخدم.
var userInput = prompt("من فضلك أدخل اسمك:"); alert("مرحبًا " + userInput); - النوافذ التي تطلب تأكيد (
confirm):- لطلب تأكيد من المستخدم.
var result = confirm("هل أنت متأكد من أنك تريد المتابعة؟"); if (result) { alert("تم التأكيد!"); } else { alert("تم الإلغاء."); }
التحقق من البيانات باستخدام JavaScript:
يمكنك استخدام JavaScript للتحقق من صحة البيانات التي يتم إدخالها في النماذج.
مثال:
<form onsubmit="return validateForm()">
<label for="email">البريد الإلكتروني:</label>
<input type="email" id="email" name="email">
<input type="submit" value="إرسال">
</form>
<script>
function validateForm() {
var email = document.getElementById("email").value;
if (email == "") {
alert("من فضلك أدخل بريدك الإلكتروني.");
return false;
}
return true;
}
</script>
في المثال ده، عند إرسال النموذج، يتم التحقق أولاً إذا كان حقل البريد الإلكتروني فارغًا. إذا كان فارغًا، تظهر رسالة منبثقة تطلب من المستخدم إدخال البريد الإلكتروني.
في الختام:
دلوقتي، أنت فهمت الأساسيات الخاصة بـ JavaScript وكيفية دمجها مع HTML لإضافة التفاعل للموقع. تعلمت كيفية التعامل مع الأحداث، والعناصر، والنوافذ المنبثقة، والتحقق من البيانات. باستخدام JavaScript، يمكنك إنشاء تجربة مستخدم غنية وديناميكية. لو عندك أي أسئلة أو محتاج مساعدة في شيء معين، أنا هنا للمساعدة!