ماشین حساب ساده با جاوا اسکریپت
ماشین حساب‌ها ابزارهای مفیدی هستند که به ما کمک می‌کنند تا محاسبات ریاضی را به‌راحتی انجام دهیم. با استفاده از جاوا اسکریپت، می‌توانیم یک ماشین حساب ساده بسازیم که قابلیت‌های پایه‌ای مانند جمع، تفریق، ضرب و تقسیم را داشته باشد. در ادامه به بررسی چگونگی ایجاد این ماشین حساب خواهیم پرداخت.
طراحی رابط کاربری
ابتدا نیاز به طراحی یک رابط کاربری ساده داریم. می‌توانید از HTML و CSS برای این کار استفاده کنید. به عنوان مثال:
```html
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=
- 0">
<style>
/* استایل‌های CSS برای زیبایی ماشین حساب */
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
}
#calculator {
padding: 20px;
border-radius: 10px;
background-color: white;
box-shadow: 0 0 10px rgba(0, 0, 0,
- 1);
input {
width: 100%;
padding: 10px;
margin: 5px 0;
text-align: right;
}
button {
width: 100%;
padding: 10px;
margin: 5px 0;
cursor: pointer;
}
</style>
</head>
<body>
<div id="calculator">
<input type="text" id="result" disabled>
<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="setOperation('+')">+</button>
<button onclick="appendToResult('4')">4</button>
<button onclick="appendToResult('5')">5</button>
<button onclick="appendToResult('6')">6</button>
<button onclick="setOperation('-')">-</button>
<button onclick="appendToResult('7')">7</button>
<button onclick="appendToResult('8')">8</button>
<button onclick="appendToResult('9')">9</button>
<button onclick="setOperation('*')">*</button>
<button onclick="appendToResult('0')">0</button>
<button onclick="calculateResult()">=</button>
<button onclick="setOperation('/')">/</button>
</div>
<script src="script.js"></script>
</body>
</html>
```
نوشتن کد جاوا اسکریپت
حالا به کد جاوا اسکریپت می‌پردازیم. این کد وظیفه‌ی محاسبات را بر عهده دارد:
```javascript
let currentInput = '';
let operation = null;
let firstOperand = null;
function appendToResult(value) {
currentInput += value;
document.getElementById('result').value = currentInput;
}
function clearResult() {
currentInput = '';
firstOperand = null;
operation = null;
document.getElementById('result').value = '';
}
function setOperation(op) {
if (currentInput === '') return;
if (firstOperand === null) {
firstOperand = parseFloat(currentInput);
} else {
calculateResult();
}
operation = op;
currentInput = '';
}
function calculateResult() {
if (operation === null || currentInput === '') return;
let secondOperand = parseFloat(currentInput);
let result;
switch (operation) {
case '+':
result = firstOperand + secondOperand;
break;
case '-':
result = firstOperand - secondOperand;
break;
case '*':
result = firstOperand * secondOperand;
break;
case '/':
result = firstOperand / secondOperand;
break;
default:
return;
}
document.getElementById('result').value = result;
currentInput = '';
firstOperand = result;
}
```
نتیجه‌گیری
با ترکیب HTML، CSS و جاوا اسکریپت، شما می‌توانید یک ماشین حساب ساده و کاربردی بسازید که به راحتی محاسبات ریاضی را انجام دهد. این پروژه نه تنها به شما کمک می‌کند تا مفاهیم پایه‌ای برنامه‌نویسی را یاد بگیرید، بلکه تجربه‌ی کار با DOM و تعاملات کاربر را نیز برای شما به ارمغان می‌آورد. با افزودن قابلیت‌های بیشتر، می‌توانید این ماشین حساب را به یک ابزار پیچیده‌تر تبدیل کنید.
ماشین حساب ساده با جاوااسکریپت: توضیح کامل و جامع
در دنیای برنامه‌نویسی وب، ساخت یک ماشین حساب ساده یکی از پروژه‌های پایه و مهم است که نه تنها مفاهیم پایه‌ای جاوااسکریپت را آموزش می‌دهد، بلکه درک عملیات‌های ریاضی و تعامل کاربر را نیز تقویت می‌کند. در این مقاله، به تفصیل و گام به گام، نحوه ساخت یک ماشین حساب ساده را بررسی می‌کنیم، از طراحی رابط کاربری گرفته تا کدنویسی منطق داخلی.
طراحی رابط کاربری (UI)
در ابتدا، باید صفحه‌ای ساده برای نمایش ارقام و نتایج در نظر بگیریم. معمولاً، از عناصر HTML مانند `<button>` برای ارقام و عملیات، و `<input>` یا `<div>` برای نمایش نتیجه استفاده می‌شود. در اینجا، یک نمونه کد HTML پایه برای ماشین حساب آورده شده است:
```html
<div class="calculator">
<input type="text" id="display" disabled />
<div class="buttons">
<button onclick="clearDisplay()">C</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('4')">4</button>
<button onclick="appendNumber('5')">5</button>
<button onclick="appendNumber('6')">6</button>
<button onclick="setOperation('-')">-</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('0')">0</button>
<button onclick="calculate()">=</button>
<button onclick="setOperation('/')">/</button>
</div>
</div>
```
در این بخش، هر دکمه، با تابع جاوااسکریپت مرتبط است که عملکرد موردنظر را اجرا می‌کند.
تعریف متغیرهای جاوااسکریپت
در بخش جاوااسکریپت، باید متغیر‌هایی برای نگهداری حالت ماشین حساب تعریف کنیم. مثلاً:
- `currentInput` برای نگهداری رقم‌های وارد شده
- `previousInput` برای نگهداری عدد قبل از عملیات
- `operation` برای نگهداری نوع عملیات (+، -، *، /)
کد پایه برای این موارد:
```javascript
let currentInput = '';
let previousInput = '';
let operation = null;
```
توابع اصلی ماشین حساب
حالا، باید توابعی برای عملکردهای مختلف بنویسیم:
- appendNumber(number): برای افزودن رقم‌ها به ورودی جاری.
```javascript
function appendNumber(number) {
currentInput += number;
updateDisplay();
}
```
- setOperation(op): برای تعیین نوع عملیات و انتقال ورودی به متغیر مربوط.
```javascript
function setOperation(op) {
if (currentInput === '') return;
if (previousInput !== '') {
calculate();
}
operation = op;
previousInput = currentInput;
currentInput = '';
}
```
- calculate(): برای انجام عملیات و نمایش نتیجه.
```javascript
function calculate() {
let prev = parseFloat(previousInput);
let current = parseFloat(currentInput);
let result;
if (isNaN(prev) || isNaN(current)) return;
switch (operation) {
case '+':
result = prev + current;
break;
case '-':
result = prev - current;
break;
case '*':
result = prev * current;
break;
case '/':
result = current === 0 ? 'خطا' : prev / current;
break;
default:
return;
}
currentInput = result.toString();
operation = null;
previousInput = '';
updateDisplay();
}
```
- clearDisplay(): برای ریست کردن ماشین حساب.
```javascript
function clearDisplay() {
currentInput = '';
previousInput = '';
operation = null;
updateDisplay();
}
```
- updateDisplay(): برای بروزرسانی قسمت نمایش.
```javascript
function updateDisplay() {
document.getElementById('display').value = currentInput;
}
```
نکات مهم و نکات پیشرفته
- می‌توانید عملیات‌های بیشتری مانند توان، رادیکال، درصد و غیره اضافه کنید.
- بررسی خطاهای ورودی، مانند تقسیم بر صفر، اهمیت دارد.
- برای بهتر شدن ظاهر، می‌توانید استایل‌های CSS اضافه کنید.
- اگر خواستید، می‌توانید از رویدادهای `addEventListener` به جای `onclick` استفاده کنید.
جمع‌بندی
در نهایت، ساختن یک ماشین حساب ساده با جاوااسکریپت، روندی است که نیازمند طراحی رابط کاربری مناسب، تعریف متغیرهای صحیح و نوشتن توابع منطقی است. این پروژه، نه تنها درک عمیق‌تری از عملیات‌های ریاضی و رویدادهای وب به شما می‌دهد، بلکه پایه‌ای قوی برای پروژه‌های پیچیده‌تر و توسعه‌دهی برنامه‌های کاربردی است. در صورت نیاز به نمونه‌های پیشرفته‌تر، می‌توانید ویژگی‌های جدیدی را به این کد اضافه کنید و مهارت‌های برنامه‌نویسی خود را تقویت نمایید.
