1 JavaScript: Functions and Arrays October 18, 2005 Slides modified from Internet & World Wide Web:...

1

JavaScript: Functions and Arrays

October 18, 2005

Slides modified fromInternet & World Wide Web: How to Program. 2004 (3rd)

edition. By Deitel, Deitel, and Goldberg. Published by Prentice Hall. ISBN 0-13-145091-3

2

Chapter 10 - JavaScript: FunctionsOutline10.1 Introduction10.2 Program Modules in JavaScript10.3 Programmer-Defined Functions10.4 Function Definitions10.5 Random-Number Generation10.6 Example: Game of Chance10.7 Another Example: Random Image Generator10.8 Scope Rules10.9 JavaScript Global Functions10.10 Recursion10.11 Recursion vs. Iteration10.12 Web Resources

3

Objectives• In this tutorial, you will learn:

– To understand how to construct programs modularly from small pieces called functions.

– To be able to create new functions.– To understand the mechanisms used to pass

information between functions.– To introduce simulation techniques that use

random-number generation.– To understand how the visibility of identifiers

is limited to specific regions of programs.

4

10.2 Program Modules in JavaScript

• Modules in JavaScript– Functions– Methods

• Belong to an object

– JavaScript includes many useful pre-defined methods

• Combine with programmer-defined methods to make a program

5

10.2 Program Modules in JavaScript

• Function calls– Name– Left parenthesis– Arguments separated by commas

• Constants, variables or expressions

– Right parenthesis– Examples:

total += parseFloat( inputValue );

total += parseFloat( s1 + s2 );

6

10.3 Programmer-Defined Functions

• Defining functions– All variables declared in function are called

local• Do not exist outside current function

– Parameters• Also local variables

– Promotes reusability• Keep short• Name clearly

7

10.4 Function Definitions

• Format of a function definition

function function-name( parameter-list ){ declarations and statements}

– Function name any valid identifier– Parameter list names of variables that will receive

arguments• Must have same number as function call

• May be empty

– Declarations and statements• Function body (“block” of code)

8


• Returning control– return statement– Can return either nothing, or a value

return expression;

– No return statement same as return;– Not returning a value when expected is an

error

9


• Writing a function to square two numbers– for loop from 1 to 10– Pass each number as argument to square– return value of argument multiplied by

itself– Display result

10

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>A Programmer-Defined square Function</title>

11

12 <script type = "text/javascript">

13 <!--

14 document.writeln(

15 "<h1>Square the numbers from 1 to 10</h1>" );

16

17 // square the numbers from 1 to 10

18 for ( var x = 1; x <= 10; ++x )

19 document.writeln( "The square of " + x + " is " +

20 square( x ) + "<br />" );

21

Calling function square and passing it the value of x.

Variable y gets the value of variable x.

The return statement passes the value of y * y back to the calling function.

11

10.5 Random-Number Generation

• Random-number generation introduces element of chance– Math.random

var randomValue = Math.random();– Floating point value between 0 and 1– Adjust range by scaling and shifting– Math.floor

• Always round down

Math.floor( 1 + Math.random() * 6 )

12




4

5 

6 

7


9 <head>

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

11


13 <!--

14 var frequency1 = 0, frequency2 = 0,

15 frequency3 = 0, frequency4 = 0,

16 frequency5 = 0, frequency6 = 0, face;

17

18 // summarize results

19 for ( var roll = 1; roll <= 6000; ++roll ) {

20 face = Math.floor( 1 + Math.random() * 6 );

21

This expression uses method random to generate a random number between 1 and 6.

When the controlling expression, face, matches a case label, the respective frequency variable is incremented.

13

RollDie.html(3 of 3)

44 document.writeln( "<table border = \"1\"" +

45 "width = \"50%\">" );

46 document.writeln( "<thead><th>Face</th>" +

47 "<th>Frequency<th></thead>" );

48 document.writeln( "<tbody><tr><td>1</td><td>" +

49 frequency1 + "</td></tr>" );

50 document.writeln( "<tr><td>2</td><td>" + frequency2 +

51 "</td></tr>" );


53 "</td></tr>" );


55 "</td></tr>" );


57 "</td></tr>" );


59 "</td></tr></tbody></table>" );

60 // -->

61 </script>

62

63 </head>

64 <body>

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

66 </body>

67 </html>

The results of rolling the die 600 times are displayed in a table.

14

10.7 Another Example: Random Image Generator

• Randomly selecting an image– Images have integer names (i.e., 1.gif, 2.gif, …, 7.gif)

– Generate random number in proper range– Update src property

15

RandomPicture.html(1 of 1)


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>Random Image Generator</title>

11


13 

18 </script>

19

20 </head>

21

22 <body>


24 </body>

25 </html>

Inserting a random number into the image’s src property with document.write and Math.random

16

10.8 Scope Rules• Scope

– Portion of program where identifier can be referenced

– Inside function is local or function scope• Identifiers exist only between opening and

closing braces• Local variables hide global variables

17

10.8 Scope Rules• Scope demonstration

– Global variable x initialized to 1– start has local variable x initialized to 5– functionA has local variable x initialized to 25

– functionB has no local variable x– Observe output of each function

18

26


28 "<p>local x in start is " + x + "</p>" );

29 }

30

31 function functionA()

32 {

33 var x = 25; // initialized each time

34 // functionA is called

35

36 document.writeln( "<p>local x in functionA is " +

37 x + " after entering functionA" );

38 ++x;

39 document.writeln( "<br />local x in functionA is " +

40 x + " before exiting functionA" + "</p>" );

41 }

42

The value of x is incremented.

Function functionB multiplies the value of x by 10.

Function functionA changes the value of x to 25.

To begin the program, variable x is initialized to 1.

Function start changes the value of x to 5.

19

10.9 JavaScript Global Functions

• Global object– Always available– Provides 7 methods– Do not need to explicitly reference Global

before method call– Also holds all global variables, user defined

functions

20


Global function Description escape This function takes a string argument and returns a

string in which all spaces, punctuation, accent characters and any other character that is not in the ASCII character set (see Appendix D, ASCII Character Set) are encoded in a hexadecimal format (see Appendix E, Number Systems) that can be represented on all platforms.

eval This function takes a string argument representing JavaScript code to execute. The JavaScript interpreter evaluates the code and executes it when the eval function is called. This function allows JavaScript code to be stored as strings and executed dynamically.

isFinite This function takes a numeric argument and returns true if the value of the argument is not NaN, Number.POSITIVE_INFINITY or Number.NEGATIVE_INFINITY; otherwise, the function returns false.

isNaN This function takes a numeric argument and returns true if the value of the argument is not a number; otherwise, it returns false. The function is commonly used with the return value of parseInt or parseFloat to determine whether the result is a proper numeric value.

Fig. 10.9 JavaScript global functions.

21


Global function Description parseFloat This function takes a string argument and attempts

to convert the beginning of the string into a floating-point value. If the conversion is unsuccessful, the function returns NaN; otherwise, it returns the converted value (e.g., parseFloat( "abc123.45" ) returns NaN, and parseFloat( "123.45abc" ) returns the value 123.45).

parseInt This function takes a string argument and attempts to convert the beginning of the string into an integer value. If the conversion is unsuccessful, the function returns NaN; otherwise, it returns the converted value (e.g., parseInt( "abc123" ) returns NaN, and parseInt( "123abc" ) returns the integer value 123). This function takes an optional second argument, from 2 to 36, specifying the radix (or base) of the number. Base 2 indicates that the first argument string is in binary format, base 8 indicates that the first argument string is in octal format and base 16 indicates that the first argument string is in hexadecimal format. See see Appendex E, Number Systems, for more information on binary, octal and hexadecimal numbers.

unescape This function takes a string as its argument and returns a string in which all characters previously encoded with escape are decoded.

Fig. 10.9 JavaScript global functions.

22

10.10 Recursion• Recursive functions

– Call themselves• Recursion step or recursive call• Part of return statement

– Must have base case• Simplest case of problem• Returns value rather than calling itself

– Each recursive call simplifies input• When simplified to base case, functions return

23

JavaScript: Functions and Arrays

October 18, 2005

Slides modified fromInternet & World Wide Web: How to Program. 2004 (3rd)

edition. By Deitel, Deitel, and Goldberg. Published by Prentice Hall. ISBN 0-13-145091-3

24

Chapter 11 - JavaScript: Arrays

Outline11.1 Introduction11.2 Arrays11.3 Declaring and Allocating Arrays11.4 Examples Using Arrays11.5 Random Image Generator Using Arrays11.6 References and Reference Parameters11.7 Passing Arrays to Functions11.8 Sorting Arrays11.9 Searching Arrays: Linear Search and Binary Search11.10 Multidimensional Arrays11.11 Building an Online Quiz11.12 Web Resources

25

Objectives

• In this tutorial, you will learn:– To introduce the array data structure.– To understand the use of arrays to store,

sort and search lists and tables of values. – To understand how to declare an array,

initialize an array and refer to individual elements of an array.

– To be able to pass arrays to functions.– To be able to search and sort an array.– To be able to declare and manipulate

multi-dimensional arrays.

26

11.1 Introduction

• Arrays– Data structures of related items

• Also called Collections

– Dynamic

27

11.2 Arrays

• Arrays in JavaScript– Each element referenced by a number

• Start at “zeroth element”• Subscript or index

– Accessing a specific element• Name of array• Brackets• Number of element

– Arrays know their length• length property

28

11.2 Arrays

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.1 A 12-element array.

29

11.3 Declaring and Allocating Arrays

• Arrays in memory– Objects– Operator new

• Allocates memory for objects• Dynamic memory allocation operator

var c;c = new Array( 12 );

or

var c = new Array( 12 );

30

11.4 Examples Using Arrays

• Arrays grow dynamically– Allocate more space as items are added

• Must initialize array elements– Default value is undefined– for loops convenient– Referring to uninitialized elements or

elements outside array bounds is an error

32


• Possible to declare and initialize in one step– Specify list of values

• Initializer list

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

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

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

33

27

28 // output "header" followed by a two-column table

29 // containing subscripts and elements of "theArray"

30 function outputArray( header, theArray )

31 {

32 document.writeln( "<h2>" + header + "</h2>" );


34 "width = \"100%\">" );

35 document.writeln( "<thead><th width = \"100\" " +

36 "align = \"left\">Subscript</th>" +

37 "<th align = \"left\">Value</th></thead><tbody>" );

38

39 for ( var i = 0; i < theArray.length; i++ )

40 document.writeln( "<tr><td>" + i + "</td><td>" +

41 theArray[ i ] + "</td></tr>" );

42

43 document.writeln( "</tbody></table>" );

44 }

45 // -->

46 </script>

47

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

49 </html>

34


• for…in statement– Perform an action for each element in an

array– Iterates over array elements

• Assigns each element to specified variable one at a time

– Ignores non-existent elements

35

SumArray.html(1 of 2)




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.

The for loop sums the values contained in the 10-element integer array called theArray.

36


• Arrays can provide shorter and cleaner substitute for switch statements– Each element represents one case

37




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>


39 </body>

40 </html>

38

11.5 Random Image Generator Using Arrays

• Cleaner approach than previous version– Specify any file name rather than integers 1-7– Result of Math.random call is index into array

of image file names

39

RandomPicture2.html

(1 of 2)


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>Random Image Generator</title>

11


13 

21 </script>

22

23 </head>

24

25 <body>


27 </body>

28 </html>

40

11.6 References and Reference Parameters

• Two ways to pass parameters– Pass-by-value

• Pass copy of original value• Default for numbers, strings and booleans• Original variable is unchanged

– Pass-by-reference• How objects are passed, like arrays• Pass location in memory of value• Allows direct access to original value• Improves performance

41

11.7 Passing Arrays to Functions

• Name of array is argument– Not necessary to also pass size of array

• Arrays know their size

– Passed by reference• Individual elements are passed by value if

numbers, strings or booleans

• Array.join– Creates string containing all array elements– Specify separator

42

PassArray.html(1 of 3)

The first call to function outputArray displays the contents of the Array a before it is modified.

Function modifyArray multiplies each element by 2.

43


26 outputArray(

27 "The values of the modified array are: ", a );

28

29 document.writeln( "<h2>Effects of passing array " +

30 "element call-by-value</h2>" +

31 "a[3] before modifyElement: " + a[ 3 ] );

32

33 modifyElement( a[ 3 ] );

34


36 "<br />a[3] after modifyElement: " + a[ 3 ] );

37 }

38

39 // outputs "header" followed by the contents of "theArray"


41 {


43 header + theArray.join( " " ) + "<br />" );

44 }

45

Again, function outputArray is called to show that the contents of Array a have been modified.

Method join takes as its argument a string containing a separator that should be used to separate the elements of the array in the string that is returned.

Function modifyElement multiplies the contents of a[ 3 ] by 2.

The value of a[ 3 ] is output to show its contents before it is modified.

44


46 // function that modifies the elements of an array

47 function modifyArray( theArray )

48 {

49 for ( var j in theArray )

50 theArray[ j ] *= 2;

51 }

52

53 // function that attempts to modify the value passed

54 function modifyElement( e )

55 {

56 e *= 2;

57 document.writeln( "<br />value in modifyElement: " + e );

58 }

59 // -->

60 </script>

61


63 </html>

Multiply each element in theArray by 2.

45

11.8 Sorting Arrays

• Sorting– Important computing task

• Array.sort– Defaults to string comparison– Optional comparator function

• Return negative if first argument less than second• Return zero if arguments equal• Return positive if first argument greater than

second

46

Sort.html(1 of 2)

Method sort takes as its optional argument the name of a function that compares two arguments and returns a value of –1, 0 or 1.

23

24 // outputs "header" followed by the contents of "theArray"


26 {

27 document.writeln( "<p>" + header +

28 theArray.join( " " ) + "</p>" );

29 }

30

31 // comparison function for use with sort

32 function compareIntegers( value1, value2 )

33 {

34 return parseInt( value1 ) - parseInt( value2 );

35 }

36 // -->

37 </script>

38


40 </html>

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

47

11.9 Searching Arrays: Linear Search and Binary Search

• Searching– Look for matching key value

• Linear search– Iterate through each element until match found– Inefficient

• Worst case scenario, must test entire array

• Binary search– Requires sorted data– Cuts search range in half each iteration– Efficient

• Only look at small fraction of elements

48

Array a is initiated with 100 elements.

Array a is populated with the even integers 0 to 198.

LinearSearch.html(2 of 3)

20 // function called when "Search" button is pressed

21 function buttonPressed()

22 {

23 var searchKey = searchForm.inputVal.value;

24

25 // Array a is passed to linearSearch even though it

26 // is a global variable. Normally an array will

27 // be passed to a method for searching.

28 var element = linearSearch( a, parseInt( searchKey ) );

29

30 if ( element != -1 )

31 searchForm.result.value =

32 "Found value in element " + element;

33 else

34 searchForm.result.value = "Value not found";

35 }

36

Get value of search key from the input field in the XHTML form.

Calling function linearSearch and passing it the Array a and the value of variable searchKey as an integer.

49

LinearSearch.html(3 of 3)

37 // Search "theArray" for the specified "key" value

38 function linearSearch( theArray, key )

39 {

40 for ( var n = 0; n < theArray.length; ++n )

41 if ( theArray[ n ] == key )

42 return n;

43

44 return -1;

45 }

46 // -->

47 </script>

48

49 </head>

50

51 <body>

52 <form name = "searchForm" action = "">

53 <p>Enter integer search key<br />

54 <input name = "inputVal" type = "text" />

55 <input name = "search" type = "button" value = "Search"

56 onclick = "buttonPressed()" /><br /></p>

57

58 <p>Result<br />

59 <input name = "result" type = "text" size = "30" /></p>

60 </form>

61 </body>

62 </html>

Variable theArray gets the value of Array a and variable key gets the value of variable searchKey.Function linearSearch compares each

each element with a search key.

50

11.9 Searching Arrays: Binary Search

Fig. 11.11 Binary search of an array.

51

11.10 Multidimensional Arrays

• Two-dimensional arrays analogous to tables– Rows and columns

• Specify row first, then column

– Two subscripts

52


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.12 Two-dimensional array with three rows and four columns.

53


• Declaring and initializing multidimensional arrays– Group by row in square brackets– Treated as arrays of arrays– Creating array b with one row of two elements

and a second row of three elements:

var b = [ [ 1, 2 ], [ 3, 4, 5 ] ];

54


• Also possible to use new operator– Create array b with two rows, first with five

columns and second with three:

var b;

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

55

InitArray3.html(1 of 2)




4

5 

6 

7


9 <head>

10 <title>Initializing Multidimensional Arrays</title>

11


13 <!--

14 function start()

15 {

16 var array1 = [ [ 1, 2, 3 ], // first row

17 [ 4, 5, 6 ] ]; // second row

18 var array2 = [ [ 1, 2 ], // first row

19 [ 3 ], // second row

20 [ 4, 5, 6 ] ]; // third row

21

22 outputArray( "Values in array1 by row", array1 );

23 outputArray( "Values in array2 by row", array2 );

24 }

Array array1 provides six initializers in two rows.

Array array2 provides six initializers in three rows.

Function outputArray displays each array’s elements in a Web page.

56

InitArray3.html(2 of 2)

25


27 {

28 document.writeln( "<h2>" + header + "</h2><tt>" );

29

30 for ( var i in theArray ) {

31

32 for ( var j in theArray[ i ] )

33 document.write( theArray[ i ][ j ] + " " );

34

35 document.writeln( "<br />" );

36 }

37

38 document.writeln( "</tt>" );

39 }

40 // -->

41 </script>

42


44 </html>

Referencing the multidimensional array theArray.

57

11.11 Building an Online Quiz

• Radio buttons– Represented as an array

• Name of radio buttons is name of array• One element per button

– checked property is true when selected

• XHTML Forms– Contain controls, including radio buttons– action property specifies what happens when

submitted• Can call JavaScript code

58

Quiz.html(2 of 2)

Call the checkAnswers function when the form is submitted.

1 JavaScript: Functions and Arrays October 18, 2005 Slides modified from Internet & World Wide Web:...

Documents

Transcript of 1 JavaScript: Functions and Arrays October 18, 2005 Slides modified from Internet & World Wide Web:...