">

Presentation is loading. Please wait.

Presentation is loading. Please wait.

1 JavaScript: Control Structures II. 2 whileCounter.html 1 2

Similar presentations


Presentation on theme: "1 JavaScript: Control Structures II. 2 whileCounter.html 1 2 "— Presentation transcript:

1 1 JavaScript: Control Structures II

2 2 whileCounter.html 1 2 4 5 6 7 8 9 10 Counter-Controlled Repetition 11 12 13 23 24 25 26 The while loop will continue until the value of counter is greater than 7. Increment the counter.

3 3 Program Output

4 4 ForCounter.html 1 2 4 5 6 7 8 9 10 Counter-Controlled Repetition 11 12 13 22 23 24 25 InitializationRepetition conditionIncrementing

5 5 Program Output

6 6 For Repetition Structure for (var counter = 1 ; counter <= 7 ; ++counter ) Initial value of control variableIncrement of control variable Control variable nameFinal value of control variable for which the condition is true for keyword Loop-continuation condition Components of a typical for structure header.

7 7 Examples Using the for Structure counter <= 7 document.writeln( "

XHTML font size "+ counter + "ex " ); true false var counter = 1 ++counter Establish initial value of control variable. Determine if final value of control variable has been reached. Body of loop (this may be many statements) Increment the control variable. Flowcharting a typical for repetition structure.

8 8 Sum.html Sum.html Program Output 1 2 4 5 6 7 8 9 10 Sum the Even Integers from 2 to 100 11 12 13 22 23 24 25 The for loop will continue until the value of number is greater than 100. Initialization.Repetition condition.Incrementing.

9 9 Interest.html 1 2 4 5 6 7 8 9 10 Calculating Compound Interest 11 12 13 35 Opening table element.Each iteration of the for loop creates a table row listing the year of the loan and the amount.

10 10 Interest.html Interest.html Program Output 36 37 38

11 11 SwitchTest.html 1 2 4 5 6 7 8 9 10 Switching between XHTML List Formats 11 12 13 54 55 56 57 58 Click Refresh (or Reload) to run the script again 59 60 If none of the case s match, variable validInput is set to false." class="image_link uk-text-large uk-margin-small-left uk-margin-small-right"> 12 12 SwitchTest.html 34 case "3": 35 startTag = " "; 36 endTag = " "; 37 listType = " Ordered List: Lettered "; 38 break; 39 default: 40 validInput = false; 41 } 42 43 if ( validInput == true ) { 44 document.writeln( listType + startTag ); 45 46 for ( var i = 1; i <= 3; ++i ) 47 document.writeln( " List item " + i + " " ); 48 49 document.writeln( endTag ); 50 } 51 else 52 document.writeln( "Invalid choice: " + choice ); 53 // --> 54 55 56 57 58 Click Refresh (or Reload) to run the script again 59 60 If none of the case s match, variable validInput is set to false. If the user input a valid value, the list is created. Otherwise, the message “Invalid choice” is displayed in the browser.

13 13 Program Output

14 14 Program Output

15 15 switch Multiple-Selection Structure...... switch multiple-selection structure.

16 16 DoWhileTest.html 1 2 4 5 6 7 8 9 10 Using the do/while Repetition Structure 11 12 13 24 25 26 27 Each iteration of the do / while loop writes a line of text with a header element to the XHTML document. The loop stops when the value of counter is greater than 6.

17 17 Program Output

18 18 do/while Repetition Structure condition true action(s) false Flowcharting the do/while repetition structure.

19 19 BreakTest.html 1 2 4 5 6 7 8 9 10 11 Using the break Statement in a for Structure 12 13 14 15 26 27 28 29 When the value of variable count equals 5, the break statement causes program control to proceed to the first line outside the for loop.

20 20 Program Output

21 21 ContinueTest.html 1 2 4 5 6 7 8 9 10 11 Using the continue Statement in a for Structure 12 13 14 15 26 27 28 29 When the value of variable count equals 5, the continue statement causes program control to proceed to the next iteration of the for loop.

22 22 Program Output

23 23 BreakLabelTest.htm 1 2 4 5 6 7 8 9 10 Using the break Statement with a Label 11 12 13 33 34 35 36" class="image_link uk-text-large uk-margin-small-left uk-margin-small-right"> 24 24 B reakLabelTest.htm B reakLabelTest.htm Program Output 31 document.writeln( "End of script" ); 32 // --> 33 34 35 36

25 25 ContinueLabelTest.htm 1 2 4 5 6 7 8 9 10 Using the continue Statement with a Label 11 12 13 28 29 30 31 nextRow is the label for the continue statement.If the value of variable column is greater than the value of variable row, the continue statement causes the next interation of the loop. If the continue statement is performed, method write does not print the string “* “ in the XHTML document.

26 26 Program Output

27 27 LogicalOperators.html 1 2 4 5 6 7 8 9 10 Demonstrating the Logical Operators 11 12 13 44 45 46 47 These expressions demonstrate the use of logical NOT." class="image_link uk-text-large uk-margin-small-left uk-margin-small-right"> 28 28 LogicalOperators.html LogicalOperators.html Program Output 36 37 document.writeln( 38 " Logical NOT (!) " + 39 " !false: " + ( !false ) + 40 " !true: " + ( !true ) + " " ); 41 42 document.writeln( " " ); 43 // --> 44 45 46 47 These expressions demonstrate the use of logical NOT.

29 29 Summary of Structured Programming JavaScript’s single-entry/single-exit sequence, selection and repetition structures.

30 30 Summary of Structured Programming Unstructured flowchart.

31 31 JavaScript: Functions

32 32 Program Modules in JavaScript main worker1worker2worker3 worker4worker5 Hierarchical boss-function/worker-function relationship.

33 33 SquareInt.html 1 2 4 5 6 7 8 9 10 A Programmer-Defined square Function 11 12 13 31 32 33 34 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.

34 34 Program Output

35 35 Maximum.html 1 2 4 5 6 7 8 9 10 Finding the Maximum of Three Values 11 12 13 38 39 40 41 42 Click Refresh (or Reload) to run the script again 43 44" class="image_link uk-text-large uk-margin-small-left uk-margin-small-right"> 36 36 Maximum.html Maximum.html Program Output 36 } 37 // --> 38 39 40 41 42 Click Refresh (or Reload) to run the script again 43 44

37 37 Program Output

38 38 RandomInt.html 1 2 4 5 6 7 8 9 10 Shifted and Scaled Random Integers 11 12 13 33 34 35 The for loop creates 4 rows with 5 cells of a table.Each cell is populated with a random number generated by method random. Method floor rounds the number generated by method random down.

39 39 RandomInt.html RandomInt.html Program Output 36 37 Click Refresh (or Reload) to run the script again 38 39

40 40 RollD.html 1 2 4 5 6 7 8 9 10 Roll a Six-Sided Die 6000 Times 11 12 13 61 62 63 64 65 Click Refresh (or Reload) to run the script again 66 67 The results of the dice being rolled 600 times are displayed in a table." class="image_link uk-text-large uk-margin-small-left uk-margin-small-right"> 41 41 RollD.html 36 ++frequency5; 37 break; 38 case 6: 39 ++frequency6; 40 break; 41 } 42 } 43 44 document.writeln( "

" ); 46 document.writeln( " Face " + 47 " Frequency " ); 48 document.writeln( " 1 " + 49 frequency1 + " " ); 50 document.writeln( " 2 " + frequency2 + 51 " " ); 52 document.writeln( " 3 " + frequency3 + 53 " " ); 54 document.writeln( " 4 " + frequency4 + 55 " " ); 56 document.writeln( " 5 " + frequency5 + 57 " " ); 58 document.writeln( " 6 " + frequency6 + 59 " " ); 60 // --> 61 62 63 64 65 Click Refresh (or Reload) to run the script again 66 67 The results of the dice being rolled 600 times are displayed in a table.

42 42 Program Output

43 43 Craps.html 1 2 4 5 6 7 8 9 10 Program that Simulates the Game of Craps 11 12 13 87 88 89 90 91 92 93 Craps 94 Die 1 95 96 97 Die 2 98 99 100 Sum 101 102 103 Point 104 105 Function rollDice is called to simulate the rolling of two dice on the craps table." class="image_link uk-text-large uk-margin-small-left uk-margin-small-right"> 45 45 Craps.html 71 // roll the dice 72 function rollDice() 73 { 74 var die1, die2, workSum; 75 76 die1 = Math.floor( 1 + Math.random() * 6 ); 77 die2 = Math.floor( 1 + Math.random() * 6 ); 78 workSum = die1 + die2; 79 80 document.craps.firstDie.value = die1; 81 document.craps.secondDie.value = die2; 82 document.craps.sum.value = workSum; 83 84 return workSum; 85 } 86 // --> 87 88 89 90 91 92 93 Craps 94 Die 1 95 96 97 Die 2 98 99 100 Sum 101 102 103 Point 104 105 Function rollDice is called to simulate the rolling of two dice on the craps table. Methods random and floor are used to generate the values for the two dice. Referencing the names of form elements in the XHTML document, the vlaues of the dice are placed in their respective form fields.

46 46 Craps.html Craps.html Program Output 106 108 109 110 111

47 47 Program Output

48 48 Program Output

49 49 Scoping.html 1 2 4 5 6 7 8 9 10 A Scoping Example 11 12 13 52 53 54 55 56 The value of x is incremented." class="image_link uk-text-large uk-margin-small-left uk-margin-small-right"> 50 50 Scoping.html 35 36 document.writeln( " local x in functionA is " + 37 x + " after entering functionA" ); 38 ++x; 39 document.writeln( " local x in functionA is " + 40 x + " before exiting functionA" + " " ); 41 } 42 43 function functionB() 44 { 45 document.writeln( " global variable x is " + x + 46 " on entering functionB" ); 47 x *= 10; 48 document.writeln( " global variable x is " + 49 x + " on exiting functionB" + " " ); 50 } 51 // --> 52 53 54 55 56 The value of x is incremented. Function functionB multiplies the value of x by 10.

51 51 Program Output

52 52 JavaScript Global Functions

53 53 JavaScript Global Functions

54 54 Recursion 5! 5 * 4! 4 * 3! 3 * 2! 2 * 1! 1 5! 5 * 4! 4 * 3! 3 * 2! 2 * 1! 1 (a) Procession of recursive calls.(b) Values returned from each recursive call. 5! = 5 * 24 = 120 is returned 4! = 4 * 6 = 24 is returned 2! = 2 * 1 = 2 is returned 3! = 3 * 2 = 6 is returned 1 returned Recursive evaluation of 5!. Final value = 120

55 55 FactorialTest.html 1 2 4 5 6 7 8 9 Recursive Factorial Function 10 11 12 document.writeln( " Factorials of 1 to 10 " ); 13 document.writeln( 14 " " ); 15 16 for ( var i = 0; i <= 10; i++ ) 17 document.writeln( " " + i + "! " + 18 factorial( i ) + " " ); 19 20 document.writeln( " " ); 21 22 // Recursive definition of function factorial 23 function factorial( number ) 24 { 25 if ( number <= 1 ) // base case 26 return 1; 27 else 28 return number * factorial( number - 1 ); 29 } 30 31 32 Calling function factorial and passing it the value of i. Variable number gets the value of variable i.Call to function factorial and passing it 1 less than the current value of number.

56 56 Program Output

57 57 FibonacciTest.html 1 2 4 5 6 7 8 9 Recursive Fibonacci Function 10 11 12 13 // Event handler for button XHTML component in myForm 14 function getFibonacciValue() 15 { 16 var value = parseInt( 17 document.myForm.number.value ); 18 window.status = 19 "Calculating Fibonacci number for " + value; 20 document.myForm.result.value = fibonacci( value ); 21 window.status = "Done calculating Fibonacci number"; 22 } 23 24 // Recursive definition of function fibonacci 25 function fibonacci( n ) 26 { 27 if ( n == 0 || n == 1 ) // base case 28 return n; 29 else 30 return fibonacci( n - 1 ) + fibonacci( n - 2 ); 31 } 32 33 34 Convert from a string to an integer the value the user typed into the number text field. Display the number the user entered in the status bar. The status bar displays a message that the call to function fibonacci is complete. Test for base case ( n equal to 1 or 0 ). Two recursive calls are made if n is greater than 1.

58 58 FibonacciTest.html FibonacciTest.html Program Output 35 36 37 38 Enter an integer 39 40 { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.com/12/3415379/slides/slide_58.jpg", "name": "58 FibonacciTest.html FibonacciTest.html Program Output 35 36 37 38 Enter an integer 39 40

59 59 Program Output

60 60 Example Using Recursion: Fibonacci Series Set of recursive calls to function fibonacci.

61 61 JavaScript: Arrays

62 62 Arrays c[ 6 ] -45 6 0 72 1543 -89 0 62 -3 1 6453 78 Name of array (Note that all elements of this array have the same name, c ) 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 A 12-element array.

63 63 InitArray.html 1 2 4 5 6 7 8 9 10 Initializing an Array 11 12 13 52 53 54 55 The first time function ouputArray is called, variable header gets the value of Array n1 contains and variable theArray gets the value of n1." class="image_link uk-text-large uk-margin-small-left uk-margin-small-right"> 64 64 InitArray.html 33 // output "header" followed by a two-column table 34 // containing subscripts and elements of "theArray" 35 function outputArray( header, theArray ) 36 { 37 document.writeln( " " + header + " " ); 38 document.writeln( "

" ); 40 41 document.writeln( "
Subscript " + 43 " Value " ); 44 45 for ( var i = 0; i < theArray.length; i++ ) 46 document.writeln( " " + i + " " + 47 theArray[ i ] + " " ); 48 49 document.writeln( " " ); 50 } 51 // --> 52 53 54 55 The first time function ouputArray is called, variable header gets the value of “Array n1 contains ” and variable theArray gets the value of n1. The second time function ouputArray is called, variable header gets the value of “Array n2 contains ” and variable theArray gets the value of n2.

65 65 Program Output

66 66 InitArray2.html 1 2 4 5 6 7 8 9 10 Initializing an Array with a Declaration 11 12 13 46 47 48 49" class="image_link uk-text-large uk-margin-small-left uk-margin-small-right"> 67 67 InitArray2.html 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( " " + header + " " ); 33 document.writeln( "

" ); 35 document.writeln( "
Subscript " + 37 " Value " ); 38 39 for ( var i = 0; i < theArray.length; i++ ) 40 document.writeln( " " + i + " " + 41 theArray[ i ] + " " ); 42 43 document.writeln( " " ); 44 } 45 // --> 46 47 48 49

68 68 Program Output

69 69 SumArray.html 1 2 4 5 6 7 8 9 10 Sum the Elements of an Array 11 12 13 31 32 33 34 The for loop sums the values contained in the 10- element integer array called theArray. Variable element is assigned a subscript in the range of 0 up to, but not including, theArray.length.

70 70 Program Output

71 71 RollDie.html 1 2 4 5 6 7 8 9 10 Roll a Six-Sided Die 6000 Times 11 12 13 34 35 Referencing Array frequency replaces the switch statement used in Chapter 10’s example.

72 72 RollDie.html RollDie.html Program Output 36 37 38 Click Refresh (or Reload) to run the script again 39 40

73 73 PassArray.html 1 2 4 5 6 7 8 9 10 Passing Arrays and Individual Array 11 Elements to Functions 12 13 14 60 61 62 63 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." class="image_link uk-text-large uk-margin-small-left uk-margin-small-right"> 74 74 PassArray.html 35 document.writeln( 36 " a[3] after modifyElement: " + a[ 3 ] ); 37 } 38 39 // outputs "header" followed by the contents of "theArray" 40 function outputArray( header, theArray ) 41 { 42 document.writeln( 43 header + theArray.join( " " ) + " " ); 44 } 45 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( " value in modifyElement: " + e ); 58 } 59 // --> 60 61 62 63 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. Multiply each element in theArray by 2.

75 75 Program Output

76 76 Sort.html 1 2 4 5 6 7 8 9 10 Sorting an Array with Array Method sort 11 12 13 37 38 39 40" class="image_link uk-text-large uk-margin-small-left uk-margin-small-right"> 77 77 Sort.html Sort.html Program Output 31 // comparison function for use with sort 32 function compareIntegers( value1, value2 ) 33 { 34 return parseInt( value1 ) - parseInt( value2 ); 35 } 36 // --> 37 38 39 40

78 78 LinearSearch.htm 1 2 4 5 6 7 8 9 10 Linear Search of an Array 11 12 13 47 48 49 50 51 52 53 Enter integer search key 54 55 57 58 Result 59 60 61 62 Function linearSearch compares each each element with a search key." class="image_link uk-text-large uk-margin-small-left uk-margin-small-right"> 79 79 LinearSearch.htm 36 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 48 49 50 51 52 53 Enter integer search key 54 55 57 58 Result 59 60 61 62 Function linearSearch compares each each element with a search key. Variable theArray gets the value of Array a and variable key gets the value of variable searchKey.

80 80 Program Output

81 81 BinarySearch.htm 1 2 4 5 6 7 8 9 10 Binary Search 11 12 13 87 88 89 90 91 92 Enter integer search key 93 94 96 Result 97 98 99 100 101 Function buildOutput creates the markup that displays the results of the search.

84 84 Program Output

85 85 Multiple-Subscripted Arrays Double-subscripted array with three rows and four columns.

86 86 InitArray3.html 1 2 4 5 6 7 8 9 10 Initializing Multidimensional Arrays 11 12 13 41 42 43 44 Referencing the multidimensional array theArray." class="image_link uk-text-large uk-margin-small-left uk-margin-small-right"> 87 87 InitArray3.html InitArray3.html Program Output 30 for ( var i in theArray ) { 31 32 for ( var j in theArray[ i ] ) 33 document.write( theArray[ i ][ j ] + " " ); 34 35 document.writeln( " " ); 36 } 37 38 document.writeln( " " ); 39 } 40 // --> 41 42 43 44 Referencing the multidimensional array theArray.

88 88 End of Lecture


Download ppt "1 JavaScript: Control Structures II. 2 whileCounter.html 1 2 "

Similar presentations


Ads by Google