ساخت ماشین حساب با جاوا اسکریپت – از صفر تا صد + کد

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

پیش‌ نیازهای ساخت ماشین حساب با جاوا اسکریپت چیست؟

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

به صورت کلی، برای ساخت ماشین حساب با جاوا اسکریپت یک سری پیش‌نیازها لازم است که عبارت‌اند از:

• آشنایی با نحوه استفاده از کد ادیتور
• داشتن درک اولیه از جاوا اسکریپت، HTML و همچنین CSS

پیاده سازی ماشین حساب با جاوا اسکریپت

در قدم اول قبل از انجام هر کاری، باید پوشه‌ای جدید در کامپیوتر ایجاد و سه فایل با نام و فرمت‌های زیر در آن ساخته شوند:

1. Index با پسوند Html
2. Style با پسوند CSS
3. Script با پسوند js

برای شروع پروژه ساخت ماشین حساب جاوا اسکریپتی، باید عملکردهای اساسی یک ماشین حساب را در نظر گرفت. این عملگرها شامل جمع، تفریق، ضرب، تقسیم، حذف، پاک کردن و البته امکان استفاده از اعداد اعشاری در انجام این عملیات است. در فایل HTML، می‌توان فایل‌های CSS و JavaScript را با استفاده از کد زیر به هم ارتباط داد:

کار بعدی که باید انجام شود این است که تمام عناصر مختلف HTML اضافه شوند. برای این کار یک div ، با کلاسی به نام calculator-grid ایجاد خواهد شد.

تمام عناصر و دکمه‌های مختلف HTML در calculator-gridباید در زیر بخشdivقرار بگیرند. تمام این عناصر در قطعه کد زیر به همین شکل اضافه شده‌اند:

کد HTML فوق حاوی چندین کلاسdivاست.

• کلاسoutput نشان‌دهنده صفحه ماشین حساب است.
• previous-operand نشان‌دهنده نتیجه عملکرد قبلی در ماشین حساب است.
• کلاس current-operand عملکرد فعلی ماشین حساب را نشان می‌دهد.
• کلاس span-two نشان‌ دهنده دکمه‌هایی است که ستون را در ماشین حساب تشکیل می‌دهند.

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

کلیک کنید

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

نقش CSS در ساخت ماشین حساب با جاوا اسکریپت چیست؟

نقش اصلی CSS در ساخت ماشین حساب با زبان جاوا اسکریپت استایل‌دهی به بدنه ماشین حساب است. در این مرحله از ساخت ماشین حساب با جاوا اسکریپت، ماشین حساب با استفاده از CSS استایل‌دهی می‌شود. ابتدا همه عناصر، از جمله عناصر before و after انتخاب می‌شوند. سپس می‌توان ویژگی box-sizing را اعمال کرده و آن را به‌ عنوان border-box قرارداد. همچنین می‌توان با استفاده از کد زیر، نوع فونت و اندازه قلم ماشین حساب را تغییر داد:

در مرحله بعد، باید با استفاده از عنصر body، پس‌زمینه را تغییر داد:

مرحله بعدی استایل دادن به calculator-grid  است که قبلاً تعریف شد. این ‌همه‌ی دکمه‌ها و عناصر مختلف ماشین حساب را در بر می‌گیرد. همچنین می‌توان از ویژگیjustify-content برای تنظیم ماشین حساب در مرکز صفحه استفاده کرد. علاوه بر این، ویژگی align-content می‌تواند به تراز کردن موارد با مرکز صفحه مرورگر کمک کند. در این مرحله، ممکن است که calculator-grid به‌صورت عمودی مرتب‌ نشده باشد. می‌توان با تنظیم حداقل ارتفاع روی 100 این مشکل را برطرف کرد.

نکته دیگر در ساخت ماشین حساب با جاوا اسکریپت این است که دکمه‌ها باید در مرکز صفحه‌ نمایش قرار بگیرند و با فاصله از یکدیگر، نظم داشته باشند. برای این منظور، باید از grid-template-columns استفاده شود و سپس آن را روی تکرار تنظیم کرد که در آن هر ستون می‌تواند 100 پیکسل عرض داشته باشد. همچنین می‌توان همین کار را برای ردیف‌های grid-template انجام داد.

برای اینکه صفحه خروجی به‌ اندازه‌ای که نیاز دارد بزرگ شود و با هر تعداد از مقادیر ورودی سازگار باشد، باید مقدار minmax را روی ۱۲۰ پیکسل و حداکثر مقدار را روی خودکار تنظیم کرد. خروجی این مرحله مانند شکل زیر است.

همچنین برای قراردادن صحیح دکمه‌ها، باید تمام دکمه‌های موجود در calculator-grid را انتخاب کرده و کد CSS پایین را برای آن اعمال کرد:

در این مرحله، می‌توان استایل ماشین حساب را با تغییر ویژگی align-item به align-content بهبود بخشید و آن را در مرکز قرارداد. سپس باید کلاس span-two را استایل‌دهی کرد که این کار روی دکمه‌های All-clear و Delete تأثیر می‌گذارد.

استایل دهی به پنجره خروجی ماشین حساب با HTML

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

• 123 + برای previous-operand
• 456 برای current-operand

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

در مرحله بعد، رنگ پس‌زمینه با شفافیت 75 درصد به مشکی تغییر داده می‌شود. سپس، تمام عناصر داخل ظرف تراز می‌شوند. ساده‌ترین راه برای این کار استفاده از «فلکس» (flex) است. بنابراین می‌توان صفت display را روی flex و صفت align-items را روی flex-end قرار داد. با این کارعناصر خروجی در سمت راست ماشین حساب قرار می‌گیرند.

برای فاصله بین آن‌ها، می‌توان از ویژگی justify-content استفاده کرده و آن را به فاصله دور تنظیم کرد. در مرحله بعد، می‌توان padding را روی هر مقدار دلخواه تنظیم کرد. همچنین، برای اینکه عناصر خروجی در زمانی که بیش از حد طولانی می‌شوند بسته شوند، می‌توان از ویژگی word-wrap ، برای انتخاب محلی استفاده کرد که کلمات شکسته شوند. علاوه بر این، می‌توان یک word-break اضافه کرد و آن را روی break-all تنظیم کرد. باید عملوندهای قبلی و فعلی را در کلاس خروجی استایل‌دهی کرد. کد نهایی CSS در ساخت ماشین حساب با جاوا اسکریپت به این صورت ظاهر می‌شود:

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

فیلم آموزش کاربردی برنامه نویسی جی کوئری jQuery در فرادرس

کلیک کنید

کدهای جاوا اسکریپت برای ساخت ماشین حساب

ابتدا باید تمام دکمه‌ها و عملیات ماشین حساب انتخاب شوند. می‌توان این کار را با قرارداد چند کلاس در فایل HTML انجام داد. با این‌ حال، از آنجایی‌ که بهتر است کلاس‌های CSS با کلاس‌های جاوا اسکریپت ترکیب نشوند، می‌توان از «ویژگی‌های داده» (Data Attributes) برای انتخاب آن‌ها استفاده کرد.

• data-operation برای نشان دادن دکمه‌های عملیات
• data-numbersبرای نشان دادن دکمه‌های عددی
• data-all-clear برای نشان دادن دکمه All-Clear
• data-delete برای نشان دادن دکمه Delete

می‌توان این کلاس‌ها را به previous-operand و current-operand اضافه کرد. این کار با قطعه کد زیر امکان‌پذیر است.

در فایل جاوا اسکریپت، چند «متغیر ثابت» (Constant Variables) تعریف می‌شود که نشان‌ دهنده دکمه‌های عددی هستند. سپس با استفاده از document.querySelectorAll  ‎ ‎پرس‌وجویی انجام می‌شود. این تابع امکان این را فراهم می‌کند که تمام عناصری که با رشته‌ای خاص مطابقت دارند به دست بیایند. در این مورد، یک ویژگی داده data attribute انتخاب می‌شود که باید در داخل پرانتز باشد، در این رابطه [data-number] انتخاب می‌شود که قرار است همه عناصر عددی را انتخاب کند.

این کار همچنین برای دکمه‌های Equals ، All-clear و Delete و همچنین OperandTextElement و CurrentOperandTextElement نیز صدق می‌کند. قطعه کد آن به‌صورت زیر است:

حال که همه دکمه‌ها و عناصر برای انجام عملیات انتخاب‌ شده‌اند، می‌توان پیاده‌سازی کاربردها را جاوا اسکریپت انجام داد. اولین چیزی که باید مشخص شود این است که نحوه ذخیره خروجی به چه صورت باشد. می‌توان این کار را با ایجاد کلاسی به نام class Calculator در بالای فایل انجام داد. در این کلاس «سازنده‌ای» (Constructor) قرار داده می‌شود که تمام ورودی‌های آن و تمام توابع ماشین حساب را دریافت می‌کند.

این سازنده می‌خواهد OperandTextElement و CurrentOperandTextElement را دریافت کند تا بتواند محل قرار دادن متن نمایشگر برای ماشین حساب را تعیین کند. همچنین باید چند متغیر در این کلاس ایجاد شوند. به‌ محض ایجاد ماشین حساب، باید تابع this.clear فراخوانی شود، زیرا باید ورودی‌ها را بازنشانی (ریست) کرد. قطعه کد پایین برای این کار استفاده می‌شود.

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

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

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

• برای مشاهده مجموعه‌ی کامل فیلم های آموزشی جاوا اسکریپت فرادرس + اینجا کلیک کنید.

توابع جاوا اسکریپت برای ساخت ماشین حساب

در مرحله بعد ساخت ماشین حساب با جاوا اسکریپت، عملیات مختلفی تعریف می‌شوند که ماشین حساب آن‌ها را انجام خواهد داد. این عملیات با استفاده از توابع جاوا اسکریپت پیاده‌سازی می‌شوند. اولین تابع، clear()‎ است که تمام متغیرهای مختلف را پاک می‌کند. تابع بعدی تابع delete()‎ برای پاک کردن یک عدد مورد استفاده قرار می‌گیرد. همچنین تابعی ایجاد خواهد شد که تعیین می‌کند هر بار که کاربر روی عددی کلیک می‌کند تا روی صفحه‌نمایش اضافه شود، چه اتفاقی می‌افتد؛ نام این تابع appendNumber(number) است.

همچنین برای تکمیل عملیات به یک تابع selectOperation نیاز است که کنترل کند هر زمان که کاربر روی هر دکمه عملیاتی کلیک کند چه اتفاقی می‌افتد. تابع کلیدی دیگر compute()است. این تابع در ساخت ماشین حساب با جاوا اسکریپت، مقادیر داخل ماشین حساب را می‌گیرد و نتیجه را نمایش می‌دهد. درنهایت، تابعی به نام updateDisplay()‎ وجود دارد که این امکان را می‌دهد تا مقادیر داخل خروجی به‌روز شوند. در قطعه کد زیر، اعلان این توابع نشان داده شده است.

اکنون‌که عملیات مربوطه تعریف شده‌اند، می‌توان در مورد ویژگی‌های مختلفی تصمیم‌گیری کرد که ماشین حساب باید آن‌ها را ذخیره کند . برای این امر باید عملوند قبلی را که کاربر وارد کرده ، عملوند فعلی که روی آن کار می‌کند و عملیاتی که انتخاب کرده است، تعیین شوند.

کار روی توابع جاوا اسکریپت در ساخت ماشین حساب

در این مرحله باید توابعی که تعریف شدند، سامان‌دهی شوند که در ادامه این بخش تعریف شده است.

تابع clear‎ در ساخت ماشین حساب با Js

تابع clear()‎ تمام مقادیر نمایش داده‌ شده را حذف می‌کند. اگر مقادیر موجود در خروجی حذف شوند، باید this.currentOperand را روی یک رشته خالی قرار داد. همچنین می‌توان همین کار را برای previousOperand انجام داد. «سینتکس» (Syntax) آن به‌صورت زیر است:

در مرحله بعد، باید روی «قلاب کردن» (Hooking)  همه متغیرها و اطمینان از عمل کردن آن‌ها بر روی ماشین حساب تمرکز کرد. اولین کاری که باید انجام شود این است که ثابتی به نامconst calculator  ایجاد شود و آن را روی new calculator تنظیم کرد، سپس همه‌چیز از سازنده به آن منتقل می‌شود. بعد از آن، عناصر متن عملوند previous و current ارسال خواهند شد. این کار با قطعه کد زیر امکان‌پذیر است.

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

تابع appendNumber در ساخت ماشین حساب با جاوا اسکریپت

اکنون‌ که عناصر در کد وارد شدند، می‌توان از شی ماشین حساب یا calculator استفاده کرد. ابتدا دکمه عددی  انتخاب‌ شده و سپس از حلقه foreach در جاوا اسکریپت برای پیمایش روی همه این دکمه‌های مختلف استفاده می‌شود. همچنین می‌توان با استفاده از button.addEventListener روی دکمه‌ها یک EventListener اضافه کرد. هر زمان که روی دکمه کلیک شود، EventListenerچیزی را فراخوانی می‌کند.

برای اطمینان از اینکه هر چیزی که نوشته‌شده است کار می‌کند، در تابع updateDisplay()‎ ، عبارت this.currentOperandTextElement.innerText = this.currentOperand  اضافه می‌شود. در داخل تابع appendNumber()‎ نیز به‌جای اضافه کردن عدد، currentOperand را برای مطابقت با آن باید تغییر داد. وقتی روی عددی در ماشین حساب کلیک می‌شود باید در کادر خروجی نمایش داده شود.

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

انتخاب عملکرد در ساخت ماشین حساب جاوا اسکریپتی

برای این هدف باید از همان تکنیکی استفاده کرد که روی دکمه‌های اعداد و روی دکمه‌های عملیات انجام شدند. با این‌ حال، به‌جای appendNumber ، ازChoiceOperation(button.innerText) استفاده می‌شود و نمایشگر با استفاده از calculator.updateDisplay به‌روز می‌شود. قطعه کد این کار به شکل زیر خواهد بود:

در تابع selectOperation()‎ باید محاسباتی انجام شود. وقتی روی عددی کلیک می‌شود و به دنبال آن، عملیاتی روی ماشین‌ حساب انجام می‌گیرد، ممکن است خواسته شود آن را به قسمت عملوند قبلی منتقل کنید تا بتوان عدد دیگر را تایپ کرده تا کل عملیات کامل شود.

به‌ عنوان‌ مثال، اگر خواسته شود 2 + 60 محاسبه شود، ممکن است قسمت 2 + به بخش previous operand نمایشگر منتقل شود تا 60 در بخش current operandتایپ شود. این عملیات را می‌توان در تابع selectOperation پیاده سازی کرد. اولین کاری که باید انجام داد این است که this.operation را با عملیاتی تنظیم کنید که قرار است انجام شود. به این ترتیب، ماشین حساب از استفاده از عملیاتی آگاه است که می‌خواهد هنگام محاسبه انجام دهد. این کار باید به صورت، previousOperand = this. CurrentOperand تنظیم شود.

عملوند فعلی جدید نیز باید با تنظیم آن بر روی یک رشته خالی پاک شود. همچنین باید صفحه‌ نمایش را به‌روز کرد. در تابعupdateDisplay() this.previousOperandTextElement = this.previousOperand برای این هدف است. حال اگر به ماشین حساب رفته و روی هر یک از دکمه‌های عملیات کلیک شود، کاربر متوجه خواهد شد که حتی بدون کلیک کردن روی دکمه‌ها، اعدادی نمایش داده می‌شوند. برای رویارویی با این مشکل در ساخت ماشین حساب با جاوا اسکریپت، باید یک check-in اضافه شود.

یکی دیگر از مواردی که می‌توان به ماشین حساب اضافه کرد این است که می‌توان عملیاتی را به‌طور خودکار محاسبه کرد و هم‌زمان عملیاتی دیگر را انجام داد. به‌ عنوان‌ مثال، اگر 54 + 50 روی ماشین حساب تایپ شود و سپس روی دکمه ÷ کلیک صورت بگیرد، ماشین حساب باید بتواند 54 + 50 را محاسبه کند و قبل از زدن دکمه تقسیم، به صورت خودکار آن را 104 اعلام کند.

می‌توان این کار را با بررسی اینکه آیا previousOperand برابر با یک رشته خالی نیست و فراخوانی متد this.compute()‎ انجام داد. قطعه کد آن به صورت زیر است:

با تکمیل این دو تابع، اکنون می‌توان تمام مقادیر را در داخل ماشین حساب تنظیم کرد.

تابع compute در ساخت ماشین حساب با جاوا اسکریپت

برای تکمیل عملیات، باید یک EventListener به دکمه Equals اضافه کرد. EventListener تابع محاسبه را فراخوانی می‌کند و نتایج را برمی‌گرداند. سپس باید صفحه‌نمایش ماشین حساب را به‌روز کرد. وقتی روی دکمه Equals کلیک می‌شود، ماشین حساب جاوا اسکریپتی، تابع compute()‎ را فراخوانی می‌کند. قطعه کد مربوط به آن به صورت زیر است.

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

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

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

اکنون می‌توان از دکمه All-Clear در ساخت ماشین حساب با جاوا اسکریپت برای پاک کردن صفحه نمایش استفاده کرد.

تابعdelete ‎ در طراحی ماشین حساب با جاوا اسکریپت

آخرین تابعی که باید پیاده‌سازی شود، تابع delete()‎ است. اولین کاری که می‌توان انجام داد تنظیم this.currentOperand = this.currentOperand است. سپس این مقدار به رشته‌ای تبدیل می‌شود تا با استفاده از روش slice ، مطابق قطعه کد زیر، آخرین مقدار رشته بدست آورده می‌شود.

اکنون می‌توان با اجرای دکمه Delete آن متغیر را متصل کرد. قطعه کد زیر برای انجام این کار است:

اکنون، وقتی یک رشته طولانی از کاراکترها تایپ می‌شود، می‌توان با استفاده از دکمه Delete آن‌ها را یکی‌یکی حذف کرد. ماشین حساب اکنون کاملاً کار می‌کند، اما نمایشگر آن هنوز به مقداری کار نیاز دارد.

فیلم آموزش مقدماتی کتابخانه ReactJS در جاوا اسکریپت در فرادرس

کلیک کنید

بروزرسانی عملکرد نمایش ماشین حساب با کدهای جاوا اسکریپت

اولین کاری که می‌توان انجام داد این است که وارد تابع updateDisplay()‎ شد و یک دستور if در جاوا اسکریپت اضافه کرد. اگر عملیاتی وجود داشته باشد که null نباشد، عملوند قبلی Text Element را نمایش خواهد داد. سپس هر دو عملوند قبلی و فعلی را با قطعه کد زیر نمایش داده خواهند شد:

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

به‌طور خلاصه، هر زمان که تابع ()updateDisplay فراخوانی شد، عملوند فعلی اضافه می‌شود. حال، تغییراتی که در این تابع ایجاد شده است، در هر دو مقدار عملوند قبلی و فعلی منعکس می‌شوند. قطعه کد مربوط به این عملکرد به صورت زیر است:

باز هم ممکن است اعداد به‌درستی قالب‌بندی نشوند. دلیل این است که باید مطمئن شد که از یک عدد ممیز شناور در تابع getDisplayNumber() به‌جای عدد صحیح استفاده می‌شود. قطعه کد زیر برای رفع این مشكل در ساخت ماشین حساب با جاوا اسکریپت به کار خواهد رفت.

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

• قسمت صحیح
• قسمت اعشاری

قطعه کد زیر برای انجام این کار در زیر به کار رفته است. همچنین می‌توان با قرار دادن حداکثر ارقام کسری روی صفر، نقاط اعشاری غیر ضروری را حذف کرد:

در نهایت، باید مقدار عملوند قبلی پاک شود. این را می‌توان با ایجاد یک عبارت if-else و بررسی اینکه آیا this.previousOperandTextElement.innerText یک رشته خالی است یا خیر به دست آورد.

خروجی نهایی و سورس کد ساخت ماشین حساب با جاوا اسکریپت

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

• کد نهایی HTML برای ساخت ماشین حساب در این پروژه:

• کد نهایی CSS برای ساخت ماشین حساب:

• کد نهایی جاوا اسکریپت برای ساخت ماشین حساب:

خروجی نهایی ساخت ماشین حساب با جاوا اسکریپت به صورت تصویر زیر خواهد بود.

سخن پایانی