334 JavaScript/JScript: Functions Chapter 11. boss. worker1 worker2 worker3. Hierarchical boss function/worker function relationship.

Size: px

Start display at page:

Download "334 JavaScript/JScript: Functions Chapter 11. boss. worker1 worker2 worker3. Hierarchical boss function/worker function relationship."

Reginald Montgomery
5 years ago
Views:

1 . iw3htp_11.fm Page 334 Thursday, April 13, :33 PM 334 JavaScript/JScript: Functions Chapter JavaScript/JScript: Functions boss worker1 worker2 worker3 worker4 worker5 Fig Hierarchical boss function/worker function relationship.

iw3htp_11.fm Page 335 Thursday, April 13, 2000 12:33 PM Chapter 11 JavaScript/JScript: Functions 335 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 <HTML> 3 <!-- Fig. 11.2: SquareInt.

2 iw3htp_11.fm Page 335 Thursday, April 13, :33 PM Chapter 11 JavaScript/JScript: Functions <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 <HTML> 3  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>" ); // square the numbers from 1 to for ( var x = 1; x <= 10; ++x ) 14 document.writeln( "The square of " + x + " is " + 15 square( x ) + "<BR>" ); // The following square function's body is executed only 18 // when the function is explicitly called // square function definition 21 function square( y ) 22 { 23 return y * y; 24 } 25 </SCRIPT> </HEAD><BODY></BODY> 28 </HTML> Fig Using programmer-defined function square.

3 iw3htp_11.fm Page 336 Thursday, April 13, :33 PM 336 JavaScript/JScript: Functions Chapter 11 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 <HTML> 3  4 5 <HEAD> 6 <TITLE>Finding the Maximum of Three Values</TITLE> 7 8 <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" ); var value1 = parsefloat( input1 ); 14 var value2 = parsefloat( input2 ); 15 var value3 = parsefloat( input3 ); var maxvalue = maximum( value1, value2, value3 ); document.writeln( "First number: " + value "<BR>Second number: " + value "<BR>Third number: " + value "<BR>Maximum is: " + maxvalue ); // 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> </HEAD> 32 <BODY> 33 <P>Click Refresh (or Reload) to run the script again</p> 34 </BODY> 35 </HTML> Fig Programmer-defined maximum function (part 1 of 2).

4 iw3htp_11.fm Page 337 Thursday, April 13, :33 PM Chapter 11 JavaScript/JScript: Functions 337 Fig Programmer-defined maximum function (part 2 of 2).

5 iw3htp_11.fm Page 338 Thursday, April 13, :33 PM 338 JavaScript/JScript: Functions Chapter 11 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 <HTML> 3  4 5 <HEAD> 6 <TITLE>Shifted and Scaled Random Integers</TITLE> 7 8 <SCRIPT LANGUAGE = "JavaScript"> 9 var value; document.writeln( "<H1>Random Numbers</H1>" + 12 "<TABLE BORDER = '1' WIDTH = '50%'><TR>" ); for ( var i = 1; i <= 20; i++ ) { 15 value = Math.floor( 1 + Math.random() * 6 ); 16 document.writeln( "<TD>" + value + "</TD>" ); if ( i % 5 == 0 && i!= 20 ) 19 document.writeln( "</TR><TR>" ); 20 } document.writeln( "</TR></TABLE>" ); 23 </SCRIPT> </HEAD> 26 <BODY> 27 <P>Click Refresh (or Reload) to run the script again</p> 28 </BODY> 29 </HTML> Fig Shifted and scaled random integers (part 1 of 2).

6 iw3htp_11.fm Page 339 Thursday, April 13, :33 PM Chapter 11 JavaScript/JScript: Functions 339 Fig Shifted and scaled random integers (part 2 of 2).

7 iw3htp_11.fm Page 340 Thursday, April 13, :33 PM 340 JavaScript/JScript: Functions Chapter 11 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 <HTML> 3  4 5 <HEAD> 6 <TITLE>Roll a Six-Sided Die 6000 Times</TITLE> 7 8 <SCRIPT LANGUAGE = "JavaScript"> 9 var frequency1 = 0, frequency2 = 0, 10 frequency3 = 0, frequency4 = 0, 11 frequency5 = 0, frequency6 = 0, face; // summarize results 14 for ( var roll = 1; roll <= 6000; ++roll ) { 15 face = Math.floor( 1 + Math.random() * 6 ); 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: 34 ++frequency6; 35 break; 36 } 37 } 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>" + frequency "</TD></TR>" ); 44 document.writeln( "<TR><TD>2</TD><TD>" + frequency "</TD></TR>" ); 46 document.writeln( "<TR><TD>3</TD><TD>" + frequency "</TD></TR>" ); 48 document.writeln( "<TR><TD>4</TD><TD>" + frequency "</TD></TR>" ); 50 document.writeln( "<TR><TD>5</TD><TD>" + frequency5 + Fig Rolling a six-sided die 6000 times (part 1 of 2).

iw3htp_11.fm Page 341 Thursday, April 13, 2000 12:33 PM Chapter 11 JavaScript/JScript: Functions 341 51 "</TD></TR>" ); 52 document.

8 iw3htp_11.fm Page 341 Thursday, April 13, :33 PM Chapter 11 JavaScript/JScript: Functions "</TD></TR>" ); 52 document.writeln( "<TR><TD>6</TD><TD>" + frequency "</TD></TR></TABLE>" ); 54 </SCRIPT> </HEAD> 57 <BODY> 58 <P>Click Refresh (or Reload) to run the script again</p> 59 </BODY> 60 </HTML> Fig Rolling a six-sided die 6000 times (part 2 of 2).

9 iw3htp_11.fm Page 342 Thursday, April 13, :33 PM 342 JavaScript/JScript: Functions Chapter 11 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 <HTML> 3  4 5 <HEAD> 6 <TITLE>Program that Simulates the Game of Craps</TITLE> 7 8 <SCRIPT LANGUAGE = "JavaScript"> 9 // variables used to test the state of the game 10 var WON = 0, LOST = 1, CONTINUE_ROLLING = 2; // other variables used in program 13 var firstroll = true, // true if first roll 14 sumofdice = 0, // sum of the dice 15 mypoint = 0, // point if no win/loss on first roll 16 gamestatus = CONTINUE_ROLLING; // game not over yet // process one roll of the dice 19 function play() 20 { 21 if ( firstroll ) { // first roll of the dice 22 sumofdice = rolldice(); switch ( sumofdice ) { 25 case 7: case 11: // win on first roll 26 gamestatus = WON; 27 craps.point.value = ""; // clear point field 28 break; 29 case 2: case 3: case 12: // lose on first roll 30 gamestatus = LOST; 31 craps.point.value = ""; // clear point field 32 break; 33 default: // remember point 34 gamestatus = CONTINUE_ROLLING; 35 mypoint = sumofdice; 36 craps.point.value = mypoint; 37 firstroll = false; 38 } 39 } 40 else { 41 sumofdice = rolldice(); if ( sumofdice == mypoint ) // win by making point 44 gamestatus = WON; 45 else 46 if ( sumofdice == 7 ) // lose by rolling 7 47 gamestatus = LOST; 48 } if ( gamestatus == CONTINUE_ROLLING ) 51 window.status = "Roll again"; 52 else { 53 if ( gamestatus == WON ) Fig Program to simulate the game of craps (part 1 of 5).

10 iw3htp_11.fm Page 343 Thursday, April 13, :33 PM Chapter 11 JavaScript/JScript: Functions 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."; firstroll = true; 61 } 62 } // roll the dice 65 function rolldice() 66 { 67 var die1, die2, worksum; die1 = Math.floor( 1 + Math.random() * 6 ); 70 die2 = Math.floor( 1 + Math.random() * 6 ); 71 worksum = die1 + die2; craps.firstdie.value = die1; 74 craps.seconddie.value = die2; 75 craps.sum.value = worksum; return worksum; 78 } 79 </SCRIPT> </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> Fig Program to simulate the game of craps (part 2 of 5).

11 iw3htp_11.fm Page 344 Thursday, April 13, :33 PM 344 JavaScript/JScript: Functions Chapter 11 A text HTML GUI component A button HTML GUI component Browser s status bar Fig Program to simulate the game of craps (part 3 of 5).

12 iw3htp_11.fm Page 345 Thursday, April 13, :33 PM Chapter 11 JavaScript/JScript: Functions 345 Fig Program to simulate the game of craps (part 4 of 5).

13 iw3htp_11.fm Page 346 Thursday, April 13, :33 PM 346 JavaScript/JScript: Functions Chapter 11 Fig Program to simulate the game of craps (part 5 of 5).

14 iw3htp_11.fm Page 347 Thursday, April 13, :33 PM Chapter 11 JavaScript/JScript: Functions <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 <HTML> 3  4 5 <HEAD> 6 <TITLE>A Scoping Example</TITLE> 7 8 <SCRIPT LANGUAGE = "JavaScript"> 9 var x = 1; // global variable function start() 12 { 13 var x = 5; // variable local to function start document.writeln( "local x in start is " + x ); functiona(); // functiona has local x 18 functionb(); // functionb uses global variable x 19 functiona(); // functiona reinitializes local x 20 functionb(); // global variable x retains its value document.writeln( 23 "<P>local x in start is " + x + "</P>" ); 24 } function functiona() 27 { 28 var x = 25; // initialized each time functiona is called 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 + 34 " before exiting functiona</p>" ); 35 } 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> </HEAD> 48 <BODY ONLOAD = "start()"></body> 49 </HTML> Fig A scoping example. (part 1 of 2)

15 iw3htp_11.fm Page 348 Thursday, April 13, :33 PM 348 JavaScript/JScript: Functions Chapter 11 Fig A scoping example. (part 2 of 2)

16 iw3htp_11.fm Page 349 Thursday, April 13, :33 PM Chapter 11 JavaScript/JScript: Functions 349 5! 5 * 4! 4 * 3! 3 * 2! 2 * 1! 1 Final value = 120 5! 5! = 5 * 24 = 120 is returned 5 * 4! 4! = 4 * 6 = 24 is returned 4 * 3! 3! = 3 * 2 = 6 is returned 3 * 2! 2! = 2 * 1 = 2 is returned 2 * 1! 1 returned 1 a) Procession of recursive calls. b) Values returned from each recursive call. Fig Recursive evaluation of 5!.

17 iw3htp_11.fm Page 350 Thursday, April 13, :33 PM 350 JavaScript/JScript: Functions Chapter 11 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 <HTML> 3  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%'>" ); for ( var i = 0; i <= 10; i++ ) 13 document.writeln( "<TR><TD>" + i + "!</TD><TD>" + 14 factorial( i ) + "</TD></TR>" ); document.writeln( "</TABLE>" ); // 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> </HEAD><BODY></BODY> 29 </HTML> Fig Calculating factorials with a recursive function (part 1 of 2).

18 iw3htp_11.fm Page 351 Thursday, April 13, :33 PM Chapter 11 JavaScript/JScript: Functions 351 Fig Calculating factorials with a recursive function (part 2 of 2).

19 iw3htp_11.fm Page 352 Thursday, April 13, :33 PM 352 JavaScript/JScript: Functions Chapter 11 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 <HTML> 3  4 5 <HEAD> 6 <TITLE>Recursive Fibonacci Function</TITLE> 7 8 <SCRIPT LANGUAGE = "JavaScript"> 9 // Event handler for button HTML component in myform 10 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 } // Recursive definition of function fibonacci 20 function fibonacci( n ) 21 { 22 if ( n == 0 n == 1 ) // base case 23 return n; 24 else 25 return fibonacci( n - 1 ) + fibonacci( n - 2 ); 26 } 27 </SCRIPT> </HEAD> <BODY> 32 <FORM NAME = "myform"> 33 <TABLE BORDER = "1"> 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> Fig Recursively generating Fibonacci numbers (part 1 of 3).

20 iw3htp_11.fm Page 353 Thursday, April 13, :33 PM Chapter 11 JavaScript/JScript: Functions 353 Fig Recursively generating Fibonacci numbers (part 2 of 3).

21 iw3htp_11.fm Page 354 Thursday, April 13, :33 PM 354 JavaScript/JScript: Functions Chapter 11 Fig Recursively generating Fibonacci numbers (part 3 of 3).

22 iw3htp_11.fm Page 355 Thursday, April 13, :33 PM Chapter 11 JavaScript/JScript: Functions 355 f( 3 ) return f( 2 ) + f( 1 ) return f( 1 ) + f( 0 ) return 1 return 1 return 0 Fig Set of recursive calls to function fibonacci.

23 iw3htp_11.fm Page 356 Thursday, April 13, :33 PM 356 JavaScript/JScript: Functions Chapter Chapter Recursion examples and exercises 11 Factorial function Fibonacci function Greatest common divisor Sum of two integers Multiply two integers Raising an integer to an integer power Towers of Hanoi Visualizing recursion 12 Sum the elements of an array Print an array Print an array backward Check if a string is a palindrome Minimum value in an array Selection sort Eight Queens Linear search Binary search Quicksort Maze traversal 13 Printing a string input at the keyboard backward Fig Summary of recursion examples and exercises in the text.

24 iw3htp_11.fm Page 357 Thursday, April 13, :33 PM Chapter 11 JavaScript/JScript: Functions 357 Global function Description escape eval isfinite isnan parsefloat parseint unescape 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 C, Character Set ) are encoded in a hexadecimal format (see Appendix F, 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 the function 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. This function takes a string argument and attempts to convert the beginning of the string into a floating-point value. If the conversion is not successful, the function returns NaN; otherwise, it returns the converted value (e.g., parsefloat( "abc123.45" ) returns NaN and parsefloat( "123.45abc" ) returns the floating-point value This function takes a string argument and attempts to convert the beginning of the string into an integer value. If the conversion is not successful, 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 between 2 and 36 specifying the radix (or base) of the number. For example, 2 indicates that the first argument string is in binary format, 8 indicates that the first argument string is in octal format and 16 indicates that the first argument string is in hexadecimal format. See Appendix F, 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 that we previously encoded with escape are decoded. Fig JavaScript global functions.

JAVASCRIPT LESSON 4: FUNCTIONS

JAVASCRIPT LESSON 4: FUNCTIONS 11.1 Introductio n Programs that solve realworld programs More complex than programs from previous chapters Best way to develop & maintain large program: Construct from small,