CSD 340 (Blum) 1
Color Converter with Arrays (Code 1)
CSD 340 (Blum) 2
Color Converter with Arrays (Code 2)
CSD 340 (Blum) 3
Color Converter with Arrays (Code 3)
CSD 340 (Blum) 4
Color Converter with Arrays (Code 4)
CSD 340 (Blum) 5
var InputColor = new Array(3);
//declare and "instantiate" array of "length" 3
var OutputColor = new Array(3);
• 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”
CSD 340 (Blum) 6
• 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) 7
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) 8
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) 9
CSD 340 (Blum) 10
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”
• We can solve this issue just by introducing
CSD 340 (Blum) 11
Declare, instantiate and initialize a
CSD 340 (Blum) 12
Edit prompt to utilize ColorName1 array
CSD 340 (Blum) 13
CSD 340 (Blum) 14
Code to list the state capitals
CSD 340 (Blum) 15
Result: State Capitals Listed
CSD 340 (Blum) 16
Give capital of state user enters (code 1)
CSD 340 (Blum) 17
Give capital of state user enters (code 2)
CSD 340 (Blum) 18
CSD 340 (Blum) 19
for(i=0; i<50; i++)
if(State[i]==StateSought) //that’s two equals
• Loops through array of states asking if the element
is equal to the stateSought variable entered by the
• 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) 20
A possible improvement: user can be
careless about capitalization
CSD 340 (Blum) 21
What if Puerto Rico were to become a
• 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
• Code which minimizes the number of changes we must
make when we change things like array sizes is said “to
• Good code scales.
CSD 340 (Blum) 22
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) 23
Alphabetizing (sorting) the capitals
The sort() method comes for free.
CSD 340 (Blum) 24
Result of alphabetizing capitals
Caution: we have now lost the
correspondence between that states
and the capitals.
CSD 340 (Blum) 25
CSD 340 (Blum) 26