آموزش صفر تا صد ساخت ماشین حساب با جاوا اسکریپت (پروژه محور و کاربردی)

مقدمه

یکی از بهترین و موثرترین راه‌ها برای یادگیری عمیق زبان برنامه‌نویسی جاوا اسکریپت (JavaScript)، انجام پروژه‌های عملی و کاربردی است. طراحی و ساخت یک ماشین حساب، پروژه‌ای کلاسیک و در عین حال بسیار قدرتمند است که مفاهیم اساسی توسعه وب فرانت‌اند را به شما آموزش می‌دهد. در این مقاله تفصیلی، ما قدم به قدم یک ماشین حساب مدرن و ریسپانسیو (Responsive) را با استفاده از مثلث طلایی وب یعنی HTML5 ،CSS3 و جاوا اسکریپت خواهیم ساخت.

چرا ساخت ماشین حساب اهمیت دارد؟

شاید بپرسید چرا این پروژه برای یادگیری جاوا اسکریپت حیاتی است؟ دلیل آن درگیر شدن شما با سه بخش کلیدی توسعه وب است:

• طراحی ساختار (HTML): یادگیری نحوه چیدمان منطقی دکمه‌ها و نمایشگر ماشین حساب.
• استایل‌دهی (CSS): استفاده از ابزارهای مدرن مانند Grid و Flexbox برای چیدمان دکمه‌ها در یک ساختار منظم و واکنش‌گرا.
• منطق برنامه (JavaScript): کار با رویدادهای کلیک (Event Listeners)، دریافت ورودی کاربر، مدیریت وضعیت برنامه (State Management) و انجام محاسبات ریاضی به صورت پویا.

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

در ابتدا نیاز داریم تا اسکلت یا ساختار فیزیکی ماشین حساب خود را تعریف کنیم. ما به یک محفظه اصلی (Container)، یک صفحه نمایش برای نشان دادن ارقام و یک گالری از دکمه‌ها برای اعداد و عملگرها نیاز داریم.

در این قطعه کد، ساختار HTML پروژه را مشاهده می‌کنید:

< div class="calculator" >
  < div class="display" id="display" >0< / div >
  < div class="buttons" >
    < button class="btn clear" onclick="clearDisplay()" >C< / button >
    < button class="btn operator" onclick="appendOperator('/')" >/< / button >
    < button class="btn operator" onclick="appendOperator('*')" >*< / button >
    < button class="btn operator" onclick="appendOperator('-')" >-< / button >
    < button class="btn" onclick="appendNumber('7')" >7< / button >
    < button class="btn" onclick="appendNumber('8')" >8< / button >
    < button class="btn" onclick="appendNumber('9')" >9< / button >
    < button class="btn operator" onclick="appendOperator('+')" >+< / button >
    < button class="btn" onclick="appendNumber('4')" >4< / button >
    < button class="btn" onclick="appendNumber('5')" >5< / button >
    < button class="btn" onclick="appendNumber('6')" >6< / button >
    < button class="btn equal" onclick="calculate()" >=< / button >
    < button class="btn" onclick="appendNumber('1')" >1< / button >
    < button class="btn" onclick="appendNumber('2')" >2< / button >
    < button class="btn" onclick="appendNumber('3')" >3< / button >
    < button class="btn" onclick="appendNumber('0')" >0< / button >
    < button class="btn" onclick="appendNumber('.')" >.< / button >
  < / div >
< / div >

بخش دوم: زیبایی بصری با CSS

بدون استایل‌های مناسب، ماشین حساب ما صرفاً یک لیست از دکمه‌های نامرتب خواهد بود. با استفاده از CSS Grid، دکمه‌ها را به صورت یک شبکه منظم ۴ ستونه در می‌آوریم و از رنگ‌های جذاب برای تفکیک دکمه‌های ریاضی استفاده می‌کنیم.

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f2f5;
    font-family: Arial, sans-serif;
}
.calculator {
    background-color: #1e1e24;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.3);
    width: 320px;
}
.display {
    background-color: #3a3d40;
    color: #ffffff;
    font-size: 2.5rem;
    text-align: right;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px;
    overflow-x: auto;
    white-space: nowrap;
}
.buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.btn {
    background-color: #e0e0e0;
    border: none;
    padding: 20px;
    font-size: 1.2rem;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.2s;
}
.btn:hover {
    background-color: #d4d4d4;
}
.operator {
    background-color: #ff9f0a;
    color: white;
}
.operator:hover {
    background-color: #cc7f08;
}
.clear {
    background-color: #ff3b30;
    color: white;
}
.clear:hover {
    background-color: #cc2f26;
}
.equal {
    background-color: #34c759;
    color: white;
    grid-row: span 2;
    height: 100%;
}
.equal:hover {
    background-color: #289e44;
}

بخش سوم: مدیریت منطق و پردازش ریاضی با جاوا اسکریپت

جاوا اسکریپت مغز متفکر پروژه ماست. وظیفه اصلی آن ذخیره مقادیر ورودی، مدیریت عملیات ریاضی، و در نهایت ارزیابی فرمول وارد شده و نمایش نتیجه نهایی است.

برای پیاده‌سازی این کار، توابع مختلفی را برای افزودن اعداد، مدیریت دکمه پاک کردن (Clear) و دکمه محاسبه (Equal) تعریف می‌کنیم:

const display = document.getElementById('display');
let currentInput = '0';
let shouldResetDisplay = false;

function updateDisplay() {
    display.innerText = currentInput;
}

function appendNumber(number) {
    if (currentInput === '0' || shouldResetDisplay) {
        currentInput = number;
        shouldResetDisplay = false;
    } else {
        currentInput += number;
    }
    updateDisplay();
}

function appendOperator(operator) {
    const lastChar = currentInput.slice(-1);
    // جلوگیری از تکرار همزمان عملگرها در کنار هم
    if (['+', '-', '*', '/'].includes(lastChar)) {
        currentInput = currentInput.slice(0, -1) + operator;
    } else {
        currentInput += operator;
    }
    shouldResetDisplay = false;
    updateDisplay();
}

function clearDisplay() {
    currentInput = '0';
    updateDisplay();
}

function calculate() {
    try {
        // فیلتر کردن مقادیر ورودی برای دلایل امنیتی پیش از اجرا
        const sanitizedInput = currentInput.replace(/[^0-9+\-*\/.]/g, '');
        const result = Function('"use strict";return (' + sanitizedInput + ')')();
        currentInput = String(result);
        shouldResetDisplay = true;
        updateDisplay();
    } catch (error) {
        currentInput = 'Error';
        updateDisplay();
        shouldResetDisplay = true;
    }
}

توضیحات فنی کد جاوا اسکریپت

بیایید بخش‌های مهم کد بالا را با هم مرور کنیم تا مفهوم کار عمیق‌تر درک شود:

۱. مدیریت فواصل و بازنشانی صفحه (State Management)

متغیر shouldResetDisplay وظیفه دارد به برنامه بگوید که آیا پس از فشرده شدن کلید مساوی، با زدن دکمه عددی بعدی، صفحه پاک شود یا خیر. این کار تجربه کاربری بهتری ایجاد می‌کند.

۲. امنیت در ارزیابی فرمول‌ها

استفاده مستقیم از تابع معروف eval() در دنیای وب به دلیل مسائل امنیتی توصیه نمی‌شود. به جای آن، ما ورودی کاربر را ابتدا با یک الگوی منظم (Regex) بررسی کرده و کاراکترهای مخرب احتمالی را حذف می‌کنیم، سپس با ساختار امن‌تر Function() فرمول ریاضی را محاسبه می‌کنیم.

نتیجه‌گیری

تبریک می‌گویم! شما موفق شدید یک پروژه کاربردی و مدرن را از پایه خلق کنید. این پروژه مفاهیم متعددی از جمله رویدادها، متغیرهای موقت، مدیریت خطاها و همچنین طراحی تمیز با CSS Grid را در بر داشت. یادگیری فرانت‌اند با انجام این‌گونه پروژه‌ها بسیار ساده‌تر و لذت‌بخش‌تر خواهد بود.

پیشنمایش