JavaScript tutorial:
Displaying data in the web pages

The primary function of JavaScript is to augment your web pages (.htm / .html, .php, .asp, etc). JavaScript provides two ways to display data directly in your browser. You can use the write( ) and writeln( ), which are methods of the document object. You can also display information in forms within the browser, and in alert, prompt, and confirm message boxes.

Using document.write( ) and document.writeln( )

The most common way to display information is the write( ) method of the document object. It takes one argument, a string, which it displays in the browser. The string can be either plain text or HTML.

Strings can be enclosed in either single (') or double (") quotation marks. This lets you quote something that contains quote marks or apostrophes.

document.write("Pi is approximately equal to: " + Math.PI);

To run the code, paste it into JavaScript Editor, and click the Execute button.


Tip  The following simple function is a way around having to type "document.write" every time you want something to appear in the browser window. This function does not inform you if something that you attempt to write is undefined, but does let you issue the command "w();", which displays a blank line.


// Write function.
function w(m)
{
    m = "" + m + ""; // Make sure that the m variable is a string.
    if ("undefined" != m) // Test for empty write or other undefined item.    
          document.write(m);
    else document.write("<br>");
}


w('<IMG SRC="horse.gif">');
w();
w("This is an engraving of a horse.");
w();

The writeln( ) method is almost identical to the write( ) method, except that it appends a newline character to whatever string you provide. In HTML this ordinarily results only in a space after your item; but if you're using <PRE> and <XMP> tags, the newline character is interpreted literally and the browser displays it.

When you call the write( ) method, it opens and clears the document if the document is not in the process of being opened and parsed when the write( ) method is called, so it can be dangerous. The example shows a script that is intended to display the time once a minute, but fails to do so after the first time because it clears itself in the process.

Let's start by creating a basic web page. Your web page itself is a script, called HTML (HyperText Markup Language). HTML scripting is simple and relies on tags to tell the browser how to render the document:

<b> some text here... </b>

In this example, the <b> tag tells the browser to turn bold on, and </b> to turn it off. Any text between the <b> </b> tags will be rendered in bold.

 

The following code is useful for displaying the copyright and other information at the bottom of your web page:

<html>
<head>

<script language="JavaScript">
function showCopyright()
{
    document.write("<hr>");
    document.write("Copyright&copy; 2006 MyCompany Inc.");
}
</script>

</head>

<body>

Body text goes here...

<script language="JavaScript">
    showCopyright();
</script>

</body>
</html>

To run the code:
     Paste it into JavaScript Editor
     Save the document as MyPage.htm, and
     Click on Show Internal Viewer (or press F5). Alternatively, select View in Browser (Shift+F5).


Tip  While developing, use Internal Viewer rather than the browser because:

It captures run-time errors in your scripts and allows you to locate them and correct them, and

You can directly call any JavaScript function available to the page, specify its parameters, and run it. This gives you a fast and easy way to test your code - there is no need for black-box functions.


 

Clearing the Current Document

The clear() method of the document object empties the current document. This method also clears your script (along with the rest of the document), so be very careful how and when you use it.

document.clear();

Next