A6: Arrays, Loops and Conditions

Altenberg ~ CIS 132 ~ October 20, 2008

Array 1:

My first array is populated by declaring the values in the parentheses in the creation process, and then the array values are written to the document:

var family = new Array("Dad: Ted", "Mom: Jody", "Son: Kevin", "Daughter: Zoe", "Cat 1: Lucky", "Cat 2: Yin Yang");
       document.write(family[0] + "<br />");
       document.write(family[1] + "<br />");
       document.write(family[2] + "<br />");
       document.write(family[3] + "<br />");
       document.write(family[4] + "<br />");
       document.write(family[5] + "<br />");
}

This code renders the following:

Array 2, with a while loop:

This next array is populated by declaring the values in the parentheses in the creation process, and then a series of images are displayed using the array values and a for loop:

var dice = new Array("die1.gif", "die2.gif", "die3.gif", "die4.gif", "die5.gif", "die6.gif");

var count = 0;
while (count < dice.length) {
      document.write("<img src='images/" + dice[count] + "' alt=' ' />");
      count++;
}

This code renders the following:

An Off-Topic Tangent: A Random Roll of the Dice

Here’s a random number function, followed by 10 iterations of the function and then using it to display a die graphic. I’m working toward an animated rolling dice effect… Maybe after this week’s class on animation…

 

Array 3, with values populated using a for loop:

This next array uses a for loop to populated the array values, then write them to the document. I have also implemented a couple of simple arithmetic operators:

var count = 1;
var countArray = new Array(10);
for (count = 1; count < 12; count++) {
      document.write(See table below, 3 different iterations of this);
}

This code renders the following:

count + "<br />" count*2 + "<br />" count*count + "<br />"

if and if else Conditionals:

The table below is generated using an array (familyRole), a while loop that increments through the array values, and which also repeats a series of if else conditions that test what the current array value is and displays the name of the entity (man, woman, child or cat) that has that family role:

var familyRole = new Array("Dad", "Mom", "Son", "Daughter", "Cat1", "Cat2");
document.write("<table cellpadding='10' border='3' style='margin-left:4em'>");
var i = 0;
while (i < familyRole.length) {        document.write("<tr><th>");
       document.write(familyRole[i] + "</th><th>");
       if (familyRole[i] == "Dad") {
              document.write("Ted</th></tr>");
       } else if (familyRole[i] == "Mom") {
              document.write("Jody</th></tr>");
       } else if (familyRole[i] == "Son") {
              document.write("Kevin</th></tr>");
       } else if (familyRole[i] == "Daughter") {
              document.write("Zoe</th></tr>");
       } else if (familyRole[i] == "Cat1") {
              document.write("Lucky</th></tr>");
       } else if (familyRole[i] == "Cat2") {
              document.write("Yin Yang</th></tr>");
       }
i++;
}
document.write("</table>");

This code generates the following table:

Here’s another series of if else conditions, which check the input from the form field then return a person’s birthstone. I started with Ed’s form input function (5.1.4: User Input and Output Using Forms), then added the if else conditions to the function, and changed the input from a text input to a select option input type.

 

 

© 2008 by Edward “Ted” Altenberg. All rights reserved.
This page last updated October 19, 2008.

Valid XHTML 1.0      Valid CSS

This page valid XHTML 1.0 and CSS 2