BOM قابلیت‌هایی است که مرورگر در اختیار برنامه نویسان می‌گذارد و خلاصه عبارت Browser Object Model می‌باشد. در این پست به بررسی این موضوع می‌پردازیم.
شی window بالاترین مرتبه اشیاء در جاوا اسکریپت است که حتی document نیز جزئی از آن محسوب می‌شود. شی window شامل عناصری است که می‌توان روی BOMها عملیات انجام داد.
برای مشاهده کل اجزای window در کنسول عبارت window را تایپ کرده و انتر بزنید.
یکی از امکانات BOM مدیریت زمان است. می‌توان با متد setTimeout دستور خاصی را پس از سپری شدن زمانی معین اجرا کرد. مثال زیر را ببینید:
function message(){
alert("run after 5 Seconds!");
}
setTimeout(message, 5000);متد setTimeout دو ورودی می‌گیرد، اولی دستورات و دومی مقدار زمان به میلی ثانیه. بنابراین پس از 5 ثانیه از لود شدن صفحه پنجره PopUp نمایش داده می‌شود.
البته مثال فوق را به شکل زیر نیز می‌توان باز نویسی کرد که تفاوتی در نتیجه ندارد:
setTimeout(function(){
alert("run after 5 Seconds!");
}, 5000);توجه کنید که در بالا تابع نیازی به نام ندارد.
متد setInterval
این متد ورودی‌هایی مشابه متد setTimeout دارد با این تفاوت که عملیات مورد نظر را مکررا تا بی نهایت انجام می‌دهد. مثال زیر را ببینید:
setInterval(function(){
console.log("Hi from Hitos.ir");
}, 1000);دستور فوق هر یک ثانیه دستور Hi from Hitos.ir را نمایش می‌دهد.
البته می‌توان این متد را با شرایطی متوقف کرد. مثلا:
<html>
<head></head>
<body>
<button>STOP interval</button>
<script>
var interval;
interval = setInterval(function(){
console.log("Hi from Hitos.ir");
}, 1000);
var btn = document.getElementsByTagName('button');
btn[0].onclick= function(){
clearInterval(interval);
};
</script>
</body>
</html>در سطر 6 یک متغیر با نام interval ایجاد نمودیم.
در سطر 7 متد setInterval را درون متغیر تعریف شده در سطر قبل قرار دادیم. با اجرا شدن متد setInterval هر یک ثانیه یکبار متن مشخص شده در console نمایش داده می‌شود.
در سطر 11 یک متغیر از کلید button ایجاد کردیم.
در سطر 12 بدلیل آرایه بودن متغیر عنصر صفرم آن را برای رویداد onclick آماده می‌کنیم. درون متد با clearInterval متد setInterval را با ذکر نام متغیر مخصوص به خود متوقف می‌کنیم.
location در javascript
location نیز زیر مجموعه شیء سراسری window می‌باشد. location را در console وارد کرده و اجزاء آن را مشاهده کنید.
می توانیم با متد href صفحه جاری را به آدرس جدیدی انتقال داد:
location.href= "http://hitor.ir";البته می‌توان مثلا تنها پورت را عوض کرد که این کار با دستور زیر امکان پذیر است:
location.port= "808";شیء screen
این شی خصوصیاتی از صفحه نمایش دستگاه کاربر به شما می‌دهد. این دستور را در ابزار کنسول وارد کنید و خروجی را مشاهده کنید.
متد open
این متد برای باز کردن یک آدرس در تب جدید استفاده می‌شود. مثال زیر سایت هیتوس را در یک تب جدید برای شما باز می‌کند:
open('https://hitos.ir');حالت پیچیده تر این متد به شکل زیر است:
open('https://hitos.ir', '', 'height=100,width=100').moveTo(900,900);در بالا متد open سه ورودی دارد که ورودی اول همان آدرس، ورودی دوم را خالی می‌گذاریم و در ورودی سوم طول و عرض را برای پنجره جدید می‌دهیم.
با moveTo نقطه‌ای که قصد داریم پنجره جدید در آن جا باز شود را مشخص می‌کنیم.
موقعیت مکانی کاربر
برای دریافت موقعیت مکانی کاربر از امکانات BOM مرورگر می‌توان استفاده کرد. اگر قصد دریافت اطلاعات موقعیت مکانی کاربر را دارید یک پنجره PopUp به کاربر نشان داده می‌شود که از او برای دریافت اطلاعات اجازه کسب می‌شود. اگر کاربر این اجازه را ندهد شما نمی‌توانید اطلاعات جغرافیایی او را مشاهده کنید.
مثال زیر را ببینید:
navigator.geolocation.getCurrentPosition(function(position){
console.log("latitude: " + position.coords.latitude + " longitude: " + position.coords.longitude);
}, function(){
console.log("blocked!");
}) در سطر اول و به ترتیب از اشیاء navigator.geolocation.getCurrentPosition استفاده نموده که ورودی آن دو تابع است.
تابع اول موقعیت مکانی را می‌دهد و تابع دوم عکس العمل شما در صورت block کردن کاربر را شامل می‌شود.
تابع اول یک ورودی به نام position دارد که با متدهای coords.latitude و coords.longitude طول و عرض جغرافیایی را به ما می‌دهند.
تابع دوم هم به سادگی عبارت blocked را در کنسول نمایش می‌دهد.