Browser Object Model – BOM
هر محیط اجرای جاوا اسکریپت شامل یک شئ global است که برنامه در آن جریان دارد . این شئ در جاوا اسکریپت بسته به نوع محیط متفاوت است . در محیط مرورگر به آن BOM یا Browser Object Model می گوییم. جاوا اسکریپت می تواند در محیط های متفاوت (Browser Environment , Node Environment …)اجرا گردد. در سرور های node js این شئ global نام دارد.
برای دسترسی به این شئ از window استفاده می کنیم. متغیر های تعریف شده در main scope همان property های این شئ هستند و توابع تعریف شده نیز method های این شئ می باشند.
این شئ شامل اطلاعات سند صفحه وب جاری (Dom) می باشد. به طوری که با دسترسی به window.document می توانیم به این ساختار دسترسی داشته باشیم. برای کوتاه کردن کد ها به جای window.document می توان از document استفاده کرد. و همچنین به جای فراخوانی توابع به صورت متد مترجم می تواند توابع را به صورت عادی تفسیر کند.
محیط اجرای مرورگر را Browser Environment می گوییم که شئ window همان حافظه جاری در برنامه شماست که در مرورگر اجرا می کنید.برای همین شما در حین اجرای کد در مرورگر علاوه بر اطلاعات صفحه وب به حافظه مرورگر نیز (حافظه RAM دستگاه سیستم عامل جاری ) استفاده می کنید. window شامل اطلاعات زیر است:
- Properties and Methods – توابع و متغیر هایی که در main scope تعریف شده است.
- Browser Storage – کار با حافظه cookie , local storage , session storage در مرورگر
- Browser History – اطلاعات در رابطه با تاریخچه درخواست ها در مرورگر
- Browser window (screen , frame , navigator …) – اطلاعات لازم در رابطه با پنجره یا تب جاری مرورگر
- Browser Location – اطلاعات در رابطه با درخواست جاری و لینک و پارامتر های آن
- Browser Document – همان درخت جاری صفحه وب
Browser Properties and Methods
شئ window یک سری متغیر ها و متد های جاری در سیستم را دارد . متغیر ها و توابعی که شما در main scope خود تعریف می کنید نیز به این لیست اضافه می گردد. به طور مثال :
var name = 'abolfazl' window.name "abolfazl" function hello(){ console.log('hello dear') } window.hello()
جایگاه متغیر this
به طور کلی جایگاه کلمه کلیدی this بر اساس این که در کدام scope قرار گرفته است تعیین می شود . به طور مثال اگر در یک object باشد به همان object اگر در یک متد از یک کلاس باشد به شئ که از آن کلاس ساخته شده و در برنامه جریان دارد اشاره می کند.همچنین در main scope می توان گفت که کلمه کلیدی this برابر همان window است .
var name='abolfazl' console.log(this.name) console.log(window.name) function hello(){ console.log(this.name) }
در تابع بالا this مربوط به متدی است که شئ مربوطه قرار گرفته است . همان طور که می دانید توابع main scope در BOM می باشند که همان window است . پس در نتیجه می توان گفت که this در تابع برابر window است.
var name='abolfazl' var welcome = { name: 'reza', hello: function(){ console.log('hello ' + this.name) } } function hello(){ console.log('hello ' + name) } welcome.hello() //hello reza hello() //hello abolfazl
در مثال بالا this اول مربوط به شئ welcome است و this دوم مربوط به window است.
تعریف متغیر global
برای تعریف یک متغیر جهانی در جریان برنامه در هر scope که هستید می توان با شئ window این کار را انجام داد.
window.name = 'abolfazl'
در مثال بالا اگر در main scope هستید می توانید با استفاده از نام متغیر آن را فراخوانی کنید. اگر در scope داخلی یک متد یا یک شئ هستید ممکن است یک متغیر محلی درهمنام با متغیر شما در آن scope باشد برای همین برای جلوگیری از بروز خطا از کلمه کلیدی window برای این متغیر استفاده کنید. این الزامی نیست اما یک Best practice است.
window.name='ali' welcome = { hello: function(){ console.log('hello ' + name) } } welcome.hello() //hello ali
Window Default Properties
شئ جهانی window به صورت پیش فرض نیز یک سری property در خود دارد . این موارد در محیط اجرایی مرورگر Browser Environment وجود دارد. این property ها می تواند یک ساختمان داده ثانویه مهم در رابطه با درخواست جاری یا اطلاعات خاص از مرورگر باشد.
window.Cookies | دسترسی به حافظه کوکی در |
window.localStorage | حافظه قابل استفاده در مرورگر بدون زمان انقضا – no expiration |
window.sessionStorage | حافظه قابل استفاده در مرورگر بر اساس نشست جاری با زمان انقضا – expiration |
window.document | درخت المان های صفحه وب جاری یا همان dom document |
window.frames | اگر در صفحه جاری خود iframe داشته باشید لیست آن را در قالب ارایه بر می گرداند. |
window.history | تاریخچه مرورگر |
لینک درخواست جاری از پنجره فعال | |
window.navigator | اطلاعاتی در رابطه با مرورگر در پنجره جاری |
اطلاعاتی در رابطه با ابعاد صفحه کلاینت بازدید کننده از صفحه وب (visitor’s screen) |
Window Default Methods
علاوه بر این که زمانی که یک تابع تعریف می کردیم عملا یک متد به شئ window اضافه می کردیم این شئبه صورت پیش فرض یک سری توابع دارد که گاهی برای کوتاه تر شده کد به صورت تابع استفاده می کنیم . به طور مثال console , confirm , parseInt ,…
Dialog | لیست توابعی که برای پاپ آپ استفاده می شود به طور مثال alert, confirm, prompt |
Console | نمایش حالت های مختلف (log , error , warning , table ) اطلاعات در console. |
Window | توابعی برای کار کردن با پنجره ها . مثلا باز کردن بستن و فوکوس کردن و سایر موارد مربوط به پنجره ها ,open , close , focus , blur ,moveTo |
Encryption | توابع مربوط به رمز نگاری مثل atob, btoa |
Interval | مدیریت وقفه زمانی در پروسه ها مثل setInterval , setTimeout , clearTimeout , clearInterval |
Type Casding | توابع مربوط به تبدیل نوع اعداد مثل parsInt , parsFloat |
دیدگاهتان را بنویسید