CS101 Introduction to Computing
Lecture 21
Functions
(Web Development Lecture 7)
Today’s Goal:
Functions
• To be able to understand the concept of
functions and their use for solving simple
problems
• To become familiar with the concept of local
and global variables
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
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
Pair of
Keyword
parenthesis
Function
Function Function ‘arguments’ definition
identifier separated by commas enclosed
in a pair
of curly
function writeList( heading, words ) { braces
document.write( heading + "<BR>" ) ;
for ( k = 0 ; k < words.length ; k = k + 1 ) {
document.write( words[ k ] + "<BR>" ) ;
}
}
Function Identifiers
The naming rules for function identifiers
are the same as were discussed for
variable and array identifiers
Arguments of a Function
• A comma-separated list
• Arguments define the interface between the
function and the rest of the Web page
• Arguments values are passed to the function
by value (some other popular languages
pass arguments ‘by reference’ as well)
function show_message()
{
window.alert(“This is an alert!”);
}
show_message()
To ensure that a function is defined
before it is called up, define all
functions in the HEAD portion of Web
pages
Two Ways of Calling Functions
function popUp( message ) { A function call
appearing as a
window.alert( message ) ;
complete
} statement
popUp( “Warning!” ) ;
A function call
function add( a, b ) { appearing as part
of a statement.
c=a+b;
Definitions of
return c ; such functions
} include a ‘return’
sum = add( 2, 4 ) ; statement
document.write( sum ) ;
function popUp( message ) {
window.alert( message ) ;
}
popUp( “Warning!” ) ;
What will get function popUp( message ) {
written by this
window.alert( message ) ;
statement?
}
a = popUp( “Warning!” ) ;
undefined document.write( a ) ;
function add( a, b ) {
c=a+b;
return c ;
}
sum = add( 2, 4 ) ;
document.write( sum ) ;
What would function add( a, b ) {
this statement c=a+b;
do?
return c ;
}
add( 2, 4 ) ;
function add( a, b ) {
c=a+b;
return c ;
}
sum = add( 2, 4 ) ;
document.write( sum ) ;
What would function add( a, b ) {
this modifica-
statement c=a+b;
do? do?
tion
return c ;
}
document.write( add( 2, 4 ) ) ;
?
function
method
Methods
• Methods are functions
• They are unusual in the sense that they
are stored as properties of objects
Object: A named collection of properties
(data, state) & methods (instructions, behavior)
A collection
All objects have the
of properties
“name” property: it
& methods
holds the name of
the object
name method 2
prop 1
prop 3 prop 5
prop 2
method 1 prop 4 method 3
Object: A named collection of properties
A collection
All objects have the
of properties
“name” property: it
holds the name of
the object
name prop 7
prop 1
prop 3 prop 5
prop 2
prop 6 prop 4 prop 8
?
function
event handler
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( )
Parse: To breakdown into simpler components and analyze
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
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
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
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)
var a, b ; Global Local
p=q+2; u a
r=s; m b
var u ; p c
document.write( m ) ; q d
x
var c, d ; y
x=y*y; r
s
Variables declared within functions are local; all others
why have
local variables
why not make all
variables global
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!
JavaScript Operators
• Operators operate on operands to achieve the
desired results
• JavaScript has numerous operators, classified in
many categories. We will look at only a few of them
belonging to the following categories:
– Assignment operators -- Arithmetic operators
– Comparison operators -- String operators
– Logical operators
• We’ll look at a few more during future lectures, but
understand that there are many more. Even the
supplementary textbook does not cover all of them!
Assignment Operator “=”
Changes the value of what is on the LHS, w.r.t. what is on the RHS
total_number_of_students = 984 ;
title = “Understanding Computers” ;
swapFlag = false ;
x = y + 33 ;
Arithmetic Operators
Multiply 2*4→8
Divide 2 / 4 → 0.5
Modulus 5%2→1
Add 2+4→6
Subtract 2 - 4 → -2
Negate -(5) → -5
Comparison Operators
Not the same as
the assignment
“=” operator
The “equal to (==)” Comparison Operator
if ( today == “Sunday” )
document.write(“The shop is closed”);
The string “The shop is closed” will be written to
the document only if the variable today has a
value equal to “Sunday”
Comparison Operators
a == b True if a and b are the same
a != b True if a and b are not the same
a>b True if a is greater than b
a >= b True if a is greater than or equal to b
a<b True if a is less than b
a <= b True if a is less than or equal to b
Example
if ( x != 0 )
result = y / x;
else
result = “not defined”;
From comparison operators, we
move to Logical Operators
Logical Operators
Operate on Boolean expressions or variables
The “AND (&&)” Logical Operator
if ( (pitch == “hard”) && (bowler == “fast”) )
myStatus = “Pulled muscle”;
The value of the variable myStatus will be set to
“Pulled muscle” if both of the conditions are true
Logical Operators
a && b AND True if both are true
a || b OR True of either or both are true
!a NOT True if a is false
Example
if ( x || y )
document.write (“Either or both are true”);
else
document.write (“Both are false”);
So far we have looked at the assignment operator,
arithmetic operators, comparison operators and
logical operators
The final category that we are going to look at is
string operators
In that category, we look at only one, the
concatenation operator
The “+” String Operator
The “+” operator can be used to concatenate two
strings
title = “bhola” + “continental”
The value of the variable title becomes
“bholacontinental”
Semicolon ;
Terminate all JavaScript statements with a
semicolon. It is not always necessary, but
highly recommended.
a = 23 ;
quotient = floor( a / 2) ;
remainder = a % 2 ;
Elements of JavaScript Statements
b = 2; Identifiers
sum = sum + 49; Operators
name = “Bhola” + “ Continental”; Literals
x = Math.floor ( x ); Punctuation
Two more elements that are found in
JavaScript statements are white
spaces and line breaks
White Spaces & Line Breaks
• White spaces: The space & the tab characters
• JavaScript ignores any extra white spaces or line
breaks that you put in the code
• This gives you the freedom of using them for
making your code appear neat and readable
while ( x > 0) {
remaind = x % 2;
y = remaind + y;
}
while ( x > 0) {remaind = x % 2; y = remaind + y;}
while ( x > 0) {
remaind = x % 2;
y = remaind + y;
}
Now let’s talk about a very special
type of JavaScript statement that
does not really do anything, but is
found in most pieces of code!
Comments
• Comments are included on a Web page to explain
how and why you wrote the page the way you did
• Comments can help someone other than the
author to follow the logic of the page in the author’s
absence
• The commented text is neither displayed in the
browser nor does it have any effect on the logical
performance of the Web page, and is visible only
when the actual code is viewed
JavaScript Comments
• Single-line comments (two options)
// Author: Bhola
<!-- Creation Date: 24 March 2003
• Multi-line comments
/* Author: Bhola
Creation Date: 24 March 2003 */
HTML Comments
<!-- Author: Bhola
Creation Date: 24 March 2003 -->
comments
add clarity!
comments let
the code speak
for itself!
Decimal to Binary Conversion in JavaScript
x = 75 ; // x is the decimal number
y = “” ; // y is the binary equivalent
while ( x > 0) {
remainder = x % 2 ;
quotient = Math.floor( x / 2 ) ;
y = remainder + y ;
x = quotient ;
}
document.write(“y = ” + y) ;
Assignment #7 (1)
Modify the Web page that you built for assignment #4 so
that it has the following additional interactivity features:
1. When the mouse goes over the “Send Message”
button, the Web page should check if any of the two
fields is empty
2. If a field is found empty, an appropriate alert
message should be shown to the user
Assignment #7 (2)
3. The alert must specify the name of the empty
field
4. If none of the fields are empty, and the user
clicks on the “Send Message” button, display a
message thanking the user for sending you the
greeting
Deadline: 1:00pm, Friday, 22 October 2004
Details will be posted on the CS101 Web Site
During Today’s Lecture …
• We looked at functions and their use for
solving simple problems
• We became familiar with the concept of
local and global variables
