 |
Notice: This material is excerpted from Special Edition Using JavaScript, ISBN: 0-7897-0789-6. The electronic version of this material has not been through the final proof reading stage that the book goes through before being published in printed form. Some errors may exist here that are corrected before the book is published. This material is provided "as is" without any warranty of any kind.
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 it's newness, support tools that ease the creation of JavaScript documents are few. At the time this book was written, in fact, there is 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. A good basic collection of tools to have at your disposal is:
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 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 "straight-forward" 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).
Fig. 18.1 Choosing the edit icon will switch to edit mode for the current document (closing the browser window). If you wish to open the editor in a separate window, chooseEdit Document from theFile menu.
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.
Fig. 18.2 Editing the same page with Navigator Gold keeps the visual layout consistent with the display from the browser, but also shows JavaScript statements.
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: develop, edit, and compile a program through an editor framework, then switch 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.
If you're looking for suggestions for good tools to add to your own "JavaScript Developer's Kit," read Appendix B, "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 A JavaScript template framework
<!-- template.html: 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.
Fig. 18.3 A rough design layout for an online eZine, consisting of 4 frames: table of contents, eZine banner, title, and article body.
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 is currently lacking 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 Frame control document that sets up the eZine interface
<!-- index.html: JavaScript eZine driver -->
<HTML>
<HEAD>
<TITLE>A JavaScript-based eZine</TITLE>
</HEAD>
<FRAMESET COLS="125,*">
<FRAMESET ROWS="50,*">
<FRAME SRC="logo.html" NAME="LOGO" NORESIZE BORDER=0
MARGINHEIGHT=0 MARGINWIDTH=0 SCROLLING=NO>
<FRAME SRC="toc.html" NAME="TOC" NORESIZE BORDER=0
MARGINHEIGHT=0 MARGINWIDTH=0 SCROLLING=AUTO>
</FRAMESET>
<FRAMESET ROWS="50,*">
<FRAME SRC="title.html" NAME="TITLE" NORESIZE BORDER=0
MARGINHEIGHT=0 MARGINWIDTH=0 SCROLLING=NO>
<FRAME SRC="coverpage.html" 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:
See Chapter 19, "A Simple Template."
With those files in place, start Navigator and load INDEX.HTML. You should see something similar to Figure 18.4.
Fig. 18.4 Using the previously defined template file to "stub out" the four frame documents may produce more text than you wish, but it is now easy to edit and watch as the pages work together.
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.
Fig. 18.5 Editing INDEX.HTML with Navigator Gold. Notice that, from the editor's perspective, there are no FRAMESET tags. The two HTML tag icons at the top of the window define the COMMENT tag and NOFRAME tag.
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.
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.HTML file with two links to files ARTICLE1.HTML and ARTICLE2.HTML (which, for now, can be made using the JavaScript template). Creating a link with Gold is very easy:
Fig. 18.6 Create a link to an article from within the table of contents file by browsing to the file you want to link to, then clicking OK.
Adding a couple 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.html" 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 the implement is control of the status bar. Instead of displaying the URL of the link on which the mouse is positioned over, display a one-line description of the article. Because this will be JavaScript coding, it will have to be done with NotePad.
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.html" TARGET="BODY" ONMOUSEOVER="self.status=msg['story1'];return true;">Article 1</A>
This finishes the TOC.HTML file:
LISTING 18.3 Table of Contents document file
<!-- toc.html: 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.html"
TARGET="BODY"
ONMOUSEOVER="self.status=msg['story1']; return true;">
Article 1</A>
<HR SIZE=2 WIDTH=25% ALIGN=CENTER>
<A HREF="article2.html"
TARGET="BODY"
ONMOUSEOVER="self.status=msg['story2']; return true;">
Article 2</A>
<HR SIZE=4 ALIGN=CENTER>
</CENTER>
</BODY>
</HTML>
The ARTICLE1.HTML and ARTICLE2.HTML files are simply regular HTML files with one little twist:
LISTING 18.4 Example layout for an article document
<!-- article1.html: 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.html");
// end hide from non-JavaScript browsers -->
</SCRIPT>
<H1>Article 1</H1>
<HR>
Article 1 goes here.
</BODY>
</HTML>
The built-in capabilities of Navagator 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[dm]in addition to inserting graphics (see fig. 18.7).
Fig. 18.7 Using Navigator Gold for text layout and color control is a straightforward process. ChooseProperties,Document to open the dialog that allows background, link, and text color setting.
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.html");
This loads the title document for article 1 into the "title" frame each time the article is loaded. Remember, if you're using Gold, don't add this code until you finish editing your articles.
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.
Fig. 18.8 Not specifying that a document is to be loaded on "top" of any existing frames will cause that document (the INDEX.HTML file in this case) to be loaded into the frame where the link is located.
The HTML document that displays the title frame can be as simple as one line of displayed text:
LISTING 18.5 File to load a title header into the title frame <!-- title1.html: Title for Article 1 --> <HTML> <TITLE>Article 1</TITLE> <BODY> <H1>Article 1</H1> </BODY> </HTML>
The coverpage in Listing 18.6 isn't incredibly fancy, but it does have a nice touch.
LISTING 18.6 The eZine 'coverpage' or first document displayed
<!-- coverpage.html: 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.
Fig. 18.9 Combining all the documents put together so far creates a JavaScript-enabled eZine framework.
|
|