History Object
If you have surfed the web at all, you are probably very familiar with a browser's history list. Just as the history list allows a user to traverse where she has been, Javascript's history object enables you as a Javascript developer to menuover through web pages that have been visited.
Determining the Size of the List
You can use the length() property of the history object to determine the number of entries in the list. For example, suppose you want to track the number of history list entries in the right frame of a multiframe window. The left frame contains the following code:
<html>
<head>
<script language="Javascript">
function moveon()
{
var urlAddress="" urlAddress=document.forms[0].Edit1.valueparent.frames[1].location=urlAddress document.forms[0].Edit2.value=parent.frames[1].history.length
}
</script>
</head>
<body>
<form>
<input type="text" name="Edit1">
<input type="button" value="move" onClick="moveon()">
<input type="text" name="Edit2">
</form>
</body>
</html>
The user can use the Edit1 text object to enter a URL to move to. As the user clicks the move button to move to the URL, the Edit2 text object is updated to provide the length of the history list for the right frame.
Navigating the History List
Just knowing the length of the history list is rarely useful, but it can become useful when you want to navigate a list using the history object methods back(), forward() , and go().
Back Page
The back() method is the functional equivalent of clicking the back (left-arrow) button on the browser's toolbar. For example, the following code moves a window to its previous position:
window.history.back()
Forward Page
As you would expect, the forward() method is the same as clicking the right-arrow button on the browser's toolbar. It is used as follows:
window.history.forward()
Specific Page Based on Number
The go() method jumps to a specific place in the history list. Its syntax follows:
[window.]history.go(delta|"loaction")
The delta parameter is a positive or negative integer that can specify the number of places to jump. For example, the following line moves to the next document in the history list
(the equivalent of using the forward() method):
window.history.go(1)
The following list details the data value:
delta<0 Moves backward delta number of entries
delta>0 Moves forward delta number of entries
delta=0 Reloads the current document
Document Object
The window object is the highest-level object for built-in Javascript objects; in this role , it serves as a container , but it does not have any content that is associated with it. It leaves the content of a web development up to the document object. The document object serves as the Javascript equivalent of an HTML document. In this role, the document object is a container for all HTML- related objects that are associated with both the <head> and <body> tags. The document object gets its title property from the <title> tag (located within the <head> section) and several color-related properties from the <body> section, which is shown here:
syntax
<body[BACKGROUND="backgroundImage"][BGCOLOR="backgroundColor"][TEXT="foregroundColor"][Link="unfollowedLinkColor"][ALINK="activatedLinkColor"][VLINK="followedLinkColor"][onLoad="methodName"][onUnload="methodName"]
Although onLoad and onUnload events are associated with the <body> tag, they are events of the window object, not the document object.
The document object is critical as you work with Javascript and HTML because all the action happens on a Web page within a document. Because of this scope , you need to refer to the document object when you are accessing an object within it. For example , if you want to access a form object named invoiceForm , you must preface your reference with document:
document.invoiceForm.submit()
If you do not , Javascript is unable to locate the object within the page.
Changing Document Attribute Colors
Color settings for documents are usually set by a user in his browser configuration, but Javascript gives you the ability to change these color settings programmatically . The document object has five properties that reflect the colors of various attributes within the document - alinkColor,bgColor,fgColor,linkColor and vlinkColor
These properties are expressed either as string literals or as hexadecimal RGB triplet values. For example, if you wanted to assign a background color of chartreuse to a document, you could use the string literal chart reuse:
document.bgColor=chartreuse
You could also use the equivalent hexadecimal RGB triplet value:
document.bgColor=”7fff00”
No comments:
Post a Comment