تا اینجا با بسیاری از امکانات HTML و HTML5 آشنا شده‌ایم؛ از ساختار صفحات و فرم‌ها گرفته تا Canvas، SVG، Geolocation، Web Storage و Drag & Drop. اما صفحات وب مدرن فقط از HTML و CSS ساخته نمی‌شوند. مرورگرها مجموعه بزرگی از APIها را در اختیار JavaScript قرار می‌دهند تا بتوانیم با امکانات مختلف مرورگر و دستگاه کار کنیم؛ برای مثال موقعیت کاربر را دریافت کنیم، اطلاعاتی را در مرورگر ذخیره کنیم، با فایل‌ها کار کنیم، داده‌ای را از یک سرور دریافت کنیم، صدای صفحه را کنترل کنیم یا به امکانات مختلف محیط مرورگر دسترسی داشته باشیم. در این مقاله ابتدا مفهوم API را به زبان ساده یاد می‌گیریم و سپس با تعدادی از APIهای مهم و کاربردی آشنا می‌شویم تا بدانیم هرکدام چه مسئله‌ای را حل می‌کنند و در چه پروژه‌هایی می‌توان از آن‌ها استفاده کرد.

این مقاله را بعد از یادگیری جاوا اسکریپت مطالعه کنید!

API چیست؟

API مخفف عبارت:

Application Programming Interface

است.

ترجمه رایج آن:

رابط برنامه‌نویسی کاربردی

است.

اما این تعریف به‌تنهایی چندان قابل فهم نیست.

بیایید ساده‌تر نگاه کنیم.

فرض کنید می‌خواهیم از یک قابلیت خاص مرورگر استفاده کنیم.

مثلاً:

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

ما نمی‌خواهیم بدانیم مرورگر در پشت صحنه دقیقاً چگونه GPS یا اطلاعات موقعیت را مدیریت می‌کند.

مرورگر یک رابط آماده در اختیار JavaScript قرار می‌دهد.

ما از آن رابط استفاده می‌کنیم و مرورگر عملیات پیچیده را برای ما انجام می‌دهد.

به این رابط‌ها API گفته می‌شود.

یک مثال ساده از API

در JavaScript می‌توانیم بنویسیم:

console.log("Hello");

اینجا console و متد log() نمونه‌ای از امکاناتی هستند که محیط اجرای JavaScript در اختیار ما قرار می‌دهد.

در مرورگر نیز امکانات بسیار بیشتری وجود دارد.

مثلاً:

localStorage.setItem("username", "Ali");

در اینجا از API مربوط به Web Storage استفاده کرده‌ایم.

یا:

navigator.geolocation.getCurrentPosition(...);

از API مربوط به Geolocation استفاده می‌کند.

یا:

fetch("/api/products");

برای ارسال درخواست شبکه استفاده می‌شود.

بنابراین می‌توانیم API را یک رابط آماده برای استفاده از یک قابلیت در نظر بگیریم.

JavaScript و Web API چه تفاوتی دارند؟

این موضوع بسیار مهم است.

JavaScript یک زبان برنامه‌نویسی است.

اما بسیاری از امکاناتی که در مرورگر استفاده می‌کنیم، بخشی از خود زبان JavaScript نیستند؛ بلکه مرورگر آن‌ها را در اختیار JavaScript قرار می‌دهد.

مثلاً:

document.getElementById("title");

از DOM استفاده می‌کند.

یا:

navigator.geolocation

به Geolocation API مربوط است.

یا:

localStorage

به Web Storage API مربوط است.

بنابراین می‌توانیم این رابطه را این‌گونه تصور کنیم:

JavaScript
     ↓
Browser APIs
     ↓
امکانات مرورگر

مرورگر مجموعه بسیار بزرگی از Web APIها دارد. APIهایی مانند DOM، Fetch، Geolocation، Web Storage، Canvas، File و بسیاری موارد دیگر در این مجموعه قرار می‌گیرند.

APIهای مرورگر چه کارهایی انجام می‌دهند؟

APIهای مرورگر کاربردهای بسیار زیادی دارند.

برای مثال می‌توانند برای موارد زیر استفاده شوند:

• تغییر محتوای HTML

• دریافت اطلاعات از سرور

• ذخیره اطلاعات در مرورگر

• دریافت موقعیت جغرافیایی

• کار با فایل‌ها

• پخش و کنترل صدا و ویدئو

• رسم گرافیک

• کار با دوربین و میکروفون

• مدیریت Clipboard

• ارسال اعلان

• مدیریت تاریخچه مرورگر

• ساخت برنامه‌های آفلاین

• ارتباط لحظه‌ای با سرور

البته همه APIها برای هر پروژه‌ای مناسب نیستند و بعضی از آن‌ها به اجازه کاربر یا شرایط امنیتی خاص نیاز دارند.

دسته‌بندی ساده APIهای کاربردی

برای اینکه موضوع راحت‌تر شود، APIها را فعلاً به چند گروه تقسیم می‌کنیم:

در این مقاله قرار نیست تمام این APIها را به‌صورت عمیق یاد بگیریم. هدف این است که با کاربرد آن‌ها آشنا شویم و بتوانیم تشخیص دهیم برای حل هر مسئله باید به دنبال چه APIای باشیم.

DOM API

یکی از مهم‌ترین APIهایی که در توسعه وب با آن مواجه می‌شویم، DOM API است.

DOM مخفف:

Document Object Model

است.

مرورگر HTML صفحه را به ساختاری از اشیا و گره‌ها تبدیل می‌کند که JavaScript می‌تواند آن‌ها را بررسی و تغییر دهد.

مثلاً HTML زیر را داریم:

<h1 id="title">
    سلام
</h1>

در JavaScript می‌توانیم آن را پیدا کنیم:

const title = document.getElementById("title");

و محتوای آن را تغییر دهیم:

title.textContent = "سلام دنیا";

پس:

HTML
 ↓
DOM
 ↓
JavaScript
 ↓
تغییر صفحه

یکی از مهم‌ترین کاربردهای JavaScript در صفحات وب همین تعامل با DOM است.

تغییر HTML با DOM

مثلاً:

<p id="message">
    متن اولیه
</p>

JavaScript:

const message =
    document.getElementById("message");

message.textContent =
    "متن جدید";

بعد از اجرای JavaScript، محتوای صفحه تغییر می‌کند.

این قابلیت پایه بسیاری از رابط‌های کاربری تعاملی است.

پیدا کردن عناصر

می‌توانیم عناصر را با روش‌های مختلف پیدا کنیم.

مثلاً:

document.getElementById("title");

یا:

document.querySelector(".item");

یا:

document.querySelectorAll(".item");

در ادامه مسیر یادگیری JavaScript، DOM یکی از موضوعات بسیار مهم خواهد بود.

Fetch API

یکی دیگر از APIهای بسیار مهم، Fetch API است.

از Fetch برای ارسال درخواست‌های شبکه و دریافت اطلاعات استفاده می‌کنیم.

مثلاً فرض کنید یک API داریم:

/api/products

می‌توانیم با JavaScript به آن درخواست ارسال کنیم:

fetch("/api/products");

یک نمونه کامل‌تر:

fetch("/api/products")
    .then(response => response.json())
    .then(data => {
        console.log(data);
    });

در این مثال:

fetch()

درخواست را ارسال می‌کند.

سپس:

response.json()

پاسخ JSON را می‌خواند.

و در نهایت:

data

اطلاعات دریافت‌شده را در اختیار ما قرار می‌دهد.

Fetch API یکی از روش‌های اصلی ارتباط صفحات وب با سرور است.

Fetch در پروژه‌های واقعی

فرض کنید یک فروشگاه اینترنتی داریم.

صفحه باید لیست محصولات را از سرور دریافت کند.

می‌توانیم چیزی شبیه این داشته باشیم:

fetch("/api/products")
    .then(response => response.json())
    .then(products => {

        console.log(products);

    });

سرور ممکن است چنین داده‌ای برگرداند:

[
    {
        "id": 1,
        "name": "لپ‌تاپ"
    },
    {
        "id": 2,
        "name": "موبایل"
    }
]

JavaScript می‌تواند این اطلاعات را دریافت کرده و در صفحه نمایش دهد.

Web Storage API

در مقاله شماره ۱۸ به Web Storage پرداختیم.

Web Storage نیز یکی از APIهای مرورگر است.

دو گزینه اصلی آن عبارت‌اند از:

localStorage

و:

sessionStorage

مثلاً:

localStorage.setItem(
    "username",
    "Ali"
);

و برای دریافت:

const username =
    localStorage.getItem("username");

Web Storage برای ذخیره اطلاعات ساده در سمت کاربر مناسب است.

مثلاً:

• تنظیمات کاربر

• انتخاب حالت تاریک

• آخرین وضعیت یک فرم

• اطلاعات ساده رابط کاربری

Geolocation API

در مقاله شماره ۱۷ با Geolocation آشنا شدیم.

این API امکان درخواست موقعیت جغرافیایی کاربر را فراهم می‌کند.

مثلاً:

navigator.geolocation
    .getCurrentPosition(
        function(position) {

            console.log(
                position.coords.latitude
            );

            console.log(
                position.coords.longitude
            );

        }
    );

مرورگر در صورت امکان اطلاعات موقعیت را دریافت می‌کند و نتیجه را در اختیار JavaScript قرار می‌دهد.

البته دریافت موقعیت معمولاً به اجازه کاربر و شرایط امنیتی مرورگر وابسته است.

Canvas API

در مقاله شماره ۱۵ با Canvas کار کردیم.

Canvas نیز در واقع یک محیط/API برای رسم گرافیک در مرورگر است.

مثلاً:

<canvas id="canvas"
        width="400"
        height="200">
</canvas>

و سپس:

const canvas =
    document.getElementById("canvas");

const ctx =
    canvas.getContext("2d");

ctx.fillRect(
    20,
    20,
    100,
    100
);

در این مثال یک مستطیل روی Canvas رسم می‌شود.

Canvas می‌تواند برای مواردی مانند:

• رسم اشکال

• نمودارها

• بازی‌های دوبعدی

• ویرایش تصویر

• انیمیشن‌های گرافیکی

استفاده شود.

Canvas و WebGL از جمله APIهای گرافیکی مهم مرورگر هستند.

File API

مرورگر APIهایی برای کار با فایل‌ها نیز دارد.

مثلاً فرض کنید کاربر یک فایل را از طریق:

<input type="file">

انتخاب می‌کند.

JavaScript می‌تواند فایل انتخاب‌شده را دریافت کند.

مثال:

<input
    type="file"
    id="fileInput">

JavaScript:

const fileInput =
    document.getElementById("fileInput");

fileInput.addEventListener(
    "change",
    function () {

        const file =
            fileInput.files[0];

        console.log(file.name);
        console.log(file.size);
        console.log(file.type);

    }
);

در اینجا اطلاعاتی مانند:

نام فایل
اندازه فایل
نوع فایل

را می‌توانیم بررسی کنیم.

این قابلیت در پروژه‌های آپلود فایل بسیار مهم است.

Clipboard API

Clipboard API برای کار با Clipboard سیستم استفاده می‌شود.

مثلاً می‌توانیم یک متن را کپی کنیم.

navigator.clipboard.writeText(
    "سلام دنیا"
);

حالا متن موردنظر در Clipboard قرار می‌گیرد.

مثلاً می‌توانیم در یک سایت یک دکمه داشته باشیم:

<button id="copyButton">
    کپی کردن
</button>

و JavaScript:

const copyButton =
    document.getElementById("copyButton");

copyButton.addEventListener(
    "click",
    async function () {

        await navigator.clipboard.writeText(
            "این متن کپی شد"
        );

        alert("متن کپی شد");
    }
);

این قابلیت در مواردی مانند:

• کپی لینک

• کپی کد

• کپی شماره سفارش

• کپی متن

بسیار کاربردی است.

مثال واقعی Clipboard

فرض کنید صفحه‌ای برای نمایش لینک دعوت داریم:

<input
    id="inviteLink"
    value="https://example.com/invite/123"
    readonly>

<button id="copyButton">
    کپی لینک
</button>

JavaScript:

const inviteLink =
    document.getElementById("inviteLink");

const copyButton =
    document.getElementById("copyButton");

copyButton.addEventListener(
    "click",
    async function () {

        await navigator.clipboard.writeText(
            inviteLink.value
        );

        alert("لینک کپی شد");
    }
);

این یک مثال ساده اما بسیار نزدیک به پروژه‌های واقعی است.

Notifications API

مرورگرها APIهایی برای نمایش اعلان نیز دارند.

برای مثال:

Notification.requestPermission()
    .then(permission => {

        console.log(permission);

    });

اگر کاربر اجازه دهد، می‌توان اعلان ایجاد کرد.

مثلاً:

new Notification(
    "پیام جدید دریافت شد"
);

البته نمایش اعلان به اجازه کاربر و محدودیت‌های امنیتی مرورگر وابسته است.

این قابلیت می‌تواند برای برنامه‌هایی مانند:

• سیستم پیام‌رسان

• داشبورد

• سیستم سفارش

• سامانه مدیریت وظایف

مفید باشد.

History API

مرورگر تاریخچه صفحات بازدیدشده را مدیریت می‌کند.

JavaScript نیز APIهایی برای کار با تاریخچه در اختیار دارد.

مثلاً:

history.back();

برای رفتن به صفحه قبلی استفاده می‌شود.

یا:

history.forward();

برای رفتن به صفحه بعدی.

همچنین:

history.pushState(
    {},
    "",
    "/products"
);

می‌تواند یک ورودی جدید به تاریخچه اضافه کند.

این API در برنامه‌های تک‌صفحه‌ای و سیستم‌هایی که بدون بارگذاری کامل صفحه مسیر URL را تغییر می‌دهند، اهمیت زیادی دارد.

URL و URLSearchParams

یکی دیگر از ابزارهای کاربردی مرورگر، کار با URL است.

مثلاً:

const url =
    new URL(
        "https://example.com/products?page=2"
    );

می‌توانیم پارامترهای Query String را دریافت کنیم:

const page =
    url.searchParams.get("page");

console.log(page);

نتیجه:

2

یا می‌توانیم پارامتر اضافه کنیم:

url.searchParams.set(
    "category",
    "mobile"
);

حالا URL شامل:

category=mobile

نیز خواهد بود.

این قابلیت در صفحات جستجو، فیلتر محصولات و صفحات لیست بسیار کاربردی است.

مثال فیلتر محصولات

فرض کنید URL صفحه این باشد:

/products?category=mobile&page=2

می‌توانیم بنویسیم:

const params =
    new URLSearchParams(
        window.location.search
    );

const category =
    params.get("category");

const page =
    params.get("page");

console.log(category);
console.log(page);

خروجی:

mobile
2

این روش برای ساخت صفحات فیلترشده بسیار کاربردی است.

Web APIs و امنیت

یکی از نکات مهم درباره APIهای مرورگر این است که همه APIها بدون محدودیت در اختیار صفحه نیستند.

بسته به API ممکن است مواردی مانند:

• اجازه کاربر

• HTTPS

• محدودیت‌های مرورگر

• سیاست‌های امنیتی

• دسترسی به همان مبدأ

اهمیت داشته باشند.

مثلاً دریافت موقعیت مکانی کاربر موضوعی حساس است و مرورگر قبل از در اختیار قرار دادن موقعیت معمولاً از کاربر اجازه می‌گیرد.

بنابراین نباید تصور کنیم JavaScript می‌تواند بدون محدودیت به تمام اطلاعات و امکانات دستگاه کاربر دسترسی داشته باشد.

API چیست و کتابخانه چیست؟

این دو مفهوم را نباید با یکدیگر اشتباه بگیریم.

API معمولاً یک رابط برای استفاده از قابلیت مشخص است.

اما Library یا کتابخانه مجموعه‌ای از کدهای آماده است که توسعه‌دهندگان برای ساده‌تر کردن توسعه نرم‌افزار استفاده می‌کنند.

مثلاً:

Browser API

توسط محیط مرورگر ارائه می‌شود.

در مقابل:

Library

معمولاً توسط یک تیم یا جامعه توسعه‌دهندگان ایجاد می‌شود و باید آن را به پروژه اضافه کنیم.

مثلاً کتابخانه‌هایی مانند:

jQuery

یا ابزارهای مدرن JavaScript.

البته یک کتابخانه می‌تواند از APIهای مرورگر استفاده کند.

API چیست و Framework چیست؟

Framework نیز با API تفاوت دارد.

به‌صورت خیلی ساده:

API
↓
یک رابط برای استفاده از قابلیت

Library
↓
مجموعه‌ای از کدهای آماده

Framework
↓
ساختار و چارچوبی برای توسعه برنامه

مثلاً در توسعه وب ممکن است از:

HTML
CSS
JavaScript
        ↓
Browser APIs
        ↓
Library
        ↓
Framework

استفاده کنیم.

این مفاهیم در آینده و هنگام ورود به JavaScript و فریم‌ورک‌هایی مانند React، Angular یا Vue اهمیت بیشتری پیدا می‌کنند.

APIهای داخلی و APIهای خارجی

یک تفاوت مهم دیگر وجود دارد.

Browser API

این API توسط محیط مرورگر در اختیار ما قرار می‌گیرد.

مثلاً:

localStorage

یا:

navigator.geolocation

یا:

fetch()

Third-Party API

گاهی یک شرکت یا سرویس خارجی API ارائه می‌کند.

مثلاً یک سرویس نقشه ممکن است API ارائه دهد تا بتوانیم امکانات نقشه را در سایت خود استفاده کنیم.

در این حالت API متعلق به سرویس موردنظر است، نه خود مرورگر.

برای مثال:

Website
   ↓
JavaScript
   ↓
Third-Party API
   ↓
External Service

این نوع APIها معمولاً نیازمند مستندات، احراز هویت یا کلید API هستند.

جدول چند API مهم

مرورگرهای امروزی APIهای بسیار بیشتری دارند و فهرست Web APIها بسیار گسترده است.

یک مثال کوچک ترکیبی

حالا چند API را در یک پروژه کوچک کنار هم قرار دهیم.

فرض کنید می‌خواهیم یک صفحه ساده داشته باشیم که:

• نام کاربر را ذخیره کند

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

• یک متن را کپی کند

HTML:

<!DOCTYPE html>
<html lang="fa" dir="rtl">

<head>
    <meta charset="UTF-8">

    <title>
        مثال Web APIs
    </title>
</head>

<body>

    <h1>
        Web APIs
    </h1>

    <input
        id="username"
        placeholder="نام شما">

    <button id="saveButton">
        ذخیره نام
    </button>

    <button id="locationButton">
        دریافت موقعیت
    </button>

    <button id="copyButton">
        کپی متن
    </button>

    <script>

        const username =
            document.getElementById(
                "username"
            );

        const saveButton =
            document.getElementById(
                "saveButton"
            );

        const locationButton =
            document.getElementById(
                "locationButton"
            );

        const copyButton =
            document.getElementById(
                "copyButton"
            );


        // Web Storage

        saveButton.addEventListener(
            "click",
            function () {

                localStorage.setItem(
                    "username",
                    username.value
                );

                alert("نام ذخیره شد");

            }
        );


        // Geolocation

        locationButton.addEventListener(
            "click",
            function () {

                navigator.geolocation
                    .getCurrentPosition(
                        function (position) {

                            console.log(
                                position.coords.latitude
                            );

                            console.log(
                                position.coords.longitude
                            );

                        }
                    );

            }
        );


        // Clipboard

        copyButton.addEventListener(
            "click",
            async function () {

                await navigator.clipboard.writeText(
                    "سلام از Web APIs"
                );

                alert("متن کپی شد");

            }
        );

    </script>

</body>

</html>

در این مثال چند قابلیت مختلف مرورگر را کنار هم قرار داده‌ایم.

Web Storage
     +
Geolocation
     +
Clipboard
     ↓
یک صفحه تعاملی

چرا یادگیری APIها مهم است؟

وقتی فقط HTML و CSS بلد هستیم، بیشتر تمرکز ما روی ساخت ظاهر صفحه است.

اما یک وب‌سایت واقعی معمولاً نیاز دارد:

دریافت اطلاعات
       ↓
نمایش اطلاعات
       ↓
ذخیره اطلاعات
       ↓
تعامل با کاربر
       ↓
ارتباط با سرور
       ↓
استفاده از امکانات مرورگر

APIها بخشی از ابزارهایی هستند که این قابلیت‌ها را ممکن می‌کنند.

برای مثال یک فروشگاه اینترنتی می‌تواند از:

DOM
↓
نمایش محصولات

Fetch
↓
دریافت محصولات

Web Storage
↓
ذخیره تنظیمات یا داده‌های ساده

Clipboard
↓
کپی لینک محصول

Geolocation
↓
دریافت موقعیت در صورت نیاز

File API
↓
انتخاب فایل

استفاده کند.

آیا باید همه APIها را حفظ کنیم؟

خیر.

این یکی از مهم‌ترین نکات یادگیری توسعه وب است.

تعداد Web APIها بسیار زیاد است و حتی توسعه‌دهندگان حرفه‌ای نیز همه آن‌ها را حفظ نمی‌کنند.

مهم‌تر از حفظ کردن APIها این است که بدانیم:

برای حل یک مسئله باید دنبال چه نوع APIای بگردیم.

مثلاً:

می‌خواهم اطلاعات را از سرور بگیرم
        ↓
Fetch API

یا:

می‌خواهم اطلاعات ساده را در مرورگر ذخیره کنم
        ↓
Web Storage

یا:

می‌خواهم موقعیت کاربر را بگیرم
        ↓
Geolocation

یا:

می‌خواهم فایل انتخاب‌شده کاربر را بررسی کنم
        ↓
File API

این نوع تفکر برای یک توسعه‌دهنده بسیار مهم‌تر از حفظ کردن متدهای متعدد است.

نکات مهم هنگام استفاده از APIها

هنگام استفاده از Web APIها همیشه چند سؤال را از خودمان بپرسیم:

آیا این API در مرورگر موردنظر پشتیبانی می‌شود؟

پشتیبانی APIها ممکن است متفاوت باشد.

آیا نیاز به اجازه کاربر دارد؟

بعضی APIها به permission نیاز دارند.

آیا به HTTPS نیاز دارد؟

برخی قابلیت‌های مرورگر فقط در شرایط امن قابل استفاده هستند.

آیا اطلاعات حساسی در اختیار API قرار می‌دهیم؟

باید همیشه حریم خصوصی کاربر را در نظر بگیریم.

آیا برای موبایل مناسب است؟

رفتار بعضی APIها ممکن است بسته به دستگاه و مرورگر متفاوت باشد.

تمرین‌های عملی

تمرین 1 — تغییر محتوای صفحه

یک صفحه ایجاد کنید که شامل:

<h1>
    عنوان اولیه
</h1>

و یک دکمه باشد.

با کلیک روی دکمه، متن h1 را با استفاده از DOM تغییر دهید.

تمرین 2 — ذخیره نام کاربر

یک Input و Button بسازید.

کاربر نام خود را وارد کند و با کلیک روی دکمه، نام در:

localStorage

ذخیره شود.

سپس هنگام باز شدن صفحه، نام ذخیره‌شده را دوباره نمایش دهید.

تمرین 3 — کپی متن

یک متن و یک دکمه ایجاد کنید.

با کلیک روی دکمه، متن را با استفاده از:

navigator.clipboard.writeText()

کپی کنید.

تمرین 4 — دریافت موقعیت

یک دکمه ایجاد کنید.

با کلیک روی آن، موقعیت کاربر را دریافت کرده و:

Latitude
Longitude

را روی صفحه نمایش دهید.

تمرین 5 — دریافت اطلاعات از API

یک API عمومی پیدا کنید که داده JSON برگرداند.

با:

fetch()

اطلاعات را دریافت کنید و حداقل سه مورد از داده‌ها را روی صفحه نمایش دهید.

چالش این مقاله

یک صفحه با عنوان:

پروفایل کاربر

بسازید.

صفحه باید شامل موارد زیر باشد:

نام کاربر
ایمیل
دکمه ذخیره
دکمه کپی نام
دکمه دریافت موقعیت

قابلیت‌های مورد انتظار:

• نام کاربر در localStorage ذخیره شود.

• هنگام باز شدن صفحه نام ذخیره‌شده نمایش داده شود.

• دکمه کپی، نام کاربر را در Clipboard قرار دهد.

• دکمه موقعیت، Latitude و Longitude را نمایش دهد.

• تمام عملیات با JavaScript انجام شود.

• در صورت رد کردن دسترسی موقعیت، پیام مناسبی نمایش داده شود.

نکات کلیدی مقاله

در این مقاله یاد گرفتیم:

• API چیست؟

• Web API چیست؟

• JavaScript و Web API چه تفاوتی دارند؟

• Browser API چیست؟

• Third-Party API چیست؟

• DOM API چیست؟

• Fetch API چیست؟

• Web Storage چیست؟

• Geolocation چیست؟

• Canvas API چیست؟

• File API چیست؟

• Clipboard API چیست؟

• Notifications API چیست؟

• History API چیست؟

• URL و URLSearchParams چه کاربردی دارند؟

• API، Library و Framework چه تفاوتی دارند؟

• چرا لازم نیست همه APIها را حفظ کنیم؟

جمع‌بندی

APIها یکی از پایه‌های مهم توسعه وب مدرن هستند. مرورگر مجموعه بزرگی از رابط‌های برنامه‌نویسی را در اختیار JavaScript قرار می‌دهد تا بتوانیم فراتر از نمایش ساده HTML عمل کنیم؛ از تغییر محتوای صفحه و ارتباط با سرور گرفته تا ذخیره اطلاعات، کار با فایل‌ها، دریافت موقعیت و استفاده از امکانات مختلف مرورگر.

در این مقاله هدف ما حفظ کردن APIهای مختلف نبود؛ بلکه می‌خواستیم یک دید کلی نسبت به آن‌ها پیدا کنیم و بدانیم برای هر نیاز معمول، چه نوع APIای می‌تواند راه‌حل مناسبی باشد.

تا اینجا تقریباً تمام مباحث اصلی بخش HTML5 را به‌صورت جداگانه بررسی کرده‌ایم. اکنون زمان آن رسیده است که آموخته‌های خود را در قالب یک پروژه عملی HTML و HTML5 کنار هم قرار دهیم.