VIRTUAL CODE

Click to edit Master title style

Javascript
In one Shot

1
 VIRTUAL CODE
Click to edit Master title style

Level 0
Introduction to JavaScript

2 2
 VIRTUAL CODE
Click to
What is JavaScript:
edit Master title style

• Javascript is a programming language which helps us

to intract with the computer.
• In web development, it is used to make dynamic or
logical websites.
• Javascript can be executed in one’s browser on
javascript console.
• We can use node.js to run javascript code.
• Another way to execute javascript is by inserting it
inside <script> tag of an HTML document.

3 3
 VIRTUAL CODE
Click to edit Master title style

Level 1
Va r i a b l e s & D a t a Ty p e s

4 4
 VIRTUAL CODE
Click to edit
Variables : Master title style

• Variables are used to store some data.

box1 box2 box3 5 5

 VIRTUAL CODE
Click to edit
Variables : Master title style

• Variables are used to store some data.

20 30 40
a b c

6 6
 VIRTUAL CODE
Click to editof
Declaration Master
Variables
title :style

• let a = 20;
• var a = 20;
• const a = 20;

• Var is globally scoped while let & const are block

scoped.
• var can be updated & re-declared within its scope.
• let can be updated but not re-declared.
• Const can neither be updated nor be declared.

7 7
 VIRTUAL CODE
Click to
Rules foredit
choosing
MasterVariable’s
title stylenames :

• Letters,digit,underscores & $ sign allowed.

• Must begin with a $, _ or a letter.
• Javascript reserved words can not be used as a
variable name.
• It is case sensitive . AYUSH is not equal to ayush.

8 8
 VIRTUAL CODE
Click to edit
Primitive dataMaster
typestitle
& objects
style :

• There are 7 primitive data types:

Primitive data types

Null
Number
String
Symbol
Undefined
Boolean
BigInt

9 9
 VIRTUAL CODE
Click to :edit Master title style
objects

• An object in javascript can be created as follows:

values

keys

1010
 VIRTUAL CODE
Click to practice
Level-1 edit Master
sheet
title style

• Create a variable of type string and try to add a number

to it.
• Use typeof operator to find the datatype of the string in
last question.
• Create a const object in javascript can you change it to
hold a number later.
• Try to add a new key to the const object in problem 3
were you able to do it.
• Write a javascript program to store name , age , marks
of a student using objects.

1111
 VIRTUAL CODE
Click to edit Master title style

Level 2
Operators & Conditional statements

1212
 VIRTUAL CODE
Click to edit
Operators In Master
javascript
title style

Arithmetic operators
+ Addition
- Subtraction
* multiplication
** exponentiation
/ Division
% Modulus
++ Increment
-- Decrement

1313
 VIRTUAL CODE
Click to edit
Operators In Master
javascript
title style

Assignment operators
= a=b
+= a=a+b
-= a=a-b
*= a=a*b
/= a=a/b
%= a=a%b
**= a=a**b

1414
 VIRTUAL CODE
Click to edit
Operators In Master
javascript
title style
Comparison operators
== Equal to
!= Not equal to
=== Equal value and type
!== Not equal value or not
equal type
? Ternary operator
> Greater than
< Less than
>= Greater than or equal
to
<= Less than or equal to

1515
 VIRTUAL CODE
Click to edit
Operators In Master
javascript
title style

logical operators
&& Logical and
|| Logical or
! Logical not

1616
 VIRTUAL CODE
Click to editstatements:
Conditional Master title style

• if statement

• If-else statement

• If-else if statement

1717
 VIRTUAL CODE
Click to operator
ternary edit Master title style

True False

1818
 VIRTUAL CODE
Click to practice
Level-2 edit Master
sheet
title style

• Use logical operators to find whether the age of a

person lies between 10 and 20
• Demonstrate the use of switch case statements in
javascript.
• Write a javascript program to find whether a number is
divisible by 2 and 3
• Print “rejected” or “accepted” according to proposal
answer

1919
 VIRTUAL CODE
Click to edit Master title style

Level 3
Loops and Functions

2020
 VIRTUAL CODE
Click to edit Master title style
Loops:
• Use to perform repeated actions.

Loops

while loop do-while loop

for loop

for in loop for of loop

2121
 VIRTUAL CODE
Click
for Loop:
to editinitialization
Master title style
condition updation

• for loop

• for in loop

• for of loop

2222
 VIRTUAL CODE
Click to
while Loop:
edit Master title style

do-while Loop:

2323
 VIRTUAL CODE
Click to edit
Functions in Master
javascript
title: style

• Function is a block of code designed to perform

particular task.

2424
 VIRTUAL CODE
Click to editof
Declaration Master
function:
title style

2525
 VIRTUAL CODE
Click to edit
Function calling:
Master title style

2626
 VIRTUAL CODE
Click to practice
Level-3 edit Master
sheet
title style

• Write a program to to print the marks of a student in an

object using for in loop
obj={ ayush:95 , Hemant:92 , Dev:33 }
• Write the program to print table of given number.
• Write a program to print “try again” until the user enters
the correct number.
• Write a function to print the average of 4 numbers.

2727
 VIRTUAL CODE
Click to edit Master title style

Level 4
Strings

2828
 VIRTUAL CODE
Click to:edit Master title style
Strings

• String is the collection of the characters

• Template literals

name is variable
• Escape sequence characters

\n New line
\t tab 2929
 VIRTUAL CODE
Click tomethod
Strings edit Master title style
Properties & methods

name.length

name.toLowerCase( )

name.toUpperCase( )

name.slice(a,b) or
name.slice(a)
name.replace(“abc”,”def”)

name1.concat(name2)

name.trim( )

3030
 VIRTUAL CODE
Click to practice
Level-4 edit Master
sheet
title style
• Find the output:

• Explore includes,startsWith & endsWith function of a

string
• Write a program to convert a given string to upper case
• Extract score’s number out of this string “virat scored
100 in last match ”
• Try to change 3rd character of a given string ,were you
able to do it ?

3131
 VIRTUAL CODE
Click to edit Master title style

Level 5
Arrays

3232
 VIRTUAL CODE
Click to: edit Master title style
Arrays
• Arrays are variables which can hold more than one
value.

• For accessing the values in array:

3333
 VIRTUAL CODE
Click to edit
Methods of Arrays
Master: title style
Methods of Arrays
toString( ) Convert an array to a string of comma separated values
join( ) Joins all the arrays elements using a separator
pop( ) Removes last element from the array
push( ) Adds a new element at the end of the array
shift( ) Removes first element and returns it
unshift( ) Adds element to the beginning returns new array length
delete Array elements can be deleted using delete operator
Concat( ) Used to join arrays to the given array
Sort( ) It is used to sort an array alphabetically
splice( ) Splice can be used to add new items to an array
slice( ) Slices out a piece from an array , it creates a new array
reverse( ) Reverse the elements in source array
3434
 VIRTUAL CODE
Click to through
looping edit Master
Arrays
title: style
• forEach loop:

• map( ) :

• filter( ) :

3535
 VIRTUAL CODE
Click to through
looping edit Master
Arrays
title: style

• Reduce method:

• Array.from :

3636
 VIRTUAL CODE
Click to practice
Level-5 edit Master
sheet
title style
• Create an array of numbers and take input from the
user to add numbers to the beginning of this array.
• Keep adding numbers to the array in 1 until 27 is added
to the array.
• Filter for even numbers from a given array
• Create an array of cube of given number.
• Use reduce to calculate factorial of a given number from
an array of first n natural numbers

3737
 VIRTUAL CODE
Click to edit Master title style

Level 6
DOM :Document Object Model

3838
 VIRTUAL CODE
Click to edit
Console object
Master
methods
title style

Console object method

assert( ) Used to assert the condition
clear( ) Clears the console
log( ) Outputs a message to a console
table( ) Displays a tabular data
warn( ) Used for warnings
error( ) Used for errors
info( ) Used for special information

3939
 VIRTUAL CODE
Click to edit Master
alert,prompt and confirm
title style

alert,prompt and confirm

alert Used to invoke a mini window with a msg
prompt Used to take input as string
confirm Shows a message and waits for the user to press ok or
cancel,return true for ok and false for cancel

4040
 VIRTUAL CODE
Click to edit
Window object,
Master
BOMtitle
& DOM
style

Window

DOM Javascript core

BOM

4141
 VIRTUAL CODE
Click to
BOM: Browser
edit Master
Objecttitle
Model
style
- The browser object model(BOM) represents additional
objects provided by the browser for working with
everything except document
- The functions alert/confirm/prompt are also a part of
BOM

4242
 VIRTUAL CODE
Click to
DOM: Document
edit Master
Object
titleModel
style
- DOM represents the page content as HTML
- DOM tree refers to the HTML page where all the nodes
are object , there can be three main types of node in the
DOM Tree:
- Text node
- Element node
- Comment nodes

4343
 VIRTUAL CODE
Click to edit
Walking the DOM
Master title style
Access the elements
element.firstChild First child element
element.lastChild last child element
element.childNodes All child nodes
element.parentNode Parent nodes
element.parentElement Parent elements
document.previousElementSibling Previous element
sibling
document.nextElementSibling next element sibling
document.firstElementChild First element
child
document.lastElementChild Last element
child

4444
 VIRTUAL CODE
Click to edit
Searching theMaster
DOM title style
Searching the DOM
document.getElementById( ) Get a element by id
document.querySelectorAll( ) Return all the elements inside an
element matching the given CSS
selectors
document.querySelector( ) Return a element inside an element
matching the given CSS selectors
document.getElementsByTagName( ) Return elements with given tag
name
document.getElementsByClassName( ) Returns elements that have the
given CSS class
document.getElementsByName( ) Searches elements by the name
attribute

4545
 VIRTUAL CODE
Click to edit Master
Matches,closest & contains
title style
methods

• A.matches( CSS ) : to check if A matches the given

CSS selector

• B.closest( CSS ) : to look for the nearest ancestor that

matches the given CSS selector , B itself is also
checked
• A.contains(B) : return true if B is inside A or when A==B

4646
 VIRTUAL CODE
Click to practice
Level-6 edit Master
sheet
title style
• Write a program using prompt function to take input of
age as a value from the user and use alert to tell him if
he can derive , use confirm to ask the user if he wants
to see prompt again
• Change the background of the page to any other color
based on user’s input
• Create a nav bar and change the color of its first
element to brown.
• Write a javascript code to change background of all <li>
tags to purple

4747
 VIRTUAL CODE
Click to edit Master title style

Level 7
Events & other DOM properties

4848
 VIRTUAL CODE
Click to edit
Attribute Methods
Master title style
Access the elements
a.has Attribute(name) Method to check for
existence of an attribute
a.getAttribute(name) Method used to get the value
of an attribute
a.setAttribute(name,value) Method used to set the value
of an attribute
a.removeAttribute(name) Method to remove the
attribute from a
a.attributes Method to get the collection
of all atributes

data-x Attribute

4949
 VIRTUAL CODE
Click to editand
innerHTML Master
outerHTML
title style
• The innerHTML property allows to get the HTML inside
the element as a string
• The outerHTML property contains the full HTML
innerHTML + the element itself

Insertion Methods

5050
Click to edit Master title style
Some insertion Method
name.append(box) Append at the end of node
name.prepend(box) Insert at the beginning of
node
name.before(box) Insert before node
name.after(box) Insert after node

name.replaceWith(box) Replaces name with the the

box

5151
Click to edit
Insert Master
Adjacent title style
Html/text/element
“beforebegin” Insert HTML immediately
before element
“afterbegin” Insert HTML into element at
the beginning
“beforeend” Insert HTML into element at
the end
“afterend” insert HTML immediately
after element

5252
Click to edit Master title
className style
and classList
Name.classList.add(“class”) Add a class.
Name.classList.remove(“class”) Remove a class
Name.classList.toggle(“class) Add the class if does not exist,otherwise
removes it
Name.classList.contains(“class”) Checks for the given class,returns true/false

5353
 VIRTUAL CODE
Click to editand
SetTimeout Master
SetInterval
title style
• SetTimeout allows us to run a function once after the interval of time
• Let timerID=setTimeout(function,<delay>,<arg1>,<arg2>)
• clearTimeout(timerID)

• setInterval runs the function not only once,but regularly after

the given interval of time
• Let timerID=setTimeInterval(function,<delay>,<arg1>,<arg2>)
• clearTimeInterval(timerID)

5454
 VIRTUAL CODE
Click to edit
Browser Events
Master title style
• An event is a signal that something has
happened all the DOM nodes generates
such signal

Some important DOM Events

Mouse Events Click.contextmenu(right click),
mouseover/mouseout,mousedown/mouseup,mousemove
Keyboard events Keydown and keyup
Form elements event Submit,focus etc
Document event DomContentLoaded

5555
 VIRTUAL CODE
Click to edit
Handling Events
Master title style

addEventListener and removeEventListener :

5656
 VIRTUAL CODE
Click to practice
Level-7 edit Master
sheet
title style
• Write a program to change different background color
on body by clicking different buttons
• create a nightmode feature in your website

5757
 VIRTUAL CODE
Click to editDigital
Project-1 Master Clock
title style
• Create a digital clock using setInterval and date object
in javascript with good UI using HTML & CSS

5858
 VIRTUAL CODE
Click to edit Master title style

Level 8
Callbacks, promises,async & await

5959
 VIRTUAL CODE
Click to edit Master
Synchronous & Asynchronous
title style actions
• Synchronous: means the code runs in a particular
sequence of instructions given in the program.
• Each instruction waits for the previous instruction to
complete its execution

• Aynchronous: it allows execute next instructions

immediately and does not block the flow

6060
 VIRTUAL CODE
Click to edit Master title style
Callbacks
• A callback is a function passed as an argument to
another function.

Callback Hell
• Nested callbacks stacked below one another forming a
pyramid structure.
• Pyramid Of Doom
• This style of programming becomes difficult to
understand & manage

6161
 VIRTUAL CODE
Click to edit Master title style
Promises
• Promises is for “eventual” completion of task.it is an
object in js .
• It is a solution to callback hell.

• .then( ) & .catch( )

6262
 VIRTUAL CODE
Click to
Async - Await
edit Master title style
• Async function always returns a promise .

• async function myfunc( ){…..}

• Await pauses the execution of its surrounding async

function until the promise is settled

6363
 VIRTUAL CODE
Click to
Fetch API
edit
( Application
Master titleProgramming
style Interface )
• The fetch API provides an interface for fetching
(sending/receiving) resources .
• It uses request and response objects
• The fetch() method is used to fetch a resource or data.

• let promise = fetch( url , [option] )

6464
 VIRTUAL CODE
Click to
Fetch API
edit
( Application
Master titleProgramming
style Interface )
• The fetch API provides an interface for fetching
(sending/receiving) resources .
• It uses request and response objects
• The fetch() method is used to fetch a resource or data.

• let promise = fetch( url , [option] )

• AJAX is asynchronous JS & XML
• JSON is Javascript Object Notation
• json( ) method : returns a second promise that resolves
with the result of parsing the response body text as
JSON.(input is JSON, output is JS object)

6565
 VIRTUAL CODE
Click to editWeather
Project-2 Master title
app style
• Create a Weather app using api in javascript with good
UI using HTML & CSS

6666
 VIRTUAL CODE
Click to edit Master title style

Thank You

67