دستورات مقدماتی Java Script

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

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

  1. کادر پيام يا هشدار ( alert Box )
  2. کادر دريافت تاييد (confirm Box )
  3. کادر دريافت ورودی ( prompt Box )

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


1 ) کادر پيام يا هشدار ( alert Box)

از کادر alert Box :

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

alert ( " متن پيام يا هشدار " ) ;

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

Example
< script type="text/javascript" >
  function Alert_Box ( )
    {
      alert ( " Welcome To DeveloperStudio " ) ;
    }
</script>

<input type="button" id="btnAlert" value=" Alert ! " onclick="Alert_Box( )" />
کد
خروجی

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

Example
< 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()" />
کد
Enter Number :   
خروجی

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

Example
< 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()" />
کد
خروجی


2 ) کادر دريافت تاييد ( confirm Box ) :

از کادر دريافت تاييد ، برای اعلام يک پيام به کاربر و دريافت نظر آن مبنی بر قبول يا عدم قبول پيام مورد نظر استفاده می شود .
اين کادر دارای 2 دکمه فرمان OK و Cancel است ، که در صورت انتخاب گزينه OK ، کادر مقدار مثبت ( True ) و در صورت انتخاب گزينه Cancel ، کادر مقدار منفی ( False ) را به صفحه بر می گرداند .
شکل کلی تعريف يک کادر تاييد به صورت زير است :

confirm ( " متن پيام " ) ;

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

نام متغير  =  confirm ( "متن پيام" ) ;

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

Example
< 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( )" />
کد

خروجی


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

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

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

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

Example
< 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 در نظر گرفته شده است . برای مشاهده خروجی بروی دکمه فرمان کليک کرده و سپس نام مقصد را انتخاب کنيد . در صورت وارد کردن اسم نادرست ، يک کادر هشدار ظاهر خواهد شد :

Example
< 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 = "../Default.aspx" ;
              break ;
            case "Html" :
              document.URL = "../HTML/introducehtml.aspx" ;
              break ;
            case "CSS" :
              document.URL = "../CSS/CSSIntroduce.aspx" ;
              break ;
            case "Java Script" :
              document.URL = "../JavaScript/Java_Script_Introduce.aspx" ;
              break ;
            case "SQL" :
              document.URL = "../SQL/SQLIntroduce.aspx" ;
              break ;
            default :
              alert ( "Incorrect Name" ) ;
        }
}
< /script>

<input type="button" id="Button2" onclick="Change_Page()" value="Enter Page" />
کد
خروجی


راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...         >>>>>  ورود به انجمن تخصصی


نظر خودتان درباره این صفحه را با ما در میان بگذارید :

آیا مطالب این صفحه برای شما مناسب و مفید بود ه است :

نام :                 
آدرس Email :    
 
نظر شما :  
 
سوال امنیتی : پایتخت ایران ؟