Dialog Box در جاوا اسکریپت - آموزش جاوا اسکریپت

در این شرایط در کنارتون هستیم 💚 آواسام

لیست محتوای این بخش

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

آموزش دیالوگ باکس در جاوا اسکریپت - آموزش dialog box در javascript

زبان جاوا اسکریپت از سه نوع دیالوگ باکس پشتیبانی می کند . از این دیالوگ باکس ها میتوان برای نمایش یک هشدار یا متن به کاربر ، یا دریافت یک تائیدیه از او استفاده کرد . دیالوگ باکس ها را میتوان روی هر input استفاده کرد .

دیالوگ باکس هشدار یا Alert Dialog Box در جاوا اسکریپت :

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

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

مثال :

<html>
   <head>   
      <script type = "text/javascript">
         <!--
            function Warn() {
               alert ("This is a warning message!");
               document.write ("This is a warning message!");
            }
         //-->
      </script>     
   </head>
   
   <body>
      <p>Click the following button to see the result: </p>      
      <form>
         <input type = "button" value = "Click Me" onclick = "Warn();" />
      </form>     
   </body>
</html>

در مثال بالا بعد از کلیک دکمه ی Click Me فقط یک متن خالی نمایش داده میشود که با کلیک روی Ok پنجره بسته میشود .

دیالوگ تائید در جاوا اسکریپت :

دیالوگ باکس تائید ، از رضایت کاربر برای کاری که میخواهد انجام بدهد ، مطمئن میشود .این دیالوگ باکس یک متنی به همراه دو دکمه ی OK و Cancel نمایش میدهد .

اگر کاربر روی Ok کلیک کند متد confirm() مقدار true برمیگرداند و اگر روی Cancel کلیک شود مقدار false برمیگرداند . مثلا اگر بخواهید وقتی روی دکمه ی حذف کلیک میشود یک تائیدیه اضافی از کاربر بگیرید این روش برای شما کارساز خواهد بود .

مثال :

<html>
   <head>   
      <script type = "text/javascript">
         <!--
            function getConfirmation() {
               var retVal = confirm("Do you want to continue ?");
               if( retVal == true ) {
                  document.write ("User wants to continue!");
                  return true;
               } else {
                  document.write ("User does not want to continue!");
                  return false;
               }
            }
         //-->
      </script>     
   </head>
   
   <body>
      <p>Click the following button to see the result: </p>      
      <form>
         <input type = "button" value = "Click Me" onclick = "getConfirmation();" />
      </form>      
   </body>
</html>

دیالوگ باکس دریافت اطلاعات در جاوا اسکریپت :

این دیالوگ باکس زمانی مفید است که بخواهید اطلاعاتی را از کاربر درون یک دیالوگس باکس دریافت کنید . کاربر بعد از دیدن کادر پیام باید input را پر کند و سپس کلید Ok را کلیک کند .

این دیالوگ باکس توسط متد prompt() ایجاد میشود که دو پارامتر ورودی دارد . اولی یک متن هست که درون دیالوگ نمایش داده میشود و دوم متن پیشفرضی است که درون input نمایش داده میشود .

این دیالوگ باکس دو عدد دکمه دارد که یکی Ok و دیگری Cancel می باشد . اگر روی Ok کلیک شود متد prompt() مقدار درون input را برمیگرداند ولی اگر روی Cancel کلیک شود این متد مقدار null برمی گرداند .

مثال :

<html>
   <head>     
      <script type = "text/javascript">
         <!--
            function getValue() {
               var retVal = prompt("Enter your name : ", "your name here");
               document.write("You have entered : " + retVal);
            }
         //-->
      </script>      
   </head>
   
   <body>
      <p>Click the following button to see the result: </p>      
      <form>
         <input type = "button" value = "Click Me" onclick = "getValue();" />
      </form>      
   </body>
</html>

. اتمام .

محصولات برگزیده مناسب شما

دوره ی آموزش ویوجی اس ( Vuejs 3) پروژه محور به همراه Nuxt js دوره ی آموزش جاوااسکریپت-صفرتاصد کارگاه آموزشی کار با Grunt js

آواسام ، با کیفیت ترین پلتفرم آموزشی برنامه نویسی

هزاران نفر با استفاده از دوره های آموزشی آواسام در طول سالهای گذشته توانسته اند وارد دنیای برنامه نویسی و کسب و کار آنلاین و اینترنتی شوند ، هدف آواسام تولید دوره های آموزشی منحصر به فرد با تمرکز روی پروژه های واقعی هست تا شما بتوانید یادگیری مباحث تخصصی را درون پروژه های واقعی یاد بگیرید

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

ثبت نام دوره های آواسام

پرمخاطب ترین و باکیفیت ترین پلتفرم آموزش برنامه نویسی

دوره های آموزشی

ساخته شده با عشق در آواسام

تمام حقوق محفوظ است