Obiekt navigator
w JavaScript zawiera informacje o przeglądarce i systemie operacyjnym użytkownika. Jest to bardzo przydatne narzędzie do identyfikacji środowiska, w którym działa nasza aplikacja webowa, co umożliwia dostosowanie funkcjonalności lub wyświetlanych treści do konkretnych przeglądarek lub urządzeń. W tej lekcji przyjrzymy się bliżej różnym właściwościom i metodom obiektu navigator
, które mogą być użyteczne w różnych przypadkach użycia.
Przykład użycia navigator
Poniżej znajduje się kompletny przykład kodu HTML z JavaScript, ilustrujący różne sposoby wykorzystania obiektu navigator
.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wykorzystanie obiektu navigator w JavaScript</title>
</head>
<body>
<h3>Informacje o przeglądarce i systemie operacyjnym</h3>
<div id="info"></div>
<script>
// Znacznik do wyświetlania informacji
const info = document.getElementById('info');
// Wyświetlanie nazwy przeglądarki
const browserName = navigator.appName;
const browserVersion = navigator.appVersion;
const userAgent = navigator.userAgent;
const isOnline = navigator.onLine;
const platform = navigator.platform;
// Dodanie informacji do elementu DOM
info.innerHTML = `
<p>Nazwa przeglądarki: ${browserName}</p>
<p>Wersja przeglądarki: ${browserVersion}</p>
<p>Agent użytkownika: ${userAgent}</p>
<p>Czy jest połączenie z internetem: ${isOnline ? 'Tak' : 'Nie'}</p>
<p>Platforma: ${platform}</p>
`;
// Przykład wykrywania trybu online/offline
window.addEventListener('online', () => alert('Powrót do trybu online'));
window.addEventListener('offline', () => alert('Brak połączenia z internetem'));
// Informacje o języku przeglądarki
const browserLanguage = navigator.language;
info.innerHTML += `<p>Język przeglądarki: ${browserLanguage}</p>`;
// Wykrywanie czy urządzenie jest mobilne
const isMobile = /Mobi|Android/i.test(navigator.userAgent);
info.innerHTML += `<p>Czy urządzenie mobilne: ${isMobile ? 'Tak' : 'Nie'}</p>`;
</script>
</body>
</html>
Opis przykładu
- Nazwa i wersja przeglądarki:
navigator.appName
inavigator.appVersion
dostarczają ogólne informacje o przeglądarce i jej wersji. - Agent użytkownika:
navigator.userAgent
zawiera szczegółowe informacje o przeglądarce, systemie operacyjnym oraz platformie sprzętowej. - Stan połączenia:
navigator.onLine
zwraca wartośćtrue
lubfalse
, w zależności od tego, czy urządzenie jest połączone z internetem. - Platforma:
navigator.platform
informuje o systemie operacyjnym urządzenia. - Język przeglądarki:
navigator.language
zwraca preferowany język ustawiony w przeglądarce. - Wykrywanie urządzenia mobilnego: za pomocą wyrażenia regularnego testowane jest, czy agent użytkownika zawiera słowa kluczowe związane z urządzeniami mobilnymi.
Podsumowanie
Obiekt navigator
dostarcza szerokiej gamy informacji o przeglądarce i systemie operacyjnym użytkownika, co umożliwia dostosowanie aplikacji webowych do specyficznych potrzeb i ograniczeń.
Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs JavaScript od podstaw w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.