JavaScript is commonly used in web browsers for rendering content. To help with this, almost all browsers have built in support for JavaScript, which includes a standard library of objects that can be used by web apps to do common functionality. The browser itself has a user interface where users type in a URL and then the website loads up and rendered for the user to see. Most websites have HTML, CSS, and JavaScript code. Loading the page can take some time on poorly coded websites. HTML defines the sections of a website, the CSS controls the static styling and layout, and the JavaScript contains the code for controlling the dynamic functionality.

When a user types in a URL, the HTML portion of the website first loads along with the CSS. The the JavaScript code loads line by line in the browser. All the code that is loaded has to be parsed and interpreted by the browser to render them properly on screen. Browsers parse HTML code into a tree model called the Document Object Model (DOM). It’s a full map of a web page, and you can access different parts of the DOM by using JavaScript. Then CSS is parsed which will load the styles defined by the CSS code. Finally, the JavaScript code runs which manipulates the DOM elements that was loaded previously depending on the JavaScript code written. Styling can also be applied with JavaScript dynamically. Loading a website quickly is crucial if you want to keep your visitors since they’re impatient. We can load code that don’t need to be loaded immediately in the background to avoid code holding up a page from loading.

The Browser Object Model

Almost all web browsers support JavaScript and all of those browser will have a set of built in objects which can be accessed by developers to manipulate the page. This is called the Browser Object Model or BOM for short, and it’s series of APIs that can be used by developers to write their web apps.

The Navigator Object

The navigator object is a JavaScript object built into browsers that has the basic properties of the browser, the kind of computer the browser is installed on, and some geolocation data. Pretty much all modern browsers have this, and you can access the following data from it:

• appCodeName , has the code name of the browser
• appName, has the name of the browser
• appVersion , has the browser version
• cookieEnabled , tells us whether the browser has cookies enabled
• geolocation , has physical location data if geolocation is enabled
• language , gets the language of the browser
• onLine , tells us whether the browser is online
• platform , gets the platform that the browser is running on.
• product , gets the engine name of the browser
• userAgent, has the user agent string that’s sent in HTTP requests to web servers
• battery , tells us the charging status for the battery of the device if it exists
• connection , tells us the connection status of the browser
• hardwareConcurrency , has the number of logical processors of the device,
• keyboard , tells us the keyword layout of the device
• serviceWorker , tells us data about service workers, which lets web apps have offline functionality and installation / un-installation functionality for progressive web apps
• storage , tells us the storage capabilities of the device the browser is running on

All the properties of the navigator object listed above are read only.

If we enter navigator in our browser console, we get the full list of properties of the navigator object.

<img class="do t u gu ak" src="https://miro.medium.com/max/2732/1*qJVRv6xdNNEToXeyfdcEHQ.png" width="1366" height="728" role="presentation"/>

The navigator object’s properties

To detect whether a browser support certain functionality, we should check if the built in browser object has the properties and methods that you want to use.

The Window Object

The window object has the data about the browser window, which is where web pages in the browser is shown. Each tab of the browser has its own instance of the window object.

The following properties are available in the window object in most browsers:

• closed , boolean value indicating whether a window has been closed or not
• defaultStatus , gets or sets the default text in the status bar of a window
• document , the document object of the window, which lets us manipulate the DOM.
• frameElement , Gets the element, such as <iframe> or <object> that the window is embedded in
• frames , list all frames in the current window
• history , has the browser history of the current window
• innerHeight , inner height of the current window, a read only property
• innerWidth , inner width of the current window, a read only property
• length , number of frames in the window, a read only property
• location , gets the location object, which lets us traverse to different URLs and manipulate the browser history.
• name , lets us get or set the name of the window
• navigator , has the navigator object we discussed above
• opener , gets the window object that created the current window
• outerHeight , the outer height of the window, including scrollbars and toolbars
• pageXOffset , retrieves the number of pixels that’s scrolled horizontally in the window
• pageYOffset, retrieves the number of pixels that’s scrolled vertically in the window
• parent , object for the parent of the current window
• screen , Screen object of the window
• screenLeft , the horizontal distance in pixels from the left side of the main screen to the left side of the current window
• screenTop, the vertical distance in pixels from the top of the window relative to the top of the screen
• screenX, the horizontal coordinate relative to the screen
• screenY, the vertical coordinate relative to the screen
• self, the current window
• top , the topmost browser window

We can do lots of things with the window object. Some of the most common include getting screen size, the scroll position, and navigation between pages.

Note that if we define a global variable, it automatically attaches itself as a property of the window object, so if we have a = 1 defined globally, then window.a is 1.

With the window.location object, we can navigate to a URL by setting window.location.href . So if we want to go to the Medium website we write:

window.location.href = 'http://www.medium.com';

The window.innerWidth and window.innerHeight provides us with the width and height of the current browser window.

We can go back to the previous page by writing:

window.history.go(-1)

And get the size of the browser history with:

window.history.length;

The window object also has a list of methods that we can use to display alert boxes, prompt users for data, move and resize the window, and many other things. A list of methods in the window object is below:

• alert() , displays an alert box with a message and an OK button
• atob() , decodes a base-64 encoded string
• blur() , make the current window lose focus
• clearInterval() , cancel the timer returned by setInterval()
• clearTimeout() , cancel the timer returned by setTimeout()
• close() , close the window instance created
• confirm() , displays a dialog box with an optional message with OK and cancel buttons
• createPopup() , creates a pop-up window
• focus() , sets the current window into focus
• moveBy() , moves the current window by a specified amount
• moveTo() , move a window to a specified position
• open() , opens a new window
• print() , prints the contents of the current window
• prompt() , displays a dialogue box prompting the user for input
• resizeBy() , resizes the window by a specified number of pixels
• resizeTo() , resizes a window to a specified height and width i pixels.
• scrollBy() , scrolls the document by a specified amount of pixels
• scrollTo() , scrolls the document to a specific set of pixel coordinates
• setInterval() , repeatedly call a function at an interval specified in milliseconds
• setTimeout() , calls function a specified amount of time in milliseconds
• stop() , stops the current window from loading

Because of security reasons, the focus, open, move and resize methods can only be called on a window that is opened by your own code, because being able to open window that’s not generated by someone’s own code will be exploited by malicious programmers to do undesired things to other user’s computers.

For example, to use the moveBy method must be used as follows:

const newWindow = window.open('', 'My Window', 'width=250, height=250'); newWindow.document.write("<p>This is my window.</p>");  
newWindow.moveBy(250, 250);                                  
newWindow.focus();

These are the most common built in browser objects and properties and methods associated with it. They can be used for some manipulation, and functions like setInterval and setTimeout for executing things that depend on time.

Sign up for web hosting with Siteground