مباحث از جمله پاس دادن متغیر به فانکشنها و نوشتن callback در هر فانکشن از جمله مواردی هستند که در این جلسه به آنها خواهیم پرداخت. فرض کنید هر روز قرار است یک کار تکراری انجام دهید. مثلا هر روز صبح زود، چای، قهوه یا شیر میل کنید. اگر خوردن صبحانه یک فانکشن (یک عمل تکراری) باشد، آن وقت نوع نوشیدنی که صبح زود میل میکنید (مثل شیر، چایی و قهوه) متغیر این فانکشن تکراری و روزانه است؛ متغیری که ممکن است هر روز بسته به نیازتان یکی را انتخاب کنید و به نتیجهی متناسب با انتخاب متغیرتان برسید.
بعد از این مقدمه کوتاه، به سراغ یک فانکشن واقعی در جاوا اسکریپت خواهیم رفت. فرض کنید یک فانکشن نیاز دارید که اسم و فامیلی فرد را بگیرد و آنها را به هم بچسباند. برای اینکه با یک بار نوشتن کد بتوانیم به چنین قابلیتی دست پیدا کنیم، چه باید کرد؟ باید نام و نام خانوادگی را بهعنوان متغیرهای فانکشن در نظر بگیریم! مثالهای زیر را ببینید تا درک بهتری از این موضوع کسب کنید.
مثال اول: یک سری اسم شامل محمد، علی و محسن داریم. در طرف دیگر یک سری فامیلی دلخواه مثل فراهانی، صدیقی و پورقاسمی داریم. حالا یک فانکشن نیاز داریم که کارش وصل کردن اسم هر فرد به یک فامیلی باشد. برای اینکه تنها با یک بار نوشتن یک فانکشن بتوانید این کار را انجام دهید:
۱) ابتدا یک فانکشن با نام دلخواه تعریف میکنیم:
function showMyName() {
}
۲) تا به این جلسه ما در کنار نام فانکشن (در اینجا showMyName) یک پرانتز خالی قرار میدادیم! این بار قرار است این پرانتزها با متغیرهای فانکشن پر شوند. در این فانکشن، ما درون پرانتز فانکشن سه متغیر با نامهای name و family نوشتهایم. به (متغیرها) که در داخل پرانتز فانکشن نوشته میشوند، متغیرهای فانکشن یا آرگیومنتهای فانکشن گفته میشود.
function showMyName(name,family) {
}
۳) حالا در داخل بلاک فانکشن (در واقع از باز تا بسته شدن آکولاد، بلاک و منطق اصلی فانکشن است) کار اصلی فانکشن را مینویسیم. کار اصلی فانکشن ما این است که متغیر نام و فامیلی را بگیرد و به هم بچسباند و نتیجه را به ما برگرداند. پس این وظیفه اصلی را در بلاک فانکشن تعریف میکنیم:
function showMyName(name,family) {
return name+family
}
نکته: اگر جلسه پیش را به خاطر داشته باشید، درون هر فانکشن به دستوری دسترسی داریم که return نام دارد! دستور return در واقع کارش ارائهی خروجی مطلوب از فانکشن است. در اینجا هم بعد از جمع کردن نام و نام خانوادگی با کمک دستور return، آن را به سمت کاربر باز میگردانیم!
۴) حالا نوبت به استفاده از این فانکشن است! تا به اینجای کار با نحوه نوشتن یک فانکشن دارای متغیر آشنا شدهایم! ولی چگونه باید از آن استفاده کنیم! این مرحله نحوه استفاده از یک فانکشن دارای متغیر است. به دقت به مثال زیر نگاه کنید:
var myName = showMyName('mohammad Hossein' , 'malek')
alert(myName)
همانطور که در این مثال دیدید، ما ابتدا نام فانکشن را نوشتهایم. همانطور که در جلسه پیش گفته شد، نوشتن نام فانکشن به همراه یک پرانتز باز و بسته، به معنای اجرای فانکشن است. سپس متغیرهای اسم و فامیل را بهصورت استرینگ به فانکشن پاس دادهایم! اگر به تعریف فانکشن نگاه کنید، این فانکشن دو متغیر پاس دادهشده را میگیرد و با یکدیگر جمع و نتیجه را Return میکند! پس متغیر myName در این مثال در نهایت حاوی مقدار خروجی return شده از سوی فانکشن خواهد بود.
اگر هنوز در درک ماهیت فانکشنها و نحوه تعریف متغیر برای آنها مشکل دارید نگران نباشید! میخواهیم این موضوع را از جنبهای سادهتر نگاه کنیم. برای سادهتر شدن مبحث بیایید یک مثال عینی روزمره بزنیم. یک دستگاه آبمیوهگیری را در نظر بگیرید. همانطور که این دستگاه از بخشهای مختلفی تشکیل شده است که هر کدام یک کار انجام میدهد و بخشهای مختلف آن با هم در ارتباط هستند، یک پروژه جاوا اسکریپت نیز از یک سری فانکشن تشکیل شده است. این فانکشنها گاهی به هم مرتبط میشوند و گاهی ارتباطی با هم ندارند؛ ولی بهطور کلی هر کدام بخشی از کار برنامه را بر عهده میگیرد و وظیفهای که برای تعریف شده است، انجام میدهد.
شما میتوانید هر نوع میوهای را بهعنوان ورودی در یک دستگاه آبمیوهگیری بیندازید و در نهایت یک مایع بهعنوان نوشیدنی نهایی تحویل بگیرید. درست است که هر بار نوع ماده ورودی عوض میشود؛ ولی عملکرد و کاری که روی ماده انجام میشود همیشه یکی است. در واقع فانکشنها هم همینقدر سر راست هستند!
وقتی ما یک فانکشن مینویسیم، در واقع یک عملکرد یا کاری را که قرار است بارها و بارها تکرار شود، در قالب یک کد مشخص تعریف میکنیم. سپس هر زمان که نیاز داشتیم این کد را مجددا استفاده میکنیم. برای اینکه بتوانیم هر بار که قصد استفاده از این تکه کد داریم، محتوای جدیدی بدان وارد کنیم و خروجی درست بگیریم، باید متغیرهایی برای آن تعریف کنیم. با نوشتن نامهای دلخواه در حین ساخت یک فانکشن، این متغیرها ایجاد میشود و فانکشن شما به یک سری متغیر جدید بهعنوان پارامتر دسترسی پیدا میکند.
حالا شما این قابلیت را دارید که هر بار میخواهید این فانکشن را استفاده کنید، اطلاعات دلخواهتان را بهعنوان ورودی به این فانکشن پاس بدهید تا فانکشن شما متغیرهای پاس دادهشده را بهعنوان ورودی در محاسباتش استفاده کند. برای درک بهتر گفتههای بالا، مثال دیگری میزنیم.
فرض کنید میخواهیم یک ماشین حساب ساده بنویسیم! برای آنکه هر بار دو عدد را با هم جمع کنیم چه راه حلی پیشنهاد میکنید؟ حتما میگویید یک فانکشن مینویسیم که متغیر اول و دوم را بهعنوان پارامترهای فانکشن دریافت کند و حاصل نهایی را نمایش دهد! درست است. این مثال به شیوه زیر نوشته میشود:
function calculator(num1,num2){
return num1 + num2
}
حالا هر بار بخواهیم دو عدد را جمع کنیم، کافی است از این فانکشن استفاده کنیم و دو متغیر عددی دلخواه را بدان پاس دهیم تا حاصل جمع آنها را به ما نمایش دهد. بهطور مثال میخواهیم ۵ و ۶ را از طریق این فانکشن جمع کنیم:
var fivePlusSix = calculator(5,6)
تفاوت بین فانکشنهای بدون متغیر و با متغیر:
اگر جلسه قبل را دنبال کرده باشید، میدانید که لزومی ندارد که همیشه یک متغیر به فانکشن بدهید. در واقع هنگامی که یک فانکشن را صدا میزنیم، میتوانیم بدون پاس دادن متغیر و به همان ترتیب جلسه قبلی عمل میکنیم:
function myFunction(){
//تعریف فانکشن بدون متغیر
}
myfunction() // صدا زدن یک فانکشن بدون متغیر مانند مثالهای قبلی
در این حالت فانکشن ما دارای متغیر خاصی نیست. در مثال زیر myFunction قرار است تعدادی متغیر را با هم جمع کند و نتیجه را در قالب پنجره alert نمایش دهد:
function myFunction(arg1,arg2,arg3) {
//درون فانکشن ما به arg1,arg2,arg3 دسترسی داریم
alert(arg1+arg2+arg3)
}
نکته جالب اینجا است که در حین صدا کردن یک فانکشن میتوانید هر نوع متغیری که دوست دارید بدان پاس دهید! یعنی وقتی داریم myFunction را صدا میزنیم، مهم نیست بهجای arg1 یک عدد گذاشتهایم یا متن! هر چه گذاشته باشیم در درون فانکشن ما عملیات تعیینشده را انجام خواهد داد. برای مثال در زیر ما سه اسم پاس دادهایم:
myFunction("ali ","sina ","mohammad")
و در مثال بعدی به جای سه اسم، سه عدد را بهعنوان متغیرهای فانکشن، پاس دادهایم:
myFunction("۱ ","۲ "," ۳")
ولی همانطور که در اجرای این کد مشاهده خواهید کرد، در هر حالت و با وجود متغیرهای متفاوتی که به فانکشن پاس دادهایم، در خروجی نهایی ما تفاوتی حاصل نشد. در واقع در هر سه حالت، فانکشن myFunction متغیرهایی را که بدان پاس دادهایم، صرف نظر از نام و نوع داده از ما گرفت، درون خود با اسمهای arg1,arg2,arg3 جمع کرد و خروجی آن را در قالب پنجره الرت به نمایش گذاشت.
نکات تکمیلی:
نکته اول: هر فانکشن میتواند بهصورت نامحدود متغیر جدید در خود جای دهد و سپس این متغیرها را در درون خود استفاده کند.
نکته دوم: لزومی ندارد همیشه یک استرینگ یا عدد را بهعنوان متغیر به فانکشن پاس بدهیم! ما حتی میتوانیم دادههایی را که از پیش در برنامه تعریف شدهاند، بهعنوان متغیر به فانکشن پاس بدهیم! مثال زیر را ببینید تا منظورمان از نکته را بهتر درک کنید.
فرض کنید که سه متغیر با نامهای name1 و name2 و name3 داریم:
var name1,name2,name3
همینجا باید بگوییم که حین تعریف چند متغیر میتوانید به جای اینکه هر بار کلمه var را بنویسید، یک بار آن را بنویسید و بین متغیرهای مختلف «,» بگذارید. بدین ترتیب مثل این است که سه متغیر جداگانه تعریف کرده باشید.
به هر یک از این متغیرها نام دلخواهمان را نسبت میدهیم:
name1 = "ali";
name2 = "davood"
name3 = "mahnaz"
سپس یک فانکشن تعریف میکنیم. در این فانکشن میخواهیم روی مقادیر متغیرهایی که بالاتر تعریف کردهایم تغییر ایجاد کنیم:
function myFunction(params1,params2,params3){
alert(params1,params2,params3)
}
این بار به جای کلمه arg از کلمه params استفاده کردیم تا بگوییم میتوانید هر نامی که دلتان میخواهد بهعنوان نام متغیرهای فانکشن استفاده کنید. این موضوع اهمیتی ندارد و هر نامی قابل قبول است. بدین ترتیب همه مثالهای زیر درست هستند:
function myFunction(one,two,three) {
}
function MyFunction(isItOk,HelloDude,ByDude) {
}
در تمامی این حالتها فانکشن ما خودش یک سری متغیر به نامهایی که داخل پرانتز نوشتهایم میسازد و از این به بعد هر چیزی که در حین صدا شدن فانکشن بدان پاس داده میشود با این نامها میشناسد.
نکات مهم:
۱) در حین پاس دادن پارامترها به فانکشنها به شماره آنها دقت کنید. برای مثال ما در زیر فانکشنی داریم که تنها یک متغیر میپذیرد:
function myFunction(arg1){
alert(arg1)
}
ولی در حین صدا زدن این فانکشن دو متغیر بدان پاس میدهیم:
myFunction("number1","number2")
در این حالت تنها ما به number1 که اولین متغیر است و با نام arg1 درون فانکشن myFunction شناخته میشود دسترسی داریم و نمیتوانیم از number2 استفاده کنیم.
۲) فرض کنید فانکشنی دارید که سه پارامتر دریافت میکند:
function myFunction(arg1,arg2,arg3){
alert(arg1)
alert( arg2)
alert(arg3)
}
و در حین صدا زدن:
myFunction("paraph1","paraph2")
در حین صدا زدن ما تنها دو متغیر بدان پاس دادهایم! پس تکلیف پارامتر سوم چه میشود! پارامتر سوم، درون فانکشن undefined یا تعریفنشده خواهد بود و نمیتوانید از آن استفاده کنید؛ چون اصلا در حین صدا زدن فانکشن تعریف نشده است.
مزیت استفاده از پارامترها در فانکشنها چیست؟
مهمترین مزیت این است که میتوانید با یک بار نوشتن فانکشن، یک کار ساده را با متغیرهای جدید تکرار کنید. یعنی یک بار یک فانکشن تعریف میکنید و عملیات خود را روی دادههای مختلف انجام میدهید؛ بدون آنکه نیاز باشد هر بار این فانکشن را تکرار کنید.
کال بک در فانکشنها (callBack):
Callback در واقع یک فانکشن است که بعد از اتمام یک فانکشن بلافاصله اجرا میشود. هر فانکشن میتواند دارای یک یا چند CallBack باشد. کال بک یکی از قابلیتهای فانکشن محسوب میشود که بعد از اجرای آن فانکشن و تمام شدن تمامی موارد آن مورد استفاده قرار میگیرد. مثلا فرض کنید میخواهید بعد از اینکه فلان اتفاق در فانکشن افتاد و تمام شد، به کاربر پیغام بدهد که کار شما با موفقیت انجام شد و پیغام الرت را به وی نمایش بدهد. نمایش پیغام آلرت، کال بک فانکشن برای فانکشن اصلی شما است که بهمحض تمام شدن فانکشن اصلی اجرا میشود.
نکته مهم در کال بک این است که تنها زمانی اتفاق میافتد که کار فانکشن بهصورت کامل و با موفقیت به اتمام رسیده باشد.
برای تعریف کال بک آخرین گزینه آرگیومنتهای شما باید فانکشن کال بک باشد. بعد از تعریف کال بک، آن را با همان اسمی که در آرگیومنتها تعریف کردیم صدا میزنیم:
function doSomething(callback) {
// کارهایی که فانکشن اصلی قرار است انجام دهد
// بعد از اتمام فانکشن اصلی فانکشن کال بک صدا زده میشود
callback('stuff', 'goes', 'here');
}
برای درک بهتر مثال توضیحات زیر را ببینید:
در ابتدا ما یک فانکشن کال بک که دوست داریم بعد از فانکشن اصلی اجرا شود مینویسیم (دقت کنید فانکشن کال بک باید قبل از فانکشن اصلی نوشته شود؛ چون جاوا اسکریپت کدهای شما را از بالا به پایین میخواند و اگر در حین صدا زدن فانکشن اصلی، کال بک قبلا تعریف نشده باشد، با ارور تعریفنشده روبهرو خواهید شد).
نام فانکشن کال بک ما iAmTheCallBackFunction است. این فانکشن سه متغیر a, b, c را میگیرد و آنها را در کنار هم و با یک فاصله (اسپیس) الرت میکند.
function iAmTheCallBackFunction(a, b, c) {
// من کالبک فانکشن هستم
alert(a + " " + b + " " + c);
}
حالا ما فانکشن اصلی خود را مینویسیم. نام این فانکشن mainFunction است. این فانکشن یک آرگیومنت به نام callback دارد که در واقع همان کال بک فانکشنی است که ما میخواهیم.
function mainFunction(callback){
//بعد از اتمام کار فانکشن ما کال بک را صدا بزن
callback()
}
حالا در حین صدا کردن فانکشن mainFunction میتوانیم iAmTheCallBackFunction را که خودش یک فانکشن است بهعنوان متغیر به فانکشن mainFunction پاس دهیم. سپس آن را در فانکشن اصلی استفاده کنیم. مطابق زیر:
mainFunction(iAmTheCallBackFunction);
بدین ترتیب بعد از تمام شدن فانکشن اصلی فانکشن کال بک بلافاصله صدا خواهد شد. از کال بک در موارد بسیار زیادی استفاده میشود. در جلسات آینده زمانی که سراغ setTimeOut و setInterval برویم ماهیت اصلی استفاده از فانکشنها را خواهید آموخت.
مثال پایانی:
قبل از اتمام این جلسه، میخواهیم یک مثال ساده را بهصورت یک پروژه کوچک بیان کنیم تا بهتر با مفاهیم گفتهشده در مورد فانکشنها آشنا شوید. اگر خاطرتان باشد در جسات قبلی ما یک پروژه مدیریت رستوران آنلاین را آغاز کرده بودیم. حالا میخواهیم به کمک دانش فعلیمان آن را حرفهایتر از قبل بنویسیم.
توضیح پروژه: این پروژه قرار است به کاربر امکان بدهد تا یک سری غذا انتخاب کند و در صورتی که مشتری خرید بالاتر از ۱۰ هزار تومان داشت به وی تخفیف ۱۰ درصدی بدهد.
HTML
فایل جاوا اسکریپت
سخن پایانی:
.: Weblog Themes By Pichak :.