History Object and Navigator object

JavaScript BOM: History Object and Navigator Object

In our last article, we talked about Browser objects, and we highlighted that there were five Browser objects in Javascript - The Window object, History Object, Navigator Object, Screen Object, and Document Object. And in the last article, we only talked about the Window object because of the length of the article.

So, today, We'll be checking out the History and Navigator objects. We won't cover every single thing, but you'll learn enough to know How they work? And how to apply them in real situations.

If you haven't read the last article, read it HERE

Now, let's go straight into the article and start with Javascript History Object before we move on to all you need to know about Javascript Navigator Objects.

Javascript History Object

When you activate the web browser & then open a new webpage, it adds a new entry to the history stack. When you visit another webpage, the web browser adds a new record to the history stack.

The history stack saves the previous and current pages you've viewed. The history object - a property of the window object, is used to control the history stack.

window.history

It is not feasible to query the pages that a user has viewed for security reasons. You may, however, move back and forth using the history object without requiring the specific URL.

The following methods and attributes are available to the object:

history.length - This is a property that stores the number of URLs in the history.

history.back() - This is the equivalent of using the browser's Back button.

history.forward() is the same as using the browser's Forward button.

history.go() - accepts a positive or negative number as an input to determine how many changes are in the history. For instance, history.go(-3) is equal to using the browser's Back button three times. While pressing the forward button four times will be denoted as history.go(4.)

Example Using the history.back() Function

<html>
<head>
<title>HubToLearn back() example</title>
</head>
<body>
<b>Hit the back button</b>
<input type="button" value="Back" onclick="previousPage()">
<script>
function previousPage() {
	window.history.back();
}
</script>
</body>
</html>

Example Using the history.forward() Function

<html>
<head>
<title>HubToLearn forward() example</title>
</head>
<body>
<b>Hit the forward button</b>
<input type="button" value="Forward" onclick="NextPage()">
<script>
function NextPage() {
	window.history.forward()
}
</script>
</body>
</html>

Keep in mind that if the next page doesn't exist in the history list, the example provided above will fail. When you wish to utilize the forward button on your website, use this code. It functions precisely like your browser's forwarding button. It will not operate if the next page doesn't exist.

Example Using the history.go() Function

<html>
<head>
<title>HubToLearn go() example</title>
</head>
<body>
<input type="button" value="go" onclick="NextPage()">
<script>
function NextPage() {
	window.history.go(3);
}
</script>
</body>
</html>

Keep in mind that this example will fail if the next three pages are missing from the history list.

Now, that's all you need to know about Javascript History Object. We'll now be heading on to the Navigator Object. Then, In the next article I'll be writing; after this, we'll take a look at the Screen Object and Document Objects.

Javascript Navigator Object

JavaScript Navigator Object contains information about your current browser that you use to visit a web application. You may be aware that each browser is unique and that they all handle JavaScript differently.

In this case, Javascript's Navigator object assists you in modifying your application based on the user's web browser settings.

This object allows you to leverage location information to obtain information about the user's current position. Its other useful attributes aid in determining the browser's version, engine, name, and language.

In brief, if you use the navigator object, your website will get more compatible with lots of web browsers.

window.navigator

Properties of Javascript's Navigator Object

There are numerous properties of Javascript's Navigator Object that return browser information.

appcodename provides the browser's code name ( it is an experimental property, and it could return a value that's incorrect)
The browser's name is specified by appname (it is an experimental property, and it could return a value that's incorrect)
appversion indicates the browser version that is being utilized (it is an experimental property and, it could return a value that's incorrect)
cookieEnabled controls whether browser cookies are enabled or disabled in the browser.
The platform variable includes a string specifying the computer type for which the browser was written.
useragent is a string that represents the value of the user-agent header supplied by the client to the server in the HTTP protocol.
geolocation returns a GeoLocation object that may be used to obtain the device's location information.
onLine indicates whether or not the browser is online.
language produces a string containing the desired browser language, such as en-Gb for UK English.
languages provide a string containing a list of all the languages allowed by the browser, sorted by user preference.

The Navigator object has several additional experimental attributes, although the ones stated above are the most typically utilized.

Check out this example below that uses some of these characteristics.

<!doctype html>
	<head>
		<title> Javascript Nav Object Properties</title>
	</head>
	<body>
		<h3>Examples of Navigator Object</h3>

        <script>
            let appn =  navigator.appName;
	    let appv =  navigator.appVersion;
	    let appco = navigator.cookieEnabled;
	    let appc =  navigator.appCodeName;
         
            
            document.write(appc +"<br>”);
	    document.write(appv +"<br>”);
	    document.write(appco +"<br>")
            document.write(appn +"<br>");
        </script>

	</body>
</html>

JavaScript Navigator Object Methods

Javascript's navigator object's methods are listed below.

javaEnabled() determines if Java is enabled.
taintEnabled() determines if taint is enabled.

Uses of Javascript's Navigator Object

Javascript's navigator object may be used for a variety of unique applications that can help you improve your website, such as:

Make your website more browser-compatible by developing specialized code for each browser to fix compatibility concerns.
You may verify whether the browser is connected to the internet and display a message if it is.
You may show location-specific information by using the user's location information.
If your website supports different languages, you may make your favorite language the website language.

Its All about the History Object and Navigator