اريد عند ادخال البريد الالكتروني تظهر رسالة alert ترحيباً بالمستخدم

الأمر سيتم من خلال جافاسكريبت عن طريق تحديد النموذج form من خلال querySelector للاستماع لحدث submit:

const form = document.querySelector('.news-col form');
const input = document.getElementById('input');

if (form && input) {
    form.addEventListener('submit', function(event) {
        event.preventDefault(); 
        const email = input.value.trim();
        if (email) {
            alert(`مرحباً بك في المنصة!\n${email}`);
            input.value = '';
        } else {
            alert('يرجى إدخال البريد الإلكتروني.');
        }
    });
}

ثم الحصول على القيمة الخاصة بالإيميل من خلال  input.value وعرضها في رسالة منبثقة عن طريق دالة alert الخاصة بذلك، وفي حال لم يقم بإدخال بريد نعرض رسالة يريجى إدخال البريد.

ايضا هل يمكنكم شرح الكود لي

بتاريخ 16 دقائق مضت قال Hxfhf Ucicic:

ايضا هل يمكنكم شرح الكود لي

بالتأكيد شرح الكود خطوة بخطوة للقيام بإظهار alert رسالة ترحيب عند حدوث حدث معين.

1. تحديد العناصر المراد التأكد وجلب المعلومات منها:

const form = document.querySelector('.news-col form'); 
const input = document.getElementById('input');

form: يحدد النموذج داخل عنصر يحتوي على الكلاس news-col.

input: يحدد حقل الإدخال الذي له id="input" (عادة لإدخال البريد الإلكتروني).

2. استخدام شرط if للتأكد من وجود العناصر:

if (form && input) {

يتأكد أن النموذج وحقل الإدخال موجودان فعلاً في الصفحة قبل تنفيذ باقي الكود.

3. التعامل مع إرسال النموذج:

form.addEventListener('submit', function(event) {

يضيف حدث عند الضغط على زر الإرسال (submit).

4. تجنب التحديث التلقائي الصفحة:

event.preventDefault();

يمنع التحديث التلقائي للصفحة عند الإرسال (لأنه بشكل افتراضي يعيد تحميل الصفحة).

5. جلب البريد الإلكتروني والتأكد منه:

const email = input.value.trim(); 
if (email) {

يأخذ قيمة حقل الإدخال ويزيل الفراغات.

إذا كانت القيمة غير فارغة:

6. عرض رسالة ترحيب:

alert(`مرحباً بك في المنصة!\n${email}`); 
input.value = '';

يظهر رسالة ترحيب مع البريد.

ثم يُفرغ حقل الإدخال.

7. إذا لم يدخل شيئًا:

alert('يرجى إدخال البريد الإلكتروني.');

يظهر رسالة تنبيه تطلب منه إدخال البريد.

ماهي  addEventListener & preventDefault

بتاريخ منذ ساعة مضت قال Hxfhf Ucicic:

ماهي  addEventListener & preventDefault

إن ال addEventListener هي دالة تستخدم لإضافة مستمع (Listener) للأحداث (events) مثل النقر على زر أو تحريك الفأرة أو الضغط على لوحة المفاتيح أو إرسال نموذج والأحداث الأخرى في جافاسكريبت.

وصيغتها :

element.addEventListener("event", function)

حيث تستقبل أولا إسم الحدث الذي تريد الإستماع له . والدالة التي تريد تنفيذها عن حدوث هذا الحدث.

const button = document.getElementById("btn");

button.addEventListener("click", function() {
  alert("تم النقر على الزر!");
});

فلاحظ في المثال السابق قمنا بالإستماع للحدث click ونريد تنفيذ الدالة وهي إظهار رسالة عند الضغط على الزر .

نأتي الآن إلى preventDefault وهى هي دالة تستخدم داخل الحدث (event) لمنع السلوك الافتراضي الذي يحدث تلقائيا عند تنفيذ هذا الحدث.

فمثلا عند الضغط على submit في النموذج form يتم أولا تنفيذ الحدث submit  وبعدها يتم إرسال النموذج وإعادة تحديث الصفحة . فماذا لو لم نرد إرسال النموذج مباشرة ؟ أى لو أردنا تنفيذ تحقيق للبيانات كما تريد أنت هنا ؟ هنا يجب إستخدام  preventDefault لمنع هذا السلوك الإفتراضي .

<form id="form">
  <input type="text" name="name" />
  <button type="submit">إرسال</button>
</form>

<script>
  const form = document.getElementById("form");

  form.addEventListener("submit", function(e) {
    e.preventDefault(); //يمنع إعادة تحميل الصفحة
    alert("تم إرسال النموذج!");
  });
</script>

يمكنك تجربة الكود السابقة مع حذف سطر  e.preventDefault() ستجد أن الصفحة يتم تحديثها عكس عند إضافة هذا السطر ومنع هذا الحدث الإفتراضي.

وإليك الدرس التالي لمزيد من التفاصيل :