| الدالة | الوظيفة | يظهر للمستخدم؟ |
|---|---|---|
| console.log() | طباعة في وحدة التحكم للتصحيح | لا |
| alert() | نافذة تنبيه منبثقة | نعم |
| prompt() | طلب إدخال نص من المستخدم | نعم |
| confirm() | نافذة موافقة/إلغاء | نعم |
| innerHTML / textContent | تعديل محتوى الصفحة مباشرة | نعم |
تمتلك جافاسكريبت عدة طرق لعرض المخرجات (Output)، وكل طريقة لها استخدامها المناسب. الطريقة الأولى والأكثر شيوعاً أثناء التطوير هي console.log() التي تطبع القيم في وحدة تحكم المطور — لا تظهر للمستخدم العادي أبداً، وهي أداة التصحيح (Debugging) الأساسية لكل مطور.
الطريقة الثانية هي alert() التي تعرض نافذة منبثقة (Popup) تحتوي رسالة، وتوقف تنفيذ الصفحة حتى يضغط المستخدم "موافق" — مفيدة للتنبيهات البسيطة لكن مزعجة إذا أُسيء استخدامها. أما prompt() فتعرض نافذة تطلب من المستخدم إدخال قيمة وتُعيدها كنص، وconfirm() تعرض نافذة بخياري "موافق" و"إلغاء" وتُعيد true أو false.
الطريقة الأكثر استخداماً في التطبيقات الحقيقية هي التعديل المباشر على محتوى الصفحة عبر خصائص الـ DOM مثل innerHTML أو textContent، وهذا يسمح بعرض البيانات داخل الصفحة نفسها بشكل احترافي بدل النوافذ المنبثقة المزعجة.
أخيراً، document.write() هي طريقة قديمة لكتابة محتوى مباشرة في الصفحة أثناء التحميل، لكنها غير مستحسمة اليوم لأنها قد تمحو محتوى الصفحة بالكامل إذا استُخدمت بعد اكتمال التحميل — يُفضل تجنبها في المشاريع الحديثة.
| 1 | console.log("رسالة في الكونسول"); // للمطورين فقط |
| 2 | alert("رسالة منبثقة"); // نافذة تنبيه |
| 3 | const اسم = prompt("ما اسمك؟"); // طلب إدخال |
| 4 | const تأكيد = confirm("متأكد؟"); // موافقة أو إلغاء |
| 5 | document.getElementById("id").textContent = "نص جديد"; // في الصفحة |
مثال 1: أنواع مخرجات console
| 1 | // أنواع console المختلفة |
| 2 | console.log("رسالة عادية"); |
| 3 | console.warn("تحذير!"); |
| 4 | console.error("خطأ!"); |
| 5 | console.table([{ الاسم: "أحمد", العمر: 25 }]); |
مثال 2: التفاعل مع المستخدم وعرض النتيجة في الصفحة
| 1 | // عرض بيانات داخل الصفحة (الطريقة الاحترافية) |
| 2 | const الاسم = prompt("أدخل اسمك:"); |
| 3 | if (الاسم) { |
| 4 | document.getElementById("greeting").textContent = "مرحباً " + الاسم; |
| 5 | } |