DOM: ҷустуҷӯ ва тағйири унсурҳо

01 DOM чист

Шумо HTML менависед — ин матни оддӣ дар файл аст. Вақте браузер саҳифаро мекушояд, ин матнро мехонад ва аз он дарахти объектҳо-ро месозад. Ин дарахт DOM — Document Object Model, «модели объектии ҳуҷҷат» ном дорад. Ҳар тег ба объект табдил меёбад, ки хосиятҳо (матн, классҳо, андозаҳо) ва методҳо дорад. Маҳз бо ҳамин объектҳо JavaScript кор мекунад.

Инак саҳифаи оддӣ ва дарахте, ки аз он ҳосил мешавад:

<body>
  <h1>Меню</h1>
  <ul class="menu">
    <li>Самбуса</li>
    <li>Курутоб</li>
  </ul>
</body>

document

Решаи тамоми дарахт ва «дари даромад» ба саҳифа. Тавассути он шумо унсурҳоро меҷӯед: document.querySelector(...).

Унсур

Объекти мувофиқ ба тег: <h1>, <li>, <div>. Маҳз онҳоро мо меҷӯем, тағйир медиҳем, эҷод мекунем ва нест мекунем.

Волидайн ва кӯдакон

<ul> — волидайни ду <li>. Ду <li> — ҳамсоя (siblings).

Гиреҳи матнӣ

Порчаи матн дар дохили унсур. Фосилаҳо ва гузаришҳои сатр байни тегҳо — низ гиреҳҳои матнианд.

DOM-ро бо чашми худ чӣ тавр дидан

Ягон сайтро кушоед, F12-ро пахш кунед ва ба ҷадвалчаи Elements гузаред. Ин маҳз DOM-и зинда аст: шумо дарахтро мебинед, ба унсурҳо клик карда метавонед, матнро бо ду клик тағйир диҳед, тегҳоро кашед — ва саҳифа фавран вокуниш нишон медиҳад. Худи файл ҳангоми ин тағйир намеёбад. Унсури дар Elements интихобшуда дар консол чун $0 дастрас аст.

Дар дарахт мегардем

Ҳар унсур «тирҳо» ба гиреҳҳои ҳамсоя дорад. Онҳо вақте ба кор меоянд, ки як унсур ёфт шуд ва ба ҳамсояҳо расидан лозим аст:

<ul class="menu">
  <li>Самбуса</li>
  <li>Курутоб</li>
  <li>Шакароб</li>
</ul>

// body.firstElementChild — унсури аввали ҳамбандии мо, яъне <ul>
const menu = document.body.firstElementChild;

console.log(menu.tagName);                      // UL
console.log(menu.children.length);              // 3
console.log(menu.firstElementChild.textContent); // Самбуса
console.log(menu.lastElementChild.textContent);  // Шакароб

const second = menu.children[1];                 // кӯдакон мисли массив меистанд: 0, 1, 2
console.log(second.textContent);                 // Курутоб
console.log(second.previousElementSibling.textContent); // Самбуса
console.log(second.parentElement.tagName);       // UL

textContent — матни дохили унсур. Муфассалтар дар бораи он — дар бахши сеюм, ҳоло танҳо истифода баред.

const box = document.createElement("div");
box.innerHTML = `
  <p>Один</p>
  <p>Два</p>
`;

console.log(box.children.length);    // → 2 — ду банд
console.log(box.childNodes.length);  // → 5 — ду банд ва се гиреҳи матнии «холӣ»

Муфассалтар хонед: learn.javascript.ru — Дарахти DOM · Ҳаракат дар унсурҳои DOM

<ul>
  <li>Нон</li>
  <li>Сомса</li>
  <li>Чой</li>
  <li>Мева</li>
</ul>

const list = document.body.firstElementChild; // ин <ul> аст

// 1) рӯйхат чанд кӯдак дорад
// 2) матни кӯдаки аввал
// 3) матни кӯдаки охирин

4
Нон
Мева

<div class="group">
  <h2>Группа JS-12</h2>
  <p>Преподаватель: Шахром</p>
  <p>Студентов: 12</p>
</div>

const group = document.body.firstElementChild;
const title = group.firstElementChild;

console.log(title.tagName);
console.log(title.nextElementSibling.textContent);
console.log(title.nextElementSibling.nextElementSibling.textContent);
console.log(title.parentElement.tagName);
console.log(group.children.length);

// сатри шашум — аз они шумо

H2
Преподаватель: Шахром
Студентов: 12
DIV
3
Преподаватель: Шахром

<ul>
  <li>Душанбе</li>
  <li>Худжанд</li>
  <li>Бохтар</li>
</ul>

const list = document.body.firstElementChild;

// childNodes.length
// children.length
// давраи for...of бар list.children — матни ҳар шаҳрро баровед

7
3
Душанбе
Худжанд
Бохтар

02 Ҷустуҷӯи унсурҳо: querySelector

Барои чизеро дар саҳифа тағйир додан, аввал бояд ин «чиз»-ро ёфт. Барои ҷустуҷӯ дар JavaScript-и муосир қариб ҳамеша ду метод кофист. Асосӣ: дар онҳо шумо селектори оддии CSS-ро менависед — ҳамон, ки дар файли услубҳо ҳаст. Забони нав омӯхтан лозим нест.

document.querySelector(селектор)

Аввалин унсури мувофиқро бармегардонад. Агар чизе ёфт нашавад — null.

document.querySelectorAll(селектор)

Рӯйхати ҳамаи унсурҳои мувофиқро (NodeList) бармегардонад. Агар чизе набошад — рӯйхати холӣ, на null.

<h1 id="title">Чайхона «Сомон»</h1>
<ul class="menu">
  <li class="item">Курутоб</li>
  <li class="item">Оши палав</li>
  <li class="item hot">Шакароб</li>
</ul>

const title = document.querySelector("#title");        // аз рӯи id
const first = document.querySelector(".item");         // аз рӯи класс — аввалини се
const hot = document.querySelector(".item.hot");       // ду класс якбора
const all = document.querySelectorAll(".item");        // ҳар се

console.log(title.textContent);   // Чайхона «Сомон»
console.log(first.textContent);   // Курутоб
console.log(hot.textContent);     // Шакароб
console.log(all.length);          // 3

Кадом селекторҳоро навиштан мумкин аст

NodeList: ба массив монанд аст, аммо массив нест

querySelectorAll NodeList бармегардонад. Он .length дорад, ба унсурҳо бо индекс муроҷиат кардан мумкин аст, онро тавассути for...of ва forEach гузаштан мумкин аст. Аммо методҳои map, filter ва reduce надорад. Агар лозим бошанд — ба массиви воқеӣ табдил медиҳем:

const box = document.createElement("div");
box.innerHTML = `<p class="n">10</p><p class="n">20</p><p class="n">30</p>`;

const nodes = box.querySelectorAll(".n");

console.log(nodes.length);         // → 3
console.log(nodes[1].textContent); // → 20

nodes.forEach(p => console.log("p:", p.textContent));   // forEach ҳаст

const numbers = Array.from(nodes).map(p => Number(p.textContent)); // map — танҳо дар массив
// ҳамон чиз: [...nodes].map(...)
console.log(numbers);              // → [10, 20, 30]

На дар тамоми саҳифа, балки дар дохили унсур меҷӯем

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

<div class="card"><span class="name">Шапка</span> — <span class="price">60</span></div>
<div class="card"><span class="name">Шарф</span> — <span class="price">45</span></div>

const cards = document.querySelectorAll(".card");

for (const card of cards) {
  const name = card.querySelector(".name").textContent;   // танҳо дар дохили card меҷӯем
  const price = card.querySelector(".price").textContent;
  console.log(name + ": " + price);
}

Методҳои кӯҳна низ ҳастанд: getElementById("title"), getElementsByClassName, getElementsByTagName. Онҳо кор мекунанд, ва шумо онҳоро дар коди бегона вомехӯред, аммо querySelector универсалтар аст — як усулро дар хотир доштан кифоя аст.

const price = document.querySelector(".price"); // дар саҳифа чунин унсур нест → null
console.log(price);                              // → null
console.log(price.textContent);                  // ✖ TypeError: Cannot read properties of null

Дар бораи сабаби сеюм: дар лоиҳаи воқеӣ скриптро бо атрибути defer пайваст кунед — он гоҳ он пас аз он иҷро мешавад, ки браузер тамоми дарахтро сохт. Дар қуттиҳои реги дарс ин аллакай барои шумо анҷом дода шудааст.

<body>
  <ul id="list"></ul>
  <script src="script.js" defer></script>
</body>

Муфассалтар хонед: learn.javascript.ru — Ҷустуҷӯ: getElement*, querySelector* · MDN — querySelector

<h1 id="title">Чайхона «Сомон»</h1>
<ul class="menu">
  <li class="item">Курутоб</li>
  <li class="item">Оши палав</li>
  <li class="item hot">Шакароб</li>
</ul>

// 1) матни сарлавҳа аз рӯи id
// 2) матни аввалини .item
// 3) ҳамагӣ чандто .item

Чайхона «Сомон»
Курутоб
3

<h1 id="title">Корзина</h1>
<ul id="cart">
  <li class="item">Нон — 4</li>
  <li class="item">Молоко — 12</li>
  <li class="item sale">Зардолу — 25</li>
</ul>

const title = document.querySelector(".title");   // 1
const items = document.querySelector(".item");    // 2
const sale = document.querySelector("#sale");     // 3

console.log(title.textContent);
console.log(items.length);
console.log(sale.textContent);

Корзина
3
Зардолу — 25

<div class="card"><span class="name">Шапка</span> <span class="price">60</span></div>
<div class="card"><span class="name">Шарф</span> <span class="price">45</span></div>
<div class="card"><span class="name">Перчатки</span> <span class="price">35</span></div>
<div class="card"><span class="name">Носки</span> <span class="price">15</span></div>

const cards = document.querySelectorAll(".card");

let total = 0;
let maxPrice = 0;
let maxName = "";

// аз болои cards гузаред: name ва price-ро гиред, total, maxPrice, maxName-ро навсозӣ кунед

console.log("Итого: " + total + " сомони");
console.log("Самый дорогой: " + maxName);

Итого: 155 сомони
Самый дорогой: Шапка

03 Мундариҷаро тағйир медиҳем: textContent ва innerHTML

Унсур ёфт шуд. Акнун он чиро, ки дар дохили он аст, хондан ва иваз кардан мумкин аст. Барои ин ҳар унсур ду хосияти асосӣ дорад. Онҳо монанданд, аммо корҳои гуногун мекунанд — ва фарқ на танҳо барои зебоӣ, балки барои бехатарӣ низ муҳим аст.

<h2 id="dish">Загрузка…</h2>
<div id="box">Старое содержимое</div>

const dish = document.querySelector("#dish");
const box = document.querySelector("#box");

dish.textContent = "Оши палав";            // матнро иваз кардем
console.log(dish.textContent);              // Оши палав

box.innerHTML = "<b>Цена:</b> 35 сомони";   // теги <b> унсури воқеӣ мешавад
console.log(box.children.length);           // 1 — дар дохил <b> пайдо шуд
console.log(box.innerHTML);                 // <b>Цена:</b> 35 сомони
console.log(box.textContent);               // Цена: 35 сомони — танҳо матн, бе тегҳо

Мехонем ва менависем

• el.textContent — тамоми матни дохили унсурро хондан (аз ҷумла тегҳои дарунравӣ, аммо бе худи тегҳо).
• el.textContent = "матни нав" — тамоми мундариҷаро бо як матн иваз кардан.
• el.innerHTML — мундариҷаро якҷоя бо тегҳо чун сатр хондан.
• el.innerHTML = "<b>ғафс</b>" — мундариҷаро иваз кардан, сатрро чун HTML таҳлил карда.

Боз innerText ҳаст: вай CSS-ро ба назар мегирад ва матни пинҳонро нишон намедиҳад. Барои кори оддӣ textContent-ро гиред — вай соддатар ва пешбинишавандатар аст.

Чаро innerHTML хатарнок аст

Фарз мекунем, дар сайти шумо корбар шарҳ менависад, ва шумо онро тавассути innerHTML ба саҳифа ҷойгир мекунед. Агар ба ҷойи «Курси аъло!» ӯ теги махсус омодакардаи <img>-ро бо коди пинҳонӣ нависад — браузер ин унсурро эҷод мекунад ва коди бегонаро дар саҳифаҳои дигар боздидкунандагон иҷро мекунад. Чунин ҳамла XSS номида мешавад ва аз маъмултарин ҳамлаҳо дар веб мебошад.

const comment = "Круто! <b>Пять звёзд</b>";      // тасаввур мекунем, ки инро корбар ворид кард

const safe = document.createElement("div");
safe.textContent = comment;          // матн матн монд
console.log(safe.children.length);   // → 0 — ягон теги нав пайдо нашуд

const risky = document.createElement("div");
risky.innerHTML = comment;           // сатр чун HTML таҳлил шуд
console.log(risky.children.length);  // → 1 — теги воқеии <b> пайдо шуд

Қапқон: += барои innerHTML

Навишти list.innerHTML += "<li>…</li>" чун «ба охир илова кардан» менамояд, аммо дар асл браузер тамоми рӯйхатро хароб мекунад ва аз нав ҷамъ мекунад. Ҳамаи унсурҳои қаблан ёфтшуда дар тағйирёбандаҳои шумо пайванд бо саҳифаро гум мекунанд.

const list = document.createElement("ul");
list.innerHTML = "<li>Нон</li>";

const first = list.firstElementChild;     // банди аввалро дар хотир гирифтем
list.innerHTML += "<li>Чой</li>";         // «илова кардем» дуюмро

console.log(list.children.length);             // → 2
console.log(first === list.firstElementChild); // → false — ин аллакай унсури дигар, нав аст!
console.log(list.contains(first));             // → false — банди кӯҳна партофта шуд

Дар бахши 5 шумо мефаҳмед, ки унсурҳоро бе чунин таъсири иловагӣ чӣ тавр илова кардан мумкин — тавассути createElement ва append.

Рӯйхатро бо сатр ҷамъ мекунем

Агар ҳамбандиро худатон менависед, ва додаҳо бехатаранд (массиви шумо, на воридоти корбар), қулай аст, ки HTML-ро бо сатрҳои қолабӣ ва методҳои массив, ки шумо аллакай медонед, ҷамъ кунед:

const dishes = ["Самбуса", "Курутоб", "Шакароб"];

const html = dishes.map(d => `<li>${d}</li>`).join("");
console.log(html);   // → <li>Самбуса</li><li>Курутоб</li><li>Шакароб</li>

const menu = document.createElement("ul");
menu.innerHTML = html;
console.log(menu.children.length); // → 3

Муфассалтар хонед: learn.javascript.ru — Хосиятҳои гиреҳҳои DOM · MDN — textContent

<h1 id="title">Загрузка…</h1>
<p class="price">0 сомони</p>

const title = document.querySelector("#title");
const price = document.querySelector(".price");

// матнҳоро иваз кунед

console.log(title.textContent);
console.log(price.textContent);

Курутоб
35 сомони

<div id="a"></div>
<div id="b"></div>

const userName = "Ali <b>Pro</b>";
const a = document.querySelector("#a");
const b = document.querySelector("#b");

// ба a — тавассути innerHTML, ба b — тавассути textContent

console.log(a.children.length);
console.log(b.children.length);
console.log(b.textContent);

1
0
Ali <b>Pro</b>

<ul id="menu"></ul>

const dishes = ["Самбуса", "Курутоб", "Шакароб"];
const menu = document.querySelector("#menu");

// сатрро ҷамъ кунед ва ба menu гузоред

console.log(menu.children.length);
console.log(menu.innerHTML);

3
<li>Самбуса</li><li>Курутоб</li><li>Шакароб</li>

04 Классҳо, услубҳо ва атрибутҳо

Намуди зоҳирии унсур қариб ҳамеша дар CSS муайян мешавад. JavaScript набояд саҳифаро худаш ранг кунад, кори он — ба кор андохтан ва хомӯш кардани классҳои тайёр аст. Шумо дар CSS менависед, ки .hot чӣ гуна менамояд, ва дар JS танҳо қарор медиҳед, ки кай онро ба унсур диҳед. Ҳамин тавр код тоза мемонад, ва тарроҳӣ дар як ҷой тағйир меёбад.

classList: классҳоро идора мекунем

<ul class="menu">
  <li class="item">Самбуса</li>
  <li class="item">Курутоб</li>
  <li class="item">Шакароб</li>
</ul>

.item { padding: 6px 10px; margin: 4px 0; border-radius: 8px; background: #eef1f6; list-style: none; }
.hot  { background: #ffd9a8; font-weight: 700; }
.hot::after { content: " 🔥"; }

const items = document.querySelectorAll(".item");

items[1].classList.add("hot");                 // бейҷи «hot»-ро ба Курутоб додем
console.log(items[1].className);               // item hot
console.log(items[1].classList.contains("hot")); // true
console.log(items[0].classList.contains("hot")); // false

items[1].classList.toggle("hot");              // буд — хомӯш шуд
console.log(items[1].className);               // item

const el = document.createElement("div");
el.className = "card sale";

el.className = "hot";                 // «card» ва «sale»-ро пок кардем!
console.log(el.className);            // → hot

el.className = "card sale";
el.classList.add("hot");              // дуруст: ба мавҷудҳо илова кардем
console.log(el.className);            // → card sale hot

style: усули зуд, аммо дағал

Тавассути el.style.хосият услубро мустақиман барои унсур додан мумкин аст. Номҳои хосиятҳо бо camelCase навишта мешаванд: background-color ба backgroundColor табдил меёбад, ва қиматҳо — ҳамеша сатрҳо:

<p id="note">Скидка до конца недели</p>

const note = document.querySelector("#note");

note.style.color = "white";
note.style.backgroundColor = "tomato";   // camelCase!
note.style.padding = "8px 12px";
note.style.borderRadius = "8px";

console.log(note.style.color);           // white

Қоида: агар услуб муддати дароз ё барои якчанд унсур лозим бошад — класс эҷод кунед. style-ро барои қиматҳое монед, ки дар код ҳисоб карда мешаванд (бари навори боркунӣ, мавқеъ). Ҳамин тавр JS бо тарроҳӣ омехта намешавад, ва ёрдамчии ЗС ба шумо осонтар кумак мекунад.

Атрибутҳо: getAttribute, setAttribute ва хосиятҳо

Атрибутҳо — он чизе ҳастанд, ки дар теги кушоянда навишта мешавад: href, src, alt, disabled, data-id. Онҳоро бо ду усул хондан ва тағйир додан мумкин аст:

data-атрибутҳо: додаҳои худӣ дар ҳамбандӣ

Мехоҳед ба унсур додаҳои худро «пайваст» кунед — масалан, id-и мол ё нархи онро? Барои ин атрибутҳое ихтироъ шудаанд, ки бо data- оғоз мешаванд. Дар JS онҳо тавассути el.dataset дастраванд, ва ном пас аз data- ба хосият табдил меёбад:

<button id="buy" data-id="17" data-price="35" data-product-name="Курутоб">Купить</button>

const buy = document.querySelector("#buy");

console.log(buy.dataset.id);            // "17"  — ҳамеша сатр!
console.log(buy.dataset.price);         // "35"
console.log(buy.dataset.productName);   // data-product-name → productName
console.log(Number(buy.dataset.price) * 2); // 70 — барои ҳисобҳо ба адад табдил медиҳем

buy.dataset.price = "40";               // навиштан низ тавассути dataset
console.log(buy.getAttribute("data-price")); // 40 — атрибут дар ҳамбандӣ тағйир ёфт

buy.disabled = true;                    // хосияти disabled — тугма хокистарӣ ва ғайрифаъол аст
console.log(buy.hasAttribute("disabled")); // true

Муфассалтар хонед: learn.javascript.ru — Услубҳо ва классҳо · Атрибутҳо ва хосиятҳо · MDN — classList

<ul class="menu">
  <li class="item">Самбуса</li>
  <li class="item">Курутоб</li>
  <li class="item old">Шакароб</li>
</ul>

.item { padding: 6px 10px; margin: 4px 0; border-radius: 8px; background: #eef1f6; list-style: none; }
.hot { background: #ffd9a8; font-weight: 700; }
.old { opacity: .5; text-decoration: line-through; }

const items = document.querySelectorAll(".item");

// items[1] — «Курутоб»: класси hot-ро илова кунед
// items[2] — «Шакароб»: класси old-ро бардоред

for (const item of items) {
  console.log(item.className);
}

item
item hot
item

<div id="panel" class="panel open">Меню</div>

const panel = document.querySelector("#panel");

// 1) panel.classList.contains("open")-ро баровед
// 2) toggle("open") ва боз contains-ро баровед
// 3) боз як бор toggle("open"), toggle("dark") ва panel.className-ро баровед

true
false
panel open dark

<a id="link" href="https://example.com">Сайт</a>
<button id="buy" data-id="17" data-price="35">Купить</button>

const link = document.querySelector("#link");
const buy = document.querySelector("#buy");

// 1) setAttribute("href", ...) ва getAttribute("href")-ро баровед
// 2) Number(buy.dataset.price) * 2-ро баровед
// 3) buy.dataset.id = "18" ва getAttribute("data-id")-ро баровед
// 4) buy.disabled = true ва hasAttribute("disabled")-ро баровед

https://makefirststep.tj
70
18
true

<div class="card" data-price="60">Шапка</div>
<div class="card" data-price="45">Шарф</div>
<div class="card" data-price="35">Перчатки</div>
<div class="card" data-price="15">Носки</div>

.card { display: inline-block; padding: 10px 14px; margin: 4px; border: 2px solid #ccd3df; border-radius: 10px; }
.expensive { border-color: #c98a00; background: #fff3d6; }
.sale { border-color: #1a9a5a; background: #dff6e8; }

const cards = document.querySelectorAll(".card");

for (const card of cards) {
  const price = Number(card.dataset.price);
  // классҳои лозимиро илова кунед

  console.log(card.className);
}

// чанд корт бо класси expensive

card expensive
card
card
card sale
1

05 Унсурҳоро эҷод ва нест мекунем

То ҳол мо танҳо он чиро меёфтем ва тағйир медодем, ки дар HTML навишта шудааст. Аммо дар сайти воқеӣ, масалан мағозаи интернетӣ, рӯйхати молҳо аз додаҳо меояд, ва ҳамбандӣ барои он пешакӣ навишта намешавад. Унсурҳоро бояд аз код эҷод кард. Ин се қадам аст:

1. Эҷод кардем — document.createElement("li"). Унсур «дар анбор» пайдо шуд: он вуҷуд дорад, аммо дар саҳифа ҳоло намоён нест.
2. Танзим кардем — матн, классҳо, атрибутҳоро додем: li.textContent = "Самбуса", li.classList.add("item").
3. Ҷойгир кардем — parent.append(li). Танҳо пас аз ин он дар саҳифа пайдо мешавад.

<h2>Сегодня в меню</h2>
<ul id="menu"></ul>

.item { padding: 6px 10px; margin: 4px 0; border-radius: 8px; background: #eef1f6; list-style: none; }

const menu = document.querySelector("#menu");

const li = document.createElement("li");   // 1. эҷод кардем
li.textContent = "Оши палав";              // 2. танзим кардем
li.classList.add("item");
menu.append(li);                           // 3. ҷойгир кардем — акнун он дар саҳифа аст

console.log(menu.children.length);         // 1

Ба куҷо ҷойгир кардан

append якчанд унсурро якбора гирифта метавонад: card.append(title, price). Агар сатр дода шавад, он чун матн (на чун HTML) ҷойгир мешавад, бинобар ин ин бехатар аст.

<ol id="queue">
  <li>Рустам</li>
  <li class="gone">Мадина</li>
  <li>Фарход</li>
</ol>

const queue = document.querySelector("#queue");

function person(name) {
  const li = document.createElement("li");
  li.textContent = name;
  return li;
}

queue.querySelector(".gone").remove();       // Мадина рафт
queue.prepend(person("Нилуфар"));            // VIP — ба оғоз
queue.append(person("Далер"));               // оддӣ — ба охир
queue.children[1].after(person("Сабрина"));  // пас аз Рустам (вай акнун дуюм аст)

console.log(Array.from(queue.children, li => li.textContent).join(", "));
// Нилуфар, Рустам, Сабрина, Фарход, Далер

Унсур нусха намешавад, балки кӯч мебандад

Як унсур наметавонад дар ду ҷойи дарахт бошад. Агар унсури аллакай мавҷударо ба ҷойи дигар ҷойгир кунед, он кӯч мебандад, ва дар ҷойи кӯҳна нопадид мешавад. Нусха лозим аст — cloneNode(true)-ро кунед.

const a = document.createElement("ul");
const b = document.createElement("ul");

const li = document.createElement("li");
li.textContent = "Самбуса";
a.append(li);

b.append(li);                        // аз a ба b кӯч баст
console.log(a.children.length, b.children.length);  // → 0 1

a.append(li.cloneNode(true));        // нусха ҳам дар он ҷо, ҳам дар ин ҷо мемонад
console.log(a.children.length, b.children.length);  // → 1 1

createElement ё innerHTML?

Дар ин дарс мо бо роҳи бехатар меравем: createElement. Вай каме дарозтар аст, аммо меомӯзонад, ки сохтори саҳифаро чун дарахт бинем — ва маҳз ин баъдтар дар React ба кор меояд.

Муфассалтар хонед: learn.javascript.ru — Тағйири ҳуҷҷат · MDN — createElement · MDN — replaceChildren

<ul id="menu"></ul>

const menu = document.querySelector("#menu");

// li эҷод кунед, матнро диҳед, ба menu ҷойгир кунед

console.log(menu.children.length);
console.log(menu.textContent);

1
Самбуса

<ul id="menu"></ul>

const dishes = ["Нон", "Сомса", "Чой"];
const menu = document.querySelector("#menu");

// давра аз болои dishes: li эҷод кунед, матн, класси item, ҷойгир кунед

console.log(menu.children.length);
console.log(menu.lastElementChild.textContent);
console.log(menu.firstElementChild.className);

3
Чой
item

<ul id="line">
  <li>Алия</li>
  <li class="old">Бахром</li>
  <li>Умар</li>
</ul>

const line = document.querySelector("#line");
const alia = line.firstElementChild;

function make(text) {
  const li = document.createElement("li");
  li.textContent = text;
  return li;
}

// 1) .old-ро нест кунед
// 2) prepend: Зарина
// 3) after: Далер пас аз alia
// 4) append: Нилуфар

console.log(Array.from(line.children, li => li.textContent).join(", "));

Зарина, Алия, Далер, Умар, Нилуфар

<ul id="left">
  <li>Самбуса</li>
  <li>Курутоб</li>
  <li>Шакароб</li>
</ul>
<ul id="right"></ul>

const left = document.querySelector("#left");
const right = document.querySelector("#right");

right.append(left.firstElementChild);                      // кӯч бастан
console.log(left.children.length, right.children.length);

const clone = left.firstElementChild.cloneNode(true);
// ба матни клон " (копия)"-ро илова кунед
right.append(clone);
console.log(left.children.length, right.children.length);

// матни унсури охирини рӯйхати ростро баровед

2 1
2 2
Курутоб (копия)

06 Рендер: аз массив ба кортҳо

Акнун ҳар чизеро, ки медонед, ҳамроҳ мекунем. Дар дарсҳои 6 ва 7 шумо бо массивҳои объектҳо кор кардед — феҳристҳои молҳо, донишҷӯён, фармоишҳо. Акнун ин додаҳоро кашидан мумкин аст. Калимаи рендер (render) маҳз маънои «аз додаҳо он чиро, ки дар экран намоён аст, сохтан»-ро дорад. Тарҳ ҳамеша як аст:

1. Додаҳо — массиви объектҳо: const products = [{ title: "Нон", price: 4 }, …]. Ин сарчашмаи асосии ҳақиқат аст.
2. Функсияи-фабрика createCard(product) — як объектро мегирад ва унсури тайёрро бармегардонад.
3. Функсияи рендер render(items) — контейнерро тоза мекунад ва ба он кортҳоро барои тамоми массив ҷойгир мекунад.
4. Даъват render(products) — саҳифа кашида шуд. Массивро тағйир додед — боз render-ро даъват кардед.

<button id="clear">Очистить</button>
<div id="catalog" class="catalog"></div>

.catalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin-top: 12px; }
.card { border: 2px solid #ccd3df; border-radius: 12px; padding: 10px 12px; }
.card h3 { margin: 0 0 4px; font-size: 16px; }
.price { margin: 0; color: #1a7f4e; font-weight: 700; }
.empty { color: #6b7488; }

const products = [
  { title: "Самбуса", price: 5 },
  { title: "Курутоб", price: 35 },
  { title: "Шакароб", price: 15 },
  { title: "Чапан", price: 450 }
];

const catalog = document.querySelector("#catalog");
const clearBtn = document.querySelector("#clear");

// фабрика: як объект → як унсур
function createCard(product) {
  const card = document.createElement("article");
  card.className = "card";

  const title = document.createElement("h3");
  title.textContent = product.title;

  const price = document.createElement("p");
  price.className = "price";
  price.textContent = `${product.price} сомони`;

  card.append(title, price);
  return card;
}

// рендер: тамоми массив → контейнер
function render(items) {
  const cards = items.map(createCard);   // массиви унсурҳо
  catalog.replaceChildren(...cards);     // кӯҳнаро бардоштем, навро ҷойгир кардем
}

render(products);
console.log("карточек:", catalog.children.length);

// тугмаи «Очистить»: onclick — «вақте пахш кунанд, инро иҷро кун» (муфассал — дар дарси оянда)
clearBtn.onclick = () => catalog.replaceChildren();

Иҷро кунед, баъд тугмаи «Очистить»-ро дар preview пахш кунед — кортҳо нопадид мешаванд. Нарх тағйир диҳед ё ба массив боз як мол илова кунед, боз иҷро кунед: саҳифа худаш аз нав кашида мешавад. Додаҳоро тағйир медиҳем — саҳифа аз паси онҳо меравад.

Render-ро аз рӯи қисмҳо ҷудо мекунем

items.map(createCard)

map ҳар молро ба createCard медиҳад ва унсурҳои баргардонидашударо ба массиви нав ҷамъ мекунад.

...cards

Оператори spread аз дарси гузашта: массиви унсурҳоро ба аргументҳои replaceChildren(card1, card2, …) «мерезад».

replaceChildren(…)

Аввал ҳамаи кӯдакони кӯҳнаро мебарорад, баъд навҳоро ҷойгир мекунад. Бинобар ин render-и такрорӣ кортҳоро дубора намекунад.

replaceChildren()

Бе аргументҳо — контейнерро оддӣ тоза мекунад. Ин маҳз «тугмаи тоза кардан» аст.

Ҳолати холӣ

Корбар чӣ мебинад, агар аз рӯи филтраш чизе ёфт нашавад? Саҳифаи холии сафед — гӯё сайт вайрон шудааст. Рендери хуб ҳамеша массиви холиро коркард мекунад:

function render(items) {
  if (items.length === 0) {
    const empty = document.createElement("p");
    empty.className = "empty";
    empty.textContent = "Ничего не найдено";
    catalog.replaceChildren(empty);
    return;                              // баромади барвақт — мисли дарс дар бораи функсияҳо
  }
  catalog.replaceChildren(...items.map(createCard));
}

Ҳамон рендер бо сатр

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

function render(items) {
  catalog.innerHTML = items
    .map(p => `<article class="card"><h3>${p.title}</h3><p class="price">${p.price} сомони</p></article>`)
    .join("");
}

Аммо агар title метавонад аз корбар ё аз сервери бегона ояд — танҳо createElement ва textContent.

Муфассалтар хонед: learn.javascript.ru — Тағйири ҳуҷҷат · MDN — replaceChildren

<ul id="list"></ul>

const products = [
  { title: "Нон", price: 4 },
  { title: "Молоко", price: 12 },
  { title: "Зардолу", price: 25 },
  { title: "Мёд", price: 80 }
];
const list = document.querySelector("#list");

function createItem(product) {
  // li эҷод кунед, матнро диҳед, li-ро баргардонед
}

list.replaceChildren(...products.map(createItem));

console.log(list.children.length);
console.log(list.firstElementChild.textContent);

4
Нон — 4 сомони

<div id="catalog"></div>

const products = [
  { title: "Нон", price: 4 },
  { title: "Чапан", price: 450 },
  { title: "Пиала", price: 30 }
];
const catalog = document.querySelector("#catalog");

function render(items) {
  // коди шумо
}

render(products);
console.log(catalog.children.length);

render(products.filter(p => p.price < 50));
console.log(catalog.children.length);

render(products.filter(p => p.price > 1000));
console.log(catalog.children.length);
console.log(catalog.textContent);

3
2
1
Ничего не найдено

<div id="catalog"></div>

.card { display: inline-block; border: 2px solid #ccd3df; border-radius: 12px; padding: 8px 12px; margin: 4px; }
.card h3 { margin: 0; font-size: 16px; }
.out { opacity: .45; border-style: dashed; }

const products = [
  { title: "Шапка", price: 60, inStock: true },
  { title: "Шарф", price: 45, inStock: true },
  { title: "Перчатки", price: 35, inStock: false },
  { title: "Носки", price: 15, inStock: true }
];
const catalog = document.querySelector("#catalog");

function createCard({ title, price, inStock }) {
  // коди шумо — card-ро баргардонед
}

catalog.replaceChildren(...products.map(createCard));

console.log(catalog.querySelectorAll(".card").length);
console.log(catalog.querySelectorAll(".out").length);
console.log(catalog.querySelector(".price").textContent);

4
1
60 сомони

<div id="catalog"></div>

const products = [
  { title: "Нон", category: "Продукты" },
  { title: "Зардолу", category: "Продукты" },
  { title: "Пиала", category: "Кухня" },
  { title: "Чапан", category: "Сувениры" },
  { title: "Тюбетейка", category: "Сувениры" }
];
const catalog = document.querySelector("#catalog");

// 1) groups = { Продукты: ["Нон", "Зардолу"], Кухня: ["Пиала"], ... } тавассути reduce
// 2) барои ҳар ҷуфти [category, titles] section > h3 + ul > li эҷод кунед
// 3) ҳамаи section-ҳоро ба catalog ҷойгир кунед

const sections = catalog.querySelectorAll("section");
console.log(sections.length);
for (const section of sections) {
  console.log(section.querySelector("h3").textContent + ": " + section.querySelectorAll("li").length);
}

3
Продукты: 2
Кухня: 1
Сувениры: 2

07 Тақсими меҳнат: ЗС ҳамбандиро менависад, шумо — мантиқро

DOM — ҷойи беҳтарин аст, то меомӯзед, ки бо ЗС дуруст кор кунед. Ҳамбандӣ ва CSS — кори ҳаҷман калон, аммо якмонанд: ЗС онро зуд ва одатан хуб иҷро мекунад. Аммо мантиқ — кадом додаҳо, бо кадом тартиб, дар ҳолати рӯйхати холӣ чӣ кардан — ин аст, ки шумо бояд то сатри охирин фаҳмед. Бинобар ин дар курси мо қоида чунин аст:

Маълумоти кӯтоҳ: BEM — номҳои классҳо бе бесаранҷомӣ

Вақте ки ЗС ҳамбандӣ мекунад, хоҳиш кунед, ки классҳоро аз рӯи BEM ном гузорад. Ин мувофиқа дар бораи номҳост, то аз рӯи класс фавран маълум шавад, ки ин чист:

Блок

Ҷузъи мустақил: product-card.

Унсур

Қисми блок, бо ду зерхат: product-card__title, product-card__price.

Модификатор

Варианти блок, бо ду тире: product-card--out («дар мавҷуд нест»). Дар JS онро тавассути classList фаъол ва хомӯш мекунанд — ҳамон гуфтугӯ дар бораи бейҷҳо аз бахши 4.

Промпт барои қолаби HTML

Ду дархости ба ЗС-ро муқоиса кунед. Якум — чунон ки навомӯзон мекунанд. Дуюм — аз рӯи формулаи курс: замина → вазифа → маҳдудиятҳо → формати ҷавоб → санҷиш.

ЗС аз промпти дуюм чӣ мегирад? Стек, сатҳ, ҳудудҳо («JavaScript нанавис»), номҳои мушаххаси классҳо, формати ҷавоб ва хоҳиши худро санҷидан. Ва ба шумо мантиқ мемонад — ва шумо дақиқ медонед, ки он ба кадом классҳо такя мекунад.

ЗС чӣ ҷавоб дода метавонист — ва онро чӣ тавр ба код табдил додан

Фарз мекунем, ЗС чунин ҳамбандии як кортро баргардонд:

<article class="product-card">
  <h3 class="product-card__title">Название товара</h3>
  <p class="product-card__price">0 сомони</p>
  <button class="product-card__btn">В корзину</button>
</article>

Вазифаи шумо — ин кортро даҳ маротиба нусха кардан не, балки онро як бор дар функсия тавсиф кардан аст. Ҳар теги қолаб ба се сатр табдил меёбад: эҷод кардем, танзим кардем, ҷойгир кардем.

<div id="catalog" class="catalog"></div>

/* ин CSS — «ҷавоби ЗС»: мо онро намениварем, балки танҳо пайваст мекунем */
.catalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.product-card { border: 2px solid #ccd3df; border-radius: 14px; padding: 12px; background: #fff; }
.product-card__title { margin: 0 0 6px; font-size: 17px; }
.product-card__price { margin: 0 0 10px; color: #1a7f4e; font-weight: 700; }
.product-card__btn { border: 0; border-radius: 8px; padding: 6px 12px; background: #1c2230; color: #fff; cursor: pointer; }
.product-card--out { opacity: .5; border-style: dashed; }

// ва ин JS — қисми шумо
const products = [
  { title: "Самбуса", price: 5, inStock: true },
  { title: "Курутоб", price: 35, inStock: true },
  { title: "Чайник", price: 85, inStock: false }
];
const catalog = document.querySelector("#catalog");

function createCard(product) {
  const card = document.createElement("article");
  card.className = "product-card";
  if (!product.inStock) card.classList.add("product-card--out");

  const title = document.createElement("h3");
  title.className = "product-card__title";
  title.textContent = product.title;

  const price = document.createElement("p");
  price.className = "product-card__price";
  price.textContent = `${product.price} сомони`;

  const btn = document.createElement("button");
  btn.className = "product-card__btn";
  btn.textContent = "В корзину";

  card.append(title, price, btn);
  return card;
}

catalog.replaceChildren(...products.map(createCard));
console.log(catalog.children.length);

Ҷавоби ЗС-ро месанҷем: феҳристи санҷиш

• Оё дар ҷавоб <script>, onclick="…", услубҳои inline style="…" ҳастанд? Шумо бе онҳо хоҳиш карда будед — яъне мебарорем.
• Оё номҳои классҳо бо онҳое, ки шумо дар JS истифода мебаред, мувофиқ меоянд? Як ҳарфи изофӣ — ва querySelector null бармегардонад.
• Оё тегҳо мувофиқанд: article барои корт, h3 барои ном, button барои тугма (на div бо клик)?
• Оё тасвирҳо ва ҳарфҳои берунӣ нестанд, ки бор намешаванд?
• Агар ЗС innerHTML-ро бо ҷойгиркунии додаҳо пешниҳод кард — пурсед, ки ин бехатар аст ё не, ва ба textContent аз нав нависед.
• Оё ЗС методҳои вуҷуднадоштаро ихтироъ накардааст? Ношиносро дар MDN санҷед.

<div id="catalog" class="catalog"></div>

const products = [
  { title: "Чапан", price: 450 },
  { title: "Тюбетейка", price: 120 }
];

const catalog = document.querySelector(".catalogue");
const card = document.createElement("article");
card.className = "card";

products.forEach(p => {
  card.innerHTML = `<h3>${p.title}</h3><p class="price">${p.price}</p>`;
  catalog.append(card);
});

console.log(catalog.children.length);
console.log(catalog.firstElementChild.querySelector("h3").textContent);
console.log(catalog.firstElementChild.querySelector(".price").textContent);

2
Чапан
450 сомони

08 Амалия дар дарс: феҳристи кортҳоро ҷамъ мекунем

Вақти он расид, ки ҳамаро якҷоя ҷамъ кунем. Мақсад: саҳифаи мағоза, ки дар он 10 корт аз массив кашида мешавад, ва тугмаи «Очистить» ҳамаи онҳоро мебарорад. Ҳамбандӣ ва услубҳоро мо аз ЗС гирифтем (онҳо аллакай дар қуттиҳои реги зер ҳастанд), мантиқро шумо менависед — қадам ба қадам.

1. Додаҳо. Массиви 10 объектро эҷод кунед: title, price, category, inStock, rating. Дар ҳаёти воқеӣ чунин додаҳоро аз ЗС хоҳиш кардан мумкин аст (дарси 7) — аммо 2–3 объектро бо чашм санҷидан ба ҳар ҳол лозим аст.
   JavaScript

   const products = [
     { title: "Самбуса", price: 5, category: "Еда", inStock: true, rating: 4.9 },
     // ... боз 9 мол
   ];

2. Ёфтани контейнер ва тугма — як бор, дар оғози скрипт.
   JavaScript

   const catalog = document.querySelector("#catalog");
   const clearBtn = document.querySelector("#clear");

3. Фабрикаи корт. Функсияи createCard(product): article, h3, p-ро эҷод мекунад, классҳоро аз рӯи BEM ва матнро тавассути textContent танзим мекунад, тавассути append ҷамъ мекунад ва кортро бармегардонад. Барои моли дар мавҷуднабуда — модификатори product-card--out.
4. Рендер. Функсияи render(items): catalog.replaceChildren(...items.map(createCard)).
5. Даъват. render(products) — ва ба саҳифа нигоҳ кунед.
6. Тугмаи тоза кардан. clearBtn.onclick = () => catalog.replaceChildren();
7. Санҷиш: баровардани шумораи кортҳо ба консол — пеш аз тоза кардан, пас аз он ва пас аз рендери такрорӣ.

<header class="shop__head">
  <h2 class="shop__title">Магазин «Бозор»</h2>
  <button id="clear" class="shop__btn">Очистить</button>
</header>
<div id="catalog" class="catalog"></div>

/* CSS аз ЗС — тайёр */
.shop__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.shop__title { margin: 0; font-size: 20px; }
.shop__btn { border: 2px solid #1c2230; background: #fff; border-radius: 8px; padding: 6px 12px; cursor: pointer; font-weight: 700; }
.catalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.product-card { position: relative; border: 2px solid #ccd3df; border-radius: 14px; padding: 10px 12px; background: #fff; }
.product-card__title { margin: 0 0 4px; font-size: 16px; }
.product-card__price { margin: 0; color: #1a7f4e; font-weight: 700; }
.product-card__badge { position: absolute; top: -8px; right: 8px; background: #c98a00; color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 999px; }
.product-card--out { opacity: .5; border-style: dashed; }
.product-card--hit { border-color: #c98a00; }
.shop__stats { color: #6b7488; margin: 0 0 12px; }

const products = [
  { title: "Самбуса", price: 5, category: "Еда", inStock: true, rating: 4.9 },
  { title: "Курутоб", price: 35, category: "Еда", inStock: true, rating: 4.8 },
  { title: "Шакароб", price: 15, category: "Еда", inStock: true, rating: 4.2 },
  { title: "Оши палав", price: 30, category: "Еда", inStock: false, rating: 4.7 },
  { title: "Нон", price: 4, category: "Еда", inStock: true, rating: 4.5 },
  { title: "Чапан", price: 450, category: "Одежда", inStock: true, rating: 4.8 },
  { title: "Тюбетейка", price: 120, category: "Одежда", inStock: true, rating: 4.6 },
  { title: "Пиала", price: 30, category: "Кухня", inStock: true, rating: 4.4 },
  { title: "Чайник", price: 85, category: "Кухня", inStock: false, rating: 4.1 },
  { title: "Шарф", price: 45, category: "Одежда", inStock: true, rating: 4.3 }
];

const catalog = document.querySelector("#catalog");
const clearBtn = document.querySelector("#clear");

function createCard(product) {
  // article.product-card > h3.product-card__title + p.product-card__price
  // агар дар мавҷуд нест — класси product-card--out-ро илова кунед
}

function render(items) {
  // catalog-ро тоза кунед ва кортҳоро ҷойгир кунед
}

// тугмаи тоза кардан тавассути onclick

// --- санҷиш (нест накунед) ---
render(products);
console.log(catalog.children.length);
console.log(catalog.querySelectorAll(".product-card--out").length);
clearBtn.click();
console.log(catalog.children.length);
render(products);
console.log(catalog.children.length);

10
2
0
10

<header class="shop__head">
  <h2 class="shop__title">Магазин «Бозор»</h2>
  <button id="clear" class="shop__btn">Очистить</button>
</header>
<p id="stats" class="shop__stats"></p>
<div id="catalog" class="catalog"></div>

.shop__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.shop__title { margin: 0; font-size: 20px; }
.shop__btn { border: 2px solid #1c2230; background: #fff; border-radius: 8px; padding: 6px 12px; cursor: pointer; font-weight: 700; }
.catalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px 10px; }
.product-card { position: relative; border: 2px solid #ccd3df; border-radius: 14px; padding: 10px 12px; background: #fff; }
.product-card__title { margin: 0 0 4px; font-size: 16px; }
.product-card__price { margin: 0; color: #1a7f4e; font-weight: 700; }
.product-card__badge { position: absolute; top: -8px; right: 8px; background: #c98a00; color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 999px; }
.product-card--out { opacity: .5; border-style: dashed; }
.product-card--hit { border-color: #c98a00; }
.shop__stats { color: #6b7488; margin: 0 0 12px; }

const products = [
  { title: "Самбуса", price: 5, category: "Еда", inStock: true, rating: 4.9 },
  { title: "Курутоб", price: 35, category: "Еда", inStock: true, rating: 4.8 },
  { title: "Шакароб", price: 15, category: "Еда", inStock: true, rating: 4.2 },
  { title: "Оши палав", price: 30, category: "Еда", inStock: false, rating: 4.7 },
  { title: "Нон", price: 4, category: "Еда", inStock: true, rating: 4.5 },
  { title: "Чапан", price: 450, category: "Одежда", inStock: true, rating: 4.8 },
  { title: "Тюбетейка", price: 120, category: "Одежда", inStock: true, rating: 4.6 },
  { title: "Пиала", price: 30, category: "Кухня", inStock: true, rating: 4.4 },
  { title: "Чайник", price: 85, category: "Кухня", inStock: false, rating: 4.1 },
  { title: "Шарф", price: 45, category: "Одежда", inStock: true, rating: 4.3 }
];

const catalog = document.querySelector("#catalog");
const clearBtn = document.querySelector("#clear");
const stats = document.querySelector("#stats");

function createCard(product) {
  const card = document.createElement("article");
  card.className = "product-card";
  if (!product.inStock) card.classList.add("product-card--out");

  const title = document.createElement("h3");
  title.className = "product-card__title";
  title.textContent = product.title;

  const price = document.createElement("p");
  price.className = "product-card__price";
  price.textContent = `${product.price} сомони`;

  card.append(title, price);
  // 1) барои rating >= 4.8: класси product-card--hit ва span.product-card__badge «Хит»
  return card;
}

function render(items) {
  catalog.replaceChildren(...items.map(createCard));
  // 2) stats.textContent = "Хитов: N из M"
}

clearBtn.onclick = () => catalog.replaceChildren();

render(products);
console.log(catalog.querySelectorAll(".product-card--hit").length);
console.log(stats.textContent);

3
Хитов: 3 из 10

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

Мавзӯъ: «Саҳифаи аз JS ҷамъшуда». Саҳифаи феҳристи худро ҷамъ кунед: тамоми мундариҷа аз массив пайдо мешавад, ва дар файли HTML ягон корт нест.

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

• ☐ Додаҳо. Массиви на камтар аз 10 объект дар мавзӯи интихоби шумо: мағоза, менюи чойхона, курсҳои MakeFirstStep, маршруткаҳои Душанбе, филмҳо. Ҳар объект на камтар аз 4 майдон дорад, ки дар байни онҳо title ва майдони мантиқӣ (масалан, inStock) ҳаст.
• ☐ Ҳамбандӣ аз ЗС. Қолаби HTML ва CSS аз рӯи промпт бо формулаи курс гирифта шудааст. Промпт дар файли prompt.txt нигоҳ дошта шудааст. Классҳо — аз рӯи BEM.
• ☐ createCard(item). Функсияи алоҳида, ки тавассути createElement кортро ҷамъ мекунад ва онро бармегардонад. Тамоми матн — тавассути textContent.
• ☐ render(items). Функсияи алоҳида: контейнерро тавассути replaceChildren тоза мекунад ва кортҳоро ҷойгир мекунад. Барои массиви холӣ «Ҳеҷ чиз ёфт нашуд»-ро нишон медиҳад.
• ☐ Тугмаи тоза кардан. Тугмаи «Тоза кардан» ҳамаи кортҳоро мебарорад (тавассути onclick, чун дар дарс). Бонус: тугмаи «Ҳамаро нишон деҳ» онҳоро бармегардонад.
• ☐ Ҳисобкунак. Матни «Нишон дода шуд: N» дар дохили render навсозӣ мешавад.
• ☐ Модификатор. Кортҳое, ки майдони мантиқӣ барояшон дурӯғ аст, класси иловагӣ (--out, --sold ва ғ.) тавассути classList мегиранд, ва CSS онҳоро ҷудо мекунад.
• ☐ Бонус. render-ро бо массиви филтршуда (масалан, танҳо арзонҳо) даъват кунед — оддӣ бо сатр дар код, бе тугмаҳо. Тугмаҳои-филтр дар дарси оянда мешаванд.

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

• Се файл: index.html, style.css, script.js ва файли prompt.txt бо промпте, ки аз рӯи он ЗС ҳамбандиро сохт.
• Скриншоти саҳифа бо 10 корт ва скриншот пас аз пахши «Тоза кардан».
• Ду-се ҷумла дар чати гурӯҳ: чӣ аз ҳама душвор баромад ва пас аз санҷиши коди ЗС чиро ислоҳ кардед.

Чӣ тавр баҳо медиҳем (0–10)