Input and Output in JavaScript

The ability to perform input and output (I/O) is an integral part of most languages. Because JavaScript executes in a host environment like a Web browser, its I/O facilities might be different from what you would expect. For obvious security reasons, plain client-side JavaScript is not usually allowed to read or write files in the local file system. There are exceptions, but these are considerably more advanced and will not be addressed until a later chapter.

I/O, like most useful tasks in JavaScript, is carried out through the objects provided by the browser. Interacting with the user is typically achieved through the Window object, several methods of which are described here. One of the most common I/O methods in JavaScript is using the alert() method of Window, which displays its argument message in a dialog box that includes an OK button. For example,

alert("This is an important message!");

causes the following dialog box to be presented to the user:

Other forms of dialog with the user include the confirm() method, which displays its argument message in a dialog box with both OK and Cancel buttons. With the script

confirm("Learn JavaScript?");

you should see the following window:

Last, we could use the prompt() method to collect some data from the user. A prompt displays its argument message in a dialog box and allows the user to enter data into a text field, as illustrated by this example:

var answer = prompt("What is your favorite color?","");

Note

Despite all the previous methods being part of the Window object, you’ll note that we did not write window.alert("hello"), rather just alert("hello"). The validity of this shorthand notation is a result of JavaScript’s object scoping rules, which are discussed in Chapters 6 and 9.

A common form of output is achieved through the Document object. This object provides many ways to manipulate Web pages, the simplest of which are the write() and writeln() methods. The write() method writes its arguments to the current document. The writeln() method is identical except that it inserts a linebreak after writing the argument. For example:

document.write("This text is not followed by a linebreak. ");
document.writeln("However this uses writeln().");
document.write("So a newline was inserted.");

The reason you might not notice any difference if you try this example is that JavaScript typically outputs to an (X)HTML document. Recall from Chapter 1 that the intersection between the two languages can provide some frustration for programmers. Browsers that support (X)HTML collapse all newline characters to a single space, so a newline won’t make any difference at all in output. This feature probably explains why most JavaScript programmers tend to use document.write() instead of document.writeln(). To see the difference between document.write and document.writeln, you might use the <<pre>> tag around the example, as shown here:

<<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">>
<<html xmlns="http://www.w3.org/1999/xhtml">>
<<head>>
<<title>>Write/Writeln Example<</title>>
<<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />>
<</head>>
<<body>>
<<pre>>
 <<script type="text/javascript">>
  document.write("This text is not followed by a linebreak. ");
  document.writeln("However this uses writeln().");
  document.write("So a newline was inserted.");
 <</script>>
<</pre>>
<</body>>
<</html>>

The result of this example in a browser window can be seen in Figure 2-1.

Figure 2-1: Output of write() and writeln() methods

In addition to write() and writeln(), the Document object provides powerful features for manipulation of HTML and XML via the Document Object Model. The DOM, which is covered primarily in Chapter 10, can be used to replace or insert text, change formatting characteristics, and write to or read from HTML forms.