کد ماشین حساب در جاوا اسکریپت
در اینجا به بررسی کد ماشین حسابی می‌پردازیم که با استفاده از جاوا اسکریپت ساخته شده است. این کد به کاربر امکان می‌دهد تا عملیات ریاضی ساده‌ای را انجام دهد. ما ابتدا با ساختار 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="styles.css">
</head>
<body>
<div id="calculator">
<input type="text" id="display" disabled>
<div id="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="appendToDisplay('4')">4</button>
<button onclick="appendToDisplay('5')">5</button>
<button onclick="appendToDisplay('6')">6</button>
<button onclick="appendToDisplay('-')">-</button>
<button onclick="appendToDisplay('7')">7</button>
<button onclick="appendToDisplay('8')">8</button>
<button onclick="appendToDisplay('9')">9</button>
<button onclick="appendToDisplay('*')">*</button>
<button onclick="appendToDisplay('0')">0</button>
<button onclick="calculate()">=</button>
<button onclick="appendToDisplay('/')">/</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
```
کد جاوا اسکریپت
حالا که ساختار HTML آماده شد، بیایید به کد جاوا اسکریپت برویم. این کد به ما امکان می‌دهد که دکمه‌ها را فشار دهیم و عملیات را انجام دهیم.
```javascript
function appendToDisplay(value) {
document.getElementById('display').value += value;
}
function clearDisplay() {
document.getElementById('display').value = '';
}
function calculate() {
const display = document.getElementById('display');
try {
display.value = eval(display.value);
} catch (e) {
display.value = 'خطا';
}
}
```
توضیحات کد
در کد بالا، چند عمل اصلی انجام می‌شود:
- تابع appendToDisplay: این تابع مقدار ورودی را به صفحه نمایش اضافه می‌کند.
- تابع clearDisplay: این تابع صفحه نمایش را پاک می‌کند.
- تابع calculate: این تابع عملیات ریاضی را اجرا می‌کند. با استفاده از تابع eval، عبارت ریاضی محاسبه می‌شود. اما باید مراقب خطاها باشیم. در صورت بروز خطا، پیام "خطا" نمایش داده می‌شود.
نتیجه‌گیری
با استفاده از این کد، شما می‌توانید یک ماشین حساب ساده ایجاد کنید. این ماشین حساب از قابلیت‌های ابتدایی برخوردار است و می‌تواند به شما کمک کند تا با مفهوم برنامه‌نویسی جاوا اسکریپت آشنا شوید. با گسترش کد، می‌توانید امکانات بیشتری اضافه کنید، مانند عملیات ریاضی پیشرفته‌تر یا طراحی بهتری برای رابط کاربری.
کد ماشین حساب در جاوااسکریپت: راهنمای جامع و کامل
در این مقاله، قصد داریم به طور کامل و جامع درباره ساختن یک ماشین حساب ساده در جاوااسکریپت صحبت کنیم. این پروژه، یکی از بهترین راه‌ها برای درک مفاهیم پایه‌ای برنامه‌نویسی و کار با رویدادها در جاوااسکریپت است. پس، بیایید با هم شروع کنیم و به جزئیات بپردازیم.
۱. ساختار HTML ماشین حساب
ابتدا باید یک ساختار HTML برای نمایش دکمه‌ها و صفحه نمایشگر داشته باشیم. معمولاً، یک div برای نمایش مقدار جاری و چندین دکمه برای عملیات‌های مختلف، ساخته می‌شود. مثلا:
```html
<div class="calculator">
<input type="text" id="display" disabled />
<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="calculate()">=</button>
<!-- بقیه دکمه‌ها -->
</div>
```
در اینجا، هر دکمه، تابع جاوااسکریپتی خاصی را فراخوانی می‌کند، که در ادامه توضیح داده می‌شود.
۲. ساختار CSS (اختیاری)
برای ظاهر بهتر، می‌توانید CSS اضافه کنید، اما در اصل، هدف ما کار با جاوااسکریپت است.
۳. نوشتن کد جاوااسکریپت
اکنون، باید کدهای لازم را بنویسیم تا عملیات‌های ماشین حساب انجام شوند. مهم‌ترین بخش‌ها شامل موارد زیر است:
- نگه داشتن مقدار جاری (current number)
- نگه داشتن عملیات جاری (+، -، ×، ÷)
- انجام عملیات در زمان درخواست (مثلاً، هنگام فشردن برابر)
در ادامه، یک نمونه کامل و ساده آورده‌ام:
```javascript
let currentInput = '';
let previousInput = '';
let currentOperation = null;
function appendNumber(number) {
currentInput += number;
updateDisplay();
}
function setOperation(operation) {
if (currentInput === '') return;
if (previousInput !== '') {
calculate();
}
currentOperation = operation;
previousInput = currentInput;
currentInput = '';
}
function calculate() {
let result;
const prev = parseFloat(previousInput);
const current = parseFloat(currentInput);
if (isNaN(prev) || isNaN(current)) return;
switch (currentOperation) {
case '+':
result = prev + current;
break;
case '-':
result = prev - current;
break;
case '*':
result = prev * current;
break;
case '/':
if (current === 0) {
alert("نمی‌شود بر صفر تقسیم کرد!");
clearDisplay();
return;
}
result = prev / current;
break;
default:
return;
}
currentInput = result.toString();
currentOperation = null;
previousInput = '';
updateDisplay();
}
function clearDisplay() {
currentInput = '';
previousInput = '';
currentOperation = null;
updateDisplay();
}
function updateDisplay() {
document.getElementById('display').value = currentInput;
}
```
۴. توضیحات کد
- تابع `appendNumber()` برای افزودن ارقام به ورودی جاری است.
- `setOperation()` عملیات انتخاب شده را ذخیره می‌کند و اگر عملیات قبلی وجود داشت، ابتدا نتیجه محاسبه می‌شود.
- `calculate()` عملیات محاسبه را انجام می‌دهد، و نتیجه را در ورودی جاری قرار می‌دهد.
- `clearDisplay()` تمامی مقادیر را ریست می‌کند.
- `updateDisplay()` صفحه نمایشگر را بروزرسانی می‌کند.
۵. نکات مهم و پیشنهادات
- می‌توانید عملیات‌های بیشتری اضافه کنید، مثلا `%` یا توان.
- برای بهتر کردن رابط کاربری، از CSS و طراحی مناسب بهره ببرید.
- برای جلوگیری از خطا، می‌توانید ورودی‌ها را بررسی کنید.
- بهتر است از رویدادهای `addEventListener` به جای `onclick` استفاده کنید، اما در این مثال، برای سادگی، از `onclick` استفاده شد.
جمع‌بندی
در این آموزش، قدم به قدم، یک ماشین حساب ساده در جاوااسکریپت ساختیم. این پروژه، نمونه خوبی برای درک مفاهیم پایه‌ای برنامه‌نویسی، کار با رویدادها و عملیات‌های ریاضی است. با تمرین بیشتر و افزودن ویژگی‌های جدید، می‌توانید مهارت‌های خود را در توسعه وب، بهبود بخشید. حتماً، سعی کنید این کد را توسعه دهید و امکانات بیشتری بیفزایید!
