Credit: Kirk Born (St Sci/NASA)
All of the examples that you have seen so far use JavaScript to
manipulate information specified by a fixed, pre-written block of HTML.
While many things can be done this way, the power of JavaScript is greatly
enhanced when you can use it to generate HTML on the fly, based on
data or user input. Thus you can vary the number, location, or type
of images or text blocks as a function of mouse or keyboard events. There
are several concepts you need to understand in order to successfully
write and interact with dynamically written HTML:
- The relationship between image objects and the JavaScript code that
manipulates them
- How to setup images for replacement
- How (and why) to assign prototype functions to objects
- How to format the HTML from within JavaScript
- How to access a dynamically generated image from an object
- How to access an object from a dynamically generated image
Lets take these one at a time:
The relationship between images and JavaScript code.
Probably the key concept to understand for this example is that we are
dealing with two
distinct, but related, set of objects here. On the one hand, there are
image objects which are declared with the syntax
<IMG SRC= ... >
such that the first declaration using this syntax refers to
document.images[0], the second declaration refers to document.images[1],
and so on.
On the other hand there is the JavaScript code that creates
and later manipulates each
image.
Now both of these are objects: the images are objects
which belong to the document, and each instance of the JavaScript code
that manipulates the corresponding images[] object is also an object. In
the
scenerio we develop below, each time we invoke "new OptionX()" we create
a new JavaScript code object which in turn writes HTML which creates
a new document.images[] object:
JS Code Image
------------ -------
new OptionX() creates document.images[0]
new OptionX() creates document.images[1]
new OptionX() creates document.images[2]
...
new OptionX() creates document.images[n]
That is, each invocation of "new OptionX()", which is a code object,
creates a new document.images[] object.
Our goal, in this example, is to have the images and the code react
with each other, so
that when we click on an document.images[] object, it
invokes the corresponding JS code object, and when we execute the JS code
object, it controls the appearance of the corresponding document.images[]
object.
In particular, we will use the syntax this to refer to a
particular object, and it is important to understand when "this" applies
to the code object as opposed to the document.images[] object.
How to setup images for replacement. Typically you
need to create arrays for the images and the URLs for each image, then
assign the URLs, create an empty image object for each image, and
lastly read the image into memory. Let myImage[] be an array
of images,
and myURL[] be the URLs for the images. So you need a
block of code
like this:
myImage = new Array()
myURL = new Array()
myImage[0] = new Image(width,height )
myURL[0] = "Images/image0.gif"
myImage[0].src = myURL[0]
. . . and so on for images 1, 2, 3, ...
How to assign prototype functions. We have already seen
how to assign prototype functions to objects using the syntax:
Class.prototype.funct1 = funct2
where "Class" is the class name of a set of objects created with "new" and
"funct1" is the name of the function inside the object and "funct2" is the
name of the function outside the object. However, it may not be clear
why we do this.
We do this because the functions so assigned have access to all of the
values in the object that are assigned with the this keyword.
Which
means that, using this in the function allows use to access
all, and
only, those values and functions that belong to that particular
object.
How to format HTML from within JavaScript. The
formatting
example here
shows a typical example of how
to write HTML to generate images. The goal is to make the code look as
close as possible to the actual output and to make it possible to link the
object and image together (this last part is described below).
The last two concepts
How to access a dynamically generated image from an
object and
How to access an object from a dynamically generated
image are discussed
here.
See the following
program
for a simple
example of these concepts (see
this for a code fragment that highlights the concepts)
and
this
for a more complex and realistic
example.
