Arrays

1. Arrays See Beginning JavaScript pp. 51-57

2. Color Converter with Arrays (Code 1)

3. Color Converter with Arrays (Code 2)

4. Color Converter with Arrays (Code 3)

5. Color Converter with Arrays (Code 4)

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.

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.

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!

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.

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.

12. Declare, instantiate and initialize a ColorNames1 array

13. Edit prompt to utilize ColorName1 array

15. Code to list the state capitals

16. Result: State Capitals Listed

17. Give capital of state user enters (code 1)

18. Give capital of state user enters (code 2)

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.”

21. A possible improvement: user can be careless about capitalization

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.

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.

24. Alphabetizing (sorting) the capitals The sort() method comes for free.

25. Result of alphabetizing capitals Caution: we have now lost the correspondence between that states and the capitals.

26. References • Beginning JavaScript (Paul Wilton)