csd 340 (blum)1 arrays see beginning javascript pp. 51-57

CSD 340 (Blum) 1

Arrays

See Beginning JavaScript pp. 51-57

CSD 340 (Blum) 2

Color Converter with Arrays (Code 1)

CSD 340 (Blum) 3


CSD 340 (Blum) 4


CSD 340 (Blum) 5


CSD 340 (Blum) 6

var InputColor = new Array(3); //declare and "instantiate" array of "length" 3

var OutputColor = new Array(3);

var i;

var ColorCode="#";• Recall that regular variables like i and ColorCode

have to be declared (using the keyword “var”) and possibly initialized (you might set them equal to something right away as with ColorCode).

• Arrays additionally need to be “instantiated.” Hence the appearance of the keyword “new” above.

CSD 340 (Blum) 7

Some vocabulary

• When you “instantiate” it means that there is a pre-existing template for the thing you are making known as a “class.”

• You use the template to make your thing which is called an “object.”

• Free stuff: the class will typically have various “properties” and “methods” that you can use and you do not have to code yourself.

CSD 340 (Blum) 8

Arrays in loops

• Because the code for each color is essentially the same, we can place it inside a loop to achieve this repetition.

• Each individual element of the array is referred to by using the name of the array and an index.

• Indices start at zero. Get used to it!

CSD 340 (Blum) 9

for(i=0; i<3; i++){

InputColor[i] = prompt("Enter the CMY Value #” + (i+1) + " as a percentage","50");

//have user enter each value

• The loop counter starts at zero because it will also be used as the array index – and array indices start at zero (get used to it!).

• The user is prompted to enter the ith element of the array. Then the calculation proceeds in the same manner as the old homework – each element is converted from CMY to RGB, then the RGB is put into hexadecimal and concatenated to the ColorCode variable.

CSD 340 (Blum) 10

CSD 340 (Blum) 11

CMY Value #1 (Yuk)

• Our prompts refer to CMY value numbers, whereas in the pre-array version we had three distinct prompts and so could explicitly ask for “cyan”, then “yellow” then “magenta”.

• We can solve this issue just by introducing another array.

CSD 340 (Blum) 12

Declare, instantiate and initialize a ColorNames1 array

CSD 340 (Blum) 13

Edit prompt to utilize ColorName1 array

CSD 340 (Blum) 14

CSD 340 (Blum) 15

Code to list the state capitals

CSD 340 (Blum) 16

Result: State Capitals Listed

CSD 340 (Blum) 17

Give capital of state user enters (code 1)

CSD 340 (Blum) 18

Give capital of state user enters (code 2)

CSD 340 (Blum) 19

CSD 340 (Blum) 20

for(i=0; i<50; i++){

if(State[i]==StateSought) //that’s two equals {

SearchIndex=i;}

}

• Loops through array of states asking if the element is equal to the stateSought variable entered by the user.

• This is called a “linear search.” Because the states are “sorted” (in alphabetical order), we could perform a much more efficient search known as a “binary search.”

CSD 340 (Blum) 21

A possible improvement: user can be careless about capitalization

CSD 340 (Blum) 22

What if Puerto Rico were to become a state?

• We would have to add an element to the State array. • We would have to add an element to the Capital array. • And we would have to change the 50 in the loop to 51. • While this isn’t many, we can do better if we write

better code. • Code which minimizes the number of changes we must

make when we change things like array sizes is said “to scale.”

• Good code scales.

CSD 340 (Blum) 23

Using the length property of the array to make the code scale

Now if we add a state, the loop portion of the code does not have to be changed. Our code scales! The length is one of those properties of the array class that comes for free when we instantiate an array object.

CSD 340 (Blum) 24

Alphabetizing (sorting) the capitals

The sort() method comes for free.

CSD 340 (Blum) 25

Result of alphabetizing capitals

Caution: we have now lost the correspondence between that states and the capitals.

CSD 340 (Blum) 26

References

• Beginning JavaScript (Paul Wilton)

csd 340 (blum)1 arrays see beginning javascript pp. 51-57

Documents