• توجه: در صورتی که از کاربران قدیمی ایران انجمن هستید و امکان ورود به سایت را ندارید، میتوانید با آیدی altin_admin@ در تلگرام تماس حاصل نمایید.

جاوا اسکریپت-آشنایی با توابع (Functions)

S

sky boy

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

تابع چیست و چه کاربردی دارد؟

اولین سوالی که ممکن است به ذهنتان برسد این است که اصلا تابع چیست و چه کاربردی دارد؟!
پاسخ این است که توابع یا Functions بیشتر شبیه ماشین هایی هستند که با دستورالعملی ثابت، هر بار با توجه به ورودی که دریافت می کنند،خروجی متفاوت می دهند،
مثلا در دنیای واقعی، دستگاه چاپی را تصور کنید، مسلما با توجه به رنگ ها، تنظیمات و داده هایی که تعیین می کنید، خروجی منحصر به فردی خواهید داشت!
عملکرد توایع هم بی شباهت به این مثال نیست، در برنامه نویسی شرایطی پیش می آید که یک رفتار به تعداد خیلی زیاد ممکن است تکرار شود،
مثلا یک فونت در صفحات مختلف تنظیم گردد، اگر بخواهیم هر بار تمام جزئیات را تک به تک برای هر صفحه بنویسیم،
علاوه بر اینکه این کار وقت زیادی از ما می گیرد، باعث افزایش ضریب خطا و حجم صفحات می شود،
از این رو، روش بهتر و حرفه ای تر آن است که یک بار الگویی را به شکل تابع بنویسیم و هر بار ورودی های متفاوت (یا مشابه) به آن بدهیم و خروجی دریافت کنیم.

 
S

sky boy

متخصص بخش برنامه نویسی
syntax یا شیوه نگارش توابع در جاوا اسکریپت

همانطور که گفته شد، توابع در جاوا اسکریپت (JavaScript)، شباهت زیادی به PHP دارند،
به این صورت که با عبارت function تعریف می شوند و مقادیری به عنوان آرگومان (آرگومان به زبان ساده یعنی همان ورودی هایی که به تابع داده می شود) می پذیرند،
مثال زیر نحوه تعریف یک تابع ساده را در جاوا اسکریپت نشان می دهد.
کد: 
<script type="text/javascript">
//<![CDATA[
function username (n,c){
    var name = 'نام شما: '+ n + '<br />';
    var country = 'کشور شما: '+ c + '<br />';
    var output = name + country;
    return output;    
}
document.write(username('admin','Iran'));
//]]>
</script>
توضیح:
- همانطور که ملاحظه می کنید، در این تابع دو آرگومان فرضی (n و c) به عنوان نام کاربر و کشور او دریافت می شود.
- سپس درون تابع، سه متغیر تعریف شده است با نام های name، country و output که در واقع نهایتا خروجی به صورت
نام کاربر:
مقادیر کشور کاربر:
مقادیر ارسال می شود.
- در قسمت return، خروجی تابع تعیین می شود، در اینجا return متغیر output را که خود حاصل جمع دو متغیر name و country است،
به عنوان خروجی تابع برمی گرداند.
- دقت کنید که توابع در جاوا اسکریپت باید حتما به صورت رویدادی فراخوانی شوند
(مثلا onclick یا onload و...)، در حالت عادی وجود یک تابع در صفحه به خودی خود، کار خاصی انجام نمی دهد،
در مثال بالا فراخوانی تابع با دستور document.write انجام شده است.
- پیش تر و در مطالب قبل، گفته شد که:
قسمت مربوطه به CDATA، برای جلوگیری از پردازش کدهای جاوا اسکریپت به شکل html و نامعتبر شدن کدنویسی از لحاظ سیستم اعتبار سنجی سایت w3c.org و سرویس های مشابه است.
 
S

sky boy

متخصص بخش برنامه نویسی
نحوه فراخوانی توابع در جاوا اسکریپت

همانطور که در توضیحات بالا اشاره شد، توابع در جاوا اسکریپت بدون وجود رویداد ها، کاربردی ندارند،
یک رویداد به معنی حالتی است که پس از وقوع آن، موتور تابع به حرکت می افتد، درست شبیه به استارت یک خودرو!
در مثال زیر شیوه فراخوانی یک تابع را با دو رویداد پرکاربرد onclick و onload ملاحظه می کنید.
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>نحوه فراخوانی توابع در جاوا اسکریپت</title>
<script type="text/javascript">
//<![CDATA[
function add (num1,num2){
    var output = num1 + num2;
    return document.write(output);    
}
//]]>
</script>
</head>
<body>
<a href="#" onclick="add(3,6);">برای دیدن نحوه عملکرد تابع در جاوا اسکریپت، کلیک کنید</a>
</body>
</html>
توضیح:
- تابع بالا با یک رویداد onclick اجرا می شود.
- دقت کنید که نحوه تعیین مقادیر در نوع رفتار تابع اثرگذار است،
مثلا اگر کد بالا را به صورت زیر فراخوانی کنید، به جای جمع دو عدد، حاصل ترکیب آنها به صورت یک رشته نشان داده می شود.
کد: 
//نمایش نتیجه به صورت یک رشته متنی
onclick="add('3','6');"
//نمایش نتیجه به صورت حاصل جمع دو عدد
onclick="add(3,6);"

در کد زیر، از رویداد onload برای فراخوانی یک تابع استفاده شده که می توانید از آن استفاده کنید.
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>نحوه فراخوانی توابع در جاوا اسکریپت</title>
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
</style>
<script type="text/javascript">
//<![CDATA[
function welcome (){
    var wel = 'این پیام با فراخوانی تابع در جاوا اسکریپت نشان داده می شود';
    var output = alert(wel);
    return output;    
}
//]]>
</script>
</head>
<body onload="welcome();">
تابع onload در تگ body تنظیم شده است.
<hr />
در این مثال، تابع فرضی welcome با رویداد onload اجرا و با دستور alert یک پیام به خروجی ارسال می شود. 
</body>
</html>

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