Ok, last lesson was a little cheesy because it was designed to run code when the program loaded. This time we will do the same thing in a variety of ways in response to user input. Here is where it starts to get fun.
There are two basic ways of printing text in response to user input. The first is using ALERT:

<HTML>
<HEAD>
<SCRIPT TYPE="text/javascript">
function showAlert()
  {
  alert("Hello World!")
  }
</SCRIPT>
</HEAD>
<BODY>
<INPUT TYPE="button" ONCLICK="showAlert()" VALUE="Show Alert Box">
</BODY>
</HTML>

Code

Notice that the script is in the HEAD of the page instead of the BODY. That means it will be ignored until needed. Type or cut-and-paste the above code into your text editor and save as 2p.htm. Open the file in your web browser and click on the button.
Oh also, notice that the ALERT command is inside a function and braces{}. That is so when we add code for a second button the two won't get mixed up.
And so to show you the second way to respond to user input, let's add another function now. To the SCRIPT section add:

function writeText()
  {
  document.getElementById("textDisplay").value="Hello World!"
  }

And to the Body add:

<INPUT TYPE="button" ONCLICK="writeText()" VALUE="Click Me">
<INPUT TYPE="text" ID="textDisplay">

Code

The second button now calls the function writeText which enters "Hello World!" into the new text box which is called textDisplay. We have to use the command getElementById to select the text box by its ID.
Now CLICK HERE and see how it works. Look at the code. Then try making a page all your own that get information and computes a value in the same manner as the example.

1