Be

prepared to
have fun!
Presented by Ma’am Ali
Attendanc
e
Let us
Pray.
 Emoji
Story
Write or draw 3 emojis that best describe what you
felt in our previous lesson. Explain why you choose
these emojis.
 Mystery
box
challenge
Try to guess the scrambled words given
inside the mystery box. Use the definitions
as clues in finding the words.
 It performs the
CALLING
NIGLCNAL specified
actions with
FUNCTION
TNUCFONI the indicated
parameters
when the
function is
called.
 Functions
PARAMETERS
ERSAATPMER that are
names listed
in the
function
definition.
 The function
FUNCTION
NUCFONIT code that you
have written
INVOCATION
OVNIACIOTN will be
executed
whenever it is
called or
triggered by an
event.
 It has a
WORAR
ARROW shorter
syntax
UNCTIIFON
FUNCTION compared and
an alternative
to function
expressions.
 These
NESTED
ETSEDN functions have
access to the
FUNCTION
CTUONIFN variables and
parameters of
the outer
function,
creating a
scope
 4 pics 1
word
Guess the topic for today based on the
given pictures.
F UN C T I ON
JAVASCRIPT
FUNCTIONS
Presented by Ma’am Ali
 Lesson objectives
At the end of the lesson, students should be able to:
a. define the purpose of JavaScript functions,
b. use JavaScript functions in enhancing their website,
and
c. appreciate the characteristics of JavaScript
functions.
JavaScript Functions
 What is a JavaScript Functions?
JavaScript Functions

is a block of code
designed to perform
a particular task.

is executed when
"something" invokes
it (calls it)
 Key Characteristics of Functions
Parameters and Arguments: Functions can accept
JavaScript Functions

parameters (placeholders) and be called with

arguments (values).
Return Values: Functions can return a value using
the return keyword.

Default Parameters: Default values can be

assigned to function parameters.
 Key Characteristics of Functions
Default function parameters allow named
JavaScript Functions

parameters to be initialized with default values if no

value or undefined is passed.

function multiply(a, b = 1) {
return a * b;
}
console.log(multiply(5, 2)); // Expected output: 10

console.log(multiply(5)); // Expected output: 5

A JavaScript function is defined with the function keyword,
followed by a name, followed by parentheses ().

The parentheses may include parameter names separated by

commas:
(parameter1, parameter2, ...)

The code to be executed, by the function, is placed inside curly

brackets: {}
JavaScript Functions
Function Return

When JavaScript reaches a return statement, the

function will stop executing.

Functions often compute a return value. The return

value is "returned" back to the "caller":
 Calling Functions
We can call a function by using the function name separated
by the value of parameters enclosed between the
parenthesis.
 Function Invocation
JavaScript Functions

Triggered by an event (e.g., a button click by a user).

When explicitly called from JavaScript code.

Automatically executed, such as in self-invoking

functions.
Arrow Functions
Arrow functions are
a concise syntax for
writing functions,
introduced in ES6,
and they do not
bind their own this
context.
 Callback
Functions
A callback function
is passed as an
argument to
another function
and is executed
after the
completion of that
function.
 Nested
Functions
Functions defined
within other
functions are called
nested functions.
They have access to
the variables of their
parent function.
 Conditional Statements
Are used to perform different actions based on different
conditions.
In JavaScript we have the following conditional
statements:
• Use if to specify a block of code to be executed, if a
specified condition is true
• Use else to specify a block of code to be executed, if the
same condition is false
• Use else if to specify a new condition to test, if the first
condition is false
• Use switch to specify many alternative blocks of code to
JavaScript Functions
be executed
if Statement
Use the if statement
to specify a block of
JavaScript code to
be executed if a
condition is true.

syntax:
if (condition) {
/*block of code to be
executed if
the condition is true*/
}
 else
Statement
Use the else
statement to
specify a block of
code to be
executed if the
condition is false.
syntax:
if (condition) {
// block of code to be executed
if
the condition is true
} else {
// block of code to be executed
if
 else if Statement
Use the else if statement to specify a new
condition if the first condition is false.

syntax:
if (condition1) {
// block of code to be executed if condition1 is true
} else if (condition2) {
// block of code to be executed if the condition1 is false and condition2 is true
} else {
// block of code to be executed if the condition1 is false and condition2 is false
}
If time is less than 10:00, create a "Good morning" greeting, if
not, but time is less than 20:00, create a "Good day"
greeting, otherwise a "Good evening":
JavaScript functions are needed for the creation of safe
and effective website developments. If-else conditions,
return statements, nested functions, function calling,
and callback functions are some of the tools we can
use to properly authenticate users, enhance websites,
and validate user input. Functions improve code
reusability, readability, and maintainability, making
them essential for building dynamic and interactive
web applications.
 Quarter 4

Quiz #1
Choose the correct answer for each
questions. Write your answers in
CAPITAL LETTERS.
 1. How do you define a function in JavaScript?
A) function: myFunction()
B) function myFunction()
C) def myFunction()
quarter 4 - Quiz #1

D) myFunction()

2. In JavaScript, what will the else block

execute if the condition in the if statement is
false?
A) Always
B) Only when the condition in the if statement is true
C) Only when the condition in the if statement is false
D) Never
 3. In JavaScript, what happens if an if
condition evaluates to false and there is no
else block?
A) The code will throw an error
quarter 4 - Quiz #1

B) The program will skip to the next condition or

statement
C) The program will break execution
4. What is the purpose of the else if
D) The program will prompt the user for input
statement in JavaScript?
A) To execute an alternative set of conditions if the initial
if condition is false
B) To loop over a set of statements
C) To create a function
D) To return values from a function
 let age = 27;
if (age >= 18) {

console.log("Adult");
quarter 4 - Quiz #1

} else {

console.log("Minor");
5. What will be the result of the syntax
}
above?
A) “Adult”
B) “Minor”
C) Undefined
D) Error
 Answer Key
1. A
quarter 4 - Quiz #1

2. C
3. B
4. A
5. A
 Output 4.1

Login
Authentication
System
Write a login system where you can input a username
and password details. The system should accept a
username and password, check if they match the stored
credentials, and display either a success or error
message.
Output 4.1 sample
Output 4.1 Rubrics
 JavaScript Functions

THANK YOU,
Class!
Prepared by: Ma’am Ali