درس ۲۰: پروژه‌های عملی 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

آزمون نهایی

سوال ۱: کدام روش برای ذخیره داده‌ها در مرورگر استفاده می‌شود؟

سوال ۲: برای رسم نمودار در وب از کدام عنصر استفاده می‌شود؟

سوال ۳: کدام مفهوم برای مدیریت حالت در اپلیکیشن‌های پیچیده مهم است؟