CS101- Introduction to Computing- Lecture 29

1
CS101 Introduction to Computing
Lecture 29Functions & Variable Scope
(Web Development Lecture 10)

2
During the last lecture we had a
discussion on Arrays
• We found out why we need arrays
• We became able to use arrays in conjunction
with the ‘for’ loop for solving simple problems

3
Array
An indexed list of elements
A variable is a container that holds a value
Similarly, an Array can be considered a
container as well, but this one is more
interesting as it can hold multiple values

4
Array
fruit[ 0 ]
Identifier
Square
bracket
Index

5
Arrays in JavaScript
• In JavaScript, arrays are implemented in the
form of the ‘Array’ object
• The key property of the ‘Array’ object is ‘length’,
i.e the number of elements in an array
• Two of the key ‘Array’ methods are:
– reverse( )
– sort( )
• Elements of an array can be of any type; you
can even have an array containing other arrays

6
Today’s Goal:
Functions & Variable Scope
• To be able to understand the concept of
functions and their use for solving simple
problems
• To become familiar with some of JavaScript’s
built-in functions
• To become familiar with the concept of local
and global variables

7
Function
A group of statements that is put together
(or defined) once and then can be used
(by reference) repeatedly on a Web page
Also known as subprogram, procedure,
subroutine

8
words = new Array ( 10 ) ;
for ( k = 0 ; k < words.length ; k = k + 1 ) {
words[ k ] = window.prompt( "Enter word # " + k, "" ) ;
}
document.write( "UNSORTED WORDS:" + "<BR>" ) ;
document.write( words[ k ] + "<BR>" ) ;
}
words.sort( ) ;
document.write( "SORTED WORDS:" + "<BR>" ) ;
}
From the last lecture …

9
}
document.write( "UNSORTED WORDS:" + "<BR>" ) ;
}
words.sort( ) ;
document.write( "SORTED WORDS:" + "<BR>" ) ;
}

10
function writeList( heading, words ) {
document.write( heading + "<BR>" ) ;
}
}
}
writeList( “Unsorted Words:”, words ) ;
words.sort( ) ;
writeList( “Sorted List:”, words ) ;
The function is
defined here
The function is
called here and
in the next box

11
Advantages of Functions
• Number of lines of code is reduced
• Code becomes easier to read & understand
• Code becomes easier to maintain as changes
need to be made only at a single location
instead multiple locations

12
}
}
}
words.sort( ) ;
Let’s us see
if we can
redouble the
advantage

13
}
}
}
words.sort( ) ;
words.reverse( ) ;
writeList( “Reverse-Sorted List:”, words ) ;

14
}
}
Keyword
Function
identifier
Pair of
parenthesis
Function ‘arguments’
separated by commas
Function
definition
enclosed
in a pair
of curly
braces

15
Function Identifiers
The naming rules for function identifiers
are the same as were discussed for
variable and array identifiers

16
Arguments of a Function
• A comma-separated list of data
• Arguments define the interface between the
function and the rest of the Web page
• Arguments values are passed to the
function by value (some popular languages
pass arguments ‘by reference’ as well)

17
To ensure that a function is defined
before it is called up, define all
functions in the HEAD portion of Web
pages

18
Two Ways of Calling Functions
function add( a, b ) {
c = a + b ;
return c ;
}
sum = add( 2, 4 ) ;
document.write( sum ) ;
function popUp( message ) {
window.alert( message ) ;
}
popUp( “Warning!” ) ;
A function call
appearing as part
of a statement.
Definitions of
such functions
include a ‘return’
statement
A function call
appearing as a
complete
statement

19
}
popUp( “Warning!” ) ;
}
a = popUp( “Warning!” ) ;
document.write( a ) ;
What will get
written by this
statement?
undefined

20
c = a + b ;
return c ;
}
sum = add( 2, 4 ) ;
document.write( sum ) ;
c = a + b ;
return c ;
}
add( 2, 4 ) ;
What would
this statement
do?
c = a + b ;
return c ;
}
document.write( add( 2, 4 ) ) ;
What would
this modifica-
tion do?

21
function factorial( n ) {
product = 1 ;
for ( k = 1 ; k <= n ; k = k + 1 ) {
product = product * k
}
return product ;
}
n = window.prompt( "Enter a number ", "" ) ;
document.write(n, "! = ", factorial( n ) ) ;
5! = 120
0! = ?
Another Example

22
What Would this Statement Do?
factorial( factorial ( 3 ) ) ;
This is termed as the
recursive
use of a function

23
?functionfunction
methodmethod

24
Methods
• Methods are functions
• They are unusual in the sense that they
are stored as properties of objects

25
Object: A named collection of properties
(data, state) & methods (instructions, behavior)
prop 1
prop 2
prop 5
name
prop 3
prop 4
A collection
of properties
& methods
All objects have the
“name” property: it
holds the name of
the object (collection)
method 3method 1
method 2

26
Object: A named collection of properties
prop 1
prop 2
prop 5
name
prop 3
prop 4
A collection
of properties
All objects have the
“name” property: it
holds the name of
the object (collection)
prop 7prop 6
prop 8

27
?functionfunction
event handlerevent handler

28
Event Handlers
• Special-purpose functions that come
predefined with JavaScript
• They are unusual in the sense that they are
many times called in the HTML part of a Web
page and not the <SCRIPT> … </SCRIPT> part
• More on event handlers in a future lecture

29
Predefined, Top-Level or Built-In Functions
• Event handlers are not the only functions that
come predefined with JavaScript. There are
many others.
• Practically, there is no difference between
predefined functions and those that are defined
by the programmer (termed as user-defined or
custom functions)
• There are many of them, but here we discuss
only two: parseInt( ), parseFloat( )
The dictionary
meaning of ‘Parse’:
To breakdown into
simpler
components and
analyze

30
parseInt( )
Syntax: parseInt ( string )
string1 = “3.14159” ;
document.write( parseInt( string1 ) ) ;
document.write( “<BR>” ) ;
string2 = “$100.00” ;
string3 = “ 23 ” ;
3
NaN
23

31
parseInt( )
1. Parses the string argument; returns an integer
2. If it encounters a non-numeral - anything
other than (+,-) or (0-9) - it ignores it and all
succeeding characters, and returns the
integer value parsed up to that point

32
parseInt( )
3. If the first character cannot be converted to a
number, parseInt returns NaN
4. parseInt truncates numbers to integer values
5. Leading and trailing spaces are ignored

33
parseFloat( )
Syntax: parseFloat ( string )
string1 = “3.14159” ;
document.write( parseFloat( string1 ) ) ;
string2 = “$100.00” ;
string3 = “ 23E-15 ” ;
3.14159
NaN
2.3E-14

34
parseFloat( )
1. Parses the string argument; returns a FP number
2. If it encounters a character other than
• A sign (+,-)
• A numeral (0-9)
• A decimal point
• An exponent
it returns the value up to that point, ignoring
that and all succeeding characters

35
parseFloat( )
3. If the first character cannot be converted to a
number, parseFloat returns NaN
4. Leading and trailing spaces are ignored

36
Scope of Variable
Defining the space in which a variable is effective
is known as
defining the scope of a variable
A variable can be
either local or global
in scope

37
Local and Global Variables
Local or Function-level Variable
Effective only in the function in which they
are declared
Global Variables
Visible everywhere on the Web page

38
product = 1 ;
for ( k = 1 ; k <= n ; k = k + 1 ) {
}
return product ;
}
document.write( “k = ”, k ) ;
What would this
statement write?
Example

41
product = 1 ;
for ( k = 1 ; k <= n ; k = k + 1 ) {
}
return product ;
}
Why does
JavaScript think that
‘k’ is not defined?

42
product = 1 ;
for ( k = 1 ; k <= n ; k = k + 1 ) {
}
return product ;
}
10! = 3628800
k = 11

43
var k ;
product = 1 ;
for ( k = 1 ; k <= n ; k = k + 1 ) {
}
return product ;
}

46
‘k’ is a Local Variable
• ‘k’ is not declared or used in the main
code
• Instead, it is declared within the function
‘factorial’ only
• ‘k’ is local to the ‘factorial’ function, and
does not hold any meaning outside that
function

47
var k, product ;
product = 1 ;
for ( k = 1 ; k <= n ; k = k + 1 ) {
}
return product ;
}
document.write( product ) ;
Here ‘product’ has
been made a local
variable as well
What would this
statement write?

48
Local Variables
• Declaring variables (using the var
keyword) within a function, makes them
local
• They are available only within the
function and hold no meaning outside of
it

49
Global Variables
• All other variables used in a Web page (or
window) are global
• They can be manipulated from the main code
as well as from any of the functions
• They include:
– All variables declared in the main code
– All variables used but not declared in the main code
– All variables used but not declared in any of the
functions defined on the Web page (or window)

50
var u ;
document.write( m ) ;
var c, d ;
x = y * y ;
r = s ;
var a, b ;
p = q + 2 ;
Global Local
u a
m b
p c
q d
x
y
r
s
Variables declared within functions are local; all others

51
}
}
}
words.sort( ) ;
words.reverse( ) ;
writeList( “Reverse-Sorted List:”, words ) ;
Would the functionality change if we delete
the argument ‘words’ from these 4 places?

52
?why havewhy have
local variableslocal variables
why not make allwhy not make all
variables globalvariables global

53
Local –vs- Global
• Global variables can make the logic of a Web
page difficult to understand
• Global variables also make the reuse and
maintenance of your code much more difficult
HEURISTIC:
If it’s possible to
define a variable
as local, do it!

54
During Today’s Lecture …
• We looked at functions and their use for solving
simple problems
• We became familiar with a couple of
JavaScript’s built-in functions
• We became familiar with the concept of local
and global variables

55
Assignment #10
• Develop a Web page that includes functions
that determine the mean and median of a set
of numbers stored in an array
• Make sure to declare all variables that you use
in the main code as well as the functions
Further information on this assignment will be provide on
the CS101 Web site

56
Next (the 11th
) Web Dev Lecture:
Event Handling
• We’ll learn to appreciate the concept of event
driven programming
• We will produce solutions for simple problems
using various event handlers

CS101- Introduction to Computing- Lecture 29

More Related Content

What's hot

Viewers also liked

Similar to CS101- Introduction to Computing- Lecture 29

More from Bilal Ahmed

Recently uploaded

CS101- Introduction to Computing- Lecture 29