5 th and 4 th ed: Chapters 9, 10, 11 SY306 Web and Databases for Cyber Operations SlideSet #7: JavaScript Functions and Arrays

Function Definitions Syntax and terminology: function function-name ( parameter-list ) { declarations and statements } Example /* Returns the sum of x and y */ function doAdd(x, y) { var sum = x + y; return sum; }

Function Invocation Built-in functions User-defined functions Arguments are passed ______________, so original values in caller are ________________

Scope – Where is a variable visible in the program? function dog(g) { h = 3; var sum = g+h; document.write(" Sum is: "+sum); } g = 7; h = 5; document.writeln(" g: "+g+" h: "+h); dog(g); document.writeln(" g: "+g+" h: "+h); document.writeln(" sum: "+sum); document.writeln(“ End of script"); Output?

JavaScript Scope Rules Variables declared inside a function: –Explicitly (with var) –Implicitly (just used) - Consider if variable used should be local or global? Variables declared outside a function: –Explicitly –Implicitly

Exercise #1 – Write a function that takes two arguments and returns the minimum of the two; write code to invoke the function

Exercise #2 – What’s the output? function fun1 (x) { x = x + 3; y = y + 4; document.writeln(" FUN1: "+x+ "," +y); } function fun2 () { var y; x = x + 10; y = y + 20; document.writeln(" FUN2: "+x+ "," +y); } x = 1; y = 2; document.writeln(" MAIN #1: "+x+ "," +y); fun1(x); document.writeln(" MAIN #2: "+x+ "," +y); fun1(y); document.writeln(" MAIN #3: "+x+ "," +y); fun2(); document.writeln(" MAIN #4: "+x+ "," +y);

Exercise #3 – Write a function indentPrint(N, str1, str2) that outputs the following: a.) ‘N’ dashes, followed by the string ‘str1’, then b.) ‘N’ dashes, followed by the string ‘str2’, then Use document.write() for output. You can assume N is an integer.

Connecting JavaScript and HTML Where to place the JavaScript –In the.html file –In a separate file How to invoke the script? –Place non-function code in the –

Everything you ever wanted to know about arrays… function initializeArrays() { var n1 = new Array( 5 ); // allocate 5-element Array var n2 = new Array(); // allocate empty Array for ( var i = 0; i < n1.length; i++) n1[i] = i; for ( i = 0; i < 5; ++i ) n2[i] = i; outputArray( "Array n1 contains", n1 ); outputArray( "Array n2 contains", n2 ); } function outputArray( header, theArray ) { document.writeln( " " + header + " " ); for ( var num in theArray ) { document.write(theArray[num] + “ " ); } document.writeln( “ " ); } initializeArrays();

…but were afraid to ask.

Scope – Revisited function mystery( x, y ) { for ( var ii = 0; ii < x.length; ++ii ) x[ii] = x[ii] * y; document.writeln(" Revised Array: ",x); } var myArray = [3, 4, 5]; var factor = 2; document.writeln (" myArray: ", myArray); mystery(myArray, factor); document.writeln (" myArray: ", myArray); document.writeln (" factor : ", factor); Arguments are passed ______________, so original argument values in caller are ________________ BUT array/object arguments are a “reference”, so contents may be ___________

Useful Array Functions.push(arg) var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.push("Kiwi"); The result of fruits will be: Banana, Orange, Apple, Mango, Kiwi.indexOf var stuff=new Array('fruit', 'apples'); alert(stuff.indexOf('apples')); //result is 1.sort var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.sort(); //The result of fruits will be: Apple, Banana, Mango, Orange.sort(comparatorFunction) //sorts numbers in array var points = [40, 100, 1, 5, 25, 10]; points.sort(function(a, b){return a-b}); //Result will be ascending: 1, 5, 10, 25, 40, 100 points.sort(function(a, b){return b-a}); //Result will be descending: 100, 40, 25, 10, 5, 1

Exercise #4 a.) Write a function “sumArray” as follows: Input: an array Output: the sum of that array b.) Write test code to create an array and call “sumArray” on it.

JavaScript Secrets Invalid numbers are NaN –Test with isNaN(value) 5 types for variables: –number (including NaN) –string –boolean –“undefined” – may cause error or lead to NaN –null Gotchas –if (x = 7) … –Uninitialized variables –Forgetting “break” in switch

JavaScript Tips Quoting document.writeln(" cat "); vs. document.writeln(" cat "); Multiple arguments to document.write() document.writeln(" "+heading+" "); (doesn’t work with my_writeln() )