Project - Event Listener

Event Listener ஐப் பயன்படுத்துதல்

இது முந்தைய திட்டத்தின் நகலாகும்.

இப்போது Onclick Attributes க்கு பதிலாக Event Listeners ஐப் பயன்படுத்துகிறோம்.

எண்ணிக்கை

0

Event Listeners ஐப் பயன்படுத்துதல்

addEventListener() ஐப் பயன்படுத்துவது பின்வருவனவற்றை எளிதாக்குகிறது:

HTML மற்றும் JavaScript ஐ தனித்தனியாக வைத்திருத்தல்

அதே உறுப்புக்கு பல நிகழ்வுகளைச் சேர்த்தல்

பெரிய திட்டங்களில் சுத்தமான குறியீட்டை எழுதுதல்

HTML குறியீடு

<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 குறியீடு

// 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);

// எண்ணிக்கையை அறிவிக்கவும்
let count = 0;

// பக்கம் திறக்கும் போது எண்ணிக்கையை ஏற்றவும்
loadCount();

// எண்ணிக்கையைக் காட்டும் செயல்பாடு
function updateCount() {
  document.getElementById("count").innerHTML = count;
}

// எண்ணிக்கையை அதிகரிக்கும் செயல்பாடு
function increaseCount() {
  count++;
  updateCount();
}

// எண்ணிக்கையைக் குறைக்கும் செயல்பாடு
function decreaseCount() {
  if (count > 0) {
    count--;
    updateCount();
  }
}

// எண்ணிக்கையை மீட்டமைக்கும் செயல்பாடு
function resetCount() {
  count = 0;
  updateCount();
}

// எண்ணிக்கையை சேமிக்கும் செயல்பாடு
function saveCount() {
  localStorage.setItem("count", count);
}

// எண்ணிக்கையை ஏற்றும் செயல்பாடு
function loadCount() {
  let saved = localStorage.getItem("count");
  if (saved !== null) {
    count = Number(saved);
  }
  updateCount();
}

மேம்பாடுகள்

JavaScript ஒரு வெளிப்புற கோப்புக்கு (counter.js) மாற்றப்பட்டது

HTML தயாரான பிறகு மட்டுமே JavaScript இயங்கும் வகையில் DOMContentLoaded பயன்படுத்துகிறது

சிறிய செயல்பாடுகள் + உறுப்பு மாறிகள் பயன்படுத்தி சுத்தமான கட்டமைப்பு

குறுகிய "Saved!" செய்தியைக் காட்டுகிறது

குறுகிய "Loaded!" செய்தியைக் காட்டுகிறது

HTML குறியீடு (மேம்படுத்தப்பட்டது)

<!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>

📌 குறிப்பு:

counter.js

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

// எண்ணிக்கையை அறிவிக்கவும்
let count = 0;

// உறுப்பு மாறிகளைப் பயன்படுத்தவும்
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");

// Event listeners ஐச் சேர்க்கவும்
btnPlus.addEventListener("click", increaseCount);
btnMinus.addEventListener("click", decreaseCount);
btnReset.addEventListener("click", resetCount);
btnSave.addEventListener("click", saveCount);
btnLoad.addEventListener("click", loadCount);

// எண்ணிக்கையைக் காட்டும் செயல்பாடு
function updateCount() {
  document.getElementById("count").innerHTML = count;
}

// செய்தியைக் காட்டும் செயல்பாடு
function showMessage(text) {
  msgEl.innerHTML = text;
  setTimeout(function () {
    msgEl.innerHTML = "";
  }, 3000);
}

// எண்ணிக்கையை அதிகரிக்கும் செயல்பாடு
function increaseCount() {
  count++;
  updateCount();
}

// எண்ணிக்கையைக் குறைக்கும் செயல்பாடு
function decreaseCount() {
  count--;
  updateCount();
}

// எண்ணிக்கையை மீட்டமைக்கும் செயல்பாடு
function resetCount() {
  count = 0;
  updateCount();
}

// எண்ணிக்கையை சேமிக்கும் செயல்பாடு
function saveCount() {
  localStorage.setItem("count", count);
  showMessage("Saved!");
}

// எண்ணிக்கையை ஏற்றும் செயல்பாடு
function loadCount() {
  let saved = localStorage.getItem("count");
  if (saved !== null) {
    count = Number(saved);
    showMessage("Loaded!");
  }
  updateCount();
}

});

வெளிப்புற கோப்பில் JavaScript

counter.js ஐப் பயன்படுத்துவது உங்கள் திட்டத்தை:

அதிகம் ஒழுங்கமைக்கப்பட்டது

HTML மற்றும் JavaScript ஐ தனித்தனியாக வைத்திருத்தல்

படிப்பதற்கு எளிதானது

படிக்க மற்றும் மீண்டும் பயன்படுத்த எளிதானது

நிஜ உலக திட்டங்கள் போன்றது

நிஜ உலக திட்டங்களைப் போன்றது

DOMContentLoaded

DOMContentLoaded ஏன் பயன்படுத்த வேண்டும்?

நீங்கள் ஒரு வெளிப்புற JavaScript கோப்பைப் பயன்படுத்தும் போது, HTML தயாராவதற்கு முன்பே உலாவி ஸ்கிரிப்டை ஏற்றக்கூடும். எனவே நாங்கள் பயன்படுத்துகிறோம்:

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

இதன் பொருள்: HTML ஏற்றி முடித்த பிறகு JavaScript குறியீட்டை இயக்கவும்.

JavaScript திட்டங்கள்

JavaScript Counter

localStorage இல் மீட்டெடுத்து சேமிக்கும் எண்ணிக்கை திட்டம்.

JavaScript Event Listener

onclick க்கு பதிலாக event listener ஐப் பயன்படுத்தும் எண்ணிக்கை திட்டம்.

JavaScript To-Do List

local storage இல் உள்ள ஒரு வரிசையில் சேமிக்கப்பட்ட செய்ய வேண்டிய பட்டியல்.

JavaScript Modal Popup

பக்கத்தின் மேல் தோன்றும் மாதிரி பாப்-அப் சாளரம்.