Lexture 23

CX 103: Introduction to Computers

Lecture 23

Second Exam: Tuesday, April 17

Focus of Exam

JavaScript

Fire in the Valley: Chapters 5 - 8

Volunteer Opportunity

Design a Web Page for

The Middlebury Fire Department

Jennie Diggins

Volunteer Coordinator

Community Service Office

Middlebury College

802-443-3099

String Functions and Arrays

Some useful String functions:

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

W.length is the number of characters.

If W.length is n, then characters are

indexed as 0,1,2,..,n-1

W.charAt(i) is the character in cell i

W.charCodeAt(i) is the ASCII value of the character in cell i

String.fromCharCode() creates a string from given ASCII numbers

Example:

W = "MIDDLEBURY"

W.length = 10

W.charAt(2) = D

W.charCodeAt(2) = 68

String.fromCharCode(104,101,108,108,111) = "hello"

<HTML>

<HEAD>

<TITLE>Strings</TITLE>

var W, i, S;

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

document.writeln("<H1>You submitted the phrase " + "<EM>" + W + "</EM>");

document.writeln("<BR>which has " + W.length + " characters.<BR>");

document.writeln("The individual characters and their ASCII values are<BR>");

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

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

</SCRIPT>

</HEAD>

</BODY>

</HTML>

Strings.html

We also have a version with Forms: Strings2.html

An Application: Encrypt

1) Form 4 digit number from ASCII values of two consecutive characters

2) Add 7 % 10 to each digit

3) Swap some of the digits

4) Return new 4 digit number with

scrambled digits.

1) Form 4 digit number from ASCII values of two consecutive characters

Suppose W = CX

A = W.charCodeAt(0); A = 67

B = W.charCodeat(1); B = 88

Number = 100*A + B;

Number = 6700 + 88 = 6788

<HTML>

<HEAD>

<TITLE>Stage One of Encrypt</TITLE>

var W, i;

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

document.writeln("<H1>The word is " + W + "<BR>");

document.writeln("Its original numerical representation is ");

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

{ A = W.charCodeAt(i) ;

B = W.charCodeAt(i+1) ;

Number = 100*A + B;

document.writeln(Number); }

</SCRIPT>

</HEAD>

</BODY>

</HTML>

Encrypt1.html

Outline of Chapter 12

JavaScript/JScript: Arrays

Introduction

Arrays

Declaring and Allocating Arrays

Examples Using Arrays

Initializing

Sum elements of an array

Frequency table and histogram

References and Reference Parameters

Passing Arrays to Functions

Sorting Arrays

Searching Arrays: Linear Search and Binary Search

Multiple-Subscripted Arrays

Searching An Array

TheArray is an array of items (e.g. names of students) with NumElements elements

Example TheArray = new Array ( "Andrew", "Annalise", "Beth", "Bob", "Brendan", "Casey", "CharlesM", "CharlesR", "Colin", "DavidM", "DavidR", "DavidS", "Eliza", "John", "Jordan", "Kate", "Kennan", "Liz", "Louisa", "Matt", "Megan", "Missy", "Nathaniel", "Rada", "Rebecca", "RyanB", "RyanP", "Ted", "Tejas", "Trevor", "Tyler", "Veljko" )

NumElements = 32

Given: a Target item.

Problem: Determine if Target is an item in TheArray and if so, where is it located.

Example Target = window.prompt("Enter Student Name", "");

Search Strategies

1) Random Search

Generate an index i at random and ask if Target = TheArray[i]?

while ( Target != TheArray[i] )

What Problems are associated with this approach?

We may test the same i several times.

There may be some i's we never test.

The loop may never terminate

What we desire in a Search Strategy:

Efficient

Thorough

Ultimately Ends

2) Linear Search

Verbal Description:

Compare Target with first element in the array

If identical, stop.

Otherwise move to the next element

Repeat

PseudoCode: Initialize( current index = 0)

while (target not found) AND (elements yet to test)

if ( current element is Target) stop

else increase current index by 1

JavaScript:

i = 0;

found = false;

while ( (found == false) && (i < NumElements) )

{ if (TheArray[i] == target)

{ document.writeln("Target occurs at " +i); found = true;

}

i = i+1;

}

if (found == false)

document.writeln("Target is not in the array");

Aspects of Linear Search

Thorough: Tests TheArray systematically

Terminates Eventually

Will find Target if it is there.

Efficient?

Suppose there are n elements

Best Case: 1 test

Worst Case: n tests

Average Case: n/2 tests

If we double the number of entries, we double the expected number of tests.

The expected number of steps the loop will execute is proportional to the number of elements in the array.

3) Binary Search (if array is sorted)

Verbal Description:

Is Target >= Middle Element of current List?

If "Yes" then throw away bottom half of list

If "No" then throw away top half of list

Repeat until list has one element.

Is Target = remaining element?

Linear Search: After each comparison, we eliminate 1 possible element from the array.

The "search space" has shrunk by 1 element.

Binary Search: After each comparaion, we eliminate half of the remaining possibilities.

The "search space" has been cut in half.

Step 1

Andrew Colin Kennan Rebecca

Annalise DavidM Liz RyanB

Beth DavidR Louisa RyanP

Bob DavidS Matt Ted

Brendan Eliza Megan Tejas

Casey John Missy Trevor

CharlesM Jordan Nathaniel Tyler

CharlesR Kate Rada Veljko

Step 2

Andrew Colin Kennan Rebecca

Annalise DavidM Liz RyanB

Beth DavidR Louisa RyanP

Bob DavidS Matt Ted

Brendan Eliza Megan Tejas

Casey John Missy Trevor

CharlesM Jordan Nathaniel Tyler

CharlesR Kate Rada Veljko

Step 3

Andrew Colin Kennan Rebecca

Annalise DavidM Liz RyanB

Beth DavidR Louisa RyanP

Bob DavidS Matt Ted

Brendan Eliza Megan Tejas

Casey John Missy Trevor

CharlesM Jordan Nathaniel Tyler

CharlesR Kate Rada Veljko

Step 4

Andrew Colin Kennan Rebecca

Annalise DavidM Liz RyanB

Beth DavidR Louisa RyanP

Bob DavidS Matt Ted

Brendan Eliza Megan Tejas

Casey John Missy Trevor

CharlesM Jordan Nathaniel Tyler

CharlesR Kate Rada Veljko

Step 5

Andrew Colin Kennan Rebecca

Annalise DavidM Liz RyanB

Beth DavidR Louisa RyanP

Bob DavidS Matt Ted

Brendan Eliza Megan Tejas

Casey John Missy Trevor

CharlesM Jordan Nathaniel Tyler

CharlesR Kate Rada Veljko

Step 6

Andrew Colin Kennan Rebecca

Annalise DavidM Liz RyanB

Beth DavidR Louisa RyanP

Bob DavidS Matt Ted

Brendan Eliza Megan Tejas

Casey John Missy Trevor

CharlesM Jordan Nathaniel Tyler

CharlesR Kate Rada Veljko

Example: Is Homer in the List?

List is:

1) Andrew 9) Colin 17) Kennan 25) Rebecca

2) Annalise 10) DavidM 18) Liz 26) RyanB

3) Beth 11) DavidR 19) Louisa 27) RyanP

4) Bob 12) DavidS 20) Matt 28) Ted

5) Brendan 13) Eliza 21) Megan 29) Tejas

6) Casey 14) John 22) Missy 30) Trevor

7) CharlesM 15) Jordan 23) Nathaniel 31) Tyler

8) CharlesR 16) Kate 24) Rada 32) Veljko

Step 1: Could Target be in second half of the list?

Is Homer >= Name[17]?

Is Homer >= Kennan?

List is:

1) Andrew 9) Colin

2) Annalise 10) DavidM

3) Beth 11) DavidR

4) Bob 12) DavidS

5) Brendan 13) Eliza

6) Casey 14) John

7) CharlesM 15) Jordan

8) CharlesR 16) Kate

Step 2: Could Target be in second half of the list?

Is Homer >= Name[9]?

Is Homer >= Colin?

Yes

List is:

9) Colin

10) DavidM

11) DavidR

12) DavidS

13) Eliza

14) John

15) Jordan

16) Kate

Step 3: Could Target be in second half of the list?

Is Homer >= Name[13]?

Is Homer >= Eliza?

Yes

List is:

13) Eliza

14) John

15) Jordan

16) Kate

Step 4: Could Target be in second half of the list?

Is Homer >= Name[15]?

Is Homer >= Jordan?

List is:

13) Eliza

14) John

Step 5: Could Target be in second half of the list?

Is Homer >= Name[14]?

Is Homer >= John?

List is:

13) Eliza

Step 6: Is Target the remaining element?

Is Homer = Name[13]?

Is Homer = Eliza?

Example: Is Ted in the List?

Step 1: Could Target be in second half of the list?

Is Ted >= Name[17]?

Is Ted >= Kennan?

Yes

List is:

17) Kennan 25) Rebecca

18) Liz 26) RyanB

19) Louisa 27) RyanP

20) Matt 28) Ted

21) Megan 29) Tejas

22) Missy 30) Trevor

23) Nathaniel 31) Tyler

24) Rada 32) Veljko

Step 2: Could Target be in second half of the list?

Is Ted >= Name[25]?

Is Ted >= Rebecca?

Yes

List is:

25) Rebecca

26) RyanB

27) RyanP

28) Ted

29) Tejas

30) Trevor

31) Tyler

32) Veljko

Step 3: Could Target be in second half of the list?

Is Ted >= Name[29]?

Is Ted >= Tejas?

List is:

25) Rebecca

26) RyanB

27) RyanP

28) Ted

Step 4: Could Target be in second half of the list?

Is Ted >= Name[27]?

Is Ted >= RyanP?

Yes

List is:

27) RyanP

28) Ted

Step 5: Could Target be in second half of the list?

Is Ted >= Name[27]?

Is Ted >= Ted?

List is:

28) Ted

Step 6: Is Target the remaining element?

Is Ted = Name[28]?

Is Ted = Ted?

Does Binary Search Work?

Is it Efficient?

If it takes 6 steps to search a list of

32 names, how many steps does it take to search a list of 64 names?

Each doubling of the list size only increases the number of comparisons by 1.

With n comparisons, we can search an ordered list of 2^n elements.

Array size Number of steps

1000 10

1,000,000 20

1,000,000,000 30

Multiple-Subscripted Arrays

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

Charles M 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

Array of 32 students

Each student is represented by an array of 11 elements

An Array of Arrays

<HTML>

<HEAD>

<TITLE>Presidents</TITLE>

var President = new Array(5);

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

President[i] = new Array(3);

President[0] [0] = "Name"

President[0] [1] = "Home State"

President[0] [2] = "Year Elected"

President[1] [0] = "Ronald Reagan"

President[1] [1] = "California"

President[1] [2] = "1980, 1988"

President[2] [0] = "George Bush"

President[2] [1] = "Maine"

President[2] [2] = "1988"

President[3] [0] = "Bill Clinton"

President[3] [1] = "Arkansas"

President[3] [2] = "1992, 1996"

President[4] [0] = "George W. Bush"

President[4] [1] = "Texas"

President[4] [2] = "2000"

document.writeln("<TABLE BORDER = '2' WIDTH = '100%' > ") ;

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

{ for (j=0; j<=2; j=j+1)

document.writeln("<TD><H1>" + President[i][j] + "</TD>");

document.writeln("<TR>");

}

document.writeln(" </TABLE> ");

</SCRIPT>

</HEAD>

</BODY>

</HTML>

Presidents.html

Andrew	Colin	Kennan	Rebecca
Annalise	DavidM	Liz	RyanB
Beth	DavidR	Louisa	RyanP
Bob	DavidS	Matt	Ted
Brendan	Eliza	Megan	Tejas
Casey	John	Missy	Trevor
CharlesM	Jordan	Nathaniel	Tyler
CharlesR	Kate	Rada	Veljko

1) Andrew	9) Colin	17) Kennan	25) Rebecca
2) Annalise	10) DavidM	18) Liz	26) RyanB
3) Beth	11) DavidR	19) Louisa	27) RyanP
4) Bob	12) DavidS	20) Matt	28) Ted
5) Brendan	13) Eliza	21) Megan	29) Tejas
6) Casey	14) John	22) Missy	30) Trevor
7) CharlesM	15) Jordan	23) Nathaniel	31) Tyler
8) CharlesR	16) Kate	24) Rada	32) Veljko

*Array size*	*Number of steps*
1000	10
1,000,000	20
1,000,000,000	30