SlideShare a Scribd company logo
1 of 89
M4 - Functions
School of Media, Art, & Design
CWMD2601 –
Scripting for Design
4/3/2020 M4 - Functions 1
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
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/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
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
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
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
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
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)
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)
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)
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
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)
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
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.
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
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
A code block simply consists of grouped
statements with curly braces ({..}), e.g.
A. True
B. False
4/3/2020 M4 - Functions 18
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
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
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
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
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
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
let a = ‘011’; parseInt(a); will return:
A. 11
B. 0
C. 9
D. error
4/3/2020 M4 - Functions 25
The following programs produce the same
output?
A. True
B. False
4/3/2020 M4 - Functions 26
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
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(..){..}
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)
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
4/3/2020 M4 - Functions 31
Testing: HTML program vs console
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(..){..}
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
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)
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
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
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
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) ?
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)
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
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
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
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
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
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.
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
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
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
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
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)
Is it possible to nest functions in JavaScript?
A. True
B. False
4/3/2020 M4 - Functions 51
f(..) {..}
header body
A. True
B. False
4/3/2020 M4 - Functions 52
plus() is a nested function
f(..) {..}
header body
Same as counter = counter + 1;
Which technique is used to define function add()?
A. Anonymous
B. Named
C. Constructor
4/3/2020 M4 - Functions 53
What is the value of total?
A. 0
B. 1
C. 2
D. None of the above
4/3/2020 M4 - Functions 54
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
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
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
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
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
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:
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
Given the followings code, what does myFunc()
return?
A. 0
B. 5
C. 10
D. Undefined
E. NaN
4/3/2020 M4 - Functions 62
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
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
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
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 !
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
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
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
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
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
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
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
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
What is alerted?
A. Undefined
B. 3
C. Invalid JavaScript
4/3/2020 M4 - Functions 75
What is alerted?
A. Undefined
B. 3
C. Invalid JavaScript
4/3/2020 M4 - Functions 76
What is alerted ?
A. ‘hello’
B. nothing
C. ‘Invalid JavaScript’ error message
4/3/2020 M4 - Functions 77
What is alerted?
A. ‘hello’
B. nothing
C. ‘Invalid JavaScript’ error message
4/3/2020 M4 - Functions 78
f(..) {..}
header body
The followings have the same result?
A. True
B. False
4/3/2020 M4 - Functions 79
The following produce the same result?
A. True
B. False
4/3/2020 M4 - Functions 80
The following produce the same result?
A. True
B. False
4/3/2020 M4 - Functions 81
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
The following codes produce the same result.
A. True
B. False
4/3/2020 M4 - Functions 83
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
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
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
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
4/3/2020 M4 - Functions 88
M1, M2, M3 and M4 Takeaways
4/3/2020 M4 - Functions 89
M4 Functions – Assignment (10%)
 See “M4 Home Assignment” in DC Connect

More Related Content

What's hot

Csc153 chapter 03
Csc153 chapter 03Csc153 chapter 03
Csc153 chapter 03PCC
 
Csc153 chapter 04
Csc153 chapter 04Csc153 chapter 04
Csc153 chapter 04PCC
 
Csc153 chapter 02
Csc153 chapter 02Csc153 chapter 02
Csc153 chapter 02PCC
 
Csc153 chapter 07
Csc153 chapter 07Csc153 chapter 07
Csc153 chapter 07PCC
 
Literals,variables,datatype in C#
Literals,variables,datatype in C#Literals,variables,datatype in C#
Literals,variables,datatype in C#Prasanna Kumar SM
 
Csc153 chapter 01
Csc153 chapter 01Csc153 chapter 01
Csc153 chapter 01PCC
 
Csc153 chapter 08
Csc153 chapter 08Csc153 chapter 08
Csc153 chapter 08PCC
 
Mapping and visualization of source code a survey
Mapping and visualization of source code a surveyMapping and visualization of source code a survey
Mapping and visualization of source code a surveyNakul Sharma
 
Csc153 chapter 06
Csc153 chapter 06Csc153 chapter 06
Csc153 chapter 06PCC
 
Csc253 chapter 09
Csc253 chapter 09Csc253 chapter 09
Csc253 chapter 09PCC
 
Duplicate Code Detection using Control Statements
Duplicate Code Detection using Control StatementsDuplicate Code Detection using Control Statements
Duplicate Code Detection using Control StatementsEditor IJCATR
 
Visualizing UML’s Sequence and Class Diagrams Using Graph-Based Clusters
Visualizing UML’s Sequence and   Class Diagrams Using Graph-Based Clusters  Visualizing UML’s Sequence and   Class Diagrams Using Graph-Based Clusters
Visualizing UML’s Sequence and Class Diagrams Using Graph-Based Clusters Nakul Sharma
 
Course Breakup Plan- C
Course Breakup Plan- CCourse Breakup Plan- C
Course Breakup Plan- Cswatisinghal
 

What's hot (17)

Csc153 chapter 03
Csc153 chapter 03Csc153 chapter 03
Csc153 chapter 03
 
Csc153 chapter 04
Csc153 chapter 04Csc153 chapter 04
Csc153 chapter 04
 
Csc153 chapter 02
Csc153 chapter 02Csc153 chapter 02
Csc153 chapter 02
 
Csc153 chapter 07
Csc153 chapter 07Csc153 chapter 07
Csc153 chapter 07
 
Lecture 5
Lecture 5Lecture 5
Lecture 5
 
Literals,variables,datatype in C#
Literals,variables,datatype in C#Literals,variables,datatype in C#
Literals,variables,datatype in C#
 
Csc153 chapter 01
Csc153 chapter 01Csc153 chapter 01
Csc153 chapter 01
 
Csc153 chapter 08
Csc153 chapter 08Csc153 chapter 08
Csc153 chapter 08
 
Mapping and visualization of source code a survey
Mapping and visualization of source code a surveyMapping and visualization of source code a survey
Mapping and visualization of source code a survey
 
Csc153 chapter 06
Csc153 chapter 06Csc153 chapter 06
Csc153 chapter 06
 
Csc253 chapter 09
Csc253 chapter 09Csc253 chapter 09
Csc253 chapter 09
 
Duplicate Code Detection using Control Statements
Duplicate Code Detection using Control StatementsDuplicate Code Detection using Control Statements
Duplicate Code Detection using Control Statements
 
Visualizing UML’s Sequence and Class Diagrams Using Graph-Based Clusters
Visualizing UML’s Sequence and   Class Diagrams Using Graph-Based Clusters  Visualizing UML’s Sequence and   Class Diagrams Using Graph-Based Clusters
Visualizing UML’s Sequence and Class Diagrams Using Graph-Based Clusters
 
Handout#07
Handout#07Handout#07
Handout#07
 
C LANGUAGE NOTES
C LANGUAGE NOTESC LANGUAGE NOTES
C LANGUAGE NOTES
 
CP Handout#1
CP Handout#1CP Handout#1
CP Handout#1
 
Course Breakup Plan- C
Course Breakup Plan- CCourse Breakup Plan- C
Course Breakup Plan- C
 

Similar to JavaScript functions

U19CS101 - PPS Unit 4 PPT (1).ppt
U19CS101 - PPS Unit 4 PPT (1).pptU19CS101 - PPS Unit 4 PPT (1).ppt
U19CS101 - PPS Unit 4 PPT (1).pptManivannan837728
 
The process of programming
 The process of programming The process of programming
The process of programmingKopi Maheswaran
 
C notes by m v b reddy(gitam)imp notes all units notes 5 unit order
C notes by m v b  reddy(gitam)imp  notes  all units notes  5 unit orderC notes by m v b  reddy(gitam)imp  notes  all units notes  5 unit order
C notes by m v b reddy(gitam)imp notes all units notes 5 unit orderMalikireddy Bramhananda Reddy
 
variables, values and expressions
   variables, values and expressions   variables, values and expressions
variables, values and expressionsKopi Maheswaran
 
Bca1020 programming in c
Bca1020  programming in cBca1020  programming in c
Bca1020 programming in csmumbahelp
 
Notes of c programming 1st unit BCA I SEM
Notes of c programming  1st unit BCA I SEMNotes of c programming  1st unit BCA I SEM
Notes of c programming 1st unit BCA I SEMMansi Tyagi
 
Fy secondsemester2016
Fy secondsemester2016Fy secondsemester2016
Fy secondsemester2016Ankit Dubey
 
Problem Solving Techniques and Introduction to C
Problem Solving Techniques and Introduction to CProblem Solving Techniques and Introduction to C
Problem Solving Techniques and Introduction to CPrabu U
 
Book management system
Book management systemBook management system
Book management systemSHARDA SHARAN
 
SE-IT JAVA LAB SYLLABUS
SE-IT JAVA LAB SYLLABUSSE-IT JAVA LAB SYLLABUS
SE-IT JAVA LAB SYLLABUSnikshaikh786
 
AVB201.1 MS Access VBA Module 1
AVB201.1 MS Access VBA Module 1AVB201.1 MS Access VBA Module 1
AVB201.1 MS Access VBA Module 1guest38bf
 
Lecture 3.2.4 C pointer to Structure.pptx
Lecture 3.2.4 C pointer to Structure.pptxLecture 3.2.4 C pointer to Structure.pptx
Lecture 3.2.4 C pointer to Structure.pptxravi2692kumar
 
Spreadsheet Analytical Tools
Spreadsheet Analytical ToolsSpreadsheet Analytical Tools
Spreadsheet Analytical ToolsJoselito Perez
 
ERP Magazine April 2018 Issue 1
ERP Magazine April 2018 Issue 1 ERP Magazine April 2018 Issue 1
ERP Magazine April 2018 Issue 1 Rehan Zaidi
 
ERP Magazine April 2018 - The magazine for SAP ABAP Professionals
ERP Magazine April 2018 - The magazine for SAP ABAP ProfessionalsERP Magazine April 2018 - The magazine for SAP ABAP Professionals
ERP Magazine April 2018 - The magazine for SAP ABAP ProfessionalsRehan Zaidi
 

Similar to JavaScript functions (20)

U19CS101 - PPS Unit 4 PPT (1).ppt
U19CS101 - PPS Unit 4 PPT (1).pptU19CS101 - PPS Unit 4 PPT (1).ppt
U19CS101 - PPS Unit 4 PPT (1).ppt
 
C AND DATASTRUCTURES PREPARED BY M V B REDDY
C AND DATASTRUCTURES PREPARED BY M V B REDDYC AND DATASTRUCTURES PREPARED BY M V B REDDY
C AND DATASTRUCTURES PREPARED BY M V B REDDY
 
The process of programming
 The process of programming The process of programming
The process of programming
 
C notes by m v b reddy(gitam)imp notes all units notes 5 unit order
C notes by m v b  reddy(gitam)imp  notes  all units notes  5 unit orderC notes by m v b  reddy(gitam)imp  notes  all units notes  5 unit order
C notes by m v b reddy(gitam)imp notes all units notes 5 unit order
 
C programming
C programmingC programming
C programming
 
variables, values and expressions
   variables, values and expressions   variables, values and expressions
variables, values and expressions
 
Bca1020 programming in c
Bca1020  programming in cBca1020  programming in c
Bca1020 programming in c
 
Notes of c programming 1st unit BCA I SEM
Notes of c programming  1st unit BCA I SEMNotes of c programming  1st unit BCA I SEM
Notes of c programming 1st unit BCA I SEM
 
Fy secondsemester2016
Fy secondsemester2016Fy secondsemester2016
Fy secondsemester2016
 
Problem Solving Techniques and Introduction to C
Problem Solving Techniques and Introduction to CProblem Solving Techniques and Introduction to C
Problem Solving Techniques and Introduction to C
 
Book management system
Book management systemBook management system
Book management system
 
SE-IT JAVA LAB SYLLABUS
SE-IT JAVA LAB SYLLABUSSE-IT JAVA LAB SYLLABUS
SE-IT JAVA LAB SYLLABUS
 
Vb6.0 intro
Vb6.0 introVb6.0 intro
Vb6.0 intro
 
AVB201.1 MS Access VBA Module 1
AVB201.1 MS Access VBA Module 1AVB201.1 MS Access VBA Module 1
AVB201.1 MS Access VBA Module 1
 
Lecture 3.2.4 C pointer to Structure.pptx
Lecture 3.2.4 C pointer to Structure.pptxLecture 3.2.4 C pointer to Structure.pptx
Lecture 3.2.4 C pointer to Structure.pptx
 
Computer science
Computer scienceComputer science
Computer science
 
Spreadsheet Analytical Tools
Spreadsheet Analytical ToolsSpreadsheet Analytical Tools
Spreadsheet Analytical Tools
 
ERP Magazine April 2018 Issue 1
ERP Magazine April 2018 Issue 1 ERP Magazine April 2018 Issue 1
ERP Magazine April 2018 Issue 1
 
ERP Magazine April 2018 - The magazine for SAP ABAP Professionals
ERP Magazine April 2018 - The magazine for SAP ABAP ProfessionalsERP Magazine April 2018 - The magazine for SAP ABAP Professionals
ERP Magazine April 2018 - The magazine for SAP ABAP Professionals
 
Functions
FunctionsFunctions
Functions
 

More from Kopi Maheswaran

More from Kopi Maheswaran (20)

Kopinath retail installation_consideration2
Kopinath retail installation_consideration2Kopinath retail installation_consideration2
Kopinath retail installation_consideration2
 
Game Plan
Game PlanGame Plan
Game Plan
 
JavaScript Scripting For Design (CWMD 2601)
JavaScript Scripting For Design (CWMD 2601)JavaScript Scripting For Design (CWMD 2601)
JavaScript Scripting For Design (CWMD 2601)
 
Scripting for design (cwmd 2601)
Scripting for design (cwmd 2601)Scripting for design (cwmd 2601)
Scripting for design (cwmd 2601)
 
Cwmd 2601 2020
Cwmd 2601 2020Cwmd 2601 2020
Cwmd 2601 2020
 
getting started with java script
 getting started with java script  getting started with java script
getting started with java script
 
Movie report
Movie report Movie report
Movie report
 
Scripting for Design
Scripting for DesignScripting for Design
Scripting for Design
 
Vi cheat sheet
Vi cheat sheetVi cheat sheet
Vi cheat sheet
 
Elementsofdesign
ElementsofdesignElementsofdesign
Elementsofdesign
 
Colour qualities
Colour qualitiesColour qualities
Colour qualities
 
Colour relationships
Colour relationshipsColour relationships
Colour relationships
 
Principlesofdesign
PrinciplesofdesignPrinciplesofdesign
Principlesofdesign
 
Compositional flow of information
Compositional flow of informationCompositional flow of information
Compositional flow of information
 
Rhythm, framing, transparency and time &amp; motion
Rhythm, framing, transparency and time &amp; motionRhythm, framing, transparency and time &amp; motion
Rhythm, framing, transparency and time &amp; motion
 
common sentence errors
 common sentence errors  common sentence errors
common sentence errors
 
Brand Book
Brand BookBrand Book
Brand Book
 
punctuation
  punctuation   punctuation
punctuation
 
Protocols
Protocols Protocols
Protocols
 
Languages (1)
Languages (1)Languages (1)
Languages (1)
 

Recently uploaded

KSHARA STURA .pptx---KSHARA KARMA THERAPY (CAUSTIC THERAPY)————IMP.OF KSHARA ...
KSHARA STURA .pptx---KSHARA KARMA THERAPY (CAUSTIC THERAPY)————IMP.OF KSHARA ...KSHARA STURA .pptx---KSHARA KARMA THERAPY (CAUSTIC THERAPY)————IMP.OF KSHARA ...
KSHARA STURA .pptx---KSHARA KARMA THERAPY (CAUSTIC THERAPY)————IMP.OF KSHARA ...M56BOOKSTORE PRODUCT/SERVICE
 
Hierarchy of management that covers different levels of management
Hierarchy of management that covers different levels of managementHierarchy of management that covers different levels of management
Hierarchy of management that covers different levels of managementmkooblal
 
Interactive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communicationInteractive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communicationnomboosow
 
Crayon Activity Handout For the Crayon A
Crayon Activity Handout For the Crayon ACrayon Activity Handout For the Crayon A
Crayon Activity Handout For the Crayon AUnboundStockton
 
ECONOMIC CONTEXT - LONG FORM TV DRAMA - PPT
ECONOMIC CONTEXT - LONG FORM TV DRAMA - PPTECONOMIC CONTEXT - LONG FORM TV DRAMA - PPT
ECONOMIC CONTEXT - LONG FORM TV DRAMA - PPTiammrhaywood
 
Pharmacognosy Flower 3. Compositae 2023.pdf
Pharmacognosy Flower 3. Compositae 2023.pdfPharmacognosy Flower 3. Compositae 2023.pdf
Pharmacognosy Flower 3. Compositae 2023.pdfMahmoud M. Sallam
 
Incoming and Outgoing Shipments in 1 STEP Using Odoo 17
Incoming and Outgoing Shipments in 1 STEP Using Odoo 17Incoming and Outgoing Shipments in 1 STEP Using Odoo 17
Incoming and Outgoing Shipments in 1 STEP Using Odoo 17Celine George
 
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...Marc Dusseiller Dusjagr
 
Historical philosophical, theoretical, and legal foundations of special and i...
Historical philosophical, theoretical, and legal foundations of special and i...Historical philosophical, theoretical, and legal foundations of special and i...
Historical philosophical, theoretical, and legal foundations of special and i...jaredbarbolino94
 
Meghan Sutherland In Media Res Media Component
Meghan Sutherland In Media Res Media ComponentMeghan Sutherland In Media Res Media Component
Meghan Sutherland In Media Res Media ComponentInMediaRes1
 
Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)eniolaolutunde
 
Introduction to AI in Higher Education_draft.pptx
Introduction to AI in Higher Education_draft.pptxIntroduction to AI in Higher Education_draft.pptx
Introduction to AI in Higher Education_draft.pptxpboyjonauth
 
MARGINALIZATION (Different learners in Marginalized Group
MARGINALIZATION (Different learners in Marginalized GroupMARGINALIZATION (Different learners in Marginalized Group
MARGINALIZATION (Different learners in Marginalized GroupJonathanParaisoCruz
 
Capitol Tech U Doctoral Presentation - April 2024.pptx
Capitol Tech U Doctoral Presentation - April 2024.pptxCapitol Tech U Doctoral Presentation - April 2024.pptx
Capitol Tech U Doctoral Presentation - April 2024.pptxCapitolTechU
 
Introduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher EducationIntroduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher Educationpboyjonauth
 
Painted Grey Ware.pptx, PGW Culture of India
Painted Grey Ware.pptx, PGW Culture of IndiaPainted Grey Ware.pptx, PGW Culture of India
Painted Grey Ware.pptx, PGW Culture of IndiaVirag Sontakke
 

Recently uploaded (20)

KSHARA STURA .pptx---KSHARA KARMA THERAPY (CAUSTIC THERAPY)————IMP.OF KSHARA ...
KSHARA STURA .pptx---KSHARA KARMA THERAPY (CAUSTIC THERAPY)————IMP.OF KSHARA ...KSHARA STURA .pptx---KSHARA KARMA THERAPY (CAUSTIC THERAPY)————IMP.OF KSHARA ...
KSHARA STURA .pptx---KSHARA KARMA THERAPY (CAUSTIC THERAPY)————IMP.OF KSHARA ...
 
Hierarchy of management that covers different levels of management
Hierarchy of management that covers different levels of managementHierarchy of management that covers different levels of management
Hierarchy of management that covers different levels of management
 
Interactive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communicationInteractive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communication
 
ESSENTIAL of (CS/IT/IS) class 06 (database)
ESSENTIAL of (CS/IT/IS) class 06 (database)ESSENTIAL of (CS/IT/IS) class 06 (database)
ESSENTIAL of (CS/IT/IS) class 06 (database)
 
Crayon Activity Handout For the Crayon A
Crayon Activity Handout For the Crayon ACrayon Activity Handout For the Crayon A
Crayon Activity Handout For the Crayon A
 
ECONOMIC CONTEXT - LONG FORM TV DRAMA - PPT
ECONOMIC CONTEXT - LONG FORM TV DRAMA - PPTECONOMIC CONTEXT - LONG FORM TV DRAMA - PPT
ECONOMIC CONTEXT - LONG FORM TV DRAMA - PPT
 
Pharmacognosy Flower 3. Compositae 2023.pdf
Pharmacognosy Flower 3. Compositae 2023.pdfPharmacognosy Flower 3. Compositae 2023.pdf
Pharmacognosy Flower 3. Compositae 2023.pdf
 
Incoming and Outgoing Shipments in 1 STEP Using Odoo 17
Incoming and Outgoing Shipments in 1 STEP Using Odoo 17Incoming and Outgoing Shipments in 1 STEP Using Odoo 17
Incoming and Outgoing Shipments in 1 STEP Using Odoo 17
 
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
 
Historical philosophical, theoretical, and legal foundations of special and i...
Historical philosophical, theoretical, and legal foundations of special and i...Historical philosophical, theoretical, and legal foundations of special and i...
Historical philosophical, theoretical, and legal foundations of special and i...
 
Meghan Sutherland In Media Res Media Component
Meghan Sutherland In Media Res Media ComponentMeghan Sutherland In Media Res Media Component
Meghan Sutherland In Media Res Media Component
 
OS-operating systems- ch04 (Threads) ...
OS-operating systems- ch04 (Threads) ...OS-operating systems- ch04 (Threads) ...
OS-operating systems- ch04 (Threads) ...
 
Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)
 
TataKelola dan KamSiber Kecerdasan Buatan v022.pdf
TataKelola dan KamSiber Kecerdasan Buatan v022.pdfTataKelola dan KamSiber Kecerdasan Buatan v022.pdf
TataKelola dan KamSiber Kecerdasan Buatan v022.pdf
 
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
 
Introduction to AI in Higher Education_draft.pptx
Introduction to AI in Higher Education_draft.pptxIntroduction to AI in Higher Education_draft.pptx
Introduction to AI in Higher Education_draft.pptx
 
MARGINALIZATION (Different learners in Marginalized Group
MARGINALIZATION (Different learners in Marginalized GroupMARGINALIZATION (Different learners in Marginalized Group
MARGINALIZATION (Different learners in Marginalized Group
 
Capitol Tech U Doctoral Presentation - April 2024.pptx
Capitol Tech U Doctoral Presentation - April 2024.pptxCapitol Tech U Doctoral Presentation - April 2024.pptx
Capitol Tech U Doctoral Presentation - April 2024.pptx
 
Introduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher EducationIntroduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher Education
 
Painted Grey Ware.pptx, PGW Culture of India
Painted Grey Ware.pptx, PGW Culture of IndiaPainted Grey Ware.pptx, PGW Culture of India
Painted Grey Ware.pptx, PGW Culture of India
 

JavaScript functions

  • 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
  • 80. The following produce the same result? A. True B. False 4/3/2020 M4 - Functions 80
  • 81. The following produce the same result? A. True B. False 4/3/2020 M4 - Functions 81
  • 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
  • 88. 4/3/2020 M4 - Functions 88 M1, M2, M3 and M4 Takeaways
  • 89. 4/3/2020 M4 - Functions 89 M4 Functions – Assignment (10%)  See “M4 Home Assignment” in DC Connect