توابع (Functions) و رویدادها (Events) در جاوا اسکریپت

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

تابع (function) در جاوا اسکریپت چیست؟

توابع در جاوا اسکریپت مجموعه ای از کد هستند که کار خاصی را انجام می دهند. این توابع زمانی اجرا می شوند که دستوری آن ها را صدا بزند.

ساختار کلی تعریف یک تابع به شکل زیر است:

function name(parameter1, parameter2, parameter3) {
  // کد های اجرایی تابع در این قسمت قرار می گیرند.
}

برای تعریف یک تابع از کلمه ی کلیدی function استفاده می کنیم و بعد از آن نام تابع را می آوریم. سپس یک جفت پرانتز مقابل آن قرار می دهیم. نام توابع می تواند شامل حروف، اعداد، آندرلاین و علامت دلار ($) باشد (مانند متغیرها).

در کد بالا parameter ها (پارامترها) را می بینید.

این پارامتر ها چه هستند؟ پارامتر ها مقادیری هستند که تابع در صورت نیاز دریافت می کند.

مثلا اگر در یک شرکت ماشین سازی تابعی داشته باشیم به نام ()color (به معنی رنگ کردن)، باید به آن پارامتری به نام color$ بدهیم تا وقتی این تابع را صدا زدیم بداند ماشین را چه رنگی کند.

سوال: آیا فرقی بین پارامتر (parameter) و آرگومان (argument) وجود دارد؟

پاسخ: پارامتر (parameter) یا آرگومان (argument) همان مقادیری هستند که در پرانتز های جلوی نام تابع قرار می گیرند اما یک تفاوت دارند: پارامتر به متغیری گفته می شود که در زمان تعریف تابع در پرانتز های جلوی نام تابع قرار میگیرد اما آرگومان به مقدار یا متغیری می گویند که هنگام صدا زدن تابع در پرانتز های جلوی نام آن تابع قرار میگیرد.

فراخوانی توابع در جاوا اسکریپت

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

زمانی که یک event مشخص و مربوط به تابع رخ دهد (در مورد event ها بعدا صحبت خواهیم کرد).
زمانی که چیزی در سورس کد آن را صدا بزند.
فراخوانی خودکار (برخی از توابع به محض اجرای سورس کد، اجرا می شوند و نیازی نیست چیزی آن ها را صدا بزند).

دستور return

اگر کد های تابع به دستور return (به معنی "برگردان" در فارسی، مثلا فلان چیز را به من برگردان) برسند، اجرای تابع متوقف می شود.

می دانید چرا نام این دستور return گذاشته شده است؟ به این علت که این دستور به تابع می گوید مقداری که از تو خواسته شده را برگردان!

گفتیم که معمولا چیزی تابع را صدا می زند؛ این صدا زدن بیهوده نیست و معمولا صدا زننده (caller) درخواستی دارد (مثلا مقداری را می خواهد) و این دستور این مقدار را به صدا زننده بر میگرداند. مثال:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>

<p>این تابع یک محاسبه ی ریاضی را انجام داده و سپس مقدار نهایی را برمیگرداند:</p>

<p id="demo"></p>

<script>
var x = myFunction(4, 3);
document.getElementById("demo").innerHTML = x;

function myFunction(a, b) {
  return a * b;
}
</script>

</body>
</html>

دستور return a * b میگوید حاصل ضرب a در b را به صدا زننده یا درخواست کننده برگردان، بنابراین خروجی این کد عدد 12 خواهد بود (حاصل ضرب 4 در 3 می شود 12).

چرا از توابع استفاده می کنیم؟

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

یک مثال پیشرفته تر:

کد زیر درجه ی فارنهایت را به درجه ی سلسیوس تبدیل می کند:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>

<p>This example calls a function to convert from Fahrenheit to Celsius:</p>
<p id="demo"></p>

<script>
function toCelsius(f) {
  return (5/9) * (f-32);
}
document.getElementById("demo").innerHTML = toCelsius(77);
</script>

</body>
</html>

خروجی این کد را در ادیتور آنلاین جاوا اسکریپت مشاهده کنید و با کد ها بازی بازی کنید تا متوجه روش کارکرد آن ها بشوید.

در این مثال toCelsius اشاره به شیء تابع دارد اما ()toCelsius اشاره به نتیجه ی تابع دارد، بنابراین اگر یادتان برود () را بگذارید، به جای نتیجه ی تابع، تعریف آن به شما داده می شود. می توانید این کار را با مثال بالا در ادیتور آنلاین امتحان کنید.

نکته: شما می توانید از توابع مانند متغیرها در عملیات انتساب و ... استفاده کنید:

var x = toCelsius(77);
var text = "The temperature is " + x + " Celsius";
// یا
var text = "The temperature is " + toCelsius(77) + " Celsius";

متغیرهای محلی (local)

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>

<p>Outside myFunction() carName is undefined.</p>

<p id="demo1"></p>

<p id="demo2"></p>

<script>
myFunction();

function myFunction() {
  var carName = "Volvo";
  document.getElementById("demo1").innerHTML =
  typeof carName + " " + carName;
}

document.getElementById("demo2").innerHTML =
typeof carName;
</script>

</body>
</html>

خروجی این کد را در ادیتور آنلاین جاوا اسکریپت مشاهده کنید.

دفعه ی اول متغیر carName در داخل خود تابع صدا زده شده است بنابراین مقدار "string Volvo" را بر می گرداند اما دفعه ی دوم خارج از تابع صدا زده است (در حالی که داخل تابع تعریف شده) بنابراین مقدار undefined (به معنی تعریف نشده) را بر میگرداند.

متغییرهای محلی زمانی که تابع صدا زده می شود ساخته شده و زمانی که اجرای تابع تمام شود حذف می شوند.

از این مسئله می توان نتیجه گرفت: از آن جایی که متغیرهای محلی فقط داخل تابع تعریف شده اند، می توان متغیری خارج از تابع دقیقا همنام با متغیرِ داخل تابع داشت و این متغیرها کاملا از هم جدا خواهند بود! البته باید حواستان باشد که این دو را با هم اشتباه نگیرید و با خطا مواجه نشوید.

رویداد (event) ها در HTML

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

رویدادهای HTML می توانند کار هایی باشند که کاربر انجام می دهد و یا کار هایی که مرورگر انجام می دهد. مثلا:

بارگذاری صفحه ی HTML تمام شده است.
مقدار وارد شده در یک فرم HTML تغییر کرد.
روی یک دکمه ی HTML کلیک شده است.
و....

یک مثال عملی از رویدادها را در کد زیر می بینید:

<!DOCTYPE html>
<html>
<body>

<button onclick="document.getElementById('demo').innerHTML=Date()">The time is?</button>

<p id="demo"></p>

</body>
</html>

این کد HTML دارای یک دکمه (button) بوده که روبروی آن از attribute ای با نام onclick (به معنی "هنگام کلیک شدن") استفاده شده است. زمانی که این کاربر روی این دکمه کلیک کند، کد جاوا اسکریپت روبروی آن اجرا می شود و زمان حال را به همراه تاریخ به شما می گوید (در واقع مقدار تگ <p> را تغییر میدهد).

خروجی این کد را در ادیتور آنلاین جاوا اسکریپت مشاهده کنید تا کاملا متوجه شوید.

رفتار ما با رویدادها همیشه اینچنین ساده نیست، بنابراین اکثر برنامه نویسان به جای نوشتن کد درون attribute عنصر مورد نظر، تابع را در آن قسمت صدا می زنند:

<button onclick="displayDate()">The time is?</button>

جدولی از رویدادهای معروف و اصلی HTML را می بینید:

رویداد	توضیح
onchange	تغییر یک عنصر در سند HTML به هر شکلی (بسته به عنصر)
onclick	کاربر روی یک عنصر HTML کلیک می کند
onmouseover	کاربر نشانگر موس را روی یک عنصر میبرد (بدون کلیک کردن)
onmouseout	کاربر نشانگر موس را از روی یک عنصر برمیدارد (بدون کلیک کردن)
onkeydown	کاربر یک کلید را روی کیبورد خود فشار می دهد (هر کلیدی)
onload	مرورگر کار باگذاری صفحه را تمام کرده است

لیست کامل این رویدادها را می توانید در شبکه ی توسعه دهندگان Mozilla ببینید.

کاربرد رویدادها در دنیای واقعی

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

در این جلسه رویدادها را به طور خلاصه توضیح دادیم. در ادامه ی این سری آموزشی با آن ها کار خواهیم کرد و به تدریج برای شما روان خواهند شد. امیدوارم از این قسمت لذت برده باشید.

در پناه حق

دیدگاه‌های شما (2 دیدگاه)

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

احسان

19 شهریور 1398

ممنون از آموزش ها خوبتون ، واقعا نکته های خوبی گفتید. پارامتر (parameter) یا آرگومان (argument) همان مقادیری هستند که در پرانتز های جلوی نام تابع قرار می گیرند اما یک تفاوت دارند: پارامتر به متغیری گفته می شود که در زمان تعریف تابع در پرانتز های جلوی نام تابع قرار میگیرد اما آرگومان به مقدار یا متغیری می گویند که هنگام صدا زدن تابع در پرانتز های جلوی نام آن تابع قرار میگیرد فکر میکنم برعکس گفتین آرگومان متغیر هایی است که در پرانتر های جلوی نام تابع است و پارامتر ها را جلوی پرانتر های موقع فراخوانی تابع مینویسیم ! درست است ؟ با تشکر

امیر زوارمی

21 شهریور 1398

سلام دوست عزیز، پارامتر (parameter) یعنی اون متغیر هایی که موقع تعریف کردن تابع براش مینویسیم. مثلا: public void MyMethod(string myParam) { } آرگومان (argument) اون مقادیری هستند که موقع اجرای تابع بهش پاس داده میشن: string myArg1 = "this is my argument"; myClass.MyMethod(myArg1); توضیحات بیشتر: https://blog.kotlin-academy.com/programmer-dictionary-parameter-vs-argument-type-parameter-vs-type-argument-b965d2cc6929