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

هر محیط جاوا اسکریپت دارای شیء جهانی است. هر متغیری که در محدوده جهانی ایجاد می شود در واقع ویژگی های این شی است و هر تابعی روش آن است. در یک محیط مرورگر، شی سراسری، شیء window است که نمایانگر پنجره مرورگری است که حاوی یک صفحه وب است.

در این مقاله، برخی از کاربردهای مهم Window Object را پوشش خواهیم داد:

این پست از دوره معروف من اقتباس شده است: جاوا اسکریپت : مبتدی به نینجا. 11 روند جذاب طراحی وب برای سال 2023

مدل شیء مرورگر

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

هیچ استاندارد رسمی برای BOM وجود ندارد، اگرچه تعدادی ویژگی و روش وجود دارد که توسط همه مرورگرهای اصلی پشتیبانی می‌شوند و نوعی استاندارد واقعی را ایجاد می‌کنند. این ویژگی‌ها و روش‌ها از طریق شیء window در دسترس هستند. هر پنجره مرورگر، برگه، پنجره بازشو، قاب، و iframe یک شی window دارد.

BOM فقط در یک محیط مرورگر معنا دارد

به خاطر داشته باشید که جاوا اسکریپت را می توان در محیط های مختلف اجرا کرد. BOM فقط در یک محیط مرورگر معنا دارد. این بدان معناست که محیط‌های دیگر (مانند Node.js) احتمالاً یک شی window نخواهند داشت، اگرچه هنوز یک شی سراسری خواهند داشت. به عنوان مثال، Node.js یک شی به نام global دارد.

اگر نام شی سراسری را نمی‌دانید، می‌توانید با استفاده از کلمه کلیدی this در دامنه جهانی به آن مراجعه کنید. کد زیر راهی سریع برای تخصیص متغیر global به شی سراسری ارائه می‌کند:

const جهانی = این;

جهانی شدن

متغیرهای جهانی متغیرهایی هستند که بدون استفاده از کلیدواژه‌های const، let یا var ایجاد می‌شوند. متغیرهای سراسری در تمام قسمت های برنامه قابل دسترسی هستند.

متغیرهای جهانی ویژگی های واقعی یک شی سراسری هستند. در یک محیط مرورگر، شی سراسری شی پنجره است. این بدان معنی است که هر متغیر سراسری ایجاد شده در واقع یک ویژگی از شی window است، همانطور که در مثال زیر مشاهده می‌شود:

x = 6 ;
>> 6
پنجره.x
>> 6

>> درست

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

اگر (x) {
    
}

اما، اگر متغیر به عنوان ویژگی شی window دسترسی شود، کد همچنان کار می‌کند، زیرا window.x به سادگی false را برمی‌گرداند. ، به این معنی که بلوک کد ارزیابی نخواهد شد:

اگر (پنجره.x) {
    
}

برخی از توابع که قبلاً با آنها آشنا شده‌ایم، مانند parseInt() و isNaN()، در واقع متدهای شی سراسری هستند که در محیط مرورگر آنها را ایجاد می‌کند. روش‌های شی window:

مثل متغیرها، مرسوم است که دسترسی به آنها را از طریق شیء window حذف کنید.

گفتگوها

سه تابع وجود دارد که دیالوگ ها را در مرورگرها ایجاد می کند: alert()، confirm() و prompt(). اینها بخشی از استاندارد ECMAScript نیستند، اگرچه همه مرورگرهای اصلی آنها را به عنوان روش‌های شی window پشتیبانی می‌کنند.

روش window.alert() اجرای برنامه را متوقف می‌کند و پیامی را در کادر محاوره‌ای نمایش می‌دهد. پیام به عنوان یک آرگومان برای متد ارائه می‌شود و undefined همیشه برگردانده می‌شود:

پنجره. هشدار('سلام');
>> تعریف نشده

روش window.confirm() اجرا را متوقف می‌کند از برنامه و نمایش یک گفتگوی تایید که پیام ارائه شده را به عنوان آرگومان نشان می دهد و گزینه های OK یا Cancel را ارائه می دهد. اگر کاربر روی تأیید کلیک کند، مقادیر بولی true و اگر کاربر روی لغو کلیک کند false را برمی‌گرداند:

پنجره. تأیید('آیا می خواهید ادامه دهید؟');
>> تعریف نشده

روش window.prompt() اجرا را متوقف می‌کند از برنامه یک گفتگو را نشان می دهد که پیامی را که به عنوان آرگومان ارائه شده است، و همچنین یک فیلد ورودی را نشان می دهد که به کاربر اجازه می دهد متن را وارد کند. پس از کلیک کاربر بر روی OK، این متن به عنوان یک رشته بازگردانده می شود. اگر کاربر روی لغو کلیک کند، null برگردانده می‌شود:

پنجره. پست('لطفاً نام خود را وارد کنید :');

استفاده از دیالوگ های پنجره با دقت

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

مواقعی وجود دارد که از این عملکرد می‌توان به عنوان مزیت استفاده کرد، برای مثال، از یک دیالوگ window.confirm() می‌توان به عنوان بررسی نهایی استفاده کرد تا ببیند آیا کاربر می‌خواهد یک مورد را حذف کند یا خیر. منبع در حالی که کاربر تصمیم می گیرد چه کاری انجام دهد، این برنامه از ادامه برنامه و حذف منبع جلوگیری می کند.

همچنین شایان ذکر است که اکثر مرورگرها به کاربران اجازه می‌دهند هر دیالوگ‌هایی را که مکرر ظاهر می‌شوند غیرفعال کنند، به این معنی که ویژگی‌هایی نیستند که بتوان به آن اعتماد کرد.

اطلاعات مرورگر

شیء window دارای تعدادی ویژگی و روش است که اطلاعات مربوط به مرورگر کاربر را ارائه می دهد.

دریافت اطلاعات مرورگر با شی Navigator

شیء پنجره دارای یک ویژگی navigator است که مرجعی را به شی Navigator برمی‌گرداند. شیء Navigator حاوی اطلاعاتی درباره مرورگر مورد استفاده است. ویژگی userAgent آن اطلاعات مربوط به مرورگر و سیستم عامل مورد استفاده را برمی‌گرداند. به عنوان مثال، اگر خط کد زیر را اجرا کنم، نشان می دهد که از Safari نسخه 10 در سیستم عامل مک استفاده می کنم:

پنجره. ناوبر.userAgent
>>"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/602.4.8 (KHTML، مانند Gecko) نسخه/ 10.0.3 Safari/602.4.8"

به این اطلاعات تکیه نکنید، زیرا کاربر می تواند آن را تغییر دهد تا به عنوان یک مرورگر دیگر ظاهر شود. همچنین فهمیدن رشته بازگشتی ممکن است دشوار باشد، زیرا همه مرورگرها تا حدی وانمود می‌کنند که دیگران هستند. به عنوان مثال، هر مرورگر به دلایل سازگاری قدیمی با Netscape، رشته «Mozilla» را در ویژگی userAgent خود قرار می‌دهد. ویژگی userAgent از مشخصات رسمی منسوخ شده است، اما در همه مرورگرهای اصلی به خوبی پشتیبانی می‌شود.

دریافت جزئیات URL: مسیر، پروتکل، پورت‌ها و غیره.

ویژگی window.location یک شی است که حاوی اطلاعاتی در مورد URL صفحه فعلی است. این شامل تعدادی ویژگی است که اطلاعات مربوط به بخش های مختلف URL را ارائه می دهد.

ویژگی href URL کامل را به صورت رشته برمی گرداند:

پنجره. مکان.href
>> "https://www.sitepoint.com/premium/books/javascript-novice-to-ninja-2nd-edition /"

این ویژگی (و همچنین بسیاری از ویژگی های دیگر در این بخش) یک ویژگی خواندن/نوشتن است، به این معنی که می توان آن را با انتساب نیز تغییر داد. اگر این کار انجام شود، صفحه با استفاده از ویژگی جدید بارگذاری مجدد می شود. برای مثال، با وارد کردن خط زیر در کنسول مرورگر، صفحه به صفحه اصلی SitePoint هدایت می شود:

پنجره. مکان.href = 'https://www.sitepoint.com/'
>> "https://www.sitepoint.com/"

ویژگی پروتکل، رشته‌ای را برمی‌گرداند که پروتکل مورد استفاده را توصیف می‌کند (مانند http، https، pop2، ftp و غیره). توجه داشته باشید که یک دونقطه (:) در انتهای آن وجود دارد:

پنجره. مکان.پروتکل
>> "https:"

خاصیت host رشته‌ای را برمی‌گرداند که دامنه URL فعلی و درگاه را توصیف می‌کند (اگر از درگاه پیش‌فرض 80 استفاده شود، اغلب حذف می‌شود. ):

پنجره. مکان.میزبان
>> "www.sitepoint.com"

ویژگی hostname رشته‌ای را برمی‌گرداند که دامنه URL فعلی را توصیف می‌کند:

پنجره. مکان.نام میزبان
>> "www.sitepoint.com"

ویژگی port رشته‌ای را برمی‌گرداند که شماره پورت را توصیف می‌کند، اگرچه اگر پورت به صراحت در URL ذکر نشده باشد، یک رشته خالی برمی‌گرداند:

پنجره. مکان.پورت
>> ""

ویژگی pathname رشته‌ای از مسیری را که دامنه را دنبال می‌کند برمی‌گرداند:

پنجره. مکان.نام مسیر
>> "/premium/books/javascript-novice-to-ninja-2nd-edition/"

ویژگی search رشته‌ای را برمی‌گرداند که با یک «؟» شروع می‌شود. به دنبال آن پارامترهای رشته پرس و جو. اگر پارامترهای رشته پرس و جو وجود نداشته باشد، یک رشته خالی برمی گرداند. این چیزی است که وقتی برای “دارن جونز” در SitePoint جستجو می کنم، دریافت می کنم:

پنجره. مکان.جستجو
>> "?q=darren%20jones&firstSearch=true"

خواص hash رشته‌ای را برمی‌گرداند که با یک «#» شروع می‌شود و سپس شناسه قطعه قرار می‌گیرد. اگر شناسه قطعه وجود نداشته باشد، یک رشته خالی برمی گرداند:

پنجره. مکان.هش
>> ""

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

پنجره. مکان.مبداء
>> "https://www.sitepoint.com"

شیء window.location نیز روش‌های زیر را دارد:

• روش reload() را می‌توان برای بارگیری مجدد صفحه فعلی مورد استفاده قرار داد. اگر به آن پارامتری از true داده شود، مرورگر را مجبور می‌کند به جای استفاده از صفحه ذخیره‌شده، صفحه را از سرور بارگیری مجدد کند.
• assign() روش را می توان برای بارگیری منبع دیگری از URL ارائه شده به عنوان پارامتر استفاده کرد، به عنوان مثال:

پنجره.مکان .تخصیص( 'https://www.sitepoint.com/')

• روش replace() تقریباً مشابه روش assign() است، با این تفاوت که صفحه فعلی در سابقه جلسه ذخیره نخواهد شد، بنابراین کاربر نمی‌تواند با استفاده از دکمه برگشت به آن برگردد.
• روش toString() یک رشته حاوی کل URL را برمی‌گرداند:

پنجره .مکان.toString();
>> "https://www.sitepoint.com/javascript/"

تاریخچه مرورگر

ویژگی window.history را می‌توان برای دسترسی به اطلاعات مربوط به هر صفحه‌ای که قبلاً بازدید کرده‌اید در جلسه مرورگر فعلی استفاده کرد. از اشتباه گرفتن این مورد با API جدید HTML5 History خودداری کنید. (برای جزئیات به http://www.sitepoint.com/javascript-history-pushstate/ پست مراجعه کنید.)

ویژگی window.history.length نشان می‌دهد که چند صفحه قبل از رسیدن به صفحه فعلی بازدید شده است.

روش window.history.go() را می توان برای رفتن به یک صفحه خاص استفاده کرد، جایی که 0 صفحه فعلی است:

پنجره. تاریخچه.برو(1);
پنجره.تاریخچه.برو( 0);
پنجره.تاریخچه.برو( -1); 

همچنین روش‌های window.history.forward() و window.history.back() وجود دارد که می‌توان به ترتیب برای پیمایش یک صفحه به جلو و عقب استفاده کرد. درست مانند استفاده از دکمه های جلو و عقب مرورگر.

کنترل ویندوز

یک پنجره جدید را می توان با استفاده از روش window.open() باز کرد. این نشانی وب صفحه را به عنوان پارامتر اول، عنوان پنجره را به عنوان پارامتر دوم و فهرستی از ویژگی ها را به عنوان پارامتر سوم در نظر می گیرد. این همچنین می تواند به یک متغیر اختصاص داده شود، بنابراین پنجره می تواند بعداً در کد ارجاع داده شود:

const پنجره بازشو =  پنجره.باز('https://sitepoint.com'،'SitePoint','width=700,height=700,قابل تغییر اندازه =yes');

روش close() می‌تواند برای یک پنجره را ببندید، با فرض اینکه شما به آن اشاره دارید:

پاپ آپ.بستن(); 

همچنین امکان جابجایی پنجره با استفاده از روش window.moveTo() وجود دارد. این دو پارامتر را می گیرد که مختصات X و Y صفحه ای هستند که پنجره قرار است به آن منتقل شود:

پنجره. moveTo( ،);

می توانید با استفاده از روش window.resizeTo() اندازه یک پنجره را تغییر دهید. این دو پارامتر را می گیرد که عرض و ارتفاع ابعاد پنجره تغییر اندازه را مشخص می کند:

پنجره. resizeTo(600 ،400);

پرشوهای آزاردهنده

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

بسیاری از مرورگرها پنجره های پاپ آپ را مسدود می کنند و برخی از این روش ها را در موارد خاص فراخوانی نمی کنند. به عنوان مثال، اگر بیش از یک برگه باز باشد، نمی توانید اندازه یک پنجره را تغییر دهید. همچنین نمی‌توانید پنجره‌ای را که با استفاده از window.open() ایجاد نشده است جابه‌جا یا تغییر اندازه دهید.

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

اطلاعات صفحه

شیء window.screen حاوی اطلاعاتی درباره صفحه‌ای است که مرورگر در آن نمایش داده می‌شود. با استفاده از ویژگی‌های height و width به‌ترتیب می‌توانید ارتفاع و عرض صفحه را بر حسب پیکسل دریابید:

پنجره. صفحه نمایش.ارتفاع
>> 1024
پنجره.صفحه نمایش.عرض
>> 1280

availHeight و availWidth را می‌توان برای یافتن ارتفاع و عرض صفحه، به استثنای هر گونه منوی سیستم عامل استفاده کرد:

پنجره. صفحه نمایش.availWidth
>> 1280
پنجره.صفحه نمایش.availHeight
>> 995

ویژگی colorDepth را می‌توان برای یافتن عمق بیت رنگ مانیتور کاربر استفاده کرد، اگرچه موارد استفاده کمی برای انجام این کار به جز جمع‌آوری آمار کاربر وجود دارد:

پنجره. صفحه نمایش.colorDepth ;
>> 24

مفیدتر در موبایل

شیء Screen کاربرد بیشتری برای دستگاه های تلفن همراه دارد. همچنین به شما امکان می دهد کارهایی مانند خاموش کردن صفحه نمایش دستگاه، تشخیص تغییر جهت آن یا قفل کردن آن در یک جهت خاص انجام دهید.

با احتیاط استفاده کنید

بسیاری از روش‌ها و ویژگی‌های پوشش داده‌شده در بخش قبل در گذشته برای فعالیت‌های مشکوک مانند بو کشیدن عامل کاربر، یا تشخیص ابعاد صفحه برای تصمیم‌گیری در مورد نمایش یا عدم نمایش عناصر خاص مورد سوء استفاده قرار گرفتند. این شیوه‌ها (خوشبختانه) اکنون با روش‌های بهتری مانند پرسش‌های رسانه‌ای و تشخیص ویژگی جایگزین شده‌اند که در فصل بعدی پوشش داده می‌شود.

منبع: https://webmastertabriz.ir/11-روند-جذاب-طراحی-وب-برای-سال-2023/