مقدمه
ماشین حساب یکی از ابزارهای ضروری در زندگی روزمره ماست. با استفاده از 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` برای محاسبات استفاده می‌شود، اما باید به امنیت آن توجه داشت. استفاده از روش‌های ایمن‌تر برای پردازش ورودی‌های کاربر توصیه می‌شود.
با این کد، شما یک ماشین حساب ساده دارید که قابلیت‌های اولیه را ارائه می‌دهد. این مثال می‌تواند مبنایی برای توسعه ماشین حساب‌های پیشرفته‌تر باشد.
سورس کد ماشین حساب با HTML: راهنمای جامع و کامل
در دنیای وب، ساختن ماشین حساب یکی از پروژه‌های پایه و پرکاربرد است که به کمک HTML، CSS و JavaScript انجام می‌شود. در ادامه، قصد دارم به صورت جامع و کامل، نحوه ساختن یک ماشین حساب ساده و موثر را توضیح دهم، همراه با نکات مهم و جزئیات کاربردی.
ساختار پایه HTML
در مرحله اول، باید ساختار پایه صفحه وب را فراهم کنیم. این ساختار شامل دکمه‌ها، نمایشگر و بخش‌های ضروری است. مثلا:
```html
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8" />
<title>ماشین حساب ساده</title>
<style>
/* استایل‌ها برای ظاهر ماشین حساب */
body {
font-family: Tahoma, 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 4px 10px rgba(0,0,0,
- 1);
#display {
width: 100%;
height: 50px;
font-size: 24px;
margin-bottom: 10px;
padding: 5px 10px;
border: 1px solid #ccc;
border-radius: 5px;
text-align: right;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
button {
padding: 15px;
font-size: 18px;
border: none;
border-radius: 5px;
background-color: #e0e0e0;
cursor: pointer;
transition: background-color
- 2s;
button:hover {
background-color: #d0d0d0;
}
</style>
</head>
<body>
<div class="calculator">
<input type="text" id="display" disabled />
<div class="buttons">
<!-- دکمه‌های ماشین حساب -->
<button onclick="clearDisplay()">C</button>
<button onclick="appendNumber('7')">7</button>
<button onclick="appendNumber('8')">8</button>
<button onclick="appendNumber('9')">9</button>
<button onclick="setOperation('+')">+</button>
<button onclick="appendNumber('4')">4</button>
<button onclick="appendNumber('5')">5</button>
<button onclick="appendNumber('6')">6</button>
<button onclick="setOperation('-')">-</button>
<button onclick="appendNumber('1')">1</button>
<button onclick="appendNumber('2')">2</button>
<button onclick="appendNumber('3')">3</button>
<button onclick="setOperation('*')">*</button>
<button onclick="appendNumber('0')">0</button>
<button onclick="appendNumber('.')">.</button>
<button onclick="calculate()">=</button>
<button onclick="setOperation('/')">/</button>
</div>
</div>
<script>
// کدهای جاوااسکریپت برای عملیات ماشین حساب
let currentInput = '';
let previousInput = '';
let operation = null;
function updateDisplay() {
document.getElementById('display').value = currentInput;
}
function appendNumber(number) {
if (number === '.' && currentInput.includes('.')) return;
currentInput += number;
updateDisplay();
}
function clearDisplay() {
currentInput = '';
previousInput = '';
operation = null;
updateDisplay();
}
function setOperation(op) {
if (currentInput === '') return;
if (previousInput !== '') {
calculate();
}
operation = op;
previousInput = currentInput;
currentInput = '';
}
function calculate() {
let result;
const prev = parseFloat(previousInput);
const current = parseFloat(currentInput);
if (isNaN(prev) || isNaN(current)) return;
switch (operation) {
case '+':
result = prev + current;
break;
case '-':
result = prev - current;
break;
case '*':
result = prev * current;
break;
case '/':
if (current === 0) {
alert('تقسیم بر صفر امکان‌پذیر نیست!');
return;
}
result = prev / current;
break;
default:
return;
}
currentInput = result.toString();
operation = null;
previousInput = '';
updateDisplay();
}
</script>
</body>
</html>
```
توضیحات مهم درباره کد
- ساختار HTML: صفحه با یک ورودی غیرفعال برای نمایش نتیجه و دکمه‌هایی برای ارقام و عملیات ساخته شده است.
- استایل CSS: ظاهر زیبا و منظم برای ماشین حساب، با استفاده از grid برای چیدمان دکمه‌ها.
- کد JavaScript:
- متغیرها برای نگهداری ورودی جاری، قبلی و عملیات استفاده می‌شوند.
- توابع برای افزودن رقم، پاک کردن صفحه، تنظیم عملیات و محاسبه نتیجه.
- محاسبات بر اساس عملیات انتخاب شده و با استفاده از `switch` انجام می‌شود.
نکات کاربردی و توسعه‌های ممکن
- افزودن قابلیت‌های بیشتر مثل حذف یک رقم، عملیات نمایی، و درصد.- بهبود ظاهر با CSS بیشتر و افزودن انیمیشن‌ها.
- افزودن قابلیت‌های ورودی مستقیم با صفحه کلید.
- ذخیره نتایج در حافظه موقت یا پایگاه داده.
در کل، این مثال یک نمونه پایه و قابل توسعه است که به راحتی می‌تواند با ویژگی‌ها و امکانات بیشتر، به یک ماشین حساب کامل‌تر تبدیل شود. استفاده از HTML، CSS و JavaScript در کنار هم، یک ابزار قدرتمند برای ساخت برنامه‌های تعاملی و کاربرپسند است.
