کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
### پروژه **وب‌سایت کتابخانه دانشگاهی** با استفاده از 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: 80%;
max-width: 600px;
text-align: center;
}
h1 {
margin-bottom: 20px;
}
input[type="text"] {
width: 70%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
}
.book-list {
margin-top: 20px;
}
.book-item {
background-color: #f9f9f9;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
margin: 5px 0;
}
```
### 3. **JavaScript**
سپس منطق برنامه را با JavaScript پیاده‌سازی می‌کنیم. این بخش شامل جستجوی کتاب‌ها و نمایش نتایج است.
```javascript
// آرایه‌ای از کتاب‌ها برای نمایش
const books = [
{ title: "کتاب 1", author: "نویسنده 1", year: 2021 },
{ title: "کتاب 2", author: "نویسنده 2", year: 2020 },
{ title: "کتاب 3", author: "نویسنده 3", year: 2019 },
{ title: "کتاب 4", author: "نویسنده 4", year: 2021 },
{ title: "کتاب 5", author: "نویسنده 5", year: 2022 },
];
// انتخاب عناصر HTML
const searchBtn = document.getElementById('searchBtn');
const searchInput = document.getElementById('searchInput');
const bookListDiv = document.getElementById('bookList');
// تابع برای نمایش کتاب‌ها
function displayBooks(filteredBooks) {
bookListDiv.innerHTML = ''; // پاک کردن لیست قبلی
if (filteredBooks.length === 0) {
bookListDiv.innerHTML = '
کتابی پیدا نشد.
';
return;
}
filteredBooks.forEach(book => {
const bookItem = document.createElement('div');
bookItem.classList.add('book-item');
bookItem.innerHTML = `${book.title} - ${book.author} (${book.year})`;
bookListDiv.appendChild(bookItem);
});
}
// افزودن رویداد کلیک به دکمه جستجو
searchBtn.addEventListener('click', function() {
const query = searchInput.value.toLowerCase();
const filteredBooks = books.filter(book => book.title.toLowerCase().includes(query));
displayBooks(filteredBooks);
});
```
### توضیحات کد:
1. **HTML**:
- شامل عنوان وب‌سایت، فیلد جستجو برای ورود نام کتاب و دکمه برای جستجو است. همچنین یک بخش برای نمایش لیست کتاب‌ها دارد.
2. **CSS**:
- طراحی ساده برای ایجاد یک رابط کاربری زیبا و کاربرپسند.
3. **JavaScript**:
- **آرایه کتاب‌ها**: شامل اطلاعات کتاب‌ها شامل عنوان، نویسنده و سال انتشار.
- **تابع نمایش کتاب‌ها**: کتاب‌ها را بر اساس ورودی جستجو فیلتر و نمایش می‌دهد.
- **رویداد کلیک**: وقتی کاربر روی دکمه "جستجو" کلیک می‌کند، برنامه جستجو را انجام داده و نتایج را نمایش می‌دهد.
### نتیجه‌گیری
این پروژه **وب‌سایت کتابخانه دانشگاهی** یک مثال عالی برای یادگیری نحوه کار با JavaScript و دستکاری DOM است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند افزودن، حذف و ویرایش کتاب‌ها یا نمایش جزئیات بیشتر کتاب‌ها اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی **وب‌سایت کتابخانه دانشگاهی** با استفاده از JavaScript می‌باشد
