I have an ambitious plan which is to produce a series of tutorial lessons
elementary material and continuing all the way into advanced material such
as Dynamic HTML, Style Sheets, etc. Only time will tell if that goal is
If you don't have a recent copy of Netscape Navigator, you can download a copy for free from the Netscape Web site. So that takes care of that excuse as well.
A recent survey of high-tech employers in Austin Texas indicated that those employers favor OOP programmers about four to one over programmers with expertise in the older styles of programming.
fun, it provides a very valuable capability for persons seeking success
in the high-tech marketplace of today, and it is based on the latest concepts
in programming such as objects and events.
There is, however, a co-requisite: knowledge of HTML.
I will not attempt to teach HTML at that level. Rather, I will
simply refer you to an HTML tutorial entitled Learning HTML 3.2 by Examples,
by Jukka Korpela, at <http://www.hut.fi/~jkorpela/HTML3.2/>. If
you don't already know HTML, it will be your responsibility to study HTML
understand the HTML in the programming examples that I provide.
Why did I select Netscape Navigator instead of the other major brand of browser? I have written and currently maintain a major online tutorial on Java programming which receives several hundred visits by current and aspiring Java programmers each day. I use a counter on my web site that maintains a variety of statistics on those visits. Despite the marketing power of the major competitor to Navigator, in May of 1998, visitors using Netscape Navigator outnumber visitors using other browsers by about three to one. This tells me that the majority of web surfers prefer Navigator over the competing brand, although my statistics may be biased by the fact that the visitors to my site are either current or aspiring Java programmers. It is possible that this population of high-tech visitors isn't representative of the web-surfing world at large.
In any event, I plan to teach using Netscape Navigator. Furthermore,
I don't even plan to spend much time looking back to earlier versions of
Navigator (although this may be something that you will need to pick up
on your own).
You will need an installed copy of Netscape Communicator 4.x or later, including Navigator and Composer.
I personally favor an editor named Arachnophilia. I favor it for two reasons. First, it is a good editor. Second, I like the author's philosophy.
The author lists the editor as CareWare. What is CareWare?
The following is a copy of some text written by Paul Lutus, the author
of Arachnophilia, that answers that question.
CareWare - What is it?
But you are not off the hook yet. The "Payment" for a CareWare program is not monetary. You have to make a different kind of payment altogether. Let me explain.
Most Americans are totally dissatisfied with everything. It is too hot,
too cold, too wet, too dry. If we have a free day, we are unhappy because
we don't have two free days. And just about the time we figure out that
we are supposed to appreciate the world as it is, we fall over and die.
If you don't feel a kinship with the statements in the list, then please do one or more of the things listed there. Maybe change how you talk to a young person, or someone whose life would be improved if you related to him or her differently. Or just allow a sense of wonder to re-enter your life, a sense that nothing is deserved and everything contains hidden beauty. And that sometimes beauty is not so much hidden as unobserved.
I would like it if you lived your entire life as though each day was your last, as though every small action mattered, in the way that it does when you've run out of time. But I am a realist -- if you do that for just one day, one day of saying the important things, of performing the kindnesses that naturally occur to us when each day might be our last, then you will have paid me for Arachnophilia.
I don't ask this because there is some definition of good behavior,
some correct religious or philosophical viewpoint. I ask it precisely because
there isn't such a viewpoint. We are all free agents, we get to choose.
In fact, we must choose -- it's dangerous to let others choose for us.
And no one gets to tell anyone else how to behave -- unless, of course,
one is "selling" software using the CareWare system.
Paul Lutus, Ashland, Oregan
Once you have downloaded and installed it on your computer, specify
it as the External Editor to Netscape Composer by selecting Edit/Preferences/Composer
and then entering the path to the Arachnophilia directory in the dialog
that appears at that point.
An HTML document containing the minimal HTML elements plus some comments
and some simple text follows.
An HTML document consists of one or more elements. An element
(usually) consists of something that looks like the following:
<Tag> content </Tag>
I said usually because some begin tags don't require a matching end tag. Again, you can learn all about that sort of thing HTML tutorial mentioned earlier.
Included between the begin and end tags is something that is often referred to as content. Content can take on many forms, depending on the needs. The browser uses the surrounding tags to decide how to treat the content.
An HTML document actually consists of one main element with other elements
nested inside of it. The main element is defined by the tags shown
<HTML> CONTENT </HTML>
Another type of HTML element that will be particularly important to
us is a comment as shown below:
<!-- This is an HTML comment --> <!-- This is also an HTML comment -->
The indicators that signal the beginning and end of the comment can occur on the same or different lines. In either case, everything in between is treated as a comment.
What does it mean to say that something is "treated as a comment?".
For our purposes, it means that the browser doesn't display it on the screen.
Thus, comments are often used to explain what is going on in the HTML in
a way that isn't normally visible to the viewer of the HTML page.
Also note the specification of the language shown highlighted in boldface
below. Technically this is known in HTML terminology as an attribute.
Attributes appear as pairs of items separated by an equal sign, and are
used in HTML to specify the value of something. In this case, the
|To ensure that users of earlier versions of Navigator avoid problems
The technique is shown in the following HTML page.
Why is it there, and is it necessary?
This is necessary to prevent the characters on that line from causing the
as a comment and is ignored.
|"Outer quote begins here 'Inner quote inside outer quote' Outer quote and ends here"|
with Navigator, so you can take that into account using a <NOSCRIPT>
tag also. Examples of both are shown below.
These external files may be located at any accessible URL. (See the HTML tutorial for a discussion of URLs.) For our case, to avoid syntactical complexity, we will confine them to the current directory on the local hard drive.
file named JS000040.js. The reference is highlighted in boldface.
Note that the inclusion of the LANGUAGE attribute is mandatory.
Otherwise, the script simply doesn't work.
Functions, or procedures as they are called in some languages, provide a fundamental building block for virtually every programming language. The purpose of a function is to encapsulate the ability to perform a given task into a single set of code and to be able to invoke or execute that code from a variety of locations within the script. This can eliminate the requirement to repeat the same code over and over when the same task is required at many points in the script.
For example, if you write a script that frequently needs to calculate the surface area of a sphere, you can encapsulate those calculations into a function. Then, whenever your script needs to know the surface area of a sphere, it can simply call the function providing the radius of the sphere as a parameter. The function will perform the calculation and return the answer to be used by the script at that point.
The definition names the function and specifies how it will behave when it is called.
The call to the function temporarily passes control to the statements in the function causing them to behave as previously defined. Once the statements have been executed, control is returned to the point in the script where the call was made.
As in the sphere example discussed above, it is often useful to pass information to the function for it to use in doing whatever it is supposed to do (but this is not always required). When we call the function, we include parameters in the call to the function that match up with the argument list mentioned above. That is the mechanism for passing information to a function. This will probably make more sense when you see an example.
Remember that we are dealing with HTML pages that are normally downloaded from a server. The download process often experiences delays. You should define all of your functions in the header portion of the HTML page. That will ensure that all functions are defined before any of the content of the page is displayed. This will prevent the user from taking an action that needs the function before it is fully defined.
Usually (but not always), the purpose of a function is to calculate or otherwise determine some value and return it. In the sphere example mentioned earlier, the purpose of the function would be to calculate and return the surface area of the sphere. Returning a value is accomplished using the return keyword in the body of the function.
The function is called twice in the body of the page, passing a different value for the parameter each call. The call to the function is embedded into the argument list of a call to a different function named write (this is a special kind of function that we will call a method). For the time being, let it suffice to say that the method named write will display its arguments on the screen.
In other words, this script makes a call to the function named getHalf() passing a parameter to that function. That function returns a value that is half the value of the incoming parameter. (As a practical matter, the call to the function is replaced by the value that it returns.) This value is than passed as a parameter to the method named write() where it is displayed on the screen.
It is a principle of good programming design that each function should
perform only one task, and should perform it well. The task performed
by the function named getHalf() is to calculate and return half
the value that it receives, and it does it well.
The HTML tutorial will tell you about character entities which allow you to define characters with special numerical codes or names by preceding the name with an ampersand (&) and terminating it with a semicolon (;). For example, you can include a greater-than symbol (>) with the character entity > and a less-than symbol (<) with <.
For demonstration purposes, color is applied to two separate lines of output text. The first line, which reads "Color me blue" is rendered blue using a standard HTML <FONT> tag with a COLOR attribute. The attribute value #0000ff causes the text to be rendered as blue. (Hopefully we will have time to explain why in some subsequent lesson.)
The second line of output text also uses a standard <FONT> tag with a COLOR attribute. However, in this case, the attribute value is not hard-coded into the HTML statement. Rather, in this case, the attribute value is obtained by making a call to a function named returnRed() which just happens to return the required attribute value for rendering the text as red.
However, this function could be made more complex in which case it could
return different values based on something else that is happening in the
script. In this way, the color in which the text is rendered could
be determined at runtime rather than specifying it when the HTML author
designs the page.
In a financial statement, it could cause the text to be rendered as
either red or black, depending on whether the business was "in the red"
or "in the black."
The write() method takes any number of string arguments. They can be string literals or variables (we will also have more to say about literals and variables later).
You can also use the string concatenation operator (+) to create one string from several when using write().