این آموزش در تاریخ ۱۴۰۱/۰۴/۰۷ آپدیت شده است.
کار با جعبه های پیغام در جاوا اسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با جعبه های پیغام در جاوا اسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
کار با جعبه های پیغام در جاوا اسکریپت
خب اصلا این جعبه های پیغام که میگیم یعنی چی؟! ببینید دوستان من فکر میکنم تا الان شاید برای یکبارم که شده از این جعبه های پیغام در سایت های مختلف دیده باشید.
جعبه های پیغامی که مثلا میاد رو صفحه و هشداری چیزی میده یا مثلا یه باکس میاد و میگه آیا مطمعن هستید میخواید این رو حذف کنید و … بطور کلی به همچین چیزایی جعبه های پیغام میگن که البته در زبان جاوا اسکریپت بهشون Popup Boxes هم میگن.
حال در زبان جاوا اسکریپت ما ۳ نوع جعبه پیغام میتونیم داشته باشیم :
- جعبه هشدار یا Alert Box
- جعبه تاییدیه یا Confirm Box
- جعبه گرفتن مقدار از کاربر یا Prompt Box
از اسمشون هم مشخصه که هرکدوم برای چه کاری استفاده میشوند، مثلا از Alert Box برای نمایش پیغام های هشدار استفاده میشه یا مثلا از Confirm Box برای اینکه از کاربر چیزی بپرسه و کاربر هم بگه بله یا خیر ( تایید یا کنسل کردن ) و..
Free-Learn
جعبه هشدار یا Alert Box در جاوا اسکریپت
جعبه هشدار یا Alert Box یکی از معروف ترین و پرکاربردترین جعبه های هشدار است که در زبان جاوا اسکریپت ازش برای نمایش پیغام های هشدار یا پیغام های اطلاعاتی ( درکل برای نمایش پیغام به کاربر ) استفاده میشه.
شکل کلی برای استفاده از Alert Box :
|
1 |
alert(" Your Message In Here "); |
که کافیه بجای Your Message In Here هر متنی دوست داشتید قرار بدید ، دیگه اون متن در باکس پیغام نمایش داده خواهد شد.
مثال شماره ۱ : نمایش متن ” به سایت من خوش اومدی ” به محض بالا اومدن صفحه ( لود صفحه )
|
1 2 3 4 5 |
<script> alert("به سایت من خوش اومدی"); </script> |
مثال شماره ۲ : قرار دادن پیغام در یک تابع ، و نمایش پیغام وقتی بروی یک دکمه کلیک میشود ( یعنی باید وقتی بروی دکمه کلیک میشه تابع اجرا بشه )
|
1 2 3 4 5 6 7 |
<script> function ShowMessage(){ alert("سلام خوبی؟"); } </script> |
مثال شماره ۳ : شکستن متن به سطر جدید با استفاده از n\
|
1 2 3 4 5 6 7 |
<script> function ShowMessage(){ alert("Salam \n Khobi?"); } </script> |
مثال شماره ۴ : باکس پیغام شکیل تر با استفاده از کتابخانه SweetAlert ( سایت رسمی )
|
1 2 3 4 5 6 7 |
<script> function MyMessage(){ Swal.fire('به سایت من خوش اومدی'); } </script> |
Free-Learn
جعبه تاییدیه یا Confirm Box در جاوا اسکریپت
این نوع جعبه پیغام هم همونطور که کمی بالاتر اشاره کردم ، جعبه ی پیغام تایید یا کنسل می باشد، یعنی یه باکس پیغام نشون داده میشه که ما میتونیم تایید یا کنسل کنیم.
شکل کلی برای استفاده از Confirm Box :
|
1 |
confirm(" Your Message In Here "); |
که کافیه بجای Your Message In Here هر متنی دوست داشتید قرار بدید ، دیگه اون متن در باکس پیغام بهمراه ۲ تا دکمه OK و Cancel نمایش داده خواهد شد.
مقدار برگشتی که این جعبه پیغام میتونه به ما بده یا true هست یا false ( یعنی اگه کاربر بروی OK کلیک کرده بود میشه True و اگه بروی Cancel کلیک کرده باشه میشه False )
مثال شماره ۱ : نمایش جعبه پیغام تایید یا کنسل توسط کاربر
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<script> function Cheack(){ var MyMessage , Result; Result = document.getElementById("Result"); MyMessage = confirm("لطفا بروی یکی از دکمه های زیر کلیک کنید"); if( MyMessage == true ){ Result.innerHTML = "روی Ok کلیک کردی"; }else{ Result.innerHTML = "روی Cancel کلیک کردی"; } } </script> |
مثال شماره ۲ : استفاده از کتابخانه SweetAlert
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<script> function MyMessage(){ Swal.fire({ title: 'آیا از سایت فری لرن راضی هستید؟', showDenyButton: true, confirmButtonText: 'آره خب', denyButtonText: 'نه اصلا', }).then((result) => { if (result.isConfirmed) { document.getElementById("Result").innerHTML = "روی آره خب کلیک کردی"; } else if (result.isDenied) { document.getElementById("Result").innerHTML = "روی نه اصلا کلیک کردی"; } }); } </script> |
Free-Learn
جعبه گرفتن مقدار از کاربر یا Prompt Box در جاوا اسکریپت
این نوع جعبه هم از اسمش مشخصه که چکار میکنه، یک جعبه پیغام برای گرفتن مقدار از کاربر و در ادامه اونکاری که قراره ما بروی همون مقداری که کاربر وارد کرده انجام بدیم.
شکل کلی برای استفاده از Prompt Box :
|
1 |
prompt( " Your Message In Here " , " Default_Value " ); |
- Your Message In Here : متن پیغام شما برای نمایش به کاربر
- Default_Value : یک مقدار از پیش تعریف شده برای نمایش به کاربر
مقدار برگشتی که این جعبه پیغام میتونه به ما بده ۲حالت داره، اگه کاربر بروی دکمه OK کلیک کرده باشه مقدار برگشتی میشه همون چیزی که کاربر وارد کرده و اگه بروی Cancel کلیک کرده باشه مقدار برگشتی میشه null
مثال شماره ۱ : نمایش جعبه پیغام برای گرفتن نام کاربر، بعدش بهش میگیم سلام خوبی؟
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<script> function Get(){ var UserName , Result; Result = document.getElementById("Result"); UserName = prompt("اسم شما چیه؟"); if( UserName == null || UserName == "" ){ Result.innerHTML = "شما بروی دکمه کنسل کلیک کرده اید یا هم کلا باکس رو خالی گذاشتید"; }else{ Result.innerHTML = " سلام " + UserName + " خوبی؟ "; } } </script> |
مثال شماره ۲ : استفاده از کتابخانه SweetAlert
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script> function MyMessage(){ (async () => { const { value: UserName } = await Swal.fire({ input: 'text', inputLabel: 'نام شما', inputPlaceholder: 'لطفا نام تان را وارد نمایید' }) if (UserName) { Swal.fire('سلام' + ' ' + UserName + ' ' + 'خوبی؟') } })() } </script> |
