تابع‌ها
حلقه می‌گوید کی کار تکرار شود. تابع سؤال دیگری دارد: کجا یک بستهٔ کار را نگه دارید تا با اسم دوباره اجرا شود؟ تابع همان دستورپخت نام‌دار است. یک‌بار تعریف می‌کنید. هر وقت لازم شد با اسمش صدا می‌زنید. کپی‌پیست کم‌رنگ می‌شود؛ اسم می‌ماند.
تابع چیست؟
در JavaScript با کلیدواژهٔ function، یک اسم، پرانتز () و بدنه داخل { } تابع را اعلان می‌کنید. تا وقتی صدا نزنید — یعنی اسم به‌اضافهٔ () — چیزی از بدنه اجرا نمی‌شود. فکر کنید: «مراحل را بسته‌بندی کن، بعد دکمهٔ پخش را بزن.»
بخش‌های یک تابع
📊 آناتومی تابع
| بخش | نقش | کی جور است |
|---|---|---|
کلیدواژهٔ function |
شروع اعلان | «اینجا یک دستورپخت نام‌دار می‌آید» |
| اسم | با همین بعداً صدا می‌زنید | sayHi، showTotal — فعل روشن کمک می‌کند |
() بعد از اسم |
محل صدا / بعداً ورودی | حتی () خالی یعنی «الان اجرا کن» |
بدنهٔ { } |
مراحلی که با هر صدا اجرا می‌شوند | چاپ، حساب، به‌روزرسانی صفحه |
صدا با name() |
همین حالا بدنه را اجرا می‌کند | بدون بازنویسی بدنه، دوباره استفاده کنید |
فقط تعریف کردن، دستورپخت را ذخیره می‌کند. صدا زدن اجرا می‌کند. اگر صدا نزنید بدنه ساکت می‌ماند — برای زبان عادی است، نه باگ.
function sayHi() {
console.log("Hi");
}
sayHi();
تعریف کنید، بعد صدا بزنید
سه خط اول sayHi را تعریف می‌کنند. خط آخر صدا می‌زند. در کنسول باید Hi را ببینید. بدون sayHi(); تابع هست ولی اجرا نمی‌شود.
function beep() {
console.log("beep");
}
beep();
beep();
یک بدنه، چند بار استفاده
یک تعریف، دو صدا — beep دو بار چاپ می‌شود. اصل ماجرا همین است: مراحل را یک‌بار بنویسید، هر وقت داستان همان صدا را خواست دوباره اجرا کنید. اگر بدنه را عوض کنید، همهٔ جاهایی که این اسم را صدا می‌زنند به‌روز می‌شوند.
function showReady() {
console.log("loading");
console.log("ready");
}
showReady();
بدنه می‌تواند چند مرحله داشته باشد
با یک صدا هر دو خط به ترتیب اجرا می‌شوند: اول loading، بعد ready. تابع به یک دستور محدود نیست — کلِ کار کوچک را داخل آکولاد بگذارید.
function greetCity() {
let city = "Tehran";
let line = "Hello from " + city;
console.log(line);
}
greetCity();
کار محلی داخل دستورپخت می‌ماند
city و line داخل greetCity زندگی می‌کنند. هر صدا پیام را می‌سازد و Hello from Tehran را چاپ می‌کند. برای این الگو لازم نیست آن اسم‌ها بیرون تابع باشند — ماشه همان صدازدن است.
function fillOut() {
let box = document.getElementById("out");
box.textContent = "Function ran";
}
fillOut();
کار را برای صفحه اجرا کنید
مثل درس‌های قبلی DOM: عنصر را پیدا کنید، textContent را بگذارید. وقتی داخل تابع باشد، دکمه، تایمر یا اسکریپت می‌تواند هر وقت صفحه باید عوض شود fillOut() را صدا بزند — یک اسم، یک کار.
تابع را روی صفحه نشان دهید
تابعی تعریف کنید که یک خط کوتاه داخل پاراگراف بنویسد؛ بعد از اسکریپت صدا بزنید تا بازدیدکننده نتیجه را ببیند.
<!DOCTYPE html>
<html>
<head>
<title>functions — page</title>
</head>
<body>
<p id="msg">…</p>
<script>
function showMsg() {
let box = document.getElementById("msg");
box.textContent = "Hello from a function";
}
showMsg();
</script>
</body>
</html>
صفحه نشان می‌دهد Hello from a function. بدنهٔ showMsg نوشتن روی DOM را انجام داد؛ صدای پایین، پخش را زد. رشته را عوض کنید، تازه کنید، خط جدید را بخوانید. درس بعد سراغ پارامترها می‌رود — مقدارهایی که موقع صدا داخل پرانتز می‌فرستید.
خودتان امتحان کنید
- تابع
helloرا اعلان کنید که"hello"چاپ کند و یک‌بار صدا بزنید. - همان تابع را بدون بازنویسی بدنه بار دوم صدا بزنید.
- تابعی بسازید که بدنش دو کلمهٔ مختلف را به ترتیب چاپ کند.
- داخل تابع با
letیک رشته بسازید و چاپ کنید. - تابعی بنویسید که
#outرا روی"ok"بگذارد (یا از id دموی HTML استفاده کنید). - در دموی HTML فقط متن پیام را عوض کنید، تازه کنید، پاراگراف را بخوانید.
اشتباه‌های رایج
- تابع را تعریف کردن و فراموش کردن صدا با
() - نوشتن
sayHiبدون()— اسم تابع را می‌گوید، بدنه را اجرا نمی‌کند - کپی‌پیست همان سه خط به‌جای دو بار صدا زدن یک تابع
- کار را بیرون
{ }گذاشتن و انتظار داشتن که اسم تابع «مالک» آن باشد - قاطی کردن این درس با پارامتر و return — آن‌ها بعدی‌اند؛ اینجا تعریف + صدا کافی است
خلاصه
- تابع مراحل را زیر یک اسم بسته‌بندی می‌کند
- با
function name() { … }اعلان کنید - با
name()بدنه را اجرا کنید - یک بدنه، چند صدا — یعنی استفادهٔ دوباره
- بدنه می‌تواند چند دستور و کار محلی با
letداشته باشد - به‌روزرسانی صفحه هم داخل تابعی که موقع نیاز صدا می‌زنید جا می‌گیرد
- بعدی: پارامترها — موقع صدا مقدار بفرستید
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود