Module – 2

Front-End Development
Tools, Technologies and
Frameworks
 Unit – 3
JavaScript and DOM Manipulation
 Disclaimer
The content is curated from
online/offline resources and used for
educational purpose only.
Learning Objectives
You will learn in this lesson:

• Understand fundamental concepts of client-side

scripting and interactivity
• Learn the concept of variables, operators, conditional
statements, iterative statements and functions in
JavaScript
• Understanding the DOM Manipulation and events in
JavaScript
Introduction
JavaScript is a scripting or programming language that
allows you to implement complex features on web
pages. every time a web page does more than just sit
there and display static information for you to look at
displaying timely content updates, interactive maps,
animated 2D/3D graphics, scrolling video jukeboxes,
etc. you can bet that JavaScript is probably involved. It
is the third layer of the layer cake of standard web
technologies, two of which are HTML and CSS

Source : https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript
Use Case of JavaScript

Imagine you are building a web-based live

chat application that allows users to
communicate with each other in real-time.
Here's how JavaScript would be crucial in
making this scenario work:

1.User Interaction
2. Render message

Source : https://www.javascripttutorial.net/
Use Case of JavaScript

JavaScript is JavaScript can be JavaScript can

Chat Notification
Message Encryption
Chat Interface Update

employed to involved in manage

dynamically update encrypting and notifications to alert
the chat interface decrypting users about new
as new messages messages to messages or when
arrive. This includes ensure the security the application is in
appending new and privacy of the the background.
messages to the chat. Encryption This may involve
chat log, updating libraries or APIs using browser
user lists, and may be integrated notification APIs.
showing indicators to handle the
for typing or read cryptography
messages.
What is JavaScript
• JavaScript is a high-level, versatile, and widely-used
programming language primarily used for web
development.
• It allows developers to add interactivity, dynamic
content, and various functionalities to websites and
web applications.
• JavaScript is a client-side scripting language, which
means it runs directly in the user's web browser and
interacts with the HTML and CSS of a web page.

Source : https://www.guru99.com/images/JavaScript/javascript1_1.png
Why JavaScript
• JavaScript offers lots of flexibility.
• Mobile app development, desktop app development,
and game development.
• With JavaScript you can find tons of frameworks and
libraries already developed, which can be used
directly in web development.

Source : https://www.guru99.com/images/JavaScript/javascript1_1.png
Where is JavaScript is Used
JavaScript is used in various fields from the web to servers:
• Web Applications
• Mobile Applications
• Web-based Games
• Back-end Web Development
JavaScript Syntax
JavaScript provides 3 places to put the
JavaScript code:
• Within body tag,
• Within head tag and
• External JavaScript file

Source : https://sharplesson.com/wp-content/uploads/2019/10/javascript-syntax.png
JavaScript Example
Comments in JavaScript

JavaScript comments help explain code, making it easier to

understand. You can also use them to temporarily disable parts
of your code. The JavaScript compiler ignores comments when
running the code.

A single-line comment in JavaScript is denoted by two forward

slashes (//),

A multiline comment in JavaScript is a way to include

comments that span multiple lines in the source code.(/* */)

Source : https://www.w3schools.com/js/js_comments.asp
JavaScript Variables
What is Variable?

Variables are used to store data, like string of text,

numbers, etc. The data or value stored in the
variables can be set, updated, and retrieved
whenever needed.
Example:

var name = "Peter Parker";

var age = 21;
var isMarried = false;

Source : https://lh3.googleusercontent.com/-YXC3gtpMlko/X3HA5DHH6MI/AAAAAAAAB3Q/VYM81zAFldY-cItuj7GMYA0Xy7Fy0GWBgCLcBGAsYHQ/image.png
JavaScript Variables
What is Variable?

JavaScript is a dynamically typed language so the type

of variables is decided at runtime. Therefore there is no
need to explicitly define the type of a variable. We can
declare variables in JavaScript in three ways:
• Using var
• Using let
• Using const

Source : https://blog.devgenius.io/understand-the-difference-between-var-let-and-const-in-javascript-fdf19e18efd0
JavaScript Variables
Scope difference of var and let declarations
JavaScript Variables
Difference of const against var and let declarations
JavaScript Variables
Declaring Multiple Variables at Once
These are the following rules for naming a
JavaScript variable:
• A variable name must start with a letter,
underscore (_), or dollar sign ($).
• A variable name cannot start with a number.
• A variable name can only contain alpha-numeric
characters (A-z, 0-9) and underscores.
• A variable name cannot contain spaces.
• A variable name cannot be a JavaScript keyword
or a JavaScript reserved word.

Source : https://miro.medium.com/max/600/1*o960btjPmdMY5468NIcaGA.jpeg
JavaScript Variables

Valid Invalid

myVariable 1variable
my_variable my@variable
$myVariable var
myVariable123 my variable
MYVARIABLE123 my-variable

Source : https://www.istockphoto.com/photos/tick-and-cross
JavaScript Variables
Hoisting

JavaScript Hoisting is the behavior where the

interpreter moves function and variable declarations to console.log(a); // Output: undefined
the top of their respective scope before executing the var a = 5;
code. console.log(a); // Output: 5

Both var and function declarations are hoisted to the top

of their containing scope (global or function). This
means they are available throughout the entire scope
even before their actual line of declaration in the code
JavaScript Datatype
Definition

JavaScript is dynamic and loosely typed language. It

means you don't require to specify a type of a
variable. A variable in JavaScript can be assigned any
type of value.

Source : https://images.techopedia.com/definition/term-image/3929/javascript-js
Types of Datatype
Primitive Datatypes
Data Type Description
The primitive data types are the lowest level of the String String is a textual content wrapped inside ' ' or " " or `
data value in JavaScript. The typeof operator can be ` (tick sign).
used with primitive data types to know the type of a Example: 'Hello World!', "This is a string", etc.
value. Number Number is a numeric value.
Example: 100, 4521983, etc.
BigInt BigInt is a numeric value in the arbitrary precision
format.
Example: 453889879865131n, 200n, etc.
Boolean Boolean is a logical data type that has only two
values, true or false.
Null A null value denotes an absence of value.
Example: var str = null;
Undefined undefined is the default value of a variable that has
not been assigned any value.
Example: In the variable declaration, var str;, there is
no value assigned to str. So, the type of str can be
check using typeof(str) which will return undefined.
Types of Datatype
Non-Primitive Datatypes
Data Type Description

The non-primitive data types contain some kind Object An object holds multiple values in terms of
of structure with primitive data. properties and methods.

Example:
var person = {
firstName: "James",
lastName: "Bond",
age: 15
};
Date Date object represents date & time including
days, months, years, hours, minutes, seconds
and milliseconds.
Example: var today = new Date("25 July 2021");

Array An array stores multiple values using special

syntax.
Example: var nums = [1, 2, 3, 4];
JavaScript Operators
What is JavaScript Operator

An operator performs some operation on single

or multiple operands (data value) and produces
a result.
Syntax:
<Left operand> operator <right operand>
<Left operand> operator

Source : https://www.bookofnetwork.com/images/javascript-images/JS_Type-of-Operators_17Sep16_1822.png
Lab Activity

Hands On

Lab 7 -

JavaScript Basics
Types of JavaScript Operators
Bitwise Operators
Operator Description Example
The bitwise operators perform bitwise
operations on operands. & Bitwise AND (10==20 & 20==33) =
false

| Bitwise OR (10==20 | 20==33) =

false

^ Bitwise XOR (10==20 ^ 20==33) =

false

~ Bitwise NOT (~10) = -10

<< Bitwise Left Shift (10<<2) = 40

>> Bitwise Right Shift (10>>2) = 2

>>> Bitwise Right Shift (10>>>2) = 2

with Zero
Types of JavaScript Operators
Special Operators
Operator Description
The following operators are known as JavaScript (?:) Conditional Operator returns value based
special operators. on the condition. It is like if-else.
, Comma Operator allows multiple
expressions to be evaluated as single
statement.
delete Delete Operator deletes a property from
the object.
in In Operator checks if object has the given
property
instanceof checks if the object is an instance of given
type
new creates an instance (object)
typeof checks the type of object.
void it discards the expression's return value.
yield checks what is returned in a generator by
the generator's iterator.
Types of JavaScript Operators
Assignment Operators
Operator Description Example
The following operators are known as = Assign 10+10 = 20
JavaScript assignment operators. += Add and var a=10; a+=20; Now
assign a = 30
-= Subtract and var a=20; a-=10; Now a
assign = 10
*= Multiply and var a=10; a*=20; Now a
assign = 200
/= Divide and var a=10; a/=2; Now a
assign =5
%= Modulus and var a=10; a%=2; Now a
assign =0
Types of JavaScript Operators
Equality Operators

• Both == and === returns true if they find equality and

false otherwise
• Equality Operator(==) is used to compare the values
of the operand. it is called a loose equality check as
the operator performs a type conversion when
comparing the elements.
• JavaScript Strict Equality Operator(===) is used to
compare two operands and return true if both the
value and type of operands are the same.
Lab Activity

Hands On

Lab 8 -

JavaScript Operators
Conditional Statement
JavaScript Types of Conditional Statements
JavaScript conditional statements allow you to
execute specific blocks of code based on
conditions. If the condition is met, a particular block
of code will run; otherwise, another block of code
will execute based on the condition
• if statement
• else statement
• else if statement
• switch statement

Source : https://www.geeksforgeeks.org/javascript-if-else/
Conditional Statement
If statement

It evaluates the content only if expression is true.

Syntax:
if(expression)
{
//content to be evaluated
}

Source : https://www.geeksforgeeks.org/javascript-if-else/
Conditional Statement
If statement - Example

Output :
Value of a is greater than 10

Source : https://www.geeksforgeeks.org/javascript-if-else/
Conditional Statement
If-else statement

The if else statement is an extended version of the if

condition. It allows you to write code for both the
cases i.e. either the expression returns true or false,
you can handle both of them. The if statement will
run for the true value while else for the false value.

Source : https://www.geeksforgeeks.org/javascript-if-else/
Conditional Statement
If...else Statement Example

Output :
a is even number

Source : https://www.geeksforgeeks.org/javascript-if-else/
Conditional Statement
If-else-if statement

The else if statement is used in the cases where you

need to execute multiple code blocks based on multiple
conditional expression. It starts with the if statement
and ends with the else statement, it is written in
between them.

Source : https://www.geeksforgeeks.org/decision-making-javaif-else-switch-break-continue-jump/
Conditional Statement
If...else if statement

if(expression1){
//content to be evaluated if expression1 is true
}
else if(expression2)
{ //content to be evaluated if expression2 is true
}
else if(expression3)
{ //content to be evaluated if expression3 is true
}
else{ //content to be evaluated if no expression is true }

Source : https://media.geeksforgeeks.org/wp-content/uploads/if-elseif.png
Conditional Statement
If...else if statement Example

Source : https://media.geeksforgeeks.org/wp-content/uploads/if-elseif.png
Conditional Statement
If...else if statement Example continued

Output
a is equal to 20

Source : https://media.geeksforgeeks.org/wp-content/uploads/if-elseif.png
Conditional Statement
JavaScript Switch

• The JavaScript switch statement is used to execute

one code from multiple expressions.
• It is just like else if statement that we have learned in
previous page. But it is convenient than if..else..if
because it can be used with numbers, characters etc.

Source : https://media.geeksforgeeks.org/wp-content/uploads/switch.png
Conditional Statement
JavaScript Switch
Syntax:
switch(expression){
case value1:
code to be executed;
break;
case value2:
code to be executed;
break;
......
default:

Source : https://media.geeksforgeeks.org/wp-content/uploads/switch.png
Conditional Statement
JavaScript Switch

Example:

Output: B Grade C Grade No Grade

Source : https://media.geeksforgeeks.org/wp-content/uploads/switch.png
Lab Activity

Hands On

Lab 9 -

JavaScript Conditional Statements

Control Statement
JavaScript Types of Loop

• The JavaScript loops are used to iterate the

piece of code using for, while, do while or for-in
loops.
• There are four types of loops in JavaScript.

i. for loop
ii. while loop
iii. do-while loop
iv. for-in loop

Source : https://media.geeksforgeeks.org/wp-content/uploads/Loop1.png
Loop Control Statement
For loop

The JavaScript for loop iterates the elements

for the fixed number of times. It should be
used if number of iterations is known.

Syntax:

for (initialization; condition; increment)

{
code to be executed
}

Source : https://media.geeksforgeeks.org/wp-content/uploads/loop2.png
Loop Control Statement
For loop

Example: Output:

The square of 1 is 1
The square of 2 is 4
The square of 3 is 9
The square of 4 is 16
The square of 5 is 25
Loop Control Statement
While loop

The JavaScript while loop iterates the elements

for the infinite number of times. It should be used
if number of iteration is not known.

Syntax:

while (condition)
{
code to be executed
}

Source : https://media.geeksforgeeks.org/wp-content/uploads/Loop1.png
Loop Control Statement
While loop

Example:
Output:

The square of 1 is 1
The square of 2 is 4
The square of 3 is 9
The square of 4 is 16
The square of 5 is 25
Loop Control Statement
for-in loop

The for..in loop provides a simpler way to

iterate through the properties of an object.

Syntax:
for (variableName in Object)
{
statement(s)
}

Source : https://media.geeksforgeeks.org/wp-content/uploads/loop2.png
Loop Control Statement
For in loop

Example:
Output:

The square of 1 is 1
The square of 2 is 4
The square of 3 is 9
The square of 4 is 16
The square of 5 is 25

Source : https://media.geeksforgeeks.org/wp-content/uploads/loop2.png
Loop Control Statement
for-of loop

The for of lets you loop over iterable data

structures such as Arrays, Strings, Maps,
NodeLists etc.

Syntax:
for (variable of iterable) {
// code block to be executed
}

Source : https://media.geeksforgeeks.org/wp-content/uploads/loop2.png
Loop Control Statement
For of loop
Example: Output:

The square of 1 is 1
The square of 2 is 4
The square of 3 is 9
The square of 4 is 16
The square of 5 is 25
Loop Control Statement
do while loop

The JavaScript do while loop iterates the elements

for the infinite number of times like while loop. but,
code is executed at least once whether condition is
true or false.

Syntax:
do
{
code to be executed
}while (condition);

Source : https://media.geeksforgeeks.org/wp-content/uploads/loop3.png
Loop Control Statement
Do while loop

Example: Output:

The square of 1 is 1
The square of 2 is 4
The square of 3 is 9
The square of 4 is 16
The square of 5 is 25
Loop Control Statement
Nested Loops
You can nest different types of loops to achieve the
desired iteration

Source : https://media.geeksforgeeks.org/wp-content/uploads/loop3.png
Loop Control Statement
Nested for loop

Example: Output:

(1, 1)
(1, 2)
(2, 1)
(2, 2)
(3, 1)
(3, 2)

Source : https://media.geeksforgeeks.org/wp-content/uploads/loop2.png
Lab Activity

Hands On

Lab 10 -

JavaScript Looping Statements

JavaScript Array
What is Arrays

JavaScript array is an object that represents a collection

of similar type of elements.
There are 3 ways to construct array in JavaScript
i. By array literal
ii. By creating instance of Array directly (using new
keyword)
iii. By using an Array constructor (using new keyword)

Source : https://cdn.educba.com/academy/wp-content/uploads/2019/09/Arrays-in-JavaScript.png
JavaScript Array
JavaScript array literal

Syntax:
var arrayname=[value1,value2.....valueN];

JavaScript Array directly

Syntax:
var arrayname=new Array();

Source : https://cdn.educba.com/academy/wp-content/uploads/2019/09/Arrays-in-JavaScript.png
JavaScript Array
JavaScript array constructor

Here, you need to create instance of array by passing arguments in constructor so that we don't have to
provide value explicitly.

Example: Output:

Jai
Vijay
Smith
JavaScript Array
Built-In Methods for Array Manipulation

• push(): Adds one or more elements to the end of an array.

• pop(): Removes the last element from an array.
• shift(): Removes the first element from an array.
• unshift(): Adds one or more elements to the beginning of an array.
• slice(): Returns a shallow copy of a portion of an array.
• concat(): Merges two or more arrays into one.
• indexOf(): Returns the first index at which a given element can be
found.

Source : https://cdn.educba.com/academy/wp-content/uploads/2019/09/Arrays-in-JavaScript.png
JavaScript Object
What is object

• While primitive data types can each hold only a single

value, objects are like containers that can hold
multiple values at once
• An object is a reference data type. Variables that are
assigned a reference value are given a reference or a
pointer to that value.
• objects in JavaScript may be defined as an
unordered collection of related data, of primitive or
reference types, in the form of “key: value” pairs

Source : https://dev.to/himanshudevgupta/javascript-most-important-thing-object-2hm1
JavaScript Object
Accessing and modifying object

• We can access properties using dot notation or

bracket notation.
• We can also add new properties or modify existing
ones using either notation.
• We an remove properties from an object using the
delete operator
• We can check if an object has a specific property
using the in operator or the hasOwnProperty method.

Source : https://dev.to/himanshudevgupta/javascript-most-important-thing-object-2hm1
JavaScript Object
Object Methods

• Object.assign() - Copies properties from one or more source objects to a target object.
• Object.create() - Creates a new object with a specified prototype object and properties.
• Object.defineProperty() - Defines a new property directly on an object or modifies an existing property.
• Object.entries() - Returns an array of a given object's own enumerable property [key, value] pairs.
• Object.keys() - Returns an array of a given object's own enumerable property names.
• Object.values() - Returns an array of a given object's own enumerable property values.
• Object.freeze() - Freezes an object, preventing new properties from being added or existing properties from
being modified.
JavaScript Function
What is JavaScript Function

• A function is a block of code that performs a specific

task.
• Suppose you need to create a program to create a
circle and color it. You can create two functions to
solve this problem:
• A function to draw the circle
• A function to color the circle

Source : https://i0.wp.com/blog.alexdevero.com/wp-content/uploads/2020/01/javascript-functions-all-you-need-to-know-pt.1.jpg
JavaScript Function
Declaring a Function

• A function is declared using the function keyword.

• The basic rules of naming a function are similar to
naming a variable.
• The body of function is written within {}.

Syntax:

function nameOfFunction ()

// function body

}
JavaScript Function
Calling a Function

• A function is declared using the function keyword.

• The basic rules of naming a function are similar to
naming a variable.
• The body of function is written within {}.
Syntax:

function nameOfFunction ()

// function body

Source : https://cdn.programiz.com/cdn/farfuture/NdxxeWlRfoHMPgdcWPkeVy1wN9MwAgoqoYqZkFQDMFQ/mtime:1591592059/sites/tutorial2program/files/javascript-
function-example1.png
JavaScript Function
Function Return

• The return statement can be used to return the

value to a function call.
• The return statement denotes that the function
has ended. Any code after return is not
executed.
• If nothing is returned, the function returns an
undefined value.

Source : https://cdn.programiz.com/cdn/farfuture/b4h4Zo5ZYxj-EyfQyao-J5TqbKEefFgqqusPGLWPFS0/mtime:1591786573/sites/tutorial2program/files/javascript-
return-statement.png
JavaScript Function
Function Parameters

A function can also be declared with parameters. A parameter is a value that is passed when declaring a function

Source : https://cdn.programiz.com/cdn/farfuture/oAZVf3IqOKOYj_aJ-IoYQvbJ2CB-B3y4HXSLXBUmYcY/mtime:1591592163/sites/tutorial2program/files/javascript-
function-with-parameter.png
JavaScript Function
Benefits of Using a Function

• Function makes the code reusable. You can declare

it once and use it multiple times.
• Function makes the program easier as each small
task is divided into a function.
• Function increases readability.

Source : https://i0.wp.com/blog.alexdevero.com/wp-content/uploads/2020/01/javascript-functions-all-you-need-to-know-pt.1.jpg
JavaScript Function
Function Expressions

In JavaScript, functions can also be defined as expressions.

Output

16
9

Source : https://i0.wp.com/blog.alexdevero.com/wp-content/uploads/2020/01/javascript-functions-all-you-need-to-know-pt.1.jpg
Lab Activity

Hands On

Lab 11 -

JavaScript Functions and Arrays

ES6 Features
ES6, also known as ECMAScript 2015, is the sixth edition of the ECMAScript language specification standard.
It is a significant update to JavaScript and introduces a range of new features that make the language more
powerful and easier to work with.
Some important changes introduced in ES6 are the following

Classes: Modules:
Promises:
Arrow Functions: Standardized
Simplified syntax Improved handling
Concise syntax for system for
for object-oriented of asynchronous
writing functions. organizing and
programming. operations.
sharing code.

Spread Operator:
Let and Const: Rest Operator:
Spread spreads
Block-scoped Rest gathers
elements into
variable elements into an
individual
declarations. array.
components.
DOM Manipulation
What is DOM ?

• The DOM is a W3C (World Wide Web Consortium)

standard.
• The DOM defines a standard for accessing
documents:
• "The W3C Document Object Model (DOM) is a
platform and language-neutral interface that allows
programs and scripts to dynamically access and
update the content, structure, and style of a
document."

Source : https://www.w3schools.com/js/js_htmldom.asp
DOM Manipulation
Accessing Elements

• To manipulate the DOM, we need to access its

elements. This is commonly done using
the document object
• we can use getElementById,
getElementsByClassName, and
getElementsByTagName to retrieve specific Document
elements. The returned values can then be stored in
variables for further manipulation.

Source : https://blog.csdn.net/unruly02/article/details/125408954
DOM Manipulation
Modifying Elements

• Changing HTML Content: Using innerHTML or

textContent properties
• Modifying the style property or using classes to
change the element's appearance.
• Adding or Removing Elements: Using methods like
appendChild(), removeChild(), insertBefore(), Document
replaceChild().

Source : https://www.freecodecamp.org/news/dom-manipulation-in-javascript/
Lab Activity

Hands On

Lab 12 -

JavaScript DOM Manipulation

Introduction to Events, Events Handling
Events
• JavaScript’s interaction with HTML is handled
through events that occur when the user or the
browser manipulates a page.
• When the page loads, it is called an event.
Introduction to Events, Events Handling
Events continued..

• Event-driven programming is when parts of the

programming are executed in an unpredictable
sequence in response to specific events.
• Events are objects in JavaScript with case-sensitive
names, all of which are lower-case.
Introduction to Events, Events Handling
JavaScript Events

Onclick - occurs when the user clicks on a link or form element

Onload - occurs when a page is loaded into the browser (i.E., Opened)

Onsubmit - occurs when a form's submit button is clicked

Onfocus - occurs when a user gives input or focus to a form element

Introduction to Events, Events Handling
JavaScript Events Example

DOM Manipulation
Introduction to Events, Events Handling
JavaScript Events Example

User clicks button

Introduction to Events, Events Handling
JavaScript Events Listener
• The addEventListener() method of the EventTarget interface sets up a function that will be called whenever
the specified event is delivered to the target.
• You can add many event handlers to one element.
• You can easily remove an event listener by using the removeEventListener() method.11

Source : https://www.scaler.com/topics/javascript/event-handling-in-javascript/
Lab Activity

Hands On

Lab 13 -

JS Events and Event Handlers

Conclusion
In this chapter, we explored fundamental concepts of
JavaScript essential for web development. JavaScript
provides dynamic functionality to web pages through
variables that store different data types such as numbers,
strings, and arrays. Operators enable operations on these
variables, including arithmetic calculations and logical
comparisons. Conditional statements like if-else and iterative
loops such as for and while control program flow based on
conditions or execute code repeatedly. Arrays store
collections of data, and functions encapsulate reusable code
blocks. DOM manipulation empowers developers to
dynamically interact with HTML elements, updating content
and styles. Events trigger JavaScript code in response to
user actions like clicks or mouse movements, enhancing
interactivity.
QUIZ
Let’s Start
Quiz
1. What is the difference between let and var in JavaScript?

A) let is function-scoped, var is block-scoped

B) let and var are both function-scoped
C) let is block-scoped, var is function-scoped
D) let and var are both block-scoped

Answer: C
let is block-scoped, var is function-scoped
Quiz
2. What does the === operator do in JavaScript?

A) It assigns a value to a variable

B) It compares values and types
C) It compares only values
D) It is used for concatenation

Answer: B
It compares values and types
Quiz
3. Which method can be used to select an element by its ID in
JavaScript?

A) getElementByClass()
B) getElementById()
C) querySelectorId()
D) getElementByName()

Answer: B
getElementById()
Quiz
4. What is the correct way to write a single line comment in JavaScript?

A) <!-- This is a comment -->

B) # This is a comment
C) // This is a comment
D) /& This is a comment &/

Answer: C
// This is a comment
Quiz
5. Which of the following is used to attach an event handler to an element
in the DOM?

A) addEventListener()
B) attachEvent()
C) bind()
D) onEventListener()

Answer: A
addEventListener()
References
• https://www.w3schools.com/
• https://www.tutorialspoint.com
• https://developer.mozilla.org/en-US/docs/Learn/JavaScript
• https://www.geeksforgeeks.org/javascript/
• https://www.freecodecamp.org
Thank you!