http:, ftp:, file:, and so on. With Navigator, you can also use URLs of type javascript: to execute JavaScript statements instead of loading a document. You simply use a string beginning with javascript: as the value for the HREF attribute of anchor tags. For example, you can define the following hyperlink to reload the current page when the user clicks it:
<A HREF="javascript:history.go(0)">Reload Now</A>In general, you can put any statements or function calls after the
javascript: URL prefix.
You can use JavaScript URLs in many ways to add functionality to your applications. For example, you could increment a counter p1 in a parent frame whenever a user clicks a link, using the following function:
function countJumps() {
parent.p1++
window.location=page1
}
To call the function, use a JavaScript URL in a standard HTML hyperlink:
<A HREF="javascript:countJumps()">Page 1</A>This example assumes
page1 is a string representing a URL.
If the value of the expression following a javascript: URL prefix evaluates to undefined, no new document is loaded. If the expression evaluates to a defined type, the value is converted to a string that specifies the source of the document to load.
MAP tag. You can define areas within the image that are hyperlinks to distinct URLs; the areas can be rectangles, circles, or polygons.
Instead of standard URLs, you can also use JavaScript URLs in client-side image maps, for example,
<MAP NAME="buttonbar">
<AREA SHAPE="RECT" COORDS="0,0,16,14"
HREF ="javascript:top.close(); window.location = newnav.html">
<AREA SHAPE="RECT" COORDS="0,0,85,46"
HREF="contents.html" target="javascript:alert(`Loading
Contents.'); top.location = contents.html">
</MAP>
ISMAP attribute of an IMG tag that is a hyperlink. For example,
<A HREF="img.html"><IMG SRC="about:logo" BORDER=0 ISMAP></A>When you click an image with the
ISMAP attribute, Navigator requests a URL of the form
URL?x,ywhere
URL is the document specified by the value of the HREF attribute, and x and y are the horizontal and vertical coordinates of the mouse pointer (in pixels from the top-left of the image) when you clicked. (The "about:logo" image is built in to Navigator and displays the Netscape logo.)
Traditionally, image-map requests are sent to servers, and a CGI program performs a database lookup function. With client-side JavaScript, however, you can perform the lookup on the client. You can use the search property of the location object to parse the x and y coordinates and perform an action accordingly. For example, suppose you have a file named img.html with the following content:
<H1>Click on the image</H1>When you click a part of the image, Navigator reloads the page (because the
<P>
<A HREF="img.html"><IMG SRC="about:logo" BORDER=0 ISMAP></A>
<SCRIPT>
str = location.search
if (str == "")
document.write("<P>No coordinates specified.")
else {
commaloc = str.indexOf(",") // the location of the comma
document.write("<P>The x value is " + str.substring(1, commaloc))
document.write("<P>The y value is " +
str.substring(commaloc+1, str.length))
}
</SCRIPT>
HREF attribute specifies the same document), adding the x and y coordinates of the mouse click to the URL. The statements in the else clause then display the x and y coordinates. In practice, you could redirect to another page (by setting location) or perform some other action based on the values of x and y.
window properties, status and defaultStatus, to display messages in the Navigator status bar at the bottom of the window. Navigator normally uses the status bar to display such messages as "Contacting Host..." and "Document: Done." The defaultStatus message appears when nothing else is in the status bar. The status property displays a transient message in the status bar, such as when the user moves the mouse pointer over a link.
You can set these properties to display custom messages. For example, to display a custom message after the document has finished loading, simply set defaultStatus. For example,
defaultStatus = "Some rise, some fall, some climb...to get to Terrapin"
status in the onMouseOut and onMouseOver event handlers of a hyperlink or image area to display hints in the status bar instead. The event handler must return true to set status. For example,
<A HREF="contents.html"This example displays the hint "Click to display contents" in the status bar when you move the mouse pointer over the link.
onMouseOver="window.status='Click to display contents';return true">
Contents
</A>
cookies.txt. Because HyperText Transport Protocol (HTTP) is a stateless protocol, cookies provide a way to maintain information between client requests. This section discusses basic uses of cookies and illustrates with a simple example. For a complete description of cookies, see the Client-Side JavaScript Reference.
Each cookie is a small item of information with an optional expiration date and is added to the cookie file in the following format:
name=value;expires=expDate;
name is the name of the datum being stored, and value is its value. If name and value contain any semicolon, comma, or blank (space) characters, you must use the escape function to encode them and the unescape function to decode them.
expDate is the expiration date, in GMT date format:
Wdy, DD-Mon-YY HH:MM:SS GMTAlthough it's slightly different from this format, the date string returned by the
Date method toGMTString can be used to set cookie expiration dates.
The expiration date is an optional parameter indicating how long to maintain the cookie. If expDate is not specified, the cookie expires when the user exits the current Navigator session. Navigator maintains and retrieves a cookie only if its expiration date has not yet passed.
For more information on escape and unescape, see the Client-Side JavaScript Reference.
document.cookie property is a string that contains all the names and values of Navigator cookies. You can use this property to work with cookies in JavaScript.
Here are some basic things you can do with cookies:
// Sets cookie values. Expiration date is optionalNotice the use of
//
function setCookie(name, value, expire) {
document.cookie = name + "=" + escape(value)
+ ((expire == null) ? "" : ("; expires=" + expire.toGMTString()))
}
escape to encode special characters (semicolons, commas, spaces) in the value string. This function assumes that cookie names do not have any special characters.
The following function returns a cookie value, given the name of the cookie:
function getCookie(Name) {
var search = Name + "="
if (document.cookie.length > 0) { // if there are any cookies
offset = document.cookie.indexOf(search)
if (offset != -1) { // if cookie exists
offset += search.length
// set index of beginning of value
end = document.cookie.indexOf(";", offset)
// set index of end of cookie value
if (end == -1)
end = document.cookie.length
return unescape(document.cookie.substring(offset, end))
}
}
}
Notice the use of unescape to decode special characters in the cookie value.
register, creates a cookie with the name TheCoolJavaScriptPage and the value passed to it as an argument.
function register(name) {
var today = new Date()
var expires = new Date()
expires.setTime(today.getTime() + 1000*60*60*24*365)
setCookie("TheCoolJavaScriptPage", name, expires)
}
The BODY of the document uses getCookie (defined in the previous section) to check whether the cookie for TheCoolJavaScriptPage exists and displays a greeting if it does. Then there is a form that calls register to add a cookie. The onClick event handler also calls history.go(0) to redraw the page.
<BODY>
<H1>Register Your Name with the Cookie-Meister</H1>
<P>
<SCRIPT>
var yourname = getCookie("TheCoolJavaScriptPage")
if (yourname != null)
document.write("<P>Welcome Back, ", yourname)
else
document.write("<P>You haven't been here in the last year...")
</SCRIPT>
<P> Enter your name. When you return to this page within a year, you will be greeted with a personalized greeting.
<BR>
<FORM onSubmit="return false">
Enter your name: <INPUT TYPE="text" NAME="username" SIZE= 10><BR>
<INPUT TYPE="button" value="Register"
onClick="register(this.form.username.value); history.go(0)">
</FORM>
navigator object has two properties for checking installed plug-ins: the mimeTypes array and the plugins array.
mimeTypes is an array of all MIME types supported by the client (either internally, via helper applications, or by plug-ins). Each element of the array is a MimeType object, which has properties for its type, description, file extensions, and enabled plug-ins.
For example, the following table summarizes the values for displaying JPEG images.
Table 13.1 MimeType property values for JPEG images
var myMimetype = navigator.mimeTypes["video/quicktime"]
if (myMimetype)
document.writeln("Click <A HREF='movie.qt'>here</A> to see a " +
myMimetype.description)
else
document.writeln("Too bad, can't show you any movies.")
plugins is an array of all plug-ins currently installed on the client. Each element of the array is a Plugin object, which has properties for its name, file name, and description as well as an array of MimeType objects for the MIME types supported by that plug-in. The user can obtain a list of installed plug-ins by choosing About Plug-ins from the Help menu. For example, the following table summarizes the values for the LiveAudio plug-in.
Table 13.2 Plugin property values for the LiveAudio plug-in
length property indicates that navigator.plugins['LiveAudio'] has an array of MimeType objects containing seven elements. The property values for the second element of this array are as shown in the following table.
Table 13.3 MimeType values for the LiveAudio plug-in
var myPlugin = navigator.plugins["Shockwave"]
if (myPlugin)
document.writeln("<EMBED SRC='Movie.dir' HEIGHT=100 WIDTH=100>")
else
document.writeln("You don't have Shockwave installed!")
Last Updated: 05/27/99 21:21:39