القائمة الرئيسية

التفاعل والتحقق من صحة البيانات باستخدام جافاسكريبت

درس تفاعلي متكامل يضم 5 محطات تعليمية ومشغل صوتي ناطق - التفاعل والتحقق من صحة البيانات باستخدام جافاسكريبت

28 مشاهدة آخر تحديث: 18 أكتوبر 2026
المحطة 1 من 5 فكّر واستعد: انطلاقة التعلم والأهداف
الصف الثاني الثانوي - حاسب وبرمجة الوحدة الثانية: تصميم وتطوير مواقع الويب التفاعلية

مدخل إلى لغة 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.

اضغط على أي بطاقة لاكتشاف المعنى الدقيق، واضغط على أيقونة الصوت للاستماع للنطق:

JavaScript
اضغط لاكتشاف الدلالة والشرح 👆
لغة جافاسكريبت النصية
💡 إضاءة وتوضيح: لغة برمجة تفاعلية تنفذ من جانب المتصفح العميل
DOM
اضغط لاكتشاف الدلالة والشرح 👆
نموذج كائن المستند
💡 إضاءة وتوضيح: Document Object Model تمثيل برمجي شجري لعناصر الصفحة
Event
اضغط لاكتشاف الدلالة والشرح 👆
الحدث التفاعلي
💡 إضاءة وتوضيح: فعل يصدر عن المستخدم كنقر الفأرة أو الضغط على لوحة المفاتيح
Onclick
اضغط لاكتشاف الدلالة والشرح 👆
معالج حدث النقر بالفأرة
💡 إضاءة وتوضيح: خاصية استدعاء دالة برمجية عند نقر العنصر
Onsubmit
اضغط لاكتشاف الدلالة والشرح 👆
معالج حدث إرسال النموذج
💡 إضاءة وتوضيح: خاصية التحقق من البيانات قبل ترحيل النموذج للخادم
Function
اضغط لاكتشاف الدلالة والشرح 👆
الدالة البرمجية المستقلة
💡 إضاءة وتوضيح: كتلة برمجية محددة تؤدي مهمة معينة عند استدعائها
Alert
اضغط لاكتشاف الدلالة والشرح 👆
صندوق رسالة التنبيه المنبثقة
💡 إضاءة وتوضيح: دالة عرض رسالة تحذيرية للمستخدم على الشاشة
Validation
اضغط لاكتشاف الدلالة والشرح 👆
التحقق من صحة وسلامة البيانات
💡 إضاءة وتوضيح: عملية التأكد من مطابقة المدخلات للشروط والقواعد
Script Tag
اضغط لاكتشاف الدلالة والشرح 👆
وسم احتواء كود جافاسكريبت
💡 إضاءة وتوضيح: الوسم

أكملت دراسة هذا الدرس؟

احفظ إنجازك الآن لإضافة 5 نقاط تميز إلى رصيدك وتسجيل الدرس في لوحة إحصائياتك!