خواندن ۶ دقیقه·۶ سال پیش

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

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

در طول آموزش با چند مثال ساده و بصورت تقریبا مبتدی مسائل پایه را تشریح نموده و آرام آرام مباحث حرفه ای را آغاز خواهیم کرد.

توابع در جاوا اسکریپت (JavaScript)، شباهت زیادی به PHP دارند، به این صورت که با عبارت function تعریف می شوند و مقادیری به عنوان آرگومان (آرگومان به زبان ساده یعنی همان ورودی هایی که به تابع داده می شود) می پذیرند.

function functionName(parameters)

code to be executed

function functionName(parameters) {

code to be executed

توابع (Functions) :

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

function functionName(parameters) {

code to be executed

نکته: تعیین پارامتر(ها) کاملا اختیاریست

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

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

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

همانطور که گفتیم، توابع در جاوا اسکریپتJavaScript ، شباهت زیادی به PHP دارند، به این صورت که با عبارت function تعریف می شوند و مقادیری به عنوان آرگومان می پذیرند، مثال زیر نحوه تعریف یک تابع ساده را در جاوا اسکریپت نشان می دهد.

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript">

function username (n,c){

var name = 'your name: '+ n + '<br />'; var country = 'your country: '+ c + '<br />';

var output = name + country; return output;

} document.write(username("Reza","Iran"));</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title></head>

<body onLoad="username(n,c)"></body></html>

توضیح:

- همانطور که ملاحظه می کنید، در این تابع دو آرگومان فرضی (c و n)به عنوان نام کاربر و کشور او دریافت می شود.
- سپس درون تابع، سه متغیر تعریف شده است با نام های name، country و output که در واقع نهایتا خروجی به صورت نام کاربر: مقادیر کشور کاربر: مقادیر ارسال می شود.
- در قسمت return، خروجی تابع تعیین می شود، در اینجا return متغیر output را که خود حاصل جمع دو متغیر name و country است، به عنوان خروجی تابع برمی گرداند.
- دقت کنید که توابع در جاوا اسکریپت باید حتما به صورت رویدادی فراخوانی شوند (مثلا onclick یا onload و...)، در حالت عادی وجود یک تابع در صفحه به خودی خود، کار خاصی انجام نمی دهد، در مثال صفحه قبل فراخوانی تابع با دستور document.write انجام شده است.

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

function sum(num1, num2) {
   return num1 + num2;
}

تابع sum دو عدد را به عنوان آرگومان ورودی دریافت نموده و حاصل جمع آن‌ها را توسط دستور return به عنوان خروجی بر می‌گرداند. تابع فوق را می‌توان به صورت زیر فراخوانی نمود:

alert(sum(10, 20));

خروجی :

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

function sum(num1, num2) {
   return num1 + num2;
   alert("Hello");
}

در مثال فوق دستور alert به هیچ عنوان اجرا نخواهد شد؛ زیرا تابع با رسیدن به دستور return خاتمه می‌یابد. یک تابع می‌تواند شامل بیش از یک دستور return باشد.

function diff(num1,num2) {
   if (num1 > num2)
     return num1 - num2;
   else
     return num2 - num1;
}

تابع فوق اختلاف دو عدد را بدست می‌آورد و اگر عدد اول بزرگتر باشد، عدد دوم را از عدد اول تفریق می‌کند؛ در غیر اینصورت عدد اول را از عدد دوم تفریق می‌کند و به عنوان خروجی بر می‌گرداند. نکته‌ی دیگری که لازم است بدانید این است که دستور return می تواند هیچ مقداری را بر نگرداند و به تنهایی بکار گرفته شود. در این صورت دقیقا بعد از دستور return سمی کالن (;) قرار می‌دهیم.

function checkNumber(num) {
   if (isNaN(num)) {
     alert("Not a number");
     return;
   }
   alert(num+" is a number");
}

تابع فوق یک ورودی را دریافت می‌نماید و در صورتی که آرگومان ورودی عدد نباشد پیغام “Not a number” را نمایش می‌دهد و از تابع خارج می‌شود. در صورتی که آرگومان ورودی یک عدد باشد، پیغام دوم را نمایش می‌دهد.

توجه:

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

function sum(num1, num2) {
   if (isNaN(num1) || isNaN(num2))
     return; // بهتر است حداقل مقدار 0 برگردانده شود
   return num1 + num2;
}

آموزش کامل و اجرای کدها در آپارات

https://www.aparat.com/v/BKDtU

#طراحی_وب #شمسی_پور_ابریشمی #ارائه #ابریشمی #جاوا_اسکریپت

شمسی پور ابریشمی ابریشمی طراحی وب ارائه جاوا اسکریپت

RezaMohammadiyan1375

دانشجوی نرم افزار دانشگاه شهید شمسی پور

شاید از این پست‌ها خوشتان بیاید