17- راهنمای جامع شیء Window در جاوااسکریپت: کلید اصلی محیط مرورگر

تا به اینجا، مفاهیم پایه‌ای جاوااسکریپت مانند متغیرها، انواع داده، شرط‌ها، توابع و حلقه‌ها را پشت سر گذاشته‌ایم. در بخش بعدی، وارد مبحث DOM (Document Object Model) خواهیم شد تا یاد بگیریم چگونه عناصر صفحه را انتخاب کنیم، آن‌ها را تغییر دهیم، استایل‌دهی کنیم و با رویدادها (Events) کار کنیم. اما پیش از ورود به DOM، لازم است با یک مفهوم کلیدی آشنا شویم: شیء Window.

---

شیء Window چیست؟

در جاوااسکریپت سمت کلاینت (مرورگر)، Window همان شیء سراسری (Global Object) است. تمام چیزهایی که در مرورگر می‌بینیم، در واقع زیرمجموعه‌ای از این شیء هستند. حتی شیء document که برای کار با DOM از آن استفاده می‌کنیم، خود بخشی از window است.

تفاوت محیط‌ها (Node.js vs Browser)

ممکن است نام Node.js را شنیده باشید. Node.js یک محیط اجرای جاوااسکریپت است که به صورت یک پروسه مستقل روی سیستم شما اجرا می‌شود؛ بنابراین در Node.js، سیستم‌عامل محیط سراسری شماست. اما در جاوااسکریپت سمت کلاینت (مرورگر)، مرورگر یا Window محیط سراسری شما محسوب می‌شود. جالب است بدانید هر دو از موتور پردازش جاوااسکریپت به نام V8 استفاده می‌کنند و منطق یکسانی دارند، فقط محیط اجرای آن‌ها متفاوت است.

---

متدها و ویژگی‌های مهم Window

شیء Window شامل ابزارهای بسیار پرکاربردی است که توسعه‌دهندگان روزانه از آن‌ها استفاده می‌کنند، از جمله: localStorage، fetch API، navigator و متدهای تعاملی مثل alert.

۱. متدهای تعاملی (Alert, Prompt, Confirm)

اگرچه امروزه توصیه می‌شود برای پیام‌های خطا یا تاییدیه از عناصر گرافیکی زیباتر (مثل Bootstrap Alerts) استفاده کنید، اما این متدها همچنان برای تست‌های سریع در دسترس هستند:

• Alert: یک پنجره کوچک برای نمایش پیام.

  window.alert('Hello World'); // یا فقط alert('Hello World')
  

• Prompt: برای دریافت ورودی از کاربر.

  const input = prompt('نام خود را وارد کنید:');
  alert(input);
  

• Confirm: برای دریافت تاییدیه (بله/خیر) از کاربر (معمولا هنگام حذف کردن آیتم‌ها کاربرد دارد).

  if (confirm('آیا مطمئن هستید؟')) {
      console.log('Yes');
  } else {
      console.log('No');
  }
  

۲. ویژگی‌های ابعادی (Height & Width)

گاهی برای واکنش‌گرا کردن سایت یا اجرای انیمیشن‌های خاص، نیاز دارید ابعاد پنجره مرورگر را بدانید:

• Outer Height/Width: ابعاد کل پنجره مرورگر.
• Inner Height/Width: ابعاد محیط داخلی (بدون احتساب نوار ابزارهای مرورگر).

  console.log(window.innerHeight); // ارتفاع داخلی
  console.log(window.innerWidth);  // عرض داخلی
  

۳. موقعیت اسکرول (Scroll Points)

برای اجرای انیمیشن‌های اسکرول (مثلا ظاهر شدن المان‌ها هنگام پایین رفتن صفحه)، می‌توانید موقعیت اسکرول را پیدا کنید:

console.log(window.scrollY); // موقعیت در محور عمودی
console.log(window.scrollX); // موقعیت در محور افقی

---

اشیاء Location و History

شیء Location

این شیء اطلاعات مربوط به آدرس URL صفحه را در اختیار ما می‌گذارد و امکان تغییر آن را فراهم می‌کند.

• مشاهده جزئیات: window.location.hostname، location.port، location.protocol.
• دریافت پارامترها: برای خواندن Query Stringها (مثلا ?id=1) از location.search استفاده می‌کنیم.
• تغییر مسیر (Redirect):

  window.location.href = 'https://google.com';
  

شیء History

به ما اجازه می‌دهد در تاریخچه مرورگر کاربر جابه‌جا شویم:

window.history.go(-1); // بازگشت به صفحه قبل
window.history.length; // تعداد صفحاتی که کاربر بازدید کرده است

---

شیء Navigator

این شیء اطلاعاتی درباره مرورگر (نه خود پنجره) به ما می‌دهد. کاربردهای آن شامل:

• تشخیص سیستم‌عامل: navigator.platform (مانند Win32 یا Darwin).
• نوع مرورگر: navigator.userAgent (اطلاعات فنی مرورگر).
• موقعیت مکانی: navigator.geolocation (برای دسترسی به GPS).

نکته: نام این شیء از مرورگر قدیمی Netscape Navigator گرفته شده است.

---

جمع‌بندی

شیء Window قلب تپنده جاوااسکریپت در مرورگر است. ما در این بخش یاد گرفتیم چگونه با متدهای تعاملی، ویژگی‌های ابعادی، مدیریت URL و تاریخچه مرورگر کار کنیم. در بخش‌های بعدی، تمرکز اصلی ما روی DOM خواهد بود تا یاد بگیریم چگونه مستقیماً با کدهای HTML و CSS تعامل داشته باشیم.