جافاسكربتالنوافذ المنبثقة
- مفهوم النوافذ المنبثقة
- إظهار نافذة تنبيه
- إظهار نافذة لأخذ موافقة
- إظهار نافذة لإدخال قيمة
- النزول على سطر جديد في النافذة المنبثقة
مفهوم النوافذ المنبثقة
النوافذ المنبثقة ( Dialog Boxes ) هي نوافذ جاهزة في جافاسكربت يمكن استخدامها لإظهار رسالة تنبيه للمستخدم، لأخذ موافقته على أمر ما، أو لجعله يدخل قيمة ما.
في هذا الدرس سنتعلم كيفية التعامل مع جميع أنواع النوافذ المنبثقة.
إظهار نافذة تنبيه
يمكنك استخدام الدالة alert() أو window.alert() لإظهار نافذة منبثقة فيها رسالة نصية للمستخدم.
عند استدعائها يجب تمرير النص الذي نريد إظهاره في النافذة بين أقواسها.
في المثال التالي، عند النقر على الزر سيتم عرض نافذة تنبيه.
مثال
عندما يتم إظهار نافذة تنبيه فإن مفسر كود الجافاسكربت يتنظر أن يتم إغلاق النافذة حتى يتابع تنفيذ باقي الأوامر الموضوعة بعدها.
إظهار نافذة لأخذ موافقة
يمكنك استخدام الدالة confirm() أو window.confirm() لإظهار نافذة منبثقة تطلب فيها من المستخدم الموافقة على أمر ما.
عند استدعائها يجب تمرير النص الذي نريد إظهاره في النافذة بين أقواسها.
عندما يتم إغلاق هذه النافذة فهنا يوجد حالتين:
- المستخدم نقر على زر الموافقة و هنا سترجع القيمة true.
- المستخدم نقر على زر الرجوع و هنا سترجع القيمة false.
في المثال التالي، عند النقر على الزر سيتم عرض نافذة منبثقة لأخذ الموافقة من المستخدم.
و في حال نقر على زر الموافقة أو الرفض فإننا سنقوم بتخزين الإجابة التي إختارها في متغير و من ثم سنقوم بعرضها في الصفحة.
مثال
إظهار نافذة لإدخال قيمة
يمكنك استخدام الدالة prompt() أو window.prompt() لإظهار نافذة منبثقة تطلب فيها من المستخدم إدخال قيمة ما.
عند استدعائها يجب أن نمرر لها بين أقواسها النص الذي سنخبره فيه بأن عليه إدخال قيمة، و يمكننا تمرير نص آخر لها ليكون القيمة الإفتراضية التي سيتم وضعها في مربع النص.
عندما يتم إغلاق هذه النافذة فهنا يوجد حالتين:
- المستخدم نقر على زر الموافقة و هنا سترجع القيمة التي أدخلها كنص.
- المستخدم نقر على زر الرجوع و هنا سترجع القيمة null.
في المثال التالي، عند النقر على الزر سيتم عرض نافذة منبثقة تطلب من المستخدم إدخال نص يمثل رأيه، و سيتم وضع النص 'I like it!' كنص إفتراضي و الذي يمكن للمستخدم أن يغيره.
و في حال نقر على زر الموافقة أو الرفض فإننا سنقوم بتخزين ما وصلنا من المستخدم في متغير و من ثم سنقوم بعرضه في الصفحة.
مثال
إستقبال قيمة عددية من المستخدم
إفتراضياً، أي قيمة يدخلها المستخدم في النافذة المنبثقة يتم إرجاعها على شكل نص.
إذاً حتى لو قام بإدخال العدد 10 فيها فإنه سيتم إرجاعها هكذا '10'.
هذا الأمر ليس بمشكلة لأن جافاسكربت توفر الكثير من الدوال التي يمكن استخدامها لتحويل أنواع القيم.
في المثال التالي، طلبنا من المستخدم إدخال عدد صحيح و من ثم قمنا بتحويل ما يدخله إلى عدد صحيح.
مثال
الدوال المتوفرة في جافاسكربت و التي يمكن استخدامها لتحويل أنواع البيانات شرحناها كلها في درس التعامل مع الأعداد
النزول على سطر جديد في النافذة المنبثقة
بغض النظر عن نوع النافذة المنبثقة التي سيتم إظهارها للمستخدم، فإنه يمكن استخدام الرمز '\n' لجعل النص التالي في النافذة يظهر على سطر جديد.
في المثال التالي، عند النقر على الزر سيتم عرض نافذة تنبيه تتألف من سطرين.