مقدمه
سورس کد HTML ماشین حساب یک ابزار ساده و کارآمد است که به ما امکان انجام محاسبات ریاضی را می‌دهد. این کد می‌تواند به سادگی نوشته شود و به راحتی قابل درک باشد. در ادامه به توضیحات کامل و جامع درباره این کد می‌پردازیم.
ساختار کلی HTML
در ابتدا، ما باید یک ساختار پایه برای صفحه HTML خود ایجاد کنیم. این ساختار شامل تگ‌های اصلی HTML، HEAD و BODY است.
```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">
<!-- محتویات ماشین حساب در اینجا قرار می‌گیرد -->
</div>
</body>
</html>
```
بخش ورودی
در داخل DIV ماشین حساب، باید یک بخش ورودی برای نمایش نتایج و اعداد ایجاد کنیم. این بخش معمولاً یک تگ INPUT است.
```html
<input type="text" id="result" disabled>
```
دکمه‌ها
سپس، دکمه‌های ماشین حساب را اضافه می‌کنیم. این دکمه‌ها شامل اعداد و عملگرها هستند. برای مثال:
```html
<button onclick="clearResult()">C</button>
<button onclick="appendToResult('1')">1</button>
<button onclick="appendToResult('2')">2</button>
<button onclick="appendToResult('+')">+</button>
```
کد جاوااسکریپت
حال نوبت به نوشتن توابع جاوااسکریپت می‌رسد. این توابع مسئول عملکرد ماشین حساب هستند. برای مثال، تابعی برای افزودن اعداد:
```javascript
function appendToResult(value) {
document.getElementById('result').value += value;
}
function clearResult() {
document.getElementById('result').value = '';
}
```
نتیجه‌گیری
با ترکیب این بخش‌ها، می‌توانید یک ماشین حساب ساده و کارآمد بسازید. این کد نه تنها به شما امکان انجام محاسبات را می‌دهد، بلکه یادگیری HTML و جاوااسکریپت را نیز تسهیل می‌کند. با کمی خلاقیت، می‌توانید ویژگی‌های جدیدی به آن اضافه کنید.
سورس کد HTML ماشین حساب: توضیحات کامل و جامع
وقتی وارد دنیای برنامه‌نویسی می‌شویم، یکی از پروژه‌های جذاب و در عین حال آموزشی، ساختن یک ماشین حساب است. در اینجا، قصد دارم درباره سورس کد HTML یک ماشین حساب، به طور کامل و جامع توضیح بدهم، تا نه تنها بفهمید چه چیزی در کد است، بلکه بدانید چگونه کار می‌کند و چه بخش‌هایی اهمیت دارند.
ساختار کلی سورس کد HTML ماشین حساب
در ابتدا، باید بدانید که یک ماشین حساب ساده، معمولاً از عناصر HTML، CSS و جاوااسکریپت تشکیل شده است. در اینجا، تمرکز ما بر روی قسمت HTML است؛ یعنی ساختار و عناصر صفحه، دکمه‌ها و نمایشگر، چطور ساخته شده‌اند.
در نمونه‌های معمول، ابتدا یک بخش برای نمایش نتایج و ورودی‌ها داریم و سپس مجموعه‌ای از دکمه‌ها که عملیات ریاضی و ارقام را انجام می‌دهند. عناصر مهم عبارتند از:
- div یا input برای نمایش نتیجه
- button برای ارقام و عملیات (جمع، تفریق، ضرب، تقسیم، مساوی و پاک‌سازی)
عناصر بخش HTML ماشین حساب
در کد HTML، معمولاً چند عنصر مهم و پایه‌ای وجود دارد:
- نمایشگر (Display)
- دکمه‌های ارقام و عملیات
- کدهای رویداد (Event Handlers)
نمونه نمونه سورس کد HTML ماشین حساب
```html
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8" />
<title>ماشین حساب ساده</title>
<style>
/* استایل ساده برای ظاهر ماشین حساب */
#calculator {
width: 200px;
margin: auto;
}
#display {
width: 100%;
height: 40px;
font-size: 20px;
text-align: right;
padding: 5px;
border: 1px solid #ccc;
margin-bottom: 10px;
}
.button {
width: 45px;
height: 45px;
margin: 2px;
font-size: 18px;
}
</style>
</head>
<body>
<div id="calculator">
<input type="text" id="display" disabled />
<br />
<button class="button" onclick="appendNumber('7')">7</button>
<button class="button" onclick="appendNumber('8')">8</button>
<button class="button" onclick="appendNumber('9')">9</button>
<button class="button" onclick="setOperation('+')">+</button>
<br />
<button class="button" onclick="appendNumber('4')">4</button>
<button class="button" onclick="appendNumber('5')">5</button>
<button class="button" onclick="appendNumber('6')">6</button>
<button class="button" onclick="setOperation('-')">-</button>
<br />
<button class="button" onclick="appendNumber('1')">1</button>
<button class="button" onclick="appendNumber('2')">2</button>
<button class="button" onclick="appendNumber('3')">3</button>
<button class="button" onclick="setOperation('*')">×</button>
<br />
<button class="button" onclick="appendNumber('0')">0</button>
<button class="button" onclick="clearDisplay()">C</button>
<button class="button" onclick="calculate()">=</button>
<button class="button" onclick="setOperation('/')">÷</button>
</div>
<script>
let currentInput = '';
let previousInput = '';
let operation = null;
function appendNumber(number) {
currentInput += number;
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;
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;
}
function clearDisplay() {
currentInput = '';
previousInput = '';
operation = null;
document.getElementById('display').value = '';
}
</script>
</body>
</html>
```
توضیح بخش‌های مهم این کد
- ساختار HTML
در این کد، بخش نمایشی با `<input>` ساخته شده است که کاربر نتایج و ورودی‌ها را می‌بیند. پس از آن، دکمه‌هایی قرار دارند که هر کدام با تابع جاوااسکریپت مرتبط هستند.
- کدهای CSS
استایل‌های ساده، ظاهر ماشین حساب را مرتب و قابل فهم می‌کنند. برای مثال، دکمه‌ها به اندازه مناسب و در کنار هم قرار دارند.
- کدهای جاوااسکریپت
وظیفه اصلی در این بخش است. این کدها، عملیات ریاضی، مدیریت ورودی‌ها، و بروزرسانی نمایشگر را انجام می‌دهند. هر دکمه، تابع خاص خودش را فرا می‌خواند تا عملیات مناسب انجام شود.
نتیجه‌گیری
این نمونه، نمونه‌ای ساده و پایه‌ای است، ولی می‌تواند به راحتی توسعه یابد و ویژگی‌های بیشتری مانند عملیات پیچیده‌تر، نمایش تاریخچه، یا طراحی زیباتر به آن اضافه شود. مهم‌ترین نکته، درک ساختار HTML و نحوه ارتباط آن با جاوااسکریپت است که پایه و اساس هر ماشین حساب است.
در کل، این کد نشان می‌دهد که چطور عناصر HTML، رویدادهای کاربری و اسکریپت‌های جاوااسکریپت، دست در دست هم، یک ماشین حساب کارا و قابل استفاده را می‌سازند.
