JavaScript · Lesson 32 / 32 · தமிழ்

Web APIs

கருத்தைப் புரிந்துகொள்ளுங்கள். Code-ஐ மாற்றி இயக்குங்கள். ஒரு சிறிய பயிற்சியால் கற்றதை உறுதி செய்யுங்கள்.

Detailed notesBrowser previewPractice + answer

மூலப் பாட விளக்கங்கள் தமிழில் உள்ளன. கூடுதல் concept, practice மற்றும் answer notes ஆங்கிலத்தில் உள்ளன.

01 / Understand

முக்கியக் கருத்து

Web APIs are capabilities supplied by the browser, not the core JavaScript language. This example uses URLSearchParams to read a course filter and a timer to update the page.

Learning goal: Explain what the example does, predict its result, and change it to solve the practice task.

02 / Explore

விரிவான விளக்கங்கள்

Browser Web APIs

Browsers DOM-க்கு அப்பறமும் நிறைய built-in APIs expose பண்றாங்க — storage, geolocation, notifications, timers மற்றும் இன்னும் நிறைய.

Web Storage

JavaScript reference fragmentCODE

// localStorage — clear பண்ணும் வரை persist ஆகும்
localStorage.setItem("user", JSON.stringify({ name: "Alice" }));
const user = JSON.parse(localStorage.getItem("user"));
localStorage.removeItem("user");
localStorage.clear();

// sessionStorage — tab close ஆகும் வரை persist ஆகும்
sessionStorage.setItem("token", "abc123");
const token = sessionStorage.getItem("token");

Timers

JavaScript reference fragmentCODE

// setTimeout — delay-க்கு பிறகு ஒரே ஒரு தரம் run
const timeoutId = setTimeout(() => {
  console.log("2 seconds-க்கு பிறகு run ஆகும்");
}, 2000);
clearTimeout(timeoutId); // cancel பண்ண

// setInterval — repeatedly run
const intervalId = setInterval(() => {
  console.log("ஒவ்வொரு second-உம் run ஆகும்");
}, 1000);
clearInterval(intervalId); // நிறுத்த

மத்த Useful APIs

JavaScript reference fragmentCODE

// Geolocation
navigator.geolocation.getCurrentPosition(
  pos => console.log(pos.coords.latitude, pos.coords.longitude),
  err => console.error(err.message)
);

// Clipboard
await navigator.clipboard.writeText("Copied text!");

// URL API
const url = new URL("https://example.com/path?q=hello&page=2");
console.log(url.hostname);               // "example.com"
console.log(url.searchParams.get("q")); // "hello"

Web Workers background thread-ல JavaScript run பண்ண allow பண்ணும் — main thread UI rendering-க்காக free-ஆ இருக்கும். CPU-intensive tasks-க்கு use பண்ணு.

03 / Read & predict

முழுமையான உதாரணம்

This is a complete HTML document. Use the HTML preview editor below, not the Node console. Press Run to refresh the rendered page.

index.html · complete exampleCODE

<!doctype html>
<html lang="en"><meta charset="utf-8"><title>Web API practice</title>
<body><p id="course"></p><p id="status">Preparing</p>
<script>
const params = new URLSearchParams("course=javascript&level=beginner");
document.querySelector("#course").textContent = params.get("course");
setTimeout(() => {
  document.querySelector("#status").textContent = "Ready";
}, 300);
</script></body></html>

எதிர்பார்க்கும் முடிவைப் பாருங்கள்

Course text: javascript
Status changes from Preparing to Ready after the timer callback runs.

04 / Experiment

மாற்றி இயக்கிப் பாருங்கள்

For this browser example, interact with the rendered preview after pressing Run.

Open editor ↗

Editor load ஆனதும் code-ஐ ஏற்றி Run அழுத்துங்கள்.

OneCompiler என்ற இலவச வெளிப்புற சேவை code-ஐ இயக்குகிறது. Run செய்யும் code அங்கு அனுப்பப்படும். தனிப்பட்ட தகவல்கள் அல்லது secret keys உள்ளிட வேண்டாம்.

05 / Your turn

சிறிய பயிற்சி

Practice challenge

Read the level parameter and display it beside the course.

விடை மற்றும் விளக்கம்

Use params.get("level"); it returns "beginner". A missing parameter returns null.

தவிர்க்க வேண்டிய தவறு: A timer delay is a minimum wait, not an exact execution time. Browser APIs differ in permissions and availability; handle missing capabilities.

அடுத்த பாடத்திற்குத் தயாரா?

Explain the example in your own words.
Complete the challenge before revealing its answer.
Describe the common mistake and how to avoid it.