Hodisalar: bosish, yozish, yuborish

O'tgan darsda JavaScript sahifani o'zgartirdi, lekin faqat bir marta — sahifa ochilganda. Haqiqiy sayt esa foydalanuvchiga javob beradi: tugma bosilsa — hisoblaydi, matn yozilsa — tekshiradi, forma yuborilsa — natija ko'rsatadi. Bu darsda sahifani shunday «jonli» qilishni o'rganamiz.

Hodisa nima?

Hodisa (inglizcha event) — sahifada sodir bo'ladigan voqea: tugma bosildi, klaviatura tugmasi bosildi, maydonga harf yozildi, forma yuborildi, sahifa yuklandi. Brauzer har bir shunday voqeani e'lon qiladi. Biz esa kerakli hodisani «tinglab» turamiz va u sodir bo'lganda o'z funksiyamizni ishga tushiramiz.

addEventListener

Hodisani tinglash uchun elementning addEventListener («hodisa tinglovchisini qo'shish») metodi chaqiriladi:

element.addEventListener("click", function () {
  // tugma bosilganda bajariladigan kod
});

Unda uch qism bor: kimni tinglaymiz (element), nimani tinglaymiz (hodisa nomi, "click") va nima qilamiz (funksiya). Bu funksiya hodisa ishlovchisi (inglizcha event handler) deyiladi.

<style>
  body { font-family: sans-serif; }
  button { padding: 8px 16px; font-size: 16px; }
</style>
<button id="tugma">Salomlashish</button>
<p id="javob"></p>

<script>
  const tugma = document.querySelector("#tugma");
  const javob = document.querySelector("#javob");

  tugma.addEventListener("click", function () {
    javob.textContent = "Salom! Siz tugmani bosdingiz.";
  });
</script>

Natijadagi tugmani bosing. E'tibor bering: funksiya sahifa ochilganda ishlamadi — u faqat tugma bosilganda, har bosilganda qaytadan ishlaydi.

Nomli funksiya bilan

Funksiyani oldindan alohida yozib, keyin uning nomini berish ham mumkin:

function salomla() {
  javob.textContent = "Salom!";
}

tugma.addEventListener("click", salomla);     // to'g'ri: funksiyaning o'zi
tugma.addEventListener("click", salomla());   // xato: darhol chaqiriladi

Hodisa obyekti

Hodisa sodir bo'lganda brauzer funksiyamizga u haqidagi ma'lumotlar yozilgan obyektni beradi. Uni odatda event (yoki qisqacha e) deb nomlashadi:

• event.target — hodisa qaysi elementda sodir bo'ldi (masalan, qaysi tugma bosildi);
• event.type — hodisa nomi ("click", "input"…);
• event.key — klaviaturada qaysi tugma bosildi (klaviatura hodisalarida).

<style>
  body { font-family: sans-serif; }
  button { padding: 8px 14px; margin: 4px; font-size: 16px; }
</style>
<button class="meva">🍎 Olma</button>
<button class="meva">🍐 Nok</button>
<button class="meva">🍇 Uzum</button>
<p id="tanlov">Mevani tanlang</p>

<script>
  const tanlov = document.querySelector("#tanlov");

  function tanlandi(event) {
    tanlov.textContent = "Siz tanladingiz: " + event.target.textContent;
  }

  // Bitta funksiyani uchala tugmaga ulaymiz
  document.querySelectorAll(".meva").forEach(function (b) {
    b.addEventListener("click", tanlandi);
  });
</script>

Bitta tanlandi funksiyasi uchala tugmaga xizmat qilyapti — qaysi biri bosilganini event.target aytib beradi.

Ko'p ishlatiladigan hodisalar

Amaliy misollar

Endi hodisalar bilan bir nechta kichik, lekin haqiqiy saytlarda juda ko'p uchraydigan narsalarni yasaymiz.

1. Hisoblagich

<style>
  body { font-family: sans-serif; text-align: center; }
  #son { font-size: 48px; margin: 10px; }
  button { font-size: 20px; width: 60px; padding: 6px; }
</style>
<div id="son">0</div>
<button id="kamaytir">−</button>
<button id="nol">0</button>
<button id="oshir">+</button>

<script>
  let soni = 0;
  const son = document.querySelector("#son");

  function yangila() {
    son.textContent = soni;
    if (soni < 0) {
      son.style.color = "crimson";
    } else {
      son.style.color = "black";
    }
  }

  document.querySelector("#oshir").addEventListener("click", function () {
    soni++;
    yangila();
  });
  document.querySelector("#kamaytir").addEventListener("click", function () {
    soni--;
    yangila();
  });
  document.querySelector("#nol").addEventListener("click", function () {
    soni = 0;
    yangila();
  });
</script>

Tuzilishiga qarang: son soni o'zgaruvchisida saqlanadi, yangila() funksiyasi esa uni ekranga chiqaradi. Har bir tugma faqat ikki ish qiladi: ma'lumotni o'zgartiradi va yangila() ni chaqiradi. «Avval ma'lumot, keyin ekran» degan bu usul keyingi darsdagi loyihada juda asqotadi.

2. Ochib-yopish

O'tgan darsdagi classList.toggle hodisa bilan birga ishlatilganda kuchiga kiradi:

<style>
  body { font-family: sans-serif; }
  .yashirin { display: none; }
  #batafsil { background: #eef4ff; padding: 4px 12px; border-radius: 8px; }
  button { padding: 6px 14px; font-size: 15px; }
</style>
<h3>JavaScript nima?</h3>
<p>Sahifaga harakat beradigan dasturlash tili.</p>
<button id="tugma">Batafsil</button>
<div id="batafsil" class="yashirin">
  <p>JavaScript 1995-yilda atigi 10 kunda yaratilgan.
     Bugun u deyarli barcha saytlarda ishlaydi.</p>
</div>

<script>
  const tugma = document.querySelector("#tugma");
  const blok = document.querySelector("#batafsil");

  tugma.addEventListener("click", function () {
    blok.classList.toggle("yashirin");

    if (blok.classList.contains("yashirin")) {
      tugma.textContent = "Batafsil";
    } else {
      tugma.textContent = "Yopish";
    }
  });
</script>

3. Belgilar hisoblagichi

input hodisasi maydonga har bir harf yozilganda (o'chirilganda yoki matn qo'yilganda ham) sodir bo'ladi. Ijtimoiy tarmoqlardagi «qolgan belgilar» hisoblagichi aynan shunday ishlaydi:

<style>
  body { font-family: sans-serif; }
  textarea { width: 100%; box-sizing: border-box;
             height: 70px; font-size: 15px; }
  .kop { color: crimson; font-weight: bold; }
</style>
<label for="xabar">Xabaringiz (100 belgigacha):</label>
<textarea id="xabar" maxlength="100"></textarea>
<p id="hisob">0 / 100</p>

<script>
  const xabar = document.querySelector("#xabar");
  const hisob = document.querySelector("#hisob");

  xabar.addEventListener("input", function () {
    const uzunlik = xabar.value.length;
    hisob.textContent = uzunlik + " / 100";

    if (uzunlik > 80) {
      hisob.classList.add("kop");      // oxiriga yaqinlashdi
    } else {
      hisob.classList.remove("kop");
    }
  });
</script>

Maydonga yozib ko'ring: 80 belgidan oshganda hisoblagich qizaradi. maxlength="100" esa HTML'ning o'zi — 100 dan ortiq belgi yozishga qo'ymaydi.

4. Klaviatura: keydown

keydown hodisasida event.key qaysi tugma bosilganini aytadi: "a", "A", "Enter", "Backspace", "ArrowUp" va hokazo.

<style>
  body { font-family: sans-serif; text-align: center; }
  input { font-size: 16px; padding: 6px; }
  #belgi { font-size: 36px; margin: 10px; color: teal; }
</style>
<input id="maydon" placeholder="Shu yerga yozing...">
<div id="belgi">?</div>
<p id="izoh"></p>

<script>
  const maydon = document.querySelector("#maydon");

  maydon.addEventListener("keydown", function (event) {
    document.querySelector("#belgi").textContent = event.key;

    if (event.key === "Enter") {
      const izoh = document.querySelector("#izoh");
      izoh.textContent = "Enter bosildi! Matn: " + maydon.value;
    }
  });
</script>

Maydonni bosib, turli tugmalarni bosing: harflar, raqamlar, strelkalar, Shift, Enter. O'yinlarda qahramonni strelkalar bilan yurgizish ham shu hodisa orqali qilinadi.

5. Tungi rejim

<style>
  body { font-family: sans-serif; padding: 12px; transition: 0.3s; }
  body.tungi { background: #1e1e2e; color: #e6e6f0; }
  .karta { border: 1px solid #ccc; border-radius: 10px;
           padding: 4px 14px; margin-top: 10px; }
  body.tungi .karta { border-color: #555; }
  button { padding: 6px 14px; font-size: 15px; }
</style>
<button id="rejim">🌙 Tungi rejim</button>
<div class="karta">
  <h3>Mening sahifam</h3>
  <p>Tugmani bosib, ko'rinishni almashtiring.</p>
</div>

<script>
  const rejim = document.querySelector("#rejim");

  rejim.addEventListener("click", function () {
    document.body.classList.toggle("tungi");

    if (document.body.classList.contains("tungi")) {
      rejim.textContent = "☀️ Kunduzgi rejim";
    } else {
      rejim.textContent = "🌙 Tungi rejim";
    }
  });
</script>

Butun dizayn CSS'da — body.tungi uchun alohida ranglar. JavaScript faqat bitta klassni almashtiradi. Bu saytning yuqorisidagi mavzu tugmasi ham shunga o'xshash ishlaydi.

Formani yuborish: submit

Odatda forma yuborilganda brauzer ma'lumotni serverga jo'natadi va sahifani qayta yuklaydi (6-dars). Biz esa ma'lumotni JavaScript'da o'zimiz tekshirmoqchimiz. Buning uchun:

1. tugmaning click hodisasini emas, formaning submit hodisasini tinglaymiz — shunda Enter bosilganda ham ishlaydi;
2. ishlovchining boshida event.preventDefault() chaqiramiz — «brauzerning odatdagi harakatini bekor qil», ya'ni sahifa qayta yuklanmasin.

<style>
  body { font-family: sans-serif; }
  input { display: block; margin: 4px 0 10px; padding: 6px; font-size: 15px; }
  .xato { color: crimson; }
  .ok { color: green; }
</style>
<form id="forma">
  <label>Ism: <input id="ism"></label>
  <label>Yosh: <input id="yosh" type="number"></label>
  <button>Yuborish</button>
</form>
<p id="xabar"></p>

<script>
  const forma = document.querySelector("#forma");
  const xabar = document.querySelector("#xabar");

  forma.addEventListener("submit", function (event) {
    event.preventDefault();   // sahifa qayta yuklanmasin

    const ism = document.querySelector("#ism").value.trim();
    const yosh = Number(document.querySelector("#yosh").value);

    if (ism === "") {
      xabar.textContent = "Iltimos, ismingizni yozing.";
      xabar.className = "xato";
    } else if (yosh < 1 || yosh > 120) {
      xabar.textContent = "Yoshni to'g'ri kiriting (1 dan 120 gacha).";
      xabar.className = "xato";
    } else {
      xabar.textContent = "Rahmat, " + ism + "! Ma'lumotlar qabul qilindi.";
      xabar.className = "ok";
    }
  });
</script>

Bo'sh qoldirib, noto'g'ri yosh yozib va to'g'ri to'ldirib yuborib ko'ring. Yangi narsalar:

• trim() — satr boshi va oxiridagi bo'sh joylarni olib tashlaydi. Shunda faqat probellardan iborat «ism» ham bo'sh hisoblanadi.
• Number(…) — maydonning value si har doim satr bo'ladi, hatto type="number" bo'lsa ham. Solishtirishdan oldin uni songa aylantiramiz.
• className = "xato" — elementning klassini butunlay almashtiradi (classList.add esa qo'shadi).

Kichik ilova: harorat o'giruvchi

O'rganganlarimizni birlashtiramiz: ikki maydon, ikki input hodisasi va hisob-kitob. Bir maydonga yozsangiz, ikkinchisi darhol yangilanadi:

<style>
  body { font-family: sans-serif; }
  .qator { display: flex; gap: 10px; align-items: center;
           margin: 8px 0; font-size: 20px; }
  input { width: 110px; font-size: 18px; padding: 6px; }
</style>
<h3>Harorat o'giruvchi</h3>
<div class="qator"><input id="selsiy" type="number" value="25"> °C</div>
<div class="qator"><input id="farengeyt" type="number"> °F</div>

<script>
  const selsiy = document.querySelector("#selsiy");
  const farengeyt = document.querySelector("#farengeyt");

  // Bir xonali kasrgacha yaxlitlash: 37.7777… → 37.8
  function yaxlitla(x) {
    return Math.round(x * 10) / 10;
  }

  selsiy.addEventListener("input", function () {
    const c = Number(selsiy.value);
    farengeyt.value = yaxlitla(c * 9 / 5 + 32);
  });

  farengeyt.addEventListener("input", function () {
    const f = Number(farengeyt.value);
    selsiy.value = yaxlitla((f - 32) * 5 / 9);
  });

  // Sahifa ochilganda bir marta hisoblab qo'yamiz
  farengeyt.value = yaxlitla(Number(selsiy.value) * 9 / 5 + 32);
</script>

Formulalar: °F = °C × 9 / 5 + 32 va °C = (°F − 32) × 5 / 9. Math.round eng yaqin butun songa yaxlitlaydi; 10 ga ko'paytirib, keyin 10 ga bo'lsak, bitta kasr xona qoladi.

DOMContentLoaded

16-darsda skript elementdan oldin tursa, null xatosi chiqishini ko'rgan edik. Skriptni ko'chirish imkoni bo'lmasa, kodni DOMContentLoaded hodisasiga «o'rab» qo'yish mumkin — u HTML to'liq o'qilganda sodir bo'ladi:

<script>
  document.addEventListener("DOMContentLoaded", function () {
    // Bu kod HTML to'liq o'qilgandan keyin ishlaydi
    document.querySelector("h1").textContent = "DOM tayyor!";
  });
</script>

<h1>Sarlavha</h1>

Skript <h1> dan oldin turibdi, lekin xato yo'q: funksiya darhol emas, DOM tayyor bo'lgandagina chaqirildi.

Mashqlar

<style>
  body { font-family: sans-serif; text-align: center; }
  #son { font-size: 40px; margin: 8px; }
  button { font-size: 18px; padding: 6px 16px; }
</style>
<div id="son">0</div>
<button id="tugma">+2</button>

<script>
  let soni = 0;
  // Tugma bosilganda soni 2 taga oshib, #son da ko'rinsin
</script>

<style>
  body { font-family: sans-serif; text-align: center; }
  #son { font-size: 40px; margin: 8px; }
  button { font-size: 18px; padding: 6px 16px; }
</style>
<div id="son">0</div>
<button id="tugma">+2</button>

<script>
  let soni = 0;
  const son = document.querySelector("#son");

  document.querySelector("#tugma").addEventListener("click", function () {
    soni = soni + 2;
    son.textContent = soni;
  });
</script>

<style>
  body { font-family: sans-serif; }
  input { font-size: 16px; padding: 6px; }
  #salom { font-size: 22px; }
</style>
<input id="ism" placeholder="Ismingiz">
<p id="salom">Salom, mehmon!</p>

<script>
  // Maydonga yozilgan sari #salom yangilansin
</script>

<style>
  body { font-family: sans-serif; }
  input { font-size: 16px; padding: 6px; }
  #salom { font-size: 22px; }
</style>
<input id="ism" placeholder="Ismingiz">
<p id="salom">Salom, mehmon!</p>

<script>
  const maydon = document.querySelector("#ism");
  const salom = document.querySelector("#salom");

  maydon.addEventListener("input", function () {
    const ism = maydon.value.trim();
    if (ism === "") {
      salom.textContent = "Salom, mehmon!";
    } else {
      salom.textContent = "Salom, " + ism + "!";
    }
  });
</script>

<style>
  body { font-family: sans-serif; }
  input, button { font-size: 16px; padding: 6px; }
</style>
<form id="forma">
  <input id="parol" type="password" placeholder="Parol">
  <button>Kirish</button>
</form>
<p id="xabar"></p>

<script>
  // Forma yuborilganda:
  // 1) sahifa qayta yuklanmasin
  // 2) parol 6 belgidan qisqa bo'lsa: "Parol juda qisqa"
  // 3) aks holda: "Parol qabul qilindi"
</script>

<style>
  body { font-family: sans-serif; }
  input, button { font-size: 16px; padding: 6px; }
</style>
<form id="forma">
  <input id="parol" type="password" placeholder="Parol">
  <button>Kirish</button>
</form>
<p id="xabar"></p>

<script>
  const forma = document.querySelector("#forma");
  const parol = document.querySelector("#parol");
  const xabar = document.querySelector("#xabar");

  forma.addEventListener("submit", function (event) {
    event.preventDefault();

    if (parol.value.length < 6) {
      xabar.textContent = "Parol juda qisqa";
    } else {
      xabar.textContent = "Parol qabul qilindi";
    }
  });
</script>

O'zingizni sinang