آموزش جاوااسکریپت - تعامل با کاربر

از اونجایی که داریم از مرورگر برای اجرای کد‌های جاوااسکریپتمون استفاده میکنیم بیاین تا با چند تا از دستوراتی که میتونیم با کاربر تعامل داشته باشیم اشنا بشیم

تابع alert

این تابع رو توی آموزش های قبلی دیدیم این یک پیغام نشون میده و منتظر کاربر میمونه تا «OK» رو فشار بده

برای مثال:

alert(&quotHello&quot);

این پنجره‌ی کوچیک همراه با پیغام یک modal window هست کلمه «modal» به معنی اینه که بازدیدکننده نمیتونه با بقیه‌ی صفحه تعامل کنه، دکمه‌های دیگه رو بزنه و یا غیره، تا زمانی که با پنجره بازشده کارش تموم شده باشه. تو این مورد خاص -- تا زمانی که دکمه‌ی «OK» رو بزنه

تابع prompt

تابع prompt دو پارامتر داره:

result = prompt(title, default);

این یه modal window با یه متن نشون میده، که یه فیلد ورودی هم داخلش هست که کاربر میتونه توش یه متنی وارد کنه و دو تا دکمه OK و Cancel داره

title : پیغامی که به کاربر نشون داده میشه

default: پارامتری اختیاری که مقدار اولیه برای فیلد ورودی رو تنظیم میکنه

کاربر میتونه یه چیزی تایپ کنه توی فیلد ورودی prompt و دکمه OK رو بزنه بعدش ما به متنی که وارد کرده از طریق متغیر result میتونیم دسترسی داشته باشیم و اگه Cancel یا دکمه Esc رو بزنه متغیر result مقدارش null میشه

برای نمونه :

let age = prompt('How old are you?', 100);
alert(`You are ${age} years old!`); // You are 100 years old!

یک نکته برای اینترنت‌اکسپلورر (IE)

پارامتر دوم که اختیاری هست (همون مقدار اولیه) رو اگه وارد نکنین توی مرورگر اینترنت اکسپلورر توی فیلد ورودی "undefined" مینویسه

این کد رو توی اینترنت اکسپلورر اجرا کنین:

let test = prompt(&quotTest&quot);

اگه میخواین prompt هاتون درست کار کنن(هنوز کسی هست که از IE استفاده کنه!!) توی IE توصیه میکنیم که همیشه پارامتر دوم رو یه رشته خالی پاس بدین :

let test = prompt(&quotTest&quot, ''); // <-- for IE

تابع confirm

شکل نوشتنش اینجوریه:

 result = confirm(question);

تابع confirm یه modal window با یه سوال نشون میده و دو تا دکمه Ok و Cancel هم داره

نتیجه‌اش هم اگه کاربر Ok بزنه True میشه در غیر این صورت False

برای مثال:

let isBoss = confirm(&quotAre you the boss?&quot);
alert( isBoss ); // true if OK is pressed

خلاصه

توی این قسمت ما ۳ تا از تابع های مخصوص مرورگر که برای تعامل با کاربر هست رو توضیح دادیم:‌

• تابع alert : یک پیغام نشون کاربر میده
• تابع prompt : یک پیغام نشون کاربر میده و یک فیلد ورودی هم داره تا کاربر توش یک متن وارد کنه اگر Ok بزنه متن رو برمیگردونه توی نتیجه و در غیر این‌صورت null
• تابع confirm : یک پیغام نشون کاربر میده و تا زمانی که دکمه Ok یا Cancel رو نزنه صبر میکنه اگه Ok رو بزنه true و اگه Esc/Cancel رو بزنه false رو برمیگردونه

همه این توابع modal هستن، باعث متوقف شدن اجرای اسکریپت میشن و اجازه نمیدن که کاربر با بقیه قسمت های صفحه کار کنه تا وقتی که کارشون با این پنجره ها تموم بشه

دو تا محدودیت توی توابع بالا وجود داره :

• محل modal window رو مرورگر مشخص میکنه و معمولا وسط صفحه هست
• شکل نمایش پنجره‌ای هم باز بستگی به مرورگر داره که چطور نشون بده و ما نمیتونیم ویرایشش کنیم

این بهایی هست که برای سادگی پرداخت میکنیم راه های دیگه‌ای برای نمایش پنجره‌های تعاملی با کاربر وجود داره ولی اگه زرق و برق براتون مهم نیست این توابع کار رو به خوبی انجام میدن

پست قبلی(دیتا تایپ‌ها در جاوااسکریپت)

پست بعدی (تبدیل تایپ ها در جاوااسکریپت)

اگر توی این مقاله مشکلی بود یا خواستین توی این پروژه مشارکت کنین این لینک گیت‌هابش هست.

منبع

گیت‌هاب