متد prompt() بخش مهمی از تعامل جاوااسکریپت با کاربر است. این یکی از سادهترین راهها برای گرفتن ورودی از کاربر از طریق یک کادر محاورهای (dialog box) کوچکِ پاپآپ است.
اغلب آن را در موقعیتهایی میبینید که صفحهی وب به یک تکه اطلاعات از کاربر نیاز دارد؛ مثل یک نام یا نوع دیگری از ورودی متنی.
پس دقیقاً متد prompt() چه کاری انجام میدهد؟ این متد یک کادر محاورهای باز میکند که از کاربر مقداری را میخواهد، و سپس متنی را که کاربر وارد کرده است بهصورت یک رشته (string) برمیگرداند.
متد prompt() دو آرگومان میگیرد: آرگومان اول یک پیام است که داخل کادر محاورهای نمایش داده میشود و معمولاً از کاربر میخواهد اطلاعاتی را وارد کند. آرگومان دوم یک مقدار پیشفرض (default value) است که اختیاری است و در ابتدا فیلد ورودی را با آن مقدار پر میکند.
prompt(message, default);این یک مثال از نحوهی کار آن است.
نکته (NOTE): این مثال شامل کدی است که شما هنوز یاد نگرفتهاید. نگران تلاش برای فهمیدن همه چیز در کد نباشید. هدف فقط این است که نشان دهد متد prompt() چگونه کار میکند و همچنین کاری کند که prompt بلافاصله هنگام لود شدن صفحه ظاهر نشود (چون ممکن است مزاحم/تحمیلی به نظر برسد). اگر ویرایشگر تعاملی (interactive editor) را فعال دارید، میتوانید خودتان آن را امتحان کنید.
index.html
<button id="prompt-btn">Show Prompt</button>
<p id="output"></p>
<script src="index.js"></script>index.js
const btn = document.getElementById("prompt-btn");
const output = document.getElementById("output");
btn.addEventListener("click", () => {
const userName = prompt("What is your name?", "Guest");
output.textContent = "Hello, " + userName + "!";
});
در این مثال، وقتی کاربر روی دکمه کلیک میکند، متد prompt() یک کادر محاورهای را با پیامِ What is your name? نمایش میدهد و یک فیلد ورودی که در ابتدا شامل مقدار Guest است.
اگر کاربر نامش را تایپ کند و دکمهی "OK" را بزند، متغیر userName مقدار واردشده را ذخیره میکند. اگر کاربر "Cancel" را بزند، متغیر userName برابر null قرار داده میشود. null نشان میدهد که کاربر هیچ ورودیای ارائه نکرده است. سپس پاراگراف خروجی یک پیام خوشامدگویی را با استفاده از نام ارائهشده (یا null اگر کاربر لغو کرده باشد) نمایش میدهد. در درسهای آینده تکنیکهایی یاد میگیرید که وقتی کاربر prompt را لغو میکند از نمایش null جلوگیری کنید.
یادتان باشد که متد prompt() اجرای اسکریپت را متوقف (halt) میکند تا زمانی که کاربر با کادر محاورهای تعامل کند.
این یعنی باقی کد جاوااسکریپت شما اجرا نمیشود تا وقتی که کاربر یا ورودی وارد کند و روی "OK" کلیک کند، یا prompt را لغو (cancel) کند.
یک نکتهی دیگر برای در نظر گرفتن این است که با اینکه prompt() برای تست سریع یا برنامههای کوچک مفید است، اما معمولاً در اپلیکیشنهای وب مدرن و پیچیده از آن اجتناب میشود؛ چون ماهیتش مزاحم/اختلالزا است و رفتار آن در مرورگرهای مختلف میتواند ناسازگار باشد.
با درک متد prompt()، شما یک روش ساده برای تعامل با کاربران و دریافت مستقیم اطلاعات از طریق مرورگر به دست میآورید؛ هرچند ممکن است در اپلیکیشنهای وب مدرن بهطور گسترده استفاده نشود.
سوالات
متد prompt() در جاوااسکریپت چه کاری انجام میدهد؟
- یک پاپآپ نمایش میدهد که ورودی کاربر را میخواهد و ورودی را بهصورت رشته برمیگرداند.
- یک پیام را در کنسول لاگ میکند.
- یک پنجره جدید مرورگر باز میکند.
- اجرای اسکریپت را متوقف میکند.
اگر کاربر کادر محاورهای prompt را لغو (Cancel) کند چه اتفاقی میافتد؟
- اسکریپت خراب میشود.
- متد prompt مقدار
nullبرمیگرداند. - متد prompt یک رشتهی خالی برمیگرداند.
- اسکریپت با مقدار پیشفرض ادامه میدهد.
آرگومان دومِ اختیاریِ متد prompt() برای چه استفاده میشود؟
- مشخص کردن متن دکمهی cancel
- تنظیم یک مقدار پیشفرض در فیلد ورودی
- تنظیم محدودیت زمانی برای ورودی
- تغییر رنگ کادر محاورهای