HTML Objects in JavaScript
By: aathishankaran in Javascript Tutorials on 2007-03-21
History Object
A long-time feature in browser software is the capability to track where you have surfed within a given session. This feature has come to .be known as a history list, and it's available in both the Navigator and Internet Explorer's Go menus. The history object is the JavaScript equivalent to this list. You can work with it as a user might, moving forward or backward in a list to navigate where a user has been.
Suppose you wanted to go back two pages in your history list when the user clicked a button. The event handler follows:
function goBackTwoPages()
{
window. history. go (-2)
}
Document Object
Although the window object is the top-level object in the hierarchy, the document object is arguably the most important. The document object is responsible for all the actual content displayed on a given page. You can work with the document object to display dynamic HTML pages. Also contained within the document are all the typical user inter-face (UI) elements of a Web application.
A common use of the document object is generating HTML pages through JavaScript. You can do this with the write () or writeln() methods. For example the following code displays the HTML text specified as the method parameter:
<HTML>
<HEAD>
<SCRIPT>
document.write("<hl>Text created by JavaScript</hl>");
</SCRIPT>
</HEAD>
</HTML>
Form Object
Forms give life to static pages by providing an interface users can interact with through controls. You can only place a button, text, or other UI object within the confines of a form. The form object is your means of inter-acting with this HTML element in your scripts.
Button Objects (Button, Submit, and Reset)
Unless you jumped into Web development from a character-based environment, you are undoubtedly familiar with push buttons. JavaScript has three button objects: button, submit, and reset. Each of these are the object representation of an HTML tag. The button object is a generic button that you need to add code to for it to be useful. The submit button is a specialized version of a button whose default action is to submit the form of which it is a part. Similarly, the reset button is hard coded to reset the values of all controls within a form. Yes, you could use a button object to serve the same role as the submit object (by calling the form's submit () method).
Select Object
Another common control in windowed environments is a drop-down list or selection list box, both of which allow a user to select from a predefined list of values. The difference is that the user can select only one value from a drop-down list, whereas he can select multiple choices from a selection list. The select object encapsulates the behavior of both of these UI elements. In other words, it can appear as a drop-down list (default) or a selection list (if its multiple property is set to true).
Checkbox Object
Another industry-wide standard UI control is the checkbox. This element allows the user to specify a yes/no or true/false value by clicking the checkbox control.
Radio Object
Radio buttons are a set of mutually exclusive controls, such that if one radio button is selected, all other buttons in the set become unselected. The radio object provides this element in an HTML form. You define a set of radio buttons by giving them the same name property.
Text Object
A principle element for any data entry application is a field in which the user can input data. The text object serves as this data-capturing device as the objectified representation of the text input HTML tag.
Textarea Object
Related to the text object is the textarea object, which allows you to enter multiple lines of text as opposed to a single line.
Password Object
The only difference between the text and password is that all the characters entered into the password object are displayed as asterisks.
Hidden Object
Another field object, the hidden object is like a text object with a visible property set to false. It is used to store values to pass on to a server process. The hidden object comes from the pre-JavaScript days of HTML in which there were no such things as variables, arrays, or objects to store values. Although you might still want to employ them for transferring data among pages of a multiple-page data entry application, much of the data storage value of hidden objects is no longer needed with JavaScript.
Link Object
The link object lets you work with links in JavaScript code, the link still remains the very heart of Web technology. Because a link is simply referencing another HTML page or other destination, it is very similar to the location object which contains the same information for the current HTML page.
Anchor Object
The anchor object is a piece of text or an image in the HTML page that can be the target of a hypertext link. In practical terms, you use the anchor object very little with JavaScript, making it perhaps the least important of all built-in objects.
Image Object
The image object is an encapsulation of an HTML image. Perhaps the most effective use of this object type is to cache images you want to display. You can construct an image object in your code and download the image data from the server before it is needed for display by the browser. When the image is requested, you can pull the image from cache rather than from the server.
Navigator Object
The navigator object is an object rep-resenting the browser software in use.
Using this object, you can retrieve information about the name and version of the browser in use. Both Netscape Navigator and Microsoft Internet Explorer support the navigator object.
Add Comment
This policy contains information about your privacy. By posting, you are declaring that you understand this policy:
- Your name, rating, website address, town, country, state and comment will be publicly displayed if entered.
- Aside from the data entered into these form fields, other stored data about your comment will include:
- Your IP address (not displayed)
- The time/date of your submission (displayed)
- Your email address will not be shared. It is collected for only two reasons:
- Administrative purposes, should a need to contact you arise.
- To inform you of new comments, should you subscribe to receive notifications.
- A cookie may be set on your computer. This is used to remember your inputs. It will expire by itself.
This policy is subject to change at any time and without notice.
These terms and conditions contain rules about posting comments. By submitting a comment, you are declaring that you agree with these rules:
- Although the administrator will attempt to moderate comments, it is impossible for every comment to have been moderated at any given time.
- You acknowledge that all comments express the views and opinions of the original author and not those of the administrator.
- You agree not to post any material which is knowingly false, obscene, hateful, threatening, harassing or invasive of a person's privacy.
- The administrator has the right to edit, move or remove any comment for any reason and without notice.
Failure to comply with these rules may result in being banned from submitting further comments.
These terms and conditions are subject to change at any time and without notice.
Comments