دریافت اطلاعات کاربر با navigator و screen

آموزش جاوااسکریپت

مقدمه

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

آشنایی با شیء Navigator

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

پراپرتی‌های رایج navigator

  • userAgent: یک رشته متنی که اطلاعات کاملی از مرورگر، نسخه و سیستم عامل را در خود دارد. تحلیل این رشته پیچیده است و معمولاً برای تشخیص‌های کلی به کار می‌رود.
  • language: زبان ترجیحی کاربر در مرورگر را نشان می‌دهد (مثلاً "en-US" یا "fa-IR").
  • cookieEnabled: یک مقدار بولی (boolean) که نشان می‌دهد آیا کوکی‌ها در مرورگر فعال هستند یا خیر.
  • onLine: یک مقدار بولی که وضعیت اتصال به اینترنت را مشخص می‌کند.
Copy Icon JAVASCRIPT 
console.log('User Agent:', navigator.userAgent);
console.log('Language:', navigator.language);
console.log('Cookies Enabled:', navigator.cookieEnabled);
console.log('Is Online:', navigator.onLine);

کد بالا پراپرتی‌های اصلی شیء navigator را در کنسول چاپ می‌کند. با بررسی این مقادیر می‌توانیم رفتار اپلیکیشن خود را تنظیم کنیم؛ برای مثال، اگر `navigator.onLine` برابر با false باشد، می‌توانیم یک پیام آفلاین بودن به کاربر نمایش دهیم.

موقعیت‌یابی جغرافیایی (Geolocation)

یکی از قدرتمندترین APIهایی که از طریق شیء navigator در دسترس است، Geolocation API است. این API که از طریق `navigator.geolocation` قابل دسترسی است، به ما اجازه می‌دهد موقعیت جغرافیایی کاربر را (البته پس از دریافت مجوز از او) به دست آوریم.

Copy Icon JAVASCRIPT 
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
  console.log("Geolocation is not supported by this browser.");
}

function showPosition(position) {
  console.log("Latitude: " + position.coords.latitude);
  console.log("Longitude: " + position.coords.longitude);
}

function showError(error) {
  console.warn(`ERROR(${error.code}): ${error.message}`);
}

در این کد، ابتدا بررسی می‌کنیم که آیا مرورگر از Geolocation پشتیبانی می‌کند یا خیر. در صورت پشتیبانی، متد getCurrentPosition() را فراخوانی می‌کنیم. این متد دو تابع به عنوان ورودی می‌گیرد: اولین تابع در صورت موفقیت (و پس از تایید کاربر) با یک شیء position اجرا می‌شود و دومین تابع در صورت بروز خطا فراخوانی خواهد شد.

آشنایی با شیء Screen

شیء screen اطلاعاتی درباره مشخصات فیزیکی صفحه نمایش کاربر ارائه می‌دهد. این اطلاعات با ابعاد پنجره مرورگر (`window.innerWidth`) تفاوت دارد و به کل صفحه نمایش اشاره می‌کند.

پراپرتی‌های کلیدی screen

  • width / height: عرض و ارتفاع کل صفحه نمایش به پیکسل.
  • availWidth / availHeight: عرض و ارتفاع قابل استفاده صفحه نمایش (بدون در نظر گرفتن نوارهای سیستم عامل مانند Taskbar).
  • colorDepth: عمق رنگ صفحه نمایش را بر حسب بیت بر پیکسل برمی‌گرداند.
  • pixelDepth: مشابه colorDepth است و برای سازگاری بیشتر استفاده می‌شود.
Copy Icon JAVASCRIPT 
console.log('Total Screen Size:', screen.width + 'x' + screen.height);
console.log('Available Screen Size:', screen.availWidth + 'x' + screen.availHeight);
console.log('Color Depth:', screen.colorDepth);

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

در این درس یاد گرفتیم که چگونه با استفاده از اشیاء navigator و screen اطلاعاتی درباره محیط کاربر به دست آوریم. این اطلاعات شامل مشخصات مرورگر، وضعیت اتصال، موقعیت جغرافیایی و ابعاد صفحه نمایش بود. با این درس، مباحث مربوط به BOM را به پایان می‌رسانیم. اکنون آماده‌ایم تا وارد یکی از مهم‌ترین و گسترده‌ترین مباحث جاوااسکریپت در سمت کاربر، یعنی DOM یا Document Object Model شویم. در فصل بعد، یاد می‌گیریم که DOM چیست و چگونه می‌توانیم با استفاده از جاوااسکریپت، محتوا و ساختار یک صفحه وب را به صورت پویا تغییر دهیم.

```