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("<br> Sum is: "+sum);
}
g = 7;
h = 5;
document.writeln("<br> g: "+g+" h: "+h);
dog(g);
document.writeln("<br> g: "+g+" h: "+h);
document.writeln("<br> sum: "+sum);
document.writeln(“<br> 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("<br> FUN1: "+x+ "," +y);
}
function fun2 () {
var y;
x = x + 10;
y = y + 20;
document.writeln("<br> FUN2: "+x+ "," +y);
}
x = 1;
y = 2;
document.writeln("<br> MAIN #1: "+x+ "," +y);
fun1(x);
document.writeln("<br> MAIN #2: "+x+ "," +y);
fun1(y);
document.writeln("<br> MAIN #3: "+x+ "," +y);
fun2();
document.writeln("<br> 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 <br/>
b.) ‘N’ dashes, followed by the string ‘str2’, then <br/>
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
<script type = “text/javascript” src = “calc.js” >
</script>
• How to invoke the script?
– Place non-function code in the <head>
– <body onload=“start()”>
– <input type = "button" value = “Roll"
onclick = "play()" />
Everything you ever wanted to know about
arrays…
• Initialization
var n1 = new Array( 5 ); // allocate 5-element Array
var n2 = new Array(); // allocate empty Array
var n3 = []; //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 ); // 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( "<h2>" + header + "</h2> <p>" );
for ( var ii in theArray ) {
document.write(theArray[ii] + “<br/>" );
}
document.writeln( “</p>" );
}
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("<br/> x: ",x);
document.writeln("<br/> y: ",y);
}
var myArray = [3, 4, 5];
var factor = 2;
document.writeln ("<br/> myArray: ", myArray);
mystery(myArray, factor);
document.writeln ("<br/> myArray: ", myArray);
document.writeln ("<br/> 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("<br> 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("<a href=\"cat.html\">cat</a>");
vs.
document.writeln("<a href='cat.html'>cat</a>");
• Multiple arguments to document.write()
document.writeln("<h1>"+heading+"</h1>");
document.writeln("<h1>",heading,"</h1>");
(doesn’t work with my_writeln() )
