سبد (0)

تبلیغات

توابع در JavaScript

توابع در JavaScript

Wiki

یک تابع شامل کدهایی است که بوسیله یک رویداد(مثل onclick) یا صدا زدن، اجرا خواهد شد.

یک تابع از هر جایی در صفحه ممکن است فراخوانی شود (یا حتی از صفحات دیگر، اگر تابع در یک فایل خارجی با پسوند "js." تعریف شده باشد)

توابع در هر دو قسمت "<head>" و یا "<body>" می تواند تعریف شود. اما برای اطمینان از اینکه، قبل از فراخوانی، توسط مرورگر خوانده و بارگذاری شود بهتر است آنرا در قسمت <head> قرار دهید.

نحوه استفاده:

function functionname(var1,var2,...,varX)
{
some code
}

پارامترهای var2 ,var1 و … متغیرها یا مقادیری هستند که به داخل تابع فرستاده می شوند. "}" و "{" شروع و پایان یک تابع را تعیین می کنند.

توجه: برای تابعی که پارامتر ندارد باید بعد از نام تابع از پرانتز باز و بسته "()" استفاده شود.

توجه: فراموش نکنید که JavaScript به حروف بزرگ وکوچک حساس است! کلمه ی function باید با حروف کوچک نوشته شود وگرنه پیغام خطا صادر می شود. همچنین اسم تابع برای فراخوانی، باید دقیقا به همان شکلی که تعریف شده است نوشته شود.

مثال (توابع در JavaScript)

<html>
<head>
<script type="text/javascript">
function displaymessage()
{
alert("Hello World!");
}
</script>
</head>

<body>
<form>
<input type="button" value="Click me!" onclick="displaymessage()" />
</form>
</body>
</html>
خودتان امتحان کنید »

اگر خط (alert("Hello World در مثال بالا داخل تابع قرار نگرفته بود، این خط با بارگذاری صفحه اجرا می شد. حالا کاربر باید دکمه "Click me" را فشار دهد تا اسکریپت اجرا شود.

یک رویداد onclick را به دکمه "Click me" برای اجرای تابع ()displaymessage اضافه می کنیم تا با کلیک بر روی آن تابع فراخوانی شود.

در فصل های آینده، در مورد رویدادهای JavaScript بیشتر خواهید آموخت.


دستور return

Wiki

دستور return برای برگداندن یک مقدار مشخص در توابع، استفاده می شود.

در مثال زیر، حاصلضرب دو عدد a و b برگردانده می شود:

مثال (توابع در JavaScript)

<html>
<head>
<script type="text/javascript">
function product(a,b)
{
return a*b;
}
</script>
</head>

<body>
<script type="text/javascript">
document.write(product(4,3));
</script>

</body>
</html>
خودتان امتحان کنید »

عمر متغیرهای JavaScript

Wiki

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

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


مثال

مثال - خودتان امتحان کیند

Wiki

تابعی با یک پارامتر
این مثال نشان می دهد که چگونه یک مقدار را به یک تابع بفرستیم و از آن در تابع استفاده کنیم.

تابعی که یک مقدار را برمی گرداند
این مثال نشان می دهد که چگونه یک مقدار را توسط یک تابع برگردانیم.

دیدگاه‌ها  

0 # حميدرضا خالقي 1396-07-23 10:12
با سلام و تشکر از آموزشهای خوبتون
میخواستم بدونم نحوه ایجاد یک فایل جاوا اسکریپت خارجی و ساختار اون فایل به چه صورت میباشد ؟
با تشکر
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # امیر پهلوان صادق 1396-07-23 13:13
سلام
1- نرم افزار NotePad یا +NotePad را باز کنید و کدهای جاوااسکریپت را داخل آن قرار دهید.
2- فایل را با پسوند js. ذخیره کنید.
3- با استفاده از کد زیر فایل بالا را به صفحه وبتان لینک کنید:
<script src="/js/yourfi le.js" type="text/java script">< /script>
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # حميدرضا خالقي 1396-07-23 14:32
ممنون از راهنماییتون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # مسعود.z 1396-07-17 11:31
با سلام و عرض خسته نباشید
ممنون از سایت خوبتون
توابعی که مثل زیر تعریف میشن مال چین؟
var myFunction = function namedFunction() {
statements
}

ممنون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # امیر پهلوان صادق 1396-07-17 12:51
سلام به یکی از دو روش زیر می توان یک تابع را تعریف نمود:
var functionOne = function() {
// Some code
};

function functionTwo() {
// Some code
}

تفاوت بین دو روش بالا در این است که functionOne یک عبارت است و تنها زمانی که به خط اش می رسیم اجرا می شود. اما functionTwo تابعی است که در هر جایی از برنامه می تواند صدا زده شده و اجرا شود.
به دو مثال زیر و خرجی آنها توجه فرمایید:
مثال 1:
functionOne();

var functionOne = function() {
console.log("Hello!");
};

خروجی:
{
Error: "message": "Uncaught TypeError: functionOne is not a function",
"filename": "https://stacks nippets.net/js" ,
"lineno": 14,
"colno": 1
}

مثال 2:
functionTwo();

function functionTwo() {
console.log("Hello!");
}

خروجی:
Hello!
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # saji7 1396-06-13 23:08
با سلام
میخواستم بدونم که اگه بخوام ورودی از کاربر بگیرم و اون رو به تابع بفرستم که جمعشون کنه چی باید بنویسم؟
با getelementbyid چطوریه؟
اگه ممکنه یه مثال بنویسین
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # امیر پهلوان صادق 1396-06-14 08:17
n1 <input type = "number" id = "n1" value="15" />
n2 <input type = "number" id = "n2" value="20" />
<button onclick="sum()" >Try it</button>
<p id="demo2">Result...</p>

<script type="text/java script">
function sum()
{
var fn, ln, result;
fn = parseInt(docume nt.getElementBy Id("n1").value, 10);
ln = parseInt(docume nt.getElementBy Id("n2").value, 10);
result = (fn+ln);
document.getEle mentById("demo2 ").innerHTML = result;
}
</script>
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
-1 # saji7 1396-06-16 21:20
یه سوال
این parseInt دقیقا چیکار داره میکنه؟
برای اینکه دریافتی از کاربر عدد باشه نه رشته استفاده شده؟
توضیحات مربوط بهش رو خوندم نفهمیدم
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # امیر پهلوان صادق 1396-06-19 08:21
سلام مجدد، تابع parseInt اعدادی که از نوع رشته ای هستند را به نوع عددی تبدیل میکند.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # henry 1396-01-29 13:30
درود به همگی
اگه بخواهیم بعد از ورود کاربر به سایت، نام کاربر رو بگیریم و با نامش بهش خوش امد بگیم کدش چجوری میشه؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # امیر پهلوان صادق 1396-01-29 14:42
سلام، انجام این کار بسیار راحت است. در فرم ورود، بعد از اینکه کاربر "نام کاربری" و "کلمه عبور" را بصورت صحیح وارد کرد، باید نام کاربر را در یک Session یا Cookie ذخیره کنیم، به این ترتیب در تمامی صفحات سایت به متغییر ایجاد شده دسترسی خواهد بود و فقط کافی است که محتوای متغیر مورد نظر را در بالای سایت، بهمراه پیام خوش آمدگویی چاپ کنیم.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # بختی 1395-08-13 19:49
باسلام
من فیلم های اموزشی شمارو در مورد طراحی سایت زبان html و css رو خریدم از سایتتون و خوندم خوب بودش و تاحد زیادی درکشون کردم ولی جاوا اسکریپت واقعا گیج کننده است واسه من اصلا نمیتونم روش کار باهاش رو یاد بگیرم.خواهش اگر فیلم آموزش JavaScript رو دارید، لینک خریدش رو اعلام کنید.
ممنونم
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # امیر پهلوان صادق 1395-11-24 22:29
سلام
فیلم آموزش مقدماتی تا پیشرفته JavaScript:
http://beyamooz.com/product/javascript/%D9%81%DB%8C%D9%84%D9%85-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-javascript
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # vahid1993 1395-04-16 01:06
عالی بود.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # ...... 1395-03-27 13:25
ممنون، آموزش توابع JavaScript عالی بود.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # mina 1394-08-05 11:29
سلام چرا بعضی توابع جاوا و جی کویری با هم سازگاری ندارد و نمیتوان آنها را در یک صفحه باهم استفاده کرد و نهایت کار یکی از آنها اجرا نمیشود؟ برای این موضوع چه باید کرد؟
مثلا من تابعی را نوشتم در جاوا اما به دلیل وجود flexslider عمل نمیکرد !
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # مهرداد صلاحی 1394-08-05 11:45
با سلام.
در هیچ زبان برنامه نویسی نمیشه دو تابع با یک نام تعریف کرد.
خطای conflict به شما میده.

ولی امکان تعریف یک تابع به صورتی که آرگومانهای مختلفی بگیره هست!!! که باید اون رو در حین تعریف تابع انجام بدید.

در مورد خطایی که فرمودید هم اینطوری نمیشه دقیق نظر داد، کد خودتون رو باید بذارید تا بشه خطایابی کرد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # ali salari 1394-05-18 21:43
سلام و تشکر به خاطر ساییتون من یه سوال داشتم چرا در کد زیر مقدار نهایی رو leftوtop بدیم کار می کنه اما rightوbuttom بدیم کار نمی کنه
function m(){
var n=document.getElementById("sett");
n.style.transition="3s all";
n.style.position="absolute";
n.style.left="+20px";
}
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # مهرداد صلاحی 1394-08-05 11:48
با سلام.

اگر امکانش هست کد کامل رو قرار بدید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # amirkian 1394-05-15 14:46
آموزش توابع JavaScript عالی بود ... ممنون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # amirkian 1394-05-15 14:41
چرا بعضی از جاها در انتهای توابع از ; استفاده میکنند؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # مهرداد صلاحی 1394-08-05 11:50
علامت ; به معنی پایان دستور هست.

لطفا یه نمونه کد قرار بدید تا بشه گفت برای چی از این کاراکتر استفاده شده است.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # Mahdi Ansar 1394-05-07 23:37
سلام فراخواننده تابع چه قسمت از تابع می باشد
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # fm 1394-04-19 19:43
سلام من دقیقا نمی دونم پارامتر چی کاری انجام میده میشه به جای پارامتر از متغیر محلی استفاده کرد
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # amirkian 1394-04-21 14:30
وقتی که شما تابعی را تعریف میکنید؛اگر میخواهید ورودی به تابع بدهید و خروجی از آن بگیرید باید از پارامتر های تابع استفاده کنید؛در واقع مقادیر آرگومان ها در هنگام فراخوانی از تابع فراخوانی شونده به پارمتر ها منتقل شده و عملیات مورد نظر روی آنها انجام میشود؛و شایان ذکر است که هر تغییری روی پارامتر ها تاثیری روی آرگومان های نمیذارد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # احسان عباسی 1394-04-19 20:23
سلام
به مثال زیر توجه کنید:
فرض کنید می خواهیم یک تابع بنویسیم به طوری که دو عدد را به آن بدهیم و تابع جمع این دو عدد را محاسبه کند و برای ما این جمع را برگرداند و در یک متغیر قرار دهد:

function sum(a,b){
return a+b;

}
var c=sum(2,3);


همان طور که در بالا مشاهده می کنید، یک تابع به نام sum ایجاد کرده ایم و برای این تابع دو پارامتر a و b را تعریف کرده ایم. این یعنی که این تابع در وقت فراخوانی، باید این دو مقدار را از کاربر دریافت کند و روی آنها عملیاتی انجام دهد. که در مثال بالا این تابع جمع دو پارامتر a و b را محاسبه می کند و آن را برمی گرداند.
در خط شماره 5 یک متغیر به نام c تعریف کرده ایم که مقدار برگشتی در آن قرار می گیرد. و در آخر نتیجه برابر با 5 خواهد بود.
در مورد قسمت دوم سوالتان مثال زیر را مشاهده کنید:
var a=2;
var b=3;

function sum(){
return a+b;
}
var c=sum();

همان طور که در مثال بالا مشاهده می کنید، با استفاده از متغیرهای عمومی aوb می توان تابع sum را بدون پارامترها ها بازسازی کرد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # آرمان 1395-11-25 16:25
سلام و خداقوت.در بالا شما خودتون مقدار ورودی رودادین اما گفتین که از کاربر می گیریم!!! میشه توضیح بدین؟ ممنون از زحماتتون. ضمنا من یک پیام ارسال کرده بودم که الان یک پیامی بانام خودم دیدم که فقط به سبک خودم سلام کرده بود!! اما سوال من داخلش نیست.همین پیام آرمان که تشکر کرده!!
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # احسان عباسی 1395-11-25 17:10
سلام، ممنونم از شما.
چون که کد نوشته شده در بالا، امکان اجرا شدن در اینجا را نداشته، ما نمی تونستیم از کاربر مقادیر رو بگیریم. بنابراین مقادیر رو خودمون به متغیرها به صورت دستی دادیم. در مورد قسمت آخر صحبت های شما، بنده اطلاع ندارم.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # آرمان 1395-11-23 11:49
سلام و خداقوت. آموزش تون عالی بود.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # Skrillex 1394-02-12 08:20
در مثال " تابعی با یک پارامتر " میخواستم بدونم txt ثابته یا چیزیه که خودتون نعریف کردید ؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # امیر پهلوان صادق 1394-02-12 08:40
در مثال مذکور که لینک آنرا مجدداً در زیر قرار داده ام، txt در واقع یک نام دلخواه است که به عنوان پارامتر ورودی تابع ()myfunction استفاده شده است. به قول شما، نامی است که خودمان تعریف کرده ایم و ثابت نیست.
http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjs_function2
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
-4 # امیرکیان 1393-12-15 11:31
مرورگر مگه کامپایلر دارد که جاوا اسکریپت خطا درست کند و به کاربر اعلام کند؟؟
منظورم این است اگر خطایی به وجود آید چه طور به کاربر اعلام می شود در html,css مدیریت خطایی اصلن وجود نداشت!!
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # مظاهر نصوحی 1393-12-16 11:00
با توجه به اینکه احتمال چیدن نامناسب کدها در css و html وجود دارد، تصور کنید که بخواهیم صفحه ای را به خاطر اینکه یک خطای css یا html دارد با استفاده از مدیریت خطا جلوی مشاهده ی آن را بگیریم، خیلی کار پیچیده و سخت می شه. بنابراین لزومی ندارد در html و css مدیریت خطا وجود داشته باشد.
باید اشاره کرد که جاوا اسکریپت از مفسر جاوا اسکریپت استفاده می کند و نه از کامپایلر.
زبان جاوا اسکریپت از زبان EcmaScript گرفته شده است. توضیح در مورد ساختار این زبان از بحث ما خارج است.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # mohsen moardi 1393-11-27 16:42
سلام...ميخواستم تو يه تابع جاوااسكريپت يه تابع جاوااسكيريپت ديگه باشه..يعني هربار تابع اصلي صدا زده بشه تابعي كه داخلشه هم اجرا بشه...چطور بايد تابع رو تو تابع ديگه صدا زد؟مثلا تابع searching داخل تابع x اجرا شه
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # مظاهر نصوحی 1393-11-28 08:03
ابتدا باید بدونیم که scope chain این دو تا تابع باید یکی باشه یا حداقل تابعی که صدا زده می شه باید scope chain بالاتری نسبت به تابع صدا زننده داشته باشه.
توضیح Scope chain:
scope chain مبین داده ها، متغیرها و توابعی است که یک تابع یا متغیر به آن دستری دارد و چگونگی رفتار با آن را مشخص می کند. به طور کلی یک scope chain سراسری داریم که در حقیقت داخل document است و همه ی کد ها در قالب این بستر پیاده سازی می شوند. هر فراخوانی تابع scope chain خودش را دارد و هر بار که تابع فراخوانی می شود (یا جریان داخل تابع به راه می افتد) بستر اجرایی آن تابع داخل پشته مربوط به بستر ها قرار می کیرد و وقتی که اجرای تابع تمام شد از پشته خارج می شود. برخی از توابع در بستر سراسری قرار دارند مثل تابع alert که شما همیشه می تونید اون تابع را در هر تابع دیگه ای صدا بزنید. با این توضیحات دو تا مثال می زنیم تا بهتر روشن بشه:

//آغاز بلوک یک
{
function m(i){
......
......
......
return i*i
}
function b(){
.....
var a=m(5)
}
}
// پایان بلوک یک

در مثال بالا چون هر دو تابع داخل یک بلوک قرار دارند یعنی هر دو در یک scope chain هستند پس به راحتی می توانیم هر کدام را در دیگری صدا بزنیم. از این رو ما در تابع b تابع m را صدا می زنیم.
در مثال زیر اما نمی تونیم تابع m را صدا بزنیم چون در دو بلوک متفاوت هستند:

//آغاز بلوک یک
}
function m(i){
.....
.....
return i*i
}
{
// پایان بلوک یک و آغاز بلوک دو
}
function b(){
......
.......
//نمی تونیم m را صدا بزنیم چون تو یک بلوک دیگه است و در حقیقت در یک scope chain دیگه قرار داره.
}


{
// پایان بلوک دو

دقت کنید که سینتکس مربوط به صدا زدن یک تابع در تابع دیگه در مثال اول به کار برده شده است و فقط کافیه نام تابع را به همراه پارامترهاش بنویسید. و اگر تابع مقدار بر می گرداند آن را داخل یک متغیر ذخیره کنید
var a = m(5);
در مثال بالا، ما تابع m را با پارامتر 5 صدا می زنیم که پس از اجرا مقدار a معادل 25 می شود.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # امیرکیان 1393-12-22 11:45
منظورتان از scope chain همان قلمرو هستش؛برای اینکه بتوانیم تابعی را در تابع دیگر صدا بزنیم باید در یک قلمرو باشند وگرنه نمی شود درست گفتم آیا؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # mohammad 1393-12-25 02:00
می توان محدوده هم بیان کرد
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # مظاهر نصوحی 1393-12-23 09:36
قلمرو عبارت خوبیه به نظرم.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+20 # محسن_م 1392-12-23 21:03
عالیییییییییه
لطفا یه قسمت تشکر اضافه کنین اونطوری بهتر میشه تشکر کرد وفقط توی این قسمت پیشنهادا نوشته بشه
یه دنیا ممنون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی JavaScript

بستن
مدرس:
سوال و جواب:

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی