1. CSCI N201: Programming Concepts Copyright ©2005  Department of Computer & Information Science Using Arrays in JavaScript

2. CSCI N201: Programming Concepts Copyright ©2004  Department of Computer & Information Science Goals By the end of this lecture you should understand … … how to dimension an array in JavaScript.… how to dimension an array in JavaScript. … how to declare an empty array in JavaScript.… how to declare an empty array in JavaScript. … how to add values to an array.… how to add values to an array. … how to use parallel arrays.… how to use parallel arrays.

3. CSCI N201: Programming Concepts Copyright ©2004  Department of Computer & Information Science What is an Array? An array is a data structure that can hold multiple values (unlike a variable, which can only hold 1 value at a time).An array is a data structure that can hold multiple values (unlike a variable, which can only hold 1 value at a time). An array is useful when we work with groups of form objects, like radio buttonsAn array is useful when we work with groups of form objects, like radio buttons

4. CSCI N201: Programming Concepts Copyright ©2004  Department of Computer & Information Science Arrays and Memory In a computer’s memory, an array represents multiple contiguous locations that all contain the values of the same data type.In a computer’s memory, an array represents multiple contiguous locations that all contain the values of the same data type. We represent each “slot” in an array with a number:We represent each “slot” in an array with a number: –Numbers start at zero. –An element’s position (represented by a number) is called an index (or subscript)

5. CSCI N201: Programming Concepts Copyright ©2004  Department of Computer & Information Science Why use Arrays? Use an array when you need to group values by some common characteristic (e.g. – Students in a classroom).Use an array when you need to group values by some common characteristic (e.g. – Students in a classroom). When designing an application that performs the same processing for multiple sets of data, use an array and a looping structure.When designing an application that performs the same processing for multiple sets of data, use an array and a looping structure.

6. CSCI N201: Programming Concepts Copyright ©2004  Department of Computer & Information Science Conceptual Example of Arrays 0John 1Mary 2Elizabeth 3Omar 4Charles 5Ravi 6Katherine 7Hannah 8Alexander 9William Array Positions (Elements) – Each number represents the subscript (index) of its corresponding position Array Values – The value stored in contiguous memory cells Array Name = Class

7. CSCI N201: Programming Concepts Copyright ©2004  Department of Computer & Information Science Array Elements Elements populate an array.Elements populate an array. Each element is a discrete value.Each element is a discrete value. We identify elements using a unique index (the element’s “address”).We identify elements using a unique index (the element’s “address”). Array index numbering starts with zero and increments by one for each new element.Array index numbering starts with zero and increments by one for each new element.

8. CSCI N201: Programming Concepts Copyright ©2004  Department of Computer & Information Science Declaring an Array To declare an array in JavaScript, we use the array constructor and assign the array to a variable. We give the constructor the size of the array as an argument: var n201Class = new Array(34);To declare an array in JavaScript, we use the array constructor and assign the array to a variable. We give the constructor the size of the array as an argument: var n201Class = new Array(34); At times, we may not know the size of the array when declaring. In such situations, we can declare an empty array: var n201Class = new Array();At times, we may not know the size of the array when declaring. In such situations, we can declare an empty array: var n201Class = new Array();

9. CSCI N201: Programming Concepts Copyright ©2004  Department of Computer & Information Science Adding Values to an Array To add values to an array, assign the new values while also identifying the index where you want JavaScript to store the new value:To add values to an array, assign the new values while also identifying the index where you want JavaScript to store the new value: n201Class[0] = “Jennifer”; n201Class[1] = “Joseph”; n201Class[2] = “Marcus”; n201Class[3] = “Alex”;

10. CSCI N201: Programming Concepts Copyright ©2004  Department of Computer & Information Science Using a For Loop to Add Values In some instances, we can use a for loop to add values: for(var i=0; i<10; i++) { var newStudent = new String(“”); newStudent = “Student”; newStudent = i.toString(); n201Class[i] = newStudent; }In some instances, we can use a for loop to add values: for(var i=0; i<10; i++) { var newStudent = new String(“”); newStudent = “Student”; newStudent = i.toString(); n201Class[i] = newStudent; }

11. CSCI N201: Programming Concepts Copyright ©2004  Department of Computer & Information Science Parallel (Corresponding) Arrays Parallel arrays gives you the ability to store multiple pieces of information about a single entity in an application.Parallel arrays gives you the ability to store multiple pieces of information about a single entity in an application. The indexes of each array should correspond to one another for individual entities:The indexes of each array should correspond to one another for individual entities: –Student ID –Student Name –Student Exam Score

12. CSCI N201: Programming Concepts Copyright ©2004  Department of Computer & Information Science Conceptual Example of Parallel Arrays 0047254 1038546 2024136 3057866 4015543 5025769 6025119 7035176 8036585 9028116 Array Name = strSID0John1Mary 2Elizabeth 3Omar 4Charles 5Ravi 6Katherine 7Hannah 8Alexander 9William093186 274 392 456 582 689 782 875 977 Array Name = strn201Class Array Name = fltExam1Scores

13. CSCI N201: Programming Concepts Copyright ©2004  Department of Computer & Information Science Creating Parallel Arrays To create parallel arrays, just create them as you would any other array: var SID = new Array(); var n201Class = new Array(); var examScr = new Array();To create parallel arrays, just create them as you would any other array: var SID = new Array(); var n201Class = new Array(); var examScr = new Array(); The arrays are separate arrays in memory, but your program should treat them as one …The arrays are separate arrays in memory, but your program should treat them as one …

14. CSCI N201: Programming Concepts Copyright ©2004  Department of Computer & Information Science Assigning Values to Parallel Arrays To assign values for a single entity to parallel arrays, use the same index number for each assignment: SID[5] = “025769”; n201Class[5] = “Ravi”; examScr[5] = 82;To assign values for a single entity to parallel arrays, use the same index number for each assignment: SID[5] = “025769”; n201Class[5] = “Ravi”; examScr[5] = 82;

15. CSCI N201: Programming Concepts Copyright ©2004  Department of Computer & Information Science The Array.length Property Just like any JavaScript objects, arrays have properties.Just like any JavaScript objects, arrays have properties. One of the most useful properties is the length property, which will give you a count of how many indexes the array has.One of the most useful properties is the length property, which will give you a count of how many indexes the array has.

16. CSCI N201: Programming Concepts Copyright ©2004  Department of Computer & Information Science The Array.length Property Example of the Array.length property: var golfScores = new Array(); var golfScrSize = 0; golfScores[0] = 72; golfScores[1] = 85; golfScores[2] = 125; //golfScrSize will get the //value of 3 golfScrSize = golfScores.length;Example of the Array.length property: var golfScores = new Array(); var golfScrSize = 0; golfScores[0] = 72; golfScores[1] = 85; golfScores[2] = 125; //golfScrSize will get the //value of 3 golfScrSize = golfScores.length;

17. CSCI N201: Programming Concepts Copyright ©2004  Department of Computer & Information Science Using Array.length The following code averages the values stored in an array for(var i=0; i<golfScores.length; i++) { sumScores += golfScores[i] } avgScore = sumScores/golfScores.length;The following code averages the values stored in an array for(var i=0; i<golfScores.length; i++) { sumScores += golfScores[i] } avgScore = sumScores/golfScores.length;

18. CSCI N201: Programming Concepts Copyright ©2004  Department of Computer & Information Science Array Examples Single Array Parallel Arrays

19. CSCI N201: Programming Concepts Copyright ©2004  Department of Computer & Information Science Questions?