Loyiha - Hodisa tinglovchisi (Event Listener)

Event Listener'dan foydalanish

Ushbu loyiha avvalgi loyihaning takomillashtirilgan nusxasidir. Endi biz onclick atributlari o'rniga Hodisa tinglovchilari (Event Listeners) dan foydalanamiz.

---

Nima uchun Event Listener?

addEventListener() dan foydalanish quyidagilarni osonlashtiradi:

• HTML va JavaScript-ni bir-biridan ajratish
• Bitta elementga bir nechta hodisalarni qo'shish
• Kattaroq loyihalarda tozaroq kod yozish

---

To'liq kod

HTML kodi

<h2>Hisoblagich</h2>

<p id="count" style="font-size:40px;">0</p>
<p id="message"></p>

<button id="btnPlus">+</button>
<button id="btnMinus">-</button>
<button id="btnReset">Reset</button>
<button id="btnSave">Saqlash</button>
<button id="btnLoad">Yuklash</button>

<script src="counter.js"></script>

counter.js (JavaScript)

document.addEventListener('DOMContentLoaded', function () {
  // Hisoblagichni e'lon qilish
  let count = 0

  // Element o'zgaruvchilari
  const countEl = document.getElementById('count')
  const msgEl = document.getElementById('message')
  const btnPlus = document.getElementById('btnPlus')
  const btnMinus = document.getElementById('btnMinus')
  const btnReset = document.getElementById('btnReset')
  const btnSave = document.getElementById('btnSave')
  const btnLoad = document.getElementById('btnLoad')

  // Hodisa tinglovchilarini qo'shish
  btnPlus.addEventListener('click', increaseCount)
  btnMinus.addEventListener('click', decreaseCount)
  btnReset.addEventListener('click', resetCount)
  btnSave.addEventListener('click', saveCount)
  btnLoad.addEventListener('click', loadCount)

  // Hisoblagichni ko'rsatish funksiyasi
  function updateCount() {
    countEl.innerHTML = count
  }

  // Xabar ko'rsatish funksiyasi
  function showMessage(text) {
    msgEl.innerHTML = text
    setTimeout(function () {
      msgEl.innerHTML = ''
    }, 3000)
  }

  // Oshirish funksiyasi
  function increaseCount() {
    count++
    updateCount()
  }

  // Kamaytirish funksiyasi
  function decreaseCount() {
    count--
    updateCount()
  }

  // Nolga tushirish funksiyasi
  function resetCount() {
    count = 0
    updateCount()
  }

  // Saqlash funksiyasi
  function saveCount() {
    localStorage.setItem('count', count)
    showMessage('Saqlandi!')
  }

  // Yuklash funksiyasi
  function loadCount() {
    let saved = localStorage.getItem('count')
    if (saved !== null) {
      count = Number(saved)
      showMessage('Yuklandi!')
    }
    updateCount()
  }
})

---

Yaxshilanishlar

• JavaScript tashqi faylga (counter.js) ko'chirildi.
• DOMContentLoaded ishlatildi, shunda JavaScript faqat HTML tayyor bo'lgandan keyin ishlaydi.
• Element o'zgaruvchilari va kichik funksiyalar yordamida tozaroq tuzilma.
• "Saqlandi!" va "Yuklandi!" kabi vaqtinchalik xabarlar qo'shildi.

---

Nima uchun DOMContentLoaded ishlatiladi?

Tashqi JavaScript faylidan foydalanganda, brauzer skriptni HTML hali to'liq tayyor bo'lmasdan yuklab olishi mumkin. Shuning uchun biz quyidagidan foydalanamiz:

document.addEventListener('DOMContentLoaded', function () {
  // JavaScript kodi bu yerda
})

Bu shuni anglatadiki: JavaScript kodini sahifa HTML-ni yuklab bo'lgandan keyin ishga tushir.