Java Script: Arrays (Chapter 11 in [2]). 2 Outline Introduction Introduction Arrays Arrays Declaring...

Java Script: Java Script: ArraysArrays

(Chapter 11 in [2])(Chapter 11 in [2])

2

OutlineOutline IntroductionIntroduction ArraysArrays Declaring and Allocating ArraysDeclaring and Allocating Arrays References and Reference ParametersReferences and Reference Parameters Passing Arrays to FunctionsPassing Arrays to Functions Sorting ArraysSorting Arrays Multidimensional ArraysMultidimensional Arrays Building an Online QuizBuilding an Online Quiz Web ResourcesWeb Resources

3

ObjectivesObjectives In this tutorial, you will learn:In this tutorial, you will learn:

To introduce the array data To introduce the array data structure.structure.

To understand the use of arrays to To understand the use of arrays to store, sort and search lists and tables store, sort and search lists and tables of values. of values.

To understand how to declare an To understand how to declare an array, initialize an array and refer to array, initialize an array and refer to individual elements of an array.individual elements of an array.

To be able to pass arrays to To be able to pass arrays to functions.functions.

To be able to search and sort an To be able to search and sort an array.array.

To be able to declare and manipulate To be able to declare and manipulate multi-dimensional arrays.multi-dimensional arrays.

4

IntroductionIntroduction

ArraysArrays Data structures of related itemsData structures of related items

Also called CollectionsAlso called Collections DynamicDynamic

5

ArraysArrays

Arrays in JavaScriptArrays in JavaScript Each element referenced by a numberEach element referenced by a number

Start at Start at ““zeroth elementzeroth element”” Subscript or indexSubscript or index

Accessing a specific elementAccessing a specific element Name of arrayName of array BracketsBrackets Number of elementNumber of element

Arrays know their lengthArrays know their length lengthlength property property

6

ArraysArrays

c[ 6 ]

-45

6

0

72

1543

-89

0

62

-3

1

6453

78

Name of array c[ 0 ]

c[ 1 ]

c[ 2 ]

c[ 3 ]

c[ 11 ]

c[ 10 ]

c[ 9 ]

c[ 8 ]

c[ 7 ]

c[ 5 ]

c[ 4 ]

Position number (index or subscript) of the element within array c

Fig. 11.1Fig. 11.1 A 12-element array.A 12-element array.

7

ArraysArrays

Operators Associativity Type () [] . left to right highest ++ -- ! right to left unary * / % left to right multiplicative + - left to right additive < <= > >= left to right relational == != left to right equality && left to right logical AND | | left to right logical OR ?: right to left conditional = += -= *= / = %= right to left assignment Fig. 11.2 Precedence and associativity of the operators discussed so far.

8

Declaring and Allocating Declaring and Allocating ArraysArrays

Arrays in memoryArrays in memory ObjectsObjects Operator Operator newnew

Allocates memory for objectsAllocates memory for objects Dynamic memory allocation operatorDynamic memory allocation operator

var c;var c;c = new Array( 12 );c = new Array( 12 );

9

Examples Using ArraysExamples Using Arrays

Arrays grow dynamicallyArrays grow dynamically Allocate more space as items are addedAllocate more space as items are added

Must initialize array elementsMust initialize array elements Default value is undefinedDefault value is undefined forfor loops convenient loops convenient Referring to uninitialized elements or Referring to uninitialized elements or

elements outside array bounds is an elements outside array bounds is an errorerror

1 <?xml version = "1.0"?>

2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

4

5 

6 

7

8 <html xmlns = "http://www.w3.org/1999/xhtml">

9 <head>

10 <title>Initializing an Array</title>

11

12 <script type = "text/javascript">

13 

52 </script>

53

54 </head><body onload = "initializeArrays()"></body>

55 </html>

13


Fig. 11.3 Initializing the elements of Fig. 11.3 Initializing the elements of an array.an array.

14


Possible to declare and initialize in one Possible to declare and initialize in one stepstep Specify list of valuesSpecify list of values

Initializer listInitializer list

var n = [ 10, 20, 30, 40, 50 ];var n = [ 10, 20, 30, 40, 50 ];var n = new Array( 10, 20, 30, 40, 50 );var n = new Array( 10, 20, 30, 40, 50 );

Also possible to only initialize some valuesAlso possible to only initialize some values Leave uninitialized elements blankLeave uninitialized elements blank Uninitialized elements default to “undefined”Uninitialized elements default to “undefined”

var n = [ 10, 20, , 40, 50 ];var n = [ 10, 20, , 40, 50 ];




4

5 

6 

7


9 <head>

10 <title>Initializing an Array with a Declaration</title>

11


13 

46 </script>

47

48 </head><body onload = "start()"></body>

49 </html>

17


Fig. 11.4 Initializing the elements of an array.Fig. 11.4 Initializing the elements of an array.

18


forfor……inin statement statement Perform an action for each element in Perform an action for each element in

an arrayan array Iterates over array elementsIterates over array elements

Assigns each element to specified variable Assigns each element to specified variable one at a timeone at a time

Ignores non-existent elementsIgnores non-existent elements




4

5 

6 

7


9 <head>

10 <title>Sum the Elements of an Array</title>

11


13 

31 </script>

32


34 </html>

Variable element is assigned a subscript in the range of 0 up to, but not including, theArray.length.

21


Fig. 11.5 Calculating the sum of the elements of an array.Fig. 11.5 Calculating the sum of the elements of an array.

22


Arrays can provide shorter and Arrays can provide shorter and cleaner substitute forcleaner substitute for switchswitch statementsstatements Each element represents one caseEach element represents one case

RollDie.htmlRollDie.html(1 of 2)(1 of 2)




4

5 

6 

7


9 <head>

10 <title>Roll a Six-Sided Die 6000 Times</title>

11


13 

34 </script>

35

36 </head>

37 <body>

38 <p>Click Refresh (or Reload) to run the script again</p>

39 </body>

40 </html>

25


Fig. 11.6 Dice-rolling program using arrays instead of a switch.Fig. 11.6 Dice-rolling program using arrays instead of a switch.

26

References and References and Reference ParametersReference Parameters

Two ways to pass parametersTwo ways to pass parameters Pass-by-valuePass-by-value

Pass copy of original valuePass copy of original value Default for numbers and booleansDefault for numbers and booleans Original variable is unchangedOriginal variable is unchanged

Pass-by-referencePass-by-reference How objects are passed, like arraysHow objects are passed, like arrays Pass location in memory of valuePass location in memory of value Allows direct access to original valueAllows direct access to original value Improves performanceImproves performance

27

Passing Arrays to Passing Arrays to FunctionsFunctions

Name of array is argumentName of array is argument Not necessary to also pass size of arrayNot necessary to also pass size of array

Arrays know their sizeArrays know their size Passed by referencePassed by reference

Individual elements are passed by value if Individual elements are passed by value if numbers or booleansnumbers or booleans

Array.joinArray.join Creates string containing all array Creates string containing all array

elementselements Specify separatorSpecify separator




4

5 

6 

7


9 <head>

10 <title>Passing Arrays and Individual Array

11 Elements to Functions</title>

12


14 

60 </script>

61


63 </html>

Multiply each element in theArray by 2.

31

Passing Arrays to Passing Arrays to FunctionsFunctions

Fig. 11.8 Passing arrays and individual array elements to functions.Fig. 11.8 Passing arrays and individual array elements to functions.

32

Sorting ArraysSorting Arrays

SortingSorting Important computing taskImportant computing task

Array.sortArray.sort Defaults to string comparisonDefaults to string comparison Optional comparator functionOptional comparator function

Return negative if first argument less than Return negative if first argument less than secondsecond

Return zero if arguments equalReturn zero if arguments equal Return positive if first argument greater Return positive if first argument greater

than secondthan second

Sort.htmlSort.html(1 of 2)(1 of 2)




4

5 

6 

7


9 <head>

10 <title>Sorting an Array with Array Method sort</title>

11


13 

37 </script>

38


40 </html>

Function compareIntegers calculates the difference between the integer values of its arguments.

35

Sorting ArraysSorting Arrays

Fig. 11.9 Sorting an array with sort.Fig. 11.9 Sorting an array with sort.

36

QuestionQuestion

What is the output if the argument What is the output if the argument of of a.sort() a.sort() in line #20 is removed. in line #20 is removed.

37

Multidimensional ArraysMultidimensional Arrays

Two-dimensional arrays analogous Two-dimensional arrays analogous to tablesto tables Rows and columnsRows and columns

Specify row first, then columnSpecify row first, then column Two subscriptsTwo subscripts

38


a[ 1 ][ 0 ] a[ 1 ][ 1 ] a[ 1 ][ 2 ] a[ 1 ][ 3 ]

Row 0

Row 1

Row 2

Column 0 Column 1 Column 2 Column 3

Row subscript (or index)

Array name

Column subscript (or index)

a[ 0 ][ 0 ] a[ 0 ][ 1 ] a[ 0 ][ 2 ] a[ 0 ][ 3 ]

a[ 2 ][ 0 ] a[ 2 ][ 1 ] a[ 2 ][ 2 ] a[ 2 ][ 3 ]

Fig. 11.12Fig. 11.12 Two-dimensional array with three rows and four columns. Two-dimensional array with three rows and four columns.

39


Declaring and initializing Declaring and initializing multidimensional arraysmultidimensional arrays Group by row in square bracketsGroup by row in square brackets Treated as arrays of arraysTreated as arrays of arrays Creating array Creating array bb with one row of two with one row of two

elements and a second row of three elements and a second row of three elements:elements:var b = [ [ 1, 2 ], [ 3, 4, 5 ] ];var b = [ [ 1, 2 ], [ 3, 4, 5 ] ];

40


Also possible to use Also possible to use newnew operator operator Create array Create array bb with two rows, first with with two rows, first with

five columns and second with three:five columns and second with three:

var b;var b;

b = new Array( 2 ); b = new Array( 2 ); b[ 0 ] = new Array( 5 );b[ 0 ] = new Array( 5 );b[ 1 ] = new Array( 3 );b[ 1 ] = new Array( 3 );




4

5 

6 

7


9 <head>

10 <title>Initializing Multidimensional Arrays</title>

11


13 

41 </script>

42


44 </html>

Referencing the multidimensional array theArray.

43


Fig. 11.13 Initializing multidimensional arrays.Fig. 11.13 Initializing multidimensional arrays.

44

Building an Online QuizBuilding an Online Quiz

Radio buttonsRadio buttons Represented as an arrayRepresented as an array

Name of radio buttons is name of arrayName of radio buttons is name of array One element per buttonOne element per button

checkedchecked property is property is truetrue when selected when selected XHTML FormsXHTML Forms

Contain controls, including radio buttonsContain controls, including radio buttons actionaction property specifies what happens property specifies what happens

when submittedwhen submitted Can call JavaScript codeCan call JavaScript code

Quiz.htmlQuiz.html(1 of 2)(1 of 2)

1 <?xml version = "1.0" encoding = "utf-8"?>

2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

4

5 

6 

7


9 <head>

10 <title>Online Quiz</title>

11

12 <script type = "text/JavaScript">

13

14 function checkAnswers()

15 {

16 // determine whether the answer is correct

17 if ( myQuiz.radiobutton[ 1 ].checked )

18 document.write( "Congratulations, your answer is correct" );

19 else // if the answer is incorrect

20 document.write( "Your answer is incorrect. Please try again" );

21 }

22

23 </script>

24

25 </head>

Determining the value of property checked.

Quiz.htmlQuiz.html(2 of 2)(2 of 2)

26

27 <body>

28 <form id = "myQuiz" action = "JavaScript:checkAnswers()">

29 <p>Select the name of the tip that goes with the image shown:<br />

30 <img src="EPT.gif" width="108" height="100" alt="mystery tip"/>

31 <br />

32

33 <input type = "radio" name = "radiobutton" value = "CPE" />

34 <label>Common Programming Error</label>

35

36 <input type = "radio" name = "radiobutton" value = "EPT" />

37 <label>Error-Prevention Tip</label>

38

39 <input type = "radio" name = "radiobutton" value = "PERF" />

40 <label>Performance Tip</label>

41

42 <input type = "radio" name = "radiobutton" value = "PORT" />

43 <label>Portability Tip</label><br />

44

45 <input type = "submit" name = "submit" value = "Submit" />

46 <input type = "reset" name = "reset" value = "Reset" />

47 </p>

48 </form>

49 </body>

50 </html>

Call the checkAnswers function when the form is submitted.

47

Building an Online QuizBuilding an Online Quiz

Fig. 11.14 Online quiz graded with JavaScript.Fig. 11.14 Online quiz graded with JavaScript.

Date post:	02-Jan-2016
Category:	Documents
Upload:	octavia-imogene-norman
View:	237 times
Download:	0 times

Java Script: Arrays (Chapter 11 in [2]). 2 Outline Introduction Introduction Arrays Arrays Declaring...

Documents