Javascript Functions

JavascriptFunctions COMP-110 Recitation Oct 14, 2011

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)

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

Review: Functions • Identify function definitions and calls below: <script type="text/javascript"> alert("Hello World"); varcourse = "comp110" varresult = isCool( course ); document.write( course + " is " + result ); functionisCool( text ) { if( text == "comp110" ) return "cool"; else return "not cool"; } </script> Function call Function call Function call Function Definition

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

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

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

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

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

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

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 <= 10) || (i >= 20 && i <= 30)) { varx = i + 10; document.write( x ); vary = x + 10; document.write( y ); varz = y + 10; document.write( z ); } }

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

Exercise 3: Replace w/ functions for( var i = 1; i <= 30; i++ ) { if((i >= 5 && i <= 10) || (i >= 20 && i <= 30)) { varx = Add( i, 10 ); document.write( x ); vary = Add( x, 10 ); document.write( y ); varz = 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; }

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

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

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

Exercise 3: Replace w/ functions for( var i = 1; i <= 30; i++ ) { if((i >= 5 && i <= 10) || (i >= 20 && i <= 30)) { varx = Add10AndPrint(i); vary = Add10AndPrint(x); varz = 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?

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

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

Javascript Functions