Chapter 23
Script Example 6: Creating an eZine

In This Chapter

Start the Web-Presses!

By now, you may be thinking to yourself, "This author stuff doesn't seem that difficult. Heck, I could write my own book or publish a magazine, and it'd be much better than what this guy has written." You may be right...and through the magic of the Web, you can give it a shot. Publishing on the Web doesn't require a contract with a publisher, a fleet of editors, or tons of money; all you need is you, your browser, and an idea.

Many have already started down the path of the eZine, an electronic, online sibling of the magazines you find at your favorite bookstore. Each day, another one is "published" through the Web. (I've even heard there's a 'zine about chickens). If no one reads it but you, who cares? You've made your statement, presented your case, told your story, whatever you want to do.

But you are a JavaScripter—you want to be different. You want to stand out in the crowd as someone who knows his Web. That's what this example will do for you. It’s a Do-It-Yourself JavaScript-Enabled eZine Framework (whew!).

At the same time, you'll get a chance to see a variety of JavaScript tricks all rolled into one power-collection of pages.

JavaScript: The eZine!

Any magazine, electronic or otherwise, consists of the following parts:

You can put these together using the <FRAME> tag. The <FRAME> tag allows you to break the browser's display area into subsections (separated by frames) and display a different HTML document in each frame. Because a picture is worth a thousand words, this figure shows you what our eZine will look like when you finish.

JavaScript: The eZine!

Let's tear this apart and look at each piece.

I've Been Framed!

The first thing you see is that the screen is divided into three areas. Each area is referred to as a frame. When the user first loads the eZine, he sees the cover page that you see in the figure. The frame that runs down the left side of the screen serves as your Table of Contents. Each link listed there loads a particular article when it’s clicked on. Articles that are loaded appear in the large frame on the right. Finally, the third frame is a "help window," and you'll look at that more closely later.

So the first thing you need is an HTML document that sets up your frames. This is the document that the user would load to read your eZine. By convention, the "main" or "primary" HTML document in a directory is called index.htm, and you want to stick with convention. Here's your index.htm:

<!— index.htm: The "driver" of our eZine —>
<HTML>
<HEAD>
<TITLE>JavaScript: The eZine!</TITLE>
</HEAD>
<FRAMESET COLS="90,*">
<FRAME SRC="buttons.htm" NORESIZE NAME="Buttons" BORDER=1 SCROLLING=NO>
<FRAMESET ROWS="*,60">
<FRAME SRC="coverpage.htm" NORESIZE NAME="Main" SCROLLING=AUTO>
<FRAME SRC="helpwindow.htm" NORESIZE NAME="Help" SCROLLING=NO>
</FRAMESET>
</FRAMESET>
<NOFRAMES>
<BODY BGCOLOR=#FFFFFF>
<CENTER><H1>JavaScript: The eZine!</H1></CENTER>
<HR>

Since this is an eZine about JavaScript, you really ought to get a browser that supports it. Why not check out

<A HREF="http://home.netscape.com/">Netscape Navigator 3.0</A>?
<HR>

Send your comments to the 

<A HREF="mailto: ">Editor</A>.
</BODY>
</NOFRAMES>
</HTML>

The <NOFRAMES> tag is basically a wrapper for what you want to display to people who don't have a frames-enabled browser. In this case, you gently urge people to get a newer browser (and because you're using JavaScript, I suggest Navigator 3.0 or 4.0).

Setting Frames 

A collection (or set) of frames is defined with the <FRAMESET> tag. <FRAMESET> has two attributes, ROWS and COLS, which enable you to define the width of the various frames you want.

<FRAMESET COLS="90,*">
<FRAME SRC="buttons.htm" NORESIZE NAME="Buttons" BORDER=1 SCROLLING=NO>
<FRAMESET ROWS="*,60">
<FRAME SRC="coverpage.htm" NORESIZE NAME="Main" SCROLLING=AUTO>
<FRAME SRC="helpwindow.htm" NORESIZE NAME="Help" SCROLLING=NO>
</FRAMESET>
</FRAMESET>

In this example, a <FRAMESET> is nested inside another <FRAMESET>. You can do this as deep (as many nests) as you want, but don't get carried away with it. You can create frames too small to display much of anything.

You can also look at your collection of frames from another perspective. My frames consist of two columns. The left column is 90 pixels wide, and the right column is whatever's left of the screen width. The left column is called "buttons" and loads "buttons.htm". The right column is further divided into two frames, the bottom one being 60 pixels tall, and the top one being whatever's left. The top frame is called "Main" and loads "coverpage.htm"; the bottom one is "Help" and loads “helpwindow.htm.” Alternatively, you can also specify frame widths or heights as a percentage instead of in pixels. For instance, you could specify a left-hand frame to be 30% wide (simply stick the % symbol after the size number in the <FRAMESET> tag). This is often a better way to allow framesets to adjust to different screen resolutions. On the other hand, if you have placed images within your frame, you may need to use pixel widths to ensure that the frame is wide enough to incorporate the image’s dimensions.

By using the "*" value for the frame width, you tell the browser to make that frame whatever width is left after the other fixed widths have been computed.

Notice also the <FRAME> attributes NORESIZE and SCROLLING. NORESIZE tells the browser not to let the user grab the frame and drag (resize) it. Without this attribute, moving the mouse over the frame edge causes the mouse pointer to change to the familiar Windows resize cursor. If the user then grabs the frame by clicking it, he can move the frame.

The SCROLLING attribute controls whether a scroll bar will be displayed. By default, the value of SCROLLING is AUTO, meaning that a scroll bar will appear only if the page is bigger than the frame. In this case, you don't want scrolling on the help window or the table of contents, so you set SCROLLING=NO. Setting SCROLLING=YES would make a scroll bar always appear, even when the document is smaller than the frame.

As you can see, the <FRAMES> tag doesn't really display any text. It simply defines the frames and indicates which documents should be loaded into which frames.

Now, let's move through each piece of the eZine. We'll start with the more interesting one: the help window.

Help Me!

You're probably wondering about that short frame at the bottom of the screen—the one with the words "Article #3" in it. That's the help window, and it is powered by JavaScript. As the user moves the mouse over the table of contents, the text in the help window changes to relate to whatever the user is pointing to. With the help window, you can display a one-line description of each link in the table of contents.

The help window is a simple FORM with one field: a text field named "helpmsg" that will receive information sent to it from the table of contents. 

Here's the HTML file:

<!— helpwindow.htm: The eZine help window —>
<HTML>
<HEAD>
<TITLE>JavaScript: The eZine!</TITLE>
</HEAD>
<BODY BGCOLOR=#FFFFFF>
<CENTER>
<FORM>
<INPUT TYPE="text" NAME="helpmsg" SIZE=60>
</FORM>
</CENTER>
</BODY>
</HTML>

Nothing fancy, but with the addition of the table of contents buttons, it produces a very nice effect.

In the previous programs, all of the frames have the same "title," as defined by the <TITLE> tag. However, think back to just what the purpose of the HTML "title" is. It doesn't appear anywhere within the document itself. The title pops up in two places only: the upper border of the browser window and on the bookmark list. We've used the same title, "JavaScript: The eZine!" for each frame because it is appropriate for either the browser windowframe or the bookmark.

The Table of Contents

The table of contents (the frame on the left) is your control center. As the user passes the mouse over one of the links, a line of text describing that link is sent to the help window frame below.

How is this done? First, remember that the helpwindow.htm file contains a form with one field, helpmsg. Forms are accessible from within JavaScript, and with JavaScript, the data in form fields can be changed. Also, remember that because each frame is a document—and each document is attached to the main window—you can "reach" from one frame into another and do something to it.

To begin with, create an array of help strings to display:

msg = new Array(7);
msg['story1'] = 'Article #1';
msg['story2'] = 'Article #2';
msg['story3'] = 'Article #3';
msg['story4'] = 'Article #4';
msg['story5'] = 'Article #5';
msg['index'] = 'Return to the cover page';
msg['expand'] = 'Remove the button bar and help window';

This uses the new Array () object that you learned about in Chapter 16, “Array (A Ray) of Organization.” The message array, msg[], is created outside a JavaScript function, making the array "visible" to any other JavaScript functions.

Now that you have the array, you need to display it. What you want to do is create a special link on the page that handles the onMouseOver event. Here’s how:

<A HREF="story1.htm"
TARGET="Main"
ONMOUSEOVER="message('story1', this.href); return true;">
Story 1</A>

The onMouseOver event handler simply calls the message() function and passes an "ID tag" (the index into the msg[] array) and the HREF associated with this link. Because your TARGET is "Main", the HREF that will be loaded (a story document, in this case) will be loaded into the frame named "Main", which is the large frame on the right of the screen.

The message() function looks like this:

clearid = 0;
function message(button,url)
{
if(clearid)
{
clearTimeout(clearid);
}
window.parent.frames['Help'].document.forms[0].helpmsg.value = _msg[button];
self.status = url;
clearid =
setTimeout("window.parent.frames['Help'].document.forms[0].helpmsg.value = _''", 5000);
}

That rather long window.parent.frames['Help']... line is what does the magic. It loads the selected msg[] text into the value property of the helpmsg field in the form of the helpwindow frame. That's a long-winded way of saying that it copies a string somewhere else on the page—but it works!

Finishing the Table (of Contents) 

Putting this all together, here's the table of contents document, buttons.htm:

<!-- buttons.htm: eZine table of contents -->
<HTML>
<HEAD>
<TITLE>JavaScript: The eZine!</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide from non-JavaScript browsers
msg = new Array(7);
msg['story1'] = 'Article #1';
msg['story2'] = 'Article #2';
msg['story3'] = 'Article #3';
msg['story4'] = 'Article #4';
msg['story5'] = 'Article #5';
msg['index'] = 'Return to the cover page';
msg['expand'] = 'Remove the button bar and help window';
clearid = 0;
function message(button,url)
{
if(clearid)
{
clearTimeout(clearid);
}
window.parent.frames['Help'].document.forms[0].helpmsg.value = _msg[button];
self.status = url;
clearid =
setTimeout("window.parent.frames['Help'].document.forms[0].helpmsg.value = _''", 5000);
}
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=#FFFFFF>
<CENTER>
<FONT SIZE=1>
<STRONG>CONTENTS</STRONG>
<FONT SIZE=>
<HR SIZE=4 ALIGN=CENTER>
<A HREF="story1.htm"
TARGET="Main"
ONMOUSEOVER="message('story1', this.href); return true;">
Story 1</A>
<HR SIZE=2 WIDTH=25% ALIGN=CENTER>
<A HREF="story2.htm"
TARGET="Main"
ONMOUSEOVER="message('story2', this.href); return true;">
Story 2</A>
<HR SIZE=2 WIDTH=25% ALIGN=CENTER>
<A HREF="story3.htm"
TARGET="Main"
ONMOUSEOVER="message('story3', this.href); return true;">
Story 3</A>
<HR SIZE=2 WIDTH=25% ALIGN=CENTER>
<A HREF="story4.htm"
TARGET="Main"
ONMOUSEOVER="message('story4', this.href); return true;">
Story 4</A>
<HR SIZE=2 WIDTH=25% ALIGN=CENTER>
<A HREF="story5.htm"
TARGET="Main"
ONMOUSEOVER="message('story5', this.href); return true;">
Story 5</A>
<HR SIZE=2 WIDTH=25% ALIGN=CENTER>
<A HREF="index.htm"
TARGET="_top"
ONMOUSEOVER="message('index', this.href); return true;">
Index</A>
<HR SIZE=2 WIDTH=25% ALIGN=CENTER>
<A HREF=""
TARGET="_top"
ONMOUSEOVER="message('expand', this.href); return true;"
ONCLICK="{
alert('You can restore the button bar by\npressing the BACK button.');
this.href = window.parent.frames['Main'].document.location;}">
Expand</A>
<HR SIZE=4 ALIGN=CENTER>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide from non-Javascript browsers
function DisplayDate(dateString)
{
d = new Date(dateString);
return "" + (d.getMonth() + 1) + "/" + d.getDate() + "/" + d.getYear();
}
document.write("<FONT SIZE=2>");
document.write("<B>" + DisplayDate(document.lastModified) + "</B>");
document.write("<P><FONT SIZE=>");
//-->
</SCRIPT>
</CENTER>
</BODY>
</HTML>

I’d like to point out three things here before we move on. First, look at these lines:

<A HREF="index.htm"
TARGET="_top"
ONMOUSEOVER="message('index', this.href); return true;">
Index</A>

Remember that when you assign _top as a target, the browser effectively reloads everything—not just a particular frame. This is important to use, especially when you're linking to a page outside your eZine that doesn't support frames. Otherwise, your browser will try to load the new page into whatever frame you've specified (and if you don't specify a target, the current frame is used). Try to load your entire home page into a window the width of the table of contents, and you'll understand why this is a problem.

Second, check out the following lines:

<A HREF=""
TARGET="_top"
ONMOUSEOVER="message('expand', this.href); return true;"
ONCLICK="{
alert('You can restore the button bar by\npressing the BACK button.');
this.href = window.parent.frames['Main'].document.location;}">
Expand</A>

This does a _top load like the Index link, but it also hooks the onClick event handler to do something else very nifty. Before the URL is loaded, the HREF attribute is set to whatever the HREF is of the document currently displayed in the "Main" window. Think of it as a short way of saying, "Take whatever is currently loaded in 'Main' and reload it, filling the full screen." Because this eliminates the frame containing the button bar, the addition of the alert() method provides the user with an easy reminder of how to get the bar back. (See the following figure.)

Clicking Expand generates a reminder, so that the user knows how to return to the frameset after reading this page.

Third, the date displayed at the bottom of the table of contents has some properties of its own. It uses the lastModified property of the document object to retrieve the date that you last changed the document. With a little modification, it displays this date at the bottom of the screen. This is an easy way of showing the user when the eZine was created or changed. It also shows off one other important JavaScript feature: the capability to use the <SCRIPT> tag more than once in a document.

Stories

Okay, you've seen the tough stuff, and you're almost done. The story1.htm through story2.htm files are nothing more than regular HTML files.

<!-- story1.htm: an example eZine story -->
<HTML>
<TITLE>JavaScript: The eZine!</TITLE>
<BODY BGCOLOR=#FFFFFF>
<H1>Article 1</H1>
<HR>
Article 1 goes here.
</BODY>
</HTML>

You can embellish these files to your heart's content. Just remember that if you add any links to pages outside your eZine, you'll want to add the TARGET="_top" attribute to the <A> tag; otherwise, things will start to look very strange.

Cover (Page) Me with JavaScript

The last part I’m going to talk about is the first part of the eZine your readers will see: the cover page. This example cover page isn't incredibly fancy, but it does have a nice touch:

<!-- coverpage.htm: eZine coverpage -->
<HTML>
<TITLE>JavaScript: The eZine!</TITLE>
<BODY BGCOLOR=#FFFFFF>
<H1><CENTER>JavaScript: The 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>

Did you notice the JavaScript script in the <BODY>? It doesn't have any functions, just statements. This means that the statements will be executed after the page loads (and before it is displayed), even before the user clicks anything. In this example, it uses the Date object to figure out what time of day the user is reading your eZine. Depending on what hour of the day it is, the user sees a different appropriate message.

You have all the pieces for a basic eZine. So what are you waiting for? Get out there and publish!

The Least You Need to Know

This chapter took a final look at JavaScript by pulling different features together into a real application: an eZine. You learned how to:

Previous Chapter Next Chapter


Beginning of ChapterTable of ContentsBook Home PageQue Home Page


For comments or technical support for our books and software, select Talk to Us.
To order books, call us at 800-716-0044 or 317-228-4366.

© 1997, QUE Corporation, an imprint of Macmillan Publishing USA, a Simon & Schuster Company.