Programming Tutorials

(追記) (追記ここまで)

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.

Previous
<< Built-In JavaScript Objects

Next
JavaScript Features>>

(追記) (追記ここまで)