Dialog Box در جاوا اسکریپت

به نام خدا با عرض سلام و احترام خدمت شما دوستان عزیز در ادامه آموزش جاوا اسکریت این جلسه قصد داریم به مبحث Dialog Box در جاوا اسکریپت بپردازیم.با ما همراه باشید.

نحوه ساخت Dialog Box

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

شما می توانید سه نوع مختلف از دیالوگ باکس های  alertconfirm, و prompt ایجاد کنید.ظاهر Dialog Box ها  توسط سیستم عامل و/یا تنظیمات مرورگر تعیین می شود، لذا آنها را نمی توان با CSS تغییر داد.همچنین، دیالوگ باکس ها ، پنجره های modal هستند. هنگامی که یک dialog box نمایش داده می شود، اجرای سایر کدها متوقف می شود و تنها پس از رد شدن آن از سر گرفته می شوند.

ایجاد Alert Dialog Boxes

دیالوگ باکس alert ساده ترین dialog box  است. به شما امکان می دهد پیام کوتاهی را به کاربر نمایش دهید. همچنین شامل دکمه OK است و کاربر برای ادامه باید روی دکمه OK کلیک کند.با متد  ()alert می توانید دیالوگ باکس alert  را ایجاد نمایید. قبلاً نمونه‌های alert زیادی را در جلسه های قبلی دیده‌اید.

به عنوان مثال:

 ایجاد Confirm Dialog Boxes

دیالوگ باکس confirm به کاربر اجازه می دهد تا یک اقدام را تایید یا لغو کند. confirm dialog شبیه یک alert dialog  است،با این تفاوت که آن شامل  یک دکمه Cancel به همراه دکمه OK می باشد.

شما می توانید با متد ()confirm  دیالوگ باکس confirm ایجاد کنید. این متد به سادگی یک مقدار بولی (true یا false) را بسته به اینکه کاربر روی دکمه OK یا Cancel کلیک کند، برمی گرداند. به همین دلیل است که نتیجه آن اغلب در هنگام استفاده به یک متغیر اختصاص داده می شود.

مثال زیر بسته به اینکه روی کدام دکمه کلیک شده باشد، متنی را در مرورگر چاپ می کند.

ایجاد Prompt Dialog Box

دیالوگ باکس prompt برای دریافت اطلاعات از کاربر استفاده می شود. که شامل یک فیلد ورودی متن، یک دکمه OK و  Cancel است.

با متد  ()prompt می توانید دیالوگ باکس  prompt را ایجاد نمایید. این متد زمانی که کاربر روی دکمه OK کلیک می کند، متن وارد شده در فیلد ورودی را برمی گرداند و اگر کاربر روی دکمه Cancel کلیک کند، null  برمیگرداند. اگر کاربر بدون وارد کردن متن روی دکمه OK کلیک کند، یک رشته خالی برگردانده می شود. به همین دلیل، نتیجه آن معمولاً هنگام استفاده به یک متغیر نسبت داده می شود.

JavaScript Dialog Boxes

مثال زیر با کلیک بر روی دکمه OK مقدار وارد شده توسط شما را چاپ می کند.

مقدار بازگردانده شده توسط متد ()prompt  همیشه یک رشته است. یعنی اگر کاربر در قسمت ورودی عدد 10 را وارد کند، رشته “10” به جای عدد 10 برگردانده می شود.
بنابراین، اگر می‌خواهید از مقدار برگشتی به‌عنوان عدد استفاده کنید، باید آن را به عدد تبدیل نمایید.
به عنوان مثال :  ;var age = Number(prompt(“What’s your age?”))
نکته: برای نمایش line breaks در دیالوگ باکس ها، از کاراکتر خط جدید یا فید خط ;(\n) استفاده کنید. یک اسلش  و به دنبال آن کاراکتر n.
خب دوستان گرامی به پایان بخش(دیالوگ باکس) Dialog Box در جاوا اسکریپت  رسیدیم امیدواریم این بخش نیز مورد توجه شما قرار گیرد.

 

 

برای امتیاز به این نوشته کلیک کنید!
[کل: 0 میانگین: 0]
اشتراک‌گذاری

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *