Html programming crash course (2015)

Chapter 6: Working With Browser History

HTML5 gives you greater control on the history of the browser. This is achieved through the HTML history of object. We will create an example called pop-history.html in which the user can click on the Back button to move one page back. The user can also click on the Forward button to move one page forward.

Who also have the ability to enter a specific integer in a text field, click Go, and the page can move ahead by the value of the integer. On the other hand, a negative number would move the page backwards.

To get the pushing and popping of data to work, you need to use a browser that supports this function. Unfortunately, currently there are no browsers that support this. Nonetheless, it is important that you understand how this works so you get ready well before the browsers do.

The History API

The history option is a component of the window object in web browsers. Therefore, this can be referred to as window.history object. Here are the functions and attributes that can be used to assimilate window.history support within HTML5:

• window.history.length;

• window.history.go();

• window.history.back();

• window.history.forward();

• window.history.pushState();

• window.history.replaceState();

• window.onpopstate

Let us look at these in greater detail:

window.history.length

This is an attribute that provides the number of entries in a browser’s session history.

window.history.back()

This function moves one step back in the browser’s history. It returns the web browser to the previous web page.

If no previous page is available, the function will do nothing.

window.history.forward()

This function moves one step forward in the web browser’s history. This means that if you moved to Page X from Page Y, and returned to Page Y. This function can be executed to move forward to Page X.

If no next page exists in the history, this function will do nothing.

window.history.go([delta])

This function allows you to move backward or forward by any number you desire. Note that the delta argument is mentioned in brackets; therefore, it is optional. If no delta is provided, the browser will simply reload the page currently being shown.

The function would do nothing if the delta is out of the range of history.

window.history.pushState(data, title[, url ] )

This is the function that enables you to push data into the history of the browser. Data is the argument in the object that stores your data; title is name which you want to use to reference your data, whereas, the url is that argument that enables you to link data with a certain page so that it can be popped when the page reloads.

window.history.replaceState(data, title[, url ] )

This function replaces a current entry in history if you give it the data, title, and URL.

window.onpopstate

This event takes place when state history is popped in order to become accessible.

pop-history.html Example

Let us get started with the example. Follow the steps given below:

1. Just like always, create an HTML file using a text editor and name it pop-history.html

2. Enter the code given below:

3. To create <div> elements which will be used to display the results in this example, add the following code:

4. Save the file in text format.

Now that we have created the base file, let us now get it to do something interesting.

Add A Back Button

You can, using the window.history.back() function, enable a user to navigate backwards in the browser’s history.

To add this button, follow the instructions given below:

1. Open pop-history.html

2. Add the subsequent code to create a button:

3. In order to make the Back button active, you have to connect it to the function called window.history.back(). Here’s how you can do that:

4. Save the file in plain text format.

Now the Back button will appear in the document and a user can click it to navigate backwards (one page) in the history.

Add A Forward Button

Just the way you created a back button to enable a user to move back one page in the browser history, you can also create a forward button. Here’s how:

1. Open pop-history.html using your favorite text editor

2. To create a Forward button, add this code:

3. To activate the Forward button, you will have to connect it to the window.history.forward() function.

4. Save the file in text format.

Now the user will be able to navigate one page forward in the history.

Add A Go Button

You can even let users enter the number of pages that they wish to navigate to, either backwards or forwards. This means that they will have to enter an integer in text field and click the Go button, which would utilize the window.history.go() function to achieve this.

Here is how you can add a Go button:

1. Open pop-history.html in a text editor.

2. Add the code given below to create a new Go button along with a text field.

3. Just like before, you will have to active the Go button by connecting it to the function called window.history.go().

4. Save the pop-history.html file in plain text format.

Now the user will be able to enter a certain number in the text field and click the Go button to navigate forwards or backwards. A number with a minus sign would navigate backwards, whereas a positive number would move the page forward. (e.g. -2 for two pages backwards and 2 for two pages forwards)

Summary

HTML5 gives you greater control on the history of the browser through the HTML history of object.

The history option is a component of the window object in web browsers and can be referred to as window.history object.

New Elements In HTML5

HTML5 comes equipped with a number of new elements. They are as follows:

To learn more about these elements, you can visit the following page at W3C’s website: www.w3.org/TR/html5/spec.html#auto-toc-8

Also, you should note that the following elements have been removed in the latest version of hyper-text markup language:

Where To Go From Here

The purpose of this book was to get you started with the basics of HTML5, and perhaps instill an interest for this very powerful scripting language. Our primary focus was to shed some light on what can be done in HTML5; and as you may have seen and understood, HTML is the language of the Web.

While it can be intimidating for many to learn a new language, when it comes to HTML, there are many reasons why you should really consider learning HTML.

Before we discuss why, let’s look at what you can do with HTML.

The web is made up of HTML. Period. This means that your possibilities are endless when it comes to web design. While you may also wish to learn JavaScript and CSS to enhance your web pages, the core remains to be HTML!

Also, with so many WYSIWYG web page editors out there, many wonder why they need to learn coding in the first place. However, this is the wrong approach. There are many instances where you will have to manually overcome errors by going through the code – so it always helps to have a thorough understanding of this language.

If you wish to build upon your foundation of HTML, you may wish to take on some advanced courses that will unleash and help you understand the power of HTML which can be extremely useful in your career or hobby!

Good luck!