به نام خدا با عرض سلام و احترام خدمت شما دوستان عزیز در ادامه آموزش جاوا اسکریت این جلسه قصد داریم به مبحث Dialog Box در جاوا اسکریپت بپردازیم.با ما همراه باشید.
نحوه ساخت Dialog Box
در جاوا اسکریپت شما می‌توانید دیالوگ باکس ها یا پاپاپ های بازشو را برای تعامل با کاربران ایجاد نمایید. همچنین می توانید از آنها برای اطلاع رسانی به کاربر و یا دریافت ورودی از کاربر قبل از ادامه کار استفاده کنید.
شما می توانید سه نوع مختلف از دیالوگ باکس های alert, confirm, و prompt ایجاد کنید.ظاهر Dialog Box ها توسط سیستم عامل و/یا تنظیمات مرورگر تعیین می شود، لذا آنها را نمی توان با CSS تغییر داد.همچنین، دیالوگ باکس ها ، پنجره های modal هستند. هنگامی که یک dialog box نمایش داده می شود، اجرای سایر کدها متوقف می شود و تنها پس از رد شدن آن از سر گرفته می شوند.
ایجاد Alert Dialog Boxes
دیالوگ باکس alert ساده ترین dialog box است. به شما امکان می دهد پیام کوتاهی را به کاربر نمایش دهید. همچنین شامل دکمه OK است و کاربر برای ادامه باید روی دکمه OK کلیک کند.با متد ()alert می توانید دیالوگ باکس alert را ایجاد نمایید. قبلاً نمونه‌های alert زیادی را در جلسه های قبلی دیده‌اید.
به عنوان مثال:
|
1 2 3 4 5 |
var message = "Hi there! Click OK to continue."; alert(message); /* The following line won't execute until you dismiss previous alert */ alert("This is another alert box."); |
ایجاد Confirm Dialog Boxes
دیالوگ باکس confirm به کاربر اجازه می دهد تا یک اقدام را تایید یا لغو کند. confirm dialog شبیه یک alert dialog است،با این تفاوت که آن شامل یک دکمه Cancel به همراه دکمه OK می باشد.
شما می توانید با متد ()confirm دیالوگ باکس confirm ایجاد کنید. این متد به سادگی یک مقدار بولی (true یا false) را بسته به اینکه کاربر روی دکمه OK یا Cancel کلیک کند، برمی گرداند. به همین دلیل است که نتیجه آن اغلب در هنگام استفاده به یک متغیر اختصاص داده می شود.
مثال زیر بسته به اینکه روی کدام دکمه کلیک شده باشد، متنی را در مرورگر چاپ می کند.
|
1 2 3 4 5 6 7 |
var result = confirm("Are you sure?"); if(result) { document.write("You clicked OK button!"); } else { document.write("You clicked Cancel button!"); } |
ایجاد Prompt Dialog Box
دیالوگ باکس prompt برای دریافت اطلاعات از کاربر استفاده می شود. که شامل یک فیلد ورودی متن، یک دکمه OK و Cancel است.
با متد ()prompt می توانید دیالوگ باکس prompt را ایجاد نمایید. این متد زمانی که کاربر روی دکمه OK کلیک می کند، متن وارد شده در فیلد ورودی را برمی گرداند و اگر کاربر روی دکمه Cancel کلیک کند، null برمیگرداند. اگر کاربر بدون وارد کردن متن روی دکمه OK کلیک کند، یک رشته خالی برگردانده می شود. به همین دلیل، نتیجه آن معمولاً هنگام استفاده به یک متغیر نسبت داده می شود.
مثال زیر با کلیک بر روی دکمه OK مقدار وارد شده توسط شما را چاپ می کند.
|
1 2 3 4 5 6 7 |
var name = prompt("What's your name?"); if(name.length > 0 && name != "null") { document.write("Hi, " + name); } else { document.write("Anonymous!"); } |
()prompt همیشه یک رشته است. یعنی اگر کاربر در قسمت ورودی عدد 10 را وارد کند، رشته “10” به جای عدد 10 برگردانده می شود.\n) استفاده کنید. یک اسلش و به دنبال آن کاراکتر n.
دیدگاهتان را بنویسید