Complete Idiot's Guide to JavaScript

258 Pages·1997·0.775 MB·English

by  Weiss A.

Complete Idiot's Guide to JavaScript
Complete Idiot's Guide to
JavaScript, Second Edition

Part 1: What's It All About?
Chapter 1: Coffee? In My Computer? I Prefer Decaf...
Chapter 2: Navigator and Explorer: The World Wide Web on a Caffeine High
Part 2: Let's Get Jivin'
Chapter 3: Tag...You're It!
Chapter 4: Off and Running...With Someone Else's Help
Part 3: JavaScript: Espresso for the Masses
Chapter 5: Objects, Names, and Literals
Chapter 6: Operators and Expressions
Chapter 7: Making a Statement
Chapter 8: Conjuction Junction, What's a Function?
Chapter 9: An Eye on Events
Chapter 10: How Much Is That Object in the Window?
Chapter 11: Mapping and Tracking: Locations and Histories
Chapter 12: The Document Shuffle
Chapter 13: Fiddling with Forms and Emulating Events
Chapter 14: Navigating with Navigator
Chapter 15: "Array" (A Ray) of Organization
Chapter 16: Image-ine That!
Chapter 17: Care for a Cookie?
file:///C|/Dokumente%20und%20Einstellungen/Tobias/Desktop/Neuer%20Ordner/TOC.HTM (1 of 2) [01.06.2001 00:30:57]
Complete Idiot's Guide to JavaScript
Part 4: Scripting the Whole Bean
Chapter 18: Script Example 1: Hello World!
Chapter 19: Script Example 2: Random Chatter
Chapter 20: Script Example 3: Which Way Do We Go?
Chapter 21: Script Example 4: Loan Calculator
Chapter 22: Script Example 5: BlackJack
Chapter 23: Script Example 6: Creating an eZine
Chapter 24: Script Example 7: Welcome Back!
Chapter 25: What to Do When It Won't Work: Debugging Your Scripts
Chapter 26: Ideas
Chapter 27: Stepping Up to Straight Java
Appendix A: JavaScript: The Complete Overview
Appendix B: Speak Like a Geek: The Complete Archive
Complete Idiot's Guide to JavaScript
Chapter 1
Coffee? In My Computer? I Prefer Decaf...
In This Chapter
How HTML got a boost from CGI
m
Java takes CGI one step farther
m
Extending the Web
In the "old days" of the World Wide Web (three whole years ago), there were two ways to get information (also
called content) to the user. The primary way was through HTML (HyperText Markup Language), the language
used to write Web pages. HTML enables you to present text and certain types of graphics (as well as links to
connect one page to another page) either on the same computer or somewhere else in the world. As HTML has
evolved (the current standard being worked on is version 3.2), other features have been added, such as forms,
frames, tables, and so on. However, even with all the new features, HTML basically deals with Web content by:
Formatting and displaying the content of a page.
m
Waiting for the user to click something in the page.
m
Depending on what the user clicks on, fetching something else (a new page, for example) and repeating
m
the process.
Although this provides a wealth of possibilities for content manipulation (just spend a little time on the Web to
see for yourself), it doesn't allow for more advanced things like accessing a database, ordering catalog items
online, or making animated graphics within a Web page. For these capabilities, you need to understand the
Common Gateway Interface, or CGI.
CGI provides a means of extending the capabilities of HTML by allowing the Web designer to write custom
programs that interact with Web pages to do more complex things. A CGI program is a file that resides on the
Web server and that the server runs in response to something inside the Web page. With CGI, you can:
Create image maps, which are graphics that you can click on. Different areas of the graphic behave like
m
unique HTML links, taking you to individual pages. (You used to have to know CGI programming to
create one of these.)
An image on the image map
Which part of an image you click determines what happens next.
Dynamically (on demand) create custom HTML pages and graphics. A common use is the “You are the
m
34251th visitor” line you find on many pages.
Create simple animations by having CGI send a sequence of graphics to the browser. This produces the
m
Web equivalent of a “flip-book,” where one graphic replaces the previous one.
Pushy Servers The technical term for CGI "flip-book" animation is server push.It's so named because
file:///C|/Dokumente%20und%20Einstellungen/Tobias/Desktop/Neuer%20Ordner/chap01.htm (1 of 5) [01.06.2001 00:31:16]
Complete Idiot's Guide to JavaScript
the CGI program instructs the server to send (or "push") one graphic after another to the browser.
Conversely, you could also use CGI to instruct the browser to "pull" one graphic after another from the
server. This technique is (not surprisingly) called client pull.

Interface with a database on the server to retrieve or add information. Online catalog ordering uses
m
CGI, as well as the earch engines (such as Yahoo, Lycos, and WebCrawler) that keep track
of everything there is to find on the Web

One disadvantage of CGI is that you must be a programmer to use it. Secondly, C GI requires
that the user's actions be reported back to the server for interpretation and processing. The results of this
processing then must be sent back to the user from the server. These extra transfers take time and reduce
the "immediacy" of certain Web page interactions. Furthermore, you are limited to the CGI capabilities
of your server; your provider might offer a Web server w ith incomplete CGI tools or with none at all. In
addition, multimedia (sound, graphics, animation) has become all the rage, and everything in c omputers
today has to support multimedia. CGI doesn’t do this well.

Most CGI Programs Are Written in Perl
Because the Internet originated within the UNIX world (before Windows computers or Macintoshes
were hooked up to it), much of what drives the Internet (and the Web) is based in UNIX. CGI stems
from this same root, and the Perl language is a UNIX-based language. However, a CGI program
can be written in any language that the Web server supports.
Finally, to use CGI, you must have access to the CGI interface of the Web server that’s serving up your pages. As
I’ve mentioned, some providers might not support CGI access, or it might be offered for an extra (in many cases,
costly) fee.
In other words, CGI is more complex than most Web authors are interested in, and doesn’t support all of the
visually fancy things authors want to include in their pages. But something else is necessary, and that something
is Java.
Java: Web Programming for the Common Man
You can’t surf the Web today without hearing about Java. Java, a programming language developed by Sun
Microsystems, was designed to allow more power and flexibility for the presentation of material on the Web.
With Java, you can...
Create animations that sing and dance.
m
Include prompts and dialog boxes that pop up while a user is filling out a form.
m
Develop games and programs that actually run—right on the Web page.
m
Calculate a loan in real-time based on user input.
m
Display an accurate on-screen invoice reflecting a user's current purchases.
m
Access databases and other information sources.
m
file:///C|/Dokumente%20und%20Einstellungen/Tobias/Desktop/Neuer%20Ordner/chap01.htm (2 of 5) [01.06.2001 00:31:16]
Complete Idiot's Guide to JavaScript
Let your imagination wander.
m
Java works the floor in 3D rotating glory.
Before Java, if you wanted to view a graphic, play a movie, or listen to a sound file on the Web, you had to have
a helper application (an independent program unrelated to the browser) installed on your computer and
connected to your browser. Whenever a particular file (movie, sound, or whatever) was retrieved from the Web,
the helper would be run to display or play back the file. If you didn’t have the necessary helper, you had to find
it, download it, and install it.
Java handles these things internally. No more helper applications, and no more CGI programming. All you need
is a Java-enabled browser to view Java programs, and the Java Developers Kit to design them (it’s available for
free from Sun’s Java Home Site, http://java.sun.com/). And, as an added bonus, the Java programs you create
(called applets or mini-applications) will run on any Java-enabled browser on any platform: Macintosh,
Windows, or UNIX. You don’t need to create a program for each machine type. One size fits all.
However, Java is not without its problems. It also is a programming language, and as with all programming
languages, you must learn it relatively well in order to use it. The applets you create must be compiled (by a
compiler) before you can use them. A compiler is a special program that reads your own program and crunches it
into machine-readable binary code. In spite of the existence of several nice development packages for building
Java applets, compilers can be a hassle because you have to use them every time you make a change to your
program, and it can take a long time to compile a program.
Scrolling ticker tape Scrolling ticker tapes—trust me; they scroll.
So what you need is a way of getting the capability of Java without the added baggage of a full-blown
programming language. Well, this time, Netscape comes to the rescue (with a little help from Sun) with
JavaScript.
Enter JavaScript
JavaScript is a scripting language specifically designed to work with the World Wide Web. With JavaScript, you
can take the power of HTML and the World Wide Web and extend it in a variety of ways.
Once upon a time (not too long ago), Sun Microsystems conjured up the complex and powerful programming
language now known as Java. Although Java is highly capable, it's best suited for more complex tasks and
experienced programmers. Netscape Communications saw the need for an in-between language—one that would
allow individuals to design Web pages that could interact with the user or with Java applets, but that would
require a minimum of programming experience. Always one to be first on the block, Netscape whipped up
LiveScript.
LiveScript was more of a proposal than an actual language, but it convinced people that this "bridge-the-gap"
idea was attractive. LiveScript was designed in the spirit of many simple scripting languages, but tailored with
capabilities specifically designed for Web pages (HTML and form interaction, for example). To help the
marketability of their new language, Netscape paired up with Sun, and JavaScript was born.
In theory, JavaScript is available for free to those who design Web browsers; this enables the designers to
incorporate JavaScript compatibility into their browsers. In reality, Microsoft was the first to implement a version
file:///C|/Dokumente%20und%20Einstellungen/Tobias/Desktop/Neuer%20Ordner/chap01.htm (3 of 5) [01.06.2001 00:31:16]
Complete Idiot's Guide to JavaScript
of JavaScript (which they named JScript), but they did not refer to the official JavaScript specifications. Thus,
Microsoft Internet Explorer 3.0 is “mostly” JavaScript-compatible, but it’s not 100% (I explain this issue in more
detail in Chapter 2).
Recently, Netscape handed JavaScript over to an independent standards organization with the hope that all
potential developers of Web browsers will have equal access to the official JavaScript implementation. As a
result, hopefully, Internet Explorer 4.0 (due out sometime in the spring of 1997) will support JavaScript better
than version 3.0 does.
What’s a “Scripting Language”?
It’s impossible for a computer program to be all things to all people. Software publishers try their
best to make sure their programs can handle most of what users want, but they can never anticipate
everything. To make their programs more flexible, many provide the capability to extend or change how t
heir program behaves through a script.
A script is nothing more than a sequence of program instructions (called statements). The program
steps through the statements one at a time and performs whatever the script tells it. This is exactly the
same as "programming," except that scripts tend to have simpler rules and require less learning time.
Some examples of programs that provide scripting are dBASE, Paradox, and Microsoft Access (though
there are many more). Some examples of stand-alone scripting languages are Perl and REXX.
Scripting languages make extending these packages easy. (And you don’t have to be a programmer,
purchase an expensive compiler, learn some strange pseudo-English language, or start wearing plaid
shirts and pocket protectors.)
Based on Java, JavaScript supports most of Java’s expression constructs (another word for statements). However,
JavaScript doesn’t require a compiler or a knowledge of programming to get up and running. All you really need
is an understanding of HTML and a little logic.
Thinking of Objects
Like Java, JavaScript is built on the concept of objects. Unlike Java, however, JavaScript provides a basic
collection of objects for you to work with. While you can easily create new objects and object types, the ones
provided give you a great deal of power.
As the word implies, an object is a thing—any thing. I don’t mean to sound vague, but the term object is used to
generically group a collection of different “blocks of stuff” together. In the world of computers, objects are
different pieces (or building blocks) that make up a computer system or program. Objects shield a programmer
(or a JavaScript writer) from having to understand how the operating system works.
You can think of objects as little black boxes. You poke things into it (which is called “setting an object's
properties”), and the black box does something in response. Actually how it works isn’t important, just that it
file:///C|/Dokumente%20und%20Einstellungen/Tobias/Desktop/Neuer%20Ordner/chap01.htm (4 of 5) [01.06.2001 00:31:16]
Complete Idiot's Guide to JavaScript
does work. This is the basis for the concept of object-oriented programming, in which the programmer is more
concerned with what an object is doing than how it gets the job done.
For example, if you had a “screen object,” we could change the color of the computer screen by telling the screen
object to set it’s color property to, say, green. Whether the computer is a Macintosh or an IBM PC, the object
would do the same thing.
In Chapter 5, you begin an up-close and personal look at objects in their natural habitat.
The Least You Need to Know
In this chapter, you took a quick look at the origin of JavaScript.
The World Wide Web got its start through HTML, and HTML was extended and enhanced through CGI
m
programming.
Java came into being to satisfy the need to do more through the Web than either HTML or CGI could
m
provide.
JavaScript took Java one step further by making the power of Java available to Web authors who don’t
m
want to learn how to program.
Complete Idiot's Guide to JavaScript
Chapter 2
Navigator and Explorer: The World Wide Web on a Caffeine
High

In This Chapter
Browser wars: The JavaScript confusion
l
Setups and configurations
l
When browsers disagree
l
The JavaScript Confusion
Readers of the first edition of this book may recall simpler times—when JavaScript and Netscape Navigator 2.0
were the only team in town. For better and worse, the world of JavaScript has changed since those halcyon days
of year past. Two major notes mark the evolution of JavaScript in the past year:
Microsoft Internet Explorer 3.0 was released, with approximate support for JavaScript 1.0 (further
l
explanation shortly).
Netscape released JavaScript 1.1, which at the time of this writing, is supported only by Netscape
l
Navigator 3.0.
The two points above have led to a fair amount of confusion among JavaScript authors and users. Talking about
2.0, 3.0. 1.1—it’s enough to drive someone into a dark corner with only a spoon and a brownie pie. Let’s try to
clarify the situation.
A Not-So-Zen Look at Browsers
Two versions of JavaScript are now on the market: 1.0 and 1.1. The previous edition of this book (The Complete
Idiot’s Guide to JavaScript) covered JavaScript 1.0. This edition covers JavaScript 1.1, which is largely similar to
its predecessor but sports a few additional features.
At the time of this writing, only Netscape Navigator 3.0 supported JavaScript 1.1. For this reason, throughout this
coverage, I’ll denote any features of JavaScript that are new to version 1.1.
Both Netscape Navigator 2.0 and Microsoft Internet Explorer 3.0 support JavaScript 1.0. Therefore, any
JavaScript programs that don’t include the new 1.1 features should work with both of these browsers.
Jscript versus JavaScript
file:///C|/Dokumente%20und%20Einstellungen/Tobias/Desktop/Neuer%20Ordner/chap02.htm (1 of 4) [01.06.2001 00:31:43]
Complete Idiot's Guide to JavaScript
To add further confusion to the brew, although it is said that Microsoft Internet Explorer 3.0 supports
JavaScript 1.0, that is not wholly, technically true.
Microsoft did not design their JavaScript support based on the official reference documentation. Depending
upon whom one believes, this was either because Netscape prevented Microsoft from accessing this
reference material or because Microsoft did not want to “get into bed” with Netscape. In any case, M
icrosoft decided to “reverse engineer” JavaScript—to observe how JavaScript behaves and then create
a programming language that behaves the same way. After doing so, Microsoft named their language “
JScript” because it is a copy of JavaScript but not the “real thing.” However, in their promotional press,
Microsoft has vacillated, sometimes claiming that Internet Explorer supports “JScript” and other times
saying that it supports “JavaScript.”
Ultimately, JScript, or whatever one calls it, is mostly compatible with JavaScript 1.0. This means that
most programs written in JavaScript 1.0 will work properly with both Netscape Navigator 2.0 and M
icrosoft Internet Explorer 3.0. However, in certain instances, JScript behaves different from JavaScript.
I’ll cover a few of those instances later in this book.
A Brief Editorial
One hopes that in the near future the disparities between versions of JavaScript and browser support will fade
away. Without some assurance of consistency between browsers’ support for JavaScript, the language may face a
dim future. Lack of standardization is the most fatal of flaws in technology. JavaScript’s future health and well-
being depends upon its reliability across platforms and across browsers.
By the time you read this book, the situation described may have changed—hopefully for the better. In a best-
case scenario, Microsoft will include full official support for JavaScript 1.1 in their next release of Internet
Explorer. If so, readers of this book, all JavaScript authors, and all users of the Web will be better off. A recent
announcement that Netscape has handed JavaScript over to an independent standards body may prove to be the
solution, allowing future browser revisions to support JavaScript equally.
Up and Running
Whether you currently use Netscape Navigator or Microsoft Internet Explorer, it’s probably best to have both. If
you need one or the other, you can get them from the Internet:
Netscape Navigator 2.02, 3.0, and 4.0 (also known as “Communicator” when available) can be found at
http://www.netscape.com
Microsoft Internet Explorer 3.0 and 4.0 (when available) can be found at
l
http://www.microsoft.com/ie/default.asp
If you choose to write JavaScript programs for Netscape 3.0 (JavaScript 1.1), remember that they will not work
file:///C|/Dokumente%20und%20Einstellungen/Tobias/Desktop/Neuer%20Ordner/chap02.htm (2 of 4) [01.06.2001 00:31:43]
Complete Idiot's Guide to JavaScript
in Internet Explorer 3.0. Ideally, installing a copy of each browser (Netscape 2.0, 3.0, and Internet Explorer 3.0)
provides the best environment for testing JavaScript programs. However, if you need to choose one, use Netscape
Navigator 3.0 or 4.0, which support JavaScript 1.1. They lean more towards the future.
When it comes to configuring your browser to support JavaScript, there’s little to do. By default, each browser
above installs with JavaScript support enabled. To enable or disable JavaScript (obviously, one wants to enable
JavaScript to make use of this book), follow these instructions:
Netscape Navigator 3.0: Select Options, Network Preferences, Languages, Enable JavaScript.
l
Netscape Navigator 2.0: The original release of 2.0 does not include an option for enabling or disabling
l
JavaScript; it’s always enabled. Install Navigator 2.02, which includes such a feature in Options, Security
Preferences.
Microsoft Internet Explorer 3.0: Select View, Options, Security, Run ActiveX Scripts. Despite its
l
misleading label, enabling this option will enable JavaScript, and vice versa.
Browser Bias: Which JavaScript to Support?
Unfortunately, due to the currently inconsistent state of JavaScript support, you may need to decide which Web
browser you “most” want to support.
To get the most out of this book, you’d write JavaScript programs that conform to version 1.1 (the subject of this
book). In doing so, you support only Netscape Navigator 3.0 users.
If you write JavaScript programs that do not use version 1.1’s special features, Netscape Navigator 2.0 users will
be able to view your program. Additionally, users of Microsoft Internet Explorer 3.0 may also be able to view
these JavaScript programs. Then again, they may not; as I explained earlier, there are a few compatibility
differences between Internet Explorer’s and Netscape Navigator’s JavaScript support!
Confusing as this is, here’s what it boils down to:
Write JavaScript 1.1 programs to exploit the full feature set of JavaScript and reach the most future users.
l
Test these programs in Netscape Navigator 3.0.
If you need to write JavaScript 1.0 programs, make sure they work best in Netscape Navigator 2.0.
l
Certainly, you should still test them in Internet Explorer 3.0, but it is impossible to guarantee that every
JavaScript program will functional equally in both browsers.
Our Bias
Yes, I’m biased. This is not a form of corporate loyalty or blind nationalism. Rather, simplicity. I’m writing this
book with Netscape Navigator 3.0 in mind. Therefore, I’ll be covering JavaScript 1.1. Although I cannot
comprehensively discuss every difference between JavaScript versions and browser support, I’ll make these two
efforts:
When a feature is being discussed that is new to JavaScript 1.1 or has changed since 1.0, that will be
l
noted.
file:///C|/Dokumente%20und%20Einstellungen/Tobias/Desktop/Neuer%20Ordner/chap02.htm (3 of 4) [01.06.2001 00:31:43]