A FUN EXAMPLE

Now for an example that's not only fun, but also demonstrates many of the programming concepts you have learned in the last three lessons. The programming language is JavaScript embedded in a Web page. When JavaScript appears in a Web page, there's no main program; the real main program is the browser, and JavaScript provides added functions that are called by the browser when events occur.

In the following example, the HTML tags create a page that has a title, a line of text and an input form. After presenting the entire code, each part is discussed in detail. If you want to copy the following and play with it, be sure to save it as plain text (not a word processor format) in a file named Example.html. 

<html>
<head><title>Example with Input and Events</title>
<script language="javascript" type="text/javascript">

function doReverse() {
  var s = ctrl.msg.value ; // get input
  ctrl.msg.value = "" ; // erase input field
  for( i = s.length - 1 ; i >= 0 ; i-- ){
    ctrl.msg.value += s.charAt( i );
  }
}

</script>
</head>

<body>
<p>Type something then press Reverse
<form name="ctrl">
<input name="msg" type="text" size="40" value="" />
<input name="doit" type="button"
    onclick="doReverse();" value="Reverse" />
</form>
</p>
</body>

</html>

The first two lines tell the browser how to show the title of the page. The tag that starts <script tells the browser that one or more JavaScript functions are going to be defined in the text that ends with </script> so it does not try to display that text. The text in the area between the <body> tag and the </body> tag is what the browser uses to create the page display.

The page has a short bit of text followed by a form, where the form consists of a single text input field and a button. Figure 3-1 shows the display with some text typed into the form.

Figure 3-1: The Web page display with text typed into the form.
Figure 3-1: The Web page display with text typed into the form.

View a larger version of this image.

Note that the form is named ctrl ; the text input field is named msg ; and the button is named doit . These names identify those tags such as variables as far as JavaScript is concerned. In the tag that creates the button, the code that says: 

onclick="doReverse();"

tells the browser to execute the doReverse function when it gets a mouse click on the button. When you type into the text field named msg , the keypress events sent by the operating system to the browser are interpreted as characters and are added to the field and displayed.

How the doReverse Function Works

The definition of the doReverse function is enclosed in curly braces, following the C convention. The next lesson discusses the conventions found in C family languages. For now, however, concentrate on how this function works.

The first line of the function is: 

var s = ctrl.msg.value ; // get input

which illustrates a number of things you have already learned. The form named ctrl is an example of a complex variable made up of simpler parts. To get the text from the text input box, you have to address the individual parts using the names established in the form. The following shows how you could describe the way this line of code works:

  1. Get the variable named ctrl from the page.
  2. Get the variable named msg from ctrl .
  3. Get the contents of the msg variable by looking inside of value .
  4. Put the contents of that variable in the local variable named s .

JavaScript does not require you to declare the variable s as being of any particular type. Instead, it automatically adapts the variable to the type of value being stored in it. This characteristic is true of many scripting languages and is called weak typing.

Next there's a statement that puts an empty string in value . Following that, you have the code that puts the characters back into the form in reverse order. Remember what you learned in Lesson 2 about arrays having the first item at position zero? Well, strings in JavaScript are the same way. To get the last character in the string, you have to use an index equal to the length of the string minus one. The statement that controls the FOR loop says: 

  for( i = s.length - 1 ; i >= 0 ; i-- ){

In plain language you would say, "starting with an index that points to the last character in the string s, subtract one every time through the loop, as long as the index is zero or positive."

The next statement: 

  ctrl.msg.value += s.charAt( i );

says, "add the character in the i'th position in the string and to those already in the value variable. On every cycle, the FOR loop uses the next smaller index to work backwards through the string." The browser displays the changed content of the variable, and you end up with the text field filled with the reversed string, as shown in Figure 3-2.

Figure 3-2: The page as it appears after pressing the Reverse button.
Figure 3-2: The page as it appears after pressing the Reverse button.

View a larger version of this image.

Moving On

Wow, you got a lot done in this lesson. You were introduced to the important programming concept of subprograms, and how they're used. You saw some typical uses of input and output programming commands, and you got a quick introduction to how modern GUI programming uses events for user input in JavaScript.

The next lesson looks at some more traditional programming languages, and shows you what it takes to create a complete program in one of those languages. Before you move on, be sure to complete the assignment and quiz for this lesson. And don't forget to drop by the Message Board to see what your fellow students have to say.