2000 deitel & associates, inc. all rights reserved. chapter 11 – javascript/jscript: functions...

57
2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved. Chapter 11 – JavaScript/Jscript: Functions Outline 11.1 Introduction 11.2 Program Modules in JavaScript 11.3 Programmer-Defined Functions 11.4 Function Definitions 11.5 Random Number Generation 11.6 Example: A Game of Chance 11.7 Duration of Identifiers 11.8 Scope Rules 11.9 Recursion 11.10 Example of Recursion: The Fibonacci Series 11.11 Recursion vs. Iteration 11.12 JavaScript Global Functions

Upload: magdalene-bradford

Post on 23-Dec-2015

223 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: 2000 Deitel & Associates, Inc. All rights reserved. Chapter 11 – JavaScript/Jscript: Functions Outline 11.1Introduction 11.2Program Modules in JavaScript

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

Chapter 11 – JavaScript/Jscript: Functions

Outline11.1 Introduction11.2 Program Modules in JavaScript 11.3 Programmer-Defined Functions11.4 Function Definitions11.5 Random Number Generation11.6 Example: A Game of Chance11.7 Duration of Identifiers11.8 Scope Rules11.9 Recursion11.10 Example of Recursion: The Fibonacci

Series11.11 Recursion vs. Iteration11.12 JavaScript Global Functions

Page 2: 2000 Deitel & Associates, Inc. All rights reserved. Chapter 11 – JavaScript/Jscript: Functions Outline 11.1Introduction 11.2Program Modules in JavaScript

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

11.1 Introduction

• Programs that solve real-world programs – More complex than programs from previous chapters

• Best way to develop & maintain large program:– Construct from small, simple pieces called modules

– Technique called divide and conquer

Page 3: 2000 Deitel & Associates, Inc. All rights reserved. Chapter 11 – JavaScript/Jscript: Functions Outline 11.1Introduction 11.2Program Modules in JavaScript

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

11.2 Program Modules in JavaScript

• functions – JavaScript modules• JavaScript programs written by combining

– Functions programmer writes

– “prepackaged” functions and objects in JavaScript• These functions often called methods

• Implies function belongs to particular object

• JavaScript provides several rich objects for performing– Common mathematical operations

– String manipulation

– Date and time manipulation

– Manipulations of arrays

Page 4: 2000 Deitel & Associates, Inc. All rights reserved. Chapter 11 – JavaScript/Jscript: Functions Outline 11.1Introduction 11.2Program Modules in JavaScript

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

11.2 Program Modules in JavaScript (II)

• Programmer-defined functions– Written by programmer to define specific tasks

– Statements defining functions written once

– Statements are hidden from other functions

• Function is invoked by a function call– Specifies function name

– Provides information (or arguments) function needs for execution

• Function call syntax:functionName( argument );

Page 5: 2000 Deitel & Associates, Inc. All rights reserved. Chapter 11 – JavaScript/Jscript: Functions Outline 11.1Introduction 11.2Program Modules in JavaScript

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

11.3 Programmer-Defined Functions

• Functions allow program modularization• Variables declared in function are local variables

– Only known inside function in which defined

• Most functions have list of parameters– Means for communicating info between functions &

function calls

– Local variables

– When function called, arguments assigned to parameters in function definition

Page 6: 2000 Deitel & Associates, Inc. All rights reserved. Chapter 11 – JavaScript/Jscript: Functions Outline 11.1Introduction 11.2Program Modules in JavaScript

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

11.3 Programmer-Defined Functions (II)

• Motives for modularizing a program with functions1. Makes program development more manageable

2. Allows software reusability• Programs can be created from standard functions instead of being

built from customized code

Example: parseInt(), parseFloat• Functions should be limited to performing a single, well-defined

task

3. Avoid repeating code in program• Do not re-invent the wheel

• Save time

Page 7: 2000 Deitel & Associates, Inc. All rights reserved. Chapter 11 – JavaScript/Jscript: Functions Outline 11.1Introduction 11.2Program Modules in JavaScript

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

11.3 Programmer-Defined Functions (III)

• Naming functions– Choose concise names which describe what function does

– If not possible to describe briefly, your function is too complex

Page 8: 2000 Deitel & Associates, Inc. All rights reserved. Chapter 11 – JavaScript/Jscript: Functions Outline 11.1Introduction 11.2Program Modules in JavaScript

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

11.4 Function Definitions

• Function-definition formatfunction function-name ( parameter-list )

{

Declarations and Statements

}– Function name - any valid identifier

– Parameter list - comma-separated list containing names of parameters received by the function when it is called

– If function does not receive values, parameter-list is left empty

Page 9: 2000 Deitel & Associates, Inc. All rights reserved. Chapter 11 – JavaScript/Jscript: Functions Outline 11.1Introduction 11.2Program Modules in JavaScript

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

11.4 Function Definitions (II)

• Function body or block: – declarations and statements within braces

• Control – Returned to the point at which function was called

– If function does not return a result1. When right-brace is reached return statement is executed

– If function returns a result3. When return expression; is executed

• Returns value of expressions to caller

• One argument in function call for each parameter in function definition

Page 10: 2000 Deitel & Associates, Inc. All rights reserved. Chapter 11 – JavaScript/Jscript: Functions Outline 11.1Introduction 11.2Program Modules in JavaScript

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

Outline

1.1 Output HTML

2.1 Open for control structure

2.2 Call square user-defined function

3.1 Define square function

3.2 Return result

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

2 <HTML>

3 <!-- Fig. 11.2: SquareInt.html -->

4

5 <HEAD>

6 <TITLE>A Programmer-Defined square Function</TITLE>

7

8 <SCRIPT LANGUAGE = "JavaScript">

9 document.writeln(

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

11

12 // square the numbers from 1 to 10

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

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

15 square( x ) + "<BR>" );

16

17 // The following square function's body is executed only

18 // when the function is explicitly called.

19

20 // square function definition

21 function square( y )

22 {

23 return y * y;

24 }

25 </SCRIPT>

26

27 </HEAD><BODY></BODY>

28 </HTML>

Page 11: 2000 Deitel & Associates, Inc. All rights reserved. Chapter 11 – JavaScript/Jscript: Functions Outline 11.1Introduction 11.2Program Modules in JavaScript

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

Script Output

Page 12: 2000 Deitel & Associates, Inc. All rights reserved. Chapter 11 – JavaScript/Jscript: Functions Outline 11.1Introduction 11.2Program Modules in JavaScript

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

11.4 Function Definitions (II)

• Method Math.max( y, z ) – Returns larger of the two values inputted

• When writing a function, do not– Forget to return a value if function is supposed to return a

value

– Forget to surround the function body with braces

– Pass an argument to function that is not compatible with expected data type

Page 13: 2000 Deitel & Associates, Inc. All rights reserved. Chapter 11 – JavaScript/Jscript: Functions Outline 11.1Introduction 11.2Program Modules in JavaScript

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

Outline

1.1 Define variables and prompt user for values

1.2 Convert strings to integers

2.1 Execute user-defined function maxValue

3.1 Print results

4.1 Define function maxValue

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">2 <HTML>3 <!-- Fig. 11.3: maximum.html -->45 <HEAD>6 <TITLE>Finding the Maximum of Three Values</TITLE>78 <SCRIPT LANGUAGE = "JavaScript">9 var input1 = window.prompt( "Enter first number", "0" );10 var input2 = window.prompt( "Enter second number", "0" );11 var input3 = window.prompt( "Enter third number", "0" );12 13 var value1 = parseFloat( input1 );14 var value2 = parseFloat( input2 );15 var value3 = parseFloat( input3 );16 17 var maxValue = maximum( value1, value2, value3 );1819 document.writeln( "First number: " + value1 +20 "<BR>Second number: " + value2 +21 "<BR>Third number: " + value3 +22 "<BR>Maximum is: " + maxValue );23 24 // maximum method definition (called from line 17)25 function maximum( x, y, z )26 {27 return Math.max( x, Math.max( y, z ) );28 }29 </SCRIPT>3031 </HEAD>32 <BODY>33 <P>Click Refresh (or Reload) to run the script again</P>34 </BODY>35 </HTML>

Page 14: 2000 Deitel & Associates, Inc. All rights reserved. Chapter 11 – JavaScript/Jscript: Functions Outline 11.1Introduction 11.2Program Modules in JavaScript

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

User Input

Script Output

Page 15: 2000 Deitel & Associates, Inc. All rights reserved. Chapter 11 – JavaScript/Jscript: Functions Outline 11.1Introduction 11.2Program Modules in JavaScript

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

11.5 Random Number Generation

• Commonly used in simulations and gaming• Method Math.random

– Returns floating-point value between 0 and 1, inclusive

– Every value in the range has an equal chance (or probability) of being chosen each time random called

• Math.floor( argument ); – Rounds down the argument to the next integer

Page 16: 2000 Deitel & Associates, Inc. All rights reserved. Chapter 11 – JavaScript/Jscript: Functions Outline 11.1Introduction 11.2Program Modules in JavaScript

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

11.5 Random Number Generation

Random numbers• Format for range of consecutive integers:

– For a value in a specific range of consecutive integers, use following format:

Math.floor( a + Math.random() * b );– a is the shifting value

• Equal to the first number in the desired range

– b is the scaling factor• Equal to the width of the desired range

– Also possible to choose from sets of values other than ranges of consecutive integers

Page 17: 2000 Deitel & Associates, Inc. All rights reserved. Chapter 11 – JavaScript/Jscript: Functions Outline 11.1Introduction 11.2Program Modules in JavaScript

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

Outline

1.1 Initialize variable

2.1 Initialize HTML TABLE

3.1 Start for structure

3.2 Set value to random value

3.2.1 Call Math.random

3.2.2 Set desired range for random number generation

3.3.3 Call Math.floor

4.1 Print results

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

2 <HTML>

3 <!-- Fig. 11.4: RandomInt.java -->

4

5 <HEAD>

6 <TITLE>Shifted and Scaled Random Integers</TITLE>

7

8 <SCRIPT LANGUAGE = "JavaScript">

9 var value;

10

11 document.writeln( "<H1>Random Numbers</H1>" +

12 "<TABLE BORDER = '1' WIDTH = '50%'><TR>" );

13

14 for ( var i = 1; i <= 20; i++ ) {

15 value = Math.floor( 1 + Math.random() * 6 );

16 document.writeln( "<TD>" + value + "</TD>" );

17

18 if ( i % 5 == 0 && i != 20 )

19 document.writeln( "</TR><TR>" );

20 }

21

22 document.writeln( "</TR></TABLE>" );

23 </SCRIPT>

24

25 </HEAD>

26 <BODY>

27 <P>Click Refresh (or Reload) to run the script again</P>

28 </BODY>

29 </HTML>

Page 18: 2000 Deitel & Associates, Inc. All rights reserved. Chapter 11 – JavaScript/Jscript: Functions Outline 11.1Introduction 11.2Program Modules in JavaScript

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

Script Outputs

Page 19: 2000 Deitel & Associates, Inc. All rights reserved. Chapter 11 – JavaScript/Jscript: Functions Outline 11.1Introduction 11.2Program Modules in JavaScript

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

Outline

1.1 Initialize variable and set values

2.1 Start for structure

2.2 set face to random integer between 1-6

3.1 Start switch structure

3.2 Enter case for every possible dice roll

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">2 <HTML>3 <!-- Fig. 11.5: RollDie.html -->45 <HEAD>6 <TITLE>Roll a Six-Sided Die 6000 Times</TITLE> 78 <SCRIPT LANGUAGE = "JavaScript">9 var frequency1 = 0, frequency2 = 0,10 frequency3 = 0, frequency4 = 0,11 frequency5 = 0, frequency6 = 0, face;12 13 // summarize results14 for ( var roll = 1; roll <= 6000; ++roll ) {15 face = Math.floor( 1 + Math.random() * 6 );16 17 switch ( face ) {18 case 1:19 ++frequency1;20 break;21 case 2:22 ++frequency2;23 break;24 case 3:25 ++frequency3;26 break;27 case 4:28 ++frequency4;29 break;30 case 5:31 ++frequency5;32 break;33 case 6:

Page 20: 2000 Deitel & Associates, Inc. All rights reserved. Chapter 11 – JavaScript/Jscript: Functions Outline 11.1Introduction 11.2Program Modules in JavaScript

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

Outline

4.1 Close switch structure

4.2 Close for structure

5.1 Print results in HTML TABLE

34 ++frequency6;35 break;36 }37 }3839 document.writeln( "<TABLE BORDER = '1' WIDTH = '50%'>" );40 document.writeln( "<TR><TD><B>Face</B></TD>" + 41 "<TD><B>Frequency</B></TD></TR>" );42 document.writeln( "<TR><TD>1</TD><TD>" + frequency1 + 43 "</TD></TR>" );44 document.writeln( "<TR><TD>2</TD><TD>" + frequency2 + 45 "</TD></TR>" );46 document.writeln( "<TR><TD>3</TD><TD>" + frequency3 + 47 "</TD></TR>" );48 document.writeln( "<TR><TD>4</TD><TD>" + frequency4 + 49 "</TD></TR>" );50 document.writeln( "<TR><TD>5</TD><TD>" + frequency5 + 51 "</TD></TR>" );52 document.writeln( "<TR><TD>6</TD><TD>" + frequency6 + 53 "</TD></TR></TABLE>" );54 </SCRIPT>5556 </HEAD>57 <BODY>58 <P>Click Refresh (or Reload) to run the script again</P>59 </BODY>60 </HTML>

Page 21: 2000 Deitel & Associates, Inc. All rights reserved. Chapter 11 – JavaScript/Jscript: Functions Outline 11.1Introduction 11.2Program Modules in JavaScript

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

Script Output from First Execution

Page 22: 2000 Deitel & Associates, Inc. All rights reserved. Chapter 11 – JavaScript/Jscript: Functions Outline 11.1Introduction 11.2Program Modules in JavaScript

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

Script Output from Second Execution

Page 23: 2000 Deitel & Associates, Inc. All rights reserved. Chapter 11 – JavaScript/Jscript: Functions Outline 11.1Introduction 11.2Program Modules in JavaScript

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

11.6 Example: A Game of Chance

• Program can also receive input from user through forms (discussed in HTML chapters)

• GUI - Graphical User Interface– Any user interaction with a GUI is called an event

– Event handling – JavaScript execution in response to an event

– GUI’s are located in the BODY of the HTML document

Page 24: 2000 Deitel & Associates, Inc. All rights reserved. Chapter 11 – JavaScript/Jscript: Functions Outline 11.1Introduction 11.2Program Modules in JavaScript

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

11.6 Example: A Game of Chance (II)

GUI Setup:– GUI is enclosed inside an HTML Form<FORM NAME=“formName”>…<FORM> tags

– Every GUI output is defined with the INPUT element<INPUT NAME = “inputName” TYPE = “text”>

– Enter as many <INPUT> tags as needed

– Clicking on GUI button element causes an action<INPUT TYPE = “button” VALUE = “buttonLabel” ONCLICK = “javaScriptFunctionName”>

• Function indicated executed when button clicked

Page 25: 2000 Deitel & Associates, Inc. All rights reserved. Chapter 11 – JavaScript/Jscript: Functions Outline 11.1Introduction 11.2Program Modules in JavaScript

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

11.6 Example: A Game of Chance (III)

GUI Setup (II)• Output data to form elements

– Within a function, write a statement in the following format:

formName.inputName.value = variableToBeOutput;

• Browser status bar– Print text by typing

window.status = “text to be printed”;– GUI’s can also be used for user input (discussed in 11.10)

Page 26: 2000 Deitel & Associates, Inc. All rights reserved. Chapter 11 – JavaScript/Jscript: Functions Outline 11.1Introduction 11.2Program Modules in JavaScript

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

11.6 Example: A Game of Chance (IV)

• Rules of “craps”– Player rolls 2 dice (6 faces/die, range: 1-6)

– Sum of spots on two upward faces calculate• If sum equals 7 or 11 – player wins • If sum equals 2, 3 or 12 on first throw (called “craps”) –

player loses • If sum equals 4, 5, 6, 8, 9 or 10 on first throw –

sum is players “point”

– If game not over after first roll, player continues rolling• If rolls sum equal to his “point” – player wins • if rolls 7 before matching his “point” – player loses

– Player continues rolling until game over

Page 27: 2000 Deitel & Associates, Inc. All rights reserved. Chapter 11 – JavaScript/Jscript: Functions Outline 11.1Introduction 11.2Program Modules in JavaScript

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

Outline

1.1 Initialize variablesand set values

2.1 Define function play()

2.2 Start if structure

2.3 Start switch structure

2.4 Define switch case actions

2.4.1 Print values of dice rolled

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">2 <HTML>3 <!-- Fig. 11.6: Craps.html -->45 <HEAD>6 <TITLE>Program that Simulates the Game of Craps</TITLE>78 <SCRIPT LANGUAGE = "JavaScript">9 // variables used to test the state of the game 10 var WON = 0, LOST = 1, CONTINUE_ROLLING = 2; 1112 // other variables used in program13 var firstRoll = true, // true if first roll14 sumOfDice = 0, // sum of the dice15 myPoint = 0, // point if no win/loss on first roll16 gameStatus = CONTINUE_ROLLING; // game not over yet1718 // process one roll of the dice19 function play()20 {21 if ( firstRoll ) { // first roll of the dice22 sumOfDice = rollDice(); 23 24 switch ( sumOfDice ) {25 case 7: case 11: // win on first roll26 gameStatus = WON;27 craps.point.value = ""; // clear point field28 break;29 case 2: case 3: case 12: // lose on first roll30 gameStatus = LOST;31 craps.point.value = ""; // clear point field32 break;33 default: // remember point

Page 28: 2000 Deitel & Associates, Inc. All rights reserved. Chapter 11 – JavaScript/Jscript: Functions Outline 11.1Introduction 11.2Program Modules in JavaScript

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

Outline

2.5 Plan all possible dice rolls

2.6 Plan for player to continue rolling indefinitely

3.1 Define function rollDice()

34 gameStatus = CONTINUE_ROLLING;35 myPoint = sumOfDice;36 craps.point.value = myPoint; 37 firstRoll = false;38 }39 }40 else {41 sumOfDice = rollDice();42 43 if ( sumOfDice == myPoint ) // win by making point44 gameStatus = WON;45 else46 if ( sumOfDice == 7 ) // lose by rolling 747 gameStatus = LOST;48 }4950 if ( gameStatus == CONTINUE_ROLLING )51 window.status = "Roll again";52 else {53 if ( gameStatus == WON )54 window.status = "Player wins. " +55 "Click Roll Dice to play again.";56 else 57 window.status = "Player loses. " + 58 "Click Roll Dice to play again.";59 60 firstRoll = true;61 }62 }63 64 // roll the dice65 function rollDice()66 {

Page 29: 2000 Deitel & Associates, Inc. All rights reserved. Chapter 11 – JavaScript/Jscript: Functions Outline 11.1Introduction 11.2Program Modules in JavaScript

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

Outline

3.2 Calculate random dice rolls

3.3 Print dice rolls

3.4 Return dice value to function call

4.1 Set FORM GUI structure

4.2 Define INPUT fields

4.3 Define BUTTON element and ONCLICK attribute

67 var die1, die2, workSum; 6869 die1 = Math.floor( 1 + Math.random() * 6 );70 die2 = Math.floor( 1 + Math.random() * 6 );71 workSum = die1 + die2;7273 craps.firstDie.value = die1;74 craps.secondDie.value = die2;75 craps.sum.value = workSum;7677 return workSum;78 }79</SCRIPT>8081</HEAD>82<BODY>83<FORM NAME = "craps">84 <TABLE BORDER = "1">85 <TR><TD>Die 1</TD>86 <TD><INPUT NAME = "firstDie" TYPE = "text"></TD></TR>87 <TR><TD>Die 2</TD>88 <TD><INPUT NAME = "secondDie" TYPE = "text"></TD></TR>89 <TR><TD>Sum</TD>90 <TD><INPUT NAME = "sum" TYPE = "text"></TD></TR>91 <TR><TD>Point</TD>92 <TD><INPUT NAME = "point" TYPE = "text"></TD></TR>93 <TR><TD><INPUT TYPE = "button" VALUE = "Roll Dice" 94 ONCLICK = "play()"></TD></TR>95 </TABLE>96</FORM>97</BODY>98</HTML>

Page 30: 2000 Deitel & Associates, Inc. All rights reserved. Chapter 11 – JavaScript/Jscript: Functions Outline 11.1Introduction 11.2Program Modules in JavaScript

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

Script Output 1 (player wins first roll)

Page 31: 2000 Deitel & Associates, Inc. All rights reserved. Chapter 11 – JavaScript/Jscript: Functions Outline 11.1Introduction 11.2Program Modules in JavaScript

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

Script Output 2 (player loses first roll)

Page 32: 2000 Deitel & Associates, Inc. All rights reserved. Chapter 11 – JavaScript/Jscript: Functions Outline 11.1Introduction 11.2Program Modules in JavaScript

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

Script Output 3 (player wins on second roll)

Roll 1

Roll 2

Page 33: 2000 Deitel & Associates, Inc. All rights reserved. Chapter 11 – JavaScript/Jscript: Functions Outline 11.1Introduction 11.2Program Modules in JavaScript

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

Script Output 4 (player loses on second roll)

Roll 1

Roll 2

Page 34: 2000 Deitel & Associates, Inc. All rights reserved. Chapter 11 – JavaScript/Jscript: Functions Outline 11.1Introduction 11.2Program Modules in JavaScript

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

11.7 Duration of Identifiers

• Each identifier has duration and scope– Duration (or lifetime) is the period during which identifier

exists in memory.• Some identifiers exist briefly

• Some identifiers are repeatedly created and destroyed

• Some identifiers exist for entire execution of the program

• Identifiers which represent local variables in a function have automatic duration– Automatically created when program control enters function

– Exist while function is active

– Automatically destroyed when function is exited

– Referred to as local variables

Page 35: 2000 Deitel & Associates, Inc. All rights reserved. Chapter 11 – JavaScript/Jscript: Functions Outline 11.1Introduction 11.2Program Modules in JavaScript

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

11.7 Duration of Identifiers (II)

• JavaScript also has identifiers of static duration– Typically defined in <HEAD> section of HTML document

– Exist from point at which declared until browsing session over

– Even though they exist after <HEAD> section terminates, cannot necessarily be used throughout the script

– Referred to as global variables or script-level variables

Page 36: 2000 Deitel & Associates, Inc. All rights reserved. Chapter 11 – JavaScript/Jscript: Functions Outline 11.1Introduction 11.2Program Modules in JavaScript

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

11.8 Scope Rules

• Scope of identifier is portion of program in which identifier can be referenced– Local variable declared in a function can be used only in that

function

• Identifiers declared inside a function have function (or local) scope– Begins with opening brace ({) of function

– Ends with closing brace(}) of function

– Function parameters also have local scope

– If local variable has same name as global variable, global variable “hidden” from body of function

Page 37: 2000 Deitel & Associates, Inc. All rights reserved. Chapter 11 – JavaScript/Jscript: Functions Outline 11.1Introduction 11.2Program Modules in JavaScript

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

Outline

1.1 Initialize variable

2.1 Define start() function

2.2 State start function actions

2.3 Call user defined functions

2.4 Print results

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">2 <HTML>3 <!-- Fig. 11.7: scoping.html -->45 <HEAD>6 <TITLE>A Scoping Example</TITLE>78 <SCRIPT LANGUAGE = "JavaScript">9 var x = 1; // global variable1011 function start()12 {13 var x = 5; // variable local to function start1415 document.writeln( "local x in start is " + x );1617 functionA(); // functionA has local x18 functionB(); // functionB uses global variable x19 functionA(); // functionA reinitializes local x20 functionB(); // global variable x retains its value2122 document.writeln( 23 "<P>local x in start is " + x + "</P>" );24 }25

Page 38: 2000 Deitel & Associates, Inc. All rights reserved. Chapter 11 – JavaScript/Jscript: Functions Outline 11.1Introduction 11.2Program Modules in JavaScript

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

Outline

3.1 Define function functionA()

3.2 Demonstrate function scope

4.1 Define functionB()

4.2 Demonstrate global scope

34 " before exiting functionA</P>" );35 }3637 function functionB()38 {39 document.writeln( "<P>global variable x is " + x +40 " on entering functionB" );41 x *= 10;42 document.writeln( "<BR>global variable x is " + x +43 " on exiting functionB</P>" );44 }45 </SCRIPT>4647 </HEAD>48 <BODY ONLOAD = "start()"></BODY>49 </HTML>

26 function functionA()

27 {

28 var x = 25; // initialized each time functionA is called

29

30 document.writeln( "<P>local x in functionA is " + x +

31 " after entering functionA" );

32 ++x;

33 document.writeln( "<BR>local x in functionA is " + x +

Page 39: 2000 Deitel & Associates, Inc. All rights reserved. Chapter 11 – JavaScript/Jscript: Functions Outline 11.1Introduction 11.2Program Modules in JavaScript

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

Script Output:

Page 40: 2000 Deitel & Associates, Inc. All rights reserved. Chapter 11 – JavaScript/Jscript: Functions Outline 11.1Introduction 11.2Program Modules in JavaScript

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

11.9 Recursion

• Recursive function – A function that calls itself directly, or indirectly through

another function

• Process1. Function called on to solve problem

2. Function knows how to solve most simple case (base case)

3. If called with base case, returns result

4. If called with more complex case

Page 41: 2000 Deitel & Associates, Inc. All rights reserved. Chapter 11 – JavaScript/Jscript: Functions Outline 11.1Introduction 11.2Program Modules in JavaScript

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

11.9 Recursion

• Process5. Function divides problem into two conceptual pieces:

1. Piece function knows how to do

2. Piece function does not know how to do

• Resembles original problem, but is slightly simpler or smaller

6. Function makes recursive call • Invokes fresh copy of itself to work on smaller problem

• Normally includes keyword return

• Send result back to previous copy of itself that made the recursive call

Page 42: 2000 Deitel & Associates, Inc. All rights reserved. Chapter 11 – JavaScript/Jscript: Functions Outline 11.1Introduction 11.2Program Modules in JavaScript

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

11.9 Recursion (II)

• Process7. Recursion step executes while original function still open

• Can result in additional recursive calls being made as function keeps dividing problem

8. Recursion termination:• Eventually, after a number of recursive calls, function recognizes base

case • Returns value to copy of function that called it

• Continues until original function returns final result

Page 43: 2000 Deitel & Associates, Inc. All rights reserved. Chapter 11 – JavaScript/Jscript: Functions Outline 11.1Introduction 11.2Program Modules in JavaScript

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

Outline

1.1 Open HTML TABLE

2.1 Open for structure

2.2 Call factorial function

3.1 Define factorial function

3.2 Make recursive call statement

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

2 <HTML>

3 <!-- Fig. 11.9: FactorialTest.html -->

4

5 <HEAD>

6 <TITLE>Recursive Factorial Function</TITLE>

7

8 <SCRIPT LANGUAGE = "JavaScript">

9 document.writeln( "<H1>Factorials of 1 to 10</H1>" );

10 document.writeln( "<TABLE BORDER = '1' WIDTH = '100%'>" );

11

12 for ( var i = 0; i <= 10; i++ )

13 document.writeln( "<TR><TD>" + i + "!</TD><TD>" +

14 factorial( i ) + "</TD></TR>" );

15

16 document.writeln( "</TABLE>" );

17

18 // Recursive definition of function factorial

19 function factorial( number )

20 {

21 if ( number <= 1 ) // base case

22 return 1;

23 else

24 return number * factorial( number - 1 );

25 }

26 </SCRIPT>

27

28 </HEAD><BODY></BODY>

29 </HTML>

Page 44: 2000 Deitel & Associates, Inc. All rights reserved. Chapter 11 – JavaScript/Jscript: Functions Outline 11.1Introduction 11.2Program Modules in JavaScript

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

Script Output:

Page 45: 2000 Deitel & Associates, Inc. All rights reserved. Chapter 11 – JavaScript/Jscript: Functions Outline 11.1Introduction 11.2Program Modules in JavaScript

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

11.9 Recursion (II)

5!

1

5 * 4!

2 * 1!

3 * 2!

4 * 3!

5!

1

5 * 4!

2 * 1!

3 * 2!

4 * 3!

Final Value = 120

5! = 5 * 24 = 120 is returned

4! = 4 * 6 = 24 is returned

3! = 3 * 2 = 6 is returned

2! = 2 * 1 = 2 is returned

1 returned

Procession of recursive calls Values returned from each recursive call

Recursive Evaluation of 5!

Page 46: 2000 Deitel & Associates, Inc. All rights reserved. Chapter 11 – JavaScript/Jscript: Functions Outline 11.1Introduction 11.2Program Modules in JavaScript

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

11.10 Example of Using Recursion: The Fibonacci Series

• GUI input setup:– All user inputs (if there are any) are defined by HTML INPUT tag

<INPUT NAME = “inputName” TYPE = “text”>– Enter as many inputs as you want, giving each an applicable name

– The form button component allows the user to send his inputted information to the server

<INPUT TYPE = “button” VALUE = “buttonLabel” ONCLICK = “javaScriptFunctionCall”>

– Function called in ONCLICK element is executed when event is executed

– Function called in GUI will execute using FORM elements as its parameters

Page 47: 2000 Deitel & Associates, Inc. All rights reserved. Chapter 11 – JavaScript/Jscript: Functions Outline 11.1Introduction 11.2Program Modules in JavaScript

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

11.10 Example of Using Recursion: The Fibonacci Series (II)

• Fibonacci series:– 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89…

– Begins with 0 and 1

– Each number is sum of pervious two numbers

• May be defined recursively as:– fibonacci( 0 ) = 0

– fibonacci( 1 ) = 1

– fibonacci( n ) = fibonacci( n - 1 ) + fibonacci( n - 2)

• Ratio of successive numbers converges on 1.618…– Golden ratio or golden mean

• Avoid programs with Fibonacci-style calls– Results in exponential “explosion” of calls

Page 48: 2000 Deitel & Associates, Inc. All rights reserved. Chapter 11 – JavaScript/Jscript: Functions Outline 11.1Introduction 11.2Program Modules in JavaScript

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

Outline

1.1 Define function: getFibonacciValue

1.2 Define variable from user input

1.3 Print results

2.1 Define function: fibonacci

2.2 Make recursive calls

2.3 Return result

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">2 <HTML>3 <!-- Fig. 11.10: FibonacciTest.html -->45 <HEAD>6 <TITLE>Recursive Fibonacci Function</TITLE>78 <SCRIPT LANGUAGE = "JavaScript">9 // Event handler for button HTML component in myForm10 function getFibonacciValue()11 {12 var value = parseInt( document.myForm.number.value );13 window.status = 14 "Calculating Fibonacci number for " + value; 15 document.myForm.result.value = fibonacci( value ); 16 window.status = "Done calculating Fibonacci number"; 17 }18 19 // Recursive definition of function fibonacci20 function fibonacci( n )21 {22 if ( n == 0 || n == 1 ) // base case23 return n;24 else25 return fibonacci( n - 1 ) + fibonacci( n - 2 );26 } 27 </SCRIPT>2829 </HEAD>30

Page 49: 2000 Deitel & Associates, Inc. All rights reserved. Chapter 11 – JavaScript/Jscript: Functions Outline 11.1Introduction 11.2Program Modules in JavaScript

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

Outline

1.1 Open <FORM>

1.2 Open <TABLE>

1.3 Insert <INPUT> elements with appropriate attributes

1.4 Close </FORM> and </TABLE>

34 <TR><TD>Enter an integer</TD>

35 <TD><INPUT NAME = "number" TYPE = "text"></TD>

36 <TD><INPUT TYPE = "button" VALUE = "Calculate"

37 ONCLICK = "getFibonacciValue()"</TR>

38 <TR><TD>Fibonacci value</TD>

39 <TD><INPUT NAME = "result" TYPE = "text"></TD></TR>

40 </TABLE>

41</FORM></BODY>

42</HTML>

31<BODY>

32<FORM NAME = "myForm">

33 <TABLE BORDER = "1">

Page 50: 2000 Deitel & Associates, Inc. All rights reserved. Chapter 11 – JavaScript/Jscript: Functions Outline 11.1Introduction 11.2Program Modules in JavaScript

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

Script Outputs:

Page 51: 2000 Deitel & Associates, Inc. All rights reserved. Chapter 11 – JavaScript/Jscript: Functions Outline 11.1Introduction 11.2Program Modules in JavaScript

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

11.10 Example of Using Recursion: The Fibonacci Series

Set of Recursive Calls to Function fibonacci

return 1 return 0

f( 1 )return f( 0 )+ return 1

f( 2 )return f( 1 )+

f( 3 )

Page 52: 2000 Deitel & Associates, Inc. All rights reserved. Chapter 11 – JavaScript/Jscript: Functions Outline 11.1Introduction 11.2Program Modules in JavaScript

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

11.11 Recursion vs. Iteration

• Common Aspects– Both based on a control structure

• Recursion uses a selection structure

• Iteration uses a repetition structure

– Both involve repetition

– Both involve termination test

– Iteration with counter-controlled repetition and recursion both gradually approach termination

– Both can occur infinitely

Page 53: 2000 Deitel & Associates, Inc. All rights reserved. Chapter 11 – JavaScript/Jscript: Functions Outline 11.1Introduction 11.2Program Modules in JavaScript

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

11.11 Recursion vs. Iteration (II)

• Negatives of recursion– Repeatedly invokes mechanism or function calls

– Expensive in processor time and memory space• Each recursive call causes copy of itself to be made

– Iteration normally occurs within a function so overhead of repeated calls is omitted

• Why choose recursion over iteration?– Good software engineering important

– High performance important

– Have to find the right mix between the two depending on the situation

Page 54: 2000 Deitel & Associates, Inc. All rights reserved. Chapter 11 – JavaScript/Jscript: Functions Outline 11.1Introduction 11.2Program Modules in JavaScript

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

11.12 JavaScript Global Functions

• Global functions are part of JavaScript’s Global

object– Contains all global variables in the script

– Some programmers refer to these functions as methods• Global functions and user-defined functions part of Global object

• You do not need to use the Global object directly– JavaScript does this for you

Page 55: 2000 Deitel & Associates, Inc. All rights reserved. Chapter 11 – JavaScript/Jscript: Functions Outline 11.1Introduction 11.2Program Modules in JavaScript

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

11.12 JavaScript Global Functions (II)

• Global Functions1. escape

• Takes string argument and returns string in which all spaces, punctuation, accent characters and all other non-ASCII characters are encoded in hexadecimal form

• Can be represented on all platforms

2. eval• Takes string argument representing JavaScript code to execute.

Evaluates code and executes it when eval function is called• Allows JavaScript code to be stored as strings and executed

dynamically

3. isFinite• Takes numeric argument and returns true if value is not NaN,

Number.POSITIVE_INFINITY or Number.NEGATIVE_INFINITY

• Otherwise function returns false

Page 56: 2000 Deitel & Associates, Inc. All rights reserved. Chapter 11 – JavaScript/Jscript: Functions Outline 11.1Introduction 11.2Program Modules in JavaScript

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

11.12 JavaScript Global Functions (III)

• Global Functions (continued)4. isNaN

• Takes numeric argument and returns true if value is not a number

• Otherwise returns false• Commonly used with return value of parseInt and parseFloat

to determine whether result is proper numeric value

5. parseFloat• Takes string argument and converts beginning of string to floating-

point value

• If conversion unsuccessful, returns NaN• Otherwise, returns converted value

Page 57: 2000 Deitel & Associates, Inc. All rights reserved. Chapter 11 – JavaScript/Jscript: Functions Outline 11.1Introduction 11.2Program Modules in JavaScript

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

11.12 JavaScript Global Functions (IV)

• Global Functions (continued)6. parseInt

• Takes string argument and attempts to convert beginning of string into integer value

• If conversion not successful, returns NaN• Otherwise, returns converted value

• Takes an optional second argument between 2 and 36 specifying the radix (or base) of the number

7. unescape• Takes a string and returns string in which all characters previously

encoded with escape are decoded