در این بخش از سری آموزش جاوا اسکریپت قصد داریم به شما نحوه ساخت پنجره نمایش پیام در جاوا اسکریپت نشان بدیم.
ساخت پنجره نمایش پیام (پاپ-آپ)
در جاوا اسکریپت می توانید پنجره نمایش پیام یا پاپ آپ را برای تعامل با کاربر ایجاد کنید.
می توانید از آنها برای اطلاع رسانی کاربر یا دریافت بعضی مقادیر قبل از ادامه روند استفاده کنید.
انواع پنجره پیام هایی که می توانید بسازید انواع alert (هشدار), confirm (تایید) یا prompt (دریافت ورودی) است.
ظاهر این باکس ها توسط سیستم عامل و/یا تنظیمات مرورگ تعیین می شوند و نمی توانید با CSS آنها را تغییر بدید. مدال های پیچیده ای در صفحات مختلف می بینید جز اینها نیستند بلکه المان هایی از صفحه هستند که بصورت خاص برای شبیه سازی این قابلیت ایجاد و استایل دهی شده اند.
همچنین این پنچره پیام در جاوا اسکریپت اگر در هنگام اجرا کد نمایش داده شوند, اجرا آن را متوقف می کنتد و تنهای زمانی ادامه می یابند که آن ها را ببندید.
در بخش زیر در مورد هر یک از پنجره نمایش پیام در جاوا اسکریپت صحبت می کنیم.
ساخت پاپ آپ alert
یک پنجره alert ساده ترین باکسی است که می تواند یک پیام کوتاه را به کاربر نمایش دهد. همچنین دارای دکمه OK است و کاربر برای ادامه روند باید OK را بزند.
می توانید این پنجره های هشدار را با متد 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
یک پنجره پیام Confirm به کاربر اجازه می دهد که عملیات را تایید یا لغو کند. این پنجره تایید همانند یک پنجره alert است اما با این تفاوت که کنار دکمه OK یک دکمه Cancel هم دارد.
می توانید این پنجره تایید را با استفاده از متد 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
پنجره prompt برای دریافت اطلاعات از کاربر استفاده می شود و در واقع یک پنجره با فیلد ورودی متن به همراه دکمه OK و Cancel است.
می توانید یک پنجره دریافت ورودی کاربر را با متد prompt() بسازید. این متد زمانی که کاربر مقداری را وارد و OK زد, متن وارد شده را برگشت می دهد.
اگر کاربر روی دکمه 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() همیشه یک رشته است به این معنی که اگر کاربر ۱۰ را وارد کند رشته برگشتی به جای عدد ۱۰ مقدار رشته “۱۰” خواهد بود.
برای همین, اگر نیاز به دریافت مقدار به عنوان یک عدد را دارید, باید آن را به اینصورت تبدیل کنید var age = Number(prompt("What's your age?"));
نکته: برای نمایش خط جدید در پنجره پیام ها, می توانید از کاراکتر خط جدید \n استفاده کنید.
امیدوارم از آموزش ساخت پنجره نمایش پیام در جاوا اسکریپت نهایت استفاده را برده باشید.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق باشید.
