بازگشت به دوره

معرفی BOM

در این فصل به بررسی مفهوم بسیار مهمی در جاوا اسکریپت به نام BOM یا Browser Object Model می‌پردازیم. با استفاده از BOM و امکانات آن، می‌توان با مرورگر ارتباط برقرار کرد. مثلاً می‌توان اطلاعاتی در مورد نوع مرورگر یا نوع سیستم عامل به دست آورد، می‌توان از مرورگر برای زمانبندی کارها کمک گرفت و ... .

در این فصل با این موارد آشنا خواهید شد :  

آشنایی با مفهوم Global Object

در استاندارد ECMAScript شیئی به نام شئ سراسری یا Global Object وجود دارد. این شئ علاوه بر دارا بودن تعداد زیادی متد و خاصیت، تمام متغیرهای سراسری برنامه را نیز در بر می‌گیرد. یعنی هر متغیری که به صورت سراسری تعریف می‌شود، یک خاصیت از شئ سراسری خواهد بود. همچنین هر تابعی که به صورت سراسری تعریف می‌شود نیز، یک متد از شئ سراسری می‌باشد.

همانطور که در فصل اول اشاره شد، پیاده‌سازی‌های مختلفی از ECMAScript در محیط‌های مختلف با نام‌های متفاوت به وجود آمده است. مشهورترین این پیاده‌سازی‌ها JavaScript است که در محیط مرورگرها به کار می‌رود. از انواع دیگر پیاده‌سازی‌های ECMAScript نیز می‌توان به Node.js اشاره کرد که خارج از محیط مرورگر و معمولاً در محیط سرور اجرا می‌شود.

شئ سراسری در تمام محیط‌های اجرای ECMAScript از لحظه‌ی شروع برنامه، تا پایان برنامه وجود دارد. اما نام این شئ و امکاناتی که در اختیار برنامه‌نویس قرار می‌دهد، در محیط‌های مختلف، متفاوت است. البته برخی امکانات پایه‌ای در تمام محیط‌ها در دسترس هستند. اما برخی امکانات دیگر با توجه به محیط اجرا متفاوت هستند.

مثلاً تابع parseInt و یا شئ console، هر دو متعلق به شئ سراسری هستند و در تمام محیط‌های اجرای ECMAScript در دسترس می‌باشند. در واقع تابع parseInt یک متد از شئ سراسری، و شئ console یک خاصیت از شئ سراسری هستند. تابع alert نیز یکی از متدهای شئ سراسری است. اما فقط در محیط مرورگر در دسترس است. و در محیط‌هایی مانند Node.js قابل استفاده نیست.

در محیط Node.js نام شئ سراسری global است. اما در محیط مرورگر شئ سراسری window نام دارد. یعنی تمام متغیرها، ثابت‌ها، توابع و اشیائی که در حوزه‌ی سراسری تعریف می‌شوند، متعلق به شئ window هستند. مثال زیر این موضوع را بهتر نشان می‌دهد.


var x = 10;
var y = 20;
console.log(window.x);
← 10
window.console.log(y);
← 20

در این مثال دو متغیر x و y به صورت سراسری تعریف و مقداردهی شده‌اند. همانطور که مشاهده می‌کنید برای دسترسی به متغیر x می‌توان از window.x استفاده کرد. همچنین برای دسترسی به شئ console می‌توان از window.console استفاده کرد. در واقع تمام اشیاء و توابعی که به صورت سراسری در برنامه‌های جاوا اسکریپت در دسترس هستند، متعلق به شئ window می‌باشند.

نکته : متغیرهای سراسری که با کلمات کلید let یا const تعریف می‌شوند، به عنوان خاصیت‌های شئ window در دسترس نخواهند بود.

پیش از این نیز با تعداد زیادی از خاصیت‌ها و متدهای شئ window آشنا شده‌ایم. مانند اشیاء Math، RegExp یا Date که خاصیت‌های شئ window هستند و یا توابعی مانند alert، parseFloat یا parseInt که متدهای شئ window هستند. همچنین ثابت‌هایی مانند NaN و Infinity نیز خاصیت‌هایی از شئ window  هستند. البته معمولاً برای دسترسی به این موارد از نام شئ window قبل از نام آنها استفاده نمی‌کنیم. مثلاً به جای نوشتن window.alert، فقط از نام alert استفاده می‌کنیم. اما باید این نکته را همیشه به یاد داشته باشید که در جاوا اسکریپت تمام توابع، ثابت‌ها و اشیاء پیش‌ساخته (Built-in)، متعلق به شئ window هستند و همیشه می‌توان از طریق این شئ به آنها دسترسی داشت.

همچنین لازم به ذکر است که در هر نقطه‌ای از برنامه (حتی داخل توابع و بلاک‌ها) می‌توان خاصیت‌ها و متدهای جدیدی را به شئ window اضافه کرد. مثلاً در برنامه‌ی زیر خاصیت x و متد y به شئ window اضافه می‌شوند. بنابراین در هر نقطه‌ای از برنامه می‌توان از x و y استفاده کرد، زیرا متعلق به شئ widnow هستند و حوزه‌ی سراسری دارند.


function example(){
	window.x = 10;
	window.y = function(){
		console.log('Hello World');
	}
}
example();
console.log(x);
← 10
y();
← "Hello World"

همچنین متغیرهایی که بدون استفاده از یکی از کلمات کلیدی let یا const یا var تعریف می‌شوند نیز متعلق به شئ window هستند و حوزه‌ی سراسری دارند (حتی اگر داخل توابع و بلاک‌ها تعریف شوند). مثلاً در برنامه‌ی زیر متغیر x بدون استفاده از این کلمات کلیدی و در حوزه‌ی یک تابع تعریف شده است. اما در خارج از تابع نیز می‌توان به آن دسترسی داشت.


function example(){
	x = 10;
}
example();
console.log(x);
← 10
console.log(window.x);
← 10
 

مفهوم BOM

BOM یا Browser Object Model یک مدل انتزاعی برای برقراری ارتباط بین مرورگر و جاوا اسکریپت است. در این مدل، مرورگر به عنوان یک شئ جاوا اسکریپت مدل‌سازی می‌شود که از طریق این شئ (همان شئ window) می‌توان به بسیاری از امکانات مرورگر دسترسی داشت.

مثلاً می‌توان از دیالوگ‌های سیستمی (System Dialogs) برای نمایش پیام به کاربر و یا پرسیدن سوال از کاربر استفاده کرد. و یا با استفاده از متد print می‌توان پنجره‌ی چاپ را به کاربر نمایش داد. همچنین می‌توان اطلاعاتی را در مورد نوع مرورگر و یا نوع سیستم عامل کاربر به دست آورد و ... .

پس به عنوان جمع‌بندی می‌توان این تعریف را در مورد دو مفهوم مدل BOM و شئ سراسری و رابطه‌ی آنها با شئ window بیان کرد.

در ECMAScript شیئی به نام شئ سراسری وجود دارد که خاصیت‌ها و متدهای مفید زیادی دارد. مانند شئ Math و شئ Date که از خاصیت‌های شئ سراسری هستند و همچنین توابع parseInt و parseFloat که از متدهای شئ سراسری هستند. علاوه بر این تمام توابع سراسری که به صورت Function Declaration تعریف می‌شوند و یا با کلمه‌ی کلیدی var به صورت Function Expression تعریف می‌شوند متعلق به شئ سراسری (Global Object) هستند. یعنی متدهای شئ سراسری هستند. همچنین تمام متغیرهایی که به صورت سراسری و با کلمه‌ی کلیدی var تعریف می‌شوند، خاصیت‌هایی از شئ سراسری خواهند بود. این شئ در جاوا اسکریپت با نام window شناخته می‌شود. ولی در سایر پیاده‌سازی‌های ECMAScript می‌تواند نام‌های دیگری داشته باشد.

شئ window علاوه بر ایفا کردن نقش شئ سراسری در جاوا اسکریپت. به عنوان رابط بین جاوا اسکریپت و مرورگر نیز عمل می‌کند و از طریق این شئ می‌توان به بسیاری از امکانات مرورگر دسترسی داشت. این بخش از امکانات شئ window در جاوا اسکریپت با عنوان BOM یا Browser Object Model شناخته می‌شود.

این فصل به بررسی BOM و امکانات آن اختصاص دارد. اما لازم بود تا قبل از وارد شدن به جزئیات BOM، با مفهوم شئ سراسری نیز آشنا شوید. در ادامه‌ی این فصل به مرور با بسیاری از امکانات BOM آشنا خواهید شد.