The JavaScript Diaries: Part 10/Page 6

The JavaScript Diaries: Part 10

pathname

This property returns the path portion of the URL, i.e., everything after the domain name. For instance, if the URL is "https://www.webreference.com/programming/javascript/", then this property would return the string as "/programming/javascript/." If it's the root directory, then the property would return a slash, "/". An example of its use would be:

document.write(location.hostname);

port

This property returns the port portion of the URL. These generally aren't used today. If you've been around the Web awhile, you'll remember them from 'way back when.' An example of its use would be:

document.write(location.port);

protocol

This property returns the protocol portion of the URL. That's the portion up to the first colon. It's the method by which the URL is accessed, i.e. http or ftp. An example of its use would be:

document.write(location.protocol);

search

This property returns the string following — and including — the question mark in a search query. You might have something like: https://www.amazon.com/detail/?v=glance&s=electronics. This property would return: ?v=glance&s=electronics. An example of its use would be:

document.write(location.search);

Methods

reload

This method is used to reload the current page in the browser. It's a little more powerful than using the reload button on the browser. It's also a little less dependable. When reloading a page with filled-in form fields, this method will clear the form fields and reload the page, just like holding down the [SHIFT] key and pressing the reload button in the browser. Sometimes, just using the reload() method will perform a reload from the cache, keeping the form intact. Using reload(true) will cause the page to be reloaded from the server, erasing the contents of the form fields and loading a fresh copy of the page. An example of this method in use would be:

location.reload();
  or
location.reload(true);

replace()

This method replaces the current page entry in the browser's history list so a user cannot navigate back to it. How is that useful? If you have a page that's accessed by a password or registration, you might not want the user navigating directly back to it. Using this method, there won't be any trace of that page's URL in the browser's history list. An example of its use would be:

<form>
<input type="Button" name="change" value="Change page"
onClick="location.replace('newFile.html')">
</form>

If you load the example above, when you click on the button you will load the index page at the URL listed. You will notice that, although you have gone to another page, you won't be able to return to the previous page as it's not listed in the browser's history. Check your browser's history. You will see the page you visited before loading the file with the script and the one listed in the replace() method but you won't see the page with the script listed. (Be careful when using this method as users generally like to navigate back to pages they have previously visited.)

We should get used to placing these events into functions and then just calling them from the page. Using the last example above, we could write it as follows. Place this code in the head section:

function changePage() {
  location.replace("newFile.html");
}

Then place this in the body section:

<form>
  <input type="button" value="Change page"'
    onClick="changePage()">
</form>

Conclusion

That wraps up our study of the navigator, screen, history, and location objects. Remember to use these in your scripts when you need to find out information about the user's environment.

Next time we'll take a look at arrays. After that, we will start looking at the DOM (Document Object Model). That's when things should really start to get interesting. Until then — keep on scripting!

Continue on to "The JavaScript Diaries: Part 11"

[previous]

Created: October 14, 2005

URL:

The JavaScript Diaries: Part 10/Page 6