Find online courses made by experts from around the world.
Take your courses with you and learn anywhere, anytime.
Learn and practice real-world skills and achieve your goals.
How? The "back" button is by far the most used navigational element in the browser. It gives people browsing the web the confidence to click on links as they know they can go back to where they were if they do something wrong. They expect it to always work.
By updating part of a web page using client-side script, the behaviour of this button can be broken. This can frustrate and annoy visitors to your website, which will make them leave!
The recent introduction of the HTML5 History API allows us to fix this - we can do partial page updates and tell the browser that the content has changed, thereby keeping the back button in full working order.
In this course you'll learn:
Throughout the course we'll be building a sample website that demonstrates all the techniques discussed in the lectures. Complete, working, fully-annotated source code is included.
Not for you? No problem.
30 day money back guarantee.
Learn on the go.
Desktop, iOS and Android.
Certificate of completion.
|Section 1: Page navigation, history and the back button|
|In this lecture we'll talk about the objectives for the course, the technologies and methods we're going to use, and introduce the idea of the example website we're going to build throughout the course.
|In this lecture we'll talk about web pages, URLs to identify them, and links to navigate between them.
Attached to this lecture is the first version of the example website we're going to build. The code is complete and fully annotated with ample comments describing what is happening at each stage.
|In this lecture we talk about the browser history, how the back button works, and how it's the most popular navigation button in a browser.
In this lecture we talk about how partial page updates are a more efficient way of building a web page. We look at two techniques: one where all the content is loaded into a single page, and another where the dynamic content is loaded as a fragment of the page.
Full, annotated source code for the second version of our example website is attached to this lecture. In this version of our site, we change the dynamic part of the page using code rather than a full page refresh.
|Quiz 1||5 questions|
Test your knowledge of pages, navigation, URLs, the back button and partial page updates.
|Section 2: The HTML5 History API|
|In this lecture we introduce the HTML5 history API; its methods and events, and how it can be used to unbreak the back button.
|In this lecture we find out how to use the pushState and replaceState methods of the HTML5 history API to tell the browser that we've changed the page content.
Full, annotated source code for the next version of our example site is attached to this lecture. In this version we partially fix the broken back button by adding values to the browser's history using script.
In this lecture we find out how to use the popstate event to detect when the user presses the back button, thereby fixing the other half of the broken back button. We also discover a major drawback of using the HTML5 history API.
Full, annotated source code for the next version of our example site is attached to this lecture. In this version we fully fix the broken back button by reading values from the browser's history using script.
|Quiz 2||4 questions|
|Test your knowledge of the HTML5 History API.
|Section 3: History.js|
In this lecture we discover the solution to the HTML5 history API cross-browser problem, in the form of the excellent History.js library. We'll talk about its functions and methods, and how it can replace the native history API with the minimum of code changes.
Full, annotated source code for this next version of our example site is attached to this lecture. In this version we replace the native history code with the History.js version, fixing browser inconsistencies and other issues with the native API.
In this lecture we use the capabilities of the History.js API to add history API functionality to legacy, HTML4 browsers.
In this lecture we review what we've learnt, and the example website that we've built.
|Quiz 3||5 questions|
Test your knowledge of History.js.
Hi, I'm Dave Hollingworth. I'm an IT trainer and web application developer. I've been programming for over twenty-five years, and teaching IT since 1999.
I've developed enterprise-level applications on platforms ranging from mainframes to mobiles: from my first web application, a quotes system created for a major insurance company back in 1999 - the first of its type in the sector - to interactive learning management systems for online language learning.
I've taught courses ranging from basic use of email to advanced web application development, both online and in-person. I've been teaching on Udemy since 2012.
I'm passionate about technology, and love teaching it! I believe it's possible to explain even the most complex subjects in a simple, straightforward way that doesn't confuse the student.
I look forward to welcoming you onto one of my courses!