HTML, CSS va JavaScript ko'prigi

Web tizimini tushunish boshqa, brauzerda uni qurish boshqa ko’nikma. Shu paytgacha so’rov, server va ma’lumotlar bazasi haqida gaplashdik. Endi foydalanuvchi bevosita ko’radigan qatlamga tushamiz.

Frontendning uch tayanchi bor va ular bir-birini almashtirmaydi — har biri o’z vazifasini bajaradi.

Qatlam	Vazifasi	Forma misolida
HTML	Mazmun va semantika	label, input, button
CSS	Ko’rinish va layout	masofa, rang, responsive holat
JavaScript	Xatti-harakat va holat	tekshirish, yuborish, natijani ko’rsatish

HTMLsiz JavaScript qaysi element bilan ishlashini bilmaydi, CSSsiz interfeys o’qilishi qiyin bo’ladi, JavaScriptsiz esa ko’p zamonaviy interaksiya sodir bo’lmaydi.

Bir forma — uch qatlam

Keling, oddiy obuna formasini uch bosqichda quraylik. Avval faqat HTML:

<form id="obuna">
  <label for="email">Email manzilingiz</label>
  <input type="email" id="email" name="email" required />
  <button type="submit">Obuna bo'lish</button>
  <p id="natija" role="status"></p>
</form>

Diqqat qiling: bu bosqichda hech qanday CSS va JavaScript yo’q, lekin forma allaqachon ishlaydi. Brauzer type="email" va required tufayli kiritishni o’zi tekshiradi, label esa input bilan bog’langan.

Endi CSS ko’rinishni beradi:

#obuna { display: grid; gap: 0.75rem; max-width: 24rem; }
#obuna input { padding: 0.6rem; border: 1px solid #999; border-radius: 6px; }
#obuna input:focus-visible { outline: 2px solid #0a58ca; }

:focus-visible qatorini tashlab ketmang — u klaviatura bilan ishlaydigan foydalanuvchi qayerda turganini ko’rsatadi. Bu accessibility darsidagi asosiy talab.

Nihoyat JavaScript xatti-harakatni qo’shadi:

const forma = document.querySelector('#obuna');
const natija = document.querySelector('#natija');

forma.addEventListener('submit', async (hodisa) => {
  hodisa.preventDefault();
  natija.textContent = 'Yuborilmoqda...';

  const javob = await fetch('/api/obuna', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ email: forma.email.value }),
  });

  natija.textContent = javob.ok
    ? 'Obuna tasdiqlandi.'
    : 'Yuborib bo\'lmadi, qayta urinib ko\'ring.';
});

Shu 15 qatorda butun web zanjiri bor: hodisa, fetch orqali HTTP so’rov, JSON body va serverdan kelgan javobga qarab interfeysni yangilash.

Progressive enhancement

Qatlamlarni ajratish

Yuqoridagi tartib tasodifiy emas. U progressive enhancement deb ataladigan yondashuvni ko’rsatadi: avval hamma joyda ishlaydigan asos, keyin ustiga qulaylik qatlamlari.

Bu nazariy chiroylilik emas, amaliy foyda: JavaScript yuklanmasa ham (sekin tarmoq, xato, eski brauzer) forma action atributi orqali baribir yuborilishi mumkin. Foydalanuvchi hech bo’lmasa asosiy vazifasini bajaradi.

Har qatlam o’z ishini qilsin

Boshlovchilar tez-tez qatlamlarni aralashtirib yuboradi. Quyidagi jadval eng ko’p uchraydigan xatolarni ko’rsatadi:

Xato	Nega yomon	To’g’ri yechim
Tugma o’rniga <div onclick>	Klaviatura ishlamaydi, screen reader tanimaydi	<button>
Navigatsiya uchun <button>	Yangi oynada ochib bo’lmaydi	<a href>
Xatoni faqat qizil rang bilan ko’rsatish	Rang ko’rmaydigan foydalanuvchi bilmaydi	Rang va matn
Sarlavha uchun <div class="big">	Tuzilma yo’qoladi, SEO zarar ko’radi	<h2>
Masofani <br> bilan berish	Tuzilma emas, ko’rinish masalasi	CSS margin

Umumiy qoida: element vazifasiga qarab tanlanadi, ko’rinishiga qarab emas. Ko’rinishni har doim CSS bilan o’zgartirish mumkin, lekin noto’g’ri elementning ma’nosini tuzatib bo’lmaydi.

Formani ishonchli qilish

Brauzer validatsiyasi qulay, lekin u xavfsizlik emas. Foydalanuvchi DevTools orqali required atributini o’chirib yuborishi yoki so’rovni to’g’ridan to’g’ri yuborishi mumkin.

Shuning uchun qoida ikki tomonlama bo’ladi:

• Klientda tekshirish — tez javob va yaxshi tajriba uchun.
• Serverda tekshirish — haqiqiy himoya uchun.

Bu web xavfsizligi darsidagi “serverga ishonch” tamoyilining frontenddagi ko’rinishi.

Holat va xato boshqaruvi

Holat qayerda saqlanadi

Interfeys “jonli” bo’lishi uchun u nimanidir eslab turishi kerak: forma yuborilyaptimi, xato bormi, ro’yxatda nechta element bor. Bu holat (state) deb ataladi va u qayerda saqlanishi frontend qarorlarining eng muhimlaridan biri.

Holatning uch manzili bor va ular tez-tez chalkashtiriladi:

Manzil	Nima uchun mos	Misol
DOM elementining o’zi	Kichik, faqat ko’rinishga oid holat	Input qiymati, checkbox belgisi
JavaScript o’zgaruvchisi	Sahifa ichidagi vaqtinchalik holat	Yuborilayotgan so’rov bormi
Server yoki baza	Qayta ochilganda saqlanishi kerak bo’lgan	Foydalanuvchi ro’yxati, buyurtma

Keng tarqalgan xato — serverda turishi kerak bo’lgan ma’lumotni faqat sahifada saqlash. Foydalanuvchi sahifani yangilaganda hammasi yo’qoladi. Aksincha xato ham bor: har kichik o’zgarishda serverga so’rov yuborish interfeysni sekinlashtiradi.

Sodda mezon: sahifa yopilganda yo’qolishi mumkinmi? Ha bo’lsa — klientda, yo’q bo’lsa — serverda.

Xato holatlarini unutmang

Yuqoridagi kodda bitta muhim kamchilik bor: u faqat muvaffaqiyat va umumiy xatoni ko’rsatadi. Haqiqiy interfeysda kamida to’rt holat bo’ladi:

• Boshlang’ich — hech narsa qilinmagan.
• Yuklanmoqda — so’rov ketdi, javob kutilmoqda.
• Muvaffaqiyat — natija keldi va ko’rsatildi.
• Xato — nima bo’ldi va foydalanuvchi endi nima qilishi kerak.

To’rtinchi holat ko’pincha e’tibordan chetda qoladi. “Xatolik yuz berdi” degan xabar foydalanuvchiga hech narsa bermaydi. Yaxshi xabar nima bo’lganini va keyingi qadamni aytadi: “Internet aloqasi uzildi, qayta urinib ko’ring”.

Framework qachon kerak

React, Vue va boshqa frameworklar HTML, CSS va JavaScriptni bekor qilmaydi — ular shu uchtasi ustiga quriladi. Framework holatni boshqarish murakkablashganda foyda beradi: ko’p komponent, umumiy ma’lumot, tez-tez o’zgaradigan interfeys.

Kichik forma yoki oddiy sahifa uchun esa framework ortiqcha yuk bo’lishi mumkin. Yuqoridagi 15 qatorlik kod hech qanday kutubxonasiz ishlaydi.

Amaliy tartib

1. HTML/CSS bilan semantik, responsive sahifa quring.
2. JavaScript asoslarini o’rganib, formadagi qiymatni tekshiring va ekranga natija chiqaring.
3. DevTools Network orqali so’rovni kuzating.
4. Keyin APIga ulanadigan kichik loyiha qiling.
5. Faqat shundan keyin framework tanlang.

CSSni boshqarib turish

Loyiha o’sgani sari CSS eng tez tartibsizlanadigan qism bo’ladi. Buning sababi oddiy: HTML va JavaScriptda xato darhol ko’rinadi, CSSda esa eski qoida yillar davomida yashirin turishi mumkin.

Uch odat buni oldini oladi. Birinchidan, rang va masofa kabi qiymatlarni takrorlamang — ularni CSS o’zgaruvchilarida bir joyda saqlang. Ikkinchidan, !important dan qochishga harakat qiling: u muammoni hal qilmaydi, faqat keyingi dasturchiga qiyinroq qiladi. Uchinchidan, selektorni imkon qadar sodda tuting — uzun, chuqur selektor keyinchalik almashtirish qiyin bo’lgan bog’liqlik yaratadi.

Responsive dizaynda ham tartib bor: avval kichik ekran uchun yozing, keyin kattaroq ekranlarga qo’shimcha qoida qo’shing. Bu yo’l qisqaroq CSS beradi va mobil foydalanuvchi ortiqcha qoidalarni yuklamaydi.

Amaliy mashq

Yuqoridagi obuna formasini o’zingiz yozing, lekin uch bosqichda: avval faqat HTML, keyin CSS, oxirida JavaScript. Har bosqichdan keyin sahifani brauzerda oching va nima ishlayotganini yozib qo’ying.

So’ng DevTools’da JavaScriptni o’chirib ko’ring. Forma qanday xatti-harakat qiladi? Foydalanuvchi baribir maqsadiga yeta oladimi?

Oxirida formani faqat klaviatura bilan to’ldiring: Tab bilan maydonlar orasida yuring, Enter bilan yuboring. Fokus har doim ko’rinib turadimi va tartib mantiqiymi — shu ikki savolga javob bering.

Qisqacha xulosa

• HTML mazmun, CSS ko’rinish, JavaScript xatti-harakat — uchtasi bir-birini almashtirmaydi.
• Avval ishlaydigan HTML, keyin CSS, so’ng JavaScript — progressive enhancement.
• Element vazifasiga qarab tanlanadi: amal uchun <button>, navigatsiya uchun <a>.
• Klient validatsiyasi qulaylik, server validatsiyasi xavfsizlik uchun.
• Framework asosni almashtirmaydi — u asos ustiga quriladi.

Keyingi darsda CSR, SSR va SSG — HTML qayerda va qachon yaratilishiga qarab web arxitekturasi qanday o’zgarishini ko’ramiz.