توابع در جاوا اسکریپت

توابع در جاوا اسکریپت :

تعریف تابع :

تعریف تابع : یک تابع مجموعه ای واحد از یکسری دستورالعمل است که در هر بار فراخوانی ، کل دستورات درون آن یکبار اجرا می شود .

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

قابلیت های تابع :

استفاده از توابع در صفحات و اسکریپت ها ، امکانات زیر را به برنامه نویس می دهد :

    دستورات یک تابع ( حتی در زمانی که اسکریپت آن در درون صفحه قرار دارد ) ، تا زمانی که فراخوانی نشود ، اجرا نخواهد شد . از توابع برای تعریف دستور العمل هایی استفاده می شود که می خواهیم اجرای آنها کنترل شده باشد و در مواقع معینی ( مثل وقوع یک رویداد یا ... ) انجام شود .

    یک تابع را می توان از هر نقطه ای در صفحه فراخوانی کرد .

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

محل تعریف توابع :

توابع را می توان در هر جای تگ های اسکریپت ، تعریف کرد .

نکته مهم : در قسمت مکان قرار گیری اسکریپت ها در صفحات وب اشاره کردیم ، اسکریپت هایی که در درون قسمت < body > تعریف می شوند ، به محض لود شدن صفحه اجرا خواهند شد . اما چنانچه این اسکریپت ها شامل توابع باشند ، دستورات آن توابع تا زمان فراخوانی تابع اجرا نخواهند شد .

شکل کلی تعریف توابع :

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

function   نام تابع ( )

 {

   دستورات تابع

 }

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

Example

                                                                                                                                 < script type="text/javascript" >

  function welcome( )

    {

   ");   document.write ( "welcome to Gharbnet.ir

    }

< /script >       

نحوه فراخوانی تابع :

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

نام تابع ( ) ;

مثال :در مثال زیر تابع welcome را که در مثال قبل نیز استفاده کرده بودیم را توسط یک اسکریپت دیگر فراخوانی کرده ایم .

< html >

  < head >

    < title/ > عنوان صفحه < title >

  < /head >

  < body >

    < script type="text/javascript" >

      function welcome( )

       {

       ");  document.write ( "welcome to Gharbnet.ir

       }

    < /script >

    < script type="text/javascript" >

        welcome ( ) ;

     </script>

  < body/ >

< /html >

نکته : یک تابع را می توان توسط رویدادهای یک کنترل HTML مثل یک دکمه فرمان نیز فراخوانی کرد . در این حالت باید مقدار رویداد مورد نظر را در تگ کنترل ، برابر نام تابع در نظر گرفت . به مثال زیر دقت کنید .

نحوه تعریف پارامتر برای یک تابع :

تعریف پارامتر :پارامتر ، یک متغیر است که می توان در هنگام فراخوانی یک تابع ، مقدار آن را به تابع ارجاع داد . به پارامتر ، آرگومان نیز می گویند .

یک تابع می تواند ، چندین متغیر را به عنوان پارامتر ورودی دریتفت کند . پارامترهای یک تابع را باید در هنگام تعریف تابع ، در پرانتز مقابل نام آن تعیین کرد ، که پارامترها را با کاما از هم جدا می کنیم .

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

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

funciton   نام تابع   ( Parametr 1 , Parametr 2 , ... )
  {
    دستورات تابع
  }

مثال :  function multiple ( var num1 , var num2 )
         {
           دستورات تابع
         }

در هنگام فراخوانی یک تابع نیز باید به شکل زیر پارامترهای آن را مقدار دهی کرد . توجه شود که نوع و تعداد متغیرها باید کاملا یکسان با پارامترهای تعریف شده برای تابع باشد ، در غیر این صورت error رخ داده و تابع اجرا نمی شود .

function   نام تابع g ( Parametr 1 مقدار , Parametr 2 مقدار , ... )
  {
    دستورات تابع
  }

مثال : در مثال زیر تابع multiple را که در بالا تعریف کرده بودیم با تعیین پارامترهای لازم ، فراخوانی کرده ایم :

multiple ( 2 , 10 ) ;

نکته مهم : پارامتر های یک تابع ، به عنوان متغیرهای محلی برای آن تابع قابل استفاده هستند .

مثال : در مثال زیر تابع multiple با دو پارامتر num1 و num2 تعریف شده است ، که این تابع این دو عدد را در هم ضرب کرده و به عنوان خروجی روی صفحه نمایش می دهد . این تابع در یک اسکریپت دیگر توسط تابع Call_Function فراخوانی می شود . این تابع دو عدد را از دو کادر متن مثال دریافت کرده و به ترتیب آنها را در متغیرهای a , b ذخیره می کند .  سپس آن را در هنگام فراخوانی به تابع multiple پاس می دهد . توجه شود که از متغیر های دیگر نیز می توان برای فراخوانی استفاده کرد . برای مشاهده خروجی 2 عدد را در کادر متن ها وارد کرده و بر روی دکمه فرمان multiple کلیکگ کنید .

< script type="text/javascript" >
  function multiple ( num1 , num2 )
    {
      document.write ( num1 * num2 ) ;
    }
< /script >

< script type="text/javascript" >
  function Call_Function ( )
    {
        var a = Text1.value ;
        var b = Text2.value ;
        multiple ( a , b ) ;    فراخوانی تابع با پارامترهای لازم و چاپ خروجی
    }
< /script >
< input type="button" id="Button2" onclick="Call_Function( )" value=" click me ! " />
< input type="text" id="Text1" />
< input type="text" id="Text2" />

نحوه تعریف مقدار بازگشی برای یک تابع :

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

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

return  ( مقدار بازگشتی ) ;

نکته : مقدار بازگشتی ، می تواند یک رشتته یا عدد ، یک متغیر و یا یک عبارت محاسباتی باشد .

منوهای 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 Gharbnet.ir " ) ;     } </script> <input type="button" id="btnAlert" value=" Alert ! " onclick="Alert_Box( )" />	کد

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

Example
< script type="text/javascript" >   function Alert_Box2 ( )     {       var Num = txtNum.value ;       if ( Num < 10 )         document.write ( " Welcome to gharbnet.ir " ) ;       else         alert ( " Number too big " ) ;     } < /script > < input type="text" id="Text1" / > < input type="button" id="btnAlert2" value=" Alert ! " onclick="Alert_Box2()" />	کد

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

Example
< script type="text/javascript" >   function Alert_Box3 ( )     {       alert ( "Hello . Dear User " + '\n' + " Welcome to gharbnet.ir ") ; } < /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 = "gharbnet.ir" ;       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 gharbnet.ir " ) ;     } < /script > < input type="button" id="btnHello" onclick="Hello_User()" value="Enter Name" />	کد

مثال : در مثال زیر یک کادر دریافت تایید در تابع Change_page تعریف شده است . این کادر یک ورودی ، که نام یکی از بخش های آموزشی سایت Welcome to gharbnet.ir است ، را از کاربر دریافت کرده و سپس آدرس مرورگر را به آدرس مربوط با آن نام تغییر می دهد . در این کادر مقدار پیش فرض 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 = "../ gharbnet.ir " ;               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" />

کد