ساخت ماشین حساب با زبان جاوا اسکریپت
برای ساخت یک ماشین حساب با استفاده از زبان جاوا اسکریپت، ابتدا نیاز داریم تا یک ساختار HTML ساده ایجاد کنیم. سپس با استفاده از CSS، استایل مناسبی به آن بدهیم. در نهایت، کدهای جاوا اسکریپت را برای انجام محاسبات پیاده‌سازی می‌کنیم.
۱. ساختار 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="appendToResult('0')">0</button>
<button onclick="calculateResult()">=</button>
<button onclick="appendToResult('/')">/</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
```
۲. استایل CSS
در ادامه، یک فایل CSS به نام `style.css` ایجاد کنید و کدهای زیر را داخل آن قرار دهید:
```css
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
}
.calculator {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,
- 1);
input {
width: 100%;
height: 40px;
text-align: right;
margin-bottom: 10px;
font-size: 18px;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
button {
height: 40px;
font-size: 18px;
}
```
۳. کد جاوا اسکریپت
حالا یک فایل جاوا اسکریپت به نام `script.js` ایجاد کنید و کدهای زیر را داخل آن قرار دهید:
```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 (e) {
resultField.value = 'خطا';
}
}
```
نتیجه‌گیری
با انجام مراحل بالا، شما یک ماشین حساب ساده با استفاده از جاوا اسکریپت ایجاد کرده‌اید. این ماشین حساب امکان انجام عملیات‌های پایه‌ای همچون جمع، تفریق، ضرب و تقسیم را دارد. با افزودن ویژگی‌های بیشتر، می‌توانید ماشین حساب خود را پیشرفته‌تر کنید.
امیدوارم این توضیحات برای شما مفید باشد! اگر سوالی دارید، خوشحال می‌شوم کمک کنم.
ساخت ماشین حساب با زبان جاوا اسکریپت: راهنمای کامل
در دنیای توسعه وب، ساختن یک ماشین حساب ساده اما کارآمد، یکی از پروژه‌های پایه و مهم است که به درک عمیق‌تری از زبان جاوا اسکریپت و تعامل با عناصر HTML و CSS کمک می‌کند. در ادامه، قدم به قدم، روند ساختن این ماشین حساب را بررسی می‌کنیم، از طراحی رابط کاربری گرفته تا پیاده‌سازی منطق عملیات‌ها.
طراحی رابط کاربری (UI)
ابتدا باید صفحات HTML را طراحی کنیم. معمولاً، یک ماشین حساب شامل دکمه‌ها برای اعداد ۰ تا ۹، عملیات‌های جمع، تفریق، ضرب و تقسیم، و دکمه مساوی است. همچنین، یک بخش برای نمایش نتیجه و ورودی کاربر. برای مثال، می‌توانیم از ساختار زیر استفاده کنیم:
```html
<div class="calculator">
<input type="text" id="display" disabled>
<div class="buttons">
<button class="num">7</button>
<button class="num">8</button>
<button class="num">9</button>
<button class="op">/</button>
<button class="num">4</button>
<button class="num">5</button>
<button class="num">6</button>
<button class="op">*</button>
<button class="num">1</button>
<button class="num">2</button>
<button class="num">3</button>
<button class="op">-</button>
<button class="num">0</button>
<button class="clear">C</button>
<button class="equals">=</button>
<button class="op">+</button>
</div>
</div>
```
استایل‌دهی با CSS
برای ظاهر جذاب، می‌توانیم CSS بنویسیم. مثلا:
```css
.calculator { width: 200px; margin: auto; }
#display { width: 100%; height: 30px; font-size: 20px; text-align: right; }
.buttons { display: flex; flex-wrap: wrap; }
button { width: 50px; height: 50px; margin: 5px; font-size: 18px; }
```
ایجاد منطق با جاوا اسکریپت
حالا، نوبت به نوشتن اسکریپت می‌رسد. ابتدا باید المان‌ها را انتخاب کنیم:
```js
const display = document.getElementById('display');
const buttons = document.querySelectorAll('button');
let currentInput = '';
let previousInput = '';
let operation = null;
```
سپس، باید رویداد کلیک برای هر دکمه تعریف کنیم:
```js
buttons.forEach(button => {
button.addEventListener('click', () => {
if (button.classList.contains('num')) {
currentInput += button.innerText;
display.value = currentInput;
} else if (button.classList.contains('op')) {
if (currentInput === '') return;
previousInput = currentInput;
operation = button.innerText;
currentInput = '';
} else if (button.classList.contains('equals')) {
if (currentInput === '' || previousInput === '') return;
calculate();
} else if (button.classList.contains('clear')) {
currentInput = '';
previousInput = '';
operation = null;
display.value = '';
}
});
});
```
در تابع `calculate()`، عملیات مورد نظر اجرا می‌شود:
```js
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 ? 'خطا' : prev / current;
break;
}
display.value = result;
currentInput = result.toString();
previousInput = '';
operation = null;
}
```
نکات مهم و توسعه‌های احتمالی
- می‌توانید عملیات‌های بیشتری مانند توان، ریشه، درصد و غیره اضافه کنید.
- کنترل خطاهای ورودی، مانند تقسیم بر صفر، اهمیت زیادی دارد.
- برای بهبود ظاهر، از فریم‌ورک‌های CSS مانند Bootstrap یا Materialize بهره ببرید.
- افزودن قابلیت نگهداری تاریخچه محاسبات، تجربه کاربری را بهتر می‌کند.
در مجموع، ساخت ماشین حساب با جاوا اسکریپت، تمرینی فوق‌العاده برای درک بهتر DOM، رویدادها و منطق برنامه‌نویسی است. با تمرین و توسعه، می‌توانید پروژه‌های پیچیده‌تری نیز بسازید و مهارت‌های خود را ارتقا دهید.