🟨JavaScript navigator + window + document

more about JavaScript with the browser

With JavaScript, we can get information about

• the browser (navigator)

• the browser window (Window) instance that displays on the users's desktop

• the current page (document)

navigator

The navigator object includes a set of read-only properties that determines the user's browser, some include:

• userAgent

  • a string showing the user's browser brand and operating system

console.log(navigator.userAgent)
// 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36'

• onLine

  • a boolean showing whether the user has an internet connection (very useful for streaming sites where we can show an "offline" interface if the user has lost their internet connection)

console.log(navigator.onLine)
// true (if online)
// false (if offline)

• language

  • a string showing the user's language preference (useful for localization)

console.log(navigation.language)
// en-CA (English in Canada)

We can view a full list at MDN!

window

The window object includes a set of properties and methods that deal wtih the actual browser window in a user's desktop, most include this container's dimensions:

• innerWidth and innerHeight

  • a number showing the width and height of the browser window (in pixels)

• location

  • an object with properties showing information about the current URL in the window such as:

    • href (the full URL)

    • host (e.g. 'https://www.google.com') or "domain"

    • protocol (e.g. 'https:')

document

The document object includes a set of properties and methods that deal with the page in the current window , most include HTML content, as we have seen in the past few pages:

• innerHTML

• getElementById

• querySelector