0% found this document useful (0 votes)
8 views64 pages

JavaScript Variables and Data Types Guide

Java script Notes

Uploaded by

Harsh Tanwar
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
8 views64 pages

JavaScript Variables and Data Types Guide

Java script Notes

Uploaded by

Harsh Tanwar
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

JAVASCRIPT

# UsING Jhe Console


REPL
(Read- Eva uate- foint- loo p)
Vasiable ?
+ What is a dtoiag e
A yasiable s imply dhe name ef
location.
Aame yMemtng
23] AL

Vasiade

#Data TypE IN TS:


Bimitve tybe>
• Numb ex •Bigint
•Sgmbol
•Booen
• Stsirg
• Uhde fined

• Nul
# S. +
NUmbess in
• Positive (3) # Neative (- 4)

• Inteqexs (45,
50)
Ploating numbess- h dedmal (46, -8.9)

# OPERATION TN
TS:
opesato
epesatb
opesands
Modulo (semandes opeato)
12°/%5 = 2
• Exponential LPouues ppecoto)

9-84-Nos mal

Ihe Nan alobal psohesty is a Value sebxesentng

Not- A- Numbe
o/o Goaically

oo is nan
Opeb atos Poe cen dehce i
-# dolvirg
Jhis is dhe qenesal Csdes
expsession
(Tut ike a bodmas)
|O>** > *
l, o >
t,

# AssIGNMENT OPERATDRS:

ge= a9c+s
a9e t-L (aitesnative)
age age

UNAPy OPERATDRS:
#
• age= age
• age=getI
ge- =

aget -1 age
(altesative)
agett
decse ment
dhcoement
Pse-dn coement (change,then ube
let age=103
let neuqc - ttog-;
fost - Oncse ment (use, snen chang
let agc 103
- age
let neuoge ttj

# Tdentikies Rules i
All avascoipt Vasiabled mst be identißied ih
tunique name ( ddentfies)

•Nome Can ContanS letess, diqits,urdesscosc and


dolas [Link] pate)
• Name must bain wth aletes.

• Name Con also bgn


wuith 4
ard–.
are [Link] aöe dilß NasioJele
•Nome Case
• Resesved uosos (4re davas Caipt keyuosd) onnot

be
u d as name.

# Boolean in JS -
Boolean sepresents a toue Value >
tsue co false
Yes o ho
(et age=13;
let isAutt- toue; let age 13;
let isAduit= asej
t Stoing in,
Stoings ase text os dequence of chasactesa.

let names " Tony";

let isonman';
oole
=

=
lot char 'a';
let num '23:
=

Qet empty =" ";


-
StRING TNPICES
#
let nane =( Tony stask';0U.3002no

hameC o]> t'


hane t-> 'o'
CoNCATENATION
+
Addig cktang tegethesta
tony" t"+"stas k"
= tony staax"

tony 1"
"tony" tL ="
+ Null $ UNDEPIN ED
N
JS
>Undeßined
not been asajqn ed a Value
Vasiable that has
A

is tabe tndeßined.
d
Null
Ihe null Value sepsesent dhe intenional absence
e{ ang obfect Value.
To be expicity
assigheah
#+ CONSOLE. LOG ()
To cusie (loq) a messaqe
on the Consce.

Console. log("Apra (olege);


Console. loq (123);
[Link] l2t 2);
Console. loa ("Apno', "college',
(23)}ho
# LINkING TS FILE
<Scaipt soc ="app:(s"> </Scoipt>
# 1EMPUATE LITERALS :
ernoteSsion in a
embedded
dhgy
dhey ae
used to dd
witout tem iteo
&ring COnsole- log("Poice is, atb, ";
let a-5;10;
Ret b=
Cons ole. log L' Yeus pay ${at b} Sup ea);
#* Opesatoss in 1Sobo
• Asithmetic (ts , *, /s hy X*).
Unasy (tts -)

Compasiaoh
•Logical

7Compasison Dpesato -
Grseaten than
>
oo ual to
• )=goeatex than
•< Les thon o equal to
<=les dhan
Value/egual to
Qe
• |= Not equal to
Value
•=== Compase tybe and

non-numbeg -
# Compatisono
'a'> 'a' 'o' =61,'b 62
toue
a'>'b' -UNIcop
false
|'b<'c
a<b<C< d<e<
toue
A< B<
C< D<EKF-
Houe
Fals e
t+ Conditional Statements :
• ß- else
• nested il-cse

•Suitch

If Statement
ie (Some Condition£

tatement -
>else Tf
{
iß (Conditior)
IIpo dome thing
3

IlDD Jomething ese


3
else dtatement
1e ccordition )

3
else
ilDo domeing elae
3
Nested iß- else :
btatermest,
Nestirng is uitingi- dse insi de l-else
many levels.
It (an have

i mas k& > = 33


Point"o"
els e
Psint "A"
else
Psint "betes luck next timen

Loqical OPesatoss
-
# Loqical Opesatoxa to Combine erpsess ions.

Loqical AND (&&)


(exb )
&
lexo 2)
Ans V2
T T TAT
T

>Logical OR (I! )
(enb 1) lI (enb 2)
ANS V2
T
T T
T
>LQgical NOT (!)
1(exb)
* Tt sev esbe he Value.

# Tsuth &
Faly
os ale (in b ooleon
Evezydhing in gs s toue
Context).
oo
Fis dont dhey mean dheis Value itselß isolke
tsue, but ae tseated as kalse
D
tue ig

taken in bpolean Context.


+falsy Values

false, O, -D, onlBig int valuc), " " (embty stsing),


, Nan.
null, undefin ed

Tsudhy Nalues
Evenydhing clie

#SwrTCH TATEMENT
-
ue
Usd uhen
we have dome fixed Value tht
to.
need to Com bose
=
Ret Colos "s ed"
Suutoh (colo) 4
Case 'ed':
oe
Cors log ('stop);
bxeakj
uu
Case "Yell o ":
Console. log slouL doun) ;
breakj
Case "qos een" :

Console. ogl"ho);
breakj
dfault:
(orsole. log ("Bs0Ken iaht;

ALERT PROMPT
# $
Alest an mess og e en the oage.
Alest dsplays alest
alest('some Hring is utorg');
Psompt es
Psomot dsplay
a dialog bo that asks
o dome input.
entes pus choicey;
Please entes Poshe
foompt

# STRING METHO DS -

Me thody -Actiont that an be oesomed D


Dh
doecta.

Foomt
Stoina namc. methpdl ()
+Stbing Methody :
let mg Hello

Sts. tsim l)
ot &toing
Tsima uhitespaces fsom bodh ends
setusn a neu onc.
o
>
let msq=" Hell ";
> msq tsm();
<Hell ol
>msg
|K nell o ! <>0UTPUT

Dutput: "Helby, but mg Value


o msg semns dome.

FStaing aoe mmutable in TS.


No changcs an be made to stoings.
Whenever we do toy to make a
dhang,
one
a

neu tsing id Coeated and od seroh


Same.
Case And To loues ase -
# To uppes
let -Random stong';
&to

sto. touppes ase () Qtput "RANDOM STRINCG"

[Link]) utht
# Stoing Methods with Agumenta
wue pass to dhe
:
a me
is Value
do that
method.
>foBmat:
Stsirgname .melhodl (asg)

Of:
INDEx
slbome
Retusn dhe fisst indek o
DccuSe hce
os gives -i{ not fard.
Value in Stairg-

sto -"ILove loclirg"


let
1
[Link] o ("love) tbut
(not<found)
[Link] Ty Qtput-t
sto. inden e l"o) Sutpt 2 (ony 1 ind evy

#
Method Chamingi
Usieg method aßtes anodhes. osdes
ne to ight.
enecci On in be let
s. toubbesase ().toim )

F
SUCE
Retusns a
pat el dhe Goigial stoing as a
heu
&toirg

Ret sto - "Ilovcloding";


[Link] L5) Dt aut Coding
&[Link] li, 4) Detbut-'love"
sta. slice l- num) Out pt>sto sia (Xerg dh -num)
+
Replace
Seasches a Value in the stoing setUSns a
neu
&tsing uwth the Value seblaced.
let st Iloveloding's
&to.&lice Ulove", "do)
utht Ido (ocing
sts. slice ('o, "") ut put
"r LXve loding

4# Repeat :
e Cobies
Retusn aa dtoing uth dhe umbes
a stsirg
sts - * Margo' ;

let
sto. selpeat (3) utput "MongoMorgoMango"

(Data stsucture)
+ Assoy Collection e tings.
Lineas

let tudent C'Haxs h',"NOhe"," Vikas]

dhden lo) Jnden )


1
Judenl). ---
Visualtzig AsBy
num = C245, 8,7
let
hum
mask
let [67, 85,49,20;
let namnes-["ou', "ken', "gui"]:;
<
so as T

let inßoC"au', '6*, 6.4;mized atT^g


let new-
Lempty asoa

[Link] to find Kergih On

Mutable
(ote Asoag arse

#Absay Mehods Brom erd fsetusn't


(oþobi delete

fuh : add to ehd : delete fsom stast
(•Unshilt: add to stost sjkt xetun it

TNDEX Of
Retuon dde o adome thing.

let osimaqy C"sed",yellou,'gbue]


> Psmasy. irden el (' Yellour);
Dutput

> Poimaqy. mden e l'gpeen );


Indudes
a
Qeobch fos lalue
>[Link] ("ted );
<•toue
>Poimasy. includes ('grcen');
<ofase

CoNCat
Merge tuo asa
let oimaby - [' oed","gseen"1
let decoday- C" blue
>Pimary- ConcatldcCorday);
<
[ied, qseen', blue]
ReveSSe
Reyess e anabDay
Xrsimgoy, oevexSeU;
<['gseen', "sed]
Slcea
Copies poaion an atoay.
Colos - ['sed; " blue' "gseeny
let
<C"goeen")
Splice
Temoves/seblace fodd element inplace.
(stast, delete Count, item o-- item n)
Splice
optioral

Xet Colos - [ugedt yellow', blue', "osarge', "pin k'y


ubite]
>
caos. bblice l45;
[pink',' uuhite]
>Colos
<C'sed','geilo ', blue','ooorae'l
>
[Link] (o, 1);

>Colos
<['Yellou ,'blue','sorge
>Colos. spice (o, 1 'black', gey);
<[Yellouw'1

<['back' ;'gsey','blue','oronge]
Soot
Sorts an
artay
let days- ['mon.', "bun' ," ued', tue.7
ycay tost0;
4L'mon.', '8un', ' tue', 'wed']
Conont Asay
Const ass- Ct 2, 3];

Value Conant nhi hogi


ass Constant hoge
(ass ha addses)
Nested Assays
dnde

2.
numns
>let ['ca, t3,4, &l: c4,

Snden
- + LOOPS
Used to itenate a piece oy
of Code.
Repeat

os (initialisaion;
bog
Condition; bdation) $
fos
Ildo domehing
3
{
os (let i-t; i< 25; itt)
[Link] Li); >i-it
3

Point all Ddd numbess (1 to 15)


Cuc)
Scln) fox (let i- L; <=15, i-it) i
Console. lqgl0;

3
1S
Aug oiat dhe multiplication table fo 6

fosl let to5; l<-50; inits) 4


Console log (i)

3
u
uite that psint table
dhe Code e any
umbes aiven hy uses.
let npzompt usite yout no.
h- fossnt; Convert atring into dnt

[Link];

->Nested fos loop.


fos (let i-4; i<= 3; tt){

Console.lQg0;

Dutbut 4

2.
3
WHILE Loopi

uhile l Condition) 5
Il do dome thiing

let i-j
Luhile i<-5){
[Link]);
àtt;
3
ue
uite a
lode whese uses Aues ous
Bavousite movie.

Const Kav= "avatas';


guess psompt C"guess my lav. moie');
let
guess psompt (" uisog guss, toy gaun;

(ondole. loq (" Congsate) ;


3
else
Conscle. loq(" you quit"
- bseaK n loop

let i-s;
uhile (i<»5) {

bseak;

>Loops uith Aooy


let fouts -C' Mango", "Apjle', "osange 1;

Console. log (i, fsuits ia);


3

Loops with Ass


nested ABSOys.
Nested loop ith
let Resoes [C'isonman', "spides man', "hox'], ['supermon
"uondes mam', flosh];
Bos (
leti- D; i<hesoe. lengdhj i tt)£
Console. log(' List te $});
fos (let =o; j<hesoeS [ A]. lerng thj gtt){
Console. oq(hesoay CiJtI);
ollection)
o (element e
do omething
l
3
3: let suts -['Monqo', 'apble', 'banano', "ite
Console. log L6out;

Gutbut Margo

apple
banana
utci
loch
Nested fos-e
fotunes], Cinova', cuggoh-o
let Coxs =[Csupso"; "L-c,
tos (name
e as)
Corsle .log Ch eto);
## TS Ob1ects Liteals i
Key ed Colections lomplex entiiea.
Used to btose
focbesty> (Key, Nalue) pais
Obyects Ghe a lollecion e otoloes hes.

student
name toss h

Mask

Key Value

ue usite_chyect itesas
toue i3 fos cefect litesoy
use Cusly Boaces
We have to
Const astudent- {
name: Hassk'
Key age: 23, alue
Gty :Dei:
33
- Get Values i
otu= £
let hame :" Haseh',

3;
studentC"hame
[Link]
Note
automaticolly Convexts ahjecds Keya to sfs ings.
) j8
numb ex as a Ky, the
Even iK ue mode he
be Convested to toihg
umbes il
Values
Add/update
[Link] {
name: "Hassh':
City: "Dei'y
age: 17,

3
>update
"MUmbai';

Add
[Link]=male';
Delete
delete sudent it;
Nesed Dbccts
Stosing dnfsmation e mattpe adtdet
-
Const clasinlo
amon:
"A+
bode:
iy: 'bel hi

"At*
9ode : a
Gty: 'mumb
Const cladss înlo - [

hame:" HOxs"
gonde : "pelhi' At
Gty: "Deli*
3,
hame :"Viver,
goade : A',
y: "Pune"

1;

# Math Obect
Fsopesties Methd
aluay math. absln)
Math.p
Rostve math. pbu (ayb)
Math-E -math. ploDb ln)

Yalue Value
mandh. sandom )
-> Rndon nteqes:
,Böom TO lO,
0 > 0-467 g973 4<
step 1 let rum= Math. oardom

teb2 numk lb ; 4. 6)89 134s


num =

atep 3 num= Math floos (um); 4


>c
teb 4 um =
hum t L; Shootout

math-llooo ([Link]() * L6)


t 1!
# FuNCTIONS TN
S
ton Teltig I9)
(Funcon Dri
Function unc Name C) 4

In do cometing
3

Exomple function hello l) {


.
Console log ("helo";

fuNcTioNG wth Asqumentai


Values uue bas to the unction.
agg 2) f
fenction funalome (ag,
Ildo Oomeding

oramnble) unction snlo (rome, age)f

polassh', 13);
output- Harsks age i 18
Sumn e tuo numbes wwth the help
Que) Do the
Kunction.
grtan fenion Sumla, )f
[Link]);

Suml, 2);
Sum (5y I0);

Dutput > 3
15

Retusn -
oome \alue bson
Retusn Kequsd is used to setusn
dhe Bunction:

input funtio Dtput


(does do me uod )

Aunetion fannarme (anst, arg {

I do dome dhing
setsn \al;
3
dhe acce%tbiity of Vasiobles,
Scope detesmines pasts eß the
Bsom lesent
Obects and bun ctions
Code.
• fun ction

Block
Lexical

Function Scope
a unction ase not
Vaoiahles deline ini de
fosom Dutside dhe function.
accesible(visible)
Global Scope
&
let dum 54;
£
Hunction Calsum (a, b)
Jet sum= atbj Function 5cope
Console log Lsum)tot
atblgve
Cohsole. ogCsum)s
>outut 54
Point to be Noted

Grside tunction function Scope > Gbbal cope


Global Scope > funcion
Scop c
Outsi de fn ction
Block Scope:
Vasiablas dedaed i block
înside a onnt be

oom Outside dhe bock.


accesed
g for (let i-; ise 5; itt) {
Cons ole.
loqljutput -
GlocK Scope
Consdle.logl9; 4
Dccus

Leical Scope - a function on be


A Vaatable define
Dutside a
ahother unction delined altes
accessibe inside
Vasia ble declasatioh.
the
toue.
• Ihe opposite is Not
+ Functions ExpoeAsiony i
Const Vasiable =function (agg1, ag)
Ildo os setush domething

g Const dum function(a, b{


setusn at b;

Sum (23);

*#
tiqhes Dsdey Functioni
A
tunction that does one c bh.
A as agquments.
os muttiple Kunctiors as
• Takes ene
• Retush a
function

gkinction mltiole Gsect (foc, n){


fos (let i-Lj is-n; it) {

}
let Greet- fancin )f
hello') ;
Conssle. log l'
multipla qoet (greet, a;
Duteut> helle

hello
Retush a un etio

function oddos evenfgctoy (request) i


setusn function () {
Console. log C! cn%2 2=0));

else i (sequest = "even") f


3 =

yetush funetion n)

Condole. lba wsong Dequest";


'

let equest 'dd", leven

#+ Me thods
Aottond dhat lon be peskosmed On an ceyed.
=
Const alculats
add:
setusn atb;
$, €
Sub: knction (a,b)
setun a-b;
b)
function la,
ul:
detuon axbj
Method (Shosthord)

Const aculotor 4
add (a, b)
setusn atbj

Suola,b) {
getusn a-bi

"This" Ke00d
seles, to an
to obet tot is eheculng
Coder
dhe Curssent piece
eg Conat btudent f
name: "Hasshy
oae: 18
eg: 43,
math i 45,
Phy iqo,
getag0i eng t [Link] t this-phy)/3;
let ovghig.
(onsole ogj
this we
whout
#
Tys Catchi
statement allous you to define a block o
Ihe toy
Code to oe tested fos esos uhile it
Is beng

Necuted.
you to deßine o block
lhe Catch stotement allous
e Codeto be enecuted, ik an ed50s
tsy block.

[Link](a0j
..
[Link] C"cauqht an es sor a k nt den ed Ji

function
(ong 4y agg 2)
ienctioy definition t
Const ßumc

Corsole log (a t;

Tmolicit setus :
Conc func (asg1y ag >
> alue)

a
*b
Timeout
t* Set Time [Link])
Cfunctich, timeout) -ColbocK
Set Time out
[Link] ("hi therel;
Set Timeout( O5
tog C'Apna Colge");
Consde.
5,4000);
Console. log (" Welcome toU5
Qutput Hi thexe
uelome to
Apra College

Set Intesval
-
#
Setlntesval (Bunctíon, timeout)
GTime (mii Seond)
eneute ->wojt>eneuteuost
given
eg Setintesval Cos fgven
me LTime
Cons ole. logl" Apra olege"l;

3, 2006);
wwth Avsou bunction

ArsBOUu Function
cotect
) (exicol goe 1) Scobe- his Gling

fasent -all ope

function
ob. Run c
obg-6unc
[Link] Lndow
yhio =
tude t n
# ARRAY METHODS

•Fos Each •So me

• Map •Eve by
• fitter •Reduce
:
Fos Each
oo name);
ass. Ros Each (Somo unction delini hon

Runctton point A
(e) yelement
Console. loglel;
ass fosEach (foint);
|l OR

[Link];

artput > 1

4
Map: Kuncion delinition o
= ass. map l Some
let neuks -name);
g
let num - [4, 2,3,4, 5;
double - [Link] Lkn ction (e) {
let
setusn el* 2;

FiTER: Guncion deß. os


neu Aso = aso. iltes (ome
let -name);
eg> let nuns -L2,4, 4, 5, 6, 2, 7, 8, 41;
cven =nums. Kites ( (num) (num o/o 2 ==b));
let
Oufput 2, 4, 6, 2, &

>Eveoyi
Retubns touei evegy element qooay gives tsue
oetuo false.
Bos come fundion. lse
function delintion cs home) ;
os. eyesy (Sore

Salse

[2, 4]. evey l(es (el y.2= =));


Toue
:
Some aB8y give tsuc
Retusng toue i
bome elements
Sos dome Runction. Eue
setusns folac.
;
aso- bome (some uncfion daliniticn ot nome)
O* [1, 2, 3,41. Some ( (e (cl y•2 = zo));
toue
(el %2
=
o));
[4, 3].Some l el)
false
Reduce:
the asooy to a value.
Sing le
Reduce
asa. sedLce ('seduces Kunction wih 2 Vasiables ko
(accumulator) elementy );
(3eagel) ):
gi> [4, 2, 3, 4].sduce ( (6ey eJ)
10
Htou dhis O8|<

sestei);
(o, 4)
CA9 2) >;
>
L3 3)
Maximum în an asscyt
ues wšite a Code to Finding
Ubing Reduce.

So leta num = L
5 3, 43 75 S, 2];
2, 3 4,
,
5
let eult
=
[Link] ( (mon, el)
(el >mor)
i2
setubn el;

7etusn manj

Console. log (sesut;

# Delault Pasametess: dhe asqum ents.


Value to
Giving a defaut
{
function bunc. (a, b -2)
dome dhing
|| do

> kuncti on Sum (a, b- 3) f


setusn atb;

output Sum ()
2_drput ( Value eßa)
Binal Qutput
+ SPREAD:
an itesoble into muttiele
Values
Expords

do Something uein use Jhõee dot


l Spoead.
3
eg Console. logl... "apnalollege);
e ge
aph acoll
g:- let ass - [, 2, 3, +,6l;
[Link] (oss assJ;

Console. log C-.. ;


4 5
123
uith ADsay Utexals i
Spseod
=
let neLLass L•..asl;
neuD0s
C1,2, 3, 4, S]

g: let chass E... "hell D'];


chass
C'h,'e', !','U,'o]
Spread with object itesa,.
data {
let
8> email :" isonmonQaail. Com'y
Passuosd: "abcd',

datalopy - f..data, id: 1233;


let

# Rest
take an fndelinite numbe
Allous a
a function to
in on
then
e abguments and bundle
;
( (ocd, e) =>addt
el)
Tetush as. educe
4+ Destouctusing
mutipl e Vasi able.
es el assay into
tosing Valu

g» let names C"tony', "bsu e,"steve", "Petebl;

[winneo, um esue]
=
hom es;
let
sunnes up);
Console. Iog (innes,

Dutput Wimes toy


eub
Runn bsue
e cta) -
Destouctusing (ab
=
Const studenta i
hame i "Vishal".
age: "1a',
Claw:12", ,
sesname: ^Vshal@2g"
Passeuosd; "ab cd,

us esng me, poswos d3-


udenta;
-let -Jtidest;
uo8d: ooh
let {uses nom e: useo, Ps
DOM (DocumENT Dbect Model)
#
3eps ents
es wth a
a document uith logical
The DOM
toee.
monipulate /chonge webpog e Content
dt allous
us to
CHTML element)
(HTMLt cSS)
documn@ntl
<body>
<div)
body <h Todo K/h)
</divs
<ULS

Div <K> Eat< /li)


<A code <iRi)

h <iy sleep </Ri>

<loody>

## Selecting Element

yet element by Idi


Rekusn the Element as an

found).

batax document qet Elemenf zd


By (" d
Get ent BuclasNome:
Elenm

Retusns the Elemenks as on HTML Collectioh o8 empty


Collection (sf not ound).

gntaryget Elementa bycaxs Name ( clas);


-document.
>Get element Bytg Name
empy
Retusns he Elements as an HTML Collec tioh c8
Coll ecton Col not Bound).

yhtax document,qet ElementsB ag ame ( tg

Quesy S dectoss -
Allo us to se any
ang cSS del ectos.

document. quesy Selectss ('P');


bselecta Rtast P dement.
> documen. quesySelecos ('*myzdy;
selecta (isst clemenf w, 1d = myId.
cto
doument. quesyS ele C'. mgclaw);
secta Risst element wth clas ry clau.
docum ent queydeectos All ("py;
P elemeht.
Gselects al
# USiNG oepeoties &Mehody :
:
Innex Tent
text Contained in anode.
aShous dhe Visible
Text Content :
u text.
Shous al he
Innes HTM;
Shouus the full 1as kub

Manipulating Aitsibutes :
*
Objqet Atsibute (at) Getess
Obi. set Atoibute ats, Va)
J stexs
Se

#Monipuloting Stye*
UsING classliat

Fypfax: obf clasalist

clasalst. add)>Add neu classes


[Link] ()>TO 3emoVe cae
Classist. ContainuC)6 checlk cas enista
Classlist. tooqle ) To tbqqle betuech odd

GemoVe.
Nagatioa

asent Element
Childsen
Pevious element sding/next element Sbling

div favent

hie
child
cid
sibling

# Adding Elenents :

Oyntax [Link] Element l'p)

append child (element) Coeate heeu element /stihg


ng
append (element) add in eisti element in last

fseloerd (element) add 'in ewsting element in dtoting

>drsest Adacent (uhese, clement)


Pbeloe beg in
bagter bgin
belose end
alter end
tt Kemoving Elements :

SemoVe Child Celement)> act as apper child


semove (element) act as abberd,

# DOM Eventa i
Events ase Siqnals dhat Some hing has Dccu sed.
(uses dnput /actions).

Dndick (uhen an clement ts cicked)


>Onmouseente (uhen mouse cntes ah element)

#
Event LisTENER

Acd Eveent istenes


Colllback)
clement. add Event listenes (event,
Sntax i

Sxarple > t-tEtenttfenes (eien" Keyboard key

[Link] ustenes C cick fanctioh )f


Example
Cons ole. loq L"butoh ciceed );
33;

Note - Event lstenes d


in eaoh and evcsy clemet

eqi button ydfv, pbagoaph, span


Liatenexs -
tt This in Event

When Hhis? k LLsed in aback e even t hardlex


Call
, it eless to dhat odomedhing.
% domehing
Coll back)
cbf-> event listener (event,
appiid on this
Co)
Evert -
Keyborsd

Event

Code Key
Space
'Space'
KeyA

Semicolon'

fosm Event
# also CoGate EVent listenes ox fosm

g let fosm= document. quesydelecles "foara');


kosm. cdd EVentlstenex ("submit, function Ceventf
event. peventdelaut (0;
alest (fom Subuttedj Ling this ue
3); d
Cont gedisect to
g'ven ol o3 Action
Extsacing foorm Data
#
HTML)

<body> on"s
<foam action =a"acti
="uses" tube- "text" id="ses"
Kinput blacehodey id-"pans
- " Pass" type "paslosd"
<input þlacehddes
(buton Reqistes /button
<

</{osm
</body
Jav as cipt )
[Link] C"fosm');
let foom Runci on (even) f
foom iaddEvent usten
es ('Suomit',
event:poeventDelauit l0;
es 2 [Link] ('# uder);
et
let pas documert. queySelecfox ("pas);
Console. lq (useolaue);
Console. log [Link]); -
det to
alest 'Hi sfwes. Valuet, Yous baxosc ls
-{ paw. Value;
#Moge Events -
change event:
e an
change event DcuSs uhen dhe Vaue
Ihe
element has beeh changed.
elem ent
Only DS KS On <input>, <textasea), (Sdect)

Examle
let uses - document. quesy Selectts (*#uses ";
useo- cddEventllstene ('change, Bunction U{
evert. pscvent Dlault O; d
Console. log (" inbut dang ");
Console. log (inal Value- "y his alue);

Thput event :
dhe Value on <infout,
Ihe dnout event uhen
Kises

<select> <textatseas element has been changed.


Exam ple
uses - document. quesy Selectox ("#USEBJ;
let
("input", kun ction w
Uses. addEventlstenes
Console log (" inbut evert); .
Console .log "iral alue'ydhis Naluel;

33
# Event Bubbing

HTML}
<body)
<div)
<ul)
<li>one</N)
<11)bo </N)
<AS thoe e <IAi>

<wdiv)
<Ibody
Tava Scoipt) ("div );
= document. quesydelectox
let div document- quesy delecto( "ut") ;
let l= = ent. quesy delecfoA (');
let li olbum unctioh U
EventUstenes (" cick',
div. cdd
.log C" div uas dicked);
Console
3);
('dlick", kunctioh o{
ul. add Eventustoe
was cickesd");
Console loq (" cl
3)3
Us
.oddEvent stene l"clic, functioh
);
Console. loq (s" was clcked
3);
.J ue cicked on dív Jhen output as is

lv was click ed"


oh l dhen ouput is
•d
e cicked
al
ca
was
ccked
div ccked'
Jf cue clic ked on then output is
Qi was cicked

cv as clicked
Bubblina
* dhis ahove pheno menoh Called EVent
os psevent Event Bcbblng
top
>6 qatioh.
Psopo
liatenes ("cdick", funcion (eventb
[Link]
event. stpPaopogation U;
Console lg ("l uas cicked');
3)
# TS Call Stack :
Dut
stack: Last dn (iost
stack
g tunction Ohe C)
i

Runction tuo (1
detusn One () + One ();

kunction thsee ){
let an=tuo ()
+
one c)
.
| Console Log (ans;

thsee C;

#Bseak pointa :
use Bocak point to debug dhe Code by
We dhe evegy ingle step of Code.
Visualigjng
we dousce
ue have to
>tos acces dhe Boakpoint
on.
in dnspect opti
to
:
t+ TS is Single Thoeaded
Means they
Java Scoipt is a
Single Jhseaded.
OT< at a ame
multiple
ase not able to do at a tine.
[Link] ongy do dingle uOsk
Output
TavaScsipt Code
Set Timeout (fun ctioh U { > hello
eg
Console. log ('apna oll e")j )apna ollge
->Del ta
3, 200 o);
Set Timeout (function () 4

Console:log C" Deita);


I, 2000) ;
Console. log ("hell o..");
d

Nou, hese 4ou dhing Col Is is dimgle dhseade


at a
"apna ege" ond " pelta'
hou they osint
Same time. was Dus Booues,
Mystesy behind dis
So dhe multi dhoeaded dhey
Becaue ous boouses is dame time
osk at
ase Gpable to do mutiple

ava
Scotpt Bsouseo
Time Dut
(ctt)

Scseen
Timeaut

stack oßte Complete


Timeout Booseo
Point it on en.
:
# Callback Hell
aßtes evey One decond.
g: change dhe Colos e tert
= docum ent.
quuesy delecos C"hi");
hi Colcx chonge) {
function dhangeolos (cclos, delayy next
Settimeout ( ) => {
Style. colos Colos;
hi.(neztcolox change) nextColcxchange j
i
3, delay)i
§
Change Colo ("sed", 4000, Q=s Callback&
çhongecolos ('osonge "; jo00, nesting
so00, ) >{
chongecolos ('gseen',
C"ydtaw'y so00, ->{
or
change colos
("blue ", 1coo); Callback hell
Chanqelolo

3);
);

sep desents dhe cvehtual


The poomise obet an cyadhðonos opeatioh
Completion(os kailuse)
Besutting Value.
and its
Poomises

Resolve Re(ect
(Suc cesa) (toilue)
q
hnction Savetodb (dala) { =>
neu pöonis e ( (Gucc
eb, (oilube) f
setusn
let intspeed
u Math -llocs(Moh,.6ondonm()* lo) t1;
>
a( (intspecd 4) 4
Succes ("Succes; dato uas daved") ;
foiluse (" loilee: ueak (onne ction'):

3);

Savetodb ('apna Colge);

Poomise

Ragftled Reect
( then) (catch)
Save Tob8Psomise Capnalollee):
C9- let squest
sequest

Console logl'poomise sesclved");


3)
.
Console Iog C'psomise gected");
+
foomlse chainina:

Tnpsoved Vession
g: Save To DBPsornise ('apra Gleg e)
Hhen ( )>f
[Link](" Poomlse 4 sesolved');
setusn Save TopBPbomide ("hello uosld");
3)
.then ( 0>
Console .log ("Psomie 2 seSdve");

Cons ole
log ("Some psomise deected ');

Results E0DO8 in poomis as:


# ome data
Poomises ase Reyected and desolved with

Todbpsomise ("aþra ollege'y


3Save
- {
hen ((sesult)
Console. log ("sesult :", sesult ;
Console. log ("psomide 1 šesolved ");
setush Savetodbpoome ('hello uost d ;
3).
hen ( (sesuit) >
{
Console. loa ("sesut :y seult);
Console. log (" Psomise 2 sesolved");
3)
. Catch ((essoo) =>{
Console. og
, eoos);
(ueooot;
Consol e. log ("some promis
e sc(ected3
Cseates an Asgnc fun ction.

•Jt duas Setush a poo mis e.

Setusn "hello osld'; / setubn a psomis e

3
async o() > 13; I1| setyon aa psomiše
let heito

function

Nosmal Eos0

p:fufilled P: Rejeted
+
setusn

4+ Auait Keyuosd:
us es its Susourding asyne unetio
dhe eneoution
Undil dhe poomise is Wetled. (sesolved os Se(ected).

gi agn c {unction shouc) f


,
auait chargecolos C"violet^ 1oco);
auait chongecolor (" sed", s000)
awat cha nqe lolot ("blue', 10 06);
Quait chanqe (ol bis ( Coanqe ", sDoo);
setusn " do ne";

Note - Auait Keunti Dny


>Hardirg uitn Auoit
Reyections with :
Rondle Reyec tion
We we tay and atch method to

with Auait.

AP I -
#
Aplicatiton föpqpamning Intbsface.

AP
gequest
ueb
>API Kitcheh

ses waitex Sexve

Some Rondom
AI S.

/Cat-fact. rip(a/fact
* https:
cdome Random Cat Kacta,
Gsend
com /apilactivit.
* https:lluautd. bote dal.
actvity to do cuhe boed.
bsend an

doq. coo lapi/ bieeds /dmage/sandom.


* https: |
L Sends ute dog
kictuse
avascstpt Cbfect notation.

leash mose on www


[Link]

# Accessing TsoN Daa:


Accesing
at boam Teo A.

- MethDd
[Link] (data)
ssed_Bos
To passe a dtoing data into a Is obíect.

Method
TsoN. stoingiby Csson)
Lused Bos
To passe a gs aect data înto TsoN.

have to we aome tõcls tpo test Apz Dequests.


3e
ue
Tool 1) Hopp&c odh
Tool 2 Postman
avaScsipt and xML.
Asunconous

s (XML)
API asynchooro

# Htte Veshs i
Exomples: Get
Past
Delete

+ Stats
Exomples
Codes i
>2oo :
i
ok
: Not found
404
400 : Bod ReQuest
>S00 : Intesnal Sesre Eobo

Add Infomaton in URLs


-
# Quety $tsings
[Link]/Seasch ? 2,hany t boyte
httes: || Lvalue
& mas
Kg
J ?rame- Siadha
Value Value
kg
# Http Headexs
heodes, Value.
Htto Meadexs
Reguest Rasponse.

Requests -
# Dus Fisst API
using Fetoch
feteh (us)
eample i
let usl "https:/cat act:
ringafact";
fetoh lus1)

Console. lbg (ses;


oetusn ses; (abn)3

Console. log (data. fact);

Console. log ("Eas0, es;


fetch uith ayhc- Quoit
#
"https:
ust acat Bact. nlnja/fact";
let /|
aayne function qetfacts () 4
ty i Retch (uoD;
let ses auart
let data = Quait ses soh O3
[Link] (data. 6act);
Cotah fey
Console. log ("esiT -", e);
3

#
AXIDS:
to make HTTe sequ ests.
Cibxasy
Bunclton getacts 04
get (us;
let ses= auat axios
Console. log (oed;

Console. og ("Essob-", ;
3

o) sl
we have Beteh method
odo uy ue se axÍo8.
dtseom
eteh in eadoble
ase
Jhe Response
uue qet
fm
Taon dota
oo we have to pas
but not
a
cact
jn axi oub e get cise cty enact
that data but ue want.
oeponde uhich
=*Sending Headess utth AP1 sequesta :

Con /';
Const usl "https:// îconhozdad foke.

toyi {Accqpt: "Applicotion /gson


& 3:
Cond Conbig- {heades:
os
let sas Quait ai qet usl, onßig;
Console- log (ses. data);
S catch (ess) {
Console. loq (cso;

You might also like