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

10 / 10
از 1 کاربر

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

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

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

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

توابع را می توان در هر جای تگ های اسکريپت < script > ، تعريف کرد . اسکريپت هايي که در درون قسمت < 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 پاس می دهد . توجه شود که از متغير های ديگر نيز می توان برای فراخوانی استفاده کرد . برای مشاهده خروجی 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  ( مقدار بازگشتی ) ;

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

مثال : تابع 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" />

ارسال نظر و نظرات ثبت شده