گرفتن تاییدیه از کاربر در جاوااسکریپت

در این مقاله کوتاه قصد داریم در مورد چگونگی نمایش یک دیالوگ باکس تأیید با استفاده از جاوااسکریپت بحث کنیم. این دیالوگ باکس به شما امکان می‌دهد تا براساس ورودی کاربر اقداماتی را انجام دهید.

جاوااسکریپت یکی از مهمترین فناوری‌های اصلی وب به شمار می‌رود. اکثر وب سایت‌ها از آن استفاده می‌کنند و همه مرورگرهای وب مدرن نیز بدون نیاز به هیچگونه افزونه‌ای از آن پشتیبانی می‌نمایند. در ادامه راجع به نکات و ترفندهایی صحبت می‌کنیم که به شما در توسعه جاوااسکریپت کمک خواهد کرد.

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

به همین جهت می‌خواهیم دو روش برای تأیید عملکرد کاربر در جاوااسکریپت به شما نشان دهیم: یکی استفاده از متد confirm و دیگری استفاده از یک div پنهان.

سینتکس متد confirm

در جاوااسکریپت می‌توانید از متد confirm متعلق به شی window برای نمایش دیالوگ باکس استفاده کنید و منتظر بمانید تا کاربر آن را تأیید یا لغو کند. در زیر نحوه عملکرد آن را همراه با یک مثال واقعی مشاهده می‌کنید.

همچنین سینتکس متد window.confirm را نیز مورد بررسی قرار خواهیم داد.

سینتکس متد confirm به این شکل است:

var result = window.confirm(message);

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

 معمولا پیام مد نظر موجود در دیالوگ باکس در قالب یک سوال است و دو دکمه برای آن وجود دارد: OK و Cancel. اگر کاربر روی دکمه OK کلیک کند، متد تأیید true را برمی‌گرداند و اگر کاربر روی دکمه Cancel کلیک کند، پاسخ متد تأیید false می‌شود. بنابراین می‌توانید از مقدار بازگشتی متد confirm برای اطلاع از انتخاب کاربر استفاده نمایید. (اگر می‌خواهید دکمه‌ها چیزی متفاوت باشند مثلا Yes و No، نحوه انجام آن را در انتهای مقاله به شما نشان خواهم داد.)

از آنجا که شیء window همیشه ضمنی است؛ یعنی خصوصیات و متدهای آن همیشه در دسترس هستند، بنابریان می‌توانید متد confirm را فراخوانی کنید، همانطور که در قطعه کد زیر نشان داده شده است.

var result = confirm(message);

توجه به این نکته ضروری است که دیالوگ باکس تأیید مُدال و همزمان است. به همین دلیل هنگام نمایش آن، فرایند اجرای کد جاوااسکریپت متوقف می‌شود و پس از اینکه کاربر دیالوگ باکس را با کلیک روی دکمه تأیید یا لغو رد کرد، فرایند اجرای کد ادامه می‌یابد.

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

مثالی از متد confirm در دنیای واقعی

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

به مثال زیر توجه کنید.

https://codepen.io/tutsplus/pen/mdmBRPY

وقتی کاربر روی دکمه Delete My Profile کلیک می‌کند، تابع deleteProfile صدا زده می‌شود. در تابع deleteProfile هم متد confirm را فراخوانی کرده‌ایم که دیالوگ باکس را برای کاربر نمایش می‌دهد.

سرانجام اگر کاربر روی دکمه OK در دیالوگ باکس کلیک کند، پیش می‌رویم و او را به صفحه deleteProfile.php/ هدایت می‌کنیم تا عملیات حذف را انجام دهد. از سوی دیگر اگر کاربر روی دکمه Cancel کلیک کند، کاری انجام نمی‌دهیم. به علاوه تا زمانی که کاربر انتخابی انجام ندهد و دیالوگ باکس را تأیید یا رد نکند، اجرای جاوااسکریپت همچنان متوقف می‌ماند.

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

 تایید Yes یا No با یک Div مخفی

استفاده از متد confirm برای گرفتن تأییدیه از کاربر اشکالاتی به همراه دارد. یکی این است که دیالوگ باکس نمایش داده شده بخشی از رابط کاربری برنامه یا وب سایت شما نخواهد بود (از برند یا طرح رنگ و قالب شما استفاده نخواهد کرد)، دوما نمی‌توان آن را سفارشی سازی کرد (برای مثال اگر بخواهید بجای OK و Cancel، بله یا خیر بنویسید). در نهایت پیام تأیید به صورت modal است؛ یعنی تا زمانی که در حال نمایش دادن است، کاربر نمی‌تواند با قسمت دیگری از رابط برنامه تعامل داشته باشد.

راه دیگر برای نمایش بله یا خیر، استفاده از یک div مخفی در صفحه است. به مثال زیر توجه کنید:

https://codepen.io/tutsplus/pen/MWmEJVO

در این مثال ما یک div تأیید پنهان با id=”confirm” داریم. برای نمایش div به سادگی می‌توان خصوصیت hidden آن را روی true قرار داد. بدین ترتیب هنگامی که می‌خواهیم تأیید را نشان دهیم، hidden را true کرده و دوباره آن را روی false قرار می‌دهیم تا مخفی شود.

همانطور که مشاهده می‌کنید، این روش تأیید بله یا خیر به ما امکان انعطاف پذیری و سفارشی سازی بیشتری نسبت به متد window.confirm می‌دهد.

جمع‌بندی

در این مقاله دو روش برای گرفتن تأییدیه کاربر در جاوااسکریپت را مورد بحث قرار دادیم. ابتدا ساده‌ترین راه را بررسی کردیم، یعنی متد window.confirm. با این حال دیدید که تجربه کاربری عالی ایجاد نمی‌کند. سپس به شما نشان دادیم که چگونه می‌توان از یک div مخفی استفاده کرد تا تأیید کاربر را با کنترل بیشتری بر نحوه نمایش و رفتار آن دریافت کنید.

برای یادگیری جاوااسکریپت و آشنایی با مفاهیم آن می‌توانید از این دوره ارزشمند در وب سایت راکت بهره‌مند شوید.

منبع