صفحه اصلی » پایگاه دانش » javascript » مبانی جاوا اسکریپت » دیالوگ باکس ها (Dialog Box) در جاوا اسکریپت

فهرست آموزش javascript

دیالوگ باکس ها (Dialog Box) در جاوا اسکریپت

۱۳۹۸/۰۹/۱۲ ۱۳۱

جاوا اسکریپت از سه نوع مهم از dialog box ها ( کادرهای محاوره ای ) پشتیبانی می کند. این dialog box ها می توانند برای نمایش یک پیام هشدار ، دریافت تأیید ورودی ، دریافت یک نوع ورودی از کاربران مورد استفاده قرار گیرند. در اینجا ، ما در مورد تک تک هر کدام از این dialog box ها صحبت خواهیم کرد.

Alert Dialog Box

یک alert dialog box بیشتر برای نمایش پیام اخطار برای کاربر مورد استفاده قرار می گیرد. به عنوان مثال اگر یک فیلد ورودی نیاز به وارد کردن متنی کوتاه داشته باشد اما کاربر هیچ ورودی آماده نکرده باشد، برای ارزیابی می توانید از یک alert box  برای نمایش پیام هشدار استفاده کنید.

با این وجود، یک alert box  برای نمایش پیام های مساعد هم می تواند مورد استفاده قرار گیرد. alert 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>

خروجی:

Dialog Box Confirmation

یک dialog box تأیید غالباً برای دریافت رضایت کاربر در مورد هر گزینه ای مورد استفاده قرار می گیرد. این dialog box با دو کلید OK و Cancel همراه است.

اگر کاربر کلید OK را کلیک نماید ، متد confirm() ، مقدار true را باز خواهد گرداند. اگر کاربر روی کلید Cancel کلید نماید ، متد confirm() ، مقدار false را باز می گرداند. می توانید از dialog box تأیید به صورت مثال زیر استفاده نمایید.

مثال:

<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

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

این باکس دیالوگ با استفاده از متدی به نام prompt() نمایش داده می شود که دو پارامتر می گیرد:

(i) برچسبی که می خواهید در یک کادر متنی نمایش داده شود

(ii) یک رشته پیش فرض برای نمایش در کادر متنی

این باکس دیالوگ دو گزینه دارد: OK و Cancel

اگر کاربر روی گزینه OK کلیک کند متد prompt() مقدار ورودی از کادر متنی را باز می گرداند. اگر کاربر روی گزینه Cancel کلیک کند، متد prompt() مقدار تهی (null) را باز می گرداند.

مثال:

مثال زیر نشان می دهد چطور از یک dialog box سریع استفاده کنید:

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

خروجی:

 

دانشجویار نماد اعتماد به دانشجویار مجوز نشر دیجیتال لوگو شرکت به پرداخت ملت logo-samandehi مجوز سازمان فنی حرفه ای کشور