توضیح BOM در جاوا اسکریپت – به زبان ساده

۶۴۲ بازدید
آخرین به‌روزرسانی: ۱۷ بهمن ۱۴۰۲
زمان مطالعه: ۲۷ دقیقه
دانلود PDF مقاله
توضیح BOM در جاوا اسکریپت – به زبان سادهتوضیح BOM در جاوا اسکریپت – به زبان ساده

BOM در جاوا اسکریپت مخفف «Browser Object Model» است و اشیا و متدهایی را برای تعامل با پنجره مرورگر ارائه می‌کند. BOM مانند DOM (مدل شی سند) استاندارد نیست و بین مرورگرها متفاوت است. شی «پنجره» (Window) عنصری کلیدی در مدل شی مرورگر BOM در جاوا اسکریپت بوده که نمایانگر پنجره مرورگر یا قاب حاوی صفحه وب است. این پنجره امکان دسترسی به ویژگی‌ها، متدها و رویدادهایی را فراهم می‌کند که توسعه‌دهندگان را قادر می‌سازد تا با مرورگر تعامل برقرار کرده و پنجره را کنترل کنند. هدف از این مطلب آموزشی از مجله فرادرس ارائه توضیحاتی واضح و ساده از شی پنجره جاوا اسکریپت و نقش آن در مدل شی مرورگر برای افراد مبتدی است.

فهرست مطالب این نوشته
997696

در مطلب پیشِ رو اطلاعاتی کامل از مفهوم BOM در Javascript ارائه خواهد شد و در کنار آن مفهوم شی پنجره، مثال‌هایی از شی Windowو BOM، شی پنجره و فریم با مدل BOM، سایز پنجره، ناوبری پنجره و پاپ آپ، «Interval و Timeout»، ابزارهای دیالوگ، سیستم شی مکان در جاوا اسکریپت، شی ناوبری و ارتباط آن با مدل BOM، شی تاریخچه در جاوا اسکریپت و غیره همراه با مثال های عملی ارائه خواهد شد.

BOM در جاوا اسکریپت چیست؟

به زبانی ساده BOM در جاوا اسکریپت مجموعه‌ای از ابزارهایی است که به وسیله مرورگر برای جاوا اسکریپت برای ارتباط با پنجره مرورگر، سند و سایر ویژگی‌های خاص مرورگر ارائه می‌شود. BOM از اشیایی مانند «Window» ،«Navigator» ،«Location» ،«History» و «Screen» تشکیل شده است. شی Window را باید به عنوان نقطه شروع در BOM در نظر گرفت که به کاربر امکان دسترسی به سایر ابزارهای موجود در آن را می‌دهد.

پنجره مرورگر، جایی بوده که کاربران وب‌سایت‌ها را می‌بینند و در اصل مانند مدیری است که کارهای نظارت را بر عهده دارد. این شی پنجره را می‌توان با سه چیز اصلی کنترل و مدیریت کرد: (DOM) «مدل شی سند»، (BOM) «مدل شی مرورگر» و ابزارهای جاوا اسکریپت مانند اشیا، آرایه‌ها و توابع. حال تصور بر این است شی پنجره دارای شاخه‌هایی است. این شاخه‌ها مرجع‌هایی در جاوا اسکریپت هستند که به ما در انجام کارهای مختلف کمک می‌کنند.

مدل شی مرورگر یا همان BOM در جاوا اسکریپت مانند جعبه ابزاری پر از ابزارهای ارائه شده به وسیله مرورگرها است. این ابزارها به ما کمک می‌کنند کارهای جالبی مانند مدیریت بخش‌های مختلف مرورگر، رسیدگی به درخواست‌های سرور و دانستن آدرس وب فعلی انجام دهیم. BOM دقیقاً به وسیله «ECMAScript» (گروهی که قوانین جاوا اسکریپت را تنظیم می‌کند) استاندارد نشده اما بخش مهمی از جاوا اسکریپت است. در قلب BOM شی پنجره قرار دارد. این پنجره هسته اصلی مرورگر است که همه‌چیز را در مرورگر به جز محتوای واقعی صفحه نشان می‌دهد. همه‌چیز در اینجا منظور مواردی مانند مکان کاربر در وب (موقعیت مکانی)، سابقه مرور کاربر و فریم‌ها و غیره است. همه‌چیز در مرورگر به این شی پنجره متصل است.

شی پنجره در جاوا اسکریپت چیست؟

شی پنجره در جاوا اسکریپت مانند مدیری است که بر پنجره مرورگر یا فریمی که صفحه وب را نگه می‌دارد نظارت می‌کند. در اصل این شی به عنوان نوعی کمک‌کننده برای کد جاوا اسکریپت در حال اجرا در مرورگر عمل خواهد کرد و قابلیت‌های گوناگونی را ارائه می‌دهد. برای درک بهتر نحوه کار شی پنجره در ادامه آن را با مثالی بررسی کنیم. شی Windowهمیشه وجود دارد و برای کمک به جاوا اسکریپت آماده است.

نموداری برای نشان دادن رابطه شی پنجره با DOM و BOM در جاوا اسکریپت

می‌توان با استفاده از کلمه کلیدیWindowبا آن تعامل برقرار کرد یا حتی از استفاده از آن صرف‌نظر کرد. مثال زیر برای بیان این هدف است:

ویژگی‌ها و متدهای شی پنجره

شی Windowمجموعه‌ای از ابزارها را برای تعامل با مرورگر و سند بارگذاری شده ارائه می‌دهد. در اینجا چند تا از متدها و ویژگی‌های موجود برای شی پنجره آورده شده است.

  • window.document: این ویژگی کاربر را به سند HTML صفحه وب متصل می‌کند.
  • window.location: URL صفحه فعلی را می‌داند و به کاربر کمک می‌کند در مرورگر جابه‌جا شود.
  • window.open: این متد را باید به عنوان باز کردن پنجره یا تب جدید مرورگر تصور کرد.
  • window.close: این متد پنجره یا برگه فعلی مرورگر را می‌بندد.
  • window.alert: با این متد می‌توان پیامی برای کاربر ایجاد کرد.
  • window.setTimeout: این متد برای اجرای تابعی پس از کمی انتظار مفید است.
  • window.addEventListener: این متد به مرورگر می‌گوید وقتی رویداد خاصی اتفاق می‌افتد، کاری انجام دهد.

به نمونه مثال زیر در این رابطه توجه کنید:

شی سراسری و ارتباط آن با BOM

در جاوا اسکریپت، هر عنصری مانند اشیا، توابع و متغیرها که جهانی یا به‌اصطلاح سراسری هستند، به طور خودکار بخشی از شی Windowمحسوب می‌شوند. این یعنی همه عناصر مختلف جاوا اسکریپت در جعبه بزرگی به نام Windowقرار دارند. نکته جالب اینجاست که جاوا اسکریپت به کاربران امکان می‌دهد وقتی می‌خواهند از عنصری از این جعبه بزرگ استفاده کنند، از به کاربر بردن کلمه کلیدی Windowصرف‌نظر کنند. در زیر مثالی ساده برای دیدن سند به منظور بیان این مفهوم آورده شده است:

طبق مثال بالا وقتی کاربری با جاوا اسکریپت کار می‌کند و سند را می‌بیند، می‌تواند آن را عنصری در داخل جعبه بزرگ (شی پنجره) در نظر بگیرد و از طرفی دیگر می‌تواند از کلمه کلیدی Windowبرای این هدف صرف‌نظر کند.تصویری که چندین و چند پنجره مرورگر متصل به هم را نشان می دهد که نشان دهنده نحوه عملکرد BOM در جاوا اسکریپت است.

مثال هایی از شی Window و BOM در جاوا اسکریپت

بیایید نحوه استفاده از شی Windowو BOM در جاوا اسکریپت را در موقعیت‌های دنیای واقعی بررسی کنیم.

مدیریت تعاملات کاربر

تصور کنید که می‌خواهید بدانید که کاربری در کدام نقطه از صفحه وب شما کلیک می‌کند. ما می‌توانیم رویدادی برای گوش دادن به آن تنظیم کنیم، طبق قطعه کد زیر:

در کد بالا، نوعی شنونده به شی Windowمتصل شده است. دقیقاً مانند جاسوسی که منتظر کلیک کاربر باشد و به ما خبر بدهد. هنگامی که کلیک اتفاق می‌افتد، تابع فعال می‌شود و مختصات کلیک را در کنسول چاپ می‌کند.

باز کردن پنجره جدید

حال، فرض کنید می‌خواهید صفحه وب دیگری را به کاربر نشان دهید. با کد زیر می‌توان این کار را به نحو احسن انجام داد:

در مثال بالا، از متد window.openاستفاده شده است. سناریوی فوق مانند این است که به مرورگر دستور دهیم، پنجره یا برگه جدید باز کند و صفحه وب مد نظر را نشان بدهد.

کنترل ناوبری مرورگر

فرض بر این است می‌خواهید کاربر را با کلیک روی یک دکمه به صفحه وب دیگری ببرید. می‌توان این کار را به صورت قطعه کد زیر انجام داد:

در مثال فوق تابع ویژگی window.location.hrefرا به URL مورد نظر تنظیم می‌کند. این کار مانند این است که به مرورگر بگویید، این صفحه وب (https://www.example.com) را باز کند. مثال‌های فوق به کاربر امکان می‌دهند به کلیک‌ها گوش دهد، صفحات جدید را باز کرده و کاربر را به صفحات وب مختلف راهنمایی کند.

شی پنجره و فریم با مدل BOM در جاوا اسکریپت

در این بخش فریم‌ها و پنجره‌ها را در مدل شی مرورگر یا همان BOM در جاوا اسکریپت مورد بحث قرار می‌دهیم. برای این هدف ابتدا باید پنجره مرورگر را به عنوان نوعی بوم بزرگ در نظر گرفت که می‌تواند به بخش‌های کوچک‌تر به نام فریم تقسیم شود. هر فریم مانند پنجره کوچک خود در پنجره اصلی مرورگر عمل می‌کند و می‌تواند صفحات مختلف وب را به طور مستقل بارگذاری کند. این یعنی اگر کاربری فریم را دوباره بارگیری یا پیمایش کند، روی بقیه فریم‌ها تأثیری نخواهد داشت. هر فریم شی پنجره مخصوص به خود را دارد که حاوی اطلاعات مربوط به آن فریم خاص از جمله نام آن است.

در زیر توضیحات مربوط به چند وظیفه کلیدی آورده شده است که می‌توان با استفاده از شی پنجره با فریم‌ها انجام داد:

  • با استفاده از window.framesمی‌توان فهرستی از تمام فریم‌های موجود در پنجره فعلی را دریافت کرد.
  • به فریم‌ها با شماره فهرست‌شان، مانند window.frames[0] یا با نام اختصاص داده شده، مانند window.frames['iframe_name']دسترسی پیدا خواهد شد.
  • می‌توان صفحه وب بارگیری شده در قابی خاص را با دسترسی به ویژگی مکان آن، مانند window.frames[index].location تغییر داد.
  • ویژگی window.lengthبه کاربر می‌گوید که چند عنصر iframeدر پنجره فعلی وجود دارد.

حال بیایید به مثال ساده نگاهی بیندازیم تا بفهمیم چگونه از شی پنجره با فریم‌ها در HTML استفاده کنیم. قطعه کد مثال مد نظر ما به صورت زیر است:

در کد HTML ارائه شده، دوiframeوجود دارد که صفحات وب را از Faradarsو Faradars.blogنمایش می‌دهد.

مثالی برای بیان مفهوم استفاده از شی پنجره و فریم با مدل BOM در جاوا اسکریپت

هنگامی‌که روی دکمه Change meکلیک کنید، تابع changeجاوا اسکریپت را فعال می‌کند. این تابع مکان اولین فریم یا page1را به صفحه وب جدید www.example.com و مکان فریم با نام page2را به www.example.irتغییر خواهد داد. علاوه بر این، هشداری به تعداد iframeهای موجود در صفحه با استفاده از window.lengthنشان خواهد داد. در اصل مثال فوق نشان می‌دهد که چگونه می‌توان فریم‌ها را دست‌کاری کرد و با استفاده از شی پنجره در مدل شیء مرورگر به ویژگی‌های آن‌ها دسترسی پیدا کرد.

موقعیت شی پنجره با مدل شی مرورگر در جاوا اسکریپت

در این بخش مطلب مجله فرادرس در رابطه با نحوه قرارگیری پنجره جدید با استفاده از مدل BOM در جاوا اسکریپت توضیحاتی ارائه خواهد شد. هنگامی‌که پنجره جدیدی با استفاده از جاوا اسکریپت باز می‌شود، می‌توان موقعیت آن را بر روی صفحه‌نمایش نسبت به پنجره مشاهده شده در حال حاضر تعیین کرد. مختصات xو yپنجره جدید را می‌توان با استفاده از ویژگی‌هایی مانند «screenX» یا «screenLeft» برای موقعیت افقی و «screenY» یا «screenTop» برای موقعیت عمودی مورد دسترسی قرار داد.

این ویژگی‌ها ممکن است بسته به مرورگری که استفاده می‌شود نام‌های مختلفی داشته باشند، مانند «screenLeft» و «screenTop» برای اینترنت اکسپلورر ۸ و نسخه‌های قبلی و «screenY» و «screenX» برای مرورگرهای دیگر هستند. در زیر مثالی برای درک این مفهوم آورده شده که قطعه کد این مثال به صورت زیر است:

در کد HTML ارائه شده، دکمه‌ای با عنوان PositionDemoوجود دارد. وقتی روی آن کلیک صورت بگیرد، تابع جاوا اسکریپت pos()را فعال می‌کند. این تابع پنجره جدیدی را بازخواهد کرد که صفحه وب Googleرا با تنظیمات اندازه و موقعیت خاص نمایش می‌دهد. سپس موقعیت پنجره جدید را با استفاده از «screenLeft» یا «screenX» برای موقعیت افقی و «screenTop» یا «screenY» برای موقعیت عمودی، بسته به سازگاری مرورگر، بازیابی می‌کند. در نهایت، کد فوق مختصات را با استفاده از document.writeدر صفحه‌نمایش می‌دهد. مثال فوق نشان می‌دهد که چگونه می‌توان موقعیت پنجره جدید را با استفاده از مدل شی مرورگر در جاوا اسکریپت کنترل کرد.

سایز پنجره با مدل BOM در جاوا اسکریپت

اندازه پنجره را می‌توان با استفاده از مدل BOM در جاوا اسکریپت تعیین کرد که در این بخش به این مسئله خواهیم پرداخت. وقتی در مورد اندازه پنجره در جاوا اسکریپت صحبت می‌کنیم، چند ویژگی مختلف وجود دارد که می‌توان استفاده کرد. اندازه ناحیه سند در پنجره، به استثنای نوار ابزار و نوارهای پیمایش، می‌تواند با استفاده از ویژگی‌هایی مانند «innerHeight» و «innerWidth» به ترتیب برای عرض و ارتفاع پنجره استفاده شود. این ویژگی‌ها ابعاد محتوا را برای کاربر قابل مشاهده می‌کنند. با این حال، اگر لازم باشد اندازه‌های نوار ابزار و نوارهای پیمایش اضافه شوند، می‌توان از ویژگی‌های «outerWidth» و «outerHeight» استفاده کرد. توجه به این نکته مهم است که این ویژگی‌ها ممکن است در مرورگرهای قدیمی مانند «Internet Explorer 8» و نسخه‌های قبلی پشتیبانی نشوند.

مثال زیر برای بیان مفاهیم بالا است:

خروجی مثال فوق به صورت زیر است:

تصویری برای نمایش نحوه دریافت اندازه پنجره در مدل BOM در جاوا اسکریپت

در کد HTML مثال ارائه شده، دکمه‌ای با عنوان Get Window sizeوجود دارد. هنگامی‌که روی آن کلیک می‌شود، تابع جاوا اسکریپت getSizeرا فعال می‌کند. این تابع ابعاد داخلی و خارجی پنجره را با استفاده از ویژگی‌های مختلفی مانند «innerWidth»، «innerHeight»، «outerWidth» و «outerHeight» بازیابی می‌کند. سپس، این ابعاد را با استفاده از «document.write()» در صفحه‌نمایش می‌دهد. در اصل قطعه کد فوق نشان می‌دهد که چگونه می‌توان از مدل شیء مرورگر برای تعیین اندازه پنجره در جاوا اسکریپت استفاده کرد.

ناوبری پنجره و پاپ آپ با BOM در زبان برنامه نویسی جاوا اسکریپت

جاوا اسکریپت ناوبری صفحه وب و ایجاد پنجره‌های پاپ آپ را امکان‌پذیر کرده و تعامل کاربر را افزایش می‌دهد. پاپ آپ ها برای نمایش اطلاعات اضافی یا بزرگنمایی تصاویر استفاده می‌شوند. آن‌ها به عنوان پنجره‌های جداگانه در بالای پنجره اصلی مرورگر ظاهرشده و می‌توانند تنظیمات منحصربه‌فرد خود را داشته باشند. ادغام پاپ آپ ها در صفحات وب با روش‌های مختلفی برای دستیابی به اهداف متفاوتی انجام می‌شود. یکی از روش‌هایی که به طور گسترده مورد استفاده قرار می‌گیرد، به وسیله تابع window.open()بوده که سینتکس آن به صوری زیر است:

توضیحات سینتکس فوق به صورت زیر است:

۱. پارامتر URL نشانی اینترنتی صفحه‌ای که باید باز شود را مشخص می‌کند. اگر مشخص نشده باشد پنجره خالی باز می‌شود.

۲. پارامتر nameمشخصه هدف یا نام پنجره را مشخص می‌کند. نام‌گذاری پنجره به دست‌کاری آن بعداً در اسکریپت کمک خواهد کرد. nameدر اصل پارامتر اختیاری است و می‌تواند مقادیر زیر را داشته باشد:

  • _blank: برای باز کردن URL در پنجره جدید به nameاختصاص داده شده و این مقدار پیش‌فرض است.
  • _parent: برای باز کردن URL در قاب والد به nameاختصاص داده شده است.
  • _self: برای جایگزینی صفحه فعلی به nameاختصاص داده شده است.
  • _top: برای جایگزینی مجموعه فریم‌هایی که امکان دارد بارگذاری شوند به nameاختصاص داده شده است.

۳. مشخصات یا specsپاپ آپ را می‌توان در اینجا اضافه کرد. تمام پارامترهای ارائه شده در زیر اختیاری بوده و شامل موارد زیر هستند:

  • Channelmode: اگر این مقدار یا ویژگی تنظیم شده باشد، پنجره را در حالت تئاتر نمایش می‌دهد.
  • Fullscreen: اگر این مقدار تنظیم شده باشد، مرورگرها در حالت تمام صفحه‌نمایش داده می‌شوند.
  • Height: ارتفاع پنجره بازشو برحسب پیکسل. حداقل ۱۰۰ است.
  • Left: این پارامتر موقعیت سمت چپ پنجره برحسب پیکسل است که در آن مقادیر منفی مجاز نیست.
  • Location: اگر این پارامتر تنظیم شده باشد، فیلد آدرس نمایش داده می‌شود. این پارامتر فقط در مرورگرهای opera استفاده خواهد شد.
  • Menubar: اگر این ویژگی تنظیم شده باشد، نوار منو نمایش داده می‌شود.
  • Resizeable: اگر این پارامتر تنظیم شده باشد، پنجره‌ها قابل تغییر اندازه هستند و این پارامتر فقط در مرورگرهای IE استفاده می‌شود.
  • Scrollbars: اگر این پارامتر تنظیم شده باشد، نوارهای پیمایش را نمایش می‌دهد. ویژگی نام برده برای مرورگرهای اینترنت اکسپلورر، فایرفاکس، اپرا کار می‌کند.
  • Status: اگر این پارامتر تنظیم شده باشد نوار وضعیت به پنجره اضافه می‌شود.
  • Titlebar: اگر این ویژگی اگر تنظیم شده باشد نوار عنوان نمایش داده می‌شود.
  • Toolbar: اگر ویژگی نام برده تنظیم شده باشد نوار ابزار مرورگر نمایش داده می‌شود و در مرورگرهای IE و فایرفاکس مورد استفاده قرار می‌گیرد.
  • Top: این پارامتر موقعیت بالای تنظیم پنجره برحسب پیکسل است که در آن مقادیر منفی مجاز نیستند.
  • Width: این پارامتر هم عرض پنجره برحسب پیکسل، با حداقل مقدار ۱۰۰ است.

۴. در نهایت پارامتر replaceاختیاری است که در صورت تنظیم روی true، جایگزین سند فعلی در لیست تاریخچه می‌شود. وقتی روی falseتنظیم شود، ورودی جدیدی در لیست تاریخ ایجاد می‌کند.

در زیر خلاصه‌ای از عملکرد تابع window.openآمد است:

  • window.openنوعی تابع جاوا اسکریپت است که برای راه‌اندازی پنجره مرورگر جدید طراحی شده است.
  • این تابع پارامترهایی مانند (URL, name, specs, replace)را می‌پذیرد.
  • تابع نام برده مشخصات URL صفحه‌ای را که باید باز شود را تعیین می‌کند. اگر این پارامتر خالی بماند، نوعی پنجره خالی ایجاد می‌شود.
  • پارامترnameنام متمایز به پنجره جدید اختصاص می‌دهد، که دست‌کاری در آینده را تسهیل می‌کند.
  • مشخصات پنجره شامل اندازه پنجره، موقعیت و گزینه‌های نمایش است. این گزینه‌ها عبارت‌اند از قابلیت تغییر اندازه، نوارهای پیمایش، و مشاهده نوار وضعیت.
  • تابع window.openمرجعی به پنجره تازه بازشده بازمی‌گرداند و در صورت لزوم امکان سفارشی‌سازی بیشتر را فراهم می‌کند.

در اصل، window.openبه عنوان ابزاری قوی برای ایجاد پنجره‌های پاپ آپ با تنظیمات و محتوای مناسب عمل می‌کند.

مثالی از window.open

برای درک بهتر نحوه عملکرد تابع window.openبا مفهوم BOM در جاوا اسکریپت مثال زیر مد نظر است:

کد HTML ارائه شده نحوه ایجاد نوعی پنجره پاپ آپ با استفاده از جاوا اسکریپت را نشان می‌دهد. هنگامی‌که صفحه وب بارگیری می‌شود، رویداد «onload»، تابع «popFunc» را فعال خواهد شد. در داخل این تابع، پنجره مرورگر جدید با استفاده از متد window.openباز می‌شود. پارامترهای ارسال شده به window.openشامل URL خالی (از آنجایی که صفحه وب خاصی ارائه نشده است)، نامی برای پنجره (popWin) و مشخصات ظاهری آن مانند قابل تغییر اندازه بودن و قرار گرفتن در مختصات  است.

در پنجره جدید باز شده، جاوا اسکریپت به صورت پویا محتوای HTML را با استفاده از متد «document.write» می‌نویسد. این محتوا شامل سند HTML با عنوان JS popupو بدنه‌ای حاوی پاراگرافی است. بعلاوه، نوعی ابرپیوند یا به اصطلاح متا دیتا گنجانده شده است که به کاربران اجازه می‌دهد تا با اجرای تابع جاوا اسکریپ self.closeپنجره بازشو را هنگام کلیک کردن ببندند.

بلوک پاپ آپ و امنیت

استفاده بیش از حد از پنجره‌های بازشو یا همان پاپ آپ‌ها در صفحه وب می‌تواند منجر به تجربه منفی کاربر شود. پنجره‌های بازشو اغلب در تلاش‌های فیشینگ مورد سوء استفاده قرار می‌گیرند، جایی که کاربران فریب داده می‌شوند تا تحت روی پیام‌های مهم و در عین حال جعلی روی URLهای مخرب کلیک کنند. علاوه بر این، پاپ آپ ها معمولاً برای نمایش تبلیغات غیر مرتبط با محتوای وب‌سایت اصلی استفاده می‌شوند.

برای رفع این مشکلات، مرورگرهای وب مدرن گزینه‌هایی را برای مسدود کردن پنجره‌های پاپ آپ تولید شده به طور خودکار ارائه می‌دهند. کاربران همچنین می‌توانند نرم‌افزار مسدودکننده پاپ آپ را بر روی کامپیوتر خود نصب کنند. این مسدودکننده‌ها از ظاهر شدن پنجره‌های بازشو ناخواسته در زمانی که کاربر پنجره یا برگه جدید درخواست نمی‌کند، مانند رویدادهای کلیک یا فشار روی کلید، جلوگیری می‌کند. وقتی پاپ آپ مسدود می‌شود، تابع window.openمقدار nullبازمی‌گرداند. این مقدار بازگشتی را می‌توان به متغیری اختصاص داد و بررسی کرد تا مشخص شود که پنجره بازشو مسدود شده است یا خیر. در این صورت، می‌توان هشداری برای اطلاع کاربر نمایش داد. مثال زیر نشان می‌دهد که چگونه می‌توان پنجره پاپ آپ مسدود شده را در جاوا اسکریپت مدیریت کرد:

پنجره‌های بازشو یا همان پاپ آپ زمانی مؤثرتر هستند که به وسیله اقدامات کاربر راه‌اندازی شوند. در زیر، نمونه‌ای را بررسی می‌کنیم که نشان‌دهنده استفاده مؤثر از پاپ‌آپ است.

خروجی مثال فوق به صورت زیر است:

تصویری از یک پاپ آپ در صفحه وب که با قرار گرفتن ماوس روی تصویر، تصویر در ابعاد بزرگتری به کاربر نمایش داده میشود.

Interval و Timeout در جاوا اسکریپت

یکی دیگر از مسائل مربوط به BOM در جاوا اسکریپت، متدهای Interval و Timeout هستند که در این بخش از مطلب به آن‌ها پرداخته خواهد شد. جاوا اسکریپت متدهایی را برای معرفی تأخیرها یا فواصل زمانی در اجرای کد ارائه می‌دهد که به نام Intervals و Timeouts شناخته می‌شوند. این متدها بخشی از BOM هستند و برای اجرای توابع در بازه‌های زمانی مشخص یا پس از تأخیر معین استفاده می‌شوند.

متد setInterval در جاوا اسکریپت

متد setIntervalبه طور مکرر تابع مشخصی را در بازه‌های زمانی تعریف‌شده اجرا می‌کند. سینتکس آن شامل اجرای تابع و فاصله زمانی برحسب میلی‌ثانیه است که به صورت زیر نوشته می‌شود:

هنگام استفاده از این متد، توجه به این نکته مهم است که اگر تابع callbackیا رویداد دیگری برای مدت طولانی اجرا شود، مرورگر ممکن است اجرای بعدی تابع برنامه‌ریزی شده به وسیلهsetIntervalرا نادیده بگیرد. دلیل این کار این است که این متد بدون توجه به فعالیت‌های فعلی مرورگر، اجراها را در صف قرار می‌دهد و به طور بالقوه منجر به فراخوانی بیش از حد عملکرد می‌شود.

برعکس، متد clearIntervalاجرای بیشتر تابع برنامه‌ریزی شده به وسیلهsetIntervalرا متوقف می‌کند. سینتکس این متد به صورت زیر است:

برای استفاده از clearInterval، ابتدا setIntervalباید به نوحی متغیر سراسری اختصاص داده شود. سپس این متغیر سراسری به clearIntervalداده شود تا اجرای آن متوقف شود. مثال زیر نحوه استفاده از این متدها را نشان می‌دهد.

خروجی مثال فوق به صورت زیر است:

تصویری از نمایش یک شمارنده در جاوا اسکریپت که با استفاده از متد setInterval در جاوا اسکریپت ایجاد شده است.

مثال ارائه شده تنظیم و پاکسازی نوعی بازه زمانی جاوا اسکریپت را نشان می‌دهد. شمارنده در هر ثانیه افزایش می‌یابد، در کادر متنی نمایش داده می‌شود و می‌توان با کلیک کردن روی دکمه‌های مربوطه شروع یا متوقف کرد.

متد setTimeout در جاوا اسکریپت

متد SetTimeout در جاوا اسکریپت اجازه می‌دهد تا اجرای تابعی مشخص با تعداد میلی‌ثانیه تعیین شده به تأخیر بیفتد. سینتکس آن شامل ارائه نوعی تابع برای اجرا و فاصله زمانی بر حسب میلی‌ثانیه است که پس از آن تابع باید اجرا شود. سینتکس setTimeoutبه صورت زیر نوشته می‌شود:

این متد قبل از اجرای تابع ارائه شده منتظر می‌ماند تا دوره زمانی تعیین شده سپری شود. بااین‌حال، مهم است توجه داشته باشیم کهsetTimeoutعواملی مانند بارگذاری مرورگر یا صفحه وب در پس‌زمینه را در نظر نمی‌گیرد که این کار به طور بالقوه منجر به فشار اضافی بر مرورگر و منابع کامپیوتر می‌شود.

از طرفی دیگر متد clearTimeoutبرای توقف اجرای تابع برنامه‌ریزی شده setTimeoutاستفاده می‌شود. مشابه setInterval، تابع setTimeoutابتدا باید به متغیری سراسری اختصاص داده شود که سپس بهclearTimeoutارسال می‌شود تا اجرای آن متوقف شود. مثال زیر برای بیان این هدف است.

خروجی مثال فوق به صورت زیر است:

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

مثال ارائه شده بالا نحوه تنظیم تایمر را نشان می‌دهد که به کاربر هشدار می‌دهد پس از ۵ ثانیه رمز عبور را دوباره وارد کند. تایمر را می‌توان با کلیک کردن روی دکمه clear متوقف کرد. علاوه بر این، شایان ذکر است که متدهای جایگزینی مانند setImmediateو requestAnimationFrameبرای رفع اشکالات setTimeoutمعرفی شده‌اند اما این متدها به طور گسترده در همه مرورگرها پشتیبانی نمی‌شوند و هنوز در مراحل اولیه توسعه خود هستند.

ابزارهای دیالوگ سیستم همراه با BOM در جاوا اسکریپت

دیالوگ‌های سیستم در جاوا اسکریپت اعلان‌هایی هستند که مرورگرها برای انتقال پیام به کاربران استفاده می‌کنند. این دیالوگ‌ها، مانند هشدارهایی برای کاربران هستند، به این معنی که اجرای کد جاوا اسکریپت را تا زمانی که کاربر با آن‌ها تعامل داشته باشد، متوقف می‌کند.

Alert در جاوا اسکریپت

در میان دیالوگ‌های سیستم، Alert در جاوا اسکریپت ساده‌ترین گزینه است که معمولاً برای اطلاع کاربران از خطاهای ارسالی فرم، هشدار انقضای سرویس یا نتایج محاسبات نامعتبر استفاده می‌شود که سینتکس آن به دو شیوه زیر است:

هنگامی که جعبه هشداری ظاهر می‌شود، کاربران باید روی دکمه OK کلیک کنند تا آن را رد کرده و اطمینان حاصل کنند که اطلاعات نمایش داده شده را تائید می‌کنند. همان‌طور که در مثال ارائه شده نشان داده شده است، این متد از شی پنجره یا مستقیماً قابل دسترسی است.

خروجی مثال فوق به صورت زیر است:

تصویری از بارگیری یک صفحه وب که از متد Alert در جاوا اسکریپت استفاده کرده است.

در مثال فوق، از متد Alertبرای نمایش پیامی خاص استفاده شده است. پس از بارگذاری صفحه وب، این جعبه هشدار ظاهر شده و اجرای جاوا اسکریپت تا زمانی که کاربر با فشار دادن OK آن را تائید کند، متوقف می‌شود. پس از آن، متن «این خط پس از فشار دادن OK در جعبه هشدار نمایش داده می‌شود»، نمایش داده می‌خواهد و نشان می‌دهد که چگونه متد هشدار اجرای کد را تا زمانی که تعامل کاربر رخ دهد متوقف می‌کند.

جعبه های تائید در جاوا اسکریپت

«کادر یا جعبه تائید» (Confirm Box) در جاوا اسکریپت پیامی را همراه با دکمه‌های «OK» و «Cancel» به کاربران ارائه می‌دهد و آن‌ها را قادر می‌سازد تا عملی را تائید یا لغو کنند. این دیالوگ معمولاً در سناریوهایی مانند تائید حذف ایمیل یا بستن صفحه وب استفاده می‌شود. هنگامی که کاربر روی OK کلیک می‌کند، اسکریپت مقدار trueرا دریافت می‌کند که نشان‌دهنده تائید عمل است، در حالی که کلیک کردن بر روی Cancel مقدار falseرا بازمی‌گردند. این متد به وسیله BOM در جاوا اسکریپت یا به صورت کاملاً مستقیم در دسترس بوده که سینتکس آن به صورت زیر است:

مثال زیر نحوه استفاده از این کادر را نشان می‌دهد:

خروجی مثال بالا به صورت زیر است:

مثالی برای نشان دادن مفهوم confirm box در جاوا اسکریپت

در کد مثال ارائه شد بالا، از نوعی متد confirmبرای نمایش پیام You have selectedاستفاده شده است. اگر کاربر بر روی OK کلیک کند که نشان‌دهنده تائید است، اسکریپت You have clicked Okرا نمایش می‌دهد. برعکس، اگر کاربر روی Cancel یا دکمه X کلیک کند که نشان‌دهنده لغو است، اسکریپت You have clicked Cancelرا نمایش می‌دهد. این نشان می‌دهد که چگونه متد confirmبه کاربران امکان تصمیم‌گیری داده و بازخورد مربوطه را بر اساس اقدامات آن‌ها ارائه می‌دهد.

Prompt Box در جاوا اسکریپت

یکی دیگر از مفاهیم مرتبط با موضوع BOM در جاوا اسکریپت، جعبه اعلان یا «Prompt Box» است. کادر محاوره‌ای یا جعبه اعلان در جاوا اسکریپت برای درخواست ورودی از کاربران استفاده می‌شود. این کادر نیز نوعی پیام همراه با فیلدهای ورودی و دکمه‌های OK و Cancel ارائه می‌دهد. کاربران می‌توانند داده‌ها را وارد کرده و سپس انتخاب کنند که داده‌ها را با کلیک کردن روی تأیید ارسال کنند یا با کلیک کردن روی لغو یا دکمه X در گوشه سمت راست بالای پنجره، عملیات را لغو کنند. این گفتگو معمولاً در برنامه‌هایی استفاده می‌شود که در آن ورودی کاربر ضروری است، مانند درخواست نام کاربری یا واردکردن مقادیر عددی. متد promptبه وسیله شی پنجره یا مستقیماً در جاوا اسکریپت قابل دسترسی بوده و سینتکس آن به صورت زیر است.

مثال زیر نحوه استفاده از این دیالوگ در جاوا اسکریپت را نشان می‌دهد:

خروجی کد بالا به صورت زیر است:

مثالی برای نشان دادن Prompt Box در جاوا اسکریپت

در کد مثال ارائه شده، از متدpromptبرای نمایش پیام «نام خود را وارد کنید» به همراه پیغام «بیا باهمدیگر دوست شویم» استفاده شده است. اگر کاربر نام خود را وارد کرده و روی OK کلیک کند، اسکریپت با پیامی شخصی به نام «سلام» و سپس خوشامدگویی به درخواست کاربر پاسخ می‌دهد. اگر کاربر بدون واردکردن داده‌ای بر روی Cancel یا X کلیک کند، اسکریپت با پیام «شما نام خود را وارد نکرده‌اید» به او اطلاع می‌دهد. مثال فوق در اصل نشان می‌دهد که چگونه متد promptورودی کاربر را تسهیل کرده و امکان تعامل با اسکریپت را بر اساس ورودی کاربر فراهم می‌کند.

شی مکان در جاوا اسکریپت چیست؟

شی مکان بخشی از مدل DOM و همچنین مدل BOM در جاوا اسکریپت است. در اصل این شی نشان‌دهنده URL صفحه وب فعلی بوده و قابلیت‌هایی را برای پیمایش و بازیابی اطلاعات فراهم می‌کند. هم متد «window.location»  و هم متد «document.location» به شی مکان اشاره می‌کنند و امکان دسترسی به بخش‌های مختلف URL مانند نام میزبان، پروتکل، نام مسیر و موارد دیگر را می‌دهند. این ویژگی‌ها و متدهای شی مکان، توسعه‌دهندگان را قادر می‌سازد تا URL صفحه وب فعلی را دست‌کاری کرده و با آن کار کنند.

ویژگی های شی مکان

شی موقعیت مکانی در جاوا اسکریپت دسترسی به بخش‌های مختلف URL صفحه وب بارگیری شده فعلی را فراهم می‌کند. این بخش‌ها را می‌توان با استفاده از ویژگی‌ها و متدهای شی مکان دستکاری کرد. در زیر برخی از ویژگی متداول مورد استفاده شی مکان آورده شده است.

ویژگی هش

این ویژگی بخش انکر URL را که با نماد "#" نشان داده شده است، بازیابی یا تنظیم می‌کند و سینتکس آن به صورت زیر است:

ویژگی میزبان

نام میزبان و شماره پورت URL را دریافت یا تنظیم می‌کند و سینتکس آن به صورت زیر است:

ویژگی نام میزبان

نام میزبان URL را بازیابی یا تنظیم می‌کند و سینتکس آن به صورت زیر است:

ویژگی Href

کل URL صفحه جاری، از جمله پروتکل، نام میزبان، پورت، نام مسیر و پارامترهای پرس‌وجو را بازیابی یا تنظیم می‌کند و سینتکس آن به صورت زیر است:

مبدأ یا origin

پروتکل، نام میزبان و شماره پورت URL را برمی‌گرداند و سینتکس آن به صورت زیر است:

Pathname

قسمت نام مسیر URL را بازیابی یا تنظیم می‌کند که نشان‌دهنده مسیر فایل در سرور بوده و سینتکس آن به صورت زیر است:

پورت

شماره پورت URL را بازیابی یا تنظیم می‌کند و سینتکس آن به صورت زیر است:

پروتکل

پروتکل URL را بازیابی یا تنظیم می‌کند، مانند «Http ،Https ،Ftp و غیره» که سینتکس آن به صورت زیر است:

جستجو

قسمت رشته پرس‌وجو از URL را بازیابی یا تنظیم می‌کند که با ?مشخص شده و سینتکس آن به صورت زیر است:

هر ویژگی اطلاعات خاصی در مورد بخش‌های مختلف URL ارائه می‌کند و به توسعه‌دهندگان این امکان را می‌دهد تا با URLها در کد جاوا اسکریپت خود کار کرده و آن‌ها را دستکاری کنند.

متدهای شی مکان

شی مکان در جاوا اسکریپت متدهایی را ارائه می‌دهد که به توسعه‌دهندگان اجازه می‌دهد مکان مرورگر را تغییر دهند. در زیر متدهای متداول مورد استفاده شی موقعیت مکانی آمده است.

متد Assign

متد assign()، URL فعلی را به URL جدیدی که به عنوان پارامتر آن مشخص شده است تغییر می‌دهد. همچنین نوعی ورودی به پشته تاریخچه مرورگر اضافه می‌کند و به کاربران امکان می‌دهد با استفاده از دکمه برگشت مرورگر به صفحه قبلی حرکت کنند.

متد Reload

متد reload()سند جاری را بارگذاری مجدد می‌کند. به طور پیش‌فرض، سند را از حافظه پنهان بارگیری مجدد خواهد کرد. با این حال، با درج مقدار trueبه عنوان پارامتر forceGet(مانند location.reload(true))، صفحه مستقیماً از سرور بارگیری می‌شود و کش را دور می‌زند.

Replace

متد replace()صفحه وب فعلی را با صفحه جدیدی که به عنوان پارامتر آن ارائه شده است جایگزین می‌کند. برخلاف assign()، replace()صفحه وب فعلی را از تاریخچه سند حذف می‌کند و از بازگشت کاربران به آن با استفاده از دکمه بازگشت مرورگر جلوگیری خواهد کرد.

شی ناوبری و ارتباط آن با مدل BOM در جاوا اسکریپت

یکی دیگر از اشیای مرتبط با مدل BOM در جاوا اسکریپت، شی ناوبری navigatorاست. شی ناوبر در جاوا اسکریپت اطلاعاتی در مورد مرورگر بازدیدکننده ارائه می‌دهد. اطلاعاتی مانند فعال بودن کوکی‌ها، نام مرورگر، موتور و نسخه مرورگر.

سینتکس استفاده از این شی به صورت زیر است:

در فهرست زیر برخی از ویژگی‌های شی navigatorآورده شده است:

  • navigator.cookieEnabled: اگر کوکی‌های مرورگر فعال باشند، این ویژگی trueرا بازمی‌گرداند. در غیر این صورت، falseبازگردانده خواهد شد.
  • navigator.appNameو navigator.appCodeName: این ویژگی‌ها نام مرورگر را بازمی‌گرداند.
  • navigator.product: نام موتور مرورگر را بازمی‌گردند.
  • navigator.appVersion و navigator.userAgent: این ویژگی‌ها اطلاعات نسخه مرورگر را بازمی‌گرداند. با این حال، گاهی اوقات ممکن است گمراه‌کننده باشند زیرا مرورگرهای مختلف ممکن است از نامی مشابه استفاده کنند و داده‌های ارائه شده به وسیله navigatorتغییر یا شناسایی اشتباه شود.
  • navigator.platform: سیستم‌عاملی را که مرورگر در آن نصب شده است، بازمی‌گرداند.
  • navigator.language: زبان مرورگر را بازمی‌گرداند.
  • navigator.javaEnabled: اگر جاوا در مرورگر فعال باشد، این متد trueرا بازمی‌گرداند.

مثال زیر نحوه استفاده از navigator را نشان می‌دهد:

شی تاریخچه در جاوا اسکریپت چیست؟

شی تاریخچه در جاوا اسکریپت فهرست صفحات وب را که کاربر از پنجره فعلی پیمایش کرده است را ذخیره می‌کند. این شی بخشی از BOM در جاوا اسکریپت است و می‌توان با استفاده از «window.history» به آن دسترسی داشت. این بدان معنی است که برای هر پنجره مرورگر، برگه یا فریمی خاص وجود دارد. به دلایل امنیتی، URLهای دقیق بازدید شده در تاریخچه قابل دسترسی نیستند اما امکان پیمایش به عقب و جلو به وسیله صفحاتی که قبلاً مشاهده شده‌اند را فراهم می‌کند. در حالی که متدها و ویژگی‌های شی تاریخچه استاندارد نشده‌اند اما به وسیله همه مرورگرهای وب اصلی پشتیبانی می‌شوند.

ویژگی length برای شی تاریخچه در جاوا اسکریپت

ویژگی lengthشی historyبه کاربر می‌گوید که چند صفحه در تاریخچه مرور ذخیره شده است. در اصل این ویژگی هم صفحات بازدید شده به جلو و هم به عقب از صفحه فعلی را شمارش می‌کند. در ابتدا، زمانی که برگه یا پنجره باز می‌شود، طول تاریخچه ۱ است. حداکثر مقدار برای این ویژگی معمولاً ۵۰ خواهد بود. این ویژگی برای درک تعداد صفحاتی که کاربر در طول جلسه مرور خود بازدید کرده، مفید است. این ویژگی فقط خواندنی است، به این معنی که نمی‌توان آن را تغییر داد. برای دسترسی به ویژگی length، می‌توان از سینتکس زیر استفاده کرد:

متدهای شی تاریخچه در جاوا اسکریپت

شی historyچندین متد برای پیمایش در تاریخچه مرور ارائه می‌دهد که فهرست این متدها به صورت زیر است:

  • back(): متد backکاربر را به صفحه قبلی در تاریخچه مرور می‌برد. این متد شبیه به کلیک بر روی دکمه بازگشت در مرورگر یا استفاده از history.go(-1)است. با این حال، اگر صفحه قبلی در لیست تاریخچه وجود نداشته باشد، این متد کاری را انجام نخواهد داد.
  • forward(): متد forwardصفحه را به آدرس بعدی در لیست تاریخچه به جلو می‌برد. این متد معادل کلیک کردن روی دکمه بعدی در مرورگر یا استفاده از history.go(1)است. اگر صفحه بعدی در لیست سابقه وجود نداشته باشد، این متد کار نخواهد کرد.
  • go(): متد goبه کاربر امکان می‌دهد به URL خاصی در لیست تاریخچه برود. این متد پارامتر عدد یا پارامتر رشته را می‌پذیرد. اگر پارامتر عددی ارائه شود، نشان‌دهنده موقعیت صفحه در لیست تاریخچه است. اعداد مثبت در تاریخ به جلو حرکت می‌کنند، در حالی که اعداد منفی به سمت عقب حرکت می‌کنند. اگر رشته‌ای به عنوان پارامتر ارائه شود که با URL های موجود در تاریخچه مطابقت دارد، متد به اولین URL منطبق با رشته هدایت می‌شود.

مثال زیر نحوه استفاده از متدهای forwardو goرا نشان میدهد:

خروجی مثال بالا به صورت زیر است:

مثالی برای استفاده از متدهای forward و go از شی تاریخچه در جاوا اسکریپت
برای مشاهده تصویر در ابعاد بزرگتر، روی آن کلیک کنید.

افزونه های مربوط به مدل BOM در جاوا اسکریپت

مدل شی مرورگر BOM در جاوا اسکریپت شامل نوعی ویژگی در شی navigatorبه نام pluginsاست. این ویژگی نوعی آرایه حاوی تمام افزونه‌های نصب شده در مرورگر را بازمی‌گردند. هر افزونه در آرایه دارای چندین ویژگی بوده که به صورت زیر هستند:

  • name: نام افزونه
  • filename: نام فایل اجرایی مورد استفاده برای نصب افزونه
  • description: شرحی از افزونه ارائه شده به وسیله توسعه‌دهنده آن
  • length: تعداد انواع MIME که به وسیله افزونه مدیریت می‌شود.

سینتکس استفاده از این ویژگی به صورت زیر است:

علاوه بر این، هر افزونه حاوی آرایه‌ای از اشیاء MimeType است. این اشیا چهار ویژگی دارند:

  • description: نوع MIME را توصیف می‌کند.
  • enabledPlugin: ارجاع به شیء افزونه.
  • suffixes: پسوندهای فایل مرتبط با نوع MIME.
  • type: نشان‌دهنده نوع MIME است.

برای دسترسی به اطلاعات افزونه می‌توان از ویژگی navigator.pluginsاستفاده کرد. این ویژگی آرایه پلاگین را بازمی‌گردند که سپس می‌توان با استفاده از نشانه‌گذاری فهرست (به عنوان مثال، plugins[0]) یا متدهایی مانند item (index)یا namedItem ("name")به آن دسترسی ایجاد کرد. مثال زیر نحوه استفاده از navigator.plugins propertyرا نشان می‌دهد:

خروجی مثال فوق چیزی شبیه به تصویر زیر است:

مثالی نحوه استفاده از navigator.plugins property را نشان میدهد
برای نمایش تصویر در ابعاد بزرگ روی آن کلیک کنید.

در تصویر بالا جزئیات مربوط به افزونه‌های نصب شده در مرورگر آورده شده است. برچسب Nameدر خروجی مثال بالا اطلاعاتی را برای تشخیص افزونه ارائه می‌دهد.

همچنین از جاوا اسکریپت می‌توان برای تعیین نصب بودن یا نبودن افزونه‌ای خاص استفاده کرد. تابع مثال زیر به نام hasPluginبررسی می‌کند که آیا افزونه‌ای با نام مشخص یا نام جزئی با پیمایش در لیست افزونه‌ها وجود دارد یا خیر. اگر نام ارائه شده با هر نام افزونه ذخیره شده مطابقت داشته باشد، تابع trueرا بازمی‌گردند که نشان می‌دهد افزونه نصب شده است.

این بار خروجی مثال فوق چیزی شبیه به تصویر زیر است:

تصویری برای نشان دادن نصب بودن افزونه ای خاص با استفاده از navigator.plugins property

ویژگی hasPluginبه وسیله اکثر مرورگرها پشتیبانی می‌شود اما «IE10» و نسخه‌های قبلی از ActiveXObject، نوع شی اختصاصی برای شناسایی پلاگین‌ها استفاده می‌کردند. بنابراین برای نوشتن اسکریپتی چندکاره باید کد را به صورت زیر به روز کنیم:

کنترل کننده مدل BOM در جاوا اسکریپت

مدل شی مرورگر یا همان BOM در جاوا اسکریپت شامل کنترل‌کننده‌هایی برای رویدادهای مختلف پنجره است که تغییرات را در پنجره مرورگر نشان می‌دهد.

این رویدادها، مانند «onLoad، onResize، onOffline» و غیره نشان می‌دهند که چه زمانی اقدامات خاصی رخ خواهند داد. بر خلاف کنترل‌کننده‌های رویداد HTML DOM که برای مدیریت رویدادها در عناصر HTML مانند کلیک دکمه‌ها یا بارگذاری‌های فرم استفاده می‌شوند، کنترل‌کننده‌های BOM ویژگی‌های شی Windowهستند که به‌طور خاص برای مدیریت این رویدادهای مربوط به پنجره طراحی شده‌اند.

در فهرست زیر برخی از کنترل‌کننده‌های BOM رایج و اهداف آن‌ها آورده شده است:

  • onload: اسکریپتی را زمانی که بارگیری صفحه وب به پایان رسید اجرا می‌کند.
  • onerror: زمانی که خطایی در صفحه وب رخ می‌دهد اسکریپتی را اجرا می‌کند.
  • onafterprint: اسکریپتی را پس از چاپ سند اجرا می‌کند.
  • onbeforeprint: اسکریپتی را قبل از چاپ سند اجرا می‌کند.
  • onhashchange: زمانی که قسمت لنگر یا همان انکرتکست صفحه وب تغییر کند، اسکریپتی را اجرا می‌کند.
  • onpagehide: زمانی که کاربر از صفحه وب دور می‌شود اسکریپتی را اجرا می‌کند.
  • onbeforeunload: اسکریپتی را زمانی که صفحه وب در حال بارگیری است اجرا می‌کند.
  • onmessage: اسکریپتی را هنگام راه‌اندازی پیامی خاص اجرا می‌کند.
  • onoffline: زمانی اجرا می‌شود که مرورگر پس از آفلاین شدن شروع به کار کند.
  • ononline: زمانی که مرورگر پس از آنلاین شدن شروع به کار می‌کند، اجرا می‌شود.
  • onpageshow: اسکریپتی را زمانی که کاربر به صفحه‌ای هدایت می‌شود، اجرا می‌کند.
  • onpopstate: زمانی که تاریخچه مرور کاربر تغییر کند، اسکریپتی را اجرا می‌کند.
  • onresize: اسکریپت را با تغییر اندازه پنجره مرورگر اجرا می‌کند.
  • onstorage: اسکریپتی را زمانی که فضای ذخیره‌سازی وب به‌روز می‌شود، اجرا می‌کند.
  • onunload: اسکریپتی را زمانی که پنجره بسته است اجرا می‌کند.

مثال کنترل کننده رویداد onerror

قطعه کد مثال کنترل کننده رویداد onerrorبه صورت زیر است:

مثال کنترل کننده رویداد onload

قطعه کد مثال کنترل کننده رویداد onloadبه صورت زیر است:

سخن پایانی

BOM یا Browser Object Model در جاوا اسکریپت به مجموعه‌ای از اشیا ارائه شده به وسیله مرورگرهای وب برای تعامل با ویژگی‌های مرورگر مانند پنجره‌ها، اسناد و ناوبری اشاره دارد. این ابزار در جاوا اسکریپت به کاربر اجازه می‌دهد تا رفتار و ویژگی‌های مرورگر را دستکاری کند. همچنین در همین رابطه، شی پنجره جاوا اسکریپت مانند ابزاری همه‌کاره در مدل شی مرورگر (BOM) است. با شی Window، توسعه‌دهندگان می‌توانند کارهای جالبی مانند تعاملی کردن صفحه وب، راهنمایی کاربران به صفحات مختلف و ایجاد تجربیات پویا انجام دهند. همچنین با استفاده از ویژگی‌های، متدها و رویدادها که با شی Windowهمراه است، توسعه‌دهندگان می‌توانند اپلیکیشن‌های وب را جذاب‌تر و کاربر پسندتر کنند.

در مطلب فوق اصول از مجله فرادرس اولیه شی Windowو مفهوم BOM در جاوا اسکریپت پوشش داده شد. همچنین ما در این مطلب سعی کردیم قسمت‌های مختلف BOM را توضیح دهیم و نمونه‌های واقعی استفاده از آن‌ها را بررسی کنیم. درک نحوه استفاده از شی Windowبه توسعه‌دهندگان کمک می‌کند تا پتانسیل کامل جاوا اسکریپت را در مرورگر درک کرده و وب‌سایت‌های خود را را سرگرم‌کننده‌تر و کاربر پسندتر کنند.

بر اساس رای ۱ نفر
آیا این مطلب برای شما مفید بود؟
اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.
منابع:
MediumBrenkoWeb
دانلود PDF مقاله
نظر شما چیست؟

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