retrieval system without
prior written permission of the publisher except in the case of brief quotations
embodied in critical articles and reviews. Making copies of any part of
this book for any purpose other than your own personal use is a violation
of United States copyright laws. For information, address Que Corporation,
201 West 103rd Street, Indianapolis, IN 46290 or at support@mcp.com.
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.
Controlling Navigation
Probably the most widely used new feature provided by JavaScript
is the capability to use multiple frames to organize Web site
content, especially when used in conjunction with navigation and
tool bars. For many Web authors, this means converting existing
pages and sites into a frame-based format. But it can be tricky.
Although frames are a powerful new tool, if misplaced and misused
they can be a hindrance to the user by eating up screen space
and slowing down the browser.
Another key capability offered with JavaScript is control over browser behavior. New windows and new browsers are opened and closed using simple commands that also control the availability of the browser's tools.
Properly used, these two capabilities enable a Web developer to
create a portal into the site and provide the tools he wants the
user to have to navigate inside. Content presentation and access
are controlled in one simple step (see fig. 21.1).
Fig. 21.1 The start button on CyberExplorer's Web site opens a new browser without the traditional Netscape menu bar items. This enables the Web author to control entrance, exit, and navigation within the site. A button serves as the doorway into CyberExplorer's Web site. Access to the right software is provided for users who need to upgrade before entering.
As an Internet consultant, Matthew Fusfield spends a lot of time
keeping up with hardware and software advances that can be integrated
into clients' Web sites. Because Web technology is changing on
virtually a day-to-day basis, it has been a constant process,
but one he has enjoyed watching.
"It's good to have new things to do," he said. If nothing new was developed, the capabilities would get old and stale. Emerging technologies enables him to continue providing new services and capabilities to his clients.
Unlike a lot of revisions and updates to software packages that
don't add much capability, Fusfield has enjoyed working with the
Internet products from Netscape and Microsoft. "I've always
been impressed by them by how much their products continue to
improve," he said, "and I've always been interested
in being among the first to try them." Fusfield has been
working with beta versions of Netscape since it was first released,
so he learned about it from the ground up.
CyberExplorer's home page, http://www.cyberexplorer.com/demo/, operates by opening a new browser to control the user's navigation options.
With JavaScript, it is possible to control the appearance and functionality of browser windows. Fusfield capitalized on this with his Web site. Users are greeted by a button that is used to enter the site. This page also serves to help screen users who may not have the proper software to view the pages within.
When the Start Demo button is clicked, a new browser is loaded
with a custom set of navigation buttons (see fig 21.2).
Fig. 21.2 All pages of CyberExplorer's JavaScript demo include a navigation frame and a tool/navigation bar. An Exit button returns the user to the original browser window. Notice the standard navigation frame, the custom tool/navigation bar, and the custom status bar message.
As a reminder that users are not in an average Web site, a confirmation
alert is used to let them know they're leaving CyberExplorer pages
(see fig. 21.3). This is the preferred way to leave the site,
although a user can always use the close button on the top right
corner of the screen.
Fig. 21.3 After pressing the Exit button, a confirmation box appears before closing the windows created by the CyberExplorer site and returning to the entrance shown in figure 21.1.
Converting an old Web site into its new JavaScript format is a
straightforward process involving refining the existing content,
organizing it for frame presentation, and then creating new pages
with JavaScript code with the new content pasted in-a process
Fusfield uses for most of his projects.
"Generally, if it's a clean site with clean HTML, it takes a few hours over a few days," he said. "But planning is the important part."
After deciding how the site should work and what it should include, Fusfield sketches his ideas on paper, including flow charts and screen layouts. After refining the idea on paper, he gets the HTML documents currently in use.
Any changes to the content or artwork are made in the old files.
Then in separate files, he creates the JavaScript code that controls
navigation and other browser behavior. When scripts in the new
files are complete, the content is inserted from the old files.
"I put it on a password-protected server to see how it behaves," Fusfield said. This gives him a chance to use the site in its natural environment and decide what works and what doesn't. This is also a crucial step when working with a client because it enables the customer to review the site before it is generally available.
When the new site is running without a hitch, an important decision is left: what to do with the old files.
Fusfield said the decision to delete the old files in lieu of
the JavaScript-enabled versions depends on the end-user's alternatives.
For a JavaScript-dependent site, such as CyberExplorer, it's "tough
luck" for the user who's not using an up-to-date Netscape
browser.
Another option is to provide access to a mirror site, which contains
the same content but without JavaScript. This ensures that no
users are left out, and is especially important for general-interest
sites.
To create a controlled environment, like Fusfield created for CyberExplorer, is quite simple apart from the frames.
If the entrance page also provides access to a mirror site that
doesn't require JavaScript, then a hot link can be embedded inside
script comment markers, /* and */, to the alternative
site. In this example, an all-or-nothing approach is used.
Listing 21.1 shows the HTML code used to create access to the
CyberExplorer demo. Note the startdemo() function, which
creates a new window without a toolbar or menu bar but provides
for scrolling and a status bar. This enables the author to provide
a unique set of tools and navigation aids while in the site.
Listing 21.1 Code for Creating first page of the CyberExplorer Demo
<HTML>
<HEAD>
<TITLE>CyberExplorer Demo Site</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function startdemo(){
window.open('start.htm', 'CyberExplorer',
'toolbar=no,location=no,directories=no,
status=yes,menubar=no,scrollbars=yes,resizable=yes,copyhistory=no')
}
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#000000" TEXT="#ffffff">
<center>
<P>
<P>
<P>
<P>
<P>
<h4>Welcome to CyberExplorer's Demo Site</h4>
<h5>To use this site, you will need a copy of Netscape 2.0</h5>
<h5>If you already have Netscape 2.0, click the button below to start
the demo.</h5>
<h5>If you do not have Netscape 2.0, please click the Netscape icon below
to download it now.</h5>
<FORM>
<input type="button" value=" Start Demo " onClick="startdemo()">
</FORM>
When the button is clicked, a new window is created using the
window.open() method. This directs the browser to create
a new window and load it with the contents from start.htm-the
file that creates the frames and loads the toolbars for the rest
of the tour of the site.
With the tool definitions in the window.open method, Fusfield's site has captured the user's browser. "The ability to control how a browser behaves is very powerful. Basically, you can't leave until you hit the Exit button."
"Frames can be clunky at times," Fusfield says, "At times, I think of ways the actual syntax would have been easier."
Learning how to effectively include frames in a site takes practice and a healthy dose of trial and error. "It's a little more difficult than other HTML tags." His starting point included documentation and examples available online, followed by a lot of experimentation.
Fusfield thinks the price is worth it, however. "They make
sense in a lot of places," he said. "We're seeing the
groundwork laid for complex interfaces," such as those available
for America Online, Prodigy, and CompuServe. It's one of the good
ideas that can actually make a page or Web site easier to view
and navigate for the user, and serves as the basis for more sophisticated
tools.
The problem is that frames require screen space. "With each
frame, the screen (for content) is getting smaller." This
is especially true when Web authors start creating frames for
displaying advertising. "The spirit in which this capability
was created was to help navigate ... not advertise," he said.
"Its best use is for navigation and toolbars."
Although advertising is a valid use for frames, it shouldn't interfere
with or overpower the frame used for content. "Put it where
it's not obtrusive."
For technical support for our books and software contact support@mcp.com
Copyright ©1996, Que Corporation