Although JavaScript is still a "fledgling" language, its popularity among Web content developers is growing at an exponential rate. Providing an easy means to extend the capability of a site without having (necessarily) to write extensive Java applets (or learn the intimacies of object-oriented programming), JavaScript makes an effective "glue" to integrate Java, frames, and browser plug-ins into one seamless site.
Because of its newness, support tools that ease the creation of JavaScript documents are few. At the time this book was written, in fact, there was nothing available specifically to make it easier for developers to integrate JavaScript into their Web sites.
The best combination of tools to use in JavaScript development is Netscape Navigator and a plain-text editor (such as Windows
Notepad), because it isn't easy to access SCRIPT tags in most HTML editors-in some, it isn't even possible yet. As more Java-oriented tools become available on the market or through the Internet, more will also support JavaScripting.
Because a JavaScript editor is not currently available, it's necessary to build a collection of tools that make the process of scripting Web content as painless as possible. The following is a good basic collection of tools to have at your disposal:
Developing JavaScript-enabled content is not always a quick process. It takes some thought, some effort, and a lot of shifting from your editor to your browser… correcting some things and tweaking others. After you design a few pages, you will develop your own system for editing and testing. The quality of the tool you use is not important; that the tool works for you is.
Netscape Navigator 2.0 is a standard on the Web; according to some surveys, it is used by 70 percent of all Web surfers. In an effort to make Web content development easier for the masses, Netscape has released a Gold version of Navigator. Navigator Gold merges the power of Navigator 2.0 with a WYSIWYG-based HTML editor.
Navigator Gold is primarily geared toward end-user creation of "straightforward" pages, with support limited to HTML 2.0. Rather than bombarding the user with HTML tags, Gold hides all but the end result. Formatting text, adding headings, creating links, and inserting graphics are all easily accomplished with the click of a mouse.
The integration between browser and editor is smooth and clean as well. Any page you load in the browser can be opened in the Editor by choosing File, Edit Document, or by choosing the edit icon on the toolbar (see fig. 18.1).
In edit mode, the visual display of the page changes (see fig. 18.2), the major difference being that any JavaScript instructions will be displayed in red.
As previously stated, Gold is primarily designed for creation of simple end-user pages. It's a good editor for laying out the basic look and feel of a site. However, there are several things to be aware of:
Navigator Gold is a good basic editor that seamlessly integrates with the Navigator browser. For designing the initial look and feel of your pages, it's a good editor to use. But after you design the appearance of a page and want to JavaScript-ize it (or if you're planning on utilizing frames), you'll probably want to supplement your development with several other tools.
If you want to use an editor other than Navigator Gold, you can use one such as HoTMetaL, HotDog, or HTML Write. After you finish the basic layout of your page, however, switching between a simple editor such as NotePad or TextPad and your browser is a fast and efficient way to go. It's not much different from what most programmers go through: developing, editing, and compiling a program through an editor framework, then switching to another program to test, run, and debug it.
Paint Shop Pro is an excellent Windows-based graphics program
that handles most image formats and can produce interlaced and
transparent GIF files. Another program worth having on the Windows
platform is the GIF Construction Set, by Alchemy Mindworks, which
supports the easy creation of animated GIFs. If JPEG is more
your style, you might find Lview Pro of some use.
| TIP |
If you're looking for suggestions for good tools to add to your own JavaScript Developer's Kit, read appendix A, "JavaScript Resources." |
One way to make creating JavaScript pages easier is to make a simple template page that contains the basic tags all HTML documents must have. Listing 18.1 shows a good starter template.
Listing 18.1 template.htm A JavaScript
Template Framework
<!-- template.htm: A simple JavaScript template file -->
<HTML>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide from non-JavaScript browsers
document.write("<BR>Your JavaScript code goes here<BR>");
// end hide from non-JavaScript browsers -->
</SCRIPT>
<CENTER>
<h1>JavaScript Template File</h1>
</CENTER>
Using this template gets you started!
</body>
</html>
The document.write() statement serves as a placeholder, and should be replaced with your own code. Make a copy of this file every time you need to create a new page and you'll have all the basic tags you need for JavaScripting.
Netscape's LiveWire Pro is a collection of utilities that enable Web administrators to easily maintain a Web site. Working in conjunction with Netscape's FastTrack Server, LiveWire Pro provides a graphic interface to the Webmaster, enabling drag-and-drop site creation. You can edit individual Web pages using Navigator Gold 2.0, which is included with FastTrack.
There are some caveats-one is that LiveWire Pro only works with Netscape's Web servers (which restricts the usefulness of LiveWire Pro to those platforms that run Netscape's server software). If you're maintaining a Web site and want to incorporate server-side JavaScript, this is perfect-but it might be too much for an end-user working with his or her collection of pages.
Also, LiveWire Pro is currently available only for the Windows NT and Solaris platforms. LiveWire Pro NT can run under Windows 95-but without a Windows 95-native Netscape server, you're limited to using the Site Manager utility. This means you can maintain an existing site on another machine, but you can't create, edit, or maintain any applications of your own.
Basically, if you aren't running Windows NT and your own Web site (with a Netscape server), you're better off looking at some of the other tools the Internet has to offer.
It's a good idea to keep up with new tools, utilities, and helper programs as you embark into JavaScripting. The Internet is swelling with resources, many of which are free for the taking.
Now that you have a set of tools and a template, put them to work with an example: create an online, animated, JavaScript-powered eZine.
The easiest way to get a feel for how to create a JavaScript-enabled Web site is to do it. For the sake of example, you're going to take a walk on the "e-publishing" side and create your own eZine, or online magazine.
Before starting this project, it's a good idea to get an overall view of the layout, indicating how the pages interconnect. Your eZine will consist of the following parts:
Using the FRAMESET and FRAME tags, you can make a seamless visual presentation. One possible layout (and the one used in this example) is shown in figure 18.3.
The browser has been divided into the following frames:
Taking full advantage of JavaScript, embellish the design with a few extra goodies:
As mentioned, Navigator Gold is great for formatting the visual content of a page, but currently lacks control over the underlying structure (the tags). Therefore, you'll use a combination of Navigator Gold and NotePad to create your pages in this example.
The first thing you need is a document that sets up the frames. This is the document you want the user to load, so using Web conventions, this is called INDEX.HTML (see listing 18.2). Because Gold doesn't handle this level well, you need to use NotePad to create this first page.
Listing 18.2 index.htm Frame Control
Document That Sets Up the eZine Interface
<!-- index.htm: JavaScript eZine driver -->
<HTML>
<HEAD>
<TITLE>A JavaScript-based eZine</TITLE>
</HEAD>
<FRAMESET COLS="125,*">
<FRAMESET ROWS="50,*">
<FRAME SRC="logo.htm" NAME="LOGO" NORESIZE BORDER=0
MARGINHEIGHT=0 MARGINWIDTH=0 SCROLLING=NO>
<FRAME SRC="toc.htm" NAME="TOC" NORESIZE BORDER=0
MARGINHEIGHT=0 MARGINWIDTH=0 SCROLLING=AUTO>
</FRAMESET>
<FRAMESET ROWS="50,*">
<FRAME SRC="title.htm" NAME="TITLE" NORESIZE BORDER=0
MARGINHEIGHT=0 MARGINWIDTH=0 SCROLLING=NO>
<FRAME SRC="coverpage.htm" NAME="BODY" NORESIZE
MARGINHEIGHT=0 SCROLLING=AUTO>
</FRAMESET>
</FRAMESET>
<NOFRAME>
<BODY BGCOLOR=#FFFFFF>
<CENTER><H1>A JavaScript-based eZine</H1></CENTER>
<HR>
Because this eZine takes advantage of JavaScript, you really ought to
get a browser that supports it, like
<A HREF="http://home.netscape.com/">Netscape Navigator 2.0</A>.
<HR>
Send your comments to the <A HREF="mailto: ">Editor</A>.
</BODY>
</NOFRAME>
</HTML>
This document divides the browser window into the four frames shown in figure 18.3. The additional code within the NOFRAME tag isn't necessary for JavaScript purposes, but allows surfers using a browser that can't handle frames to see at least a "teaser" of what's available.
With the frame structure laid out, you only need to create empty HTML files as placeholders for each of the frames. You can switch to Gold to continue the process of working with the individual documents, but remember not to use Gold for the frame page itself. Using the template file from listing 18.1, create the following files:
With those files in place, start Navigator and load INDEX.HTML. You should see something similar to figure 18.4.
You should be aware of the capabilities and side effects of the Gold editor. If you choose File, Edit Document, you are presented with Gold's editor mode and the file shown in figure 18.5.
What you see is the part of the document in the NOFRAME
tag. While this makes it easy to edit the final, user-end part
of the document, you still have to do some basic tag editing.
Using the JavaScript template file makes things a bit easier,
as you will see when you piece together the next facet of the
project: the table of contents.
| NOTE |
Don't use Navigator Gold to edit a frame page after the FRAMESET and FRAME tags have been added. Because the editor doesn't display those tags, it also doesn't save them. Saving your document will cause all FRAMESET and FRAME tags to be deleted. |
The table of contents (located in the lower-left frame) serves as your control center. All article links are listed here. When the user passes the mouse over one of the links, a line of text describing that link appears in the browser's status bar. For your eZine, you'll have two "article" documents so you need to lay out the TOC.HTM file with two links to files ARTICLE1.HTM and ARTICLE2.HTM (which, for now, can be made using the JavaScript template). Creating a link with Gold is very easy if you follow these steps:
Adding a couple of horizontal lines to separate things and dropping the text size down to <H6> produces a tight, clean look. As they are now, however, the links will load the article documents into the table of contents frame. Edit the file from NotePad to add the TARGET attribute:
<A HREF="article1.htm" TARGET="MAIN">Article 1</A>
This directs the document load into the "body" frame (where the article bodies are displayed). Because you have to use NotePad to insert or edit your JavaScript code eventually, however, you might want to wait to make visual changes before you have to resort to a straight-text editor.
Now that you've finished the visual look of your table of contents,
the last piece you need to implement is control of the status
bar. Instead of displaying the URL of the link over which the
mouse is positioned, display a one-line description of the article.
Because this will be JavaScript coding, it will have to be done
with NotePad.
| NOTE |
Gold doesn't handle the SCRIPT tag well. When you start adding JavaScript to a document, be careful when making changes in Gold. Specifically, event handlers can cause trouble as Gold tries to resolve them. |
Use a simple array of strings and a little routine to change the status bar:
function MakeArray(size)
{
this.length = size;
for(i = 1; i <= size; i++)
{
this[i] = '';
}
return this;
}
msg = new MakeArray(2);
msg['story1'] = 'Article #1';
msg['story2'] = 'Article #2';
To make the prompt strings appear in the status bar, add the onMouseOver
attribute to the link:
<A HREF="article1.htm" TARGET="BODY" ONMOUSEOVER="self.status=msg['story1'];return true;">Article 1</A>
Listing 18.3 finishes the TOC.HTM file.
Listing 18.3 toc.htm Table of Contents
Document File
<!-- toc.htm: eZine table of contents -->
<HTML>
<HEAD>
<TITLE>A JavaScript-enabled eZine</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide from non-JavaScript browsers
function MakeArray(size)
{
this.length = size;
for(i = 1; i <= size; i++)
{
this[i] = '';
}
return this;
}
msg = new MakeArray(2);
msg['story1'] = 'Article #1';
msg['story2'] = 'Article #2';
// end hide -->
</SCRIPT>
<CENTER>
<H6>CONTENTS</H6>
<HR SIZE=4 ALIGN=CENTER>
<A HREF="article1.htm"
TARGET="BODY"
ONMOUSEOVER="self.status=msg['story1']; return true;">
Article 1</A>
<HR SIZE=2 WIDTH=25% ALIGN=CENTER>
<A HREF="article2.htm"
TARGET="BODY"
ONMOUSEOVER="self.status=msg['story2']; return true;">
Article 2</A>
<HR SIZE=4 ALIGN=CENTER>
</CENTER>
</BODY>
</HTML>
The ARTICLE1.HTM and ARTICLE2.HTM files are simply regular HTM files with one little twist. Listing 18.4 shows the basic framework for ARTICLE.HTM.
Listing 18.4 article.htm Example Layout
for an Article Document
<!-- article1.htm: an example eZine story -->
<HTML>
<HEAD>
<TITLE>Article 1</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide from non-JavaScript browsers
window.parent.frames['TITLE'].location.assign("title1.htm");
// end hide from non-JavaScript browsers -->
</SCRIPT>
<H1>Article 1</H1>
<HR>
Article 1 goes here.
</BODY>
</HTML>
The built-in capabilities of Navigator Gold make editing these pages simple. In fact, it is exceptionally easy to handle text color changes, highlighting, and other character attributes-things that normally drive Web designers crazy-in addition to inserting graphics (see fig. 18.7).
The "twist" mentioned earlier is the JavaScript code snippet that causes a new title to load into the title frame:
window.parent.frames['TITLE'].location.assign("title1.htm");
This loads the title document for article 1 into the "title"
frame each time the article is loaded. Remember, if you're using
Navigator Gold, don't add this code until you finish editing your
articles. Additional articles (ARTICLE2.HTM, ARTICLE3.HTM, and
so on) would follow the same basic format , with the title document
changed from TITLE1.HTM to TITLE2.HTM, TITLE3.HTM…you get
the picture.
| NOTE |
If you add any links to pages outside your eZine, use NotePad to add the TARGET="-top" attribute to the A tag; otherwise, the new page will load into the current frame instead of taking up the entire browser window. If what you're loading is itself made up of frames, a reduced version of that page will be displayed inside the current frame. A possible outcome of this kind of "nesting" is shown in figure 18.8. |
The HTML document that displays the title frame can be as simple as one line of displayed text as shown in listing 18.5.
Listing 18.5 title1.htm File to Load
a Title Header into the Title Frame
<!-- title1.htm: Title for Article 1 --> <HTML> <TITLE>Article 1</TITLE> <BODY> <H1>Article 1</H1> </BODY> </HTML>
The cover page in listing 18.6 isn't incredibly fancy, but it does have a nice touch.
Listing 18.6 coverpage.htm The eZine
Cover Page or First Document Displayed
<!-- coverpage.htm: eZine coverpage -->
<HTML>
<TITLE>JavaScript: The eZine!</TITLE>
<BODY>
<H1><CENTER>A JavaScript eZine</CENTER></H1>
<HR>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide from non-Javascript browsers
d = new Date();
hour = d.getHours();
if(hour < 5)
{
document.write("Doing a little late-night surfing, eh?");
}
else
if(hour < 6)
{
document.write("Up early, I see! Do you have your coffee?");
}
else
if(hour < 12)
{
document.write("Good morning!");
}
else
if(hour < 18)
{
document.write("Good afternoon!");
}
else
{
document.write("Good evening!");
}
document.write("<P>");
//-->
</SCRIPT>
So, you want to do the JavaJive ... but you don't want to program?
<P>
Well ... you've come to the right place. Check out the articles
here and <B>you too</B> can become a
<B><I>PowerJavaScripter</I></B>!
<HR>
<FONT SIZE=2>
<I>Send your comments to the <A HREF="mailto: ">Editor</A>.</I>
<FONT SIZE=>
</BODY>
</HTML>
In this example, the Date object is used to determine what time of day the user is reading your eZine. Depending on the hour, it displays a different message at the top of the page.
Figure 18.9 shows the presentation when you put it all together. While simple, this is a good start at creating your own publishing presence on the Web.