مدخل إلى لغة JavaScript: الأحداث، الدوال، والتحقق التفاعلي من الحقول
تُضفي لغة جافاسكريبت الحيوية والتفاعلية الذكية على صفحات الويب، فتحولها من صفحات ساكنة صامتة إلى تطبيقات تفاعلية ديناميكية تستجيب لنقرات وتصرفات المستخدم فورياً. في هذا الدرس، نتعرف على كيفية تضمين أكواد جافاسكريبت عبر الوسم script، واستخدام الدوال البرمجية لمعالجة أحداث النقر والإرسال، وتطبيق مهارات التحقق من صحة مدخلات النماذج (Validation) قبل اعتمادها برمجياً.
1. مفهوم لغة جافاسكريبت وموقعها في تطوير الويب
لغة JavaScript هي لغة برمجة نصية خفيفة عالية المستوى تُنفذ على جهاز العميل (Client-Side) عبر محرك الجافاسكريبت المدمج في متصفح الويب. تمكننا جافاسكريبت من التفاعل مع عناصر نموذج كائن المستند DOM (Document Object Model) وتعديل النصوص والألوان ديناميكياً.
طريقة تضمين كود جافاسكريبت :
<script>
function welcomeUser() {
alert("أهلاً بك يا بطل في منصة الأمين التعليمية !");
}
</script>
2. الأحداث الشائعة ومعالجاتها (Events & Event Handlers)
الحدث (Event) هو أي فعل أو حركة يقوم بها المستخدم داخل الصفحة يتفاعل معها المتصفح :
| الحدث (Event) | متى يقع الحدث ؟ | المثال البرمجي للتطبيق |
|---|---|---|
onclick |
عند قيام المستخدم بالنقر بزر الفأرة على زر أو عنصر. | <button onclick="validateData()">تسجيل</button> |
onsubmit |
عند محاولة إرسال بيانات النموذج التفاعلي. | <form onsubmit="return checkForm()"> |
onload |
فور اكتمال تحميل صفحة الويب في المتصفح. | <body onload="initPage()"> |
onchange |
عند تغيير القيمة داخل حقل الإدخال أو القائمة المنسدلة. | <input type="text" onchange="formatName()"> |
3. دالة التحقق من صحة حقول النماذج (Form Validation)
يتم الوصول إلى عناصر الصفحة وقيم الحقول باستخدام الأمر القياسي document.getElementById() :
function validateForm() {
var username = document.getElementById("txtName").value;
var pass = document.getElementById("txtPass").value;
if (username == "") {
alert("تنبيه: يجب إدخال اسم المستخدم أولاً !");
return false; // يمنع إرسال النموذج
}
if (pass.length < 8) {
alert("تنبيه: يجب ألا تقل كلمة المرور عن 8 أحرف وأرقام !");
return false;
}
return true; // يسمح بإرسال النموذج بنجاح
}
أنشطة تطبيقية على جافاسكريبت
alert("نص الرسالة"); التي توقف نشاط المتصفح مؤقتاً وتعرض صندوق حوار منبثق للمستخدم ليضغط موافق.
value عبر الأمر البرمجي: document.getElementById("txtAge").value.
اضغط على أي بطاقة لاكتشاف المعنى الدقيق، واضغط على أيقونة الصوت للاستماع للنطق:
أكملت دراسة هذا الدرس؟
احفظ إنجازك الآن لإضافة 5 نقاط تميز إلى رصيدك وتسجيل الدرس في لوحة إحصائياتك!