Que Logo

Chapter 12

Mapping and Tracking: Locations and Histories

In This Chapter


The location object refers to the current URL--that is, the address of the page currently loaded. This object provides several properties with which you can play with various characteristics of the URL. The history object contains the current list of other URLs that have been visited in the present session. It, too, can be sliced, diced, and analyzed.

Wherefore Art Thou, URL?


The location object contains the current URL. Thus, imagine that the address of your Web page is http://my.isp.com/~me/mypage.html. In that case, the location object refers to that address. The object's properties will seek out various portions of the URL. The location object is rather straightforward and nonconfusing--which is a Good Thing. The location object contains eight properties, and they behave in the following manners:

href


location.href contains the string value of the entire URL. Thus, given the previous sample URL, the value of location.href would be "http://my.isp.com/~me/mypage.html".
One possible use of this property is to pass it as a parameter to the window.open call. Perhaps you want to open a new window, which connects to the same URL as the current window (so you can look at another portion of the same page at the same time you're looking at the current portion of the page). Simply use the call 

window.open (location.href,"windowname","feature1,feature2,etc")

Now, you can also launch a new page without opening a new window. If you simply assign a new URL to location.href, the browser will attempt to connect to a new page. For example, 

location.href = "http://www.yahoo.com"

Of course, if you do this, you'll effectively be leaving your current page, including any other JavaScript programs that are in it.

host


The location.host property holds only the hostname and port of the current page's URL. Looking at our previous example URL… 

http://my.isp.com/~me/mypage.html

…the "hostname" would be my.isp.com. That's the Internet name of the computer on which the page resides. In the previous example, no port is specified in the URL, and, therefore, location.host will only contain the value "my.isp.com". If a port were specified in the URL, it might look like this: 

http://my.isp.com:80/~me/mypage.html

"80" is the port in this example. If this were your URL, location.host would contain the string value "my.isp.com:80". (Because the default port for a Web page is 80, it is usually not specified, but some URLs use a different port, in which case, it will be specified.) One possible use for this property is to construct a string for a user message or HTML link. That is, suppose you want to write a JavaScript function that you might use in numerous Web pages. The purpose of the function is to provide an HTML link on-screen for the user to jump to another document in a set of pages. Since your function doesn't know which machine it will be on, it could use the location.host property to concatenate an appropriate string, for later output in the window as a link.
Assigning a value to location.host will generate an error, because it is nonsensical. Whereas you can assign an entire URL to location.href, which would then connect to that URL, you cannot connect to just a host. Thus, assigning a value to location.host is of no use.

hostname


At the risk of sounding redundant, the property location.hostname will return just the hostname portion of the URL. Recall in the case above that host refers to hostname:port. hostname, then, refers only to the name. Yes, it is true: given a URL with no port specified, location.host and location.hostname contain the same value.

port


The property location.port simply contains the value of the port number in the URL, if specified, as explained previously. Note that if a port was not specified in the URL, location.port contains no value. It does not contain the default 80 port, unless the 80 was specified in the URL.

pathname


Once again, let's look at your example URL: 

http://my.isp.com/~me/mypage.html

The pathname is the portion of the URL that describes the location of the Web document on the host computer. The pathname begins with and includes the slash (/) immediately preceding the hostname (or the port, if it were specified). In the above, 

/~me/mypage.html

is the pathname. Therefore, this is the value that location.pathname would contain.
Assigning a value to this property, as in 

location.pathname = "~me/otherdocs/newdoc.html"

will cause the Web browser to load that document into the current window. This is similar to when you assigned a value to location.href.

protocol


The protocol property contains the leftmost portion of the URL, which contains the name of the protocol to use in retrieving the specified file (Web document). The example URL used the HTTP protocol, as is most common on the Web. However, some URLs may contain different protocols, such as 

file://hostname/pathname
gopher://hostname/pathname

FTP, for instance, is the File Transfer Protocol and is another common way in which files can be delivered across the Internet. Gopher is yet another information-retrieval protocol, which had its heydey before the explosion of the Web (http--the hypertext transport protocol). Many sites still offer information via the Gopher protocol.
In your http://my.isp.com/~me/mypage.html example, location.protocol would contain the value "http:". In the previous examples, location.protocol would contain "file:" and "gopher:", respectively.

hash


Some URLs contain special hash mark values following the pathname. For example: 

http://my.isp.com/~me/mypage.html#tuesday

The hash mark (#) specifies the name of an anchor to jump to in the Web page. An anchor is a place on a page that has been marked (via the HTML tags that make up the page) as a jump-to point. This allows users to be directed to specific spots within a page, rather than always at the very top. The above URL attempts to bring the user to the anchor known as "tuesday" in the page mypage.html.
Thus, the location.hash property would contain the value following the hash mark-in the preceding case, it would be tuesday.
Assigning a value to location.hash will cause the Web page to jump to that anchor. Note that of the properties you've seen so far, this may be one of the most useful. Because it jumps to new locations within the same page, it's more desirable than throwing out your current page, such as when you assign new values to location.href or location.pathname. You can use the location.hash property in event handlers, for example, to bring the user to specific locations within the current page.

search


Yet another variation on the URL is a search parameter following the pathname, denoted with a question mark (?). A form entry is probably the most common use for a search parameter. When a user enters form data into a form element and then clicks the "submit" button, the following URL is called: 

http://some.isp.com/~someone/someprogram?formdata

Re-Form School
As per my usual disclaimer, this book isn't an HTML guide. However, just to refresh your memory, I'll briefly mention how a form is submitted. You define a form element with the <FORM> tag. This tag may take several attributes, one of which is the METHOD= attribute. METHOD= may be assigned either GET or POST. This defines how the form data will be submitted to the server. The details are technical, but GET is the most popular method. It is also the method that generates the ?formdata syntax in a URL.
The ACTION= attribute specifies which URL to send the submitted data to. This URL will presumably be designed to process the form data in some way.
Thus, a <FORM> definition might look like 

<FORM METHOD=GET ACTION="http://some.isp.com/~someone/someprogram"
The property location.search would contain the value following the question mark. The most sensible usage of this parameter would be in the page that receives the submitted form data.
For example, suppose you have two pages. One of them accepts user input in a form entry. It then sends that input to another page. This other page contains a JavaScript function that evaluates the submitted form data. Therefore, you can make a call to this function with evalform(location.search), which would pass the submitted form as a parameter.
The preceding set of properties for the location object gives you all you need to pluck the current URL for any relevant information. Next, you look at the history object, which keeps track of previously visited URLs.

Let's Do the Time Warp Again--The history Object


The history object is an interesting beast. You're probably familiar with the standard browser history list. It's usually available via a menu-in Netscape Navigator, it's on the Go menu. Upon accessing the history list, you're presented with a list of the pages you accessed in this browsing session. You may then choose to quickly jump to one of those previously visited URLs.
The history object lets you send the user to somewhere in the history list from within a JavaScript program. The object contains two properties and three methods, so let's take a drive past each, shall we?

Historic Properties


First, here's a look at the properties: current and length.

current


The property history.current contains the value of the current URL. Yes, that would make it equivalent to location.href. Note that, as you'll see momentarily, the history list is referenced in a relative manner. That is, however many items are in the list, position 0 is the current item. This will become relevant in a few short paragraphs.

length


Depending on how many pages the user has visited during this session, the history list will be of varying lengths. The property history.length contains the current length of the history list.
It's worth noting that the history object does not contain any values that reflect the actual URLs in the history list. Therefore, you cannot, for example, perform some action that reads the value of "URL number 3 in the history list." The history object is designed for navigating the history list. That's where its methods come into the picture.

Ways of Old--Historic Methods


Now, here is a discussion of the history object's three methods: back(), forward(), and go().

back()


This method has a very logical behavior: history.back() simply moves the user to the URL one place previous in the history list-that is, previous to the current position. It is the same as if the user clicked the "back" or left-pointing arrow in the Web browser's navigation toolbar.
Note that just as with any instance where you bring the user to a new page, you give up control from your JavaScript program. The user may never return. Or he may go anywhere else that the new page links to. Therefore, it usually makes the most sense to utilize these JavaScript methods--which call up new pages-between sets of pages you have designed. In this way, your pages can all contain appropriate JavaScript programs within each to move the user along to where you want them to go.

forward()


Can you guess what this method does? I bet you can. history.forward() moves the user one URL forward, relative to current position, in the history list.

go(offset) or go("substring")


Lastly, you can use the go() method to jump to a particular position in the history list, rather than merely one hop backward or forward. You can use this method to refer to the desired position in the history list in two different ways:
go(offset) accepts an integer parameter, positive or negative, as offset. If the parameter is a positive integer, the program will move the user that many places forward in the history list. If the parameter is negative, it'll move the user that many places backward (that is, previous to the current position) in the history list. Your current position is always place zero.
Examples: 

history.go(2)
history.go(-3)

Alternatively, you can send go() a string rather than an integer value.
Example: 

history.go("mugs.html")

In this case, JavaScript will search for the newest history list URL that contains the specified string somewhere within its URL string. Therefore, if the history list contains the URL http://some.isp.com/~someone/mugs.html, that's where the user will be sent by the above example--unless, of course, there is another URL that also contains "mugs.html" and has been added to the list more recently.
Remember that URLs are added to the history list when the user visits a page. Therefore, the URLs closest to the end of the history list are the newest; those closest to the beginning are the oldest.

In Closing…


Now, you have an eyeful of the JavaScript objects that allow you to play around with URL references. Their most applicable use is probably in guiding users around your pages, within functions that determine where to guide them based on certain conditions. For example, let's say you offer a special offer to customers who order 10 or more mugs from your page. You might want to take them to another page, on which they can select a gift of their choice. Thus, you can create a JavaScript function based on an if...else statement, which sends them to the gift-choosing page on the true condition (perhaps by assigning the gift page's URL to location.href), or doesn't send them on to the gift page in the false condition. (Or perhaps, sends them on to some other page that advertises the "buy 10, get a free gift" deal.)
Briefly: 

function giftdeal(mugs)
{
 if (mugs>=10)
 { location.href="http://mysite.com/~me/giftpage.html" }
 else
 { location.href="http://mysite.com/~me/giftad.html" }
}

The Least You Need To Know


Previous Chapter Next Chapter


Beginning of ChapterTable of ContentsBook Home PageQue Home Page

For comments or technical support for our books and software, select Talk to Us.
To order books, call us at 800-716-0044 or 317-228-4366.
© 1996, QUE Corporation, an imprint of Macmillan Publishing USA, a Simon & Schuster Company.