Syllabus
Introduction to JavaScrt-JvaSept DOM Model Dato and Objets-Roguar Expressins- Exception
Handing-Vabdaton-Builtinobjects-Event Handing, DHTML with JavaScit- JSON introduction ~ Sytax ~ Function
Files - Http Request SQL,
JavaScript:
2a
‘Advantages and Disadvantages of Client Side Seriptng...
2.1.3 _Diflerences between Client Side aid Server Side Scripting Language.
2.1.4 Using JavaScript in an HTML Document
2.45 JavaScript Example
22 Programming Fundamentals of JavaScret: Vaables, Operators.
224 Variables,
222 Operators..
23° Control Flow Statement. nnn
234 Conditional Statements.
2.3.2 Loop Statements...
24
25
2.5.1 Function Defion ..
25.2 Defining Function Arguments...
"2.5.3 ~ Defining a Retum Statement.
26 JavaScrist Objects.
2.64 Creating Objects in JavaScr
262
263°
264 27
28
29
| aber
2.1} Crcepten Hening in JavaScript
2.66 Numbor Object.
287 Anay Object...
Browser Objects - Window, Navigator, History, Location, Document.
2.7.1 Window Object.
2.7.2 Navigator Object.
27.3 History Object.
2.7.4 Location Object..
Document Object Model
281 DOMLevels
2.82 Properties and Methods of Document Object...
2.8.3 Manipulation using DOM.
Events Handling.
214
2.13.1 Syntax Rules.
2.192 JSON Data Types.
2.133 JSON Object.
2.134 JSON Function Files
2.135 JSON Http Request...
2.138 “JSON SQL
tiple Choles Questions
Chapter Ends...
(New Syllabus wef academic year 21-22) (MS-67)
jech-Neo Publications...A SACHIN SHAH Venture JavaScript is. light-weight object-oriented programming
language which is used by several websites for scripting the
webpages,
'* TavaScript was developed by Mr. Brendan Bich in 1995 who
‘was working in Netscape,
© JavaScript is not a compiled language, but it is a translated
language.
‘* The JavaScript Translator (embedded in the browser) is
responsible for translating the JavaScript code for the web
browser,
© Iis an interpreted, fll fledged programming language that
enables dynamic iterctvity on websites when applied tan
HTML document.
+ SuvaSeript belps to make our webpage more lively and
imeractve, JavaScript i widely wed in mobile application
evelopment as well asin game development.
+ JavaScript was initially called as LiveScript and later on the
‘ame is changed to JavaScript.
+ With JavaScript, users can build modem web application’ to
interact directly withot reloading the page every tine. Te
‘traditional website uses js to provide several forms of
inc asin,
© Features of JavaScript
‘The features of JaVaSctipt atts follows:
1. ‘All'popular web browsers support JavaScript as they provide
bailt-in execution environments.
‘2 SavaScript follows the syntax and structure of the C
programming language. Thus, it isa structured programming
language.
3, JavaScript is a weakly typed language, where certain types
are implicitly cast (depending on the operation),
4. IavaScript is an object-oriented programsiing. language that
uses prototypes rather than using classes fr inheritance,
Itis a light-weighted and interpreted language.
6, Ihisacaso-densitive language: *
JavaScript is supportable in several operating systems
including Windows, mscOS, etc,
Itprovides good contro! fo the users over the web browses
(Front End Development) ..Page no. (2-8)
‘ra Applications of JavaSerint
ayaSctip s used to create Interactive websites. It's mainly .
| Wed for:
"+ Clentsdevaitation,
+ Dynamie drop-down menus,
Displaying date and ine,
+ Displaying popup windows and dialog boxe ike an eet
dialog box, oni dialog box an prompt sg bon),
Displaying eloes, te.
24st Characteristles or Advantages of
JavaScript
si DOLLA OAS LELEL ES
fee Gpanceeisiesepe 2!
al *
© JavaScript is a lightweight, interpreted client-side scripting
language: #
‘© Designed for developing network-based applications
‘© avaScriptis complementary to and integrated with HTML.
«enti
‘e ) cThis'user input is-validated before sending the page to the
‘server. This minimizes the server traffic, which tends to fewer
Toads on the server.
oe ene ee ero ae ome
been forgoteato eater. .
© Interactive interfaces.can be ‘created, which can give
sopie bleo ees Ke mean bt
activities.
+ Tai cine danse dg ri
and sliders to provide a feel of rich interface to the users.
24.2 Advantages and Disadvantages of
Cent Side Scripting ik
Me
Lj
© Advantages
1 Iumeiate spon toa wie’ actions, whch ensbles more
wes patie
2, No need to go tothe setver hence, execution i fast.
3 Improve the usability of we sits for users whote browsers
suppor scrips.
(New Syllabus w.e.f academic year 21-22) (MS-67)
(Bltech-neo Publications.:A SACHIN SHAH Venture kL
(Front End Dovelopment)...Page no. (2-4)
{ntomet Programming (MU - Sem 5 - Comp.)
4. Dev h - | te Famers
peer r ce ‘control over the look and behaviour of server Side Scripting
Language!
5. Possible to subsite by HTML if user's browsers do not i
support srg Tock | User ean block the | User cannot lok the
16 Are teuuable sad chttnable from vacoos (ypes of fe Cent side seriptng | Server side scripting
oercan guage langue
" Disadvantages Rese | Response from
clieaeside srt 8
1. Seips are not supported by all of the browser; hence errs nik since te serps | slow sine he srs
might occur ino altematives have been provided re processed.on the | are processed on the
2. There is need of more quality assurance testing as different eal comp revi comee
browsers and browser versions suppor scrips differently, Examples | JavaScript, VBScript | PHP, JSP, ASP,
3. May need mor time and effort for development ifthe scrips ce LEE pb
‘are not already available through other resources. =
4. Sometimes, the web widget looks like cont ,
‘ re astandard contol but | 23. 2.4.4" Using JavaScript in an HTML
their behaviour may be different or vice-versa, which may
lead to usability problems.
WS 2.1.3 Differences between Client Side and
Server Side Scripting Language
{GQ What ate Gierences between
ats aie
“The server side script
is executed by the
‘The client side script
is executed by web
‘browser which is
Jocated at the user's
computer.
Web Server. that
outputs the page
‘which is to be sent to
the browser.
‘Server side scripting
Tanguage can connect
and access (0 the
databases which is
located on the web
server.
‘Server side scripting
Tanguage has acess to
the filesystem which
is Iscated on the web
server.
Cleat side scripting
language cannot
connect tothe
. databases which is
located of the web
serve
‘Glent side scripting
language cannot have
access to the. file
system which is
located on the web
sere
Gliet. side scripting
language can access
the files and settings
that are local at the
user's computer.
File System
Server side scripting
language cannot
access the stings that
belong to web server,
‘Access to
Setting
(New Syllabus wef academic year: 21-2) (M5-67)
Document
+ The code (cit of JavaScript is writen in the sript opening
and closing HTML tags in a web page
Usual, the
ea se
® Calling a function on click event of a button
ton tcl the function
(New Syllabus wef academic year 21-22) (MS-67)
{Front End Dovelopment...Paga no. (2-18)
Sons a a
j
SMounil> ae
5)
%® 25.2 Defining Function Arguments
While defining a foretion, we can declare variables in the
‘header statement of the function. These variables are known as
‘Parameters or formal arguments. When this foction ges called,
we can pass values for these variables. These values are known as
arguments or actual arguments.
—varsum =a +b; 2
-
a Tech-Neo Publications...A SACHIN SHAH Venture cikthe lowing baton to mane
a a
YW LSI Defining a Return Statement
TGQ. Wes program which wil cept to numbers #1
{2 arguments and retustheisummation.
vaSeript">
varsum = a+b;
‘In JavaSerpt fonction we can have rtum statement which is
optional. This helps to etum a value from a function. This
statement is written atthe last in a function.
‘The returned value goes tothe location wher the fonction is
(Front End Developrent)....Page 10- (2-19)
yas) savascnir onrecrs
VQ. That are Javascript objec Ut the important bu
ra in object How can you wile your own objec
cown state and
‘An object is nothing but an catty having
‘behaviour (properties and methoxs).
For example : A flower is an object having properties lke
colo, fragrance ete. Other exams of objets ae ca, PE™ Module
bike, char glass, keyboard, monitorete.
JavaScript is an objec-rened language. Everything in
JavaScript is considered as an object.
Examples of object
Flowing are some ofthe examples of objects in JavaScript.
(Booleans i) Numbers
(ii) Stings (iv) Dates
(W) Regularexpressions (vi) Amays
(vii) Funetions
‘Wecan create our own user defined objets in JavaScript
JavaScript is primarily a template-baed scripting language
rather than a class-based language, Hence, we directly create
the object witht class,
YS. 2.6.1 Creating Objects in JavaScript
A. JavaSeript Object by Object Literal
= Stax
eel ise mt of eng si ject Literal:
(New Syllabus wees academic year 21-22) (M5-67)
[etech-teo Publications ASACHIN SHAH Venture Intomet Programming (MU- Sem 5- Com.)
ncript language "JvaSetipt”>
‘employee = {id:101,name:” Prajohia Lonkar™salnry:t000)
document wtite(employeeid-+""+employce:names"."
‘employee salary):
(Front End Developmeni)..Page no (2-20)
Bloom
ars
CG carmnbentntegt ripeparranod
18-Chetana Murvskar-800000
leript>
SIloot>
, 3. My usingan object constructor .
‘sfhuml> © Mere, we have to create parameterized fanctic ~
Orpet eywod is ed 1 asin cach argent sale inthe cue
- object.
2 ~ eens | f Tertibewon estos cont bes
29-Prajakta Lonkar-40000 © Program using “this” keyword
2 By eating instance of object ‘
© symeax Objects
<hitle>
Following isthe syntax of erating instanceof object: Beak
‘var objectname=new Object(); sae
Here, new keyword is used to create objet. Se a.
© program of creating the instance of object | <script langusgo="JavaSerip” >
eee function student(dsnameynatks)
<head> t i
feite>s thissname=sname;
Objects this.marks=marks;
<hitle> Ve
efhead> = new student(20,"Gaur
t document rite(sid-+” = "+s-sname+” ~"+smatks};
‘<script language="JeveSeript">
‘yar employee=new Object();
‘employe salary = 00000; a
4 Lwrite(employee.id-+”-"-+employeename+”-*,
(New Syllabus wef academic year 21-22) (MS-67)
</script>
</font>
‘<hbody>
‘shui
Output
2.6.2 String Object
‘The JavaScript Sting objec isa global object hat is used to
store strings. A string is a sequence of lentes, numbers, special
characters and arithmetic values or combination fall,
Brech-neo Publications... SACHIN SHAH Venture ntemet Programming (MU - Sem § - Comp.)
ea Syntax
(plead = Hew Singtel:
“The String parameters series of characters that as been properly encoded
@ Sering Methods
Here isa list ofthe methods available in String object along with their description.
(Front End Development)..Page no. (2-21)
Sr.No. }) Method Desetlption :
1._| charary Reums the character atthe specified index. Module
2._| eharCodeato Retums the Unicode ofthe characte atthe specified index. ry
(io cr loosen we
4._| enaswino ‘Checks whethera sing ends wit a specified substring
5. | fromCharCodeO | Converts Unicode valves to characters
[5 [sae | etree el ig
7._| indexof0 Ret the index of the fst occurence ofthe specified value in a string.
8,_| tastndexo1) Returns the index of te last cccurrence ofthe specified value in asing.
9. | localComparet) | Compares two strings inthe current locale
10. | matcho Matches a string again regular expression and retums an array of all matches.
11, | repeat) Reruns a new string which contain the specified numberof copies ofthe orginal suing.
12. | replace, Replaces the occurences ofa string of paltem inside a string with another sting and return al new
string without modifying the original string,
13,_| search Searches a sting aginst regular expression, and returns the index of the frst match
14,_| sticed Extracts a portion of suing and returns its anew sting,
|| 15. | sptito Splits a string into an aay of substrings.
16, _| statswitho Checks whether sting begins with specified substring.
17._| substi) Extracts the part of sing between the stat index anda number of characters aftr.
[18._| substring Extracts the part of asring between the start and end indexes,
19. | toLocaleLowerCase() | Converts a string to lowercase letters, according to host machine's current locale,
[20 [rarecsevepercaed | Comers stig pees eters scog os mtn’ curentoe
21. | toLowercaseq _| Converts a string to loverease letters.
22._| Sting) Retums a string represeating the specified object.
! 23,_| toUppercased Convers astingtoupperas eters.
| 24. | timo Removes whitespace from both ends of a string.
| [25.__| vatueoro Returns the primitive value of a String object.
(New Syllabus w.e.f academic year 21-22) (MS-67)
[eal tech-Neo Publications..A SACHIN SHAH Venture latemet| (4U- Som 5
26.3 RegExp Object
+ RepPep object ase to vide the pattern of characters
© Rephp define methods hat owe repur expresciont ty
Terform perwerfl patie matching Md earch and place
Fonction on tert
+ Repu expressions canbe defined by esing following ways
© Using Reg) Constr: var RepulaEpresson «
ew RepEnp pers, ag”);
© Using Literal va Reglatxpression = pate Mag
© Pane — A String tht specifies the pater of the
repular expression or another regular expression
(© Flag - An optional string containing any of the "
and “in” atrbues tht specify global, eaveinsensitive
and rultiple matches respectively.
‘ Properties of RegExp object
1. Constructor « Returns the fonction that ected the RepEtp
object
2 Global - Checks whether the "e* modifier is set
nnoreCase - Checks whether the “i” modifier is set
any tring ercloned within cho ted co
matches any string containing ap folie by
zero oe more instance ofthe enrence by
—E—E~_E
% 2.6.4 Math Object
The Math object is sed to perform simple snd complet
arithmetic operations
The Math object provides 4 tumber of properties and
methods to work with number vale
$ The Math object does not have any conctructors Al f its
‘methods and properties are static: that i, they are member
functions of the Math object self. There is no way eeate
‘an instance ofthe Math object.
© Syntax
var piyal = Math Pt;
l= Mat
‘'F Math Methods
(30);
Following are some important methods of Math Object
4. lastndex + Specifies the index at which to start the next | | Method. Dest
a abs0__| Returns the absolute value of a number.
‘S. mutline - Checks whether the “m" modifiers set ceil). | Reruns the smallest iteger greater than o equal ©
6 source - Returns the text ofthe RegExp pattem. number.
"@ Methods of RegExp object exp0 Retums EN, where N is the argument, and E is
Euler's constant, the base of the natural logaritim,
1. exec()- Tests fora match in a sting. Returns the first match.
oor cts the largest integer less than or equal to
2 tet) Tests fora match in asin. Rens tue false. 1) | Os onl
3. toString - Returns the string value of the regular
, * TT gd | Reruns the natura foparhm (base Eo unter
expression.
4. tSource() - Returns an object literal representing the || max} Returns the largest of ero or more number.
specified object. mind __| Returns the smallest of zero or more numbers.
Foie examples explsie ma sboet msthing SUA Pow) | Returns base to the exponent power, that is, base
Expression | Description exponent. .
{24-2} _| It matches any string not containing any of the random() |. Returns a pseudo-random number between 0 and I
characters ranging from a through and A through
Zz round) | Returns the value of a number rounded to the
a integer,
PP ‘tmatches any string containing p followed by any nearest integer.
character, in tum followed by anoterp sqrt] Returns the square rot ofa number.
‘A(2}$ | Stmatches any string containing exactly two
characters.
(New Syllabus w.e.f academic year 21-22) (M5-67)
Tech-Neo Publications..A SACHIN SHAH Venture Intemot Programming (MU Som 5 - Comp.) {Front End Dovelopment)..Paga.na. (2-23)
8] properties of Number object
WLS Date Object
At times when wser nod to aces the current date and tine
an also past and future date and times, Java provides
support for working with dates and tine throug the Date
object.
4 The Date object provides a spten-independent station of
dates and times,
Date object cane created as: var today = new Dale
4 Dates may be constructed from a year, month, dy ofthe
rmocth, hour, minute, and second, and those six component,
aswell asthe day ofthe week, may be extracted fom ade.
+ Dates may also be compared and converted to #rexdsble
string form, A Date is represented to a precision of one
rillisecond.
© Properties of Date object
1. Constructor - Returns the function that crested the Date
object.
2. Prototype - Add properties and methods to an objet
© Methods of Date object
1, Date()- Retums today's date and time
2. getDateQ) - Retums the day of the month forthe spcitid
due
getDay()- Returns the day ofthe week forthe specified ate
getFull¥ear() -Retuns the yer of the specified te
gelHfours0 - Returns the hour inthe specified da acceding
to local time.
getMilliseconds() - Return the milliseconds inthe specified
ate according to local ime
6. getMinuteO, getMonthd, geTimed, getTimeronetet0,
setDate), setullYearQ, setfloursQ,_setNllstcondsQ,
setMinutes), setMonth0,setSeconds()se(Time) ar some
ofthe methods used in Date objet
2.6.6 Number Object
The Number object represents aumercal dat, ier integers
floating post umbers.
‘+ ANumber objets are created using the number coastuctor
‘yar num =new number(value;
a
4
2)
Constructor « Returns the funtion that created the Number
objet.
[MAX VALUE - Returns maximum numerical value posible
In avert
[MIN VALUE - Returns minimum numerical value posible
In JavaScript
NEGATIVE INFINITY - Represent he we of neative oq)
infty. ry
[POSKTIVE INFINITY - Represent the value of infinity.
Prototype - Add properties and methods oan object
Methods of Number object
toBxponentlal) = Convens a number ito exponential
notation
AoFixed) - Formats a number with a specific number of
gis tote ight ofthe decimal
toLecalString() ~ Retuns a string vabe veson of the
cent number in forat that may vary according t0 a
browsers locale seings.
toPrecsion0 = Defies how many tou digs to display of
umber.
{oStrng() - Returns the sting representation ofthe umber’s
vale.
‘ale Of) -Retusthe number vale.
2.6.7 Array Object
“Motiple values are stored ina single able wig the Array
object.
In avaSeip an ary can ol feet ps of datatypes,
‘which implies tat nara can have a stag a number or an
objctina ingle slot
‘An Aa abject can be crested by using flowing ways:
Using the Array Constructor
‘To rele empty aay when don't know the exact number of
elements tobe inserted in an aay
(New Syllabus w.ef academic year 21-22) (MS-67)
[drech-ieo Publications .A SACHIN SHAH Venture Internet Programming (MU - Sem 5 - Comp)
(Front End Development..Page no. (2-24)
‘Tocreatean ara ih given lees r= ara
Property” Z Description “|
jp |] ase returns a boolean valu that specifies wheter | ~
Using the Array Literal Notation: ee _A window has been clased of not
‘To cresteemply array Default Status | specifies the default message that fas to be
Farahjaame = : appeared in the statusbar of a window
“Tocrete marry when clement ar von document __| specifies a document objet nthe window
Vat arrayname =[“element nreeneh 2 AL Aretement hs || frames specifies an array of all the frames in the
an); : current window
© properties of the Array object bistory specifies ahistry object forthe window
an fa window's
1. Length Retums the number of elements in the ara. Inver teght specifies the inner tele o
° 7 eae contentarea
2 Constructor « Returns the function that created the Array oe
on Tmnee Width | specifies the inner wish of window's coment
area
3, Proltype- Add properties and methods to an obec. en
a eogth species the umber of ras conned
EF Methods of the Array object es
1. reverse) - Reverses the array elements peifes a location object forthe window
2. coment) -Joins two or more mays ' Methods of window object
3. sort) -Sorthe elements of an ray ‘The important methods of window object at a fOUOS
4. push0 - Appends one or more elements tthe end ofan array’ ||" sfethods Reon
5. pop()-Removes and returns the last element alert) displays the alert box containing message with
6. shift) -Removes and returns the ist element ok button.
7. unshitQ, join), indexO10, lastindexOf0, slcestartindex, enfin) | displays the confirm dialog box containing
cendindes) are some ofthe methods used in Amay object. message with ok and cancel button.
romp) _| displays a dialog box to get input from the wer
Droz. BROWSER OBJECTS - WINDOW, jemi
NAVIGATOR, HISTORY, LOCATION, | | :72%0___| ovens the nev wink
i close) closes the current window.
seéTimeout() | performs action after specified time like calling
Following are some important browser objects provided by function, evaluating expressions etc.
JavaScript:
% 2.7.2 Navigator Object
Ww LIA Window Object ro
+ The JavaScript navigator object is used for browser
‘The window object represents a window in browser, An
object of window is created automatically bythe browser.
‘e_ JavaScript Window Object Properties
detection, It can be used to get browser information such ss
appName, appCodeName, userAgent etc.
‘The navigator object is the window property, so it can be
accessed by:
(New Syllabus we. academic year 21-22) (MS-67)
[Blrech-Neo Publstions. SACHIN SHAH Vertue (Front End Development)...Page ro. (2-25)
~ jnigmat Programming (MU - Som § - Comp.)
# JavaScript Navigator Object Properties Output
Property Descripiton JavaScript Navigator Object
sppsdename specifeste codename oft browet |) aa,
spare specifies the name of the browser ris Siena linn 710, a Alea 7250300. the
Saipan ao Sa
depversion specifies the version ofthe browser Zaeweues
being used So See sqrt 0 ttt Apes
Hobe asa Gee oF
cookicenabled specifies whether the cookies are somaaden Volt
«enabled or notin the browser
platform contains sting indicating the 2.7.3 History Object
machine type fo whch the browser " es
vas compiled 1 GQ. What's the purpose of Hitory browser objet in
wegen ‘contin a suing representing the value | |. JavaScript ? Explain its any two methods. 1
of the user-agent header sent by the 7 arcs oa oe aaa a
lint inthe hp proccol |} * THe JavaScript history ob ns an arya
fest fore sererin te i visited by the user, By using this object, you can load
' Methods of JavaScript navigator object
Following ae important methods navigator objet:
Method Deserption
juvaGnaled() | checksifjavais enable
tainténabled() | checks if taint i enable. It is deprecated
since JavaScript L2
Example
‘chum
‘<baiy>
“<h2> JavaScript Navigator Object </h2>
sserpt>
Mocument.wrteln("<br/>navigaior.ppCodeName:
‘navigator. appCodeName);
ocumentriteln("'<br/> navigator.appName:
/ +avigatorapp Name);
document. writeln(” <be/> navigator appVersic
+navigator.appVersion);
ocumentwriteln("<br/>navigator.cookieEnabled:
* + nnvgator.cookieEnable)
document. writeln(*<be!>navigator language:
4 naignor language):
secumentriteln(" </> navigatoruserAgent
Poni
document. writela(" <br/> navigator platform:
4 navigator platform);
tor.userAgent);
previous, forward or any arcu page.
The history object is the window propery, soit ean be
accessed by:
‘window history
oR
history
© Properties of JavaScript history object
Property. Description
Length specifies the number of elements
contained in the object
Cureat specifies the URL of the cureat entry
inthe object
Next specifies the URL of the next ekment
inthe History list
previous specifies the URL of the pevious
element in the History ist
|F Methods of JavaScript history object
‘There are only 3 methods of history object.
Method Description
forward) loads the next page.
back) Toads the previous page.
20) Joads the given page nurer.
Example
sment.writeln(" <br/> navigator.onLine:
Pi ariguoronLine); histo forward nex page
oe ‘istory-g0(2);/ffor next 2nd page
Ue bina g2)ifoc revi 2nd page
(New Syllabus w.e, academic year 21-22) (M5-67)
Ll reeh-Neo Pubcations.A SACHIN SHAH Venture Jetemet Programming (MU ~ Sem 5 Comp.) (Front End Development...Page no. (2-26)
penne
'
ere
GQ. Whats the purpose of Location browser objects in JavaScript Explain ts methods.
+ The location object in JavaScript helps in storing the information of eurent URL of the window objet tsa chil object of the
window objet
+ _Thetahe given below describes the properties af the Location objet aaSerip.
Property. Description Example
Tet | represents a string specifying the entire URL itp PhoenixGlobe com A0MuestaspTid= estat
protocol. | represents a string at the beginning of a URL up to the first colon (3, | http: or hips:
which specifies the method of access to the URL
ost | repens sting consisting of the hostname and pot sings FhoenixGobecom60
Tesmame | rein the server mame subdomain, nd donsin ame of URL. | PhoenxGlob-com
Port ‘represents a string specifying the communications port that the server uses_| 80
pathname | represen a sing portion of URL speciing how a parc sauce | testasp
canbe acessed
search| repeats a ing bepnning witha question mark hat spe ay gory
infra in an HTTP URL
Tash | represents sing beginning with a serfs an anchor rane in an | stat
HITPURL
Location Object Methods Patimamefldalus
“The following ble ists the methods ofthe Loeaon object Se :
interact sleaiot>
aE ‘</head>
© Method | apes
assign() Loads a new document in the browser “<h3>Enter URL in following sections </h3>
reload) reloads the current document that is contained
inthe cation href propery
coment with the || <*
replace) | poces, the creat” document ption>hitpl/<Joption> <2 =
a Speed new one, you can not navigate back | | ;<ention>tp/ <font
tothe previous document using the browsers | | ‘<eption>file/<Joption> 6
Back button “<option>javaseript: </option>
‘<option >fip:/</option>~
‘<option>mailto:</option>
<felect> See
(New Syllabus wef academic year 21-22) (M5-67) ‘Tech-Neo Publications. SACHIN SHAH Venture Paine
it ype= tea re =D" manengh® "100"
ares athnameF 1 vie="7> eR
<tr
<n 1
ing ype="baton” name="Ga" vle=
eich="puol ">
ler
© feyjicrsmt.nont
> 04
Enter URL in following sections
Protocol:
trtomet Programming (MU - Sem 5 = Comp) (Front End Dovolopmant)....Paga no. (2-27)
Any element of IITML. page can be acceee byw
phe
Mhocument objet
‘Acconting to WSC(World Wide Web Convo) “The
WIC Document Object Model (DOM) i platform and language
reutal interface tat allows programs and scripts to dymamisly
“| secess and update the content, structure, and style of document.”
'T Hierarchy of objects In web document
Document Object Model (DOM) is the metho by which he
content of documents accesel and modified. Ina weh document,
the organization of ebjeets is implemented in irachial
sinctu.
% 2.8.1 DOM Levels
‘The DOM provides JavaScript with ll of the fears itteeds
to generate dynamic HTML:
Changes can be made in all HTML elements.
‘The eae buml documeat is represented by the documest
jet.
‘The band document becomes document cbject when itis
ended in the browser. The rot element represents the inl
ocumeat. The document object as popes and metho
‘Tae documeat object helps to add content dynamically inte
rate Changes cnbe mein es of TL eet
sostuas! Changs canbe main CSS sys inthe age.
[PhoesixGiobe.com ‘+ Existing HTML elements and attributes can be deleted.
dane: «New HTML leents nd aur can beste
a
‘+ Response can be given to HTML events.
Go,
4 NewETTL evenscanbe cet in TM pe
SG wan
_ __ Erne [iraort set
paizi8 DOCUMENT OBJECT MODEL a ee!
Te] ee] [oa
—_—
fu
Fado] | [oa
‘© DOM stands for Document Objet Model, [Pesscon
Flg.2811 : DOM levels
web pe
(New jlabus wef academic year 21-22) (M5-67)
[Bb rech-teoPubcations.A SACHIN SHAH Vertue
Modal
k 2 4 sctemet Programming (MU: Som8 = Comp)
YS 2.8.2 Propertles and Methods of Document
Object
‘The contents of document can be accessed and modified with
the help of methods,
ee
Method I Properties Description
Value Retums value of specified
textfield
write(string?) Weites the specified string
in the document,
WritelaC string") Writes the specified sting
inthe document with
‘newline character atthe
end.
J
{Front End Davelopment)..Page no. (2-28)
"orm |*>
Ener Your Name: <input type=
input type="bnton" onClick="callMe(;" value="Click
Mere"/>
</form>
</font>
<fody>
<ftml>
"Explanation
ere, document represents the html document. Ii the root
clement,
© formt - rane of the form,
* txtname -atvibute ame ofthe input text
* Value - prope, that returns the valu of the input text.
feiElemenB 149 Returns th element or
having the specified id wee 7]
valve, 0] 0 ow x ee
fetElementsByNamet) | Returns all the elements CO Fle | CArsew/AdninDedeoptiameletztent
having the specified name
value. |Enter Your Name{saama ____}[ Ghee
setElementsByTapNane)_ | Returns all he cements
having the specified tag -
name, Bom > PEigaeacems
‘betElementsByClassName() Returns all the elements. saceal =
‘having the specified class Eater Your Names raven
name. meen =
1 Accessing field value by document object
> Program 2.8.4 : Program of document object which
accesses value from tet feld
[ebin>
‘<head>
Ktitle>
DOM
hitle> : cs
|Secriptlanguage="JavaScript"> i
Tunction callMe()
£
var sname=document form] tname.vabies
‘lert’Weleome: *+snam);
2. write(“string”) method
* This method is used to write output stream.
© The wite() method is used to writes HTML expressions or
JavaScript nfo a document
© Displaying the message using
write("string") method
<html>
<head>
<title>
‘Write Method
</ile>
</head>
‘<body> ‘
<script language="JavaScript"> *
document wile <b> This message is printed by write)
method </b>}
Tal tech-\eoPublcations.& SACHIN SHAH Venture jones
© O tier scyprnent
‘This message is printed by write) method
3, writeln("String”) method
‘© Thismethodis used to write output stream,
© ttlad adda new line after each statement,
> Program 2.8.2 : Program to demonstrate the use of
wetting”) method
<!DOCTYPE html>
<html> SONS.
<body>
<font ste=5>
<p>Nole: write() does not add a new Line after each
statenest<Ip>
“<pre>
“Kteript>
ocumest.mite( First Line’),
ocumentsrte(. Also onthe First Line”);
‘checigt> :
‘</pre>
‘<p> Note: writeln0 add a new lie after each
‘statement:</p>
pe
scip>
‘Bocuiment writeln( ‘First Line");
pent. writeln("Second Line");
fSlseripe> i
Ecipe>
Be
Newel) ot aa pe ie each tte:
rire Une. alo onthe Fest Le
eta a dd new ine afer ech statement
Feet ise
Sane Une
(Front End Development...Page no (2-28)
document.getElementById() method
‘This method returns the element of specified id :
© Symtax
document getElementByl
Inthe above script, we have used document form name ae fo
access the value of text field. For the same purpose now we will
use Daeument getElement) met Here we have fice
id forte input text fel
—e—e
> program 2.8.3: Program to display cube of number
sing Document.getEiementByld() method
<<hunl> ‘
<head>
<ile>
Dow
<file>
<cipt language "JarSerpt'>
furatoncube()
{
varo0 = document getElementBy14( num) values
ales(oo%n0*n);
}
<beript>
input type="text”
um" /> <br> <br/>
<input type "button" vlue="Display Cube"
eaCick="cube()"/>
<fomn>
<<teat>
}
| (New Syabus wef academic year 21-22) (M5-67)
I
f
Bh rech-Neo PblcatonsA SACHIN SHAH Vestue !ntemet Programming (MU - Sem 5 = Comp.) __(Font End Developmen)..Page no (230)
5. document.getElementsByName() method
‘This method retums all he elements of given name
"© Syntax
HoimehgelBiemcnisliyNamet Haine)
Tn this example, we wil coun total number of languages
Here, we are using getElementsByName() method to get all the
languages,
> Program 2.8.4 : Program to display number of
lenguages ar thet cont on lek evento button
‘<himl>
fetes 6. document.getélementsByTagName()
Stites method
Dow Alle elements of specified tag are retuned by this meta
Shitle> 03] © symax ee
‘Sseript type="textjavascript"> <> | ocument getBiementsByTagName("tag_name’)
ii i
function languages() | > Program 2.8.5: Program to count total number of
{ 1 tags. used by document.getélementsByTagHeme()
method
ar lan = document.getElementsByName("lang"); rere a . ~
‘alert(Total Languages:"+lan length); a oa 2
+ ‘Stitle> Hy
‘</script> DOM
oe <script ype="tenjavescript">
Be function ety). je Re
lence“ G
‘var ot ~ document geElementsByTogName(");
‘Sform>
alet(total p tags are:"entlength);.
[eb rech-neo Publications... SACHIN SHAH Venture
(New Syllabus w.ef academic year 21-22) (MS-67) trot Programing (MU - Som 5 - Comp)
ee teenies Eamon
aaa
Thi Fiot Pare
Eee Tepe) eed is used to cout eueney ofp
jt Haven Lock
as
‘<p>Click the button to eh
Sirt div element with the
‘<button onclick="changeColor()*> Click Here</button> -
<ectip lngiage="JavaScript">
funetion changeColor() {
locument.getElémentsByClassNamie(Test Col
x(0style-backgroundColor = "gray";
}
<jerip>
</font>
‘</body>
<</himl>
Output
7, document.getElementsByClassName() Be
This method ums ast of al the elements ofthe document |
with the given class name, as a NodeList object. cesarean
+ evan en | |
nodes are accessed using index numbers which stats from 0. Frevnteeraiercerane: |
> Program 2.86 : Program to demonstrate the use of | |e artmcdugrar tcl clare dr slene wie tor Cla”
getElementsbyClassName( ) method
FADOCTYPE bini> g
kehml> ue
‘chead> i
<style> : ce
fice e Using avaript we can add or remove nodes (HTML
border: 2px solid gray; ‘elements) inthe document.
inden is 0.</p>
‘<jaiv>
(cdiv lass ="TetClo>
{-<p>P isthe element in first div with
(A) Creating New HTML Elements (Nodes)
Tnially we have to create the element (element node) which
can be then appended tothe existing element.
> Program 2.8.7 :
toanexiing
‘sbiml>
‘<head>
<iile> "
‘DOM Manipulation =
‘
“,
It's not that Pm soxme, its jut hat Tsay with
|pblems loge,
Bees
icpid="p2"> Albert Eins
eee Nel Pie Wines
rogram to append the new element
+ (New Syllabus wef academic year 21-22) (M5-67)
fech-Neo Publications_A SACHIN SHAH Venture (Front End Developmen))....Page no. (2-32)
Intemot Programming (MU Sem - Comp)
‘Sseript>
‘Yar prg = document.createElement(‘p’);
‘Yarnd = decument.createTeaiNede(‘A new Paragraph);
PreAppendChild(nd)s
Yar element = document getElement fyla(¥iv?");
‘lementappendChila(pr;
‘Slscript>
"© Explanation
Ler’s see the cae
Yar prg = document ereateBlement('p");
‘A new element is erated
Nar nd = document.createTexNode(A new paragraph);
A text node is created and testis added to element
var element = document getElementByld(ivl);
“This code finds an existing element:
‘elementappendChild(pra); t
This code appends the new element to an existing element.
Output
ts oot hat Tin wo st, i jt aay it problems eg
‘Alber Ezsin: Theoretical Pics, Plorpher, Nobel Pize Winer
Anew Paap
(B) Creating new HTML Elements -
insertBefore()
In the previous program, we have seen the appendChild()
method which appends the element atthe end in part,
‘The inserBefore() method is used to add the new element st
panera
> Program 2.8.8 : Program to add new element at the
beginning using insertBefore() method
a ea
(New Syllabus wee. academic year 21-22) (MS-67)
DOM Manipulation
‘
I ot that Um so smal i's jst that I say with
problems longer.
Albert Einstein: Theoretical Physicist,
Philosopher, Nobel Prite Winner
varprg = documentereateElement(;
tard = documentereteTentNorle("A new Pacsgraph.’);
praappenddChildfed;
var clement = document. getElement Bylo!)
var child = docurenigeElementByld( pI"
lementinsertefore(prg, child),
,
Output
rere
(Comer
Ace Pang.
estat som yet at sty wih probles es.
‘Abt Ena: Thee Poss, Pbsopber, Nobel Pie Winer
(C) Removing Existing HTML Elements
To, remove an HTML element, we should have the
information aboot te pareat element. The removeChild() method
is used to remove the HTML element,
> Program 2.8.9 : Program to remove an existing
[alrech-NeoPubcations.A SACHIN SHAH Venture |
lntemet Programming (MU - Sem 5 - Comp)
‘eeerpi>
srarparent = document getElementByld(vi"),
frar child © document getElementByld('p1"};
emoreChildcil),
l
|ehey>
| shunt
Abert Est: Theresa Physi Phlosopex Nobel Pre Wane
(D) Replacing HTML Elements
[Kis also possible to replce an existing element by new one,
‘Tre replaceChil) method is used for this purpose,
re
> Program rogram to replace an existing
element by new element using replaceCild() method
‘
DOM Manipulation
‘Siile>
livd">
<IC3 not that 'm so sar, it's js that I tay vith,
problems longer.
'p2"> Albert Einstein : Theoretical Physicist,
Philosopher, Nobel Prize Winner
isiain>
lesen -
ar prg = document ceateElement("p");
rnd = documentreteTextNode("Replaced Dsia.);
sopendChiad;
ar parent = document gtElementByld( ‘die
child = document getBlementByldCp1";
-33)
(Fron End Dovlopmon).Page 0. (2 4
Output
€) © seep
Reged Da
‘Mbt ac: Terese Pysct, Poa, Nobo Pie Wie
—a—
12.9 EVENT/HANDLING 2
"GQ api he event handling in laveScipt wth simple
4 le
+ Evens ae the actions perfonned by the end users while
browsing the website. For example mouse move oF mouse
lic onthe buttons. |
* When an event is fired, objects are wiggeed which are
associated with that specific event
The evetis caught by the event handles and in response the
related coe is executed
‘+ Bventsa basically classified in four categories:
Classification of events,
1. Window events
2. Mouse events
3. Keyboard events
4. Form events
Fig. 29.1 : Classification of events
> 1. Window Events
‘Ther ar various types of events associated with window :
onload - triggered when anew page is stating up.
1) oaUnload triggers when a page is shutting down,
(ii) onResie - triggers when a page is resized,
(iv) onMove- tiggers when a page is moved.
(¥)_onAbort- triggers when apage is cancelled,
(Gi) onFrror- triggers when an errr occurs.
(i) onFocus - triggers when the: window moves to
foreground,
(vii onBlar- triggers when window changes to background.
Tech-Neo Publications..A SACHIN SHAH Venture ntemet Programming (MU - Som 5.
} 2 Mouse Events
“Tere are yon types of events asecisted with mone:
1) omMoasedown «riggers when moase button is pressed
‘onan element
i) onMoaseup iggers when moose etton i eens
(iy onMfonsemave «tripe: when monte pointer ie moved
and We pine is already over an clement
(0) Men wien wer moe ie Ue uso down and mouse up events
(9) onMouscorer triggers when the pointer is over an | > Program 2.9.2 : Program illustrating mouse up and
clement mouse down events
fehimi>
ise? ae
‘chi |="myid 1" onmousedown="fun()” ¥
(vi) onClick - triggers when mouse button is clicked once.
(vii) onDblclick - triggers when mouse button is clicked
mee b he wat! Click the text!
aK vets reutap="ind"> Gk eet
cee \eeerin>
There are various 1785 of events associated with | function funl()
Aeytoad in
@onKeydown- Triggers wbenakeyisprssed down. | | document. getElementBild( mid" style col
(ooKeyup- Tigger: when key it led }
(Gi) onKeypress - Triggers vhen complete key sequence, | function fun2()
down pres and up release apes s
> 4 Formevents
“There are following types of evens associated with form:
( oaReset - wigers when the reset button onthe fom s
clicked
@)onSubaat -tiggers when te submit buton is clicked.
(Gi) onSclec - triggers when a contents selected on ape
(A) Using Events
‘All these event can be used to cxtevte some scrips. In te |}
following programs we will use mowover and mouseoutevens. | (Click the text!
CO he| catenin
> Program 29.1 : Program to tlustrate the use of
5 Programs
> Program 2.9.3 : Wiite a program to show the use of
events to change background color with DHTML. If
‘mouse button Is pressed, background color should be
red, If mouse button is released up, background color
should be yellow. dy stele back erand0stor
ro yellow)
| docurentbody style hock roandColor="yellon®
Kcthead>
‘ected oadloaseDown="red);" onMousel
Ketody>
ketm>
Onspat
GB) D onemarancc xP
CO Re | CtsevsdnivDesktopangle 2h
yllon(h">
> Program 2.9.4 : Wrte using JavaScript how to know
which mouse button wes dicked, number of elements
in form, and write helo world.
‘rar
