این آموزش در تاریخ ۱۴۰۱/۰۳/۲۳ آپدیت شده است.
کار با توابع یا Functions در جاوا اسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با توابع یا Functions در جاوا اسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
- 1 کار با توابع یا Functions در جاوا اسکریپت
- 2 نحوه تعریف تابع در زبان جاوااسکریپت
- 3 پارامتر ها و آرگومان ها در توابع
- 4 تعریف تابع بدون پارامتر
- 5 تعریف تابع با پارامتر
- 6 نحوه فراخوانی یا اجرای یک تابع
- 7 متغیرهای محلی یا Local Variables در توابع
- 8 کلمه کلیدی Return در توابع
- 9 تعریف تابع در درون متغیر
- 10 نحوه تعریف توابع تودرتو در جاوااسکریپت
کار با توابع یا Functions در جاوا اسکریپت
خب اصلا تابع چیه؟ و به چه درد میخوره؟ ببینید دوستان بطور کلی به مجموعه ای از کدها در کنار هم، که قراره یه کار خاصی رو انجام بدن میگیم تابع .
خب حالا به چه درد میخوره؟ از مهمترین مزایای تابع نویسی میتونیم به بالارفتن سرعت و خوانایی برنامه و از همه مهمتر جلوگیری از اجرای کدهای تکراری و در نهایت داشتن کدنویسی تمیز اشاره کرد.
بفرض مثال من میخوام چندین متغیر رو باهمدیگه جمع ریاضی کنم، خب در حالت عادی و بدون استفاده از تابع میایم مثلا چنتا متغیر با مقدار مشخص تعریف میکنیم و بعدش متغیرهارو با همدیگه جمع میکنیم. ( چیزی شبیه به دستورات زیر )
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script> var a = 5; var b = 5; var c = 7; var d = 7; document.write(a + b); document.write("<br>"); document.write(c + d); </script> |
خب حالا فکرشو کنید شاید بخوایم ۱۰۰۰ تا عدد رو باهم جمع کنیم خب اونوقت باید چکار کرد، میتونیم همانند دستورات بالا عمل کنیم ولی خب میدونید چقد حجم برناممون میره بالا
اینجاست که تابع بدردمون میخوره و میتونه از استفاده تکراری ( همینکه بخوایم تعداد زیادی متغیر تعریف و مقدار بدیم بهشون ) دستورات جلوگیری کنه در نتیجه سرعت اجرای برناممون رو بالا ببره، به همین سادگی
Free-Learn
نحوه تعریف تابع در زبان جاوااسکریپت
برای ایجاد یا تعریف یک تابع در زبان جاوااسکریپت ما باید از کلمه کلیدی function استفاده نماییم بعدش نام تابع مون رو مشخص کنیم و در نهایت یه پرانتز باز و بسته ایجاد کنیم.
که توی این پرانتز هم اگه بخوایم میتونیم پارامترهای دلخواه مون رو برای تابع مشخص و یا تعریف نماییم، و در نهایت باید براکت } باز و براکت { بسته رو بنویسیم، و در آخرم هرچی داخل این براکت { } نوشته شه میشه تابع ما.
شکل کلی یه تابع رو میتونیم بصورت زیر نمایش دهیم :
|
1 2 3 |
function Name ( Parameter1 , Parameter2 , Parameter3 , ... ) { // کدهایی که میتونن اجرا شن } |
Free-Learn
پارامتر ها و آرگومان ها در توابع
بنظره شما پارامتر یا Parameter و آرگومنت ( یا خودمونی آرگومان ) یا Argument در توابع به چه چیزهایی گفته میشه؟ یعنی بطور کلی میخوایم ببینیم پارامترها و آرگومان ها چی هستند!؟
خب بطور کلی به اون چیزی که درون پرانتز تابع تعریف میشه و میتونه عملی ( کاری ) رو انجام بده میگیم پارامتر ( Parameter ) و به مقداری که باید برای همین پارامتر وارد میشه میگیم آرگومان ( Argument )
|
1 2 3 4 5 6 7 8 9 |
<script> function test( Parameter1 , Parameter2 ){ ..... } test( Argument1 , Argument2 ); </script> |
Free-Learn
تعریف تابع بدون پارامتر
در ادامه ی آموزش کار با توابع یا Functions در جاوا اسکریپت میخوایم ببینیم یک تابع بدون پارامتر به چه شکل هست، خب مشخصه دیگه ، وقتی داخل پرانتز هیچ پارامتری نباشه برای مقدار گرفتن، میشه تابع بدون پارامتر.
مثال : تعریف یک تابع بدون پارامتر ( چون هیچ پارامتری نداریم پس پرانتز خالی میمونه )
|
1 2 3 4 5 6 7 |
<script> function ShowMessage(){ alert("سلام خوبی؟"); } </script> |
Free-Learn
تعریف تابع با پارامتر
ما میتونیم به راحتی داخل پرانتز به دلخواه خودمون پارامتر تعریف کنیم و در خروجی از همون پارامترها استفاده نماییم، مثلا در دستورات زیر من ۱دونه پارامتر با نام name تعریف کردم، بعدش در خروجی میتونیم به راحتی مقدار این پارامتر رو دریافت نماییم به همین راحتی.
مثال : تعریف یک تابع با پارامتر ( اون name میشه پارامتر ما )
|
1 2 3 4 5 6 7 |
<script> function ShowMessage( name ){ alert(" سلام " + name + " خوبی "); } </script> |
Free-Learn
نحوه فراخوانی یا اجرای یک تابع
اگه توجه کرده باشید در مثال های قبلی من بارها تابع رو اجرا میکردم و خروجی میگرفتم ، حالا میخوام بطور دقیق تر بررسی کنیم که چجوری میشه یه تابع رو اجرا کرد؟ یعنی برای اجرا یا فراخوانی یا صدازدن یه تابع باید چکار کنیم؟
چندین روش برای اجرا ( فراخوانی یا صدا زدن یا Call ) یه تابع وجود داره :
- استفاده از تابع در رویدادهای عمومی HTML ( مثلا وقتی بروی یه دکمه کلیک شد )
- فراخوانی یا اجرای تابع بصورت مستقیم در خوده دستورات جاوا اسکریپت
مثال شماره ۱ : فراخوانی تابع در رویداد onclick ( onclick یعنی وقتی بروی چیزی کلیک شد )
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<body> <button onclick="ShowMessage();">کلیک کن</button> <script> function ShowMessage(){ alert("سلام خوبی؟"); } </script> </body> |
مثال شماره ۲ : فراخوانی تابع بصورت مستقیم در خوده دستورات جاوااسکریپت ( تو این حالت دیگه لازم نیست حتما بروی چیزی کلیک شه، بلکه با لود شدن صفحه تابع هم درجا اجرا میشه )
|
1 2 3 4 5 6 7 8 9 |
<script> function ShowMessage(){ alert("سلام خوبی؟"); } ShowMessage(); </script> |
Free-Learn
متغیرهای محلی یا Local Variables در توابع
اگه آموزش کار با متغیرها در جاوا اسکریپت رو دنبال کرده باشید میدونید که جریان متغیرهای محلی چیه ( پیشنهاد میکنم حتما آموزش کار با متغیرها یا Variables در جاوااسکریپت رو مشاهده نمایید )
متغیرهایی که درون یک تابع تعریف میشوند بصورت محلی یا لوکال یا Local هستند، یعنی اون متغیرها فقط درون همون تابع قابل دسترسی هستند، یعنی بیرون از تابع به اون متغیرها نمیشه دسترسی داشت، همین تموم شد رفت.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script> function Run(){ // این میشه متغیر محلی // چون داخل تابع هستش var MySite = "Free-Learn"; document.write(MySite); } // داریم سعی میکنیم متغیر مای سایت رو در خروجی نشون بدیم // ولی نشون داده نمیشه // چون متغیر مای سایت داخل تابع هستش و فقط هم داخل تابع قابل دسترس می باشد document.write(MySite); </script> |
Free-Learn
کلمه کلیدی Return در توابع
یه کلمه کلیدی بنام Return ( به فارسی یعنی بازگشت/ برگشتی ) داریم که میتونه یه مقدار رو در تابع به خروجی برگشت بده ، یعنی بطور کلی میگه آقا تو این فلان مقدار رو به خروجی برای نمایش بده.
فرض میکنیم تابعی داریم برای محاسبه حاصل جمع ۲ عدد ( یعنی دقیقا همون مثالی که کمی بالاتر دیدیم )، خب در حالت عادی ما باید تابع رو تعریف کنیم بعدش حاصل جمع رو درون یه متغیر نگهداری و در نهایت اونو در خروجی چاپ کنیم. ( یعنی بصورت زیر میشه )
|
1 2 3 4 5 6 7 8 |
function Jame( Number_1 , Number_2 ){ var Result = Number_1 + Number_2; document.write(Result); } // برای اجرا کردن Jame(5,5); // 10 خروجی میشه |
ولی اگه بخوایم از کلمه کلیدی Return استفاده کنیم، دیگه نیاز نیست داخل تابع از document.write استفاده کنیم، بلکه خیلی راحتتر و سریع نتیجه رو به خروجی میفرستیم، ولی دیگه بعدش باید در خروجی خودمون حتما خروجی رو چاپ کنیم ( حالا با استفاده از document.write یا هر روش دیگه ای )
مثال شماره ۱ : بازگشت دادن ۲ پارامتر به خروجی برای محاسبه حاصل جمع
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> function Jame( Number_1 , Number_2 ){ return Number_1 + Number_2; } document.write( Jame(4,6) ); document.write( "<br>" ); document.write( Jame(10,10) ); </script> |
Free-Learn
تعریف تابع در درون متغیر
ما میتونیم در جاوااسکریپت تابع رو در درون یک متغیر نیز تعریف کنیم، یعنی در واقع مثه اینه که تابع رو بریزیم تو یه متغیر و بعد دیگه میتونیم همون متغیر رو فراخوانی و در خروجی نشونش بدیم.
مثال شماره ۱ : تعریف یک تابع بدون نام ( چون میخوایم بریزیمش تو متغیر پس میتونه نام نداشته باشه )
|
1 2 3 4 5 6 7 8 9 10 |
<script> var Jame = function ( Number_1 , Number_2 ){ var Result = Number_1 + Number_2; document.write(Result); } Jame(5,5); </script> |
Free-Learn
نحوه تعریف توابع تودرتو در جاوااسکریپت
در زبان جاوااسکریپت میتونیم توابع رو بصورت تودرتو ( یعنی یه تابع داخل یه تابع دیگه ) تعریف کنیم، و همیشه تابع هایی که ایجاد میشن به سطح بالاترشون ( یعنی بالا دستشون ) دسترسی دارند ولی تابع مادر نمیتونه به تابع های داخل خودش ( پایین دست ) دسترسی داشته باشه.
مثال شماره ۱ : ایجاد یک تابع در درون یه تابع دیگه
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script> function ShowMessage( Name , Family ){ function Show(){ document.write(Name + Family); } return Show(); } ShowMessage( "Sadegh" , " Asadi" ); </script> |
