جاوااسکریپت ۲؛ دورهٔ متوسط و پروژه‌های کاربردی

این دوره، دورهٔ دوم رایگان جاوااسکریپت درس‌آوند و ادامهٔ دورهٔ «جاوااسکریپت از صفر تا پروژه» است. قرار نیست تعریف متغیر، شرط و حلقه را دوباره از ابتدا بخوانید. این بار مسئلهٔ اصلی تصمیم‌گرفتن دربارهٔ ساختار برنامه، اعتبار داده و رفتار برنامه هنگام خطاست. پیش از شروع باید بتوانید یک فرم ساده بسازید، رویداد کلیک را مدیریت کنید و با آرایه‌ای از شیءها کار کنید. اگر این کارها هنوز دشوار است، ابتدا دورهٔ اول را تکمیل کنید:

https://www.darsavand.com/courses/javascript-from-zero-to-project

در پایان این مسیر، سه برنامهٔ آموزشی را بررسی و تکمیل می‌کنید: دفتر هزینه، کاتالوگ و سبد خرید، و مرکز تیکت با API محلی. ارزش تمرین فقط در دیده‌شدن صفحه نیست؛ باید بتوانید توضیح دهید داده از کجا آمده، کدام تابع مجاز به تغییر آن است و خطا چگونه به کاربر نمایش داده می‌شود. این دوره متنی و همراه کد قابل اجراست؛ برای یادگیری، مثال‌ها را تغییر دهید و نتیجه را اندازه بگیرید.

آزمایش آمادگی با یک مسئلهٔ واقعی

فرض کنید قرار است هزینه‌های یک دسته را گزارش کنید. کد زیر را در کنسول مرورگر یا فایل readiness.mjs در Node.js اجرا کنید. پیش از اجرا، خروجی و اثر آن بر rows را حدس بزنید:

const rows = [
  { id: 'e1', title: 'کتاب', category: 'آموزش', amount: 180000 },
  { id: 'e2', title: 'ناهار', category: 'خوراک', amount: 90000 },
  { id: 'e3', title: 'تمرین آنلاین', category: 'آموزش', amount: 70000 }
];
function report(items, category) {
  const selected = items.filter(item => item.category === category);
  return {
    count: selected.length,
    total: selected.reduce((sum, item) => sum + item.amount, 0)
  };
}
console.log(report(rows, 'آموزش')); // { count: 2, total: 250000 }
console.log(rows.length); // 3

اگر فقط خروجی را به خاطر بسپارید، تمرین تمام نشده است. توضیح دهید چرا آرایهٔ اصلی کوتاه نشده و چرا مقدار اولیهٔ صفر برای reduce مهم است. سپس دسته‌ای را وارد کنید که هیچ ردیفی ندارد؛ پاسخ درست گزارش خالی با مجموع صفر است. همین مورد کوچک، خطاهایی را آشکار می‌کند که فقط با دادهٔ نمونهٔ شلوغ دیده نمی‌شوند.

از کد کارکردنی به قرارداد روشن

نسخهٔ بالا فرض می‌کند همهٔ مبلغ‌ها معتبرند. این فرض برای یک مثال کوتاه قابل قبول است؛ در مرز ورود فایل یا پاسخ API کافی نیست. نسخهٔ زیر را مستقل اجرا کنید. هدف، جداکردن بررسی داده از محاسبه است، نه پیچیده‌کردن یک جمع ساده:

function checkedTotal(items) {
  if (!Array.isArray(items)) throw new TypeError('Expected an array');
  let sum = 0;
  for (const item of items) {
    if (!item || !Number.isSafeInteger(item.amount) || item.amount < 1) {
      throw new RangeError('Invalid amount');
    }
    sum += item.amount;
    if (!Number.isSafeInteger(sum)) throw new RangeError('Unsafe total');
  }
  return sum;
}
console.log(checkedTotal([{ amount: 180000 }, { amount: 70000 }]));
// 250000
try {
  checkedTotal([{ amount: '180000' }]);
} catch (error) {
  console.log(error.message); // Invalid amount
}

در این قرارداد، مبلغ متن نیست و تومان به‌صورت عدد صحیح نگهداری می‌شود. تبدیل رقم فارسی و متن فرم وظیفهٔ مرحله‌ای پیش از محاسبه است. تابع محاسبه نباید خودسرانه هر چیز نامعتبری را صفر حساب کند، چون گزارش مالی ظاهراً موفق اما غلط ایجاد می‌شود. درس سوم همین مرز تبدیل و اعتبارسنجی را دقیق‌تر می‌سازد.

محیط اجرای قابل تکرار

فایل همراه را در پوشه‌ای مستقل استخراج کنید. Node.js نسخهٔ ۲۴ یا بالاتر، مطابق بخش engines پروژه، لازم است. در پوشهٔ دارای package.json، دستور npm test آزمون‌های پاسخ و پروژه را اجرا می‌کند و npm start سرور محلی را باز می‌کند. نصب وابستگی شخص ثالث برای نسخهٔ همراه لازم نیست. نشانی نمایش‌داده‌شده در ترمینال را در مرورگر باز کنید؛ بازکردن مستقیم HTML با file:// جای سرور محلی را نمی‌گیرد. مرورگر امکانات DOM را دارد و Node.js امکانات سرور و فایل را؛ یکی‌بودن زبان به معنی یکی‌بودن محیط نیست.

برای هر تغییر، ابتدا انتظار را بنویسید، سپس یک نمونهٔ موفق و یک نمونهٔ ناموفق اجرا کنید. در کنار یادداشت خروجی، نام فایل و شرایط اجرا را ثبت کنید. وقتی خطا رخ می‌دهد، نخستین سطر مرتبط از پشتهٔ خطا و ورودی را بررسی کنید؛ پاک‌کردن پیام خطا بدون یافتن علت، اصلاح نیست. اطلاعات شخصی یا رمز واقعی هم وارد دادهٔ تمرینی نکنید.

تمرین، پاسخ و معیار تحویل

گزارش اول را توسعه دهید تا علاوه بر تعداد و مجموع، میانگین را نیز برگرداند. برای دستهٔ خالی، average را null قرار دهید؛ صفر میانگین واقعی با «داده‌ای نداریم» متفاوت است. میانگین مبلغ ممکن است اعشاری شود؛ این خروجی آماری را با مبلغ قابل پرداخت اشتباه نگیرید.

پاسخ راهنما: ابتدا ردیف‌های دسته را فیلتر کنید، مجموع معتبر را محاسبه کنید و فقط وقتی تعداد بیشتر از صفر است تقسیم انجام دهید. آزمون شما باید دستهٔ عادی، دستهٔ خالی، یک ردیف و مبلغ نامعتبر را پوشش دهد. معیار آمادگی برای ادامه، اجرای موفق کد و توضیح شفاهی این چهار تصمیم است؛ اگر فقط نحو filter را فراموش کرده‌اید، مراجعهٔ کوتاه به مرجع کافی است و نیازی به تکرار کل دورهٔ مقدماتی ندارید.

منابع رسمی برای مطالعهٔ تکمیلی

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isSafeInteger

تألیف و مثال‌های اختصاصی: تحریریه درس‌آوند.