API (Application Programming Interface) به مجموعه‌ای از متدها و ویژگی‌ها گفته می‌شود که به برنامه‌ها اجازه می‌دهد با یکدیگر یا با محیط اجرا تعامل داشته باشند.

در مرورگرها، جاوااسکریپت می‌تواند از طریق Web APIs با امکانات داخلی مرورگر ارتباط برقرار کند.

🔹 1. Web API چیست؟

• یک رابط برنامه‌نویسی است که مرورگر در اختیار جاوااسکریپت قرار می‌دهد.

• بخشی از BOM یا امکانات مستقل مرورگر هستند.

• به ما اجازه می‌دهند کارهایی مثل:

  • دسترسی به DOM

  • ذخیره‌سازی داده‌ها

  • گرفتن موقعیت مکانی

  • مدیریت رویدادها

  • انجام درخواست‌های HTTP

🔹 2. نمونه‌هایی از Web APIs

🟢 DOM API

• برای دسترسی و تغییر محتوای HTML و CSS.

document.getElementById("demo").innerText = "Hello API!";

🟢 Geolocation API

• برای دریافت موقعیت مکانی کاربر.

navigator.geolocation.getCurrentPosition(pos => {
  console.log("Latitude:", pos.coords.latitude);
  console.log("Longitude:", pos.coords.longitude);
});

🟢 Fetch API

• برای ارسال درخواست‌های HTTP به سرور.

fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then(res => res.json())
  .then(data => console.log(data));

🟢 Storage API

• برای ذخیره داده‌ها در مرورگر.

localStorage.setItem("username", "Ali");
console.log(localStorage.getItem("username"));

🟢 Canvas API

• برای رسم اشکال و گرافیک.

let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);

🔹 3. دسته‌بندی Web APIs

• Document API (DOM) → کار با HTML و CSS

• Storage APIs → ذخیره‌سازی داده‌ها (Cookies, LocalStorage, SessionStorage, IndexedDB)

• Communication APIs → برقراری ارتباط (Fetch, WebSocket)

• Graphics APIs → طراحی و رسم (Canvas, WebGL, SVG)

• Device APIs → دسترسی به سخت‌افزار (Geolocation, Camera, Clipboard)

✅ خلاصه

• Web APIs → رابط‌های جاوااسکریپت برای دسترسی به امکانات مرورگر

• نمونه‌ها: DOM, Geolocation, Fetch, Storage, Canvas

• هر مرورگر مجموعه‌ای از APIs داخلی دارد که نیازی به نصب کتابخانه خارجی نیست

• Web APIs پایه‌ای برای ساخت اپلیکیشن‌های مدرن تحت وب هستند