Obiekt navigator

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 i navigator.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 lub false, 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.

Poprzedni
Następny
Scroll to Top