JavaScript came out at the same time that the Microsoft Script language, VBScript, did, and allows flexible and more powerful Web sites to be designed. There is very little actual difference in programming power between JavaScript and VBScript, but I have written these articles for JavaScript. I suppose that at a later date I might translate them into VBScript.
This article explores the JavaScript Dynamic Document Creation (DDC) capabilities. Sounds very complicated, and is. Dynamic Document Creation is the creation of a Web document from within the JavaScript. It may be created while an HTML document is being displayed, and may be influenced by features of the current Web page. As a technique, it is very useful for displaying information from Web pages and creating new HTML documents.
DDC rapidly takes you into frames, new windows, variable expressions and using DHTML to access the DOM, and these topics will be covered later, in detail, in future articles. This article concentrates on explaining the principles of DDC, and is simple enough for a beginner to progress from the simple through to the advanced concepts of DDC.
The basic components of DDC are the JavaScript functions ‘write()’, ‘writeln()’, ‘open()’ and ‘close()’. ‘write()’ writes the string it contains to the document referenced. ‘writeln()’ does the same, except it adds a carriage return character after writing its string. ‘open()’ and ‘close()’ open and close documents. They don’t have any relevance to this article, and will be discussed in a later one.
There are two basic levels of implementation of DDC, the first is to create a fresh document from the current document, and the second is to create a document inside a new window. Creating a new window involves a detailed knowledge of the first type of DDC, and so I will begin with the first type.
To dynamically create a new document, you must place the necessary code in the HTML document as JavaScript. The most common method to achieve this is to place the JavaScript inside a element inside the element.
A simple DDC example is :
This code, with no element at all, writes ‘Hello Word, from DDC in Action’ to the page. Its equivalent would be to add the text between the open and close tags of a element. So, although with this example there have been no savings, having the line of text implemented form JavaScript, where it may be a variable, does increase our control over the Web page.
Next, I have demonstrated the difference between write and writeln next, virtually completely replicating the previous example, except for changing the write’s to writeln’s, and changing the text so that it is correctly formatted.
So you can see the difference between write and writeln, with the inclusion of a space after ‘Hello World.’. Note that the last writeln is unnecessary in this example, as nothing it written after it the carriage return is invisible. This isn’t a design feature though – if you were to add any further text, the difference would become visible again.
To write the two lines of text on separate lines, we have to write an HTML element to the document. Because write writes to a document, which is then parsed as an HTML document, we can pass it tags.
which places the element between the two lines of text, and causes them to be on different lines.
At this point, we have developed the theory only at the most basic level. To add excitement and complexity to DDC, we develop the techniques further, and a good example of this is in the use of functions.
Functions are pieces of code that perform calculations over a certain range of variables, and are generally called a lot, normally from different sections of a program. We can use functions in JavaScript to great effect, and so I have briefly explained them and their implementation. If we wish to define a function called ‘ButtonPress’ and this takes a parameter ‘buttonnumber’, we would define this like :
The function is defined within a tag. This raises the issue of which JavaScript is interpreted. On a first run, any non-function JavaScript will be executed. Functions are only interpreted when called for the first time. If you run this program, it will not produce an error. This is because ‘code’ is never reached.
Although this program doesn’t do anything, it has given our HTML document a JavaScript function, which we can call later. The curly braces <> will enclose the function’s content. Note that functions do not have to take a parameter, we could have equally defined ButtonPress().
Now I add a few buttons to the Web page, and define the function, instead of the potentially dangerous ‘code’.
This code displays three buttons and then tells you which one you pressed, hence demonstrating the use of variables inside the write command. JavaScript uses a loose typing of variables, e.g. x can any of a string, integer or floating-point. The statement within the write command is a concatenation of a string and variable, which the JavaScript interpreter reads as a variable, converts to the variables value, and converts the value to a string. These two strings are then added together. To press a different button to get a different result, you need to press ‘Back’ on your browser.
There is a problem in this area. We cannot add content to an existing Web page, we can only create a new one. We can add to a document that we have dynamically created, which can be useful. Advanced DHTML techniques do allow you to dynamically alter content, and there are methods to alleviate this as a problem within JavaScript, namely writing to a frame in the same window, and writing to a new window. Writing to a new window, as I have already said, is complicated. You need a full working knowledge of DDC to do this, and then you are faced with the task of tracking at least two windows rather than just one. I have covered this in the next article in this series, ‘Dynamic Document Creation in a New Window.’
function ButtonPress(buttonnumber) document.write(‘You pressed button number : ‘+buttonnumber);
>