1. Javascript Functions COMP-110 Recitation Oct 14, 2011

2. Review: Functions Which of the following is/are false? A) Functions are like sub-programs called from within the program. B) alert() is a function. C) A function can take zero inputs. D) A function cannot be called from within another function E) A function need not return any value. Answer: (D)

3. Review: Functions Function Definition: function add( x, y ) { return x + y; } Function Call: var result = add( x, y ); Classify: function bar(input) { alert(input) } function f() { return 5; } var g = f(); bar(“input”); Definition Call

4. Review: Functions Identify function definitions and calls below: alert("Hello World"); var course = "comp110" var result = isCool( course ); document.write( course + " is " + result ); function isCool( text ) { if( text == "comp110" ) return "cool"; else return "not cool"; } Function call Function call Function Definition

5. Exercise 1(a): Program w/ functions Write a program – That declares and initializes 2 variables a and b. – Write a function and pass a and b to the function – Function prints the minimum of a and b. Answer link: http://www.unc.edu/~somashek/exercise1(a).html http://www.unc.edu/~somashek/exercise1(a).html

6. Exercise 1(b): Program w/ functions Extend exercise 1(a) – Now function returns the minimum of a and b to the main program – Print the returned value in the main program. Answer link: http://www.unc.edu/~somashek/exercise1(b).html http://www.unc.edu/~somashek/exercise1(b).html

7. Exercise 1(c): Program w/ functions Extend exercise 1 (b) – Add another function that computes the average of a and b. – Returns the average value. – Main program displays the value. Answer link: http://www.unc.edu/~somashek/exercise1(c).html http://www.unc.edu/~somashek/exercise1(c).html

8. Exercise 1(d): Program w/ functions Extend exercise 1 (c) – Add another function that receives a and b as input. function add10( a, b ) (Use same names for formal parameters) – Adds 10 to both a and b inside the function. – Print the values of a and b inside the function. – Print the values of a and b in the main program after the function call. What did you observe? Answer link: http://www.unc.edu/~somashek/exercise1(d).html http://www.unc.edu/~somashek/exercise1(d).html

9. Exercise 2(a): Name the function function ………………………………………( num ) { if( num < 0 ) return -1 * num; else return num; } absoluteValue

10. Exercise 2(b): Name the function function …………………………( a, b ) { if( (a – b) > 0 ) return a; else return b; } maximum

11. Exercise 3: Replace w/ functions Identify the blocks of code that can be put into a function and rewrite it to make it compact and readable: for( var i = 1; i <= 30; i++ ) { if((i >= 5 && i = 20 && i <= 30)) { var x = i + 10; document.write( x ); var y = x + 10; document.write( y ); var z = y + 10; document.write( z ); } }

12. Exercise 3: Replace w/ functions for( var i = 1; i <= 30; i++ ) { if((i >= 5 && i = 20 && i <= 30)) { var x = i + 10; document.write( x ); var y = x + 10; document.write( y ); var z = y + 10; document.write( z ); } } function Add( a, b ) { return a + b; }

13. Exercise 3: Replace w/ functions for( var i = 1; i <= 30; i++ ) { if((i >= 5 && i = 20 && i <= 30)) { var x = Add( i, 10 ); document.write( x ); var y = Add( x, 10 ); document.write( y ); var z = Add( y, 10 ); document.write( z ); } } But it does not make the code compact. We can still do better. How? function Add( a, b ) { return a + b; }

14. Exercise 3: Replace w/ functions for( var i = 1; i <= 30; i++ ) { if((i >= 5 && i = 20 && i <= 30)) { var x = Add( i, 10 ); document.write( x ); var y = Add( x, 10 ); document.write( y ); var z = Add( y, 10 ); document.write( z ); } } 10 is common argument. So we can move it inside the function. function Add10( a ) { return a + 10; }

15. Exercise 3: Replace w/ functions for( var i = 1; i <= 30; i++ ) { if((i >= 5 && i = 20 && i <= 30)) { var x = Add10( i ); document.write( x ); var y = Add10( x ); document.write( y ); var z = Add10( y ); document.write( z ); } } Anything else is common? function Add10( a ) { return a + 10; }

16. Exercise 3: Replace w/ functions for( var i = 1; i <= 30; i++ ) { if((i >= 5 && i = 20 && i <= 30)) { var x = Add10( i ); document.write( x ); var y = Add10( x ); document.write( y ); var z = Add10( y ); document.write( z ); } } Document.write() is common. function Add10AndPrint( a ) { var x = a + 10; document.write( x ); return x; }

17. Exercise 3: Replace w/ functions for( var i = 1; i <= 30; i++ ) { if((i >= 5 && i = 20 && i <= 30)) { var x = Add10AndPrint(i); var y = Add10AndPrint(x); var z = Add10AndPrint(y); } function Add10AndPrint( a ) { var x = a + 10; document.write( x ); return x; } Is there anything else that we can do to improve readability?

18. Exercise 3: Replace w/ functions for( var i = 1; i <= 30; i++ ) { if( isInRange(i) ) { var x = Add10AndPrint(i); var y = Add10AndPrint(x); var z = Add10AndPrint(y); } function Add10AndPrint( a ) { var x = a + 10; document.write( x ); return x; } function isInRange( i ) { return((i >= 5 && i <= 10) || (i >= 20 && i <= 30)) } NOTE: How functions make the original code compact and readable.

19. Exercise 4: Trace What is the output of the following: – Max returns the maximum of a and b – Min returns the minimum of a and b var a = 10, b = 20, x = 15, y = 5; var r = max( min( max(a, b), max(x, y) ), max( min(a, b), min(x, y) ) ); r = 15