تعامل با کاربر

در بخش اوّل این مجموعه قصد داریم در مورد خود زبان جاوااسکریپت صحبت کنیم، و به قابلیت‌هایی از این زبان که مخصوص محیط خاصی باشد نمی‌پردازیم.

ولی ناچاراً به دلایلی که قبلاً گفتیم لازم است محیطی را برای اجرای کدهایی که می‌آموزیم داشته باشیم، و ما محیط مرورگر را انتخاب کردیم. لذا لازم است حداقل بدانیم که چه طور می‌توانیم در این محیط از کاربر بخواهیم چیزی را در برنامه ما وارد کند و به آن دسترسی پیدا کنیم. به همین دلیل در این آموزش سه دستور alert، prompt و confirm را می‌آموزیم.

alert

سینتکس:

alert(message);

این دستور پیامی را به کاربر نشان می‌دهد، و سپس اجرای بقیهٔ کد را تا زمانِ کلیکِ کاربر روی دکمهٔ OK متوقّف می‌کند. مثلاً:

alert("Hello");

به پنجرهٔ کوچکی که با اجرای این دستور باز می‌شود modal گفته می‌شود. modal به پنجره‌ای گفته می‌شود که حین باز بودن آن، کاربر نمی‌تواند با هیچ قسمت دیگری از صفحه کار کند، مثلاً دکمه‌هایی را فشار دهد و غیره. مگر اینکه به شکلی پنجرهٔ modal را ببندد.

prompt

این تابع دو پارامتر می‌گیرد:

result = prompt(title, [default]);

این دستور یک modal باز می‌کند که درون آن پیامی وجود دارد، و کادری برای نوشتن متن، و دو دکمهٔ OK و Cancel.

title
متنی است که کاربر می‌بیند.

default
این پارامتر دوم است که اجباری نیست، و مقدار پیش‌فرض کادر ورود متن را مشخّص می‌کند.

کاربر می‌تواند در کادر ورود متن، عبارتی بنویسد و روی OK کلیک کند. یا با کلیک روی Cancel یا فشردن Esc از وارد کردن متن امتناع کند.

در صورت کلیک روی OK متن نوشته‌شده در کادر متنی بر خواهد گشت، و در غیر این صورت مقدار null.

مثال:

let age = prompt('چند ساله هستی؟', ۱۰۰);

alert(`تو ${age}ساله هستی!`); // تو ۱۰۰ساله هستی

let test = prompt("Test");

let test = prompt("Test", ''); // <-- به‌خاطر اینترنت‌اکسپلورر

confirm

سینتکس:

result = confirm(question);

دستور confirm یک modal باز می‌کند که در آن جمله‌ای پرسشی (question) وجود دارد، و دو دکمهٔ OK و Cancel.

اگر کاربر روی OK کلیک کند، نتیجهٔ این دستور می‌شود true و در غیر این صورت می‌شود false.

مثال:

let isBoss = confirm("آیا تو رئیس هستی؟");

alert( isBoss ); // اگر OK را بزند می‌شود true

خلاصه

در این آموزش با سه دستور برای تعامل با کاربر آشنا شدیم که منحصر به محیط مرورگر است.

alert
پیغامی نشان می‌دهد.

prompt
از کاربر می‌خواهد متن بنویسد، و آن متن را بر می‌گرداند. اگر روی Cancel کلیک شود یا کلید Esc فشار داده شود null بر می‌گردد.

confirm
پیغامی نشان می‌دهد و منتظر می‌ماند کاربر روی OK یا Cancel کلیک کند. برای OK مقدار true و برای Cancel یا Esc مقدار false را بر می‌گرداند.

تمام این دستورات modal هستند: یعنی اجرای کد را متوقّف می‌کنند و نمی‌گذارند کاربر با قسمت‌های دیگر صفحه کار کند، مگر اینکه پنجره بسته بشود.

همهٔ این دستورات از دو مشکل اساسی رنج می‌برند:

1. مکان دقیق پنجرهٔ modal در دست ما نیست. مرورگر هر جا خودش صلاح بداند نشانش می‌دهد، که معمولاً در وسط صفحه است.
2. ظاهر و قیافهٔ پنجرهٔ modal نیز در دست ما نیست و به مرورگر بستگی دارد.

این دو مشکل هزینه‌ایست که به خاطر راحت‌تر کد زدن می‌پردازیم. برای درست کردن پنجره‌های قشنگ‌تر باید از روش‌های دیگری استفاده کنیم. ولی اگر زیبایی ظاهری برایتان اهمّیّتی ندارد این دستورات به دردتان می‌خورند.