PDN | آموزش جاوا اسکریپت مبتدی : ریاضیات پایه در جاوا اسکریپت

آموزش جاوا اسکریپت مبتدی : ریاضیات پایه در جاوا اسکریپت - اعداد و اپراتور ها

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

همه عاشق ریاضی هستند

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

انواع اعداد

در برنامه‌نویسی، حتی سیستم اعداد اعشاری ساده‌ای که همه ما به خوبی می‌شناسیم، پیچیده‌تر از آن چیزی است که فکر می‌کنید. ما از اصطلاحات مختلفی برای توصیف انواع مختلف اعداد اعشاری استفاده می‌کنیم، به عنوان مثال: - اعداد صحیح (integer) اعدادی بدون بخش کسری هستند. آنها می‌توانند مثبت یا منفی باشند، به عنوان مثال، 10، 400 یا -5. - اعداد ممیز شناور (float) دارای نقطه اعشار و رقم اعشار هستند، به عنوان مثال 12.5 و 56.7786543. ما حتی انواع مختلفی از سیستم‌های اعداد داریم! اعشاری مبنای 10 است (به این معنی که در هر رقم از 0 تا 9 استفاده می‌کند)، اما مواردی مانند موارد زیر را نیز داریم: - binary - زبان سطح پایین کامپیوترها؛ 0 و 1. - هشتایی octal - مبنای 8، در هر رقم از 0 تا 7 استفاده می‌کند. - هگزادسیمال hexadecimal - مبنای 16، در هر رقم از 0 تا 9 و سپس از a تا f استفاده می‌کند. ممکن است قبلاً هنگام تنظیم رنگ‌ها در CSS با این اعداد مواجه شده باشید. قبل از اینکه نگران آب شدن مغزتان شوید، همین جا متوقف شوید! برای شروع، ما در طول این دوره فقط به اعداد اعشاری خواهیم پرداخت؛ به ندرت پیش می‌آید که نیازی به فکر کردن به انواع دیگر داشته باشید، اگر هرگز پیش بیاید. خبر خوب دوم این است که برخلاف برخی از زبان‌های برنامه‌نویسی دیگر، جاوا اسکریپت فقط یک نوع داده برای اعداد، چه اعداد صحیح و چه اعداد اعشاری، دارد - درست حدس زدید، Number. این بدان معناست که هر نوع عددی که در جاوا اسکریپت با آن سر و کار دارید، دقیقاً به یک شکل با آنها برخورد می‌کنید. در واقع، جاوا اسکریپت یک نوع عدد دوم به نام BigInt دارد که برای اعداد صحیح بسیار بسیار بزرگ استفاده می‌شود. اما برای اهداف این دوره، ما فقط نگران مقادیر Number خواهیم بود.

برای من همه اینها عدد اند

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

JAVASCRIPT

۲- مقادیر عددی بدون علامت نقل قول تایپ می‌شوند - قبل از ادامه، سعی کنید چند متغیر دیگر حاوی اعداد را تعریف و مقداردهی اولیه کنید. ۳- حالا بیایید بررسی کنیم که هر دو متغیر اصلی ما از یک نوع داده باشند. در جاوا اسکریپت عملگری به نام typeof وجود دارد که این کار را انجام می‌دهد. دو خط زیر را مطابق شکل وارد کنید:

JAVASCRIPT

در هر دو مورد باید "number" برگردانده شود - این کار کار را برای ما بسیار آسان‌تر می‌کند تا اینکه اعداد مختلف انواع داده متفاوتی داشته باشند و ما مجبور باشیم به روش‌های مختلفی با آنها برخورد کنیم. خب!

متدهای مفید اعداد

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

JAVASCRIPT

تبدیل به انواع داده عددی

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

JAVASCRIPT

در نهایت نتیجه ۷۴۳ خواهد بود، نه ۷۷، زیرا myNumber در واقع به عنوان یک رشته تعریف شده است. می‌توانید این را با تایپ کردن دستور زیر آزمایش کنید:

JAVASCRIPT

برای اصلاح محاسبه، می‌توانید این کار را انجام دهید:

JAVASCRIPT

نتیجه همانطور که در ابتدا انتظار می‌رفت، ۷۷ است.

اپراتورهای حسابی

عملگرهای حسابی برای انجام محاسبات ریاضی در جاوا اسکریپت استفاده می‌شوند:

اپراتور	نام	هدف	مثال
+	جمع	دو عدد را با هم جمع می‌کند.	6 + 9
-	تفریق	عدد سمت راست را از عدد سمت چپ کم می‌کند.	15 - 20
*	ضرب	دو عدد را در هم ضرب می‌کند.	3 * 7
/	تقسیم	عدد سمت چپ را بر عدد سمت راست تقسیم می‌کند.	5 / 10
%	باقیمانده (که گاهی اوقات مدولو نامیده می‌شود)	باقیمانده‌ی تقسیم عدد سمت چپ به تعدادی عدد صحیح برابر با عدد سمت راست را برمی‌گرداند.	3 % 8
**	توان	یک عدد پایه را به توان توان آن عدد پایه می‌رساند، یعنی عدد پایه را در خودش ضرب می‌کند، ضربدر توان‌ها.	5 ** 2

گاهی اوقات اعدادی را که در محاسبات دخیل هستند، به عنوان عملوند (operand) خواهید دید. گاهی اوقات ممکن است ببینید که توان‌ها با استفاده از روش قدیمی‌تر بیان می‌شوند، که به روشی بسیار مشابه عمل می‌کند. به عنوان مثال، در ، 7 پایه و 3 توان است، بنابراین نتیجه عبارت 343 است. معادل 7**3 است. احتمالاً نیازی نیست که نحوه انجام محاسبات ریاضی پایه را به شما آموزش دهیم، اما می‌خواهیم درک شما از نحو مربوطه را آزمایش کنیم. سعی کنید مثال‌های زیر را در کنسول جاوا اسکریپت ابزارهای توسعه‌دهنده خود وارد کنید تا با نحو آشنا شوید. ۱- ابتدا سعی کنید چند مثال ساده از خودتان وارد کنید، مانند

JAVASCRIPT

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

JAVASCRIPT

۳- در آخر این بخش، سعی کنید عبارات پیچیده‌تری مانند موارد زیر را وارد کنید:

JAVASCRIPT

بخش‌هایی از این مجموعه محاسبات آخر ممکن است نتیجه‌ای را که انتظار داشتید به شما ندهد؛ بخش زیر می‌تواند به خوبی پاسخ این سوال را بدهد.

اولویت اپراتورها

بیایید به آخرین مثال از بالا نگاهی بیندازیم، با فرض اینکه num2 مقدار 50 و num1 مقدار 10 را نگه می‌دارد (همانطور که در ابتدا در بالا گفته شد):

JAVASCRIPT

به عنوان یک انسان، ممکن است این را به صورت «50 به علاوه 10 برابر با 60» بخوانید، سپس «8 به علاوه 2 برابر با 10» و در نهایت «60 تقسیم بر 10 برابر با 6» بنویسید. اما مرورگر این را به صورت «10 تقسیم بر 8 برابر با 1.25» و سپس «50 به علاوه 1.25 به علاوه 2 برابر با 53.25» می‌نویسد. این به دلیل اولویت عملگرها است - برخی از عملگرها قبل از عملگرهای دیگر هنگام محاسبه نتیجه یک محاسبه (که در برنامه‌نویسی به عنوان یک عبارت شناخته می‌شود) اعمال می‌شوند. اولویت عملگرها در جاوا اسکریپت همان چیزی است که در کلاس‌های ریاضی مدرسه تدریس می‌شود - ضرب و تقسیم همیشه ابتدا انجام می‌شوند، سپس جمع و تفریق (محاسبه همیشه از چپ به راست ارزیابی می‌شود). اگر می‌خواهید اولویت عملگرها را لغو کنید، می‌توانید اطراف قسمت‌هایی که می‌خواهید ابتدا به طور صریح با آنها برخورد شود، پرانتز قرار دهید. بنابراین برای بدست آوردن نتیجه 6، می‌توانیم این کار را انجام دهیم:

JAVASCRIPT

برای آزمایش این مورد، خط قبلی را در کنسول وارد کنید.

اپراتورهای افزایش و کاهش

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

JAVASCRIPT

بیایید سعی کنیم با این موارد در کنسول خود بازی کنیم. برای شروع، توجه داشته باشید که نمی‌توانید این موارد را مستقیماً روی یک عدد اعمال کنید، که ممکن است عجیب به نظر برسد، اما ما یک مقدار به‌روزرسانی‌شده جدید را به یک متغیر اختصاص می‌دهیم، نه اینکه روی خود مقدار عمل کنیم. دستور زیر خطا می‌دهد:

JAVASCRIPT

بنابراین، شما فقط می‌توانید یک متغیر موجود را افزایش دهید. این را امتحان کنید:

JAVASCRIPT

خب، نکته عجیب شماره ۲! وقتی این کار را انجام می‌دهید، مقدار ۴ را برمی‌گردانید - دلیلش این است که مرورگر مقدار فعلی را برمی‌گرداند، سپس متغیر را یک واحد افزایش می‌دهد. اگر دوباره مقدار متغیر را برگردانید، می‌توانید ببینید که یک واحد افزایش یافته است:

JAVASCRIPT

همین امر در مورد -- نیز صادق است: موارد زیر را امتحان کنید

JAVASCRIPT

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

اپراتورهای انتساب

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

JAVASCRIPT

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

اپراتور	نام	هدف	مثال	میانبر برای
+=	انتساب جمع	مقدار سمت راست را به مقدار متغیر سمت چپ اضافه می‌کند، سپس مقدار متغیر جدید را برمی‌گرداند	x += 4	x = x + 4
-=	انتساب تفریق	مقدار سمت راست را از مقدار متغیر سمت چپ کم می‌کند و مقدار متغیر جدید را برمی‌گرداند.	x -= 3	x = x - 3
*=	انتساب ضرب	مقدار متغیر سمت چپ را در مقدار سمت راست ضرب می‌کند و مقدار متغیر جدید را برمی‌گرداند	x *= 3	x = x * 3
/=	انتساب تقسیم	مقدار متغیر سمت چپ را بر مقدار سمت راست تقسیم می‌کند و مقدار متغیر جدید را برمی‌گرداند.	x /= 5	x = x / 5

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

JAVASCRIPT

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

اندازه بندی جعبه canvas

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

JAVASCRIPT

مثال بالا را در Playground باز کنید، سپس فهرست دستورالعمل‌های زیر را دنبال کنید تا کادر را با استفاده از عملگرها و/یا مقادیر خاص در هر مورد، به اندازه‌های خاصی بزرگ/کوچک کنید: - خطی که x را محاسبه می‌کند را تغییر دهید تا کادر همچنان 50 پیکسل عرض داشته باشد، اما 50 با استفاده از اعداد 43 و 7 و یک عملگر حسابی محاسبه شود. - خطی که y را محاسبه می‌کند را تغییر دهید تا کادر 75 پیکسل ارتفاع داشته باشد، اما 75 با استفاده از اعداد 25 و 3 و یک عملگر حسابی محاسبه شود. - خطی که x را محاسبه می‌کند را تغییر دهید تا کادر 100 پیکسل عرض داشته باشد، اما 100 با استفاده از سه عدد و عملگرهای تفریق و تقسیم محاسبه شود. - خطی که y را محاسبه می‌کند را تغییر دهید تا کادر 200 پیکسل ارتفاع داشته باشد، اما 200 با استفاده از اعداد 2 و x و عملگر ضرب محاسبه شود. اگر کد را اشتباه کردید نگران نباشید. همیشه می‌توانید دکمه Reset را فشار دهید و دوباره شروع کنید.

اپراتورهای مقایسه‌ای

گاهی اوقات می‌خواهیم تست‌های درست/نادرست را اجرا کنیم، سپس بسته به نتیجه آن تست، بر اساس آن عمل کنیم - برای انجام این کار از عملگرهای مقایسه‌ای استفاده می‌کنیم.

اپراتور	نام	هدف	مثال
===	تساوی مطلق	بررسی می‌کند که آیا مقادیر چپ و راست با یکدیگر یکسان هستند یا خیر	5 === 2 + 4
!==	عدم تساوی مطلق	بررسی می‌کند که آیا مقادیر چپ و راست با یکدیگر یکسان نیستند یا خیر	5 !== 2 + 3
<	کمتر از	بررسی می‌کند که آیا مقدار سمت چپ از مقدار سمت راست کوچکتر است یا خیر.	10 < 6
>	بزرگتر از	بررسی می‌کند که آیا مقدار سمت چپ از مقدار سمت راست بزرگتر است یا خیر.	10 > 20
<=	کمتر یا مساوی	بررسی می‌کند که آیا مقدار سمت چپ کوچکتر از مقدار سمت راست یا مساوی آن است یا خیر.	3 <= 2
>=	بزرگتر یا مساوی	بررسی می‌کند که آیا مقدار سمت چپ بزرگتر یا مساوی مقدار سمت راست است یا خیر.	5 >= 4

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

HTML

JAVASCRIPT

می‌توانید ببینید که عملگر تساوی درست درون تابع استفاده می‌شود. در این حالت، ما بررسی نمی‌کنیم که آیا دو عبارت ریاضی مقدار یکسانی دارند یا خیر - ما بررسی می‌کنیم که آیا محتوای متن یک دکمه حاوی یک رشته خاص است یا خیر - اما همچنان همان اصل در کار است. اگر دکمه در حال حاضر هنگام فشار دادن می‌گوید "شروع دستگاه" (Start machine)، برچسب آن را به "توقف دستگاه" (Stop machine) تغییر می‌دهیم و برچسب را به صورت مناسب به‌روزرسانی می‌کنیم. اگر دکمه در حال حاضر هنگام فشار دادن می‌گوید "توقف دستگاه" (Stop machine)، دوباره صفحه نمایش را به حالت قبل برمی‌گردانیم. چنین کنترلی که بین دو حالت تغییر می‌کند، معمولاً به عنوان یک ضامن (toggle) شناخته می‌شود. این کنترل بین یک حالت و حالت دیگر تغییر می‌کند - چراغ روشن، چراغ خاموش و غیره.