Scribd
Upload
13 views

SY306 Set5 JavaScriptFunctions

The document discusses JavaScript functions and arrays. It covers defining and invoking functions, function scope, and exercises involving minimum functions and output. It also covers array initialization, length, assignment, and useful array functions like push and indexOf.

Uploaded by

wajahat Ahmed
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
13 views

SY306 Set5 JavaScriptFunctions

The document discusses JavaScript functions and arrays. It covers defining and invoking functions, function scope, and exercises involving minimum functions and output. It also covers array initialization, length, assignment, and useful array functions like push and indexOf.

Uploaded by

wajahat Ahmed
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

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() )

You might also like