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

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

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

۱. تعریف پروژه و نیازمندی‌ها

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

۲. ساختار HTML: پایه و اساس رابط کاربری

در بخش HTML، باید ساختاری فراهم کنیم که دکمه‌ها، نمایشگر، و عناصر مربوط به عملیات‌ها در آن جای گیرند. معمولاً، یک صفحه ساده شامل یک عنصر `<input>` یا `<div>` برای نمایش نتایج، و چندین دکمه برای اعداد و عملیات است.
نمونه کد پایه:

html  

<div class="calculator">

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

  <button class="btn" data-num="7">7</button>

  <button class="btn" data-num="8">8</button>

  <button class="btn" data-num="9">9</button>

  <button class="btn-op" data-op="+">+</button>

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

</div>

در این ساختار، هر دکمه، کلاس مخصوص و داده‌های مربوطه دارد که در JavaScript برای شناسایی و کنترل رویدادها، مهم است.
---

۳. استایل CSS: زیبایی و کاربرپسندی

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

css  

.calculator {

  width: 200px;

  margin: 0 auto;

  padding: 10px;

  border: 2px solid #333;

  border-radius: 8px;

}

#display {

  width: 100%;

  height: 40px;

  font-size: 20px;

  text-align: right;

  margin-bottom: 10px;

}

.btn {

  width: 45px;

  height: 45px;

  margin: 5px;

  font-size: 18px;

  cursor: pointer;

}

این استایل، ظاهر ساده و کاربرپسند برای ماشین حساب ایجاد می‌کند.
---

۴. نوشتن منطق جاوا اسکریپت: کنترل رویدادها و عملیات

در این قسمت، وارد عمق منطق برنامه می‌شویم. باید رویدادهای کلیک بر روی دکمه‌ها، ورودی‌های کاربر، و عملیات‌های ریاضی را مدیریت کنیم.
ابتدا، متغیرهای لازم را تعریف می‌کنیم:

javascript  

let currentInput = '';

let previousInput = '';

let operation = null;

سپس، رویدادهای مربوط به دکمه‌های عددی و عملیاتی را مدیریت می‌کنیم:

javascript  

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

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

    currentInput += button.dataset.num;

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

  });

});

و برای عملیات‌های ریاضی:

javascript  

document.querySelectorAll('.btn-op').forEach(op => {

  op.addEventListener('click', () => {

    previousInput = currentInput;

    operation = op.dataset.op;

    currentInput = '';

  });

});

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

javascript  

function calculate() {

  const prev = parseFloat(previousInput);

  const current = parseFloat(currentInput);

  let result;

  switch (operation) {

    case '+':

      result = prev + current;

      break;

    case '-':

      result = prev - current;

      break;

    case '*':

      result = prev * current;

      break;

    case '/':

      if (current === 0) {

        alert('خطا: تقسیم بر صفر!');

        return;

      }

      result = prev / current;

      break;

    default:

      return;

  }

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

  currentInput = result.toString();

  previousInput = '';

  operation = null;

}

در نهایت، باید رویداد دکمه مساوی (=) را مدیریت کنیم:

javascript  

document.getElementById('equals').addEventListener('click', calculate);

---

۵. نکات مهم و توسعه‌های احتمالی

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

نتیجه‌گیری

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