❮
Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Learn Typing
❯
الدرس التالي❯ ❮الدرس السابق

جافاسكربتالنوافذ المنبثقة

  • مفهوم النوافذ المنبثقة
  • إظهار نافذة تنبيه
  • إظهار نافذة لأخذ موافقة
  • إظهار نافذة لإدخال قيمة
  • النزول على سطر جديد في النافذة المنبثقة

مفهوم النوافذ المنبثقة

النوافذ المنبثقة ( Dialog Boxes ) هي نوافذ جاهزة في جافاسكربت يمكن استخدامها لإظهار رسالة تنبيه للمستخدم، لأخذ موافقته على أمر ما، أو لجعله يدخل قيمة ما.

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

إظهار نافذة تنبيه

يمكنك استخدام الدالة alert() أو window.alert() لإظهار نافذة منبثقة فيها رسالة نصية للمستخدم.
عند استدعائها يجب تمرير النص الذي نريد إظهاره في النافذة بين أقواسها.

في المثال التالي، عند النقر على الزر سيتم عرض نافذة تنبيه.

مثال

// btn في متغير إسمه btn يساوي id هنا قمنا بتخزين العنصر الذي يملك
var btn = document.getElementById('myBtn');
// btn هنا حددنا أنه سيتم إظهار نافذة تنبيه منبثقة عند النقر على العنصر الذي يمثله المتغير
btn.addEventListener('click', () => {
alert('Click ok to continue');
});
// btn في متغير إسمه btn يساوي id هنا قمنا بتخزين العنصر الذي يملك var btn = document.getElementById('myBtn'); // btn هنا حددنا أنه سيتم إظهار نافذة تنبيه منبثقة عند النقر على العنصر الذي يمثله المتغير btn.addEventListener('click', () => { alert('Click ok to continue'); });
جرب الكود

عندما يتم إظهار نافذة تنبيه فإن مفسر كود الجافاسكربت يتنظر أن يتم إغلاق النافذة حتى يتابع تنفيذ باقي الأوامر الموضوعة بعدها.

إظهار نافذة لأخذ موافقة

يمكنك استخدام الدالة confirm() أو window.confirm() لإظهار نافذة منبثقة تطلب فيها من المستخدم الموافقة على أمر ما.
عند استدعائها يجب تمرير النص الذي نريد إظهاره في النافذة بين أقواسها.

عندما يتم إغلاق هذه النافذة فهنا يوجد حالتين:

  • المستخدم نقر على زر الموافقة و هنا سترجع القيمة true.
  • المستخدم نقر على زر الرجوع و هنا سترجع القيمة false.

في المثال التالي، عند النقر على الزر سيتم عرض نافذة منبثقة لأخذ الموافقة من المستخدم.
و في حال نقر على زر الموافقة أو الرفض فإننا سنقوم بتخزين الإجابة التي إختارها في متغير و من ثم سنقوم بعرضها في الصفحة.

مثال

// btn في متغير إسمه btn يساوي id هنا قمنا بتخزين العنصر الذي يملك
var btn = document.getElementById('btn');
// result في متغير إسمه result يساوي id هنا قمنا بتخزين العنصر الذي يملك
var result = document.getElementById('result');
// btn هنا قمنا بتحديد ما سيحدث عند النقر على الزر الذي يمثله المتغير
btn.addEventListener('click', () => {
// choice أولاً سيتم إظهار نافذة للموافقة و عند إغلاقها سيتم تخزين القرار في المتغير
let choice = confirm('Are you sure?');
// result سيتم وضع نص يشير إلى الموافقة في العنصر true تساوي result إذا كانت قيمة
if(choice) {
result.innerHTML = 'You clicked OK';
}
// result سيتم وضع نص يشير إلى الرفض في العنصر false تساوي result إذا كانت قيمة
else {
result.innerHTML = 'You clicked CANCEL';
}
});
// btn في متغير إسمه btn يساوي id هنا قمنا بتخزين العنصر الذي يملك var btn = document.getElementById('btn'); // result في متغير إسمه result يساوي id هنا قمنا بتخزين العنصر الذي يملك var result = document.getElementById('result'); // btn هنا قمنا بتحديد ما سيحدث عند النقر على الزر الذي يمثله المتغير btn.addEventListener('click', () => { // choice أولاً سيتم إظهار نافذة للموافقة و عند إغلاقها سيتم تخزين القرار في المتغير let choice = confirm('Are you sure?'); // result سيتم وضع نص يشير إلى الموافقة في العنصر true تساوي result إذا كانت قيمة if(choice) { result.innerHTML = 'You clicked OK'; } // result سيتم وضع نص يشير إلى الرفض في العنصر false تساوي result إذا كانت قيمة else { result.innerHTML = 'You clicked CANCEL'; } });
جرب الكود

إظهار نافذة لإدخال قيمة

يمكنك استخدام الدالة prompt() أو window.prompt() لإظهار نافذة منبثقة تطلب فيها من المستخدم إدخال قيمة ما.
عند استدعائها يجب أن نمرر لها بين أقواسها النص الذي سنخبره فيه بأن عليه إدخال قيمة، و يمكننا تمرير نص آخر لها ليكون القيمة الإفتراضية التي سيتم وضعها في مربع النص.

عندما يتم إغلاق هذه النافذة فهنا يوجد حالتين:

  • المستخدم نقر على زر الموافقة و هنا سترجع القيمة التي أدخلها كنص.
  • المستخدم نقر على زر الرجوع و هنا سترجع القيمة null.

في المثال التالي، عند النقر على الزر سيتم عرض نافذة منبثقة تطلب من المستخدم إدخال نص يمثل رأيه، و سيتم وضع النص 'I like it!' كنص إفتراضي و الذي يمكن للمستخدم أن يغيره.
و في حال نقر على زر الموافقة أو الرفض فإننا سنقوم بتخزين ما وصلنا من المستخدم في متغير و من ثم سنقوم بعرضه في الصفحة.

مثال

// btn في متغير إسمه btn يساوي id هنا قمنا بتخزين العنصر الذي يملك
var btn = document.getElementById('btn');
// result في متغير إسمه result يساوي id هنا قمنا بتخزين العنصر الذي يملك
var result = document.getElementById('result');
// btn هنا قمنا بتحديد ما سيحدث عند النقر على الزر الذي يمثله المتغير
btn.addEventListener('click', () => {
// text أولاً سيتم إظهار نافذة لإدخال قيمة و عند إغلاقها سيتم تخزين القيمة في المتغير
let text = prompt('Leave a review', 'I like it!');
// result فهذا يعني أنه نقر على زر الرجوع و سيتم وضع نص يشير لذلك في العنصر null تساوي text إذا كانت قيمة
if(text == null) {
result.innerHTML = 'You clicked CANCEL';
}
// result عبارة عن نص فارغ فهذ يعني أنه نقر على زر الموافقة و لكنه لم يدخل أي قيمة و سيتم وضع نص يشير لذلك في العنصر text إذا كانت قيمة
else if(text == '') {
result.innerHTML = 'You clicked OK, but you did not enter any text.';
}
// result إذا لم يتحقق أي شرط سابق فهذا يعني أن المستخدم قام بإدخال قيمة و سيتم عرضها في العنصر
else {
result.innerHTML = text;
}
});
// btn في متغير إسمه btn يساوي id هنا قمنا بتخزين العنصر الذي يملك var btn = document.getElementById('btn'); // result في متغير إسمه result يساوي id هنا قمنا بتخزين العنصر الذي يملك var result = document.getElementById('result'); // btn هنا قمنا بتحديد ما سيحدث عند النقر على الزر الذي يمثله المتغير btn.addEventListener('click', () => { // text أولاً سيتم إظهار نافذة لإدخال قيمة و عند إغلاقها سيتم تخزين القيمة في المتغير let text = prompt('Leave a review', 'I like it!'); // result فهذا يعني أنه نقر على زر الرجوع و سيتم وضع نص يشير لذلك في العنصر null تساوي text إذا كانت قيمة if(text == null) { result.innerHTML = 'You clicked CANCEL'; } // result عبارة عن نص فارغ فهذ يعني أنه نقر على زر الموافقة و لكنه لم يدخل أي قيمة و سيتم وضع نص يشير لذلك في العنصر text إذا كانت قيمة else if(text == '') { result.innerHTML = 'You clicked OK, but you did not enter any text.'; } // result إذا لم يتحقق أي شرط سابق فهذا يعني أن المستخدم قام بإدخال قيمة و سيتم عرضها في العنصر else { result.innerHTML = text; } });
جرب الكود

إستقبال قيمة عددية من المستخدم

إفتراضياً، أي قيمة يدخلها المستخدم في النافذة المنبثقة يتم إرجاعها على شكل نص.
إذاً حتى لو قام بإدخال العدد 10 فيها فإنه سيتم إرجاعها هكذا '10'.

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

في المثال التالي، طلبنا من المستخدم إدخال عدد صحيح و من ثم قمنا بتحويل ما يدخله إلى عدد صحيح.

مثال

// btn في متغير إسمه btn يساوي id هنا قمنا بتخزين العنصر الذي يملك
var btn = document.getElementById('btn');
// value في متغير إسمه value يساوي id هنا قمنا بتخزين العنصر الذي يملك
var value = document.getElementById('value');
// btn هنا قمنا بتحديد ما سيحدث عند النقر على الزر الذي يمثله المتغير
btn.addEventListener('click', () => {
// أولاً سيتم إظهار نافذة تطلب من المستخدم إدخال عدد و عند إغلاقها سيتم محاولة
// x تحويل ما أدخله المستخدم إلى عدد صحيح و من ثم سيتم تخزينه في المتغير
let x = parseInt(prompt('Enter a number:'));
// فهذا يعني أن القيمة التي أدخلها المستخدم لم تكن عددية و لهذا فشل تحويلها NaN تساوي x إذا كانت قيمة
if(isNaN(x)) {
// إلى قيمة عددية فشلت x يخبر المستخدم بأن عملية تحويل قيمة value هنا سيتم وضع في العنصر
value.innerHTML = 'Failed to convert X value to integer.';
}
// value إذا لم يتحقق الشرط السابق فهذا يعني أن المستخدم قام بإدخال قيمة عددية و سيتم عرضها في العنصر
else {
value.innerHTML = 'X contain an integer value = ' + x;
}
});
// btn في متغير إسمه btn يساوي id هنا قمنا بتخزين العنصر الذي يملك var btn = document.getElementById('btn'); // value في متغير إسمه value يساوي id هنا قمنا بتخزين العنصر الذي يملك var value = document.getElementById('value'); // btn هنا قمنا بتحديد ما سيحدث عند النقر على الزر الذي يمثله المتغير btn.addEventListener('click', () => { // أولاً سيتم إظهار نافذة تطلب من المستخدم إدخال عدد و عند إغلاقها سيتم محاولة // x تحويل ما أدخله المستخدم إلى عدد صحيح و من ثم سيتم تخزينه في المتغير let x = parseInt(prompt('Enter a number:')); // فهذا يعني أن القيمة التي أدخلها المستخدم لم تكن عددية و لهذا فشل تحويلها NaN تساوي x إذا كانت قيمة if(isNaN(x)) { // إلى قيمة عددية فشلت x يخبر المستخدم بأن عملية تحويل قيمة value هنا سيتم وضع في العنصر value.innerHTML = 'Failed to convert X value to integer.'; } // value إذا لم يتحقق الشرط السابق فهذا يعني أن المستخدم قام بإدخال قيمة عددية و سيتم عرضها في العنصر else { value.innerHTML = 'X contain an integer value = ' + x; } });
جرب الكود

الدوال المتوفرة في جافاسكربت و التي يمكن استخدامها لتحويل أنواع البيانات شرحناها كلها في درس التعامل مع الأعداد

النزول على سطر جديد في النافذة المنبثقة

بغض النظر عن نوع النافذة المنبثقة التي سيتم إظهارها للمستخدم، فإنه يمكن استخدام الرمز '\n' لجعل النص التالي في النافذة يظهر على سطر جديد.

في المثال التالي، عند النقر على الزر سيتم عرض نافذة تنبيه تتألف من سطرين.

مثال

// btn في متغير إسمه btn يساوي id هنا قمنا بتخزين العنصر الذي يملك
var btn = document.getElementById('myBtn');
// btn هنا حددنا أنه سيتم إظهار نافذة تنبيه منبثقة عند النقر على العنصر الذي يمثله المتغير
// الموضوع في النص، يجعل مفسر الكود يفهم أنه يجب عرض المحتوى التالي بعده على سطر جديد \n الرمز
btn.addEventListener('click', () => {
alert('First Line.\nSecond Line.');
});
// btn في متغير إسمه btn يساوي id هنا قمنا بتخزين العنصر الذي يملك var btn = document.getElementById('myBtn'); // btn هنا حددنا أنه سيتم إظهار نافذة تنبيه منبثقة عند النقر على العنصر الذي يمثله المتغير // الموضوع في النص، يجعل مفسر الكود يفهم أنه يجب عرض المحتوى التالي بعده على سطر جديد \n الرمز btn.addEventListener('click', () => { alert('First Line.\nSecond Line.'); });
جرب الكود
الدرس التالي❯ ❮الدرس السابق