Project - Event Listener

ইভেন্ট লিসেনার ব্যবহার করে

এটি পূর্ববর্তী প্রকল্পের একটি অনুলিপি।

এখন আমরা Onclick অ্যাট্রিবিউটের পরিবর্তে ইভেন্ট লিসেনার ব্যবহার করি।

গণনা

ইভেন্ট লিসেনার ব্যবহার করে

addEventListener() ব্যবহার করা এটিকে সহজ করে তোলে:

HTML এবং JavaScript আলাদা রাখা

একই উপাদানের একাধিক দৃষ্টান্ত যোগ করা হচ্ছে

বড় প্রকল্পে পরিষ্কার কোড লেখা

এইচটিএমএল কোড

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

জাভাস্ক্রিপ্ট কোড

// ইভেন্ট শ্রোতা যোগ করুন document.getElementById("btnPlus").addEventListener("ক্লিক করুন", কাউন্ট বাড়ান); document.getElementById("btnMinus").addEventListener("ক্লিক", কাউন্ট কম); document.getElementById("btnReset").addEventListener("ক্লিক", resetCount); document.getElementById("btnSave").addEventListener("ক্লিক", saveCount); document.getElementById("btnLoad").addEventListener("ক্লিক", loadCount); // গণনা ঘোষণা করুন যাক গণনা = 0; // পৃষ্ঠা খুললে গণনা লোড করুন loadCount(); // ফাংশন যা গণনা প্রদর্শন করে ফাংশন updateCount() { document.getElementById("count").innerHTML = count; } // ফাংশন যা একটি গণনা বৃদ্ধি করে ফাংশন বৃদ্ধি গণনা() { গণনা++; updateCount(); } // একটি গণনা হ্রাস করার ফাংশন ফাংশন হ্রাসগণনা() { যদি (গণনা > 0) { গণনা--; updateCount(); } } // ফাংশন যা গণনা পুনরায় সেট করে ফাংশন resetCount() { গণনা = 0; updateCount(); } // সঞ্চয় গণনা ফাংশন ফাংশন saveCount() { localStorage.setItem("গণনা", গণনা); } // লোড গণনা ফাংশন ফাংশন loadCount() { let saved = localStorage.getItem("count"); যদি (সংরক্ষিত!== শূন্য) { গণনা = সংখ্যা (সংরক্ষিত); } updateCount(); }

উন্নতি

জাভাস্ক্রিপ্ট একটি বহিরাগত ফাইলে (counter.js) সরানো হয়েছে।

DOMContentLoaded ব্যবহার করে যাতে জাভাস্ক্রিপ্ট HTML প্রস্তুত হওয়ার পরেই চলে

ছোট ফাংশন + উপাদান ভেরিয়েবল ব্যবহার করে কাঠামো পরিষ্কার করুন

সংক্ষিপ্ত "সংরক্ষিত!" বার্তা প্রদর্শন করে

সংক্ষিপ্ত "লোড হয়েছে!" বার্তা প্রদর্শন করে

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>

📌দ্রষ্টব্য:

লক্ষ্য করুন যে <script> ট্যাগটি </body> এর আগে নীচে স্থাপন করা হয়েছে।

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();
}

});

একটি বাহ্যিক ফাইলে জাভাস্ক্রিপ্ট

counter.js :

আরও সংগঠিত

HTML এবং JavaScript আলাদা রাখা

পড়া সহজ

পড়া এবং পুনরায় ব্যবহার করা সহজ

বাস্তব বিশ্বের প্রকল্পের অনুরূপ

DOMContentLoaded

কেন DOMContentLoaded ব্যবহার করবেন?

আপনি যখন একটি বাহ্যিক জাভাস্ক্রিপ্ট ফাইল ব্যবহার করেন, তখন HTML প্রস্তুত হওয়ার আগে ব্রাউজার স্ক্রিপ্টটি লোড করতে পারে। তাই আমরা ব্যবহার করি:

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

এর মানে হল: HTML লোড করা শেষ করার পরে JavaScript কোডটি চালান।

জাভাস্ক্রিপ্ট প্রকল্প

JavaScript Counter

একটি গণনা স্কিম যা স্থানীয় স্টোরেজে পুনরুদ্ধার এবং সঞ্চয় করে।

JavaScript Event Listener

একটি গণনা প্রোগ্রাম যা অনক্লিকের পরিবর্তে একটি ইভেন্ট লিসেনার ব্যবহার করে।

JavaScript To-Do List

স্থানীয় স্টোরেজে একটি অ্যারেতে সংরক্ষিত একটি করণীয় তালিকা।

JavaScript Modal Popup

পৃষ্ঠার শীর্ষে একটি নমুনা পপ-আপ উইন্ডো প্রদর্শিত হবে৷

পূর্ববর্তী পরবর্তী