ساخت فرم محاسباتی با جاوا اسکریپت
برای ساخت یک فرم محاسباتی با جاوا اسکریپت، ابتدا نیاز به ایجاد یک ساختار پایه HTML داریم. سپس با استفاده از CSS می‌توانیم ظاهر فرم را زیباتر کنیم. در نهایت، با جاوا اسکریپت محاسبات مورد نظر را انجام خواهیم داد.
HTML FORM
در مرحله اول، یک فرم ساده ایجاد می‌کنیم. این فرم می‌تواند شامل ورودی‌های عددی و دکمه‌ای برای محاسبه باشد.
```html
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>فرم محاسباتی</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>فرم محاسباتی</h1>
<form id="calcForm">
<label for="num1">عدد اول:</label>
<input type="number" id="num1" required>
<label for="num2">عدد دوم:</label>
<input type="number" id="num2" required>
<button type="submit">محاسبه</button>
</form>
<div id="result"></div>
<script src="script.js"></script>
</body>
</html>
```
CSS STYLES
برای زیبا سازی فرم، می‌توانیم از CSS استفاده کنیم. به عنوان مثال:
```css
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
padding: 20px;
}
form {
background: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0,
- 1);
input, button {
margin: 10px 0;
padding: 10px;
width: 100%;
}
```
جاوا اسکریپت برای محاسبات
حالا با ایجاد یک اسکریپت جاوا اسکریپت می‌توانیم محاسبات را انجام دهیم.
```javascript
document.getElementById('calcForm').addEventListener('submit', function(e) {
e.preventDefault();
const num1 = parseFloat(document.getElementById('num1').value);
const num2 = parseFloat(document.getElementById('num2').value);
const sum = num1 + num2;
document.getElementById('result').innerText = `نتیجه: ${sum}`;
});
```
نتیجه‌گیری
این پروژه‌ی ساده به شما کمک می‌کند تا با اصول اولیه‌ی ساخت فرم و استفاده از جاوا اسکریپت آشنا شوید. شما می‌توانید این فرم را گسترش دهید و محاسبات بیشتری مانند تفریق، ضرب و تقسیم را به آن اضافه کنید. همچنین می‌توانید از فریمورک‌های مختلف برای بهبود تجربه کاربری استفاده کنید.
ساخت یک فرم محاسباتی با جاوا اسکریپت: راهنمای جامع و کامل
در این مقاله، قصد داریم به صورت گام‌به‌گام و مفصل، فرآیند ساخت یک فرم محاسباتی با استفاده از جاوا اسکریپت را توضیح دهیم. این فرآیند شامل طراحی فرم HTML، نوشتن کدهای جاوا اسکریپت برای انجام محاسبات، و در نهایت، افزودن قابلیت‌های تعاملی و کاربرپسند است. پس با ما همراه باشید تا بتوانید یک فرم محاسباتی قدرتمند و کارآمد بسازید.
مرحله اول: طراحی فرم HTML
در شروع، باید یک فرم ساده و کاربرپسند طراحی کنید. این فرم شامل ورودی‌هایی است که کاربر باید مقدارهای مورد نیاز را وارد کند، و دکمه‌ای برای اجرای محاسبات. به‌طور معمول، فرم شامل inputهای نوع number یا text است و یک دکمه submit یا button.
```html
<form id="calculatorForm">
<label for="num1">عدد اول:</label>
<input type="number" id="num1" name="num1" required>
<br>
<label for="num2">عدد دوم:</label>
<input type="number" id="num2" name="num2" required>
<br>
<button type="button" onclick="performCalculation()">محاسبه</button>
</form>
<div id="result"></div>
```
در اینجا، فرم شامل دو ورودی عددی است و یک دکمه برای شروع محاسبه. همچنین، یک بخش div برای نمایش نتیجه تعریف شده است.
مرحله دوم: نوشتن کدهای جاوا اسکریپت
در این مرحله، باید تابعی بنویسید که پس از کلیک بر روی دکمه، مقادیر وارد شده را دریافت کند، عملیات مورد نظر را انجام دهد، و نتیجه را نمایش دهد. فرض کنیم، قصد داریم جمع، تفریق، ضرب و تقسیم را محاسبه کنیم.
```javascript
function performCalculation() {
// دریافت مقادیر ورودی‌ها
const num1 = parseFloat(document.getElementById('num1').value);
const num2 = parseFloat(document.getElementById('num2').value);
// انجام محاسبات
const sum = num1 + num2;
const difference = num1 - num2;
const product = num1 * num2;
let division;
// جلوگیری از تقسیم بر صفر
if (num2 !== 0) {
division = num1 / num2;
} else {
division = 'تقسیم بر صفر امکان‌پذیر نیست!';
}
// نمایش نتایج
document.getElementById('result').innerHTML = `
جمع: ${sum} <br>
تفریق: ${difference} <br>
ضرب: ${product} <br>
تقسیم: ${division}
`;
}
```
در این کد، عملیات‌های پایه انجام می‌شود و نتیجه در بخش result نمایش داده می‌شود. توجه کنید که کد از `parseFloat` برای تبدیل ورودی‌ها به عدد استفاده می‌کند و از تقسیم بر صفر جلوگیری می‌کند.
مرحله سوم: افزودن قابلیت‌های پیشرفته‌تر
برای ساخت یک فرم محاسباتی کامل‌تر، می‌توانید امکانات زیر را اضافه کنید:
- انتخاب نوع عملیات: با افزودن یک منوی کشویی یا رادیویی، کاربر بتواند نوع عملیات ریاضی مورد نظر خود را انتخاب کند.
- ورودی‌های چندگانه: امکان وارد کردن تعداد بیشتری عدد یا عملیات پیچیده‌تر.
- نمایش نتایج به صورت جدول: به جای نمایش خطی، نتایج را در قالب جدول مرتب کنید.
- اعتبارسنجی ورودی‌ها: بررسی صحت وارد کردن اعداد و نمایش پیام خطا در صورت نیاز.
نمونه کد با قابلیت انتخاب نوع عملیات
```html
<form id="calculatorForm">
<label for="num1">عدد اول:</label>
<input type="number" id="num1" required>
<br>
<label for="num2">عدد دوم:</label>
<input type="number" id="num2" required>
<br>
<label for="operation">انتخاب عملیات:</label>
<select id="operation">
<option value="add">جمع</option>
<option value="subtract">تفریق</option>
<option value="multiply">ضرب</option>
<option value="divide">تقسیم</option>
</select>
<br>
<button type="button" onclick="calculate()">انجام عملیات</button>
</form>
<div id="result"></div>
```
و در فایل جاوا اسکریپت:
```javascript
function calculate() {
const num1 = parseFloat(document.getElementById('num1').value);
const num2 = parseFloat(document.getElementById('num2').value);
const operation = document.getElementById('operation').value;
let result;
switch (operation) {
case 'add':
result = `نتیجه جمع: ${num1 + num2}`;
break;
case 'subtract':
result = `نتیجه تفریق: ${num1 - num2}`;
break;
case 'multiply':
result = `نتیجه ضرب: ${num1 * num2}`;
break;
case 'divide':
if (num2 !== 0) {
result = `نتیجه تقسیم: ${num1 / num2}`;
} else {
result = 'تقسیم بر صفر امکان‌پذیر نیست!';
}
break;
}
document.getElementById('result').innerHTML = result;
}
```
جمع‌بندی
در این مقاله، به صورت کامل و جامع، روند ساخت یک فرم محاسباتی با جاوا اسکریپت را بررسی کردیم. از طراحی فرم HTML، نوشتن تابع‌های محاسباتی، تا افزودن قابلیت‌های پیشرفته‌تر. با رعایت این مراحل، می‌توانید برنامه‌های محاسباتی متنوع و کاربرپسند بسازید و در پروژه‌های وب خود استفاده کنید. مهم‌ترین نکته، تمرین و آزمایش مداوم است تا بتوانید به نتایج مطلوب برسید. موفق باشید!
