1. M4 - Functions
School of Media, Art, & Design
CWMD2601 –
Scripting for Design
4/3/2020 M4 - Functions 1
2. 4/3/2020
13
3
5
1
15
4
0
2
4
6
8
10
12
14
16
N/A E Fail D 50-70% C 70-80% B 80-90% A 90-110%
In-Class Coding #1: Grade Distributions
Thursday (41 students)
4
1 1 0
5
30
0
5
10
15
20
25
30
35
N/A E Fail D 50-70% C 70-80% B 80-90% A 90-110%
In-Class Coding #1: Grade Distributions
Friday (41 students)
In Class Coding #1 – Grade Distributions
3. 4/3/2020 3
functionsreuse
decisionscondition
loops
repeat
arrays and
objects
variables
values
expressions
key elements
Programming
process
M3 – week 3
M4 – week 4 and 5
M5 – week 6, 8 and 9
(week 7 –mid term)
M6 – week 10 and 11
M7 – week 12 and 13
(week 14 – final)
Course Learning Path – 7 Modules course outlines
enhance
JavaScript
programming
M1 – week 1
M2 – week 2
M4 - Functions
• Algorithms
• Pseudo code
• Flow charts
• Essential statements
• Adding JS to Web pages
• Writing basic code
• Events and DOM
• Using Developer tools
• Declaring variables
• Data types
• Arithmetic operators
• precedence
• Definition
• Parameters
• Return values
• Application
• Scope
• Declaring
• Index
• Reading & writing values
• Dimension
• application
• Conditions
• Boolean values & operators
• Precedence
• If statements
• application
• For statement
• While statement
• Nested loops
4. 4/3/2020 4
Refresh -M1, M2 and M3 Takeaways
M2 – Getting Started
with JavaScript
M1 -The
Programming
Process
IPO
1. INPUT
2. OUTPUT
3. DECLARATION
4. EXPRESSION
5. DECISION
6. LOOP
variables values expressions
Algorithms
PC, FC
Statements
IPO
I&D Web
Page
PROGRAMMING
RUN
M3 – Variables,
Values,
Expressions
M4 - Functions
input output
process
How Data are stored ?
lobal vs local variables
declaration using “let”
What are the Data types ?
number
string
Boolean
null
undefined
object/function/arrays
How Data are computed?
assignment
arithmetic, string operators
comparison operator
mixed operator
IPO – Data Processing
M4 – Functions
START
input
Task(s)
STOP
Decision
output
Task(s)Task(s)
output
properties methods events
Object
DOM
HTML
(structure, ”look”)
CSS
(presentation,
“feel”)
JS
(behavior, “act”)
IO statements
comments
debug
good practices
5. 4/3/2020 M4 - Functions 5
Refresh -M1, M2 and M3 Takeaways
Download the “M1-3 Summary” spreadsheet, and provide an
example for each; from M2 and M3 in-class coding exercises
6. 4/3/2020 6
M4 Functions – Objectives
Make Use of JavaScript Built-in and
Custom-Built Functions
Definition
Parameters
Return Values
Application
Scope
M4 - Functions
7. 4/3/2020 7
M4 Functions – Activities (WK4 and 5)
Understand parameters, arguments, and return values
Explore some common errors when coding functions
Revisit scope rules for variables declared with let
Demonstrate the ES6 arrow function syntax
M4 - Functions
Explain the function concept and its benefits
Differentiate between built in and user defined
functions
Distinguish function declarations and function
expressions
Create user defined functions
8. 4/3/2020 M4 - Functions 8
Concepts: Notation and Benefits
Built-in Functions: Core, Browser (BOM) and
Document (DOM)
Custom-Built Functions: User defined, Named vs
Anonymous
Invoking Functions: Parameters and Return
(Input/Output)
Variable Scopes: Global vs Local
M4 Functions – Topics
9. What is a flowchart?
A. A text-based way of designing an
algorithm
B. A set of diagrams that represents a
set of instructions
4/3/2020 M1 – The Process of Programming 9
START
input
Task(s)
STOP
Decision
output
Task(s)Task(s)
10. Which flowchart symbol represents input?
A. Rectangle
B. Circle
C. Parallelogram
D. Terminal (ovals or rectangles
with rounded corners)
4/3/2020 M1 – The Process of Programming 10
START
input
Task(s)
STOP
Decision
output
Task(s)Task(s)
11. Which flowchart symbol represents process
statements?
A. Rectangle
B. Circle
C. Parallelogram
D. Diamond
4/3/2020 M1 – The Process of Programming 11
START
input
Task(s)
STOP
Decision
output
Task(s)Task(s)
12. 4/3/2020 M4 - Functions 12
M4 Functions – Concepts
Re-use: Applications often need to run
the same block or section of code at
several points or places
Modularity: Modern systems tend to be
complex and difficult to understand,
test, and debug, e.g. this course has 7
modules
Function: A block of code performing a
specific task that can be ran as a single
unit, with/without a name, and be used
many times, in the same or different
programs, e.g. M3 (Mortgage calculations)
START
input
Task(s)
STOP
Decision
output
Task(s)Task(s)
output
functions
ProcessInput Output
13. 4/3/2020 M4 - Functions 13
M4 Functions – Concepts
Like Math
Behaves like a smaller program within
a larger main program
Usually written to perform a single
task, a task we often expect to
perform many times
Just like in every day life or math y=f(x), a function
may need some inputs in order to provide an output
Function WILL NOT be executed until ‘others’
invoke it. In Console, try this!
ProcessInput Output
x f(x) y
Variable “a” stores the output value
(result from an expression)
Variable “b” stores the codes
(function statement, not value)
14. 4/3/2020 M4 - Functions 14
M4 Functions – Concepts
Key to Programming Process
Algorithms
Statements
Web Page
PROGRAMMING
RUN
f(..){..}
. . .
First Call
Return first result
Second Call
Return second result
Invoke: Any and multiple time, unary expression. e.g. b(3); or
binary expression, e.g. let y=b(3)
Flow Chart JS Statement
15. 4/3/2020 M4 - Functions 15
M4 Functions – Concepts
Common use cases in JS programming
In programming, a function usually performs
one well defined "high level" task that we
expect to carry out many times, such as:
changing web page styles or content
displaying web page hit count
validating web form input
performing calculations like scale
conversions
In older languages functions are often called procedures or
subroutines , but are referred to as methods in DOM.
16. 4/3/2020 M4 - Functions 16
M4 Functions – Concepts
Key Benefits: Modularity and Re-Use
Divide & Conquer - Functions in JS
programming
Divide: Break up a large/complex
JS program into modules/blocks,
e.g. Code Block ({…})
Conquer: Solve individual
problem, easier to code/maintain
Types: Built-In and User-Defined
Objects: In OOP, Function is referred to as Methods, e.g.
alert() and console.log, built-in JavaScript browser methods
17. A(n) ___ allows you to execute a related
group of statements as a single unit.
A. variable
B. statement
C. event
D. code block
4/3/2020 M4 - Functions 17
18. A code block simply consists of grouped
statements with curly braces ({..}), e.g.
A. True
B. False
4/3/2020 M4 - Functions 18
19. From the following(s), select all the JavaScript’s
built-in function types.
A. core
B. browser
C. document
D. User-Defined
4/3/2020 M4 - Functions 19
20. For any fields that require numeric values, you can
use JavaScript’s built-in ________ core function to
determine whether the user actually entered a
number.
A. value()
B. integer()
C. isNumber()
D. isNaN()
4/3/2020 M4 - Functions 20
21. In JavaScript, window.prompt() method, a browser
built-in function (BOM), return true or false value ?
A. True
B. False
4/3/2020 M4 - Functions 21
22. What is the correct JS syntax (a DOM built-in
function, aka method) to change the content of
the HTML element below?
A. document.getElementByName("p").in
nerHTML = "Hellow World!";
B. document.getElementById("p").inner
HTML = "Hellow World!";
C. document.getElement("p").innerHTM
L = "Hellow World!";
D. #demo.innerHTML = "Hello World!";
4/3/2020 M4 - Functions 22
23. Which event (BOM built-in function) is used to
run something after the page has finished
loading?
A. onfinished
B. oncomplete
C. onload
4/3/2020 M4 - Functions 23
24. You use the Math.pow() method (core built-in
function) to:
A. Return any number
B. Return a number raised to the
power of a second number
C. Return a random value
between 0 and 1
D. Return a variable value
4/3/2020 M4 - Functions 24
25. let a = ‘011’; parseInt(a); will return:
A. 11
B. 0
C. 9
D. error
4/3/2020 M4 - Functions 25
26. The following programs produce the same
output?
A. True
B. False
4/3/2020 M4 - Functions 26
27. 4/3/2020 M4 - Functions 27
M4 Functions – Built-In Functions in-class Exercises
See “M4 In Class Coding” in DC Connect
Must be submitted by end of today
28. 4/3/2020 28
Refresh -M1, M2, M3 and M4 Takeaways
M2 – Getting Started
with JavaScript
M1 -The
Programming
Process
IPO
1. INPUT
2. OUTPUT
3. DECLARATION
4. EXPRESSION
5. DECISION
6. LOOP
variables values expressions
Algorithms
PC, FC
Statements
IPO
I&D Web
Page
PROGRAMMING
RUN
M3 – Variables,
Values,
Expressions
M4 - Functions
input output
process
How Data are stored ?
lobal vs local variables
declaration using “let”
What are the Data types ?
number
string
Boolean
null
undefined
object/function/arrays
How Data are computed?
assignment
arithmetic, string operators
comparison operator
mixed operator
IPO – Data Processing
M4 – Functions
START
input
Task(s)
STOP
Decision
output
Task(s)Task(s)
output
properties methods events
Object
DOM
HTML
(structure, ”look”)
CSS
(presentation,
“feel”)
JS
(behavior, “act”)
IO statements
comments
debug
good practices
f(..){..}
29. 4/3/2020
In Class Coding #2 – Grade Distributions
31
4
2 1 1
3
0
5
10
15
20
25
30
35
A 90-110 B 80-90 C 70-80 D 50-70 E Fail N/A
In-Class Coding #2: Grade Distributions
Thursday
20
2
3
5
4
7
0
5
10
15
20
25
A 90-110 B 80-90 C 70-80 D 50-70 E Fail N/A
In-Class Coding #2: Grade Distributions
Friday
13
3
5
1
15
4
0
2
4
6
8
10
12
14
16
N/A E Fail D 50-70% C 70-80% B 80-90% A 90-110%
In-Class Coding #1: Grade Distributions
Thursday (41 students)
4
1 1 0
5
30
0
5
10
15
20
25
30
35
N/A E Fail D 50-70% C 70-80% B 80-90% A 90-110%
In-Class Coding #1: Grade Distributions
Friday (41 students)
30. 4/3/2020 M4 - Functions 30
M4 Functions – continue (week 5)
Concepts and Built-in Functions
User Defined Functions: Named vs Anonymous
Invoking Functions: Parameters and Return (Input/Output)
Scopes: Global vs Local Variables
TYPE e.g. FUNCTIONs TASK PERFORMED
Core and
Browser
Math.pow calculates powers or exponents
parseInt convert string to integer
parseFloat convert string to decimals
alert displays pop up window with message
prompt displays pop up requesting input
DOM
getElementById access specific page element
addEventListener attach code to respond to event
continue
31. 4/3/2020 M4 - Functions 31
Testing: HTML program vs console
32. 4/3/2020 M4 - Functions 32
M4 Functions –User Defined Functions
What to consider? :
1. what needs to be done ?
2. What/if it will be named ?
3. how it will accomplish its task ?
4. what inputs it requires (if any) ?
5. what output it produces (if any) ?
START
input
Task(s)
STOP
Decision
output
Task(s)Task(s)
output
functions
What technique to use to define the
function?
f(..){..}
33. 4/3/2020 M4 - Functions 33
Refresh: M2 Variable, Declaration and Expression
Declaration – assign name, value and data type
var, const, let – keywords to declare a variable for
their data type: number, string and Boolean
(primitive)
function – keyword to declare function variable
Expression – perform tasks and return
a value variable value ;
expression
34. 4/3/2020 M4 - Functions 34
M4 Functions – Definition Techniques
Named/Anonymous, with/without return value
Using function keyword
Declaration (named)
Expression (anonymous)
Using function constructor
Object Construction
(won’t be covered in this course)
perform
actions only
(define it before invoking it)
35. Which function declaration technique was
used in the following example?
A. Named: with function keyword in a
declaration statement
B. Anonymous: performing actions, no
return value
4/3/2020 M4 - Functions 35
36. Which function declaration technique was
used in the following example?
A. Named: in a declaration statement,
with a return value
B. Anonymous: with function keyword in
an expression
4/3/2020 M4 - Functions 36
37. 4/3/2020 M4 - Functions 37
M4 Functions –User Defined
Named Function: Declaration statement
5 Considerations
indent
indent
Part 1 Header:
keyword, name, parameters
Part 2:
Body
1.what needs to be done ?
2.what/if it will be named ?
3.how it will accomplish its task ?
4.what inputs it requires (if any) ?
5.what output it produces (if any) ?
example
f(..) {..}
header body
38. 4/3/2020 M4 - Functions 38
M4 Functions –User Defined
Named Function: Example
#2 the NAME
#3 the TASKs
#1 the NEEDs
#4 the INPUT
#5 the OUTPUT
1.what needs to be done ?
2.what it will be named ?
3.how it will accomplish its task ?
4.what inputs it requires (if any) ?
5.what output it produces (if any) ?
39. 4/3/2020 M4 - Functions 39
M4 Functions – Invoking Functions
Similar to how built-in functions are called
System invoked – by event handlers,
for Anonymous function
Statements inside the function are executed only
when “something” invokes it; code or system
Code invoked: by “you”, for Named
function; with or without parameters
(expression or assignment statement)
40. 4/3/2020 M4 - Functions 40
<!DOCTYPE html>
<html lang = "en">
<head>
<title>CWMD2601 – Scripting</title>
<meta charset = "utf-8" />
<!—enter your title info-->
</head>
<link rel="stylesheet" href="M2 Exercise.css" />
<h1>Module 2 Assignment0 -Extended Greeting</h1>
<body>
<label for = "name">NAME:</label>
<input type="text" id="name" size="15">
<label for = "program">PROGRAM:</label>
<input type="text" id="program" size="30" >
<p id = "greeting">Your personal greeting will display here</p>
<button id = "greet">
Display Greeting
</button>
<script src=“script.js"></script>
</body>
</html>
// creates a personalized greeting
document.getElementById('greet').onclick = function () {
// get user's name from the text field
let userName = document.getElementById('name').value;
// get user's name from the text field
let programName = document.getElementById('program').value;
// greet user by name in the document
document.getElementById('greeting').textContent
= 'Hello ' + userName + '. Hope you are enjoying the ' +
programName + ' program!';
document.getElementById('greeting').style.color = 'red';
document.getElementById('greeting').style.backgroundColor =
'yellow';
}
index.html
script.js
M2 Greeting Exercise –Anonymous Function
41. 4/3/2020 M4 - Functions 41
M4 Functions –User Defined Functions
Named Function: Exercise
Modify Your M2 Program with Named Function
anonymous and system invoked
named and system invoked
42. 4/3/2020 M4 - Functions 42
M4 Functions – Invoking Functions (Named)
Parameters (Input)
Arguments – values passed to the parameters; literals,
variables, or expressions
Expressions - first evaluated, then the values are passed to
the function
Variables – only it’s values are passed, original variables will
not change, try the following:
1.what needs to be done ?
2.what it will be named ?
3.how it will accomplish its task ?
4.what inputs it requires (if any) ?
5.what output it produces (if any) ?
f(..) {..}
header body
43. 4/3/2020 M4 - Functions 43
M4 Functions –User Defined Functions
Anonymous
// creates a personalized greeting
document.getElementById("greet").onclick = function () {
// get user's name from the text field
var userName = document.getElementById('name').value;
// greet user by name in the document
document.getElementById('greeting').textContent
= 'Welcome ' + userName + '!';
};
Recall that we used a custom function when we coded the
greeting script:
The function had no name, as an expression:
syntax: function (parm1, parm2) {..statements..}
It was invoked by event handlers for onclick button
f(..) {..}
header body
44. 4/3/2020 M4 - Functions 44
M4 Functions – Invoking Functions (Named)
Return (Output)
Must exit with a return statement
if an output value is expected
return expression;
1.what needs to be done ?
2.what it will be named ?
3.how it will accomplish its task ?
4.what inputs it requires (if any) ?
5.what output it produces (if any) ?
literal value, variable or
calculation
back to the calling
statement, and continue
Use Console to test the following with parameters: -1, 0,
1, Infinity, –Infinity
f(..) {..}
header body
45. 4/3/2020 M4 - Functions 45
M4 Functions – Invoking Functions (Named)
Exercise –user invoked, with parameters
Use a Console to test the convertToCentigrade function. Note that
the return value from a function can be assigned to a variable or
consumed directly as in the alert.
46. 4/3/2020 M4 - Functions 46
M4 Functions – Variable Scopes
Scope - a variable property, describes which part
of the program can see/use it
global – declared outside of any function (or
code block)
local – aka function scope, declared inside
and only be used within the function
let – instead of var, cleared some of the confusions
Try the followings in Console
f(..) {..}
header body
47. 4/3/2020 M4 - Functions 47
M4 Functions – User Defined Functions
Summary
Named functions – declaration, for re-use & modularity
Names must match in the declare and call statements
Anonymous functions – expression (no name), for modularity
only, e.g. element.addEvent.Listener(“event” , function(){…..})
Return -can perform just actions or return values, or both
Parameters are optional, but must match the calling
statement; the right order and type
let instead of var
The “five things” to consider
1.what needs to be done ?
2.what it will be named ?
3.how it will accomplish its task ?
4.what inputs it requires (if any) ?
5.what output it produces (if any) ?
f(..) {..}
header body
48. Which of the following declaration statement
is to define a named function?
A. function=myFunction(){..}
B. function myFunction(){..}
C. function:myFunction(){..}
D. let function=myFunction(){..}
4/3/2020 M4 - Functions 48
f(..) {..}
header body
myFunction
49. With JavaScript how do you call a function
named "myFunction"?
A. call function myFunction()
B. call myFunction()
C. myFunction()
D. x = myFunction()
4/3/2020 M4 - Functions 49
f(..) {..}
header body
myFunction,
invoked by
• System or
• User
50. Inside the process symbol of the flow chart, can
there be another flowchart ? for modulization.
A. True
B. False
4/3/2020 M1 – The Process of Programming 50
START
input
Task(s)
STOP
Decision
output
Task(s)Task(s)
START
input
Task(s)
STOP
Decision
output
Task(s)Task(s)
51. Is it possible to nest functions in JavaScript?
A. True
B. False
4/3/2020 M4 - Functions 51
f(..) {..}
header body
52. A. True
B. False
4/3/2020 M4 - Functions 52
plus() is a nested function
f(..) {..}
header body
Same as counter = counter + 1;
53. Which technique is used to define function add()?
A. Anonymous
B. Named
C. Constructor
4/3/2020 M4 - Functions 53
54. What is the value of total?
A. 0
B. 1
C. 2
D. None of the above
4/3/2020 M4 - Functions 54
55. Which of the following is a valid function
definition?
A. function myFunc(arg1,arg2) { }
B. func myFunc = (arg1 as string,
arg2 as int) { }
C. function myFunc(arg1, arg2):
4/3/2020 M4 - Functions 55
f(..) {..}
header body
56. Can you assign a anonymous function to a
variable?
A. True
B. False
4/3/2020 M4 - Functions 56
variable value ;
expression
Operators
arithmetic
string
comparison
logical
number
string
Boolean
null
undefined
object/??/array
HINT: Assignment Statement
57. How do you assign an anonymous function to
a variable?
A. let myFunction = function() { };
B. let myFunction = func() { };
C. let myFunction = func({});
4/3/2020 M4 - Functions 57
variable value ;
expression
operators
arithmetic
string
comparison
logical
number
string
Boolean
null
undefined
object/function/array
58. Sending values to the parameters (aka input to
the function) of a called function is called passing
arguments_.
A. True
B. False
4/3/2020 M4 - Functions 58
START
input
Task(s)
STOP
Decision
output
Task(s)Task(s)
output
functions
f(..) {..}
header body
59. What statement is to return a value to the
place that called the function?
A. déclaration (let, var, function)
B. assignment statement
C. return
4/3/2020 M4 - Functions 59
f(..) {..}
header body
60. Parameters in a function definition are placed
within __________ .
A. braces
B. parentheses
C. double quotes
D. single quotes
4/3/2020 M4 - Functions 60
Hint:
61. Given the following code, what does myFunc()
return?
A. foobar
B. NaN
C. undefinedundefined
D. An error is thrown because of illegal
out of scope access
E. foo + bar
4/3/2020 M4 - Functions 61
62. Given the followings code, what does myFunc()
return?
A. 0
B. 5
C. 10
D. Undefined
E. NaN
4/3/2020 M4 - Functions 62
63. Given the followings code, what is the value of x
after myFunc is called?
A. 0
B. 5
C. 10
D. Undefined
E. NaN
4/3/2020 M4 - Functions 63
HINT: When invoking a function with parameters,
only their values are passed as arguments
64. If a function doesn’t explicitly use the “return”
operator, what will the return value be when the
function is invoked?
A. null
B. undefined
C. false
D. NaN
4/3/2020 M4 - Functions 64
f(..) {..}
header body
65. What will be returned after invoking `foo` ?
A. 7
B. 10
C. undefined
D. null
E. foo
4/3/2020 M4 - Functions 65
f(..) {..}
header body
66. What is alerted after function b is invoked?
A. 2
B. 1
C. 10
D. 3
4/3/2020 M4 - Functions 66
f(..) {..}
header body
HINT: arguments is an array storing the input values.
Not yet covered, try it !
67. What value is passed to function myFunction as
the argument?
myFunction( ‘5’);
A. ‘5’ (string)
B. 5 (number)
C. NaN
4/3/2020 M4 - Functions 67
f(..) {..}
header body
68. How can you get the value type of arguments
passed to a function?
A. using typeof() operator
B. using getType() function
C. Both of the above.
D. None of the above.
4/3/2020 M4 - Functions 68
f(..) {..}
header body
69. With the following statements, what is in the
console?
A. Number
B. String
C. Boolean
D. None of the above
4/3/2020 M4 - Functions 69
f(..) {..}
header body
70. What is alerted after function b is invoked?
A. Number
B. String
C. Boolean
D. None of the above
4/3/2020 M4 - Functions 70
f(..) {..}
header body
71. Guess what is alerted after function b is invoked?
A. 1
B. 2
C. 3
D. 5
4/3/2020 M4 - Functions 71
f(..) {..}
header body
72. Which of the following type of variable is visible
and accessible everywhere in your JavaScript
code?
A. global variable
B. local variable
C. Both of the above.
D. None of the above.
4/3/2020 M4 - Functions 72
f(..) {..}
header body
73. List all the global variables in the following program?
A. total and counter
B. total only
C. counter only
D. none
4/3/2020 M4 - Functions 73
f(..) {..}
header body
74. List all the local variables in the following program ?
A. total and counter
B. total only
C. counter only
D. none
4/3/2020 M4 - Functions 74
f(..) {..}
header body
75. What is alerted?
A. Undefined
B. 3
C. Invalid JavaScript
4/3/2020 M4 - Functions 75
76. What is alerted?
A. Undefined
B. 3
C. Invalid JavaScript
4/3/2020 M4 - Functions 76
77. What is alerted ?
A. ‘hello’
B. nothing
C. ‘Invalid JavaScript’ error message
4/3/2020 M4 - Functions 77
78. What is alerted?
A. ‘hello’
B. nothing
C. ‘Invalid JavaScript’ error message
4/3/2020 M4 - Functions 78
f(..) {..}
header body
79. The followings have the same result?
A. True
B. False
4/3/2020 M4 - Functions 79
82. What is alerted?
A. both are number
B. both are string
C. both are Boolean
D. both are function
4/3/2020 M4 - Functions 82
83. The following codes produce the same result.
A. True
B. False
4/3/2020 M4 - Functions 83
84. 4/3/2020 M4 - Functions 84
M4 Functions –User Defined Functions
Best Practices
Placement all function definitions in .js
file and insert “..src=“ statement right
above </body> tag
Declare all global variables first, (using
let) then function definitions, then the
invoking statements
Name rules for function and parameter are same as variable,
e.g. cannot use JS reserved words, space are not allowed, …etc.
Use lower case verb for functions that perform actions, e.g.
calcTax, displayDate
85. let convertToCentigrade =
degFahren => 5/9 * (degFahren - 32);
ES6 introduced a shorter, more compact way to create a JavaScript
function. Known as arrow functions because their syntax uses =>
they are becoming increasingly common. The way they are coded
again borrows from how functions in mathematics are written.
Here's the temperature conversion convertToCentigrade recoded as
an arrow function. Note that much of the previous syntax (like
return) is no longer needed. Use the Console to test this out.
T4 – Functions
Because arrow functions behave a little differently than a normal
function declared with function we will NOT use them in this course.
They are presented as an FYI, especially for those in CWD.
M4 Functions –User Defined Functions (FYI)
Arrow Functions in ES6
86. 4/3/2020 M4 - Functions 86
M4 Functions –User Defined Function
Summary
Type
Built-In: Core, BOM & DOM
User- Built: own or others
User Built
Techniques: declaration,
expression & constructor
Named vs Anonymous
Invoke/Exit
System and code invoked
Parameters: literals,
variables and expressions
“return” statement
with/without value(s)
Scopes
Global vs Local
87. 4/3/2020 87
M1, M2, M3 and M4 Takeaways
M1 -The
Programming
Process
IPO
1. INPUT
2. OUTPUT
3. DECLARATION
4. EXPRESSION
5. DECISION
6. LOOP
variables values expressions
Algorithms
PC, FC
Statements
IPO
I&D Web
Page
PROGRAMMING
RUN
M3 – Variables,
Values,
Expressions
input output
process
How Data are stored ?
lobal vs local variables
declaration using “let”
What are the Data types ?
number
string
Boolean
null
undefined
functions/arrays/objects How Data are computed?
assignment
arithmetic, string operators
comparison operator
mixed operator
IPO – Data Processing
M4 – Functions
built-in, user defined
scope, invoke, return
M4 - Functions
START
input
Task(s)
STOP
Decision
output
Task(s)Task(s)
output
M2 – Getting Started
with JavaScript
DOM
HTML
(structure, ”look”)
CSS
(presentation,
“feel”)
JS
(behavior, “act”)
IO statements
comments
debug
good practices
f(..) {..}
header body
arguments
return
properties methods events
Object