فصل ۲۲: آشنایی با BOM و قابلیت‌های مرورگر

BOM چیست و چه فرقی با DOM دارد؟

• DOM (Document Object Model): برای دسترسی و مدیریت عناصر HTML (مثل <div>, <p>, …) استفاده میشه.
• BOM (Browser Object Model): برای دسترسی و مدیریت امکانات مرورگر (مثل پنجره مرورگر، آدرس فعلی، تاریخچه صفحات، اطلاعات دستگاه و …) به کار میره.

یعنی با BOM می‌تونی کد بنویسی و:

• پنجره جدید باز کنی
• کاربر رو به صفحه جدید Redirect کنی
• تاریخچه‌ی بازدیدها رو بخونی
• درباره دستگاه/مرورگر اطلاعات بگیری
• موقعیت جغرافیایی (geo location) کاربر رو به دست بیاری و خیلی کارهای دیگه!

---

مهم‌ترین اشیاء BOM و مثال کاربردی

۱. شیء window

تقریباً همه‌چیز BOM، زیرمجموعه window است.

console.log(window.innerWidth); // عرض پنجره فعلی کاربر
console.log(window.location.href); // آدرس کامل صفحه فعلی

باز کردن پنجره جدید:

window.open("https://example.com", "_blank");

بستن پنجره باز شده:

// فرض کن newWin همون پنجره‌ای باشه که باز کردی
let newWin = window.open("https://example.com", "_blank");
// ... بعداً
newWin.close();

---

۲. location: اطلاعات و تغییر آدرس صفحه

console.log(location.href);    // آدرس فعلی
console.log(location.pathname); // مسیر صفحه
// رفتن به صفحه جدید:
location.href = "https://google.com";

---

۳. history: کنترل تاریخچه مرورگر

history.back();   // برگشت به صفحه قبلی
history.forward(); // رفتن به صفحه بعد
console.log(history.length); // تعداد صفحات بازشده در این تب

---

۴. navigator: اطلاعات درباره مرورگر و کاربر

console.log(navigator.userAgent); // تشخیص نوع و نسخه مرورگر
console.log(navigator.language);  // زبان مرورگر مثلا "fa-IR"

کاربردها: تشخیص نوع دستگاه، مثلا اگر موبایل بود، نمایش پیام یا تغییر ظاهر سایت.

---

۵. screen: اطلاعاتی درباره نمایشگر کاربر

console.log(screen.width); // عرض مانیتور یا نمایشگر کاربر
console.log(screen.height); // ارتفاع نمایشگر

---

۶. (پیشرفته‌تر) Geolocation API – به دست آوردن موقعیت جغرافیایی

navigator.geolocation.getCurrentPosition(
  function(position) {
    console.log("عرض جغرافیایی:", position.coords.latitude);
    console.log("طول جغرافیایی:", position.coords.longitude);
  }, 
  function(error) {
    console.log("خطا یا دسترسی رد شد");
  }
);

(توجه: برای این قابلیت باید کاربر اجازه بده!)

---

چند نکته و کاربرد سریع:

• می‌تونی آدرس صفحه سایت رو بخونی یا عوض کنی (redirect)
• قابلیت‌های فوق، برای افزودن امکانات کاربرمحور به سایت عالی هستند (مثلاً: بررسی اندازه صفحه برای طراحی واکنش‌گرا، یا نمایش پیام اگر کاربر از مرورگر خاصی استفاده می‌کنه)
• توی بعضی مواقع (مانند گرفتن geo location)، جاوااسکریپت ممکنه نیاز به اجازه کاربر داشته باشه

---

تمرین سریع

۱. یک دکمه بساز و با کلیک روی اون، اندازه پنجره کاربر رو با alert نمایش بده.
۲. یک لینک بگذار و برای کاربرانی که با موبایل می‌آیند، پیام مخصوص نمایش بده.
۳. از دکمه “برگشت به صفحه قبلی” با استفاده از history.back استفاده کن.

---

جمع‌بندی فصل

• بم ساده، ابزاری برای ارتباط با امکانات مرورگر است.
• window، location، history، navigator، screen شناخته‌شده‌ترین اجزای BOM هستند.
• با ترکیب BOM و DOM، می‌تونی وب‌اپلیکیشن‌های داینامیک و کاربردی‌تر بسازی!