CS2020:   Web Science, Sytems and Design
Instructor Outline Syllabus Projects Links  

JavaScript

An Introduction (cont.)


Conditionals and Loops:

  • Basically the same as C/C++, see book for details
    • if (condition) { statement1 } else { statement2 }
    • condition ? statement1 : statement2;
    • for (intial-expression; condition; increment) { statements }
    • while (condition) { statements }

 

 

Part V: Using Conditionals and Loops

1. Loops are very easy in JavaScript, sometimes utilizing a shorthand that combines many steps. For instance, in typical loops you take a variable a, add the number one to it (a = a + 1) and continue on in the loop until you reach some value. In JavaScript, there's an even shorter method to incrementing by one, since this is so common: a++. This literally means "take the variable a and add the value one to it, storing the result in a."

In this next example, you'll declare a couple of variables and run a function, called ScrollMessage, which includes an incremental loop and a conditional. You'll use the conditional to check the progress of a one of those variables, as it increments by one, to see if it gets to a certain value. Then you'll start all over again.

 

2. First off, declare the two variables:

<HTML>

<HEAD>

<TITLE>Conditionals and Loops</TITLE>

<SCRIPT>

var msg = "   \"Any sufficiently advanced technology is

indistinguishable

 from magic.\" -- A.C. Clarke . . .    ";

var pos = 0;

Notice how you had to escape the quotation marks in the msg variable, so as not to confuse the quotations with the ones used in the actual script language. Also, the incremental variable called pos will begin at zero.

 

3. Now comes the ScrollMessage function, beginning like this:

function ScrollMessage() {

   document.form.textfield.value = msg.substring(pos, msg.length) +

 msg.substring(0, pos);

Since the document object allows you to affect the values of form fields, you'll use this to your advantage in scrolling the text. form is considered a child object of the built-in document object, and there can be several form objects in a document, called elements. Each component of an HTML form (text fields, buttons, etc.) is called an element. So the syntax is

document.FormName.ComponentName.ComponentValue

Within this particular form object, you'll be cutting up the text contained in msg using the substring() method of the built-in String object. Using this method returns a string consisting of part of the original string between two values, called index values. This can be tricky, because the first index value begins with zero and the last is non-inclusive. For example, to print the fourth through the sixth values of a string, you would write:

document.write

(text.substring(3,6));

The second index character (6) is noninclusive, so an index value of six inside the substring method would include up to an index value of five, which would be the sixth character. This may seem confusing at first, but mathematically it is the only way to get only the first character, if needed.

To understand how this ultimately works, the table below shows what portion of the msg text "0123456789" would appear as the pos variable changes. Keep in mind the value of msg.length in this example is 10:

pos (pos, msg.length) (0, pos) (pos, msg.length) +
(0, pos)
0 0123456789 -

0123456789
1 123456789 0

1234567890
2 23456789 01

2345678901
3 3456789 012

3456789012

4. The rest of the function continues as:

pos++;

if (pos > msg.length) pos = 0;

Here the script adds one to the current value of pos and then checks to see if the value is more than the length of the msg string. If it is, pos starts back at zero, essentially starting the scrolling all over again. If not, the function continues, finishing up with:

  

window.setTimeout("ScrollMessage()",200);

}
The built-in window object has several methods, including setTimeout. This lets you execute a statement after a specific time, in thousandths of a second. In this case, after 200/1000 (or two tenths) of a second, the function ScrollMessage runs again. It is this method that allows you to continue updating the text within the text field of your form.
5. Now the rest of the script and page: 
</SCRIPT>

</HEAD>

<BODY onLoad = "ScrollMessage();" BGCOLOR="#CCCC99">

<FORM NAME="form">

<INPUT TYPE="text" NAME="textfield"

SIZE="40">

</FORM>

</BODY>

</HTML>

The event handler onLoad in the <BODY> tag is necessary to load the msg text into the text filed, once it is created in the web page.

 

6. Here's the entire page, with two additional lines added (in red) to show how the pos variable changes:

<HTML>

<HEAD>

<TITLE>Conditionals and Loops</TITLE>

<SCRIPT>

var msg = "   \"Any sufficiently advanced technology is

indistinguishable

 from magic.\" -- A.C. Clarke . . .    ";

var pos = 0;

function ScrollMessage() {

   document.form.textfield.value = msg.substring(pos, msg.length) +

msg.substring(0, pos);

   document.form.count.value = pos

   pos++;

   if (pos > msg.length) pos = 0;

   window.setTimeout("ScrollMessage()",200);

}

</SCRIPT>

</HEAD>

<BODY onLoad = "ScrollMessage();" BGCOLOR="#CCCC99">

<FORM NAME="form">

<INPUT TYPE="text" NAME="textfield"

SIZE="40">

pos = <INPUT TYPE="text"

NAME="count" SIZE="2">

</FORM>

</BODY>

</HTML>

 

Next: Form Validation

 
© Lynne Grewe