Лоиҳаи хурд: барнома дар API-и оммавӣ

01 Вазифа: вариантро интихоб кунед

Лоиҳа аз он чизе ҷамъ мешавад, ки дар дарсҳои 13–17 гузаштед: ғайримуттаҳидӣ (async), fetch, ҳолатҳои боркунӣ, debounce, модулҳо ва ҷамъбасти Vite. Яке аз се вариантро интихоб кунед. Ҳамаи онҳо бо як меъёр баҳо дода мешаванд, API-ҳо ҳама кушода ҳастанд ва калид талаб намекунанд.

Мураккабӣ тақрибан баробар аст: дар маҳсулот мантиқи ҷустуҷӯ бештар аст, дар обуҳаво — таҳлили ҷавоби дарунҷойгир, дар корбарон — дархостҳои вобаста. Ғояи худро дар API-и кушодаи дигар пешниҳод кардан мумкин аст, агар он калид надошта бошад, аз браузер (CORS) кор кунад ва ҳаҷмаш ҳамон қадар бошад — инро бо муаллим пеш аз оғози кор мувофиқа кунед.

Дар охир чиро нишон медиҳед

1. Барномаи корӣ — бе хато дар консол кушода мешавад, ҳангоми хомӯш будани шабака хатои ботартибро нишон медиҳад.
2. Репозиторий дар GitHub бо коди Vite, README ва скриншот; фармони npm run build бе хато мегузарад.
3. Ҳимояи 5-дақиқагӣ — намоиш, шарҳи код ва ҷавоб ба саволҳо.
4. Таҳлили кӯтоҳи «ЗС дар лоиҳа» — қисми 12: ЗС дар куҷо кумак кард, дар куҷо аз роҳ бурд.

02 Талабот: MVP ва бонусҳо

MVP — версияи ҳадди ақал, ки аллакай аз аввал то охир кор мекунад. Аввал онро пурра месозем, ва танҳо баъд оро медиҳем. Лоиҳа бе MVP баҳои баланд намегирад, ҳар қадар бонус дар он бошад ҳам.

MVP — барои ҳамаи вариантҳо ҳатмист

Бонусҳо — пас аз MVP

• Скелетонҳо ба ҷои калимаи «Боркунӣ…» (блокҳои хокистарӣ дар зери кортаҳо).
• Кэш-и дархостҳои охирин: ҳамон дархост бори дуюм ба шабака намеравад.
• Таймаути дархост тавассути Promise.race ё AbortController бо паёми худӣ.
• Таърихи ҷустуҷӯ ё интихобшудаҳо дар localStorage.
• Такрори худкор ҳангоми хато: то се кӯшиш бо таваққуф.
• Мавзӯи торик бо нигоҳ доштани интихоб.
• Саҳифабандӣ ё тугмаи «Бештар нишон додан» (limit ва skip дар dummyjson).

03 Лоиҳа чӣ тавр баҳо дода мешавад (0–100)

Лоиҳаи хурд аз рӯи шкалаи 0–100 баҳо дода мешавад, чунон ки дар қоидаҳои курс навишта шудааст. Баҳо аз ҳашт меъёр ҷамъ мешавад:

Бонусҳо то +5 хол илова мекунанд, вале натиҷа аз 100 зиёд шуда наметавонад.

Чӣ холҳоро кам мекунад

• Коди худро фаҳмонда наметавонед — дар меъёре, ки қисми нофаҳмо ба он тааллуқ дорад, холҳоро гум мекунед.
• Маълумот «сахт дар код навишта шудааст» ба ҷои дархости ҳақиқӣ — меъёри «fetch ва async/await» 0 мегирад.
• Дар муҳлат супурда нашуд — то −10 хол, бо мувофиқа бо муаллим.
• Код пурра аз донишҷӯи дигар ё аз чат бе фаҳмиш нусха шудааст — 0 барои лоиҳа. Ба якдигар кумак кардан мумкин ва лозим аст, аммо ҳар кас аз они худро менависад ва мефаҳмад.

Ин ба баҳои ниҳоии курс чӣ тавр таъсир мекунад

Барои сертификат бояд ҳарду лоиҳаи хурдро супурд. Кори назоратии №2 — санҷиши алоҳидаи дониш: он нишон медиҳад, ки шумо рамзи ғайримуттаҳидро бе ЗС мефаҳмед, ва бо муаллим таҳлил мешавад (ниг. қисми 11).

04 Таҷзия: лоиҳаро якҷоя бо ЗС ба қисмҳо тақсим мекунем

Лоиҳа бо API аз якумӣ хатарноктар аст: шабака, интизорӣ ва хатоҳо пайдо шуданд, ки «бо фармоиш» такрор намешаванд. Барои ҳамин нақша махсусан муҳим аст. Ғоя ҳамон аст, ки дар дарси 12: аввал қадамҳо, баъд код, ва ҳар қадам натиҷаи намоён дорад. Аммо акнун дар нақша бояд қадамҳои алоҳида барои ҳар ҳолат (loading, error, empty) ва барои ҷойҳои «хатарнок» бошад: дархости аввал, рақобати ҷавобҳо, ҷамъбаст.

Дархости аввал маҷмӯи тасодуфии калимаҳо ё фавран тамоми кодеро медиҳад, ки шумо фаҳмонида наметавонед. Дуюм — нақшае, ки бо он кор кардан мумкин аст. Аммо ин танҳо нусхаи пешакӣ аст. Мисоли нақша пас аз таҳрири шумо:

Мисоли нақша барои варианти Б (≈ 5 соат)

Бо ҷавоби ЗС чӣ кор мекунед — қадам ба қадам

1. Зиёдатиро хат занед. «React-ро пайваст кун», «Redux-ро танзим кун», «сервери худро бинавис» — ба лоиҳаи мо дахл надорад.
2. Тартибро санҷед. Ҳолати error-ро пеш аз он ки худи state бошад, тасвир кардан мумкин нест. Ҳар қадам ба қадамҳои пешини тайёр такя мекунад.
3. Вақтро худатон баҳо диҳед. ЗС суръати шуморо намедонад: баҳои ӯро ба 1.5 зарб кунед. Қадаме, ки аз 40 дақиқа дарозтар аст — тақсим кунед.
4. Ҳар қадам натиҷаи намоён медиҳад. «Бо API фаҳмидан» — қадам нест. «getWeather("Душанбе") ҳарорат дар консол бармегардонад» — қадам аст.
5. Қадамҳоро барои «обуҳавои бад» илова кунед: Offline, ҷавоби 404, натиҷаи холӣ. ЗС аксар вақт онҳоро фаромӯш мекунад — ин соҳаи масъулияти шумост.
6. Нақшаро дар PLAN.md сабт кунед ва иҷрошударо қайд намоед.

const plan = [
  { title: "Разметка и стили", min: 30 },
  { title: "Функция fetch и разбор ответа", min: 40 },
  { title: "Состояния loading / error / empty", min: 40 },
  { title: "Debounce для поиска", min: 25 },
  { title: "Разбивка на модули", min: 30 },
  { title: "Сборка Vite и проверка build", min: 20 },
];

// маҷмӯи дақиқаҳоро ҳисоб кунед ва сатри ниҳоиро чоп намоед

Всего: 185 мин = 3.1 ч

const plan = [
  { title: "Разметка", min: 20, risky: false },
  { title: "Первый запрос к API", min: 40, risky: true },
  { title: "Обработка ошибок сети", min: 35, risky: true },
  { title: "Стили", min: 25, risky: false },
  { title: "Отмена устаревших запросов", min: 30, risky: true },
];

// филтр кунед, нусхаро мураттаб намоед, чоп кунед

Рискованно: Первый запрос к API (40 мин)
Рискованно: Обработка ошибок сети (35 мин)
Рискованно: Отмена устаревших запросов (30 мин)
Рискованных: 3

const plan = [
  { phase: "api", min: 40 },
  { phase: "ui", min: 30 },
  { phase: "api", min: 35 },
  { phase: "build", min: 20 },
  { phase: "ui", min: 25 },
];

// const byPhase = plan.reduce(...)
// console.log(JSON.stringify(byPhase));

{"api":75,"ui":55,"build":20}

05 Гармкунии 1. Ҳолатҳои дархост ва хатоҳои шабака

Ҳар дархост ба шабака дар яке аз чор ҳолат зиндагӣ мекунад: idle (ҳанӯз напурсидаанд), loading (интизорем), success (гирифтем, ва маълумот метавонад ҳам бо мазмун, ҳам холӣ бошад) ва error (нашуд). Қоидаи асосӣ: ҳамаи инҳо дар як объекти state меистанд, ва саҳифа аз он тасвир мешавад, мисли лоиҳаи №1.

const state = {
  status: "loading",   // "idle" | "loading" | "success" | "error"
  items: [],           // маълумот (ҳангоми success)
  error: "",           // матни хато (ҳангоми error)
};

// барои ҳар статус — «экран»-и худ
const screens = {
  idle: "Введите запрос",
  loading: "Загрузка...",
  success: "Показываем данные",
  error: "Что-то пошло не так",
};
console.log(screens[state.status]);

Барои бе интернет машқ кардан мо серверро бо функсияи худамон иваз мекунем: он низ Promise бармегардонад ва бо таъхир ҷавоб медиҳад — айнан мисли fetch, аммо ҳар дафъа яксон.

const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

// «сервер» пас аз 20 мс ҷавоб медиҳад; ба дархости "error" меафтад
async function fakeApi(query) {
  await wait(20);
  if (query === "error") throw new Error("Сеть недоступна");
  return [`${query} 1`, `${query} 2`];
}

async function main() {
  console.log("запрос...");
  const items = await fakeApi("плов");
  console.log("получили:", items.join(", "));
  try {
    await fakeApi("error");
  } catch (err) {
    console.log("ошибка:", err.message);
  }
}
main();

fetch-и ҳақиқӣ: пас аз ҷавоб чиро санҷидан лозим

fetch маккорона сохта шудааст: он танҳо дар сурате «меафтад» (промисро рад мекунад), ки умуман бо сервер алоқа кардан нашуд — шабака нест, домен ёфт нашуд. Аммо ҷавоби 404 Not Found ё 500 Server Error — ин аз нигоҳи fetch ҷавоби муваффақ аст: сервер ҷавоб дод-ку! Барои ҳамин пас аз await fetch(...) ҳамеша response.ok-ро санҷед.

async function getJson(url) {
  const response = await fetch(url);                       // 1. ҷавобро интизор мешавем
  if (!response.ok) {                                      // 2. 404 / 500 — ҳам хато
    throw new Error(`HTTP ${response.status}`);
  }
  return await response.json();                            // 3. таҳлили JSON-ро интизор мешавем
}

async function load() {
  try {
    const data = await getJson("https://jsonplaceholder.typicode.com/users/1");
    console.log(data.name);
  } catch (err) {
    console.log("Ошибка:", err.message);                   // шабака афтод ЁКИ статус на 2xx
  }
}

Дархости ҳақиқиро кӯшиш кунед. Ин ягона блоки саҳифа аст, ки ба шабака мераваду барои ҳамин санҷиши худкор надорад: натиҷа аз API вобаста аст.

async function getJson(url) {
  const response = await fetch(url);
  if (!response.ok) throw new Error(`HTTP ${response.status}`);
  return await response.json();
}

getJson("https://jsonplaceholder.typicode.com/users/1")
  .then((user) => console.log("Пользователь:", user.name))
  .catch((err) => console.log("Ошибка:", err.message));

getJson("https://jsonplaceholder.typicode.com/users/99999")   // чунин чиз нест → 404
  .then((user) => console.log("Пользователь:", user.name))
  .catch((err) => console.log("Ошибка:", err.message));

const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
const fakeFetch = async () => { await wait(10); return { ok: true, json: async () => ({ name: "Плов" }) }; };

async function load() {
  const response = fakeFetch();         // await-ро фаромӯш кардем
  const data = await response.json();   // TypeError: response.json is not a function
  console.log(data.name);
}
load().catch((err) => console.log("Ошибка:", err.message));

Муфассалтар хонед: learn.javascript.ru — Fetch · MDN — Response.ok · learn.javascript.ru — try…catch

function getView(state) {
  // анҷом диҳед
}

const states = [
  { status: "idle", items: [], error: "" },
  { status: "loading", items: [], error: "" },
  { status: "success", items: [], error: "" },
  { status: "success", items: [{ id: 1 }, { id: 2 }], error: "" },
  { status: "error", items: [], error: "Сеть недоступна" },
];
states.forEach((s) => console.log(getView(s)));

Введите запрос
Загрузка...
Ничего не найдено
Найдено: 2
Ошибка: Сеть недоступна

const wait = (ms) => new Promise((r) => setTimeout(r, ms));
const okApi = async (q) => { await wait(10); return [`${q}-1`, `${q}-2`]; };
const badApi = async () => { await wait(10); throw new Error("Сервер упал"); };

// async function loadResults(api, query, onChange) { ... }

const log = (s) => console.log(`[${s.status}] items=${s.items.length} error="${s.error}"`);

async function main() {
  await loadResults(okApi, "плов", log);
  await loadResults(badApi, "плов", log);
}
main();

[loading] items=0 error=""
[success] items=2 error=""
[loading] items=0 error=""
[error] items=0 error="Сервер упал"

const fakeFetch = (url) => new Promise((resolve) => setTimeout(() => {
  if (url.endsWith("/missing")) {
    resolve({ ok: false, status: 404, json: async () => ({ message: "Not Found" }) });
  } else {
    resolve({ ok: true, status: 200, json: async () => ({ title: "Плов" }) });
  }
}, 10));

async function getTitle(url) {
  try {
    const response = fakeFetch(url);
    const data = response.json();
    return data.title;
  } catch (err) {
    return "Ошибка: " + err.message;
  }
}

async function main() {
  console.log(await getTitle("/dishes/1"));
  console.log(await getTitle("/dishes/missing"));
}
main();

Плов
Ошибка: HTTP 404

const delays = { "п": 50, "пл": 10 };
const search = (q) => new Promise((resolve) =>
  setTimeout(() => resolve(`результаты для "${q}"`), delays[q]));

const state = { text: "" };
let latestId = 0;

async function onInput(q) {
  // анҷом диҳед: рақами дархост, await search(q), танҳо ҷавоби тозаро татбиқ кунед
  // ҳангоми татбиқ console.log("применён: " + q)-ро чоп кунед
}

onInput("п");
onInput("пл");
setTimeout(() => console.log(state.text), 100);

применён: пл
результаты для "пл"

06 Гармкунии 2. Debounce, кэш ва таймаут

Агар барои ҳар ҳарфи пахшшуда дархост фиристем, сервер даҳҳо муроҷиати зиёдатӣ мегирад, ва экран милт-милт мекунад. Debounce инро ҳал мекунад: функсия танҳо вақте кор мекунад, ки корбар барои вақти додашуда хомӯш шуд. Ҳар даъвати нав таймерро аз сифр мекунад ва навашро оғоз менамояд.

function debounce(fn, ms) {
  let timer;
  return (...args) => {
    clearTimeout(timer);                           // таймери гузаштаро бекор кардем
    timer = setTimeout(() => fn(...args), ms);     // навашро оғоз кардем
  };
}

const search = debounce((q) => console.log("запрос:", q), 30);
search("п");
search("пл");
search("плов");      // танҳо ҳамин даъват кор мекунад, пас аз 30 мс

Модулҳо ва ҷамъбаст: чӣ дар куҷост

Дар лоиҳаи Vite код дар якчанд файл зиндагӣ мекунад — модулҳои ES. Ҳар файл он чизеро, ки дигарон лозим доранд, экспорт мекунад (export) ва бегонаро import менамояд (import). Қоидаи хуби сарҳадҳо: api дар бораи DOM намедонад, ui дар бораи шабака намедонад, main онҳоро пайваст мекунад.

product-search/
├─ index.html          ← подключает <script type="module" src="/src/main.js">
├─ package.json        ← скрипты dev / build / preview
├─ src/
│  ├─ api.js           ← только fetch и разбор ответа
│  ├─ ui.js            ← только DOM: render(state)
│  ├─ utils.js         ← debounce и мелкие помощники
│  ├─ main.js          ← состояние, события, связывает всё
│  └─ style.css
└─ dist/               ← появляется после npm run build (в Git не кладём)

export async function searchProducts(query, signal) {
  const url = `https://dummyjson.com/products/search?q=${encodeURIComponent(query)}&limit=10`;
  const response = await fetch(url, { signal });
  if (!response.ok) throw new Error(`HTTP ${response.status}`);
  const data = await response.json();
  return data.products;
}

import { searchProducts } from "./api.js";
import { render } from "./ui.js";
import { debounce } from "./utils.js";

const state = { status: "idle", items: [], error: "" };
// … ҳодисаи input → debounce(search, 400) → searchProducts → render(state)

npm create vite@latest product-search -- --template vanilla
cd product-search
npm install
npm run dev        # режим разработки, адрес вида http://localhost:5173
npm run build      # собирает проект в папку dist
npm run preview    # открывает собранную версию — проверьте её перед защитой

Муфассалтар хонед: learn.javascript.ru — модулҳо · learn.javascript.ru — Promise API · MDN — AbortController

// function debounce(fn, ms) { ... }

const calls = [];
const search = debounce((q) => { calls.push(q); console.log("запрос:", q); }, 30);

search("п");
search("пл");
search("плов");
console.log("сразу:", calls.length);

setTimeout(() => search("чой"), 80);
setTimeout(() => console.log("всего запросов:", calls.length), 150);

сразу: 0
запрос: плов
запрос: чой
всего запросов: 2

const wait = (ms) => new Promise((r) => setTimeout(r, ms));
let apiCalls = 0;
const api = async (q) => { apiCalls++; await wait(10); return q.toUpperCase(); };

// function makeCached(api) { ... }

const cached = makeCached(api);
async function main() {
  console.log(await cached("Плов"));
  console.log(await cached("  плов "));
  console.log(await cached("чой"));
  console.log("вызовов API:", apiCalls);
}
main();

ПЛОВ
ПЛОВ
ЧОЙ
вызовов API: 2

const apiData = {
  total: 4,
  products: [
    { id: 1, title: "Телефон", price: 2500, rating: 4.46, stock: 5 },
    { id: 2, title: "Наушники", price: 300, rating: 3.9, stock: 0 },
    { id: 3, title: "Чехол", price: 50, rating: 4.8, stock: 20 },
    { id: 4, title: "Зарядка", price: 120, rating: 4.1, stock: 7 },
  ],
};

// function toCards(data) { ... }

const cards = toCards(apiData);
cards.forEach((c) => console.log(c));
console.log(cards.length, apiData.products[0].title);

Чехол — 50 сом. (★ 4.8)
Зарядка — 120 сом. (★ 4.1)
Телефон — 2500 сом. (★ 4.5)
3 Телефон

const wait = (ms) => new Promise((r) => setTimeout(r, ms));
const fast = () => wait(20).then(() => "быстро");
const slow = () => wait(200).then(() => "медленно");

// function withTimeout(promise, ms) { ... }

async function main() {
  for (const fn of [fast, slow]) {
    try {
      console.log(await withTimeout(fn(), 100));
    } catch (err) {
      console.log("Ошибка:", err.message);
    }
  }
}
main();

быстро
Ошибка: Таймаут

07 Санҷиш пеш аз ҳимоя: package.json ва ҷамъбаст

Вақте npm run build-ро иҷро мекунед, Vite фармони build-ро дар бахши scripts-и файли package.json меёбад, ҳамаи модулҳоро ба якчанд файл ҷамъ мекунад ва ба папкаи dist мегузорад. Маҳз ҳамин папкаро ба хостинг мегузоранд. Дар .gitignore бояд node_modules ва dist бошанд: онҳоро дар репозиторий нигоҳ доштан лозим нест, бо фармонҳои npm install ва npm run build барқарор мешаванд.

const text = `{
  "name": "product-search",
  "private": true,
  "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" },
  "devDependencies": { "vite": "^7.0.0" }
}`;

// JSON-ро таҳлил кунед ва натиҷаро чоп намоед

npm run dev → vite
npm run build → vite build
npm run preview → vite preview
Зависимостей: 1

08 Қолаби ибтидоӣ: ҷустуҷӯ бо ҳолатҳо

Дар зер — скелети барнома бо ҷустуҷӯ дар майдончаи озмоишӣ. То ки натиҷа ҳамеша яксон бошад, ба ҷои сервери ҳақиқӣ дар он «сохта» (fakeSearch) истифода шудааст; ва дар паҳлӯ realSearch бо fetch-и ҳақиқӣ меистад — дар лоиҳаи худ шумо онро бо як сатр ҷойгузин мекунед. Код ба блокҳо бо ҳамон тартибе тақсим шудааст, ки шарҳ додани он дар ҳимоя қулай аст: «сервер» → ҳолат → DOM ва тасвир → ҷустуҷӯ → ҳодисаҳо.

1. «Сервер». Маълумот ва функсияҳое, ки промис бармегардонанд: сохта ва ҳақиқӣ.
2. Ҳолат. Як объекти { status, items, error } ва ҳисобкунаки дархостҳои latestId.
3. Тасвир. render() интерфейсро аз state месозад. Дигар касе ба DOM даст намезанад.
4. Ҷустуҷӯ. search(query): loading → success ё error, ҷавобҳои кӯҳна нодида гирифта мешаванд.
5. Ҳодисаҳо. Майдони ворид бо debounce.

▶ Иҷро кардан-ро пахш кунед: худсанҷии поён чоп мекунад, ки ҳоло чӣ кор намекунад. Вазифаи шумо — чор қайди TODO.

<main class="app">
  <h1>Поиск товаров</h1>
  <input id="q" placeholder="Например: телефон" autocomplete="off">
  <p id="status" class="status"></p>
  <ul id="results"></ul>
</main>

.app { max-width: 420px; margin: 0 auto; font-family: system-ui, sans-serif; }
h1 { font-size: 22px; margin: 0 0 12px; }
input { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #c7ccd6; border-radius: 8px; font: inherit; }
.status { color: #5b6477; min-height: 1.4em; }
.status[data-status="error"] { color: #d1344f; }
.status[data-status="loading"] { color: #1f6feb; }
ul { list-style: none; padding: 0; margin: 0; }
li { display: flex; justify-content: space-between; padding: 8px 4px; border-bottom: 1px solid #e6e9f0; }
li .price { color: #5b6477; }

// ===== 1. «Сервер» =====
const PRODUCTS = [
  { id: 1, title: "Телефон Samsung", price: 2500 },
  { id: 2, title: "Телевизор LG", price: 4200 },
  { id: 3, title: "Ноутбук Acer", price: 5100 },
  { id: 4, title: "Наушники Sony", price: 600 },
  { id: 5, title: "Чехол для телефона", price: 50 },
  { id: 6, title: "Зарядка для телефона", price: 120 },
  { id: 7, title: "Клавиатура", price: 180 },
  { id: 8, title: "Мышь", price: 90 },
];
const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

// сервери сохта: пас аз 60 мс ҷавоб медиҳад; ба дархости "error" меафтад
async function fakeSearch(query) {
  await wait(60);
  if (query === "error") throw new Error("Сеть недоступна");
  const q = query.trim().toLowerCase();
  return PRODUCTS.filter((p) => p.title.toLowerCase().includes(q));
}

// сервери ҳақиқӣ — дар лоиҳаи худ searchApi-ро ба он иваз кунед
async function realSearch(query) {
  const url = `https://dummyjson.com/products/search?q=${encodeURIComponent(query)}&limit=10`;
  const response = await fetch(url);
  if (!response.ok) throw new Error(`HTTP ${response.status}`);
  const data = await response.json();
  return data.products;
}
const searchApi = fakeSearch;

// ===== 2. Ҳолат =====
let state = { status: "idle", items: [], error: "" };   // "idle" | "loading" | "success" | "error"
let latestId = 0;                                        // рақами дархости охирин
const DEBOUNCE_MS = 40;

function setState(patch) {
  state = { ...state, ...patch };
  render();
}

// TODO 1: debounce — fn-ро танҳо пас аз таваққуф дар ms миллисония даъват мекунад
function debounce(fn, ms) {
  return fn;
}

// TODO 2: матни статус аз рӯи ҳолат:
// idle → "Введите запрос", loading → "Загрузка...", error → "Ошибка: МАТН",
// success: холӣ → "Ничего не найдено", вагарна → "Найдено: N"
function getStatusText(s) {
  return "";
}

// ===== 3. DOM ва тасвир =====
const input = document.querySelector("#q");
const statusEl = document.querySelector("#status");
const list = document.querySelector("#results");

function createItem(product) {
  const li = document.createElement("li");
  const name = document.createElement("span");
  name.textContent = product.title;
  const price = document.createElement("span");
  price.className = "price";
  price.textContent = product.price + " сом.";
  li.append(name, price);
  return li;
}

function render() {
  statusEl.textContent = getStatusText(state);
  statusEl.dataset.status = state.status;
  list.replaceChildren();                                // рӯйхатро тоза кардем
  state.items.forEach((product) => list.append(createItem(product)));
}

// ===== 4. Ҷустуҷӯ =====
// TODO 3: дархости холӣ (пас аз trim) → setState idle бе муроҷиат ба сервер.
// Вагарна: рақами дархости худӣ, status "loading", await searchApi, баъд "success" ё "error".
// Агар ҳангоми интизорӣ дархости нав оғоз шуд (рақам кӯҳна шуд) — натиҷаро партоед.
async function search(query) {
}

// ===== 5. Ҳодисаҳо =====
// TODO 4: ҳангоми ҳар ворид кардан search(input.value)-ро даъват кунед, вале тавассути debounce(…, DEBOUNCE_MS)
input.addEventListener("input", () => {
});

render();

// ===== Худсанҷӣ барои вазифаи 8.1 (ба лоиҳаи худ нусха накунед) =====
(async () => {
  const type = (text) => {
    input.value = text;
    input.dispatchEvent(new Event("input"));
  };
  console.log("старт:", statusEl.textContent);
  type("т"); type("те"); type("тел");
  console.log("сразу после ввода:", statusEl.textContent);
  await wait(70);
  console.log("через 70 мс:", statusEl.textContent);
  await wait(100);
  console.log("ответ:", statusEl.textContent, "|", list.children.length);
  type("zzz");
  await wait(200);
  console.log("пусто:", statusEl.textContent);
  type("error");
  await wait(200);
  console.log("ошибка:", statusEl.textContent);
  type("   ");
  await wait(100);
  console.log("очистили:", statusEl.textContent);
})();

старт: Введите запрос
сразу после ввода: Введите запрос
через 70 мс: Загрузка...
ответ: Найдено: 4 | 4
пусто: Ничего не найдено
ошибка: Ошибка: Сеть недоступна
очистили: Введите запрос

Чӣ тавр қолабро ба лоиҳаи худ гузаронидан

1. Лоиҳаро дар Vite эҷод кунед (қисми 06) ва кодро ба модулҳо тақсим намоед: fakeSearch/realSearch — ба api.js, debounce — ба utils.js, getStatusText ва render — ба ui.js, ҳолат ва ҳодисаҳо — ба main.js.
2. Ба ҳар файл export/import илова кунед. render акнун state-ро ҳамчун аргумент мегирад — тағйирёбандаҳои глобалӣ байни модулҳо намегузаранд.
3. fakeSearch-ро ба realSearch иваз кунед ва дар ҷадвали Network боварӣ ҳосил намоед, ки дархостҳо ҳақиқианд.
4. Блоки худсанҷиро хориҷ кунед.
5. Агар шумо аллакай лоиҳаи худии дарсҳои 15–17-ро дошта бошед — онро напартоед, балки бо схемаи «ҳолат → render → search → ҳодисаҳо» муқоиса кунед.

09 Амал дар дарс: ревью, ҳимояҳо, кори назоратӣ

Имрӯз машғулот аз муқаррарӣ дигартар сохта шудааст: лоиҳаҳо қариб тайёранд, барои ҳамин вақт ба санҷиш, ҳимоя ва кори назоратӣ сарф мешавад. Мувофиқи нақша амал мекунем.

1. 0–10 дақ · Санҷиши охирин. Чек-листи қисми 07: npm run build, preview, Offline, Slow 3G. Муаллим тартиби ҳимояҳоро тасдиқ мекунад.
2. 10–30 дақ · Code review дар ҷуфтҳо. Барои ҳар лоиҳа 10 дақиқа. Ревьюер аз рӯи чек-листи поён мегузарад ва мулоҳизаҳоро сабт мекунад, муаллиф гӯш мекунад. Баъд ҷой иваз мекунед.
3. 30–60 дақ · Ҳимояҳо. Ҳар кадом — 5 дақиқа ва як дақиқа барои иваз кардан. Дигарон гӯш мекунанд ва савол медиҳанд. Имрӯз натавонистед — дар аввали машғулоти оянда ҳимоя мекунед.
4. 60–90 дақ · Кори назоратии №2. 30 дақиқа, барои ҳама якбора, бе ЗС. Тафсилот — дар қисми 11. Таҳлили хатоҳои маъмул — дар охир.

Code review: чек-листи ревьюер

Code review — ин вақте аст, ки як таҳиягар кодро аз таҳиягари дигар пеш аз он ки «ба олам барояд» мехонад. На имтиҳон ва на ҷустуҷӯи гунаҳкор: нигоҳи тоза он чизеро мебинад, ки муаллиф дигар пай намебарад. Формулаи мулоҳиза: дар куҷо (файл ва сатр) → чӣ мебинам → чаро муҳим аст → пешниҳод (беҳтараш бо савол).

Муфассалтар хонед: learn.javascript.ru — ислоҳи хато дар браузер

function applyResult(state, result) {
  if (result.error) {
    return { ...state, status: "error", error: result.error };
  }
  return { ...state, status: "success", items: result.items };
}

let s = { status: "idle", items: [], error: "" };
s = applyResult(s, { items: ["плов", "чой"] });
console.log(s.status, s.items.length, JSON.stringify(s.error));
s = applyResult(s, { error: "Сеть недоступна" });
console.log(s.status, s.items.length, JSON.stringify(s.error));
s = applyResult(s, { items: ["самбуса"] });
console.log(s.status, s.items.length, JSON.stringify(s.error));

success 2 ""
error 0 "Сеть недоступна"
success 1 ""

function badge(status) {
  if (status === "loadin") return "⏳ Загрузка";
  if (status === "error") return "⚠ Ошибка";
  if (status === "success") return "✓ Готово";
  return "…";
}

console.log(badge("idle"));
console.log(badge("loading"));
console.log(badge("error"));
console.log(badge("success"));

…
⏳ Загрузка
⚠ Ошибка
✓ Готово

10 Ҳимоя: 5 дақиқае, ки 15 холро ҳал мекунад

Ҳимоя — ин ҳикояи кӯтоҳ дар бораи он, ки шумо чӣ кардед ва ин чӣ тавр кор мекунад. На презентатсия ва на бозпурсӣ: бояд нишон диҳед, ки лоиҳа аз они шумост ва шумо онро мефаҳмед. Барои ҳамин ба он 15 хол аз 100 ҷудо шудааст. Дар ин ҷо шумо на танҳо «вақте ҳама хуб аст», балки «обуҳавои бад»-ро ҳам нишон медиҳед: Offline ва натиҷаи холӣ.

Сенария барои 5 дақиқа

Саволҳои маъмул ва дар бораи чӣ гуфтан лозим

async/await чист ва аз then чӣ фарқ дорад?

Ин ҳамон Promise аст, аммо код аз боло ба поён хонда мешавад. await функсияро то ҷавоб «таваққуф мекунад», бе қуфл кардани саҳифа.

Барои чӣ response.ok лозим аст? Магар fetch дар 404 намеафтад?

Не: fetch танҳо ҳангоми мушкили шабака рад мекунад. Ҷавоби 404/500 — «муваффақ» аст, зеро сервер ҷавоб дод. Статусро худатон бояд санҷед.

Барои чӣ await response.json(), ин ахир аллакай ҷавоб аст?

Сарлавҳаҳо омаданд, аммо баданаи ҷавоб алоҳида ва ҳамчунин ғайримуттаҳид хонда мешавад.

Debounce чист ва барои чӣ дар ин ҷо лозим аст?

Функсия пас аз таваққуф кор мекунад. Бе он ҳар ҳарф — дархост: сарбории зиёдатӣ ва экрани «милтилдеанда».

Рақобати ҷавобҳо чист ва шумо онро чӣ тавр ҳал кардед?

Ҷавоб ба дархости кӯҳна метавонад дертар аз ҷавоб ба дархости нав расад ва онро бипӯшонад. Ҳал: рақами дархост (танҳо тозаро татбиқ мекунем) ё AbortController.

Ҳолатҳои шумо чӣ тавр сохта шудаанд?

Як объекти state бо status, items, error; render аз он тасвир мекунад. Маҷмӯи парчамҳое нест, ки метавонанд бо якдигар зиддият кунанд.

Дар api.js чӣ ҳаст, дар ui.js чӣ, ва барои чӣ ин тавр?

Дар api.js танҳо шабака, дар ui.js танҳо DOM, main.js пайваст мекунад. Ҳамин тавр ҳар қисмро алоҳида тағйир додан ва санҷидан мумкин аст.

npm run build чӣ кор мекунад ва дар dist чӣ меистад?

Vite модулҳоро ба файлҳои барои хостинг тайёр ҷамъ мекунад. dist-ро ба Git намегузоранд: онро аз нав ҷамъ кардан мумкин аст.

ЗС-ро дар куҷо истифода кардед? Ин сатрро шарҳ диҳед.

Ростқавлона бигӯед, барои чӣ (нақша, шарҳи хато, ревью) ва дар куҷо ӯ хато кард — қисми 12. Ҳар сатрро бояд бо суханони худатон шарҳ диҳед.

Маслиҳатҳо барои омодагӣ

• Намоишро бо овози баланд бо секундомер такрор кунед. Offline дар DevTools → Network → «No throttling» → Offline фаъол мешавад.
• Файлҳои даркориро пешакӣ кушоед, ҳуруфро калон кунед: гурӯҳ бояд кодро бубинад.
• Зиёдатиро хориҷ кунед: console.log, коди шарҳшуда.
• Узр наовардед («натавонистам»). Беҳтараш: «ин нест, зеро… инак ман онро чӣ тавр илова мекардам».

const defence = {
  ok: "Проверяю response.ok, потому что ...",
  states: "",
  debounce: "",
  race: "",
  ai: "",
};

console.log(Object.keys(defence).length + " ответов подготовлено");

11 Кори назоратии №2 · версияи озмоишӣ

const students = [
  { name: "Алишер", age: 22, address: { city: "Душанбе" } },
  { name: "Мадина", age: 19, address: {} },
  { name: "Фаррух", age: 25, address: { city: "Худжанд" } },
];

// коди шумо

Алишер (22) — Душанбе
Мадина (19) — не указан
Фаррух (25) — Худжанд

const prices = { плов: 25, чой: 5, самбуса: 6 };

// коди шумо

Сумма: 36
Дороже всего: плов (25)

const orders = [
  { city: "Душанбе", sum: 100 },
  { city: "Худжанд", sum: 80 },
  { city: "Душанбе", sum: 50 },
];

// коди шумо

{"Душанбе":150,"Худжанд":80}
Городов: 2

const wait = (ms) => new Promise((r) => setTimeout(r, ms));
const getName = () => wait(10).then(() => "Алишер");

async function greet() {
  const name = getName();
  console.log(`Привет, ${name}!`);
  return name.length;
}

greet().then((len) => console.log("Длина имени:", len));

Привет, Алишер!
Длина имени: 6

const wait = (ms) => new Promise((r) => setTimeout(r, ms));
const api = {
  user: async (id) => { await wait(10); return { id, name: "Мадина", teamId: 7 }; },
  team: async (teamId) => { await wait(10); return { id: teamId, title: "Frontend-17", members: 12 }; },
};

// async function showProfile(id) { ... }

showProfile(1).then(() => console.log("готово"));

Мадина — Frontend-17 (12 чел.)
готово

const delays = { 1: 30, 2: 5, 3: 15 };
const cities = { 1: "Душанбе", 2: "Худжанд", 3: "Бохтар" };
const getCity = (id) => new Promise((resolve) => setTimeout(() => {
  console.log("пришёл", id);
  resolve(cities[id]);
}, delays[id]));

// function loadAll(ids) { ... }

loadAll([1, 2, 3]).then((names) => console.log(names.join(", ")));

пришёл 2
пришёл 3
пришёл 1
Душанбе, Худжанд, Бохтар

const wait = (ms) => new Promise((r) => setTimeout(r, ms));
const fakeFetch = async (url) => {
  await wait(5);
  if (url === "/users") return { ok: true, status: 200, json: async () => [{ name: "Алишер" }] };
  if (url === "/nope") return { ok: false, status: 404, json: async () => ({}) };
  return { ok: false, status: 500, json: async () => ({}) };
};

// async function getJson(url) { ... }

async function main() {
  for (const url of ["/users", "/nope", "/crash"]) {
    try {
      const data = await getJson(url);
      console.log("OK:", data.length);
    } catch (err) {
      console.log("Ошибка:", err.message);
    }
  }
}
main();

OK: 1
Ошибка: HTTP 404
Ошибка: HTTP 500

const wait = (ms) => new Promise((r) => setTimeout(r, ms));
let finished = 0;

// async function safeLoad(task) { ... }

const tasks = [
  async () => { await wait(5); return [1, 2, 3]; },
  async () => { await wait(5); throw new Error("Сервер недоступен"); },
  async () => { await wait(5); throw new TypeError("Неверный формат"); },
];

async function main() {
  for (const task of tasks) {
    const result = await safeLoad(task);
    console.log(result.ok ? `данные: ${result.data.length}` : `${result.name}: ${result.error}`);
  }
  console.log("завершено:", finished);
}
main();

данные: 3
Error: Сервер недоступен
TypeError: Неверный формат
завершено: 3

const wait = (ms) => new Promise((r) => setTimeout(r, ms));
let attempt = 0;
const flaky = async () => {
  attempt++;
  await wait(5);
  if (attempt < 3) throw new Error(`сбой ${attempt}`);
  return "данные получены";
};
const alwaysBad = async () => { throw new Error("навсегда"); };

// async function retry(fn, times) { ... }

async function main() {
  console.log(await retry(flaky, 5));
  try {
    await retry(alwaysBad, 2);
  } catch (err) {
    console.log("Не вышло:", err.message);
  }
}
main();

Попытка 1
Попытка 2
Попытка 3
данные получены
Попытка 1
Попытка 2
Не вышло: навсегда

const wait = (ms) => new Promise((r) => setTimeout(r, ms));
const withTimeout = (promise, ms) => Promise.race([
  promise,
  new Promise((_, reject) => setTimeout(() => reject(new Error("Таймаут")), ms)),
]);

const apis = {
  ok: async () => { await wait(10); return [1, 2, 3]; },
  empty: async () => { await wait(10); return []; },
  slow: async () => { await wait(300); return [1]; },
  bad: async () => { await wait(10); throw new Error("Сеть недоступна"); },
};

// async function load(api, onChange) { ... }

async function main() {
  for (const name of ["ok", "empty", "slow", "bad"]) {
    const log = [];
    await load(apis[name], (status) => log.push(status));
    console.log(name + ": " + log.join(" > "));
  }
}
main();

ok: loading > success:3
empty: loading > empty
slow: loading > error:Таймаут
bad: loading > error:Сеть недоступна

12 Таҳлил: ЗС дар куҷо вақтро сарфа кард ва дар куҷо аз роҳ бурд

Ин блоки ЗС-и дарс аст: пас аз ду лоиҳа муҳим аст, ки на танҳо «ЗС-ро истифода баред», балки қимати ҳақиқии онро донед. Аксар вақт ба назар мерасад, ки ЗС корро тезонд, баъд шумо як соат хатоиро дар коди бегона ва нофаҳмо меҷустед. Баръакс низ мешавад: ЗС дар се дақиқа он чизро шарҳ дод, ки шумо як шом сарф мекардед. Барои фарқ кардани якдигар на эҳсосот, балки сабтҳо лозиманд.

Таҳлили сохторнок: қолаб

3–5 эпизод-ро аз лоиҳа интихоб кунед, ки дар он ба ЗС муроҷиат кардед. Барои ҳар кадом як сатри ҷадвалро пур кунед. Мисол (варианти Б, обуҳаво):

Ва акнун — қолаб барои README-и шумо. Онро нусха бардоред ва бо эпизодҳои худатон пур кунед:

## ИИ в проекте: где помог, где увёл в сторону

### Эпизод 1: <что делал>
- Что просил (коротко): …
- Что получил: …
- Итог: ✅ сэкономил / ⚖ частично / ❌ увёл в сторону
- Минуты: сэкономил … / потерял …
- Как проверил результат: …
- Вывод для себя (правило): …

### Эпизод 2: …

## Итог
- Где ИИ реально сэкономил время: …
- Где он увёл в сторону и почему я не заметил сразу: …
- Что я теперь делаю иначе: …

Се савол барои худсанҷӣ

1. Оё ман ин кодро сатр ба сатр шарҳ дода метавонам? Агар не — ин қарз аст: шумо чизи бегонаро гирифтед ва нафаҳмидед. Ё таҳлил кунед, ё аз нав бинависед.
2. Аз куҷо фаҳмидам, ки ҷавоби ЗС дуруст аст? «Кор кард» — санҷиши суст. Хуб: ба таври қасдӣ вайрон кардам (Offline, 404, дархости холӣ) ва боварӣ ҳосил намудам, ки рафтор бомаъност.
3. Бе ЗС чӣ мекардам — ва ин чӣ қадар арзиш дошт? Баҳои ростқавлона кумак мекунад, ки бифаҳмем, фоида дар куҷо воқеӣ аст ва дар куҷо — худфиребӣ.

«Аз роҳ бурданҳои» маъмул дар лоиҳаҳо бо API

Муфассалтар хонед: MDN — ислоҳи хатои JavaScript

const episodes = [
  { task: "разметка карточек", saved: 25, lost: 0 },
  { task: "запрос к API", saved: 15, lost: 10 },
  { task: "debounce", saved: 10, lost: 0 },
  { task: "обработка ошибок", saved: 5, lost: 40 },
  { task: "README", saved: 15, lost: 0 },
];

// ҳисоб кунед ва чор сатрро чоп намоед

Сэкономил: 70 мин
Потерял: 50 мин
Итого: +20 мин
Главная ловушка: обработка ошибок

13 Вазифаи хонагӣ

Лоиҳаро аз рӯи мулоҳизаҳои ревью ва ҳимоя такмил диҳед, таҳлили «ЗС дар лоиҳа»-ро ороиш диҳед ва оид ба кори назоратӣ кор бар хатоҳо кунед.

Чӣ кор кардан лозим

• ☐ Мулоҳизаҳои ревью ва ҳимояро, ки қабул кардед, ислоҳ кунед.
• ☐ Ҳамаи бандҳои MVP-ро аз қисми 02 санҷед ва чек-листи ревьюерро аз рӯи лоиҳаи худ боз як бор гузаред; npm run build бе хато.
• ☐ console.log-ҳои зиёдатӣ, коди шарҳшуда ва функсияҳои мурдаро хориҷ кунед.
• ☐ Ба README бахши «ЗС дар лоиҳа»-ро аз рӯи қолаби қисми 12 илова кунед (3–5 эпизод ва хулоса — бо суханони худатон).
• ☐ Репозиторийро навсозӣ кунед: оммавӣ, README бо скриншот, на камтар аз 5 commit-и бомаъно, node_modules ва dist бор нашудаанд.
• ☐ Кор бар хатоҳо: ҳар вазифаи кори назоратии озмоиширо, ки ҳал накардед ё бо хато ҳал кардед, аз нав ҳал кунед ва бо суханони худатон шарҳ диҳед, ки хато дар чӣ буд (1–2 ҷумла дар шарҳ).

Чӣ супоридан лозим

Истиноди репозиторийро ба чати гурӯҳ (Telegram) фиристед. Дар паём нависед: варианти лоиҳа (А, Б ё В), кадом API-ро истифода кардед, пас аз ревью чӣ илова кардед, кадом бонус сохтед, ва рӯйхати вазифаҳои кори назоратӣ, ки аз нав кардед.

Вазифаи хонагӣ чӣ тавр баҳо дода мешавад (0–10)

Ин баҳо барои вазифаи хонагии дарс аст (0–10). Баҳо барои лоиҳаи хурд (0–100) аз рӯи ҷадвали қисми 03 гузошта мешавад ва алоҳида ҳисоб карда мешавад.