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

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

در دنیای امروز، برنامه‌نویسی وب به سرعت در حال توسعه است و یکی از پروژه‌های پایه و کاربردی که هر توسعه‌دهنده باید بتواند انجام دهد، ساختن یک ماشین حساب ساده تا پیشرفته است. جاوا اسکریپت، به عنوان یکی از زبان‌های برنامه‌نویسی محبوب و قدرتمند، این امکان را فراهم می‌کند تا بتوان به راحتی و با کمترین هزینه، یک ماشین حساب کاربرپسند و قابل تنظیم بسازیم. در این مقاله، قصد داریم به صورت جامع و مفصل، فرآیند ساخت یک ماشین حساب با زبان جاوا اسکریپت را بررسی کنیم، از طراحی رابط کاربری گرفته تا برنامه‌نویسی منطقی و عملیات‌های ریاضی.
ساختار کلی و طراحی رابط کاربری
قبل از شروع برنامه‌نویسی، مهم است که بدانیم چه اجزایی در یک ماشین حساب معمول وجود دارند. عموماً، ماشین حساب‌ها شامل یک صفحه نمایش (نمایش نتایج و ورودی‌ها)، دکمه‌های اعداد (0 تا 9)، دکمه‌های عملیات ریاضی (جمع، تفریق، ضرب و تقسیم)، و همچنین دکمه‌های عملکردی مانند مساوی (=)، پاک کردن (C یا AC) و شاید دکمه‌های اضافی برای عملیات‌های پیشرفته هستند.
برای طراحی رابط کاربری، می‌توانید از HTML و CSS بهره ببرید. در HTML، ساختار پایه شامل یک عنصر div برای صفحه نمایش و چندین دکمه است. البته، بهتر است از کلاس‌ها و شناسه‌های مناسب استفاده کنید تا به راحتی بتوانید آن‌ها را در CSS و جاوا اسکریپت کنترل کنید. مثلا:

html  

<div id="calculator">

  <input type="text" id="display" disabled>

  <div class="buttons">

    <button class="number" data-number="7">7</button>

    <button class="number" data-number="8">8</button>

    <!-- سایر دکمه‌های اعداد -->

    <button class="operator" data-operator="+">+</button>

    <!-- سایر دکمه‌های عملیات -->

    <button id="equals">=</button>

    <button id="clear">C</button>

  </div>

</div>

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

javascript  

let currentInput = '';

let previousInput = '';

let currentOperator = null;

let resetNext = false;

در ادامه، رویدادهای کلیک برای دکمه‌های اعداد و عملیات را با استفاده از event listeners ثبت می‌کنیم. برای نمونه:

javascript  

document.querySelectorAll('.number').forEach(button => {

  button.addEventListener('click', (e) => {

    if (resetNext) {

      currentInput = '';

      resetNext = false;

    }

    currentInput += e.target.dataset.number;

    document.getElementById('display').value = currentInput;

  });

});

در بخش عملیات، باید عملیات مورد نظر را بر اساس دکمه‌های انتخاب شده انجام دهیم. مثلا:

javascript  

document.querySelectorAll('.operator').forEach(button => {

  button.addEventListener('click', (e) => {

    if (currentInput === '') return;

    if (previousInput !== '') {

      calculate();

    } else {

      previousInput = currentInput;

    }

    currentOperator = e.target.dataset.operator;

    resetNext = true;

  });

});

برای دکمه مساوی، باید عملیات نهایی را اجرا کنیم و نتیجه را نمایش دهیم:

javascript  

document.getElementById('equals').addEventListener('click', () => {

  if (currentInput === '' || previousInput === '' || currentOperator === null) return;

  calculate();

  currentOperator = null;

});

و در نهایت، تابع calculate() که عملیات ریاضی را انجام می‌دهد:

javascript  

function calculate() {

  const prev = parseFloat(previousInput);

  const current = parseFloat(currentInput);

  let result = 0;
switch (currentOperator) {

    case '+':

      result = prev + current;

      break;

    case '-':

      result = prev - current;

      break;

    case '*':

      result = prev * current;

      break;

    case '/':

      result = current === 0 ? 'خطا' : prev / current;

      break;

  }
document.getElementById('display').value = result;

  previousInput = result.toString();

  currentInput = '';

  resetNext = true;

}

در قسمت پاک کردن، باید مقدار صفحه نمایش و متغیرهای مربوطه را ریست کنیم:

javascript  

document.getElementById('clear').addEventListener('click', () => {

  currentInput = '';

  previousInput = '';

  currentOperator = null;

  document.getElementById('display').value = '';

});

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