ماشین حساب ساده با HTML
برای ایجاد یک
ماشین حساب ساده با HTML
، نیاز به ترکیب HTML، CSS و JavaScript داریم. این ترکیب به ما امکان می‌دهد که یک رابط کاربری جذاب و عملکردهای محاسباتی را پیاده‌سازی کنیم.ساختار 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="display" disabled>
<div class="buttons">
<button onclick="clearDisplay()">C</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('4')">4</button>
<button onclick="appendToDisplay('5')">5</button>
<button onclick="appendToDisplay('6')">6</button>
<button onclick="appendToDisplay('*')">*</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('0')">0</button>
<button onclick="calculate()">=</button>
<button onclick="appendToDisplay('+')">+</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
```
استایل CSS
حالا به استایل‌دهی می‌پردازیم. با 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: 5px;
padding: 20px;
background-color: white;
}
#display {
width: 100%;
height: 40px;
font-size: 24px;
text-align: right;
margin-bottom: 10px;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
button {
padding: 20px;
font-size: 18px;
cursor: pointer;
}
```
منطق JavaScript
در نهایت، برای عملکرد ماشین حساب، به JavaScript نیاز داریم. این کد عملیات‌های مختلف را انجام می‌دهد.
```javascript
function appendToDisplay(value) {
document.getElementById('display').value += value;
}
function clearDisplay() {
document.getElementById('display').value = '';
}
function calculate() {
const display = document.getElementById('display');
try {
display.value = eval(display.value);
} catch (error) {
display.value = 'خطا';
}
}
```
نتیجه‌گیری
در اینجا، یک
ماشین حساب ساده با HTML
، CSS و JavaScript ایجاد کردیم. می‌توانیم آن را گسترش دهیم و امکانات بیشتری اضافه کنیم. این پروژه می‌تواند به عنوان نقطه شروعی برای یادگیری بیشتر در مورد برنامه‌نویسی وب باشد.سورس‌کد ماشین‌حساب HTML، یکی از پروژه‌های پایه و ابتدایی در برنامه‌نویسی وب است که به کاربران امکان می‌دهد عملیات ریاضی مانند جمع، تفریق، ضرب و تقسیم را به سادگی انجام دهند. این کد معمولاً شامل عناصر HTML، CSS برای ظاهر و استایل، و JavaScript برای عملکرد و منطق محاسبات است. در ادامه، به طور کامل و جامع، اجزای اصلی این سورس‌کد را بررسی می‌کنیم.
۱. ساختار HTML
در قسمت HTML، ابتدا صفحه‌ی ساده‌ای طراحی می‌شود که شامل نمایشگر (Display) و دکمه‌های عملیات است. مثلا، یک input یا div برای نمایش نتیجه و چندین دکمه برای اعداد و عملیات ریاضی. این عناصر معمولا با تگ‌های `<button>`, `<input>`, و `<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>
<!-- سایر دکمه‌ها -->
</div>
</div>
```
۲. استایل CSS
در CSS، ظاهر ماشین‌حساب مشخص می‌شود. این شامل تنظیم رنگ‌ها، اندازه‌ها، فاصله‌ها، و نحوه چیدمان عناصر است. مثلا، می‌توانید دکمه‌ها را در قالب یک شبکه قرار دهید، رنگ پس‌زمینه را تنظیم کنید، و فونت‌ها را مشخص کنید. این باعث می‌شود کاربر تجربه‌ی کاربری بهتر و جذاب‌تر داشته باشد.
۳. منطق JavaScript
در JavaScript، عملکرد ماشین‌حساب پیاده‌سازی می‌شود. این بخش شامل توابعی است که هنگام کلیک بر روی دکمه‌ها، اعداد وارد شده در نمایشگر قرار می‌گیرند، عملیات ریاضی انجام می‌شود، و نتایج به نمایش در می‌آیند. برای نمونه:
```javascript
let currentInput = '';
function appendNumber(number) {
currentInput += number;
document.getElementById('display').value = currentInput;
}
function clearDisplay() {
currentInput = '';
document.getElementById('display').value = '';
}
function calculate() {
try {
const result = eval(currentInput);
document.getElementById('display').value = result;
} catch (error) {
document.getElementById('display').value = 'Error';
}
}
```
۴. نکات مهم و نکات امنیتی
در کدهای ساده، معمولا از تابع `eval()` برای محاسبه استفاده می‌شود، اما این تابع خطرناک است و نباید در پروژه‌های بزرگ و امنیتی مورد استفاده قرار گیرد. بهتر است، به جای آن، توابع محاسبه‌گر دستی یا کتابخانه‌های مخصوص ریاضی استفاده شود.
۵. توسعه و بهبود
برای ارتقاء این پروژه، می‌توان ویژگی‌هایی مانند تاریخچه عملیات، پشتیبانی از عملیات پیچیده‌تر، یا طراحی واکنش‌گرا برای دستگاه‌های مختلف افزود. همچنین، می‌توان از فریم‌ورک‌هایی مانند React یا Vue.js برای ساخت ماشین‌حساب‌های پیشرفته‌تر بهره برد.
در نهایت، این سورس‌کدهای پایه، نقطه شروع خوبی برای یادگیری و تمرین برنامه‌نویسی وب هستند و به توسعه‌دهندگان کمک می‌کنند مفاهیم HTML، CSS، و JavaScript را بهتر درک کنند. امیدوارم این توضیحات جامع، دیدگاه خوبی درباره ساخت ماشین‌حساب با این تکنولوژی‌ها به شما بدهد.
