برنامه نویسی و طراحی سایت

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

سخن پایانی

faradars mobile

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

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

آموزش ساخت ماشین حساب با جاوا اسکریپت و HTML

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

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

کلیک کنید

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

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

  1. Index با پسوند Html
  2. Style با پسوند CSS
  3. 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
فیلم آموزش جاوا اسکریپت 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 جاوا اسکریپت
فیلم آموزش 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
فیلم آموزش کاربردی برنامه نویسی جی کوئری 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)

 است.

ساخت ماشین حساب با javascript

همچنین برای تکمیل عملیات به یک تابع 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 – سریع و آسان در ۱۵۰ دقیقه
فیلم آموزش رایگان جاوا اسکریپت 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 در جاوا اسکریپت
فیلم آموزش مقدماتی کتابخانه 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()
  }

});

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

ساخت ماشین حساب با js

سخن پایانی

در این مقاله به آموزش ساخت ماشین حساب با جاوا اسکریپت پرداخته شده است. برای انجام این کار از Html ،CSS و جاوا اسکریپت همراه با ویژگی‌های پیشرفته ES6 کمک گرفته شد. این ماشین حسابی کاملاً کاربردی است که می‌توان از آن در مرورگرها استفاده کرد. شایان ذکر است که این کار، پروژه‌ای منبع آزاد است که کد آن در «گیت هاب» (Github) موجود و قابلیت سفارشی‌سازی آن فراهم است. امید است که این آموزش ساخت ماشین حساب با جاوا اسکریپت مورد رضایت شـما واقع‌ شده باشد.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.