با جاوا اسکریپت میشود کارهای خارقالعادهای انجام داد، بهخصوص اگر جاوا اسکریپت با HTML و CSS دست به دست هم دهند، آنجاست که شاهکار اصلی اتفاق میافتد. ساخت ماشین حساب با جاوا اسکریپت، پروژهای کوچک و نسبتاً ساده است. در این مطلب آموزشی با عناصر مختلف HTML و CSS همراه با جاوا اسکریپت و شیوههای مدرن ES6، ماشین حسابی ساده، کد نویسی و طراحی خواهد شد.
پیش نیازهای ساخت ماشین حساب با جاوا اسکریپت چیست؟
پیش نیاز اصلی ساخت ماشین حساب با استفاده از زبان جاوا اسکریپت، درک اصولی این زبان به همراه HTML و CSS است. همانطور که گفته شد، با استفاده از جاوا اسکریپت میتوان کارهای جالبی را انجام داد و برنامههای جذابی را برای وب ساخت. از آنجا که ماشین حساب از اجزای مختلفی تشکیل شده است، بهترین ایده برای ساختن آن با جاوا اسکریپت این است که آن را با HTML و CSS ترکیب کنیم تا یک ماشین حساب کاربردی و در عین حال جذاب بسازیم.
به صورت کلی، برای ساخت ماشین حساب با جاوا اسکریپت یک سری پیشنیازها لازم است که عبارتاند از:
- آشنایی با نحوه استفاده از کد ادیتور
- داشتن درک اولیه از جاوا اسکریپت، HTML و همچنین CSS
پیاده سازی ماشین حساب با جاوا اسکریپت
در قدم اول قبل از انجام هر کاری، باید پوشهای جدید در کامپیوتر ایجاد و سه فایل با نام و فرمتهای زیر در آن ساخته شوند:
- Index با پسوند Html
- Style با پسوند CSS
- Script با پسوند js
برای شروع پروژه ساخت ماشین حساب جاوا اسکریپتی، باید عملکردهای اساسی یک ماشین حساب را در نظر گرفت. این عملگرها شامل جمع، تفریق، ضرب، تقسیم، حذف، پاک کردن و البته امکان استفاده از اعداد اعشاری در انجام این عملیات است. در فایل HTML، میتوان فایلهای CSS و JavaScript را با استفاده از کد زیر به هم ارتباط داد:
Calculator
کار بعدی که باید انجام شود این است که تمام عناصر مختلف HTML اضافه شوند. برای این کار یک div
، با کلاسی به نام calculator-grid
ایجاد خواهد شد.
تمام عناصر و دکمههای مختلف HTML در calculator-grid
باید در زیر بخش div
قرار بگیرند. تمام این عناصر در قطعه کد زیر به همین شکل اضافه شدهاند:
Calculator
کد HTML فوق حاوی چندین کلاس div
است.
- کلاس output
نشاندهنده صفحه ماشین حساب است.
- previous-operand
نشاندهنده نتیجه عملکرد قبلی در ماشین حساب است.
- کلاس current-operand
عملکرد فعلی ماشین حساب را نشان میدهد.
- کلاس span-two
نشان دهنده دکمههایی است که ستون را در ماشین حساب تشکیل میدهند.
فیلم آموزش جاوا اسکریپت JavaScript در تم آف
کلیک کنید
قدم بعدی در ساخت ماشین حساب با جاوا اسکریپت، استایلدهی به آن است.
نقش CSS در ساخت ماشین حساب با جاوا اسکریپت چیست؟
نقش اصلی CSS در ساخت ماشین حساب با زبان جاوا اسکریپت استایلدهی به بدنه ماشین حساب است. در این مرحله از ساخت ماشین حساب با جاوا اسکریپت، ماشین حساب با استفاده از CSS استایلدهی میشود. ابتدا همه عناصر، از جمله عناصر before
و after
انتخاب میشوند. سپس میتوان ویژگی box-sizing
را اعمال کرده و آن را به عنوان border-box
قرارداد. همچنین میتوان با استفاده از کد زیر، نوع فونت و اندازه قلم ماشین حساب را تغییر داد:
*, *::before, *::after {
box-sizing: border-box;
font-family: Gotham Rounded, sans-serif;
font-weight: normal;
}
در مرحله بعد، باید با استفاده از عنصر body
، پسزمینه را تغییر داد:
body {
margin: 0;
padding: 0;
background: linear-gradient(to right, #CBCE91FF, #EA738DFF);
}
مرحله بعدی استایل دادن به calculator-grid
است که قبلاً تعریف شد. این همهی دکمهها و عناصر مختلف ماشین حساب را در بر میگیرد. همچنین میتوان از ویژگی justify-content
برای تنظیم ماشین حساب در مرکز صفحه استفاده کرد. علاوه بر این، ویژگی align-content
میتواند به تراز کردن موارد با مرکز صفحه مرورگر کمک کند. در این مرحله، ممکن است که calculator-grid
بهصورت عمودی مرتب نشده باشد. میتوان با تنظیم حداقل ارتفاع روی 100 این مشکل را برطرف کرد.
نکته دیگر در ساخت ماشین حساب با جاوا اسکریپت این است که دکمهها باید در مرکز صفحه نمایش قرار بگیرند و با فاصله از یکدیگر، نظم داشته باشند. برای این منظور، باید از grid-template-columns
استفاده شود و سپس آن را روی تکرار تنظیم کرد که در آن هر ستون میتواند 100 پیکسل عرض داشته باشد. همچنین میتوان همین کار را برای ردیفهای grid-template
انجام داد.
برای اینکه صفحه خروجی به اندازهای که نیاز دارد بزرگ شود و با هر تعداد از مقادیر ورودی سازگار باشد، باید مقدار minmax
را روی ۱۲۰ پیکسل و حداکثر مقدار را روی خودکار تنظیم کرد. خروجی این مرحله مانند شکل زیر است.
همچنین برای قراردادن صحیح دکمهها، باید تمام دکمههای موجود در calculator-grid
را انتخاب کرده و کد CSS پایین را برای آن اعمال کرد:
.calculator-grid {
display: grid;
justify-content: center;
align-items: center;
min-height: 100vh;
grid-template-columns: repeat(4, 100px);
grid-template-rows: minmax(120px, auto) repeat(5, 100px);
}
در این مرحله، میتوان استایل ماشین حساب را با تغییر ویژگی align-item
به align-content
بهبود بخشید و آن را در مرکز قرارداد. سپس باید کلاس span-two
را استایلدهی کرد که این کار روی دکمههای All-clear و Delete تأثیر میگذارد.
استایل دهی به پنجره خروجی ماشین حساب با HTML
نکته مهم دیگر در ساخت ماشین حساب با جاوا اسکریپت، این است که به خروجی نمایش داده شده در ماشین حساب باید استایل داده شود. این کار را میتوان با افزودن متنی ساختگی انجام داد که به صورت زیر خواهد بود:
- 123 +
برای previous-operand
- 456
برای current-operand
123 +
456
به این ترتیب، با کمی متن ساختگی میتوان پنجره خروجی را استایلدهی و سفارشی کرد. همچنین برای بهتر شدن پنجره نمایش، کاری که میتوان انجام داد این است که خروجی را در کل عرض ماشین حساب تنظیم کرد. میتوان این کار را با استفاده مجدد از ویژگی grid-column
و تنظیم آن از ستون 1 تا ١ - انجام داد.
در مرحله بعد، رنگ پسزمینه با شفافیت 75 درصد به مشکی تغییر داده میشود. سپس، تمام عناصر داخل ظرف تراز میشوند. سادهترین راه برای این کار استفاده از «فلکس» (flex) است. بنابراین میتوان صفت display
را روی flex
و صفت align-items
را روی flex-end
قرار داد. با این کارعناصر خروجی در سمت راست ماشین حساب قرار میگیرند.
فیلم آموزش JavaScript ES6 جاوا اسکریپت در تم آف
کلیک کنید
برای فاصله بین آنها، میتوان از ویژگی justify-content
استفاده کرده و آن را به فاصله دور تنظیم کرد. در مرحله بعد، میتوان padding
را روی هر مقدار دلخواه تنظیم کرد. همچنین، برای اینکه عناصر خروجی در زمانی که بیش از حد طولانی میشوند بسته شوند، میتوان از ویژگی word-wrap
، برای انتخاب محلی استفاده کرد که کلمات شکسته شوند. علاوه بر این، میتوان یک word-break
اضافه کرد و آن را روی break-all
تنظیم کرد. باید عملوندهای قبلی و فعلی را در کلاس خروجی استایلدهی کرد. کد نهایی CSS در ساخت ماشین حساب با جاوا اسکریپت به این صورت ظاهر میشود:
*, *::before, *::after {
box-sizing: border-box;
font-family: Gotham Rounded, sans-serif;
font-weight: normal;
}
body {
margin: 0;
padding: 0;
background: linear-gradient(to right, #CBCE91FF, #EA738DFF);
}
.calculator-grid {
display: grid;
justify-content: center;
align-content: center;
min-height: 100vh;
grid-template-columns: repeat(4, 100px);
grid-template-rows: minmax(120px, auto) repeat(5, 100px);
}
.calculator-grid > button {
cursor: pointer;
font-size: 2rem;
border: 1px, solid #FFFFFF;
outline: none;
background-color: rbga(255, 255, 255, 0.75);
}
.calculator-grid > button:hover {
background-color: #a9a9a9;
}
.span-two {
grid-column: span 2;
color: #adf802;
background-color: rgba(139, 0, 139, 0.8);
}
.output{
grid-column: 1 / -1;
background-color: rgba(0, 0, 0, 0.75);
display: flex;
align-items: flex-end;
justify-content: space-around;
flex-direction: column;
padding: 10px;
word-wrap: break-word;
word-break: break-all;
}
.output .previous-operand{
color: rgba(255,255, 255, 0.75);
font-size: 1.5rem;
}
.output .current-operand{
color: white;
font-size: 2.5rem;
}
در این مرحله، استایل و ظاهر ماشین حساب شکل گرفته است. اکنون زمان آن است که با استفاده از جاوا اسکریپت آن را به ماشین حسابی کاربردی تبدیل کرد.
فیلم آموزش کاربردی برنامه نویسی جی کوئری 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
نیز صدق میکند. قطعه کد آن بهصورت زیر است:
const numberButtons = document.querySelectorAll('[data-number]')
const operationButtons = document.querySelectorAll('[data-operation]')
const equalsButton = document.querySelector('[data-equals]')
const deleteButton = document.querySelector('[data-delete]')
const allClearButton = document.querySelector('[data-all-clear]')
const previousOperandTextElement = document.querySelector('[data-previous-operand]')
const currentOperandTextElement = document.querySelector('[data-current-operand]')
حال که همه دکمهها و عناصر برای انجام عملیات انتخاب شدهاند، میتوان پیادهسازی کاربردها را جاوا اسکریپت انجام داد. اولین چیزی که باید مشخص شود این است که نحوه ذخیره خروجی به چه صورت باشد. میتوان این کار را با ایجاد کلاسی به نام class Calculator
در بالای فایل انجام داد. در این کلاس «سازندهای» (Constructor) قرار داده میشود که تمام ورودیهای آن و تمام توابع ماشین حساب را دریافت میکند.
این سازنده میخواهد OperandTextElement
و CurrentOperandTextElement
را دریافت کند تا بتواند محل قرار دادن متن نمایشگر برای ماشین حساب را تعیین کند. همچنین باید چند متغیر در این کلاس ایجاد شوند. به محض ایجاد ماشین حساب، باید تابع this.clear
فراخوانی شود، زیرا باید ورودیها را بازنشانی (ریست) کرد. قطعه کد پایین برای این کار استفاده میشود.
class Calculator {
constructor(previousOperandTextElement, currentOperandTextElement) {
this.previousOperandTextElement = previousOperandTextElement
this.currentOperandTextElement = currentOperandTextElement
this.clear()
}
معرفی فیلم های آموزش جاوا اسکریپت
جاوا اسکریپت یکی از محبوبترین زبانهای برنامه نویسی است که در حوزههای مختلفی اعم از بازیسازی، توسعه وب، توسعه اپلیکیشن و سایر موارد کاربرد دارد. تقاضا برای متخصصان جاوا اسکریپت روزبهروز در حال افزایش است و با یادگیری جاوا اسکریپت شانس ورود به بازار کار برای متقاضیان بسیار افزایش مییابد. از طرفی میتوان گفت که با گسترش روز افزون وبسایتها و پلتفرمهای آنلاین، این تقاضا به اوج خودش رسیده است. جاوا اسکریپت روح اینترنت بهحساب میآید و یادگیری آن برای حال و آینده مهارتی بسیار کاربردی برای متقاضیان یادگیری این زبان خواهد بود.
برای این هدف در پلتفرم تم آف تعداد زیادی از دورههای جامع آموزش جاوا اسکریپت ارائه شدهاند که بهصورت کاملاً کاربردی به آموزش این زبان محبوب پرداخته شده است. دورههای آموزش جاوا اسکریپت تم آف از سطح مقدماتی تا پیشرفته در این پلتفرم موجود هستند و علاقهمندان به این زبان میتوانند از این آموزشها بهره ببرند. در تصویر بالا تنها تعداد کمی از دورههای موجود در مجموعه آموزش جاوا اسکریپت تنها بهعنوان نمونه آمدهاند.
- برای مشاهده مجموعهی کامل فیلم های آموزشی جاوا اسکریپت تم آف + اینجا کلیک کنید.
توابع جاوا اسکریپت برای ساخت ماشین حساب
در مرحله بعد ساخت ماشین حساب با جاوا اسکریپت، عملیات مختلفی تعریف میشوند که ماشین حساب آنها را انجام خواهد داد. این عملیات با استفاده از توابع جاوا اسکریپت پیادهسازی میشوند. اولین تابع، clear()
است که تمام متغیرهای مختلف را پاک میکند. تابع بعدی تابع delete()
برای پاک کردن یک عدد مورد استفاده قرار میگیرد. همچنین تابعی ایجاد خواهد شد که تعیین میکند هر بار که کاربر روی عددی کلیک میکند تا روی صفحهنمایش اضافه شود، چه اتفاقی میافتد؛ نام این تابع appendNumber(number)
است.
همچنین برای تکمیل عملیات به یک تابع selectOperation
نیاز است که کنترل کند هر زمان که کاربر روی هر دکمه عملیاتی کلیک کند چه اتفاقی میافتد. تابع کلیدی دیگر compute()
است. این تابع در ساخت ماشین حساب با جاوا اسکریپت، مقادیر داخل ماشین حساب را میگیرد و نتیجه را نمایش میدهد. درنهایت، تابعی به نام updateDisplay()
وجود دارد که این امکان را میدهد تا مقادیر داخل خروجی بهروز شوند. در قطعه کد زیر، اعلان این توابع نشان داده شده است.
clear() {
}
delete() {
}
appendNumber(number) {
}
chooseOperation(operation) {
}
compute() {
}
updateDisplay() {
}
اکنونکه عملیات مربوطه تعریف شدهاند، میتوان در مورد ویژگیهای مختلفی تصمیمگیری کرد که ماشین حساب باید آنها را ذخیره کند . برای این امر باید عملوند قبلی را که کاربر وارد کرده ، عملوند فعلی که روی آن کار میکند و عملیاتی که انتخاب کرده است، تعیین شوند.
مطلب پیشنهادی:
تابع های جاوا اسکریپت — راهنمای جامع
کار روی توابع جاوا اسکریپت در ساخت ماشین حساب
در این مرحله باید توابعی که تعریف شدند، ساماندهی شوند که در ادامه این بخش تعریف شده است.
تابع clear در ساخت ماشین حساب با Js
تابع clear()
تمام مقادیر نمایش داده شده را حذف میکند. اگر مقادیر موجود در خروجی حذف شوند، باید this.currentOperand
را روی یک رشته خالی قرار داد. همچنین میتوان همین کار را برای previousOperand
انجام داد. «سینتکس» (Syntax) آن بهصورت زیر است:
clear() {
this.currentOperand = ''
this.previousOperand = ''
this.operation = undefined
}
در مرحله بعد، باید روی «قلاب کردن» (Hooking) همه متغیرها و اطمینان از عمل کردن آنها بر روی ماشین حساب تمرکز کرد. اولین کاری که باید انجام شود این است که ثابتی به نام const calculator
ایجاد شود و آن را روی new calculator
تنظیم کرد، سپس همهچیز از سازنده به آن منتقل میشود. بعد از آن، عناصر متن عملوند previous و current ارسال خواهند شد. این کار با قطعه کد زیر امکانپذیر است.
const calculator = new Calculator(previousOperandTextElement, currentOperandTextElement)
در برنامهنویسی کامپیوتری، اصطلاح Hooking طیف وسیعی از تکنیکهایی را در بر میگیرد که برای تغییر یا تقویت رفتار سیستمعامل، برنامهها یا سایر اجزای نرمافزار، از طریق فراخوانی عملکردها یا پیامها یا رویدادهای ارسالشده بین اجزای نرمافزار استفاده میشود.
تابع appendNumber در ساخت ماشین حساب با جاوا اسکریپت
اکنون که عناصر در کد وارد شدند، میتوان از شی ماشین حساب یا calculator
استفاده کرد. ابتدا دکمه عددی انتخاب شده و سپس از حلقه foreach در جاوا اسکریپت برای پیمایش روی همه این دکمههای مختلف استفاده میشود. همچنین میتوان با استفاده از button.addEventListener
روی دکمهها یک EventListener
اضافه کرد. هر زمان که روی دکمه کلیک شود، EventListener
چیزی را فراخوانی میکند.
در این صورت، با هر کلیک فقط یک عدد به ماشین حساب اضافه میشود. این کار را میتوان با فراخوانی تابع appendNumber
و استفاده از button.innerText
برای نمایش آن انجام داد. پس از انجام این کار، باید متد calculator.updateDisplay
را فراخوانی کرد، تا اطمینان حاصل شود که مقادیر نمایش داده شده بهطور مداوم هر بار که روی دکمهای در ماشین حساب کلیک میشود، بهروزرسانی خواهند شد. این کار با قطعه کد زیر امکانپذیر است.
numberButtons.forEach(button => {
button.addEventListener('click', () => {
calculator.appendNumber(button.innerText)
calculator.updateDisplay()
})
})
برای اطمینان از اینکه هر چیزی که نوشتهشده است کار میکند، در تابع updateDisplay()
، عبارت this.currentOperandTextElement.innerText = this.currentOperand
اضافه میشود. در داخل تابع appendNumber()
نیز بهجای اضافه کردن عدد، currentOperand
را برای مطابقت با آن باید تغییر داد. وقتی روی عددی در ماشین حساب کلیک میشود باید در کادر خروجی نمایش داده شود.
تنها کاری که باید انجام داد این است که مقدار currentOperand
را بهروز کرد و عدد مربوطه باید اضافه شود. میتوان از this.currentOperand
استفاده کرد و اگر عدد باشد، آن را به رشته تبدیل کرد. باید به این نکته توجه داشت که اعداد باید حتماً به رشته تبدیل شوند تا کامپایلر نتواند عملیات واقعی را روی آن کد انجام دهد. قطعه کد تکمیل کننده تابع appendNumber
در ساخت ماشین حساب با جاوا اسکریپت به صورت زیر است.
appendNumber(number) {
if (number === '.' && this.currentOperand.includes('.')) return
this.currentOperand = this.currentOperand.toString() + number.toString()
}
انتخاب عملکرد در ساخت ماشین حساب جاوا اسکریپتی
برای این هدف باید از همان تکنیکی استفاده کرد که روی دکمههای اعداد و روی دکمههای عملیات انجام شدند. با این حال، بهجای appendNumber
، از ChoiceOperation(button.innerText)
استفاده میشود و نمایشگر با استفاده از calculator.updateDisplay
بهروز میشود. قطعه کد این کار به شکل زیر خواهد بود:
operationButtons.forEach(button => {
button.addEventListener('click', () => {
calculator.chooseOperation(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()
انجام داد. قطعه کد آن به صورت زیر است:
chooseOperation(operation) {
if (this.currentOperand === '') return
if (this.previousOperand !== '') {
this.compute()
}
this.operation = operation
this.previousOperand = this.currentOperand
this.currentOperand = ''
}
با تکمیل این دو تابع، اکنون میتوان تمام مقادیر را در داخل ماشین حساب تنظیم کرد.
فیلم آموزش رایگان جاوا اسکریپت JavaScript – سریع و آسان در ۱۵۰ دقیقه در تم آف
کلیک کنید
تابع compute در ساخت ماشین حساب با جاوا اسکریپت
برای تکمیل عملیات، باید یک EventListener
به دکمه Equals اضافه کرد. EventListener
تابع محاسبه را فراخوانی میکند و نتایج را برمیگرداند. سپس باید صفحهنمایش ماشین حساب را بهروز کرد. وقتی روی دکمه Equals کلیک میشود، ماشین حساب جاوا اسکریپتی، تابع compute()
را فراخوانی میکند. قطعه کد مربوط به آن به صورت زیر است.
equalsButton.addEventListener('click', button => {
calculator.compute()
calculator.updateDisplay()
})
اکنون میتوان محاسبات را به صورت صحیح با ماشین حساب انجام داد. برای تکمیل فرآیند ساخت ماشین حساب، اولین کاری که باید انجام شود این است که یک متغیر ایجاد کرد که نتیجه محاسبات را ذخیره کند. سپس باید دو متغیر اضافی ایجاد شوند. باید متغیری به نام prev
ایجاد شود و این همان نسخه عددی واقعی عملوند قبلی خواهد بود. این رشته باید به عدد تبدل شود که این کار از طریق عملوند فعلی انجام خواهد شد.
به عنوان مثال، وقتی کاربر روی دکمه مساوی یا Equals کلیک میکند بدون اینکه روی دکمهای قبل از آن کلیک کند، نباید کد اجرا شود. این مشکل از طریق قطعه کد زیر رفع خواهد شد. برای این منظور، از دستور switch
در جاوا اسکریپت، برای تعیین یا تغییر عملیات محاسباتی استفاده خواهد شد. قطعه کد مربوط به این عملکرد به صورت زیر است:
compute() {
let computation
const prev = parseFloat(this.previousOperand)
const current = parseFloat(this.currentOperand)
if (isNaN(prev) || isNaN(current)) return
switch (this.operation) {
case '+':
computation = prev + current
break
case '-':
computation = prev - current
break
case '*':
computation = prev * current
break
case '÷':
computation = prev / current
break
default:
return
}
this.currentOperand = computation
this.operation = undefined
this.previousOperand = ''
}
اکنون، ماشین حساب میتواند محاسبات را انجام دهد. با این حال، ممکن است که نتوان اعداد را روی صفحه نمایش پاک کرد و دلیل آن این است که هنوز دکمه All-Clear غیر قابل اجرا است. قطعه کد زیر برای اجرای آن به صورت زیر به کار خواهد رفت:
allClearButton.addEventListener('click', button => {
calculator.clear()
calculator.updateDisplay()
})
اکنون میتوان از دکمه All-Clear در ساخت ماشین حساب با جاوا اسکریپت برای پاک کردن صفحه نمایش استفاده کرد.
تابعdelete در طراحی ماشین حساب با جاوا اسکریپت
آخرین تابعی که باید پیادهسازی شود، تابع delete()
است. اولین کاری که میتوان انجام داد تنظیم this.currentOperand = this.currentOperand
است. سپس این مقدار به رشتهای تبدیل میشود تا با استفاده از روش slice
، مطابق قطعه کد زیر، آخرین مقدار رشته بدست آورده میشود.
delete() {
this.currentOperand = this.currentOperand.toString().slice(0, -1)
}
اکنون میتوان با اجرای دکمه Delete آن متغیر را متصل کرد. قطعه کد زیر برای انجام این کار است:
deleteButton.addEventListener('click', button => {
calculator.delete()
calculator.updateDisplay()
})
اکنون، وقتی یک رشته طولانی از کاراکترها تایپ میشود، میتوان با استفاده از دکمه Delete آنها را یکییکی حذف کرد. ماشین حساب اکنون کاملاً کار میکند، اما نمایشگر آن هنوز به مقداری کار نیاز دارد.
فیلم آموزش مقدماتی کتابخانه ReactJS در جاوا اسکریپت در تم آف
کلیک کنید
بروزرسانی عملکرد نمایش ماشین حساب با کدهای جاوا اسکریپت
اولین کاری که میتوان انجام داد این است که وارد تابع updateDisplay()
شد و یک دستور if در جاوا اسکریپت اضافه کرد. اگر عملیاتی وجود داشته باشد که null نباشد، عملوند قبلی Text Element
را نمایش خواهد داد. سپس هر دو عملوند قبلی و فعلی را با قطعه کد زیر نمایش داده خواهند شد:
updateDisplay() {
if (this.operation != null) {
this.previousOperandTextElement.innerText =
`${this.getDisplayNumber(this.previousOperand)} ${this.operation}`
در ماشین حساب ساخته شده با جاوا اسکریپت، ممکن است وقتی رشتهای از اعداد تایپ میشوند، کاما برای قطعیتر کردن اعداد وجود نداشته باشد. میتوان با استفاده از تابعی کمکی و فراخوانی getDisplayNumber
آن را تغییر و سپس مقدار برگشتی را نمایش داد.
بهطور خلاصه، هر زمان که تابع ()updateDisplay
فراخوانی شد، عملوند فعلی اضافه میشود. حال، تغییراتی که در این تابع ایجاد شده است، در هر دو مقدار عملوند قبلی و فعلی منعکس میشوند. قطعه کد مربوط به این عملکرد به صورت زیر است:
updateDisplay() {
this.currentOperandTextElement.innerText =
this.getDisplayNumber(this.currentOperand)
if (this.operation != null) {
this.previousOperandTextElement.innerText =
`${this.getDisplayNumber(this.previousOperand)} ${this.operation}`
} else {
this.previousOperandTextElement.innerText = ''
}
}
}
باز هم ممکن است اعداد بهدرستی قالببندی نشوند. دلیل این است که باید مطمئن شد که از یک عدد ممیز شناور در تابع getDisplayNumber()
بهجای عدد صحیح استفاده میشود. قطعه کد زیر برای رفع این مشكل در ساخت ماشین حساب با جاوا اسکریپت به کار خواهد رفت.
getDisplayNumber(number) {
const floatNumber = parseFloat(number)
if (isNaN(floatNumber)) return ''
return floatNumber.toLocaleString('en')
}
این جا خطایی جزئی به وجود خواهد آمد. برای مثال وقتی مقداری مانند 0.0001 تایپ میشود، بخشی اعشاری آن در صفحه ماشین حساب، نمایش داده نمیشود. میتوان این مشکل را با تقسیم عددی حل کرد که به دست آورده شده است.
- قسمت صحیح
- قسمت اعشاری
قطعه کد زیر برای انجام این کار در زیر به کار رفته است. همچنین میتوان با قرار دادن حداکثر ارقام کسری روی صفر، نقاط اعشاری غیر ضروری را حذف کرد:
getDisplayNumber(number) {
const stringNumber = number.toString()
const integerDigits = parseFloat(stringNumber.split('.')[0])
const decimalDigits = stringNumber.split('.')[1]
let integerDisplay
if (isNaN(integerDigits)) {
integerDisplay = ''
} else {
integerDisplay = integerDigits.toLocaleString('en', { maximumFractionDigits: 0 })
}
if (decimalDigits != null) {
return `${integerDisplay}.${decimalDigits}`
} else {
return integerDisplay
}
}
در نهایت، باید مقدار عملوند قبلی پاک شود. این را میتوان با ایجاد یک عبارت if-else
و بررسی اینکه آیا this.previousOperandTextElement.innerText
یک رشته خالی است یا خیر به دست آورد.
getDisplayNumber(number) {
if (decimalDigits != null) {
return `${integerDisplay}.${decimalDigits}`
} else {
return integerDisplay
}
}
خروجی نهایی و سورس کد ساخت ماشین حساب با جاوا اسکریپت
سورس کد و خروجی نهایی ساخت ماشین حساب با استفاده از جاوا اسکریپت به صورت زیر است.
- کد نهایی HTML برای ساخت ماشین حساب در این پروژه:
Calculator
- کد نهایی CSS برای ساخت ماشین حساب:
*, *::before, *::after {
box-sizing: border-box;
font-family: Gotham Rounded, sans-serif;
font-weight: normal;
}
body {
margin: 0;
padding: 0;
background: linear-gradient(to right, #CBCE91FF, #EA738DFF);
}
.calculator-grid {
display: grid;
justify-content: center;
align-content: center;
min-height: 100vh;
grid-template-columns: repeat(4, 100px);
grid-template-rows: minmax(120px, auto) repeat(5, 100px);
}
.calculator-grid > button {
cursor: pointer;
font-size: 2rem;
border: 1px, solid #FFFFFF;
outline: none;
background-color: rbga(255, 255, 255, 0.75);
}
.calculator-grid > button:hover {
background-color: #a9a9a9;
}
.span-two {
grid-column: span 2;
color: #adf802;
background-color: rgba(139, 0, 139, 0.8);
}
.output{
grid-column: 1 / -1;
background-color: rgba(0, 0, 0, 0.75);
display: flex;
align-items: flex-end;
justify-content: space-around;
flex-direction: column;
padding: 10px;
word-wrap: break-word;
word-break: break-all;
}
.output .previous-operand{
color: rgba(255,255, 255, 0.75);
font-size: 1.5rem;
}
.output .current-operand{
color: white;
font-size: 2.5rem;
}
- کد نهایی جاوا اسکریپت برای ساخت ماشین حساب:
class Calculator {
constructor(previousOperandTextElement, currentOperandTextElement) {
this.previousOperandTextElement = previousOperandTextElement
this.currentOperandTextElement = currentOperandTextElement
this.clear()
}
clear() {
this.currentOperand = ''
this.previousOperand = ''
this.operation = undefined
}
delete() {
this.currentOperand = this.currentOperand.toString().slice(0, -1)
}
appendNumber(number) {
if (number === '.' && this.currentOperand.includes('.')) return
this.currentOperand = this.currentOperand.toString() + number.toString()
}
chooseOperation(operation) {
if (this.currentOperand === '') return
if (this.previousOperand !== '') {
this.compute()
}
this.operation = operation
this.previousOperand = this.currentOperand
this.currentOperand = ''
}
compute() {
let computation
const prev = parseFloat(this.previousOperand)
const current = parseFloat(this.currentOperand)
if (isNaN(prev) || isNaN(current)) return
switch (this.operation) {
case '+':
computation = prev + current
break
case '-':
computation = prev - current
break
case '*':
computation = prev * current
break
case '÷':
computation = prev / current
break
default:
return
}
this.currentOperand = computation
this.operation = undefined
this.previousOperand = ''
}
getDisplayNumber(number) {
const stringNumber = number.toString()
const integerDigits = parseFloat(stringNumber.split('.')[0])
const decimalDigits = stringNumber.split('.')[1]
let integerDisplay
if (isNaN(integerDigits)) {
integerDisplay = ''
} else {
integerDisplay = integerDigits.toLocaleString('en', { maximumFractionDigits: 0 })
}
if (decimalDigits != null) {
return `${integerDisplay}.${decimalDigits}`
} else {
return integerDisplay
}
}
updateDisplay() {
this.currentOperandTextElement.innerText =
this.getDisplayNumber(this.currentOperand)
if (this.operation != null) {
this.previousOperandTextElement.innerText =
`${this.getDisplayNumber(this.previousOperand)} ${this.operation}`
} else {
this.previousOperandTextElement.innerText = ''
}
}
}
const numberButtons = document.querySelectorAll('[data-number]')
const operationButtons = document.querySelectorAll('[data-operation]')
const equalsButton = document.querySelector('[data-equals]')
const deleteButton = document.querySelector('[data-delete]')
const allClearButton = document.querySelector('[data-all-clear]')
const previousOperandTextElement = document.querySelector('[data-previous-operand]')
const currentOperandTextElement = document.querySelector('[data-current-operand]')
const calculator = new Calculator(previousOperandTextElement, currentOperandTextElement)
numberButtons.forEach(button => {
button.addEventListener('click', () => {
calculator.appendNumber(button.innerText)
calculator.updateDisplay()
})
})
operationButtons.forEach(button => {
button.addEventListener('click', () => {
calculator.chooseOperation(button.innerText)
calculator.updateDisplay()
})
})
equalsButton.addEventListener('click', button => {
calculator.compute()
calculator.updateDisplay()
})
allClearButton.addEventListener('click', button => {
calculator.clear()
calculator.updateDisplay()
})
deleteButton.addEventListener('click', button => {
calculator.delete()
calculator.updateDisplay()
})
document.addEventListener('keydown', function (event) {
let patternForNumbers = /[0-9]/g;
let patternForOperators = /[+-*/]/g
if (event.key.match(patternForNumbers)) {
event.preventDefault();
calculator.appendNumber(event.key)
calculator.updateDisplay()
}
if (event.key === '.') {
event.preventDefault();
calculator.appendNumber(event.key)
calculator.updateDisplay()
}
if (event.key.match(patternForOperators)) {
event.preventDefault();
calculator.chooseOperation(event.key)
calculator.updateDisplay()
}
if (event.key === 'Enter' || event.key === '=') {
event.preventDefault();
calculator.compute()
calculator.updateDisplay()
}
if (event.key === "Backspace") {
event.preventDefault();
calculator.delete()
calculator.updateDisplay()
}
if (event.key == 'Delete') {
event.preventDefault();
calculator.clear()
calculator.updateDisplay()
}
});
خروجی نهایی ساخت ماشین حساب با جاوا اسکریپت به صورت تصویر زیر خواهد بود.
سخن پایانی
در این مقاله به آموزش ساخت ماشین حساب با جاوا اسکریپت پرداخته شده است. برای انجام این کار از Html ،CSS و جاوا اسکریپت همراه با ویژگیهای پیشرفته ES6 کمک گرفته شد. این ماشین حسابی کاملاً کاربردی است که میتوان از آن در مرورگرها استفاده کرد. شایان ذکر است که این کار، پروژهای منبع آزاد است که کد آن در «گیت هاب» (Github) موجود و قابلیت سفارشیسازی آن فراهم است. امید است که این آموزش ساخت ماشین حساب با جاوا اسکریپت مورد رضایت شـما واقع شده باشد.