٢ يونيو ٢٠٢٠

Interaction: alert, prompt, confirm

بينما نستخدم المتصفح كبيئة تجريبية، تعال نرى بعض الدوال المستخدمة في التعامل مع المستخدم: alertو prompt و confirm.

alert

هذه رأيناها بالفعل. إنها تظهر رسالة وتنتظر من المستخدم أن يضغط على “OK”.

على سبيل المثال:

alert("Hello");

النافذة الصغيرة التي تحتوي على رسالة تدعى modal window. الكلمة “modal” تعني أن المستخدم لا يستطيع أن يتفاعل مع باقي الصفحة، مثل الضغط على أزرار أخرى، إلخ، حتى يتعامل مع هذه النافذة. في هذه الحالة – حتى يضغط على “OK”.

prompt

الدالة prompt تقبل معاملين اثنين:

result = prompt(title, [default]);

إنها تظهر نافذة مشروطة برسالة نصية و حقل إدخال للزائر و وأزرار OK/Cancel.

title
النص الذي يظهر في الزائر.
default
معامل ثاني إختياري، القيمة الأولية لحقل الإدخال.
The square brackets in syntax [...]

الأقواس المربعة حول default في الكود أعلاه يوضح أن المعامل إختياري، ليس مطلوب.

الزائر يستطيع كتابة أي شئ في حقل الإدخال ويضغط أوك. ثم نحصل على النص في النتيجة. أو يستطيع إلغاء الإدخال بالضغط على إلغاء أو الضغط على زرار Esc ، عندها سنحصل على null كresult.

إستدعاء prompt ترجع النص من حقل الإدخال أو null لو هذا الإدخال تم إلغاؤه.

على سبيل المثال:

let age = prompt('How old are you?', 100);

alert(`You are ${age} years old!`); // You are 100 years old!
In IE: always supply a default

المعامل الثاني إختياري، لكن إذا لم يتم إدخاله، انترنت اكسبلورر سيدخل النص "undefined" داخل حقل الإدخال.

جرب هذا الكود في متصفح إنترنت إكسبلورر وسترى:

let test = prompt("Test");

لذلك، ال prompts لكي تظهر بشكل جيد في انترنت اكسبلورر، ننصح دائما بتزويد المتصفح بالمعامل الثاني:

let test = prompt("Test", ''); // <-- for IE

confirm

الكود:

result = confirm(question);

الدالة confirm تظهر نافذة مشروطة ب سؤال و زرارين: OK and Cancel.

النتيجة هي true لو تم الضغط على زر أوك أوfalse لغير ذلك.

على سبيل المثال:

let isBoss = confirm("Are you the boss?");

alert( isBoss ); // true لو زر أوك تم الضغط عليه

Summary

غطينا 3 دوال خاصة بالمتصفح للتعامل مع الزوار:

alert
يظهر رسالة.
prompt
يظهر رسالة تسال المستخدم لإدخال نص. يتم إرجاع النص ، أو زر إلغاء أو زر Esc تم الضغط عليه، أو null.
confirm
تظهر رسالة وتنتظر المستخدم ليضغط على زر “OK” أو “Cancel”. ترجع true في حالة أوك و false في حالة Cancel/Esc.

كل هذه الطرق مشروطة: إنها توقف تنفيذ الكود ولا تسمح للزائر للتعامل مع باقي الصفحة حتى يتم صرف النافذة .

يوجد قيدان مشتركان لكل الطرق أعلاه :

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

هذا ثمن البساطة. هناك طرق أخرى تظهر نوافذ ألطف و أغنى في التعامل مع المستخدم، لكن لو “الأجراس و الصفارات” لا تهم كثيراً، هذه الطرق تعمل بشكل جيد.

مهمه

الأهمية: 4

قم بإنشاء صفحة ويب تسأل المستخدم لإدخال إسم ثم تظهره له.

قم بتشغيل العرض التوضيحي

JavaScript-code:

let name = prompt("What is your name?", "");
alert(name);

الصفحة كاملة:

<!DOCTYPE html>
<html>
<body>

  <script>
    'use strict';

    let name = prompt("What is your name?", "");
    alert(name);
  </script>

</body>
</html>
خريطة الدورة التعليمية

التعليقات

إقرأ هذا قبل أن تضع تعليقًا…
  • إذا كان لديك اقتراحات أو تريد تحسينًا - من فضلك من فضلك إفتح موضوعًا فى جيتهاب أو شارك بنفسك بدلًا من التعليقات.
  • إذا لم تستطع أن تفهم شيئّا فى المقال - وضّح ماهو.
  • إذا كنت تريد عرض كود استخدم عنصر <code> ، وللكثير من السطور استخدم <pre>، ولأكثر من 10 سطور استخدم (plnkr, JSBin, codepen…)