HTML5 APIs — Overview
HTML5 sirf naye TAGS nahi laaya, bahut saari JavaScript APIs bhi laaya jo browser directly provide karta hai: localStorage/sessionStorage (data browser mein save karna, bina server ke), Geolocation API (user ki location — permission ke saath), Canvas API (JavaScript se drawing/graphics), Web Storage, Drag and Drop API.
Ye APIs technically JavaScript se use hote hain (HTML tags nahi), lekin HTML5 standard ka hi part hain — modern web apps (jaise offline-capable apps, interactive graphics) inhi capabilities par depend karte hain.
<!-- localStorage — data browser mein save karo: -->
<script>
localStorage.setItem("username", "Aarav");
const name = localStorage.getItem("username");
console.log(name); // "Aarav" — page reload/close ke baad bhi rehta hai
</script>
<!-- Canvas — JavaScript se drawing: -->
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
const ctx = document.getElementById("myCanvas").getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 50);
</script>
<!-- Geolocation — user permission ke saath: -->
<script>
navigator.geolocation.getCurrentPosition((pos) => {
console.log(pos.coords.latitude, pos.coords.longitude);
});
</script>- localStorage/sessionStorage = browser mein data save karna
- Canvas = JavaScript se custom graphics/drawing
- Geolocation = user location (permission-based)
HTML5 native drag-and-drop support deta hai — draggable="true" attribute se koi bhi element draggable ban jaata hai, aur JavaScript events (dragstart, drop) se behavior control karte hain.
<div draggable="true" id="dragItem">Drag me!</div>
<div id="dropZone">Drop here</div>
<script>
const item = document.getElementById("dragItem");
item.addEventListener("dragstart", (e) => {
e.dataTransfer.setData("text", e.target.id);
});
</script>JavaScript normally single-threaded hai (ek heavy calculation poori page ko "freeze" kar deti hai). Web Workers ek separate background thread mein code chalane dete hain — heavy computations ke liye, bina UI ko block kiye.
// main.js:
const worker = new Worker("worker.js");
worker.postMessage("start heavy task");
worker.onmessage = (e) => console.log("Result:", e.data);
// worker.js (separate file, background thread mein chalta hai):
// self.onmessage = () => { /* heavy computation */ self.postMessage(result); };