Practice: Using JavaScript and the DOM to Output Data to a Webpage

In this exercise, we'll use JavaScript to output data to a webpage using the write method on a document object. First, read this article that describes document.write(). The article also describes two other methods we've used in this course: console.log() and alert(). This exercise does not count towards your grade. It is just for practice!

JavaScript program output is normally written either to the web page that contains it, the console if it is information that is only of use to a programmer, or to a dialog box.  These three options are explained below.

  • Output can be written it on the web page so that the user can see it.  To write HTML code on the document, the document.write() function is used.  The document.write() function can be used to write any HTML formatted string of information to the web page.  For instance, to write the string "This is my first web page with JavaScript…" from JavaScript, the following line of JavaScript can be added to the body of the web page.

document.write("This is my first web page with JavaScript…");

Program  20 - Output to HTML DOM from JavaScript

The string passed to the document.write() function can be any HTML formatted string. The document.write() function does not simply output text on the page; document.write writes the text to the document, and the document will then correctly parse and render the output in the HTML string on the web page.  To write a page heading, the following string can be written to the document: 

document.write("<h1>First JavaScript Program</h1>")

Program  21 - Ouput to HTML DOM with HTML tags

Any valid html tag or statement can be written to a page, as the string which is written is effectively written to and interpreted as HTML by the browser processing the page.  

  • The second way to produce output is used for debugging and involves printing information which is not intended to be seen by the normal user.  This output is written to the web page console.  The console is used to write output that is intended to be used by programmers and others who might be supporting this site.   The web console can be accessed from all major browsers, but how to access it and even some constraints on how the information is displayed are different for every browser. For example, in Chrome the browser the ctrl-shift-i key will bring up the developer tools, and from there the console can be selected.  You should search the internet on how to access the Web Console for your specific browser.  
The Web Console is an invaluable place to write debug output, and other information that a programmer might want the program to produce but not let the end users see. To write to the Web Console, pass a JavaScript element (string, object, etcetera) to the console.log() function, as in the following line of code.

console.log("The program is running")

Program  22 - Writing to the console log

  • The final way to output (and input) text from a program is to use a dialog box.  Here only the output dialog box, created by using the alert function, is shown.  Input will generally be handled in forms, so input dialogs, except for specialized dialogs such as file dialogs, are not that useful, and so are not covered.  To create an output dialog box, run the alert function as follows. 

alert("Something");

Program  23 - alert dialog box


Source: Charles W. Kann III, https://www.oercommons.org/courses/programming-for-the-web-from-soup-to-nuts-implementing-a-complete-gis-web-page-using-html5-css-javascript-node-js-mongodb-and-open-layers/view
Creative Commons License This work is licensed under a Creative Commons Attribution 4.0 License.