منوهای Pop-Up در جاوا اسکریپت

توسط کادر های Pop-Up در جاوا اسکریپت، می توان به کاربر پیغام اخطار داد، از آن تایید گرفت و یا ورودی دریافت کرد. این کادر ها در مواقع مورد نظر ظاهر شده و عملیات تعیین شده برای آنها انجام خواهند داد.

به طور کلی ۳ نوع کادر Pop-Up در جاوا اسکریپت داریم:

• کادر پیام یا هشدار ( alert Box )
• کادر دریافت تایید (confirm Box )
• کادر دریافت ورودی ( prompt Box )

در ادامه به معرفی و توضیح هر یک از کادرهای فوق می پردازیم:

۱ ) کادر پیام یا هشدار ( alert Box)

از کادر alert Box، برای اعلام یک پیام یا هشدار به کاربر استفاده می شود . این پیام که از قبل باید تعیین شده باشد ،در یک کادر ظاهر شده و تا زمانی که کاربر دکمه Ok را انتخاب نکند ، از بین نمی رود.

شکل کلی تعریف یک کادر منتی به صورت زیر است:

alert ( ” متن پیام یا هشدار ” ) ;

مثال: در مثال زیر یک کادر alert Box در تابع Alert_Box تعریف شده است . این تابع توسط دکمه فرمان ! Alert ، فراخوانی شده و کادر پیام خود را ظاهر می کند.

< script type="text/javascript" >

  function Alert_Box ( )

    {

      alert ( " Welcome To DeveloperStudio " ) ;

    }

</script>

<input type="button" id="btnAlert" value=" Alert ! " onclick="Alert_Box( )" />

مثال ۲: در مثال زیر یک کادر متن و یک دکمه فرمان قرار داده شده است . کاربر باید یک عدد را در کادر متن وارد کرده و بر روی دکمه فرمان کلیک کند . چنانچه عدد ورودی از ۱۰ کمتر باشد ، برنامه عبارت Welcome to DeveloperStdio را در خروجی چاپ کرده و در غیر این صورت یک کادر پیام با متن Number too big را به کاربر نشان می کند.

< script type="text/javascript" >

  function Alert_Box2 ( )

    {

      var Num = txtNum.value ;

      if ( Num < 10 )

        document.write ( "Welcome to DeveloperStudio " ) ;

      else

        alert ( " Number too big " ) ;

    }

< /script >


< input type="text" id="txtNum" / >

< input type="button" id="btnAlert2" value=" Alert ! " onclick="Alert_Box2()" />

نکته: می توان در متن پیام کادرهای جاوا اسکریپت ، به تعداد مورد نیاز خط جدید ایجاد کرد . برای این منظور ، در متن پیام از کاراکتر ‘ \n ‘ به شرحی که در مثال زیر آمده است ، استفاده می شود :

< script type="text/javascript" >

  function Alert_Box3 ( )

    {

      alert ( "Hello . Dear User " + '\n' + "Welcome to DeveloperStudio ") ;

}

< /script >


< input type="button" id="btnAlert3" value=" Alert ! with Line Brakes " onclick="Alert_Box3()" />

۲ ) کادر دریافت تایید ( confirm Box )

از کادر دریافت تایید ، برای اعلام یک پیام به کاربر و دریافت نظر آن مبنی بر قبول یا عدم قبول پیام مورد نظر استفاده می شود.

این کادر دارای ۲ دکمه فرمان OK و Cancel است ، که در صورت انتخاب گزینه OK ، کادر مقدار مثبت ( True ) و در صورت انتخاب گزینه Cancel ، کادر مقدار منفی ( False ) را به صفحه بر می گرداند.

شکل کلی تعریف یک کادر تایید به صورت زیر است:

confirm ( ” متن پیام ” ) ;

نکته مهم: از مقدار برگشتی یک کادر تایید می توان در برنامه نویسی استفاده کرد . برای این منظور باید مقدار بازگشتی را در یک متغیر به شکل زیر ذخیره کرده و سپس از آن متغیر استفاده کرد . به مثال دقت کنید :

نام متغیر  =  confirm ( “متن پیام” ) ;

مثال: در مثال زیر یک تابع با یک کادر تایید ، قرار داده شده است . این تابع با دکمه فرمان btnChange ، فراخوانی می شود و کادر تایید خود را نشان می دهد . کادر از کاربر درباره رفتن به صفحه اصلی سایت می پرسد ، که در صورت تایید و فشردن دکمه OK مروگر به صفحه اصلی رفته و در صورت زدن دکمه Cancel یک پیام در خروجی چاپ می کند:

< script type="text/javascript" >

  function Change_Page( )

    {

      var x = confirm ( "Do you want go to home page ? " ) ;

      if ( x == true )

        document.URL = "../Default.aspx" ;

      else

        document.write ( " You pressed Cancel ! " ) ;

    }

< /script >

< input type="button" id="btnChange" value=" go to Home Page ? " onclick="Change_Page( )" />

۳ ) کادر دریافت ورودی ( prompt Box )

از کادر دریافت ورودی ، برای اعلام یک پیام به کاربر و دریافت یک ورودی از وی استفاده می شود . در این حالت یک کادر حاوی پیام مورد نظر ، یک کنترل متنی برای ورود مقدار ، دکمه OK برای تایید و ارسال مقدار ورودی به صفحه و دکمه Cancel برای لغو عملیات کادر ، بر روی صفحه نمایش داده می شود.

همچنین می توان یک مقدار پیش فرض نیز در کادر تعیین کرد ، که هموراه به صورت پیش فرض در کنترل متنی کادر نمایش داده خواهد شد . تعیین مقدار پیش فرض اختیاری است.

شکل کلی تعریف یک کادر دریافت ورودی سه صورت زیر است:

prompt ( ” مقدار پیش فرض ” , ” متن پیام کادر” ) ;

مثال: در مثال زیر یک کادر دریافت ورودی ، برای دریافت نام کاربر در تابع Hello_User تعریف شده است . این تابع با کلیک بر روی دکمه فرمان Enter Name فراخوانی شده و سپس با دریافت نام کاربر یک پیام خوش آمد به کاربر در خروجی اعلام می کند . برای مشاهده خروجی بروی دکمه فرمان Enter Name کلیک کرده و سپس نام خود را در کادر وارد کنید:

< script type="text/javascript" >

  function Hello_User( )

    {

      var name = prompt ( "enter your name") ;

      if ( name != null )

        document.write ( "hello dear " + name + " " + "Welcome to DeveloperStudio" ) ;

    }

< /script >



< input type="button" id="btnHello" onclick="Hello_User()" value="Enter Name" />

مثال: در مثاب زیر یک کادر دریافت تایید در تابع Change_page تعریف شده است . این کادر یک ورودی ، که نام یکی از بخش های آموزشی سایت DeveloperStudio است ، را از کاربر دریافت کرده و سپس آدرس مرورگر را به آدرس مربوط با آن نام تغییر می دهد . در این کادر مقدار پیش فرض Home Page در نظر گرفته شده است . برای مشاهده خروجی بروی دکمه فرمان کلیک کرده و سپس نام مقصد را انتخاب کنید . در صورت وارد کردن اسم نادرست ، یک کادر هشدار ظاهر خواهد شد:

< script type="text/javascript" >

  function Change_Page( )

    {

        var page = prompt ( "Where do you want to go ? " , "Home Page" ) ;

        switch ( page )

        {

            case "Home Page" :

              document.URL = "../index.php" ;

              break ;

            case "Html" :

              document.URL = "../web-design/html" ;

              break ;

            case "PHP" :

              document.URL = "../articles/web-design/php" ;

              break ;

            case "Java Script" :

              document.URL = "../articles/web-design/javascrirpt" ;

              break ;

            case "Wordpress" :

              document.URL = "../articles/web-design/wordpress" ;

              break ;

            default :

              alert ( "Incorrect Name" ) ;

        }

}

< /script>

<input type="button" id="Button2" onclick="Change_Page()" value="Enter Page" />