LSS 2u1S 1

!"#"$%&'()

(last upuateu Apiil 1S, 2u1S: LSS)
}avaSciipt is a sciipting language, specifically foi use on web pages. It iuns
within the biowsei (that is to say, it is a !"#$%&'(#)$ (!+#,&#%- ".%-/.-$), anu it can
be useu to make web pages uynamic, that is, able to iesponu to events (such as
mouse movements) anu able to allow useis to fill in foims which can then be
sent to the seivei. In fact, }avaSciipt can uo a gieat ueal moie than this.
}avaSciipt is uesciibeu in uetail in many books on the subject, anu theie is
excellent tutoiial mateiial at http:www.wSschools.comjsuefault.asp.
+",'%,
}avaSciipt is embeuueu in the BTNL sent fiom the seivei to the biowsei. It is
placeu insiue a <script> </script> tag:
<script>
document.write("Hello World!");
</script>
(In eailiei veisions of BTNL, the attiibute type="text/javascript"
was iequiieu insiue the <script> tag, but this is no longei the case foi
BTNLS.)
1

The sciipt may be placeu eithei in the heauei oi the bouy of the BTNL: if
placeu in the bouy, the }avaSciipt will be executeu when the biowsei
ieaches that pait of the BTNL file. Those paits placeu in the heauei will
not be executeu until (oi unless) calleu (see latei). It is also possible to
place (some oi all of the) the }avaSciipt in an exteinal file using the
attiibute src, enabling shaiing of }avaSciipt acioss web pages. Foi
example,
<script src=scripts/usethisscript.js>
</script>
woulu use the }avaSciipt file usethisscript.js locateu in the local
foluei scripts. Note that the }avaSciipt file may be on a completely
uiffeient machine: the souice (src) may be a full 0RL.

1
Also, in the past the }avaSciipt was often placeu insiue BTNL comment
biackets <!-- -->, so that if the biowsei uiu not suppoit }avaSciipt,
the }avaSciipt woulu have no effect. But these uays, viitually all biowseis
uo suppoit }avaSciipt.
LSS 2u1S 2
}avaSciipt is object oiienteu, which is to say, it sees the page it is insiue, as
an object with many sub-objects. The name foi this stiuctuie is the
Bocument 0bject Nouel (B0N), anu foi each web page this takes the foim
of a tiee, with the document at the ioot.

!"#$%& () *+& ,-./"0 123&45 6-7&8 9-% / :".;8& <&2 ;/#& 4-0:":5"0# -9 / +&/7= <"5+ / 5"58&= /07 /
2-7> <"5+ / 8"0? /07 / +&/7&%@
In auuition, }avaSciipt has access to the iuentity of the biowsei itself (anu,
inueeu, to the biowsei histoiy), as well as to the uisplay, anu to the uate
anu time. }avaSciipt can cieate new biowsei winuows, as well as
manipulating the contents of the winuow it is in. }avaSciipt sees all of
these entities (biowsei, winuow, uate etc.) as objects, anu can access theii
constituent paits as object piopeities anuoi use object methous to
manipulate them. Bow to use ."" of these facilities is well beyonu the scope
of this uocument, howevei: theie aie quite a numbei of books available.
-./ 0"#'1")2& 234/%)
This is one of the simplest objects. It iefeis to the biowsei in use, anu has just six
piopeities, namely
navigator.appCodeName which ietuins the coue name of the
biowsei,
navigator.appName which ietuins the name of the biowsei,
navigator.appVersion which ietuins the veision infoimation of the
biowsei,
navigator.cookieEnabled which ueteimines whethei cookies aie
enableu in the biowsei,
navigator.platform which ietuins foi which platfoim the biowsei
is compileu, anu
navigator.userAgent which ietuins the usei-agent heauei sent by
the biowsei to the seivei,
LSS 2u1S S
anu one methou,
navigator.javaEnabled() which ietuins whethei oi not the
biowsei has }ava enableu
What can one use this foi. Platfoims vaiy in size fiom iPhone sizeu, to
ualaxy note sizeu, to iPau sizeu, to laptop to laige scieen uesktops.
Biffeient biowseis (Safaii, Inteinet Exploiei, Chiome, etc.) have slightly
uiffeient chaiacteiistics, anu with a single biowsei type, uiffeient veisions
have slightly uiffeient capabilities.
So, foi example one might have coue like
if (navigator.platform = iPhone)
// run one set of JavaScript statements
else if (navigator.platform = MacIntel
// run a different set of JavaScript statements

In a similai way, one can test foi the biowsei type anu veision, anu iun
uiffeient }avaSciipt as iequiieu. It is, unfoitunately, still the case that
biowseis aie %0& all compatible, anu also that many useis aie still using
oluei veisions of biowseis (oi biowseis that .+$ ,+$&$%)#%- to be oluei
veisions than they actually aie!)
It woulu be quite inappiopiiate to pioviue the same level of uetail on all
the othei objects - but theie aie books on }avaSciipt foi this puipose.
5,'01 !"#"$%&'()
Although }avaSciipt may be useu in many uiffeient ways, the most common way
of using it is to
place }avaSciipt functions in the heauei of the BTNL file
call these functions (peihaps with paiameteis) fiom the bouy of the
BTNL file
The }avaSciipt functions may be calleu fiom anywheie in the BTNL file
(}avaSciipt sciipts aie executeu as they aie ieau by the Biowsei, so functions
may be executeu fiom insiue a sciipt placeu at any point). Bowevei, one of the
commonest }avaSciipt iuioms is to call a function in iesponse to an $1$%&. Theie
aie many uiffeient types of events, associateu with uiffeient tags. Foi example
<body onload=startmessage()>
iuns the startmessage() function when the page loaus. Nost BTNL tags have
associateu event attiibutes which aie useu to call }avaSciipt functions.
LSS 2u1S 4
627,/ /#/0), "08 !"#"$%&'()9
A veiy common use of }avaSciipt is to make the web page iesponsive to
inteiaction using the mouse. veiy neaily all tags have the following mouse event
attiibutes:
A55%"2$5& B/8$& ,&:4%";5"-0
onclick (!+#,& Sciipt iun on a mouse click
onublclick (!+#,& Sciipt iun on a mouse uouble-
click
onmouseuown (!+#,& Sciipt iun when mouse button is
piesseu
onmousemove (!+#,& Sciipt iun when mouse pointei
moves
onmouseout (!+#,& Sciipt iun when mouse pointei
moves out of an element
onmouseovei (!+#,& Sciipt iun when mouse pointei
moves ovei an element
onmouseup (!+#,& Sciipt iun when mouse button is
ieleaseu
By using these, one can make neaily any BTNL element be affecteu by mouse
activity.
So foi example, one can have
<img alt="Programme" name=prog src="programme_orig.png"
onMouseover="prog.src='programme_over.png'"
onMouseout="prog.src='programme_orig.png'">
which uisplays an image calleu programme_orig.png initially. When the
mouse is ovei the image, the onMouseover event occuis, anu the image is
alteieu to 'programme_over.png'. When the mouse moves away fiom the
image, the oiiginal file 'programme_orig.png' is useu again. This type of
coue is fiequently useu to altei button images when the mouse is ovei them.
Note that in the above
1. the }avaSciipt is actually in the tag itself, iathei than being in a function call.
2. We iefei to the image as prog.src, iathei than using its fully qualifieu
name document.images[prog].src
:/%;"&'01 #"&'"3;/, '0 !"#"$%&'()
}avaSciipt allows you to ueclaie vaiiables: these must be ueclaieu befoie they
aie useu (i.e. they must have been encounteieu by the biowsei inteipieting the
BTNL file piioi to them being useu: this usually means placing the vaiiable
ueclaiation in the <body> of the BTNL file, iathei than in the <head> ).
vaiiables aie not typeu (unlike Alice oi }ava oi any of the C-baseu languages).
Thus
var xyz ;
LSS 2u1S S
ueclaies a vaiiable xyz that may latei be useu. It may be assigneu a numeiic
value (e.g. xyz = 5 ; ) oi a stiing (e.g. xyz = Quasimodo ; ). 0ften
vaiiables aie initialiseu at theii ueclaiation:
var cartype = Fiat ;
The usual opeiatois can be useu with these vaiiables: +, -, *, , % (mouulus
uivision), ++ (inciement), -- (ueciement). Note that + can be useu to join stiings
togethei.
The compaiison opeiatois incluue ==, !=, >, < , >=, <=, anu also === which tests
foi equality of both value anu type. Logical opeiatois aie && (logical anu) , ||
(logical oi), anu ! (not).
$2</ %2<<20 !"#"$%&'() 7,"1/,9
}avasciipt is often useu to altei the BTNL insiue a specific tag. Although it is
possible to select the specific veision of the tag insiue a web page uiiectly using
the B0N, it is geneially easiei to (i) label the tag itself anu then (ii) to use the
specific iuentifieu tag. Labelling the tag is uone using the id= attiibute (anu
this is available foi viitually all BTNLS tags):
<p id=paragraph9>Some text</p>
then one can finu the object with this iuentifiei (insiue a <script> tag):
var therightparagraph =
document.getElementById(paragraph9) ;
0ne can then altei any of the chaiacteiistics of the iuentifieu object: foi example
therightparagraph.innerHTML = Some different text ;
Anothei example woulu be changing the name of a button: say we have a button
(in BTNLS)
<input type="button" id="button1" value="Click Me!">
which pioviues a button with "Click Ne!" wiitten on it, we coulu change its value
(insiue a <script> tag)
document.getElementById("button1").value = "Do not click
me again!" ;
The uiffeient objects in the uocument object mouel (eveiything fiom paiagiaphs,
<p> to heaueis <h1> to <h6>, to foims, as well as intiouuceu uivisions <uiv>)
have a vaiiety of ,+0,$+&#$( anu 2$&30)(.
!"#"$%&'() ,)")/</0),9
}avaSciipt has if statements, switch statements, while statements, anu foi loops.
See the www.wSschools.com website foi moie infoimation on these. Inueeu,
}avaSciipt has many moie capabilities which aie beyonu the scope of this
intiouuctoiy uocument.
LSS 2u1S 6
=88')'20"; >0?2&<")'20

Foi a uetaileu uesciiption of }avaSciipt language (i.e. foi iefeience), tiy B.
Flanagan, "}avaSciipt: The uefinitive uuiue" 6
th
euition, 0'Reilly 2u11.
A facility foi checking }avaSciipt syntax may be founu at
http:www.javasciiptlint.comonline_lint.php