مشاوره رایگان

ورود عضویت کسب درآمد

سبد خرید شما 0

دریافت لینک های دانلود دریافت پستی درب منزل مبلغ کل: تومان

جهت دریافت کد تخفیف به کانال تلگرام مراجعه و یا با پشتیبان آنلاین هماهنگ نمایید

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

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

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

Alert Dialog Box

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

Dialog box سریع در هنگامی که ما بخواهیم ، یک کادر متن را به صورت pop-up برای دریافت متن از کاربر مورد استفاده قرار دهیم ، بسیار مفید است. از این رو ، این کادر محاوره ای این امکان را به ما می دهد که با کاربر تعامل داشته باشیم. کاربر باید فیلدها را تکمیل نموده و کلید OK را کلیک نماید.

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

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

مثال

مثال زیر نحوه استفاده از کادر محاوره ای prompt را نشان می دهد:

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

خروجی

پکیج های آموزشی جدید

آموزش ساخت ادیتور Html

فصلِ: 1 , تعداد قسمت ها: 4 , سطح: صفر تا صد

موضوعات: آموزش HTML5 آموزش JAVASCRIPT

این فصل در یک نگاه:

در این مجموعه به آموزش کامل ckeditor از نصب آن تا شخصی سازی و افزودن امکانات اختصاصی به ان می پردازیم.…

با توجه به اینکه آموزش جامع و کاملی در مورد نحوه ایجاد و شخصی سازی یک ادیتور در وب سایت و صفحات وب، وجود نداشت برآن شدیم تا یک سری مجموعه آموزشی کامل و جامع در رابطه با این موضوع تهیه نماییم…

طراحی و برنامه نویسی وب

برنامه نویسی موبایل

برنامه نویسی ویندوز

سایر

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

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

Alert Dialog Box

خروجی

Dialog Box Confirmation

مثال

خروجی

Prompt Dialog Box

مثال

خروجی

آیا نیاز به مدرک هم دارید؟