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

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

در دنیای برنامه‌نویسی، ساخت یک ماشین حساب یکی از پروژه‌های ابتدایی و در عین حال کاربردی است که به توسعه‌دهندگان کمک می‌کند تا مفاهیم پایه‌ای زبان‌های برنامه‌نویسی مانند جاوا اسکریپت را درک کنند. این پروژه نه تنها مهارت‌های برنامه‌نویسی شما را تقویت می‌کند، بلکه توانایی طراحی و پیاده‌سازی واسط کاربری (UI) و منطق برنامه را نیز بهبود می‌بخشد. در ادامه، قصد داریم به طور کامل و جامع، مفهوم، ساختار، و پیاده‌سازی یک ماشین حساب در زبان جاوا اسکریپت را بررسی کنیم.
مقدمه‌ای بر ماشین حساب در جاوا اسکریپت
ماشین حساب، ابزار ساده‌ای است که عملیات‌های محاسباتی پایه مانند جمع، تفریق، ضرب و تقسیم را انجام می‌دهد. در نسخه‌های وب، ماشین حساب‌ها معمولاً شامل یک واسط کاربری گرافیکی (GUI) هستند که کاربر می‌تواند دکمه‌ها را فشار دهد و نتایج را بلافاصله مشاهده کند. پیاده‌سازی چنین ابزاری در جاوا اسکریپت، نیازمند درک عمیق از مفاهیم DOM، رویدادها، و منطق برنامه است.
ساختار کلی ماشین حساب
یک ماشین حساب در جاوا اسکریپت معمولاً شامل چند بخش اصلی است:
1. واسط کاربری (UI): شامل دکمه‌ها برای اعداد، عملیات و نمایشگر (Display) که نتایج را نشان می‌دهد.
2. منطق برنامه: وظیفه پردازش ورودی‌ها، انجام عملیات‌های ریاضی و بروزرسانی نمایشگر است.
3. رویدادها: اتفاقاتی که هنگام کلیک بر روی دکمه‌ها رخ می‌دهند و برنامه را هدایت می‌کنند.
4. حافظه داخلی: برای نگهداری مقادیر ورودی، عملیات جاری و نتایج موقت.
در ادامه، هر کدام از این بخش‌ها را به صورت جداگانه بررسی می‌کنیم.
---

طراحی واسط کاربری (UI)

در طراحی UI، معمولاً از HTML برای ساخت ساختار صفحه و CSS برای استایل‌دهی استفاده می‌کنیم. در این مثال، یک ساختار ساده اما قابل توسعه ارائه می‌دهم:

html  

<div class="calculator">

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

  <div class="buttons">

    <button onclick="clearDisplay()">C</button>

    <button onclick="appendNumber('7')">7</button>

    <button onclick="appendNumber('8')">8</button>

    <button onclick="appendNumber('9')">9</button>

    <button onclick="setOperation('+')">+</button>

    <button onclick="appendNumber('4')">4</button>

    <button onclick="appendNumber('5')">5</button>

    <button onclick="appendNumber('6')">6</button>

    <button onclick="setOperation('-')">-</button>

    <button onclick="appendNumber('1')">1</button>

    <button onclick="appendNumber('2')">2</button>

    <button onclick="appendNumber('3')">3</button>

    <button onclick="setOperation('*')">*</button>

    <button onclick="appendNumber('0')">0</button>

    <button onclick="calculate()">=</button>

    <button onclick="setOperation('/')">/</button>

  </div>

</div>

در این ساختار، هر دکمه با رویداد `onclick` به تابع مربوطه متصل شده است، که در ادامه شرح داده می‌شود. `display` نیز نقش نمایش نتایج و ورودی‌ها را دارد.
---

نوشتن منطق برنامه در جاوا اسکریپت

حالا نوبت به نوشتن کد جاوا اسکریپت می‌رسد که عملیات‌های مورد نیاز را انجام دهد. در اینجا، چند متغیر کلیدی تعریف می‌کنیم:
- `currentInput`: برای نگهداری عدد جاری که کاربر وارد می‌کند.
- `previousInput`: برای نگهداری عدد قبل از عملیات جاری.
- `operator`: برای نگهداری نوع عملیات (+، -، *، /).
در ادامه، توابع اصلی را شرح می‌دهم:

javascript  

let currentInput = '';

let previousInput = '';

let operator = '';
function appendNumber(number) {

  currentInput += number;

  updateDisplay();

}
function setOperation(op) {

  if (currentInput === '') return;

  if (previousInput !== '') {

    calculate();

  }

  operator = op;

  previousInput = currentInput;

  currentInput = '';

  updateDisplay();

}
function calculate() {

  let prev = parseFloat(previousInput);

  let current = parseFloat(currentInput);

  if (isNaN(prev) || isNaN(current)) return;

  switch (operator) {

    case '+':

      currentInput = (prev + current).toString();

      break;

    case '-':

      currentInput = (prev - current).toString();

      break;

    case '*':

      currentInput = (prev * current).toString();

      break;

    case '/':

      if (current === 0) {

        alert("Division by zero!");

        clearDisplay();

        return;

      }

      currentInput = (prev / current).toString();

      break;

    default:

      return;

  }

  previousInput = '';

  operator = '';

  updateDisplay();

}
function clearDisplay() {

  currentInput = '';

  previousInput = '';

  operator = '';

  updateDisplay();

}
function updateDisplay() {

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

}

در این کد، هر تابع وظیفه خاصی دارد. به عنوان مثال، `appendNumber()` عدد وارد شده را به ورودی جاری اضافه می‌کند، `setOperation()` نوع عملیات را تنظیم می‌کند و در صورت نیاز، عملیات قبلی را انجام می‌دهد. تابع `calculate()` نتایج عملیات را محاسبه می‌کند و در نهایت، `updateDisplay()` نتیجه را بروزرسانی می‌نماید.
---

نکات مهم و بهبودهای ممکن

در پیاده‌سازی اولیه، ممکن است مواردی چون مدیریت خطاهای ورودی، عملیات‌های چند مرحله‌ای، و عملیات‌های پیشرفته‌تر مانند توان، ریشه مربع، یا عملیات‌های نمایی نیاز به توسعه داشته باشند. همچنین، برای کاربر پسندتر، می‌توانیم از CSS برای طراحی جذاب‌تر بهره ببریم، و از ویژگی‌های JavaScript مانند `addEventListener` به جای استفاده از رویدادهای inline بهره‌مند شویم.
برای مثال، می‌توانیم از ساختارهای کلاس و اشیاء بهره بگیریم تا کد ساختار یافته‌تر و قابل نگهداری‌تر باشد. در ضمن، افزودن کلیدهای صفحه کلید (Keyboard Events) نیز به کاربر کمک می‌کند که با کیبورد هم بتواند عملیات را انجام دهد.
---

نتیجه‌گیری

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