شیء Window

مقدمه

تا اینجا با زبان اصلی جاوااسکریپت و ویژگی‌های محوری آن آشنا شدیم. از این پس، وارد بخش دوم آموزش یعنی «جاوااسکریپت در سمت کاربر» می‌شویم. در این محیط، جاوااسکریپت با مفهومی به نام BOM یا Browser Object Model سروکار دارد. BOM مجموعه‌ای از اشیاء است که مرورگر در اختیار ما قرار می‌دهد تا بتوانیم با خود پنجره‌ی مرورگر تعامل داشته باشیم.

ریشه و اصلی‌ترین شیء در BOM، شیء Window است. این شیء نماینده‌ی یک پنجره (یا تب) در مرورگر است. هر چیزی که در صفحه می‌بینید، از جمله خود سند HTML (که با شیء document مدیریت می‌شود)، داخل این پنجره قرار دارد. علاوه بر این، شیء Window نقش شیء سراسری (Global Object) را در جاوااسکریپتِ سمت مرورگر ایفا می‌کند. این یعنی تمام متغیرهای سراسری که با var تعریف شوند و تمام توابع سراسری، به عنوان پراپرتی و متد به این شیء اضافه می‌شوند.

Window به عنوان شیء سراسری

همانطور که گفته شد، وقتی کدهای جاوااسکریپت در مرورگر اجرا می‌شوند، شیء window بالاترین سطح حوزه (scope) را دارد. به همین دلیل، دسترسی به متدها و پراپرتی‌های آن نیازی به نوشتن پیشوند window ندارد. برای مثال، تابع alert() که برای نمایش یک پیام استفاده می‌شود، در واقع متدی از شیء window است و می‌توان آن را به صورت window.alert() نیز فراخوانی کرد.

کد زیر این موضوع را بهتر نشان می‌دهد. متغیری که با var تعریف شده، مستقیماً به شیء window اضافه می‌شود، اما متغیرهای تعریف‌شده با let و const این‌طور نیستند و فقط در حوزه بلاک خود قابل دسترسی‌اند.

JAVASCRIPT

var globalVar = "I'm a global variable";
let blockScopedVar = "I'm a block-scoped variable";

console.log(window.globalVar);     // "I'm a global variable"
console.log(globalVar);          // "I'm a global variable" (no window prefix needed)

console.log(window.blockScopedVar); // undefined

در کد بالا، متغیر globalVar که با کلیدواژه var تعریف شده، به یک پراپرتی روی شیء سراسری window تبدیل می‌شود. به همین دلیل می‌توانیم هم با `window.globalVar` و هم مستقیماً با `globalVar` به آن دسترسی پیدا کنیم. در مقابل، متغیر blockScopedVar که با let تعریف شده، به شیء window اضافه نمی‌شود و تلاش برای دسترسی به آن از طریق window مقدار undefined را برمی‌گرداند.

متدها و پراپرتی‌های پرکاربرد

شیء window دارای پراپرتی‌ها و متدهای فراوانی برای تعامل با پنجره مرورگر است. در ادامه با چند مورد از مهم‌ترین آن‌ها آشنا می‌شویم.

ابعاد پنجره (Viewport)

با استفاده از پراپرتی‌های innerWidth و innerHeight می‌توان به ترتیب عرض و ارتفاع فضای داخلی پنجره مرورگر (که محتوا در آن نمایش داده می‌شود) را به دست آورد.

JAVASCRIPT

const width = window.innerWidth;
const height = window.innerHeight;

console.log(`Current viewport size is ${width}x${height}.`);

این کد عرض و ارتفاع فعلی viewport را با خواندن پراپرتی‌های `window.innerWidth` و `window.innerHeight` دریافت کرده و سپس این مقادیر را در یک رشته‌ی قالب‌بندی‌شده در کنسول چاپ می‌کند. این پراپرتی‌ها برای ساخت وب‌سایت‌های واکنش‌گرا (responsive) بسیار مفید هستند.

باز و بسته کردن پنجره

با متد open() می‌توان یک پنجره یا تب جدید باز کرد و با close() آن را بست. توجه داشته باشید که مرورگرها ممکن است به دلایل امنیتی جلوی باز شدن خودکار پاپ‌آپ‌ها را بگیرند، مگر اینکه این کار در پاسخ به یک تعامل از سوی کاربر (مثل کلیک) انجام شود.

JAVASCRIPT

// Open a new window
let newWindow = window.open('https://google.com', 'newWindow', 'width=500,height=500');

// Close the same window after 3 seconds
setTimeout(() => {
  if (newWindow) {
    newWindow.close();
    console.log('Window closed!');
  }
}, 3000);

در قطعه کد بالا، ابتدا با استفاده از window.open() یک پنجره‌ی جدید به آدرس گوگل با ابعاد مشخص باز می‌کنیم و ارجاع آن را در متغیر newWindow ذخیره می‌کنیم. سپس با setTimeout یک تایمر تنظیم می‌کنیم که پس از ۳ ثانیه، متد close() را روی آن پنجره‌ی جدید فراخوانی کرده و آن را می‌بندد.

دیالوگ‌های تعاملی

سه متد کلاسیک برای نمایش پیام و دریافت ورودی ساده از کاربر وجود دارد:

• alert(message): یک پیام را به کاربر نمایش می‌دهد و یک دکمه OK دارد.
• confirm(question): یک سوال را با دو دکمه OK و Cancel نمایش می‌دهد. اگر کاربر OK را بزند، مقدار true و در غیر این صورت false برمی‌گرداند.
• prompt(question, default): یک سوال را به همراه یک فیلد ورودی متن نمایش می‌دهد. مقداری که کاربر وارد می‌کند را به صورت رشته برمی‌گرداند. اگر کاربر Cancel را بزند، مقدار null برگردانده می‌شود.

این دیالوگ‌ها اجرای کد را تا زمان بسته شدنشان متوقف می‌کنند (modal) و امروزه به دلیل ظاهر نه‌چندان زیبا و تجربه کاربری نامناسب، کمتر در پروژه‌های واقعی استفاده می‌شوند و معمولاً کتابخانه‌های UI کامپوننت‌های بهتری برای این کار ارائه می‌دهند.

در این درس با مفهوم BOM و شیء کلیدی window آشنا شدیم. دیدیم که این شیء به عنوان شیء سراسری در مرورگر عمل می‌کند و متدها و پراپرتی‌های مفیدی برای تعامل با پنجره مرورگر، مانند تغییر ابعاد، باز و بسته کردن پنجره‌ها و نمایش دیالوگ‌های ساده در اختیار ما قرار می‌دهد. در درس بعد، با دو عضو مهم دیگر از شیء window یعنی location و history آشنا خواهیم شد تا یاد بگیریم چگونه آدرس URL صفحه را مدیریت کرده و در تاریخچه مرورگر جابجا شویم.