درس ۲۰: پروژههای عملی JavaScript
ایجاد پروژههای کاربردی با استفاده از تمام مفاهیم آموخته شده
🎯 هدف این درس
در این درس نهایی، تمام مفاهیمی که در دروس قبلی آموختهاید را در قالب پروژههای عملی و کاربردی به کار خواهید برد. این پروژهها شامل:
پروژههای این درس:
- 🧮 ماشین حساب پیشرفته - با تاریخچه و عملیات پیچیده
- 📝 مدیریت وظایف (Todo App) - با ذخیرهسازی محلی
- 🎮 بازی حدس عدد - با امتیازدهی و سطوح مختلف
- 🌤️ نمایش آب و هوا - با API و نمودارها
- 📊 داشبورد تحلیلی - با نمودارها و آمار
- 🛒 سبد خرید - با محاسبه قیمت و تخفیف
⚠️ نکات مهم:
هر پروژه شامل کد کامل HTML، CSS و JavaScript است. میتوانید کدها را کپی کرده و در فایلهای جداگانه ذخیره کنید تا به صورت مستقل اجرا شوند.
🧮 پروژه ۱: ماشین حساب پیشرفته
ماشین حسابی با قابلیتهای پیشرفته شامل تاریخچه، عملیات علمی و ذخیرهسازی:
ویرایشگر کد
خط 1، ستون 1
نمایش زنده
📝 پروژه ۲: مدیریت وظایف (Todo App)
اپلیکیشن مدیریت وظایف با قابلیتهای پیشرفته:
ویژگیهای پروژه:
- اضافه کردن، ویرایش و حذف وظایف
- علامتگذاری وظایف به عنوان تکمیل شده
- فیلتر کردن وظایف (همه، فعال، تکمیل شده)
- ذخیرهسازی در localStorage
- نمایش آمار وظایف
- طراحی واکنشگرا و زیبا
// مثال کد اصلی Todo App
let todos = JSON.parse(localStorage.getItem('todos')) || [];
function addTodo() {
const input = document.getElementById('todoInput');
const text = input.value.trim();
if (text) {
const todo = {
id: Date.now(),
text: text,
completed: false,
createdAt: new Date().toLocaleString('fa-IR')
};
todos.push(todo);
saveTodos();
input.value = '';
renderTodos();
}
}
function toggleTodo(id) {
todos = todos.map(todo =>
todo.id === id ? {...todo, completed: !todo.completed} : todo
);
saveTodos();
renderTodos();
}
🎮 پروژه ۳: بازی حدس عدد
بازی تعاملی حدس عدد با امتیازدهی و آمار:
ویژگیهای بازی:
- تولید عدد تصادفی بین 1 تا 100
- سیستم امتیازدهی
- نمایش تاریخچه حدسها
- راهنماییهای هوشمند
- ذخیره بهترین امتیاز
- پشتیبانی از کیبورد
// منطق اصلی بازی
let targetNumber = Math.floor(Math.random() * 100) + 1;
let attempts = 0;
let score = 100;
function makeGuess() {
const guess = parseInt(document.getElementById('guessInput').value);
if (guess === targetNumber) {
showMessage(`🎉 تبریک! عدد ${targetNumber} را در ${attempts} تلاش حدس زدید!`, 'success');
updateBestScore();
} else if (guess < targetNumber) {
showMessage(`📈 عدد شما کوچکتر از عدد مورد نظر است!`, 'warning');
} else {
showMessage(`📉 عدد شما بزرگتر از عدد مورد نظر است!`, 'warning');
}
attempts++;
score = Math.max(0, score - 5);
updateStats();
}
📊 پروژه ۴: داشبورد تحلیلی
داشبورد تعاملی با نمودارها و آمار زنده:
ویژگیهای داشبورد:
- کارتهای آماری با انیمیشن
- نمودار ستونی فروش
- نمودار دایرهای توزیع کاربران
- فعالیتهای اخیر
- بهروزرسانی خودکار دادهها
- طراحی واکنشگرا
// رسم نمودار با Canvas
function drawSalesChart() {
const canvas = document.getElementById('salesChart');
const ctx = canvas.getContext('2d');
const data = [65, 59, 80, 81, 56, 55, 40];
const labels = ['شنبه', 'یکشنبه', 'دوشنبه', 'سهشنبه', 'چهارشنبه', 'پنجشنبه', 'جمعه'];
// رسم ستونها
ctx.fillStyle = '#3498db';
data.forEach((value, index) => {
const barHeight = (value / maxValue) * chartHeight;
const x = 40 + (index * barWidth);
const y = canvas.height - 20 - barHeight;
ctx.fillRect(x, y, barWidth * 0.8, barHeight);
});
}
🛒 پروژه ۵: سبد خرید
فروشگاه آنلاین کامل با سبد خرید:
ویژگیهای فروشگاه:
- نمایش محصولات در قالب کارت
- افزودن/حذف محصولات از سبد
- تغییر تعداد محصولات
- محاسبه خودکار قیمتها
- سیستم کد تخفیف
- شبیهسازی پرداخت
// مدیریت سبد خرید
function addToCart(id, name, price) {
const existingItem = cart.find(item => item.id === id);
if (existingItem) {
existingItem.quantity += 1;
} else {
cart.push({
id: id,
name: name,
price: price,
quantity: 1
});
}
saveCart();
updateCartDisplay();
showNotification(`${name} به سبد خرید اضافه شد!`);
}
function applyCoupon() {
const couponCode = document.getElementById('couponCode').value.trim();
if (coupons[couponCode]) {
appliedCoupon = coupons[couponCode];
updateTotals();
showNotification('کد تخفیف با موفقیت اعمال شد!');
}
}
🎯 نکات مهم برای توسعه پروژهها
💡 بهترین شیوهها:
- کد تمیز: از نامگذاری مناسب و کامنتگذاری استفاده کنید
- مدیریت خطا: همیشه خطاهای احتمالی را در نظر بگیرید
- تجربه کاربری: رابط کاربری ساده و قابل فهم طراحی کنید
- عملکرد: از تکنیکهای بهینهسازی استفاده کنید
- واکنشگرایی: پروژهها را برای دستگاههای مختلف بهینه کنید
- دسترسی: قابلیت دسترسی برای همه کاربران را فراهم کنید
ایدههایی برای توسعه بیشتر
// ایدههای توسعه:
// 1. اضافه کردن پایگاه داده واقعی
// 2. پیادهسازی احراز هویت کاربران
// 3. اضافه کردن API های خارجی
// 4. پیادهسازی PWA (Progressive Web App)
// 5. اضافه کردن تستهای خودکار
// 6. بهینهسازی برای SEO
// 7. اضافه کردن انیمیشنهای پیشرفته
// 8. پیادهسازی چت آنلاین
// 9. اضافه کردن نقشههای تعاملی
// 10. ایجاد سیستم اعلانها
🎓 تبریک! دوره تکمیل شد
شما با موفقیت تمام 20 درس آموزش توسعه وب را تکمیل کردید. حالا میتوانید:
🏆 مهارتهای کسب شده:
- ساخت صفحات وب با HTML
- طراحی زیبا با CSS
- برنامهنویسی تعاملی با JavaScript
- ایجاد پروژههای کاربردی
- مدیریت دادهها و ذخیرهسازی
- طراحی واکنشگرا
🚀 مراحل بعدی:
برای ادامه مسیر یادگیری، پیشنهاد میکنیم:
- فریمورکهای JavaScript (React, Vue, Angular)
- Node.js برای توسعه بکاند
- پایگاههای داده (MongoDB, MySQL)
- ابزارهای توسعه (Git, Webpack, npm)
- تستنویسی و DevOps