سلام به همه عزیزان
خوش آمدید به این مقاله از ویسایت فرانت کد
امروز میخواییم شی یا آبجکت navigator در جاوا اسکریپت را بررسی کنیم.
اول بریم ببینیم که اصلا این آبجکت چی هست و سپس باهم چندتا مثال بزنیم.
آبجکت navigator
ویژگی navigator یک window (به عنوان مثال window.navigator) ارجاع به یک آبجکت navigator است.
این یک property فقط خواندنی یا به اصطلاح (read only)
است که حاوی اطلاعاتی در مورد مروگر کاربر می باشد.
از آنجایی که window یک آبجکت سراسری است و در بالای زنجیره scope قرار دارد, بنابراین پراپرتی های شی window مانند window.navigator بدون پیشوند window نیز قابل دسترسی می باشند.
برای مثال شما میتوانید به جای window.navigator.clipboard
از navigator.clipboard استفاده کنید.
خب تا مثال نزنیم که کامل متوجه نمیشیم!
بریم باهم چندتا مثال بزنیم…
تشخیص آنلاین یا آفلاین بودن مرورگر
شما برای این مورد میتوانید از ویژگی navigator.onLine برای تشخیص آنلاین یا آفلاین بودن مرورگر (یا، application) استفاده کنید. این ویژگی یک مقدار Boolean به معنای true آنلاین یا false به معنای آفلاین برمی گرداند.
<button onclick="checkConnectionSatus()">check connection status</button>
<script>
function checkConnectionSatus() {
if (navigator.onLine) {
alert('آنلاین')
}
else {
alert('آفلاین')
}
}
</script>
مرورگر رویدادهای آنلاین و آفلاین را هنگامی که اتصال برقرار یا از بین می‌رود را فعال می نماید. شما می توانید توابع کنترل کننده را به این رویدادها وصل کنید تا برنامه خود را برای سناریوهای آنلاین و آفلاین سفارشی نمایید.
خروجی کد بالا در مرورگر:
وقتی مرورگر ما به اینترنت متصل است
وقتی مرورگر ما به اینترنت متصل نیست
خب بیایید با چیزایی که تا الان یاد گرفتیم یک مینی پروژ ایجاد کنیم.در این پروژه ما با استفاده از رویداد addEventListener و پراپرتی های Navigator گفتیم که هنگام لود یا انلاین یا افلاین شدن به کمک تابع ()updateConnectionStatus ،افلاین یا انلاین بودن کاربر را برا ما نمایش دهد.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>front-code.ir</title>
<style> body { text-align: center; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } #status { border: 2px solid; padding: 15px 20px 15px 40px; width: 160px; margin: 0 auto; border-radius: 20px; font-size: 30px; font-weight: bold; text-transform: uppercase; position: relative; display: flex; justify-content: center; align-items: center; } #status.online { color: green; } #status.offline { color: red; } #status.online::before, #status.offline::before { width: 15px; height: 15px; content: ""; border-radius: 15px; box-shadow: 0 0 8px; position: absolute; left: 30px; } #status.online::before { background-color: green; animation: online_status_Animate 1s infinite; } #status.offline::before { background-color: red; animation: offline_status-Animate 1s infinite; } @keyframes online_status_Animate { 0%{ background-color: green; } 100% { background-color: rgba(0, 128, 0,0.3); } 0%{ background-color: green; } } @keyframes offline_status-Animate { 0%{ background-color: red; } 100% { background-color: rgba(255, 0, 0,0.3); } 0%{ background-color: red; } } #hint{ font-weight: bold; font-size: 17px; } </style>
</head>
<body>
<div id="status"></div>
<p id="hint"></p>
<p>اتصال اینترنت خود را روشن/خاموش کنید تا ببینید چگونه کار می کند</p>
<script>
var hint = document.getElementById('hint')
function updateConnectionStatus() {
var status = document.getElementById('status')
if (navigator.onLine) {
status.innerHTML = "online"
status.classList.add('online')
status.classList.remove('offline')
hint.innerHTML = "شما آنلاین هستید"
hint.style.color = "green"
}
else {
status.innerHTML = "offline"
status.classList.add('offline')
status.classList.remove('online')
hint.innerHTML = "به نظر می رسد آفلاین هستید"
hint.style.color = "red"
}
}
window.addEventListener('load', updateConnectionStatus)
window.addEventListener('online', function (e) {
updateConnectionStatus()
})
window.addEventListener('offline', function (e) {
updateConnectionStatus()
})
</script>
</body>
</html>
خروجی کد در مرورگر :
وقتی کاربر به اینترنت متصل است
وقتی کاربر به اینترنت متصل نیست
دانلود سورس کد کامل این مینی پروژه : دانلود سورس کد
بریم ادامه مثال ها:
بررسی فعال یا غیر فعال بودن کوکی ها
برای این مورد شما می توانید از navigator.cookieEnabled برای بررسی اینکه آیا کوکی ها در مرورگر کاربر فعال هستند یا خیر استفاده کنید. اگر کوکی‌ها فعال باشند، این ویژگی یک مقدار بولی true یا اگر فعال نباشد، مقدار false را برمی‌گرداند.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>front-code</title>
</head>
<body>
<button id="check"
onclick="checkCookie()">بررسی کنید که آیا کوکی ها فعال هستند</button>
<script>
function checkCookie()
{
if(navigator.cookieEnabled)
{
alert('کوکی ها در مرورگر شما فعال هستند')
}
else
{
alert('کوکی ها در مرورگر شما فعال نیستند')
}
}
</script>
</body>
</html>
نکته: قبل از ایجاد یا استفاده از کوکی‌ها در کد جاوا اسکریپت، باید از
ویژگی navigator.cookieEnabled برای تعیین فعال بودن یا نبودن کوکی‌ها استفاده نمایید.
تشخیص زبان مرورگر
برای تشخیص زبان رابط کاربری مرورگر شما می توانید از ویژگی navigator.language استفاده کنید. این پراپرتی رشته ای را برمی گرداند که نشان دهنده نوع زبان است، به عنوان مثال. “en”، “en-US”، و ….
<button onclick="checkLang()">check language</button>
<script>
var checkLang = () => {
alert(`زبان مرورگر شما : ${navigator.language}`)
}
</script>
نحوه دریافت اطلاعات نام و نسخه مرورگر
ابجکت Navigator در جاوا اسکریپت دارای پنج پراپرتی اصلی است که اطلاعات نام و نسخه را در مورد مرورگر کاربر ارائه می دهد. لیست زیر نمای کلی از این ویژگی ها را نشان می دهد:
ابجکت Navigator در جاوا اسکریپت دارای پنج پراپرتی اصلی است که اطلاعات نام و نسخه را در مورد مرورگر کاربر ارائه می دهد. لیست زیر نمای کلی از این ویژگی ها را نشان می دهد:
appName نام مرورگر را برمی گرداند.که برای همه مرورگرها این مقدار “Netscape” می باشد.
appVersion شماره نسخه و سایر اطلاعات مربوط به مرورگر را برمی گرداند.
appCodeName نام کد مرورگر را برمی گرداند.که برای همه مرورگرها این مقدار “Mozilla” می باشد.
userAgent یوزر ایجنت را برای مرورگر فعلی برمی‌گرداند. این ویژگی معمولاً شامل تمام اطلاعات در appName و appVersionمیباشد.
platform پلتفرمی را که مرورگر در آن در حال اجرا است برمی‌گرداند (مانند “Win32″، “WebTV OS”، و …)
<button onclick="getBrowserInfo()">click and see browser information</button>
<script>
function getBrowserInfo()
{
var info = "نام برنامه : " + navigator.appName
info+= "\n ورژن : " + navigator.appVersion
info += `\n نام کد برنامه : ${navigator.appCodeName}`
info+= `\n یوزر ایجنت : ${navigator.userAgent}`
info+= `\n پلتفرم : ${navigator.platform}`
alert(info)
}
</script>
خروجی ی همچین چیزی میشه:
بررسی فعال یا غیر فعال بودن جاوا در مرورگر
برای این مورد شما میتوانید از متد ()javaEnabled برای بررسی اینکه آیا در مرورگر فعلی جاوا فعال است یا خیر، استفاده نمایید.
این متد به سادگی نشان می‌دهد چیزی که جاوا را کنترل می‌کند روشن است یا خاموش.این متد برای این نیست که به شما نشان دهد آیا مرورگر از جاوا پشتیبانی می‌کند؟ یا جاوا روی سیستم کاربر نصب شده است یا خیر.
فقط به این نکته توجه داشته باشید که javaenabled
یک متد است حتما جلوش () بزارید
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="checkLang()">check language</button>
<script>
var checkLang = () => {
alert(`زبان مرورگر شما : ${navigator.language}`)
}
</script>
</body>
</html>
خب دوستان گرامی به پایان بخش ابجکت Navigator در جاوا اسکریپت رسیدیم امیدواریم این بخش نیز مورد توجه شما قرار گیرد.
همیشه گفتم بازم میگم تمرین یادتون نره
