2.3 Generating HTML and Printing Output

When you create a program in any language, the first thing you want to see is the output of the program displayed on a screen. In the case of JavaScript, you'll see your output in the browser window. Of course, browsers use HTML to format output. Although JavaScript doesn't understand HTML per se, it can generate HTML output with its built-in methods , write() and writeln () .

2.3.1 Strings and String Concatenation

A string is a character or set of characters enclosed in matching quotes. Since the methods used to display text take strings as their arguments, this is a good time to talk a little about strings. See Chapter 9, "JavaScript Core Objects," for a more complete discussion. All strings must be placed within a matched set of either single or double quotes; for example:

"this is a string" or 'this is a string'

Double quotes can hide single quotes; for example:

 "I don't care"

And single quotes can hide double quotes; for example:

 'He cried, "Ahoy!"'

Either way, the entire string is enclosed in a set of matching quotes.

Concatenation is caused when two strings are joined together. The plus (+) sign is used to concatenate strings; for example:

"hot" + "dog or "San Francisco" + "</br>"

For more information on strings, see Chapter 3, "The Building Blocks: Data Types, Literals, and Variables."

2.3.2 The write() and writeln() Methods

One of the most important features of client-side JavaScript is its ability to generate pages dynamically. Data, text, and HTML itself can be written to the browser on the fly. The write() method is a special kind of built-in JavaScript function used to output HTML to the document as it is being parsed. When generating output with write() and writeln() , put the text in the body of the document (rather than in the header) at the place where you want the text to appear when the page is loaded.

Method names are followed by a set of parentheses. They are used to hold the arguments. These are messages that will be sent to the methods, such as a string of text, the output of a function, or the results of a calculation. Without arguments, the write() and writeln() methods would have nothing to write.

graphics/02inf04.gif

JavaScript defines the current document (i.e., the HTML file that contains the script) as a document object. (You will learn more about objects later.) For now, whenever you refer to the document object, the object name is appended with a dot and the name of the method that will manipulate the document object. In the following example the write( ) method must be prepended with the name of the document object and a period. The browser will display this text in the document's window. The syntax is

 document.write("Hello to you");

The writeln() method is essentially just like the write() method, except when the text is inserted within HTML <pre> or <xmp> tags, in which case writeln() will insert a newline at the end of the string. The HTML <pre> tag is used to enclose preformatted text. It results in "what you see is what you get." All spaces and linebreaks are rendered literally, in a monopitch typeface. The <xmp> tag is an obsolete HTML tag that functions much like the <pre> tag.

Example 2.2

 <html>     <head><title>Printing Output</title></head>     <body bgcolor="yellow" text="blue">     <b>Comparing the <em>document.write</em> and <em>document.writeln                                 </em> methods</b><br>         <script language="JavaScript"> 1  document.write("<h3>One, ");  // No newline 2  document.writeln("Two, ");  document.writeln("Three, "); 3           document.write("Blast off....  <br>  ");  // break tag 4           document.write("The browser you are using is " +                            navigator.userAgent + "  <br>  "); 5       </script> 6  <pre>  7       <script language="JavaScript"> 8  document.writeln  ("With the <em>HTML &lt;pre&gt;                                </em> tags, ");             document.writeln("the <em>writeln</em> method produces a                              newline.");             document.writeln("Slam");             document.writeln("Bang");             document.writeln("Dunk!"); 9       </script> 10  </pre>  </body></html>

EXPLANATION

The document.write() method does not produce a newline at the end of the string it displays. HTML tags are sent to the HTML renderer as the lines are parsed.
The document.writeln() method doesn't produce a newline either, unless it is in an HTML <pre> tag.
Again, the document.write() method does not produce a newline at the end of the string. The <br> tag is added to produce the line break.
The document.write() method does not produce a newline. The <br> tag takes care of that. userAgent is a special navigator property that tells you about your browser.
The first JavaScript program ends here.
The HTML <pre> tag starts a block of preformatted text; i.e., text that ignores formatting instructions and fonts.
This tag starts the JavaScript code.
When enclosed in a <pre> tag, the writeln() method will break each line it prints with a newline; otherwise , it behaves like the write() method (i.e., you will have to add a <br> tag to get a newline).
This tag marks the end of the JavaScript code.
This tag marks the end of preformatted text. The output is shown in Figure 2.1.

Figure 2.1. The output from Example 2.2 demonstrates the difference between the document.write() and document.writeln() methods.

2.3.1 Strings and String Concatenation

2.3.2 The write() and writeln() Methods

Example 2.2

Figure 2.1. The output from Example 2.2 demonstrates the difference between the document.write() and document.writeln() methods.