جاوا اسکریپت – Dialog Box ها

JavaScript سه نوع مهمی از Dialog Boxes را پشتیبانی می‌کند. این Dialog Boxes می‌توانند برای اعلام یک هشدار، یا برای دریافت تأییدیه از هر ورودی یا برای دریافت نوعی ورودی از کاربران استفاده شوند. در ادامه هر Dialog Boxes را مفصل بررسی خواهیم کرد.

Alert Dialog Box

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

با این حال، هنوز می‌توان از Alert Dialog Box برای پیام‌های friendlier استفاده کرد. Alert Dialog Box تنها یک دکمه “تأیید” برای انتخاب و پیشروی دارد.

مثال

<html>
   <head>   
      <script type = "text/javascript">
         <!--
            function Warn() {
               alert ("این یک پیام هشدار است!");
               document.write ("این یک پیام هشدار است!");
            }
         //-->
      </script>     
   </head>
   <body>
      <p>روی دکمه زیر کلیک کنید تا نتیجه را ببینید: </p>      
      <form>
         <input type = "button" value = "کلیک کنید" onclick = "Warn();" />
      </form>     
   </body>
</html>

Confirmation Dialog Box

Confirmation Dialog Box عمدتاً برای دریافت موافقت کاربر در هر گزینه استفاده می‌شود. Confirmation Dialog Box با دو دکمه نمایش می‌دهد: تأیید و لغو.

اگر کاربر روی دکمه تأیید کلیک کند، روش confirm() پنجره true را برمی‌گرداند. اگر کاربر روی دکمه لغو کلیک کند، سپس confirm() false را برمی‌گرداند. می‌توانید از یک Confirmation Dialog Box به صورت زیر استفاده کنید:

<html>
   <head>   
      <script type = "text/javascript">
         <!--
            function getConfirmation() {
               var retVal = confirm("آیا می‌خواهید ادامه دهید؟");
               if( retVal == true ) {
                  document.write ("کاربر می‌خواهد ادامه دهد!");
                  return true;
               } else {
                  document.write ("کاربر نمی‌خواهد ادامه دهد!");
                  return false;
               }
            }
         //-->
      </script>     
   </head>
   <body>
      <p>روی دکمه زیر کلیک کنید تا نتیجه را ببینید: </p>      
      <form>
         <input type = "button" value = "کلیک کنید" onclick = "getConfirmation();" />
      </form>      
   </body>
</html>

Prompt Dialog Box

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

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

Prompt Dialog Box دارای دو دکمه است: OK و Cancel. اگر کاربر دکمه OK را بزند، متد prompt() پنجره ورودی را وارد کرده از جعبه متنی برمی‌گرداند. اگر کاربر دکمه Cancel را بزند، متد prompt() null را برمی‌گرداند:

<html>
   <head>     
      <script type = "text/javascript">
         <!--
            function getValue() {
               var retVal = prompt("نام خود را وارد کنید: ", "نام شما اینجا");
               document.write("شما وارد کرده‌اید: " + retVal);
            }
         //-->
      </script>      
   </head>
   <body>
      <p>روی دکمه زیر کلیک کنید تا نتیجه را ببینید: </p>      
      <form>
         <input type = "button" value = "کلیک کنید" onclick = "getValue();" />
      </form>      
   </body>
</html>

پست های مرتبط

مطالعه این پست ها رو از دست ندین!
Python - محدود کردن داده (MongoDB Limit)

Python – محدود کردن داده (MongoDB Limit)

Python MongoDB محدود کردن نتایج برای محدود کردن نتایج در MongoDB، از متد limit() استفاده می‌کنیم. متد limit() یک...

بیشتر بخوانید
Python - بروزرسانی (MongoDB Update)

Python – بروزرسانی (MongoDB Update)

به‌روزرسانی یک رکورد برای به‌روزرسانی یک رکورد یا سند در MongoDB، از متد update_one() استفاده می‌کنیم. پارامتر اول متد...

بیشتر بخوانید
Python - حذف کالکشن (MongoDB Drop Collection)

Python – حذف کالکشن (MongoDB Drop Collection)

حذف کالکشن شما می‌توانید یک جدول یا کالکشن در MongoDB را با استفاده از متد drop() حذف کنید. مثالحذف...

بیشتر بخوانید

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.