HTML5 Course in Roman Hindi/Urdu - Lecture 8: HTML5 APIs aur Canvas Basics - Fully Detailed
HTML5 APIs Ki Introduction (Geolocation, Drag-Drop, LocalStorage) - Har API Ki Full Details
HTML5 APIs browser capabilities ko enhance karte hain bina external libraries ke, jaise location access, data storage, aur drag functionality. Yeh HTML elements aur attributes par based hain, lekin interactivity ke liye scripting support karte hain. Is lecture mein HTML5 ke core parts par focus: attributes, events, aur storage mechanisms.
Focus Note: Yeh APIs HTML5 ke part hain, lekin full functionality ke liye scripting zaroori – hum sirf HTML structure aur attributes explain karenge.
Geolocation API - Location Access
Purpose: User ki current location (latitude/longitude) access karna, maps integration ke liye.
HTML Integration: No specific tag, lekin button/input par onclick event use. Options: enableHighAccuracy (true/false), timeout, maximumAge.
Attributes/Events: navigator.geolocation par getCurrentPosition (success/error callbacks).
Kab use karein: Location-based services, jaise nearby stores.
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Geolocation Example - Lecture 8</title>
</head>
<body>
<h1>Location Finder</h1>
<button id="get-location" onclick="getLocation()">Apni Location Paayein</button>
<p id="location-result">Location yahan dikhegi.</p>
<script>
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError, {enableHighAccuracy: true, timeout: 5000});
}
}
function showPosition(position) {
document.getElementById("location-result").innerHTML = "Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude;
}
function showError(error) {
document.getElementById("location-result").innerHTML = "Error: " + error.message;
}
</script>
</body>
</html>Button click par permission maangega, success par coords dikhaayega. Error handling zaroori privacy ke liye.
Drag and Drop API - Element Moving
Purpose: Elements ko drag karna, drop zones mein, file upload ya UI interactions ke liye.
HTML Attributes: draggable="true/false" (default false), ondragstart, ondragover, ondrop, ondragenter, ondragleave events.
Events Flow: Drag source: ondragstart (data set). Drop target: ondragover (preventDefault), ondrop (data get).
Kab use karein: Task lists, image galleries.
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drag-Drop Example - Lecture 8</title>
</head>
<body>
<h1>Drag and Drop Demo</h1>
<div id="draggable" draggable="true" ondragstart="drag(event)" style="width:100px; height:100px; background:lightblue;">Drag Me</div>
<br><br>
<div id="dropzone" ondragover="allowDrop(event)" ondrop="drop(event)" style="width:200px; height:200px; border:2px dashed gray;">Drop Here</div>
<script>
function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); }
function allowDrop(ev) { ev.preventDefault(); }
function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); }
</script>
</body>
</html>Draggable div ko dropzone mein move karega. DataTransfer API text/files handle karta hai.
LocalStorage API - Client-Side Storage
Purpose: Key-value data browser mein store, 5-10MB limit, persists across sessions.
Methods: localStorage.setItem(key, value), getItem(key), removeItem(key), clear(). JSON stringify/parse for objects.
HTML Integration: Form inputs par save/load, no specific tag.
Kab use karein: User preferences, shopping cart.
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LocalStorage Example - Lecture 8</title>
</head>
<body>
<h1>Data Storage Demo</h1>
<input type="text" id="username" placeholder="Naam Daalein">
<button onclick="saveData()">Save</button>
<button onclick="loadData()">Load</button>
<p id="output"></p>
<script>
function saveData() {
var name = document.getElementById("username").value;
localStorage.setItem("userName", name);
}
function loadData() {
var name = localStorage.getItem("userName");
document.getElementById("output").innerHTML = "Saved Name: " + (name || "Koi data nahi");
}
</script>
</body>
</html>Save par data store hoga, load par retrieve. SessionStorage temporary alternative hai.
Tip: Security: LocalStorage client-side, sensitive data server par rakho. QuotaExceededError handle karo.
Canvas Basics - 2D Graphics Element
Purpose: Dynamic graphics drawing, charts, animations bina images ke. <canvas> tag bitmap canvas provide karta hai.
Attributes: width/height (pixels, default 300x150), id/class. Content fallback text andar.
Context: getContext("2d") se drawing API access.
Kab use karein: Simple drawings, games, data viz.
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas Example - Lecture 8</title>
</head>
<body>
<h1>Canvas Drawing</h1>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;">
Aapka browser canvas support nahi karta.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(10, 10, 150, 80);
</script>
</body>
</html>Red rectangle draw karega. Methods: fillRect(x,y,width,height), strokeText, arcs etc.
Advanced: Paths (beginPath, moveTo, lineTo), gradients, images draw. Responsive ke liye JS resize.
Tip: Canvas non-semantic hai, accessibility ke liye alt text ya SVG prefer karo static ke liye.
Practice Tasks (Detailed with Steps)
- Geolocation Practice: "geolocation.html" banao. Button add karo location fetch ke liye, result p tag mein dikhao. Error handling include karo.
- Drag-Drop Practice: "dragdrop.html" mein 2 draggable items aur 1 dropzone banao. Drop par items rearrange ho.
- LocalStorage Practice: "storage.html" mein form banao name/email save ke liye, load button se retrieve. Clear button add karo.
- Canvas Practice: "canvas-basic.html" mein canvas banao, circle aur text draw karo. Width/height attributes change karo test ke liye.
- Combined: Ek app banao jisme localStorage se data save, canvas par simple chart draw (jaise bar from stored numbers). 40 minutes mein complete karo.
FAQ (Common Doubts with Details)
- Q: Geolocation permission kaise handle?
- A: Browser popup maangega; error code 1 denied, 2 position unavailable.
- Q: Drag-Drop files ke liye?
- A: DataTransfer.files array use, File API ke saath process.
- Q: LocalStorage vs SessionStorage?
- A: Local permanent, Session tab close par clear.
- Q: Canvas resolution issue?
- A: Width/height attributes set karo, CSS size alag (high DPI ke liye scale).
Next Lecture Teaser
Lecture 9: HTML5 Forms Advanced (progress, meter, output) aur SVG Graphics – UI elements aur vector drawings.
Yeh lecture complete. Ab aap HTML5 APIs aur Canvas master kar chuke ho.
