Vibecoding · 5-dars · 9-11 sinflar

Fan: IT / VibecodingПредмет: IT / VibecodingSubject: IT / Vibecoding Hafta: 1Неделя: 1Week: 1

Frilans: Mantiq (JS) va Reviziya

UIning o'zi yetarli emas. Mashinaga dvigatel qo'yamiz va kutilmagan mijoz talabini qanday to'g'ri hal qilishni o'rganamiz.

Jonlantirish

Dvigateli yo'q Mashina

O'tgan 40 daqiqa ichida siz chizgan UI (HTML+CSS) juda chiroyli. Lekin Start ni bossangiz, hech narsa bo'lmaydi. Nega?

Chunki unda JavaScript (Miya/Muskul) yo'q! U shunchaki surat.
Endi biz taymerga vaqtni sekundma-sekund kamaytirib beradigan kod qo'shishimiz kerak.

JS Qonunlari

JavaScript asoslari: Event

JavaScript shunchaki o'z-o'zidan ishlamaydi. Uni nimadir "uyg'otishi" kerak. Bu narsa Event (Voqea) deyiladi.

Click Event

Foydalanuvchi sichqoncha bilan Start tugmasini bosishi.

Load Event

Sayt birinchi marta ochilishi va yuklanishi.

JS Qonunlari

JavaScript asoslari: Function

Event sodir bo'lgandan keyin kompyuter nima qilishini Function (Funksiya) belgilaydi.

    Agar (Tugma bosilsa) -> [Event] 

    Unda { 

      1. Vaqtni 1 sekundga kamaytir;

      2. Ekranga yangi vaqtni yoz;

    } -> [Function]

Eng katta xato

UI ni buzmang! (Don't break CSS)

Havaskor: "Menga taymer ishlashini qilib ber."

Bunday prompt yozsangiz, AI mantiqni to'g'irlayman deb, o'tgan darsdagi chiroyli CSS dizayningizni o'chirib yuboradi.
Sehrli so'z (Vibecoder): "Menga faqat JS kodini yozib ber. CSS va HTML UI ga umuman tegma!"

Xatolarni topish

Bug (Xato) turlari

UI Bug

Tugma xato joyda yoki qizil emas. Bu CSS xatosi.

Logic Bug

Start tugmasi bosildi, lekin taymer ishlamadi. Event xatosi.

State Bug

Taymer 00:00 dan pastga qarab ketyapti (-00:01). JS Funksiya xatosi.

Klient qo'ng'irog'i

Kutilmagan O'zgarish (Revision)

Siz taymerni zo'r qildingiz, u ishlayapti. Lekin mijoz qo'ng'iroq qildi:

Mijoz:

"Men tunda ishlayman. Menga saytning yuqori qismida yorug'likni o'chirib yoqadigan Dark Mode (Tungi rejim) tugmasi ham kerak!"

Ikkita ish bittada

Reviziyani qanday to'g'rilaymiz?

Tungi rejim oddiy narsa emas. U ham UI, ham mantiqni o'zgartiradi.

1. UI qismi (HTML/CSS): Bizga yangi button (tugma) va qora fonga ega CSS qoidalari kerak.
2. JS qismi: Shu tugma bosilganda (Click Event), qora fonga o'tkazadigan Funksiya kerak.

Usta siri

Murakkab Prompt Yozish

Taymer buzilmasdan Dark Mode qo'shilishi uchun AI ga juda aniq yozing:

"Taymerning hozirgi barcha ishlash mantiqini (JS) saqlab qol! Faqat bitta yangi xususiyat qo'sh: Saytning tepa o'ng burchagida 'Dark Mode' tugmasi bo'lsin. U bosilganda butun sayt foni Qop-qora (Black), hamma yozuvlar esa Oq bo'lsin."

1-Qadam

Amaliyot: Taymerni yoqish

1. AI dan taymer (Start, Pause, Reset) ishlashi uchun JavaScript so'rash.
2. CSS/HTML dizayni mutlaqo buzilmaganligini tekshirish.

10 ballik mezon

AI dan taymer (Start, Pause, Reset) ishlashi uchun JavaScript so'rash.4

CSS/HTML dizayni mutlaqo buzilmaganligini tekshirish.4

Jami8

2-Qadam

Amaliyot: Reviziyani bajarish

1. Mijoz so'ragan 'Dark Mode' (Tungi rejim) tugmasini qo'shtirish.
2. Tugma bosilganda fon o'zgarishini va shu paytda taymer nolgacha (-0) xatosiz yetib borishini tekshirish (Debugging).

10 ballik mezon

Mijoz so'ragan 'Dark Mode' (Tungi rejim) tugmasini qo'shtirish.4

Tugma bosilganda fon o'zgarishini va shu paytda taymer nolgacha (-0) xatosiz yetib borishini tekshirish (Debugging).4

Jami8

Dars yakuni

Bugun nima qildingiz?

Tabriklaymiz! Siz ushbu 2 soat ichida:

Buyurtmani qabul qilib UI (Dizayn) chizdingiz.
JavaScript yordamida unga Mantiq va Jon kiritdingiz.
Mijozning eng murakkab Reviziyasini (Dark Mode) xatosiz uddaladingiz.

Endi siz haqiqiy Vibecodersiz!