مقدمه
ماشین حساب یکی از ابزارهای ضروری در زندگی روزمره ماست. با استفاده از HTML و JavaScript می‌توان یک ماشین حساب ساده طراحی کرد که عملکردهای اصلی ریاضی مانند جمع، تفریق، ضرب و تقسیم را انجام دهد. در اینجا به توضیح سورس کد ماشین حساب خواهیم پرداخت و نکات مهم را بررسی خواهیم کرد.
ساختار 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="result" disabled>
<div class="buttons">
<button onclick="clearResult()">C</button>
<button onclick="appendToResult('1')">1</button>
<button onclick="appendToResult('2')">2</button>
<button onclick="appendToResult('3')">3</button>
<button onclick="appendToResult('+')">+</button>
<button onclick="appendToResult('4')">4</button>
<button onclick="appendToResult('5')">5</button>
<button onclick="appendToResult('6')">6</button>
<button onclick="appendToResult('-')">-</button>
<button onclick="appendToResult('7')">7</button>
<button onclick="appendToResult('8')">8</button>
<button onclick="appendToResult('9')">9</button>
<button onclick="appendToResult('*')">*</button>
<button onclick="calculateResult()">=</button>
<button onclick="appendToResult('0')">0</button>
<button onclick="appendToResult('/')">/</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
```
توضیحات کد
در این کد، یک ورودی برای نمایش نتایج و دکمه‌هایی برای ورودی اعداد و عملگرها داریم. دکمه‌ها با استفاده از تابع `onclick` به توابع JavaScript متصل می‌شوند.
CSS برای زیباسازی
برای زیبا کردن ماشین حساب، می‌توانیم از CSS استفاده کنیم. مثلاً:
```css
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.calculator {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0,
- 1);
input {
width: 100%;
padding: 10px;
margin-bottom: 10px;
font-size: 24px;
text-align: right;
}
```
منطق JavaScript
حالا به منطق ماشین حساب می‌پردازیم. در فایل `script.js`، توابع زیر را می‌نویسیم:
```javascript
function appendToResult(value) {
document.getElementById('result').value += value;
}
function clearResult() {
document.getElementById('result').value = '';
}
function calculateResult() {
const result = eval(document.getElementById('result').value);
document.getElementById('result').value = result;
}
```
نکات پایانی
از تابع `eval` برای محاسبات استفاده می‌شود، اما باید به امنیت آن توجه داشت. استفاده از روش‌های ایمن‌تر برای پردازش ورودی‌های کاربر توصیه می‌شود.
با این کد، شما یک ماشین حساب ساده دارید که قابلیت‌های اولیه را ارائه می‌دهد. این مثال می‌تواند مبنایی برای توسعه ماشین حساب‌های پیشرفته‌تر باشد.
