Vibecoding · 08-dars · 7–8-sinflar

Fan: Veb Dasturlash & JavaScript Kohorta: Middle Web 7-8 Hafta: 2 (Interaktiv Web)

JavaScript Hodisalari: Veb-Sahifani "Tirik" Qilish va Kliklar Dunyosi

Shu paytgacha biz yaratgan saytlar chiroyli, ammo harakatsiz plakatdek edi. HTML suyakni qurdi, CSS rang va Flexbox qolipini berdi. Bugun esa saytga asab tizimini — JavaScript ni ulaymiz! Sahifamiz sichqoncha kliklarini tinglashni, tugmalar bosilishiga javob qaytarishni va matnlarni bir zumda o'zgartirishni o'rganadi.

Saytning Uch Qatlami

HTML, CSS va JavaScript: Tirik Interfeysning 3 Ta Qatlami

🦴 HTML (Suyak)

Saytning barcha elementlari: sarlavha, tugma, matn qutisi va rasmlarni belgilaydi.

Statik bino

🎨 CSS (Tashqi Ko'rinish)

Ranglar, shriftlar, soyalar, qorong'i rejim va elementlar joylashuvini chizadi.

Go'zallik va dizayn

⚡ JavaScript (Aql va Harakat)

Tugma bosilganda sonni oshiradi, rangni almashtiradi va saytni tirik qiladi.

Harakat va dinamika

Hujjat Obyekt Modeli

DOM Nima? JavaScript HTML Elementlarini Qanday Topadi va O'zgartiradi?

Daraxtsimon Tizim (DOM Tree)

Brauzer HTML sahifani ochganda, har bir tegni xotiradagi jonli obyektga aylantiradi.

JavaScript da elementni ushlash buyrug'i:

const myBtn = document.querySelector('#btnClick');
const title = document.querySelector('.main-title');

DOM da Nimani O'zgartirish Mumkin?

// 1. Matnni o'zgartirish
title.textContent = "Yangi Kiber Sarlavha!";

// 2. Rang va CSS uslubni o'zgartirish
title.style.color = "#00ff88";

// 3. CSS klass qo'shish yoki olib tashlash
myBtn.classList.toggle("active");

Hodisalarni Tinglash

`addEventListener` Usuli: Kliklarni Poylovchi Kiber-Datchik

Buyruqning Tuzilishi

        element.addEventListener("событие", функция);
      

Element: Qaysi tugma javob berishi kerak?
Hodisa: Qanday harakatni kutamiz? (masalan, 'click').
Funksiya: Hodisa ro'y berganda qanday kod ishlasin?

Jonli Kod Namunasi

const btn = document.querySelector('#kiberTugma');
const countSpan = document.querySelector('#soni');
let clicks = 0;

btn.addEventListener('click', function() {
  clicks++;
  countSpan.textContent = clicks;
  console.log("Tugma bosildi! Yangi son: " + clicks);
});

Eng Ko'p Ishlatiladigan Hodisalar

Eng Mashhur 4 Ta Hodisa: Click, Input, Keydown va Mouseover

Sichqoncha Hodisalari

'click': Tugma yoki karta ustiga sichqoncha bilan bitta bosish.
'mouseover': Sichqoncha kursorini element ustiga olib kelish.

Klaviatura va Forma Hodisalari

'input': Kiritish maydoniga har bir yangi harf yozilganda ishlaydi.
'keydown': Klaviaturadagi har qanday tugma (Enter, Space) bosilishi.

Hodisa Haqida To'liq Ma'lumot

Hodisa Obyekti (`event`): Kim Bosildi va Qaysi Tugma?

Klaviatura Tugmalarini Tutish

document.addEventListener('keydown', function(event) {
  console.log("Bosilgan tugma: " + event.key);
  
  if (event.key === "Enter") {
    alert("Enter bosildi! Xabar yuborilmoqda...");
  }
  if (event.key === "Escape") {
    modal.style.display = "none";
  }
});

`event` Obyektining Asosiy Maydonlari

event.target: Foydalanuvchi bosgan aniq HTML elementi.
event.key: Bosilgan tugma nomi ('Enter', ' ', 'w').
clientX, clientY: Sichqonchaning ekrandagi aniq piksellari.

JS va CSS Hamkorligi

JS + CSS Hamkorligi: `classList.toggle` Orqali Tungi Mavzu

Oltin Qoida: Dizayn CSS da, Mantiq JS da

JavaScript ichida ranglarni yozib tashlamang. CSS faylda bitta chiroyli .dark-mode klassini yarating va JS da uni yoqib-o'chiring!

Tungi Mavzuni Yoqish Kodi

const themeBtn = document.querySelector('#themeBtn');

themeBtn.addEventListener('click', function() {
  // Bitta buyruq body ga dark klassini qo'shadi yoki olib tashlaydi!
  document.body.classList.toggle('dark-theme');
});

Jonli Ko'rinish

`input` Hodisasi: Yozilgan Harflarni Real Vaqtda Ko'rsatish

Jonli Ko'rsatish Kodi

const nameInput = document.querySelector('#ismInput');
const cardName = document.querySelector('#kartaIsm');

nameInput.addEventListener('input', function() {
  cardName.textContent = nameInput.value || "Ismingiz...";
});

Real Hayotda Qayerda Ishlatiladi?

Kiber-Burchak: Ism yozilganda darhol tayyor beydjik chizilishi.
Jonli qidiruv: Harflar kiritilishi bilanoq natijalar filtrlanishi.

Eng Ko'p Uchraydigan 3 Xato

Boshlovchilar Ko'p Yo'l Qo'yadigan 3 Ta Xato

1. Null Xatosi

Klass yoki ID nomini xato yozsangiz, JS elementni topa olmay xato beradi.

2. Skriptni Boshida Ulash

Skriptni teglardan oldin ulasangiz, sahifa chizilmasdan turib JS ishlaydi va element topilmaydi.

3. `.value` ni Unutish

Matn kiritish qutilarida yozuv .value da turadi, textContent da emas!

Amaliy Laboratoriya

Amaliyot: Kiber-Boshqaruv Paneli (`lab/index.html`)

Interaktiv Sinov Maydoni

Dars papkasidagi laboratoriya stendida quyidagilar bajariladi:

Quvvat klikeri: Tugma bosilganda batareya quvvati +10 ga oshadi.
Signal chirog'i: Qizil signal chirog'ini classList.toggle bilan yoqish.
Uchuvchi nomi: Kiritilgan ism darhol bort kompyuterida aks etadi.

Ish Varaqasidagi Topshiriq

Brauzerda lab/index.html ni oching.
Quvvat tugmasini 10 marta bosib, natijani qayd eting.
Signal rejimini yoqib, qo'shilgan CSS klass nomini yozing.
Ish varaqasidagi hodisalar jadvalini to'ldiring.

Toza Kod Qoidalari

Toza va Professional JavaScript Qoidalari

1. Tushunarli O'zgaruvchi Nomlari

Bitta harfli (x, a, b) nomlar qo'ymang. Aniq va tushunarli qilib nomlang: quvvatTugmasi, hisoblagich.

2. Skriptni Body Oxirida Qo'yish

Skriptni doimo </body> tegining eng oxiriga qo'ying. Shunda sahifa elementlari to'liq yuklangach JS ishga tushadi.

08-Dars Yakuni · 10 Ball

Xulosa: Haqiqiy Dasturlash Sari Birinchi Katta Qadam

Darsning 3 Ta Bosh Qoidasi

JS vebni tirik qiladi: Barcha tugmalar va animatsiyalar hodisalar ustiga quriladi.
addEventListener — asosiy datchik: U barcha sichqoncha va klaviatura amallarini kutadi.
classList orqali boshqaring: Ranglarni JS ichida emas, CSS klasslari orqali almashtiring.

10 Ballik Baholash Mezoni

DOM Nazariyasi: HTML/CSS/JS vazifalarini bilish — 3 ball
Laboratoriya Stendi: hisoblagich va signalni ishga tushirish — 3 ball
addEventListener Kodi: klik datchigini xatosiz yozish — 4 ball
Rag'bat: Enter tugmasini keydown orqali tutish — +2 ball