آموزش جاوا اسکریپت

آموزش جاوا اسکریپت - کار با Dialog Boxes

جاوا اسکریپت از سه نوع مهم از Dialog Boxeها (جعبه تبادل دو طرفه، کادر محاوره ای) پشتیبانی می کند. این جعبه های محاوره ای می توانند برای بالا بردن هشدار(alert)، یا برای تایید هر ورودی و یا نوعی ورودی از کاربران مورد استفاده قرار گیرد.

Alert Dialog Box

کادر محاوره ای هشدار بیشتر برای ارسال یک پیام هشدار به کاربران استفاده می شود. برای مثال، اگر فیلد ورودی نیاز به وارد کردن برخی متن داشته باشد اما کاربر هر ورودی را ارائه ندهد به عنوان بخشی از اعتبار سنجی، می توانید از یک alert box  (کادر هشدار) برای ارسال یک warning message (پیام هشدار) استفاده کنید.

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

خروجی

 

Confirmation Dialog Box

 تایید dialog box اغلب برای رضایت کاربر در هر گزینه استفاده می شود. یک کادر محاوره با دو دکمه نمایش داده می شود:  Cancel (لغو).

اگر کاربر روی دکمه OK کلیک کند، پنجره متد confirm() مقدار true را بر می گرداند و اگر کاربر روی دکمه  cancel کلیک کند، پنجره متد 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

جعبه محاوره ای prompt  در زمانی  که می خواهید یک جعبه متن را برای ورودی کاربر pop-up (وارد) کنید بسیار مفید است. بنابراین، شما را قادر به  ارتباط  با کاربر می سازد. کاربر نیاز به پر کردن فیلد و کلیک بر روی OK دارد. این جعبه محاوره با استفاده از متد prompt () که دو پارامتر را می گیرد نمایش داده می شود:

  • یک label (برچسب) که می خواهید در text box (جعبه متن) نمایش داده شود.
  • یک رکورد پیش فرض که در text box (جعبه متن) نمایش داده می  شود.

این جعبه محاوره دارای دو دکمه:   OK و Cancel   می باشد. اگر کاربر دکمه OK را کلیک کند، پنجره متد prompt () مقدار وارد شده را از text box باز می گرداند  و اگر کاربر دکمه  Cancel را کلیک کند، پنجره متد prompt () مقدار null (خالی) را باز می گرداند.  

مثال

مثال زیر نحوه استفاده از prompt 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>

خروجی

در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش جاوا اسکریپت

Learn JavaScript

سرفصل ها

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

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

سوال شما با موفقیت ثبت شد. برای اینکه بتوانیم به شما اطلاع رسانی کنیم، موارد زیر را وارد کنید:

لطفا چند لحظه منتظر بمانید ...