درس چهارم- عملگر‌ها و توابع
در درس پیشین با تعدادی مفاهیم پایه‌ای جاوا اسکریپت (اظهارات و...) آشنا شدیم. در این درس به تعداد دیگری از این مفاهیم می‌پردازیم.
عملگر‌ها
عملگر‌ها در اصل نماد یا نشانه‌ای برای انجام عمل ویژه‌ای هستند. هر کدام از عملگر‌ها وظیفه خاصی دارند، بطور نمونه عملگر + وظیفه جمع کردن را بر عهده دارد. عملگر‌ها در بیشتر زبان‌های برنامه نویسی وجود دارند چرا که فاکتورهایی برای حل مشکلاتی هستند که برنامه نویس‌ها برایشان برنامه می‌نویسند. به عنوان نمونه برنامه «ماشین حسابی» را در نظر بگیرید که توسط یک برنامه‌نویس نوشته شده باشد، بطور حتم در این برنامه از عملگر‌ها استفاده شده است.
عملگر‌ها در جاوا اسکریپت به چند دسته تقسیم می‌شوند که ما در این قسمت به مهم‌ترین و کارآمد‌ترین آنها می‌پردازیم.
انواع عملگر‌ها در جاوا اسکریپت
عملگرهای محاسباتی یا ریاضی (Arithmetic Operators)
این نوع عملگر‌ها اعمال اصلی (+ - / *) در ریاضی را انجام می‌دهند. علاوه بر آنها عملگر دیگری (%) که وظیفه نمایش خارج قسمت یک تقسیم را بعهده دارد بهمراه دو عملگر دیگر که هر کدام به ترتیب یک واحد اضافه (x++ یا ++x) و یک واحد کم (x-- یا x--) می‌کنند، وجود دارند. به نظر می‌رسد که نیازی به شرح عملگرهای چهار عمل اصلی ریاضی نباشد اما وظیفه سه عمگر دیگر به این ترتیب است که عملگر (%) باقیمانده تقسیم دو عدد را بر می‌گرداند. برای نمونه با استفاده از این عملگر باقیمانده تقسیم ۵ بر ۲ که ۱ می‌شود برگردانده می‌شود. دو عملگر دیگر (x++ یا ++x) و (x-- یا x--) به ترتیب یک واحد به عدد x اضافه و کم می‌کنند.
عملگرهای مقایسه‌ای
این نوع عملگر‌ها مقدارهای دو متغیر را با هم مقایسه می‌کنند و نتیجه این مقایسه یا درست می‌شود و یا غلط. عملگرهای مقایسه‌ای در دستورات شرطی جاوا اسکریپت بسیار کارایی بالایی دارند. در تصویر زیر شش نوع از این عملگر‌ها نشان داده شده است.
شما هیچ نیازی به بخاطر سپردن این عملگر‌ها ندارید، در طول دوره و در زمان نوشتن کدهای خود اندک اندک کارکردن با تمام این عملگر‌ها برایتان ساده می‌شود.
عملگرهای منطقی
این مدل عملگر سه نوع نماد را شامل می‌شود که در حقیقت یک یا چند نتیجه را بررسی می‌کنند و پاسخ را باز می‌گردانند.
&& به معنی «و» یا AND مانند (x < 10 && y > 1)
||به معنی «یا» OR مانند (x==5 || y==5)
!این عملگر نتیجه را منفی می کند مانند (x==y) !
نکته: کاربرد اصلی این عملگر‌ها در جملات شرطی نمایان می‌شود که در زمان شرح دستورات شرطی آن را شرح خواهیم داد.
عملگرهای انتساب
علامت = را در جاوا اسکریپت برای انتساب دادن داده‌ای به متغیر استفاده می‌کنند. بطور نمونه اگر بخواهیم در متغییر x مقدار ۵ را قرار دهیم از این عملگر به شیوه زیر استفاده می‌کنیم:
var x = 5 ;
حال فرض کنید می‌خواهیم مقدار x را به مقدار قبلی خود اضافه کنیم:
x+= x ;
alert(x); // مقدار 10 را نمایش میدهد چراکه 5 دوباره به مقدار قبلی آن اضافه شده است
این عبارت در اصل همان x = x + x می‌شود.
به همین ترتیب می‌توان مقداری را از متغیر خود کم کنیم:
var x = 5 ;
var y = 3 ;
x-=y;
alert(x); این دستور مقدار 2 را باز می گرداند //
این عمل (x-=y) در اصل همان x=x-y است.
مشابه عمل‌هایی که در بالا گفته شد را می‌توانیم با استفاده از دیگر عملگر‌ها انجام دهیم.
x*=y
x/=y
x%=y
استفاده از عملگر + برای مقادیر رشته‌ای
کاربرد دیگر عملگر + در بهم پیوستن دو مقدار رشته‌ای می‌باشد:
var txt1 = " چه " ;
var txt2 = " ماشین خوبی " ;
var txt3 = txt1 + txt2 ;
alert(txt3) ;
نکته: برای قرار دادن فاصله بین مقادیر رشته‌ای کافیست یک جای خالی (فاصله) در یکی از رشته‌ها قرار دهید.
نکته: اگر با کمک عملگر + یک عدد را با یک رشته جمع بزنید، حاصل کار رشته خواهد شد.
var x=5+5;خروجی عدد 10 //
var y="5"+5;خروجی رشته 55 //
var z="درود"+5; خروجی رشته درود5 //
توابع در جاوا اسکریپت
یک تابع در اصل یک بلاک (مجموعه کد در داخل یک بلاک) از کد است که در زمان فراخوانی اجرا می‌شوند.
برای نمونه به مجموعه کدهای زیر دقت کنید:
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
alert("درود دنیا ");
var txt1 = " چه " ;
var txt2 = " ماشین خوبی " ;
var txt3 = txt1 + txt2 ;
alert(txt3) ;
}
</script>
</head>
<body>
<button onclick="myFunction()"> امتحان کنید </button>
</body>
</html>
در نمونه بالا تابع ()myFunction دارای مجموعه‌ای از کدهاست که در زمان فراخوانی آن اجرا می‌شوند. برای فراخوانی این تابع کافیست کاربر دکمه «امتحان کنید» را بفشارد. در حقیقت با فشردن دکمه «امتحان کنید» عمل فراخوانی تابع انجام شده و کدهای داخل بلوک تابع اجرا می‌شوند.
نحوه نوشتن تابع به شکلی زیر می‌باشد:
function نام تابع()
{
کدهای داخل تابع که می خواهید اجرا شوند
}
تابع به همراه ورودی یا پارامتر (آرگومان)
تابعی که در نمونه بالا نوشته شد دارای هیچ ورودی نمی‌باشد. اما وقتی شما تابعی می‌سازید میتوانید طوری آن را تعریف کنید که بتوانید مقادیری را به عنوان ورودی به آن بفرستید و در داخل تابع از آنها استفاده کنید.
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(name)
{
alert(" درود " + name);
}
</script>
</head>
<body>
<button onclick="myFunction(' پیمان')"> امتحان کنید </button>
</body>
</html>
در نمونه بالا تابع myFunction (name) یک پارامتر (نام) را دریافت کرده و در داخل تابع از آن استفاده می‌کند. شما میتوانید هر مقداری که خواستید به عنوان ورودی به تابع بفرستید.
تابع همراه با خروجی
تا به اینجا تمام توابعی که تعریف کردیم مطلبی را چاپ می‌کردند و هیچ کدام مقداری را به عنوان خروجی باز نمی‌گرداندند. اما شما میتوانید تابع را طوری بسازید که مقداری را به شکل خروجی باز گرداند. گاهی شما می‌خواهید که تابع عملی را انجام دهد و سرانجام عملیات را به جایی که تابع فراخوان شده بازگرداند. در این حالت تابعی با قابلیت بازگشت خروجی می‌سازیم.
در مجموعه کدهای زیر تابعی با توانایی بازگشت خروجی استفاده شده است.
<!DOCTYPE html>
<html> <head>
<script>
function myFunction(x) {
y = x / 2 ;
return y ; }
</script> </head>
<body>
<script>
var num = myFunction(200);
alert(num);
</script>
</body>
</html>
واژه return دستوری است که نقش بازگرداندن خروجی را بر عهده دارد.
نکته: در صورتی که بخواهیم در قسمتی از تابع از آن خارج شویم یعنی اجازه اجرای کدهای بعدی را ندهیم از return استفاده می‌کنیم.
function myFunction( a , b ) {
if ( a > b ) {
return ; }
x = a + b ; }
در نمونه بالا بدون ارسال خروجی، تنها برای خارج شدن از تابع و اتمام اجرای کدهای داخل آن، از return استفاده کرده‌ایم. اگر a بزرگ‌تر از b باشد از تابع خارج می‌شویم.
متغیرهای محلی یا داخلی (Local Variables)
زمانی که متغیری را در داخل یک تابع تعریف می‌کنیم آن متغیر محلی می‌شود، یعنی تنها در داخل همان تابع قابل استفاده است. در اصل دامنه دسترسی به آن داخل تابع است.
function myFunction( ) {
var a ;
var b ;
}
دو متغیر a و b متغیرهای محلی می‌باشند.
نکته: این نوع متغیر بعد از اتمام کار تابع از بین خواهند رفت.
متغیرهای جهانی (Global Variables)
به متغیرهایی جهانی گفته می‌شود که بیرون از توابع تعریف شده باشند. همه دستورات و توابع توانایی استفاده کردن از این نوع متغیر را دارا می‌باشند.
نکته: متغیرهای جهانی وقتی صفحه را ببندید از بین خواهند رفت.
نکته: اگر مقداری را داخل یک متغیر که پیش از این تعریف نکرده‌اید قرار دهید، آن متغیر یک متغیر جهانی خواهد بود.
name = "پیمان" ;
به این شکل متغیر name یک متغیر جهانی خواهد بود و حتی در داخل توابع هم جهانی پنداشته خواهد شد.
دستور alert (ایجاد یک کادر پیام)
برای نمایش یک کادر پیام به کاربر از دستور alert استفاده می‌کنیم. همانطور که متوجه شده‌اید در درس‌های گذشته به کررات از این دستور استفاده کردیم.
alert (" درود ") ;
دستور prompt (دریافت داده از کاربر)
اگر نیاز داشته باشیم که یک پیام به کاربر داده و از او پاسخی دریافت کنیم با استفاده از دستور prompt این مهم را انجام می‌دهیم.
<!DOCTYPE html>
<html> <head> </head>
<body>
<script>
var name = prompt ( " لطف کنید نام خود را وارد کنید " ) ;
alert ( " خوش آمدید " + name ) ;
</script>
</body> </html>
همانطور که در نمونه بالا مشاهده می‌کنید ابتدا با استفاده از دستور prompt نام کاربر را گرفته و در متغیر name قرار داده‌ایم و بعد با استفاده از alert آن را به همراه پیغام «خوش آمدید» چاپ کرده‌ایم.
بسیار کاربردی و مفید بود.