Наповнення JS розділу

Добридень, Пані та Панове, завдяки вам вдалося зібрати більше 19тис грн з необхідних 15тис на впровадження JS розділу.

JS розділ вже впроваджено - переходимо до його наповнення і почнемо бігти довгий марафон, адже JS має більше 1100 різноманітних методів, властивостей, подій і т.д., які необхідно описати.

Будемо працювати, і вдень, і вночі, щоб орієнтовно взимку закінчити наповнювати JS розділ!

Ви також можете допомогти нам в цьому. Долучайтеся до нашої спільноти в дискорді - ставайте її частиною і допомагайте нашому розвитку.

Також, підтримуйте нас матеріально.

JS об'єкт Navigator

Отримання базової інформації про браузер

Об'єкт Navigator в JavaScript є частиною API браузера, який надає інформацію про браузер та операційну систему. Через Navigator можна отримувати дані про версію браузера, платформу, на якій він працює, і іншу інформацію, що може бути корисною при адаптації веб-застосунків під конкретне середовище користувача.

Однією з основних завдань при роботі з об'єктом Navigator є визначення специфікацій користувацького середовища.

Версія браузера:

navigator.userAgent: Ця властивість повертає рядок, що ідентифікує браузер, так що веб-сайт може вирішити, як відображати контент або які функції використовувати.

console.log(navigator.userAgent);

Коли ви запустите цей код, ви побачите довгий рядок, який містить інформацію про ваш браузер, версію і платформу.

Платформа:

navigator.platform: Іноді може бути корисно знати, на якій платформі працює браузер (Windows, MacOS, Linux тощо).

console.log(navigator.platform);

Запустивши цей код, ви дізнаєтеся про операційну систему, яку використовує ваш комп'ютер.

Мовні налаштування:

navigator.language: Знаючи мовні налаштування користувача, ви можете автоматично відображати контент на відповідній мові або надавати рекомендації щодо мови.

console.log(navigator.language);

При запуску цього коду виведеться мовний код, наприклад "en-US" для американської англійської мови.

Робота з геолокацією

Об'єкт Navigator надає доступ до API геолокації, який дозволяє отримувати фізичне місцезнаходження пристрою.

Отримання поточного місцезнаходження:

navigator.geolocation.getCurrentPosition(): Цей метод надає поточне місцезнаходження користувача (якщо він дав згоду на його використання).

navigator.geolocation.getCurrentPosition(function(position) {
    console.log("Latitude:", position.coords.latitude);
    console.log("Longitude:", position.coords.longitude);
});

Коли ви запустите цей код, він запитає дозвіл на доступ до геолокації. Після отримання дозволу він виведе вашу широту та довготу.

Відстеження місцезнаходження:

navigator.geolocation.watchPosition(): Цей метод повертає ідентифікатор, який можна використовувати для відстеження змін місцезнаходження користувача в реальному часі.

let watchID = navigator.geolocation.watchPosition(function(position) {
    console.log("Latitude:", position.coords.latitude);
    console.log("Longitude:", position.coords.longitude);
});

// Для зупинки відстеження
// navigator.geolocation.clearWatch(watchID);

Після запуску цього коду ваше місцезнаходження буде відстежуватися та виводитися кожен раз, коли воно змінюється.

Нотатка:

Коли працюєте з геолокацією, завжди пам'ятайте про приватність користувача. Ніколи не зберігайте місцезнаходження користувача без його відома або згоди.

Нотатка:

Для деяких функцій, таких як геолокація, браузери можуть вимагати дозвіл користувача. Уважно працюйте з цими запитами, інформуючи користувача, чому саме вам потрібен доступ до цієї інформації.

Нотатка:

Деяка інформація, яку надає Navigator, може бути використана зловмисниками для цілеспрямованих атак на користувачів. Важливо обережно використовувати інформацію, отриману з Navigator, та не викладати її в публічний доступ без необхідності.

Додаткова інформація про браузер може бути корисною для адаптації засобів, проте завжди слід ставитися обережно до інформації, яка відкривається третім сторонам, щоб забезпечити конфіденційність користувачів.

Порада:

Хоча об'єкт Navigator є стандартною частиною більшості сучасних браузерів, завжди варто перевіряти, чи підтримується конкретний метод або властивість, перш ніж його використовувати.

Синтаксис

let ua = navigator.userAgent;

Переглядачі

Переглядач

1

1

1

3

12

Переглядач

4.4

18

4

1

Переглядач

1.8

Приклади


В цьому прикладі ми використовуємо властивість navigator.language для отримання мови, яку вибрав користувач у своєму браузері. Це може бути корисно для завантаження правильних мовних ресурсів на веб-сайті.

let userLang = navigator.language || navigator.userLanguage; 
console.log(`Мова користувача: ${userLang}`);

В коді перевіряється наявність geolocation в об'єкті navigator, і якщо ця можливість доступна, отримуємо поточну позицію користувача.

if ("geolocation" in navigator) {
  navigator.geolocation.getCurrentPosition(function(position) {
    console.log(`Широта: ${position.coords.latitude}, Довгота: ${position.coords.longitude}`);
  });
} else {
  console.log("Geolocation не підтримується цим браузером");
}

Сервісні робітники - це одна з ключових технологій, що дозволяють створювати прогресивні веб-застосунки (PWA). Щоб гарантувати, що сервісні робітники підтримуються браузером, можна використовувати об'єкт Navigator.

Тут ми перевіряємо, чи підтримує браузер сервісних робітників, і якщо так, реєструємо сервісний робітник з файлу service-worker.js.

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
  .then(function(registration) {
    console.log('Сервісний робітник зареєстровано:', registration);
  })
  .catch(function(error) {
    console.log('Реєстрація сервісного робітника не вдалася:', error);
  });
} else {
  console.log('Сервісні робітники не підтримуються цим браузером.');
}

Методи

javaEnabled()
Перевіряє підтримку Java у браузері користувача.
taintEnabled()
Перевіряє, чи ввімкнено в браузері механізм "забруднення" даних.

Властивості

appCodeName
Відображає кодову назву браузера, в якому виконується код.
appName
Повертає назву браузера, який виконує код.
appVersion
Повертає версію браузера, який використовує користувач.
cookieEnabled
Повідомляє, чи ввімкнено підтримку cookies в браузері користувача.
geolocation
Надає доступ до API геолокації для визначення місцезнаходження користувача.
language
Повідомляє про переважну мову користувача, налаштовану в браузері.
onLine
Визначає, чи має користувач підключення до інтернету.
platform
Повертає рядок, який ідентифікує операційну систему користувача.
product
Повідомляє назву рушія браузера.
userAgent
Повідомляє про рядок агента користувача, що ідентифікує браузер.