Scribd
Upload
3 views21 pages

JavaScript Functions and DOM Handling

The document discusses user-defined functions in JavaScript, including how to create and pass functions as arguments, known as callback functions. It also covers exception handling, detailing the use of try, catch, and finally blocks to manage runtime errors. Additionally, the document explains the Document Object Model (DOM) and its methods for manipulating HTML elements.

Uploaded by

Anishka Akarapu
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
3 views21 pages

JavaScript Functions and DOM Handling

The document discusses user-defined functions in JavaScript, including how to create and pass functions as arguments, known as callback functions. It also covers exception handling, detailing the use of try, catch, and finally blocks to manage runtime errors. Additionally, the document explains the Document Object Model (DOM) and its methods for manipulating HTML elements.

Uploaded by

Anishka Akarapu
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

Pop out

Chat People

u n c t io n s
se r- D ef in ed Fu11ctio11s

F u n c ti o n B o d y
P ro g ra m

o n fu n c ti o n _ n a m e () {

n c ti o n s ta te m e n t;
/s ta
alert(
cons
doc

>
Cop yrig ht© 202 3 Acc
nu ma nt Khandagale, Mr ent ure . All righ ts rese
rved. 38
unal ~
i•o n s
J n g F u n c ti o n s a
s A rg u m e n ts

In JavaScripr,
* c a ll P rl m e ) (
th e same way
89 y o u
So, yo u ca n p as af
u n P rl m e ); u
a rg u m e n t to other
fu
The fu n c ti o n pass
ed a s
lm a g e 1 to a n o th e r fu n ct io
n is cal
"Callback" fu n c ti o
n
In th e g iv e n lm a g
e 1 "callPrime" is
W h ic h c a n g iv e th e C a ll b a c k fu n c ti
a c a ll to a fu n c ti o n on.
"funPrime".

Copyright @ 20 23 Ac
cenlUre. Al •
m an t Khandagale,
M ru na l ~

Q Search ______
2"/
_ _ _ _- - =
' -_ _ l;i eda
strate how us er -d efi ne fu c • n
work

• W rit e a pr og ra m in Jav . i • re Ca nd ida teD eta ils ()


an did at e de ta ils su ch as fir st am
e l~stN9me,, em ail ld, cit y fro m us
er and di
!l ~\\\\\\1 \l l\\U\\\ !
s in displayCandidateDetaiJs ·,r ·
• , . ame, emailld, ci ty ) function.

Copy right © 2023 Acce nture . All right


s reserved.
Jma nt Khandagale, Mrunal

■I
- - - - -') ~
Q Search :I ~ ~ 8 ■. ia
• D e m o n s tr a te h o
w u s e r- d e fi n e d fu n c
ti o n w o rk s
• W ri te a p ro g ra m in
J a v a S c ri p t to cr e a te
a fu n ct io n storeCandidat
c a n d id a te d e ta il s s
u c h a s fi rs tN a m e , la
st N a m e , e m a il Id , ci ty
from
d e ta il s in d is p la y C a n
. d id a te D e ta il s (f ir s tN a
m e , lastName, ernai\ld
. . , ci ty )

Copyright02023ACC8111
~

1mant Khandagafe, Mruna


l

■■
■ Q Search ... /
- ~ ~ - - - - -~~/
17
..
0 ~ •
•Sc rip t Exc ept ion Ha n

Exce ption s are also know n as Runti me Errors.

• To hand le the abno rmal exec ution of tbe code JavaS cript provi des excepti
block s:

• try - try block code is executed first '.mtmnu·mmi

• catch - it try throw s an exception then only the catch block will be executed.

• final ly - finally block will alway s be executed before control flow exits. It gives guara
ntee of
execution.

> • throw - throw state1nent throws the user defined exception. Copyright ® 2023 Accenture. All rights r

Hanuma nt Khandagale, Mrunal

c=====~~~-.-~~~~~~-~~~■
=-:d•· Q Search
.II Ja va Sc rip t Ex ce pti on Ha nd lin g
ceptio11 Ha11dli11g Bloc ks

--. .. finally

Stat eme nt;


try
stat eme nt; {
}
catc h(exce ptio n) exce ption
{
stat eme nt; h{ex cept
}
fina lly
{
stat eme nt; I I exe cuta ble cod e

> Copyrigh t © 2023 Accenture . All rights reserved. 4\

Hanum ant Khandagale, Mruna l


tion Ha11dli11g

• Dem ons trat e how exc ept ion han dlin g wor ks

• Wri te a pro gra m in Jav aSc ript to mis spe lled "ale rt" as "ad
ddle rt" to pro duc e a runtirn
err or and han dle tha t exc ept ion with the use
r def ine mes sag e.

> Cop,,rlght@ 207...1 Aocentu,o. All 1\ghl1 re1erved,


- 42
I lnnum ant Khandagale, Mrun al

Q Search
w ith DO M

ncls for Do cum ent Ob jec t Me del . It is a Jav aSc ript


clas s tha t def in
iec ts. It sup por ts pro per ties , me tho ds, eve nts .

. .ijt1
indow Obj ect • writ e("s trin g"); • onclickO
Doc um ent Obj ect • getElemerntByld() • onb\urO
·.
Form Object • get Ele men tBy Nam e() • onfocus{)
• onchange{)
• get Ele me ntB yTa gNa me ()
• oninput()
• get Ele me ntB yCl ass Nam e()
• on\oad()
• onm ous eov erl)
Copyri ght © 2023 Accenture. Al\ right& reseNed.

-·- +

Q Search :1t
---- ---- =__ .... ,,
.. 1

11 d a •
f>of)O Ul
0 8so ~
EB
t l
R

17 .5 W o rk in g w it h D O M
Docrnne11t Ob jec t Mo del Do cum ent Ob jec t Mo del

I. •• - I Win dow Obj ect

L , CV /1!111/

Doc ume nt Obj ect

•
tit le DOM Example ~/t itle >
hcL'?d <HT ML>
I
I

I
I
· bod y" <HEAD>
<BODY>
,hl,:, My He ade r </h l>
<di v id= "da ta" >
<p> Par agr aph Tag l </p > <TITLE>
<H1 > <div id=" data">
<p>
</d iv>
<p> Par agr aph Tag2 </p> TEXT:
</body> TEXT: My Hea der <p> T: Paragr
Tag2
13 htm l>

> TEXT: Para grap h


Tag1
rights reserved. 45
Hanumant Khandagale, Mrunal.

ti la
•• Q Search
t t \±) •••
V,ew
[Link], Mor

17 .5 Wo rki ng wit h DO M
Meth ods of Docu ment Obje ct

• write ("str ing") - disp lay mess age on docu men t wind ow.

• getE /eme ntBy ld() - It is used to read or edit an 1;:tTM ~elem ent.
Don1_M ethodDe mo.htn1 I >@ html
html>
,body>
<hl>
Hello User!!
~
_,
</hl>
6 I
, I
I
<p id="pa ral"> Test </p>
I

8 <scrip t>
9 docum ent .~riteln ("Exp lore DOM Methods! ! ! 11 );
10
11 I docum [Link] tElem entBy id("pa ral").i nnerH TML= "called [Link]
()";
1.
I </scri pt>
I

ight © 2023 Acee

~~-~:

m8fl~lk
1

. -~ . /5aa'aaga/e, 1Mrunal
' ~
17.5 Work ing with DOM
Metl1ods of Doct1111e1 1t Object

• write("s tring") - display messag e on docume nt window.

• getE/em entByld () - It is used to read or edit an HTML e\ement .


Dorn_ MethodDen,o .html >@ htn1I
html·
,body>
<- hl >
Hello User!!
</hl>
<p id="paral" > Test </p>

<script>
document. writeln("E xplore DOM Methods!!! ");

I
' ' '

.J. ·.1 document.g etElementB yid("paral ").innerHT ML="calle d document.g etElementB yld()";

I
;
J. ·-
.)

</script>
1 _·'
i~ </body>
15 </html>/

>
ight ® 20

• m l ~ fNJJJmd} J
-·~:· .. ·'
•..-;, ·•·-~· ·:~~~'-. '.
(
---\-,\~:F>f ::
.~:: ,. ,'

t7.5 Wo rkin g wit h DO M


' ' l ' " ' ' ' ' \If ll(H'11U ll'111 (lht(', I
I h speci ft~d name .
• $1CtEle111e11 t la, N. 11111 () - ,1: , GI 1111 w n cc1I I( •ot ion o I e lemen t~1 wi
, , , , , , ,: 1 1 1 , , , , 1\ r1 , , , , 11 , t ' 1l I1, , I 11 II• •I I1, lj I11 • I I1 1 I I
1

,•I lh11tt,,-",11 t•l•l l1•ll1•.111d •,


11
l\ppl1-1 111

I lh1ltl\)•1if 1,,111·,11,d -." 5ftlll1UIIW · 11il


11
111l 1

.. , 11~111t,... "1111,1i11, ,111•,111,h" -0110PJ.L1 1· ;,,t

- •• ' I • I I' C

.j
,;'"" I '"" h•n~C l~ck (!: )
tnont. aotl:lem entsByN nme( 1~~bil0 Brcu,ds "). ~~~~th;
11

• _lon e
,_(It doc:u__
lt1t data • 11
Lenuth of L15t is: "+_lonJ - -
II
\.. ~[Link]( doto); ----- ----
! \,e!>ns olo. loa(da to);
~: •

,/scrif) t.,
</body. ,
<llttml .'

-- ·_,ti,
- - --- -

Q Sea,ch m do • •'
tObject
-----vName() - Output :

(i) FIie C:/Users/[Link]/Documents/Javascript%20Demo/[Link]

This page says


• Apple Length of List is: 3

Samsung

OneP1us

Check List Length /

> Copyright© 2023 Accenture. All ri

Hanumant Khandagale, Mrunaf

•• ■
Q Search
~ - 11 d ti
Demo
1-7.5 Working with DOM (Demo of Document Object lwent)

~'1__'1\; EVt.'[Link] "> @ htrnl >@ body >@ script > G) handleChangeTex t
DOCTYPE html
l1t,n l
hody
,hl'JavaScri pt HTML Events</hl>
,h2'The onclick Attribute</h2 >

2
<h ()_(l<:...~ick="this • innerHTML= 'Welcome to Event Handling! ! '" >Click on this to view Msg !

<h 2 onclick="han dleChangeT ext(this)">Cl ick on this to view details!~ t"L

11
<div onmouseover ="handleMou seOver(this)" onmouseout=" handleMouseO ut( this)"
12
style= "background -color: 0#D94A38; width: 120px; height: 20px; padding: 40px;,.
13 Test Here
14 </div>
15
16 <script>
17 function handleChang eText(id) 00
18 / id. innerHTML = "onclick() event handling of JavaScript! 1t•;
19 {jj
20

Copyright © 2023 Accernur

-.-.,.-

.
__ 1

.• ..,, .
•V·G-·
, .,.,,, .
nant Kijtan~agale :-:- -, ~
-
. ~

ii Q Search
ii■
Demo
17.5 Working with DOM (Demo of Document Object Fvent)

C11...)f\ 1 EVt:"'[Link]/ >@ htn,I >@ body >@ script > Ci) handleChangeText
.OOCTYPE html'
· html,
,body'
,hl'JavaScript HTML Events</hl>
~h2~The onclick Attribute</h2>

<h2 [Link]="[Link] ML='Welcome to Event Handling!!'">Click on this to view Msg\

2
<h onclick="handleCha ngeText(this) ">Click on this to view details!! .
0
1 h2
10
11
<div onmouseover="handl eMouseOver(this)" onmouseout="handleM ouseOut(this)"
12 style="background- color:0#D94A38;wi dth:120px;height:20 px;padding:40px;".
13 Test Here
14 </div>
15
16 <script>
17 function handleChangeText( id) ~
18 ~ [Link]-HTML = "onclick() event handling of JavaScript! ! t•;
19
20
Copy1ight@ 2023 Accentu,e. A\\ nghts

•• ~ - -..~ . I

'
?

•'
fMilMif1 - 1,1

ad~
0 082 14 g) 0 8so
pp
EB
Re V14!W Notes

D em o
17.5 Worki11g witl 1 DO M (De1no of Docu1ne11t Obj
ect EveI1t)

, ' DOM _Eve nts.h tml >@ html >@ body >@ scrip t
.;htm l>
<bod y>
_:_1 <sc ript >

Micros oft PowerPoint


:,1 fun ctio n han dleM ouse Ove r(o
22 obj. inne rHT ML = "Mouse Want to keep your ink annotations?

23 }
24
L ~eep J Discard
~
25 fun ctio n han dleM ous eOu t(ob j) {
26 obj . inne rHT ML = "Te st Her e"
27 }
28 </s crip t>
29
30 </b ody >
31 </h tml >
~~1. . .khand egate/D OcUm ents/J5
"20C~ S/dom 3 html

pt HT M L Ev en ts
e onc lick Att rib ute
Welcoffle to Ev ent Ha ndl ing !!

onc lick O eve nt han dli ng of Jav aSc rip t!!

II Q Search

Hanumant Khandagale, Mrunal

31°
t: Search •
•
I I I
A,'
., I
0 08:2909 0 gso Q EB ffi ...
p

f-ile I d,t Sfllcction •••


f> JS Codes
m Q rn o~ --
d,)rn.) htrnl ~ > [Link] X

itr:f:J{, ' ,k,,11 ~ ht,11/ >@ htrnl >@ body >@ h2


.
,.
; ' -·:
11 t ml
body---
,hl'-JavaScript HTML Events</hl>
<h2>The onclick Attribute</h2>

<h2 onclick="[Link] ML='Welcome to Event Handling! t '",,Click on this to view Ms


<h2 onclick="handleCha ngeText(this)">Clic k on this to view det~ls!! n2,
8
9 <div onmouseover="handl eMouseOver(this)" onmouseout="handleM ouseOut(this)"
10 style=''background -color: 0#D94A38; width: 120px; height: 20px; padding :40px; •• /
11 Test Here
12 </div>
13
14 <script>
15 function handleChangeText(id) {
16 [Link] = "onclick() event handling of JavaScript!!";
17
NO NEW NOTIFICATIONS
18

UTF-8 CRLF {~ HTML 'I;

,..
•• Q

-
Search

-+·--,
Ln 1, Col 1 0 characters 100% Windows (CRlf) Ulf-8

- ~~ ..

■ Q Search
■■
0 08 29.11 @ ~j Sso G EB ffi ...
p ,, t h p V N Ap M Comen~

Fife Edit Selection ,P JS Codes m g rn D~


.·'
~?.:· •• ·.
...- • .r • •
, ' < k,,11, 1 htrnl <> [Link] X
't\ti1u . do,n3.htn1/ >@ ht,n/ >@ body >@ h2
·<i;

1vaScript HTML Events</hl >


1e onclick Attribute< /h2>

6 1click="thi [Link] L='Welcom e to Event Handling!! '">Click on ~his to view Msg\


7 1click="ha ndleChang eText(this )">Click on this to view detailsll</ h2:--

I
•
Ii ..:, . ,
ffio 8
9 ,nmouseov er="handle Mouse0ve r(this)" onmouseou t="handleM ouse0ut(th is)"
·3

10 ="backgro und-color: O#D94A3 8;width:12 0px;height :20px;padd ing:40px;" >


11 lere
12
13
14
15
16
17
NO NEW NOTIFICATIONS
18
1 () ___ ,r.,.r_+-3-""~-h.!".~d;'!'-1~.~-M~~.:,•rl"\f'\1,l"\""'l""'.;' r ,_..... ---... ..-
,,

3-9 master* ,q;, ,® 0 & 0 ·.··~~l:-'.Q~lql~~.. l!til 6, Col g.21(1ts~·i'ected) Spaces: 4 U1F-8 CRLF { ~ \-\1Ml
..
- • -------·:~--~~~ ~~~
~~!.-":J:_:£.::.. - ..·

B Q Search
~~~-- Ln 1, Col 1 0 characters 100% Windows (CRLF)

31°
■
■■
Q Search fill
•
md • i&,o
- - a9
...
StulpH Atteng1
y y

Plregra~
Drawing

I '
17.6 HT ML /DO M Even
I
I
~---------~
................ ...._ .......... -.........1....._.,.. • -
r Pro ble m Sta tem ent
i
• .....

,
····--·-· ~····" ••••••••..:.......... .

. ,
~ - -
! a,;, 1
j
a
!
i
'

im Ja,va$e
.
I
;

.i d apfi)ly the H! .
.!
i
0• I\ I
! ! II I

1 ' '
' ,I, '
111

In

You might also like