JAVASCRIPT

INTRODUCTION

 Java script was invented by Brenden eich in 1995

 It was developed for Netscape and become the ECMA-262
 Javascript is the world most popular programming language
 It is used to how the website would be response to the user
 It is easy to learn

DATATYPES:

Data types is the classification of data which tells the compiler or interpreter how the programmer intends
to use the data

Javascript have dynamic datatypes this means that the same variables can be used to hold different data
types

Java script is a intrepenuer

Data types can be classified into:

 String
 Number
 Bigint
 Boolean
 Undefined
 Null
 Symbol
 Object(array, object, date)

VARIABLES:
Variables are like container to store data values

In javascript to declare variables we use some key words

a = 10 //undefined
var b = 10 //var keyword
let c = 20 //let keyword
const d = 30 //const keyword

RULES FOR DECLARING VARIABLES:

 Variables cannot be a keywords or reserved word

 Variables cannot start with number
 Variables can be alphanumeric not in numeric alpha
 Variables cannot contains blank spaces
 Variables cannot contains special characters
 Variables is a case sensitive

OPERATORS :

Operators is an symbol it is used to perform mathematical or logical

operations

Arithmetic operator - +, - ,*, /, %

Assignment operator - =, +=, *=, /=, %=
Conditional operator - ==, <, >, <=, >= , ===
Logical operator - &&, ||, !
Bitwise operator - &, |, ^, ~, <<, >>
Ternary operator - ?

CONTROL STATEMENTS:

In control statement we can control the flow of the code

IF STATEMENT:

If the condition is true the statement will be executed else not

if(condition){

block of code
}

CONDITIONAL STATEMENT:

SWITCH CASE:

//switch case
let day = 10

switch(day){

case 1:
[Link]("SUNDAY")
break;

case 2:
[Link]("MONDAY")
break;

case 3:
[Link]("TUESDAY")
break;

case 4:
[Link]("WEDNESDAY")
break;

case 5:
[Link]("THURSDAY")
break;

case 6:
[Link]("FRIDAY")
break;

case 7:
[Link]("SATURDAY")
break;

default:
[Link]("NONE")
break;
}
FOR IN:
For of returns the keys of an iterable object

letnum= [ 45, 6, 90, 15, 16, 7, 34]

// 0 1 2 3 4 5 6

for(iinnum){
//i returns keys
[Link](i)
}

FOR OF:
For of returns the values of an iterable object

letnum= [ 45, 6, 90, 15, 16, 7, 34]

// 0 1 2 3 4 5 6

for(I of num){
//i returns values
[Link](i)
}

FOR EACH:
The for each method calls a function once for each array element

letnum= [ 45, 6, 90, 15, 16, 7, 34]

// 0 1 2 3 4 5 6

[Link](function(values, i, arr){
//values - return elements, i - returns index number, arr - return array values
 [Link](values)//return values

})

FUNCTION:
Function is a block of code that executes only when its called

In java script to create function we use function keyword

Eg:
functionbirthdayfunction(){
[Link]("cake cutting")
}

birthdayfunction()

RECURSION:
Recursion is a method of calling a function by itself or inside another function

Eg
functionbirthdayfunction(){
[Link]("cake cutting")
birthdayfunction()
}

birthdayfunction()

ARROW FUNCTION:
It is use to create a shorter function syntax

Syntax :

Const variableforfunction= () => {

//block of codes
}

Eg:
conststephy= () =>{

[Link]("my name is stephy")

}

stephy()
//output : my name is stephy

Note: u cannot access or execute the arrow function before initialize that

ARRAY:
Array is collection of element stored in a single variable, array can store the value in index numbers

Note:Array can be declared with box bracket [ ]

Eg:

We stored the many numbers into the num variable

Let num= [ 45, 6, 90, 15, 16, 7, 34]

// 0 1 2 3 4 5 6
[Link](num)

ACCESS ONLY ONE ELEMENT

Let num= [ 45, 6, 90, 15, 16, 7, 34]

// 0 1 2 3 4 5 6
[Link](num[3])

CHANGE ELEMENT VALUE USING INDEX:

letnum= [ 45, 6, 90, 15, 16, 7, 34]

// 0 1 2 3 4 5 6
num[3] =0
[Link](num[3])

ITERATE ELEMENT IN ARRAY:

etnum= [ 45, 6, 90, 15, 16, 7, 34]

// 0 1 2 3 4 5 6

for(i=0; i<[Link]; i++){

[Link](num[i])
}

ITERATE USING FOR IN:

letnum= [ 45, 6, 90, 15, 16, 7, 34]

// 0 1 2 3 4 5 6

//for(key in object)
for(iinnum){
[Link](num[i])
}

ARRAY METHODS:

Length:

letnum= [ 45, 6, 90, 15, 16, 7, 34]

// 0 1 2 3 4 5 6

[Link]([Link])//count the elements from the array

toString():

letnum= [ 45, 6, 90, 15, 16, 7, 34]

// 0 1 2 3 4 5 6
[Link](num)//return array value
[Link]([Link]())//return converted array to string value

pop():

letnum= [ 45, 6, 90, 15, 16, 7, 34]

// 0 1 2 3 4 5 6
[Link]()
[Link](num) // removed last element from the array

push():

letnum= [ 45, 6, 90, 15, 16, 7, 34]

// 0 1 2 3 4 5 6
[Link](88)
[Link](num)//adds the element at the end of the array

shift():

letnum= [ 45, 6, 90, 15, 16, 7, 34]

// 0 1 2 3 4 5 6
[Link]()
[Link](num)//removes the first element from the array

unshift():

letnum= [ 45, 6, 90, 15, 16, 7, 34]

// 0 1 2 3 4 5 6
[Link](55)
[Link](num)//adds the element at the begining

concat():

letnum1= [ 45, 6, 90, 15, 16, 7, 34]

letnum2= [91,11]
letnewnum=[Link](num2)
[Link](newnum)//merge the two arrays

splice():

letnum= [ 45, 6, 90, 15, 16, 7, 34]

[Link](2,1,91,78,1)
//splice(index number to be insert, delete count number, insert value to be insert to the array)
[Link](num)

slice():

letnum= [ 45, 6, 90, 15, 16, 7, 34]

// 0 1 2 3 4 5 6
letslicedelements=[Link](1,4)//slice upto 1 - 3
//slice the elements based on given value
[Link](slicedelements)

reverse():

letnum= [ "B", "D", "E", "A", "C"]

// 0 1 2 3 4 5 6
[Link]([Link]())//reverse the element

sort():

letnum= [ "B", "D", "E", "A", "C"]

// 0 1 2 3 4 5 6

[Link]([Link]())//sort only string elements

sort in descending order:

letnum= [ "B", "D", "E", "A", "C"]

// 0 1 2 3 4 5 6
letsortvalue=[Link]()
[Link]("ASCENDING ORDER"+":"+sortvalue)
[Link]("DESCENDING ORDER"+":"+[Link]())

sort the numbers in ascending order:

letnum= [ 45, 6, 90, 15, 16, 7, 34]

// 0 1 2 3 4 5 6
[Link]([Link]())//numbers cannot sorted correctly
[Link]("NUMBERS IN ASCENDING ORDER:"+":"+[Link](function(a, b){

returna-b
}))//now numbers can be sorted correctly

Sort the numbers in descending order:

letnum= [ 45, 6, 90, 15, 16, 7, 34]
// 0 1 2 3 4 5 6
[Link]([Link]())//numbers cannot sorted correctly
[Link]("NUMBERS IN ASCENDING ORDER:"+":"+[Link](function(a, b){

returnb-a
}))//now numbers can be sorted correctly

Delete element from array:

letnum= [ 45, 6, 90, 15, 16, 7, 34]

[Link](num)
deletenum[2]
[Link](num)//[ 45, 6, <empty item>, 15, 16, 7, 34]

STRING METHODS:

Perform some tasks on the string values

length:

letstd="stephy"

[Link]([Link])//returns count of the string length

slice():

letstd="stephy"
[Link]([Link](3,6))//start from second position has you given

touppercase():

letstd="stephy"

[Link]([Link]())//convert the string lowercase to uppercase

tolowercase():

letstd="STEPHY"

[Link]([Link]())//convert the string uppercase to lowercase

replace():

replace() replace only the first match

replace() method is a casesensitive

leta="stephy is a framework developer"

[Link]("original"+":"+a)

letb=[Link]("framework","fullstack")

[Link]("copy of original"+":"+b)

replace value without casesensitive

leta="stephy is a Framework developer framework"

[Link]("original"+":"+a)
letb=[Link](/framework/i,"fullstack")
[Link]("copy of original"+":"+b)

replace value with case sensitive:

leta="stephy is a Framework developer framework"

[Link]("original"+":"+a)
letb=[Link](/framework/g,"fullstack")
[Link]("copy of original"+":"+b)

replaceAll():

leta="stephy is a framework developer framework"

[Link]("original"+":"+a)
letb=[Link]("framework","fullstack")
[Link]("copy of original"+":"+b)

concat():

joins a several strings

leta="stephy"
letb="is a framework developer"
letc=[Link](b)
[Link](c)

trim():

removes blankspaces from both side of the string

leta=" stephy "

letb=[Link]()
//before trim
[Link](a)

//after trim
[Link](b)

trimStart():

removes blankspaces only from the start of the string

leta=" stephy "

letb=[Link]()

[Link](b)//output = “stephy “
//before = " stephy "
//after = "stephy "

trimEnd():

removes blankspaces only from the end of the string

leta=" stephy "

letb=[Link]()

[Link](b)//output = “ stephy”
//before = " stephy "
//after = " stephy"
padStart():

pads a string with another string at the start

leta="s"

letb=[Link](5,"0")

[Link](b)

padEnd():

pads a string with another string at the end

leta="s"

letb=[Link](5,"0")

[Link](b)

charAt():

returns the character at a specified position in a string

leta="stephy"

[Link]([Link](3))//output : p(the third position of the character is p)

chatCodeAt():

returns unicode of the character at a specified position in a string

leta="stephy"

[Link]([Link](3))//output - 112

split():

convert string to array with separators

letstep1="s t e p h y" //split using spaces

letstep1array=[Link](" ")
//output : [‘s’,’t’,’e’,’p’,’h’,’y’]

letstep2="s,t,e,p,h,y"//split using commas

letstep2array=[Link](",")
//output : [‘s’,’t’,’e’,’p’,’h’,’y’]

letstep3="s|t|e|p|h|y"//split using pipe

letstep3array=[Link]("|")
//output : [‘s’,’t’,’e’,’p’,’h’,’y’]

letstep4="stephy"//split by double quotes or empty double quotes

letstep4array=[Link]("")
//output : [‘s’,’t’,’e’,’p’,’h’,’y’]

OBJECTS:

Syntax:

constobject_name= {
 property:property_value
}

Eg:
constajith= {

myname:"ajith",
age:23,
qualification:"MCA"

[Link]([Link])

ACCESSING THE PROPERTIES FROM OBJECT:

constajith= {

myname:"ajith",
age:23,
qualification:"MCA"

[Link]("first method:"+[Link])
[Link]("second method:"+ajith['myname'])

STORE A FUNCTION INSIDE THE OBJECT:

constajith= {

myname:"ajith",
age:23,
qualification:"MCA",
func:function(){
 return"this message from function stored inside the object"
}

[Link]([Link]())//note : function should have return value

STORE A ANOTHER OBJECT INSIDE THE SPECIFIED OBJECTS(nested

objects):

constajith= {

myname:"ajith",
age:23,
qualification:"MCA",
object2:stephy={

myname:"stephy"
}

[Link]([Link])

DATE AND TIME METHODS:

Date and time methods in javascript we use to work with date and time

Date objects are created with the new Date()

GET METHODS:
 getFullYear() Returns current year
getMonth() Returns current month as a
number(0-11)
getDate() Returns a current day as a
number(1-31)
getDay() Returns a weekday as a
number(0-6)
getHours() Returns hour(0-23)
getMinutes() Returns minute(0-59)
getSeconds() Returns seconds(0-59)
getMilliseconds() Returns millisecond (0-999)
getTime() Returns times(milliseconds
since jan 1, 1970)

Eg:

consta=newDate()

[Link]([Link]())

SET METHODS:

setFullYear() Sets current year

setMonth() sets current month as a
number(0-11)
setDate() sets a current day as a
number(1-31)
setDay() sets a weekday as a
number(0-6)
setHours() sets hour(0-23)
 setMinutes() sets minute(0-59)
setSeconds() sets seconds(0-59)
setMilliseconds() sets millisecond (0-999)
setTime() Sets times(milliseconds
since jan 1, 1970)
Eg:

Simple age calvulte using year

Const currentyear=newDate()
Const dob=newDate()

[Link](2000)

constage=[Link]() -[Link]()

[Link](age)

TYPE CONVERSION:

Number to string:

leta=10
letb=String(a)

[Link](typeof(b))//check datatype of the values using typeof function

output : string

String to number:
leta="10"
letb=parseInt(a)

[Link](typeof(b))//check datatype of the values using typeof function

output: number

convert to floating point:

leta="10.11"
letb=parseFloat(a)

[Link](typeof(b))//check datatype of the values using typeof function

date to string:

leta=newDate()
letb=String([Link]())

[Link](typeof(b))

MATHS FUNCTIONS:

[Link] Returns pi value

Math.LN2 Returns the natural
logarithm of 2
Math.LN10 Returns the natural
logarithm of 10
Math.LOG2E Returns base 2
logarithm of E
Math.LOG10E Returns base 10
logarithm of E
Math.E Returns Euler’s
 number
Math.SQRT2 Returns the square
root of 2
Math.SQRT1_2 Returns the square
root of 1/2
[Link] Returns a random
integer from 0 to 1
[Link] Returns the nearest
integer but not in
decimal value
[Link] Returns the highest
value of rounded up
to its nearest integer
[Link] Returns the lowest
value of rounded up
to its nearest integer
[Link] Returns the interger
part of the decimal
value
[Link] Returns the value is
negative(-1),
 positive(1) or null(0)
[Link]() Returns the square
root of given value
[Link]() Returns the power
values of given
numbers

Random:
[Link]([Link]())

print 0 - 9
[Link]([Link]() *10)

print 0 - 99
[Link]([Link]() *100)

Round():

leta=3.3//3 | 3.1 | 3.2 | 3.3 | 3.4 | 3.5 | 3.6 | 3.7 | 3.8 | 3.9 | 4
[Link]([Link](a)) //output: 3

ceil():

leta=3.1//3 | 3.1 | 3.2 | 3.3 | 3.4 | 3.5 | 3.6 | 3.7 | 3.8 | 3.9 | 4
[Link]([Link](a))//output: 3
[Link]([Link](a))//output: 4

floor():

leta=3.4//3 | 3.1 | 3.2 | 3.3 | 3.4 | 3.5 | 3.6 | 3.7 | 3.8 | 3.9 | 4
[Link]([Link](a))//output: 3
[Link]([Link](a))//output:4
[Link]([Link](a))//output:3

trunk():

leta=3.1//3 | 3.1 | 3.2 | 3.3 | 3.4 | 3.5 | 3.6 | 3.7 | 3.8 | 3.9 | 4
[Link]([Link](a))//output:3
[Link]([Link](a))//output:4
[Link]([Link](a))//output:3
[Link]([Link](a))//output:3

sign():

leta=3.7//3 | 3.1 | 3.2 | 3.3 | 3.4 | 3.5 | 3.6 | 3.7 | 3.8 | 3.9 | 4
[Link]([Link](a))//output:4
[Link]([Link](a))//output:4
[Link]([Link](a))//output:3
[Link]([Link](a))//output:3
[Link]([Link](a))//output:1//positive = 1, negative = -1, null = 0

sqrt():

leta=4
[Link]([Link](a))//output:2

pow():

letbase=4
letpower=3
[Link]([Link](base,power))//output:64 (4*4*4*)

max():

[Link]([Link](3,5,67,51,9,87))//output:87

min():

[Link]([Link](3,5,67,51,9,87))//output:3

abs():

leta=-6.8
[Link]([Link](a))//output:6.8retuns the positive value

log():

leta=3
[Link]([Link](a))//output:1.0986122886681096
//returs natural logarithm of given value

Log10():

leta=3
[Link](Math.log10(a))//output:0.47712125471966244
//returs natural base 10 logarithm of given value

Log2():

leta=3
[Link](Math.log2(a))//output:1.584962500721156
//returs natural base 2 logarithm of given value

SETS:

Sets is a collection of unique values

Each value can occur only once in a set
We declare sets circle with square bracket

letnames=newSet(["stephy","dhanalakshmi","nishitha","vigneshwari"])
[Link](names)

output:
Set(4) { 'stephy', 'dhanalakshmi', 'nishitha', 'vigneshwari' }

Cannot consider repeated values

letnames=newSet(["stephy","dhanalakshmi","nishitha","vigneshwari","
stephy"])
[Link](names)

output:
Set(4) { 'stephy', 'dhanalakshmi', 'nishitha', 'vigneshwari' }

SETS METHODS:

Add():
letnames=newSet(["stephy","dhanalakshmi","nishitha","vigneshwari"])
[Link]("BEFORE INSERT:")
[Link](names)
[Link]("swetha")
[Link]("AFTER INSERT:")
[Link](names)

output:
BEFORE INSERT:
Set(4) { 'stephy', 'dhanalakshmi', 'nishitha', 'vigneshwari' }
AFTER INSERT:
Set(4) { 'stephy', 'dhanalakshmi', 'nishitha', 'vigneshwari' ,
‘swetha’}

Delete():
letnames=newSet(["stephy","dhanalakshmi","nishitha","vigneshwari"])
[Link]("BEFORE DELETE:")
[Link](names)
[Link]("dhanalakshmi")
[Link]("AFTER DELETE:")
[Link](names)
output:
BEFORE DELETE:
Set(4) { 'stephy', 'dhanalakshmi', 'nishitha', 'vigneshwari' }
AFTER DELETE:
Set(4) { 'stephy','nishitha', 'vigneshwari' }

Has():
letnames=newSet(["stephy","dhanalakshmi","nishitha","vigneshwari"])

[Link]([Link]("stephy"))//returns true

[Link]([Link]("ajith"))//returns false

size():
letnames=newSet(["stephy","dhanalakshmi","nishitha","vigneshwari"])

[Link]([Link])//returns the number of values stored in a

specified set

output:
4

Values():
letnames=newSet(["stephy","dhanalakshmi","nishitha","vigneshwari"])
[Link](names)
[Link]([Link]())

output:
Set(4) { 'stephy', 'dhanalakshmi', 'nishitha', 'vigneshwari' }
[Set Iterator] { 'stephy', 'dhanalakshmi', 'nishitha',
'vigneshwari' }

Iterate sets using for of:

letnames=newSet(["stephy","dhanalakshmi","nishitha","vigneshwari"])

for(I of names)
{
[Link](i)
}

Get index value of values in a set:

letnames=newSet(["stephy","dhanalakshmi","nishitha","vigneshwari"])
leta=0
[Link]((val, i, arr)=>{

[Link](val+a)
a+=1
})

Interate sets using for each:

letnames=newSet(["stephy","dhanalakshmi","nishitha","vigneshwari"])
//
[Link]((val, i, arr)=>{

[Link](val)
})
MAPS:

Map is a collection of data store in a key and value pairs

Let colors= new Map([

["red","stop"],
["yellow","ready"],
["green","go"]
])

[Link](colors)

//output
Map(3) { 'red' => 'stop', 'yellow' => 'ready', 'green' => 'go' }

Set():

letcolors=newMap([
["red","stop"],
["yellow","ready"],
["green","go"]
])

[Link]([Link]("blue","no rules"))

output:
Map(3) { 'red' => 'stop', 'yellow' => 'no rules', 'green' => 'go',
'blue' => 'no rules' }
edit the value:
letcolors=newMap([
["red","stop"],
["yellow","ready"],
["green","go"]
])

[Link]([Link]("yellow","no rules"))//yellow value has been

edited

output:
Map(3) { 'red' => 'stop', 'yellow' => 'no rules', 'green' => 'go' }

Get():

letcolors=newMap([
["red","stop"],
["yellow","ready"],
["green","go"]
])

[Link]([Link]("yellow"))

output:
ready

delete():

letcolors=newMap([
["red","stop"],
["yellow","ready"],
["green","go"]
])
[Link]("BEFORE DELETE:")
[Link](colors)
[Link]("red")//delete function
[Link]("AFTER DELETE:")
[Link](colors)

has():

let colors=new Map([

["red","stop"],
["yellow","ready"],
["green","go"]
])

[Link]([Link]("yellow"))//true

size():

letcolors=newMap([
["red","stop"],
["yellow","ready"],
["green","go"]
])

[Link]([Link])//output: 3

iterate using for each:

letcolors=newMap([
["red","stop"],
["yellow","ready"],
["green","go"]
])
[Link]((values, keys, arr)=>{
[Link](values)//return values
[Link](keys)//returns keys
[Link](arr)//returns array values
})

Iterate using for of:

letcolors=newMap([
["red","stop"],
["yellow","ready"],
["green","go"]
])

for(i of colors)
{
[Link](i)
}

Output:
[ 'red', 'stop' ]
[ 'yellow', 'ready' ]
[ 'green', 'go' ]

Separate keys and value using for of:

letcolors=newMap([
["red","stop"],
["yellow","ready"],
["green","go"]
])

for(i [Link]())
{
[Link](i)//return keys
}

Output:
red
yellow
green
letcolors=newMap([
["red","stop"],
["yellow","ready"],
["green","go"]
])

for(i of [Link]())
{
[Link](i)//return values
}

Output:
stop
ready
go

OOP,s:

Classes and objects:

It is used to execute oops based programs

Syntax:
classclass_name
{
//objects
object_name()
{
//block of code
}
}

Eg:
classcomputer
{
ram(){
[Link]("4GB ram")
}

rom(){
[Link]("350GB rom")
}
}

constlenovo=newcomputer()
[Link]()

output:
4GB ram

Constructor:

Constructor is a special type of method

It calls automatically when the object is created

In javascript we create constructor using constructor() method

Syntax:

classclass_name
{
constructor(){

}
}

Eg:

classcomputer
{
constructor(){

[Link]("lenovo")

constlenovo=newcomputer()

output:

Lenovo
//program executes without calling the method automatically after
object is created

INHERITANCE:

The object of one class acquire the properties of another class

We inherit the class to another class using extends keyword
Class francis
{
money()
{
[Link]("money")
}
}

Class stephy extends francis //stephy can access francis objects

{
}

Class ajith // ajith cannot able to access francis objects

{

}
Const s= new stephy()
[Link]()

output:
money

POLYMORPHISM:

functions have same name with different actions

//polymorphism - functions have same name with different actions

classclassone
{
transaction()
{
[Link]("balance check");
}
}
classclasstwoextendsclassone
{
transaction()
{
[Link]("widthrawl")
}
}

classclassthreeextendsclasstwo
{
transaction()
{
[Link]("deposit")
}
}
letobjone=newclassone();
letobjtwo=newclasstwo();
letobjthree=newclassthree();

[Link]();
[Link]();
[Link]();

HTML DOM

DOM stands for document object model, It is a programming interface that allows us to create,
change, or remove from the document, we can also add events to these elements to make our
page more dynamic

Methods to access dom in html:

Method 1:
Access by events

<buttononclick="alert('clicked')">click</button>

Method2:
Create a separate script tag

<script>
[Link]("p")[0].innerHTML = "accessed"
</script>

Method3:
Create separate js file and connect to html document

<scriptsrc="[Link]"></script>

PRINTING POSSIBIITIES:

alert():
generate alert box with a message

alert("stephy")

write():
write a message inside your html document
[Link]("stephy")

innerHtml:
<pid="a"></p>
 <script>
[Link]("a").innerHTML = "stephy"
</script>

GETTING ELEMENTS AND THEIR PROPERTIES FROM HTML:

getElementById():

eg:
<pid="a"></p>

<script>
[Link]("a").innerHTML = "stephy"
</script>

getElementByTagName():

eg:
<p>one</p>
<p>one</p>
<p>one</p>
<p>one</p>
<p>one</p>
<p>one</p>

<script>
[Link]("p")[1].innerHTML = "stephy"
</script>
Output
<p>one</p>
<p>stephy</p>
<p>one</p>
<p>one</p>
<p>one</p>

Using variable:
<p>one</p>
<p>one</p>
<p>one</p>
<p>one</p>
<p>one</p>
<p>one</p>

<script>
leta = [Link]("p")
a[0].innerHTML = "s"
a[1].innerHTML = "t"
a[2].innerHTML = "e"
a[3].innerHTML = "p"
a[4].innerHTML = "h"
a[5].innerHTML = "y"
</script>
Output:
<p>s</p>
<p>t</p>
<p>e</p>
<p>p</p>
<p>h</p>
<p>y</p>

getElementByClassName():
eg:
<p class="stephy">one</p>

<script>
Let a = [Link]("stephy")[0].innerHTML =
"stephy"

</script>

Output:
<p>stephy</p>

querySelector():

select elements by css style

<divclass="a">
<p>your message will appear now</p>
</div>

<script>
[Link](".a p").innerHTML = "stephy"
</script>
Output
<p>setphy</p>

querySelectorAll():
<div class="a">
<p>your message will appear now</p>
<p>your message will appear now</p>
<p>your message will appear now</p>
</div>
 <script>
[Link](".a p")[1].innerHTML = "stephy"
</script>

Add events to the elements:

You add events in your elements using on keyword then make events by javascript function and
call that function inside created event
<buttononclick="showmessage()">click</button>

Eg:

Get input value using events:

<inputtype="text"name=""id="val">
<buttononclick="showmessage()">click</button>

<script>

functionshowmessage()
{
varmessage = [Link]("val").value;
alert(message)
}

</script>

addEventListeners():

creates a events on specified elementgiven by the developer

 <button>click</button>

<script>

letb = [Link]("button")
b[0].addEventListener("click",()=>{
alert("stephy")
})
</script>

removeEventListener():

removes a specified event for selected element

<inputtype="text"name=""id="val">
<button>click</button>
<button>remove</button>

<script>

letb = [Link]("button")
letfunc = ()=>{
alert("stephy")
}
b[0].addEventListener("click",func)

b[1].addEventListener("click",()=>{

b[0].removeEventListener("click",func)
})

</script>
createAttribute():

<pid="a">stephy</p>
<buttononclick="test()">click</button>
<script>
functiontest()
{
leta = [Link]("p")
[0].createAttribute("class")
[Link] = "b"
}

setAttribute():

set or change attribute values, it can also create aatrributes

<pid="a">stephy</p>
<buttononclick="test()">click</button>
<script>
functiontest()
{
leta = [Link]("p")
[0].setAttribute("class","b")

}
<script>

append():

adds specified message on inside the selected element

 <p id="a">stephy</p>
<buttononclick="test()">click</button>
<script>
functiontest()
{
leta = [Link]("p")[0].append("this is my
message")

}
</script>

appendChild():

add elements inside the another slected element

<div>

</div>
<buttononclick="test()">click</button>
<script>
functiontest()
{

leta = [Link]("div")
[0].appendChild([Link]("p"))
}
</script>

remove():

removes a specified element

<p>one</p>
<p>two</p>
<p>three</p>
<buttononclick="test()">click</button>
 <script>

functiontest()
{
[Link]("p")[1].remove()
}
</script>

removeAttribute():

remove attribute from the specified element

<p>one</p>
<pstyle="background-color: red;">two</p>
<p>three</p>

<buttononclick="test()">click</button>
<script>

functiontest()
{
[Link]("p")
[1].removeAttribute("style")
}
</script>

Output
Removed style attribute from the paragraph tag

has Attribute():

<p>one</p>
<pstyle="background-color: red;">two</p>
<p>three</p>

<button onclick="test()">click</button>
<script>

functiontest()
 {
vara = [Link]("p")
[1].hasAttribute("style")
alert(a)//returns true because the style attribute is
there in
paragraph tag
}
</script>

insertAdjacentElement():

<p>one</p>
<p>two</p>
<p>three</p>

<buttononclick="test()">click</button>
<script>

functiontest()
{
vara = [Link]("p")[1]
varb = [Link]("p")[0]
[Link]("beforeend",b)

}
</script>

insertAdjacentText():

<p>one</p>
<p>two</p>
<p>three</p>

<buttononclick="test()">click</button>
<script>

functiontest()
{
vara = [Link]("p")[1]
 [Link]("afterbegin","stephy")

}
</script>

insertAdjacentHTML():

<p>one</p>
<p>two</p>
<p>three</p>

<buttononclick="test()">click</button>
<script>

functiontest()
{
vara = [Link]("p")[1]
[Link]("afterbegin","<h1>stephy</h1>")

}
</script>

getAttribute():

get attribute value from the specified attribute

<p>one</p>
<pid="stephy">two</p>
<p>three</p>

<buttononclick="test()">click</button>
<script>

functiontest()
{
vara = [Link]("p")[1]
alert([Link]("id"))

}
</script>
url():

returns current url

<buttononclick="test()">click</button>
<script>

functiontest()
{
alert([Link])
}
</script>

close():
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>

<p>stephy</p>
<button onclick="[Link]()">close</button>
</body>
</html>

classname():

returns class name of the selected element

<p>one</p>
<p id="stephy"class="stephy">two</p>
<p>three</p>

<buttononclick="test()">click</button>
<script>
 functiontest()
{
Var a = [Link]("p")[1].className
= "ajith"

}
</script>

style():

Access the style properties

<p>one</p>
<pid="stephy"class="stephy">two</p>
<p>three</p>

<buttononclick="test()">click</button>
<script>

functiontest()
{
vara = [Link]("p")
[1].[Link] = "red"

}
</script>

API:

Localstorage():

Setitem():
Store values on the local storage with
key value pairs
<button onclick="test()">click</button>
<script>

functiontest()
{
[Link]("name","stephy")
}
</script>

Getitem():
Get stored items using key

<buttononclick="test()">click</button>
<script>

functiontest()
{
alert([Link]("name"))
}
</script>

Edit stored value

<buttononclick="test()">click</button>
<script>

functiontest()
{
[Link]("name","ajith")
}
</script>

removeitem():
<buttononclick="test()">click</button>
<script>
 functiontest()
{
[Link]("name1")
}
</script>

clear():

Remove items from the local storage

<buttononclick="test()">click</button>
<script>

functiontest()
{
[Link]("name1")
}
</script>

Length:

Count the number of items in the local

storage
<buttononclick="test()">click</button>
<script>

functiontest()
{
alert([Link])
 }
</script>

Key():

Returns key name based on given nth

number
<button onclick="test()">click</button>
<script>

Function test()
{
alert([Link](0))
}
</script>

HISTORY:

Length:

Returns numbes of urls in the history list

<ahref="[Link]">ajith</a>
<br><br>
<hr>
<ahref="[Link]">stephy</a>

<buttononclick="test()">click</button>
<script>
 functiontest()
{
[Link]
}
</script>

Forward():

Loads the Next url in the history list

<ahref="[Link]">ajith</a>
<br><br>
<hr>
<ahref="[Link]">stephy</a>

<buttononclick="test()">click</button>
<script>

functiontest()
{
[Link]()
}
</script>

Back():

Loads the previous url in the history

<ahref="[Link]">ajith</a>
 <br><br>
<hr>
<ahref="[Link]">stephy</a>

<buttononclick="test()">click</button>
<script>

functiontest()
{
[Link]()
}
</script>

Go():

Loads a url by specified nth number

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-
scale=1.0">
<title>Document</title>
</head>
<body>
<p>ajith</p>
<buttononclick="[Link](-2)">click</button>
//for backward
<buttononclick="[Link](2)">click</button>
//for forward
</body>
</html>
Screen:

availHeight
returns screen height

<buttononclick="test()">click</button>
<script>

functiontest()
{
alert([Link])
}
</script>

availWidth:

returns screen width

<buttononclick="test()">click</button>
<script>

functiontest()
{
alert([Link])
}
</script>
colorDepth

returns bits per pixel

<buttononclick="test()">click</button>
<script>

functiontest()
{
alert([Link])
}
</script>

PixelDepth:
<buttononclick="test()">click</button>
<script>

functiontest()
{
alert([Link])
}
</script>

Height:

Retuns height total of the screen

 <buttononclick="test()">click</button>
<script>

functiontest()
{
alert([Link])
}
</script>

Width:
Returns total width of the screen

<buttononclick="test()">click</button>
<script>

functiontest()
{
alert([Link])
}
</script>

COOKIES:

Cookies are data, stored in small text files

We can create, read, and delete cookies with document. cookie property

Create cookie:
<button onclick="test()">store</button>

<script>
function test(){

[Link] = "name=stephy";

Update cookie:
<button onclick="test()">store</button>

<script>

function test(){

[Link] = "name=your value";

Delete cookie:
<button onclick="test()">store</button>

<script>

function test(){

[Link] = "name=";
[Link] = "test=hello";

Get cookie value:

<button onclick="test()">login</button>
 <p>welcome:<span id="a"></span></p>
<script>

function test(){

let a = [Link]("input")[0].value;
[Link] = "name="+a;

}
[Link]("span")[0].innerHTML = [Link];

BOM(Browser Object Model)

Window:

Open():
<button onclick="test()">go</button>

<script>

function test(){

[Link]("your url")

Close():
<button onclick="test()">login</button>

<script>

function test(){
 [Link]()

Timing:

setinterval():

calls a function every five seconds

<button onclick="test()">login</button>
<p></p>
<script>
var a = 0;
function test(){

setInterval(()=>{
[Link]("p")[0].innerHTML = a++;
},5000) //calls function every 5 seconds
}

clearinterval():
<button onclick="test()">login</button>
<p></p>
<script>
var a = 0;

let b = setInterval(()=>{
[Link]("p")[0].innerHTML = a++;
},1000)
 function test(){

clearInterval(b)
}

settimeout():

calls a function after waiting five

seconds
<button class="btn btn-success" onclick="test()">download</button>
<p>running</p>
<script>

function test(){
setTimeout(()=>{
[Link]("p")[0].innerHTML = "running
finished";
},5000)
}

cleartimeout():

<button class="btn btn-success" onclick="test()">download</button>

<p>running</p>
<script>
var a = 10;

let b = setTimeout(()=>{
[Link]("p")[0].innerHTML = "hello";
},5000)
function test(){
 clearTimeout(b)
[Link]("p")[0].innerHTML = "stopped";
}

ALERT:

alert():
<button onclick="test()">download</button>

<script>

function test(){
alert("my message")
}

</script>

confirm():
<button onclick="test()">cancel payment</button>
<p>payment processing.......</p>
<script>

function test(){
if(confirm("you want cancel the payment")){
[Link]("p")[0].innerHTML = "payment was
canceld"
}
else{
 }
}

prompt():

get input from user

<button onclick="test()">cancel payment</button>
<p></p>
<script>

function test(){

let a = prompt("enter your name")

if(a!=""){
[Link]("p")[0].innerHTML = a;
}

</script>