parsgreen.com
article

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

javascript-function

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

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


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

شیوه نگارش یا 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 و سرویس های مشابه است.

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


همانطور که در توضیحات بالا اشاره کردیم، توابع در جاوا اسکریپت بدون وجود رویداد ها، کاربردی ندارند، یک رویداد به معنی حالتی است که پس از وقوع آن، موتور تابع به حرکت می افتد، درست شبیه به استارت یک خودرو! در مثال زیر شیوه فراخوانی یک تابع را با دو رویداد پرکاربرد onclick و onload ملاحظه می کنید.
<!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>
<!-- http://webgoo.ir -->
<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 برای فراخوانی یک تابع استفاده کرده ایم که می توانید پیش نمایشی از آن را نیز به صورت آنلاین مشاهده و بررسی کنید.
<!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>
<!-- http://webgoo.ir -->
<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>
پیش نمایش
همانطور که احتمالا متوجه شده اید، در اینجا هیچ آرگومانی برای تابع در نظر نگرفته ایم، پس به این نتیجه می رسیم که آرگومان ها، مقادیری دلخواه هستند و بسته به هدف شما می توانید از آن استفاده کنید.
sectionدسته بندی: آموزش مقدماتی » JavaScript
related مطالب بیشتر:
» رویداد ها (events) در جاوا اسکریپت (JavaScript)
» مقایسه (Comparison) و شرط (If و Else) در جاوا اسکریپت (JavaScript)
» شروعی بر برنامه نویسی جاوا اسکریپت (Javascript)
» کار با پنجره pop up در جاوا اسکریپت (JavaScript)
» آرایه (Array) در جاوا اسکریپت (JavaScript)
commentنظرات (۳۶ یادداشت برای این مطلب ارسال شده است)
نویسنده: امیررضا
زمان: ۰۴:۲۹:۵۲ - تاریخ: ۱۳۹۲/۰۳/۲۴
سلام اگه بخوایم این تابع رو جوری قرار بدیم که فقط به کسانی که با مرورگر اینترنت اکسپلور وارد میشن نشون بده چیکار باید کنیم ؟؟؟
ممنون
پاسخ: 
سلام
می توانید از دستور شرطی زیر استفاده کرده و خروجی تابع را درون آن تنظیم کنید:
if(navigator.appName.indexOf("Internet Explorer") != -1){
//کد برای اینترنت اکسپلورر
}
نویسنده: سارا
زمان: ۰۰:۴۰:۰۵ - تاریخ: ۱۳۹۲/۰۳/۳۰
سلام. خسته نباشید. من یک کد جاوا اسکریپت دارم که ورودیش به نظر میاد یک فایل عکس باید باشه. اما نمی دونم چطوری باید ازش استفاده کنم. هدفم اینه که با حرکت موس روی یک عکس اعواج ایجاد بشه. می شه لطفا کمکم کنید؟ آیا کد زیر برای این کار عمل می کنه؟ چطوری؟
خدا خیرتون بده.
Stage.scaleMode = "noScale";
Var colorX = 1;
Var colorY = 2;
Var powerX = 75;
Var powerY = 75;
Var mode = "ignore";
Var offset = new flash.geom.Point (0, 0);
Var bmp = new flash.display.BitmapData (image_mc._width, image_mc._height);
Var displaceFilter = new flash.filters.DisplacementMapFilter (bmp, offset, colorX, colorY, powerX, powerY, mode);
OnMouseMove = function () {
displace_mc.displacer._x = displace_mc._xmouse;
displace_mc.displacer._y = displace_mc._ymouse;
bmp.draw (displace_mc);
image_mc.filters = [displaceFilter];
}
OnMouseDown = function (){
displace_mc._visible = true;
image_mc._visible = false;
}
OnMouseUp = function (){
displace_mc._visible = false;
image_mc._visible = true;
}
OnMouseUp ();
OnMouseMove ();
پاسخ: 
سلام
به نظر کدهای شما مربوط به زبان Action Script (فلش) یا MATLAB است، در حالی که آموزش در رابطه با جاوا اسکریپت! لطفا به سایت ها و آموزش های مرتبط مراجعه کنید.
نویسنده: amirhossein
زمان: ۱۹:۱۲:۱۲ - تاریخ: ۱۳۹۲/۰۴/۱۰
سلام خسته نباشید آموزش های اسکریپت رو دارم دنبال می کنم خیلی مفید بودن امیدوارم جاوا اسکریپت رو از سایت شما یاد بگیرم و منتی واسه شما باشم
میشه این کد رو تو سایت یکم توضیح بدید
<script type="text/javascript">
function changemain(id)
{document.getElementById('main').innerHTML=document.getElementById(id).innerHTML}
</script>
و آموزش های مشابه همین رو در سایت بگذارید و بیشتر توضیح بدید
پاسخ: 
سلام
آموزش ها به مرور تکمیل خواهند شد و به مبحث مورد نظر نیز خواهیم پرداخت، اما به اختصار:
document.getElementById یکی از متدهای جاوا اسکریپت برای انتخاب عناصر بر اساس id آنها در صفحات وب است، این متد از خاصیت های زیادی پشتیبانی می کند، به طور مثال زمانی که از innerHTML (در قبل از علامت =) استفاده می کنیم، مقادیر موجود در عنصر با id تعیین شده (در اینجا main) گرفته می شود و به عنصر هدف (در اینجا عنصری که در قسمت id مشخص می شود) منتقل می گردد.
البته رفتار این متد و خاصیت های آن بسیار متوع است و آشنایی با تمام آنها نیازمند تمرین و تجربه بیشتری است.
نویسنده: amirhossein
زمان: ۲۰:۵۰:۲۴ - تاریخ: ۱۳۹۲/۰۴/۱۰
خیلی ممنون دوست عزیز
نویسنده: amirhossein
زمان: ۱۹:۰۶:۰۰ - تاریخ: ۱۳۹۲/۰۴/۱۱
بازم سلام ببخشید باز مزاحم شدم لطفا کمکم کنید
من میخوام یه لینک ایجاد کنم که با کلیک کردن روی اون یه پنجره ی مرورگری با تعیین اندازه های طول و عرض توسط خودمون یه سایتی رو نمایش بده مثل این کد ولی عمل نکرد لطفا تصحیح کنید
<a href="http://google.com" onClick="javascript:window.open('width=500px,height=500px')">امتحانی</a>
پاسخ: 
سلام
در این خصوص آموزش جداگانه ای در سایت تحت عنوان کار با پنجره pop up در جاوا اسکریپت وجود دارد، کافی است عبارت "pop up" را در قسمت جستجو وارد و قسمت مربوط به دستور window.open را مطالعه نمائید.
نویسنده: amirhossein
زمان: ۲۰:۲۸:۳۲ - تاریخ: ۱۳۹۲/۰۴/۱۱
بسیار ممنون مشکلم بر طرف شد ممنون از آموزش های خوبتون یه خواهش دیگه ای هم داشتم من 4 ماه بیشتر نیست که سی اس اس و اچ تی ام ال رو یاد گرفتم یه قالب درست کردم واسه وبم ممنون میشم نگاه بندازید و نظرتون رو بدونم تشکر فراوان sibb.tk
پاسخ: 
قالب بررسی شد، برای مدت 4 ماه قابل قبول است، اما واقعیت مطلب را بخواهید طراحی و برنامه نویسی وب یک پروسه تقریبا زمانبر است، هر چه بیشتر تمرین کنید، تجربه بیشتری کسب می کنید، باید این فرآیند آموزشی را تا جایی ادامه دهید که احساس کنید ایده ای نیست که نتوانید از پس آن بر بیایید! (در آن زمان می توان گفت که حرفه ای شده اید).
نویسنده: لیلا
زمان: ۲۳:۰۹:۵۱ - تاریخ: ۱۳۹۲/۰۵/۱۹
با سلام ... ممنون از مطالب خوبتون... دوتا دونه سوال دارم ...
اول اینکه تابعی می خوام که مدت زمان حضور کاربر در سایت رو در نوار وضعیت نشون بده ...
و دوم اینکه چطور می تونم کدی بنویسم که : کاربر با انتخاب رنگ از یک لیست بتونه رنگ پس زمینه صفحه رو عوض کنه ؟
ممنون میشم
پاسخ: 
سلام
برای مورد اول باید در سایت های ارائه کننده کدهای آماده جاوا اسکریپت به دنبال آن جستجو کنید، اما برای مورد دوم الگوی کد زیر کاربرد دارد:
<script type="text/javascript">
function BGChange(color){
document.body.style.backgroundColor = color;
}
</script>
<select onchange="BGChange(this.value);">
<option value="#FFFFFF">سفید</option>
<option value="#000000">مشکی</option>
</select>
نویسنده: لیلا
زمان: ۱۳:۳۴:۲۰ - تاریخ: ۱۳۹۲/۰۵/۲۱
با سلام مجدد .... اگه میشه لطف کنید و یک سایتی که بتونه در مورد سوال اولم کمک کنه ... بهم پیشنهاد کنید ممنون میشم ...
پاسخ: 
سلام
سایت خاصی را نمی توانیم پیشنهاد کنیم، کافی است عبارت "کدهای جاوا اسکریپت" را در وب جستجو کنید.
نویسنده: لیلا
زمان: ۲۲:۳۹:۴۸ - تاریخ: ۱۳۹۲/۰۵/۲۱
بازم ممنون ... سایت خیلی خوبی دارین ... با این حال خیلی کمکم کردین
نویسنده: خلیل
زمان: ۰۳:۱۲:۰۸ - تاریخ: ۱۳۹۲/۰۷/۲۷
خیلی ممنون از مطالب خوبتون
نویسنده: جواد
زمان: ۰۲:۰۴:۴۶ - تاریخ: ۱۳۹۲/۰۸/۰۲
ممنون از مطلبتون من دو تا سوال داشتم
چطور درون یک تابع متغیری بنویسیم که در توابع دیگر قابل دسترسی باشد
و استفاده از this به عنوان ارگومان تابع به چه شکل هست مثلا یه تابع داریم به این شکل
function num(a)
و در یک تگ اچ تی ام ال به این شکل فراخوانی شده
num(this)
پاسخ: 
در مورد سوال اول، این کار به روش های مختلف در JavaScript ممکن است، ساده ترین حالت تعریف متغیر به صورت global در خارج از توابع است:
<script type="text/javascript">
//تعریف متغیر
var test = 5;
//تعریف توابع
function Func_1(){
test += 10;
}
function Func_2(){
alert(test + 4);
}
//فراخوانی توابع
Func_1();
Func_2();
</script>
روش دیگری فراخوانی توابع درون هم با اختصاص آرگومان مورد نظر است:
<script type="text/javascript">
//تعریف توابع
function Func_1(){
//تعریف متغیر
var test = 5;
//فراخوانی تابع وابسته
Func_2(test);
}
function Func_2(num){
alert(num + 4);
}
//فراخوانی تابع اصلی
Func_1();
</script>
روش دیگر تعریف متغیر بدون استفاده از var است که آن را به حالت global scope یا دامنه سراسری تبدیل می کند:
<script type="text/javascript">
//تعریف توابع
function Func_1(){
//تعریف متغیر
test = [];
test[0] = 'js';
test[1] = 'php';
test[2] = 'html';
}
function Func_2(){
alert(test[0]);
}
//فراخوانی توابع
Func_1();
Func_2();
</script>
در مورد سوال دوم، this در جاوا اسکریپت به عنصری ارجاع می دهد که از آن فراخوانی شده یا به آن نسبت داده شود، به فرض:
<input onfocus="this.style.background = '#ccc';" type="text">
یا در مورد مثال شما:
function Num(a){
a.style.background = '#ccc';;
}
</script>
<input onfocus="Num(this);" type="text">
نویسنده: جواد
زمان: ۱۶:۴۹:۳۸ - تاریخ: ۱۳۹۲/۰۸/۰۳
می بخشید مثلا یه select option با اچ تی ام ال درست کردیم و چند تا گزینه داره چطور میتونیم با کمک جاوا اسکریپت مشخص کنیم که یکی از گزینه هاش انتخاب شده و باید رویدادی رخ بده
پاسخ: 
برای select option از رویداد onchange در تگ select استفاده کنید.
نویسنده: جواد
زمان: ۱۸:۰۶:۳۶ - تاریخ: ۱۳۹۲/۰۸/۰۳
ببخشید منظورم اینه که چطور میشه مشخص کرد کدوم گزینه انتخاب شده تا جایی که فهمیدیم از selectedindex استفاده میشه ولی دقیقا متوجه نمیشم چطور کار میکنه مثلا اگه رنگ قرمز انتخاب شد بکگراند قرمز بشه و اگه ابی انتخاب شد بکگراند ابی بشه
پاسخ: 
برای این کار هم می توانید از selectedIndex استفاده کنید هم از مقادیر value برای option ها.
- روش اول شماره option ها را (شروع از 0) برمی گرداند، در ادامه با استفاده از متد options می توانید عدد index را در آن جایگزین کرده و مقادیر ست شده برای option مورد نظر را به دست آورید:
<script type="text/javascript">
function BGChange(){
var index = document.getElementById('test').selectedIndex;
var color = document.getElementById('test').options;

document.body.style.backgroundColor = '#' + color[index].text;
}
</script>
<select id="test" onchange="BGChange();">
<option>FFF</option>
<option>000</option>
</select>
- روش دوم با رویداد onchange، مقادیر value قسمت option انتخاب شده را برمی گرداند:
<script type="text/javascript">
function BGChange(color){
document.body.style.backgroundColor = color;
}
</script>
<select onchange="BGChange(this.value);">
<option value="#FFF">سفید</option>
<option value="#000">مشکی</option>
</select>
نویسنده: جواد
زمان: ۱۳:۴۸:۵۵ - تاریخ: ۱۳۹۲/۰۸/۰۵
ممنون
ایا میشه با this به id اشاره کرد مثلا بنویسیم this.id به جای this.value
پاسخ: 
بله، اگر عنصر شما دارای id باشد، id آن به this.id اختصاص پیدا می کند و می توانید آن را به توابع خود به عنوان آرگومان بدهید، this.value مقادیر قسمت value را برمی گرداند.
نویسنده: mohsen
زمان: ۰۳:۱۳:۰۶ - تاریخ: ۱۳۹۲/۰۸/۱۷
سلام می خواستم بدونم چطور میشه با استفاده از رویداد onload چندین تابع رو فراخوانی کرد
پاسخ: 
سلام
روش اول:
<script type="text/javascript">
function Func_1(){
alert(1);
}
function Func_2(){
alert(2);
}
window.onload = function(){
Func_1();
Func_2();
}
</script>
روش دوم:
<script type="text/javascript">
function Func_1(){
alert(1);
}
function Func_2(){
alert(2);
}
</script>
<body onload="Func_1() & Func_2();">
paged صفحه 1 از 3




more لطفا دقت کنید که یادداشت های زیر منتشر نشده و حذف خواهند شد:
- یادداشت های خارج از موضوع این مطلب.
- سوالات کلی، غیر ضروری و مشکلاتی که هیچ تلاشی برای رفع آن نکرده باشید.
- نظرات حاوی کدها و اسکریپت های خیلی طولانی (به طور مثال کد کامل قالب وبلاگ).

5 × 8
 refresh
آگهی
seonab.com
طراحی نرم افزار اندروید
رنگین کمان عکس
Ranginkamaan.com

آرشیو عکس های باکیفیت با موضوعات متنوع...