کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
### پروژه **سیستم ثبت رکورد دانش‌آموزان** با استفاده از HTML و JavaScript
این پروژه یک سیستم ساده برای ثبت و مدیریت اطلاعات دانش‌آموزان است که به کاربران امکان می‌دهد اطلاعات دانش‌آموزان را وارد کرده و در جدول نمایش دهند.
### 1. **HTML**
ابتدا ساختار HTML را برای سیستم ثبت رکورد دانش‌آموزان ایجاد می‌کنیم.
```html
سیستم ثبت رکورد دانش‌آموزان
```
### 2. **CSS**
برای طراحی ظاهری سیستم ثبت رکورد دانش‌آموزان از CSS استفاده می‌کنیم.
```css
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 400px;
}
h1 {
margin-bottom: 20px;
text-align: center;
}
input {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
margin-bottom: 20px;
width: 100%;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th, td {
padding: 10px;
border: 1px solid #ccc;
text-align: center;
}
th {
background-color: #007bff;
color: white;
}
```
### 3. **JavaScript**
سپس منطق سیستم ثبت رکورد دانش‌آموزان را با JavaScript پیاده‌سازی می‌کنیم.
```javascript
// انتخاب عناصر HTML
const studentNameInput = document.getElementById('studentName');
const studentAgeInput = document.getElementById('studentAge');
const studentGradeInput = document.getElementById('studentGrade');
const addStudentBtn = document.getElementById('addStudentBtn');
const studentTableBody = document.getElementById('studentTableBody');
// تابع برای افزودن دانش‌آموز جدید
function addStudent() {
const name = studentNameInput.value;
const age = studentAgeInput.value;
const grade = studentGradeInput.value;
// بررسی اینکه همه فیلدها پر شده باشند
if (name && age && grade) {
// ایجاد یک ردیف جدید در جدول
const newRow = document.createElement('tr');
newRow.innerHTML = `
${name} | ${age} | ${grade} | `;
studentTableBody.appendChild(newRow);
// پاک کردن فیلدهای ورودی
studentNameInput.value = '';
studentAgeInput.value = '';
studentGradeInput.value = '';
} else {
alert('لطفا همه فیلدها را پر کنید.');
}
}
// افزودن رویداد کلیک به دکمه افزودن دانش‌آموز
addStudentBtn.addEventListener('click', addStudent);
```
### توضیحات کد:
1. **HTML**:
- شامل فیلدهای ورودی برای نام، سن و پایه تحصیلی دانش‌آموز، دکمه‌ای برای افزودن دانش‌آموز و جدول برای نمایش رکوردهای دانش‌آموزان است.
2. **CSS**:
- طراحی ساده و کاربرپسند برای رابط کاربری.
3. **JavaScript**:
- **انتخاب عناصر**: انتخاب عناصر HTML از طریق `getElementById`.
- **تابع افزودن دانش‌آموز**: این تابع رکورد دانش‌آموز جدید را به جدول اضافه می‌کند و پس از افزودن، فیلدها را پاک می‌کند. همچنین، اگر فیلدی خالی باشد، یک پیام خطا نمایش داده می‌شود.
- **رویداد کلیک**: رویداد کلیک برای دکمه افزودن دانش‌آموز.
### نتیجه‌گیری
این پروژه **سیستم ثبت رکورد دانش‌آموزان** یک مثال عالی برای استفاده از مفاهیم JavaScript، HTML و CSS است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند ویرایش و حذف رکوردهای دانش‌آموزان یا ذخیره‌سازی داده‌ها در Local Storage اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی **سیستم ثبت رکورد دانش‌آموزان** با استفاده از HTML و JavaScript می‌باشد
