JavaScript Mastery Web Dev Mastery

JavaScript Mastery
With 5 Projects & 2 GAME
 JavaScript Mastery Web Dev Mastery

Environment SetUp :-

+ +
Js Environment Code Editor Browser
 JavaScript Mastery Web Dev Mastery

First Js Code :-

[Link] is used to log (print) a message to the console

[Link](“Web Dev Mastery / Suman”);

 JavaScript Mastery Web Dev Mastery
Comments In Js :-

Part of Code which is not executed

// This is Single line comment

/* This is Single multi - line

comment */
 JavaScript Mastery Web Dev Mastery

Variables In JS :-

Variables are just like containers to Store the data

Numbers [ { -∞, +∞ } => Pincode , Mobile No., PAN, Bank Balance ]

Strings [ ‘a’ , ‘1’ , ‘@’ , “Suman” , “Web Dev Mastery”, “9843.2” ]

 JavaScript Mastery Web Dev Mastery

Variables Rules :-

Variable names are case sensitive; “a” & “A” is different.

Only letters, digits, underscore ( _ ) and $ is allowed (not even space).

Only a letter, underscore ( _ ) or $ should be 1st character.

Reserved words cannot be variable names.

 JavaScript Mastery Web Dev Mastery

let, const & var :-

var : Variable can be re-declared & updated. A global scope variable.

let : Variable cannot be re-declared but can be updated. A block scope variable.

const : Variable cannot be re-declared or updated. A block scope variable.

 JavaScript Mastery Web Dev Mastery

Data Types In JS:-

JavaScript has 8 Datatypes JavaScript Types are Dynamic
String
Example
Number
let x; // Now x is undefined
Bigint
Boolean x = 5; // Now x is a Number
Undefined x = "John"; // Now x is a String
Null
Symbol Note:- typeof - operator
Object
 JavaScript Mastery Web Dev Mastery

OPerators In JS:-
Operators are Used to perform some operation on data

Arithmetic Operators
Assignment Operators
Comparison Operators
Logical Operators
Ternary Operator
 JavaScript Mastery Web Dev Mastery

OPerators In JS:-
Arithmetic Operators

+, -, *, /, %
Increment ( + )
Decrement ( - )
Multiply ( * )
Divide ( / )
Modulus ( % )
 JavaScript Mastery Web Dev Mastery

OPerators In JS:-
Assignment Operators

1. =
2. +=
3. -=
4. *=
5. %=
6. **=
 JavaScript Mastery Web Dev Mastery

OPerators In JS:-
Comparison Operators

==, !=, ===, !==,>, >=, <, <=

Dobule Equal to ( == ) Only compare the value
Tripple Equal to ( === ) Compare value & Data type
Not Equal to ( != )
Not Equql & Type ( !== )
Modulus ( % )

Note :- == & === are not same

 JavaScript Mastery Web Dev Mastery

OPerators In JS:-
Logical Operators

Logical AND &&

Logical OR ||
Logical NOT !
 JavaScript Mastery Web Dev Mastery

OPerators In JS:-
Ternary Operators

()?():()
condition ? true output : false output

const result = marks > 40 ? “pass” : “fail”

 JavaScript Mastery Web Dev Mastery

Template literal In JS:-

Template literal

const name = "Suman"

const Id = "22MCA10142" // Using template literals
const greeting = `Hello, my name is ${name} and my Id ${Id}`;
[Link]( greeting )
 JavaScript Mastery Web Dev Mastery

Conditional Statements In JS :-
If Statements

if (condition) {
// block of code to be executed if the condition is true
}

let greeting;
if (hour == 9) {
greeting = "Good morning";
}
 JavaScript Mastery Web Dev Mastery

Conditional Statements In JS :-
If - else Statements

if (condition) { // block of code to be executed if the condition is true }

else { // block of code to be executed if the condition is false }

let greeting;
if (hour == 9) { greeting = "Good morning"; }
else { greeting = "Good Afternoon"; }
 JavaScript Mastery Web Dev Mastery

Conditional Statements In JS :-
else - if Statements

if ( experience < 1 ) {
[Link]( “ Fresher Dev ” );
} else if ( experience > 2 ) {
[Link]( “ Senior Dev ” );
} else { [Link] ( “ Berozgaar” );
}
 JavaScript Mastery Web Dev Mastery
Conditional Statements In JS :-
Switch Statements switch (new Date().getDay()) {
case 0:
switch(expression) {
day = "Sunday";
case x:
break;
// code block case 1:
break; day = "Monday";

case y: break;
case 2:
// code block
day = "Tuesday";
break;
break;
default: case 3:
// code block day = "Wednesday";

} break }
 JavaScript Mastery Web Dev Mastery
Loops In JS :-
Loops are used to execute a piece of code again & again

for
while
do - while
for - in
for - of
for each
 JavaScript Mastery Web Dev Mastery
Loops In JS :-
for Loop

A for loop is commonly used when the number of iterations is known .

It consists of three parts: initialization, condition, and final expression.

for ( initialization; condition; finalExpression )

{ // code to be executed }
 JavaScript Mastery Web Dev Mastery
Loops In JS :-
for Loop

for ( let i = 0 ; i < 5 ; i++)

{ [Link]( i )
}
 JavaScript Mastery Web Dev Mastery
Loops In JS :-
while Loop

Repeats a block of code as long as a specified condition is true

while (condition) {
// code runs while condition is true
}
 JavaScript Mastery Web Dev Mastery
Loops In JS :-
while Loop

let i = 0;
while ( i<5 ) {
[Link](i)
i++
}
 JavaScript Mastery Web Dev Mastery
Loops In JS :-
do while Loop

A do-while loop is similar to the while loop, but it checks the condition
after executing the code block, ensuring the code runs at least once.

do {
// code to be executed
} while (condition);
 JavaScript Mastery Web Dev Mastery
Loops In JS :-
do while Loop

let i = 0;
do {
[Link](i);
i++;
} while (i < 5);
 JavaScript Mastery Web Dev Mastery

Function’s In JS :-
Function’s

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

It is executed when it is invoked or called.

 JavaScript Mastery Web Dev Mastery

Function’s In JS :-
Function Definition Function Calling

function function_Name( )
function_Name( )
{
//do something
}
 JavaScript Mastery Web Dev Mastery

Function’s In JS :-
Function Declaration

function greet( name ) {

return `Hello, ${name}!`
}

[Link](greet("Suman")); // Output: Hello, Suman!

 JavaScript Mastery Web Dev Mastery

Function’s In JS :-
Arrow Function

const greet = ( name ) => {

return `Hello, ${name}!`
}

[Link](greet("Suman")); // Output: Hello, Suman!

 JavaScript Mastery Web Dev Mastery

Function’s In JS :-
Arrow Function

When the function body has only a single statement, you can omit
the curly braces and the return keyword:

const greet = name => `Hello, ${name}!`

[Link](greet("Suman")); // Output: Hello, Suman!

 JavaScript Mastery Web Dev Mastery

Function’s In JS :-
Function Global Scope
 JavaScript Mastery Web Dev Mastery
Function’s In JS :-
Function Local Scope
 JavaScript Mastery Web Dev Mastery
Function’s In JS :-
Block Scope (with let and const)
 JavaScript Mastery Web Dev Mastery
Function’s In JS :-
Callback Function

A callback function is a function that you pass as an argument to

another function. It gets executed after a certain task is
completed.
 JavaScript Mastery Web Dev Mastery

Callback Function
 JavaScript Mastery Web Dev Mastery
Object’s In JS :-
An object in JavaScript is a collection of key-value pairs. The keys
(properties) are strings (or symbols), and the values can be any data
type (numbers, strings, arrays, functions, etc.).
 JavaScript Mastery Web Dev Mastery
Object’s In JS :-
Spread Operator (...)
 JavaScript Mastery Web Dev Mastery
Object’s In JS :-
Object Destructuring
 JavaScript Mastery Web Dev Mastery
Array’s In JS :-
A array is a data structure that allows you to store multiple values in a
single variable.

Arrays are used to store lists of elements like numbers, strings, objects,
and even other arrays.

They are zero-indexed, meaning the first element has an index of 0, the
second has an index of 1, and so on.
 JavaScript Mastery Web Dev Mastery
Array’s In JS :-
Creating Array’s

let fruits = [ 'apple', 'banana', 'orange' ];

let phones = [ 'apple', 'oneplus', 'samsung' ];
let score = [ 100, 89, 55, 0, 98, 78, 10 ];
let random = [ 91, “sony”, 234.78, ‘@’ ];
 JavaScript Mastery Web Dev Mastery
Array’s In JS :-
Accessing Elements

let fruits = [ 'apple', 'banana', 'orange' ];

[Link] ( fruits[0] ); // 'apple'

[Link] ( fruits[2] ); // 'orange'
 JavaScript Mastery Web Dev Mastery
Array’s In JS :-
Array Method’s

1.) push(): Adds one or more elements to the end of the array.
 JavaScript Mastery Web Dev Mastery
Array’s In JS :-
Array Method’s

2.) pop(): Removes the last element from the array and returns that element.
 JavaScript Mastery Web Dev Mastery
Array’s In JS :-
Array Method’s

3.) shift(): Removes the first element from the array and returns it.
 JavaScript Mastery Web Dev Mastery
Array’s In JS :-
Array Method’s

4.) unshift(): Adds one or more elements to the beginning of the array.
 JavaScript Mastery Web Dev Mastery
Array’s In JS :-
Array Method’s

5.) length(): Returns the number of elements in the array.

 JavaScript Mastery Web Dev Mastery
Array’s In JS :-
Array Method’s

6.) find(): Returns the first element that satisfies the

provided testing function.
 JavaScript Mastery Web Dev Mastery
Array’s In JS :-
Array Method’s

7.) includes(): Determines whether an array contains

a certain value.
 JavaScript Mastery Web Dev Mastery
Array’s In JS :-
Array Method’s

8.) concat(): Merges two or more arrays and returns

a new array.
 JavaScript Mastery Web Dev Mastery
Array’s In JS :-
Array Method’s

9.) join(): Joins all array elements into a string, with

an optional separator.
 JavaScript Mastery Web Dev Mastery
Array’s In JS :-
Array Method’s

10.) splice(): Adds or removes elements from the array.

 JavaScript Mastery Web Dev Mastery
Array’s In JS :-
Array Method’s

11.) slice(): Returns a shallow copy of a portion of an array.

 JavaScript Mastery Web Dev Mastery
Array’s In JS :-
Array Method’s

12.) sort(): Sorts the elements of the array (alphabetical by

default, can be customized).
 JavaScript Mastery Web Dev Mastery
Array’s In JS :-
Array Method’s

13.) findIndex(): Returns the index of the first element that

satisfies a test.
 JavaScript Mastery Web Dev Mastery
Array’s In JS :-
Array Method’s

14.) from(): Creates an array from an array-like or

iterable object
 JavaScript Mastery Web Dev Mastery
Array’s In JS :-
Array Method’s

15.) isArray(): Checks if the given value is an array.

 JavaScript Mastery Web Dev Mastery
Array’s In JS :-
High Order Array Method’s

1.) map(): Creates and return new array by applying a function

to each element of the original array.
 JavaScript Mastery Web Dev Mastery
Array’s In JS :-
High Order Array Method’s

2.) filter(): Creates and returns a new array with elements that
pass a specified test condition.
 JavaScript Mastery Web Dev Mastery
Array’s In JS :-
High Order Array Method’s

3.) reduce(): Reduces an array to a single value by applying a

function to each element.
 JavaScript Mastery Web Dev Mastery
Advance Loop’s In JS :-
for...in Iterates over the keys (properties) of an object
or the indices of an array.
 JavaScript Mastery Web Dev Mastery
Advance Loop’s In JS :-
for...of Iterates over the values of iterable objects like
arrays, strings, Maps, etc.
 JavaScript Mastery Web Dev Mastery
Advance Loop’s In JS :-
forEach() Executes a function once for each element in an
array (cannot be used to break the loop).
 JavaScript Mastery Web Dev Mastery
String’s In JS :-
Strings are a sequence of characters used for representing text.

Declaring a String

Double quotes ( " " )

Single quotes ( ' ' )
Backticks ( for template literals ) ` `
 JavaScript Mastery Web Dev Mastery
String’s In JS :-
Example :-
 JavaScript Mastery Web Dev Mastery
String’s In JS :-
Method’s

length – Returns the number of characters in the string.

toUpperCase() – Converts the string to uppercase.
toLowerCase() – Converts the string to lowercase.
includes() – Checks if the string contains a specific substring.
indexOf() – Returns the index of the first occurrence of a substring
trim() – Removes whitespace from both ends of the string.
 JavaScript Mastery Web Dev Mastery
String’s In JS :-
Method’s

substring(start, end) – Extracts a substring between two specified indices.

slice(start, end) – Extracts a portion of the string, supporting negative indices.

replace(old, new) – Replaces a specified substring with another substring.

split(separator) – Splits the string into an array based on a separator.

charAt(index) – Returns the character at the specified index.

 JavaScript Mastery Web Dev Mastery
Date & Time In JS :-
Date Object
 JavaScript Mastery Web Dev Mastery
Date & Time In JS :-
Method’s

getFullYear(): Returns the year (e.g., 2024).

getMonth(): Returns the month (0-11).
getDate(): Returns the day of the month (1-31).
getHours(): Returns the hour (0-23).
getMinutes(): Returns the minutes (0-59).
getSeconds(): Returns the seconds (0-59).
 JavaScript Mastery Web Dev Mastery
Date & Time In JS :-
Example:
 JavaScript Mastery Web Dev Mastery
setInterval() In JS :-
setInterval()

setInterval() is used to execute a function repeatedly after a given

interval of time (in milliseconds).
 JavaScript Mastery Web Dev Mastery
clearInterval() In JS :-
clearInterval

Stopping setInterval(): Use clearInterval(intervalId) to stop

the interval.
 JavaScript Mastery Web Dev Mastery
setTimeout() In JS :-
setTimeout()

setTimeout() :- is used to execute a function after a specified delay

(in milliseconds), but it only runs once.
JavaScript Mastery Web Dev Mastery
Example combining
 JavaScript Mastery Web Dev Mastery
Sync & Async JavaScript :-

Synchronous & Asynchronous are two different ways that

Sync & Async JavaScript
JavaScript executes code. Understanding these concepts
is crucial for managing tasks, especially in a web
environment where you deal with user interactions,
network requests, and more.
 JavaScript Mastery Web Dev Mastery
Sync & Async JavaScript :-
Synchronous JavaScript

Definition: In synchronous execution, code runs line by line, and each line must
finish executing before the next one starts. This can lead to delays if a task takes
a long time (e.g., fetching data).
 JavaScript Mastery Web Dev Mastery
Sync & Async JavaScript :-
Asynchronous JavaScript

Definition: In asynchronous execution, certain operations can be initiated and

will run in the background, allowing the rest of the code to continue executing
without waiting for the task to finish.

Characteristics:
Non-blocking: Other code can run while waiting for an operation (like a network
request) to complete.
 JavaScript Mastery Web Dev Mastery
Sync & Async JavaScript :-
Asynchronous JavaScript
 JavaScript Mastery Web Dev Mastery
Sync & Async JavaScript :-
Key Differences :-
 JavaScript Mastery Web Dev Mastery
DOM In JavaScript :-
DOM Introduction:-

The Document Object Model (DOM) is a programming interface

for HTML and XML documents. It represents the structure of a
webpage as a tree of objects, allowing programming languages
(like JavaScript) to access, modify, and manipulate the
document's content, structure, and style.
 JavaScript Mastery Web Dev Mastery
DOM In JavaScript :-
Code Snippet :-

<html>
<body>
<h1>Hello World</h1>
<p>This is a paragraph.</p>
</body>
</html>
 JavaScript Mastery Web Dev Mastery
DOM In JavaScript :-
DOM Tree For Above Code Snippet :-
 JavaScript Mastery Web Dev Mastery
DOM In JavaScript :-
Accessing HTML Elements:

getElementById(“myId”)
getElementsByClassName(“myClass”)
getElementsByTagName(“h1”)
querySelector(“div”) // returns first element
querySelectorAll(“div”) // returns a NodeList
 JavaScript Mastery Web Dev Mastery
DOM Manipulation :-
DOM Element Properties:

textContent : Gets/sets the text content (no HTML).

innerHTML : Gets/sets the HTML content (with tags).
innerText : Gets/sets visible text (ignores hidden).
style : Accesses inline styles.
className : Gets/sets class name(s).
tagName : Returns the element's tag name.
src : Gets/sets image source.
 JavaScript Mastery Web Dev Mastery
DOM Manipulation :-
Creating Elements:

createElement(tagName): Creates a new element (e.g., div).

DOM Attributes:

setAttribute(attribute, value): Sets an attribute's value.

getAttribute(attribute): Gets an attribute's value.
removeAttribute(attribute): Removes an attribute.
 JavaScript Mastery Web Dev Mastery
DOM Manipulation :-
Insert / Delete Elements: let div = [Link](“div“)

const node = [Link]('mainNode');

[Link](div) // adds at the end of node (inside).

[Link](div) // adds at the start of node (inside)).
[Link](div) // adds before the node (outside) .
[Link](div) // adds after the node (outside).
[Link](div) // removes the node
 JavaScript Mastery Web Dev Mastery
Events In JavaScript :-
An event is an action or occurrence that happens in the browser, usually
as a result of user interaction or the browser's system processes.

Types of Events:

Mouse events : ( click , dblclick , mouseover , mouseout )

Keyboard events : ( keypress , keyup , keydown )
Form events : ( submit , change , focus )
Window events : ( load , resize , scroll )
 JavaScript Mastery Web Dev Mastery
Events In JavaScript :-
Event Handling :

This is a process of responding to user interactions or occurrences in

the browser, such as clicks, key presses, or form submissions.

Example:

function handleClick() {
alert("Button clicked!");
}
 JavaScript Mastery Web Dev Mastery
Ways to Assign Event Handlers :-
1.) HTML Attribute
1 :

2.) Inline JavaScript

1 :
 JavaScript Mastery Web Dev Mastery
Event Listeners :-
An event listener is a method that listens for a specific event to happen on
a particular element.

Syntax:
1 [Link]("event", eventHandler)

element : The DOM element you want to attach the listener to.
event : The type of event (e.g., click, submit, keydown).
eventHandler : function to be executed when the event occurs.
 JavaScript Mastery Web Dev Mastery
Event Listeners :-
Example
1 :
 JavaScript Mastery Web Dev Mastery
Event Object :-
When an event occurs, an event object is automatically
created and passed to the event handler.
This object contains useful information about the event, such
as the type of event, the target element, and the position of the
mouse.

Example
1 :- [Link] , [Link] , [Link] , [Link]
 JavaScript Mastery Web Dev Mastery
Event Object :-
Example
1 :-
 JavaScript Mastery Web Dev Mastery
BOM In JavaScript :-
The BOM (Browser Object Model) is a collection of objects
that allow JavaScript to interact with the browser.

BOM components
1 :

Window Object
Location Object
Alert, Prompt, Confirm
 JavaScript Mastery Web Dev Mastery
BOM In JavaScript :-
Window Object
1 & Method’s :

[Link]() : Opens a new tab/window.

[Link]() : Closes the current window.
[Link]() : Scrolls the window to a position.
[Link]() : Delays code execution.
[Link]() : Repeats code at intervals.
 JavaScript Mastery Web Dev Mastery
BOM In JavaScript :-
Location Object
1 & Method’s :

[Link] : Gets or sets the current URL.

[Link]() : Reloads the page.
[Link]() : Loads a new URL.
[Link]() : Replaces the current page.
[Link] : Gets the URL path.
 JavaScript Mastery Web Dev Mastery
BOM In JavaScript :-
Alert, Prompt,
1 Confirm:

alert() : Shows a message box.

prompt() : Asks for user input.
confirm() : Asks for confirmation (OK/Cancel).
 JavaScript Mastery Web Dev Mastery
Promises In JavaScript :-
A Promise in JavaScript is an object representing the eventual result
(success/failure) of an asynchronous operation.

States of a1 Promise:

Pending : Initial state, operation hasn't completed.

Fulfilled : Operation succeeded, giving a resolved value.
Rejected : Operation failed, providing a reason (error).
 JavaScript Mastery Web Dev Mastery
Promises In JavaScript :-
Basic Syntax:
1
 JavaScript Mastery Web Dev Mastery
Promises In JavaScript :-
Handling Promise Results :-

.then() for Fulfilled Promises:

.then() runs if the promise is fulfilled.
Syntax: [Link](result => { /* code */ })
.catch() for Rejected Promises:
.catch() runs if the promise is rejected.
Syntax: [Link](error => { /* code */ })
 JavaScript Mastery Web Dev Mastery
Sync & Async In JavaScript :-
Synchronous :

Executes tasks one at a time, blocking further execution until the

current task finishes.

Asynchronous :

Allows tasks to run concurrently, enabling other code to execute

without waiting for the current task to complete.
 JavaScript Mastery Web Dev Mastery
aync await In JavaScript :-
async :

Used to define a function that runs asynchronously and automatically

returns a promise. Allows the function to use await for handling promises
more cleanly.

await :

Pauses execution inside an async function until a promise

resolves, then returns the resolved value. Makes asynchronous
code look synchronous for better readability.
 JavaScript Mastery Web Dev Mastery
Fetch Data From API :-
JavaScript Mastery Web Dev Mastery

Thanks for Watching

Please leave a Like & Comment