مقدمه‌ای بر ماشین حساب جاوا اسکریپت
ماشین حساب‌ها ابزاری کاربردی هستند که به‌صورت آنلاین یا آفلاین، محاسبات ریاضی را انجام می‌دهند. در اینجا، ما به بررسی سورس کد ماشین حسابی ساده با استفاده از جاوا اسکریپت خواهیم پرداخت. این ماشین حساب می‌تواند عملیات اصلی مانند جمع، تفریق، ضرب و تقسیم را انجام دهد.
ساختار 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>
```
کد جاوا اسکریپت ماشین حساب
حالا به کد جاوا اسکریپت می‌پردازیم. این کد مسئول محاسبات و کنترل رفتار دکمه‌ها است.
```javascript
function appendToResult(value) {
document.getElementById("result").value += value;
}
function clearResult() {
document.getElementById("result").value = '';
}
function calculateResult() {
const result = eval(document.getElementById("result").value);
document.getElementById("result").value = result;
}
```
توضیحات کد
در این کد، ما از سه تابع اصلی استفاده می‌کنیم:
- appendToResult(value): این تابع برای اضافه کردن عدد یا عملگر به ورودی ماشین حساب استفاده می‌شود.
- clearResult(): با این تابع، می‌توانیم ورودی ماشین حساب را پاک کنیم.
- calculateResult(): این تابع از تابع `eval` برای محاسبه نتیجه استفاده می‌کند. این تابع ورودی را تجزیه و تحلیل کرده و نتیجه را نمایش می‌دهد.
نتیجه‌گیری
ساخت یک ماشین حساب ساده با جاوا اسکریپت، نه تنها یک تمرین عالی برای یادگیری مبانی برنامه‌نویسی است، بلکه به شما امکان می‌دهد تا نحوه تعامل با DOM و انجام محاسبات را یاد بگیرید. با گسترش این پروژه، می‌توانید ویژگی‌های بیشتری مانند تاریخچه محاسبات یا عملیات پیشرفته‌تر را اضافه کنید.
سورس کد ماشین حساب جاوا اسکریپت: راهنمای جامع و کامل
در این متن، قصد دارم به طور کامل و جامع درباره سورس کد ماشین حساب نوشته شده با جاوا اسکریپت صحبت کنم. این موضوع، یکی از پروژه‌های پایه و محبوب در برنامه‌نویسی وب است که درک عمیق آن، پایه‌ای مهم برای توسعه‌دهندگان تازه‌کار و حرفه‌ای محسوب می‌شود. پس، بیایید باهم وارد جزئیات شویم و ببینیم چه چیزهایی در این سورس کد وجود دارد و چگونه کار می‌کند.
ساختار کلی ماشین حساب جاوا اسکریپت
در ابتدا، باید بدانید که ماشین حساب‌های ساده معمولاً شامل چند قسمت هستند: طراحی رابط کاربری (UI)، و منطق برنامه (Logic). در این پروژه، رابط کاربری با HTML و CSS ساخته شده، و منطق عملکرد آن، با جاوا اسکریپت پیاده‌سازی می‌شود. هدف این است که عملیات‌های اصلی مانند جمع، تفریق، ضرب و تقسیم، به صورت قابل فهم و کاربرپسند اجرا شوند.
عناصر HTML و ساختار آن
در بخش HTML، معمولاً دکمه‌هایی برای اعداد 0 تا 9، عملیات ریاضی (+، -، *، /)، و دکمه‌هایی برای مساوی (=) و پاک کردن (C) قرار داده می‌شود. این عناصر، به صورت دکمه‌های جداگانه طراحی می‌شوند و هر کدام، خاصیت‌های CSS برای ظاهر و استایل دارند. در کنار این، یک بخش برای نمایش نتیجه یا ورودی کاربر قرار دارد که معمولا با تگ `<input>` یا `<div>` ساخته می‌شود.
منطق جاوا اسکریپت
در بخش جاوا اسکریپت، باید رویدادهای کلیک روی این دکمه‌ها مدیریت شوند. مثلا، وقتی کاربر روی عدد 5 کلیک می‌کند، این عدد باید درون نمایشگر وارد شود یا بروزرسانی گردد. همینطور، عملیات‌های ریاضی باید به گونه‌ای کنترل شوند که، پس از وارد کردن دو عدد و انتخاب عملیات، نتیجه به درستی نمایش داده شود.
کدهای اصلی شامل چند قسمت است:
- تعریف متغیرهای جهانی: برای نگهداری ورودی‌های کاربر و عملیات جاری.
- توابع رویداد: برای مدیریت کلیک‌های دکمه‌ها، مانند افزودن عدد، انتخاب عملیات، محاسبه نتیجه.
- تابع محاسبه: این بخش، عملیات‌های ریاضی را انجام می‌دهد و نتیجه را برمی‌گرداند.
نمونه کد ساده ماشین حساب
در ادامه، نمونه‌ای پایه و ساده از سورس کد ماشین حساب با جاوا اسکریپت آورده‌ام:
```html
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8" />
<title>ماشین حساب ساده</title>
<style>
/* استایل‌های پایه */
body { font-family: Arial; }
#calculator { width: 200px; margin: auto; }
input { width: 100%; height: 40px; font-size: 20px; text-align: right; }
button { width: 50px; height: 50px; font-size: 20px; margin: 5px; }
</style>
</head>
<body>
<div id="calculator">
<input type="text" id="display" disabled />
<br />
<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>
<br />
<button onclick="appendNumber('4')">4</button>
<button onclick="appendNumber('5')">5</button>
<button onclick="appendNumber('6')">6</button>
<button onclick="setOperation('-')">-</button>
<br />
<button onclick="appendNumber('1')">1</button>
<button onclick="appendNumber('2')">2</button>
<button onclick="appendNumber('3')">3</button>
<button onclick="setOperation('*')">*</button>
<br />
<button onclick="appendNumber('0')">0</button>
<button onclick="calculate()">=</button>
<button onclick="setOperation('/')">/</button>
</div>
<script>
let currentInput = '';
let previousInput = '';
let operation = null;
function appendNumber(number) {
currentInput += number;
document.getElementById('display').value = currentInput;
}
function clearDisplay() {
currentInput = '';
previousInput = '';
operation = null;
document.getElementById('display').value = '';
}
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 '/':
result = current === 0 ? 'خطا' : prev / current;
break;
default:
return;
}
document.getElementById('display').value = result;
currentInput = result.toString();
previousInput = '';
operation = null;
}
</script>
</body>
</html>
```
نکات مهم در طراحی ماشین حساب
در این نوع پروژه، چند نکته کلیدی وجود دارد که نباید نادیده گرفت:
- مدیریت خطاها: مثلا، تقسیم بر صفر، باید به شکل مناسبی کنترل شود.
- عملیات زنجیره‌ای: کاربر بتواند عملیات‌های متوالی وارد کند، بدون نیاز به فشار دادن مساوی هر بار.
- ظاهر کاربر پسند: طراحی زیبا و قابل فهم، از اهمیت بالایی برخوردار است.
- کد تمیز و قابل توسعه: کد باید خوانا و قابل نگهداری باشد، در صورت نیاز به افزودن ویژگی‌های جدید.
نتیجه‌گیری
در کل، سورس کد ماشین حساب جاوا اسکریپت، نمونه‌ای عالی برای شروع در برنامه‌نویسی وب است. این پروژه، نه تنها به کاربر کمک می‌کند تا عملیات ریاضی را سریع و آسان انجام دهد، بلکه به توسعه‌دهندگان فرصت می‌دهد تا مهارت‌های برنامه‌نویسی خود را در زمینه DOM، رویدادها و منطق برنامه‌نویسی تقویت کنند. بنابراین، اگر قصد دارید این پروژه را توسعه دهید، حتماً بر نکات امنیتی، کارایی و طراحی تمرکز کنید تا نتیجه نهایی، حرفه‌ای و کاربردی باشد.
