Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

JS hodisa tinglovchisi

ULASHISH

Voqealar tinglovchisidan foydalanish

Bu avvalgi loyihaning nusxasi.

Endi Onclick atributlari o‘rniga hodisa tinglovchilari (Event Listeners) ishlatiladi.

0

Hodisa tinglovchilaridan foydalanish

addEventListener()’dan foydalanish quyidagilarni osonlashtiradi:

  • HTML va JavaScript’ni alohida saqlash
  • Bitta elementga bir nechta hodisa qo‘shish
  • Katta loyihalarda tozaroq kod yozish

HTML kodi

<h2>Counter</h2>

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

<button id="btnPlus">+</button>
<button id="btnMinus">-</button>
<button id="btnReset">Reset</button>
<button id="btnSave">Save</button>
<button id="btnLoad">Load</button>

<script>
// JavaScript goes here
</script>

JavaScript kodi

// Add event listeners
document.getElementById("btnPlus").addEventListener("click", increaseCount);
document.getElementById("btnMinus").addEventListener("click", decreaseCount);
document.getElementById("btnReset").addEventListener("click", resetCount);
document.getElementById("btnSave").addEventListener("click", saveCount);
document.getElementById("btnLoad").addEventListener("click", loadCount);

// Declare the counter
let count = 0;

// Load counter when the page opens
loadCount();

// Function to display the counter
function updateCount() {
  document.getElementById("count").innerHTML = count;
}

// Function to increase the counter
function increaseCount() {
  count++;
  updateCount();
}

// Function to decrease the counter
function decreaseCount() {
  if (count > 0) {
  count--;
    updateCount();
  }
}

// Function to reset the counter
function resetCount() {
  count = 0;
  updateCount();
}

// Function to save the counter
function saveCount() {
  localStorage.setItem("count", count);
}

// Function to load the counter
function loadCount() {
  let saved = localStorage.getItem("count");
  if (saved !== null) {
    count = Number(saved);
  }
  updateCount();
}
O‘zingiz sinab ko‘ring »

    Improvements

  • JavaScript tashqi faylga (counter.js) ko‘chirilgan
  • DOMContentLoaded-dan foydalanadi, shuning uchun JavaScript faqat HTML tayyor bo‘lgandan keyin ishlaydi
  • Cleaner structure using small functions + element variables
  • Qisqa Saved! xabarini ko‘rsatadi
  • Qisqa Loaded! xabarini ko‘rsatadi

HTML kodi

<!DOCTYPE html>
<html>
<body>

<h2>Counter</h2>

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

<button id="btnPlus">+</button>
<button id="btnMinus">-</button>
<button id="btnReset">Reset</button>
<button id="btnSave">Save</button>
<button id="btnLoad">Load</button>

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

</body>
</html>

E’tibor bering, <script> yorlig‘i pastda, oldin joylashtirilgan </body> .

counter.js

document.addEventListener("DOMContentLoaded", function () {

// Declare the counter
let count = 0;

// Use element variables
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");

// Add event listeners
btnPlus.addEventListener("click", increaseCount);
btnMinus.addEventListener("click", decreaseCount);
btnReset.addEventListener("click", resetCount);
btnSave.addEventListener("click", saveCount);
btnLoad.addEventListener("click", loadCount);

// Function to display the counter
function updateCount() {
  document.getElementById("count").innerHTML = count;
}

// Function to diplay message
function showMessage(text) {
  msgEl.innerHTML = text;
  setTimeout(function () {
    msgEl.innerHTML = "";
  }, 3000);
}

// Function to increase the counter
function increaseCount() {
  count++;
  updateCount();
}

// Function to decrease the counter
function decreaseCount() {
  count--;
  updateCount();
}

// Function to reset the counter
function resetCount() {
  count = 0;
  updateCount();
}

// Function to save the counter
function saveCount() {
  localStorage.setItem("count", count);
  showMessage("Saved!");
}

// Function to load the counter
function loadCount() {
  let saved = localStorage.getItem("count");
  if (saved !== null) {
    count = Number(saved);
    showMessage("Loaded!");
  }
  updateCount();
}

});
O‘zingiz sinab ko‘ring »

Tashqi fayldagi JavaScript

counter.js’dan foydalanish loyihangizni:

  • Ko‘proq uyushgan
  • HTML va JavaScript’ni alohida saqlash
  • O‘qish va qayta ishlatish osonroq
  • Haqiqiy loyihalarga ko‘proq o‘xshash qiladi

DOMContentLoaded

Nega DOMContentLoaded ishlatiladi?

Tashqi JavaScript faylidan foydalanganda, brauzer HTML tayyor bo‘lgunga qadar skriptni yuklashi mumkin. Shunday qilib, biz foydalanamiz:

document.addEventListener("DOMContentLoaded", function() {
// JavaScript code
});

Buning ma’nosi: sahifa HTML yuklashni tugatgandan so‘ng JavaScript kodini ishga tushiring.

JavaScript loyihalari

  • JavaScript Counter LocalStorage-da tiklash va saqlash bilan hisoblagich loyihasi.
  • JavaScript hodisa tinglovchisi (Event Listener)
    onclick o‘rniga hodisa tinglovchisidan foydalanadigan hisoblagich loyihasi.
  • JavaScript-to-do ro‘yxati Mahalliy xotirada massivda saqlangan bajariladigan ishlar ro‘yxati.
  • JavaScript Modal qalqib chiquvchi oynasi sahifaning yuqori qismida paydo bo‘ladigan modal qalqib chiquvchi oyna.
  • JavaScript’da formani tekshirish
    Kiritilgan ma’lumotlarni tekshiradigan (validatsiya) HTML forma.

‹ OrqagaKeyingisi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish