JavaScript browser variables

When used with a browser, JavaScript uses two reserved keywords for special object variables that contain information about the browser:

• navigator
  • the browser program
• window
  • the browser window that displays on the user's desktop
  • in modern browsers, this now means the current browser tab
  • within this object are properties such as
    • screen
      • information about the browser tab's physical dimensions
    • document
      • information about the content of the browser tab

The navigator object

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

• 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/136.0.0.0 Safari/537.36'

• onLine
  • a Boolean showing whether the user has an internet connection
    • useful for streaming sites!

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

• language
  • a string showing the user's language preference (adjusted via browser settings)
    • useful for localization!

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

MDN provides a full list of navigator properties!

The window object

The window object includes a set of properties and methods dealing with the browser's current physical dimensions and content:

• innerWidth and innerHeight
  • numbers showing the current width and current height of the window (i.e. browser tab's) content area
• location
  • an object with properties showing information about the current URL in the window such as:
    • href (the full URL, e.g. https://www.jonchius.com/code)
    • host (the domain name, e.g. www.jonchius.com)
    • protocol (usually http: or https:)
• document
  • an object with properties and methods mostly dealing with the HTML content such as:
    • getElementById
    • querySelector

We will look further into document methods in the DOM access page!