|
12/96 Features: On the Road with JavaScript
No matter what your platform, JavaScript
can add portable pizzazz to your pages.
By Pratik R. Patel
You've heard the Java jive-how it can jazz up an otherwise ho-hum
HTML page. And you know all about Java's independent nature-how
it will run on a variety of platforms. You know, too, that Java
is a programming language. Most cagey coders can crank out Java
apps in short order, but if your idea of programming is setting
your VCR's clock, your jump to Java may be a quantum leap.
You can learn Java, but as with any language, the road to fluency
can be bumpy. If you have the spare change and a little faith,
you can hire someone to do it for you. Better yet, you can turn
to Java's less intimidating sibling, JavaScript.
No Compiler Necessary
JavaScript was developed by Netscape and Sun Microsystems as a
basic scripting language coded directly into HTML pages. An embedded
script runs as soon as a page is loaded. You don't need a compiler
or advanced coding skills to produce JavaScript-enabled Web pages:
All you need is a text editor.
JavaScript's platform-independence and lack of complexity account
for its appeal. It's simple enough so nonprogrammers can pick
up the syntax quickly, yet flexible and powerful enough to be
truly useful.
Despite their commom name, JavaScript and the full Java programming
language are really quite different. JavaScript's syntax looks
much like Java's, and both are object-based. However, Java is
a complete object-oriented programming language, while JavaScript
is closer to (though not the same as) a markup language. Like
HTML, JavaScript is not case sensitive.
Scripting a Page
JavaScript lets you add enormous functionality to a Web page,
from simple operations like automatically reloading a page to
more complex procedures such as data verification on a form. Your
JavaScript toolkit is a modest affair, too: You only need a text
editor and a browser that supports JavaScript. JavaScript is embedded
in your HTML code.
The HTML tag for JavaScript is <SCRIPT LANGUAGE="JavaScript">
</SCRIPT>. Older Web browsers that don't support JavaScript
will ignore unsupported tags. To stay on the safe side, you can
make sure the information between the SCRIPT tags doesn't get
picked up by old browsers by surrounding the JavaScript text with
HTML comment tags, <!- - and // - ->.
<SCRIPT LANGUAGE="JavaScript">
<!- - Put JavaScript inside a HTML comment tag
document.write("Hello world")
// end comment clause - -></SCRIPT>
The above illustrates one of two ways to call a JavaScript (the
script generates a new HTML page that says "Hello world").
The second way is to access it directly in your HTML code like
this:
<A HREF="http://www.c2.org/~andreww/
javascript/" onMouseOver="window
.status='Go to the JavaScript
Index'; return true">
JavaScript resources</A>
This code will cause the message "Go to the JavaScript Index"
to display in the Web browser's status bar when you move the cursor
over the hyperlink. Place the script directly into the HTML using
JavaScript's onMouseOver event handler, followed by the code,
surrounded by quotes.
These very simple JavaScript examples illustrate how easily it
can be integrated into a Web page. Keep in mind that whenever
you come across a page with JavaScript, you can see the actual
code by viewing the page's source.
Real-World Scripts
One of the most useful applications for JavaScript is form verification.
You can create a JavaScript that will automatically check data
entered on a Web form before sending it back to the server for
processing. This allows more efficient data gathering by ensuring
that required fields are completed properly before the server
processes and stores the information.
The following script will check the data you entered in a form
to make sure it is a valid e-mail address before sending that
data to the server.
<SCRIPT LANGUAGE="JavaScript">
function testEmail(form) {
field = form.email;
if (field.value == "" || field
.value.indexOf ('@', 0) == -1) {
alert ("Enter a valid email address")
return (false); }
else
return (true);
}
function test4Something(form) {
field = form.something;
if (field.value == "") {
alert ("Please provide a value for this box")
return (false); }
else
return (true);
}
function checkForm (form) {
if (!testEmail(form)) return;
if (!test4Something(form)) return;
alert ("Thank you for filling out
the form correctly");
//document.test.submit();
//un-comment the above line to
//send the form data to the CGI
//specified in the ACTION property
//in the FORM tag below.
return;
}
</SCRIPT>
You can embed an even easier, shorter JavaScript applet in your
HTML to display a Web page's modification date. As simple as they
are, these few lines of code can help facilitate the tracking
of pages on your site. The JavaScript for this operation is:
<SCRIPT LANGUAGE="JavaScript">
document.write("<center>Last Modified:"
+ document.lastModified +
"</center>")
</SCRIPT>
If you maintain a large number of Web pages, insert this code
into your Web document. The code will retrieve the most recent
update information each time the page is accessed. If your Web
pages have time-sensitive content, you may want to display the
modification date at the top of the page.
Harness the Browser's Power
Now that you've seen some of the things you can do with JavaScript,
let's see how it operates with the more advanced elements of HTML.
You can even control some of your Web browser's components with
JavaScript-the script that scrolls text across your browser's
status bar is a prime example.
You can also use JavaScript to handle more sophisticated pages.
Web pages have become quite complex, with elements such as applets
and inline files that are dependent on browser plug-ins. Getting
all these parts talk to one another can become a daunting task.
JavaScript can serve as a bridge between applets, plug-ins and
other page components.
For example, if your pages include frames, you can manipulate
them easily with JavaScript. With a few lines of code you can
clear a frame or quickly change its background color. Without
JavaScript, you'd need to reload an empty page or one with a different
background color.
<INPUT TYPE="button" VALUE="Red
BackGround" onClick="document
.bgColor='Red'">
Put the above JavaScript lines in a Web page, and when you click
on the page, the background will turn red. Similarly, you can
use "Blue," "Black" or any HTML-defined color
names, or use the hexidecimal codes for those same colors. Red,
for example, is COLOR="00FF00" in hex.
Each frame on a page is accessible as an object, as are many other
page parts. You can reset predefined object properties with JavaScript
code using either a SCRIPT section or an inline JavaScript tag
embedded directly in the HTML code. You aren't limited to working
with JavaScript's standard predefined objects; you can create
your own objects that may, in turn, encapsulate other objects.
You can also create variables to use in your code.
In the earlier form-checking example, three new objects were created:
one called testEmail, another named test4Something and a third,
checkForm. The form used in that script is an example of a predefined
object. This particular object is used to process forms-it passed
the object named this.form to the JavaScript from the HTML:
<INPUT TYPE="button" NAME="Submit"
VALUE="Submit" onClick="checkForm
(this.form)">
Though not a full-fledged programming language, JavaScript still
has many features. It contains basic programming flow and conditional
statements that make it a good choice for short functions with
a limited number of variables. User-defined objects in JavaScript
are declared in function() statements that resemble Java and C.
These functions can be just about anything you want: You can create
functions that add two numbers or show a specified URL in a separate
window. They can be called more than once in a Web page, without
inserting the full JavaScript each time.
Although JavaScript doesn't approach CGI programming's power,
it's far less complicated. For many types of forms, there's no
need to send the data to a CGI form for computation when a JavaScript
program embedded in the page can do the trick. This speeds up
operations at both ends: You don't have to wait because the JavaScript
runs right on the browser's machine, and the Web server doesn't
have to deal with CGI computations.
JavaScript's most recent iteration, version 1.1, is supported
by Netscape 3.0. Internet Explorer 3.0 supports some JavaScript
functionality, but not as fully as Navigator. With version 1.1,
you can use JavaScript to manipulate an applet's operation or
use one of its classes.
A JavaScript form element embedded in the HTML document-a button,
for example-can be used to trigger an action in a Java applet.
Your browser's plug-ins are also accessible. You can use some
JavaScript to check if a specific plug-in is installed.
You can code JavaScript to change an image's size dynamically
to fit the user's browser window size. JavaScript can cache and
replace inline images without disturbing the rest of the page,
allowing the designer to set the page to "cycle" through
multiple images on the same page.
JavaScript 1.1's complete feature list can be found at http://home.netscape.com/eng/mozilla/3.0/handbook/javascript/atlas.html.
A wealth of ready-to-use JavaScript is available. See the sidebar
"Script and More Script" for sites that offer free downloads.
Study a few, try them out and then rev up your text editor-you
can be on the road to JavaScript in a matter of minutes.
Pratik R. Patel, a freelance technology writer, is the
author of Java Database Programming with JDBC (The Coriolis Group,
1996). Contact him care of the Features and Columns Editors.
|