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

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

جعبه گفتگوی هشدار (Alert Dialog Box)

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

با این حال، هنوز می توان از جعبه هشدار برای پیام های دوستانه استفاده کرد. جعبه هشدار فقط یک دکمه "تأیید" دارد که کاربر می تواند با آن ادامه دهد.

مثال


<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>

جعبه گفتگوی تأیید (Confirmation Dialog Box)

جعبه گفتگوی تأیید عمدتاً برای گرفتن موافقت کاربر در مورد یک گزینه مشخص استفاده می شود. این جعبه گفتگو با دو دکمه تأیید و لغو نمایش داده می شود.

اگر کاربر بر روی دکمه تأیید کلیک کند، متد confirm() ویندو ارزش true را برمی گرداند. اگر کاربر بر روی دکمه لغو کلیک کند، آنگاه confirm() ارزش 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>

جعبه گفتگوی ورودی (Prompt Dialog Box)

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

این جعبه گفتگو با استفاده از یک متد به نام prompt() نمایش داده می شود که دو پارامتر دارد: (i) برچسبی که می خواهید در جعبه متنی نمایش داده شود و (ii) یک رشته پیش فرض برای نمایش در جعبه متنی.

این جعبه گفتگو دارای دو دکمه تأیید و لغو است. اگر کاربر بر روی دکمه تأیید کلیک کند، متد prompt() ارزش وارد شده در جعبه متنی را برمی گرداند. اگر کاربر بر روی دکمه لغو کلیک کند، متد prompt() ارزش 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>

تغییر مسیر صفحه - درس قبلی

درس بعدی - کلمه کلیدی void