ماشین حساب در جاوا اسکریپت
ماشین حساب‌ها ابزارهای مفیدی هستند که به کاربران امکان می‌دهند تا محاسبات ریاضی را به سادگی انجام دهند. با استفاده از زبان برنامه‌نویسی جاوا اسکریپت، می‌توان یک ماشین حساب ساده یا پیچیده ایجاد کرد که قابلیت‌های زیادی را در اختیار کاربران قرار دهد.
برای ساخت یک ماشین حساب، ابتدا نیاز به طراحی رابط کاربری داریم. رابطی که شامل دکمه‌ها برای اعداد و عملگرها (جمع، تفریق، ضرب و تقسیم) باشد.
ایجاد رابط کاربری
یک نمونه ساده از HTML برای ماشین حساب به شرح زیر است:
```html
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>ماشین حساب ساده</title>
<style>
/* CSS برای استایل دادن به ماشین حساب */
</style>
</head>
<body>
<div id="calculator">
<input type="text" id="result" disabled>
<div id="buttons">
<button onclick="clearResult()">C</button>
<button onclick="appendToResult('1')">1</button>
<button onclick="appendToResult('2')">2</button>
<button onclick="appendToResult('+')">+</button>
<button onclick="calculateResult()">=</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
```
در این کد، یک ورودی برای نمایش نتیجه و دکمه‌ها برای اعداد و عملگرها وجود دارد.
نویسندگی کد جاوا اسکریپت
حالا بیایید نگاهی به کد جاوا اسکریپت بیندازیم که عملکرد ماشین حساب را مدیریت می‌کند.
```javascript
function appendToResult(value) {
document.getElementById('result').value += value;
}
function clearResult() {
document.getElementById('result').value = '';
}
function calculateResult() {
const resultField = document.getElementById('result');
try {
resultField.value = eval(resultField.value);
} catch (error) {
resultField.value = 'خطا';
}
}
```
در این کد:
- appendToResult: این تابع یک مقدار به ورودی اضافه می‌کند.
- clearResult: این تابع ورودی را پاک می‌کند.
- calculateResult: این تابع محاسبه را انجام می‌دهد و از تابع eval برای ارزیابی عبارات ریاضی استفاده می‌کند.
نکات مهم
- استفاده از eval: این تابع می‌تواند خطرناک باشد. اطمینان حاصل کنید که ورودی‌ها ایمن هستند.
- استفاده از try/catch: برای مدیریت خطاها و جلوگیری از کرش شدن برنامه بسیار مهم است.
- طراحی استایل: با استفاده از CSS می‌توانید استایل‌های جذابی به ماشین حساب اضافه کنید.
با این روش، شما یک ماشین حساب ساده در جاوا اسکریپت ساخته‌اید. از اینجا می‌توانید ویژگی‌های بیشتری مانند محاسبات پیشرفته‌تر، تاریخچه محاسبات و غیره اضافه کنید.
ماشین حساب در جاوا اسکریپت: راهنمای جامع و کامل
در دنیای برنامه‌نویسی وب، ساختن یک ماشین حساب ساده یا پیشرفته، یکی از پروژه‌های محبوب و آموزشی است. این پروژه نه تنها به شما کمک می‌کند مفاهیم پایه‌ای جاوا اسکریپت، HTML و CSS را درک کنید، بلکه مهارت‌های برنامه‌نویسی منطقی و طراحی رابط کاربری را نیز تقویت می‌کند. در ادامه، نگاهی دقیق و جامع به چگونگی ساخت یک ماشین حساب در جاوا اسکریپت خواهیم انداخت.
ساختار پایه و اصول اولیه
در ابتدا، باید یک صفحه HTML ایجاد کنید که شامل دکمه‌ها و نمایشگر ماشین حساب باشد. معمولا، نمایشگر (مانند یک ورودی یا div) برای نشان دادن اعداد و نتایج، و دکمه‌هایی برای اعداد و عملیات ریاضی قرار می‌دهید. مثلا:
```html
<div id="display">0</div>
<button class="btn" data-num="1">1</button>
<button class="btn" data-op="+">+</button>
<!-- سایر دکمه‌ها -->
```
سپس، در فایل جاوا اسکریپت، باید رویدادهای کلیک هر دکمه را مدیریت کنید. این کار با افزودن EventListener به هر دکمه انجام می‌شود. هدف این است که هنگام کلیک، عدد یا عملیات مناسب به نمایشگر افزوده یا اجرا شود.
مدیریت ورودی‌ها و عملیات‌ها
در ماشین حساب، معمولاً یک متغیر برای ذخیره‌سازی عدد جاری، عملیات جاری و نتیجه نهایی وجود دارد. مثلا:
```javascript
let currentInput = '';
let previousInput = '';
let operation = null;
```
وقتی کاربر عددی می‌فشارد، این عدد به `currentInput` افزوده می‌شود، و نمایشگر به‌روزرسانی می‌شود. وقتی عملیات (+،−،×،÷) انتخاب می‌شود، عملیات جاری ذخیره و `currentInput` به `previousInput` منتقل می‌شود، و آماده دریافت عدد بعدی است.
انجام محاسبات
در پایان، وقتی کاربر کلید مساوی (=) را فشار می‌دهد، باید عملیات ریاضی انجام شود. برای این کار، معمولاً یک تابع وجود دارد که بر اساس نوع عملیات، دو عدد را محاسبه می‌کند:
```javascript
function calculate() {
const prev = parseFloat(previousInput);
const current = parseFloat(currentInput);
let result = 0;
switch (operation) {
case '+':
result = prev + current;
break;
case '-':
result = prev - current;
break;
case '*':
result = prev * current;
break;
case '/':
result = current === 0 ? 'Error' : prev / current;
break;
}
displayResult(result);
}
```
در نهایت، نتیجه در نمایشگر نشان داده می‌شود و متغیرهای مربوطه ریست می‌گردند تا کاربر بتواند عملیات جدیدی را آغاز کند.
نکات مهم در توسعه ماشین حساب جاوا اسکریپت
- مدیریت خطاها: مانند تقسیم بر صفر یا وارد کردن کاراکترهای غیر عددی، حتما باید به دقت کنترل شوند.
- بهبود رابط کاربری: با استفاده از CSS، ظاهر ماشین حساب را جذاب‌تر و کاربر پسندتر کنید.
- پشتیبانی از عملیات چندگانه: امکان انجام زنجیره‌ای عملیات مانند `2 + 3 * 4`، نیاز به مدیریت پیشرفته‌تر دارد.
- استفاده از توابع و کلاس‌ها: برای ساخت برنامه‌های پیچیده‌تر، بهتر است از ساختارهای برنامه‌نویسی مدرن بهره ببرید.
نتیجه‌گیری
در کل، ساختن یک ماشین حساب در جاوا اسکریپت، تمرینی عالی است که مفاهیم پایه‌ای برنامه‌نویسی، مدیریت رویداد، عملیات ریاضی و طراحی رابط کاربری را به صورت عملی آموزش می‌دهد. با تمرین و توسعه، می‌توانید ماشین حساب‌های پیچیده‌تر و کاربر پسندتری بسازید، و حتی پروژه‌های بزرگ‌تر را در آینده پیاده‌سازی کنید. پس، شروع کنید و آزمایش کنید!
