Web Design Essentials_final

8/9/2019 Web Design Essentials_final

1/49

Page 1 of 49Keyhole Software, LLC. 8900 State Line Road, Suite 455 Leawood, KS 6606 !el 8""#51#""69htt$%&&'eyhole(oftware.)o*&

Co$yright + 014 Keyhole Software, LLC. ll right( re(er-ed.
http://keyholesoftware.com/http://keyholesoftware.com/


2/49

INTRODUCTION

o/ile de-i)e $roliferation i( for)ing enter$ri(e ! de$art*ent( to )hange. !hey *u(t now (u$$ort *o/ile

de-i)e(, whi)h further etend( to the need for the de-elo$*ent of *o/ile#friendly a$$li)ation(. ( u(er( get

*ore and *ore (a--y, (i*$ly a))e((ing ei(ting a$$li)ation( -ia a *o/ile /row(er 2u(t won3t fly.

nter the net $ha(e of we/ de-elo$*ent% (ingle $age a$$li)ation SP de-elo$*ent u(ing 7!L5 with

a-aS)ri$t.

SP( allow the enter$ri(e to $ro-ide u(er( with ri)h, re($on(i-e a$$li)ation( through the /row(er. 7!L5

with a-aS)ri$t ha( o$ened the door to de-i)e#inde$endent u(er interfa)e(. !hi( )reate( eten(i-e )o(t

(a-ing( for the enter$ri(e gone i( the ne)e((ity to de-elo$ *ulti$le $latfor*( to rea)h u(er( on -ariou(

o$erating (y(te*(. *$le*enting a-aS)ri$t and 7!L5 with re($on(i-e de(ign $rin)i$le( (ol-e( a $ain $oint

# how to rea)h u(er( on -ariou( $latfor*( without di*ini(hing the u(er e$erien)e.

nother -ia/le rea(on for thi( (hift i( that it eli*inate( a wea' ($ot # relia/ility u$on /row(er $lug#in(. !he

$lug#in a$$roa)h of the $a(t ha( wor'ed well enough, /ut with u(er( fre:uently e$erien)ing )o*$ati/ility

$ro/le*(, lengthy loading ti*e(, and $erfor*an)e i((ue( in (o*e )ir)u*(tan)e(, a $lug#in free a$$roa)h )an

)reate i*$ro-e*ent in the u(er e$erien)e. Co*/ining that with /row(er(; i*$ro-ed ($eed for a-aS)ri$t

ee)ution, 7!L5 and a-aS)ri$t (ol-e( *any we/ $ro/le*( that )urrently $lague the enter$ri(e.


3/49

TABLE OF CONTENTSSECTION ONE:JAVASCRIPT ESSENTIALS...............................................................................5

Environment................................................................................................................5Open Source Steps Up.............................................................................................................................6

Modularity/Structure....................................................................................................6Memory................................................................................................................................................ .....6Whitespace and Semicolons........................................................................................................................ 7Comments....................................................................................................................................................7

rithmetic Operators..................................................................................................................................... 7!! and !!!..................................................................................................................................................."#lo$ Control................................................................................................................................................."Code %loc&s.................................................................................................................................................'

M(/Common)S Module Speci*ications......................................................................................................'

(ata +ypes..................................................................................................................',rimitive......................................................................................................................................................-

rrays......................................................................................................................................................... -rray Operations........................................................................................................................................-Unde*ined and ull.....................................................................................................................................--

O01ects......................................................................................................................--%uilt23n O01ects...........................................................................................................................................-4Creatin O01ects......................................................................................................................................... -4,rototypes.................................................................................................................................................. -

#unctions..................................................................................................................-7nonymous/Closures.................................................................................................................................. -7Memoiin..................................................................................................................................................-"E8ecution Conte8t....................................................................................................................................... -"#unction Closures in ction and Modularity Support..................................................................................-'(ependency 3n1ection.................................................................................................................................4-

E8ceptions/Errors......................................................................................................4-)9.......................................................................................................................................................... 44

Summary...................................................................................................................4:

SECTION TWO:HTML5 ESSENTIALS FOR SPA DEVELOPMENT IN THE ENTERPRISE......24

What 3s ;+M


4/49

Mo0ility and ;+M


5/49

Sec!"# O#e: J$%$Sc&!' E((e#!$)(

!hi( (e)tion )o-er(%

a-aS)ri$t ee)ution en-iron*ent !he (tru)ture of the a-aS)ri$t language

!he i*$ortan)e of o/2e)t(

Prototy$e( and inheritan)e

?un)tion( and )lo(ure(

@

f you;-e /een de-elo$ing enter$ri(e we/ a$$li)ation(, it;( li'ely that you ha-e a$$lied a-aS)ri$t in (o*e

fa(hion A $ro/a/ly to -alidate u(er in$ut with a a-aS)ri$t fun)tion that -alidate( a for* )ontrol, *ani$ulate

an 7!L do)u*ent#o/2e)t *odel =B for a u(er interfa)e effe)t, or e-en to u(e @ to a))e(( the (er-er

to eli*inate a $age refre(h.

Single $age a$$li)ation SP ar)hite)ture( allow ri)h, re($on(i-e a$$li)ation u(er interfa)e( to /e

de-elo$ed. !here are *any fra*ewor'( and a$$roa)he( a-aila/le, e)luding $lug#in te)hnologie( that are

a-aS)ri$t#/a(ed. !hi( *ean( that de-elo$er( need a dee$er under(tanding of the a-aS)ri$t language

feature(. !hi( *ini#/oo' (e)tion a((u*e( you ha-e $rogra**ing e$erien)e in a traditional o/2e)t#oriented

language li'e a-a or C, and introdu)e( feature( of a-aS)ri$t that allow( it to /e a general $ur$o(e

$rogra**ing language. Dou *ay /e (ur$ri(ed /y it( e$re((i-ene(( and o/2e)t#oriented )a$a/ilitie(.

ENVIRONMENTBne )lue that a-aS)ri$t wa( not originally intended to /e a general#$ur$o(e language i( the fa)t that a

/row(er i( re:uired to ee)ute it. !he (ni$$et /elow (how( how an 7!L $age load( a a-aS)ri$t fun)tion

defined inline. Eor*ally thi( a((u*e( the 7!L $age and a-aS)ri$t file re(ide on a we/ (er-er.

L!(!#* + , HTML '$*e )"$-!#* $ J$%$Sc&!' /#c!"#

function sayhello() { alert('hello world'); }

...

!he sayhello()fun)tion defined a/o-e )an in-o'ed and ee)uted in a -ariety of way(, in)luding%

D Putting inline a-aS)ri$t tag( at the /eginning or end of the file when the 7!L for* /utton i()li)'ed.

D Calling the fun)tion when a for* /utton i( )li)'ed.D Putting ele*ent( at the /eginning or end of an 7!L do)u*ent, de$ending on

the /row(er you;re u(ing.

D e)uting a-aS)ri$t on a $age load u(ing the 2Fuery fra*ewor'.( you )an (ee, there i( no *ain *ethod or entry#$oint *e)hani(* li'e other language(, (o a /row(er

and an 7!L $age load of (o*e 'ind i( re:uired to ee)ute a-aS)ri$t. So*e (er-er#(ide a-a (olution( ha-e

re)ently /e)o*e a-aila/le, /ut generally ($ea'ing a-aS)ri$t for G de-elo$*ent re:uire( a /row(er.




6/49

O'e# S"/&ce Se'( U'

Lu)'ily, inno-ation( of the o$en#(our)e )o**unity ha-e filled thi( need. n-iron*ent( ha-e /een )reated

that allow a-aS)ri$t to /e ee)uted out(ide of a /row(er, )o**only referred to a( Hheadle((,I or (er-er#(ide

a-aS)ri$t.

Eode.2( i( one $o$ular o$en#(our)e fra*ewor' that $ro-ide( a a-aS)ri$t runti*e en-iron*ent out(ide of

a /row(er. Jith Eode.2(, a-aS)ri$t )an /e ee)uted fro* a )o**and line or /y ($e)ifying file(. Eode.2( i(

al(o a-aila/le for *o(t o$erating (y(te*(. Phanto*.2( i( another -ia/le o$tion on the *ar'et. lthough

(i*ilar, the intent of the headle(( en-iron*ent( differ( /etween the two. Phanto*.2( ha( 7!L =B

do)u*ent#o/2e)t *odel a-aila/le while Eode.2( doe( not.


7/49

GLOBALVARIABLESJhen a $age with a-aS)ri$t i( loaded, o/2e)t( and -aria/le( )reated and defined with the $age )on(u*e

*e*ory. !he gar/age )olle)tor will tra)' and re)lai* *e*ory /y o/2e)t( that are no longer referen)ed /y

anything. 7owe-er there i( a way to define glo/al o/2e)t( that i( -i(i/le during the lifeti*e of the /row(er

ee)uta/le within whi)h a-aS)ri$t i( ee)uting. runti*e window -aria/le i( -i(i/le and referen)e( a

glo/ally a-aila/le o/2e)t. Dou )an freely add&atta)h o/2e)t( to the window -aria/le. !he following )ode (how(

an ea*$le of a glo/al#-aria/le definition.

window.user-d = doe; Global variablear user-d = doe; Local variable

t;( i*$ortant to note that if you define a -aria/le without R, then it;( atta)hed to the glo/al window

o/2e)t. !he following )ode (how( thi(%

user-d = doe; Attached to window

BEST PRACTICE:Dou (hould rarely need to define glo/al -aria/le( /y atta)hing to the window $ro$erty. ?or

an SP, *o(t fra*ewor'( will $ro-ide a $attern for defining glo/al o/2e)t(.

W!e('$ce $#- Se!c")"#(

Pre-iou( tutorial( ha-e de()ri/ed the origin( of a-aS)ri$t and $ointed out it( feature( a( a dyna*i) o/2e)t#/a(ed language. !he na*e Ha-aS)ri$tI li'ely )a*e fro* the (i*ilarity with the a-a (ynta. Li'e a-a,

a-aS)ri$t (ynta i( (i*$le, free#for*, and )a(e#(en(iti-e. $re((ion( are ter*inated with (e*i)olon(.

L!(!#* 2 , A# e3$')e " J$%$Sc&!' (1#$3

ar abc = 'a' 0 'b' 0 'c';ar def =

'd' 0 'e' 0 'f';

console.lo&(abc 0 def);

Se*i)olon( are re:uired to ter*inate e$re((ion(, /ut a-aS)ri$t )ut( (la)' to lay de-elo$er( who forget

to do (o. 7owe-er, it;( /e(t $ra)ti)e to alway( ter*inate e$re((ion( with a (e*i)olon.

C"e#(

Co**ent( are non#ee)uta/le line( of )ode that )an hel$ do)u*ent your )ode. Dou )an define /lo)' and line

)o**ent(.

/1 2loc! co,,ents1/

...

// line co,,ents

...

ar a = abc; // end of line co,,ent

A&!e!c O'e&$"&(

-aila/le o$erator( are tho(e you would e$e)t for arith*eti) o$eration( M, #, &, N. !he M i( o-erloaded to

(u$$ort (tring )on)atenation. a-aS)ri$t (u$$ort( unary in)re*ent and de)re*ent o$erator( in the (a*e

fa(hion a( C, C, and a-a. Li(ting > (how( (o*e o$erator( in a)tion.

Page " of 49Keyhole Software, LLC. 8900 State Line Road, Suite 455 Leawood, KS 6606 !el 8""#51#""69htt$%&&'eyhole(oftware.)o*&



8/49

L!(!#* , A# e3$')e " $&!e!c "'e&$"&(

ar count = 3; Increment/decrementconsole.lo&( 44count ); // lo&s 5console.lo&( 00count ); // lo&s 3console.lo&( count44 ); // lo&s 5console.lo&( count00 ); // lo&s 3

ar % = 3; Assignmentar y0= 3; // y = 67;ar y4= 3; // y = 3;ar y1= 3; // y = 83;ar y/= 3; // y = 3;ar s6 = hello; String concatenationar s8 = world;ar s9 = s6 0 s8;

$#-

!he a((ign*ent o$eration OO i( u(ed for e:uality )he)'(. t will $erfor* ty$e )on-er(ion( /efore )he)'ing

e:uality. a-aS)ri$t al(o introdu)e( the OOO o$erator whi)h )he)'( for e:uality. t will not $erfor* ty$e

)on-er(ion. Study the e$re((ion( in li(ting 4 /elow and you;ll (ee thi( nuan)e.

L!(!#* 4 , A# e3$')e "

console.lo&( 7 == '' ); Logs true, performs type conversionconsole.lo&( 7 === '' ); Logs false, no type conversion

console.lo& ( 3 == '3'); Logs true, performs type conversionconsole.lo& ( 3 === '3'); Logs false, no type conversion

console.lo& ( true == '6'); Logs true, performs type conversionconsole.lo& ( true === '6'); Logs false, no type conversion.

BEST PRACTICE:?or (afety, alway( u(e the OOO o$eration for e:uality )he)'(.

F)"6 C"#&")

e)ution $ath( are )ontrolled u(ing if&el(e and loo$ing )o**and(. !hey are fairly (traightforward, /a(i)ally

the (a*e a( you ha-e u(ed in al*o(t all language(.

L!(!#* 5 , A# e3$')e " e3ec/!"#7'$ c"#&")

ar list = :68953;for (ite, in list) { For loop console.lo&(ite,);}

for each (ite, in list) { Same as for, deprecated, dont use console.lo&(ite,);}

for (ar i=7;i 7) { "o loop console.lo&(ount = 0count44);}




9/49

C"-e B)"c8(

a-aS)ri$t e$re((ion( )an /e en)lo(ed in )ode /lo)'( that )an /e atta)hed to fun)tion definition( or defined

to delineate )onditional and loo$ing e$re((ion(. Code /lo)'( are defined u(ing Q )hara)ter(.

function() {...}

-f/$lseif () {?}

@or Aoopfor (< e%pression>) {?}

SCOPES)o$ing around )ode /lo)'( with a-aS)ri$t( differ( fro* what you would e$e)t with other language(.

aria/le( defined within )onditional and loo$ing )on(tru)t( are not lo)ally ()o$ed to an en)lo(ing )ode /lo)'.

!hi( i( i*$ortant to under(tand in order to $re-ent $o((i/le (ide effe)t(.

Jhat would you e$e)t the )on(ole out$ut to /e if the e$re((ion( that follow are ee)uted

ar a = 'abc';

if (true) {ar a = 'def';

}

console.lo&(a);

Dou *ay /e (ur$ri(ed to learn that the out$ut would /e def, and not abc.!he -aria/le defined in the

)onditional )ode /lo)' o-erride( the outer -aria/le definition(. S)o$ing /eha-ior within fun)tion )ode /lo)'(

/eha-e( a( you would e$e)t.

7ere i( another ea*$le. Jhat would you e$e)t the )on(ole out$ut to /e when the(e e$re((ion( are

ee)uted

ar a = 'abc';

function s() { ar a = 'def';}

s(); Bconsole.lo&(a); #!ecute function

aria/le a i( -i(i/le and ()o$ed to fun)tion s() (o the log out$ut would /e abc;. =id you an(wer

)orre)tly

AMDC""#JS M"-/)e S'ec!!c$!"#(

ffort( ha-e /een *ade to *a'e a-aS)ri$t a -ia/le (er-er#(ide language. odularity wa( one area that

needed to /e addre((ed, (o o$en#(our)e $ro2e)t( )reated a )o**on *odule P. Bne $o$ular o$en#(our)e

$ro2e)t i(C ommon) S, whi)h define( an P for defining *odule( and de$enden)ie(. nother $o$ular *odule

P i( =, whi)h (tand( for a(yn)hronou( *odule definition.


10/49

ea(ier to *aintain, it al(o re:uire( a )o*$ilation (te$ that a-aS)ri$t doe( not, a( e$re((ion( are

inter$reted at runti*e. !here i( *u)h de/ate in the ! )o**unity regarding the agility and flei/ility of

dyna*i) -er(u( ty$ed language(.


11/49

U#-e!#e- $#- N/))

a-aS)ri$t introdu)e( a Hnot definedI data ty$e. !hi( i( not to /e )onfu(ed with a null -alue, a( they are not

the (a*e. gain, )o*$iled language( do not need an undefined di(tin)tion, (in)e anything not defined will

re(ult in a )o*$ilation error. Gndefined data ty$e( are (et to -aria/le( that do not ha-e a -alue a((igned.

!he null data ty$e re$re(ent( a -alue of null. !he (ni$$et /elow illu(trate( the differen)e(%

ar ;

console.lo&(); 0ndefinedar = null;console.lo&(); $ull

Gndefined and null )au(e( )onfu(ion a( *any a((u*e that -aria/le( and o/2e)t $ro$ertie( are

auto*ati)ally a((igned a null -alue when defined. !he ea*$le a/o-e (how( that they are a((igned an

undefined -alue or ty$e. Sin)e undefined e:ual( nothing, a-aS)ri$t $ro-ide( a (hort)ut *e)hani(* to )he)'

for undefined -aria/le(, a( with the e$re((ion /elow. !hi( wor'( for undefined and null.

ar ;if () {console.lo&{true)} 1ruear = null;if () console.lo&(true); 1rue

Sin)e undefined i( a((igned /y default, it;( (afer to u(e the (hort)ut *ethod to )he)' for e*$ty data-alue(, in(tead of doing null )he)'(, a( (hown /elow%

ar = null;if ( == null) { console.lo&(*alue is null); }

f the de-elo$er forget( to initialie a data -alue with null, a /ug in logi) )ould o))ur.

BEST PRACTICE: =on;t initialie your -aria/le( and $ro$ertie( with null. Rely u$on a-aS)ri$t;( undefined

default and $erfor* )he)'( u(ing the if(alue)default -alue.

OBECTS-erything in a-aS)ri$t i( an o/2e)t. String(, nu*/er(, array(, and e-en fun)tion( are o/2e)t( that ha-e

$ro$ertie( and *ethod(. Sy(te* o/2e)t( (u$$lied /y the runti*e en-iron*ent i*$le*ent o/2e)t( for

$ri*iti-e ty$e(. !hey are (o*eti*e( )alled Hwra$$er o/2e)t(,I a( they wra$ their re($e)ti-e $ri*iti-e data

ty$e(.

7ere are (o*e e$re((ion( that (end *ethod( )all( to (o*e high#le-el $ri*iti-e o/2e)t(%

ar s = 'hello world'; Stringconsole.lo&(s.len&th); $umber, displays ((

ar a,ount = 677.68953; $umberconsole.lo&(a,ount.to@i%ed(8)); $umber, displays ()).(2

Li'e o/2e)t#oriented language(, a-aS)ri$t al(o ha( a new o$erator. t )an /e u(ed to )reate $ri*iti-e

o/2e)t in(tan)e(.

Li(ting 9 (how( (o*e ea*$le( that u(e the new o$erator. !here;( *ore a/out the new o$erator furtheralong in thi( (e)tion, (o (tay tuned.

L!(!#* 9 , Ne6 "'e&$"&( !# J$%$Sc&!'

ar s = 'hello world' Stringconsole.lo&(s.len&th); "isplays ((

ar a,ount = 677.68953; $umberconsole.lo&(a,ount.to@i%ed(8)); "isplays ()).(2ar s = new #trin&('hello world'); String 3b4ectconsole.lo&(s.len&th); "isplays ((




12/49

ar a,ount = new Gu,ber(677.68953); $umber 3b4ectconsole.lo&(a,ount.to@i%ed(8)); "isplays ()).(2

ar d = new Hate(); "ate 3b4ectconsole.lo&(d.&etIonth()); "isplays current date month 5)'((6

B/!)7I# O=>ec(

-erything in a-aS)ri$t i( an o/2e)t $ro-ided /y the a-aS)ri$t runti*e en-iron*ent. 7ere i( a li(t ofa-aila/le o/2e)t ty$e(%

St!"n#A rray of )hara)ter -alue(

Boo$ean A Conditional true&fal(e

DateA Re$re(ent( date ti*e -alue

N%m&e!A Re$re(ent( all integral and floating $oint nu*eri) -alue(

MathA Pro-ide( *ethod( for *athe*ati)al fun)tion( (u)h a( a/(, log, tan, et).

'%n(t"onA e)uta/le /lo)' of )ode that )an a))e$t $ara*eter( and return a -alue

O&je(tA ec(

Dou;-e (een (y(te* o/2e)t( $ro-ided /y the a-aS)ri$t runti*e. ( in other o/2e)t#oriented language(,

)u(to*er or u(er#defined o/2e)t( )an /e )reated and u(ed. 7owe-er, a-aS)ri$t o/2e)t( differ fro* )la((i)

H)la((I#/a(ed o/2e)t#oriented language( whi)h ha-e inheritan)e, en)a$(ulation, and $oly*or$hi(*

)on(tru)t( /uilt into the language. a-aS)ri$t o/2e)t( are dyna*i) and to (u$$ort thi( dyna*i) /eha-ior,

a-aS)ri$t ta'e( a $rototy$e#/a(ed a$$roa)h to o/2e)t )reation. !he net (e)tion( (hould gi-e you a good

idea of how thi( wor'(.!here are two way( to )reate o/2e)t( with a-aS)ri$t% literally or with a )on(tru)tor fun)tion.

LITERALOBECTSLiteral a-aS)ri$t o/2e)t( are defined u(ing a-aS)ri$t B/2e)t Eotation SBE. So*e *ay thin' that SBE i(

2u(t a data for*at u(ed to tran(*it data fro* a (er-er or re*ote (y(te*. t i(, /ut it( real $ur$o(e i( to

define a-aS)ri$t o/2e)t( that ha-e $ro$ertie( and ee)uta/le *ethod( A a)tually fun)tion(.

( an ea*$le, )on(ider an o/2e)t that *odel( an a))ount with an =, na*e, and /alan)e $ro$ertie(, with

*ethod( that de/it and )redit the a))ount. ?igure (how( an a))ount#o/2e)t *odel and (our)e )ode u(ing

SBE for it( a-aS)ri$t i*$le*entation.

#iure 4 F ,etty2cash account2o01ect model and source code usin )SO




13/49

dditionally, li(ting 10, /elow, (how( a HliteralI a))ount#o/2e)t definition with de/it and )redit *ethod(

and rele-ant $ro$ertie(%

L!(!#* +0 , L!e&$) $cc"/#7"=>ec -e!#!!"#

ar account = { idJ 677 na,eJ 'Ketty ash' balanceJ 7.77 debitJ function(a,ount) { this.balance = this.balance 4 a,ount; return this; }

creditJ function(a,ount) { this.balance = this.balance 0 a,ount; return this; } };

Eoti)e in the li(ting a/o-e that the a))ount o/2e)t ha( $ro$ertie( re$re(enting a))ount =, /alan)e, and

na*e, along with *ethod( defined for de/iting and )rediting. ethod( are e-aluated again(t the o/2e)t

in(tan)e u(ing the H.I o$erator. Eoti)e how *ethod( )an )a()ade (in)e the *ethod i*$le*entation( return

this.!he e$re((ion /elow (how( the )a()ading de/it and )redit )all( to the a))ount o/2e)t%

account.credit(677.83).debit(37.L3);console.lo&('Bccount na,e='0account.na,e0' 2alance = '0account.balance);

!he dyna*i) nature of a-aS)ri$t (urfa)e( when adding new $ro$ertie( or *ethod(, a( you (i*$ly add

the* to the o/2e)t. 7ere;( how a close()a))ount *ethod )an /e dyna*i)ally added to the a))ount o/2e)t%

account.close = function() { this.balance = 7;}; Add new close function to account ob4ect

account.credit(677.83).debit(37.L3); "ebit/credit accountconsole.lo&('Bccount na,e='0account.na,e0' 2alance = '0account.balance);account.close(); 7lose the account

ll o/2e)t( are in(tan)e( of the a-aS)ri$t (y(te*;( o/2e)t ty$e, and ea)h i( (i*$ly )o*$ri(ed of an

a((o)iati-e array and a $rototy$e. Je;ll tal' *ore a/out that later. Li(ting 11 $ro-ide( (o*e in(ight into how

$ro$ertie( of an o/2e)t are (tored an a((o)iati-e array.

L!(!#* ++ , P&"'e&!e( ("&e- $( $# $(("c!$e- $&&$1

ar obect = { %J 677 8 Literal ob4ect yJ 877 addJ function() { console.lo&(this.% 0 this.y)} }

for (!ey in obect) {

console.lo&(!ey); 8 3utputs property names ! y add to the console}

Pro$erty ele*ent( )an /e a))e((ed u(ing the $ro$erty na*e. Li(ting 1 (how( a literal o/2e)t )reated a( a

*e)hani(* to *a$ (tate a//re-iation( to (tate na*e.

L!(!#* +2 , A# e3$')e " $&&$1 (/=(c&!' (1#$3

ar ,ap = { !sJ Mansas 8 3b4ect map of states ,oJ Iissouri caJ alifornia };console.lo&(,ap:!s); 8 Access by 9ey, outputs :ansas

Eoti)e how the o/2e)t $ro$erty i( a))e((ed u(ing array#ty$e a))e((, /ut in(tead of an inde nu*/er the

na*e of the $ro$erty i( ($e)ified.

CONSTRUCTOR+'UNCTIONOBECTSn alternati-e way to define and )reate an o/2e)t i( )alled an o/2e)t )on(tru)tor. !hi( a$$roa)h feel( a little

*ore li'e the )la((i) a$$roa)h, a( the )la((i)al HnewI o$erator i( u(ed to )reate an in(tan)e. l(o,

)on(tru)tor o/2e)t( allow an in(tan)e to /e initialied with (u$$lied -alue(.

n li(ting 1>, the a))ount o/2e)t i( defined and u(ed with the )on(tru)tor a$$roa)h. Eoti)e how the initial

/alan)e i( initialied and the in(tan)e i( )reated with the new o$erator.

Page 1> of 49Keyhole Software, LLC. 8900 State Line Road, Suite 455 Leawood, KS 6606 !el 8""#51#""69htt$%&&'eyhole(oftware.)o*&



14/49

L!(!#* + , A# e3$')e " "=>ec c"#(&/c"&

ar Bccount = 8 7onstructor account ob4ect function(initial2alance) { this.id = 877 this.na,e = 'NOH' this.balance = initial2alance this.debit = function(a,ount) { this.balance =

this.balance 4 a,ount; return this; } this.credit = function(a,ount) { this.balance = this.balance

0 a,ount; return this; } };

ar obect = new Bccount(3689.83); 8 7reate instanceconsole.lo&('Bccount na,e = '0obect.na,e0' 2alance = '0obect.balance);

BEST PRACTICE: aria/le( that referen)e )on(tru)tor fun)tion( are ty$i)ally )a*el#)a(ed with the fir(t

)hara)ter )a$italied. Create a fa)tory that hide( the new 'eyword (in)e it;( ea(y to forget.

?un)tion( are di()u((ed in an u$)o*ing (e)tion.


15/49

PROTOTYPEC,AINING/IN,ERITANCE!he $re-iou( (e)tion (howed how *ethod( and $ro$ertie( that need to /e (hared a)ro(( all in(tan)e( )an /e

*ade glo/al to all in(tan)e( /y adding $ro$ertie( to the )on(tru)tor#o/2e)t( $rototy$e. Jhen a $ro$erty or

*ethod i( (ent to an o/2e)t during ee)ution, the runti*e en-iron*ent will loo' for the $ro$erty&*ethod in

the )urrent in(tan)e, then in the ei(ting $rototy$e, and u$ the )hain until Pbect.prototype i(

en)ountered. !hi( i( (hown in figure >.

#iure : F ,rototype2chainin inheritance

!hi( i( referred to a( $rototy$e )haining and i( how inheritan)e wor'( in a-aS)ri$t. !he net e$re((ion

de*on(trate( thi( )haining /eha-ior /y adding a replicate() *ethod to the /uilt#in o/2e)t( $rototy$e

$ro$erty.

Pbect.prototype.replicate = function(count) { 8 All ob4ects now have return count < 6 Q '' J new Brray(count 0 6).oin(this); replicate56 method};

console.lo&(ello.repeat(9)); 8 Logs


16/49

console.lo&(b.,ultiply()); ?"#rror multiply56 is not defined

RS.prototype.,ultiply = function() { return this.% 1 this.y;}; ?#Add multiply to @ prototypeconsole.lo&(b.,ultiply()); ?F ;ultiply is available and

displays 2))))

!he ea*$le define( an @D )on(tru)tor o/2e)t -A, then a((ign( a *ulti$ly fun)tion -Band ee)ute( it.

!hen another @D in(tan)e i( )reated -Cand the *ulti$ly *ethod i( i((ued, /ut it i( undefined -D. !hi( i(

/e)au(e the ,ultiply() *ethod wa( added to an o/2e)t, /ut not to it( $rototy$e. dding the *ulti$ly

fun)tion, the @D )on(tru)tor#fun)tion(#o/2e)t( $rototy$e -E, *a'e( it a-aila/le to all in(tan)e( )reated fro*

the @D o/2e)t -'.

PROTOTYPESINACTION IMPLEMENTINGT,ESINGLETONPATTERNPrototy$e /eha-ior )an /e (een in a)tion when trying to i*$le*ent the (ingleton $attern with a-aS)ri$t.

Singleton( are a $attern )o**only (een in )la((i)al o/2e)t language(. !he intent i( to i*$le*ent a glo/al,

(ingle in(tan)e of an o/2e)t. Jith a-aS)ri$t it i( ea(y, too ea(y, to *a'e an o/2e)t a glo/al -aria/le. Si*$ly

(et an o/2e)t referen)e to the glo/ally -i(i/le window o/2e)t. 7ere i( how the )urrent u(er of an a$$li)ation

)an /e *ade glo/al%

urrentEser = {user-dJ 'doe' na,eJ'"ohn Hoe' };

or

window.urrentEser = {user-dJ 'doe' na,eJ'"ohn Hoe' };

?or a large a$$li)ation, $utting thi( glo/al *odule definition in it( own a-aS)ri$t file will hel$ *a'e thing(

*ore *odular and *aintaina/le. 7owe-er, if thi( file i( loaded or referen)ed *ulti$le ti*e(, it will wi$e out

$re-iou( -alue(. !he a$$li)ation of the (ingle $attern en(ure( that only a (ingle in(tan)e of an o/2e)t ei(t(

no *atter how *any ti*e( thi( file i( loaded. !he (ingleton $attern for a glo/al urrentEser i( (hown in

li(ting 16.

L!(!#* + , S!#*)e"#7!#($#ce !')ee#$!"#

ar urrentEser = function() {ar Eser = function() {

ar userid = '';ar na,e = '';

return {

&etGa,e J function() {return na,e;

}&etEser-d J function() {

return userid;}setGa,e J function(newGa,e) {

na,e = newGa,e;}setEser-d J function(newEser-d) {

userid = newEser-d;}

};};if (Eser.prototype.Tinstance) {

return Eser.prototype.Tinstance;

}Eser.prototype.Tinstance = new Eser;return Eser.prototype.Tinstance;

}(); 8 Set singleton valueurrentEser.setEser-d(doe);urrentEser.setGa,e("ohn Hoe);

console.lo&(urrentEser.&etEser-d());

a-aS)ri$t $rototy$e /eha-ior $ro-ide( a )on-enient way to enfor)e the (ingleton in(tan)e of a )urrent

u(er no *atter how *any ti*e( the file i( loaded. )lo(ure i( defined that return( the (ingleton in(tan)e.




17/49

!he (ingleton in(tan)e i( (et to the )on(tru)tor#fun)tion( $rototy$e for the fir(t re:ue(t and (u/(e:uent )all(

2u(t return the original in(tan)e.

l(o, noti)e how getter&(etter a))e(( *ethod( were defined, a( thi( i( a $ra)ti)e not ty$i)ally done in

a-aS)ri$t BB de-elo$*ent. n thi( $arti)ular ea*$le, it (how( how a))e(( to the data )an /e en)a$(ulated

with *ethod(.

'UNCTIONS-erything in a-aS)ri$t i( an o/2e)t, and fun)tion( are no e)e$tion. a-aS)ri$t fun)tion( re$re(ent a

*odular unit of ee)ution and are )on(idered fir(t#)la(( o/2e)t(, a( they )an /e )reated literally and

dyna*i)ally, a((igned to -aria/le(, and $a((ed around a( data. Literal fun)tion( you ha-e already (een in

thi( tutorial. 7ere;( a /a(i) literal fun)tion definition you;-e $ro/a/ly (een /efore%

function helloorld() { console.lo&(hello world);} 8 #!ecute functionhelloorld();

Literal fun)tion( are a'in to *ethod i*$le*entation( in )la((i) language( li'e a-a and C. a-aS)ri$t,

/eing dyna*i) in nature, doe( not really ha-e *u)h in )o**on with )o*$iled#/a(ed language(.

Co*$ari(on( are $ro/a/ly *ade to a-a due to the Ha-aI in Ha-aS)ri$t.I

Bne ad-antage that dyna*i)#/a(ed language( li'e a-aS)ri$t ha-e o-er their )o*$iler#/a(ed )o*$etitor(

i( that fun)tional#$rogra**ing )a$a/ilitie( are *ade $o((i/le /y the a/ility to treat )hun'( of )ode li'e data.

!hi( )an lead to elegant de(ign( that do *ore with le(( )ode.

A#"#1"/(C)"(/&e(

nony*ou( fun)tion( or )lo(ure( are $owerful ele*ent( in a-aS)ri$t. Clo(ure( are a 'ey ele*ent of

fun)tional#$rogra**ing te)hni:ue(. Bther language( (u)h a( C $ro-ide )lo(ure(. a-a ha( /een $ro*i(ing

)lo(ure( for a nu*/er of relea(e(, /ut ha( yet to $ro-ide thi( )a$a/ility.

Clo(ure fun)tion( are defined and a((igned to a -aria/le that )an /e $a((ed around 2u(t li'e a $ie)e of

data, and then ee)uted. Dou;ll (ee )lo(ure( )o**only u(ed to $ro-ide )all/a)' and e-ent handling

fun)tionality. ?un)tion( )an /e defined and a((igned to a -aria/le that )an then /e $a((ed around and

ee)uted.Che)' out li(ting 1", /elow, a( thi( ea*$le )ontra(t( a literal fun)tion with one that i( )reated

anony*ou(ly, or a( a )lo(ure.

L!(!#* +; , L!e&$) /#c!"# c"#&$(e- 6! c)"(/&e

function helloorld() { 8 Literal'function definition console.lo&(hello world);}

helloorld(); 8 #!ecute function, outputs Bhello worldCar hello = function() { console.lo&(hello); }; "efine anonymous function and assign to variablehello(); #!ecute function, outputs BhelloCar lo& = function(te%t) { console.lo&(te%t); }; "efine anonymous function with argumentlo&(ello orld); #!ecute function, outputs B=ello DorldC

Let;( *a'e thing( a little *ore intere(ting with the net ea*$le. !he(e e$re((ion( define an anony*ou(

fun)tion that i( $a((ed into another fun)tion and then ee)uted. Eoti)e how argu*ent( are handled in the

following e$re((ion(%

ar hello = function() { console.lo&(hello); }; "efine hello functionar e%ecutor = function(func) { console.lo&(func()); }; 8 "efine e!ecutor function

e%ecutor(hello); Invo9e e!ecutor function, pass in hello function as an argument, outputs hello

Page 1" of 49Keyhole Software, LLC. 8900 State Line Road, Suite 455 Leawood, KS 6606 !el 8""#51#""69htt$%&&'eyhole(oftware.)o*&



18/49

Me"!?!#*

Sin)e fun)tion( )an /e treated a( data, an intere(ting feature /e)o*e( a-aila/le, )alled H*e*oiation.I !hi(

feature $ro-ide( the a/ility to hide or re*e*/er data. aria/le( ()o$ed /y an outer fun)tion and referen)ed

/y an inner fun)tion re*e*/er their -alue( e-ery ti*e the fun)tion i( in-o'ed.

e*oiation )an /e (een in li(ting 18. !hi( ea*$le i*$le*ent( a literal fun)tion that return( anony*ou(

fun)tion( for a ($e)ifi) o$eration. a)h o$eration fun)tion )an then /e ee)uted and re(ult( returned. Eoti)e

how the (u* -aria/le i( re*e*/ered /etween o$eration )all(.

L!(!#* +< , Me"!?$!"# c)"(/&e

functionoperation@actory(operationinitialUalue) { ?( Function that returns operation closure function and sets initial value ar su, = initialUalue; Sum variable will be memoiEed by operation closure functions if (operation == 0) { return function(%) { su, 0= %;return su,;} }; if (operation == 4) { return function(%) { su, 4= %;return su,;} };if (operation == 1)

{ return function(%) { su, 1= %;return su,;} };}

ar add = operation@actory(07); ?2 Get operation functions from factory

ar subtract = operation@actory(4877); and assign to variablear ,ultiply = operation@actory(167.7);add(677); ?#!ecute add function, sum variable will be ())console.lo&(add(877)); ?&Add 2)), output will be )), as the previous add variable is remembered

subtract(677); 7onsole output will be )console.lo&(subtract(37));

,ultiply(7.3); 7onsole output will be 2.console.lo&(,ultiply(7.3));

Let;( wal' through the )ode, a( thi( i( an i*$ortant )on)e$t to (ee in a)tion. Ste$ - define( an

operation@actoryfun)tion that a))e$t( an o$eration identifier and an initial -alue. Jhen )alled, a )lo(ure i(

returned that $erfor*( an arith*eti) o$eration again(t the outer fun)tion su, -aria/le. Ste$ -0 get(

o$eration )lo(ure fun)tion( fro* the fa)tory and a((ign( the* to -aria/le(. Ste$ -1 then in-o'e( the

fun)tion with a -alue of 100. Ste$ -2in-o'e( the add fun)tion again with 00 and out$ut( >00 to the log.

Sin)e the add fun)tion wa( ee)uted two (e$arate ti*e(, you *ight e$e)t that the (e)ond add ee)ution

would out$ut 00. Clo(ure *e*oiation re*e*/er( the (u* -aria/le a)ro(( ee)ution( of the (a*e fun)tion

in(tan)e.

Jhat do you thin' the out$ut of the e$re((ion (hown /elow will /e

ar add = operation@actory(0677);add(37);add(37);console.lo&(add(37));

f you gue((ed 50, you are right. !he initial -alue of the *e*oied (u* -aria/le i( (et to 100.

E3ec/!"# C"#e3!hi( i( a )on)e$t that )au(e( )onfu(ion, e($e)ially with )lo(ure(. Cla((i)al o/2e)t#oriented de-elo$er(

under(tand the )on)e$t of the this'eyword, whi)h $ro-ide( a way to referen)e an ei(ting o/2e)t referen)e.

!hi( i( e($e)ially u(eful when ha-ing to a))e(( $ro$ertie(&*ethod( and in $a((ing around o/2e)t referen)e(.

7owe-er, in a-aS)ri$t this*ay not /e the thisyou were e$e)ting. Sin)e a-aS)ri$t i( dyna*i) )ode,

it ha( the )on)e$t of an ee)ution (ta)', and (in)e a-aS)ri$t run( on a (ingle thread, only one )ode /lo)' i(

-i(i/le in the ee)ution )ontet. t( thisreferen)e( that ee)ution )ontet.




19/49

7ere are (o*e )o**on a-aS)ri$t ee)ution )ontet( for the thiso$erator%

Jindow

=o)u*ent

?un)tion

ethod

Con(tru)tor ethod

7ere i( where )ontet $ro/le*( often o))ur. Say you are defining a literal#o/2e)t *ethod that define( a

)lo(ure, one that $erfor*( a )al)ulation and $rint( re(ult( when a /utton i( )li)'ed. t )ould loo' (o*ething

li'e the (our)e /elow%

ar add = { Literal ob4ect su,J 7 e%ecuteJ function(%y) {this.su, = % 0 y; } thisis in ob4ect'method conte!t

printJ function() {

ar btn = docu,ent.&et$le,ent2y-d(printTbutton); Get document button ob4ect

btn.onlic! = function() { this.e%ecute(677677)J DILL FAIL, whyH 7onte!t, or thiswill be in document conte!t alert(this.su,); DILL FAIL, whyH 7onte!t, or thiswill be in document conte!t }

}}

7owe-er, thi( will fail when the /utton i( )li)'ed with an error indi)ating that this.e%ecute() and

this.su, are undefined. Jhy


20/49

a))o*$li(hed u(ing $a)'age definition( while C u(e( na*e($a)e(. ( de$enden)y in2e)tion i( not $art of

any language, fra*ewor'( ha-e filled the ga$. !hi( i( )hanging a( /oth C and a-a ha-e indi)ated a future

in i*$le*enting /uilt#in de$enden)y#in2e)tion *e)hani(*( in their language ($e)ifi)ation(.

odularity and de$enden)y in2e)tion are 'ey for *anaging SP#li'e a$$li)ation( that ha-e ri)h u(er#

intera)tion re:uire*ent(. 7owe-er, the goal of thi( (e)tion i( to under(tand a-aS)ri$t fun)tion( and

)lo(ure(. Gnder(tanding how to a$$ly *odularity will hel$ with thi( goal. ?igure 4 illu(trate( the )on)e$t( of

*odularity and de$enden)y in2e)tion, (howing how *odule( )an /e u(ed and de$endent *odule( in2e)ted%

#iure F Modularity and dependency in1ection

-aila/le a-aS)ri$t *odularity *e)hani(*( are fun)tion( or )ode defined in (e$arate file( that are loaded

u(ing a tag. odularity let( you hide )o*$leity and infor*ation fro* )on(u*er( of a *odule.

Cla((i)al BB language( $ro-ide language#a))e(( -i(i/ility to *ethod( and $ro$ertie( of o/2e)t(. ))e((

*odifier( are a-aila/le and )an /e ($e)ified to *a'e $ro$ertie( and *ethod( $ri-ate. Pri-ate#a))e((

*odifier( $re-ent de-elo$er( fro* )hanging or a))e((ing ele*ent( that are not a $art of a *odule;( $u/li)#

a))e(( P. a-aS)ri$t doe( ha-e an a))e(( *odifier, /ut a $attern ha( /een in-ented that allow( *ethod(

and attri/ute( to /e hidden.

!he *odule $attern e-aluate( a fun)tion )lo(ure that return( a literal#o/2e)t#fun)tion *ethod that

a))e((e( the $ri-ate data. Li(ting 19 (how( how an addre(( o/2e)t i( *odularied%

L!(!#* +9 , M"-/)e '$e "& $--&e((

ar addressIodule = (function () { Address'module reference to literal ob4ect ar address = :'street''city''state''Fip'; Array holds address segments 5street, city return { state, I, etc.6 streetJ function (street) {

address:7 = street; return this; } cityJ function(city) {

address:6 = city; return this;

} stateJ function(state) {

address:8 = state; return this;

}FipJ function(Fip) { address:9 = Fip; return this;

} for,atJ function () { return address:70Vn0address:60''0address:80' '0address:9; } };})(); 8 Function closure evaluated on loadaddressIodule.street('689 $asy #treet').city('Aawrence').state('M#').Fip('68953W'); 8 Invo9es module methodsconsole.lo&(addressIodule.for,at()); 3utputs formatted address to console




21/49

Eoti)e how in li(ting 19, the addre(( ele*ent( are (tored in an array. ethod( are defined to allow array

ele*ent( to /e (et and to return a for*atted addre((. Bnly the *ethod( the literal o/2e)t return( are -i(i/le

to the u(er of the addre(( o/2e)t. !hi( $attern effe)ti-ely *a'e( the addre(( array -i(i/le or $ri-ate to the

returned literal o/2e)t.

De'e#-e#c1 I#>ec!"#

nother $attern )o**only found in )la((i)al language( i( de$enden)y in2e)tion, a $attern for referen)ing

other, Hde$endentI *odule(. =oing thi( in a )on(i(tent *anner let( de$endent *odule( )o**uni)ate and

$ro-ide( a way to re$ort or a((ert *odule( that are not $re(ent, whi)h )an hel$ with *aintenan)e and

de/ugging. Li(ting 0 (how( how the $re-iou( *odule $attern introdu)e( a *odule that for*at( addre((e(%

L!(!#* 20 , I#>ec!#* $ -e'e#-e# $--&e(( "-/)e

ar addressIodule = (function (printer) { rinter module supplied to address module ar address = :'street''city''state''Fip'; return { streetJ function (street) {

address:7 = street; return this; } cityJ function(city) {

address:6 = city;

return this; } stateJ function(state) {

address:8 = state; return this;

}FipJ function(Fip) { address:9 = Fip; return this;

} for,atJ function () { return printer.for,at(address); #ngage printer module and format address } };})(printerIodule); rinter'module reference, assume this is a

global variable

addressIodule.street('689 $asy #treet').city('Aawrence').state('M#').Fip('68953W');

7hec9 the counter value and reset, outputs (console.lo&(addressIodule.for,at());

!he addre(( *odule i( Hin2e)tedI a( an argu*ent in *odule )lo(ure, and a referen)e to the in2e)ted

*odule( are a$$lied in the *odule#loaded fun)tion )all.

E3CEPTIONS/ERRORSJhen error( o))ur during a-aS)ri$t ee)ution, an error o/2e)t i( thrown. Dou *ay /e (ur$ri(ed to 'now that

$ro/le*( )an /e )aught /y error( /eing thrown or rai(ed. )e$tion( are an integral $art of the a-a, C,

and CMM language(. Dou don;t (ee a lot of e)e$tion#handling )ode in a-aS)ri$t. !he ty$ed language(

*entioned a/o-e ha-e the ad-antage of e)e$tion ty$e( that )an $ro-ide additional de/ugging infor*ation

to e$lain why the e)e$tion o))urred.

)e$tion( in a-aS)ri$t are a)tually error( that ha-e o))urred during ee)ution. Let;( (ay you want to)at)h an undefined error. !he following ea*$le will (how how thi( i( a))o*$li(hed with a try&)at)h )ode

/lo)'.

try {ar % = 7;ar F = % 0 y;

} catch (error) { not being defined will throw an e!ception console.lo&(S is not defined you bi& du,,y J)); 7atch bloc9 outputs message to console }




22/49

Dou )an al(o throw or rai(e error( in your )ode u(ing the throw )lau(e. Dou )an throw any o/2e)t ty$e and

thi( in(tan)e will /e a-aila/le in the )at)h

/lo)'. 7ere are (o*e ea*$le( of throwing an error with -ariou(

o/2e)t ty$e(%

hrow 46; 1hrow '( number throw '$rror Iessa&e'; 1hrow error message string

throw {codeJ 677 ,essa&eJ 'error ,essa&e' ); 1hrow ob4ect literal instance with error info

Cat)h /lo)'( will ha-e a))e(( to the o/2e)t in(tan)e( that are thrown.

AJA@

(yn)hronou( a-aS)ri$t and @L @ i( a te)hnology (u$$orted /y all /row(er( and i( a (i*$le

*e)hani(* that $ro-ide( a $rofoundly i*$ro-ed u(er e$erien)e.


23/49

!he *e)hani(* of @ i( (u$$orted /y all *odern /row(er( and i( e((ential to SP#/a(ed a$$li)ation(.

G$)o*ing tutorial( will introdu)e SP a-aS)ri$t fra*ewor'(. Bne *e)hani(* (o*e of the(e fra*ewor'(

i*$le*ent i( a way to a))e(( (er-er#(ide data in a RS!ful *anner. @ allow( the(e fra*ewor'( to a))e((

(er-er#(ide data then u$date a $ortion of the u(er interfa)e, with no $age refre(h, reinfor)ing a ri)h u(er

interfa)e.

SUMMARY!hi( (e)tion introdu)ed /eginning and ad-an)ed a-aS)ri$t $rogra**ing feature( and )on)e$t(. thorough

under(tanding of the(e to$i)( i( ne)e((ary for /uilding we/ SP a$$li)ation(, a( *u)h a-aS)ri$t will /e

de-elo$ed, u(ed, and a$$lied throughout that $ro)e((.

f (o*e )on)e$t( are (till fuy, re)o**end that you $lay around with and *odify (o*e of the (a*$le(

to (ee if it hel$( your under(tanding.

Ree&e#ce(

B(*ani, ddy. Learning JavaScript Design Patterns. olu*e 1.5.

htt$%&&addyo(*ani.)o*&re(our)e(&e((ential2(de(ign$attern(&/oo'&

oilla =e-elo$er Eetwor'. htt$(%&&de-elo$er.*oilla.org&en#GS&

J> S)hool(.htt$%&&www.w>()hool(.)o*& Co**onS Ji'i Co**unity.htt$%&&wi'i.)o**on2(.org&wi'i&Co**onS

(yn)hronou( odule =efinition n.d. n Wikipedia.

htt$%&&en.wi'i$edia.org&wi'i&(yn)hronou(T*oduleTdefinition

Page > of 49Keyhole Software, LLC. 8900 State Line Road, Suite 455 Leawood, KS 6606 !el 8""#51#""69htt$%&&'eyhole(oftware.)o*&

http://addyosmani.com/resources/essentialjsdesignpatterns/book/https://developer.mozilla.org/en-US/http://www.w3schools.com/http://www.w3schools.com/http://wiki.commonjs.org/wiki/CommonJShttp://en.wikipedia.org/wiki/Asynchronous_module_definitionhttp://keyholesoftware.com/http://addyosmani.com/resources/essentialjsdesignpatterns/book/https://developer.mozilla.org/en-US/http://www.w3schools.com/http://wiki.commonjs.org/wiki/CommonJShttp://en.wikipedia.org/wiki/Asynchronous_module_definitionhttp://keyholesoftware.com/


24/49

Sec!"# T6": HTML5 E((e#!$)( "& SPADe%e)"'e# !# e E#e&'&!(e


Jhat i( 7!L5

7!L5;( role in an enter$ri(e SP

?eature( )o*$elling to enter$ri(e SP(

dditional 7!L5 feature(

o/ile 7!L5 (u$$ort

7!L5 /row(er (u$$ort i((ue( and re(olution(

7!L5 i( a te)hnology to$i) that i( *o(t li'ely /eing di()u((ed in your ! organiation. u)h $re(( and hy$e

ha-e /een *ade a/out the te)hnology. Jill it li-e u$ to the hy$e or will it not thin' it will, a( it( (u))e((

will /e tied how (ingle $age a$$li)ation( SP )an utilie 7!L. nd a( long a( we/ /row(er( re*ain

u/i:uitou(, 7!L will )ontinue.

f there;( a (udden (hift away fro* the /row(er to nati-e a$$li)ation( then 7!L5 *ight /e in 2eo$ardy.

rgua/ly, enter$ri(e( )an )o-er *ore de-i)e( /y i*$le*enting a /row(er#/a(ed SP with a-aS)ri$t and

7!L5. !hi( tutorial will de()ri/e the new feature( of 7!L5, *a'ing an atte*$t to $oint out feature( that

are )o*$elling to enter$ri(e SP de-elo$*ent.

4,AT IS ,TML57!L5 i( 2u(t the net -er(ion of 7!L. !he 7!L5 ($e)ifi)ation wa( finalied in 01> /y the J>C. ?or the

$re-iou( few year(, the ($e)ifi)ation had /een in flu, (till /eing wor'ed on /y the J>C wor'ing grou$(.


25/49

COMPELLING SPA+RELATED 'EATURES

!here are *any u(eful 7!L5 feature(, /ut not all $ro-ide a )o*$elling feature for enter$ri(e SP

de-elo$*ent. Jhile thi( i( argua/le, *o(t enter$ri(e a$$li)ation( don;t readily u(e *ulti*edia feature(. f

you re*e*/er, enter$ri(e a$$li)ation( ty$i)ally ha-e hea-ily#u(ed )reate, read, u$date, and delete CRG=

re:uire*ent(. !he(e are the )on(ideration( u(ed to deter*ine )o*$elling enter$ri(e SP feature(.

Re*aining (e)tion( will )o-er other )ool feature( of 7!L5.

UI E)ee#(

Standard 7!L for* ele*ent( ha-e alway( /een an afterthought. ?or* ele*ent( were not an original $art of

the 7!L ($e)ifi)ation /ut were e-entually introdu)ed to allow u(er intera)tion with we/ (ite( and

a$$li)ation(. a-aS)ri$t and CSS *agi) ha-e /een u(ed to ($e)ialie for* ele*ent( for G *eta$hor(

)o**on on *any a$$li)ation(. 7!L5 ha( re)ognied thi( and introdu)ed the following new ele*ent(.

PROGRESS7ow *any $rogre(( G indi)ator( ha-e you i*$le*ented any li/rarie( and utilitie( $ro-ide $rogre((

whirligig( and indi)ator(. n 7!L5, $rogre(( or a)ti-ity )an now /e i*$le*ented u(ing the following

ele*ent, a( (hown in figure 6.

#iure 6 F ,roress indicators availa0le throuh this ;+M


26/49

!hi( i( a )o**on u(er#interfa)e re:uire*ent that, u$ until now, had to /e e*ulated u(ing a-aS)ri$t and

CSS *agi). 7ere i( a )a-eat% it i( )urrently (u$$orted /y all /row(er( e)e$t Safari.

6EYGENSe)uring we/ traffi) with SSL i( the (tandard way to (e)ure /row(er#to#(er-er )o**uni)ation(. !he 'eygen

tag generate( $u/li)&$ri-ate 'ey(. !he $ri-ate 'ey i( (tored in a lo)al 'ey(tore and the $u/li) 'ey i( (ent the

(er-er. ?igure 9 (how( an ea*$le that define( a 'eygen ele*ent with a for*.

#iure ' F Heyen element e8ample

!he 'eygen ele*ent ha( attri/ute( that toggle a )hallenge dialog and algorith*#'ey ty$e (ele)tion, (u)h

a( RS, =S, or C.

OUTPUTJhen i*$le*enting an 7!L for*, out$ut often need( to /e di($layed within the for*. le*ent( within the

for* are all ele*ent( that a))e$t in$ut fro* the u(er. De(, you )an (et -alue( to an in$ut tet field and

di(a/le it or *a'e it read#only. 7owe-er, why not ha-e an ele*ent to di($lay for* out$ut !he out$ut

ele*ent $ro-ide( thi( )a$a/ility.

!he ea*$le in figure 10 (how( a for* with two in$ut -alue(. n thi( )a(e, the out$ut ele*ent di($lay(

the (u* of the(e two in$ut -alue(.

#iure - F E8ample o* a *orm $ith t$o input values and an output elementG $ith the code to achieve this *eature

=ata in$ut u(ing a tet in$ut ele*ent i( the $ri*ary way to i*$le*ent data#entry for*( in /row(er

a$$li)ation(. Lot( of a-aS)ri$t&CSS *a(ti)ation and G fra*ewor' li/rarie( ha-e /een )reated to e*ulate

in$ut field( for ($e)ifi) data ty$e(, (u)h a( date(, nu*/er(, e*ail addre((e(, and tele$hone nu*/er(.

Ne6 I#'/ T1'e(

7!L5 ha( eli*inated the need for thi( wor'around /y ($e)ifying /uilt#in in$ut ty$e(. ?igure 11 (how( an

ea*$le of an in$ut ele*ent;( date ty$e definition.



sername 3n#rption

4=20


27/49

#iure -- F E8ample o* the date type de*inition in an input element and code reIuired to achieve this *eature

t;( ni)e to ha-e /uilt#in (u$$ort for a date $i)'er a( you no longer ha-e to introdu)e a date#$i)'er

)o*$onent. !here are *any *ore u(eful in$ut ty$e( a-aila/le in the ($e)ifi)ation. !he down(ide i( that notall /row(er( )urrently (u$$ort the(e ty$e(. f a /row(er doe( not (u$$ort a ty$e, it fall( /a)' to a $lain in$ut#

tet field.

7ere i( a li(t of the new ele*ent(%

tel A !ele$hone nu*/er

(ear)h A =i($lay( ty$i)al (ear)h#($e)ifi) in$ut field

e*ail A (ingle or *ulti$le e*ail for*atted entrie(

dateti*e A G!C date ti*e

date A =ate only

*onth A Dear and *onth

wee' A Jee' of year in the for*at 014#w04 *ean( wee' 4 of 014

ti*e A 7our, *inute(, (e)ond(

dateti*e#lo)al A =ate ti*e and no ti*e one

nu*/er A Eu*eri)al -alue

range A Eu*eri)al range

)olor A Color )hoo(er

( of late 01>, not all /row(er( (u$$ort all of the(e in$ut ty$e(.


28/49


29/49

#iure -: F Custom attri0utes applied to a 1uery mo0ile U3

!he data#role attri/ute of the tag indi)ate( to the 2Fuery *o/ile fra*ewor' that thi( will /e a li(t.

Dou )an al(o (ee the data#filter attri/ute (et to fal(e. f (et to true, a (ear)h entry field and the a/ility to

(ear)h would /e rendered. !he listUiewrole indi)ate( that the , , and tag( are rendered and

(tyled a( a tou)h#friendly *o/ile interfa)e.

!he )u(to* data41attri/ute( allow *etadata to /e atta)hed to (tandard 7!L ele*ent( (o that they )an

/e a))e((ed and *ani$ulated for ($e)ifi), )u(to*ied need(.

L"c$) S"&$*e

Gntil 7!L5 )a*e on the ()ene, the only way to (tore infor*ation lo)ally in the /row(er, and /etween u(er(e((ion(, wa( to u(e )oo'ie(.

eadgbe
;(P
dadgbe
)))
Custom attri0utes used0y 1uery Mo0ile torender this U3


30/49


31/49

if(typeof(#tora&e)Z==undefined) { console.lo&(Aocal #tora&e not supported...); }else {

console.lo&(Aocal #tora&e is supported...); }

Dou )an al(o *a'e lo)al (torage tran($arent /y i*$le*enting your own (torage o/2e)t that en)a$(ulate(

lo)al#(torage /eha-ior if it;( not $re(ent, a )oo'ie or glo/al o/2e)t )an /e u(ed.

We=S"c8e(

Je/So)'et te)hnology ha( a $rofound i*$a)t on /uilding highly intera)ti-e, low#laten)y, ri)h u(er interfa)e(

for the /row(er. 1 of 49Keyhole Software, LLC. 8900 State Line Road, Suite 455 Leawood, KS 6606 !el 8""#51#""69htt$%&&'eyhole(oftware.)o*&



32/49

!he )onne)tion o/2e)t;( fir(t argu*ent i( a Je/So)'et#($e)ifi) GRL, and the (e)ond argu*ent i( a

(u$$orted (u/$roto)ol. Jith a GRL ($e)ifi) to the Je/So)'et ($e)ifi)ation, noti)e the wsJ

for*at. !he (e)ond argu*ent i( a (u$$orted (u/#$roto)ol.

Conne)tion( rai(e e-ent( for error(, *e((age( fro* the (er-er, and when the )onne)tion i( (u))e((fully

o$ened. 7ere i( how the(e e-ent( are handled%

connection.onopen = function () { 8 Send message to server on connection open connection.send('hello world');

};connection.onerror = function (error) { 8 =andle error message console.lo&('eb#oc!et $rror ' 0 error);};connection.on,essa&e = function (e) { 8 =andle message sent from server console.lo&('Hata fro, #ererJ ' 0 e.data);};

String and /inary data are the only ty$e( (u$$orted /y the Je/So)'et ($e)ifi)ation. Re)ei-ing /inary data

)an /e a))o*$li(hed a( either a /lo/ or array /uffer.


33/49

ADDITIONAL ,TML5 'EATURES= gra$hi)(, ani*ation(, and -ideo( re:uired $lug#in te)hnologie( to /e

deli-ered to /row(er(. good ea*$le of thi( i( ?la(h, whi)h ena/led ga*e de-elo$*ent and highly

$rodu)ed gra$hi)al )ontent. !hi( wor'ed well enough, /ut u(er( fre:uently e$erien)ed )o*$ati/ility

$ro/le*(, lengthy loading ti*e(, and $erfor*an)e i((ue(.

Con(idering the downtrend on la$to$( and de('to$( and the u$trend of *o/ile de-i)e( for ga*e(, -ideo(,

ad-erti(ing, and gra$hi) )ontent, thi( i( a $erfe)t ti*e to (hift to SP( and a/andon $lug#in te)hnology infa-or of nati-e /row(er (u$$ort. 7ere are the(e gra$hi), *ulti*edia, and offline )a$a/ilitie(.

C$#%$(

Can-a( i( one of the *o(t )o*$elling new feature( of 7!L5. )an-a( i( a region (et within a /row(er that

allow( = and >= gra$hi)( to /e defined with a a-aS)ri$t P. 7ere;( a (a*$le )an-a( ele*ent%

((u*ing the )an-a( ele*ent (hown, i*age( )an /e loaded and drawn u$on u(ing the )an-a( a-aS)ri$t

P. !he figure and )ode (ni$$et that follow (how how a-aS)ri$t )an /e u(ed to di($lay a guitar i*age and

*u(i) note( on the )an-a(.

#iure -6 F ?uitar *ret0oard $ith notes dra$n on the canvas

!he following i( the a-aS)ri$t )ode that draw( the fret/oard i*age and *u(i) note( onto the )an-a(%

ar note = :'H''B''H''Y''B''H'; 8 $otes to draw ar strin&sR = :8WW967869D6L5868; 8 String ! coordinate

for (i = 7;i < strin&s.len&th;i00) { 8 Loop over strings ar % = strin&s:i4C; ar y = 637 4 98; ct%.fill#tyle = white; 8 "raw note on canvas conte!t ct%.fille%t(note:i %637);

}

7!L ha( /een a/le to di($lay i*age( (in)e it( /eginning, /ut /eing a/le to dire)tly draw in the /row(er i()o*$elling. =e-elo$er( )an u(e the )an-a( in the (a*e *anner a( for a gra$hi) )ontet in an o$erating#

(y(te* di($lay. Sha$e(, line(, and $olygon( )an /e drawn and )li)' e-ent( )an /e )a$tured. Jith = and >=

)a$a/ilitie(, what )an /e done with the )an-a( P i( li*ited only /y one;( i*agination.

A/-!"

Prior to 7!L5, $laying audio file( P>, J, and ogg, for ea*$le would re:uire a /row(er $lug#in. Eow,

(i*$ly defining the ele*ent tag will load and di($lay an audio#)ontrol widget that will

$lay the file. See figure 1".

Page >> of 49Keyhole Software, LLC. 8900 State Line Road, Suite 455 Leawood, KS 6606 !el 8""#51#""69htt$%&&'eyhole(oftware.)o*&



34/49

#iure -7 F n e8ample o* the element ta $ith a screenshot o* thecontrol displayed in the 0ro$ser

Dou )an al(o u(e an tag /y it(elf to $lay (ound( without di($laying the )ontrol widget, or e-en

u(e the a-aS)ri$t P to a$$ly *ore )ontrol to the file. 7ere i( a (ni$$et of a-aS)ri$t )ode that u(e( a

2Fuery (ele)tor to o/tain referen)e to an o/2e)t in the =B, and then i((ue( the play()*ethod%

ar a = +('[audio6'):7; Get audio'element ob4ect using 4Juery selector a.play(); lay sound

Sc$)$=)e Vec"& G&$'!c( SVG

=i($laying -e)tor gra$hi)( ha( )o**only /een done u(ing PEU or PU i*age(. Gnfortunately, PU i*age

:uality (uffer( a( the i*age i( di($layed on different ()reen re(olution(. PEU i*age( ha-e good :uality, /ut

don;t ()ale well due to their (ie.


35/49

V!-e"

7!L5 /row(er( $ro-ide an e*/edded -ideo -iewer. Li'e the other feature( *entioned, thi( eli*inate( the

need for $lug#in(.

CSS

CSS> i( a (e$arate ($e)ifi)ation that the J>C al(o go-ern(. t a$$lie( (tyling and layout ele*ent( to 7!L

ele*ent(. t;( rare to find an enter$ri(e de-elo$er ('illed in a$$lying CSS, /ut they do ei(t. f you find one,

they )an /e worth their weight in gold. !he right CSS tou)he( )an *a'e an a$$li)ation;( u(er interfa)e

/eautiful. Je (ay that an enter$ri(e a$$li)ation (hould /e u(ea/le, not /eautiful, /ut we all 'now that a

gra$hi)ally a$$ealing u(er interfa)e goe( a long way.

CSS (tyle (heet( are u(ually u(ed and not )reated, and *ay/e the organiation ha( $rodu)ed or u(ed a

(tandard (tyle (heet. =e-elo$er( will (o*eti*e( *odify and twea' (tyle( for $adding and align*ent /y

o-erriding CSS ele*ent(.

CSS> ha( introdu)ed new ele*ent( that allow for ani*ation(, effe)t(, font(, and )olor( to /e a$$lied with

$ure CSS a( o$$o(ed to u(ing a $lug#in or a-aS)ri$t )ode. 7ere;( a li(t of CSS>;( new G feature(%


36/49

L!(!#* 24 , E3$')e " c$ce7$#!e( -e!#!!"#

B$ IBG-@$# [ 87684C46J85[ $%plicitly cached ',aster entriesB$Japp.scss/Xuery.,obile46.6.74rc.8.,in.csscss/Xuery.,obile.structure46.6.74rc.8.,in.csscss/Xuery.,obile.the,e46.6.74rc.8.,in.csscss/styles.css

inde%.ht,llibs/BIHbac!bone47.3.9.slibs/bac!bone47.C.8.slibs/css/nor,aliFe.csslibs/X,4confi&.slibs/Xuery46.L.8.slibs/Xuery.,obile46.6.74rc.8.

?ile( ($e)ified under the B$Jdire)ti-e in thi( file will /e loaded a(yn)hronou(ly. Jild)ard entrie( are

not (u$$orted, (o all file( to )a)he ha-e to ($e)ify full file $ath(.

So*e re(our)e( re:uire a )onne)ted (tate and )annot /e )a)hed. Dou )an al(o ($e)ify file( not to )a)he

u(ing the G$PNMJdire)ti-e. ?ile( and re(our)e( under thi( (e)tion will /y$a(( the a$$li)ation )a)he. !he

following i( an ea*$le GRL end$oint that re:uire( networ' )onne)ti-ity%

G$PNMJ httpJ//localhostJD7D7/!hs4bac!bone4e%a,ple/sherpa

nother ni)e )a$a/ility i( the a/ility to )o**uni)ate when a re(our)e i( not a-aila/le. !he @BAA2BMJ

dire)ti-e )an /e a((o)iated with re(our)e(. f )onne)ti-ity i( lo(t then the ($e)ified 7!L file i( di($layed to

infor* the u(er that )onne)ti-ity ha( /een lo(t. 7ere i( an ea*$le%

@BAA2BMJ /1.ht,l /offline.ht,l

ntere(tingly, the @BAA2BMJdire)ti-e allow( wild)ard( to /e ($e)ified.

AVASCRIPTAPIa-aS)ri$t )an al(o /e u(ed to )he)' on the (tatu( of the a$$li)ation )a)he. !he )a)he o/2e)t i( atta)hed to

the glo/al#window o/2e)t. See li(ting 5 for an ea*$le.

L!(!#* 25 , E3$')e " $# e3'&e((!"# $ &e/( $'')!c$!"# c$ce( c/&&e# ($/(

ar appache = window.applicationache;

switch (appache.status) { case appache.EGB$HJ 0ncached KK ) return 'EGB$H'; brea!; case appache.-HA$J Idle KK ( return '-HA$'; brea!; case appache.$M-GYJ 7hec9ing KK 2 return '$M-GY'; brea!; case appache.HPGAPBH-GYJ "ownloading KK return 'HPGAPBH-GY'; brea!; case appache.EKHB$N$BHSJ 0pdateready KK & return 'EKHB$N$BHS'; brea!; case appache.P2#PA$$J 3bsolete KK

return 'P2#PA$$'; brea!; defaultJ return 'EMGPG B$ #BE#'; brea!;};

l(o, the a-aS)ri$t a$$li)ation#)a)he o/2e)t ha( a *ethod to re:ue(t an u$date of the )a)he. 7ere i( the

)ode (ni$$et%

ar appache = window.applicationache;appache.update();

Page >6 of 49Keyhole Software, LLC. 8900 State Line Road, Suite 455 Leawood, KS 6606 !el 8""#51#""69htt$%&&'eyhole(oftware.)o*&



37/49

Dou )an al(o )ontrol when a )a)he u$date i( a$$lied. !he following (ni$$et (how( how the u$dated )a)he

)an /e (wa$$ed in%

if (appache.status == window.applicationache.EKHB$N$BHS) { appache.swapache();

}

a'ing an a$$li)ation wor' in a non#)onne)ted (tate i( not a *a2or enter$ri(e re:uire*ent today, /ut a(

organiation( e*/ra)e *o/ile de-i)e( and the wor' for)e /e)o*e( *ore di(tri/uted, thi( )ould )hange. t i(good to 'now that the a$$li)ation#)a)he *e)hani(* )an /e a$$lied on an Hat willI /a(i( u(ing a )a)he

*anife(t.

MOBILITY AND ,TML5o/ility i( (o*ething that enter$ri(e( ha-e no )hoi)e /ut to addre((. ( *ore and *ore u(er( /ring ta/let(

and *o/ile de-i)e( into the enter$ri(e, they will e$e)t to a))e(( a$$li)ation( on the*. nter$ri(e( ignoring

*o/ile de-i)e( will /e *i((ing a u(er#$rodu)ti-ity and effi)ien)y o$$ortunity. t (o*e $oint it )ould e-en /e

a re)ruiting o$$ortunity A $eo$le lo-e their *o/ile de-i)e(.

!here are three a$$roa)he( that )an /e ta'en for *o/ility. !hey are de$i)ted in figure 18.

#iure -" F rchitecture options *or mo0ile application development

SP and 7!L5 are )o*$onent( in-ol-ed in /row(er and hy/rid#/a(ed a$$li)ation(. !hey /oth utilie

7!L5 and a-aS)ri$t to de-elo$ the a$$li)ation.


38/49

ar show = function(position) { 8 7losure to display position coordinatesconsole.lo&(position.coords.lon&itude);console.lo&(position.coords.lattitude)

};

if (nai&ator.&eolocation) { 8 7hec9 for browser supportnai&ator.&eolocation.&eturrentKosition(show); 8 Geolocate coordinates

} else {console.lo&(2rowse does not support &eolocation);

}l(o, a de-i)e;( )a*era )an /e a))e((ed to )a$ture $i)ture( and -ideo with 7!L. 7ere;( an ea*$le of

how a $i)ture )an /e )a$tured%

!here;( al(o a a-aS)ri$t P that )an /e u(ed for *ore flei/ility. !he -ideo and )a*era feature( of

7!L5 are )urrently (u$$orted /y the *o/ile -er(ion( of /row(er(.

H1=&!- M"=!)e A''&"$c

( the na*e i*$lie(, hy/rid *o/ile a$$li)ation( are a )ro(( /etween a nati-e a$$li)ation and a

7!L5&a-aS)ri$t#/a(ed a$$li)ation a))e((ed fro* the /row(er. Eati-e *o/ile a$$li)ation( rely u$on

nati-e G )o*$onent( and thi( $ro-ide( a re($on(i-e, )lean#loo'ing a$$li)ation. !he(e a$$li)ation( are($e)ifi) to *o/ile o$erating (y(te*(.

7y/rid *o/ile de-elo$*ent fra*ewor'( i*$le*ent a one#(ie#fit(#all (olution /y $ro-iding nati-e

)ontainer( for ea)h o$erating (y(te* that intera)t( with an 7!L5#/a(ed /row(er )o*$onent. P( fro* the

nati-e /row(er )o*$onent $ro-ide a))e(( to nati-e o$erating (y(te* P(. G(er interfa)e loo' and feel i(

de-elo$ed u(ing 7!L5&a-aS)ri$t, whi)h i( then $a)'aged and /undled lo)ally into a nati-e a$$li)ation

/inary. !he ad-antage i( that a (ingle G )an (u$$ort *ulti$le ty$e( of *o/ile de-i)e(.

7ere are a few $o$ular hy/rid#/a(ed *o/ile de-elo$*ent $latfor*(, /ut there are *ore%

PhoneGa* Aphoneap.com l(o, here;( lin' to an introdu)tory PhoneUa$ /log /y one of our

Keyhole de-elo$er( A 3ntroduction to ,hone?ap.

Sen(ha To%(hA s encha.com

A**(e$e!ato! T"tan"%mA appcelerator.com

A*a(he Co!do7aA cordova.apache.or

A**s*!essoA appspresso.com

!here i( another a$$roa)h that *ore a*/itiou( enter$ri(e( )an ta'e for hy/rid de-elo$*ent. t ta'e(

*ore engineering, /ut if the $o$ulation of (u$$orted *o/ile de-i)e( i( 'nown, )u(to* nati-e )ontainer( )an

/e de-elo$ed that )on(u*e 7!L5&a-aS)ri$t G ele*ent(. !hi( $ro-ide( additional )ontrol and *ore

flei/ility in a$$li)ation de$loy*ent and $ro-i(ioning. 7owe-er, it doe( )o*e with additional (u$$ort

re:uire*ent(.

SUMMARY7!L5 feature( $ro-ide nati-e (u$$ort for a$$li)ation )a$a/ilitie( that were (ol-ed with a-aS)ri$t li/rarie(

and fra*ewor'(. =e-elo$er( ha-e to introdu)e and *anage the(e li/rarie(, leading to a larger )ode /a(e that

)an affe)t $erfor*an)e and *aintaina/ility, e($e)ially for enter$ri(e SP a$$li)ation(, whi)h )an ha-e ro/u(t

fun)tionality.


39/49


40/49

Sec!"# T&ee: Re('"#(!%e De(!*#


Re($on(i-e de(ign in the enter$ri(e o/ile fir(t or one#(ie#fit(#all

7ow re($on(i-e de(ign wor'(

Re($on(i-e#de(ign fra*ewor'(

.

4,AT IS RESPONSIVE DESIGN8Si*$ly, the ter* Hre($on(i-e de(ignI )an *ean a lot. /row(er

feature(, /ut al(o /y *a'ing a$$ro$riate u(er interfa)e de(ign de)i(ion(.

S)reen re(olution( -ary (ignifi)antly /y de-i)e. 7ere in figure 19 are (o*e )o**on ()reen (ie( for

*o/ile and de('to$ de-i)e(.




41/49

#iure -' F Common device screen resolutions

re($on(i-e de(ign will )hange the u(er interfa)e layout and ele*ent( /a(ed u$on the ($e)ifi) u(er

interfa)e (ie. ( an ea*$le, )on(ider the ele*ent( (hown /elow in the (tandard /row(er -iew of the SP

)alled Co**and Uro'%

#iure 4 F U3 $ith naviation elements across the top

Eoti)e how in figure 0, the na-igation o$tion( are di($layed -erti)ally a)ro(( the to$ of the ()reen. Jhen

the ()reen di*en(ion( )hange, the na-igation )olla$(e(.


42/49

!hi( ($e)ifi) re($on(i-e feature i( a))o*$li(hed /y u(ing a re($on(i-e layout. 7owe-er, *ore than 2u(t

u(ing a re($on(i-e layout i( re:uired in order to *a'e a we/#/a(ed a$$li)ation re($on(i-e to other de-i)e(.

IMPLEMENTING RESPONSIVE DESIGNRe($on(i-e de(ign i( a$$lied with a )o*/ination of 7!L&CSS *agi) and u(er#interfa)e de(ign that u(e(

interfa)e layout(, widget(, and in$ut $attern( that are de-i)e#neutral and ta'e ad-antage of tou)h

)a$a/ilitie(. 7!L and CSS $ro-ide a ni)e $latfor* for laying out and $artitioning ele*ent( to allow ali*itle((, )reati-e u(er#interfa)e e$erien)e. $erien)ed 7!L&CSS u(er#interfa)e de(igner( )urrently a$$ly

their )raft *ore to *ar'eting#fo)u(ed we/ (ite( or a$$li)ation(. !hey don;t u(ually find the*(el-e( in the

ran'( of )or$orate ! $ro2e)t(. !hat will li'ely )hange.

M"=!)e F!&(

Bne a$$roa)h to $er-a(i-e de(ign i( to ta'e a H*o/ile fir(tI de(ign a$$roa)h. !hi( *ean( that the u(er

interfa)e i( de(igned for a ($e)ifi), targeted *o/ile#de-i)e ()reen re(olution and *o/ile#ty$e widget( fir(t, a(

then a de('to$ /row(er will $re(ent the G without re(olution i((ue(.


43/49

\,edia screen and (,a%4deice4widthJ 5D7p%) { 8 ac9ground to !! if &O)p!.iphone {

bac!&roundJ [ccc;}

}

( you )an (ee, *edia#:uery e$re((ion( $ro-ide a way for CSS de(igner( to a$$ly different CSS (tyling

/a(ed u$on de-i)e (ie with a (ingle CSS i*$le*entation. o(t )urrent /row(er( (u$$ort the *edia :uery.

Blder /row(er( that do not (u$$ort *edia :uery ha-e to i*$le*ent and *aintain (e$arate CSS file( for ea)h

de-i)e ty$e. l(o, (o*e fra*ewor'( will read and $ar(e CSS on the fly and tran(for* the CSS attri/ute/a(ed u$on a de-i)e (ie. !he de-i)e (ie )an /e deter*ined /y the 7!!P u(er#agent $ro$erty.

Re('"#(!%e L$1"/

!he *edia#:uery CSS ele*ent it(elf doe( not gi-e you a re($on(i-e u(er interfa)e, a( it;( 2u(t a *e)hani(*

u(ed to i*$le*ent CSS that a$$lie( a re($on(i-e de(ign fra*ewor'. o(t enter$ri(e( don;t ha-e the

wherewithal to write )u(to* re($on(i-e CSS for their enter$ri(e a$$li)ation(. Sin)e SP#/a(ed enter$ri(e

a$$li)ation( are )on(tru)ted with a-aS)ri$t, 7!L, and CSS, (o*e of the re($on(i-e de(ign i( going to

de$end u$on the G fra*ewor' you de)ide to u(e.

USEACSS 'RAME4OR6Jriting your own re($on(i-e G fra*ewor' would /e a ti*e#)on(u*ing endea-or, (o one de)i(ion in

(ele)ting your SP G fra*ewor' need( to /e how re($on(i-e it i(. CSS (e$arate( /oth the loo' and feel and

re($on(i-e logi) fro* 7!L, and therefore *ar'u$. 7owe-er, it i( u(eful to ha-e an introdu)tion to (o*e of

the re($on(i-e#layout fra*ewor'( that are a-aila/le. So*e )o**on fra*ewor'( will /e introdu)ed in a later

(e)tion.

9DIV: NOT9TABLE:G(er interfa)e( )an /e laid out u(ing 7!L and ele*ent(, with /eing the $referred

*e)hani(* for $erfor*an)e and flei/ility. !he rea(oning /ehind that i( that *ore 7!L ha( to /e $ro)e((ed

for and ha( *ore layout#)ontrol $ro$ertie( that CSS )an *ani$ulate.

AVOID,TML POS; 4IDT,; ,EIG,T; ANDTYPEATTRIBUTESEo *atter what G fra*ewor' you (ele)t, or how you define your SP;( 7!L u(er interfa)e ele*ent(, you

(hould a-oid defining $o(ition, width, height, and ty$e attri/ute( A unle(( you are u(ing a G fra*ewor' with

re($on(i-e#de(ign P( that re:uire u(age of the(e attri/ute(.

Re('"#(!%e UI L$1"/ F&$e6"&8(

)o**on a$$roa)h for CSS fra*ewor'( i( to $ro-ide a re($on(i-e#layout fra*ewor' that i*$le*ent( a

grid#/a(ed CSS the*e. (et nu*/er of )olu*n( are defined for a grid, and then G 7!L ele*ent( are

$la)ed within )olu*n grid(. !he *edia :uery and (o*e *ath deter*ine the nu*/er of )olu*n( that )an

a$$ear. !hey are di($layed horiontally, and re*aining )olu*n( wra$ horiontally, a( figure di($lay(%

Page 4> of 49Keyhole Software, LLC. 8900 State Line Road, Suite 455 Leawood, KS 6606 !el 8""#51#""69htt$%&&'eyhole(oftware.)o*&



44/49

#iure 44 F ?rid2layout columns $rap $ith device $idth

!here a nu*/er of fra*ewor'( and a$$roa)he( that will generate grid#/a(ed CSS. Dou )an ($e)ify the

nu*/er of )olu*n( you want and off(et( /etween )olu*n(, and the fra*ewor' will do the *ath and

generate re($on(i-e CSS for your ($e)ified grid for you to a$$ly. So*e e-en allow you to ($e)ify the nu*/er

of )olu*n(.Li(ted /elow are a (o*e $o$ular grid#/a(ed fra*ewor'(, a( $u/li(hed /y Masha0le.com%

G!"dsetA ridsetapp.com

'!ame$essA *ramelessrid.com

T"n< '$%"d G!"dA tiny*luidrid.com

G!"d*a= A ridpa&.com

S"m*$eG!"d A simplerid.in*o

Res*ons">


45/49

)on(i(tently, under the (a*e re($on(i-e fra*ewor'. !hi( fra*ewor' )an *a'e a de-elo$er loo' li'e a G

de(ign geniu(.

nough of the $lug.... !he $ower of thi( fra*ewor', /e(ide( a )lean loo' and feel and a re($on(i-e, fluid

layout, i( that i( $ro-ide( for*(, /utton(, *odal dialog(, na-igation, and other G ele*ent( and )o*$onent(

that enter$ri(e a$$li)ation( )an u(e to i*$le*ent a re($on(i-e u(er interfa)e. =e-elo$er( )an $ut together a

)lean u(er interfa)e without 'nowing CSS *agi), e-en though *o(t of the fra*ewor' i( i*$le*ented with

CSS and /ehind#the#()ene( a-aS)ri$t. =e-elo$er( a$$ly (i*$le 7!L with CSS )la(( attri/ute(.


46/49

the enter$ri(e, they are *o(t li'ely e*ulating i)ro(oft Jindow(#ty$e widget )ontrol(. Po$ular widget

li/rarie( in)lude 2Fuery G, =BB, DG, and there are *any *ore a-aila/le in the o$en#(our)e world. !he(e

li/rarie( $ro-ide a ri)h u(er e$erien)e /ut *any of the* are not re($on(i-e. !o *a'e the* re($on(i-e, you

will ha-e to ada$t the* to a re($on(i-e CSS fra*ewor'.

RESPONSIVE UI DESIGN DECISIONS

ore than 2u(t CSS *agi) i( re:uired for a$$li)ation( to /e re($on(i-e. =e-elo$er( and u(er#interfa)ede(igner( need to i*$le*ent u(er interfa)e( that de$art fro* the traditional Hwindow(I UG *eta$hor( we

are u(ed to. Jhy !he(e u(er interfa)e de(ign( atte*$t to e*ulate nati-e o$erating (y(te*( for de('to$(.

!he de('to$, or la$to$ for that *atter, i( no longer the only de-i)e on whi)h your enter$ri(e a$$li)ation will

/e -iewed. So let u( di()u(( (o*e de(ign de)i(ion( you )an *a'e that will hel$ *a'e your a$$li)ation( *ore

re($on(i-e a)ro(( *any de-i)e(.

LIMITDATA+ENTRYDIALOGS!he HwindowingI *eta$hor that we are u(ed to a)ro(( *a2or o$erating#(y(te* en-iron*ent( allow( u(er( to

ha-e *any window( o$en at the (a*e ti*e. )o**on way to a))e$t in$ut fro* u(er( ha( /een to o$en a

*odal or dialog window, whi)h e((entially lo)'ed the in$ut window until the u(er entered and a$$lied data

in$ut or )an)eled the o$eration. Bne way to (u$$ort a re($on(i-e layout and (*all ()reen (ie( i( to

eli*inate dialog( and u(e a dire)t#edit a$$roa)h. Con(ider an edit o$tion, a( (een in figure 4, that (how(

how a u(er interfa)e allow( a ti*e(heet to /e edited.

#iure 4 F +imesheet *orm

Jhen the -iew&edit /utton i( (ele)ted, in(tead of o$ening a dialog to -iew and edit a ti*e(heet re)ord, an

edit for* i( e$o(ed inline u(ing a G tran(ition. Jhen done, the edit for* tran(ition( away. !hi( i( (hown infigure 5.

#iure 45 F ;ittin the K>ie$L 0utton on a ro$G in this e8ample o* the vie$/edit transitionG e8poses a *orm inline that provides more details and

editin capa0ilities

=ialog(, alert(, and (hort *e((age( (er-e a $ur$o(e in (ituation( that re:uire u(er attention. Btherwi(e,

try to *ini*ie their u(age a( they )an a)t won'y on different de-i)e ()reen (ie(. f they are too /ig, they

*ight not e-en wor' on (o*e de-i)e(.



Edit/>ie$+ransition


47/49

Bther way( you )an eli*inate dialog( i( to u(e G for* )ontrol( that integrate -alidation and (ele)tion

*e)hani(*( in the for*#)ontrol entry field. a*$le( would /e date&ti*e $i)'er( and range#/a(ed entry

field(. =on;t u(e or i*$le*ent a dialog to a((i(t the u(er in (ele)ting a date. a'e the date a$$ear a( an

inline tran(ition within an in$ut for*.

APPLYTOUC,ABLECONTROLS!here are *any *o/ile tou)h#($e)ifi) G li/rarie(. any of the(e )ontrol( wor' e:ually well in de('to$

a$$li)ation( and wor' 2u(t fine with a 'ey/oard and *ou(e. ?eel free to a$$ly the* in enter$ri(e de('to$a$$li)ation(. a*$le( of u(ing a tou)h )ontrol in(tead of a traditional in$ut for* are (hown in figure 6.

#iure 46 F Use touch $idets instead o* standard ;+M< $idets

Slider )ontrol( )an /e u(ed for nu*eri) in$ut. !oggle /utton( )an /e u(ed in the $la)e of radio /utton(

and )he)' /oe(. !ou)h )ontrol( additionally $ro-ide a *odern G loo' to your a$$li)ation, whi)h )an hel$

with u(er (ati(fa)tion.

DESIGNVERTICALLYo-ing or ()rolling u$ and down, i.e. -erti)ally, i( *ore natural to the eye than horiontally, or left and right.

-oid de(igning G ()reen( with a lot of infor*ation going a)ro(( the ()reen. f you do it, howe-er, $artition

the infor*ation into $anel(, (o they *o-e naturally when the re($on(i-e layout (ta)'( the* -erti)ally a(

de-i)e ()reen (ie )hange(.

T,IN6ABOUTNAVIGATIONnter$ri(e a$$li)ation( )an offer *u)h fun)tionality with a -ariety of u(er interfa)e ()reen( that ha-e lot( of

infor*ation to di($lay and *aintain. *$le*enting a (i*$le way to a))e(( and na-igate feature( or fun)tion(of the a$$li)ation *a'e( the a$$li)ation ea(y to u(e. !he right de)i(ion( on na-igation )an hel$ with

re($on(i-e de(ign. ?or in(tan)e, a )o**on na-igation ()he*e i( to $ut ta/( a)ro(( the to$ of the u(er

interfa)e. !hey )an /e thought of a( *enu( in traditional window( a$$li)ation(, a( (hown in figure ".

?igure " A n ea*$le of )olla$(ing *enu o$tion(

Page 4" of 49Keyhole Software, LLC. 8900 State Line Road, Suite 455 Leawood, KS 6606 !el 8""#51#""69htt$%&&'eyhole(oftware.)o*&


Standard ;+M< +ouch Widets

Menu


48/49

Jhen the ()reen i( re(ied, *enu o$tion( )olla$(e to an i)on. B$tion( and (u/ o$tion( are di($layed

horiontally when (ele)ted.

G(ing (*all, *eaningful i)on( are a great way to )on(er-e real e(tate and 'ee$ your interfa)e( )lean. G(e

i)on( that )o**only infer the o$eration that you are trying to )o**uni)ate, a( you )an (ee in figure 8.

#iure 4" F n e8ample o* meanin*ul icons that replace menu options

!hi( *ay /e o/-iou(, /ut don;t undere(ti*ate the $ower of i)on( that )an /e u(ed for )o**and( and

$oint( that allow( the u(e to tran(ition /etween a$$li)ation ()reen(. Dou don;t need a gra$hi) arti(t to o/tain

i)on( *any li/rarie( $ro-ide the* out of the /o.

l(o, ta/( are your friend. G(e ta/( in(tead of $o$$ing u$ window( u$on new window( to *a'e it an

ea(ier e$erien)e for your u(er.

SUMMARY

!hi( (e)tion introdu)ed the )on)e$t( of re($on(i-e de(ign for enter$ri(e we/ a$$li)ation(. !he goal i( to

*a'e a$$li)ation( fun)tion well on de-i)e( other than de('to$ /row(er(. 7ere i( a re)a$ of what we )o-ered

in thi( )ha$ter%

Re($on(i-e de(ign allow( a (ingle a$$li)ation to wor' a)ro(( *any de-i)e(.

)o**on re($on(i-e#de(ign te)hni:ue i( to di-ide G ele*ent( into a grid.

CSS>;( *edia :uery i( a 'ey te)hnology ele*ent in i*$le*enting a re($on(i-e de(ign.

?ra*ewor'( are a-aila/le with ready#to#u(e re($on(i-e layout(.

&0>&18&we/#de(ign#tool(&

Je/ =e(igner Jall. htt$%&&we/de(ignerwall.)o*&tutorial(&)((>#*edia#:uerie(

S*a(hing againe. htt$%&&www.(*a(hing*againe.)o*&re($on(i-e#we/#de(ign#guideline(#

tutorial(&a



edit add
http://mashable.com/2013/03/18/web-design-tools/http://webdesignerwall.com/tutorials/css3-media-querieshttp://keyholesoftware.com/http://mashable.com/2013/03/18/web-design-tools/http://webdesignerwall.com/tutorials/css3-media-querieshttp://keyholesoftware.com/


49/49

W&$' U'

Documents

Web Design Essentials_final