HTML এপিআই (API - Application Programming Interface) হলো এমন একটি প্রযুক্তি যা ব্রাউজারে HTML, JavaScript এবং CSS-এর মাধ্যমে ইন্টারেক্টিভ এবং ডায়নামিক ফিচার তৈরি করতে ব্যবহৃত হয়। HTML এপিআইগুলো বিভিন্ন ওয়েব অ্যাপ্লিকেশন এবং ব্রাউজার-ভিত্তিক কার্যক্রমকে আরও সহজ ও কার্যকর করে।
জিওলকেশন এপিআই ব্যবহার করে ব্যবহারকারীর অবস্থান ট্র্যাক করা সম্ভব। এটি মূলত ডিভাইসের জিপিএস বা আইপি ঠিকানা থেকে তথ্য সংগ্রহ করে।
উদাহরণ: ব্যবহারকারীর অবস্থান পাওয়া
<button onclick="getLocation()">অবস্থান পান</button>
<p id="location"></p>
<script>
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
document.getElementById("location").innerHTML =
"Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
});
} else {
document.getElementById("location").innerHTML = "Geolocation is not supported by this browser.";
}
}
</script>
ওয়েব স্টোরেজ এপিআই ক্লায়েন্ট সাইডে ডেটা সংরক্ষণ করতে ব্যবহৃত হয়। এটি দুই ধরনের স্টোরেজ প্রদান করে:
উদাহরণ: লোকাল স্টোরেজ ব্যবহার
<button onclick="saveData()">তথ্য সংরক্ষণ</button>
<button onclick="showData()">তথ্য দেখুন</button>
<p id="output"></p>
<script>
function saveData() {
localStorage.setItem("name", "আমার নাম HTML API");
}
function showData() {
const name = localStorage.getItem("name");
document.getElementById("output").innerHTML = name ? name : "কোন তথ্য নেই।";
}
</script>
ক্যানভাস এপিআই গ্রাফিক্স আঁকা এবং অ্যানিমেশন তৈরি করতে ব্যবহৃত হয়। এটি সাধারণত HTML5 <canvas> ট্যাগের মাধ্যমে কাজ করে।
উদাহরণ: ক্যানভাসে একটি বৃত্ত আঁকা
<canvas id="myCanvas" width="200" height="200" style="border:1px solid #000;"></canvas>
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.fillStyle = "blue";
ctx.fill();
ctx.stroke();
</script>
এই এপিআই দিয়ে HTML উপাদানগুলো সহজেই ড্র্যাগ এবং ড্রপ করা যায়।
উদাহরণ: ড্র্যাগ অ্যান্ড ড্রপ ফিচার
<div id="dragItem" draggable="true" style="width:100px; height:100px; background:blue;"></div>
<div id="dropZone" style="width:200px; height:200px; border:2px dashed #000; margin-top:20px;"></div>
<script>
const dragItem = document.getElementById("dragItem");
const dropZone = document.getElementById("dropZone");
dragItem.addEventListener("dragstart", function(e) {
e.dataTransfer.setData("text", e.target.id);
});
dropZone.addEventListener("dragover", function(e) {
e.preventDefault();
});
dropZone.addEventListener("drop", function(e) {
e.preventDefault();
const data = e.dataTransfer.getData("text");
const item = document.getElementById(data);
dropZone.appendChild(item);
});
</script>
ফাইল এপিআই ব্যবহার করে ব্রাউজার থেকে ফাইল নির্বাচন এবং তা প্রসেস করা যায়।
উদাহরণ: ফাইল নাম দেখানো
<input type="file" id="fileInput">
<p id="fileName"></p>
<script>
document.getElementById("fileInput").addEventListener("change", function(event) {
const file = event.target.files[0];
document.getElementById("fileName").innerHTML = file ? file.name : "কোন ফাইল নির্বাচিত হয়নি।";
});
</script>
HTML এপিআই ওয়েব ডেভেলপমেন্টকে আরও শক্তিশালী এবং ব্যবহারকারী-বান্ধব করে তুলেছে। এটি বিভিন্ন ধরনের এপিআই যেমন জিওলকেশন, ক্যানভাস, ওয়েব স্টোরেজ ইত্যাদি ব্যবহার করে ইন্টারেকটিভ ওয়েব অ্যাপ্লিকেশন তৈরি করতে সাহায্য করে।
HTML এপিআই (API - Application Programming Interface) হলো এমন একটি প্রযুক্তি যা ব্রাউজারে HTML, JavaScript এবং CSS-এর মাধ্যমে ইন্টারেক্টিভ এবং ডায়নামিক ফিচার তৈরি করতে ব্যবহৃত হয়। HTML এপিআইগুলো বিভিন্ন ওয়েব অ্যাপ্লিকেশন এবং ব্রাউজার-ভিত্তিক কার্যক্রমকে আরও সহজ ও কার্যকর করে।
জিওলকেশন এপিআই ব্যবহার করে ব্যবহারকারীর অবস্থান ট্র্যাক করা সম্ভব। এটি মূলত ডিভাইসের জিপিএস বা আইপি ঠিকানা থেকে তথ্য সংগ্রহ করে।
উদাহরণ: ব্যবহারকারীর অবস্থান পাওয়া
<button onclick="getLocation()">অবস্থান পান</button>
<p id="location"></p>
<script>
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
document.getElementById("location").innerHTML =
"Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
});
} else {
document.getElementById("location").innerHTML = "Geolocation is not supported by this browser.";
}
}
</script>
ওয়েব স্টোরেজ এপিআই ক্লায়েন্ট সাইডে ডেটা সংরক্ষণ করতে ব্যবহৃত হয়। এটি দুই ধরনের স্টোরেজ প্রদান করে:
উদাহরণ: লোকাল স্টোরেজ ব্যবহার
<button onclick="saveData()">তথ্য সংরক্ষণ</button>
<button onclick="showData()">তথ্য দেখুন</button>
<p id="output"></p>
<script>
function saveData() {
localStorage.setItem("name", "আমার নাম HTML API");
}
function showData() {
const name = localStorage.getItem("name");
document.getElementById("output").innerHTML = name ? name : "কোন তথ্য নেই।";
}
</script>
ক্যানভাস এপিআই গ্রাফিক্স আঁকা এবং অ্যানিমেশন তৈরি করতে ব্যবহৃত হয়। এটি সাধারণত HTML5 <canvas> ট্যাগের মাধ্যমে কাজ করে।
উদাহরণ: ক্যানভাসে একটি বৃত্ত আঁকা
<canvas id="myCanvas" width="200" height="200" style="border:1px solid #000;"></canvas>
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.fillStyle = "blue";
ctx.fill();
ctx.stroke();
</script>
এই এপিআই দিয়ে HTML উপাদানগুলো সহজেই ড্র্যাগ এবং ড্রপ করা যায়।
উদাহরণ: ড্র্যাগ অ্যান্ড ড্রপ ফিচার
<div id="dragItem" draggable="true" style="width:100px; height:100px; background:blue;"></div>
<div id="dropZone" style="width:200px; height:200px; border:2px dashed #000; margin-top:20px;"></div>
<script>
const dragItem = document.getElementById("dragItem");
const dropZone = document.getElementById("dropZone");
dragItem.addEventListener("dragstart", function(e) {
e.dataTransfer.setData("text", e.target.id);
});
dropZone.addEventListener("dragover", function(e) {
e.preventDefault();
});
dropZone.addEventListener("drop", function(e) {
e.preventDefault();
const data = e.dataTransfer.getData("text");
const item = document.getElementById(data);
dropZone.appendChild(item);
});
</script>
ফাইল এপিআই ব্যবহার করে ব্রাউজার থেকে ফাইল নির্বাচন এবং তা প্রসেস করা যায়।
উদাহরণ: ফাইল নাম দেখানো
<input type="file" id="fileInput">
<p id="fileName"></p>
<script>
document.getElementById("fileInput").addEventListener("change", function(event) {
const file = event.target.files[0];
document.getElementById("fileName").innerHTML = file ? file.name : "কোন ফাইল নির্বাচিত হয়নি।";
});
</script>
HTML এপিআই ওয়েব ডেভেলপমেন্টকে আরও শক্তিশালী এবং ব্যবহারকারী-বান্ধব করে তুলেছে। এটি বিভিন্ন ধরনের এপিআই যেমন জিওলকেশন, ক্যানভাস, ওয়েব স্টোরেজ ইত্যাদি ব্যবহার করে ইন্টারেকটিভ ওয়েব অ্যাপ্লিকেশন তৈরি করতে সাহায্য করে।
or
আপনি আমাকে যেকোনো প্রশ্ন করতে পারেন, যেমনঃ
Are you sure to start over?
