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

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

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

بخش اول: طراحی ساختار HTML

در ابتدا، باید ساختار پایه‌ای صفحه وب را تعریف کنیم. این ساختار شامل دکمه‌ها برای عملیات‌های مختلف، نمایشگر نتایج، و عناصر مربوط به ورودی‌ها است. معمولا، یک دیو (div) یا بخش جداگانه برای نمایش نتایج قرار می‌دهیم، و دکمه‌ها را در قالب جدول یا لیستی مرتب می‌کنیم. مثلا، کد HTML به صورت زیر است:

html  

<div class="calculator">

    <div class="display" id="display">0</div>

    <div class="buttons">

        <button class="btn" data-action="clear">C</button>

        <button class="btn" data-action="delete">DEL</button>

        <button class="btn" data-action="operator" data-value="+">+</button>

        <button class="btn" data-action="operator" data-value="-">-</button>

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

        <button class="btn" data-action="number" data-value="7">7</button>

        <button class="btn" data-action="number" data-value="8">8</button>

        <button class="btn" data-action="number" data-value="9">9</button>

        <button class="btn" data-action="operator" data-value="*">*</button>

        <!-- و ادامه را شامل می‌شود -->

    </div>

</div>

این ساختار ساده، به شما امکان می‌دهد که دکمه‌ها را به همراه نوع عملیات‌شان مشخص کنید. در این حالت، با استفاده از ویژگی `data-action` و `data-value`، می‌توان عملکردهای متنوع را به راحتی مدیریت کرد.

بخش دوم: استایل دهی با CSS

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

css  

.calculator {

    width: 300px;

    margin: 50px auto;

    border: 2px solid #444;

    border-radius: 10px;

    padding: 20px;

    box-shadow: 2px 2px 10px rgba(0,0,0,0.1);

}
.display {

    background-color: #222;

    color: #fff;

    font-size: 2em;

    padding: 10px;

    border-radius: 5px;

    text-align: right;

    margin-bottom: 20px;

}
.buttons {

    display: grid;

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

    gap: 10px;

}
.btn {

    padding: 20px;

    font-size: 1.2em;

    border: none;

    border-radius: 5px;

    cursor: pointer;

    background-color: #ddd;

    transition: background-color 0.3s;

}
.btn:hover {

    background-color: #bbb;

}

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

بخش سوم: برنامه‌نویسی با جاوا اسکریپت

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

js  

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

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

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

js  

buttons.forEach(button => {

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

        const action = button.dataset.action;

        const value = button.dataset.value;
switch(action) {

            case 'number':

                appendNumber(value);

                break;

            case 'operator':

                setOperator(value);

                break;

            case 'clear':

                clearDisplay();

                break;

            case 'delete':

                deleteLast();

                break;

            case 'calculate':

                compute();

                break;

        }

    });

});

در اینجا، باید هر تابع را تعریف کنیم. مثلا، تابع `appendNumber`، رقم‌های وارد شده را به نمایش اضافه می‌کند، و تابع `setOperator`، عملیات ریاضی را ثبت می‌کند.

js  

let currentInput = '';

let previousInput = '';

let currentOperator = null;
function appendNumber(number) {

    if (currentInput === '0') {

        currentInput = number;

    } else {

        currentInput += number;

    }

    updateDisplay();

}
function setOperator(operator) {

    if (currentInput === '') return;

    if (previousInput !== '') {

        compute();

    }

    currentOperator = operator;

    previousInput = currentInput;

    currentInput = '';

}
function updateDisplay() {

    display.innerText = currentInput || '0';

}
function clearDisplay() {

    currentInput = '';

    previousInput = '';

    currentOperator = null;

    updateDisplay();

}
function deleteLast() {

    currentInput = currentInput.slice(0, -1);

    updateDisplay();

}
function compute() {

    let computation;

    const prev = parseFloat(previousInput);

    const current = parseFloat(currentInput);
if (isNaN(prev) || isNaN(current)) return;
switch (currentOperator) {

        case '+':

            computation = prev + current;

            break;

        case '-':

            computation = prev - current;

            break;

        case '*':

            computation = prev * current;

            break;

        case '/':

            computation = current === 0 ? 'Error' : prev / current;

            break;

        default:

            return;

    }

    currentInput = computation.toString();

    currentOperator = null;

    previousInput = '';

    updateDisplay();

}

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

بخش چهارم: افزودن قابلیت‌های پیشرفته

برای بهتر کردن کارایی و قابلیت‌های ماشین حساب، می‌توان قابلیت‌هایی مانند عملیات‌های ترکیبی، وارد کردن اعداد اعشاری، و عملیات‌های بیشتر (مثل توان، ریشه، درصد و ...) را هم اضافه کرد. مثلا، برای عملیات توان، کافی است یک دکمه جدید تعریف کنیم و در تابع `compute`، آن را پیاده‌سازی کنیم.
همچنین، می‌توانید قابلیت وارد کردن عملیات‌های چندگانه بدون نیاز به فشار دادن مساوی هر بار، را هم اضافه کنید. برای این کار، باید منطق مدیریت عملیات و ترتیب انجام آن‌ها را توسعه دهید، که کمی پیچیده‌تر می‌شود ولی امکان‌پذیر است.

بخش پنجم: بهبود و توسعه

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