Document

Transcript Document

JavaScript: Functions and Arrays
October 18, 2005
Slides modified from
Internet & World Wide Web: How to Program. 2004 (3rd)
edition. By Deitel, Deitel, and Goldberg. Published by
Prentice Hall. ISBN 0-13-145091-3
1
Chapter 10 - JavaScript:
Functions
Outline
10.1
10.2
10.3
10.4
10.5
10.6
10.7
10.8
10.9
10.10
10.11
10.12
Introduction
Program Modules in JavaScript
Programmer-Defined Functions
Function Definitions
Random-Number Generation
Example: Game of Chance
Another Example: Random Image Generator
Scope Rules
JavaScript Global Functions
Recursion
Recursion vs. Iteration
Web Resources
2
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.
3
10.2 Program Modules in
JavaScript
• Modules in JavaScript
– Functions
– Methods
• Belong to an object
– JavaScript includes many useful predefined methods
• Combine with programmer-defined methods to
make a program
4
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 );
5
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
6
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)
7
10.4 Function Definitions
• 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
8
10.4 Function Definitions
• 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
9
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
9
10
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>A Programmer-Defined square Function</title>
11
12
<script type = "text/javascript">
13

31
</script>
32
33
</head><body></body>
34 </html>
The return statement passes the value of y * y
back to the calling function.
10
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 )
11
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

When the controlling expression, face,
matches a case label, the respective
22
frequency variable is incremented.
9
10
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Roll a Six-Sided Die 6000 Times</title>
11
12
<script type = "text/javascript">
13

61
</script>
62
63
</head>
64
<body>
65
66
<p>Click Refresh (or Reload) to run the script again</p>
</body>
67 </html>
13
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
14
1
<?xml version = "1.0"?>
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
3
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5

the image’s src
Randomly
displays
one of 7 images -->
property
with document.write
and Math.random
6

18
</script>
19
20
</head>
21
22
23
24
<body>
<p>Click Refresh (or Reload) to run the script again</p>
</body>
25 </html>
15
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
16
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
17
12
<script type = "text/javascript">
13

52
</script>
+ "</p>" );
53
54
</head>
55
<body onload = "start()"></body>
56 </html>
18
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
19
10.9 JavaScript Global
Functions
Global function
escape
eval
isFinite
isNaN
Description
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.
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.
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.
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.
20
10.9 JavaScript Global
Functions
Global function
parseFloat
parseInt
unescape
Description
This function takes a string argument and attempts
to convert the beginning of the string into a floatingpoint 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).
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.
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.
21
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
22
JavaScript: Functions and Arrays
October 18, 2005
Slides modified from
Internet & World Wide Web: How to Program. 2004 (3rd)
edition. By Deitel, Deitel, and Goldberg. Published by
Prentice Hall. ISBN 0-13-145091-3
23
Chapter 11 - JavaScript: Arrays
Outline
11.1
11.2
11.3
11.4
11.5
11.6
11.7
11.8
11.9
11.10
11.11
11.12
Introduction
Arrays
Declaring and Allocating Arrays
Examples Using Arrays
Random Image Generator Using Arrays
References and Reference Parameters
Passing Arrays to Functions
Sorting Arrays
Searching Arrays: Linear Search and Binary Search
Multidimensional Arrays
Building an Online Quiz
Web Resources
24
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 multidimensional arrays.
25
11.1 Introduction
• Arrays
– Data structures of related items
• Also called Collections
– Dynamic
26
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
27
11.2 Arrays
Name of array
Position number (index
or subscript) of the
element within array c
Fig. 11.1
c[ 0 ]
-45
c[ 1 ]
6
c[ 2 ]
0
c[ 3 ]
72
c[ 4 ]
1543
c[ 5 ]
-89
c[ 6 ]
0
c[ 7 ]
62
c[ 8 ]
-3
c[ 9 ]
1
c[ 10 ]
6453
c[ 11 ]
78
A 12-element array.
28
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 );
29
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
30
11
12
<script type = "text/javascript">
13

52
</script>
31
53
54
</head><body onload = "initializeArrays()"></body>
55 </html>
11.4 Examples Using
Arrays
• 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 ];
32
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
9
10
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Initializing an Array with a Declaration</title>
11
12
<script type = "text/javascript">
13

46
</script>
47
48
</head><body onload = "start()"></body>
49 </html>
33
11.4 Examples Using
Arrays
• 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
34
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
9
10
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Sum the Elements of an Array</title>
11
12
<script type = "text/javascript">
13

31
</script>
Variable element is assigned a subscript
in the range of 0 up to, but not including,
theArray.length.
32
33
</head><body onload = "start()"></body>
34 </html>
35
11.4 Examples Using
Arrays
• Arrays can provide shorter and cleaner
substitute for switch statements
– Each element represents one case
36
5

6

7
8
9
10
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Roll a Six-Sided Die 6000 Times</title>
Referencing Array frequency replaces the switch
statement used in Chapter 10’s example.
11
12
<script type = "text/javascript">
13

34
</script>
35
36
</head>
37
<body>
38
39
<p>Click Refresh (or Reload) to run the script again</p>
</body>
40 </html>
37
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
38
1
<?xml version = "1.0"?>
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
3
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5

6

7
8
9
10
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
11
12
RandomPicture2
.html
(1 of 2)
<title>Random Image Generator</title>
<script type = "text/javascript">
13

21
</script>
22
23
</head>
24
25
26
27
<body>
<p>Click Refresh (or Reload) to run the script again</p>
</body>
28 </html>
39
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
40
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
41
13
<script type = "text/javascript">
14

60
</script>
61
62
</head><body onload = "start()"></body>
63 </html>
44
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
45
9
10
<head>
<title>Sorting an Array with Array Method sort</title>
11
12
<script type = "text/javascript">
13

37
</script>
Function compareIntegers calculates the
difference between the integer values of its
arguments.
38
39
</head><body onload = "start()"></body>
40 </html>
46
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
47
8
9
10
<html xmlns = "http://www.w3.org/1999/xhtml">
Array a is initiated with 100 elements.
<head>
<title>Linear Search of an Array</title>
11
12
<script type = "text/javascript">
13

47
</script>
Variable theArray gets the value of
Array a and variable key gets the
Function
linearSearch compares each
value of variable searchKey
.
each element with a search key.
LinearSearch.html
(3 of 3)
48
49
</head>
50
51
52
<body>
<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
61
</form>
</body>
62 </html>
49
Fig. 11.11
11.9 Searching Arrays: Binary
Search
Binary search of an array.
50
11.10 Multidimensional
Arrays
• Two-dimensional arrays analogous to
tables
– Rows and columns
• Specify row first, then column
– Two subscripts
51
11.10 Multidimensional
Arrays
Column 0
Column 1
Column 2
Column 3
Row 0
a[ 0 ][ 0 ] a[ 0 ][ 1 ] a[ 0 ][ 2 ] a[ 0 ][ 3 ]
Row 1
a[ 1 ][ 0 ] a[ 1 ][ 1 ] a[ 1 ][ 2 ] a[ 1 ][ 3 ]
Row 2
a[ 2 ][ 0 ] a[ 2 ][ 1 ] a[ 2 ][ 2 ] a[ 2 ][ 3 ]
Column subscript (or index)
Row subscript (or index)
Array name
Fig. 11.12 Two-dimensional array with three rows and four columns.
52
11.10 Multidimensional
Arrays
• 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 ] ];
53
11.10 Multidimensional
Arrays
• 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 );
54
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
9
10
Array array1
<html xmlns = "http://www.w3.org/1999/xhtml">
two rows.
<head>
<title>Initializing Multidimensional Arrays</title>
InitArray3.html
(1 of 2)
Array array2 provides six initializers in
11
12
provides six initializers in
<script type = "text/javascript">
three
13

41
</script>
Referencing the multidimensional
array theArray.
42
43
</head><body onload = "start()"></body>
44 </html>
56
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
57
12 <script type = "text/JavaScript">
13
14
function checkAnswers()
15
{
16
// determine whether the answer is correct
17
if ( myQuiz.radiobutton[ 1 ].checked )
document.write( "Congratulations, your answer is correct" );
18
else // if the answer is incorrect
19
document.write( "Your answer is incorrect. Please try again" );
20
21
}
22
23 </script>
24
25 </head>
26
27 <body>
28
29
Quiz.html
(2 of 2)
<form id = "myQuiz" action = "JavaScript:checkAnswers()">
<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>
Call the checkAnswers function
when the form is submitted.
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
<input type = "submit" name = "submit" value = "Submit" />
45
<input type = "reset" name = "reset" value = "Reset" />
46
47
</p>
48
</form>
49 </body>
50 </html>
58

Document

Transcript Document

Directory