Document Sample
Functions Powered By Docstoc

          See Beginning JavaScript pp. 51-57

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);
  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”
CSD 340 (Blum)                                      6
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)                                     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”
  then “magenta”.
• We can solve this issue just by introducing
  another array.

CSD 340 (Blum)                                  11
Declare, instantiate and initialize a
ColorNames1 array

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
  better code.
• 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
• Beginning JavaScript (Paul Wilton)

CSD 340 (Blum)                         26

Shared By: