مقدمه
نوشتن یک ماشین حساب ساده با جاوا اسکریپت می‌تواند یک پروژه عالی برای یادگیری مفاهیم بنیادی برنامه‌نویسی و کار با DOM باشد. این پروژه به شما کمک می‌کند تا با نحوه تعامل با کاربر و انجام محاسبات در مرورگر آشنا شوید.
ایجاد ساختار HTML
اولین قدم، ایجاد یک ساختار HTML است. این ساختار باید شامل دکمه‌ها، نمایشگر و قابلیت‌های ورودی کاربر باشد. می‌توانید از کد زیر استفاده کنید:
```html
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=
- 0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="calculator">
<input type="text" id="display" disabled>
<div class="buttons">
<button onclick="clearDisplay()">C</button>
<button onclick="appendToDisplay('1')">1</button>
<button onclick="appendToDisplay('2')">2</button>
<button onclick="appendToDisplay('3')">3</button>
<button onclick="appendToDisplay('+')">+</button>
<!-- سایر دکمه‌ها -->
<button onclick="calculate()">=</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
```
استایل CSS
برای زیبا‌تر کردن ماشین حساب، از CSS استفاده کنید. کد زیر یک استایل ساده برای ماشین حساب ارائه می‌دهد:
```css
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
}
.calculator {
border: 1px solid #ccc;
padding: 20px;
border-radius: 10px;
background-color: white;
}
input {
width: 100%;
margin-bottom: 10px;
text-align: right;
padding: 10px;
font-size:
- 5em;
```
برنامه‌نویسی با جاوا اسکریپت
حالا نوبت به نوشتن کد جاوا اسکریپت می‌رسد. این کد مسئول انجام محاسبات و مدیریت ورودی‌های کاربر است. کد زیر را در فایل `script.js` قرار دهید:
```javascript
function appendToDisplay(value) {
document.getElementById('display').value += value;
}
function clearDisplay() {
document.getElementById('display').value = '';
}
function calculate() {
try {
const display = document.getElementById('display');
display.value = eval(display.value);
} catch (error) {
alert('خطا در محاسبه!');
}
}
```
توضیحات نهایی
در اینجا، ما یک ماشین حساب ساده با جاوا اسکریپت ایجاد کردیم. این ماشین حساب قادر به انجام محاسبات پایه‌ای است. می‌توانید با افزودن ویژگی‌های جدید، مانند محاسبات پیشرفته یا تاریخچه محاسبات، این پروژه را گسترش دهید. امیدوارم این راهنما برای شما مفید باشد!
نوشتن ماشین حساب با جاوا اسکریپت، یکی از پروژه‌های جذاب و پرکاربرد در حوزه توسعه وب است. این پروژه، نه تنها مهارت‌های برنامه‌نویسی شما را تقویت می‌کند، بلکه درک دقیقی از تعامل بین HTML، CSS و JavaScript را نیز به شما می‌دهد. در ادامه، گام‌به‌گام، به صورت جامع و کامل، فرآیند ساخت یک ماشین حساب ساده، اما کارآمد، را شرح می‌دهم.
۱. طراحی رابط کاربری (HTML و CSS)
در ابتدا، باید یک ساختار پایه برای نمایش ماشین حساب داشته باشید. این شامل دکمه‌ها، صفحه نمایش (نمایش نتایج و عملیات جاری) و قسمت‌های دیگر است.
- صفحه نمایش باید یک عنصر input یا div باشد که نتایج و عملیات جاری در آن نشان داده شود.
- دکمه‌ها برای اعداد ۰ تا ۹، عملیات جمع، تفریق، ضرب و تقسیم، و دکمه‌های خاص مثل مساوی (=) و پاک کردن (C) طراحی می‌شوند.
با استفاده از CSS، ظاهر این عناصر را زیبا و قابل فهم می‌کنید. مثلا، با تنظیم رنگ، اندازه، فاصله و استایل کلی، رابط کاربری را جذاب و کاربرپسند می‌سازید.
۲. افزودن منطق عملیات با جاوا اسکریپت
در این مرحله، باید عملکرد دکمه‌ها را تعریف کنید. این یعنی، وقتی کاربر روی هر دکمه کلیک می‌کند، چه اتفاقی بیفتد.
- برای اعداد، باید آن‌ها را به رشته‌ای تبدیل و در صفحه نمایش نشان دهید.
- عملیات ریاضی باید به گونه‌ای مدیریت شود که همیشه در حافظه نگهداری شوند و بتوانید بر اساس دکمه مساوی، نتیجه را محاسبه کنید.
برای این کار، معمولاً از متغیرهایی مانند `currentInput`، `previousInput` و `operation` استفاده می‌شود. مثلاً، وقتی کاربر عدد ۵ را وارد می‌کند، در `currentInput` قرار می‌گیرد.
وقتی عملیات جمع (+) را انتخاب می‌کند، `currentInput` در `previousInput` قرار می‌گیرد، و عملیات جمع ثبت می‌شود.
۳. پیاده‌سازی عملیات ریاضی و محاسبات
در این بخش، باید تابعی بنویسید که بر اساس نوع عملیات، نتیجه را محاسبه کند. مثلا، اگر عملیات جمع است، مقادیر `previousInput` و `currentInput` را جمع می‌کنید.
- این تابع باید هنگام کلیک روی دکمه مساوی (=) فعال شود.
- همچنین، باید عملیات‌های دیگر مثل تفریق، ضرب و تقسیم را پشتیبانی کند.
۴. افزودن ویژگی‌های دیگر و بهبود رابط کاربری
پس از ساخت پایه، می‌توانید ویژگی‌های پیشرفته‌تری اضافه کنید، مثل:
- پشتیبانی از عملیات‌های پیچیده‌تر (جذر، توان، درصد و...).
- اضافه کردن کلیدهای پاکسازی (`C`) و حذف آخرین عدد (`Backspace`).
- بهبود ظاهر و واکنش‌گرایی در دستگاه‌های مختلف.
۵. نکات مهم و توصیه‌ها
- همیشه از رویکرد مدرن در JavaScript استفاده کنید، مانند `let` و `const`.
- از توابع جداگانه بهره ببرید، تا کدتان خواناتر و قابل نگهداری‌تر باشد.
- برای جلوگیری از خطاهای ناخواسته، حتماً ورودی‌ها را اعتبارسنجی کنید.
- در طراحی رابط کاربری، سادگی و کاربرپسندی را رعایت کنید.
در نتیجه، ساختن یک ماشین حساب با جاوا اسکریپت، تمرینی عالی است که مهارت‌های برنامه‌نویسی و طراحی وب شما را تقویت می‌کند. این پروژه، می‌تواند پایه‌ای باشد برای پروژه‌های بزرگ‌تر و پیچیده‌تر، و نمونه‌ای عملی برای فهم بهتر مفاهیم برنامه‌نویسی و توسعه وب است.
