معرفی کد ماشین حساب با جاوا اسکریپت
ماشین حساب‌ها از جمله ابزارهای پرکاربرد در دنیای امروز هستند. ایجاد یک ماشین حساب ساده با استفاده از جاوا اسکریپت یک پروژه جالب و آموزشی است. در ادامه، به توضیح کامل و جامع نحوه ساخت یک ماشین حساب با جاوا اسکریپت می‌پردازیم.
ساختار 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="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="calculateResult()">=</button>
<button onclick="appendToDisplay('/')">/</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
```
کد CSS
بعد از ایجاد ساختار HTML، حالا به زیبایی ظاهر ماشین حساب می‌پردازیم. استفاده از CSS می‌تواند تجربه کاربری بهتری را فراهم کند.
```css
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
}
.calculator {
border: 1px solid #ccc;
border-radius: 10px;
padding: 20px;
background-color: white;
}
#display {
width: 100%;
height: 40px;
font-size: 24px;
text-align: right;
margin-bottom: 10px;
}
```
کد جاوا اسکریپت
در نهایت، ما به کد جاوا اسکریپت می‌رسیم. این کد عملیات محاسباتی را انجام می‌دهد و به دکمه‌ها پاسخ می‌دهد.
```javascript
function appendToDisplay(value) {
document.getElementById("display").value += value;
}
function clearDisplay() {
document.getElementById("display").value = '';
}
function calculateResult() {
let display = document.getElementById("display").value;
try {
let result = eval(display);
document.getElementById("display").value = result;
} catch (error) {
alert("خطا در محاسبه");
}
}
```
نتیجه‌گیری
در اینجا، یک ماشین حساب ساده با استفاده از HTML، CSS و جاوا اسکریپت ایجاد کردیم. به راحتی می‌توانید این کدها را گسترش دهید و ویژگی‌های بیشتری به آن اضافه کنید. از جمله افزودن محاسبات علمی، ذخیره تاریخچه محاسبات و بسیاری دیگر. این پروژه نه تنها سرگرم‌کننده است، بلکه به یادگیری اصول برنامه‌نویسی نیز کمک می‌کند.
کد ماشین حساب با جاوا اسکریپت: راهنمای کامل و جامع
در دنیای برنامه‌نویسی وب، ساختن یک ماشین حساب ساده و کارآمد یکی از پروژه‌های پرطرفدار است که هم تمرین خوبی برای مبتدی‌ها و هم ابزار مفید برای کاربران است. این پروژه نه تنها به شما کمک می‌کند با مفاهیم پایه‌ای جاوا اسکریپت آشنا شوید، بلکه مهارت‌های HTML و CSS را هم تقویت می‌کند.
ساختار پایه HTML
در ابتدا، باید یک ساختار HTML برای نمایش دکمه‌ها و نمایشگر ماشین حساب ایجاد کنید. معمولا، یک div اصلی برای صفحه نمایش، و چندین دکمه برای اعداد، عملیات ریاضی، و عملیات‌های خاص مانند پاک کردن یا مساوی قرار می‌دهید. برای مثال:
```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>
<!-- ادامه دکمه‌ها -->
<button onclick="calculate()">=</button>
</div>
</div>
```
در اینجا، هر دکمه یک تابع جاوااسکریپت را فراخوانی می‌کند که وظیفه خاصی را انجام می‌دهد. این ساختار پایه است.
نوشتن کد جاوا اسکریپت
حال، باید منطق ماشین حساب را بنویسید. این بخش شامل نگهداری وضعیت جاری، عملیات‌های ریاضی، و بروزرسانی صفحه نمایش است.
مثلاً، متغیرهایی برای نگهداری عدد اول، عدد دوم، و نوع عملیات تعریف می‌کنید:
```javascript
let currentInput = '';
let previousInput = '';
let operation = null;
function appendNumber(number) {
currentInput += number;
updateDisplay();
}
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;
switch (operation) {
case '+':
currentInput = (prev + current).toString();
break;
case '-':
currentInput = (prev - current).toString();
break;
case '*':
currentInput = (prev * current).toString();
break;
case '/':
if (current === 0) {
alert("Division by zero!");
clearDisplay();
return;
}
currentInput = (prev / current).toString();
break;
default:
break;
}
previousInput = '';
operation = null;
updateDisplay();
}
function clearDisplay() {
currentInput = '';
previousInput = '';
operation = null;
updateDisplay();
}
function updateDisplay() {
document.getElementById('display').value = currentInput;
}
```
در این کد، تابع `appendNumber()` هر عدد ورودی را به رشته اضافه می‌کند، `setOperation()` عملیات مورد نظر را تنظیم می‌کند، و `calculate()` نتیجه عملیات را محاسبه و نمایش می‌دهد.
استفاده از CSS برای زیباسازی
برای جذاب کردن ظاهر ماشین حساب، می‌توانید استایل‌های CSS بنویسید. مثلا:
```css
.calculator {
width: 200px;
margin: 50px auto;
padding: 10px;
border: 2px solid #333;
border-radius: 5px;
}
#display {
width: 100%;
height: 40px;
font-size:
- 5em;
margin-bottom: 10px;
}
.buttons button {
width: 45px;
height: 45px;
margin: 5px;
font-size:
- 2em;
```
این استایل‌ها بخش ظاهری ماشین حساب را منظم و زیبا می‌کنند.
نکات مهم و نکات پیشرفته‌تر
- می‌توانید عملیات‌های بیشتری اضافه کنید، مثل توان، ریشه، یا درصد.
- برای جلوگیری از خطاهای ورودی، باید اعتبارسنجی انجام دهید.
- می‌توانید از رویدادهای دیگر مثل کلیدهای صفحه‌کلید نیز بهره ببرید.
- ساختن نسخه‌های پیشرفته‌تر، شامل تاریخچه، حافظه، و قابلیت‌های دیگر، نیازمند توسعه کد است.
در نهایت، این پروژه‌ی ساده، در واقع پایه‌ای است برای ساختن ماشین حساب‌های پیچیده‌تر و بهتر. تمرین و توسعه بیشتر، مهارت‌های برنامه‌نویسی وب شما را به سطح حرفه‌ای‌تر می‌برد و درک عمیق‌تری از جاوا اسکریپت و طراحی وب فراهم می‌کند.
