"Digital Media Primer" Yue-Ling Wong,
Copyright (c)2016 by Pearson Education,
Inc. All rights reserved.
© 2016 Pearson Education, Inc., Hoboken,
NJ. All rights reserved.
1
Chapter 10
Programming Fundamentals with
JavaScript
Part 3
Programming Fundamentals - Part B
© 2016 Pearson Education, Inc., Hoboken,
NJ. All rights reserved.
2
In this lecture, you will learn:
• what are functions and procedures
• to read and write: function definitions in
JavaScript
• to invoke functions
• use parameters in functions
© 2016 Pearson Education, Inc., Hoboken,
NJ. All rights reserved.
3
A Scenario
Suppose in your program, you have code like this:
...
score = 0;
health = 100;
It would be nice to be able to use a
...
short name to represent these
score = 0;
repeated statements.
health = 100;
...
This is how functions can be used.
score = 0;
health = 100;
...
score = 0;
health = 100;
...
© 2016 Pearson Education, Inc., Hoboken,
NJ. All rights reserved.
4
Functions
• A function is a block of program instructions that
forms a discrete unit with a name
• This discrete unit is the function’s definition.
• The instructions in a function definition:
– are executed only when the function is called or
invoked
– are not executed automatically when the program
runs
© 2016 Pearson Education, Inc., Hoboken,
NJ. All rights reserved.
5
Defining a Function in JavaScript
General Syntax:
function functionName()
{
statement(s)
}
© 2016 Pearson Education, Inc., Hoboken,
NJ. All rights reserved.
6
Defining a Function in JavaScript
Example:
function startGame()
{
score = 0;
health = 100;
}
© 2016 Pearson Education, Inc., Hoboken,
NJ. All rights reserved.
7
Invoking a Function
• A function call invokes the function—to cause
the statements in the function's definition to
be carried out
• General Syntax:
functionName();
• Example:
startGame();
© 2016 Pearson Education, Inc., Hoboken,
NJ. All rights reserved.
8
How a Program Runs
var score;
var health;
startGame();
...
function startGame()
{
score = 0;
health = 100;
}
© 2016 Pearson Education, Inc., Hoboken,
NJ. All rights reserved.
9
How a Program Runs
var score;
var health;
startGame();
...
function startGame()
{
score = 0;
health = 100;
}
© 2016 Pearson Education, Inc., Hoboken,
NJ. All rights reserved.
10
How a Program Runs
var score;
var health;
startGame();
...
When a statement containing a
function call is executed,...
function startGame()
{
score = 0;
health = 100;
}
© 2016 Pearson Education, Inc., Hoboken,
NJ. All rights reserved.
11
How a Program Runs
var score;
var health;
startGame();
...
the program jumps to the block of
code that constitutes the
function’s definition and then
executes its block of code
function startGame()
{
score = 0;
health = 100;
}
© 2016 Pearson Education, Inc., Hoboken,
NJ. All rights reserved.
12
How a Program Runs
var score;
var health;
startGame();
...
the program jumps to the block of
code that constitutes the
function’s definition and then
executes its block of code
function startGame()
{
score = 0;
health = 100;
}
© 2016 Pearson Education, Inc., Hoboken,
NJ. All rights reserved.
13
How a Program Runs
var score;
var health;
startGame();
...
When it is finished with the
function block, it returns to execute
the statement after the one in
which the function call has
occurred.
function startGame()
{
score = 0;
health = 100;
}
© 2016 Pearson Education, Inc., Hoboken,
NJ. All rights reserved.
14
Example Use of Functions
The Previous Scenario
Use of Function
...
score = 0;
health = 100;
...
score = 0;
health = 100;
...
score = 0;
health = 100;
...
score = 0;
health = 100;
...
...
resetGame();
...
resetGame();
...
resetGame();
...
resetGame();
...
function resetGame():void
{
score = 0;
health = 100;
}
© 2016 Pearson Education, Inc., Hoboken,
NJ. All rights reserved.
15
Returning a Value
• A function may also return a value
© 2016 Pearson Education, Inc., Hoboken,
NJ. All rights reserved.
16
Returning a Value
• Analogy: Having your assistant to have a contract
signed by your supervisor
• After the contract is signed, you may or may not
have your assistant bring the signed contract back
to you.
• Returning the contract after the task is like
returning a value after a function has been
carried out
© 2016 Pearson Education, Inc., Hoboken,
NJ. All rights reserved.
17
Functions that Return a Value
Example:
function calcTax()
{
var tax = sales * taxRate;
return tax;
}
Suppose sales is 120 and taxRate is 0.07.
• The value of tax will be 120 * 0.07 = 8.4
• The function calcTax() will return the value of tax,
which is 8.4
© 2016 Pearson Education, Inc., Hoboken,
NJ. All rights reserved.
18
Invoking a Function That Returns a Value
Example:
newBalance = sales + calcTax();
Again, suppose sales is 120 and taxRate is
0.07.
• The function calcTax() will return the value
of tax, which is 8.4 (as shown in the previous
slide)
• So, newBalance will have the value: 120 + 8.4 =
128.4
© 2016 Pearson Education, Inc., Hoboken,
NJ. All rights reserved.
19
Invoking a Function That Returns a Value
Example:
8.4
newBalance = sales + calcTax();
Again, suppose sales is 120 and taxRate is
0.07.
• The function calcTax() will return the value
of tax, which is 8.4 (as shown in the previous
slide)
• So, newBalance will have the value: 120 + 8.4 =
128.4
© 2016 Pearson Education, Inc., Hoboken,
NJ. All rights reserved.
20
Invoking a Function That Returns a Value
Example:
if (calcTax() > 100)
{
discount = 10;
}
Again, suppose sales is 120 and taxRate is 0.07.
• The function calcTax() will return the value of tax,
which is 8.4
• The condition 8.4 > 100 is false, and the statement
discount = 10 is not executed.
© 2016 Pearson Education, Inc., Hoboken,
NJ. All rights reserved.
21
Invoking a Function That Returns a Value
Example: 8.4
if (calcTax() > 100)
{
discount = 10;
}
Again, suppose sales is 120 and taxRate is 0.07.
• The function calcTax() will return the value of tax,
which is 8.4
• The condition 8.4 > 100 is false, and the statement
discount = 10 is not executed.
© 2016 Pearson Education, Inc., Hoboken,
NJ. All rights reserved.
22
Functions vs. Procedures
• In some programming languages, a procedure
refers to something like a function except it does
not return a value.
• In JavaScript, functions and procedures are all
referred to as functions
• Unless specified, functions and procedures will be
all referred to as functions in this course
© 2016 Pearson Education, Inc., Hoboken,
NJ. All rights reserved.
23
Parameters and Arguments
© 2016 Pearson Education, Inc., Hoboken,
NJ. All rights reserved.
24
A Scenario
Suppose in your program, you have code like this:
...
score = 0;
health = 100;
It would be nice to be able to use a
...
short name to represent these
score = 20;
repeated statements.
health = 80;
...
These statements are similar but not
score = 50;
exactly the same. We can't use the
health = 30;
function in the previous example.
...
This is how parameters and
score = 10;
arguments are useful.
health = 60;
...
© 2016 Pearson Education, Inc., Hoboken,
NJ. All rights reserved.
25
Parameters and Arguments
• A function can have parameters so that it
receives values when it is called, and these
values can be used in the function.
• Values that are passed into functions or
procedures are called arguments .
© 2016 Pearson Education, Inc., Hoboken,
NJ. All rights reserved.
26
Functions with Parameters
General Syntax:
function functionName(parameter1,
parameter2, . . .)
{
statement(s)
}
© 2016 Pearson Education, Inc., Hoboken,
NJ. All rights reserved.
27
Functions with Parameters
Example:
function calcTotal(sales, taxrate)
{
total = sales * (1 + taxrate);
}
To call the function, for example:
calcTotal(120, 0.07);
• Two arguments passed into the function are: 120 and 0.07
© 2016 Pearson Education, Inc., Hoboken,
NJ. All rights reserved.
28
Functions with Parameters
Example:
function calcTotal(sales, taxrate)
{
total = sales * (1 + taxrate);
}
To call the function, for example:
calcTotal(120, 0.07);
• Two arguments passed into the function are: 120 and 0.07
• The parameter sales gets the value 120
• The parameter taxrate gets the value 0.07
© 2016 Pearson Education, Inc., Hoboken,
NJ. All rights reserved.
29
Functions with Parameters
Example:
function calcTotal(sales, taxrate)
{
total = sales * (1 + taxrate);
}
To call the function, for example:
calcTotal(120, 0.07);
• Two arguments passed into the function are: 120 and 0.07
• The parameter sales gets the value 120
• The parameter taxrate gets the value 0.07
© 2016 Pearson Education, Inc., Hoboken,
NJ. All rights reserved.
30
Functions with Parameters
Example:
function calcTotal(sales, taxrate)
{
total = sales * (1 + taxrate);
}
To call the function, for example:
calcTotal(120, 0.07);
• Two arguments passed into the function are: 120 and 0.07
• The parameter sales gets the value 120
• The parameter taxrate gets the value 0.07
© 2016 Pearson Education, Inc., Hoboken,
NJ. All rights reserved.
31
Functions with Parameters
• Parameters can also be used in functions that return a value
• Example:
function calcTotal(sales, taxrate)
{
var total;
total = sales * (1 + taxrate);
return total;
}
To call the function, for example:
newBalance = calcTotal(120, 0.07);
calcTotal(120, 0.07) will return a value of 128.4 and thus
newBalance will be assigned with a value 128.4
© 2016 Pearson Education, Inc., Hoboken,
NJ. All rights reserved.
32
Functions with Parameters
• Parameters can also be used in functions that return a value
• Example:
function calcTotal(sales, taxrate)
{
var total;
total = sales * (1 + taxrate);
return total;
}
To call the function, for example:
newBalance = calcTotal(120, 0.07);
calcTotal(120, 0.07) will return a value of 128.4 and thus
newBalance will be assigned with a value 128.4
© 2016 Pearson Education, Inc., Hoboken,
NJ. All rights reserved.
33
Comments
© 2016 Pearson Education, Inc., Hoboken,
NJ. All rights reserved.
34
Comments
• Comments allow you to provide descriptive
notes for your codes
• In JavaScript, there are two ways to signify the
comments:
– // for a single-line comment, and
– /* and */ for a multiline comment.
© 2016 Pearson Education, Inc., Hoboken,
NJ. All rights reserved.
35
Comments
Example:
function calculateScore()
{
// This function is to compute score
// simply by incrementing the score by 1
score = score + 1;
}
© 2016 Pearson Education, Inc., Hoboken,
NJ. All rights reserved.
36
Comments
Example:
function calculateScore()
{
/* This function is to compute score
simply by incrementing the score by 1 */
score = score + 1;
}
© 2016 Pearson Education, Inc., Hoboken,
NJ. All rights reserved.
37
Comments
Example:
function calculateScore()
{
/*
This function is to compute score
simply by incrementing the score by 1
*/
score = score + 1;
}
© 2016 Pearson Education, Inc., Hoboken,
NJ. All rights reserved.
38
Exercise from textbook:
Identify if statements, function definitions,
function calls, and parameters
© 2016 Pearson Education, Inc., Hoboken,
NJ. All rights reserved.
39
Where to Place the Script
• use <script> tag
• locations:
– <head> section
– <body> section
– in an external text file
© 2016 Pearson Education, Inc., Hoboken,
NJ. All rights reserved.
40
© 2016 Pearson Education, Inc., Hoboken,
NJ. All rights reserved.
41
file: writingtext.js
© 2016 Pearson Education, Inc., Hoboken,
NJ. All rights reserved.
42
Review Questions
Note to instructor:
Depending on your preference, you may want to go
over the review questions at the end of this lecture as
an instant review or at the beginning of next lecture to
refresh students' memory of this lecture.
© 2016 Pearson Education, Inc., Hoboken,
NJ. All rights reserved.
43
Review Question
A(n) ___ contains a block of program instructions,
which form a discrete unit with a name.
A.
B.
C.
D.
E.
variable
function or procedure
argument
statement
data type
© 2016 Pearson Education, Inc., Hoboken,
NJ. All rights reserved.
44
Review Question
Values passed into functions or procedures are
called ___.
A.
B.
C.
D.
variables
arguments
statements
data types
© 2016 Pearson Education, Inc., Hoboken,
NJ. All rights reserved.
45
Review Question
True/False: A function definition is executed
automatically when the program runs.
© 2016 Pearson Education, Inc., Hoboken,
NJ. All rights reserved.
46
Review Question
True/False: A function is executed only when it
is called within the program.
© 2016 Pearson Education, Inc., Hoboken,
NJ. All rights reserved.
47
Review Question
A difference between a function and a
procedure is that a ______ returns a value to
the calling statement.
A. function
B. procedure
© 2016 Pearson Education, Inc., Hoboken,
NJ. All rights reserved.
48
Review Question
True/False: Another difference between a
function and a procedure is that one takes
parameters, whereas the other does not.
© 2016 Pearson Education, Inc., Hoboken,
NJ. All rights reserved.
49
Review Question
sum = addTogether(2,5);
By looking at the previous statement, you can tell that
addTogether() ___.
A.
B.
C.
D.
E.
F.
definitely returns a value
does not return a value
takes arguments
does not take arguments
It is not possible to tell whether or not it returns a value
It is not possible to tell whether or not it takes arguments.
© 2016 Pearson Education, Inc., Hoboken,
NJ. All rights reserved.
50
Review Question
sum = addTogether();
By looking at the previous statement, you can tell that
addTogether() ___.
A.
B.
C.
D.
E.
F.
definitely returns a value
does not return a value
takes arguments
does not take arguments
It is not possible to tell whether or not it returns a value
It is not possible to tell whether or not it takes arguments.
© 2016 Pearson Education, Inc., Hoboken,
NJ. All rights reserved.
51
Review Question
addTogether(2,5);
By looking at the previous statement, you can tell that
addTogether() ___.
A.
B.
C.
D.
E.
F.
definitely returns a value
may not return a value
takes arguments
does not take arguments
It is not possible to tell whether or not it returns a value
It is not possible to tell whether or not it takes arguments.
© 2016 Pearson Education, Inc., Hoboken,
NJ. All rights reserved.
52
Review Question
addTogether();
By looking at the previous statement, you can tell that
addTogether() ___.
A.
B.
C.
D.
E.
F.
definitely returns a value
may not return a value
takes arguments
does not take arguments
It is not possible to tell whether or not it returns a value
It is not possible to tell whether or not it takes arguments.
© 2016 Pearson Education, Inc., Hoboken,
NJ. All rights reserved.
53
Review Question
To define a function, you use the keyword ___.
© 2016 Pearson Education, Inc., Hoboken,
NJ. All rights reserved.
54