Build a Single Page Web app using the DOM and JavaScript
Here you will create a dynamic web-application using minimal HTML and instead using the Document Object Model (DOM) and JavaScript
Why? Why can’t I just write the HTML, the CSS, link it together and I have my site?! Yes yes, it may look like I am making things more complicated than needs must, but the efficiency of single page apps can save time later on when developing dynamic web applications, especially when making changes.
There are many angles to addressing this issue, the most obvious to state is from the perspective of the browser (for example, chrome, firefox…). If you have a dynamic web application which has many pages of material, there’s probably repeated code somewhere(such as the navigation bar, the footer and more). When you navigate through these pages the browser will refresh the page each time, reloading content that was already loaded in the previous page. Thats just extra work for the browser and can result in a bad user experience; the seconds wasted in a page reload could make or break a sale to a customer.
This is where a single page app comes in handy. If you only need to update a portion of your site with new information based on the user’s actions, you can do so without reloading the page, but instead just grabbing the data and adding it onto the page. Let’s start.
Create a template for your main page, the one that will be loaded first and we will build on this one only. Lets call it index.html
<-- in index.html -->
<html>
<head>
<meta charset="utf-8">
<title>Navigation Example</title>
</head>
<body>
<a href="">Home</a>
<a href="">About</a>
<a href="">Contact</a>
</body>
</html>Assuming you already know HTML, you will know that the ‘a’ tags are links. These would usually direct you to another page on the site, if we were to put URL’s inside the href attributes.
But as we are only dealing with single page applications — we don’t want page reloads. We can add what we call a Fragment Identifier to a URL, and this will be added onto the end of the query string without the page reload. Lets do the following:
<-- in index.html -->
<html>
<head>
<meta charset="utf-8">
<title>Navigation Example</title>
</head>
<body>
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</body>
</html>The fragment identifier (the #home, #about etc) is used to only identify a portion of the document, like an anchor. Fire up index.html and click on the links. The URL in your url will change, but the page wont reload.
Now comes the JavaScript. We can use an event listener to listen out for these changes, and when they happen, we can modify the page accordingly.
Create a new file called main.js, and link the index.html to it with the script tags.
// in main.js
console.log(location.hash)The console.log will print the values inside of the brackets to the console. To see the console, right click on your browser page and click ‘inspect element’, though it may be different depending on your browser. Chrome dev tools are known to be a favourite amongst developers.
The location.hash is the fragment identifier that we talked about earlier. If we put a hash at the end of the query string (the url), and press enter, the console will print out the fragment identifier. Cool, but this is not helpful. Lets try the following:
// This will listen for the fragment identifier change
window.addEventListener("hashchange", function() {
console.log(location.hash);
});Now we have an event listener, and as the name clearly states — its a function which waits for events! In the event listener, we wait for a ‘hashchange’, which means that whenever the fragment identifier in the URL is changed, this function will then be fired up.
If you click on the home link, the event listener is fired up as the url now has a different fragment identifier. Get this value using location.hash, and print it out to the console. Try it out, and see how each of the fragment identifiers are printed out onto the console every time you click a link.
Now console.log is a bit boring but always good for trying something out — but lets actually output it onto the page for everyone to see. Firstly, let’s go back to the index.html and actually build a placeholder for future text.
<-- in index.html -->
<html>
<head>
<meta charset="utf-8">
<title>Navigation Example</title>
</head>
<body>
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
<div id="app"></div>
<script src="main.js"></script>
</body>
</html>I added a div element with the id of app. This is blank at first, and we will push stuff into it later. Think of it as an empty box, it’s empty now but you can always pack it and unpack it with whatever you like. Lets pack it with some text using JS
// in main.js
window.addEventListener("hashchange", function (){
var contentDiv = document.getElementById("app");
contentDiv.innerHTML = location.hash;
});Copy the code in and go to the browser. When you click a link, the page should show the fragment identifier out on the document, without the page needing to reload. Simple.
The only problem we have now, is that when we go to a page such as yourdocument.html#about, the event listener wont work because the document loads. Spot the problem? We are going to have a blank page even when there is a fragment identifier. We want the page to load content based on the fragment identifier even without the use of the event listener. Take a look at the following.
// in main.js
function loadContent(){
var contentDiv = document.getElementById("app");
contentDiv.innerHTML = location.hash;
}
window.addEventListener("hashchange", function (){
loadContent();
});
loadContent();Much better. We have a new function called loadContent, which does what we were doing in the event listener. This is good, as now we can call it when the document loads, by stating the function name loadContent(). We can also call this function in the event listener, to avoid repeated code.
Have a look at the code and see if you can redact it even more, specifically in the event listener. Take a look:
// in main.js
function loadContent(){
var contentDiv = document.getElementById("app");
contentDiv.innerHTML = location.hash;
}
window.addEventListener("hashchange", loadContent);
loadContent();We are making progress but we still have a little problem, the first page without the fragment identifier is left blank, but it should be home, right? Do the following:
// in main.js
function loadContent(){
var contentDiv = document.getElementById("app");
contentDiv.innerHTML = location.hash;
}
if(!location.hash) {
location.hash = "#home";
}
loadContent();
window.addEventListener("hashchange", loadContent)We now have an if statement. Lets look at it in isolation:
if(!location.hash){
location.hash = "#home";
}This basically says ‘If there is no location hash, make the location hash #home.’ The ! at the front of the location.hash negates the expression.
We also have another thing to solve: we don’t want to print out the hash symbol with the page. Let’s take it out with a JS method called substr.
// in main.js
function loadContent(){
var contentDiv = document.getElementById("app"),
// This gets rid of the first character of the string
fragmentId = location.hash.substr(1);
contentDiv.innerHTML = fragmentId;
}
if(!location.hash) {
location.hash = "#home";
}
loadContent();
window.addEventListener("hashchange", loadContent)The substr method removes the first letter of the string and returns the rest. This results in removing the # from the fragment identifier.
Its all very well printing out the fragment identifier but its a bit boring, no exciting content to really showcase your website.
function getContent(fragmentId){
// lets do some custom content for each page of your website
var pages = {
home: "This is the Home page. Welcome to my site.",
about: "This page will describe what my site is about",
contact: "Contact me on this page if you have any questions"
};
// look up what fragment you are searching for in the object
return pages[fragmentId];
}
function loadContent(){
var contentDiv = document.getElementById("app"),
fragmentId = location.hash.substr(1);
contentDiv.innerHTML = getContent(fragmentId);
}
if(!location.hash) {
location.hash = "#home";
}
loadContent();
window.addEventListener("hashchange", loadContent)Here we have a new function called getContent. It takes an argument of the fragmentId. Inside of this function we have a JS object, which is like a dictionary. It is filled with key value pairs, such as a word and a description. In our case, it’s the page name and the content that associated with it. I have named the object pages.
At the bottom of the function, we search the partials object by passing it the value of the fragmentId (which is the page we are on). The browser then iterates through the partials object and returns us the value that matches. We are one step closer to a dynamic site.
For the final step of this tutorial, let’s change the getContent function to include a callback to make our functions in the program run asynchronously. Don’t worry if you don’t understand right now. In short, you want to make your program as efficient as possible. We would prefer to run functions asynchronously (at the same time), minimising wasted time. This is a little bit of a complex concept to understand — so don’t worry if you don’t immediately understand, do some research if you want to find out more.
function getContent(fragmentId, callback){
var pages = {
home: "This is the Home page. Welcome to my site.",
about: "This page will describe what my site is about",
contact: "Contact me on this page if you have any questions"
};
callback(pages[fragmentId]);
}
function loadContent(){
var contentDiv = document.getElementById("app"),
fragmentId = location.hash.substr(1);
getContent(fragmentId, function (content) {
contentDiv.innerHTML = content;
});
}
if(!location.hash) {
location.hash = "#home";
}
loadContent();
window.addEventListener("hashchange", loadContent)The callback is in the getContent method. When getContent is called, the function continues to complete its job while getting the content to put inside the HTML page. Play around this concept and see how big a single page app you can build.
