JavaScript yakuniy loyiha: vazifalar ilovasi

Bu darsda butun bo’lim bo’ylab o’rganilganlarni bitta ishlaydigan ilovada birlashtiramiz: vazifalar ro’yxati — qo’shish, bajarish, o’chirish, filtrlash va saqlash bilan.

Loyiha tuzilishi

Haqiqiy loyihada kod modullarga bo’linadi:

vazifalar/
├── index.html
└── src/
    ├── main.js        ← ulash va ishga tushirish
    ├── holat.js       ← ma'lumot va uning o'zgarishi
    ├── saqlash.js     ← localStorage bilan ishlash
    └── korinish.js    ← DOM chizish

Asosiy tamoyil — vazifalarni ajratish: holatni boshqaruvchi kod DOM’ni bilmaydi, chizuvchi kod ma’lumotni o’zgartirmaydi.

Holat qatlami

Ma’lumot va uning o’zgarishi — sof funksiyalar bilan:

JavaScript

// holat.js
function vazifaYarat(matn) {
return {
  id: Date.now() + Math.random().toString(36).slice(2, 7),
  matn: matn.trim(),
  bajarildi: false,
  sana: new Date().toISOString(),
};
}

// Har amal YANGI massiv qaytaradi — asl o'zgarmaydi
const qosh = (royxat, matn) => [...royxat, vazifaYarat(matn)];

const almashtir = (royxat, id) =>
royxat.map((v) => (v.id === id ? { ...v, bajarildi: !v.bajarildi } : v));

const ochir = (royxat, id) => royxat.filter((v) => v.id !== id);

const filtrla = (royxat, holat) => {
if (holat === "bajarilgan") return royxat.filter((v) => v.bajarildi);
if (holat === "faol") return royxat.filter((v) => !v.bajarildi);
return royxat;
};

// Sinov
let royxat = [];
royxat = qosh(royxat, "Dars o'qish");
royxat = qosh(royxat, "Kod yozish");
royxat = qosh(royxat, "Dam olish");

console.log("Qo'shildi:", royxat.length);

royxat = almashtir(royxat, royxat[0].id);
console.log("Birinchi bajarildi:", royxat[0].bajarildi);

console.log("Faol:", filtrla(royxat, "faol").length);
console.log("Bajarilgan:", filtrla(royxat, "bajarilgan").length);

royxat = ochir(royxat, royxat[2].id);
console.log("O'chirgandan keyin:", royxat.length);

Har funksiya alohida sinaladi — testlash darsidagi tamoyil.

Saqlash qatlami

JavaScript

// saqlash.js — localStorage bu sahifada ochilmaydi,
// shuning uchun xavfsiz o'rash naqshini ko'rsatamiz.

const KALIT = "vazifalar";

function saqla(royxat) {
try {
  localStorage.setItem(KALIT, JSON.stringify(royxat));
  return true;
} catch {
  console.log("Saqlab bo'lmadi (joy tugagan yoki ruxsat yo'q)");
  return false;
}
}

function yukla() {
try {
  const matn = localStorage.getItem(KALIT);
  if (!matn) return [];

  const malumot = JSON.parse(matn);
  if (!Array.isArray(malumot)) return [];

  // Tuzilmani tekshirish — buzilgan ma'lumotdan himoya
  return malumot.filter(
    (v) => v && typeof v.id === "string" && typeof v.matn === "string"
  );
} catch {
  return [];
}
}

console.log("saqla va yukla — har ikkalasi try/catch bilan o'ralgan");
console.log("yukla() har doim massiv qaytaradi:", Array.isArray(yukla()));

Uchta himoya: try/catch, massiv ekanini tekshirish va har elementning tuzilmasini tekshirish. localStorage darsidagi qoida.

To’liq ilova

JavaScript

// ————— Holat —————
let vazifalar = [];
let joriyFiltr = "hammasi";

const yangiId = () => Date.now() + Math.random().toString(36).slice(2, 7);

// ————— Elementlar —————
const input = document.querySelector("#matn");
const ul = document.querySelector("#royxat");
const hisob = document.querySelector("#hisob");

// ————— Chizish —————
function chiz() {
const korinadigan = vazifalar.filter((v) => {
  if (joriyFiltr === "faol") return !v.bajarildi;
  if (joriyFiltr === "bajarilgan") return v.bajarildi;
  return true;
});

ul.replaceChildren();

for (const v of korinadigan) {
  const li = document.createElement("li");
  li.dataset.id = v.id;
  li.style.cssText = "display:flex;gap:8px;align-items:center;padding:4px 0";

  const belgi = document.createElement("input");
  belgi.type = "checkbox";
  belgi.checked = v.bajarildi;
  belgi.dataset.amal = "almashtir";

  // XSS himoyasi: textContent, innerHTML emas
  const span = document.createElement("span");
  span.textContent = v.matn;
  span.style.cssText = "flex:1" + (v.bajarildi
    ? ";text-decoration:line-through;color:#999" : "");

  const ochir = document.createElement("button");
  ochir.textContent = "×";
  ochir.dataset.amal = "ochir";

  li.append(belgi, span, ochir);
  ul.append(li);
}

const qolgan = vazifalar.filter((v) => !v.bajarildi).length;
hisob.textContent = vazifalar.length === 0
  ? "Vazifa yo'q"
  : qolgan + " ta bajarilmagan / jami " + vazifalar.length;
}

// ————— Amallar —————
function qosh(matn) {
const toza = matn.trim();
if (!toza) return;
vazifalar = [...vazifalar, { id: yangiId(), matn: toza, bajarildi: false }];
input.value = "";
chiz();
}

// ————— Hodisalar (delegatsiya) —————
document.querySelector("#qosh").addEventListener("click", () => qosh(input.value));

input.addEventListener("keydown", (e) => {
if (e.key === "Enter") qosh(input.value);
});

ul.addEventListener("click", (e) => {
const amal = e.target.dataset.amal;
if (!amal) return;

const id = e.target.closest("li").dataset.id;

if (amal === "almashtir") {
  vazifalar = vazifalar.map((v) =>
    v.id === id ? { ...v, bajarildi: !v.bajarildi } : v);
} else if (amal === "ochir") {
  vazifalar = vazifalar.filter((v) => v.id !== id);
}
chiz();
});

document.querySelector("#filtrlar").addEventListener("click", (e) => {
if (!e.target.dataset.filtr) return;
joriyFiltr = e.target.dataset.filtr;
chiz();
});

// ————— Boshlash —————
qosh("Dars o'qish");
qosh("Kod yozish");
qosh("Dam olish");

console.log("Ilova tayyor —", vazifalar.length, "ta vazifa");
console.log("Yuqoridagi maydonda sinab ko'ring: qo'shing, belgilang, filtrlang");

Sahifa

Ishlab ko’ring: vazifa qo’shing, belgilang, filtrlarni bosing.

Qanday naqshlar ishlatildi

Naqsh	Dars
O’zgartirmaslik (`[...massiv]`, `{ ...obyekt }`)	ES6 sintaksis
`map`, `filter` bilan holat o’zgarishi	Massiv metodlari
Bitta chizish funksiyasi	DOM yaratish
`textContent` — XSS himoyasi	Xavfsizlik
Bitta tinglovchi, `data-amal`	Hodisa delegatsiyasi
`try/catch` bilan saqlash	localStorage

Keyingi qadamlar

Loyihani kengaytirish uchun g’oyalar:

Tahrirlash — vazifa matnini ikki marta bosib o’zgartirish;
Muddat — sana qo’shish va o’tganini ajratish;
Saralash — sana yoki muhimlik bo’yicha;
Server — fetch bilan API’ga saqlash;
Testlar — holat funksiyalari uchun Vitest;
Bundler — Vite bilan modullarga bo’lish.

Bo’lim yakuni

Shu bilan JavaScript bo’limi tugadi. Siz o’rgandingiz:

Asoslar — o’zgaruvchi, tur, shart, sikl, funksiya, massiv, obyekt;
DOM — sahifani o’qish, o’zgartirish, element yaratish, hodisalar;
Asinxronlik — callback, Promise, async/await, fetch;
Tuzilma — klass, meros, modul, prototip;
Amaliyot — testlash, xavfsizlik, tezlik, kod sifati.

Amaliy mashq

Ilovani o’z faylingizga ko’chirib, ishga tushiring;
localStorage ni ulang — sahifa yangilanganda saqlanib qolsinmi?
“Hammasini tozalash” tugmasini qo’shing;
bajarilgan vazifalarni o’chiradigan tugma yasang;
holat funksiyalariga test yozing;
loyihani modullarga bo’lib, Vite bilan yig’ing.

Qisqacha xulosa

Kodni qatlamlarga ajrating: holat, saqlash, ko’rinish.
Holatni o’zgartirmang — yangi massiv/obyekt qaytaring.
Bitta chiz() funksiyasi butun ko’rinishni holatdan qayta quradi.
Hodisalarni delegatsiya bilan bitta joyda ushlang.
Foydalanuvchi matni uchun doim textContent.
Tashqi ma’lumotni (localStorage, API) har doim tekshirib qabul qiling.