introducing arrays
DESCRIPTION
Introducing Arrays. Goals. By the end of this lecture you should … Understand when you would program an array. Understand how to add values to array elements. Understand how to use array subscripts. Understand how to work with arrays in JavaScript. Too Many Variables?. - PowerPoint PPT PresentationTRANSCRIPT
Copyright Copyright ©2005 ©2005 Department of Computer & Information ScienceDepartment of Computer & Information Science
Introducing ArraysIntroducing Arrays
Copyright Copyright ©2005 ©2005 Department of Computer & Information ScienceDepartment of Computer & Information Science
GoalsGoals
By the end of this lecture you should …By the end of this lecture you should …• Understand when you would program Understand when you would program
an array.an array.• Understand how to add values to array Understand how to add values to array
elements.elements.• Understand how to use array Understand how to use array
subscripts.subscripts.• Understand how to work with arrays in Understand how to work with arrays in
JavaScript.JavaScript.
Copyright Copyright ©2005 ©2005 Department of Computer & Information ScienceDepartment of Computer & Information Science
Too Many Variables?Too Many Variables?
• Remember, a Remember, a variablevariable is a data is a data structure that can hold a structure that can hold a single single valuevalue at any given time. at any given time.
• What if I want to create an What if I want to create an application to track student application to track student progress in a class with 50 progress in a class with 50 students? Creating 50 variables will students? Creating 50 variables will prove inefficient …prove inefficient …
Copyright Copyright ©2005 ©2005 Department of Computer & Information ScienceDepartment of Computer & Information Science
Introducing ArraysIntroducing Arrays
• An An arrayarray might prove a better might prove a better solution to my problem!solution to my problem!
• An An arrayarray is a data structure that is a data structure that contains related items that are of the contains related items that are of the same data type and where each item same data type and where each item in the array shares the same name. in the array shares the same name.
• In memory, array values occupy In memory, array values occupy contiguous contiguous locations.locations.
Copyright Copyright ©2005 ©2005 Department of Computer & Information ScienceDepartment of Computer & Information Science
Multiple Variables in Multiple Variables in MemoryMemory
strStu1
strStu1
strStu2
strStu2
strStu3
strStu3
strStu4
strStu4
strStu5
strStu5
strStu6
strStu6
strStu7
strStu7
strStu8
strStu8
strStu9
strStu9
strStu10
strStu10
strStu11
strStu11
strStu12
strStu12
Copyright Copyright ©2005 ©2005 Department of Computer & Information ScienceDepartment of Computer & Information Science
An Array in MemoryAn Array in Memory
strWebPrgStudentsstrWebPrgStudents
Copyright Copyright ©2005 ©2005 Department of Computer & Information ScienceDepartment of Computer & Information Science
Array Elements & SubscriptsArray Elements & Subscripts
• An An elementelement is a value stored in an is a value stored in an array. JavaScript stores each element array. JavaScript stores each element in a different position in an array. in a different position in an array.
• We reference a position using a We reference a position using a subscriptsubscript (a.k.a. (a.k.a. indexindex). ).
• To reference an element, we need to To reference an element, we need to provide the array's name and the provide the array's name and the element's subscript:element's subscript:window.alert(strNames[4]);window.alert(strNames[4]);
Copyright Copyright ©2005 ©2005 Department of Computer & Information ScienceDepartment of Computer & Information Science
Index OrderIndex Order
• We number We number subscriptssubscripts starting with starting with the number zero (0). We increment the number zero (0). We increment by 1 for each subsequent index.by 1 for each subsequent index.
• The array’s The array’s lengthlength refers to the total refers to the total number of indexes used in an array. number of indexes used in an array. The length is always one more than The length is always one more than the last index number. Conversely, the last index number. Conversely, the last index number is always one the last index number is always one less than the array’s length.less than the array’s length.
Copyright Copyright ©2005 ©2005 Department of Computer & Information ScienceDepartment of Computer & Information Science
One-Dimensional ArraysOne-Dimensional Arrays
•A one-dimensional array is a A one-dimensional array is a single list of elements subscripts.single list of elements subscripts.
•Think of a seating chart an Think of a seating chart an elementary school teacher might elementary school teacher might use. A single row of students is use. A single row of students is like a one-dimensional array.like a one-dimensional array.
Copyright Copyright ©2005 ©2005 Department of Computer & Information ScienceDepartment of Computer & Information Science
Example of a 1D ArrayExample of a 1D Array
JanieJanie
Bobby
Bobby
SallySally
JoeyJoey
MaryMary44
33
22
11
00
RowARowA
Mary is Mary is located in located in RowA[4]RowA[4]
Mary is Mary is located in located in RowA[4]RowA[4]
Copyright Copyright ©2005 ©2005 Department of Computer & Information ScienceDepartment of Computer & Information Science
The Array ConstructorThe Array Constructor
• To create an array in JavaScript, To create an array in JavaScript, we use the we use the Array Array constructor constructor method.method.
• The The ArrayArray constructor method constructor method provides us three distinct ways provides us three distinct ways to create an array …to create an array …
Copyright Copyright ©2005 ©2005 Department of Computer & Information ScienceDepartment of Computer & Information Science
Creating an Empty ArrayCreating an Empty Array
• We can use the Array constructor We can use the Array constructor to create an empty array, with to create an empty array, with no elements (we can add them no elements (we can add them later):later):var strStudents = new Array();var strStudents = new Array();
Copyright Copyright ©2005 ©2005 Department of Computer & Information ScienceDepartment of Computer & Information Science
Dimensioning an ArrayDimensioning an Array
• We can use the We can use the ArrayArray constructor to create an array of constructor to create an array of a specific size by supplying the a specific size by supplying the ArrayArray constructor with an constructor with an integer value representing an integer value representing an array's length:array's length:var strStudents = new Array(9);var strStudents = new Array(9);
Copyright Copyright ©2005 ©2005 Department of Computer & Information ScienceDepartment of Computer & Information Science
Creating an Array Creating an Array with Specific Valueswith Specific Values
• We can supply the We can supply the ArrayArray constructor with specific values constructor with specific values in a comma-delimited list:in a comma-delimited list:var strStudents = var strStudents = new Array("James","Ravi","Mary,new Array("James","Ravi","Mary,"Jackson","Alyssa","Alexei");"Jackson","Alyssa","Alexei");
Copyright Copyright ©2005 ©2005 Department of Computer & Information ScienceDepartment of Computer & Information Science
Assigning Values to an Assigning Values to an ArrayArray
• To assign a value to an array, To assign a value to an array, you need to call the array by its you need to call the array by its name and then provide a name and then provide a subscript to store the new value subscript to store the new value (the index number goes in a pair (the index number goes in a pair of square brackets):of square brackets):strStudents[4] = "Jakob";strStudents[4] = "Jakob";
Copyright Copyright ©2005 ©2005 Department of Computer & Information ScienceDepartment of Computer & Information Science
Reading Array ValuesReading Array Values
• To read a value from an array, To read a value from an array, call the array by name and call the array by name and indicate which subscript you indicate which subscript you want to retrieve (the index want to retrieve (the index number goes in a pair of square number goes in a pair of square brackets): brackets): window.alert(strStudents[17]);window.alert(strStudents[17]);
Copyright Copyright ©2005 ©2005 Department of Computer & Information ScienceDepartment of Computer & Information Science
The The array.length array.length AttributeAttribute
• We can find how many elements We can find how many elements an array has by using the an array has by using the array.length attribute. array.length attribute. array.length returns an integer array.length returns an integer value:value:intSum = strStudents.length;intSum = strStudents.length;
Copyright Copyright ©2005 ©2005 Department of Computer & Information ScienceDepartment of Computer & Information Science
Take the next few minutes to examine the file called introArrays_01.html.
Copyright Copyright ©2005 ©2005 Department of Computer & Information ScienceDepartment of Computer & Information Science
Take the next few minutes to examine the file called introArrays_02.html.
Copyright Copyright ©2005 ©2005 Department of Computer & Information ScienceDepartment of Computer & Information Science
SummarySummary
• Arrays are data structures that Arrays are data structures that can hold multiple values at the can hold multiple values at the same time.same time.
• The values in an array are called The values in an array are called elements and they share the elements and they share the same name (the array's name).same name (the array's name).
continued …continued …
Copyright Copyright ©2005 ©2005 Department of Computer & Information ScienceDepartment of Computer & Information Science
SummarySummary
• We indicate position in an array We indicate position in an array using a subscript. Subscript using a subscript. Subscript numbering begins with zero.numbering begins with zero.
• In JavaScript, we can create In JavaScript, we can create arrays using the arrays using the Array Array constructor.constructor.
• The The Array.lengthArray.length attribute attribute returns the size of an array.returns the size of an array.