Web Programming Ch. 10

7/27/2019 Web Programming Ch. 10

1/73

JavaScript: Arrays

11992-2012 by Pearson Education, Inc. All

Rights Reserved.


2/73


Rights Reserved. 2


3/73


Rights Reserved. 3


4/73

Arrays Data structures consisting of related data items

JavaScript arrays dynamic entities that can change size after they

are created


Rights Reserved.


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 ([])


Rights Reserved.


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


Rights Reserved.


7/73


Rights Reserved. 7


8/73


Rights Reserved. 8


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 .


Rights Reserved.


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


Rights Reserved.


11/73


Rights Reserved. 11


12/73


Rights Reserved. 12


13/73


Rights Reserved. 13


14/73


Rights Reserved. 14


15/73


Rights Reserved. 15


16/73


Rights Reserved. 16


17/73


Rights Reserved. 17


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


Rights Reserved.


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.


Rights Reserved.


20/73


Rights Reserved. 20


21/73

1992-2012 by Pearson Education, Inc. AllRights Reserved. 21


22/73



23/73



24/73


25/73



26/73



27/73



28/73



29/73


30/73



31/73



32/73



33/73



34/73



35/73



36/73



37/73



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.


Rights Reserved.


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.


Rights Reserved.


40/73



41/73


42/73



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


Rights Reserved.


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


Rights Reserved.


45/73



46/73



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


Rights Reserved.


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


Rights Reserved.


49/73



50/73



51/73



52/73



53/73



54/73

Sorting data Putting data in a particular order, such as ascending or

descending

One of the most important computing functions


Rights Reserved.


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


Rights Reserved.


56/73



57/73



58/73


59/73


60/73



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.


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.



63/73



64/73



65/73



66/73



67/73


68/73



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



70/73



71/73


72/73



73/73

Web Programming Ch. 10

Documents

Transcript of Web Programming Ch. 10