Bom چیست؟ Browser Object Model یا BOM در جاوا اسکریپت مجموعه‌ای از اشیاء یا آبجکت‌هاست که توسط مرورگر ارائه می‌شود و به جاوا اسکریپت اجازه می‌دهد با پنجره مرورگر، سند و دیگر قابلیت‌های خاص مرورگر تعامل داشته باشد. BOM مواردی از قبیل Window، Navigator، Location، History و Screen را در بر می‌گیرد و دارای چندین ویژگی و متد مختلف است.
اما Dom چیست؟ در جاوا اسکریپت یک آبجکت مدل دیگر به نام DOM نیز وجود دارد که با BOM متفاوت بوده اما به دلیل تشابه اسمی، تمایز آن‌ها از همدیگر می‌تواند کمی دشوار باشد. اگر قصد دارید کار با BOM و DOM را یاد بگیرید و درباره این مفهوم بیشتر بدانید، این مقاله را از دست ندهید!
آشنایی با BOM در جاوا اسکریپت
BOM یک قرارداد خاص مرورگر است که به تمام آبجکت‌هایی که توسط مرورگر وب ارائه می‌شوند، اشاره دارد. BOM به جاوا اسکریپت اجازه می‌دهد تا با مرورگر تعامل داشته باشد. آبجکت window نمایانگر یک پنجره مرورگر و همه ویژگی‌های مربوط به آن است که به‌طور خودکار توسط خود مرورگر ایجاد می‌شود. آبجکت window.screen نیز در جاوا اسکریپت اطلاعات مربوط به صفحه نمایش کاربر را در بر می‌گیرد.
همچنین می‌توان آن را بدون پیشوند window نیز نوشت. پراپرتی‌های این آبجکت عبارتند از موارد زیر که کاربرد هرکدام را با مثال توضیح داده‌ایم:
- screen.width: عرض صفحه نمایش کاربر بر حسب پیکسل
<p id="GFG"></p> <script> document.getElementById("GFG").innerHTML = " The Screen width is " + screen.width; </script> |
خروجی:
The Screen width is 1600
- screen.height: طول صفحه نمایش کاربر بر حسب پیکسل
document.getElementById("GFG").innerHTML = " The screen height is " + screen.height; خروجی:
The screen height is 900
- screen.availWidth: عرض صفحه نمایش کاربر بر حسب پیکسل، منهای ویژگی‌های رابط کاربری
document.getElementById("GFG").innerHTML = "The available screen width is " + screen.availWidth; خروجی:
The available screen width is 1549
- screen.availHeight: طول صفحه نمایش کاربر بر حسب پیکسل، منهای ویژگی‌های رابط کاربری
document.getElementById("GFG").innerHTML = "The available screen height is " + screen.availHeight; خروجی:
The available screen height is 876
- screen.colorDepth: نشان‌دهنده تعداد بیت‌هایی که برای نمایش یک رنگ مورد نیاز هستند. به طور معمول، سخت‌افزار ۲۴ یا ۳۲ بیتی برای وضوح رنگ مورد استفاده قرار می‌گیرد. ۲۴ بیت مساوی است با ۱۶۷۷۷۲۱۶ رنگ واقعی (True Color) و ۳۲ بیت مساوی است با ۴۲۹۴۹۶۷۲۹۶ رنگ عمیق (Deep Color).
document.getElementById("GFG").innerHTML = "The screen color depth is " + screen.colorDepth; |
خروجی:
The screen color depth is 24
- screen.pixelDepth: نشان‌دهنده عمق پیکسل یا عمق رنگ.
document.getElementById("GFG").innerHTML = "The screen pixel depth is " + screen.pixelDepth; خروجی:
The screen pixel depth is 24
در ادامه لیستی از مرورگرهایی که از BOM در جاوا اسکریپت پشتیبانی می‌کنند را آورده‌ایم:
- Google Chrome ۱ و بالاتر
- Edge ۱۲ و بالاتر
- Firefox ۱ و بالاتر
- Internet Explorer ۴ و بالاتر
- Opera ۱۲.۱ و بالاتر
- Safari ۱ و بالاتر
تفاوت DOM و BOM در جاوا اسکریپت چیست؟
DOM در جاوا اسکریپت یک Object model دیگر است که به دلیل تشابه اسمی با BOM در جاوا اسکریپت، می‌تواند برای برخی افراد گیج‌کننده باشد. اکنون که می‌دانید Bom چیست، بیایید با تفاوت dom و bom آشنا شویم. Document Object Model (DOM) یک رابط برنامه نویسی برای اسناد HTML و XML و به طور کلی فرم در جاوا اسکریپت است که امکان ایجاد، دستکاری یا حذف عناصر از سند را فراهم کرده و ساختار منطقی اسناد و نحوه دسترسی و دستکاری یک سند را تعریف می‌کند.
با کمک DOM، می‌توان صفحه وب را در یک سلسله مراتب ساختاریافته نشان داد، یعنی به راحتی می‌توانیم به تگ‌ها، شناسه‌ها، کلاس‌ها، ویژگی‌ها یا عناصر HTML با استفاده از دستورات یا روش‌های ارائه‌شده توسط آبجکت Document دسترسی داشته باشیم و آن‌ها را دستکاری کنیم. این امر باعث می‌شود در آموزش برنامه نویسی، برنامه‌نویسان و کاربران بتوانند سند را به روشی ساده‌تر درک کنند.
HTML برای ساختار صفحات وب و Javascript برای افزودن ویژگی‌های رفتاری به صفحات وب به کار می‌رود. هنگامی که یک فایل HTML در مرورگر بارگذاری می‌شود، جاوا اسکریپت نمی‌تواند به طور مستقیم سند HTML را درک کند. بنابراین، یک سند Dom ساخته می‌شود که اساساً نشانگر همان سند HTML است اما در قالبی متفاوت با استفاده از Browser object.
در جدول زیر، بررسی خواهیم کرد که مفهوم dom در جاوا اسکریپت چه تفاوت‌هایی با BOM در جاوا اسکریپت دارد:
| Browser Object Model (BOM) | Document Object Model (DOM) |
| عمدتاً بر روی عملکرد مرورگر تمرکز دارد. | عمدتاً بر ساختار سند نمایش‌داده‌شده تمرکز دارد. |
| اجازه می‌دهد تا جاوا اسکریپت فراتر از محدوده دستکاری ساختار سند، با ویژگی‌های مرورگر تعامل داشته باشد. | یک رابط استاندارد برای دسترسی و اصلاح عناصر و محتوای یک سند HTML یا XML فراهم می‌کند. |
| آبجکت Window به طور خودکار توسط مرورگر ایجاد می‌شود. | هنگامی که یک سند HTML در مرورگر بارگذاری می‌شود، به یک آبجکت سند تبدیل می‌شود. |
| کارکردهای مختلف را برای کنترل Window مرورگر، مدیریت Navigation، مدیریت History و دسترسی به اطلاعات مربوط به مرورگر تسهیل می‌کند. | دسترسی و دستکاری، همراه با به روز رسانی پویا ساختار، محتوا و استایل سند وب را تسهیل می‌کند. |
| مستقیماً به محتوای سند وب دسترسی ندارد. | کنترل دسترسی مستقیم به محتوای سند وب را همراه با پیمایش و اصلاح عناصر و ویژگی‌های آن فراهم می‌کند. |
پراپرتی Screen Width در HTML DOM جاوا اسکریپت
ویژگی یا پراپرتی Screen width برای نشان دادن کل عرض صفحه کاربر استفاده می‌شود. این پراپرتی، عرض کل صفحه را بر حسب پیکسل نشان می‌دهد. در مثال زیر می‌توانید یک نمونه از پراپرتی Screen width را مشاهده کنید:
<!DOCTYPE html> <html> <body style="text-align: center;"> <div> <h1 style="color: green;"> GeeksforGeeks </h1> <p>Click on the button to see image</p> <img id="image"> </div> <button type="button" onclick="show()" id="btnID"> Show Image </button> <script> function show() { let image = document.getElementById("image"); image.src = "https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3.png" document.getElementById("btnID") .style.display = "none"; } </script> </body> </html>خروجی قبل از کلیک بر روی دکمه:
خروجی بعد از کلیک بر روی دکمه:
مزایا و معایب BOM در جاوا اسکریپت
اما آیا می‌دانید استفاده از BOM در جاوا اسکریپت چه مزایا و معایبی به همراه دارد؟ در ادامه به بررسی این موارد خواهیم پرداخت:’
مزایا:
از مزایای BOM در جاوا اسکریپت می‌توان گفت:
- تعامل با کاربر: BOM به وب‌سایت‌ها اجازه می‌دهد تا هشدارها، اعلان‌ها و تأییدیه‌ها را نشان دهند و آن‌ها را تعاملی‌تر سازند.
- کنترل Navigation: BOM همچنین با استفاده از ابزارهایی مانند “history”، به مدیریت عملیات عقب یا جلو رفتن در تاریخچه مرورگر کمک می‌کند.
- جزئیات مرورگر: BOM اطلاعات مربوط به مرورگر شما را از طریق ابزار “Navigator” ارائه می‌دهد و به تنظیم محتوا برای مرورگرها و سیستم‌های مختلف کمک می‌کند.
- مدیریت Location: BOM با استفاده از ابزار “location” به وب سایت‌ها اجازه می‌دهد آدرس‌های وب را برای پویاتر کردن محتوا و ریدایرکت شدن آسان تغییر دهند.
معایب:
اما استفاده BOM در جاوا اسکریپت، معایبی هم دارد؛ از جمله:
- سازگاری مرورگر: ممکن است در مرورگرهای مختلف متفاوت عمل کند و باعث بروز مشکل شود.
- نگرانی‌های امنیتی: برخی از ویژگی‌های BOM، مانند پنجره‌های پاپ‌آپ، ممکن است توسط افراد سودجو مورد سوء استفاده قرار گیرند.
- وابستگی سمت کلاینت: BOM به شدت به سمت کلاینت متکی است، بنابراین بر عملکرد تأثیر می‌گذارد.
- استانداردسازی محدود: فاقد مشخصات استانداردشده است که منجر به تغییرات در اجرا می‌شود.
