http://www.w3schools.com/js/default.asp

318kB Size 2 Downloads 4 Views

1 http://www.w3schools.com/js/default.asp. SY306 Web and Databases for Cyber Operations. SlideSet #5: JavaScript Functions and Arrays. Function Definitions.
SY306 Web and Databases for Cyber Operations

SlideSet #5: JavaScript Functions and Arrays

http://www.w3schools.com/js/default.asp

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; }

1

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("
dog(g); document.writeln("
document.writeln("
document.writeln(“


g: "+g+" h: "+h); g: "+g+" h: "+h); sum: "+sum); End of script");

Output?

2

JavaScript Scope Rules • Global Scope – Declared explicitly (with var) outside a function – Declared implicitly (without var) inside a function

• Function Scope – Declared explicitly (with var) inside a function – Parameters

(Look at FIRST USE inside a function to decide which applies)

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

3

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("
fun1(x); document.writeln("
fun1(y); document.writeln("
fun2(); document.writeln("


MAIN #1: "+x+ "," +y); MAIN #2: "+x+ "," +y); MAIN #3: "+x+ "," +y); 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.

4

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… • Initialization var n1 = new Array( 5 ); var n2 = new Array(); var n3 = [];

// allocate 5-element Array // allocate empty Array //allocate empty array

• Initialization with values! var arr = [ 1, 2, 3, 4, 5 ];

• Length of array arr.length;

• Cell assignment arr[3] = 190; arr[3] = “hello”;

• Cell assignment beyond its length! var arr = [ 1, 2, 3, 4, 5 ]; arr[10] = 99;

5

…but were afraid to ask function initializeArrays() { var n1 = new Array( 5 ); var n2 = new Array();

// allocate 5-element 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 ii in theArray ) { document.write(theArray[ii] + “
" ); } document.writeln( “

" ); } initializeArrays();

Example output

6

Scope – Revisited function mystery( x, y ) { for ( var ii = 0; ii < x.length; ++ii ) x[ii] = x[ii] * y; y = 7; document.writeln("
x: ",x); document.writeln("
y: ",y); } 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 .indexOf .sort .sort(comparatorFunction)

7

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.

Exercise #5 – What’s the output? function printme( z ) { document.writeln("
z is ",z); } var array1 = [17, 21, 42]; var array2 = [14, 19]; var x = 1; printme (array1); printme (array2[1]); printme (x); array1[x] = 57; printme (array1);

8

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 – – – –

color = red; 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+"

"); document.writeln("

",heading,"

"); (doesn’t work with my_writeln() )

9

Comments