JavaScript Document.Write Tutorial

Simple JavaScript tutorial explaining the purpose of the JavaScript document.write command with reference to web programming.

What Will I Learn?

How To Use JavaScript To Insert HTML into Web Pages

Requirements

Atom - a simple editor and IDE

Website: https://atom.io/

Difficulty

• Basic

Tutorial Contents

1. Rules for Using JavaScript document.write
2. Using JavaScript document.write
3. What Is the JavaScript document.write Command Useful for?

JavaScript Document.Write Tutorial

In web programming, JavaScript is used to perform actions on the browser side which enhance the HTML page being served. The major browser platforms support JavaScript documents, and follow a specific standard guaranteeing that all JavaScript code is executed in the same fashion. One of the ways in which the client side processing of HTML documents can be enhanced is by introducing text into the document using the JavaScript document.write command.

The basic form for this command is as follows:

document.write('Inserted Text');

The above snippet would insert Insert Text at the point that the JavaScript is executed.

Rules for Using JavaScript document.write

The document.write command must be carried out during the loading of the page. So, if it is attached to any event that executes after the page has loaded, then the whole page will be replaced with the contents of the document.write command.

This can, however, be useful in creating pages that have multiple steps, so long as the data needed to be shared across pages is passed correctly between them. Ordinarily, however, this is not the case.

Inside the document.write command, any HTML can be specified, as well as plain text. So, for example, the following would be perfectly acceptable:

document.write('<b>Bold Text</b>');

Using JavaScript document.write

The document.write command can be used inline, or inside a script contained within the part of the HTML document. As with all JavaScript, if this is the case, then it is best to contain it within a specific function that is called from within the body of the document, or from another function in the head.

To use it inline, the following should be used:

This will be before...

<script type="text\javascript">
document.write('Inline document.write');
</script>

...and this will be after

There will be no break inserted between the regular HTML and the inserted text.

Strings of values can be concatenated within the document.write command, usually specified as variables:

<script type="text\javascript">
var text_color = "red";
document.write('<font color="' + text_color + '>Colored text</font>');
</script>

This example shows one of the reasons why the JavaScript document.write command is so useful.

What Is the JavaScript document.write Command Useful for?

It is very useful to be able to insert conditionally chosen snippets of HTML, for example:

• To 'fix' cross-browser issues;
• To provide date/time sensitive information;
• To conditionally format menus and links;
• To personalize the web experience etc.

Above all, the document.write command allows the web programmer to introduce dynamic functionality without needing to use a web host which provides server side scripting. However, the reader should always remember that the web site visitor only needs to view the source of the web page to review all the JavaScript code, so it is not good to use for solutions that require security or protected source code.

---

Posted on Utopian.io - Rewarding Open Source Contributors

---