1. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
"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.

2. Chapter 10 Programming Fundamentals with JavaScript
Part 3
Programming Fundamentals - Part B
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

3. 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.

4. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
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 repeated statements.
This is how functions can be used.
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

5. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
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.

6. Defining a Function in JavaScript
General Syntax:
function functionName() {
statement(s) }
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

7. Defining a Function in JavaScript
Example:
function startGame() {
score = 0;
health = 100; }
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

8. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
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.

9. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
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. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
How a Program Runs
var score; var health; startGame(); ... function startGame() { score = 0; health = 100; }
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

11. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
How a Program Runs
var score; var health; startGame(); ... function startGame() { score = 0; health = 100; }
When a statement containing a function call is executed,...
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

12. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
How a Program Runs
var score; var health; startGame(); ... function startGame() { score = 0; health = 100; }
the program jumps to the block of code that constitutes the function’s definition and then executes its block of code
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

13. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
How a Program Runs
var score; var health; startGame(); ... function startGame() { score = 0; health = 100; }
the program jumps to the block of code that constitutes the function’s definition and then executes its block of code
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

14. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
How a Program Runs
var score; var health; startGame(); ... function startGame() { score = 0; health = 100; }
When it is finished with the function block, it returns to execute the statement after the one in which the function call has occurred.
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

15. Example Use of Functions
The Previous Scenario
Use of Function
... score = 0; health = 100;
... resetGame(); function resetGame():void { score = 0; health = 100; }
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

16. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Returning a Value
A function may also return a value
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

17. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
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.

18. 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.

19. 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: = 128.4
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

20. 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: = 128.4
8.4
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

21. 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.

22. 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.
8.4
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

23. 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.

24. Parameters and Arguments
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

25. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
A Scenario
Suppose in your program, you have code like this: ... score = 0; health = 100; score = 20; health = 80; score = 50; health = 30; score = 10; health = 60;
It would be nice to be able to use a short name to represent these repeated statements.
These statements are similar but not exactly the same. We can't use the function in the previous example.
This is how parameters and arguments are useful.
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

26. 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.

27. Functions with Parameters
General Syntax:
function functionName(parameter1, parameter2, . . .) {
statement(s) }
© 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
© 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
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.

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 and thus newBalance will be assigned with a value 128.4
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

33. 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 and thus newBalance will be assigned with a value 128.4
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

34. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Comments
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

35. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
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.

36. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
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. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
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. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
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.

39. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Exercise from textbook: Identify if statements, function definitions, function calls, and parameters
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

40. 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.

41. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

42. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
file: writingtext.js
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

43. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
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.

44. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Review Question
A(n) ___ contains a block of program instructions, which form a discrete unit with a name.
variable
function or procedure
argument
statement
data type B
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

45. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Review Question
Values passed into functions or procedures are called ___.
variables
arguments
statements
data types B
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

46. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Review Question
True/False: A function definition is executed automatically when the program runs.
False
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

47. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Review Question
True/False: A function is executed only when it is called within the program.
True
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

48. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Review Question
A difference between a function and a procedure is that a ______ returns a value to the calling statement.
function
procedure A
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

49. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Review Question
True/False: Another difference between a function and a procedure is that one takes parameters, whereas the other does not.
True
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

50. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Review Question
sum = addTogether(2,5);
By looking at the previous statement, you can tell that addTogether() ___.
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.
A and C
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

51. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Review Question
sum = addTogether();
By looking at the previous statement, you can tell that addTogether() ___.
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.
A and D
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

52. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Review Question
addTogether(2,5);
By looking at the previous statement, you can tell that addTogether() ___.
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.
B (or E) and C
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

53. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Review Question
addTogether();
By looking at the previous statement, you can tell that addTogether() ___.
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.
B (or E) and D
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

54. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Review Question
To define a function, you use the keyword ___.
function
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.