مقدمه
ساخت یک ماشین حساب با استفاده از جاوا اسکریپت می‌تواند یک پروژه جالب و آموزنده باشد. این پروژه نه‌تنها به شما کمک می‌کند تا مهارت‌های برنامه‌نویسی خود را تقویت کنید، بلکه اصول پایه‌ای محاسبات را نیز یاد خواهید گرفت. در اینجا، به بررسی ساخت یک ماشین حساب ساده با امکانات پایه‌ای می‌پردازیم.
طراحی رابط کاربری
ابتدا، باید رابط کاربری ماشین حساب را طراحی کنید. با استفاده از HTML و CSS، می‌توانید دکمه‌ها و نمایشگر را بسازید. به عنوان مثال:
```html
<div id="calculator">
<input type="text" id="display" disabled>
<div id="buttons">
<button onclick="appendToDisplay('1')">1</button>
<button onclick="appendToDisplay('2')">2</button>
<button onclick="appendToDisplay('3')">3</button>
<button onclick="setOperation('+')">+</button>
<button onclick="calculate()">=</button>
<button onclick="clearDisplay()">C</button>
</div>
</div>
```
در این کد، یک ورودی برای نمایش نتیجه و دکمه‌هایی برای اعداد و عملیات مختلف ایجاد کرده‌ایم.
نوشتن کد جاوا اسکریپت
حالا به بخش جاوا اسکریپت می‌رسیم. این بخش شامل توابعی است که عملکرد ماشین حساب را پیاده‌سازی می‌کند.
```javascript
let currentInput = '';
let operation = '';
let previousInput = '';
function appendToDisplay(value) {
currentInput += value;
document.getElementById('display').value = currentInput;
}
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;
// سایر عملیات مثل تفریق، ضرب و تقسیم را اضافه کنید.
}
currentInput = result;
operation = '';
previousInput = '';
document.getElementById('display').value = currentInput;
}
function clearDisplay() {
currentInput = '';
previousInput = '';
operation = '';
document.getElementById('display').value = '';
}
```
نتیجه‌گیری
با پیروی از مراحل فوق، شما می‌توانید یک ماشین حساب ساده بسازید. این پروژه می‌تواند به شما در درک بهتر مفاهیم برنامه‌نویسی و کار با جاوا اسکریپت کمک کند. از اینجا به بعد، می‌توانید ویژگی‌های بیشتری مانند عملیات بیشتر، طراحی زیباتر و حتی محاسبات پیشرفته‌تر اضافه کنید. تجربه‌ی لذت‌بخشی از برنامه‌نویسی داشته باشید!
ساخت ماشین حساب با جاوا اسکریپت: راهنمای کامل و جامع
در دنیای برنامه‌نویسی وب، یکی از پروژه‌های اولیه و در عین حال جذاب، ساخت یک ماشین حساب است. این پروژه نه تنها به شما کمک می‌کند تا مفاهیم پایه‌ای جاوا اسکریپت، HTML و CSS را درک کنید، بلکه به عنوان یک تمرین عملی برای توسعه وب‌سایت‌های تعاملی نیز عالی است. بیایید قدم به قدم این فرآیند را بررسی کنیم.
۱. طراحی رابط کاربری (UI)
در ابتدا، باید یک رابط کاربری ساده و کاربرپسند طراحی کنیم. معمولاً این رابط شامل:
- صفحه‌ای برای نمایش نتایج و ورودی‌ها
- دکمه‌هایی برای اعداد ۰ تا ۹
- دکمه‌های عملیات ریاضی (+، -، ×، ÷)
- دکمه مساوی (=)
- دکمه‌های پاک کردن (C یا AC)
برای این کار می‌توانید از HTML استفاده کنید. مثلاً:
```html
<div class="calculator">
<input type="text" id="display" disabled />
<div class="buttons">
<!-- اعداد و عملیات -->
</div>
</div>
```
۲. استایل‌دهی با CSS
برای زیباتر کردن ظاهر، می‌توانید از CSS بهره ببرید. مثلا:
```css
.calculator {
width: 200px;
margin: auto;
padding: 10px;
border: 2px solid #000;
border-radius: 5px;
}
#display {
width: 100%;
height: 40px;
font-size: 20px;
text-align: right;
margin-bottom: 10px;
}
button {
width: 45px;
height: 45px;
margin: 5px;
font-size: 18px;
}
```
۳. برنامه‌نویسی با جاوا اسکریپت
حالا نوبت به نوشتن کدهای جاوا اسکریپت می‌رسد. ابتدا باید رویدادهای کلیک بر روی دکمه‌ها را مدیریت کنیم.
- جمع‌آوری ورودی‌ها: کاربر اعداد را وارد می‌کند، این اعداد باید در متغیری ذخیره شوند.
- انتقال عملیات: هر عملیات ریاضی باید ذخیره شود تا پس از کلیک بر روی مساوی، انجام شود.
- اجرای محاسبات: وقتی کاربر روی مساوی کلیک می‌کند، باید عملیات مربوطه اجرا گردد و نتیجه نمایش داده شود.
مثال ساده:
```javascript
let currentInput = '';
let previousInput = '';
let operation = null;
const display = document.getElementById('display');
function appendNumber(number) {
currentInput += number;
display.value = currentInput;
}
function chooseOperation(op) {
if (currentInput === '') return;
if (previousInput !== '') {
compute();
}
operation = op;
previousInput = currentInput;
currentInput = '';
}
function compute() {
let computation;
const prev = parseFloat(previousInput);
const current = parseFloat(currentInput);
if (isNaN(prev) || isNaN(current)) return;
switch (operation) {
case '+':
computation = prev + current;
break;
case '-':
computation = prev - current;
break;
case '×':
computation = prev * current;
break;
case '÷':
computation = prev / current;
break;
default:
return;
}
currentInput = computation.toString();
operation = null;
previousInput = '';
display.value = currentInput;
}
function clear() {
currentInput = '';
previousInput = '';
operation = null;
display.value = '';
}
// رویدادهای دکمه‌ها باید در اینجا تنظیم شوند
```
۴. افزودن رویدادهای کلیک به دکمه‌ها
برای هر دکمه، باید رویداد کلیک تعریف کنیم. مثلا:
```javascript
document.querySelectorAll('.number').forEach(button => {
button.addEventListener('click', () => {
appendNumber(button.innerText);
});
});
document.querySelectorAll('.operation').forEach(button => {
button.addEventListener('click', () => {
chooseOperation(button.innerText);
});
});
document.getElementById('equals').addEventListener('click', compute);
document.getElementById('clear').addEventListener('click', clear);
```
۵. نکات مهم و بهبودهای پیشنهادی
- افزودن قابلیت محاسبات چند مرحله‌ای
- مدیریت خطاهای ورودی و تقسیم بر صفر
- طراحی رابط کاربری بهتر و رسپانسیو
- افزودن دکمه‌های دیگر مانند درصد، تغییر علامت
در نهایت، ساخت یک ماشین حساب با جاوا اسکریپت، فرایندی است که نیازمند تمرین و خلاقیت است. هر چه بیشتر تمرین کنید، مهارتتان در برنامه‌نویسی وب توسعه می‌یابد و می‌توانید پروژه‌های پیچیده‌تر را نیز پیاده‌سازی کنید. این پروژه، پایه‌ای محکم برای یادگیری‌های بعدی در دنیای توسعه وب است.
