reptile7's JavaScript blog
Tuesday, August 16, 2005
 
Properties VIII: The History and Location Objects
Blog Entry #19

Although there are a number of other JavaScript objects whose properties we could discuss, we will, in the name of moving forward, confine ourselves in the last entry of our Properties series to the remaining two objects (besides navigator and document) that Joe Burns covers in HTML Goodies' JavaScript Primers #7, namely, the History and Location objects.

The History Object

As noted at the end of the last entry, the History object is itself a property of the window object. As an object, History represents the set of URLs of the Web pages that you have visited in your current online session, i.e., since you opened your browser and began surfing the Web; it does not represent or provide access to the hundreds of URLs that are listed in your browser's History folder.

The History object's one property of note, duly addressed in Primer #7, is the read-only length property, which returns the number of pages that the user has visited in the current online session, including the current page (notwithstanding the Primer #7 script's implication that history.length counts the "pages before this [the current] one").

Besides length, DevGuru and IRT list three other Netscape-specific History properties at their respective History object pages: current, next, and previous, which return respectively the URLs of the current, next (Forward), and previous (Back) pages of the user's running History list. (JavaScript Kit's History object page lists only the length property.) However, IRT notes, "The UniversalBrowserRead privilege is required to access th[ese] property value[s]"; Netscape's reference material on the History object further states that these properties "ha[ve] no value if you do not have this privilege." In any case, my attempt to read history.current gave "Error: uncaught exception: Permission denied to get property History.current" (history.next and history.previous returned analogous errors).

I also tried to write the current property; I was curious as to whether history.current = "http://www.some_web_page.com" would set up a link, like a window.location command. No dice. An attempt to execute history.current = "http://www.yahoo.com/" gave "Error: setting a property that has only a getter."

We won't see the History object again in the remaining HTML Goodies JavaScript primers. The History object and its go( ) method, briefly mentioned in Primer #7, do crop up once in the HTML Goodies JavaScript Script Tips, in a script that spans Script Tips #5-9.

The Location Object

We've briefly touched on the Location object before, both in Blog Entry #10, when we discussed the parent.location command, and in Blog Entry #14, when we discussed the JavaScript Link object. Again as noted at the end of the last entry, the Location object, like the History object, is a property of the window object. Of the resources I usually consult, DevGuru provides the best definition of the Location object: "It contains the complete URL of a given window object, or, if none is specified, of the current window object."

In analogy to the properties of the Link object, the properties of the Location object represent the constituent parts of the browser window URL, which we can generalize as:

protocol//hostname[:port][/pathname][#hash][?search]
(the parts in square brackets are optional)

Accordingly, DevGuru, JavaScript Kit, and Netscape list the following eight standard properties* for the Location object:

hash, host, hostname, href, pathname, port, protocol, search
for which:
host = hostname:port (hostname ≠ host:port, as incorrectly stated at Netscape's page)
href = protocol//hostname[:port][/pathname][#hash][?search]

(*IRT also lists "target", "text", "x", and "y" properties for the Location object. However, my attempts to read location.text, location.x, and location.y gave "undefined" for each command when using MSIE or Netscape.)

Of the above properties, Joe oddly chose to discuss the host and hostname properties in Primer #7 - these properties don't appear in the remaining primers or in any of the script tips - much better to highlight the href property; the location.href command (a) does crop up in future primers, (b) returns a full URL (unlike location.host and location.hostname), and (c) is as effective as the window.location command in setting up a link to another Web page.

A quick comment on host and hostname: unless the URL in question specifies a port number (and I'm not sure I've ever seen a URL with a port number, quite frankly), then location.host and location.hostname read identically - location.host will not return "www.some_web_page.com:80", 80 being the default HTTP network port number.

Joe works the location.host command into the end-of-primer assignment, which asks the reader to write a script creating a link from www.you.com to www.you.com/joe.html. The href attribute of an anchor tag requires a full URL, so it is necessary in the assignment answer to concatenate "http://" (location.protocol + "//") with the location.host return; clearly, use of a location.href command would be more efficient.

But because all we're doing is tacking a pathname onto a URL, then why not use a location.pathname command? Problematically, if the www.you.com document contains a script with a location.pathname = "/joe.html" command, then we will go straight to www.you.com/joe.html (with only a transient stop at www.you.com) when we try to load the www.you.com page. We can circumvent the automatic loading of www.you.com/joe.html, however, by triggering the location.pathname command with an appropriate event handler, for example:

Click <span style="color:blue;text-decoration:underline;cursor:pointer;" onclick="location.pathname='/2005/03/intro.html';">here</span> to go to Blog Entry #1.

giving: Click here to go to Blog Entry #1.

If you'd rather keep the anchor tag, a mouseover link also works well:

Move your mouse over <a href="" onmouseover="location.pathname='/2005/03/primer-1.html';">these words</a> to go to Blog Entry #2.

giving: Move your mouse over these words to go to Blog Entry #2.

One would think that an onclick event handler could also be used in an anchor tag to execute a location.pathname command; not so. On my computer at least, clicking the link in:

Click <a href="" onclick="location.pathname='/2005/03/primer-1.html';">here</a> to go to Blog Entry #2.

simply reloads the page, i.e., the onclick command does not override the link's default behavior.

Lagniappe: The Date Object

The JavaScript Date object was introduced in Primer #3, so I thought we could sneak in some commentary on its properties to conclude this entry. According to the HTML Goodies JavaScript Objects Keyword Reference page, the Date object "does not have any properties"; however, DevGuru's Date object page lists two properties for the Date object: constructor and prototype. These relatively abstract properties relate to the fact that the built-in JavaScript Date object serves as a prototype, or blueprint, for the specific instances of the Date object that are created with a constructor statement and the new operator (as discussed in Blog Entry #5).

For a specific Date object, the constructor property returns:

function Date() { [native code] }

which is supposedly a reference to the code that created the Date object prototype, even as it is not necessary for the user to create the Date prototype, which is built-in to JavaScript. The Date prototype property is used not with specific Date objects but with the Date prototype itself to add a custom method or property to the Date prototype:

Date.prototype.custom_method = JavaScript_command(s);
Date.prototype.custom_property = null;

More generally, the constructor and prototype properties apply to all of the built-in JavaScript objects (except the JavaScript Math object), as noted by DevGuru's JavaScript properties page, as well as to custom JavaScript objects, with which constructor and prototype seem to be used most often and which we might discuss at some point in the future.

Next up: HTML Goodies' JavaScript Primers #8 and the JavaScript object hierarchy. After the last several posts, Primer #8's material will be somewhat of a review, but a little reviewing never hurt anyone.

reptile7

Comments: Post a Comment

<< Home

Powered by Blogger

Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)