Browser Object Model (بررسی شی Window) جاوا اسکریپت

Browser Object Model

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

شیء window که توسط تمام مروگر ها پشتیبانی می شود، نماینده ی پنجره ی مرورگر شما است و شاید مهم ترین و ریشه ای ترین قسمت در BOM است. تمام اشیاء، توابع و متغیرهای سراسری به صورت خودکار عضوی از شیء window خواهند شد؛ بنابراین می توان گفت متغیرهای سراسری خصوصیات شیء window بوده و توابع سراسری نیز متدهای آن محسوب می شوند.

حتی خود شیء سند HTML یا همان DOM نیز جزئی از BOM محسوب می شود چرا که داخل آن قرار دارد (سند HTML هر طور که باشد داخل مرورگر باز می شود) بنابراین می توان گفت این کد:

window.document.getElementById("header");

برابر با کد زیر است:

document.getElementById("header");

سایز پنجره ی مرورگر

دو مورد از خصوصیات جالب، innerHeight و innerWidth هستند که از طریق آن ها می توانیم سایز پنجره ی مرورگر یک کاربر را پیدا کنیم. هر دوی این خصوصیات سایز پنجره را در واحد پیکسل بر می گردانند:

window.innerHeight : ارتقاع داخلی پنجره را اندازه می گیرد (به پیکسل)
window.innerWidth : عرض داخلی پنجره را اندازه می گیرد (به پیکسل)

نکته: شیء window شامل اسکرول بار و نوار ابزار بالای صفحه نمی شود.

برای مرورگر Internet Explorer نسخه های 8, 7, 6, 5 می گوییم:

document.documentElement.clientHeight
document.documentElement.clientWidth
یا
document.body.clientHeight
document.body.clientWidth

برای اینکه راه حلی برای تمام مرورگرها پیدا کنیم که برای همه ی آن ها کار کند می توانیم از کد زیر استفاده کنید:

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

var x = document.getElementById("demo");
x.innerHTML = "Browser inner window width: " + w + ", height: " + h + ".";
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

این مثال ارتفاع و عرض پنجره ی مرورگر شما را نشان می دهد که شامل اسکرول بار و نوار ابزار نمی شود.

همچنین متدهایی نیز وجود دارند که چند نمونه از آن ها را در اینجا می بینید:

()window.open: برای باز کردن یک پنجره ی جدید
()window.close: برای بستن پنجره ی فعلی
()window.moveTo: برای جا به جا کردن پنجره ی فعلی
()window.resizeTo: برای تغییر سایز پنجره ی فعلی

شیء window.screen

شیء window.screen اطلاعاتی را درباره ی صفحه ی کاربر (صفحه ی موبایل یا کامپیوتر و ...) در اختیار ما می گذارد و می توان از آن بدون window استفاده کرد. این شیء دارای خصوصیات زیر است:

screen.width
screen.height
screen.availWidth
screen.availHeight
screen.colorDepth
screen.pixelDepth

ما می خواهیم تک تک این خصوصیات را بررسی کنیم.

`screen.width`

این خصوصیت اندازه ی عرض صفحه ی کاربر را به پیکسل به ما می دهد. به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"Screen width is " + screen.width;
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

`screen.height`

این خصوصیت اندازه ی ارتفاع صفحه ی کاربر را به پیکسل به ما می دهد. به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"Screen height is " + screen.height;
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

نکته: توجه داشته باشید که این اعداد (چه عرض و چه ارتفاع) مربوط به صفحه ی نمایش کاربر (Display) آن هستند بنابراین ربطی به اندازه ی مرورگر کاربر نداشته و با تغییر سایز مرورگر این اعداد تغییر نخواهند کرد.

`screen.availWidth`

قسمت "availWidth" در این خصوصیت مخفف Available Width و به معنای «عرض موجود» است. در واقع این خصوصیت اندازه ی عرض نمایشگر کاربر را به شما برمیگرداند با این تفاوت که اندازه ی خصوصیات رابط کاربری (مانند Windows Taskbar - به فارسی: نوار وظیفه) را از آن کم می کند و بنابراین عرض موجود را به ما می دهد:

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"Available screen width is " + screen.availWidth;
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

نکته: از آنجا که در عرض صفحه ی اکثر کاربران ویژگی های interface مانند task bar وجود ندارند، این مقدار معمولا با screen.width یکی در می آید.

`screen.availHeight`

این خصوصیت اندازه ی ارتفاع نمایشگر کاربر را به شما برمیگرداند با این تفاوت که اندازه ی خصوصیات رابط کاربری (مانند Windows Taskbar - به فارسی: نوار وظیفه) را از آن کم می کند و بنابراین ارتفاع موجود را به ما می دهد:

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"Available screen height is " + screen.availHeight;
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

از آنجا که Task Bar (نوار وظیفه یعنی همان نواری که پایین صفحه قرار دارد و منوی استارت ویندوز در سمت چپ آن و ساعت ویندوز در سمت راست آن می باشد) در پایین صفحه ی اکثر کاربران موجود است، این مقدار معمولا از مقدار screen.height کمتر می شود.

`screen.colorDepth`

این خصوصیت میران «عمق رنگ» صفحه نمایش کاربر را به ما نشان می دهد. عمق رنگ (به انگلیسی: Color depth) یا عمق بیت در گرافیک رایانه‌ای به تعداد بیت‌هایی گفته‌می شود که برای نمایش هر رنگ در هر پیکسل استفاده می‌شود.

تمام کامپیوتر های امروزی از سخت افزار 24 یا 32 بیتی رنگ استفاده می کنند. همچنین باید بدانید که:

سیستم هایی که از سخت افزار 24 بیتی استفاده می کنند، 16,777,216 رنگ را نمایش می دهند که به True Colors یا رنگ های واقعی معروف اند.
سیستم هایی که از سخت افزار 32 بیتی استفاده می کنند، 4,294,967,296 رنگ را نمایش می دهند که به Deep Colors یا رنگ های عمیق معروف اند.

در سیستم های قدیمی این مقدار معمولا 16 بیت است که 65,536 رنگ به نام High Colors را نشان می دهد.

کامپیوتر های بسیار قدیمی و تلفن های همراه بسیار قدیمی از 8 بیت استفاده می کنند که شامل 256 رنگ به نام VGA colors هستند.

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"Screen color depth is " + screen.colorDepth;
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

نکته: مقادیر رنگی rrggbb که در زبان HTML استفاده می شوند از نوع True Colors (یعنی 16,777,216 تعداد رنگ) هستند.

`screen.pixelDepth`

این خصوصیت pixel depth یا عمق پیکسلی صفحه نمایش کاربر را نشان می دهد. مثال:

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"Screen pixel depth is " + screen.pixelDepth;
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

نکته: در کامپیوتر های امروزی Color Depth (عمق رنگی) و Pixel Depth (عمق پیکسلی) یکی هستند.

امیدوارم از این قسمت لذت برده باشید.