Writing information to the screen with JavaScript with The Computer Gal

The purpose of a computer program is to take information and do something with it. That means that the program needs to have a way to 1) receive information (input), 2) return information (output).

So far we have used a prompt box to take user input and an alert box to send information back to the user.

Another way to send and receive information is through a form, which will be covered later.

Information that is calculated or manipulated can be sent directly to a web page. Normally a web page is static. That means that whatever HTML code the server sends is what the page will be. JavaScript can make a page dynamic.

The following example, takes information from the user through a Prompt Box writes text and the answer right to the page.

<script language="JavaScript">
var SquareThis = prompt("Enter a number you would like to square.");
var Answer; Answer = SquareThis * SquareThis;
document.write("<div style='color: #ffffff; font-weight: bold;'>" + SquareThis + " squared is " + Answer + "</div>");
</script>

Test the script here.

Basic Programming Skills in this Bit of Code

The code is the same except the last line. Instead of using the alert() function, this line of code tells the document to write what is in the parenthesis.
For the example, the last line is a bit different than the code given above. The font defaults to black, but the example window is black, so the text illustrated is yellow.
The code is:
document.write("<div style='color: #ffffff; font-weight: bold;'>" + SquareThis + " squared is " + Answer + "</div>");
The code inside the () uses a combination of HTML, CSS, variables and Strings.
The + between each piece of text: 1) an HTML tag in a string, 2) the variable that holds the value the user types, 3) the text " squared is ", 4) the result variable, 5) the closing HTML. In a string, the + is called a concatenation operator. It adds pieces of text together into one string.
One complication in building this type of string is that both JavaScript and HTML require quotation marks. If you put double quotes in this section: style='color: #ffffff; font-weight: bold;' , the double quote will be interpretted as closing the string, instead of being part of the string. There are two ways to solve this problem a) use single quotes, as shown in the example, b) use backslashes to "escape" the character.
Notice that the title on the example page is above the words created by the script. That part was added in the regular HTM and CSSL. If you look at the page code, you will see that the JavaScript code piece is below the title. It can be added most anywhere in the page, as long as it's in the <script></script> tags.
Add some HTML code of your own to your own example.
There are other actions a document can do, such as: document.close().