عملیات ریاضی در جاوا اسکریپت — راهنمای مقدماتی

در ادامه سلسله مقالات معرفی عملی زبان برنامه‌نویسی جاوا اسکریپت در وبلاگ فرادرس، در این نوشته به معرفی مفاهیم ریاضی در جاوا اسکریپت می‌پردازیم. شیوه استفاده از عملگرها و دیگر امکانات برای دستکاری موفق اعداد در این نوشته به تفصیل مورد بررسی قرار گرفته‌اند.

پیش‌نیازها

• سواد مقدماتی رایانه
• درکی اولیه از HTML و CSS
• داشتن بینشی از ماهیت جاوا اسکریپت

فیلم آموزش جاوا اسکریپت JavaScript در فرادرس

کلیک کنید

هدف این مقاله آشنا شدن با مفاهیم مقدماتی ریاضیات در جاوا اسکریپت است.

همه افراد ریاضی را دوست دارند

البته شاید عنوان فوق چندان هم صحیح نباشد. برخی افراد ریاضیات را دوست دارد و برخی از آن متنفر هستند، چون احتمالاً مجبور بوده‌اند جدول ضرب، تقسیم طولانی و موارد دیگر را در مدرسه بیاموزند و برخی افراد دیگر نیز در نقطه‌ای بین دو سر این طیف هستند. اما هیچ فردی انکار نمی‌کند که ریاضیات بخشی بنیادی از زندگی است و نمی‌توان بدون کمک گرفتن از آن کار زیادی انجام داد. این مسئله به طور خاص در مورد یادگیری هر زبان برنامه‌نویسی و به ویژه جاوا اسکریپت صدق می‌کند، چون بخش زیادی از کاری که ما انجام می‌دهیم با تکیه بر پردازش داده‌های عددی، محاسبه مقادیر جدید و غیره است. بنابراین نباید از این که بدانید جاوا اسکریپت مجموعه کاملی از تابع‌های ریاضی دارد، شگفت‌زده شوید. در این مقاله تنها بخش‌های ابتدایی از این تابع‌های ریاضیاتی که لازم است در بدو آشنایی با جاوا اسکریپت بدانید را بررسی می‌کنیم.

انواع اعداد

در برنامه‌نویسی حتی سیستم معمولی اعداد ده‌دهی که همه به خوبی می‌شناسیم نیز پیچیده‌تر از آن چیزی است که تصور می‌شود. ما از اصطلاح‌های مختلف برای توصیف انواع متفاوتی از اعداد ده‌دهی استفاده می‌کنیم برای نمونه:

• اعداد صحیح (Integer) که شامل همه اعداد هستند، مانند 10، 400 یا 5-.
• اعداد اعشاری (float) که دارای ممیز اعشاری هستند، برای نمونه، 12.5، و 56.7786543.
• اعداد double که نوع خاصی از اعداد اعشاری هستند و دقتی بالاتر از اعداد اعشاری معمولی دارند، یعنی تعداد ارقام اعشار آن‌ها بیشتر است.

ما انواع مختلفی از سیستم‌های عددی نیز داریم. اعداد ده‌دهی بر مبنای 10 هستند، یعنی در آن‌ها از ارقام 0 تا 9 استفاده می‌شود؛ اما انواع دیگری از سیستم‌های عددی نیز وجود دارند:

• اعداد دودویی (Binary) – پایین‌ترین سطح از زبان رایانه محسوب می‌شوند که شامل 0 و 1 هستند.
• اعداد هشت‌هشتی (Octal) –بر مبنای 8 هستند و در آن‌ها از ارقام 0 تا 7 استفاده شده است.
• اعداد هگزادسیمال (Hexadecimal) – بر مبنای 16 هستند و در آن‌ها از ارقام 0 تا 9 به همراه حروف a تا f استفاده می‌شود.

البته لازم نیست در مورد همه این‌ها دچار نگرانی شوید، چون ما در آغاز و در این مقاله، صرفاً به اعداد ده‌دهی می‌پردازیم. در مورد سیستم‌های عددی دیگر نیز به ندرت ممکن است موقعیت‌هایی پیش بیاید که نیاز به استفاده از آها باشد.

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

عدد از نظر جاوا اسکریپت

در این بخش برخی نمونه‌های استفاده از عدد در جاوا اسکریپت را بررسی می‌کنیم تا با ساختار ابتدایی که نیاز داریم آشنا شویم. دستورهایی که در ادامه می‌آیند را می‌توانید در بخش کنسول «ابزار توسعه‌دهندگان» (Developer Tools) مرورگر وب خود وارد کنید. برای رسیدن به این کنسول می‌توانید از دکمه‌های Ctrl+Shift+I استفاده کنید.

قبل از هر چیز دو متغیر اعلان کرده و آن‌ها را به ترتیب با عدد صحیح و اعشاری مقداردهی می‌کنیم. سپس نام‌های متغیرها را مجدداً وارد می‌کنیم تا وضعیت را بررسی کنیم:

var myInt = 5;
var myFloat = 6.667;
myInt;
myFloat;

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

اینک متغیرهای اولیه که همگی از یک نوع هستند را بررسی کنید. همچنین یک عملگر در جاوا اسکریپت به این منظور به نام typeof وجود دارد. دو خط زیر را در کنسول وارد کنید:

typeof myInt;
typeof myFloat;

در هر دو مورد number به دست می‌آید و بدین ترتیب در صورتی که با اعداد مختلف با انواع متفاوت سر و کار داشته باشیم، و مجبور باشیم به روش‌های گوناگونی آن‌ها را بررسی کنیم، همه چیز برای ما ساده‌تر خواهد شد.

عملگرهای حسابی

عملگرهای حسابی عملگرهای مقدماتی هستند که برای عملیات حسابی از آن‌ها استفاده می‌کنیم:

فیلم آموزش JavaScript ES6 جاوا اسکریپت در فرادرس

کلیک کنید

دقت کنید که به اعدادی که در دو سمت عملگرها قرار دارند «عملوند» (operand) گفته می‌شود. متد ()Math.pow معادل عملگر توان جدید است برای نمونه در (Math.pow(7, 3، عدد 7 مبنا و 3 نما است و نتیجه نیز برابر با 343 است.

بدیهی است که نیازی به تدریس مفاهیم مقدماتی ریاضی در این نوشته وجود ندارد؛ اما با ارائه مثال‌هایی درک شما از ساختارهای معرفی شده فوق بررسی می‌شود. مثال زیر را در کنسول مرورگر وارد کنید تا با ساختار عملگرهای حسابی بیشتر آشنا شوید.

ابتدا با برخی مثال‌های ساده شروع می‌کنیم:

10 + 7
9 * 8
60% 3

همچنین می‌توانید برخی اعداد درون متغیرها را نیز اعلان و مقداردهی کنید و از آن‌ها در عملیات حسابی استفاده کنید. این متغیرها دقیقاً همانند مقادیری که در عملیات حسابی درج می‌شوند عمل می‌کنند. برای نمونه:

var num1 = 10;
var num2 = 50;
9 * num1;
num1 ** 3;
num2 / num1;

در انتهای این بخش برخی عبارت‌های پیچیده‌تر مانند زیر را نیز امتحان کنید:

5 + 10 * 3;
num2% 9 * num1;
num2 + num1 / 8 + 2;

برخی از این مجموعه‌ها شاید نتیجه دقیقی که انتظار دارید را ارائه نکنند. در بخش بعدی دلیل این مسئله را بررسی می‌کنیم.

تقدم عملگرها

در آخرین مثال بخش فوق با فرض این که عدد num2 مقدار 50 را دارد و num1 مقدار 10 را نگهداری می‌کند:

num2 + num1 / 8 + 2;

شما به عنوان یک انسان ممکن است عبارت فوق را به صورت 50 به اضافه 10 مساوی 60 بخوانید، سپس بگویید 8 به علاوه 2 برابر با 10 است و در نهایت 60 تقسیم بر 10 معادل 6 خواهد بود.

اما مرورگر آن را به ترتیب زیر می‌خواند: 10 تقسیم بر 8 برابر با 1.25 است و سپس 50 به علاوه 1.25 به علاوه 2 معادل 53.25 است.

دلیل این مسئله بحث تقدم عملگرها است. برخی عملگرها، هنگام محاسبه نتیجه مجموع، قبل از عملگرهای دیگر اعمال می‌شوند. بحث تقدم عملگر در جاوا اسکریپت دقیقاً همان طور است که در کلاس‌های ریاضیات مدرسه تدریس می‌شود، ضرب و تقسیم ابتدا انجام می‌گیرند، سپس جمع و تفریق صورت می‌گیرد و همه عملیات دارای تقدم یکسان با ترتیب چپ به راست اجرا می‌شوند.

اگر بخواهیم تقدم عملگرها را نادیده بگیریم می‌توانیم پیرامون بخش‌هایی که می‌خواهیم ابتدا محاسبه شوند پرانتز قرار دهیم. بنابراین در کد زیر نتیجه عدد 6 خواهد بود:

(num2 + num1) / (8 + 2);

که می‌توانید عملاً آن را در کنسول مرورگر وارد کرده و نتیجه را مشاهده کنید.

عملگرهای افزایشی و کاهشی

برخی اوقات می‌خواهیم به طور مکرر مقادیری را به یک متغیر عددی اضافه یا کسر کنیم. این کار را می‌توان با استفاده از عملگرهای افزایشی (++) و کاهشی (--) انجام داد. از عملگر ++ قبلاً در «آموزش جاوا اسکریپت مقدماتی: ساخت بازی حدس اعداد» استفاده کردیم:

guessCount++;

این عملگرها عموماً در حلقه‌ها استفاده می‌شوند که در بخش‌های بعدی از این سلسله مطالب، در مورد آن‌ها بیشتر خواهیم آموخت. برای نمونه فرض کنید می‌خواهید روی یک فهرست بها چرخه‌ای تعریف کنید و مالیات فروش را به هر یک از آن‌ها اضافه کنید. بدین منظور از loop استفاده می‌شود تا به نوبت هر قیمت خوانده شده و محاسبات لازم برای افزودن مالیات فروش روی آن صورت بگیرد. عملگر افزاینده برای انتقال به قیمت بعدی در مواقع نیاز استفاده می‌شود.

در این بخش به بررسی این عملگرها در کنسول می‌پردازیم. در آغاز دقت کنید که نمی‌توانید این عملگرها را مستقیماً روی یک عدد اعمال کنید چون بی‌معنی به نظر می‌رسد؛ اما می‌توانیم یک مقدار به‌روزرسانی شده را به یک متغیر نسبت دهیم و نه این که روی خود مقدار اعمال کنیم. دستور زیر یک خطا بازمی‌گرداند:

3++;

بنابراین عملگرهای فوق را تنها می‌توان روی متغیرها استفاده کرد. برای نمونه:

var num1 = 4;
num1++;

این وضعیت تا حدودی عجیب است، چون مقدار بازگشتی برابر 4 است. دلیل این مسئله آن است که مرورگر مقدار کنونی را بازگشت می‌دهد و سپس متغیر را افزایش می‌دهد. اگر یک بار دیگر خروجی بگیرید می‌بینید که متغیر افزایش یافته است.

num1;

همین مطلب در مورد عملگر – نیز صحیح است. کد زیر را امتحان کنید:

var num2 = 6;
num2--;
num2;

دقت کنید که می‌توان مرورگر را واداشت به روشی دیگر عمل کند، یعنی ابتدا متغیر را افزایش/کاهش دهد و سپس آن را بازگشت دهد. برای این کار باید عملگر را به جای انتها در ابتدای متغیر قرار داد. برای بررسی این حالت در مثال‌های فوق به جای ++num1 و num2-- از num1++ و num2-- استفاده کنید.

عملگرهای انتساب

عملگرهای انتساب عملگرهایی هستند که یک مقدار به متغیری نسبت می‌دهند. ما از نوع ساده آن‌ها به صورت = استفاده کردیم. این عملگر متغیر سمت چپ را به مقدار سمت راست نسبت می‌دهد:

var x = 3; // x contains the value 3
var y = 4; // y contains the value 4
x = y; // x now contains the same value y contains, 4

اما عملگرهای انتساب پیچیده‌تری نیز وجود دارند که میانبرهای مفیدی برای خلاصه شدن و کارآمدتر شدن کد ارائه می‌کنند. رایج‌ترین موارد در جدول زیر خلاصه شده‌اند:

برخی از مثال‌های فوق را در کنسول خود وارد کنید تا ایده‌ای چگونگی عملکرد آن‌ها بیابید و در هر مورد بررسی کنید که آیا می‌توانید مقدار مورد نظر را حدس بزنید.

دقت کنید که می‌توان همواره متغیرهای دیگری را نیز در سمت راست هر عبارت استفاده کرد. برای مثال:

var x = 3; // x contains the value 3
var y = 4; // y contains the value 4
x *= y; // x now contains the value 12

البته انواع بسیار مختلف دیگری از عملگرهای انتساب نیز وجود دارند، اما در این نوشته تنها عملگرهای مقدماتی را مورد بررسی قرار می‌دهیم.

یادگیری عملی: اندازه بندی یک کادر بوم (Canvas Box)

در این تمرین، برخی اعداد و عملگرها برای تغییر دادن اندازه یک کادر دستکاری می‌شوند. این کادر با استفاده از یک API مرورگر به نام Canvas API ترسیم می‌شود. البته نیاز نیست در مورد طرز کار آن نگران باشید، چون در این نوشته صرفاً روی بحث‌های ریاضی متمرکز شده‌ایم. عرض و ارتفاع کادر (برحسب پیکسل) در متغیرهای x و y در ابتدا برابر با مقدار 50 تعیین شده است.

در کادر قابل ویرایش فوق دو خط هستند که با کامنت مشخص شده‌اند و با به‌روزرسانی آن‌ها باعث می‌شوید که کادر سبز رنگ بالا بزرگ یا کوچک شود. موارد زیر را امتحان کنید:

• خطی که x را محاسبه می‌کند را طوری تغییر دهید همچنان 50 پیکسل عرض داشته باشد، اما 50 به صورت مجموع 43 و 7 با یک عملگر حسابی محاسبه می‌شود.
• خطی که y را محاسبه می‌کند را طوری تغییر دهید که 75 پیکسل ارتفاع داشته باشد؛ اما 75 با استفاده از اعداد 25 و 3 و یک عملگر حسابی محاسبه شود.
• خطی که x را محاسبه می‌کند را طوری تغییر دهید که 250 پیکسل عرض داشته باشد؛ اما 250 با استفاده از دو عدد و عملگر باقیمانده (modulo) محاسبه شود.
• خطی که y را محاسبه می‌کند را طوری تغییر دهید که 150 پیکسل ارتفاع داشته باشد؛ اما 150 با استفاده از سه عدد و عملگرهای تفریق و تقسیم محاسبه شود.
• خطی که x را محاسبه می‌کند را طوری تغییر دهید که 200 پیکسل عرض داشته باشد؛ اما 200 با استفاده از عدد 4 و یک عملگر انتساب محاسبه شود.
• خطی که y را محاسبه می‌کند را طوری تغییر دهید که کادر ما 200 پیکسل ارتفاع داشته باشد؛ اما با استفاده از اعداد 50 و 3 و عملگر ضرب و عملگر انتساب جمعی محاسبه شود.

اگر باعث خراب شدن کد شدید جای نگرانی نیست؛ چون همیشه با زدن دکمه Reset می‌توانید همه چیز را به حالت اول بازگردانید. پس از این که همه سؤال‌های فوق را به درستی پاسخ دادید می‌توانید با کد کمی کار کنید و چالش‌های بیشتری برای خود تعریف کنید.

عملگرهای مقایسه

برخی اوقات لازم است که تست‌های درست/نادرست را اجرا کنیم، و سپس بر اساس نتیجه این تست اقدام‌های مختلفی صورت بدهیم. در این موارد از «عملگرهای مقایسه‌ای» (comparison operators) استفاده کنید.

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

اگر برخی از این مقادیر را در کنسول وارد کنید می‌بینید که همه آن‌ها مقادیر true/false باز می‌گردانند. این مقادیر بولی (Boolean) هستند که قبلاً در مقالات دیگر با آن‌ها آشنا شده‌ایم. این مقادیر بسیار مفید هستند چون به ما امکان تصمیم‌گیری در مورد کد را می‌دهند و هر بار که می‌خواهیم نوعی گزینه را انتخاب کنیم به کار می‌آیند. برای نمونه مقادیر بولی به منظورهای زیر استفاده می‌شوند:

• نمایش برچسب متنی صحیح روی یک دکمه بسته به این که امکانی فعال شده است یا نه.
• نمایش پیام خاتمه بازی در صورت به پایان رسیدن آن و نمایش پیام پیروزی در صورتی که بازیکن در بازی برنده شود.
• نمایش پیام تبریک فصلی بسته به این که فصل تعطیلات رسیده است یا نه.
• بزرگنمایی روی نقشه بسته به این که چه سطحی از بزرگنمایی انتخاب شده است.

شیوه کدنویسی چنین منطقی را هنگام استفاده از گزاره‌های شرطی در مقاله بعدی از این سلسله مطالب بررسی خواهیم کرد. در حال حاضر یک مثال ساده را بررسی می‌کنیم:

><button>Start machine</button>
<p>The machine is stopped.</p>

var btn = document.querySelector('button');
var txt = document.querySelector('p');

btn.addEventListener('click', updateBtn);

function updateBtn() {
  if (btn.textContent === 'Start machine') {
    btn.textContent = 'Stop machine';
    txt.textContent = 'The machine has started!';
  } else {
    btn.textContent = 'Start machine';
    txt.textContent = 'The machine is stopped.';
  }
}

می‌بینید که عملگر برابری درون تابع ()updateBtn استفاده شده است. در این حالت بررسی می‌کنیم که آیا دو عبارت ریاضیاتی مقادیر یکسانی دارند یا نه. ما مشغول تست این نکته هستیم که آیا محتوای متنی دکمه شامل رشته خاصی است یا نه؛ اما از همین مفهوم استفاده می‌کنیم. اگر دکمه در حال حاضر هنگام کلیک شدن، پیام «Start machine» را نمایش می‌دهد، برچسب آن را به صورت «Stop machine» تغییر می‌دهیم و برچسب را به همین ترتیب به‌روزرسانی می‌کنیم. اگر دکمه در حال حاضر پیام «Stop machine» را هنگام کلیک شدن، نمایش می‌دهد، مجدداً پیام قبلی را نمایش می‌دهیم.

دقت کنید که چنین کنترلی که بین دو حالت متفاوت سوئیچ می‌کند، اصطلاحاً toggle نامیده می‌شود و گفته می‌شود که کنترل بین دو حالت toggle می‌کند.

جمع‌بندی

در این مقاله اطلاعات بنیادی مورد نیاز برای کار با اعداد در جاوا اسکریپت را ارائه کردیم. موارد مختلف کاربرد اعداد را مشاهده کردیم و بنابراین ایده خوبی است که از آن‌ها در پروژه‌های خود استفاده کنیم. اگر از ریاضیات چندان خوشتان نمی‌آید باید خوشحال باشید، چون این بخش از مطالب آموزش عملی جاوا اسکریپت ما نسبتاً کوتاه بوده است. در بخش بعدی به بررسی متن و چگونگی دستکاری متون در جاوا اسکریپت خواهیم پرداخت.

فیلم مجموعه آموزش جاوااسکریپت JavaScript – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌های برنامه‌‌نویسی
• آموزش جاوا اسکریپت (JavaScript)
• مجموعه آموزش‌های مهندسی نرم افزار
• آموزش تعریف توابع در جاوا اسکریپت (JavaScript)
• آموزش جاوا اسکریپت — مجموعه مقالات جامع وبلاگ فرادرس
• آموزش کاربردی برنامه نویسی وب با جی کوئری
• متدهای شیء (Object Methods) در جاوا اسکریپت — به زبان ساده

==