web programming ch. 10
TRANSCRIPT
-
7/27/2019 Web Programming Ch. 10
1/73
JavaScript: Arrays
11992-2012 by Pearson Education, Inc. All
Rights Reserved.
-
7/27/2019 Web Programming Ch. 10
2/73
1992-2012 by Pearson Education, Inc. All
Rights Reserved. 2
-
7/27/2019 Web Programming Ch. 10
3/73
1992-2012 by Pearson Education, Inc. All
Rights Reserved. 3
-
7/27/2019 Web Programming Ch. 10
4/73
Arrays Data structures consisting of related data items
JavaScript arrays dynamic entities that can change size after they
are created
41992-2012 by Pearson Education, Inc. All
Rights Reserved.
-
7/27/2019 Web Programming Ch. 10
5/73
An array is a group of memory locations All have the same name and normally are of the
same type (although this attribute is not required inJavaScript)
Each individual location is called an element We may refer to any one of these elements by
giving the arrays name followed by theposition number of the element in square
brackets ([])
51992-2012 by Pearson Education, Inc. All
Rights Reserved.
-
7/27/2019 Web Programming Ch. 10
6/73
The first element in every array is the zerothelement.
The ith element of array c is referred to as c[i-1]. Array names follow the same conventions as other
identifiers A subscripted array name
can be used on the left side of an assignment to place a new valueinto an array element
can be used on the right side of an assignment operation to useits value
Every array in JavaScript knows its own length,which it stores in its length attribute and can befound with the expression arrayname.length
61992-2012 by Pearson Education, Inc. All
Rights Reserved.
-
7/27/2019 Web Programming Ch. 10
7/73
1992-2012 by Pearson Education, Inc. All
Rights Reserved. 7
-
7/27/2019 Web Programming Ch. 10
8/73
1992-2012 by Pearson Education, Inc. All
Rights Reserved. 8
-
7/27/2019 Web Programming Ch. 10
9/73
JavaScript arrays are Array objects. You use the new operator to create an array
and to specify the number of elements in anarray.
The new operator creates an object as thescript executes by obtaining enough memoryto store an object of the type specified to the
right ofnew .
91992-2012 by Pearson Education, Inc. All
Rights Reserved.
-
7/27/2019 Web Programming Ch. 10
10/73
Zero-based counting is usually used toiterate through arrays
JavaScript reallocates an Array when a valueis assigned to an element that is outside thebounds of the original Array
101992-2012 by Pearson Education, Inc. All
Rights Reserved.
-
7/27/2019 Web Programming Ch. 10
11/73
1992-2012 by Pearson Education, Inc. All
Rights Reserved. 11
-
7/27/2019 Web Programming Ch. 10
12/73
1992-2012 by Pearson Education, Inc. All
Rights Reserved. 12
-
7/27/2019 Web Programming Ch. 10
13/73
1992-2012 by Pearson Education, Inc. All
Rights Reserved. 13
-
7/27/2019 Web Programming Ch. 10
14/73
1992-2012 by Pearson Education, Inc. All
Rights Reserved. 14
-
7/27/2019 Web Programming Ch. 10
15/73
1992-2012 by Pearson Education, Inc. All
Rights Reserved. 15
-
7/27/2019 Web Programming Ch. 10
16/73
1992-2012 by Pearson Education, Inc. All
Rights Reserved. 16
-
7/27/2019 Web Programming Ch. 10
17/73
1992-2012 by Pearson Education, Inc. All
Rights Reserved. 17
-
7/27/2019 Web Programming Ch. 10
18/73
Using an Initializer List Arrays can be created using a comma-
separated initializer list enclosed in squarebrackets ([])
The arrays size is determined by the number ofvalues in the initializer list
The initial values of an array can be specifiedas arguments in the parentheses following
new Array The size of the array is determined by the numberof values in parentheses
181992-2012 by Pearson Education, Inc. All
Rights Reserved.
-
7/27/2019 Web Programming Ch. 10
19/73
The example in Figs. 10.510.6 creates threeArray objects to demonstrate initializingarrays with initializer lists.
Figure 10.5 is nearly identical to Fig. 10.3 butprovides three divs in its body element fordisplaying this examples arrays.
191992-2012 by Pearson Education, Inc. All
Rights Reserved.
-
7/27/2019 Web Programming Ch. 10
20/73
1992-2012 by Pearson Education, Inc. All
Rights Reserved. 20
-
7/27/2019 Web Programming Ch. 10
21/73
1992-2012 by Pearson Education, Inc. AllRights Reserved. 21
-
7/27/2019 Web Programming Ch. 10
22/73
1992-2012 by Pearson Education, Inc. AllRights Reserved. 22
-
7/27/2019 Web Programming Ch. 10
23/73
1992-2012 by Pearson Education, Inc. AllRights Reserved. 23
-
7/27/2019 Web Programming Ch. 10
24/73
-
7/27/2019 Web Programming Ch. 10
25/73
1992-2012 by Pearson Education, Inc. AllRights Reserved. 25
-
7/27/2019 Web Programming Ch. 10
26/73
1992-2012 by Pearson Education, Inc. AllRights Reserved. 26
-
7/27/2019 Web Programming Ch. 10
27/73
1992-2012 by Pearson Education, Inc. AllRights Reserved. 27
-
7/27/2019 Web Programming Ch. 10
28/73
1992-2012 by Pearson Education, Inc. AllRights Reserved. 28
-
7/27/2019 Web Programming Ch. 10
29/73
-
7/27/2019 Web Programming Ch. 10
30/73
1992-2012 by Pearson Education, Inc. AllRights Reserved. 30
-
7/27/2019 Web Programming Ch. 10
31/73
1992-2012 by Pearson Education, Inc. AllRights Reserved. 31
-
7/27/2019 Web Programming Ch. 10
32/73
1992-2012 by Pearson Education, Inc. AllRights Reserved. 32
-
7/27/2019 Web Programming Ch. 10
33/73
1992-2012 by Pearson Education, Inc. AllRights Reserved. 33
-
7/27/2019 Web Programming Ch. 10
34/73
1992-2012 by Pearson Education, Inc. AllRights Reserved. 34
-
7/27/2019 Web Programming Ch. 10
35/73
1992-2012 by Pearson Education, Inc. AllRights Reserved. 35
-
7/27/2019 Web Programming Ch. 10
36/73
1992-2012 by Pearson Education, Inc. AllRights Reserved. 36
-
7/27/2019 Web Programming Ch. 10
37/73
1992-2012 by Pearson Education, Inc. AllRights Reserved. 37
-
7/27/2019 Web Programming Ch. 10
38/73
In Chapter 9, the random image generator requiredimage files to be named with the word diefollowed by a number from 1 to 6 and the fileextension .png (e.g, die1.png).
The example in Figs. 10.1110.12 does not requirethe image filenames to contain integers insequence.
381992-2012 by Pearson Education, Inc. All
Rights Reserved.
-
7/27/2019 Web Programming Ch. 10
39/73
It uses an array pictures to store the names ofthe image files as strings.
Each time you click the image in the document, the scriptgenerates a random integer and uses it as an index into thepictures array.
The script updates the imgelementssrc attribute with theimage filename at the randomly selected position in the
pictures array.
We update the alt attribute with an appropriate descriptionof the image from the descriptions array.
391992-2012 by Pearson Education, Inc. All
Rights Reserved.
-
7/27/2019 Web Programming Ch. 10
40/73
1992-2012 by Pearson Education, Inc. AllRights Reserved. 40
-
7/27/2019 Web Programming Ch. 10
41/73
-
7/27/2019 Web Programming Ch. 10
42/73
1992-2012 by Pearson Education, Inc. AllRights Reserved. 42
-
7/27/2019 Web Programming Ch. 10
43/73
Two ways to pass arguments to functions(or methods)
pass-by-value
pass-by-reference
Pass-by-value
a copy of the arguments value is made and ispassed to the called function
431992-2012 by Pearson Education, Inc. All
Rights Reserved.
-
7/27/2019 Web Programming Ch. 10
44/73
In JavaScript, numbers, boolean values andstrings are passed to functions by value.
Pass-by-reference The caller gives the called function access to the
callers data and allows the called function tomodifythe data if it so chooses
Can improve performance because it caneliminate the overhead of copying large amountsof data, but it can weaken security because thecalled function can access the callers data
All objects are passed to functions by reference
441992-2012 by Pearson Education, Inc. All
Rights Reserved.
-
7/27/2019 Web Programming Ch. 10
45/73
1992-2012 by Pearson Education, Inc. AllRights Reserved. 45
-
7/27/2019 Web Programming Ch. 10
46/73
1992-2012 by Pearson Education, Inc. AllRights Reserved. 46
-
7/27/2019 Web Programming Ch. 10
47/73
Pass an array as an argument to a function Specify the arrays name (a reference to the array) without
brackets
Although entire arrays are passed by reference,
individual numeric and boolean array elementsarepassed by value exactly as simple numeric andboolean variables are passed
Such simple single pieces of data are called scalars, orscalar quantities
To pass an array element to a function, use the indexedname of the element as an argument in the function call
471992-2012 by Pearson Education, Inc. All
Rights Reserved.
-
7/27/2019 Web Programming Ch. 10
48/73
join method of an Array Returns a string that contains all of the elements
of an array, separated by the string supplied inthe functions argument
If an argument is not specified, the empty stringis used as the separator
481992-2012 by Pearson Education, Inc. All
Rights Reserved.
-
7/27/2019 Web Programming Ch. 10
49/73
1992-2012 by Pearson Education, Inc. AllRights Reserved. 49
-
7/27/2019 Web Programming Ch. 10
50/73
1992-2012 by Pearson Education, Inc. AllRights Reserved. 50
-
7/27/2019 Web Programming Ch. 10
51/73
1992-2012 by Pearson Education, Inc. AllRights Reserved. 51
-
7/27/2019 Web Programming Ch. 10
52/73
1992-2012 by Pearson Education, Inc. AllRights Reserved. 52
-
7/27/2019 Web Programming Ch. 10
53/73
1992-2012 by Pearson Education, Inc. AllRights Reserved. 53
-
7/27/2019 Web Programming Ch. 10
54/73
Sorting data Putting data in a particular order, such as ascending or
descending
One of the most important computing functions
541992-2012 by Pearson Education, Inc. All
Rights Reserved.
-
7/27/2019 Web Programming Ch. 10
55/73
Array object in JavaScript has a built-inmethod sort With no arguments, the method uses string
comparisons to determine the sorting order of the
array elements Method sort takes as its argument the name of a
function that compares its two arguments and returns
a negative value if the first argument is less than thesecond argument,
Zero if the arguments are equal, or
a positive value if the first argument is greater than thesecond
551992-2012 by Pearson Education, Inc. All
Rights Reserved.
-
7/27/2019 Web Programming Ch. 10
56/73
1992-2012 by Pearson Education, Inc. AllRights Reserved. 56
-
7/27/2019 Web Programming Ch. 10
57/73
1992-2012 by Pearson Education, Inc. AllRights Reserved. 57
-
7/27/2019 Web Programming Ch. 10
58/73
-
7/27/2019 Web Programming Ch. 10
59/73
-
7/27/2019 Web Programming Ch. 10
60/73
1992-2012 by Pearson Education, Inc. AllRights Reserved. 60
-
7/27/2019 Web Programming Ch. 10
61/73
Its often necessary to determine whether an arraycontains a value that matches a certain key value.
The process of locating a particular element value in anarray is called searching.
The Array object in JavaScript has built-in methodsindexOf and lastIndexOf for searching arrays.
Method indexOf searches for the first occurrence of thespecified key value
Method lastIndexOf searches for the last occurrence of
the specified key value. If the key value is found in the array, each method
returns the index of that value; otherwise, -1 isreturned.
611992-2012 by Pearson Education, Inc. AllRights Reserved.
-
7/27/2019 Web Programming Ch. 10
62/73
Every input element has a value property that can be usedto get or set the elements value.Optional Second Argument to indexOf and lastIndexOf You can pass an optional second argument to methods
indexOf and lastIndexOf that represents the index fromwhich to start the search.
By default, this arguments value is 0 and the methods searchthe entire array.
If the argument is greater than or equal to the arrays length,
the methods simply return -1. If the arguments value is negative, its used as an offset from
the end of the array.
621992-2012 by Pearson Education, Inc. AllRights Reserved.
-
7/27/2019 Web Programming Ch. 10
63/73
1992-2012 by Pearson Education, Inc. AllRights Reserved. 63
-
7/27/2019 Web Programming Ch. 10
64/73
1992-2012 by Pearson Education, Inc. AllRights Reserved. 64
-
7/27/2019 Web Programming Ch. 10
65/73
1992-2012 by Pearson Education, Inc. AllRights Reserved. 65
-
7/27/2019 Web Programming Ch. 10
66/73
1992-2012 by Pearson Education, Inc. AllRights Reserved. 66
-
7/27/2019 Web Programming Ch. 10
67/73
-
7/27/2019 Web Programming Ch. 10
68/73
1992-2012 by Pearson Education, Inc. AllRights Reserved. 68
-
7/27/2019 Web Programming Ch. 10
69/73
Multidimensional arrays can be initialized indeclarations like a one-dimensional array, withvalues grouped by row in square brackets The interpreter determines the number of rows by counting the
number of sub initializer
The interpreter determines the number of columns in each row bycounting the number of values in the sub-array that initializes therow
The rows of a two-dimensional array can vary inlength
A multidimensional array in which each row has adifferent number of columns can be allocateddynamically with operator new
691992-2012 by Pearson Education, Inc. AllRights Reserved.
-
7/27/2019 Web Programming Ch. 10
70/73
1992-2012 by Pearson Education, Inc. AllRights Reserved. 70
-
7/27/2019 Web Programming Ch. 10
71/73
-
7/27/2019 Web Programming Ch. 10
72/73
1992-2012 by Pearson Education, Inc. AllRights Reserved. 72
-
7/27/2019 Web Programming Ch. 10
73/73