yet another insignificant programming notes.docx

8/19/2019 yet another insignificant programming notes.docx

1/98

yet another insignificant programming notes... | HOME

Table of Contents (Hide)

1. Introduction2. JavaScript by Eamp!es

2.1 Eamp!e 1" #unctions alert() and document.write()

2.2 Eamp!e 2" $ariab!es and #unctions prompt() % confirm()

2.& Eamp!e &" 'he Date Ob(ect

2.) Eamp!e )" *oops

2.+ Eamp!e +" ,ser-defined #unctions and onclick Event Hand!er

2. Eamp!e " More Event Hand!ers" onload % onmouseover and onmouseout

2./ Eamp!e /" Separating H'M*% 0SS and JavaScript

2. Eamp!e " Manipu!ating the 0ontents of H'M* E!ements

2. Eamp!e " Intercepting a Hyper!in3

2.14 More 5dvanced JavaScript Eamp!es2.11 6ebugging JavaScripts

2.12 JavaScript I6E

&. JavaScript and H'M*&.1 'he E!ement

&.2 In or 7

&.& Eterna! JavaScripts&.) 'he E!ement

). JavaScript 8asic Synta

).1 0omments).2 Epression

).& Statement and 8!oc3 ).) $ariab!e% *itera!s 9 'ypes).+ 'he number 'ype% *itera!s 9 Operations

). 'he string 'ype% *itera!s 9 Operations

)./ 'he boolean 'ype% *itera!s 9 Operations

). Ep!icit 'ype 0onversion

). #!o: 0ontro! - 6ecision

).14 #!o: 0ontro! - *oops).11 5rrays

).12 5ssociative 5rray

).1& #unctions

).1) Scope of a $ariab!e" ;!oba! vs. #unction-*oca!).1+ Interacting :ith ,sers

).1 Other 'op-!eve! 8ui!t-in #unctions

).1/ 5n Introduction to Events+. Ob(ects

+.1 Ob(ects are Every:here<

+.2 =roperties and Methods+.& 0reating Ob(ects via Ob(ect Initia!i>er

https://www3.ntu.edu.sg/home/ehchua/programming/index.htmlhttps://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#show-tochttps://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-1https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-1https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-2https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-2https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-2.1https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-2.1https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-2.1https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-2.1https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-2.1https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-2.1https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-2.1https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-2.2https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-2.2https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-2.2https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-2.2https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-2.2https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-2.2https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-2.2https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-2.3https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-2.3https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-2.3https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-2.3https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-2.3https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-2.3https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-2.4https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-2.5https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-2.5https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-2.5https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-2.5https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-2.5https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-2.5https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-2.6https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-2.6https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-2.6https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-2.6https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-2.6https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-2.6https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-2.6https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-2.6https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-2.6https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-2.6https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-2.7https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-2.8https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-2.9https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-2.10https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-2.11https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-2.12https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-3https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-3https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-3.1https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-3.1https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-3.1https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-3.1https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-3.1https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-3.1https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-3.2https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-3.2https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-3.2https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-3.2https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-3.2https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-3.2https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-3.2https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-3.2https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-3.2https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-3.3https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-3.4https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-3.4https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-3.4https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-3.4https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-3.4https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-3.4https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-4https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-4https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-4.1https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-4.2https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-4.3https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-4.4https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-4.5https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-4.5https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-4.5https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-4.5https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-4.5https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-4.5https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-4.6https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-4.6https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-4.6https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-4.6https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-4.6https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-4.6https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-4.7https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-4.7https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-4.7https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-4.7https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-4.7https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-4.7https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-4.8https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-4.9https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-4.10https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-4.11https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-4.12https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-4.13https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-4.14https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-4.15https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-4.16https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-4.17https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-5https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-5https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-5.1https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-5.2https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-5.3https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#show-tochttps://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-1https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-2https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-2.1https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-2.2https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-2.3https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-2.4https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-2.5https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-2.6https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-2.7https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-2.8https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-2.9https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-2.10https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-2.11https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-2.12https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-3https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-3.1https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-3.2https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-3.3https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-3.4https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-4https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-4.1https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-4.2https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-4.3https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-4.4https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-4.5https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-4.6https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-4.7https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-4.8https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-4.9https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-4.10https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-4.11https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-4.12https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-4.13https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-4.14https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-4.15https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-4.16https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-4.17https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-5https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-5.1https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-5.2https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-5.3https://www3.ntu.edu.sg/home/ehchua/programming/index.html


2/98

. 8ui!t-in JavaScript Ob(ects

.1 0reating an Ob(ect via 0onstructor and the new Operator

.2 'he Array Ob(ect and 5ssociative 5rrays

.& 'he String Ob(ect

.) 'he umber Ob(ect

.+ 'he !oolean Ob(ect. 'he Date Ob(ect

./ 'he "ath Ob(ect

. 'he #unction Ob(ect

/. More on Ob(ects

/.1 =rototype-based vs. 0!ass-based/.2 6efining ?our O:n 0ustom Ob(ects via a 0onstructor

/.& $$proto$$ and .prototype

/.) Inheritance via =rototype 0hain/.+ ;etter and Setter

/. %b&ect @s =roperties

. 6ocument Ob(ect Mode! A6OMB 5=I for JavaScript.1 #inding and Se!ecting E!ements

.2 Manipu!ating E!ement@s 0ontent through the inner'" =roperty

.& 6OM 'ree 9 Codes

.) 'et Code.+ 5ttribute =roperties

. 5ttribute style Afor 0SSB

./ Manipu!ating Codes. 'he document ob(ect

. Event Hand!ing in H'M* 6OM

.1 5ttach Event Hand!er to an H'M* tag

.2 8ui!t-in Events and Event Hand!ers.& 'he *vent ob(ect

.) 5dding Event *istener 14. JavaScript 8ui!t-in 8ro:ser Ob(ects" navigator % window % screen % history % location

14.1 'he navigator ob(ect

14.2 'he window ob(ect

11. Degu!ar Epression ADegeB

11.1 0reating a +eg*,p Ob(ect in JavaScript

11.2 JavaScript@s Dege Methods12. JSOC and JSOC=

12.1 JSOC AJavaScript Ob(ect CotationB

12.2 JSOC=12.& 0ross-Origin Desource Sharing A0ODSB

1&. Misce!!aneous

1&.1 'as3 Schedu!ing via 'imeout1&.2 8it:ise Operators

1&.& Operator =recedence

1&.) Eception Hand!ing" try-catch-finally and throw

https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-6https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-6https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-6.1https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-6.1https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-6.1https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-6.1https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-6.1https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-6.1https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-6.2https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-6.2https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-6.2https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-6.2https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-6.2https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-6.2https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-6.3https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-6.3https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-6.3https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-6.3https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-6.3https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-6.3https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-6.4https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-6.4https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-6.4https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-6.4https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-6.4https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-6.4https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-6.5https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-6.5https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-6.5https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-6.5https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-6.5https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-6.5https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-6.6https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-6.6https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-6.6https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-6.6https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-6.6https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-6.6https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-6.7https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-6.7https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-6.7https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-6.7https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-6.7https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-6.7https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-6.8https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-6.8https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-6.8https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-6.8https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-6.8https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-6.8https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-7https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-7https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-7.1https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-7.2https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-7.3https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-7.3https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-7.3https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-7.3https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-7.3https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-7.3https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-7.4https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-7.5https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-7.6https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-7.6https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-7.6https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-7.6https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-7.6https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-8https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-8https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-8.1https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-8.2https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-8.2https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-8.2https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-8.2https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-8.2https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-8.2https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-8.3https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-8.4https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-8.5https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-8.6https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-8.6https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-8.6https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-8.6https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-8.6https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-8.6https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-8.7https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-8.8https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-8.8https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-8.8https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-8.8https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-8.8https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-8.8https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-9https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-9https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-9.1https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-9.2https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-9.3https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-9.3https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-9.3https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-9.3https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-9.3https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-9.3https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-9.4https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-10https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-10https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-10https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-10https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-10https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-10https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-10https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-10https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-10https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-10https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-10https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-10https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-10https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-10https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-10https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-10https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-10.1https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-10.1https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-10.1https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-10.1https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-10.1https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-10.1https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-10.2https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-10.2https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-10.2https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-10.2https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-10.2https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-10.2https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-11https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-11https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-11.1https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-11.1https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-11.1https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-11.1https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-11.1https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-11.1https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-11.2https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-12https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-12https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-12.1https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-12.2https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-12.3https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-13https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-13https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-13.1https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-13.2https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-13.3https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-13.4https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-13.4https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-13.4https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-13.4https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-13.4https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-13.4https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-13.4https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-6https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-6.1https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-6.2https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-6.3https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-6.4https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-6.5https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-6.6https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-6.7https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-6.8https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-7https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-7.1https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-7.2https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-7.3https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-7.4https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-7.5https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-7.6https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-8https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-8.1https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-8.2https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-8.3https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-8.4https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-8.5https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-8.6https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-8.7https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-8.8https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-9https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-9.1https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-9.2https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-9.3https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-9.4https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-10https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-10.1https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-10.2https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-11https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-11.1https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-11.2https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-12https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-12.1https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-12.2https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-12.3https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-13https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-13.1https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-13.2https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-13.3https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-13.4


3/98

1&.+ Eecute JavaScript Statement from 8ro:ser@s 5ddress 8ar

1&. Cested #unctions and 0!osure

JavaScript

Basics

1. Introduction

JavaScript is the most :ide!y used client-side programming !anguage that !ets you supercharge

your H'M* :ith interactivity% animation and dynamic visua! effect for better ,ser Interface and

,ser Eperience A,I,FB. It is"

• a sma!!% !ight:eight% ob(ect-oriented% cross-p!atform% specia!-purpose scripting !anguage

meant to be run under a host environment Atypica!!y a :eb bro:serB.

• a client-side scripting language to enrich :eb user-interfaces and create dynamic :eb

pages Ae.g.% form input va!idation% and immediate response to user@s actionsB.

• the engine that supports 5J5F A5synchronous JavaScript and FM*B% :hich generate

rene: interest in JavaScript.

JavaScript :or3s together :ith H'M*0SS. H'M* provides the contents Aor structureBG 0SSspecifies the presentationG and JavaScript programs the behavior. 'ogether% they enrich the

,I,F of the :eb users.

History and Versions

JavaScript% origina!!y ca!!ed *iveScript% :as created by 8rendan Eich at Cetscape in 1+. Soonafter% Microsoft !aunched its o:n version of JavaScript ca!!ed JScript. Subseuent!y% Cetscape

submitted it to E0M5 Aformer!y "European Computer Manufacturers Association% no: "Ecma

International - European association for standardizing information and communication

systemsB for standardi>ation% together :ith Microsoft@s JScript.

'he E0M5 Specification is ca!!ed E0M5-22 E0M5Script *anguage Specification Aa!so

approved as ISOIE0 122B"

• E0M5-22 version 1 AJune 1/B

• E0M5-22 version 2 A5ugust 1B

• E0M5-22 version & A6ecember 1B

• E0M5-22 version ) - abandon due to po!itica! differences

https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-13.5https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-13.6http://www.ecma-international.org/http://www.ecma-international.org/publications/standards/Ecma-262.htmhttps://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-13.5https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#zz-13.6http://www.ecma-international.org/http://www.ecma-international.org/publications/standards/Ecma-262.htm


4/98

• E0M5-22 version + and +.1 AJune 2411B A http":::.ecma-

internationa!.orgpub!icationsstandardsEcma-22.htmB

• E0M5-22 version " epected in June 241+.

Mean:hi!e% the Mo>i!!a =ro(ect A https"deve!oper.mo>i!!a.orgenJavaScriptB continues toupgrade the JavaScript :ith these ma(or versions"

• 1.4 A1B

• 1.& A1B" E0M5-22 version 1 comp!iance

• 1.+ A1B" E0M5-22 version & comp!iance

• 1.% 1./"

• 1. A244B% *atest 1..+ A2414B" E0M5-22 version + comp!iance

JavaScript vs. Java

Java is a full-fledged general-purpose programming !anguage created by James ;os!ing at Sun

Microsystems Ano: part of Orac!eB% re!eased in 5ug 1+. JavaScript is created by 8rendan Eich

at Cetscape in 1+. Origina!!y ca!!ed *iveScript% it is a sma!! and !ight:eight special-purpose !anguage for :riting c!ient-side program running inside the :eb bro:ser to create active user-

interface and generate dynamic :eb pages. Java a!so supports c!ient-side programming via the

so-ca!!ed Java applets.

JavaScript is not a genera!-purpose nor a stand-a!one programming !anguage Ait has to be runinside the bro:serB. It :as origina!!y ca!!ed *iveScript and :as renamed to JavaScript in an i!!-

fated mar3eting decision to try to capita!i>e on the popu!arity of Java !anguage% :hen Cetscape

re!eased it Cavigator 2 in 1 ACavigator 2 a!so runs the Java app!etsB. Java and JavaScript aretota!!y different !anguages for different programming purposes. Ho:ever% in the ear!y days% some

efforts :ere made to adopt Java syntaes and conventions into JavaScript% such that JavaScript

seems to be a subset of Java. In rea!ity% they have very !itt!e in common. 8ut% if you 3no: Java%you shou!d find JavaScript easier to !earn because of these common syntaes.

Wat JavaScript C!""#T $o%

Demember that JavaScript is a c!ient-side program that you do:n!oaded from a server% and runinside the bro:ser of your Ac!ientB machine. Khat to stop someone from :riting a JavaScript that

:ipes out your hard dis3% or triggers a denia!-of-service attac3 to another server7 5s a resu!t% forsecurity purpose%

1. It cannot read fi!e from the c!ient@s machine.

http://www.ecma-international.org/publications/standards/Ecma-262.htmhttp://www.ecma-international.org/publications/standards/Ecma-262.htmhttps://developer.mozilla.org/en/JavaScripthttp://www.ecma-international.org/publications/standards/Ecma-262.htmhttp://www.ecma-international.org/publications/standards/Ecma-262.htmhttps://developer.mozilla.org/en/JavaScript


5/98

2. It can on!y connect to the server that it come from. It can read fi!e from the server that it

come from. It cannot :rite fi!e into the server machine.

&. It cannot connect to another server.

). It cannot c!ose a :indo: that it does not open.

JavaScript is "o& 'very&ere

JavaScript :as origina!!y created as a c!ient-side :eb programming !anguage% running in a :eb

bro:ser% to supercharge H'M*. It has gro:n beyond the c!ient-side programming.

'he popu!ar Code.(s is a standa!one JavaScript engine that !ets you run JavaScripts in a

standa!one manner Ai.e.% :ithout a bro:serB. Code.(s a!so enab!es you to :rite server-side programs in JavaScript% i.e.% you can no: :rite both your c!ient-side programs and server-side

programs in the same !anguage. Many front-end :eb deve!opment too!s% such as ulp.&s and

!ower% are bui!t upon Code.(s and programmed in JavaScript.

JavaScript is a!so used for :riting scripts for Soft:are such as 5crobat% 6ream:eaver and

;oog!e 5pps.

*uery

(Luery is a cross-bro:ser JavaScript *ibrary. It is reported that more than ) of the production

:ebsites are :ritten in (Luery no:adays Aas in May 241+B. (Luery is JavaScript Abut having itso:n etension syntaB% hence% you need to understand JavaScript. I suggest you read through the

JavaScript synta Aand pay particu!ar attention to ob(ectsB% and then s:itch into (Luery for your

production. Dead (Luery 8asics.

+. JavaScript by ',a-ples

I sha!! assume that you 3no: H'M* and 0SS Aread my H'M*0SS artic!es other:iseB. I sha!!

a!so assume that you understanding some programming basics such as variab!es% if-e!se and for-!oop constructs.

?ou need a text editor to :rite your JavaScript. ?ou cou!d use a plain text editor such as

Cote=ad. 8ut to improve your productivity% a good programming text editor is essentia!. 'here

are many free:areshare:are avai!ab!e% such as Sub!ime 'et A http":::.sub!imetet.comB% Cote=adNN Ahttp"notepad-p!us.sourceforge.netB% =S=ad A:::.pspad.comB% 'et=ad

A:::.tetpad.comB. ?ou can a!so use a fu!!-sca!e I6E such as Cet8eans or Ec!ipse% :hich

provides content-assist Aauto-comp!eteB feature that great!y enhances your productivity.

JavaScripts run inside a bro:ser. 'here are standards on JavaScript. 8ut the 8ig-+ A0hrome%#irefo% IE% Safari and OperaB% in particu!ar the IE% does not adhere to a!! the standards strict!y.

#urthermore% they create their o:n etensions. Hence% the behavior of JavaScript cou!d be

https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/jQuery_Basics.htmlhttp://www.sublimetext.com/http://notepad-plus.sourceforge.net/http://www.pspad.com/http://www.textpad.com/https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/jQuery_Basics.htmlhttp://www.sublimetext.com/http://notepad-plus.sourceforge.net/http://www.pspad.com/http://www.textpad.com/


6/98

different in different bro:sers. ?ou may need to test your JavaScripts on more than one

bro:sers. 'hat@s :here (Luery comes in handy% as (Luery provides cross-bro:ser support.P

+.1 ',a-ple 1 /unctions alert() and document.write()

*et us :rite our first JavaScript to print the message He!!o% :or!d.

Start :ith a ne: fi!e and enter the fo!!o:ing codes. 6o not enter the !ine numbers% :hich is used

to aid in ep!anation. 'a3e note that"

• JavaScript is case sensitive. 5rose is CO' a ROSE and is CO' a Rose.

• Etra :hite spaces Ab!an3s% tabs and ne:!inesB are ignored. 'hat is% mu!tip!e :hite

spaces is treated as a sing!e b!an3 character. ?ou cou!d use them !ibera!!y to ma3e your

program easier to read.

Save the fi!e as /S*,Alert0rite.html Aor any fi!ename that you prefer% :ith fi!e etension of.html or .htmB. Dun the script by !oading the H'M* fi!e into a JavaScript-enab!ed bro:ser

Ae.g.% One of the 8I; #I$E - 0hrome% #irefo% Internet Ep!orer% Safari or OperaB.

JS',!lertWrite.t-l

1234

567891:1112131415161718

19

/avaScript *,ample #unctions alert() and

document.write() alert(@'elloC world;@)

"y first /avaScript says document.write(@'ello worldC again;@) document.write(@

his document was last modified on@ E document.last"odified E @.@)

Ho& it Wor0s%

1. JavaScripts are programming codes that are embedded inside an H'M* document. 'he

codes are contained bet:een a pair of and tags% as fo!!o:s"


7/98

2. 3. BB =our /avaScript programming codes here;

CO'E" In H'M*)FH'M*% you need to inc!ude attribute type?@te,tB&avascript@ to

the opening tag.

). ?ou cou!d p!ace the scripts in either the '*AD section Aca!!ed header scriptB or !%D=

section Aca!!ed body scriptB of an H'M* document. ?ou are free to embed as manyscripts into a sing!e document as you !i3e% using mu!tip!e ...

e!ement. *ines /- and *ine 1&-1/ are t:o pieces of JavaScripts% p!aced in the '*AD and

!%D= sections% respective!y.

+. JavaScript statements are terminated by a semico!on FF.

. 'he alert(atring ) function A*ine B pops out a dialog box disp!aying the sString and

a OQ button. Strings are enc!osed by a pair of double !uotes or single !uotes.

/. 'he current :eb page is represented by the so-ca!!ed document ob(ect in the JavaScript.

'he document.last"odified A*ine 1B property stores the !ast modified date of the

current document. 'he document.write(atring ) function A*ine 1) to 1B can be used

to :rite the specified aString to the current document% as part of the current H'M*

document.

. 'he FEF operator A*ine 1B concatenates pieces of the strings Asimi!ar to Java !anguageB.

. 5s a resu!t of the document.write()% the 8O6? section of this document contains"

1:. "y #irst /avaScript says'ello worldC again;

his document was last modifiedon mmBddByyyy hhmmss.

11. 'he alert() and document.write() are some of the common!y-used bui!t-in functions

provided in JavaScript.

'D?" =rint the document@s tit!e and the ,D* !ocation. AHints" use document.title and

document.location properties.B

$ont 2et Cau3t by te Cace 4 $o Control45efres (or Control4/6)

If you modify the codes and re!oad the :eb page% the ne: codes may not get eecuted becausethe bro:ser caches the previous!y !oaded version. ?ou cou!d use 0ontro!-#+ A0ontro!-DefreshB to

as3 the bro:ser to discard the cache% and fetch a ne: page.

+.+ ',a-ple + Variables and /unctions prompt()7 confirm()

'his script prompts the user for hisher name% confirms the name% and prints a greeting message.


8/98

'here are three 3inds of pop-up dialog boes for interacting :ith the users"

1. 'he alert(atring ) function puts the aString on a pop-up bo :ith a OQ button. ,ser

needs to c!ic3 the OQ button to continue.

2. 'he prompt( promptingtring C defaultInputtring G) function puts up an input pop-up bo :ith the promptingString :ith an OQ and 0ance! buttons. It returns the input

entered by the user as a stringG or a specia! va!ue ca!!ed null if the user hits the 0ance!

button. 'he optiona! parameter defaulttring specifies the initia! string to be sho:n. In

this artic!e% I sha!! indicate optional function parameters :ith a trai!ing FGF for

compactness.

&. 'he confirm(atring ) function puts atring on a pop-up bo :ith OQ and 0ance!

buttons. It returns true if user hits the OQ buttonG or false other:ise.

JS',Var.t-l

1234567891:1112

13141516171819

/avaScript *,ample Hariables and functions prompt()and confirm() var username ? prompt(@*nter your name @C @@) if (confirm(@=our name is @ E username)) I document.write(@'elloC @ E username E @;@) J else I

document.write(@'elloC world;@) J

0elcome to /avaScript;

Ho& it Wor0s%

1. *ine dec!ares a variable ca!!ed username% via the 3ey:ord var. 5 variab!e is a named

storage !ocation that ho!ds a value. Once the variab!e is dec!ared% you can assign Aand re-

assignB a va!ue to that variab!e% via the assignment operator F?F A*ine B.

2. *ine invo3es the prompt( promptingtring C defaulttring G) function to pop out a

dia!og bo% and reads in the string entered by the user. 'he string read is assigned to the

variab!e username. 'he function prompt() is simi!ar to the alert()% but it accepts a

user@s input.


9/98

&. In *ine 14% the confirm(atring ) function puts up the message and returns either true

or false% depending on :hether the user hits the OQ or 0ance! button.

). If the resu!t is true% *ine 11 prints @'elloC username;@. Other:ise% *ine 1& prints

@'elloC world;@.

'D?" Instead of printing the greeting message using document.write()% do it via an alert().

+.8 ',a-ple 8 Te Date #bect

'he fo!!o:ing script creates a Date ob(ect representing the current date-time% and prints the

current time.

JS',$ate.t-l

1

234567891:1112131415161718192:21222324

/avaScript *,ample he Date ob&ect var now ? new Date() BB current dateBtime var hrs ? now.get'ours() BB : to 23 var mins ? now.get"inutes() var secs ? now.getSeconds() document.writeln(@

Kt is @ E now E @@) document.writeln(@

'our is @ E hrs E @@) document.writeln(@

"inute is @ E mins E @@) document.writeln(@

Second is @ E secs E @@) if (hrs < 12) I document.writeln(@ood "orning;@) J else I document.writeln(@ood Afternoon;@) J

Ho& it Wor0s%

•

*ine dec!ares a variable ca!!ed now. It a!so creates a Date ob(ect Avia the new operatorB%:hich contains the current date-time stamp% and assign it to now.

• BB begins an end-of-line comment A*ines and B. 0omments are ignored by the

JavaScript engine but important in ep!aining your codes to others Aand to yourse!f threedays !aterB.


10/98

• *ine dec!ares a variab!e ca!!ed hrs. It a!so invo3es the function get'ours() on ob(ect

now% in the form of now.get'ours()% to retrieve the hour part of ob(ect now% and assign it

to variab!e hrs. *ines and 14% simi!ar!y% hand!e the minutes and seconds.

• *ine 12 to 1) use document.writeln() to :rite to the current document. writeln()

A:rite-!ineB :rites a ne:!ine ALnB after the given string. 'a3e note that bro:ser ignoresetra :hite space Ane:!ines% b!an3s% tabsB in an H'M* documentG you need to :rite a

... or
tag to as3 the bro:ser to disp!ay a !ine brea3.

• *ines 1-24 contains a conditional if-then-else statement. 6epending on the va!ue of hrs%

one of the messages :i!! be disp!ayed.

T59

1. Modify the above script to print the current date% month% year and day of the :ee3.

A ints" ,se functions getDate()% get"onth()% get#ull=ear() and getDay() of a Date

ob(ect. getDate() returns 1-&1. get"onth() returns 4 to 11 for January to 6ecember.get#ull=ear() returns a )-digit year. getDay() returns 4 to for Sunday to SaturdayB.

2. ,se a conditiona! statement to print the day of the :ee3 in :ord Ai.e.% 4 for Sunday% 1 forMonday and etc.B. A ints" ,se the if-elseif-elseif...else construct as fo!!o:.B

3. if ( condition-1 ) {4. block-1 5. } else if ( condition-2 ) {6. block-2 7. } else if ( condition-3 ) {8. block-3

9. ......1:. ......11. } else {12. block-n

}

+.: ',a-ple : ;oops

'he fo!!o:ing script prompts the user for a mu!tip!ier% and prints the mu!tip!es of 1 to 144 using a

for-!oop.

JS',;oop.t-l

12345678

/avaScript *,ample oop


11/98

JS',;oop.t-l

91:1112

1314151617

esting oop var multiplier ? prompt(@*nter a multiplier @) for (var number ? 1 number


12/98

+.6 ',a-ple 6 ore 'vent Handlers onload 7 onmouseover and onmouseout

JavaScript can be used to hand!e many types of events% in response to a user@s action or bro:ser@saction. #or eamp!e%

• onload" fires after bro:ser !oaded the page.

• onmouseover and onmouseout" fires :hen the user points the mouse pointer ata:ay

from the H'M* e!ement.


13/98

JS',>ore'vents.t-l

12

34567891:111213141516


14/98

JS',/iles.t-l

123

4567891:11121314

/avaScript *,ample Separating '"C SS and/avaScript

@'ello@ alert !o, appears after the page isloaded.

oint your mouse pointer here;;;

JS',/iles.css

123456

BM /S*,#iles.css MBP'A+S* @O#-8@

.highlight I color redJ

JS',/iles.s

123

4567891:11121314

BB /S*,#iles.&swindow.onload ? function() I init()

alert(@'ello;@)J

function init() I document.get*lement!yKd(@magic@).onmouseover ? function() I this.classame ? @highlight@ J document.get*lement!yKd(@magic@).onmouseout ? function() I this.classame ? @@ JJ

Ho& it Wor0s%

1. =!acing the scripting codes inside the H'M* page is not a good soft:are engineering

practice. Instead% the no:-preferred approach is to p!ace the scripts% as :e!! as 0SS sty!es%in eterna! fi!es% :hich can then uniform!y app!ied to a!! pages in your :ebsite.

2. *et@s begin :ith the H'M* fi!e. Co:% the H'M* fi!e 3eeps on!y the contents% no

presentation sty!e and nor programming !ogic.


15/98

1. R!in3 re!sty!esheet hrefJSE#i!es.cssT

'he 0SS sty!e sheet is 3ept in an eterna! fi!e% referenced via the above

tag. Cote" In H'M*)FH'M*1.4 you need to inc!ude attribute type?@te,tBcss@ in

the opening tag.

2. Rscript srcJSE#i!es.(sTRscriptT5!so% the JavaScript programming code is 3ept in an eterna! fi!e% referenced via

the above tag. 'a3e note that the c!osing tag is needed%

a!though there is no content. Cote" In H'M*)FH'M*1.4% you need to inc!ude attribute

type?@te,tB&avascript@ in the opening tag.

&. Rp idmagicT=oint your mouse pointer hereanipulatin3 te Contents of HT>; 'le-ents


16/98

?ou can se!ect H'M* e!ementAsB :ithin the current page via these functions"

1. document.getE!ement8yIdAanId B" returns the H'M* e!ement :ith id?@anId @% or null if

the id does not eist. 'he id attribute shou!d be uniue :ithin an H'M* document.

2. document.getE!ements8y'agCameAa#ag$ameB" returns an array of H'M* e!ements :iththe given H'M* tag name.

&. document.getE!ements8y0!assCameAaClass$ameB" returns an array of H'M* e!ements

having attribute class?@aClass$ame@.

). document.getE!ements8yCameAa$ameB" returns an array of H'M* e!ements havingattribute name?@a$ame@.

'o modify the content of an H'M* e!ement% you can assign a ne: va!ue to the inner'"

property of that e!ement. A'he property inner'" is rea!!y usefu! and is supported in most of

the bro:sers. It is% ho:ever% not inc!uded in the K&0 6OM specification7

/avaScript *,ample "odifying the ontent of '"*lements

JS',InnerHt-l.s

12345

BB /S*,Knner'tml.&swindow.onload ? init

function init() I document.get*lement!yKd(@btn1@).onclick ? change'eading1


17/98

JS',InnerHt-l.s

67

891:1112131415161718192:21222324252627

document.get*lement!yKd(@btn2@).onclick ? change'eading2 document.get*lement!yKd(@btn3@).onclick ? changearagraphJ

function change'eading1() I var elm ? document.get*lement!yKd(@heading1@) BB %neelement elm.inner'" ? @'ello@J

function change'eading2() I var elms ? document.get*lements!yagame(@h2@) BB Arrayof elements for (var i ? : i < elms.length iEE) I elmsQiR.inner'" ? @'ello again;@ JJ

function changearagraph() I var elms ? document.get*lements!ylassame(@para@) BBArray of elements for (var i ? : i < elms.length iEE) I elmsQiR.inner'" ? @'ello again and again;@ JJ

Ho& it &or0s%

1. 'his H'M* document contains a e!ement :ith an uniue id?@heading1@ A*ine

14B% t:o e!ements A*ine 11-12B% three

e!ements :ith class?@para@ A*ine 1&-1+B% and three :ith uniue id A*ine 1-1B.

2. In the user-defined function change'eading1()% :e use

document.get*lement!yKd(@heading1@) to se!ect the e!ement% and then modify

its inner'" property.

&. In change'eading2() function% :e use document.get*lements!yagame(@h2@) to

se!ect a!! the e!ements in an array elms. Ke then use a for-!oop to iterate through a!!

the e!ements in the array. 'he elms.length property 3eeps the !ength of the array.

). In changearagraph() function% :e usedocument.get*lements!ylassame(@para@) to se!ect a!! the

e!ements.

+. 'he page contains three buttons to trigger the functions defined A*ine 1-1B.

. 'he script contains a function init()% :hich is assigned as the onload hand!er via

window.onload?init. 'hat is% init() :i!! be triggered after the page is !oaded. 'he


18/98

init() function assigns onclick event hand!ers to the buttons% se!ected via

document.get*lement!yKd() using the uniue buttons@ id.

'D?" 'O6OP

+. ',a-ple Interceptin3 a Hyperlin0

'his eamp!e uses a script to intercept a hyper!in3 to put up a :arning message% then proceed to

the !in3.

JS',;in0.t-l

1234567891:1112

/avaScript *,ample Kntercept an 'yperlink

/avaScript *,ample1

JS',;in0.s

1234567891:

BB /S*,ink.&swindow.onload ? init

function init() I document.get*lement!yKd(@myink@).onclick ? show0arningJ

function show0arning() I return confirm(@0arning; roceed with care;@)J

Ho& it &or0s%

1. 'he H'M* page has an hyper!in3 :ith an uniue id.

2. 'he init() function assigns an onclick hand!er to the hyper!in3% se!ected viadocument.get*lement!yKd().

&. Khen the hyper!in3 is c!ic3ed% the onclick hand!er show0arning() triggered. If

confirm() returns true% the ne: page :i!! be !oadedG other:ise% the current page

remains.

'D?" 'O6OP


19/98

+.1 >ore !dvanced JavaScript ',a-ples

More 5dvanced JavaScript Eamp!es.

+.11 $ebu33in3 JavaScripts

5 good graphic debugger is a M,S' for programming in any !anguage. =rogramming inJavaScript% in particu!ar% reuires a graphic debugger. It is because JavaScripts are interpreted

and does not need to be compi!ed. Hence% there is no compi!er to sho: you the synta errors. 5

simp!e and trivia! synta error Ae.g.% missing brac3et% mis-spe!!ingB :i!! render the entire script

not :or3ab!e. Korst sti!!% you :ou!d not see any error message :hen the script did not :or3.0an you debug :ithout any error message or c!ue7

Kithout a graphic debugging% the on!y mean to debug JavaScript is to insert alert() at strategic

!ocations to print out se!ected data.

5fter modifying a JavaScript% I recommend that you use 0tr!-#+ to refresh the page% :hich sha!!!oad a fresh copy instead of !oading from the cache. ?ou might need to c!ear the bro:ser@s cache

or re-start the bro:ser% if you modification does not ta3e effect.

/1+ $eveloper Tools

In 0hrome and #irefo% you can press #12 to activate the deve!oper 'oo!s Ahence ca!!ed #12

6eve!oper 'oo!sB.

/irefo, /irebu3 plu34in (or Web $eveloper Tools) 4 'SS'"TI!;

Simp!y ;DE5' and M,S' H5$E for debugging H'M*0SS and JavaScript


20/98

2. Defresh A0tr!-#+B the page% and chec3 the error console A,nder 0onso!e ⇒ ErrorsB

for synta errors< 0orrect a!! the synta errors.

&. 'o trace the program% set brea%points at se!ected JavaScript statements% by c!ic3ing on the

right margin Ato the !eft of !ine numberB. 5 red circ!e sho:s up denoting a brea3point.

'a3e note that you can on!y set brea3point on statements :ith a green-bo!d !ine number.If your JavaScript statements do not have a green-bo!d !ine number% there are synta

errors on these statements. ?ou need to correct the synta errors and re!oad the page.P

). 'rigger the script Avia c!ic3ing button!in3% or re!oading the pageB. 'he eecution stops atthe first brea3point. ?ou can then step-over the statement Aor step-into functionB% and

inspect the variab!es by positioning the mouse pointer on the variab!eG or add the variab!e

to :atch.

+. ?ou can resume the eecution Avia the continue buttonB.

Cotes" If you get the error Script =ane! :as inactive during page !oad :hen s:itching into thescript pane!% you need to disab!e private bro:sing in #irefo@s 'oo!s⇒ Options ⇒ =rivacy.

#irefo a!so has a bui!t-in Keb 6eve!oper 'oo!s% having simi!ar functions as #irebug p!ug-in.

Cro-e $eveloper Tools

?ou can activate 0hrome@s 6eve!oper 'oo!s via 0ontro!⇒ More 'oo!s⇒ 6eve!oper 'oo!s.

Te console.log()

Instead of using alert() and document.write() to sho: the intermediate resu!ts% you can a!so

use console.log(messageQC element R)% :hich :rites the message and the va!ue of the element

to the error conso!e. It does not interfere the appearance you :eb page nor your norma!

operations.

#or eamp!e% modify the JavaScript in Eamp!e to print the va!ues of innerH'M* before

modification. ?ou need to turn on the conso!e Apress #12B to see the output.

JS',InnerHt-l$ebu3.s

12

34567891:11

BB /S*,Knner'tmlDebug.&swindow.onload ? init

function init() I document.get*lement!yKd(@btn1@).onclick ?change'eading1 document.get*lement!yKd(@btn2@).onclick ?change'eading2 document.get*lement!yKd(@btn3@).onclick ?changearagraphJ


21/98

JS',InnerHt-l$ebu3.s

12131415161718192:21222324

25262728293:

function change'eading1() I var elm ? document.get*lement!yKd(@heading1@) BB%ne element

console.log(elm.inner'") BB rint current valuebefore modification elm.inner'" ? @'ello@J

function change'eading2() I var elms ? document.get*lements!yagame(@h2@) BBArray of elements for (var i ? : i < elms.length iEE) I console.log(elmsQiR.inner'") elmsQiR.inner'" ? @'ello again;@ JJ

function changearagraph() I var elms ?document.get*lements!ylassame(@para@) BB Array ofelements for (var i ? : i < elms.length iEE) I console.log(elmsQiR.inner'") elmsQiR.inner'" ? @'ello again and again;@ JJ

+.1+ JavaScript I$'

=opu!ar JavaScript I6Es are"

"etBeans

?ou can :rite JavaScripts by creating a :eb app!ication under Cet8eans ADead 6eve!oping :eb

app!ication under Cet8eansB% via ne: ⇒ Others⇒ In 0ategories% se!ect Other ⇒ In

#i!e 'ypes% se!ect H'M* #i!e or JavaScript #i!e. Cet8eans provides content-assist Aorauto-comp!eteB feature% :hich great!y improves your productivity.

?ou need to use #irebug or Keb deve!oper 'oo!s to debug JavaScript.

'clipse

'O6OP

!ptana Studio

5n open source I6E Abased on Ec!ipseB% :hich supports JavaScript and 5(a.

https://www3.ntu.edu.sg/home/ehchua/programming/howto/NetBeans_HowTo.html#NetBeans_WebApphttps://www3.ntu.edu.sg/home/ehchua/programming/howto/NetBeans_HowTo.html#NetBeans_WebApphttps://www3.ntu.edu.sg/home/ehchua/programming/howto/NetBeans_HowTo.html#NetBeans_WebApphttps://www3.ntu.edu.sg/home/ehchua/programming/howto/NetBeans_HowTo.html#NetBeans_WebApp


22/98

8. JavaScript and HT>;

5s seen from the previous eamp!es% JavaScripts are embedded inside an H'M* document% andeecuted by the bro:ser. 'here are t:o occasions on :hich bro:ser eecutes JavaScript

instructions"

1. JavaScripts enc!osed in ... runs during !oading of the page.

2. Some JavaScripts% ca!!ed event handlers% run as a resu!t of the user@s or bro:ser@s actionAor event B. #or eamp!e% c!ic3ing a button AonclickB or !oaded a page AonloadB.

'here are% therefore% t:o p!aces to put your JavaScript"

1. bet:een and container tagsG and

2. inside the H'M* tags as the event hand!ers Asuch as onclick% onmouseover% onloadB%

e.g.% onclick?@ &avacripttatements@.

8.1 Te 'le-ent

'he ... e!ement contains the JavaScript programming statements. #or

eamp!e%

... =our /avaScript statements here ...

In H'M*)FH'M*1.4% you need to inc!ude the attribute type?@te,tB&avascript@ in the

opening tag.

8.+ In or %

?ou can p!ace your JavaScript in either the '*AD section Aca!!ed Header ScriptB or !%D= section

Aca!!ed 8ody ScriptB of an H'M* document. 'ypica!!y% g!oba! variab!es and function definitions

are p!aced in '*AD section% :hich :i!! a!:ays be !oaded and avai!ab!e to be used by the scripts in

the !%D= section. If you script refers to the 6OM e!ements. p!ace it before the % so as to

ensure that the 6OM is constructed. =!acing the outside the HE56 or 8O6? causes a

H'M*+ va!idation error.

8.8 ',ternal JavaScripts

'he no'-preferred approach is to 3eep the JavaScript in an eterna! fi!e :ith fi!e etension of

.&s% and reference it via the src AsourceB attribute as fo!!o:s"


23/98

'a3e note that the c!osing tag is needed a!though there is no contentero or more statements enc!osed in a pair of cur!y braces I statements J.

Co semico!on is needed after the c!osing brace.

:.: Variable7 ;iterals D Types

Variables D !ssi3n-ent #perator !"!


24/98

5 variab!e is a named storage !ocation that ho!ds a value% e.g.% sum% average% name and message.

• 5 variab!e name Aa3a identifier B must begins :ith a !etter Aa-% A-TB% underscore F$F% or

do!!ar sign FUF. Subseuent characters cou!d contain digits A:-9B. 'a3e that that (Luery

uses U% U()% :hich are va!id identifiers. Hyphen F-F and space are not a!!o:ed% hence%

font-sie% roman new% are CO' va!id identifiers.

• JavaScript is case sensitive. 5 +%S* is not a rose and is not a +ose.

• 5 variab!e is dec!ared using 3ey:ord var.

• ?ou can assign Aand re-assignB a va!ue to a variab!e using the assignment F?F operator.

;iterals

5 literal is a fied va!ue% e.g.% 5566% 3.14% @'ello@% true% that can be assigned to a variab!e% or

form part of an epression.

Types

JavaScript is ob(ect-oriented. 8ut% It supports both primitive types and ob(ects.

JavaScript supports these primitive types"

1. string" a seuence of characters. Strings !itera!s are enc!osed in a pair of sing!e uotes or

doub!e uotes Ae.g.% @'ello@% FworldFB.

2. number" ta3es both integer Ae.g.% 5566B or f!oating-point Ae.g.% 3.14159265B.

&. boo!ean" ta3es boo!ean !itera! of either true or false Ain !o:ercaseB.

). undefined" ta3es a specia! !itera! va!ue ca!!ed undefined. 'a3e note that undefined is

both a type and a !itera! va!ue.

+. symbo!" ne: in E0M5Script . 5 data type :hose instances are uniue and immutab!e.

JavaScript a!so supports these ob(ect types and va!ue A:e sha!! discuss ob(ect !aterB"

1. ob(ect" for genera! ob(ects.

2. function" for function ob(ects.

&. nu!!" 5 specia! !itera! va!ue for una!!ocated ob&ect.

,n!i3e most of the genera! programming !anguages Asuch as Java00NN0WB :hich are strong!y

type% JavaScript is loosely type Asimi!ar to most of the scripting !anguages such as ,CIF She!!


25/98

Script% =er!% =ythonB. ?ou do not have to ep!icit!y dec!are the type of a variab!e Asuch as int and

floatB during dec!aration. 'he type is decided 'hen a value is assigned to that variable. If a

number is assigned% the variab!e ta3es on the number type and can perform numeric operations

such as addition and subtraction. If a string is assigned% the variab!e ta3es on the string type and

can perform string operations such as string concatenation.

#perator tpeof

?ou can use the operator typeof to chec3 the type of a variab!e.

Te undefined Type and undefined ;iteral Value

5n undec!ared variab!e Avia var 3ey:ordB ta3es on a specia! type ca!!ed undefined. ?ou cannot

refer to its va!ue.

Khen a variab!e is dec!ared Avia var 3ey:ordB :ithout assigning an initia! va!ue% it ta3es on the

type undefined and ho!ds a specia! va!ue ca!!ed undefined Auninitialied is probab!y more precise7


26/98

console.log(Fvalue F E v1) BB value 55.66

BB Assign a boolean valuev1 ? falseconsole.log(Ftype F E typeof v1) BB type numberconsole.log(Fvalue F E v1) BB value 123

BM ob&ects MB

BB null ob&ectv1 ? nullconsole.log(Ftype F E typeof v1) BB type ob&ectconsole.log(Fvalue F E v1) BB value null

BB ob&ectv1 ? InameFpeterFC age21Jconsole.log(Ftype F E typeof v1) BB type ob&ectconsole.log(Fvalue F E v1) BB value Qob&ect %b&ectRconsole.log(Fvalue F E v1.name) BB value peterconsole.log(Fvalue F E v1.age) BB value 21

BB Date ob&ectv1 ? new Date()console.log(Ftype F E typeof v1) BB type ob&ectconsole.log(Fvalue F E v1) BB value ue "ay 26 2:15 ::3512"E:8:: (S)

BB #unction ob&ectv1 ? function() I return FhelloF Jconsole.log(Ftype F E typeof v1) BB type functionconsole.log(Fvalue F E v1) BB value function () I return FhelloF J

Constants

?ou can create a read-on!y% named constant :ith the 3ey:ord const Ain p!ace of varB. #or

eamp!e%

const SKT* ? 9

,nfortunate!y% the 3ey:ord const has yet to be :ide!y supported by :eb bro:sers. So don@t use.

:.6 Te number Type7 ;iterals D #perations

5 variab!e of type number ho!ds a number% either an integer or a f!oating-point number.

Integer !itera!s can be epressed in"

• 6ecima!" begins :ith a digit 1 to 9 Anot :B% e.g.% 123 or -456%

• Octa!" begins :ith a digit :% e.g.% :123 or -:456%


27/98

• Headecima!" begins :ith :, Aor :VB% e.g.% :,A1!2 or -:VA1!2.

• 8inary" begins :ith :b Aor :!B% e.g.% :b1::111:: or -:!11::11::. 8inary may not be

supported in some bro:sers.P

#!oating-point !itera!s can be epressed in the usua! form Ae.g.% 3.1416B or scientific notation%e.g.% -1.23e4% 4.56*-7.

JavaScript a!so provides some specia! number !itera!s"

• infinity" e.g.% 1B:

• -infinity" e.g.% -1B:

• CaC ACot-a-CumberB" e.g.% :B:% or converting the string F'elloF to a number.

!rit-etic #perations

5rithmetic operations% as tabu!ated be!o:% can be app!ied to numbers. 'he fo!!o:ing resu!ts are

obtained assuming that ,?5% y?2 before the operation.

#perator $escription ',a-ple (#"$7 "%) 5esult

N 5ddition > N yG > is /

-Subtraction Aor ,nary

CegationB> - yG > is &

X Mu!tip!ication > X yG > is 14

6ivision > yG > is 2.+

Modu!us A6ivision

DemainderB> yG > is 1

NN,nary =re- or =ost-

Increment

y NNG > NNG

Same as" y G N1G

N1G > G

y is +G > is /G

is /

--,nary =re- or =ost-

6ecrement

y --G > --GSame as" -1G y G >

G -1G

y is )G > is )G

is &

In JavaScript% arithmetic operations are a!:ays performed in doub!e-precision f!oating-point.

'hat is% 1B2 gives :.5 Ainstead of 4 in Java00NNB. ?ou may use the bui!t-in functionparseKnt() to truncate a f!oating-point va!ue to an integer% e.g.% parseKnt(55.66) and

parseKnt(@55.66@) gives 55. ?ou may a!so use the bui!t-in mathematica! functions such as

"ath.round()% "ath.floor()% "ath.ceil() for converting a f!oating-point number to an

integer.

!rit-etic cu- !ssi3n-ent #perators


28/98

'hese are short-hand operators to combine t:o operations.

#perator $escription ',a-ple 5esult

N 5ddition cum 5ssignment N yG Same as" N yG

- Subtraction cum 5ssignment - yG Same as" - yG

X Mu!tip!ication cum 5ssignment X yG Same as" X yG 6ivision cum 5ssignment yG Same as" yG

Modu!us cum 5ssignment yG Same as" yG

Te &umber #perations

• parseIntAatring B" =arse the aString unti! the first non-digit% and return the numberG or

a.

• parse#!oatAatring B"

• Math.roundAa$umber B% Math.f!oorAa$umber B% Math.cei!Aa$umber B"

• Math.randomAB" ;enerate a random number bet:een 4 Ainc!usiveB and 1 Aec!usiveB.

• isCaCAatring B" return true if the aString is not a number. #or eamp!e%

• console.log(isa(F123F)) BB false

• console.log(isa(F1.23F)) BB falseconsole.log(isa(F123abcF)) BB true

It is interesting to note that JavaScript does not have counterpart functions !i3eisumber()% isumeric().

• CumberAatring B" Deturn the number represented by atring % or a. 'a3e that that this

function name begins :ith uppercase% because this is a type casting operation.

• .to#iedAdeciaml)lacesB" Deturn this numberstring to the given number of decima!

p!aces. #or eamp!e%

• var n ? 1.2345

• console.log(n.to#i,ed(2)) BB 1.23

console.log(n) BB 1.2345 - o change;

:.= Te string Type7 ;iterals D #perations

5 string is a seuence of characters enc!osed :ithin a pair of single uotes or double uotes

Ae.g.% @'ello@% FworldF% @5566@% F3.1416FB. ?ou can use an escape se!uence to represent

specia! characters Asuch as Ln for ne:-!ine% Lt for tab% and Luhhhh for ,nicode characterBG and to

reso!ve conf!ict Ae.g.% L@% LF% LLB.


29/98

,n!i3e Java00NN% but !i3e H'M*0SS@s attributes% you can use either sing!e uotes or doub!e

uotes for string. 'his is handy as you can use sing!e uotes if the string contains doub!e

uotes Ae.g.% FFB% :ithout using the escape seuences Ae.g.% @@B.

JavaScript is dynamically-type% and performs type conversion automatica!!y. Khen a string va!ue is used in arithmetic operations Asuch as subtraction or mu!tip!icationB% JavaScript runtimeautomatica!!y converts the string to a number if it represents a va!id numberG or a specia!

number ca!!ed a Anot-a-numberB other:ise. #or eamp!e%

BB Kn arithmetic operationsC a string is converted to the number or a.console.log(F55F - F66F) BB gives number -11 (subtraction)console.log(F55F M 2) BB gives number 11: (multiplication)console.log(F'elloF - 1) BB gives number a (subtraction failed)

Te !'! #perator !ddition or Concatenation%

If both the operands to a FEF operator are numbers% it performs the usua! numeric addition.Ho:ever% if one Aor bothB of the operand is a string% the FEF operator is overloaded to perform

string concatenation. 'he other operand :i!! be converted to a string% if necessary. #or

eamp!e%

BB FEF operator is overloaded to perform string concatenation if one of theoperands is a stringconsole.log(11 E 22) BB gives umber 33 (usual addition)console.log(F11F E F22F) BB gives string 1122 (concatenation)console.log(F11F E 22) BB gives string 1122 (concatenation)console.log(F'elloF E 22) BB gives string 'ello22 (concatenation)

Built4in /unctions parsent()7 parseloat() and &umber()

'o convert a numeric string to a number% you cou!d use the bui!t-in functions parseKnt() or

parse#loat()% :hich returns a number if conversion is successfu!G or a other:ise. #or

eamp!e%

var magic ? @11@ BB stringconsole.log(magic E 22) BB string concatenation - string @[email protected](parseKnt(magic) E 22) BB Addition - number 33console.log(parseKnt(magic) E @22@) BB string concatenation - string @[email protected](parseKnt(magic) E parse#loat(@22.33@)) BB Addition - number33.33

console.log(parseKnt(@abc@)) BB a

'a3e note that parseKnt() :or3s as !ong as the string begins :ith digits. It :i!! parse up to the

first non-digit. #or eamp!e%

console.log(parseKnt(@1:p,@)) BB +eturn number 1:


30/98

?ou can a!so use the function umber()% :hich converts the ob(ect argument to a number that

represents the ob(ect@s va!ueG or a if conversion fai!s. #or eamp!e%

var magic ? @[email protected](magic E 8) BB string concatenationconsole.log(umber(magic) E 8) BB addition

BB umber() also works on %b&ect such as DateC e.g.Cconsole.log(new Date(2:15C 5C 1C 12C 34C 56))

Strin3s ?roperties

• .!ength" E.g.% atring .length returns the !ength of the string.

Strin3s #perations

• .to,pper0aseAB" returns the uppercase string.

• .to*o:er0aseAB" returns the !o:ercase string.

• .char5tAindexB" returns the character at the index position. Inde begins from 4. Cegative

inde can be used% :hich counts from the end of the string.

• .substringAbeginIndex% endIndexB" returns the substring from beginIndex Ainc!usiveB to

endIndex Aec!usiveB.

• .substrAbeginIndex% lengthB" returns the substring from beginIndex of length.

• .indeOfA searchtring % fromIndex7B" Deturn the beginning inde of the first occurrence of

searchstring % starting from an optiona! fromIndex Adefau!t of 4BG or -1 if not found.

• .!astIndeOfA searchtring % fromIndex7B" Deturn the beginning inde of the last

occurrence of substring % starting from an optiona! fromIndex Adefau!t of

string.lengthBG or -1 if not found.

• .s!iceAbeginIndex% endIndexB" Deturn the substring from beginIndex Ainc!usiveB to

endIndex Aec!usiveB.

•.sp!itAdelimiter B" returns an array by sp!itting the string using delimiter .

• SearchingModifying Strings using Degu!ar Epression" See Degu!ar Epression.

>ulti4line Strin3

?ou can create a mu!ti-!ine string via bac3-uotes Y...Y. #or eamp!e%

https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#regexhttps://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Introduction.html#regex


31/98

console.log(Wstring line 1string line 2W)BB Same asconsole.log(Fstring line 1Lnstring line 2F)

:.@ Te boolean Type7 ;iterals D #perations

5 variab!e of the type boolean ho!ds a va!ue of either true of false. true and false are

3ey:ords in JavaScript.

5s mentioned% JavaScript performs automatic type conversion if necessary. 6uring the type

conversion% the fo!!o:ing va!ues are converted to false"

1. number :

2. number a ACot-a-CumberB%

&. empty string A@@% FFB%

). undefined va!ue%

+. boo!ean false%

. null Auna!!ocatedB ob(ect.

5!! the other va!ues are converted to true.

?ou need to memori>e this" ;value return true if value is one of these va!ues" :% a% @@%

undefined% false% and null.

Co-parison #perators

'he fo!!o:ing re!ationa! operators% :hich produce a boolean resu!t% are defined in JavaScript.

'he resu!ts are obtained assuming num?8% str?F8F.

#perator $escription',a-ple (num"*7

str"!*!)5esult

Eua! 'o

Ain $a!ueB

num ?? 8str ?? F8F

num ?? str8 ?? F8F

truetrue

truetrue


32/98

T ;reater 'han

T;reater 'han or

Eua! 'o

R *ess 'han

R

*ess 'han or Eua!

'o

""" vs. ""

'he strict!y eua!ity operator ??? returns true if both operands have the same type and same

va!ueG :hi!e ?? returns true if both operands have the same va!ue% but may or may not be the

same type.

JavaScript needs to provide t:o different eua!ity operators% because it is !oose!y type and carriesout automatic type conversion in many situation. #or eamp!e%

• Khen a number is compared :ith a string% the string is converted to a number Aor a if itdoes not contain a va!id numberB. Hence% (8 ?? @8@) returns true. 8ut% (8 ??? @8@)

returns false% because the operands are not of the same type.

• ???% ;??% ??% ;? can be app!ied to boo!ean Aand a!! the JavaScript typesB% e.g.% (@@ ??

false) gives true Abecause empty string is converted to falseBG but (@@ ??? false)

gives true.

• It is DE0OMMECE6 to use ??? Aor ;??B% instead of ?? Aor ;?B% un!ess you are certain

that type is not important.

Strin3 Sortin3 (Collation) #rder

Khen t:o strings are compared% the encoding order A5S0II or ,nicode tab!eB is used. Hence%

string @8@ is greater than string @1:@.

#or eamp!e%

BB omparing numbersvar , ? 8 BB typenumberC value8console.log(, ?? 8) BB true (same value)console.log(, ?? F8F) BB true (string converted to number)console.log(, ??? 8) BB true (same type and value)console.log(, ??? F8F) BB false (different type)

console.log(, < 1:) BB trueconsole.log(, < F1:F) BB true (string converted to number)

BB omparing two stringsconsole.log(F8F < F1:F) BB false (comparing two strings alphabetically)console.log(F8F < F9F) BB true (comparing two stringsC not numbers)console.log(F'elloF < FhiF) BB true (comparing two strings)


33/98

;o3ical #perators

'he fo!!o:ing boo!ean Aor !ogica!B operators are provided in JavaScript"

#perator $escription ',a-ple 5esult

99 *ogica! 5C6|| *ogica! OD

< *ogica! CO'

Sort4Circuit 'valuation for Boolean ',pressions

Eva!uation of !ogica! operations are a!:ays short-circuited . 'hat is% the operation is terminated as

soon as the resu!t is certain% e.g.% Afalse XX ...B is short-circuited to give false% Atrue

YY ...B gives true% the ... :i!! not be eva!uated.

:.A ',plicit Type Conversion

'he JavaScript runtime performs type conversion automatica!!y. Ho:ever% at times% you may

need to convert from one type to another ep!icit!y.

0onverting a number to a string" Simp!y concatenate the number :ith an empty string% e.g.%

@@ E 5 gives @5@.

0onverting a string to a number" ,se bui!t-in functions parseKnt( string )%

parse#loat( string ) or umber( string ) to convert a string :hich contains a valid number. #or

eamp!e% parseKnt(@55@) gives 55% parseKnt(55.66) gives 55% parseKnt(@55.66@) gives 55%

parse#loat(@55.66@) gives 55.66% parseKnt(@55p,@) gives 55% but parseKnt(@'ello@)

gives a.

0onverting a f!oat to an integer" ,se parseKnt() Ae.g.% parseKnt(55.66) gives 55B% or bui!t-in

mathematica! functions such as "ath.round()% "ath.ceil() or "ath.floor().

:. /lo& Control 4 $ecision

JavaScript provides these f!o: contro! construct. 'he synta is the same as Java00NN.

Synta, ',a-pleif (condition) {

tre!lock;}

if (day ??? FsatF YY day ??? FsunF) I

alert(FSuper weekend;F)J

if (condition) { tre!lock;} else { "alse!lock;}

if (day ??? FsatF YY day ??? FsunF) I alert(FSuper weekend;F)J else I alert(FKt is a weekday...F)J

variable " (condition)

yet another insignificant programming notes.docx

Documents

Transcript of yet another insignificant programming notes.docx