15-06-2026

Cls command
Introduction to JavaScript:
 Javascript is used to create client side dynamic pages.
 Javascript is an object based scripting language.//considering
 It is lightweight and cross platform.
 Javascript is a dynamically typed languages.//no need to specify
the datatypes
 It doesn’t require any complier to compile the code in web
browser it has its own built in complier.
What is JavaScript
 Javascript is a light weight object oriented programming
language used for client and server side technology.
 It was called scripting language before 2010 because it is used
only for browser.
 But now we can use this language for database server,
application server and mobile devices also so it is called
programming language.
Role of javascript
 Javascript is the programming language that makes website
interactive, dynamic and functional.
 If you think of a website like human body.
 Html -> skeleton
 Css -> Apperance (design)
 Javascript -> Brain(behavior & logic)
 Without javascript, websites would be mostly static pages.
History of javascript
 In 1993 mosaic was the first popular web browser to
handle(GUI) but it could handle only static webpages.
 In 1994 Netscape corp started new project called netscape
navigator.
 Netscape navigator is browser which have dynamic capabilities .
 It was invented by Brenden rich, he was given task to create
programming language which would add dynamic capabilities
to browser.
 It has been officially released on 1995 as name called mocha
later they give name live script.
 Due to marketing purpose they gave name javascript ,because
java was more popular during 1990’s.
Features of javascript
 All popular web browsers support javascript as they provide
built in execution environments.
 Js follows the c language syntax and structure so it is called
structure programming language.
 Js is an object oriented programming language like it has oops
concept.
 It is lightweight and interpreted language.
 It is a case sensitive language]
 Js is supported in several operating systems including windows,
macOS, Linux etc
Java Script a dynamically typed language
 Javascript is dynamically typed language.
  It means all type checks are done at run time(when program is
executing).
 So we can just assign anything to the variable and it works fine.
 Typescript is a statically typed language . All checks are
performed at compile time.
let a
a=0
[Link](a)//0
a = "hello”
[Link](a)//Hello
Uses of javascript
 Used for building simple and complex web application
Ex: google maps
 We can create mobile apps using javascript(react native)
 Game development([Link] , [Link])
 Creating webservers(node js)
 Creating client side applications or dynamic user
interface(react js)

16-06-2026
Purpose of JavaScript
 It is used to create dynamic user interface on webpage.
 It is used to do client side validation and server side validation
 It is used to interact or integrate front end apps and backend
applications.
Kind of application we can build using Java script
 We can build entire web application .
 We can build mobile apps like ios, android.
 We can develop standalone applications (desktop application
like vscode, notepad, browser, ms paint etc).
 We can build machine learning applications.
JavaScript v\s java
Java script java
Origin Created in 1995 for web Created by sun(oracle now)in
browsers 1995
Type system Dynamic typing Static typing
Execution Interpreted (browser & [Link]) Compiled (runs on jvm)
Main usage - Web development - Enterprise systems
- Full stack apps - Banking and finance
- Real time apps - Android development
Syntax Simple and flexible Verbose and structural
Oops model Prototype based Class based
Performance Good for web apps High performance
Learning curves Easier to learn More complex

JavaScript runs on
 Java script runs in browser and node js
In web browser(front end)
 Every modern browser has a built-in javascript engine.
Example:
 Google chrome v8 engine
 Mozilla firefox  spider monkey
 Microsoft edge  v8 engine
  Safari  java script core(nitro)
On server using node js
 Java script can run outside the browser using [Link]
This allows java script to:
 Create APIs
 Connect to database
 Handle authentication
 Run backend logics
Java script ways to write code in html document
 Java script provides 3 ways to insert code in html doc
1. Head section
2. Body section(more preferred to wse).
3. External js
JavaScript code in head section
 We can write java script code in head section by using script tag
 Inside script tag we can write java script code

JavaScript code in body section

  We can write java script code in body section by using script tag
 Inside script tag we can write java script code

JavaScript code in external js file

 Here we will create separate .js file and connect to html
document
 we can link .js file in head section or body section by using
script tag

JavaScript comments
  the JavaScript comments are meaningful way to deliver
message. It is used add information about the code.
 To make code easy to understand.
 To avoid the unnecessary code.
 The javascript comment is ignored by javascript engine ie.

17-06-2026
JavaScript outputs:
1. Developer console
 [Link]()
 [Link]()
 [Link]()
 [Link]()
2. Browser screen
 [Link]()
3. Alert/dialog box
 [Link]() or alert()
18-06-2026
<script>
[Link]("hello world")
//to print the output in normal

[Link]("it is a error")
//print the message in red color
 [Link]("it is a warning")
//print the message in yello color

[Link]("it is a info")
//print exactly same as that of the log

[Link]("<h1>hello</h1>")
//prits the output in same browser screen

[Link](“error”)
</script>
JavaScript variables:
 Variables are the storage location for the data .
 Variables are the references which points to memory location.
Why we require variables?
Variables are required to store data in the memory while executing
the program, so that we can utilize the data to do some action or
after executing the program we might required to store some output.
Rules for naming variables.
 Can include uppercase and lowercase letters ,digits,(_) and($)
special characters.
 Can’t begin with a digit
  Key words cannot be used as identifiers
 Whitespaces cannot be used while naming identifiers
 Js is case sensitive where var a and var A is different
Assignment 50 key words
How to create variables in javascript ?
 We can take help of scope statements or key words to create a
variables
[Link]
[Link]
[Link]
 In js we will not declare datatype while creating variables
1. Var city; //variable declaration
2. city= “Bangalore” //variable assignment using = operator
3. var gender = “male” //variable initialization (storing the data
at the time of creation)
Types of variables
There are two types of variables.
1. Local variables : a javascript local variable is declared inside
block or function it is accessible within the function or block
only.
2. Global variables : a javascript global variable is accessable from
any function. A variable i.e declared outside the function is
known as global variable.
Eg:
1. Local variable
 function fun1(){
let name='virat'
[Link](name)
[Link](name)
}
function fun2(){
[Link](name)
}
fun1()
fun2()

2. Global variables
const age=40
function greet(){
[Link](age)
}
function greet2(){
[Link](age)
}
greet()
greet2()

Difference b/w var, let, const.

1. Var
 We can re-declare
 We can re-assign
2. Let
 We can re-assign
 We cannot re-declare
3. Const
 We cannot re-assign
 We cannot re-declare
24-06-2026
JavaScript datatypes:
 It is used to define the type of data which we are adding to
variables
 There are 8 types of datatypes in javascript
1. Number
2. String
3. Boolean
4. Undefined (variable declared but not defined)
5. Null (empty variable)
6. Bigint (any data which is grater than 2^53 – 1)
7. Symbol
8. Object type
 95% of time we use only 4 datatypes (numbers, string, Boolean,
object type)
 Primitive datatype
- It is basic datatype
- It is immutable
- It is stored in stack memory
- Except object type all are primitive
1. Number type:
It is a datatype of integers, decimals, and comes under
number type
Ex: let n=9.96
[Link](n)
2. String type:
 Any data type is enclosed with ‘’ or “ “ is comes under string
type.
Ex: let city= “mangalore”
[Link](city)
3. Boolean type
Any value which contains true or false such type of data
comes under Boolean type
Ex: var isplaced
4. Bigint datatype
- Any value which is greater than 2 to the power of 53-1
comes under big int less than it comes under number type
Ex: bigint(123456789123456789n)
5. Symbol:
-
 Non primitive datatype
- It is complex datatype
- It is mutable
- It is stored in heap memory
1. Object type
any variables if we are assigning array or object comes
under object type
var person={}
[Link](typeof person)
var names=[]
[Link](typeof names)
typeof operator:
 In js we have special operator called typeof operator it is used
to find the datatype of any variables
Syntax: typeof <variable name>
25-06-2026
Operators in JavaScript:
 JavaScript operators are symbols that are used to perform
operation
 We have different types of operators the are
1. Arithmetic operator
Arithmetic operators are used to perform arithmetic
operations on the operands
- Addition (+)
- Subtraction (-)
- Multiplication (*)
- Division (/)
- Modulus (%)
- Increment (++)
- Decrement (--)
2. Comparison operator
The JavaScript comparison operator compares the 2
operands
 operator description
== Is equal to
=== identical
!= Not equal
!== Not identical
> Greater than
>= Greater than or equal to
< Less than
<= Less than or equal to

3. Bitwise operator
Operator Description
& Bitwise and
| Bitwise or
^ Bitwise xor
~ Bitwise not
<< Bitwise left shift
>> Bitwise right shift
>>> Bitwise unsigned right shift
4. Logical operator
Operator Description
&& Logical and
|| Logical or
! Logical not

5. Assignment operator
Operator Description
= Assign
+= Add and assign
-= Subtract and assign
*= Multiply and assign
/= Divide and assign
%= Modules and assign
- ++a is pre increment(first incremented and then print)
- a++ is post increment(first print then increment)
6. Special operators
Operator Description
(?:) Conditional operator returns
the value based on the
condition it is like if else
, Comma operator allows
multiple expression 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
new Creates an instance
typeof Checks the type of the
object
26-06-2026
JavaScript Functions:
 Function are block of code which are destined to perform a
specific task
 We can call JavaScript function many times to reduce the code
Advantages of function
 Reusability of the code (write once use multiple times)
 Less coding
How to create a function in js
 Always the function name should represent the particular
behavior.
 Function won’t get automatically invoked unless and until we
invoke
Syntax :
function function_name(){
\\ set of statements
}
Function_name() \\ function call
Types of js functions :
1. Named function
2. Parameterized function
3. Return function
4. Anonymous function
5. Callback function
6. Higher order function
 7. Arrow function
8. Immediately invoked function
9. Currying function
10. Pure function
11. Async function
1. Named function
 It Is a function with normal ways without passing any
arguments is called named function

2. Parameterized function
 We can send any information to the function by passing the
inputs/parameters.
- Parameters : this are the variables without scope statements
which is used to store data and we utilize inside the function
- Argument: where it will always accept the data to store for
the parameters

- syntax
 function function_name(parameter){
// set of code
}
Function_name(argument)

3. Return function
 Function which can return the result and it should catch by
separate variables and we can see output
 Parameter arguments-- >input -- >function -- >output -- > return
 Return should be last statement inside the function after return
statement if you write anything it will not execute.
4. Anonymous function
 Function without name is called anonymous function
 Syntax
Function(){
[Link](“hi hello”)
}
 Function ecpression
 Function expression is the process of assigning a anonymous
function to a variable and making a call.

1-07-2026

2-07-2026

3-07-2026

6-07-2026
07-07-2026
JavaScript arrays:
 Arrays are a kind of data structure where we can store any data
and there is no restriction about the data we are storing. Those
data we are going to call as elements
 Array is a indexed collection of any type of data
 In js array we can add any type of datatype inside it
How to create arrays in js
 There are two ways
- Array literal
- Array constructor
By using array literals:
Syntax:
Var array_name=[]
Let
Constant
Ex:
Var arr=[10,true, “email”, {city:“Bangalore” ,pincode:560091},
“male”]
[Link](arr)
By using constructor:
Syntax:
Var array_name=new Array()
Or
Let
Or
Const
Ex:
Let array1=new Array(“raj”,true,100,39,90,false)
[Link](array1)

how to access the data present in a array :

var arr1=[1,'sachin',true,100,55,70,{name:"virat",id:18},false]
[Link](arr1[4]);
[Link](arr1[0]);
[Link](arr1[1]);
[Link](arr1[2]);

how to find the length of the array :

[Link]([Link])
let arr=[10,true,"email",{city:'bangalore',pincode:560091},"male"]
[Link](arr)
[Link]([Link])

how to create 2d array :

var arr2d=["virat",[10,20,40],true,8088]
[Link](arr2d)
[Link](arr2d[1][2])
Array methods:
1. push()
2. pop()
3. unshift()
4. shift()
5. indexOf()
6. lastindexOf()
7. join()
8. includes()
9. reverse()
10. slice()
11. splice()
1. push()
 when we need to push any data to an array we use push
method .push() alwaysappends the data to the end of the array.
var arr=[]
[Link](10)
[Link](arr)
[Link]('virat')
[Link](true)
[Link](18)
[Link](arr)

2. pop
 var arr1=[10,'sachin',true,18,'virat','y']
[Link](arr1)
[Link]()
[Link](arr1)
[Link]()
[Link]()
[Link](arr1)

3. unshift

when we need to push the data to the begining of the array we

use unshift()

var arr2=[10,'sachin',true,111]
[Link](arr2)
[Link]('virat')
[Link](arr2)
[Link](18)
[Link](arr2)

4. shift
to remove an element from the begining of an array we use
shift()
 var arr3=[10,'sachin',true,111,'virat',18]
[Link](arr3)
[Link]()
[Link](arr3)
[Link]()
[Link]()
[Link](arr3)

5. indexOf()
this method is used to find the index value of particular
element if the element is not avilable inside the array then the
indexOf() will return -1.

var arr4=[10,'sachin',true,111,'virat',18,'y']
[Link](arr4)
[Link]([Link](true))
[Link]([Link]('abs'))

6. lastindexOf()
this method is used to find the last index value of particular
element.
var arr5=['dhruva',100,'rahul',100,'sanjay',true,100,99]
[Link]([Link](100))
 7. join()
whenever we need to join all the elements inside the array
join() should be used join() will join the elements of an array
and return it in the string format

var arr6=[10,'sachin',true,111,'virat',18,'y']
[Link]([Link]())
[Link]([Link](" "))
[Link]([Link](""))
[Link]([Link]("-"))

8. includes()
includes() checks whether the data passed to it is present inside
the array or not, if it is present it returns true else returns false

var arr7=[10,'sachin',true,111,'virat',18,'y']
[Link]([Link]('virat'))
[Link]([Link](777))
09-07-2026
9. reverse()
in order to reverse an array we use reverse()

var arr8=[10,'sachin',true,18,'virat','y']
[Link](arr8)
[Link]([Link]())
10. slice()
whenever we need to extract particular elements from
array we can use slice() it will not alter the original array.
Syntax: slice(start index, end index)

var arr9=[10,'sachin',true,18,'virat','y']
[Link]([Link](3))
[Link]([Link](2,5))
[Link](arr9)

11. splice()
whenever we need to extract particular length of
elements from array we can use splice() it will alter the
original array.
syntax : splice(start index, length)

var arr10=[10,'sachin',true,18,'virat','y']
[Link]("original array",arr10)
var splicedarray=[Link](2,3)
[Link]("spliced array:",splicedarray)
[Link]("original array after spliced:",arr10)
Advanced array methods
1. forEach()
 if we want to access each and every element of an array

2. map()
 map() should be return some value returned value always
added in new array map() will not alter original array
var arr1=[101,300,20,115,600]
var newarr1=[Link](function(element){
return element*50
})
[Link](newarr1)
[Link](arr1)

take the array of 10 student names with welcome to js class

var
arr2=['dhruva','harish','vinayak','chandru','jeevan','kushal','sanjay',
'rahul']
var newarr2=[Link](function(element){
return "welcome "+element+" to js class"
})
[Link](newarr2)
[Link](arr2)

3. filter()
it is used to filter elements or data from the array based on
certain condition . filter callback function will return always
Boolean value . it will not alter original array . it will create new
array
syntax:
<arr_name>.filter(function(element){
Return <Boolean value>
 })

4. reduce()
 it is used to reduce the array to one single value reduce method
is used. Such method which accepts a callback function as the
parameter(first param)(second parm)initial value
 syntax:
reduce(callback,initial_value)
var arr3=[10,20,30,40,50,60]
var callback=(prev,current)=>{
return prev+current
}
var res=[Link](callback,0)
[Link](res)

10-07-2026
5. sort()
 it is used to sort the array either in ascending or descending
order
 var names=['sachin','virat','rohith','rahul']
 [Link]([Link]())

 var array1=[10,90,80,40]
 var result=[Link](function(a,b){
 return a-b //for decending b-a
 })
 [Link](result)


6. toString()
 toString() returns a string with array value separated by comma
and it does not change the original array
  var names=['sachin','virat','rohith','rahul']
 [Link]([Link]())

7. delete()
 array elements can be deleted using javascript operator delete
using delete leaves undefined holes in the array
 syntax: delete array_name(index)
 var names=['sachin','virat','rohith','rahul']
 [Link](names)
 delete names[3]
 [Link](names)

8. isArray()
 the isArray method returns true if an variable storing an array
variable otherwise false.
 Syntax: [Link](variable_name)
 var names=['sachin','virat','rohith','rahul']
 [Link]([Link](names))
 var string="hello how are you"
 [Link]([Link](string))

JSON :
 JSON stands for JavaScript Object Notation.
 It is a lightweight data format used for storing and exchanging
data, especially between a server and a client (like in web
apps).
 JSON is mainly used in web development, especially when a
client (browser) communicates with a server (backend) through
APIs.
What does JSON look like
  It look like a simplified version of javascript objects, and it is
written in key-value pairs.
{
"name":"virat",
"age":20,
"isPlayer":true
"skills":["batting","caption"]
}
Where is JSON used?
 Sending data between frontend and backend
(example: React ↔️[Link])
 APIs often use JSON format to send/receive data
 Storing config files (like [Link] in [Link], [Link])
Why JSON
 Easy to read and write
 Language independent (used in python, java, etc)
 Lighter and faster
 Most modern APIs sends and receive data in JSON
Rules of JSON
 data is written in key-value pairs
 key must be in double quotes
 data is separated by commas
 JSON objects are enclosed in curly braces {}
 Arrays are enclosed in square brackets []
  Variables can be : string(“name”), number(22),
Boolean(true,false), array([]), object({}), null(null) .
Basic structure of JSON
{
"name":"virat",
"age":20,
"isPlayer":true,
“address”:{
“city”:”Bangalore”,
“pin”:560091
}
"skills":["batting","caption"],
“phone”:null
}
Fake APIs
1. Json placeholder
2. Fake store API

Json Array example

{
"students":[
{
"name":"dhruva",
"age":22
},
{
"name":"dhruva",
"age":22
},
{
"name":"virat",
"age":37
}
]
}

JSON in API response example

async function fun1(){
//fetch the data from url
let response=await
fetch('[Link]
//convert the response to json
 let jsonData=await [Link]();
//log the json data
[Link](jsonData)
//you can also assign a json data to a variable if you want to use it
later
let result=jsonData
//log the result
[Link](result)
}
//call the async function
fun1()
JSON vs JS

JSON methods in javascript

 1. [Link]()
2. [Link]()

1. [Link]()
 Converts javascript object json string
 Syntax: [Link](object)
 Ex:
 const user={
 name: 'virat',
 age:22,
 city:"delhi"
 };
 const jsondata=[Link](user);
 [Link](jsondata);

2. [Link]()
 Converts JSON string javascript object
 Syntax: [Link](jsonString)
 Ex:
 const jsonData='{"name":"virat","age":30}'
 const obj=[Link](jsonData)
 [Link](obj)

13-07-2026
Js strings:
 collection of characters enclosed within quotes(single/double)
is considered to be string
ex:
var str1= virat //invalid
 var str="virat" //valid
var str2='kholi'
var str3="it's"
var str4='it\'s'
[Link](str,str2,str3,str4)
 string concation
combining one or more string together is called as
concatenation in order to concat 2 strings we should take the
help of + operator
ex:
var firstname="virat"
var lastname="kholi"
[Link](firstname+" "+lastname)
[Link](firstname,lastname)
 length of a string
to find the length of the given string we use length property
ex:
let city="bangalore"
[Link]([Link])
[Link]([Link]-1)
String methods:
1. charAt()
2. toLowerCase()
3. toUpperCase()
 4. slice()
5. substring()
6. replace()
7. replaceAll()
8. trim()
9. concat()
1. charAt()
 whenever from a string if we need to extract a specific
character we use charAt()
 var str="hello world"
 [Link]([Link](4))

2. toLowerCase()
 all the characters of the string will be converted to lower case
 var str1="HELLO WORLD"
 [Link]([Link]())

3. toUpperCase()
 all the characters of the string will be converted to upper case
 var str2="hello world"
 [Link]([Link]())

4. substring()
 its almost similar to slice(). The difference between substring
and slice() is substring doesn’t support negative(-ve) index.
 var str3="hello world"
 [Link]([Link](2))
 [Link]([Link](-2)) //hello world
5. slice()
  when ever we want to extract a substring from a string we use
slice().
 Syntax:
slice(begin_index)
slice(begin_index,end_index)
 It will accepts negative index it starts extraction from -2 index
till the end and it ignores the value present at the -2.
 var str4="hello world"
 [Link]([Link](2)) // llo world
 [Link]([Link](4,7)) //o w
 [Link]([Link](-2)) //ld


6. replace()
 when we want to replace a particular string with new string we
use replace method()
 var str5="hello world"
 [Link]([Link]("hello","hi"))

7. replaceAll()
 to replace all the occurances with the new string we cant’t use
replace() rather we should use replace all.
 var str6="hello world hello"
 [Link]([Link]("hello","hi"))

8. trim()
 in order to remove white spaces from the string we use trim()
 trim() will remove only whitespaces before and after the string
and it wont remove the white space present between the string
 var str7=" hello world "
  [Link](str7)
 [Link]([Link](),"hi")

9. concat()
 it is used to concat 2 strings