مقدمه
در دنیای وب، ایجاد یک ماشین حساب ساده با استفاده از HTML، CSS و JavaScript یکی از پروژه‌های جذاب و یادگیری است. این پروژه، به شما کمک می‌کند تا درک بهتری از نحوه تعامل عناصر در صفحات وب و همچنین کار با اسکریپت‌ها پیدا کنید. در ادامه به معرفی کد HTML ماشین حساب ساده خواهیم پرداخت.
ساختار 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="styles.css">
</head>
<body>
<div class="calculator">
<input type="text" id="result" disabled>
<div class="buttons">
<button onclick="clearResult()">C</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('4')">4</button>
<button onclick="appendToResult('5')">5</button>
<button onclick="appendToResult('6')">6</button>
<button onclick="appendToResult('*')">*</button>
<button onclick="appendToResult('1')">1</button>
<button onclick="appendToResult('2')">2</button>
<button onclick="appendToResult('3')">3</button>
<button onclick="calculateResult()">=</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
```
توضیحات کد HTML
- تگ `<html>`: این تگ، ساختار کلی HTML را تعریف می‌کند.
- تگ `<head>`: این قسمت شامل اطلاعات متا و لینک به CSS است.
- تگ `<body>`: در اینجا، محتوای اصلی ماشین حساب قرار دارد.
- ورودی نتیجه: یک فیلد متن برای نمایش نتیجه محاسبات.
- دکمه‌ها: هر دکمه دارای رویداد `onclick` است که تابع خاصی را فراخوانی می‌کند.
CSS و JavaScript
برای زیباسازی و کارایی، به یک فایل CSS و JavaScript نیاز داریم. در فایل CSS می‌توانیم ظاهر ماشین حساب را طراحی کنیم و در JavaScript، عملکرد محاسبات را پیاده‌سازی کنیم.
CSS نمونه:
```css
.calculator {
width: 200px;
margin: auto;
}
input {
width: 100%;
height: 40px;
text-align: right;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
```
JavaScript نمونه:
```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;
}
```
نتیجه‌گیری
با این کدهای ارائه شده، می‌توانید یک ماشین حساب ساده بسازید که امکانات اساسی را ارائه می‌دهد. این پروژه، امکان یادگیری تکنیک‌های مختلف وب و نحوه کار با HTML، CSS و JavaScript را برای شما فراهم می‌کند. با کمی خلاقیت و تغییرات، می‌توانید ماشین حساب خود را بهبود دهید.
کد HTML ماشین حساب ساده: توضیح کامل و جامع
وقتی وارد دنیای طراحی وب می‌شوید، یکی از پروژه‌های ابتدایی و در عین حال کاربردی، ساختن یک ماشین حساب ساده است. این کد، شامل ساختار پایه HTML است که با کمک CSS برای ظاهر و JavaScript برای عملکرد، می‌تواند عملیات ریاضی ساده را انجام دهد. حال، بیایید قدم به قدم، بخش‌های مختلف این کد را بررسی کنیم.
ساختار پایه HTML
در ابتدا، صفحه وب باید ساختار اولیه‌ای داشته باشد. این ساختار شامل بخش‌های اصلی مانند `<html>`, `<head>`, و `<body>` است. در `<head>`، می‌توانید عنوان صفحه و لینک‌های مربوط به استایل‌ها یا اسکریپت‌ها را قرار دهید. در `<body>`، اجزای ماشین حساب، یعنی نمایشگر و دکمه‌ها، قرار می‌گیرند.
نمایشگر ماشین حساب
در داخل `<body>`, یک `<input>` یا `<div>` برای نمایش عملیات جاری و نتیجه، قرار می‌گیرد. معمولاً، این عنصر باید readonly باشد، یعنی کاربر نتواند مستقیماً در آن تایپ کند، بلکه باید توسط دکمه‌ها کنترل شود.
دکمه‌ها و عملیات
در ادامه، دکمه‌هایی برای اعداد 0 تا 9، عملیات جمع، تفریق، ضرب، تقسیم و مساوی قرار می‌گیرند. هر دکمه، یک `<button>` است که رویداد `onclick` دارد. این رویداد، تابع مربوطه را فراخوانی می‌کند و عملیات مورد نظر را انجام می‌دهد.
کد CSS برای استایل
برای جذاب‌تر کردن ظاهر، می‌توان از CSS بهره برد. این استایل‌ها، اندازه، رنگ، فاصله و چینش دکمه‌ها و نمایشگر را تعیین می‌کنند. معمولاً، از Flexbox یا Grid برای مرتب‌سازی المان‌ها استفاده می‌شود.
کد JavaScript برای عملکرد
در نهایت، جاوااسکریپت نقش کلیدی دارد. این زبان، عملیات محاسباتی و کنترل رویدادها را مدیریت می‌کند. مثلا، تابعی برای افزودن عدد به نمایشگر، یا تابعی برای انجام عملیات ریاضی و نمایش نتیجه.
مثال ساده کد HTML
```html
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8" />
<title>ماشین حساب ساده</title>
<style>
/* استایل‌ها برای ظاهر ماشین حساب */
body {
font-family: Tahoma, sans-serif;
display: flex;
justify-content: center;
margin-top: 50px;
}
.calculator {
border: 2px solid #ccc;
padding: 20px;
border-radius: 10px;
}
#display {
width: 160px;
height: 30px;
margin-bottom: 10px;
font-size: 20px;
text-align: right;
padding-right: 10px;
}
button {
width: 40px;
height: 40px;
margin: 5px;
font-size: 18px;
}
</style>
</head>
<body>
<div class="calculator">
<input type="text" id="display" readonly />
<br />
<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="clearDisplay()">C</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 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 پایه، یک نمونه ساده و قابل فهم است که می‌تواند به راحتی توسعه یابد. برای مثال، می‌توانید توابع بیشتری اضافه کنید، ظاهر را تغییر دهید یا عملیات‌های پیچیده‌تری را پشتیبانی کنید. مهم‌ترین نکته، فهم ساختار کلی و نحوه ارتباط HTML، CSS و JavaScript است که در کنار هم، این ماشین حساب را ساخته‌اند.
در نتیجه، این پروژه، اولین قدم برای درک بهتر طراحی صفحات تعاملی و برنامه‌نویسی وب است که، با تمرین و توسعه، می‌تواند به ابزارهای بسیار پیشرفته‌تر تبدیل شود.
