نوشتن ماشین حساب در جاوا اسکریپت
نوشتن یک ماشین حساب ساده با استفاده از جاوا اسکریپت فرآیندی جذاب و آموزنده است. این پروژه می‌تواند به شما کمک کند تا با مفاهیم پایه‌ای برنامه‌نویسی، مانند توابع، متغیرها، و مدیریت رویدادها آشنا شوید.
برای شروع، بیایید به ساختار کلی ماشین حساب بپردازیم. این ماشین حساب می‌تواند چهار عمل اصلی را انجام دهد: جمع، تفریق، ضرب و تقسیم.
ساختار 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="setOperation('+')">+</button>
<button onclick="calculateResult()">=</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
```
نوشتن کد جاوا اسکریپت
حالا به کدنویسی در جاوا اسکریپت می‌پردازیم. در اینجا، ما توابعی برای مدیریت ورودی‌ها و انجام محاسبات ایجاد خواهیم کرد.
```javascript
let currentInput = "";
let operation = "";
function appendToResult(value) {
currentInput += value;
document.getElementById("result").value = currentInput;
}
function clearResult() {
currentInput = "";
operation = "";
document.getElementById("result").value = "";
}
function setOperation(op) {
if (currentInput === "") return;
operation = op;
currentInput += op;
document.getElementById("result").value = currentInput;
}
function calculateResult() {
if (currentInput === "") return;
let result = eval(currentInput);
document.getElementById("result").value = result;
currentInput = result.toString();
}
```
توضیحات در مورد کد
- appendToResult: این تابع، ورودی‌ها را به رشته‌ی فعلی اضافه می‌کند و نمایش می‌دهد.
- clearResult: این تابع می‌تواند ورودی را پاک کند و همچنین عمل را ریست کند.
- setOperation: این تابع، عمل مورد نظر را تعیین می‌کند و آن را به ورودی جاری اضافه می‌کند.
- calculateResult: این تابع با استفاده از تابع `eval`، نتیجه‌ی محاسبات را محاسبه کرده و نمایش می‌دهد.
نتیجه‌گیری
این پروژه‌ی ساده، پایه‌ای برای ساخت ماشین حسابی پیشرفته‌تر است. می‌توانید با افزودن قابلیت‌های بیشتری مانند محاسبه درصد، توان و یا طراحی رابط کاربری زیباتر، آن را ارتقا دهید. با تمرین و یادگیری، به راحتی می‌توانید مهارت‌های برنامه‌نویسی خود را تقویت کنید.
نوشتن ماشین حساب در جاوا اسکریپت: راهنمای کامل و جامع
در این مقاله، قصد داریم به صورت گام به گام و کامل، فرآیند طراحی و پیاده‌سازی یک ماشین حساب ساده در زبان برنامه‌نویسی جاوا اسکریپت را بررسی کنیم. این پروژه، یکی از پروژه‌های پایه‌ای و مهم است که نه تنها به درک بهتر مفاهیم پایه‌ای جاوا اسکریپت کمک می‌کند، بلکه مهارت‌های طراحی رابط کاربری و تعامل با کاربر را نیز تقویت می‌نماید.
بخش اول: طراحی رابط کاربری (HTML & CSS)
قبل از هر چیز، به ساختار صفحه‌نمایش نیاز داریم. برای این کار، از تگ‌های HTML استفاده می‌کنیم. یک بخش اصلی برای نمایش نتایج و چندین دکمه برای عملیات‌های مختلف می‌سازیم.
در نمونه زیر، یک ساختار ساده قرار داده شده است:
```html
<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>
<!-- ادامه دکمه‌ها به همین صورت -->
</div>
</div>
```
در CSS، استایل‌هایی برای زیباتر کردن ظاهر و قرارگیری مناسب عناصر ایجاد می‌کنیم.
بخش دوم: نوشتن کد جاوا اسکریپت
حالا، قسمت مهم‌تر، کدهای جاوا اسکریپت است که عملیات محاسبات را کنترل می‌کند.
تعریف متغیرها
ابتدا، باید متغیرهایی برای نگهداری حالت ماشین حساب تعریف کنیم:
```javascript
let currentInput = '';
let previousInput = '';
let operation = null;
```
این متغیرها، اعداد وارد شده و عملیات جاری را ثبت می‌کنند.
تابع افزودن عدد
وقتی کاربر روی اعداد کلیک می‌کند، این اعداد به ورودی فعلی اضافه می‌شوند:
```javascript
function appendNumber(number) {
currentInput += number;
updateDisplay();
}
```
تابع تعیین عملیات
وقتی کاربر یک عملیات مانند جمع، تفریق، ضرب یا تقسیم را انتخاب می‌کند، باید وضعیت را بروزرسانی کنیم:
```javascript
function setOperation(op) {
if (currentInput === '') return;
if (previousInput !== '') {
calculate();
}
operation = op;
previousInput = currentInput;
currentInput = '';
}
```
تابع محاسبه
در این بخش، عملیات ریاضی انجام می‌شود:
```javascript
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 ? 'خطای تقسیم بر صفر' : prev / current;
break;
default:
return;
}
currentInput = result.toString();
operation = null;
previousInput = '';
updateDisplay();
}
```
تابع بروزرسانی نمایشگر
این تابع، محتوای ورودی فعلی را در قسمت نمایشگر نشان می‌دهد:
```javascript
function updateDisplay() {
document.getElementById('display').value = currentInput;
}
```
تابع پاک کردن (Clear)
برای ریست کردن ماشین حساب:
```javascript
function clearDisplay() {
currentInput = '';
previousInput = '';
operation = null;
updateDisplay();
}
```
بخش سوم: افزودن رویدادهای لازم
در این قسمت، باید اطمینان حاصل کنیم که هر دکمه، تابع مناسب را فرا می‌خواند. این کار، معمولا در HTML انجام می‌شود، یا می‌توان در جاوا اسکریپت، رویدادهای DOM را اضافه کرد.
مثال:
```javascript
document.querySelectorAll('.buttons button').forEach(btn => {
btn.addEventListener('click', () => {
const btnText = btn.innerText;
if (!isNaN(btnText)) {
appendNumber(btnText);
} else if (btnText === 'C') {
clearDisplay();
} else if (['+', '-', '*', '/'].includes(btnText)) {
setOperation(btnText);
} else if (btnText === '=') {
calculate();
}
});
});
```
نتیجه نهایی
با ترکیب این تمام اجزا، شما یک ماشین حساب ابتدایی دارید که قادر است عملیات پایه را انجام دهد. البته، برای ارتقاء آن، می‌توانید ویژگی‌های بیشتری اضافه کنید، مانند پشتیبانی از عملیات‌های پیشرفته، وارد کردن اعداد اعشاری، یا طراحی رابط کاربری جذاب‌تر.
در نهایت، این پروژه نشان می‌دهد که چگونه HTML، CSS و جاوا اسکریپت در کنار هم، قادرند برنامه‌های تعاملی و کاربردی بسازند، چیزی که در دنیای واقعی، توسعه‌دهندگان وب به شدت به آن نیاز دارند.
