1.6 Client-Side JavaScript Features
Another possible use of JavaScript is
for writing programs to perform arbitrary
computations. You can write simple scripts, for example, that compute
Fibonacci numbers, or search for primes. In the context of the Web
and web browsers, however, a more interesting application of the
language might be a program that computed the sales tax on an online
order, based on information supplied by the user in an HTML form. As
mentioned earlier, the real power of JavaScript lies in the browser
and document-based objects that the language supports. To give you an
idea of JavaScript's potential, the following sections list and
explain the important capabilities of client-side JavaScript and the
objects it supports.
1.6.1 Control Document Appearance and Content
The JavaScript
Document
object, through its write(
) method, which we have already seen, allows you to write
arbitrary HTML into a document as the document is being parsed by the
browser. For example, you can include the current date and time in a
document or display different content on different platforms.
You can also use the Document object to generate documents entirely
from scratch. Properties of the Document object allow you to specify
colors for the document background, the text, and the hypertext links
within it. This amounts to the ability to generate dynamic and
conditional HTML documents, a technique that works particularly well
in multiframe documents. Indeed, in some cases dynamic generation of
frame content allows a JavaScript program to replace a traditional
server-side script entirely.
Internet Explorer 4 and Netscape 4 support proprietary techniques for
producing Dynamic HTML effects that allow document
content to be dynamically generated, moved, and altered. IE 4 also
supports a complete DOM that gives JavaScript access to every single
HTML
element within a document. And IE 5.5 and
Netscape 6 support the W3C DOM standard (or at least key portions of
it), which defines a standard, portable way to access all of the
elements and text within an HTML document and to position them and
modify their appearance by manipulating their Cascading Style Sheets
(CSS) style attributes. In these browsers, client-side JavaScript has
complete power over document content, which opens an unlimited world
of scripting possibilities.
1.6.2 Control the Browser
Several JavaScript objects
allow control over the
behavior of the browser. The Window object supports methods to pop up
dialog boxes to display simple messages to the user and get simple
input from the user. This object also defines a method to create and
open (and close) entirely new browser windows, which can have any
specified size and any combination of user controls. This allows you,
for example, to open up multiple windows to give the user multiple
views of your web site. New browser windows are also useful for
temporary display of generated HTML, and, when created without the
menu bar and other user controls, these windows can serve as dialog
boxes for more complex messages or user input.
JavaScript does not define
methods that allow you to create and manipulate frames directly
within a browser window. However, the ability to generate HTML
dynamically allows you to programmatically write the HTML tags that
create any desired frame layout.
JavaScript also allows control over which
web pages are displayed in the browser. The Location object allows
you to download and display the contents of any URL in any window or
frame of the browser. The History object allows you to move
forward and back within the user's
browsing history, simulating the action of the browser's
Forward and Back buttons.
Yet another method of the Window object allows JavaScript to display
arbitrary messages to the user in the status line of any browser
window.
1.6.3 Interact with HTML Forms
Another
important aspect of client-side JavaScript is its ability to
interact with HTML forms. This capability is provided by the
Form object
and the form element objects it can contain: Button, Checkbox,
Hidden,
Password, Radio, Reset, Select, Submit, Text, and Textarea objects.
These
element
objects allow you to read and write the values of the input elements
in the forms in a document. For example, an online catalog might use
an HTML form to allow the user to enter his order and could use
JavaScript to read the input from that form in order to compute the
cost of the order, the sales tax, and the shipping charge. JavaScript
programs like this are, in fact, very common on the Web. We'll
see a program shortly that uses an HTML form and JavaScript to allow
the user to compute monthly payments on a home mortgage or other
loan. JavaScript has an obvious advantage over server-based scripts
for applications like these: JavaScript code is executed on the
client, so the form's contents don't have to be sent to
the server in order for relatively simple computations to be
performed.
Another common use of
client-side JavaScript with forms
is for validating form data before it is submitted. If client-side
JavaScript is able to perform all necessary error checking of a
user's input, no round trip to the server is required to detect
and inform the user of trivial input errors. Client-side JavaScript
can also perform preprocessing of input data, which can reduce the
amount of data that must be transmitted to the server. In some cases,
client-side JavaScript can eliminate the need for scripts on the
server altogether! (On the other hand, JavaScript and server-side
scripting do work well together. For example, a server-side program
can dynamically create JavaScript code on the fly, just as it
dynamically creates HTML.)
1.6.4 Interact with the User
An important feature of
JavaScript is the ability to define event
handlers -- arbitrary pieces of code to be executed when a
particular event occurs. Usually, these events are initiated by the
user, when, for example, she moves the mouse over a hypertext link,
enters a value in a form, or clicks the Submit button in a form. This event-handling
capability is a crucial one, because programming with graphical
interfaces, such as HTML forms, inherently requires an event-driven
model. JavaScript can trigger any kind of action in response to user
events. Typical examples might be to display a special message in the
status line when the user positions the mouse over a hypertext link
or to pop up a
confirmation dialog box when the user submits an important form.
1.6.5 Read and Write Client State with Cookies
A cookie is a small amount of
state
data stored permanently or temporarily by the client. Cookies may be
transmitted along with a web page by the server to the client, which
stores them locally. When the client later requests the same or a
related web page, it passes the relevant cookies back to the server,
which can use their values to alter the content it sends back to the
client. Cookies allow a web page or web site to
remember things about the
client -- for example, that the user has previously visited the
site, has already registered and obtained a password, or has
expressed a preference about the color and layout of web pages.
Cookies help you provide the state information that is missing from
the stateless HTTP protocol of the Web.
When cookies were invented, they were intended for use exclusively by
server-side scripts; although stored on the client, they could be
read or written only by the server. JavaScript changed this, because
JavaScript programs can read and write cookie values and can
dynamically generate document content based on the value of cookies.
1.6.6 Still More Features
In addition to the features I have already discussed, JavaScript has
many other capabilities, including the following:
JavaScript can change the image
displayed
by an <img> tag to produce image rollover
and animation effects.
JavaScript can interact with Java
applets and other
embedded objects
that appear in the browser. JavaScript code can read and write the
properties of these applets and objects and can also invoke any
methods they define. This feature truly allows JavaScript to script
Java.
As mentioned at the start of this section, JavaScript can perform
arbitrary
computation.
JavaScript has a
floating-point data type,
arithmetic operators that work with
it, and a full complement of standard floating-point
mathematical
functions.
The JavaScript Date object simplifies the
process of computing and working with dates and times.
The Document object supports a property
that specifies the last-modified date for the current document. You
can use it to automatically display a timestamp on any
document.
JavaScript has a
window.setTimeout( ) method that allows a block of
arbitrary JavaScript code to be executed some number of milliseconds
in the future. This is useful for building delays or repetitive
actions into a JavaScript program. In JavaScript 1.2,
setTimeout( ) is augmented by another useful
method called setInterval(
).
The Navigator object (named
after the Netscape web browser, of course) has variables that specify
the name and version of the browser that is running, as well as
variables that identify the platform on which it is running. These
variables allow scripts to customize their behavior based on browser
or platform, so that they can take advantage of extra capabilities
supported by some versions or work around bugs that exist on some
platforms.
In client-side JavaScript 1.2, the
Screen object provides information
about the size and color-depth of the monitor on which the web
browser is being displayed.
As of
JavaScript 1.1, the scroll( ) method of the Window
object allows JavaScript programs to scroll windows in the X and Y
dimensions. In JavaScript 1.2, this method is augmented by a host of
others that allow browser windows to be moved and resized.
1.6.7 What JavaScript Can't Do
Client-side JavaScript
has an impressive list of capabilities. Note, however, that they are
confined to browser- and document-related tasks. Since client-side
JavaScript is used in a limited context, it does not have features
that would be required for standalone languages:
JavaScript does not have any
graphics
capabilities, except for the powerful ability to dynamically generate
HTML (including images, tables, frames, forms, fonts, etc.) for the
browser to display.
For security reasons, client-side JavaScript
does not allow the
reading
or writing of files. Obviously, you wouldn't want to allow an
untrusted program from any random web site to run on your computer
and rearrange your files!
JavaScript does not support networking of any kind, except that it
can cause the browser to download arbitrary URLs and it can send the
contents of HTML forms across the network to server-side scripts and
email addresses.
|