ফ্রন্টএন্ড
এইচটিএমএল সিএসএস জাভাস্ক্রিপ্ট অ্যাঙ্গুলারজেএস ভিইউই রিয়েক্ট জেকুয়েরী বুটস্ট্র্যাপ
ব্যাকএন্ড
পিএইচপি পাইথন জাভা সি সি++ সি# ডার্ট আর গো রাস্ট রুবি পার্ল কোটলিন জুলিয়া লুয়া
পিললোউ বিউটিফুলসপ পাইড্যেন্টিক সিবর্ন পান্ডাস ম্যাটপ্লটলিব এসসিপি নামপি
পাইথন
পিললোউ পাইড্যেন্টিক সিবর্ন
জাভাস্ক্রিপ্ট
ভিইউই রিয়েক্ট জেকুয়েরী
জয়েন লগইন

এইচটিএমএল

🌈এইচটিএমএল কি?

📋এইচটিএমএল হলো ট্যাগের বিভিন্ন ইন্টারঅ্যাকটিভ ইভেন্ট তৈরি করার পদ্ধতি।

⚒️এইচটিএমএল ট্যাগের বিভিন্ন ইন্টারঅ্যাকটিভ ইভেন্ট তৈরি করতে ব্যবহৃত হয়।

এইচটিএমএল সমূহ

এইচটিএমএল এবং সেগুলোর ব্যবহারের তালিকা

  • ➡️ onclick - ক্লিক করলে স্ক্রিপ্ট কার্যকর করা
  • ➡️ ondblclick - ডাবল ক্লিক স্ক্রিপ্ট কার্যকর করা
  • ➡️ onmouseup - মাউস বাটন ছাড়লে স্ক্রিপ্ট কার্যকর করা
  • ➡️ onmousedown - মাউস বাটন চাপলে স্ক্রিপ্ট কার্যকর করা
  • ➡️ onafterprint - প্রিন্ট শেষ হলে অবহিত করা
  • ➡️ onbeforeprint - প্রিন্ট শুরু হওয়ার আগে অবহিত করা
  • ➡️ onbeforeunload - পৃষ্ঠা ছাড়ার আগে অবহিত করা
  • ➡️ onerror - ত্রুটি ঘটলে অবহিত করা
  • ➡️ onhashchange - URL-এর হ্যাশ পরিবর্তিত হলে অবহিত করা
  • ➡️ onload - লোড হলে অবহিত করা
  • ➡️ onmessage - বার্তা গ্রহণ করলে অবহিত করা
  • ➡️ onoffline - ইন্টারনেট সংযোগ বিচ্ছিন্ন হলে অবহিত করা
  • ➡️ ononline - ইন্টারনেট সংযোগ চালু হলে অবহিত করা
  • ➡️ onpagehide - পৃষ্ঠা লুকানো হলে অবহিত করা
  • ➡️ onpageshow - পৃষ্ঠা প্রদর্শিত হলে অবহিত করা
  • ➡️ onpopstate - ব্রাউজারের হিস্টোরি পরিবর্তিত হলে অবহিত করা
  • ➡️ onresize - আকার পরিবর্তিত হলে অবহিত করা
  • ➡️ onstorage - স্টোরেজ হলে অবহিত করা
  • ➡️ onunload - পেজ আনলোড হলে অবহিত করা
  • ➡️ onblur - ফোকাস হারালে স্ক্রিপ্ট কার্যকর করা
  • ➡️ onchange - মান পরিবর্তনের পর অবহিত করা
  • ➡️ oncontextmenu - রাইট ক্লিকে মেনু খুললে অবহিত করা
  • ➡️ onfocus - ফোকাস হলে কার্যকর করা
  • ➡️ oninput - ইনপুটের মান পরিবর্তিত হলে স্ক্রিপ্ট কার্যকর করা
  • ➡️ oninvalid - অবৈধ ইনপুট হলে অবহিত করা
  • ➡️ onreset - ফর্ম রিসেট হলে অবহিত করা
  • ➡️ onsearch - সার্চ ইনপুটে অনুসন্ধান করলে অবহিত করা
  • ➡️ onselect - লেখা নির্বাচন করলে অবহিত করা
  • ➡️ onsubmit - ফর্ম জমা দিলে অবহিত করা
  • ➡️ onkeydown - কীবোর্ডের কী চাপলে অবহিত করা
  • ➡️ onkeypress - কী পেস করলে অবহিত করা
  • ➡️ onkeyup - কী ছাড়লে অবহিত করা
  • ➡️ onmousemove - মাউস সরালে স্ক্রিপ্ট কার্যকর করা
  • ➡️ onmouseout - মাউস বের হলে স্ক্রিপ্ট কার্যকর করা
  • ➡️ onmouseover - মাউস প্রবেশ করলে স্ক্রিপ্ট কার্যকর করা
  • ➡️ onwheel - মাউসের চাকা ঘোরালে স্ক্রিপ্ট কার্যকর করা
  • ➡️ ondrag - ড্র্যাগ শুরু হলে অবহিত করা
  • ➡️ ondragend - ড্র্যাগ শেষ হলে অবহিত করা
  • ➡️ ondragenter - ড্র্যাগ করা এলিমেন্ট প্রবেশ করলে অবহিত করা
  • ➡️ ondragleave - ড্র্যাগ করা এলিমেন্ট বের হলে অবহিত করা
  • ➡️ ondragover - ড্র্যাগ করা এলিমেন্ট উপরে থাকলে অবহিত করা
  • ➡️ ondragstart - ড্র্যাগ শুরু হলে অবহিত করা
  • ➡️ ondrop - এলিমেন্ট ড্রপ হলে অবহিত করা
  • ➡️ onscroll - এলিমেন্ট স্ক্রল হলে অবহিত করা
  • ➡️ oncopy - কপি হলে অবহিত করা
  • ➡️ oncut - কেটে নিলে অবহিত করা
  • ➡️ onpaste - পেস্ট করলে অবহিত করা
  • ➡️ onabort - মিডিয়া লোড বাতিল হলে অবহিত করা
  • ➡️ oncanplay - মিডিয়া চালানোর জন্য প্রস্তুত হলে অবহিত করা
  • ➡️ oncanplaythrough - মিডিয়া সম্পূর্ণ চালানোর জন্য প্রস্তুত হলে অবহিত করা
  • ➡️ oncuechange - ট্র্যাকের কিউ পরিবর্তিত হলে অবহিত করা
  • ➡️ ondurationchange - মিডিয়ার সময়কাল পরিবর্তিত হলে অবহিত করা
  • ➡️ onloadeddata - মিডিয়ার ডেটা লোড হলে অবহিত করা
  • ➡️ onloadedmetadata - মিডিয়ার মেটা তথ্য লোড হলে অবহিত করা
  • ➡️ onloadstart - মিডিয়া লোড শুরু হলে অবহিত করা
  • ➡️ onpause - মিডিয়া বিরতি দিলে অবহিত করা
  • ➡️ onplay - মিডিয়া চালু হলে অবহিত করা
  • ➡️ onplaying - মিডিয়া চলতে শুরু করলে অবহিত করা
  • ➡️ onprogress - মিডিয়া লোডের অগ্রগতি হলে অবহিত করা
  • ➡️ onended - মিডিয়া শেষ হলে অবহিত করা
  • ➡️ onratechange - মিডিয়ার পরিবর্তিত হলে অবহিত করা
  • ➡️ onseeking - মিডিয়ার নতুন অবস্থান খোঁজা শুরু হলে অবহিত করা
  • ➡️ onseeked - মিডিয়ার নতুন অবস্থানে পৌঁছালে অবহিত করা
  • ➡️ onstalled - মিডিয়া লোড আটকে গেলে অবহিত করা
  • ➡️ onsuspend - মিডিয়া লোড সাময়িক বন্ধ হলে অবহিত করা
  • ➡️ ontimeupdate - মিডিয়ার সময় পরিবর্তিত হলে অবহিত করা
  • ➡️ onvolumechange - মিডিয়ার শব্দের মাত্রা পরিবর্তিত হলে অবহিত করা
  • ➡️ onwaiting - মিডিয়া ডেটার জন্য অপেক্ষা করলে অবহিত করা
  • ➡️ ontoggle - টুগল হলে অবহিত করা

onclick - ক্লিক করলে স্ক্রিপ্ট কার্যকর করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<button onclick="execute('div')">ক্লিক করুন</button>

<div>
  <h1>প্রোগ্রামিং শিখুন</h1>
  <p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>

<script>
function execute(tag) {
  document.querySelector(tag).style.background = "pink";
}
</script>

</body>
</html>
নিজে অনুশীলন করুন

ondblclick - ডাবল ক্লিক স্ক্রিপ্ট কার্যকর করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<button ondblclick="execute('div')">ক্লিক করুন</button>

<div>
  <h1>প্রোগ্রামিং শিখুন</h1>
  <p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>

<script>
function execute(tag) {
  document.querySelector(tag).style.background = "pink";
}
</script>

</body>
</html>
নিজে অনুশীলন করুন

onmouseup - মাউস বাটন ছাড়লে স্ক্রিপ্ট কার্যকর করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<button
  onmousedown="pressed(this)"
  onmouseup="released(this)">
  ক্লিক করুন
</button>

<script>
function pressed(button) {
  button.innerHTML = "চাপুন";
}

function released(button) {
  button.innerHTML = "ছাড়ুন";
}
</script>

</body>
</html>
নিজে অনুশীলন করুন

onmousedown - মাউস বাটন চাপলে স্ক্রিপ্ট কার্যকর করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<button
  onmousedown="pressed(this)"
  onmouseup="released(this)">
  ক্লিক করুন
</button>

<script>
function pressed(button) {
  button.innerHTML = "চাপুন";
}

function released(button) {
  button.innerHTML = "ছাড়ুন";
}
</script>

</body>
</html>
নিজে অনুশীলন করুন

onafterprint - প্রিন্ট শেষ হলে অবহিত করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<button onclick="window.print()">প্রিন্ট</button>

<script>
window.onafterprint = function() {
  alert("আবার লোড করার চেষ্টা করুন");
};
</script>

</body>
</html>
নিজে অনুশীলন করুন

onbeforeprint - প্রিন্ট শুরু হওয়ার আগে অবহিত করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<button onclick="window.print()">প্রিন্ট</button>

<script>
window.onbeforeprint = function() {
  document.body.style.background = "lightgray";
};
</script>

</body>
</html>
নিজে অনুশীলন করুন

onbeforeunload - পৃষ্ঠা ছাড়ার আগে অবহিত করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<p>প্রিন্ট সম্পন্ন</p>

<script>
window.onbeforeunload = function(event) {
  event.preventDefault();
  event.returnValue = "";
};
</script>

</body>
</html>
নিজে অনুশীলন করুন

onerror - ত্রুটি ঘটলে অবহিত করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<img
  src="missing-image.jpg"
  onerror="showError()"
  alt="ইমেজ">

<p id="message"></p>

<script>
function showError() {
  document.getElementById("message").innerHTML = "ছবিটি লোড করা যায়নি";
}
</script>

</body>
</html>
নিজে অনুশীলন করুন

onhashchange - URL-এর হ্যাশ পরিবর্তিত হলে অবহিত করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<a href="#home">হোম</a>
<a href="#about"></a>

<p id="message"></p>

<script>
window.onhashchange = function() {
  document.getElementById("message").innerHTML =
    location.hash;
};
</script>

</body>
</html>
নিজে অনুশীলন করুন

onload - লোড হলে অবহিত করার উদাহরণ।

html 
<!DOCTYPE html>
<html onload="loaded()">
<body>

<p id="message">লোডিং</p>

<script>
function loaded() {
  document.getElementById("message").innerHTML = "পৃষ্ঠা লোড হয়েছে";
}
</script>

</body>
</html>
নিজে অনুশীলন করুন

onmessage - বার্তা গ্রহণ করলে অবহিত করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<button onclick="sendMessage()">বার্তা পাঠান</button>

<p id="message"></p>

<script>
window.onmessage = function(event) {
  document.getElementById("message").innerHTML =
    event.data;
};

function sendMessage() {
  window.postMessage("হ্যালো", "*");
}
</script>

</body>
</html>
নিজে অনুশীলন করুন

onoffline - ইন্টারনেট সংযোগ বিচ্ছিন্ন হলে অবহিত করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<p id="status">নেটওয়ার্কের অবস্থা</p>

<script>
window.onoffline = function() {
  document.getElementById("status").innerHTML = "আপনি অফলাইনে আছেন";
};
</script>

</body>
</html>
নিজে অনুশীলন করুন

ononline - ইন্টারনেট সংযোগ চালু হলে অবহিত করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<p id="status">নেটওয়ার্কের অবস্থা</p>

<script>
window.ononline = function() {
  document.getElementById("status").innerHTML = "আপনি অনলাইনে আছেন";
};
</script>

</body>
</html>
নিজে অনুশীলন করুন

onpagehide - পৃষ্ঠা লুকানো হলে অবহিত করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<p>ব্রাউজারের কনসোল খুলে এই পৃষ্ঠা থেকে বের হয়ে যান</p>

<script>
window.onpagehide = function() {
  console.log("পৃষ্ঠা গোপন হয়েছে");
};
</script>

</body>
</html>
নিজে অনুশীলন করুন

onpageshow - পৃষ্ঠা প্রদর্শিত হলে অবহিত করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<p id="message">পৃষ্ঠার অবস্থা</p>

<script>
window.onpageshow = function() {
  document.getElementById("message").innerHTML = "পৃষ্ঠা দৃশ্যমান";
};
</script>

</body>
</html>
নিজে অনুশীলন করুন

onpopstate - ব্রাউজারের হিস্টোরি পরিবর্তিত হলে অবহিত করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<button onclick="goBack()"></button>

<p id="message">বর্তমান পৃষ্ঠা</p>

<script>
history.pushState({}, "", "#page");

window.onpopstate = function() {
  document.getElementById("message").innerHTML = "হিস্ট্রি স্টেট পরিবর্তিত হয়েছে";
};

function goBack() {
  history.back();
}
</script>

</body>
</html>
নিজে অনুশীলন করুন

onresize - আকার পরিবর্তিত হলে অবহিত করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<p id="size"></p>

<script>
window.onresize = function() {
  document.getElementById("size").innerHTML =
    window.innerWidth + " x " + window.innerHeight;
};
</script>

</body>
</html>
নিজে অনুশীলন করুন

onstorage - স্টোরেজ হলে অবহিত করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<button onclick="saveData()">ডেটা সংরক্ষণ করুন</button>

<p id="message"></p>

<script>
window.onstorage = function(event) {
  document.getElementById("message").innerHTML =
    event.key;
};

function saveData() {
  localStorage.setItem("name", "Arif");
}
</script>

</body>
</html>
নিজে অনুশীলন করুন

onunload - পেজ আনলোড হলে অবহিত করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<p>এই পৃষ্ঠা থেকে বের হয়ে কনসোল পরীক্ষা করুন</p>

<script>
window.onunload = function() {
  console.log("পৃষ্ঠা আনলোড হয়েছে");
};
</script>

</body>
</html>
নিজে অনুশীলন করুন

onblur - ফোকাস হারালে স্ক্রিপ্ট কার্যকর করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<input
  style="width:300px"
  onblur="blurred(this)"
  placeholder="ইনপুট ক্লিক করুন এবং তারপর বাইরে ক্লিক করুন">

<script>
function blurred(input) {
  input.style.background = "pink";
}
</script>

</body>
</html>
নিজে অনুশীলন করুন

onchange - মান পরিবর্তনের পর অবহিত করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<select onchange="changed(this)">
  <option>বাংলাদেশ</option>
  <option>নেদারল্যান্ড</option>
  <option>আফগানিস্তান</option>
  <option>বাংলাদেশ</option>
</select>

<p id="message"></p>

<script>
function changed(select) {
  document.getElementById("message").innerHTML =
    "পরিবর্তন করা মানটি হচ্ছে : " + select.value;
}
</script>

</body>
</html>
নিজে অনুশীলন করুন

oncontextmenu - রাইট ক্লিকে মেনু খুললে অবহিত করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<div
  oncontextmenu="showMessage(event)"
  style="padding:30px;">
  এখানে রাইট ক্লিক করুন
</div>

<script>
function showMessage(event) {
  event.preventDefault();
  alert("কনটেক্সট মেনু নিষ্ক্রিয় করা হয়েছে");
}
</script>

</body>
</html>
নিজে অনুশীলন করুন

onfocus - ফোকাস হলে কার্যকর করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<input
  onfocus="focused(this)"
  placeholder="এখানে ক্লিক করুন">

<script>
function focused(input) {
  input.style.background = "lightgreen";
}
</script>

</body>
</html>
নিজে অনুশীলন করুন

oninput - ইনপুটের মান পরিবর্তিত হলে স্ক্রিপ্ট কার্যকর করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<input
  oninput="typed(this)"
  placeholder="কিছু লিখুন">

<p id="message"></p>

<script>
function typed(input) {
  document.getElementById("message").innerHTML =
    input.value;
}
</script>

</body>
</html>
নিজে অনুশীলন করুন

oninvalid - অবৈধ ইনপুট হলে অবহিত করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<form>
  <input
    required
    oninvalid="invalidInput(this)"
    placeholder="নাম">

  <button>সাবমিট</button>
</form>

<script>
function invalidInput(input) {
  input.setCustomValidity("অনুগ্রহ করে একটি মান লিখুন");
}
</script>

</body>
</html>
নিজে অনুশীলন করুন

onreset - ফর্ম রিসেট হলে অবহিত করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<form onreset="resetForm()">
  <input value="আরিফ">
  <button type="reset">রিসেট</button>
</form>

<p id="message"></p>

<script>
function resetForm() {
  document.getElementById("message").innerHTML = "ফর্ম রিসেট হয়েছে";
}
</script>

</body>
</html>
নিজে অনুশীলন করুন

onsearch - সার্চ ইনপুটে অনুসন্ধান করলে অবহিত করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<input
  type="search"
  onsearch="searchText(this)"
  placeholder="সার্চ">

<p id="message"></p>

<script>
function searchText(input) {
  document.getElementById("message").innerHTML =
    input.value;
}
</script>

</body>
</html>
নিজে অনুশীলন করুন

onselect - লেখা নির্বাচন করলে অবহিত করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<input
  value="এই লেখাটি নির্বাচন করুন"
  onselect="selectedText()">

<p id="message"></p>

<script>
function selectedText() {
  document.getElementById("message").innerHTML =
    "লেখা নির্বাচন করা হয়েছে";
}
</script>

</body>
</html>
নিজে অনুশীলন করুন

onsubmit - ফর্ম জমা দিলে অবহিত করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<form onsubmit="submitForm(event)">
  <input placeholder="নাম">
  <button>সাবমিট</button>
</form>

<p id="message"></p>

<script>
function submitForm(event) {
  event.preventDefault();
  document.getElementById("message").innerHTML = "ফর্ম জমা দেওয়া হয়েছে";
}
</script>

</body>
</html>
নিজে অনুশীলন করুন

onkeydown - কীবোর্ডের কী চাপলে অবহিত করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<input
  onkeydown="keyDown(event)"
  placeholder="একটি কি-ওয়ার্ড প্রেস করুন">

<p id="message"></p>

<script>
function keyDown(event) {
  document.getElementById("message").innerHTML =
    "আপনি প্রেস করেছেন: " + event.key;
}
</script>

</body>
</html>
নিজে অনুশীলন করুন

onkeypress - কী পেস করলে অবহিত করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<input
  onkeypress="keyPress(event)"
  placeholder="একটি কি-ওয়ার্ড প্রেস করুন">

<p id="message"></p>

<script>
function keyPress(event) {
  document.getElementById("message").innerHTML =
    "আপনি প্রেস করেছেন: " + event.key;
}
</script>

</body>
</html>
নিজে অনুশীলন করুন

onkeyup - কী ছাড়লে অবহিত করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<input
  onkeyup="keyUp(event)"
  placeholder="একটি কী ছেড়ে দিন">

<p id="message"></p>

<script>
function keyUp(event) {
  document.getElementById("message").innerHTML =
    "আপনি ছেড়েছেন: " + event.key;
}
</script>

</body>
</html>
নিজে অনুশীলন করুন

onmousemove - মাউস সরালে স্ক্রিপ্ট কার্যকর করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<div
  onmousemove="move(event)"
  style="height:100px; background:lightgray;">
  মাউস এখানে নিয়ে আসুন
</div>

<p id="message"></p>

<script>
function move(event) {
  document.getElementById("message").innerHTML =
    event.clientX + ", " + event.clientY;
}
</script>

</body>
</html>
নিজে অনুশীলন করুন

onmouseout - মাউস বের হলে স্ক্রিপ্ট কার্যকর করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<div
  onmouseout="out(this)"
  style="padding:30px; background:lightgray;">
  মাউস বাইরে নিয়ে যান
</div>

<script>
function out(element) {
  element.style.background = "pink";
}
</script>

</body>
</html>
নিজে অনুশীলন করুন

onmouseover - মাউস প্রবেশ করলে স্ক্রিপ্ট কার্যকর করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<div
  onmouseover="over(this)"
  style="padding:30px; background:lightgray;">
  মাউস ওপরে আনুন
</div>

<script>
function over(element) {
  element.style.background = "lightgreen";
}
</script>

</body>
</html>
নিজে অনুশীলন করুন

onwheel - মাউসের চাকা ঘোরালে স্ক্রিপ্ট কার্যকর করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<div
  onwheel="wheel(event)"
  style="height:100px; overflow:auto; background:lightgray;">
  এখানে মাউসের চাকা স্ক্রল করুন
</div>

<p id="message"></p>

<script>
function wheel(event) {
  document.getElementById("message").innerHTML =
    event.deltaY;
}
</script>

</body>
</html>
নিজে অনুশীলন করুন

ondrag - ড্র্যাগ শুরু হলে অবহিত করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<p
  draggable="true"
  ondrag="dragging()">
  এই লেখাটি টেনে নিন
</p>

<p id="message"></p>

<script>
function dragging() {
  document.getElementById("message").innerHTML =
    "";
}
</script>

</body>
</html>
নিজে অনুশীলন করুন

ondragend - ড্র্যাগ শেষ হলে অবহিত করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<p
  draggable="true"
  ondragend="dragEnd()">
  এই লেখাটি টেনে নিন
</p>

<p id="message"></p>

<script>
function dragEnd() {
  document.getElementById("message").innerHTML =
    "টেনে নেওয়া শেষ হয়েছে";
}
</script>

</body>
</html>
নিজে অনুশীলন করুন

ondragenter - ড্র্যাগ করা এলিমেন্ট প্রবেশ করলে অবহিত করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<p draggable="true">আমাকে টেনে নিন</p>

<div
  ondragenter="dragEnter(this)"
  style="padding:30px; background:lightgray;">
  ছেড়ে দেওয়ার স্থান
</div>

<script>
function dragEnter(element) {
  element.style.background = "lightgreen";
}
</script>

</body>
</html>
নিজে অনুশীলন করুন

ondragleave - ড্র্যাগ করা এলিমেন্ট বের হলে অবহিত করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<p draggable="true">আমাকে টেনে নিন</p>

<div
  ondragleave="dragLeave(this)"
  style="padding:30px; background:lightgray;">
  এই স্থান থেকে বের হয়ে যান
</div>

<script>
function dragLeave(element) {
  element.style.background = "pink";
}
</script>

</body>
</html>
নিজে অনুশীলন করুন

ondragover - ড্র্যাগ করা এলিমেন্ট উপরে থাকলে অবহিত করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<p draggable="true">আমাকে টেনে নিন</p>

<div
  ondragover="dragOver(event)"
  style="padding:30px; background:lightgray;">
  এই স্থানের ওপর টেনে আনুন
</div>

<script>
function dragOver(event) {
  event.preventDefault();
}
</script>

</body>
</html>
নিজে অনুশীলন করুন

ondragstart - ড্র্যাগ শুরু হলে অবহিত করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<p
  draggable="true"
  ondragstart="dragStart()">
  এই লেখাটি টেনে নিন
</p>

<p id="message"></p>

<script>
function dragStart() {
  document.getElementById("message").innerHTML =
    "টেনে নেওয়া শুরু হয়েছে";
}
</script>

</body>
</html>
নিজে অনুশীলন করুন

ondrop - এলিমেন্ট ড্রপ হলে অবহিত করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<p
  draggable="true"
  ondragstart="dragStart(event)">
  আমাকে টেনে নিন
</p>

<div
  ondragover="allowDrop(event)"
  ondrop="drop(event)"
  style="padding:30px; background:lightgray;">
  এখানে ছেড়ে দিন
</div>

<script>
function dragStart(event) {
  event.dataTransfer.setData("text", event.target.innerText);
}

function allowDrop(event) {
  event.preventDefault();
}

function drop(event) {
  event.preventDefault();

  event.target.innerHTML =
    event.dataTransfer.getData("text");
}
</script>

</body>
</html>
নিজে অনুশীলন করুন

onscroll - এলিমেন্ট স্ক্রল হলে অবহিত করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<div
  id="scroll"
  onscroll="scrolled()"
  style="height:100px; overflow:auto;">
  <div style="height:300px;">
    <h1>প্রোগ্রামিং শিখুন</h1>
    <p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
  </div>
</div>


<script>
function scrolled() {
  document.getElementById("scroll").style.backgroundColor =
    "pink";
}
</script>

</body>
</html>
নিজে অনুশীলন করুন

oncopy - কপি হলে অবহিত করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<p oncopy="copied()">
  এই লেখাটি কপি করুন
</p>

<p id="message"></p>

<script>
function copied() {
  document.getElementById("message").innerHTML =
    "লেখা কপি হয়েছে";
}
</script>

</body>
</html>
নিজে অনুশীলন করুন

oncut - কেটে নিলে অবহিত করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<input
  value="এই লেখাটি কাটুন"
  oncut="cutText()">

<p id="message"></p>

<script>
function cutText() {
  document.getElementById("message").innerHTML =
    "লেখা কাটা হয়েছে";
}
</script>

</body>
</html>
নিজে অনুশীলন করুন

onpaste - পেস্ট করলে অবহিত করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<input
  onpaste="pasted()"
  placeholder="এখানে পেস্ট করুন">

<p id="message"></p>

<script>
function pasted() {
  document.getElementById("message").innerHTML =
    "লেখা পেস্ট হয়েছে";
}
</script>

</body>
</html>
নিজে অনুশীলন করুন

onabort - মিডিয়া লোড বাতিল হলে অবহিত করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<video
  controls
  onabort="aborted()"
  width="300">
</video>

<p id="message"></p>

<script>
function aborted() {
  document.getElementById("message").innerHTML =
    "মিডিয়া লোড করা বাতিল হয়েছে";
}
</script>

</body>
</html>
নিজে অনুশীলন করুন

oncanplay - মিডিয়া চালানোর জন্য প্রস্তুত হলে অবহিত করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<video
  controls
  oncanplay="canPlay()"
  width="300"
  src="/videos/rain.mp4">
</video>

<p id="message"></p>

<script>
function canPlay() {
  document.getElementById("message").innerHTML =
    "ভিডিও চালানো শুরু করা যাবে";
}
</script>

</body>
</html>
নিজে অনুশীলন করুন

oncanplaythrough - মিডিয়া সম্পূর্ণ চালানোর জন্য প্রস্তুত হলে অবহিত করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<video
  controls
  oncanplaythrough="canPlayThrough()"
  width="300"
  src="/videos/rain.mp4">
</video>

<p id="message"></p>

<script>
function canPlayThrough() {
  document.getElementById("message").innerHTML =
    "ভিডিও সম্পূর্ণ চালানো যাবে";
}
</script>

</body>
</html>
নিজে অনুশীলন করুন

oncuechange - ট্র্যাকের কিউ পরিবর্তিত হলে অবহিত করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<video controls width="300">
  <source src="/videos/rain.mp4">
  <track
    kind="subtitles"
    src="subtitles.vtt"
    oncuechange="cueChanged()">
</video>

<p id="message"></p>

<script>
function cueChanged() {
  document.getElementById("message").innerHTML =
    "কিউ পরিবর্তিত হয়েছে";
}
</script>

</body>
</html>
নিজে অনুশীলন করুন

ondurationchange - মিডিয়ার সময়কাল পরিবর্তিত হলে অবহিত করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<video
  controls
  ondurationchange="durationChanged()"
  width="300"
  src="/videos/rain.mp4">
</video>

<p id="message"></p>

<script>
function durationChanged() {
  document.getElementById("message").innerHTML =
    "সময়কাল পরিবর্তিত হয়েছে";
}
</script>

</body>
</html>
নিজে অনুশীলন করুন

onloadeddata - মিডিয়ার ডেটা লোড হলে অবহিত করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<video
  controls
  onloadeddata="loadedData()"
  width="300"
  src="/videos/rain.mp4">
</video>

<p id="message"></p>

<script>
function loadedData() {
  document.getElementById("message").innerHTML =
    "মিডিয়া ডেটা লোড হয়েছে";
}
</script>

</body>
</html>
নিজে অনুশীলন করুন

onloadedmetadata - মিডিয়ার মেটা তথ্য লোড হলে অবহিত করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<video
  controls
  onloadedmetadata="metadataLoaded()"
  width="300"
  src="/videos/rain.mp4">
</video>

<p id="message"></p>

<script>
function metadataLoaded() {
  document.getElementById("message").innerHTML =
    "মিডিয়ার মেটাডেটা লোড হয়েছে";
}
</script>

</body>
</html>
নিজে অনুশীলন করুন

onloadstart - মিডিয়া লোড শুরু হলে অবহিত করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<video
  controls
  onloadstart="loadStarted()"
  width="300"
  src="/videos/rain.mp4">
</video>

<p id="message"></p>

<script>
function loadStarted() {
  document.getElementById("message").innerHTML =
    "মিডিয়া লোড করা শুরু হয়েছে";
}
</script>

</body>
</html>
নিজে অনুশীলন করুন

onpause - মিডিয়া বিরতি দিলে অবহিত করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<video
  controls
  onpause="alert('ভিডিওটি থামানো হয়েছে')"
  width="300"
  src="/videos/rain.mp4">
</video>

</body>
</html>
নিজে অনুশীলন করুন

onplay - মিডিয়া চালু হলে অবহিত করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<video
  controls
  onplay="alert('ভিডিও শুরু হয়েছে')"
  width="300"
  src="/videos/rain.mp4">
</video>

</body>
</html>
নিজে অনুশীলন করুন

onplaying - মিডিয়া চলতে শুরু করলে অবহিত করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<video
  controls
  onplaying="alert('ভিডিও চলছে')"
  width="300"
  src="/videos/rain.mp4">
</video>

</body>
</html>
নিজে অনুশীলন করুন

onprogress - মিডিয়া লোডের অগ্রগতি হলে অবহিত করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<video
  controls
  onprogress="alert('ভিডিও প্রক্রিয়াজাত হচ্ছে')"
  width="300"
  src="/videos/rain.mp4">
</video>

</body>
</html>
নিজে অনুশীলন করুন

onended - মিডিয়া শেষ হলে অবহিত করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<video
  controls
  onended="alert('ভিডিও শেষ হয়েছে')"
  width="300"
  src="/videos/rain.mp4">
</video>

</body>
</html>
নিজে অনুশীলন করুন

onratechange - মিডিয়ার পরিবর্তিত হলে অবহিত করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<video
  controls
  onratechange="alert('ভিডিও অনরেট চেঞ্জ হচ্ছে' + this.playbackRate)"
  width="300"
  src="/videos/rain.mp4">
</video>

</body>
</html>
নিজে অনুশীলন করুন

onseeking - মিডিয়ার নতুন অবস্থান খোঁজা শুরু হলে অবহিত করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<video
  controls
  onseeking="alert('সিকিং শেষ হয়েছে')"
  width="300"
  src="/videos/rain.mp4">
</video>

</body>
</html>
নিজে অনুশীলন করুন

onseeked - মিডিয়ার নতুন অবস্থানে পৌঁছালে অবহিত করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<video
  controls
  onseeked="alert('সিকিং শেষ হয়েছে')"
  width="300"
  src="/videos/rain.mp4">
</video>

</body>
</html>
নিজে অনুশীলন করুন

onstalled - মিডিয়া লোড আটকে গেলে অবহিত করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<video
  controls
  onstalled="alert('মিডিয়া লোড হওয়া আটকে গেছে')"
  width="300"
  src="/videos/rain.mp4">
</video>

</body>
</html>
নিজে অনুশীলন করুন

onsuspend - মিডিয়া লোড সাময়িক বন্ধ হলে অবহিত করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<video
  controls
  onsuspend="alert('মিডিয়া লোড করা স্থগিত হয়েছে')"
  width="300"
  src="/videos/rain.mp4">
</video>

</body>
</html>
নিজে অনুশীলন করুন

ontimeupdate - মিডিয়ার সময় পরিবর্তিত হলে অবহিত করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<video
  controls
  ontimeupdate="timeUpdated(this)"
  width="300"
  src="/videos/rain.mp4">
</video>

<p id="message"></p>

<script>
function timeUpdated(video) {
  document.getElementById("message").innerHTML =
    video.currentTime.toFixed(1);
}
</script>

</body>
</html>
নিজে অনুশীলন করুন

onvolumechange - মিডিয়ার শব্দের মাত্রা পরিবর্তিত হলে অবহিত করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<video
  controls
  onvolumechange="volumeChanged(this)"
  width="300"
  src="/videos/rain.mp4">
</video>

<p id="message"></p>

<script>
function volumeChanged(video) {
  document.getElementById("message").innerHTML =
    video.volume;
}
</script>

</body>
</html>
নিজে অনুশীলন করুন

onwaiting - মিডিয়া ডেটার জন্য অপেক্ষা করলে অবহিত করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<video
  controls
  onwaiting="alert('ভিডিও ডেটার জন্য অপেক্ষা করছে')"
  width="300"
  src="/videos/rain.mp4">
</video>

</body>
</html>
নিজে অনুশীলন করুন

ontoggle - টুগল হলে অবহিত করার উদাহরণ।

html 
<!DOCTYPE html>
<html>
<body>

<details ontoggle="this">
  <summary>কন্টেন্ট</summary>
  <p>প্রোগ্রামিং শিখুন</p>
  <p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</details>

</body>
</html>
নিজে অনুশীলন করুন

এইচটিএমএল সম্পর্কিত বিস্তারিত তথ্য

কার্যকর কোডিং উদাহরণ এবং সেগুলোর রেফারেন্স লিংক

নাম বিবরণ
onclick ক্লিক করলে স্ক্রিপ্ট কার্যকর করতে ব্যবহৃত হয়।
ondblclick ডাবল ক্লিক স্ক্রিপ্ট কার্যকর করতে ব্যবহৃত হয়।
onmouseup মাউস বাটন ছাড়লে স্ক্রিপ্ট কার্যকর করতে ব্যবহৃত হয়।
onmousedown মাউস বাটন চাপলে স্ক্রিপ্ট কার্যকর করতে ব্যবহৃত হয়।
onafterprint প্রিন্ট শেষ হলে অবহিত করতে ব্যবহৃত হয়।
onbeforeprint প্রিন্ট শুরু হওয়ার আগে অবহিত করতে ব্যবহৃত হয়।
onbeforeunload পৃষ্ঠা ছাড়ার আগে অবহিত করতে ব্যবহৃত হয়।
onerror ত্রুটি ঘটলে অবহিত করতে ব্যবহৃত হয়।
onhashchange URL-এর হ্যাশ পরিবর্তিত হলে অবহিত করতে ব্যবহৃত হয়।
onload লোড হলে অবহিত করতে ব্যবহৃত হয়।
onmessage বার্তা গ্রহণ করলে অবহিত করতে ব্যবহৃত হয়।
onoffline ইন্টারনেট সংযোগ বিচ্ছিন্ন হলে অবহিত করতে ব্যবহৃত হয়।
ononline ইন্টারনেট সংযোগ চালু হলে অবহিত করতে ব্যবহৃত হয়।
onpagehide পৃষ্ঠা লুকানো হলে অবহিত করতে ব্যবহৃত হয়।
onpageshow পৃষ্ঠা প্রদর্শিত হলে অবহিত করতে ব্যবহৃত হয়।
onpopstate ব্রাউজারের হিস্টোরি পরিবর্তিত হলে অবহিত করতে ব্যবহৃত হয়।
onresize আকার পরিবর্তিত হলে অবহিত করতে ব্যবহৃত হয়।
onstorage স্টোরেজ হলে অবহিত করতে ব্যবহৃত হয়।
onunload পেজ আনলোড হলে অবহিত করতে ব্যবহৃত হয়।
onblur ফোকাস হারালে স্ক্রিপ্ট কার্যকর করতে ব্যবহৃত হয়।
onchange মান পরিবর্তনের পর অবহিত করতে ব্যবহৃত হয়।
oncontextmenu রাইট ক্লিকে মেনু খুললে অবহিত করতে ব্যবহৃত হয়।
onfocus ফোকাস হলে কার্যকর করতে ব্যবহৃত হয়।
oninput ইনপুটের মান পরিবর্তিত হলে স্ক্রিপ্ট কার্যকর করতে ব্যবহৃত হয়।
oninvalid অবৈধ ইনপুট হলে অবহিত করতে ব্যবহৃত হয়।
onreset ফর্ম রিসেট হলে অবহিত করতে ব্যবহৃত হয়।
onsearch সার্চ ইনপুটে অনুসন্ধান করলে অবহিত করতে ব্যবহৃত হয়।
onselect লেখা নির্বাচন করলে অবহিত করতে ব্যবহৃত হয়।
onsubmit ফর্ম জমা দিলে অবহিত করতে ব্যবহৃত হয়।
onkeydown কীবোর্ডের কী চাপলে অবহিত করতে ব্যবহৃত হয়।
onkeypress কী পেস করলে অবহিত করতে ব্যবহৃত হয়।
onkeyup কী ছাড়লে অবহিত করতে ব্যবহৃত হয়।
onmousemove মাউস সরালে স্ক্রিপ্ট কার্যকর করতে ব্যবহৃত হয়।
onmouseout মাউস বের হলে স্ক্রিপ্ট কার্যকর করতে ব্যবহৃত হয়।
onmouseover মাউস প্রবেশ করলে স্ক্রিপ্ট কার্যকর করতে ব্যবহৃত হয়।
onwheel মাউসের চাকা ঘোরালে স্ক্রিপ্ট কার্যকর করতে ব্যবহৃত হয়।
ondrag ড্র্যাগ শুরু হলে অবহিত করতে ব্যবহৃত হয়।
ondragend ড্র্যাগ শেষ হলে অবহিত করতে ব্যবহৃত হয়।
ondragenter ড্র্যাগ করা এলিমেন্ট প্রবেশ করলে অবহিত করতে ব্যবহৃত হয়।
ondragleave ড্র্যাগ করা এলিমেন্ট বের হলে অবহিত করতে ব্যবহৃত হয়।
ondragover ড্র্যাগ করা এলিমেন্ট উপরে থাকলে অবহিত করতে ব্যবহৃত হয়।
ondragstart ড্র্যাগ শুরু হলে অবহিত করতে ব্যবহৃত হয়।
ondrop এলিমেন্ট ড্রপ হলে অবহিত করতে ব্যবহৃত হয়।
onscroll এলিমেন্ট স্ক্রল হলে অবহিত করতে ব্যবহৃত হয়।
oncopy কপি হলে অবহিত করতে ব্যবহৃত হয়।
oncut কেটে নিলে অবহিত করতে ব্যবহৃত হয়।
onpaste পেস্ট করলে অবহিত করতে ব্যবহৃত হয়।
onabort মিডিয়া লোড বাতিল হলে অবহিত করতে ব্যবহৃত হয়।
oncanplay মিডিয়া চালানোর জন্য প্রস্তুত হলে অবহিত করতে ব্যবহৃত হয়।
oncanplaythrough মিডিয়া সম্পূর্ণ চালানোর জন্য প্রস্তুত হলে অবহিত করতে ব্যবহৃত হয়।
oncuechange ট্র্যাকের কিউ পরিবর্তিত হলে অবহিত করতে ব্যবহৃত হয়।
ondurationchange মিডিয়ার সময়কাল পরিবর্তিত হলে অবহিত করতে ব্যবহৃত হয়।
onloadeddata মিডিয়ার ডেটা লোড হলে অবহিত করতে ব্যবহৃত হয়।
onloadedmetadata মিডিয়ার মেটা তথ্য লোড হলে অবহিত করতে ব্যবহৃত হয়।
onloadstart মিডিয়া লোড শুরু হলে অবহিত করতে ব্যবহৃত হয়।
onpause মিডিয়া বিরতি দিলে অবহিত করতে ব্যবহৃত হয়।
onplay মিডিয়া চালু হলে অবহিত করতে ব্যবহৃত হয়।
onplaying মিডিয়া চলতে শুরু করলে অবহিত করতে ব্যবহৃত হয়।
onprogress মিডিয়া লোডের অগ্রগতি হলে অবহিত করতে ব্যবহৃত হয়।
onended মিডিয়া শেষ হলে অবহিত করতে ব্যবহৃত হয়।
onratechange মিডিয়ার পরিবর্তিত হলে অবহিত করতে ব্যবহৃত হয়।
onseeking মিডিয়ার নতুন অবস্থান খোঁজা শুরু হলে অবহিত করতে ব্যবহৃত হয়।
onseeked মিডিয়ার নতুন অবস্থানে পৌঁছালে অবহিত করতে ব্যবহৃত হয়।
onstalled মিডিয়া লোড আটকে গেলে অবহিত করতে ব্যবহৃত হয়।
onsuspend মিডিয়া লোড সাময়িক বন্ধ হলে অবহিত করতে ব্যবহৃত হয়।
ontimeupdate মিডিয়ার সময় পরিবর্তিত হলে অবহিত করতে ব্যবহৃত হয়।
onvolumechange মিডিয়ার শব্দের মাত্রা পরিবর্তিত হলে অবহিত করতে ব্যবহৃত হয়।
onwaiting মিডিয়া ডেটার জন্য অপেক্ষা করলে অবহিত করতে ব্যবহৃত হয়।
ontoggle টুগল হলে অবহিত করতে ব্যবহৃত হয়।