CX 103: Introduction to Computers
 
 

Lecture 22


 
 

Second Exam: Tuesday, April 17

Focus of Exam

JavaScript

Fire in the Valley: Chapters 5 - 8
 


 

ARRAYS

An array is a collection of objects, each of the same type. The entire collection is referred to using the array name. The items in the array are stored in the array cells and known as elements of the array. The cells are referenced using the array index or subscript.

In JavaScript (as well as Java, C and C++), all array subscripts start with 0.

Example: the five exam scores 90, 50, 80, 70, 100 can be stored in an array called "Grades" we can picture as

Array name = Grades Number of cells = 5

Range of index = 0 to 4 element in Grades[3] = 70

name of third cell = Grades[2]
 

The syntax for "declaring" such an array:

The declaration only sets up space in memory for the array.

We must "initialize" with reliable values before they can be used.

Initializing an Array

Method I:

var Grades = new Array( 5 );

Grades[0] = 90;

Grades[1] = 50;

Grades[2] = 80;

Grades[3] = 70;

Grades[4] = 100;

Here are some other ways:

var Grades = new Array (90, 50, 80, 70, 100);

var Grades = [90, 50, 80, 70, 100];

Grades = [90, 50, 80, 70, 100];

<HTML>

<HEAD>

<TITLE> Initializing Arrays </TITLE>

<SCRIPT LANGUAGE = "JavaScript">

var i;

var Grades = new Array (90, 50, 80, 70, 100);

GradeString = "var Grades = new Array (90, 50, 80, 70, 100);"

document.writeln("<H1><EM>"+ GradeString + "</EM><BR>");

document.writeln("The Grades are :");

for (i = 0; i <= 4; i = i+1) document.writeln( Grades[i] );

document.writeln("<BR><BR>");
 
 
 
 

var Scores = [90, 50, 80, 70, 100];

ScoresString = "var Scores = [90, 50, 80, 70, 100];"

document.writeln("<EM>"+ ScoresString + "</EM><BR>");

document.writeln("The Scores are :");

for (i = 0; i <= 4; i = i+1) document.writeln( Scores[i] );

document.writeln("<BR><BR>");
 
 

Results = [90, 50, 80, 70, 100];

ResultsString = "Results = [90, 50, 80, 70, 100];"

document.writeln("<EM>"+ ResultsString + "</EM><BR>");

document.writeln("The Results are :");

for (i = 0; i <= 4; i = i+1) document.writeln( Results[i] );

document.writeln("<BR>");
 
 
 
 

N = window.prompt("How Many Squares", "")

N = parseInt(N);

document.writeln("<BR>Dynamic size array with " + N +" elements:<BR>");

var Exams = new Array(N);

for (i = 0; i <= N-1; i = i+1)

{ Exams[i] = [i];

document.writeln(i*i)

}

document.writeln("<BR><BR><EM>An Array of Strings</EM><BR>")

document.writeln("The Names are: ");

var Names = ["Kate", "Ted", "Trevor", "Homer", "Bob", "Becky"];

for (i = 0; i <= Names.length - 1; i = i + 1) document.writeln( Names[i] );

document.writeln("<BR>");

</SCRIPT>

</HEAD> <BODY BGCOLOR = "blanchedalmond">

</BODY> </HTML>

InitializeArrays.html


 
 
 

Finding Smallest Element in Array

Suppose we have the Grade Point Averages of all 500 Middelbury College seniors stored in an array.

GPA[i] is the GPA of Student i
where i ranges from 0 to 499.
 

How do we find the lowest GPA?

Lowest = GPA[0];

for (i = 1; i <= 499; i = i+1);

if (GPA[i] < Lowest) Lowest = GPA[i];

This is the most efficient way to find the Lowest if the GPA array is not sorted by Grade Point Average.


<HTML>
<HEAD>
<TITLE> Lowest GPA</TITLE>
<SCRIPT LANGUAGE = "JavaScript">

var i, Lowest;

var GPA = new Array(2.006, 1.546, 1.889, 2.74, 2.158, 3.633, 3.883, 1.437, 1.924, 1.526, 3.315, 3.709, 2.994, 1.403, 3.386, 1.923, 3.095, 3.489, 2.192, 2.908, 2.004, 2.544, 2.394, 1.677, 3.385, 2.104, 2.143, 2.761, 2.779, 1.843, 3.609, 3.661, 1.575, 1.712, 3.276, 1.587, 2.572, 1.975, 3.222, 1.719, 2.024, 3.688, 3.031, 1.905, 2.8, 2.952, 1.546, 1.722, 1.62, 2.763, 2.871, 2.881, 1.924, 1.734, 2.631, 2.386, 2.587, 3.123, 3.016, 1.637, 2.803, 2.087, 3.453, 1.363, 3.148, 1.967, 2.189, 3.72, 2.742, 3.403, 2.916, 1.614, 1.575, 2.507, 3.353, 2.545, 1.912, 1.903, 2.55, 2.136, 1.748, 1.765, 2.615, 2.056, 3.201, 3.296, 1.978, 3.059, 3.24, 1.834, 2.682, 3.576, 3.186, 1.545, 1.664, 3.058, 1.862, 2.014, 3.663, 3.697, 3.033, 3.771, 2.771, 2.602, 2.653, 3.288, 3.086, 1.744, 3.295, 1.61, 3.644, 1.757, 2.511, 1.575, 3.102, 3.36, 2.822, 2.333, 1.621, 1.536, 2.378, 3.207, 2.526, 3.242, 3.571, 1.786, 2.022, 3.34, 1.541, 2.917, 3.54, 2.948, 2.369, 1.756, 3.132, 2.12, 3.813, 2.827, 1.89, 1.464, 3.333, 3.686, 2.727, 2.429, 2.245, 1.589, 1.421, 1.697, 2.281, 1.68, 2.112, 3.343, 2.33, 1.545, 2.159, 3.459, 3.443, 2.088, 1.858, 2.373, 2.48, 3.563, 2.764, 2.655, 1.867, 3.066, 3.472, 1.939, 2.695, 2.464, 2.462, 2.65, 3.065, 2.645, 2.352, 2.802, 2.436, 2.484, 2.126, 3.448, 3.217, 2.809, 3.006, 3.649, 3.027, 3.263, 2.075, 1.434, 1.611, 2.199, 2.358, 3.289, 3.679, 3.416, 2.549, 3.593, 3.488, 3.285, 3.386, 3.277, 2.261, 2.259, 1.49, 2.942, 2.046, 2.232, 3.23, 3.483, 3.614, 2.839, 1.751, 3.276, 3.144, 3.746, 1.659, 2.867, 1.633, 2.651, 3.227, 3.575, 1.82, 2.387, 2.784, 2.045, 2.48, 3.144, 1.933, 3.637, 1.876, 3.001, 3.313, 3.309, 1.537, 1.93, 2.807, 1.511, 3.34, 3.048, 3.603, 1.723, 2.806, 1.473, 2.684, 1.549, 2.216, 2.976, 2.44, 3.167, 1.653, 3.407, 3.239, 2.193, 1.733, 3.077, 3.543, 2.821, 3.301, 1.449, 1.628, 2.438, 1.718, 1.88, 3.606, 1.518, 1.963, 2.147, 2.517, 3.845, 1.871, 3.223, 2.314, 1.672, 2.683, 3.27, 2.671, 1.482, 2.6, 2.658, 2.062, 2.603, 3.408, 3.14, 2.225, 1.611, 2.857, 3.134, 1.873, 3.091, 3.391, 2.234, 3.496, 2.415, 3.401, 2.877, 3.435, 3.485, 1.459, 2.563, 3.302, 1.829, 1.689, 2.994, 1.925, 1.995, 2.466, 3.84, 1.987, 3.462, 3.328, 3.592, 2.947, 3.014, 2.586, 2.311, 3.468, 1.78, 2.282, 3.398, 2.554, 3.348, 2.446, 3.278, 1.818, 2.096, 2.122, 2.617, 3.233, 1.601, 2.592, 1.81, 2.61, 3.701, 1.875, 2.311, 3.26, 2.947, 2.863, 1.944, 2.554, 2.87, 2.326, 2.453, 2.512, 2.487, 2.926, 3.767, 2.236, 3.012, 2.759, 2.997, 2.778, 1.386, 2.146, 2.782, 3.519, 3.453, 1.617, 3.249, 1.63, 1.846, 1.915, 3.533, 2.436, 2.693, 3.67, 3.649, 2.072, 1.484, 3.001, 2.722, 2.895, 3.705, 3.541, 1.576, 2.118, 2.689, 3.22, 1.666, 3.103, 3.121, 3.56, 2.512, 1.763, 1.658, 2.094, 2.123, 2.947, 1.809, 3.036, 3.715, 2.418, 2.728, 3.486, 2.866, 2.3, 2.46, 3.604, 2.488, 2.933, 1.719, 3.648, 2.818, 3.495, 2.823, 3.516, 2.654, 1.97, 3.454, 1.732, 2.743, 2.058, 3.037, 1.611, 3.047, 3.256, 3.214, 1.795, 3.104, 2.468, 3.264, 2.443, 3.278, 1.655, 3.293, 2.545, 3.39, 2.474, 3.302, 1.771, 3.641, 1.497, 1.498, 3.581, 3.693, 2.427, 3.826, 2.218, 3.056, 2.522, 2.114, 3.011, 2.028, 3.457, 3.48, 3.459, 3.728, 2.062, 1.725, 3.517, 1.554, 2.065, 2.383, 2.154, 2.829, 2.904, 2.862, 2.355, 1.894, 1.635, 2.16, 1.409, 2.279, 2.548, 3.276, 3.526, 2.161, 2.79, 2.396, 3.547, 3.412, 2.345, 3.166, 1.925, 1.615, 2.344, 3.295, 2.597, 2.124, 1.88, 1.761, 2.095, 3.293, 3.757, 1.959, 3.563, 1.505, 2.254, 3.737, 3.339, 3.295, 1.919, 2.76, 2.347, 1.865, 2.992, 1.997, 3.36, 2.868, 3.612, 1.895 );
 
 

Lowest = GPA[0];

for (i = 1; i <= 499; i = i+1)

if (GPA[i] < Lowest) Lowest = GPA[i] ;

document. writeln("<BR><H1>The lowest GPA is " + Lowest);

</SCRIPT> </HEAD>

<BODY BGCOLOR = "white"> </BODY>

</HTML>

CreateGPA2.html


How would we find

(a) The average GPA ?

(b) The student with the lowest GPA ?

WeakestStudent = 0;
Lowest := GPA[0];
sum = GPA[0];

for (i = 1; i <= 499; i = i+1);

{

    sum = sum + GPA[i]

    if (GPA[i] < Lowest)

        {

            Lowest = GPA[i];

            WeakestStudent = i;

        }

}

average = sum/500;

document.writeln("The average GPA is " + average);

document.writeln("Student " + WeakestStudent + " has the lowest GPA. It is " + Lowest );

<HTML>

<HEAD>

<TITLE> Lowest GPA, Weakest Student and Average GPA</TITLE>

<SCRIPT LANGUAGE = "JavaScript">

var i, Lowest, NumStudents;

NumStudents = 500;

var GPA = new Array(NumStudents);

sum = 0;

// WE GENERATE 500 RANDOM GPA'S LIKE MIDDDLBEURY GPA'S

for (i=0; i <= NumStudents-1; i = i+1 )

{ a1 = Math.random(); a2 = Math.random(); a3 = Math.random(); a4 = Math.random();

b = (0.065)* (45*a1 + 5*(1+a2) + 4*(2+a3) + 3*(3+a4));

b = Math.round(1000*b)/1000;

GPA[i] = b;

document.writeln( GPA[i] );

if ( i % 20 == 0) document.writeln("<BR>");

sum = sum + GPA[i];

}
 
 

Lowest = GPA[0];

WeakestStudent = 0;

for (i = 1; i <= NumStudents-1; i = i+1)

if (GPA[i] < Lowest)

{ Lowest = GPA[i] ;

WeakestStudent = i ; }

average = sum/NumStudents;

average = Math.round(average*100)/100;

document. writeln("<BR><H1>The lowest GPA is " + Lowest);

document.writeln("<BR>Student " + WeakestStudent + " had this average");

document.writeln("<BR>The average GPA is " + average);

</SCRIPT>

</HEAD> <BODY BGCOLOR = "white"> </BODY> </HTML>

LowestGPA3.html

Searching An Array

GPA is again our array of grades for NumStudents students stored to 3 decimal places.

target = window.prompt("Which GPA shall I try to find?", "");

target = Math.round(1000*target)/1000;

i = 0;

found = false;

while ( (found != true) && (i <= NumStudents) )

{     if ( GPA[i] == target)

            { document.writeln("<BR><H1>Student " + i + " had          this  average");

            found = true;

            }

        i = i+1;

}

if (found == false)

document.writeln("<BR><H1>Done searching without sucess");

LowestGPA4.html

To test this program, we'll make the target a randomly chosen actual GPA.

<HTML>
<HEAD>
<TITLE> Lowest GPA</TITLE>
<SCRIPT LANGUAGE = "JavaScript">

var i, Lowest, NumStudents,targetIndex, target;

NumStudents = 500;

var GPA = new Array(NumStudents);

for (i=0; i <= NumStudents-1; i = i+1 )
{ a1 = Math.random(); a2 = Math.random(); a3 = Math.random(); a4 = Math.random();
   b = (0.065)* (45*a1 + 5*(1+a2) + 4*(2+a3) + 3*(3+a4));
   b = Math.round(1000*b)/1000;
  GPA[i] = b;
   document.writeln( GPA[i] );
   if ( i % 20 == 0) document.writeln("<BR>");
}

targetIndex = Math.floor( 500*Math.random() )

target = GPA[ targetIndex];

document.writeln("<BR><H1>The target GPA is " + target + "<BR>" );

i = 0;
found = false;

while ( (found != true) && (i <= NumStudents) )
{ if ( GPA[i] == target)
{ document.writeln("<BR><H1>Student " + i + " had this average");
found = true; }
i = i+1;
}

if (found == false)
document.writeln("<BR><H1>Done searching without sucess");
 

</SCRIPT>
</HEAD>
<BODY BGCOLOR = "white">
</BODY>
</HTML>
 LowestGPA6.html

Strings as Arrays

Consider a string in JavaScript.

It is a sequence of characters

W = window.prompt("Enter something", "");

Suppose user types in Middlebury

W = Middlebury
 
M i d d l e b u r y
W[0] W[1] W[2] W[3] W[4] W[5] W[6] W[7] W[8] W[9]

<HTML>

<HEAD>

<TITLE>Arrays </TITLE>

<SCRIPT LANGUAGE = "Javascript">

W= window.prompt("Enter a word","");

document.writeln("<H1>The word you gave me was " + W);

document.writeln("<BR>The individual characters are ");

for (i = 0; i <= 9; i = i + 1)

document.writeln("<BR>" + W[i]);

</SCRIPT>

</HEAD>

<BODY BGCOLOR = "white"> </BODY>

</HTML>

array1.html (Lecture 21)


This approach works in Netscape, but not in Explorer.

Alternative: (works in both Netscape and Explorer)

Use W.charAt(i) in place of W[i]

<HTML>
<HEAD>
<TITLE>Arrays </TITLE>
<SCRIPT LANGUAGE = "Javascript">

W= window.prompt("Enter a word","");

document.writeln("<H1>The word you gave me was " + W);

document.writeln("<BR>The individual characters are ");

for (i = 0; i <= 9; i = i + 1)

document.writeln("<BR>" + W.charAt(i) ) ;

</SCRIPT>
</HEAD>
<BODY BGCOLOR = "white"> </BODY>

</HTML>

NewArray1.html
 
 

What if we don't know the length of the word?

W.length tells us.

<HTML>

<HEAD>

<TITLE>Arrays </TITLE>

<SCRIPT LANGUAGE = "Javascript">

W= window.prompt("Enter a word","");

document.writeln("<H1>The word you gave me was " + W);

document.writeln("<BR>The individual characters are ");

for (i = 0; i <= W.length - 1; i = i + 1)

document.writeln("<BR>" + W.charAt(i));

</SCRIPT>

</HEAD>

<BODY BGCOLOR = "white">

</BODY>

</HTML>

NewArray3.html

Writing a string backwards

<HTML>
<HEAD>
<TITLE>Arrays </TITLE>
<SCRIPT LANGUAGE = "Javascript">

W= window.prompt("Enter a word","");

document.writeln("<H1>The word you gave me was " + W);
document.writeln("<BR><BR>Now we will write it backwards:<BR>");

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

document.write(W.charAt(i) );

</SCRIPT>
</HEAD>
<BODY BGCOLOR = "white">
</BODY>
</HTML>

array4.html

Application: Word Counter





<HTML>
<HEAD>
<TITLE> Word Counter </TITLE>
<SCRIPT LANGUAGE = "JavaScript">
 

function DoStuff()

{

    text = document.MyForm.phrase.value;

    Words = 1;

    for( i = 0; i <= text.length - 1; i = i + 1)

    if (text.charAt(i) == " ") Words = Words+1;

    document.MyForm.HowManyWords.value = Words;

}

</SCRIPT>
</HEAD>
<BODY BGCOLOR = "white">
<FORM NAME = "MyForm">
<H2>
Enter A Phrase:
<INPUT NAME = "phrase" TYPE = "text" SIZE = "50">
<BR>
<INPUT TYPE = "button" VALUE = "Click to Count" SIZE = "20"
     ONCLICK = "DoStuff()" >
<BR>
Number of Words:
<INPUT NAME = "HowManyWords" TYPE = "text" SIZE = "15">
</FORM> </BODY></HTML>

WordCounter.html

Allow Large Amount of Text

<HTML> <HEAD>
<TITLE> Word Counter for Large Amount of Text </TITLE>
<SCRIPT LANGUAGE = "JavaScript">

function DoStuff()

{
    text = document.MyForm.phrase.value;
    Words = 1;
    for( i = 0; i <= text.length - 1; i = i + 1)
    if (text[i] == " ") Words = Words+1;
    document.MyForm.HowManyWords.value = Words;
}

</SCRIPT> </HEAD>
<BODY BGCOLOR = "blanchedalmond">
<FORM NAME = "MyForm">
<H2>
Enter Some Text
<TEXTAREA NAME = "phrase" ROWS = 20 COLS = 50> </TEXTAREA>

<BR>
<INPUT TYPE = "button" VALUE = "Click to Count" SIZE = "20"

ONCLICK = "DoStuff()" >

<BR>

Number of Words:

<INPUT NAME = "HowManyWords" TYPE = "text" SIZE = "15">

</FORM> </BODY> </HTML>

WordCounter2.html

Arrays and Computer Dating Services
 
 
 
  #1 #2 #3 #4 #5 #6 #7 #8 #9 #10
Andrew Yes  No  No  Yes  Yes  Yes  Yes  No  No  No 
Annalise Yes  Yes  Yes  No  No  Yes  No  No  Yes  Yes 
Beth Yes  Yes  No  No  Yes  No  Yes  Yes  Yes  Yes 
Bob No  Yes  Yes  Yes  No  No  No  Yes  No  No 
Brendan Yes  No  Yes  Yes  Yes  No  No  Yes  Yes  Yes 
Casey Yes  No  Yes  Yes  No  Yes  Yes  No  Yes  Yes 
CharlesM Yes  No  No  Yes  Yes  No  Yes  Yes  No  Yes 
Charles R No  Yes  No  Yes  Yes  No  No  Yes  No  No 
Colin Yes  Yes  Yes  No  No  No  Yes  Yes  Yes  Yes 
David M Yes  No  Yes  Yes  No  Yes  No  Yes  Yes  No 
David R No  No  No  No  No  Yes  Yes  Yes  Yes  No 
David S Yes  No  No  Yes  No  Yes  No  No  No  Yes 
Eliza Yes  Yes  No  Yes  Yes  No  No  Yes  Yes  Yes 
John No  Yes  No  Yes  Yes  No  Yes  No  No  Yes 
Jordan Yes  Yes  No  Yes  Yes  No  Yes  No  Yes  No 
Kate Yes  No  No  No  No  No  Yes  Yes  No  Yes 
Kennan Yes  Yes  No  No  No  No  No  Yes  No  Yes 
Liz No  Yes  No  Yes  Yes  No  No  No  Yes  Yes 
Louisa Yes  No  No  Yes  No  No  Yes  Yes  No  No 
Matt No  Yes  No  No  Yes  Yes  No  Yes  Yes  No 
Megan Yes  No  No  Yes  Yes  Yes  Yes  No  Yes  No 
Missy No  No  No  Yes  No  No  No  Yes  No  No 
Nathaniel Yes  No  No  No  Yes  No  No  Yes  No  Yes 
Rada No  No  Yes  Yes  Yes  No  Yes  Yes  Yes  Yes 
Rebecca No  Yes  No  Yes  No  No  No  Yes  No  Yes 
Ryan B Yes  No  Yes  Yes  Yes  Yes  No  No  Yes  No 
Ryan P Yes  Yes  No  No  Yes  No  No  No  Yes  Yes 
Ted Yes  No  Yes  Yes  No  Yes  Yes  Yes  Yes  Yes 
Tejas Yes  No  Yes  Yes  No  No  Yes  Yes  Yes  No 
Trevor No  Yes  No  Yes  No  Yes  Yes  No  No  Yes 
Tyler No  Yes  No  No  No  No  Yes  Yes  Yes  No 
Veljko No  Yes  Yes  Yes  No  No  Yes  No  No  Yes