BOM — window, location, history, navigator

~15 daq · JavaScript · Brauzer API lari

Muammodan boshlaylik

JavaScript faqat HTML elementlari bilan ishlaydi deb o'ylagan bo'lsangiz — yana bir dunyo bor. Brauzer o'zi ham JavaScript orqali boshqariladi: sahifani boshqa manzilga yo'naltirish, "orqaga" tugmasini boshqarish, foydalanuvchi qaysi brauzerda ekanini bilish — bularning barchasi mumkin.

Bu imkoniyatlar — BOM (Browser Object Model). Brauzer oynasini ifodalovchi ob'ektlar to'plami.

window — hamma narsaning boshi

window — brauzerdagi eng yuqori ob'ekt. Barcha global o'zgaruvchilar, funksiyalar, document, console, fetch — hammasi window ning xususiyatlari.

Hayotiy o'xshatma

Binoning bosh ofisi. Barcha bo'limlar — huquq, moliya, marketing — shu binoda. Siz "moliya bo'limi" desangiz ham, "bosh ofisning moliya bo'limi" desangiz ham — bir xil joy. window.document va document — bir xil narsa, window global bo'lgani uchun yozilmaydi.

window.innerWidth;   // brauzer oynasining kengligi (px)
window.innerHeight;  // brauzer oynasining balandligi (px)
window.scrollY;      // sahifa qancha scroll qilingan (px, vertikal)
window.scrollX;      // sahifa qancha scroll qilingan (px, gorizontal)

Sahifani dasturiy scroll qilish:

window.scrollTo({ top: 0, behavior: "smooth" }); // ← tepaga chiqish
window.scrollBy({ top: 300, behavior: "smooth" }); // ← 300px pastga

location — manzil bilan ishlash

window.location (yoki faqat location) — sahifaning hozirgi manzili haqida ma'lumot. O'qish ham, o'zgartirish ham mumkin.

Hayotiy o'xshatma

GPS navigatsiya. Hozir qayerdasiz — ko'rsatadi. Yangi manzil kiritasiz — u yerga olib boradi. location — o'sha GPS.

console.log(location.href);     // "https://example.com/blog?id=5#izoh"
console.log(location.origin);   // "https://example.com"
console.log(location.pathname); // "/blog"
console.log(location.search);   // "?id=5"
console.log(location.hash);     // "#izoh"

Boshqa sahifaga o'tish:

location.href = "/login"; // ← shu sahifaga o'tish

Sahifani yangilash:

location.reload(); // ← F5 bosganday

URL parametrini o'qish — URLSearchParams:

// URL: /mahsulotlar?kategoriya=elektronika&sahifa=2
const params = new URLSearchParams(location.search);

console.log(params.get("kategoriya")); // "elektronika"
console.log(params.get("sahifa"));     // "2"

history — "orqaga" va "oldinga"

window.history — brauzer tarixini boshqarish. Foydalanuvchi borib kelgan sahifalar tarixi saqlanadi.

Hayotiy o'xshatma

Kitobdagi sahifalar. Siz ma'lum bir joyga borib, keyin orqaga qaytishingiz mumkin — kitob qaysi sahifada edingizni eslab turadi. history — brauzerdagi "eslab qolish" tizimi.

history.back();    // ← orqaga (brauzer "back" tugmasi kabi)
history.forward(); // ← oldinga (brauzer "forward" tugmasi kabi)
history.go(-2);    // ← 2 ta orqaga
history.go(1);     // ← 1 ta oldinga

SPA (Single Page Application) da sahifani yangilamasdan URL o'zgartirish:

// URL o'zgaradi, sahifa yangilanmaydi, tarixa qo'shiladi
history.pushState({ sahifa: 2 }, "", "/mahsulotlar?sahifa=2");

// Tarixdan o'chirilmasdan URL o'zgaradi (almashtiradi)
history.replaceState({ sahifa: 2 }, "", "/mahsulotlar?sahifa=2");

pushState — foydalanuvchi "orqaga" bosganda avvalgi sahifaga qaytishi uchun qo'shadi. replaceState — hozirgi yozuvni almashtiradi, "orqaga" bosganda ikki qadam orqaga ketmaydi.

navigator — brauzer va qurilma haqida

window.navigator — foydalanuvchining brauzer, tizim, til haqida ma'lumot.

Hayotiy o'xshatma

Mehmonxona stoykasiдаги forma. Siz yozasiz: qayerdan keldingiz, qaysi davlat fuqarosisiz, nechi kishi. Mehmonxona bu ma'lumotga qarab xizmat ko'rsatadi. navigator — o'sha forma: brauzer "o'z haqida" ma'lumot beradi.

console.log(navigator.language);   // "uz-UZ" yoki "en-US" — tizim tili
console.log(navigator.onLine);     // true/false — internet bormi?
console.log(navigator.userAgent);  // brauzer identifikatori (ishonchli emas)

Joylashuv (geolocation):

navigator.geolocation.getCurrentPosition(
  function(manzil) {
    console.log(manzil.coords.latitude);  // kenglik
    console.log(manzil.coords.longitude); // uzunlik
  },
  function(xato) {
    console.error("Joylashuv aniqlashga ruxsat berilmadi");
  }
);

Internet borligini kuzatish:

window.addEventListener("online", function() {
  console.log("Internet qaytdi!");
});

window.addEventListener("offline", function() {
  console.log("Internet yo'qoldi!");
});

Tez-tez uchraydigan xatolar

location.href bilan history.pushState ni aralashtirish:

// location.href = "..." — sahifa to'liq yangilanadi
location.href = "/mahsulotlar"; // server so'rov ketadi, sahifa yuklanadi

// history.pushState — sahifa yangilanmaydi, faqat URL o'zgaradi
history.pushState({}, "", "/mahsulotlar"); // SPA da ishlatiladigan usul

SPA da location.href ishlatilsa — butun ilova qayta yuklanadi. Bu ko'pincha noto'g'ri.

navigator.userAgent ga ishonish:

userAgent qiymati o'zgartirish mumkin — brauzerlar bir-birini "taqlid qilishi" mumkin. Qaysi brauzerda ekanini aniqlash uchun emas, zamonaviy usul — feature detection: "bu API mavjudmi?" deb tekshirish.

// ❌ — userAgent ishonchsiz
if (navigator.userAgent.includes("Chrome")) { ... }

// ✅ — feature detection
if ("geolocation" in navigator) {
  // geolocation mavjud
}
if ("serviceWorker" in navigator) {
  // service worker mavjud
}

Xulosa

window — hamma narsaning boshi. innerWidth, innerHeight, scrollY — oyna va scroll haqida.

location — hozirgi manzil. .href, .pathname, .search. O'zgartirish — sahifaga o'tish.

history — brauzer tarixi. .back(), .forward(). SPA da .pushState() URL ni sahifasiz o'zgartirish uchun.

navigator — brauzer va qurilma haqida. .onLine — internet. .geolocation — joylashuv. Feature detection — userAgent dan ko'ra ishonchli.

Keyingi dars

49-dars: Local Storage va Session Storage