Brauzerdagi Web API nima?

Savol

Web API nima va ular JavaScript tilining o'zidan nimasi bilan farq qiladi?

Qisqa javob

Web API — bu brauzer (JavaScript dvigatelining o'zi emas) taqdim etadigan interfeyslar to'plami bo'lib, kodga DOM, tarmoq, saqlash joyi, grafika va muhitning boshqa imkoniyatlari bilan o'zaro ta'sirlashish imkonini beradi.

Batafsil javob

Asosiy g'oya: JavaScript'ning o'zi (ECMAScript spetsifikatsiyasi) na documentni, na fetchni, na windowni biladi — bularning barchasini til emas, bajarilish muhiti (brauzer yoki Node.js) taqdim etadi. Aynan shu sababli bir xil JS-kod brauzerda ishlashi mumkin, lekin windowsiz Node.js'da yiqilishi mumkin, va aksincha.

Eng ko'p ishlatiladigan Web API'lar:

• DOM API — sahifaning strukturasi, mazmuni va uslublarini o'zgartirish (document.querySelector, element.classList, ...).
• Fetch API — tarmoq so'rovlari, XMLHttpRequestning zamonaviy o'rinbosari.
• Web Storage API — mijozda ma'lumot saqlash uchun localStorage/sessionStorage.
• Web Audio API — tovush yaratish va qayta ishlash.
• Canvas API — grafikani dasturiy chizish.
• Geolocation API — foydalanuvchi koordinatalarini olish.

Bu Nuxt kabi SSR-freymvorklar uchun muhim: Web API ishlatadigan kodni window/document mavjud bo'lmagan serverda xavfsiz bajarib bo'lmaydi.

Misol

// DOM API
document.querySelector('.card').classList.add('active')

// Fetch API
const response = await fetch('/api/users')
const users = await response.json()

// Web Storage API
localStorage.setItem('theme', 'dark')
const theme = localStorage.getItem('theme')

// Geolocation API
navigator.geolocation.getCurrentPosition((position) => {
  console.log(position.coords.latitude, position.coords.longitude)
})

Qo'shimcha savollar

• Nega Nuxt'da SSR-render paytida localStorage mavjud emas?
• fetch XMLHttpRequestdan tubdan nimasi bilan farq qiladi?
• Qaysi Web API'larni faqat onMounted/<ClientOnly> ichida xavfsiz ishlatish mumkin?