ساخت ماشین حساب در جاوا اسکریپت
ساخت یک ماشین حساب ساده با استفاده از جاوا اسکریپت می‌تواند یک پروژه جالب و آموزنده باشد. این پروژه به شما اجازه می‌دهد تا با مفاهیم پایه‌ای برنامه‌نویسی، کار با DOM و رویدادها آشنا شوید.
مراحل ساخت ماشین حساب
۱. طراحی رابط کاربری
ابتدا، یک HTML ساده برای ماشین حساب بسازید. شما می‌توانید از تگ‌های `<input>` برای ورودی‌ها و `<button>` برای دکمه‌ها استفاده کنید. به عنوان مثال:
```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="styles.css">
</head>
<body>
<div class="calculator">
<input type="text" id="display" disabled />
<div class="buttons">
<button onclick="clearDisplay()">C</button>
<button onclick="appendToDisplay('1')">1</button>
<button onclick="appendToDisplay('2')">2</button>
<button onclick="appendToDisplay('3')">3</button>
<button onclick="appendToDisplay('+')">+</button>
<button onclick="calculate()">=</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
```
۲. نوشتن کد جاوا اسکریپت
حالا وقت آن است که منطق ماشین حساب را پیاده‌سازی کنید. در فایل `script.js`، می‌توانید توابعی برای اضافه کردن ورودی‌ها، محاسبه و پاک کردن نمایشگر بنویسید:
```javascript
function appendToDisplay(value) {
document.getElementById('display').value += value;
}
function clearDisplay() {
document.getElementById('display').value = '';
}
function calculate() {
let display = document.getElementById('display').value;
try {
let result = eval(display);
document.getElementById('display').value = result;
} catch (error) {
document.getElementById('display').value = 'خطا';
}
}
```
توضیحات
در کد فوق، تابع `appendToDisplay` مقدار ورودی را به نمایشگر اضافه می‌کند. تابع `clearDisplay` ورودی را پاک می‌کند. در نهایت، تابع `calculate` از `eval()` برای محاسبه عبارت استفاده می‌کند. توجه داشته باشید که استفاده از `eval()` ممکن است خطراتی داشته باشد، بنابراین در پروژه‌های بزرگ‌تر باید به دنبال راه‌حل‌های امن‌تری باشید.
نتیجه‌گیری
با این روش، شما یک ماشین حساب ساده با جاوا اسکریپت ساختید. این پروژه می‌تواند نقطه شروعی باشد برای یادگیری بیشتر در زمینه برنامه‌نویسی وب. با افزودن قابلیت‌های بیشتر، مانند عملیات پیچیده‌تر یا طراحی زیباتر، می‌توانید مهارت‌های خود را بهبود ببخشید.
ساخت ماشین حساب در جاوا اسکریپت: راهنمای جامع و کامل
ایجاد یک ماشین حساب در جاوا اسکریپت یکی از پروژه‌های جذاب و کاربردی است که می‌تواند به توسعه مهارت‌های برنامه‌نویسی شما کمک کند. ابتدا باید بدانید که این پروژه شامل چند بخش است: طراحی رابط کاربری، نوشتن کد HTML برای ساختار، CSS برای استایل‌دهی، و سپس جاوا اسکریپت برای منطق و عملکرد ماشین حساب.
طراحی رابط کاربری
در مرحله اول، باید یک صفحه ساده و کاربر پسند طراحی کنید. این صفحه شامل یک نمایشگر برای نشان دادن ورودی‌ها و نتایج، و چندین دکمه برای عملیات‌های ریاضی است. معمولا، دکمه‌ها شامل اعداد 0 تا 9، عملیات جمع، تفریق، ضرب، تقسیم، و دکمه مساوی هستند.
ساختار HTML
در فایل HTML، باید بخش‌هایی برای نمایشگر و دکمه‌ها تعریف کنید. مثلا:
```html
<div class="calculator">
<input type="text" id="display" disabled />
<div class="buttons">
<!-- اعداد -->
<button onclick="appendNumber(7)">7</button>
<button onclick="appendNumber(8)">8</button>
<!-- عملیات -->
<button onclick="setOperation('+')">+</button>
<!-- و غیره -->
</div>
</div>
```
استایل CSS
در بخش CSS، استایل‌هایی برای ظاهر جذاب و کاربر پسند قرار بدهید. مثلا:
```css
.calculator {
width: 200px;
margin: 50px auto;
padding: 10px;
border: 2px solid #333;
border-radius: 8px;
}
#display {
width: 100%;
height: 40px;
font-size: 20px;
text-align: right;
}
button {
width: 45px;
height: 45px;
margin: 5px;
font-size: 18px;
}
```
نوشتن منطق جاوا اسکریپت
در قسمت JavaScript، باید بتوانید ورودی‌ها را جمع‌آوری کنید، عملیات‌های ریاضی را انجام دهید، و نتیجه را نشان دهید. یک نمونه از کد پایه:
```javascript
let currentInput = '';
let previousInput = '';
let operation = null;
function appendNumber(number) {
currentInput += number;
document.getElementById('display').value = currentInput;
}
function setOperation(op) {
if (currentInput === '') return;
if (previousInput !== '') {
calculate();
}
operation = op;
previousInput = currentInput;
currentInput = '';
}
function calculate() {
let prev = parseFloat(previousInput);
let current = parseFloat(currentInput);
if (isNaN(prev) || isNaN(current)) return;
let result;
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;
default:
return;
}
document.getElementById('display').value = result;
currentInput = result.toString();
previousInput = '';
operation = null;
}
function clearDisplay() {
currentInput = '';
previousInput = '';
operation = null;
document.getElementById('display').value = '';
}
```
نکات مهم
- باید دکمه‌های مساوی، پاک کردن، و سایر عملیات‌ها را هم اضافه کنید.
- حتماً خطاهای ممکن مثل تقسیم بر صفر را مدیریت کنید.
- برای بهبود، می‌توانید از رویدادهای `addEventListener` استفاده کنید، نه فقط `onclick`.
جمع‌بندی
در نهایت، ساخت ماشین حساب در جاوا اسکریپت، نیازمند طراحی خوب رابط کاربری، برنامه‌نویسی منطقی و مدیریت خطا است. با تمرین و تکرار، می‌توانید ماشین حساب‌های پیچیده‌تر و حرفه‌ای‌تر بسازید. این پروژه، نه تنها مهارت‌های شما را در جاوا اسکریپت تقویت می‌کند، بلکه درک عمیق‌تری نسبت به توسعه وب به شما می‌دهد. پس، شروع کنید و خلاقیت‌تان را در طراحی و توسعه به کار گیرید!
