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

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

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

ساختار HTML ماشین حساب

در مرحله اول، باید یک ساختار پایه برای ماشین حساب در نظر بگیریم. معمولا، یک ناحیه نمایش (Display) برای نشان دادن اعداد و نتایج داریم، و مجموعه‌ای از دکمه‌ها برای اعداد صفر تا نه، عملیات جمع، تفریق، ضرب، تقسیم، و دکمه‌های خاص مانند مساوی (=) و پاک کردن (C). کد نمونه HTML به صورت زیر است:

html  

<div class="calculator">

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

  <div class="buttons">

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

    <button class="operator">/</button>

    <button class="operator">*</button>

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

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

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

    <button class="number">9</button>

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

    <button class="number">4</button>

    <button class="number">5</button>

    <button class="number">6</button>

    <button class="equal">=</button>

    <button class="number">1</button>

    <button class="number">2</button>

    <button class="number">3</button>

    <button class="zero">0</button>

  </div>

</div>

در این قسمت، عناصر HTML به گونه‌ای طراحی شده‌اند که هر دکمه، کلاس خاص خود را داشته باشد، این موضوع برای دسترسی و کنترل در کد جاوا اسکریپت بسیار مهم است. همچنین، ناحیه نمایش، به صورت یک input غیرفعال، برای نشان دادن اعداد و نتایج قرار گرفته است.

استایل‌دهی با CSS

برای جذاب‌تر کردن ظاهر ماشین حساب، می‌توانیم استایل‌های CSS را اضافه کنیم. این بخش، نقش مهمی در جذب کاربر دارد و کاربر را تشویق می‌کند تا بهتر و راحت‌تر از ماشین حساب استفاده کند. مثلا:

css  

.calculator {

  width: 300px;

  margin: 50px auto;

  padding: 20px;

  border: 2px solid #333;

  border-radius: 10px;

  background-color: #f4f4f4;

}

.display {

  width: 100%;

  height: 40px;

  font-size: 20px;

  text-align: right;

  padding: 5px;

  margin-bottom: 10px;

  border-radius: 5px;

  border: 1px solid #ccc;

}

.buttons {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 10px;

}

button {

  height: 40px;

  font-size: 16px;

  cursor: pointer;

  border-radius: 5px;

  border: none;

  background-color: #ddd;

  transition: background-color 0.3s;

}

button:hover {

  background-color: #ccc;

}

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

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

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

javascript  

const display = document.querySelector('.display');

const buttons = document.querySelectorAll('button');

let currentInput = '';

let previousInput = '';

let operation = null;

در اینجا، `display` برای نشان دادن نتایج، و `buttons` برای کنترل رویدادهای کلیک است. متغیرهای `currentInput` و `previousInput`، اعداد جاری و قبلی، و `operation`، نوع عملیات ریاضی، نگهداری می‌شوند.
سپس، باید رویداد کلیک برای هر دکمه تعریف کنیم:

javascript  

buttons.forEach(button => {

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

    const buttonText = button.textContent;
if (button.classList.contains('number') || button.classList.contains('zero')) {

      currentInput += buttonText;

      display.value = currentInput;

    } else if (button.classList.contains('operator')) {

      if (currentInput === '') return;

      if (previousInput !== '') {

        compute();

      }

      operation = button.textContent;

      previousInput = currentInput;

      currentInput = '';

    } else if (button.classList.contains('equal')) {

      compute();

    } else if (button.classList.contains('clear')) {

      clear();

    }

  });

});

در این قسمت، برای دکمه‌های عددی، رقم‌ها به `currentInput` اضافه می‌شوند و در صفحه نشان داده می‌شوند. برای عملیات، اگر مقدار قبلی وجود داشته باشد، عملیات انجام می‌شود و نتیجه در `previousInput` ذخیره می‌شود. دکمه مساوی، عملیات را اجرا می‌کند، و دکمه پاک‌کن، صفحه را پاک می‌سازد.

تابع اجرای عملیات ریاضی

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

javascript  

function compute() {

  const prev = parseFloat(previousInput);

  const current = parseFloat(currentInput);

  if (isNaN(prev) || isNaN(current)) return;
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;

  }

  display.value = result;

  currentInput = result.toString();

  previousInput = '';

  operation = null;

}

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

تابع پاک کردن صفحه

برای پاک کردن، کافی است مقادیر را ریست کنیم:

javascript  

function clear() {

  currentInput = '';

  previousInput = '';

  operation = null;

  display.value = '';

}

این تابع، تمام متغیرها و صفحه نمایش را به وضعیت اولیه برمی‌گرداند.

جمع‌بندی

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