التفاعل مع المستخدم في JavaScript: alert و prompt و confirm مع أمثلة عملية

أحياناً تحتاج طريقة سريعة للتواصل مع المستخدم: رسالة تنبيه، سؤال بسيط، أو طلب إدخال. JavaScript توفر 3 أدوات مباشرة لذلك: alert وprompt وconfirm.

هذا الدرس مهم لفهم أساس التفاعل قبل بناء نوافذ واجهة متقدمة. ستتعلم أيضاً الأخطاء الشائعة مثل التعامل الخاطئ مع null أو النصوص كأنها أرقام.

1) alert() لعرض رسالة سريعة

alert("مرحباً بك في دورة JavaScript");

ماذا يفعل هذا الكود؟ يعرض نافذة تنبيه تحتوي على رسالة فقط.

النتيجة المتوقعة: يتوقف التنفيذ مؤقتاً حتى يغلق المستخدم النافذة.

خطأ شائع: الإكثار من alert في تجربة المستخدم فيصبح الموقع مزعجاً.

2) prompt() لطلب إدخال من المستخدم

const name = prompt("ما اسمك؟");
console.log(name);

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

النتيجة المتوقعة: إما نص (String) أو null عند الضغط على Cancel.

خطأ شائع: استخدام القيمة مباشرة بدون فحص null.

3) confirm() لقرار نعم/لا

const isSure = confirm("هل تريد حذف العنصر؟");
console.log(isSure); // true أو false

ماذا يفعل هذا الكود؟ يسأل المستخدم تأكيداً ويعيد قيمة منطقية.

النتيجة المتوقعة: true عند الموافقة وfalse عند الإلغاء.

خطأ شائع: عدم استخدام النتيجة داخل شرط، فيُحذف العنصر مهما اختار المستخدم.

مثال عملي: رسالة ترحيب آمنة

const userName = prompt("اكتب اسمك:");

if (userName === null || userName.trim() === "") {
  alert("لم يتم إدخال اسم.");
} else {
  alert(`أهلاً ${userName} 👋`);
}

ماذا يفعل هذا الكود؟ يتحقق من الإلغاء أو الإدخال الفارغ قبل الترحيب.

النتيجة المتوقعة: سلوك واضح بدون أخطاء عند جميع الحالات.

خطأ شائع: استدعاء trim() مباشرة قبل التأكد أن القيمة ليست null.

مثال عملي: prompt يعيد نصاً وليس رقماً

const n1 = prompt("أدخل الرقم الأول");
const n2 = prompt("أدخل الرقم الثاني");

const sum = Number(n1) + Number(n2);
alert(`المجموع = ${sum}`);

ماذا يفعل هذا الكود؟ يحوّل النصوص إلى أرقام قبل الجمع.

النتيجة المتوقعة: جمع حسابي صحيح بدل دمج نصي.

خطأ شائع: كتابة n1 + n2 مباشرة، فتكون النتيجة مثل "10" + "5" = "105".

مثال عملي: تأكيد قبل تنفيذ عملية حساسة

const agreed = confirm("هل تريد متابعة عملية الدفع؟");

if (agreed) {
  alert("تمت المتابعة");
} else {
  alert("تم الإلغاء");
}

ماذا يفعل هذا الكود؟ يجعل القرار بيد المستخدم قبل خطوة مهمة.

النتيجة المتوقعة: لا يتم التنفيذ إلا بعد موافقة واضحة.

خطأ شائع: عكس الشرط بالخطأ مما يؤدي لسلوك غير متوقع.

Story قصيرة: لماذا ظهر "null" للمستخدم؟

متعلم عرض نتيجة prompt مباشرة في رسالة ترحيب. عندما ضغط المستخدم Cancel ظهرت له "Hello null". بعد إضافة فحص null قبل العرض، اختفت المشكلة وأصبحت التجربة احترافية.

جدول سريع

Checklist سريعة

• أعرف متى أستخدم alert وprompt وconfirm.
• أتعامل مع حالة null بعد prompt.
• أحوّل النصوص إلى أرقام قبل العمليات الحسابية.
• أستخدم confirm قبل العمليات الحساسة.

الأسئلة الشائعة — FAQ

ما الفرق بين alert و prompt و confirm؟

alert لرسالة فقط، prompt لإدخال نص، confirm للتأكيد بقيمة منطقية.

ماذا تعيد prompt عند Cancel؟

تعيد null، لذلك افحص القيمة قبل استخدام أي دوال نصية عليها.

هل هذه الدوال مناسبة للإنتاج؟

ليست الأفضل لتجربة مستخدم حديثة، لكنها ممتازة للتعلم وبناء الفهم الأساسي.

للمراجعة: DOM Events. للمتابعة: Input Validation.