introducing arrays

Copyright Copyright ©2005 ©2005 Department of Computer & Information ScienceDepartment of Computer & Information Science

Introducing ArraysIntroducing Arrays


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.


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 …


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.


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


An Array in MemoryAn Array in Memory

strWebPrgStudentsstrWebPrgStudents


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]);


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.


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.


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]


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 …


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();


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);


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");


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";


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]);


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;


Take the next few minutes to examine the file called introArrays_01.html.


Take the next few minutes to examine the file called introArrays_02.html.


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 …


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.

introducing arrays

Documents