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

تعریف تابع:

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

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

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

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

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

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

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

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

توابع را می توان در هر جای تگ های اسکریپت < script < ، تعریف کرد . برای آشنایی با مکان تعریف تگ اسکریپت در صفحات HTML ، به قسمت آموزش مکان اسکریپت ها در صفحات وب بروید .

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

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

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

function   نام تابع ( )

 {

   دستورات تابع

 }

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

< script type="text/javascript" >

  function welcome( )

    {

      document.write ( "welcome to DeveloperStudio" )

    }

< /script >

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

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

نام تابع ( ) ;

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

< html >

  < head >

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

  < /head >

  < body >

    < script type="text/javascript" >

      function welcome( )

       {

         document.write ( "welcome to DeveloperStudio" )

       }

    < /script >



    < script type="text/javascript" >

        welcome ( ) ;

     </script>

  < /body >

< /html >

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

مثال: در مثال زیر تابع welcome که در مثال قبل توسط یک اسکریپت دیگر فراخوانی شده بود ، در اینجا توسط رویداد کلیک ( onclick ) دکمه فرمان btnclick فراخوانی می شود . برای فراخوانی تابع بر روی دکمه فرمان مثال کلیک کنید .

< html >

  < head >

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

  < /head >

  < body >

    < script type="text/javascript" >

      function welcome( )

       {

         document.write ( "welcome to DeveloperStudio" )

       }

    < /script >



    < input type="button" id="Button1" onclick="welcome( )" value=" click me ! " / >

  < /body >

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

کد

Number 1 : 

   Number 2 : 

    multiple

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

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

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

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

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

مثال: تابع multiple را در مثال قبل با دستور return بازنویسی کرده ایم . در این حالت تابع به جای استفاده از دستور document.write با دستور return ، مقدار را برای چاپ خروجی به تابع Call_Function بر می گرداند:

< script type="text/javascript" >

  function multiple ( num1 , num2 )

    {

      return ( num1 * num2 ) ;

    }

< /script >



< script type="text/javascript" >

  function Call_Function ( )

    {

        var a = Text1.value ;

        var b = Text2.value ;

        document.write (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" />