![[Previous]](prev.gif)
![[Home]](home.gif)
![[Next]](next.gif)
Using JavaScript to Write HTML
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
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, and this for a more complex and realistic example.
Class Topics