BOM

BOM — browser oynasi va uning web hujjatdan tashqari imkoniyatlarini JavaScript orqali ifodalovchi obyektlar to‘plami. To‘liq nomi Browser Object Model. BOM uchun DOM kabi yagona aniq daraxt modeli mavjud emas, lekin amaliyotda window, location, history, navigator, screen va timing API’lari shu tushuncha doirasida ko‘riladi.

BOM JavaScriptga browser oynasi, URL, navigatsiya va environment haqidagi ma’lumotlar bilan ishlash imkonini beradi.

Window

Browser tab yoki oynaning global obyektlaridan biri window.

Browserdagi global variable va ko‘p API’lar window orqali mavjud:

window.location
window.history
window.setTimeout

Ko‘pincha window. prefiksi yozilmaydi.

Global scope

Oddiy classic scriptdagi ayrim global declarationlar window property’si sifatida ko‘rinishi mumkin.

Module scriptlar alohida module scope’da ishlaydi.

Global namespace’ni keraksiz qiymatlar bilan to‘ldirish nom to‘qnashuviga olib kelishi mumkin.

Location

location joriy URL haqida ma’lumot beradi.

Asosiy qismlar:

• protocol;
• host;
• hostname;
• port;
• pathname;
• search;
• hash;
• origin.

Location qiymatini o‘zgartirish browserni boshqa manzilga yo‘naltirishi mumkin.

Navigatsiya

Sahifani o‘zgartirish usullari:

• location.assign;
• location.replace;
• location.reload;
• property’ga URL berish.

assign odatda history entry qo‘shadi.

replace joriy entryni almashtiradi, shuning uchun back tugmasi behaviori farq qiladi.

History

history tabdagi navigatsiya tarixini boshqaradi.

Methodlar:

• back;
• forward;
• go;
• pushState;
• replaceState.

Security sabab JavaScript history ichidagi boshqa saytlarning to‘liq URL ro‘yxatini o‘qiy olmaydi.

History API

SPA’lar pushState va replaceState orqali to‘liq page reloadsiz URLni o‘zgartiradi.

popstate event back va forward navigatsiyani kuzatishga yordam beradi.

Server ham shu URLlarga to‘g‘ri fallback qaytarishi kerak.

Navigator

navigator browser va platformaga oid turli imkoniyatlarni beradi.

Masalan:

• user agentga oid ma’lumot;
• language;
• online holat;
• clipboard;
• geolocation;
• media device;
• service worker;
• hardware concurrencyga oid signal.

Ko‘p capability permission yoki secure context talab qiladi.

User-Agent

User-Agent browser va platforma haqida matn beradi.

U tarixan browser detection uchun ishlatilgan.

Ammo spoof qilish, format murakkabligi va privacy sabab feature detection ko‘proq afzal.

Application kerakli API mavjudligini bevosita tekshiradi.

Screen

screen display haqida ma’lumot beradi:

• width;
• height;
• available area;
• color depth;
• orientationga oid interface.

Bu qiymatlar browser window o‘lchami bilan bir xil emas.

Ko‘p monitor va zoom holati hisobga olinadi.

Window o‘lchami

Viewport o‘lchami innerWidth va innerHeightga o‘xshash propertylar orqali olinishi mumkin.

resize event oyna o‘zgarganda ishga tushadi.

Responsive layout asosan CSS media query bilan boshqariladi, JavaScript faqat behavior zarur bo‘lsa qo‘shiladi.

Timer

BOM doirasida ko‘riladigan timing API’lar:

• setTimeout;
• clearTimeout;
• setInterval;
• clearInterval.

Timer berilgan vaqtda aniq ishga tushishni kafolatlamaydi.

Event loop, inactive tab va browser throttling kechikishga ta’sir qiladi.

Dialog

Browser an’anaviy dialog API’lari:

• alert;
• confirm;
• prompt.

Ular blocking behaviorga ega va user tajribasini to‘xtatadi.

Modern interfeyslar ko‘pincha non-blocking custom dialogdan foydalanadi.

Open va close

window.open yangi tab yoki oyna ochishi mumkin.

Browser popup blocker user gesture bo‘lmagan chaqiriqni bloklashi mumkin.

Yangi window bilan ishlashda opener relationship va noopener security xususiyati muhim.

Opener

Yangi ochilgan sahifa ayrim holatda uni ochgan windowga window.opener orqali murojaat qilishi mumkin.

Noma’lum tashqi sahifaga opener access berish tabnabbing xavfini yaratishi mumkin.

noopener bu relationshipni uzadi.

Storage bilan bog‘lanish

localStorage va sessionStorage ko‘pincha browser environment API’lari sifatida BOM bilan birga tilga olinadi.

Ular origin bo‘yicha ajratiladi.

Synchronous storage katta data va tez-tez operationda performance muammosi yaratishi mumkin.

Geolocation

Geolocation API user joylashuvini so‘raydi.

U:

• secure context;
• user permission;
• browser policy;
• qurilma capability

ga bog‘liq.

User permissionni rad etsa application alternativ behavior ko‘rsatadi.

Online holat

navigator.onLine network mavjudligiga oid taxminiy signal beradi.

true internetdagi ma’lum server ishlayotganini kafolatlamaydi.

Real request va retry application uchun ishonchliroq tekshiruv.

DOM va BOM

DOM hujjat mazmuni va elementlarini ifodalaydi.

BOM browser oynasi, navigatsiya va environment bilan ishlaydi.

window.document orqali ikkalasi bog‘langan.

Browser API’larining ko‘pi tarixan BOM deb atalgan bo‘lsa-da, zamonaviy web standartlarda ular alohida specificationlarda belgilangan.

Feature detection

Browser nomi yoki User-Agent stringiga qarab behavior tanlash o‘rniga kerakli API mavjudligi tekshiriladi. Masalan, navigator.geolocation borligi yoki ma’lum methodni qo‘llash mumkinligi aniqlanadi. Bu yangi browser, privacy mode va spoofed User-Agent bilan barqarorroq ishlaydi.

Security boundary

window boshqa origin iframe yoki tab bilan cheklangan darajada aloqa qiladi. Same-origin policy boshqa sahifaning DOM va sensitive propertylarini o‘qishga yo‘l bermaydi. Cross-origin communication uchun postMessage ishlatiladi va kelgan message’ning origin qiymati tekshiriladi.

Multi-window aloqa

Bir application yangi tab yoki popup bilan postMessage orqali data almashishi mumkin. Message yuborishda aniq target origin beriladi. Qabul qiluvchi source window, origin va payload schema’ni tekshiradi.

Visibility

Tab backgroundga o‘tganda timer va rendering throttling qilinishi mumkin. Page Visibility API applicationga sahifa ko‘rinayotganini bildiradi.

Bog‘liq tushunchalar

Browser Object Model, Window, Location, History API, Navigator, Screen, Timer, Browser API, DOM, Web platform