Master the JavaScript Location Href Property

The window location object and its href property are important entities that make it possible for web pages to exist. Part of the Document Object Model, or DOM, the location object contains and the href property contain information that lets you know the current web page’s URL. Your JavaScript program can read and access this location information in a variety of useful ways.  New to JavaScript and web programming? Let Udemy teach you the basics quickly.

Location Objects and Hrefs

Although the location object has several important properties, the href property is one of the most important ones. Short for “hypertext reference,” href contains a string that represents the window object’s complete URL. If you’d like to determine an href’s value, use the following code:

var myLocation = location.href;

It’s just that simple. If you were viewing the White House website, the myLocation variable would contain the site’s URL.

URLS: Complex and Simple

When many hear the word “URL,” they may think of simple strings such as http://www.google.com. While that is a valid value, URLs can be much more complex and contain special characters and words that may not make sense. For example, you might see a URL such as the following:

https://www.google.com/search?q=url+complex+urls+query+variables&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a

While the basic URL is www.google.com, other keywords and characters appear after the word “com.” They represent extra querystring information that web pages may pass among themselves. If you ever develop web pages that transmit this type of data, you can view it all by checking the location.xref property. Your code can then parse the information as needed.

URLs that point to locations outside your website, such as google.com, are absolute URLs. Relative URLs point to files within your website. For instance, if you examine the href property after one of your web pages sends you to another, you may see a simple URL such as “salesPage.htm.” Don’t let JavaScript objects and methods mystify you. Learn JavaScript quickly at Udemy.

Changing Hrefs

Your JavaScript code doesn’t have to wait for people to type URLs in their browsers. You can send them to any URL using the following code:

location.href = "target_URL";

Replace target_URL with the URL you’d like the browser to visit. After the browser navigates to the new web page, the browser creates a new history record that contains the new URL’s value. Your JavaScript code can set the href value for a variety of reasons. For instance, you might attach a click event to a “Visit Our Other Site” button that changes href’s value when people click the button.

You can also change href so that it points to a location on the same page you’re viewing. The following code does that:

location.href = "myPage.html#section1";

This code assumes that your myPage.html document has a named anchor whose name is section1. A named anchor is a hyperlink that looks similar to the one shown below:

<a name="section1"></a>

Named anchors are useful because they enable one web page to direct people to specific locations within another web page as shown in the previous example.  Named anchors are are also helpful when you’d like to add a table of contents to a web page. Here’s one way to do that:

• Add named anchors to the bottom of an HTML document. If it’s a sales page, anchor names might include sales, descriptions and photos.
• Add hyperlinks throughout your page that point to those named anchors. Hyperlinks also have href properties and you can set their values the same way you set the location object’s href value.

Location Object Uses

In addition to href, the location object has additional properties and methods you may find helpful. For instance, you can reload the current web page using the following code:

window.location.reload(true);

Use the reload method with caution because users may lose information they’ve entered if you refresh their web pages without warning.  However, you may find the reload method handy when you’d like to refresh a web page to clear its cache.

You may not need to reference all the location object’s properties, but here is a list of them:

• Search – Examine this property when you’d like to see the querystring part of a URL.

  The search part of a URL is the text that begins with a question mark. This is the information websites parse to transfer information between themselves.

• Port – Retrieves or sets a URL’s port number.
• Host – Retrieves or sets the port number and the hostname.
• PathName – This property sets or returns the URL’s pathname.

Hyperlink Href Uses

As seen in the previous section, the anchor tag has an href attribute you can query and set. Some web developers use the document.getElementsByTagName method to retrieve all links on a web page as shown below:

var links = document.getElementsByTagName("a");

Once you create the links array, you can loop through it and examine each link’s href property. You could copy those URLS into a list or change their values if you’d like to change the way the links work. Want to become a JavaScript wizard? Pick up great tips ad Udemy.

The Document Object Model

The location object is one of many that make up the Document Object Model. The Window object, for instance, represents the browser you use. It has its own properties and methods. For instance, you can open a new window using the open method.Instead of changing the location object’s href property, you could use the open method to show users a new URL without changing the existing one.

The History object is another important object because site visitors rely on it to maintain browser history. That’s why it’s important to keep the history updated as people visit your site. JavaScript always adds a new history entry to the history object whenever you change a browser’s URL by altering the location.href property.

HREF Tips

As you’ve seen, the location object and the location.href property both contain URL information your application might find useful. Before you change the current URL that someone is viewing, ensure that the change doesn’t disrupt the person’s browsing activity. That might happen, for instance, if a site visitor is trying to fill out a form and a new web page suddenly appears.