hostname

The location.hostname property is almost identical to location.host, except that it does not include the port number if specified in the URL. That is, it consists of only the <host> portion of the complete URL (see the section “A Crash Course in URLs”). The location.hostname is simply the Internet address of the hosting machine. This property evaluates to www.geocities.com on the following two URLs:

<URL:http://www.geocities.com/SiliconValley/9000/index.html>
<URL:http://www.geocities.com:80/SiliconValley/9000/index.html>

pathname

The pathname component of the URL consists of a directory structure, relative to the hosting server’s root volume. In terms of http, this is the <path> portion of the URL. If the file is located in the root directory of the server, the pathname property evaluates to a single slash (“/”), followed by the complete filename. The pathname property always includes the name of the file where the script is located. This property returns a nonstandard value in MSIE. When the file is on the client’s computer, backslashes are used in place of slashes to separate directory names in the path.

For example, if the complete URL of the hosting document is <URL:http://www.geocities.com/SiliconValley/9000/index.html>, the value of location.pathname is "/SiliconValley/9000/index.html".

port

As expected, the location.port property holds the port number, or the <port> portion of the general URL syntax. These days, few Web sites require an explicit specification of the port number as part of their URL. When a port is not specified, it defaults to the standard “80,” which is not part of the location.port property. If you intend to construct a URL from the values of the port and the hostname properties, remember to separate them with a colon.

protocol

The protocol component of a URL is more commonly known as the scheme (<scheme>). The location.protocol property holds the scheme component of the document’s URL, followed by a colon. The scheme component should normally be “http:”, but other schemes are also supported. For more information on most popular schemes, see the section “A Crash Course in URLs,” at the beginning of the chapter.

You can display the “mocha:” or “javascript:” protocols by loading one of them as the URL of the document and then typing “alert(location.protocol)”. You can also try loading the following strings as URLs instead:

• javascript:alert(location.protocol)
• mocha:alert(location.protocol)

See Chapter 5 for more information on these specific protocols (javascript: and mocha:).

search

When you submit a form, you sometimes find that the URL of the retrieved document is followed by a question mark (?) and an encoded string. For example, a typical “Yahoo” search looks like "http://search.yahoo.com/bin/search?p=perl+book&a=n". The value of location.search is precisely that, including the question mark. Each part of the search specification (?p=perl+book&a=n) is usually delimited by an ampersand (&), as seen in the above string. Nonalphanumeric characters are encoded and replaced by their corresponding two-digit ASCII code, preceded by a percent sign (%). If text fields or text areas consist of space characters, then they are replaced by plus operators (+). The string following the question mark is known as the search query, although it does not serve as a query submitted to a search engine.

The location.search property may seem distant to you, but it is truly one of the most important properties supported by JavaScript. The reason for its great importance is that you can make use of it for various purposes that are not related to CGI scripts or search engines.

First of all, remember that if a search query is specified (including the question mark), the URL of the page is actually the string preceding the query. For example, you can load Intel’s homepage via the URL http://www.intel.com/index.htm?Intel+home+page rather than the standard URL for that page, http://www.intel.com/index.htm. Since Intel’s page does not use any search queries, a query specification serves as a decoration only. You can load every page on the Web by entering its regular URL followed by any search query. This feature enables the usage of search queries in JavaScript. For example, you can prompt the user for his or her name, and pass it on to all other pages on your site as a search query. Along with “Cookies” (explained in Chapter 24, Implementing Cookies), the location.search property serves as a way to store permanent data acquired from an outside resource. The following example consists of two pages, “page1.html” and “page2.html”:

<HTML>
<HEAD>
<TITLE>User first name input</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--

var usernm = prompt("Enter your first name:", "")
location.href = "page2.html?" + usernm

// -->
</SCRIPT>
</BODY>
</HTML>

page1.html

<HTML>
<HEAD>
<TITLE>User first name output</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--

function getQuery() {
 var query = location.search.substring(1, location.search.length)
 return query
}

alert("I know your name -- " + getQuery())

// -->
</SCRIPT>
</BODY>
</HTML>

page2.html