تعداد بازدید: 301

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 دسترسی به حافظه کوکی در client machine
window.localStorage حافظه قابل استفاده در مرورگر بدون زمان انقضا – no expiration
window.sessionStorage حافظه قابل استفاده در مرورگر بر اساس نشست جاری با زمان انقضا – expiration
window.document درخت المان های صفحه وب جاری یا همان dom document
window.frames اگر در صفحه جاری خود iframe داشته باشید لیست آن را در قالب ارایه بر می گرداند.
window.history تاریخچه مرورگر
window.location لینک درخواست جاری از پنجره فعال
window.navigator اطلاعاتی در رابطه با مرورگر در پنجره جاری
window.screen اطلاعاتی در رابطه با ابعاد صفحه کلاینت بازدید کننده از صفحه وب (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

مطالب مشابه

HTML Element Node

هر سند html از ساختار های مختلفی تشکیل شده است. این ساختار به صورت درختی است و هر قسمت از این ساختار یک موجودیت خاص می...

webpack javascript module bundler

Webpack Module Bundler

وب پک یک ابزار توسعه (Development Tool) از دسته Module Bundler ها است. وب پک امکان تجمیع و پردازش کردن Module های جاوا...

Class in Javascript

class ها یک قابلیت برای تعریف یک سری نوع داده های خاص بر اساس موجودیت های جاری در سیستم است . به طور مثال برای تعریف یک...

اشتراک گذاری :

مدیر وب سایت گنوتک . برنامه نویسی رو با زبان C در هفده سالگی شروع کردم . در حال حاضر به برنامه نویسی php برپایه معماری MVC , HMVC و همچنین سیستم مدیریت محتوای WordPress و فریم ورک محبوب لاراول علاقه مند هستم و دوست دارم اطلاعاتم رو با شما به اشتراک بگذارم.

۰ دیدگاه برای Browser Object Model – BOM

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *