REVIEW. while (condition) { <body> for (<init> ; <condition> ; <increment>) { } if (condition) { <command> } else { <command> }

Size: px

Start display at page:

Download "REVIEW. while (condition) { <body> for (<init> ; <condition> ; <increment>) { } if (condition) { <command> } else { <command> }"

Milton Carpenter
6 years ago
Views:

1 REVIEW while (condition) { } <body> for (<init> ; <condition> ; <increment>) { } if (condition) { <command> } else { <command> }

2 CHALLENGE PROBLEMS (from lecture 4) // sum up all elements of an array A = [1,2,3,4,5,6,7,8,9,10];

3 CHALLENGE PROBLEMS (from lecture 4) // sum up all elements of an array A = [1,2,3,4,5,6,7,8,9,10]; for (var i=0; i<a.length; i++) { }

4 CHALLENGE PROBLEMS (from lecture 4) // sum up all elements of an array A = [1,2,3,4,5,6,7,8,9,10]; for (var i=0; i<a.length; i++) { } s = s + A[i];

5 CHALLENGE PROBLEMS (from lecture 4) // sum up all elements of an array A = [1,2,3,4,5,6,7,8,9,10]; s = 0; for (var i=0; i<a.length; i++) { s = s + A[i]; }

6 CHALLENGE PROBLEMS (from lecture 4) // sum up all elements of an array A = [1,2,3,4,5,6,7,8,9,10]; s = 0; for (var i=0; i<a.length; i++) { s = s + A[i]; } print( s );

7 CHALLENGE PROBLEMS (from lecture 4) // reverse order of items in array A = [1,2,3,4,5,6,7,8,9,10];

8 CHALLENGE PROBLEMS (from lecture 4) // reverse order of items in array A = [1,2,3,4,5,6,7,8,9,10];

9 CHALLENGE PROBLEMS (from lecture 4) // reverse order of items in array A = [1,2,3,4,5,6,7,8,9,10];

10 CHALLENGE PROBLEMS (from lecture 4) // reverse order of items in array A = [1,2,3,4,5,6,7,8,9,10];

11 CHALLENGE PROBLEMS (from lecture 4) // reverse order of items in array A = [1,2,3,4,5,6,7,8,9,10];

12 CHALLENGE PROBLEMS (from lecture 4) // reverse order of items in array A = [1,2,3,4,5,6,7,8,9,10];

13 CHALLENGE PROBLEMS (from lecture 4) // reverse order of items in array A = [1,2,3,4,5,6,7,8,9,10]; for (var i=0; i<a.length; i++) { j =??? }

14 CHALLENGE PROBLEMS (from lecture 4) // reverse order of items in array A = [1,2,3,4,5,6,7,8,9,10]; for (var i=0; i<a.length; i++) { j = A.length-i-1; }

15 CHALLENGE PROBLEMS (from lecture 4) // reverse order of items in array A = [1,2,3,4,5,6,7,8,9,10]; for (var i=0; i<a.length; i++) { j = A.length-i-1; A[i] = A[j]; A[j] = A[i]; }

16 CHALLENGE PROBLEMS (from lecture 4) // reverse order of items in array A = [1,2,3,4,5,6,7,8,9,10]; for (var i=0; i<a.length; i++) { j = A.length-i-1; temp = A[i]; A[i] = A[j]; A[j] = temp; } print( A );

17 CHALLENGE PROBLEMS (from lecture 4) // reverse order of items in array A = [1,2,3,4,5,6,7,8,9,10]; for (var i=0; i<a.length; i++) { j = A.length-i-1; temp = A[i]; A[i] = A[j]; A[j] = temp; } print( A ); output = [1,2,3,4,5,6,7,8,9,10]

18 CHALLENGE PROBLEMS (from lecture 4) // reverse order of items in array A = [1,2,3,4,5,6,7,8,9,10]; for (var i=0; i<a.length/2; i++) { j = A.length-i-1; temp = A[i]; A[i] = A[j]; A[j] = temp; } print( A );

19 Function parameters: we pass values into a function

20 Function parameters: we pass values into a function var <name> = function() { <command 1>; <command 2>; <command 3>;

21 Function parameters: we pass values into a function // Draw a square with upper left x, y and side length s var square = function(x, y, s) { line(x, y, x+s, y); line(x+s, y, x+s, y+s); line(x+s, y+s, x, y+s); line(x, y+s, x, y); square(10, 20, 20);

22 Function parameters: we pass values into a function // Draw a square with upper left x, y and side length s var square = function(x, y, s) { line(x, y, x+s, y); line(x+s, y, x+s, y+s); line(x+s, y+s, x, y+s); line(x, y+s, x, y); square(10, 20, 20);

23 Function parameters: we pass values into a function // Draw a square with upper left x, y and side length s var square = function(x, y, s) { line(x, y, x+s, y); line(x+s, y, x+s, y+s); line(x+s, y+s, x, y+s); line(x, y+s, x, y); square(10, 20, 20);

24 Function parameters: we pass values into a function // Draw a square with upper left x, y and side length s var square = function(x, y, s) { line(x, y, x+s, y); line(x+s, y, x+s, y+s); line(x+s, y+s, x, y+s); line(x, y+s, x, y); square(10, 20, 20);

25 Function parameters: we pass values into a function // Draw a square with upper left x, y and side length s var square = function(x, y, s) { line(x, y, x+s, y); line(x+s, y, x+s, y+s); line(x+s, y+s, x, y+s); line(x, y+s, x, y); square(10, 20, 20); variables only have scope inside of function

26 var drawtree = function() { var x = 200; var y = 200; nostroke(); fill(100, 50, 0); // brown rect(x-5, y-50, 10, 50); stroke(0, 140, 0); fill(0, 195, 0); // green ellipse(x+0, y-50, 40, 40); drawtree();

27 var drawtree = function() { var x = 200; var y = 200; nostroke(); fill(100, 50, 0); // brown rect(x-5, y-50, 10, 50); stroke(0, 140, 0); fill(0, 195, 0); // green ellipse(x+0, y-50, 40, 40); drawtree();

28 var drawtree = function() { var x = 200; var y = 200; nostroke(); fill(100, 50, 0); // brown rect(x-5, y-50, 10, 50); stroke(0, 140, 0); fill(0, 195, 0); // green ellipse(x+0, y-50, 40, 40); drawtree();

29 EXERCISE Write a function drawtree that allows a tree to be drawn so that the bottom center of the tree is positioned at x and y coordinates specified as function parameters. Test your code by calling the function a few times. nostroke(); fill(100, 50, 0); // brown rect(195, 150, 10, 50); stroke(0, 140, 0); fill(0, 195, 0); // green ellipse(200, 150, 40, 40);

30 var drawtree = function(x, y) { nostroke(); fill(100, 50, 0); // brown rect(x-50, y-50, 10, 50); stroke(0, 140, 0); fill(0, 195, 0); // green ellipse(x+0, y-50, 40, 40); drawtree(100, 400); drawtree(130, 400); drawtree(300, 400);

31 var drawtree = function(x, y) { nostroke(); fill(100, 50, 0); // brown rect(x-50, y-50, 10, 50); stroke(0, 140, 0); fill(0, 195, 0); // green ellipse(x+0, y-50, 40, 40); drawtree(100, 400); drawtree(130, 400); drawtree(300, 400); variables only have scope inside of function

32 Function parameters: we return values from a function var x = 1 + 2; print( x );

33 Function parameters: we return values from a function addition is a function that returns the sum var x = 1 + 2; print( x );

34 Function parameters: we return values from a function var x = Math.sqrt(25); print( x );

35 Function parameters: we return values from a function Math is a Javascript object with many functions. var x = Math.sqrt(25); print( x );

36 Function parameters: we return values from a function sqrt takes a parameter as input var x = Math.sqrt(25); print( x );

37 Function parameters: we return values from a function and returns a value var x = Math.sqrt(25); print( x );

38 Function parameters: we return values from a function print( Math.sqrt(25) );

39 Function parameters: we return values from a function print( Math.sqrt(25) ); Evaluate function.

40 Function parameters: we return values from a function print( Math.sqrt(25) ); Evaluate function. Value returned from sqrt is parameter to function print

41 Function parameters: we return values from a function // print integer factors of 100 for( var i=1; i<???; i++ ) { if( 100 % i === 0 ) { print( i ); } }

42 Function parameters: we return values from a function // print integer factors of 100 for( var i=1; i<10; i++ ) { if( 100 % i === 0 ) { print( i ); } }

43 Function parameters: we return values from a function // print integer factors of 100 for( var i=1; i<math.sqrt(100); i++ ) { if( 100 % i === 0 ) { print( i ); } }

44 Function parameters: we return values from a function // print integer factors var x = 100; for( var i=1; i<math.sqrt(x); i++ ) { if( x % i === 0 ) { print( i ); } }

45 Math Math.sqrt(100); // returns 10 Math.round(4.4); // returns 4 Math.round(4.7); // returns 5 Math.pow(8,2); // returns 64 Math.abs(-4.7); // returns 4.7 Math.cos(90 * Math.PI/180); // returns 0 Math.min(0, 100, -6, 24); // returns -6 Math.max(0, 100, -6, 24); // returns 100 Math.random(); // returns a random number [0,1]

46 Define functions that return values var computesqrt = function(x) { print( Math.sqrt(x) ); computesqrt(100);

47 Define functions that return values var computesqrt = function(x) { return( Math.sqrt(x) ); print( computesqrt(100) );

48 Define functions that return values var computesqrt = function(x) { return( Math.sqrt(x) ); print( computesqrt(100) ); return!= print

49 Define functions that return values var computesqrt = function(x) { return( Math.sqrt(x) ); print( computesqrt(100) );

50 Define functions that return values var computesqrt = function(x) { return( Math.sqrt(x) ); print( computesqrt(100) );

51 Define functions that return values var computesqrt = function(x) { return( Math.sqrt(x) ); var x = computesqrt(100);

52 Define functions that return values var computesqrt = function(x) { return( Math.sqrt(x) ); computesqrt(100); output?

53 Define functions that return values var computesqrt = function(x) { return( Math.sqrt(x) ); print( hello ); computesqrt(100); output?

54 Define functions that return values var number = 39; if( number % 2 === 0 ) { print( even ); } else { print( odd ); }

55 EXERCISE Write a function that returns even if the parameter passed to it is even and odd otherwise. var number = 39; if( number % 2 === 0 ) { print( "even" ); } else { print( "odd" ); }

56 var iseven = function( number ) { if( number % 2 === 0 ) { return( "even" ); } else { return( "odd" ); }

57 var iseven = function( number ) { if( number % 2 === 0 ) { return( "even" ); } else { return( "odd" ); } print( iseven( 39 ) ); print( iseven( 40 ) );

58 var iseven = function( number ) { if( number % 2 === 0 ) { return( "even" ); } else { return( "odd" ); } var x = iseven( 39 );

59 var iseven = function( number ) { if( number % 2 === 0 ) { return( true ); } else { return( false ); } print( iseven( 39 ) );

60 var iseven = function( number ) { if( number % 2 === 0 ) { return( true ); } else { return( false ); } print( iseven( 39 ) ); var iseven = function( number ) { return( number % 2 === 0 ); print( iseven( 39 ) );

61 var iseven = function( number ) { if( number % 2 === 0 ) { return( true ); } else { return( false ); } print( iseven( 39 ) ); var iseven = function( number ) { return( number % 2 === 0 ); print( iseven( 39 ) );

62 Scope var somefunction = function() { var x = 4; print( x ); somefunction(); print( x );

63 Scope var somefunction = function() { var x = 4; print( x ); somefunction(); print( x );

64 Scope var somefunction = function() { var x = 4; print( x ); somefunction(); print( x );

65 Scope var somefunction = function() { var x = 4; print( x ); somefunction(); print( x );

66 Scope var somefunction = function() { var x = 4; print( x ); somefunction(); print( x );

67 Scope var somefunction = function() { var x = 4; the scope of x is in the print( x ); body of this function somefunction(); print( x ); error

68 Scope var somefunction = function() { var x = 4; print( x ); var x = 10; somefunction(); print( x ); what is the output?

69 Scope var somefunction = function() { var x = 4; print( x ); var x = 10; somefunction(); print( x ); global variable: (generally) bad

70 Frames var somefunction = function() { var x = 4; print( x ); var anotherfunction = function(y) { return( Math.pow(2,y) ); var z = 10; somefunction(); z = anotherfunction(8); print( z );

71 Frames var somefunction = function() { var x = 4; print( x ); var anotherfunction = function(y) { return( Math.pow(2,y) ); var z = 10; somefunction(); z = anotherfunction(8); print( z ); z = 10 global frame

72 Frames var somefunction = function() { var x = 4; print( x ); x = 4 frame var anotherfunction = function(y) { return( Math.pow(2,y) ); var z = 10; somefunction(); z = anotherfunction(8); print( z ); z = 10 global frame

73 Frames var somefunction = function() { var x = 4; print( x ); var anotherfunction = function(y) { return( Math.pow(2,y) ); var z = 10; somefunction(); z = anotherfunction(8); print( z ); frame z = 10 global frame

74 Frames var somefunction = function() { var x = 4; print( x ); var anotherfunction = function(y) { return( Math.pow(2,y) ); var z = 10; somefunction(); z = anotherfunction(8); print( z ); z = 256 global frame

75 Frames var somefunction = function() { var x = 4; return( x ); y = somefunction(); print( y ); print( x );

76 Frames var somefunction = function() { var x = 4; return( x ); y = somefunction(); print( y ); print( x );???

77 Frames var somefunction = function() { var x = 4; return( x ); y = somefunction(); print( y ); print( x ); 4

78 Frames var somefunction = function() { var x = 4; return( x ); y = somefunction(); print( y ); print( x );???

79 Frames var somefunction = function() { var x = 4; return( x ); y = somefunction(); print( y ); print( x ); error

80 Frames var somefunction = function() { var x = 4; return( x ); var x = 5; print( somefunction() ); print( x );

81 Frames var somefunction = function() { var x = 4; return( x ); var x = 5; print( somefunction() ); print( x ); global frame

82 Frames var somefunction = function() { var x = 4; return( x ); local frame var x = 5; print( somefunction() ); print( x );

83 Frames var somefunction = function() { var x = 4; return( x ); var x = 5; print( somefunction() ); print( x );???

84 Frames var somefunction = function() { var x = 4; return( x ); var x = 5; print( somefunction() ); print( x ); 4

85 Frames var somefunction = function() { var x = 4; return( x ); var x = 5; print( somefunction() ); print( x );???

86 Frames var somefunction = function() { var x = 4; return( x ); var x = 5; print( somefunction() ); print( x ); 5

87 Frames var somefunction = function() { return( x ); var x = 5; print( somefunction() ); print( x );

88 Frames var somefunction = function() { return( x ); var x = 5; print( somefunction() ); print( x );???

89 Frames var somefunction = function() { return( x ); var x = 5; print( somefunction() ); print( x ); 5

90 Frames var somefunction = function() { return( x ); var x = 5; print( somefunction() ); print( x );???

91 Frames var somefunction = function() { return( x ); var x = 5; print( somefunction() ); print( x ); 5

92 Callbacks var surprise = function() { print( "surprise" ); surprise();

93 Callbacks var surprise = function() { print( "surprise" ); settimeout( surprise, 5000 );

94 Callbacks var surprise = function() { print( "surprise" ); settimeout( surprise, 5000 ); built-in Javascript function

95 Callbacks var surprise = function() { print( "surprise" ); settimeout( surprise, 5000 ); a function

96 Callbacks var surprise = function() { print( "surprise" ); settimeout( surprise, 5000 ); call function after this many milliseconds (1000 ms = 1 s)

97 Callbacks var countdown = function() { while( counter > 0 ){ print( counter ); counter = counter - 1; } print( "Blast off!" ); print( "prepare for countdown " ); var counter = 10; countdown();

98 Callbacks var countdown = function() { while( counter > 0 ){ print( counter ); counter = counter - 1; } print( "Blast off!" ); print( "prepare for countdown " ); var counter = 10; countdown(); prepare for countdown Blast off!

99 Callbacks var countdown = function() { while( counter > 0 ){ print( counter ); counter = counter - 1; } print( "Blast off!" ); print( "prepare for countdown " ); var counter = 10; settimeout( countdown, 1000 );

100 Callbacks var countdown = function() { while( counter > 0 ){ print( counter ); counter = counter - 1; } print( "Blast off!" ); prepare for countdown print( "prepare for countdown " ); var counter = 10; settimeout( countdown, 1000 );

101 Callbacks var countdown = function() { while( counter > 0 ){ print( counter ); counter = counter - 1; } print( "Blast off!" ); print( "prepare for countdown " ); var counter = 10; settimeout( countdown, 1000 ); prepare for countdown Blast off!

102 Callbacks var countdown = function() { if( counter > 0 ){ print( counter ); counter = counter - 1; } else { print( "Blast off!" ); } print( "prepare for countdown " ); var counter = 10; settimeout( countdown, 1000 );

103 Callbacks var countdown = function() { if( counter > 0 ){ print( counter ); counter = counter - 1; } else { print( "Blast off!" ); } prepare for countdown print( "prepare for countdown " ); var counter = 10; settimeout( countdown, 1000 );

104 Callbacks var countdown = function() { if( counter > 0 ){ print( counter ); counter = counter - 1; } else { print( "Blast off!" ); } prepare for countdown 10 print( "prepare for countdown " ); var counter = 10; settimeout( countdown, 1000 );

105 Callbacks var countdown = function() { if( counter > 0 ){ print( counter ); counter = counter - 1; settimeout( countdown, 1000); } else { print( "Blast off!" ); } print( "prepare for countdown " ); var counter = 10; settimeout( countdown, 1000 );

106 Callbacks var countdown = function() { if( counter > 0 ){ print( counter ); counter = counter - 1; settimeout( countdown, 1000); } else { print( "Blast off!" ); } print( "prepare for countdown " ); var counter = 10; settimeout( countdown, 1000 ); global variables are dangerous but can also be convenient

107 Callbacks and animation var drawframe = function() { background(); ellipse(x, y, 20, 20); // draw a ball // update the ball position x += vx; y += vy; var FRAME_DELAY = 50; // initial position for the ball, in global frame so // available each time: var x = 0; var y = 400; // initial velocity for ball var vx = 4; var vy = -4; if( 'timeoutid' in window ) cleartimeout( timeoutid ); timeoutid = setinterval(drawframe, FRAME_DELAY); animation

108 Callbacks and animation var drawframe = function() { background(); ellipse(x, y, 20, 20); // draw a ball // update the ball position x += vx; y += vy; var FRAME_DELAY = 50; // initial position for the ball, in global frame so // available each time: var x = 0; var y = 400; // initial velocity for ball var vx = 4; var vy = -2; if( 'timeoutid' in window ) cleartimeout( timeoutid ); timeoutid = setinterval(drawframe, FRAME_DELAY); how do we make ball bounce?

109 Callbacks and animation var drawframe = function() { background(); ellipse(x, y, 20, 20); // draw a ball // update the ball position x += vx; y += vy; if( x >= 400 x <= 0 ) vx = -vx; if( y >= 400 y <= 0 ) vy = -vy; var FRAME_DELAY = 50; // initial position for the ball, in global frame so // available each time: var x = 100; var y = 100; // initial velocity for ball var vx = 4; var vy = -2; if( 'timeoutid' in window ) cleartimeout( timeoutid ); timeoutid = setinterval(drawframe, FRAME_DELAY);

THE JAVASCRIPT ARTIST 15/10/2016

THE JAVASCRIPT ARTIST 15/10/2016 Objectives Learn how to program with JavaScript in a fun way! Understand the basic blocks of what makes a program. Make you confident to explore more complex features of