کار با جعبه های پیغام در جاوا اسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با جعبه های پیغام در جاوا اسکریپت با من همراه باشید.
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 |
<body> <button onclick="alert('سلام خوبی؟');">روی من کلیک کن</button> </body> |
مثال شماره ۳ : قرار دادن پیغام در یک تابع ، و نمایش پیغام وقتی بروی یک دکمه کلیک میشود ( یعنی باید وقتی بروی دکمه کلیک میشه تابع اجرا بشه )
|
1 2 3 4 5 6 7 8 9 |
<button onclick="Show_Message();">روی من کلیک کن</button> <script> function Show_Message(){ alert("سلام خوبی؟"); } </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 |
<script> function Show_Message(){ confirm("آیا از حذف این مورد مطمعنی؟"); } </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 |
<script> function Show_Message(){ prompt("اسم شما چیه؟"); } </script> |
Free-Learn
مثال های بیشتر
در ادامه آموزش کار با جعبه های پیغام در جاوا اسکریپت میخوایم با مثال های بیشتر از این جعبه های پیغام آشنا بشیم، ۲ مثال زیر در واقع حالت پیشرفته تره جعبه های Confirm Box و Prompt Box می باشد.
مثال شماره ۱ : کاربر بروی یک دکمه کلیک میکنه و ازش میپرسه آیا مطمعنی برای حذف این مورد ( همینجوری الکی ) و اگه کاربر بروی OK کلیک کرد در صفحه یه پیغام میده که بله مثلا کاربر بروی OK کلیک کرده و یه پیغام دیگه اگه بروی Cancel کلیک کرده بود.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script> function Del(){ var result = document.getElementById("Result"); var MyMessage = confirm("آیا از حذف این مورد مطمعن هستید؟"); if( MyMessage == true ){ result.innerHTML ="شما بروی OK کلیک کردید"; } else{ result.innerHTML = "شما بروی Cancel کلیک کردید"; } } </script> |
مثال شماره ۲ : گرفتن یک نام از کاربر و نمایش همان نام در صفحه ( اگه کاربر چیزی وارد نکنه و بروی دکمه OK کلیک کنه یا هم اگه بروی دکمه Cancel کلیک کنه بهش پیغام میده که شما بروی دکمه کنسل کلیک کرده اید یا هم کلا باکس رو خالی گذاشتید )
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script> function Get_Name(){ var result = document.getElementById("Result"); var MyMessage = prompt("اسم شما چیه؟"); if( MyMessage == null || MyMessage == "" ){ result.innerHTML ="شما بروی دکمه کنسل کلیک کرده اید یا هم کلا باکس رو خالی گذاشتید"; } else{ result.innerHTML = " سلام " + MyMessage + " خوبی؟ "; } } </script> |
