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

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

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

پیش نیاز اصلی ساخت ماشین حساب با استفاده از زبان جاوا اسکریپت، درک اصولی این زبان به همراه HTML و CSS است. همان‌طور که گفته‌ شد، با استفاده از جاوا اسکریپت می‌توان کارهای جالبی را انجام داد و برنامه‌های جذابی را برای وب ساخت. از آنجا که ماشین حساب از اجزای مختلفی تشکیل شده است، بهترین ایده برای ساختن آن با جاوا اسکریپت این است که آن را با 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
    
    قرار بگیرند. تمام این عناصر در قطعه کد زیر به همین شکل اضافه شده‌اند:




    
    
    
    
    

        

            

            

        
        AC
        DEL
        ÷
        1
        2
        3
        *
        4
        5
        6
        +
        7
        8
        9
        -
        .
        0
        =
    




کد 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
     اضافه کرد. این کار با قطعه کد زیر امکان‌پذیر است.

  

    

AC
  DEL
  ÷
  1
  2
  3
  *
  4
  5
  6
  +
  7
  8
  9
  -
  .
  0
  =
در فایل جاوا اسکریپت، چند «متغیر ثابت» (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 برای ساخت ماشین حساب در این پروژه:



  
    
    
    
    
  
  
    

    

    

    

    
    AC
    DEL
    ÷
    1
    2
    3
    *
    4
    5
    6
    +
    7
    8
    9
    -
    .
    0
    =

    

  



کد نهایی 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) موجود و قابلیت سفارشی‌سازی آن فراهم است. امید است که این آموزش ساخت ماشین حساب با جاوا اسکریپت مورد رضایت شـما واقع‌ شده باشد.