ساخت ماشین حساب با جاوا اسکریپت
ساخت یک ماشین حساب ساده با استفاده از جاوا اسکریپت می‌تواند پروژه‌ای جالب و آموزشی باشد. در این راهنمای جامع، به بررسی مراحل مختلف ساخت یک ماشین حساب خواهیم پرداخت.
مراحل ساخت ماشین حساب
۱. طراحی رابط کاربری
اولین قدم، طراحی رابط کاربری است. برای این کار، می‌توانید از HTML و CSS استفاده کنید. به یک فرم ساده نیاز دارید که شامل دکمه‌ها برای اعداد و عملگرها باشد. مثلاً:
```html
<div id="calculator">
<input type="text" id="display" disabled />
<button onclick="clearDisplay()">C</button>
<button onclick="appendToDisplay('1')">1</button>
<button onclick="appendToDisplay('2')">2</button>
<button onclick="appendToDisplay('+')">+</button>
<button onclick="calculateResult()">=</button>
</div>
```
۲. اضافه کردن استایل با CSS
استفاده از CSS برای زیباتر کردن ماشین حساب الزامی است. با استفاده از ویژگی‌های CSS، می‌توانید دکمه‌ها و نمایشگر را به شکل دلخواه طراحی کنید.
```css
#calculator {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
button {
padding: 20px;
font-size: 20px;
}
```
۳. نوشتن کد جاوا اسکریپت
حالا نوبت به نوشتن کد جاوا اسکریپت می‌رسد. این قسمت شامل توابعی است که عملکرد دکمه‌ها را مدیریت می‌کند.
```javascript
function appendToDisplay(value) {
document.getElementById('display').value += value;
}
function clearDisplay() {
document.getElementById('display').value = '';
}
function calculateResult() {
const display = document.getElementById('display');
try {
display.value = eval(display.value);
} catch (error) {
display.value = 'Error';
}
}
```
نتیجه‌گیری
ساخت ماشین حساب با جاوا اسکریپت
، تجربه‌ای آموزنده و مفید است. با طراحی رابط کاربری، اضافه کردن استایل و نوشتن کد جاوا اسکریپت، می‌توانید یک ماشین حساب کاربردی بسازید. این پروژه می‌تواند به شما کمک کند تا مهارت‌های برنامه‌نویسی خود را تقویت کنید و با مفاهیم اصلی جاوا اسکریپت آشنا شوید.ساخت ماشین حساب با جاوا اسکریپت یکی از پروژه‌های محبوب و آموزنده است که به توسعه‌دهندگان کمک می‌کند تا مفاهیم پایه‌ای برنامه‌نویسی وب و تعامل با کاربر را بهتر درک کنند. در ادامه، یک راهنمای کامل و جامع برای ساخت یک ماشین حساب ساده با جاوا اسکریپت، HTML و CSS ارائه می‌دهم که شامل تمامی مراحل، کدها و نکات مهم است.
طراحی رابط کاربری (UI)
ابتدا باید یک رابط کاربری کاربرپسند و ساده طراحی کنیم. این بخش شامل نمایشگر (نمایش عملیات و نتایج) و دکمه‌های عملیات (جمع، تفریق، ضرب، تقسیم) است.
ساختار HTML
در فایل HTML، می‌توانیم ساختار زیر را داشته باشیم:
```html
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8" />
<title>ماشین حساب با جاوا اسکریپت</title>
<link rel="stylesheet" href="style.css" />
</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 src="script.js"></script>
</body>
</html>
```
در این ساختار، از یک input برای نمایش عملیات و نتایج استفاده شده است و دکمه‌ها برای وارد کردن اعداد، عملیات و انجام محاسبات.
استایل‌دهی با CSS
برای جذاب‌تر کردن ظاهر، می‌توانیم استایل‌های پایه بنویسیم:
```css
/* style.css */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.calculator {
background: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0,0,0,
- 2);
#display {
width: 100%;
height: 50px;
font-size: 24px;
text-align: right;
margin-bottom: 10px;
padding: 5px 10px;
border-radius: 5px;
border: 1px solid #ccc;
}
.buttons button {
width: 50px;
height: 50px;
margin: 5px;
font-size: 18px;
border: none;
border-radius: 5px;
cursor: pointer;
background-color: #e0e0e0;
transition: background
- 3s;
.buttons button:hover {
background-color: #ccc;
}
```
این استایل‌ها ظاهر ساده و مرتب به ماشین حساب می‌دهند و احساس کاربری راحت‌تری دارد.
منطق برنامه‌نویسی با جاوا اسکریپت
حالا نوبت به نوشتن منطق ماشین حساب می‌رسد. در فایل `script.js`، باید توابع مورد نیاز برای عملیات، وارد کردن اعداد، پاک‌سازی و محاسبه را بنویسیم.
تعریف متغیرها و توابع پایه
```javascript
// script.js
let currentInput = '';
let previousInput = '';
let operation = null;
const display = document.getElementById('display');
function updateDisplay() {
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();
previousInput = '';
operation = null;
updateDisplay();
}
```
این کد، کلیت منطق ماشین حساب را پوشش می‌دهد. کاربر می‌تواند اعداد را وارد کند، عملیات را انتخاب کند، و نتیجه را ببیند. همچنین، تابع `clearDisplay()` برای پاک‌سازی و شروع مجدد است.
نکات مهم و نکته‌های پیشرفته
- مدیریت خطاها: همانطور که دیدید، هنگام تقسیم بر صفر، پیامی نمایش داده می‌شود.
- پشتیبانی از عملیات زنجیره‌ای: کاربر می‌تواند عملیات‌های متوالی وارد کند؛ مثلا `5 + 3 * 2`.
- اضافه کردن دکمه‌های بیشتر: می‌توانید دکمه‌های درصد، توان، ریشه و دیگر عملیات‌ها را اضافه کنید.
- بهبود ظاهر و واکنش‌گرایی: استفاده از فریم‌ورک‌های CSS یا طراحی واکنش‌گرا.
- اضافه کردن کلیدهای صفحه‌کلید: برای وارد کردن اعداد و عملیات با صفحه‌کلید.
نتیجه‌گیری
در این راهنما، قدم به قدم، ساخت یک ماشین حساب ساده با جاوا اسکریپت، HTML و CSS را بررسی کردیم. البته، این نمونه پایه است و می‌توان آن را توسعه داد، امکانات بیشتری افزود و ظاهر آن را جذاب‌تر کرد. با تمرین و توسعه، می‌توانید پروژه‌های پیچیده‌تر و کاربردی‌تر بسازید، و مهارت‌های برنامه‌نویسی وب خود را تقویت کنید.
اگر سوالی دارید یا نیاز به نمونه‌های پیشرفته‌تر دارید، خوشحال می‌شوم کمک کنم!
