توابع در JavaScript
توابع در JavaScript
یک تابع شامل کدهایی است که بوسیله یک رویداد(مثل onclick) یا صدا زدن، اجرا خواهد شد.
یک تابع از هر جایی در صفحه ممکن است فراخوانی شود (یا حتی از صفحات دیگر، اگر تابع در یک فایل خارجی با پسوند "js." تعریف شده باشد)
توابع در هر دو قسمت "<head>" و یا "<body>" می تواند تعریف شود. اما برای اطمینان از اینکه، قبل از فراخوانی، توسط مرورگر خوانده و بارگذاری شود بهتر است آنرا در قسمت <head> قرار دهید.
نحوه استفاده:
{
some code
}
پارامترهای var2 ,var1 و … متغیرها یا مقادیری هستند که به داخل تابع فرستاده می شوند. "}" و "{" شروع و پایان یک تابع را تعیین می کنند.
توجه: برای تابعی که پارامتر ندارد باید بعد از نام تابع از پرانتز باز و بسته "()" استفاده شود.
توجه: فراموش نکنید که JavaScript به حروف بزرگ وکوچک حساس است! کلمه ی function باید با حروف کوچک نوشته شود وگرنه پیغام خطا صادر می شود. همچنین اسم تابع برای فراخوانی، باید دقیقا به همان شکلی که تعریف شده است نوشته شود.
مثال (توابع در JavaScript)
<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
دستور return برای برگداندن یک مقدار مشخص در توابع، استفاده می شود.
در مثال زیر، حاصلضرب دو عدد a و b برگردانده می شود:
مثال (توابع در JavaScript)
<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
زمانی که توسط کلمه کلیدی "var" یک متغیر را داخل تابع اعلان می کنید، تنها در محدوده همان تابع به متغیر دسترسی وجود دارد. زمانی که از تابع خارج می شوید متغیر مورد نظر از بین می رود. به این متغیرها، متغیرهای محلی می گویند. می توانید چندین متغیر محلی با یک نام را داخل توابع مختلف استفاده کنید. زیرا هر متغیر محلی تنها از طریق تابعش شناخته می شود.
زمانی که شما یک متغیر را خارج از تابع تعریف می کنید، همه ی توابع داخل آن صفحه به آن دسترسی دارند. عمر این متغیرها از زمانی که تعریف می شوند شروع می شود و زمانی که صفحه بسته می شود پایان می یابد.
تابعی با یک پارامتر
این مثال نشان می دهد که چگونه یک مقدار را به یک تابع بفرستیم و از آن در تابع استفاده کنیم.
تابعی که یک مقدار را برمی گرداند
این مثال نشان می دهد که چگونه یک مقدار را توسط یک تابع برگردانیم.
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 32256
دیدگاه‌ها
تو مثال فانکشن بعد از اجرا علاوه بر عبارت hello world عبارت زیر هم تو alert دیده میشه :
An embedded page on this page says
میشه بفرمایید از کجا اومده؟
سلام، پیام مذکور توسط مرورگر تولید شده است.
با سلام و تشکر از آموزشهای خوبتون
میخواستم بدونم نحوه ایجاد یک فایل جاوا اسکریپت خارجی و ساختار اون فایل به چه صورت میباشد ؟
با تشکر
سلام
1- نرم افزار NotePad یا +NotePad را باز کنید و کدهای جاوااسکریپت را داخل آن قرار دهید.
2- فایل را با پسوند js. ذخیره کنید.
3- با استفاده از کد زیر فایل بالا را به صفحه وبتان لینک کنید:
<script src="/js/yourfi le.js" type="text/java script">< /script>
ممنون از راهنماییتون
با سلام و عرض خسته نباشید
ممنون از سایت خوبتون
توابعی که مثل زیر تعریف میشن مال چین؟
var myFunction = function namedFunction() {
statements
}
ممنون
سلام به یکی از دو روش زیر می توان یک تابع را تعریف نمود:
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!
با سلام
میخواستم بدونم که اگه بخوام ورودی از کاربر بگیرم و اون رو به تابع بفرستم که جمعشون کنه چی باید بنویسم؟
با getelementbyid چطوریه؟
اگه ممکنه یه مثال بنویسین
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>
یه سوال
این parseInt دقیقا چیکار داره میکنه؟
برای اینکه دریافتی از کاربر عدد باشه نه رشته استفاده شده؟
توضیحات مربوط بهش رو خوندم نفهمیدم
سلام مجدد، تابع parseInt اعدادی که از نوع رشته ای هستند را به نوع عددی تبدیل میکند.
درود به همگی
اگه بخواهیم بعد از ورود کاربر به سایت، نام کاربر رو بگیریم و با نامش بهش خوش امد بگیم کدش چجوری میشه؟
سلام، انجام این کار بسیار راحت است. در فرم ورود، بعد از اینکه کاربر "نام کاربری" و "کلمه عبور" را بصورت صحیح وارد کرد، باید نام کاربر را در یک Session یا Cookie ذخیره کنیم، به این ترتیب در تمامی صفحات سایت به متغییر ایجاد شده دسترسی خواهد بود و فقط کافی است که محتوای متغیر مورد نظر را در بالای سایت، بهمراه پیام خوش آمدگویی چاپ کنیم.
باسلام
من فیلم های اموزشی شمارو در مورد طراحی سایت زبان html و css رو خریدم از سایتتون و خوندم خوب بودش و تاحد زیادی درکشون کردم ولی جاوا اسکریپت واقعا گیج کننده است واسه من اصلا نمیتونم روش کار باهاش رو یاد بگیرم.خواهش اگر فیلم آموزش JavaScript رو دارید، لینک خریدش رو اعلام کنید.
ممنونم
سلام
فیلم آموزش مقدماتی تا پیشرفته JavaScript:
beyamooz.com/product/javascript/%D9%81%DB%8C%D9%84%D9%85-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-javascript
عالی بود.
ممنون، آموزش توابع JavaScript عالی بود.
سلام چرا بعضی توابع جاوا و جی کویری با هم سازگاری ندارد و نمیتوان آنها را در یک صفحه باهم استفاده کرد و نهایت کار یکی از آنها اجرا نمیشود؟ برای این موضوع چه باید کرد؟
مثلا من تابعی را نوشتم در جاوا اما به دلیل وجود flexslider عمل نمیکرد !
با سلام.
در هیچ زبان برنامه نویسی نمیشه دو تابع با یک نام تعریف کرد.
خطای conflict به شما میده.
ولی امکان تعریف یک تابع به صورتی که آرگومانهای مختلفی بگیره هست!!! که باید اون رو در حین تعریف تابع انجام بدید.
در مورد خطایی که فرمودید هم اینطوری نمیشه دقیق نظر داد، کد خودتون رو باید بذارید تا بشه خطایابی کرد.
سلام و تشکر به خاطر ساییتون من یه سوال داشتم چرا در کد زیر مقدار نهایی رو leftوtop بدیم کار می کنه اما rightوbuttom بدیم کار نمی کنه
function m(){
var n=document.getElementById("sett");
n.style.transition="3s all";
n.style.position="absolute";
n.style.left="+20px";
}
با سلام.
اگر امکانش هست کد کامل رو قرار بدید.
آموزش توابع JavaScript عالی بود ... ممنون
چرا بعضی از جاها در انتهای توابع از ; استفاده میکنند؟
علامت ; به معنی پایان دستور هست.
لطفا یه نمونه کد قرار بدید تا بشه گفت برای چی از این کاراکتر استفاده شده است.
سلام فراخواننده تابع چه قسمت از تابع می باشد
سلام من دقیقا نمی دونم پارامتر چی کاری انجام میده میشه به جای پارامتر از متغیر محلی استفاده کرد
وقتی که شما تابعی را تعریف میکنید؛اگر میخواهید ورودی به تابع بدهید و خروجی از آن بگیرید باید از پارامتر های تابع استفاده کنید؛در واقع مقادیر آرگومان ها در هنگام فراخوانی از تابع فراخوانی شونده به پارمتر ها منتقل شده و عملیات مورد نظر روی آنها انجام میشود؛و شایان ذکر است که هر تغییری روی پارامتر ها تاثیری روی آرگومان های نمیذارد.
سلام
به مثال زیر توجه کنید:
فرض کنید می خواهیم یک تابع بنویسیم به طوری که دو عدد را به آن بدهیم و تابع جمع این دو عدد را محاسبه کند و برای ما این جمع را برگرداند و در یک متغیر قرار دهد:
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 را بدون پارامترها ها بازسازی کرد.
سلام و خداقوت.در بالا شما خودتون مقدار ورودی رودادین اما گفتین که از کاربر می گیریم!!! میشه توضیح بدین؟ ممنون از زحماتتون. ضمنا من یک پیام ارسال کرده بودم که الان یک پیامی بانام خودم دیدم که فقط به سبک خودم سلام کرده بود!! اما سوال من داخلش نیست.همین پیام آرمان که تشکر کرده!!
سلام، ممنونم از شما.
چون که کد نوشته شده در بالا، امکان اجرا شدن در اینجا را نداشته، ما نمی تونستیم از کاربر مقادیر رو بگیریم. بنابراین مقادیر رو خودمون به متغیرها به صورت دستی دادیم. در مورد قسمت آخر صحبت های شما، بنده اطلاع ندارم.
سلام و خداقوت. آموزش تون عالی بود.
در مثال " تابعی با یک پارامتر " میخواستم بدونم txt ثابته یا چیزیه که خودتون نعریف کردید ؟
در مثال مذکور که لینک آنرا مجدداً در زیر قرار داده ام، txt در واقع یک نام دلخواه است که به عنوان پارامتر ورودی تابع ()myfunction استفاده شده است. به قول شما، نامی است که خودمان تعریف کرده ایم و ثابت نیست.
beyamooz.com/try_it_yourself/tryit.php?filename=tryjs_function2
مرورگر مگه کامپایلر دارد که جاوا اسکریپت خطا درست کند و به کاربر اعلام کند؟؟
منظورم این است اگر خطایی به وجود آید چه طور به کاربر اعلام می شود در html,css مدیریت خطایی اصلن وجود نداشت!!
با توجه به اینکه احتمال چیدن نامناسب کدها در css و html وجود دارد، تصور کنید که بخواهیم صفحه ای را به خاطر اینکه یک خطای css یا html دارد با استفاده از مدیریت خطا جلوی مشاهده ی آن را بگیریم، خیلی کار پیچیده و سخت می شه. بنابراین لزومی ندارد در html و css مدیریت خطا وجود داشته باشد.
باید اشاره کرد که جاوا اسکریپت از مفسر جاوا اسکریپت استفاده می کند و نه از کامپایلر.
زبان جاوا اسکریپت از زبان EcmaScript گرفته شده است. توضیح در مورد ساختار این زبان از بحث ما خارج است.
سلام...ميخواستم تو يه تابع جاوااسكريپت يه تابع جاوااسكيريپت ديگه باشه..يعني هربار تابع اصلي صدا زده بشه تابعي كه داخلشه هم اجرا بشه...چطور بايد تابع رو تو تابع ديگه صدا زد؟مثلا تابع searching داخل تابع x اجرا شه
ابتدا باید بدونیم که 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 می شود.
منظورتان از scope chain همان قلمرو هستش؛برای اینکه بتوانیم تابعی را در تابع دیگر صدا بزنیم باید در یک قلمرو باشند وگرنه نمی شود درست گفتم آیا؟
می توان محدوده هم بیان کرد
قلمرو عبارت خوبیه به نظرم.
عالیییییییییه
لطفا یه قسمت تشکر اضافه کنین اونطوری بهتر میشه تشکر کرد وفقط توی این قسمت پیشنهادا نوشته بشه
یه دنیا ممنون