Strings And The Write Method

While we're on the subject of strings, I'd like to talk about a method which is synonymous with strings.

The write() method belongs to the document object and is used - as you might have guessed - to write strings to a document. The method takes a string literal or variable as its parameter. It is a handy little method and although it may seem very straight forward, timing its execution requires a little thought.

Writing After A Page Has Been Loaded

If document.write() is invoked after a page has finished loading, the entire static (non-script generated) content of a page will be replaced with the write method's parameter. This scenario is most often played out when the write method is invoked from an event handler - whether the method is in a function called by the event handler or alone inside the handler - because event handlers are triggered after a page has finished loading. This is important to know because static content replacement is not always the desired result. Another common scenario for content overwite has to do with writing content to a new window. In this case, the overwrite of blank page is the goal.

Writing During Page Load

If the write method is executed (within a function or outside a function) when the browser encounters it as the page is loading, overwriting of static content does not occur.

Overwriting is why Dynamic HTML came along and is the most important feature of DHTML - a positioned block (created by CSS) can be written to without reloading the page, and after a page has loaded without overwriting static content. But that doesn't mean you have to always use DHTML and deal with its shortcomings. If content does not need to be changed on the fly, use the simple write method as the page is loading. A good example of this is the navigation links at the top of this page. They are generated by a JavaScript function and written as the page loads. By the way, if you're interested, here is the lesson on writing to a block.

Take a look at an example of static content overwriting. Since the write method will be invoked after the page has finished loading, the contents of this page will be overwritten. Proof of this is that the URL remains the same. To retrieve the original page after testing the script, hit your browser's back button or highlight the URL and hit your enter (return) key.

function writing(myString) {

document.write(myString)
document.close()

}

<form>
<input type="button" onClick="writing('Hello World')" value="Hello World!">
</form>

Closing The Stream

Notice the call to "document.close()" in the above example. This is known as closing the document's output stream. It is neccessary to include after a call to any write method which executes after a page load. Doing so ensures that images and forms will always be displayed and that any subsequent write calls will execute. If you have to author for Netscape 4.x browsers, leaving the close method off will cause these browsers to freeze.

Writing Scripts To A Page

If you want to write a script to a page with JavaScript, special care must be taken when writing the opening and closing script tag pair. When a JavaScript engine encounters a closing script tag, it may exit the script, even if the closing tag is a string. To work around this, use concatenation (see below) to break up the string. It is also a good idea to do the same thing to the opening tag.

document.write("<scr" + "ipt language=\"javascript\">")
document.write("</scr" + "ipt>")

You might be wondering why you would want to write a script to a page - one example can be seen on this page. Based on certain criteria, the linked JavaScript source files are written either as absolute or relative URLs. A more complex example can be seen on the JavaScript template example, using eval() to execute scripts.

Input - Output: Less Is More

One final bit of advise when using the write method: use as few calls to the method as possible. The above example would require less work from a client browser if it looked like this:

var scriptTags = "<scr" + "ipt language=\"javascript\">"
scriptTags += "</scr" + "ipt>"

document.write(scriptTags)

Of course, you can use any method of concatenation that you wish. If those strings (and the word "concatenation") don't look familiar, see the other lessons in this tutorial.

>>String Literals and String Variables
>>Nesting Quotes And The Escape Character
>>String Concatenation and String Operators
>>Creating Line Breaks
>>Strings To Numbers: Data Type Conversion
>>Strings and The Write Method